lucent-ui 0.33.0 → 0.34.0

package/dist-server/src/manifest/patterns/confirmation-dialog.pattern.js

@@ -0,0 +1,95 @@
+export const PATTERN = {
+    id: 'confirmation-dialog',
+    name: 'Confirmation Dialog',
+    description: 'Centered modal-style card for destructive action confirmations with danger button pairing. For delete/remove/reset flows.',
+    category: 'action',
+    components: ['card', 'icon', 'text', 'button', 'input', 'stack', 'row'],
+    structure: `
+Card (elevated, padding="lg", maxWidth=400)
+└── Stack gap="8" align="center"
+    ├── Icon (lg, danger color)               ← warning icon
+    ├── Stack gap="1" align="center"
+    │   ├── Text (lg, semibold, center)       ← "Delete project?"
+    │   └── Text (sm, secondary, center)      ← consequence description
+    └── Row gap="3"
+        ├── Button (outline, full width)      ← "Cancel"
+        └── Button (danger, full width)       ← "Delete"
+  `.trim(),
+    code: `<Card variant="elevated" padding="lg" style={{ maxWidth: 400 }}>
+  <Stack gap="8" align="center">
+    <Icon size="xl" color="var(--lucent-danger-text)">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round">
+        <path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
+        <line x1={12} y1={9} x2={12} y2={13} />
+        <line x1={12} y1={17} x2={12.01} y2={17} />
+      </svg>
+    </Icon>
+    <Stack gap="1" align="center">
+      <Text size="lg" weight="semibold">Delete project?</Text>
+      <Text size="sm" color="secondary" align="center">This will permanently delete "Acme Corp" and all of its data. This action cannot be undone.</Text>
+    </Stack>
+    <Row gap="3" style={{ width: '100%' }}>
+      <Button variant="outline" style={{ flex: 1 }}>Cancel</Button>
+      <Button variant="danger" style={{ flex: 1 }}>Delete</Button>
+    </Row>
+  </Stack>
+</Card>`,
+    variants: [
+        {
+            title: 'With typed confirmation',
+            code: `<Card variant="elevated" padding="lg" style={{ maxWidth: 400 }}>
+  <Stack gap="8" align="center">
+    <Icon size="xl" color="var(--lucent-danger-text)">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round">
+        <path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
+        <line x1={12} y1={9} x2={12} y2={13} />
+        <line x1={12} y1={17} x2={12.01} y2={17} />
+      </svg>
+    </Icon>
+    <Stack gap="1" align="center">
+      <Text size="lg" weight="semibold">Delete your account?</Text>
+      <Text size="sm" color="secondary" align="center">All projects, data, and billing history will be permanently removed. Type DELETE to confirm.</Text>
+    </Stack>
+    <Input placeholder="Type DELETE to confirm" size="md" style={{ width: '100%' }} />
+    <Row gap="3" style={{ width: '100%' }}>
+      <Button variant="outline" style={{ flex: 1 }}>Cancel</Button>
+      <Button variant="danger" style={{ flex: 1 }} disabled>Delete account</Button>
+    </Row>
+  </Stack>
+</Card>`,
+        },
+        {
+            title: 'Non-destructive confirmation',
+            code: `<Card variant="elevated" padding="lg" style={{ maxWidth: 400 }}>
+  <Stack gap="8" align="center">
+    <Icon size="xl" color="var(--lucent-info-text)">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round">
+        <circle cx={12} cy={12} r={10} />
+        <line x1={12} y1={16} x2={12} y2={12} />
+        <line x1={12} y1={8} x2={12.01} y2={8} />
+      </svg>
+    </Icon>
+    <Stack gap="1" align="center">
+      <Text size="lg" weight="semibold">Publish changes?</Text>
+      <Text size="sm" color="secondary" align="center">This will make your draft visible to all team members. You can unpublish later from settings.</Text>
+    </Stack>
+    <Row gap="3" style={{ width: '100%' }}>
+      <Button variant="outline" style={{ flex: 1 }}>Keep as draft</Button>
+      <Button variant="primary" style={{ flex: 1 }}>Publish</Button>
+    </Row>
+  </Stack>
+</Card>`,
+        },
+    ],
+    designNotes: 'The centered layout with align="center" creates a focused, modal-like feel ' +
+        'even though this is a Card, not a true modal. The warning Icon at the top ' +
+        'provides an immediate visual signal of severity. The text stack uses gap="1" ' +
+        'to tightly couple the title and consequence description. Buttons use flex: 1 ' +
+        'inside a full-width Row so they split evenly — Cancel (outline) on the left, ' +
+        'destructive action (danger) on the right, following the convention of placing ' +
+        'the primary action on the right. The typed confirmation variant adds an Input ' +
+        'between the text and buttons with the danger Button disabled until the user ' +
+        'types the confirmation text. The non-destructive variant swaps the danger ' +
+        'Button for primary and the warning Icon for info, reusing the same centered ' +
+        'layout for any "are you sure?" flow.',
+};

