docs: finished Alert docs page

.vscode/settings.json

@@ -1,11 +1,7 @@
 {
   "todo-tree.tree.showBadges": true,
-  "css.customData": [".vscode/tailwind.json"],
-  "workbench.colorCustomizations": {
-    "titleBar.activeBackground": "#007fff",
-    "titleBar.activeForeground": "#ffffff",
-    "titleBar.inactiveBackground": "#007fff",
-    "titleBar.inactiveForeground": "#ffffff"
-  },
+  "css.customData": [
+    ".vscode/tailwind.json"
+  ],
   "typescript.tsdk": "node_modules\\typescript\\lib"
 }

apps/docs/__registry__/index.tsx

@@ -5,13 +5,6 @@ import * as React from "react";
 
 export const Index: Record<string, any> = {
   default: {
-    "accordion-demo": {
-      name: "accordion-demo",
-      type: "components:example",
-      registryDependencies: ["accordion"],
-      component: React.lazy(() => import("@/registry/demos/accordion-demo")),
-      files: ["registry/demos/accordion-demo.tsx"]
-    },
     "login-form-demo": {
       name: "login-form-demo",
       type: "components:example",
@@ -42,12 +35,35 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/demos/app-layout-demo")),
       files: ["registry/demos/app-layout-demo.tsx"]
     },
+    "accordion-demo": {
+      name: "accordion-demo",
+      type: "components:example",
+      registryDependencies: ["accordion"],
+      component: React.lazy(() => import("@/registry/demos/accordion-demo")),
+      files: ["registry/demos/accordion-demo.tsx"]
+    },
     "toast-demo": {
       name: "toast-demo",
       type: "components:example",
       registryDependencies: ["toast"],
       component: React.lazy(() => import("@/registry/demos/toast-demo")),
       files: ["registry/demos/toast-demo.tsx"]
+    },
+    "alert-demo": {
+      name: "alert-demo",
+      type: "components:example",
+      registryDependencies: ["alert"],
+      component: React.lazy(() => import("@/registry/demos/alert-demo")),
+      files: ["registry/demos/alert-demo.tsx"]
+    },
+    "alert-customized-demo": {
+      name: "alert-customized-demo",
+      type: "components:example",
+      registryDependencies: ["alert"],
+      component: React.lazy(
+        () => import("@/registry/demos/alert-customized-demo")
+      ),
+      files: ["registry/demos/alert-customized-demo.tsx"]
     }
   }
 };

apps/docs/config/docs.ts

@@ -60,6 +60,7 @@ export const docsConfig: DocsConfig = {
       title: "Elements",
       items: [
         { title: "Accordion", href: "/docs/elements/accordion", items: [] },
+        { title: "Alert", href: "/docs/elements/alert", items: [] },
         {
           title: "Toaster",
           href: "/docs/elements/toaster",

apps/docs/content/docs/elements/alert.mdx

@@ -7,3 +7,22 @@ links:
 ---
 
 <ComponentPreview name="alert-demo" />
+
+## Props
+
+| Name          | Type                                                                          | Default | Description                                                                                                                          |
+| ------------- | ----------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| severity      | `none` \| `success` \| `warning` \| `error` \| `info` \| `hyper` \| `oceanic` | `none`  | The severity of the alert.                                                                                                           |
+| title         | string                                                                        | -       | The title of the alert placed above the text of the alert. Can be used alone.                                                        |
+| text          | string                                                                        | -       | The text of the alert placed below the title of the alert. Can be used alone.                                                        |
+| duration      | number                                                                        | -       | The duration for the alert to stay on the screen.                                                                                    |
+| direction     | `rtl` \| `ltr`                                                                | `ltr`   | The text direction of the alert.                                                                                                     |
+| actions       | array of objects                                                              | -       | The actions that can be performed from the alert. Each object in the array should have a `label`, `onClick` function, and `variant`. |
+| persistent    | boolean                                                                       | false   | If true, removes the close button.                                                                                                   |
+| icon          | any                                                                           | -       | The icon to be displayed in the alert.                                                                                               |
+| className     | any                                                                           | -       | The CSS class to apply to the alert.                                                                                                 |
+| onAlertClosed | function                                                                      | -       | The function to call when the alert is closed.                                                                                       |
+
+## Custom Example
+
+<ComponentPreview name="alert-customized-demo" />

apps/docs/registry/demos/alert-customized-demo.tsx

@@ -0,0 +1,23 @@
+import { Alert } from "@sikka/hawa/alert";
+
+export default function AlertDemo() {
+  return (
+    <Alert
+      severity="info"
+      title="Information"
+      text="This is an informational alert."
+      // duration={5000}
+      variant="normal"
+      direction="ltr"
+      actions={[
+        {
+          label: "Action",
+          onClick: () => console.log("Action clicked"),
+          variant: "default"
+        }
+      ]}
+      persistent={false}
+      onAlertClosed={() => console.log("Alert closed")}
+    />
+  );
+}

apps/docs/registry/demos/alert-demo.tsx

@@ -1,19 +1,16 @@
-import { Terminal } from "lucide-react"
-
-import {
-  Alert,
-  AlertDescription,
-  AlertTitle,
-} from "@/registry/default/ui/alert"
+import { Alert } from "@sikka/hawa/alert";
 
 export default function AlertDemo() {
   return (
-    <Alert>
-      <Terminal className="h-4 w-4" />
-      <AlertTitle>Heads up!</AlertTitle>
-      <AlertDescription>
-        You can add components to your app using the cli.
-      </AlertDescription>
-    </Alert>
-  )
+    <div>
+      <Alert text="This is a persistent alert" persistent />
+      <Alert text="This is a default alert" />
+      <Alert severity="info" text="This is an info alert" />
+      <Alert severity="success" text="This is a success alert" />
+      <Alert severity="warning" text="This is a warning alert" />
+      <div className="mb-2">Styles</div>
+      <Alert severity="hyper" text="This is a hyper alert" />
+      <Alert severity="oceanic" text="This is a oceanic alert" />
+    </div>
+  );
 }