feat: add badge card avatar alert and progress

2026-03-19 17:24:22 +08:00
parent 063179933c
commit cb15b46b0c
23 changed files with 1342 additions and 0 deletions
@@ -0,0 +1,72 @@
+import { Badge } from "@ai-ui/ui";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Components/Badge",
+  component: Badge,
+  args: {
+    children: "Stable",
+    size: "md",
+    tone: "neutral",
+    variant: "subtle"
+  },
+  argTypes: {
+    asChild: {
+      control: "boolean"
+    },
+    children: {
+      control: "text"
+    },
+    className: {
+      control: false
+    },
+    size: {
+      control: "radio",
+      options: ["sm", "md"]
+    },
+    tone: {
+      control: "select",
+      options: ["neutral", "primary", "success", "warning", "destructive"]
+    },
+    variant: {
+      control: "radio",
+      options: ["subtle", "solid", "outline"]
+    }
+  },
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {};
+
+export const Matrix: Story = {
+  render: () => (
+    <div className="grid w-[720px] gap-4">
+      <div className="flex flex-wrap items-center gap-3">
+        <Badge>Neutral</Badge>
+        <Badge tone="primary">Primary</Badge>
+        <Badge tone="success">Success</Badge>
+        <Badge tone="warning">Warning</Badge>
+        <Badge tone="destructive">Destructive</Badge>
+      </div>
+      <div className="flex flex-wrap items-center gap-3">
+        <Badge variant="outline">Outline</Badge>
+        <Badge tone="primary" variant="outline">
+          Brand
+        </Badge>
+        <Badge tone="success" variant="solid">
+          Shipped
+        </Badge>
+        <Badge size="sm" tone="warning" variant="solid">
+          Needs review
+        </Badge>
+      </div>
+    </div>
+  )
+};