package/dist-server/src/manifest/patterns/notification-card.pattern.js

@@ -0,0 +1,108 @@
+export const PATTERN = {
+    id: 'announcement-card',
+    name: 'Announcement Card',
+    description: 'Rich announcement card with optional media slot, status icon, title, message, and action buttons. For in-page announcements, feature launches, promotions, or system notices.',
+    category: 'card',
+    components: ['card', 'icon', 'text', 'button', 'chip', 'stack', 'row'],
+    structure: `
+Card (elevated, padding="lg", media=<img>)
+└── Stack gap="4"
+    ├── Row gap="2" wrap                       ← optional badge row
+    │   └── Chip (accent/success, sm)          ← category / "New"
+    ├── Stack gap="1"
+    │   ├── Text (md, semibold)                ← title
+    │   └── Text (sm, secondary)               ← message body
+    └── Row gap="2"
+        ├── Button (primary, sm)               ← action
+        └── Button (ghost, sm)                 ← dismiss
+  `.trim(),
+    code: `<Card
+  variant="elevated"
+  padding="lg"
+  style={{ width: 380 }}
+  media={<img src="/announcements/feature-launch.jpg" alt="New dashboard" style={{ width: '100%', height: 160, objectFit: 'cover', display: 'block' }} />}
+>
+  <Stack gap="4">
+    <Row gap="2">
+      <Chip variant="accent" size="sm">New Feature</Chip>
+    </Row>
+    <Stack gap="1">
+      <Text size="md" weight="semibold">Redesigned Analytics Dashboard</Text>
+      <Text size="sm" color="secondary">Track key metrics at a glance with our new real-time dashboard. Includes custom date ranges, export to CSV, and team sharing.</Text>
+    </Stack>
+    <Row gap="2">
+      <Button variant="primary" size="sm">Try it now</Button>
+      <Button variant="ghost" size="sm">Learn more</Button>
+    </Row>
+  </Stack>
+</Card>`,
+    variants: [
+        {
+            title: 'System notice (no media, with status icon)',
+            code: `<Card variant="outline" padding="md" style={{ width: 400 }}>
+  <Row gap="3" align="start">
+    <Icon size="lg" color="var(--lucent-warning-text)">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round">
+        <path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
+        <line x1={12} y1={9} x2={12} y2={13} />
+        <line x1={12} y1={17} x2={12.01} y2={17} />
+      </svg>
+    </Icon>
+    <Stack gap="2" style={{ flex: 1 }}>
+      <Text size="sm" weight="semibold">Storage almost full</Text>
+      <Text size="sm" color="secondary">You've used 92% of your storage. Upgrade your plan or delete unused files to free up space.</Text>
+      <Row gap="2">
+        <Button variant="primary" size="sm">Upgrade plan</Button>
+        <Button variant="ghost" size="sm">Manage storage</Button>
+      </Row>
+    </Stack>
+  </Row>
+</Card>`,
+        },
+        {
+            title: 'Promotional banner with media',
+            code: `<Card variant="filled" padding="md" hoverable style={{ width: 380 }}>
+  <Row gap="5" align="center">
+    <div style={{ width: 80, height: 80, borderRadius: 'var(--lucent-radius-lg)', overflow: 'hidden', flexShrink: 0 }}>
+      <img src="/promo/spring-sale.jpg" alt="Spring sale" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
+    </div>
+    <Stack gap="2" style={{ flex: 1 }}>
+      <Row gap="2" align="center">
+        <Text size="md" weight="semibold">Spring Sale</Text>
+        <Chip variant="success" size="sm">-30%</Chip>
+      </Row>
+      <Text size="sm" color="secondary">All Pro plans are 30% off through April. Upgrade now and lock in the price for a year.</Text>
+      <Button variant="primary" size="sm" style={{ alignSelf: 'flex-start' }}>Claim offer</Button>
+    </Stack>
+  </Row>
+</Card>`,
+        },
+        {
+            title: 'Success confirmation',
+            code: `<Card variant="outline" padding="md" style={{ width: 400, borderColor: 'var(--lucent-success-default)' }}>
+  <Row gap="3" align="start">
+    <Icon size="lg" color="var(--lucent-success-text)">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round">
+        <path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
+        <polyline points="22 4 12 14.01 9 11.01" />
+      </svg>
+    </Icon>
+    <Stack gap="1" style={{ flex: 1 }}>
+      <Text size="sm" weight="semibold">Payment received</Text>
+      <Text size="sm" color="secondary">Your invoice #1042 for $2,400.00 has been paid successfully.</Text>
+    </Stack>
+    <Button variant="ghost" size="sm">Dismiss</Button>
+  </Row>
+</Card>`,
+        },
+    ],
+    designNotes: 'The default announcement card uses the Card media slot for a full-bleed hero ' +
+        'image that grabs attention, followed by an optional Chip badge for categorization, ' +
+        'then title + description + action buttons. This distinguishes it from the Alert ' +
+        'molecule which is a lightweight status banner — the Announcement Card is richer, ' +
+        'supports media, and drives the user toward an action. The system notice variant ' +
+        'drops the media for a compact icon-led layout similar to Alert but with action ' +
+        'buttons. The promotional variant uses an inline thumbnail (Row with rounded image) ' +
+        'for a side-by-side layout that works well for offers and upsells. The success ' +
+        'variant uses a tinted border to reinforce status at a glance.',
+};

