@open-mercato/core 0.6.7 → 0.6.8-develop.6874.1.982d6097d8

package/dist/modules/design_system/gallery/entries/display.js

@@ -0,0 +1,785 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Building2, MoreHorizontal } from "lucide-react";
+import { Badge } from "@open-mercato/ui/primitives/badge";
+import { StatusBadge } from "@open-mercato/ui/primitives/status-badge";
+import { Tag } from "@open-mercato/ui/primitives/tag";
+import { Avatar, AvatarStack } from "@open-mercato/ui/primitives/avatar";
+import { Kbd, KbdShortcut } from "@open-mercato/ui/primitives/kbd";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow
+} from "@open-mercato/ui/primitives/table";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from "@open-mercato/ui/primitives/card";
+import { Separator } from "@open-mercato/ui/primitives/separator";
+import { ScrollArea } from "@open-mercato/ui/primitives/scroll-area";
+import {
+  ActivityFeed,
+  ActivityFeedComment,
+  ActivityFeedFileChip,
+  ActivityFeedItem,
+  ActivityFeedStatusChip
+} from "@open-mercato/ui/primitives/activity-feed";
+import { IconButton } from "@open-mercato/ui/primitives/icon-button";
+const badgeEntry = {
+  id: "badge",
+  title: "Badge",
+  importPath: "@open-mercato/ui/primitives/badge",
+  usage: {
+    do: [
+      "Counts and short semantic labels; the brand variant for custom-view and renewal pills.",
+      "Semantic variants (success/warning/info/neutral/error) come from status tokens \u2014 no custom colors."
+    ],
+    dont: ["Not for system statuses (use StatusBadge) or user-applied labels (use Tag)."]
+  },
+  variants: [
+    {
+      id: "semantic",
+      title: "Semantic variants",
+      render: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Badge, { variant: "success", children: "Success" }),
+        /* @__PURE__ */ jsx(Badge, { variant: "warning", children: "Warning" }),
+        /* @__PURE__ */ jsx(Badge, { variant: "info", children: "Info" }),
+        /* @__PURE__ */ jsx(Badge, { variant: "neutral", children: "Neutral" }),
+        /* @__PURE__ */ jsx(Badge, { variant: "error", children: "Error" }),
+        /* @__PURE__ */ jsx(Badge, { variant: "brand", children: "Brand" })
+      ] }),
+      code: `import { Badge } from '@open-mercato/ui/primitives/badge'
+
+<Badge variant="success">Success</Badge>
+<Badge variant="warning">Warning</Badge>
+<Badge variant="info">Info</Badge>
+<Badge variant="neutral">Neutral</Badge>
+<Badge variant="error">Error</Badge>
+<Badge variant="brand">Brand</Badge>`
+    },
+    {
+      id: "sizes",
+      title: "Sizes",
+      render: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Badge, { variant: "info", size: "lg", children: "Large" }),
+        /* @__PURE__ */ jsx(Badge, { variant: "info", size: "default", children: "Default" }),
+        /* @__PURE__ */ jsx(Badge, { variant: "info", size: "sm", children: "Small" })
+      ] }),
+      code: `import { Badge } from '@open-mercato/ui/primitives/badge'
+
+<Badge variant="info" size="lg">Large</Badge>
+<Badge variant="info" size="default">Default</Badge>
+<Badge variant="info" size="sm">Small</Badge>`
+    },
+    {
+      id: "dot",
+      title: "With dot",
+      render: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Badge, { variant: "success", dot: true, children: "Active" }),
+        /* @__PURE__ */ jsx(Badge, { variant: "neutral", dot: true, children: "Draft" }),
+        /* @__PURE__ */ jsx(Badge, { variant: "brand", dot: true, children: "Custom view" })
+      ] }),
+      code: `import { Badge } from '@open-mercato/ui/primitives/badge'
+
+<Badge variant="success" dot>Active</Badge>
+<Badge variant="neutral" dot>Draft</Badge>
+<Badge variant="brand" dot>Custom view</Badge>`
+    },
+    {
+      id: "removable",
+      title: "Removable",
+      render: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Badge, { variant: "neutral", removable: true, onRemove: () => {
+        }, children: "Filter: Region" }),
+        /* @__PURE__ */ jsx(Badge, { variant: "brand", removable: true, onRemove: () => {
+        }, children: "Renewal" })
+      ] }),
+      code: `import { Badge } from '@open-mercato/ui/primitives/badge'
+
+<Badge variant="neutral" removable onRemove={() => setRegion(null)}>Filter: Region</Badge>
+<Badge variant="brand" removable onRemove={() => clearTag()}>Renewal</Badge>`
+    }
+  ]
+};
+const statusBadgeEntry = {
+  id: "status-badge",
+  title: "StatusBadge",
+  importPath: "@open-mercato/ui/primitives/status-badge",
+  usage: {
+    do: [
+      "System-computed statuses (active, pending, failed) \u2014 drive variants through a shared StatusMap.",
+      "The dot makes state scannable in dense tables."
+    ],
+    dont: ["Not for user-applied labels or categories \u2014 that is Tag."]
+  },
+  variants: [
+    {
+      id: "with-dot",
+      title: "Variants with dot",
+      render: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(StatusBadge, { variant: "success", dot: true, children: "Active" }),
+        /* @__PURE__ */ jsx(StatusBadge, { variant: "warning", dot: true, children: "Pending" }),
+        /* @__PURE__ */ jsx(StatusBadge, { variant: "error", dot: true, children: "Failed" }),
+        /* @__PURE__ */ jsx(StatusBadge, { variant: "info", dot: true, children: "Syncing" }),
+        /* @__PURE__ */ jsx(StatusBadge, { variant: "neutral", dot: true, children: "Archived" })
+      ] }),
+      code: `import { StatusBadge } from '@open-mercato/ui/primitives/status-badge'
+
+<StatusBadge variant="success" dot>Active</StatusBadge>
+<StatusBadge variant="warning" dot>Pending</StatusBadge>
+<StatusBadge variant="error" dot>Failed</StatusBadge>
+<StatusBadge variant="info" dot>Syncing</StatusBadge>
+<StatusBadge variant="neutral" dot>Archived</StatusBadge>`
+    },
+    {
+      id: "without-dot",
+      title: "Without dot",
+      render: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(StatusBadge, { variant: "success", children: "Paid" }),
+        /* @__PURE__ */ jsx(StatusBadge, { variant: "neutral", children: "Draft" })
+      ] }),
+      code: `import { StatusBadge } from '@open-mercato/ui/primitives/status-badge'
+
+<StatusBadge variant="success">Paid</StatusBadge>
+<StatusBadge variant="neutral">Draft</StatusBadge>`
+    }
+  ]
+};
+const tagEntry = {
+  id: "tag",
+  title: "Tag",
+  importPath: "@open-mercato/ui/primitives/tag",
+  usage: {
+    do: ["User-applied labels and categories; map domain types via TagMap for consistency."],
+    dont: ["Not for system status \u2014 that is StatusBadge."]
+  },
+  variants: [
+    {
+      id: "variants",
+      title: "Variants",
+      render: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Tag, { children: "default" }),
+        /* @__PURE__ */ jsx(Tag, { variant: "success", children: "success" }),
+        /* @__PURE__ */ jsx(Tag, { variant: "warning", children: "warning" }),
+        /* @__PURE__ */ jsx(Tag, { variant: "error", children: "error" }),
+        /* @__PURE__ */ jsx(Tag, { variant: "info", children: "info" }),
+        /* @__PURE__ */ jsx(Tag, { variant: "neutral", children: "neutral" }),
+        /* @__PURE__ */ jsx(Tag, { variant: "brand", children: "brand" }),
+        /* @__PURE__ */ jsx(Tag, { variant: "pink", children: "pink" })
+      ] }),
+      code: `import { Tag } from '@open-mercato/ui/primitives/tag'
+
+<Tag>default</Tag>
+<Tag variant="success">success</Tag>
+<Tag variant="warning">warning</Tag>
+<Tag variant="error">error</Tag>
+<Tag variant="info">info</Tag>
+<Tag variant="neutral">neutral</Tag>
+<Tag variant="brand">brand</Tag>
+<Tag variant="pink">pink</Tag>`
+    },
+    {
+      id: "dot",
+      title: "With dot",
+      render: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Tag, { variant: "success", dot: true, children: "Customer" }),
+        /* @__PURE__ */ jsx(Tag, { variant: "brand", dot: true, children: "Renewal" }),
+        /* @__PURE__ */ jsx(Tag, { variant: "pink", dot: true, children: "Campaign" })
+      ] }),
+      code: `import { Tag } from '@open-mercato/ui/primitives/tag'
+
+<Tag variant="success" dot>Customer</Tag>
+<Tag variant="brand" dot>Renewal</Tag>
+<Tag variant="pink" dot>Campaign</Tag>`
+    },
+    {
+      id: "square",
+      title: "Square shape",
+      render: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Tag, { shape: "square", children: "default" }),
+        /* @__PURE__ */ jsx(Tag, { variant: "info", shape: "square", dot: true, children: "info" })
+      ] }),
+      code: `import { Tag } from '@open-mercato/ui/primitives/tag'
+
+<Tag shape="square">default</Tag>
+<Tag variant="info" shape="square" dot>info</Tag>`
+    },
+    {
+      id: "removable",
+      title: "Removable",
+      render: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Tag, { variant: "neutral", onRemove: () => {
+        }, children: "Wholesale" }),
+        /* @__PURE__ */ jsx(Tag, { variant: "neutral", onRemove: () => {
+        }, disabled: true, children: "Locked" })
+      ] }),
+      code: `import { Tag } from '@open-mercato/ui/primitives/tag'
+
+<Tag variant="neutral" onRemove={() => removeTag('wholesale')}>Wholesale</Tag>
+<Tag variant="neutral" onRemove={() => {}} disabled>Locked</Tag>`
+    }
+  ]
+};
+const avatarEntry = {
+  id: "avatar",
+  title: "Avatar",
+  importPath: "@open-mercato/ui/primitives/avatar",
+  variants: [
+    {
+      id: "sizes",
+      title: "Sizes (auto-initials)",
+      render: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Avatar, { label: "Wei Chen", size: "xl" }),
+        /* @__PURE__ */ jsx(Avatar, { label: "Wei Chen", size: "lg" }),
+        /* @__PURE__ */ jsx(Avatar, { label: "Wei Chen", size: "md" }),
+        /* @__PURE__ */ jsx(Avatar, { label: "Wei Chen", size: "sm" }),
+        /* @__PURE__ */ jsx(Avatar, { label: "Wei Chen", size: "xs" })
+      ] }),
+      code: `import { Avatar } from '@open-mercato/ui/primitives/avatar'
+
+// Initials are derived automatically from the label at every size.
+<Avatar label="Wei Chen" size="xl" />
+<Avatar label="Wei Chen" size="lg" />
+<Avatar label="Wei Chen" size="md" />
+<Avatar label="Wei Chen" size="sm" />
+<Avatar label="Wei Chen" size="xs" />`
+    },
+    {
+      id: "variants",
+      title: "Variants and icon",
+      render: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Avatar, { label: "Laura Perez" }),
+        /* @__PURE__ */ jsx(Avatar, { label: "Laura Perez", variant: "monochrome" }),
+        /* @__PURE__ */ jsx(Avatar, { label: "Acme Corp", icon: /* @__PURE__ */ jsx(Building2, {}), variant: "monochrome" })
+      ] }),
+      code: `import { Building2 } from 'lucide-react'
+import { Avatar } from '@open-mercato/ui/primitives/avatar'
+
+<Avatar label="Laura Perez" />
+<Avatar label="Laura Perez" variant="monochrome" />
+<Avatar label="Acme Corp" icon={<Building2 />} variant="monochrome" />`
+    },
+    {
+      id: "status",
+      title: "Status dot",
+      render: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Avatar, { label: "Wei Chen", status: "online" }),
+        /* @__PURE__ */ jsx(Avatar, { label: "Laura Perez", status: "busy" }),
+        /* @__PURE__ */ jsx(Avatar, { label: "Omar Haddad", status: "away" }),
+        /* @__PURE__ */ jsx(Avatar, { label: "Ines Kowalska", status: "offline" })
+      ] }),
+      code: `import { Avatar } from '@open-mercato/ui/primitives/avatar'
+
+<Avatar label="Wei Chen" status="online" />
+<Avatar label="Laura Perez" status="busy" />
+<Avatar label="Omar Haddad" status="away" />
+<Avatar label="Ines Kowalska" status="offline" />`
+    },
+    {
+      id: "stack",
+      title: "AvatarStack",
+      render: () => /* @__PURE__ */ jsxs(AvatarStack, { max: 3, children: [
+        /* @__PURE__ */ jsx(Avatar, { label: "Wei Chen" }),
+        /* @__PURE__ */ jsx(Avatar, { label: "Laura Perez" }),
+        /* @__PURE__ */ jsx(Avatar, { label: "Omar Haddad" }),
+        /* @__PURE__ */ jsx(Avatar, { label: "Ines Kowalska" }),
+        /* @__PURE__ */ jsx(Avatar, { label: "Ravi Patel" })
+      ] }),
+      code: `import { Avatar, AvatarStack } from '@open-mercato/ui/primitives/avatar'
+
+<AvatarStack max={3}>
+  <Avatar label="Wei Chen" />
+  <Avatar label="Laura Perez" />
+  <Avatar label="Omar Haddad" />
+  <Avatar label="Ines Kowalska" />
+  <Avatar label="Ravi Patel" />
+</AvatarStack>`
+    }
+  ]
+};
+const kbdEntry = {
+  id: "kbd",
+  title: "Kbd",
+  importPath: "@open-mercato/ui/primitives/kbd",
+  variants: [
+    {
+      id: "default",
+      title: "default",
+      render: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Kbd, { children: "\u2318" }),
+        /* @__PURE__ */ jsx(Kbd, { children: "Shift" }),
+        /* @__PURE__ */ jsx(Kbd, { children: "Enter" })
+      ] }),
+      code: `import { Kbd } from '@open-mercato/ui/primitives/kbd'
+
+<Kbd>\u2318</Kbd>
+<Kbd>Shift</Kbd>
+<Kbd>Enter</Kbd>`
+    },
+    {
+      id: "shortcut",
+      title: "KbdShortcut",
+      render: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(KbdShortcut, { keys: ["\u2318", "K"] }),
+        /* @__PURE__ */ jsx(KbdShortcut, { keys: ["Ctrl", "Shift", "P"] })
+      ] }),
+      code: `import { KbdShortcut } from '@open-mercato/ui/primitives/kbd'
+
+<KbdShortcut keys={['\u2318', 'K']} />
+<KbdShortcut keys={['Ctrl', 'Shift', 'P']} />`
+    }
+  ]
+};
+const tableEntry = {
+  id: "table",
+  title: "Table",
+  importPath: "@open-mercato/ui/primitives/table",
+  figmaNodeId: "167144:147544",
+  variants: [
+    {
+      id: "default",
+      title: "default",
+      render: () => /* @__PURE__ */ jsxs(Table, { children: [
+        /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+          /* @__PURE__ */ jsx(TableHead, { children: "Order" }),
+          /* @__PURE__ */ jsx(TableHead, { children: "Customer" }),
+          /* @__PURE__ */ jsx(TableHead, { children: "Status" }),
+          /* @__PURE__ */ jsx(TableHead, { className: "text-right", children: "Total" })
+        ] }) }),
+        /* @__PURE__ */ jsxs(TableBody, { children: [
+          /* @__PURE__ */ jsxs(TableRow, { children: [
+            /* @__PURE__ */ jsx(TableCell, { children: "#1042" }),
+            /* @__PURE__ */ jsx(TableCell, { children: "Wei Chen" }),
+            /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(StatusBadge, { variant: "success", dot: true, children: "Paid" }) }),
+            /* @__PURE__ */ jsx(TableCell, { className: "text-right", children: "$1,250.00" })
+          ] }),
+          /* @__PURE__ */ jsxs(TableRow, { children: [
+            /* @__PURE__ */ jsx(TableCell, { children: "#1041" }),
+            /* @__PURE__ */ jsx(TableCell, { children: "Laura Perez" }),
+            /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(StatusBadge, { variant: "warning", dot: true, children: "Pending" }) }),
+            /* @__PURE__ */ jsx(TableCell, { className: "text-right", children: "$310.50" })
+          ] }),
+          /* @__PURE__ */ jsxs(TableRow, { children: [
+            /* @__PURE__ */ jsx(TableCell, { children: "#1040" }),
+            /* @__PURE__ */ jsx(TableCell, { children: "Omar Haddad" }),
+            /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(StatusBadge, { variant: "neutral", dot: true, children: "Draft" }) }),
+            /* @__PURE__ */ jsx(TableCell, { className: "text-right", children: "$89.00" })
+          ] })
+        ] })
+      ] }),
+      code: `import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@open-mercato/ui/primitives/table'
+import { StatusBadge } from '@open-mercato/ui/primitives/status-badge'
+
+<Table>
+  <TableHeader>
+    <TableRow>
+      <TableHead>Order</TableHead>
+      <TableHead>Customer</TableHead>
+      <TableHead>Status</TableHead>
+      <TableHead className="text-right">Total</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell>#1042</TableCell>
+      <TableCell>Wei Chen</TableCell>
+      <TableCell><StatusBadge variant="success" dot>Paid</StatusBadge></TableCell>
+      <TableCell className="text-right">$1,250.00</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>`
+    },
+    {
+      id: "striped",
+      title: "striped",
+      render: () => /* @__PURE__ */ jsxs(Table, { variant: "striped", children: [
+        /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+          /* @__PURE__ */ jsx(TableHead, { children: "SKU" }),
+          /* @__PURE__ */ jsx(TableHead, { children: "Product" }),
+          /* @__PURE__ */ jsx(TableHead, { className: "text-right", children: "Stock" })
+        ] }) }),
+        /* @__PURE__ */ jsxs(TableBody, { children: [
+          /* @__PURE__ */ jsxs(TableRow, { children: [
+            /* @__PURE__ */ jsx(TableCell, { children: "AP-100" }),
+            /* @__PURE__ */ jsx(TableCell, { children: "Apex Desk Lamp" }),
+            /* @__PURE__ */ jsx(TableCell, { className: "text-right", children: "120" })
+          ] }),
+          /* @__PURE__ */ jsxs(TableRow, { children: [
+            /* @__PURE__ */ jsx(TableCell, { children: "AP-101" }),
+            /* @__PURE__ */ jsx(TableCell, { children: "Apex Monitor Stand" }),
+            /* @__PURE__ */ jsx(TableCell, { className: "text-right", children: "64" })
+          ] }),
+          /* @__PURE__ */ jsxs(TableRow, { children: [
+            /* @__PURE__ */ jsx(TableCell, { children: "AP-102" }),
+            /* @__PURE__ */ jsx(TableCell, { children: "Apex Cable Kit" }),
+            /* @__PURE__ */ jsx(TableCell, { className: "text-right", children: "310" })
+          ] }),
+          /* @__PURE__ */ jsxs(TableRow, { children: [
+            /* @__PURE__ */ jsx(TableCell, { children: "AP-103" }),
+            /* @__PURE__ */ jsx(TableCell, { children: "Apex Laptop Riser" }),
+            /* @__PURE__ */ jsx(TableCell, { className: "text-right", children: "18" })
+          ] })
+        ] })
+      ] }),
+      code: `import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@open-mercato/ui/primitives/table'
+
+<Table variant="striped">
+  <TableHeader>
+    <TableRow>
+      <TableHead>SKU</TableHead>
+      <TableHead>Product</TableHead>
+      <TableHead className="text-right">Stock</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>{/* rows */}</TableBody>
+</Table>`
+    },
+    {
+      id: "with-footer",
+      title: "With footer",
+      render: () => /* @__PURE__ */ jsxs(Table, { children: [
+        /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+          /* @__PURE__ */ jsx(TableHead, { children: "Line" }),
+          /* @__PURE__ */ jsx(TableHead, { className: "text-right", children: "Amount" })
+        ] }) }),
+        /* @__PURE__ */ jsxs(TableBody, { children: [
+          /* @__PURE__ */ jsxs(TableRow, { children: [
+            /* @__PURE__ */ jsx(TableCell, { children: "Subtotal" }),
+            /* @__PURE__ */ jsx(TableCell, { className: "text-right", children: "$1,560.50" })
+          ] }),
+          /* @__PURE__ */ jsxs(TableRow, { children: [
+            /* @__PURE__ */ jsx(TableCell, { children: "Shipping" }),
+            /* @__PURE__ */ jsx(TableCell, { className: "text-right", children: "$24.00" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(TableFooter, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+          /* @__PURE__ */ jsx(TableCell, { children: "Total" }),
+          /* @__PURE__ */ jsx(TableCell, { className: "text-right", children: "$1,584.50" })
+        ] }) })
+      ] }),
+      code: `import { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell } from '@open-mercato/ui/primitives/table'
+
+<Table>
+  <TableHeader>{/* header row */}</TableHeader>
+  <TableBody>{/* body rows */}</TableBody>
+  <TableFooter>
+    <TableRow>
+      <TableCell>Total</TableCell>
+      <TableCell className="text-right">$1,584.50</TableCell>
+    </TableRow>
+  </TableFooter>
+</Table>`
+    }
+  ]
+};
+const cardEntry = {
+  id: "card",
+  title: "Card",
+  importPath: "@open-mercato/ui/primitives/card",
+  variants: [
+    {
+      id: "default",
+      title: "default",
+      render: () => /* @__PURE__ */ jsxs(Card, { className: "w-full max-w-sm", children: [
+        /* @__PURE__ */ jsxs(CardHeader, { children: [
+          /* @__PURE__ */ jsx(CardTitle, { children: "Monthly revenue" }),
+          /* @__PURE__ */ jsx(CardDescription, { children: "Net revenue across all channels." })
+        ] }),
+        /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("p", { className: "text-2xl font-semibold", children: "$48,210" }) }),
+        /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Updated 5 minutes ago" }) })
+      ] }),
+      code: `import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@open-mercato/ui/primitives/card'
+
+<Card>
+  <CardHeader>
+    <CardTitle>Monthly revenue</CardTitle>
+    <CardDescription>Net revenue across all channels.</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p className="text-2xl font-semibold">$48,210</p>
+  </CardContent>
+  <CardFooter>
+    <p className="text-sm text-muted-foreground">Updated 5 minutes ago</p>
+  </CardFooter>
+</Card>`
+    },
+    {
+      id: "with-action",
+      title: "With action slot",
+      render: () => /* @__PURE__ */ jsxs(Card, { className: "w-full max-w-sm", children: [
+        /* @__PURE__ */ jsxs(CardHeader, { children: [
+          /* @__PURE__ */ jsx(CardTitle, { children: "Team members" }),
+          /* @__PURE__ */ jsx(CardDescription, { children: "People with access to this workspace." }),
+          /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(IconButton, { variant: "ghost", "aria-label": "More", children: /* @__PURE__ */ jsx(MoreHorizontal, {}) }) })
+        ] }),
+        /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(AvatarStack, { max: 3, size: "sm", children: [
+          /* @__PURE__ */ jsx(Avatar, { label: "Wei Chen", size: "sm" }),
+          /* @__PURE__ */ jsx(Avatar, { label: "Laura Perez", size: "sm" }),
+          /* @__PURE__ */ jsx(Avatar, { label: "Omar Haddad", size: "sm" }),
+          /* @__PURE__ */ jsx(Avatar, { label: "Ines Kowalska", size: "sm" })
+        ] }) })
+      ] }),
+      code: `import { MoreHorizontal } from 'lucide-react'
+import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent } from '@open-mercato/ui/primitives/card'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+
+<Card>
+  <CardHeader>
+    <CardTitle>Team members</CardTitle>
+    <CardDescription>People with access to this workspace.</CardDescription>
+    <CardAction>
+      <IconButton variant="ghost" aria-label="More"><MoreHorizontal /></IconButton>
+    </CardAction>
+  </CardHeader>
+  <CardContent>{/* content */}</CardContent>
+</Card>`
+    }
+  ]
+};
+const separatorEntry = {
+  id: "separator",
+  title: "Separator",
+  importPath: "@open-mercato/ui/primitives/separator",
+  variants: [
+    {
+      id: "default",
+      title: "default",
+      render: () => /* @__PURE__ */ jsxs("div", { className: "w-full max-w-sm", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm", children: "Shipping details" }),
+        /* @__PURE__ */ jsx(Separator, { className: "my-3" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Billing details" })
+      ] }),
+      code: `import { Separator } from '@open-mercato/ui/primitives/separator'
+
+<Separator className="my-3" />`
+    },
+    {
+      id: "labeled",
+      title: "Labeled",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-sm", children: /* @__PURE__ */ jsx(Separator, { label: "OR" }) }),
+      code: `import { Separator } from '@open-mercato/ui/primitives/separator'
+
+<Separator label="OR" />`
+    },
+    {
+      id: "section",
+      title: "Section header",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-sm", children: /* @__PURE__ */ jsx(Separator, { section: true, label: "Amount & account" }) }),
+      code: `import { Separator } from '@open-mercato/ui/primitives/separator'
+
+<Separator section label="Amount & account" />`
+    },
+    {
+      id: "dashed",
+      title: "Dashed",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-sm", children: /* @__PURE__ */ jsx(Separator, { variant: "dashed" }) }),
+      code: `import { Separator } from '@open-mercato/ui/primitives/separator'
+
+<Separator variant="dashed" />`
+    }
+  ]
+};
+const scrollAreaEntry = {
+  id: "scroll-area",
+  title: "ScrollArea",
+  importPath: "@open-mercato/ui/primitives/scroll-area",
+  variants: [
+    {
+      id: "vertical",
+      title: "Vertical",
+      render: () => /* @__PURE__ */ jsx(ScrollArea, { className: "h-40 w-full max-w-xs rounded-md border", children: /* @__PURE__ */ jsx("div", { className: "p-3", children: Array.from({ length: 20 }, (_, i) => /* @__PURE__ */ jsxs("p", { className: "border-b py-1.5 text-sm last:border-b-0", children: [
+        "Warehouse zone ",
+        String.fromCharCode(65 + i % 6),
+        "-",
+        i + 1
+      ] }, i)) }) }),
+      code: `import { ScrollArea } from '@open-mercato/ui/primitives/scroll-area'
+
+<ScrollArea className="h-40 rounded-md border">
+  <div className="p-3">
+    {zones.map((zone) => (
+      <p key={zone.id} className="border-b py-1.5 text-sm last:border-b-0">{zone.name}</p>
+    ))}
+  </div>
+</ScrollArea>`
+    },
+    {
+      id: "horizontal",
+      title: "Horizontal",
+      render: () => /* @__PURE__ */ jsx(ScrollArea, { scrollbars: "horizontal", className: "w-full max-w-xs rounded-md border", children: /* @__PURE__ */ jsx("div", { className: "flex w-max gap-2 p-3", children: Array.from({ length: 12 }, (_, i) => /* @__PURE__ */ jsxs(Tag, { variant: "neutral", shape: "square", children: [
+        "Channel ",
+        i + 1
+      ] }, i)) }) }),
+      code: `import { ScrollArea } from '@open-mercato/ui/primitives/scroll-area'
+import { Tag } from '@open-mercato/ui/primitives/tag'
+
+<ScrollArea scrollbars="horizontal" className="max-w-xs rounded-md border">
+  <div className="flex w-max gap-2 p-3">
+    {channels.map((channel) => (
+      <Tag key={channel.id} variant="neutral" shape="square">{channel.name}</Tag>
+    ))}
+  </div>
+</ScrollArea>`
+    }
+  ]
+};
+const activityFeedEntry = {
+  id: "activity-feed",
+  title: "ActivityFeed",
+  importPath: "@open-mercato/ui/primitives/activity-feed",
+  variants: [
+    {
+      id: "basic",
+      title: "Basic entries",
+      render: () => /* @__PURE__ */ jsxs(ActivityFeed, { className: "w-full max-w-md", children: [
+        /* @__PURE__ */ jsx(
+          ActivityFeedItem,
+          {
+            avatar: /* @__PURE__ */ jsx(Avatar, { label: "Wei Chen", size: "sm" }),
+            title: /* @__PURE__ */ jsxs(Fragment, { children: [
+              "Wei Chen ",
+              /* @__PURE__ */ jsx("span", { className: "font-normal text-muted-foreground", children: "created" }),
+              " Order #1042"
+            ] }),
+            timestamp: "4 min ago"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ActivityFeedItem,
+          {
+            avatar: /* @__PURE__ */ jsx(Avatar, { label: "Laura Perez", size: "sm" }),
+            title: /* @__PURE__ */ jsxs(Fragment, { children: [
+              "Laura Perez ",
+              /* @__PURE__ */ jsx("span", { className: "font-normal text-muted-foreground", children: "updated the shipping address" })
+            ] }),
+            timestamp: "1 hour ago",
+            actions: /* @__PURE__ */ jsx(IconButton, { variant: "ghost", size: "sm", "aria-label": "More", children: /* @__PURE__ */ jsx(MoreHorizontal, {}) })
+          }
+        )
+      ] }),
+      code: `import { ActivityFeed, ActivityFeedItem } from '@open-mercato/ui/primitives/activity-feed'
+import { Avatar } from '@open-mercato/ui/primitives/avatar'
+
+<ActivityFeed>
+  <ActivityFeedItem
+    avatar={<Avatar label="Wei Chen" size="sm" />}
+    title={<>Wei Chen <span className="font-normal text-muted-foreground">created</span> Order #1042</>}
+    timestamp="4 min ago"
+  />
+</ActivityFeed>`
+    },
+    {
+      id: "with-attachment",
+      title: "File attachment",
+      render: () => /* @__PURE__ */ jsx(ActivityFeed, { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(
+        ActivityFeedItem,
+        {
+          avatar: /* @__PURE__ */ jsx(Avatar, { label: "Omar Haddad", size: "sm" }),
+          title: /* @__PURE__ */ jsxs(Fragment, { children: [
+            "Omar Haddad ",
+            /* @__PURE__ */ jsx("span", { className: "font-normal text-muted-foreground", children: "uploaded" }),
+            " Q2 financial report"
+          ] }),
+          timestamp: "2 days ago",
+          children: /* @__PURE__ */ jsx(ActivityFeedFileChip, { name: "apex-report.pdf", size: "4mb", onDownload: () => {
+          } })
+        }
+      ) }),
+      code: `import { ActivityFeed, ActivityFeedItem, ActivityFeedFileChip } from '@open-mercato/ui/primitives/activity-feed'
+import { Avatar } from '@open-mercato/ui/primitives/avatar'
+
+<ActivityFeedItem
+  avatar={<Avatar label="Omar Haddad" size="sm" />}
+  title={<>Omar Haddad <span className="font-normal text-muted-foreground">uploaded</span> Q2 financial report</>}
+  timestamp="2 days ago"
+>
+  <ActivityFeedFileChip name="apex-report.pdf" size="4mb" onDownload={() => download()} />
+</ActivityFeedItem>`
+    },
+    {
+      id: "with-comment",
+      title: "Comment",
+      render: () => /* @__PURE__ */ jsx(ActivityFeed, { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(
+        ActivityFeedItem,
+        {
+          avatar: /* @__PURE__ */ jsx(Avatar, { label: "Ines Kowalska", size: "sm" }),
+          title: /* @__PURE__ */ jsxs(Fragment, { children: [
+            "Ines Kowalska ",
+            /* @__PURE__ */ jsx("span", { className: "font-normal text-muted-foreground", children: "commented" })
+          ] }),
+          timestamp: "6 days ago",
+          children: /* @__PURE__ */ jsx(ActivityFeedComment, { onReply: () => {
+          }, children: "Please revise the risk metrics before Friday." })
+        }
+      ) }),
+      code: `import { ActivityFeed, ActivityFeedItem, ActivityFeedComment } from '@open-mercato/ui/primitives/activity-feed'
+import { Avatar } from '@open-mercato/ui/primitives/avatar'
+
+<ActivityFeedItem
+  avatar={<Avatar label="Ines Kowalska" size="sm" />}
+  title={<>Ines Kowalska <span className="font-normal text-muted-foreground">commented</span></>}
+  timestamp="6 days ago"
+>
+  <ActivityFeedComment onReply={() => reply()}>
+    Please revise the risk metrics before Friday.
+  </ActivityFeedComment>
+</ActivityFeedItem>`
+    },
+    {
+      id: "status-chips",
+      title: "Status chips",
+      render: () => /* @__PURE__ */ jsx(ActivityFeed, { className: "w-full max-w-md", children: /* @__PURE__ */ jsxs(
+        ActivityFeedItem,
+        {
+          avatar: /* @__PURE__ */ jsx(Avatar, { label: "Ravi Patel", size: "sm" }),
+          title: /* @__PURE__ */ jsxs(Fragment, { children: [
+            "Ravi Patel ",
+            /* @__PURE__ */ jsx("span", { className: "font-normal text-muted-foreground", children: "moved 3 tasks" })
+          ] }),
+          timestamp: "1 week ago",
+          children: [
+            /* @__PURE__ */ jsx(ActivityFeedStatusChip, { status: "success", children: "Approved" }),
+            /* @__PURE__ */ jsx(ActivityFeedStatusChip, { status: "warning", children: "Needs review" }),
+            /* @__PURE__ */ jsx(ActivityFeedStatusChip, { status: "error", children: "Blocked" })
+          ]
+        }
+      ) }),
+      code: `import { ActivityFeed, ActivityFeedItem, ActivityFeedStatusChip } from '@open-mercato/ui/primitives/activity-feed'
+import { Avatar } from '@open-mercato/ui/primitives/avatar'
+
+<ActivityFeedItem
+  avatar={<Avatar label="Ravi Patel" size="sm" />}
+  title={<>Ravi Patel <span className="font-normal text-muted-foreground">moved 3 tasks</span></>}
+  timestamp="1 week ago"
+>
+  <ActivityFeedStatusChip status="success">Approved</ActivityFeedStatusChip>
+  <ActivityFeedStatusChip status="warning">Needs review</ActivityFeedStatusChip>
+  <ActivityFeedStatusChip status="error">Blocked</ActivityFeedStatusChip>
+</ActivityFeedItem>`
+    }
+  ]
+};
+const entries = [
+  badgeEntry,
+  statusBadgeEntry,
+  tagEntry,
+  avatarEntry,
+  kbdEntry,
+  tableEntry,
+  cardEntry,
+  separatorEntry,
+  scrollAreaEntry,
+  activityFeedEntry
+];
+export {
+  entries
+};
+//# sourceMappingURL=display.js.map