feat: structure

src/stories/AlertDialog.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from 'storybook-react-rsbuild';
+import { AlertDialog, Button } from '../components/ui';
+
+const meta = {
+  title: 'Overlays/AlertDialog',
+  component: AlertDialog,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Confirmation dialog built on Radix AlertDialog. Use for destructive or irreversible actions — focus is trapped and the cancel button is always reachable. Set `destructive` to switch the action button to the ember (red) variant.',
+      },
+    },
+  },
+  argTypes: {
+    title: { control: 'text' },
+    description: { control: 'text' },
+    cancelLabel: { control: 'text' },
+    actionLabel: { control: 'text' },
+    destructive: { control: 'boolean' },
+    trigger: { control: false },
+  },
+  args: {
+    title: 'Delete this project?',
+    description: 'This action cannot be undone.',
+    actionLabel: 'Delete',
+    cancelLabel: 'Cancel',
+    destructive: true,
+    trigger: <Button variant="ember">Delete…</Button>,
+    onAction: () => {},
+  },
+} satisfies Meta<typeof AlertDialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {};
+
+export const Destructive: Story = {
+  render: () => (
+    <AlertDialog
+      trigger={<Button variant="ember">Delete account</Button>}
+      title="Delete your account?"
+      description="All data will be permanently removed. This cannot be undone."
+      actionLabel="Delete account"
+      cancelLabel="Keep account"
+      destructive
+      onAction={() => {}}
+    />
+  ),
+};
+
+export const Confirm: Story = {
+  render: () => (
+    <AlertDialog
+      trigger={<Button variant="primary">Publish</Button>}
+      title="Publish changes?"
+      description="This will make your changes visible to all users."
+      actionLabel="Publish"
+      cancelLabel="Cancel"
+      onAction={() => {}}
+    />
+  ),
+};

src/stories/Dialog.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from 'storybook-react-rsbuild';
+import { Dialog, Button, TextField } from '../components/ui';
+
+const meta = {
+  title: 'Overlays/Dialog',
+  component: Dialog,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Modal dialog built on Radix Dialog. Pass a `trigger` to wire open/close automatically, or control it with `open` / `onOpenChange`. Title is required; description, body, and footer are optional slots.',
+      },
+    },
+  },
+  argTypes: {
+    title: { control: 'text' },
+    description: { control: 'text' },
+    trigger: { control: false },
+    children: { control: false },
+    footer: { control: false },
+  },
+  args: {
+    title: 'Rename project',
+    description: 'Choose a new name for this project.',
+    trigger: <Button variant="primary">Open dialog</Button>,
+  },
+} satisfies Meta<typeof Dialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {};
+
+export const WithBody: Story = {
+  name: 'With body',
+  render: () => (
+    <Dialog
+      trigger={<Button variant="primary">Open dialog</Button>}
+      title="Rename project"
+      description="Choose a new name for this project."
+      footer={<Button variant="primary">Save</Button>}
+    >
+      <TextField label="Project name" defaultValue="My project" />
+    </Dialog>
+  ),
+};
+
+export const NoDescription: Story = {
+  name: 'No description',
+  args: {
+    description: undefined,
+    title: 'Confirm action',
+  },
+};