package/dist-server/src/manifest/patterns/product-item-card.pattern.js

@@ -0,0 +1,110 @@
+export const PATTERN = {
+    id: 'product-item-card',
+    name: 'Product/Item Card',
+    description: 'Versatile content card with media slot, title, tags, metadata, and CTA. Reusable for products, articles, team members, or any entity list.',
+    category: 'card',
+    components: ['card', 'avatar', 'icon', 'text', 'chip', 'button', 'stack', 'row'],
+    structure: `
+Card (elevated, padding="lg", media=<img>)
+└── Stack gap="4"
+    ├── Stack gap="1"
+    │   ├── Text (md, semibold)        ← title
+    │   └── Text (sm, secondary)       ← subtitle
+    ├── Row gap="2" wrap
+    │   └── Chip[] (neutral, sm)       ← tags / categories
+    ├── Row gap="4" justify="between" align="baseline"
+    │   ├── Text (lg, bold, display)   ← price / key metric
+    │   └── Text (xs, secondary)       ← secondary info
+    └── Button (primary, full width)   ← CTA
+  `.trim(),
+    code: `<Card
+  variant="elevated"
+  padding="lg"
+  style={{ width: 320 }}
+  media={<img src="/products/headphones.jpg" alt="Wireless Headphones" style={{ width: '100%', height: 180, objectFit: 'cover', display: 'block' }} />}
+>
+  <Stack gap="4">
+    <Stack gap="1">
+      <Text size="md" weight="semibold">Wireless Headphones</Text>
+      <Text size="sm" color="secondary">Active noise cancelling, 40hr battery</Text>
+    </Stack>
+    <Row gap="2" wrap>
+      <Chip variant="neutral" size="sm">Audio</Chip>
+      <Chip variant="neutral" size="sm">Bluetooth</Chip>
+      <Chip variant="neutral" size="sm">ANC</Chip>
+    </Row>
+    <Row gap="4" justify="between" align="baseline">
+      <Text size="lg" weight="bold" family="display">$249.00</Text>
+      <Text size="xs" color="secondary">Free shipping</Text>
+    </Row>
+    <Button variant="primary" style={{ width: '100%' }}>Add to Cart</Button>
+  </Stack>
+</Card>`,
+    variants: [
+        {
+            title: 'Article card',
+            code: `<Card variant="outline" padding="lg" hoverable style={{ width: 340 }}>
+  <Stack gap="4">
+    <Row gap="3" align="start">
+      <Icon size={20} color="var(--lucent-text-secondary)">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round">
+          <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
+          <polyline points="14 2 14 8 20 8" />
+          <line x1={16} y1={13} x2={8} y2={13} />
+          <line x1={16} y1={17} x2={8} y2={17} />
+        </svg>
+      </Icon>
+      <Stack gap="1" style={{ flex: 1 }}>
+        <Text size="md" weight="semibold">Design Tokens at Scale</Text>
+        <Text size="xs" color="secondary">Published Mar 15, 2026</Text>
+      </Stack>
+    </Row>
+    <Text size="sm" color="secondary">
+      How we unified spacing, color, and typography across 12 product surfaces using a single token system.
+    </Text>
+    <Row gap="2" wrap>
+      <Chip variant="neutral" size="sm">Design Systems</Chip>
+      <Chip variant="neutral" size="sm">Tokens</Chip>
+    </Row>
+    <Row gap="4" justify="between" align="center">
+      <Text size="xs" color="secondary">8 min read</Text>
+      <Button variant="ghost" size="sm">Read more</Button>
+    </Row>
+  </Stack>
+</Card>`,
+        },
+        {
+            title: 'Team member card',
+            code: `<Card variant="filled" padding="lg" style={{ width: 280 }}>
+  <Stack gap="4">
+    <Stack gap="3" align="center">
+      <Avatar src="/avatars/alex.jpg" alt="Alex Chen" size="lg" />
+      <Stack gap="0" align="center">
+        <Text size="md" weight="semibold">Alex Chen</Text>
+        <Text size="sm" color="secondary">Engineering Lead</Text>
+      </Stack>
+    </Stack>
+    <Row gap="2" wrap justify="center">
+      <Chip variant="neutral" size="sm">React</Chip>
+      <Chip variant="neutral" size="sm">Go</Chip>
+      <Chip variant="neutral" size="sm">Platform</Chip>
+    </Row>
+    <Row gap="3">
+      <Button variant="outline" style={{ flex: 1 }} size="sm">Profile</Button>
+      <Button variant="primary" style={{ flex: 1 }} size="sm">Message</Button>
+    </Row>
+  </Stack>
+</Card>`,
+        },
+    ],
+    designNotes: 'The default product card uses the Card media slot for a full-bleed hero image ' +
+        'at the top, keeping the content area clean with just title, tags, price, and CTA. ' +
+        'Tags use neutral Chips at sm size for low visual weight — they inform without ' +
+        'competing with the title. The price/metric row uses justify="between" with ' +
+        'align="baseline" to anchor the large display-font value and the secondary caption ' +
+        'to the same text baseline. A full-width primary Button as the sole CTA creates a ' +
+        'clear action target. The article variant swaps the media slot for an inline Icon + ' +
+        'text header and replaces the price row with read-time + ghost button, keeping the ' +
+        'same vertical rhythm. The team member variant centers the content for a profile-style ' +
+        'layout and uses a dual-button footer with flex: 1 for equal width.',
+};

