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 { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@ai-ui/ui";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Components/Card",
+  component: Card,
+  args: {
+    tone: "default",
+    interactive: false
+  },
+  argTypes: {
+    className: {
+      control: false
+    },
+    interactive: {
+      control: "boolean"
+    },
+    tone: {
+      control: "radio",
+      options: ["default", "subtle", "accent"]
+    }
+  },
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+} satisfies Meta<typeof Card>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: (args) => (
+    <Card {...args} className="w-[420px]">
+      <CardHeader>
+        <CardTitle>Release card</CardTitle>
+        <CardDescription>Summarize state, ownership, and next action.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        This surface is tuned for editorial dashboards and settings views.
+      </CardContent>
+      <CardFooter>
+        <Button size="sm">Open</Button>
+        <Button size="sm" variant="ghost">
+          Dismiss
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+};
+
+export const Grid: Story = {
+  render: () => (
+    <div className="grid w-[760px] gap-4 md:grid-cols-2">
+      <Card>
+        <CardHeader>
+          <CardTitle>Default tone</CardTitle>
+          <CardDescription>Standard elevated panel for data and form sections.</CardDescription>
+        </CardHeader>
+        <CardContent>Reliable baseline for most admin surfaces.</CardContent>
+      </Card>
+      <Card interactive tone="accent">
+        <CardHeader>
+          <CardTitle>Interactive accent</CardTitle>
+          <CardDescription>Hover-capable treatment for navigable cards.</CardDescription>
+        </CardHeader>
+        <CardContent>Use sparingly for overview screens with clear primary actions.</CardContent>
+      </Card>
+    </div>
+  )
+};