package/dist-server/src/manifest/recipes/action-bar.recipe.js

@@ -0,0 +1,91 @@
+export const RECIPE = {
+    id: 'action-bar',
+    name: 'Action Bar',
+    description: 'Page-level or card-level header pairing a title with action buttons. Page headers use breadcrumb, large display title, and a divider below; card headers are compact with small text.',
+    category: 'action',
+    components: ['text', 'button', 'row', 'stack', 'breadcrumb', 'divider', 'card'],
+    structure: `
+Page header:
+Stack gap="4"
+├── Breadcrumb                               ← navigation context
+├── Row justify="between" align="end"
+│   ├── Stack gap="1"
+│   │   ├── Text (h1, 3xl, bold, display)    ← page title
+│   │   └── Text (sm, secondary)             ← subtitle
+│   └── Row gap="2"                          ← actions
+│       ├── Button (outline, sm)
+│       └── Button (primary, sm)
+└── Divider
+
+Card header:
+Row justify="between" align="start"
+├── Stack gap="1"
+│   ├── Text (xs, secondary, uppercase, tight) ← category label
+│   └── Text (md, semibold, tight)            ← section title
+└── Row gap="1"                              ← compact actions (top-aligned)
+    └── Button[] (ghost, xs)
+  `.trim(),
+    code: `<Stack gap="4">
+  <Breadcrumb items={[
+    { label: 'Home', href: '#' },
+    { label: 'Projects', href: '#' },
+    { label: 'Acme Corp' },
+  ]} />
+  <Row justify="between" align="end">
+    <Stack gap="1">
+      <Text as="h1" size="3xl" weight="bold" family="display">Acme Corp</Text>
+      <Text size="sm" color="secondary">Last updated 5 minutes ago</Text>
+    </Stack>
+    <Row gap="2">
+      <Button variant="outline" size="sm">Export</Button>
+      <Button variant="primary" size="sm">New report</Button>
+    </Row>
+  </Row>
+  <Divider />
+</Stack>`,
+    variants: [
+        {
+            title: 'Page header — danger zone',
+            code: `<Stack gap="4">
+  <Breadcrumb items={[
+    { label: 'Home', href: '#' },
+    { label: 'Settings', href: '#' },
+    { label: 'Danger zone' },
+  ]} />
+  <Row justify="between" align="end">
+    <Stack gap="1">
+      <Text as="h1" size="3xl" weight="bold" family="display">Danger zone</Text>
+      <Text size="sm" color="secondary">These actions are irreversible.</Text>
+    </Stack>
+    <Button variant="danger" size="sm">Delete project</Button>
+  </Row>
+  <Divider />
+</Stack>`,
+        },
+        {
+            title: 'Card header (compact with label)',
+            code: `<Card variant="outline" padding="md" style={{ width: 400 }}>
+  <Stack gap="4">
+    <Row justify="between" align="start">
+      <Stack gap="1">
+        <Text size="xs" color="secondary" weight="medium" style={{ letterSpacing: 'var(--lucent-letter-spacing-tight)', textTransform: 'uppercase' }}>Activity</Text>
+        <Text size="md" weight="semibold" style={{ letterSpacing: 'var(--lucent-letter-spacing-base)' }}>Recent activity</Text>
+      </Stack>
+      <Row gap="1">
+        <Button variant="ghost" size="xs">Filter</Button>
+        <Button variant="ghost" size="xs">Export</Button>
+      </Row>
+    </Row>
+    <Text size="xs" color="secondary">No activity to show yet.</Text>
+  </Stack>
+</Card>`,
+        },
+    ],
+    designNotes: 'Page headers and card headers have very different scales. Page headers use 3xl ' +
+        'display font for the title, Breadcrumb for navigation context, and a Divider to ' +
+        'separate the header from page content below. align="end" on the Row anchors the ' +
+        'buttons to the baseline of the title block so they sit level with the subtitle. ' +
+        'Card headers are compact: sm semibold text with xs/ghost buttons that recede ' +
+        'visually. The primary action is always rightmost following natural reading order. ' +
+        'Both patterns use justify="between" to push title and actions to opposite edges.',
+};

package/dist-server/src/manifest/recipes/collapsible-card.recipe.js

@@ -0,0 +1,100 @@
+export const RECIPE = {
+    id: 'collapsible-card',
+    name: 'Collapsible Card',
+    description: 'Card with an expandable/collapsible section using smooth height animation, available in all card variants.',
+    category: 'card',
+    components: ['card', 'collapsible', 'text'],
+    structure: `
+Card (padding="none", hoverable)
+└── Collapsible
+    ├── trigger: Text (sm, semibold)         ← clickable header
+    └── children                             ← collapsible body
+        └── Text (sm, secondary)             ← content
+  `.trim(),
+    code: `<Card variant="outline" padding="none" hoverable style={{ width: 360 }}>
+  <Collapsible
+    trigger={<Text as="span" weight="semibold" size="sm">Details</Text>}
+    defaultOpen
+  >
+    <Text size="sm" color="secondary">
+      The Collapsible auto-detects its Card parent and bleeds the trigger
+      full-width. Content inherits the card's padding.
+    </Text>
+  </Collapsible>
+</Card>`,
+    variants: [
+        {
+            title: 'Ghost variant',
+            code: `<Card variant="ghost" padding="none" hoverable style={{ width: 360 }}>
+  <Collapsible trigger={<Text as="span" weight="semibold" size="sm">FAQ item</Text>}>
+    <Text size="sm" color="secondary">
+      Transparent container — content floats directly on the page surface.
+    </Text>
+  </Collapsible>
+</Card>`,
+        },
+        {
+            title: 'Elevated variant',
+            code: `<Card variant="elevated" padding="none" hoverable style={{ width: 360 }}>
+  <Collapsible trigger={<Text as="span" weight="semibold" size="sm">Advanced options</Text>}>
+    <Text size="sm" color="secondary">
+      Elevated cards cast a shadow — use for prominent collapsible sections.
+    </Text>
+  </Collapsible>
+</Card>`,
+        },
+        {
+            title: 'Combo (two-tone nested cards)',
+            code: `<Card variant="filled" padding="none" hoverable style={{ width: 360 }}>
+  <Collapsible
+    padded={false}
+    trigger={<Text as="span" weight="semibold" size="sm">Combo layout</Text>}
+  >
+    <Card
+      variant="elevated"
+      padding="sm"
+      style={{ margin: 'var(--lucent-space-1) var(--lucent-space-2) var(--lucent-space-2)' }}
+    >
+      <Text size="sm" color="secondary">
+        Two-tone layout — flat trigger surface, elevated body.
+      </Text>
+    </Card>
+  </Collapsible>
+</Card>`,
+        },
+        {
+            title: 'With localStorage persistence',
+            code: `function CollapsibleSection({ id, title, children }) {
+  const storageKey = \`collapsible-\${id}\`;
+  const [open, setOpen] = React.useState(() => {
+    const saved = localStorage.getItem(storageKey);
+    return saved !== null ? saved === 'true' : true;
+  });
+
+  const handleChange = (next) => {
+    setOpen(next);
+    localStorage.setItem(storageKey, String(next));
+  };
+
+  return (
+    <Card variant="outline" padding="none" hoverable>
+      <Collapsible
+        open={open}
+        onOpenChange={handleChange}
+        trigger={<Text as="span" weight="semibold" size="sm">{title}</Text>}
+      >
+        {children}
+      </Collapsible>
+    </Card>
+  );
+}`,
+        },
+    ],
+    designNotes: 'Card uses padding="none" because the Collapsible auto-detects its Card parent ' +
+        'via CardPaddingContext and bleeds the trigger full-width while applying card ' +
+        'padding to the body content. The hoverable prop gives hover lift feedback ' +
+        'without making the card itself interactive — the Collapsible trigger handles ' +
+        'clicks. For the combo variant, padded={false} on Collapsible removes its built-in ' +
+        'content padding so the nested elevated Card can control its own spacing with ' +
+        'custom margin. This creates a two-tone visual: flat trigger + elevated body.',
+};

package/dist-server/src/manifest/recipes/empty-state-card.recipe.js

@@ -0,0 +1,72 @@
+export const RECIPE = {
+    id: 'empty-state-card',
+    name: 'Empty State Card',
+    description: 'Centered empty state with illustration icon, heading, description, and call-to-action button inside a card.',
+    category: 'card',
+    components: ['card', 'empty-state', 'icon', 'button'],
+    structure: `
+Card (outline, padding="lg")
+└── EmptyState
+    ├── illustration: Icon (xl)              ← decorative SVG
+    ├── title: string                        ← heading
+    ├── description: string                  ← explanatory text
+    └── action: Button (secondary / primary) ← CTA
+  `.trim(),
+    code: `<Card variant="outline" padding="lg" style={{ width: 400 }}>
+  <EmptyState
+    illustration={
+      <Icon size="xl">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round">
+          <circle cx={11} cy={11} r={8} />
+          <path d="M21 21l-4.35-4.35" />
+        </svg>
+      </Icon>
+    }
+    title="No results found"
+    description="Try adjusting your search or filters to find what you're looking for."
+    action={<Button variant="secondary" size="sm">Clear filters</Button>}
+  />
+</Card>`,
+    variants: [
+        {
+            title: 'Getting started empty state',
+            code: `<Card variant="elevated" padding="lg" style={{ width: 400 }}>
+  <EmptyState
+    illustration={
+      <Icon size="xl">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round">
+          <path d="M12 5v14M5 12h14" />
+        </svg>
+      </Icon>
+    }
+    title="No projects yet"
+    description="Create your first project to get started."
+    action={<Button variant="primary" size="sm">Create project</Button>}
+  />
+</Card>`,
+        },
+        {
+            title: 'Error empty state with retry',
+            code: `<Card variant="outline" padding="lg" style={{ width: 400 }}>
+  <EmptyState
+    illustration={
+      <Icon size="xl">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round">
+          <circle cx={12} cy={12} r={10} />
+          <path d="M12 8v4M12 16h.01" />
+        </svg>
+      </Icon>
+    }
+    title="Something went wrong"
+    description="We couldn't load your data. Please try again."
+    action={<Button variant="outline" size="sm">Retry</Button>}
+  />
+</Card>`,
+        },
+    ],
+    designNotes: 'EmptyState handles internal centering and spacing — no need for manual Stack/Row ' +
+        'layout inside it. The illustration uses Icon at xl size for visual weight without ' +
+        'overwhelming the text. Card variant should match the context: outline for inline ' +
+        'empty states (e.g. a table with no rows), elevated for standalone pages. The ' +
+        'action button uses size="sm" to avoid competing with the heading for attention.',
+};