@open-mercato/core 0.6.7-develop.6788.1.c2a1520a30 → 0.6.7-develop.6814.1.0627c7e9f1

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

@@ -0,0 +1,658 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Inbox, RefreshCw, Search, Settings, UserPlus } from "lucide-react";
+import { Alert, AlertDescription, AlertTitle } from "@open-mercato/ui/primitives/alert";
+import { EmptyState } from "@open-mercato/ui/primitives/empty-state";
+import { Skeleton } from "@open-mercato/ui/primitives/skeleton";
+import { CircularProgress, Progress } from "@open-mercato/ui/primitives/progress";
+import { Spinner } from "@open-mercato/ui/primitives/spinner";
+import { Rating } from "@open-mercato/ui/primitives/rating";
+import { StepIndicator } from "@open-mercato/ui/primitives/step-indicator";
+import { Notification } from "@open-mercato/ui/primitives/notification";
+import {
+  NotificationFeed,
+  NotificationFeedFooter,
+  NotificationFeedHeader,
+  NotificationFeedIconBadge,
+  NotificationFeedItem,
+  NotificationFeedList
+} from "@open-mercato/ui/primitives/notification-feed";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { IconButton } from "@open-mercato/ui/primitives/icon-button";
+import { LinkButton } from "@open-mercato/ui/primitives/link-button";
+const alertEntry = {
+  id: "alert",
+  title: "Alert",
+  importPath: "@open-mercato/ui/primitives/alert",
+  usage: {
+    do: [
+      "Current API only: status (error/warning/success/information/feature) + style (filled/light/lighter/stroke) + size.",
+      "light/lighter for inline page notices; filled for high-emphasis moments."
+    ],
+    dont: ["The legacy variant prop is deprecated \u2014 lint flags it.", "Never build ad-hoc colored notice boxes; this is the primitive for them."]
+  },
+  variants: [
+    {
+      id: "statuses-light",
+      title: "Statuses (light)",
+      render: () => /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-md flex-col gap-2", children: [
+        /* @__PURE__ */ jsx(Alert, { status: "error", style: "light", children: "Payment failed \u2014 the card was declined." }),
+        /* @__PURE__ */ jsx(Alert, { status: "warning", style: "light", children: "Inventory sync is running behind schedule." }),
+        /* @__PURE__ */ jsx(Alert, { status: "success", style: "light", children: "Order #10231 was fulfilled." }),
+        /* @__PURE__ */ jsx(Alert, { status: "information", style: "light", children: "Prices include VAT for EU customers." }),
+        /* @__PURE__ */ jsx(Alert, { status: "feature", style: "light", children: "Bulk editing is now available in the catalog." })
+      ] }),
+      code: `import { Alert } from '@open-mercato/ui/primitives/alert'
+
+<Alert status="error" style="light">Payment failed \u2014 the card was declined.</Alert>
+<Alert status="warning" style="light">Inventory sync is running behind schedule.</Alert>
+<Alert status="success" style="light">Order #10231 was fulfilled.</Alert>
+<Alert status="information" style="light">Prices include VAT for EU customers.</Alert>
+<Alert status="feature" style="light">Bulk editing is now available in the catalog.</Alert>`
+    },
+    {
+      id: "filled",
+      title: "filled",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsxs(Alert, { status: "error", style: "filled", size: "default", children: [
+        /* @__PURE__ */ jsx(AlertTitle, { children: "Import failed" }),
+        /* @__PURE__ */ jsx(AlertDescription, { children: "14 rows were rejected \u2014 download the error report to review them." })
+      ] }) }),
+      code: `import { Alert, AlertDescription, AlertTitle } from '@open-mercato/ui/primitives/alert'
+
+<Alert status="error" style="filled" size="default">
+  <AlertTitle>Import failed</AlertTitle>
+  <AlertDescription>14 rows were rejected \u2014 download the error report to review them.</AlertDescription>
+</Alert>`
+    },
+    {
+      id: "stroke",
+      title: "stroke",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsxs(Alert, { status: "success", style: "stroke", size: "default", children: [
+        /* @__PURE__ */ jsx(AlertTitle, { children: "Backup complete" }),
+        /* @__PURE__ */ jsx(AlertDescription, { children: "The nightly snapshot finished without warnings." })
+      ] }) }),
+      code: `import { Alert, AlertDescription, AlertTitle } from '@open-mercato/ui/primitives/alert'
+
+<Alert status="success" style="stroke" size="default">
+  <AlertTitle>Backup complete</AlertTitle>
+  <AlertDescription>The nightly snapshot finished without warnings.</AlertDescription>
+</Alert>`
+    },
+    {
+      id: "sizes",
+      title: "Sizes",
+      render: () => /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-md flex-col gap-2", children: [
+        /* @__PURE__ */ jsx(Alert, { status: "information", size: "xs", children: "X-Small \u2014 inline form hint." }),
+        /* @__PURE__ */ jsx(Alert, { status: "information", size: "sm", children: "Small \u2014 the default single-line alert." }),
+        /* @__PURE__ */ jsxs(Alert, { status: "information", size: "default", children: [
+          /* @__PURE__ */ jsx(AlertTitle, { children: "Large" }),
+          /* @__PURE__ */ jsx(AlertDescription, { children: "Multi-line alert with a title and a description body." })
+        ] })
+      ] }),
+      code: `import { Alert, AlertDescription, AlertTitle } from '@open-mercato/ui/primitives/alert'
+
+<Alert status="information" size="xs">X-Small \u2014 inline form hint.</Alert>
+<Alert status="information" size="sm">Small \u2014 the default single-line alert.</Alert>
+<Alert status="information" size="default">
+  <AlertTitle>Large</AlertTitle>
+  <AlertDescription>Multi-line alert with a title and a description body.</AlertDescription>
+</Alert>`
+    },
+    {
+      id: "dismissible-with-action",
+      title: "Dismissible with action",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(
+        Alert,
+        {
+          status: "warning",
+          style: "lighter",
+          dismissible: true,
+          action: /* @__PURE__ */ jsx(LinkButton, { variant: "black", underline: "always", children: "Review" }),
+          children: "3 products are missing tax categories."
+        }
+      ) }),
+      code: `import { Alert } from '@open-mercato/ui/primitives/alert'
+import { LinkButton } from '@open-mercato/ui/primitives/link-button'
+
+<Alert
+  status="warning"
+  style="lighter"
+  dismissible
+  onDismiss={() => setVisible(false)}
+  action={<LinkButton variant="black" underline="always">Review</LinkButton>}
+>
+  3 products are missing tax categories.
+</Alert>`
+    }
+  ]
+};
+const emptyStateEntry = {
+  id: "empty-state",
+  title: "EmptyState",
+  importPath: "@open-mercato/ui/primitives/empty-state",
+  variants: [
+    {
+      id: "default",
+      title: "default",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(
+        EmptyState,
+        {
+          title: "No customers yet",
+          description: "Create your first customer to start tracking opportunities."
+        }
+      ) }),
+      code: `import { EmptyState } from '@open-mercato/ui/primitives/empty-state'
+
+<EmptyState
+  title="No customers yet"
+  description="Create your first customer to start tracking opportunities."
+/>`
+    },
+    {
+      id: "with-actions",
+      title: "With icon and actions",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(
+        EmptyState,
+        {
+          icon: /* @__PURE__ */ jsx(Inbox, { className: "size-8" }),
+          title: "No orders found",
+          description: "Orders will appear here once your storefront starts selling.",
+          actions: /* @__PURE__ */ jsx(Button, { size: "sm", children: "Create order" })
+        }
+      ) }),
+      code: `import { Inbox } from 'lucide-react'
+import { EmptyState } from '@open-mercato/ui/primitives/empty-state'
+import { Button } from '@open-mercato/ui/primitives/button'
+
+<EmptyState
+  icon={<Inbox className="size-8" />}
+  title="No orders found"
+  description="Orders will appear here once your storefront starts selling."
+  actions={<Button size="sm">Create order</Button>}
+/>`
+    },
+    {
+      id: "subtle",
+      title: "subtle",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(
+        EmptyState,
+        {
+          variant: "subtle",
+          size: "sm",
+          icon: /* @__PURE__ */ jsx(Search, { className: "size-5" }),
+          title: "No results",
+          description: "Try a different search term or clear the filters."
+        }
+      ) }),
+      code: `import { Search } from 'lucide-react'
+import { EmptyState } from '@open-mercato/ui/primitives/empty-state'
+
+<EmptyState
+  variant="subtle"
+  size="sm"
+  icon={<Search className="size-5" />}
+  title="No results"
+  description="Try a different search term or clear the filters."
+/>`
+    }
+  ]
+};
+const skeletonEntry = {
+  id: "skeleton",
+  title: "Skeleton",
+  importPath: "@open-mercato/ui/primitives/skeleton",
+  variants: [
+    {
+      id: "shapes",
+      title: "Shapes",
+      render: () => /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-md items-center gap-4", children: [
+        /* @__PURE__ */ jsx(Skeleton, { shape: "circle", className: "size-10" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-24" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-8 flex-1" })
+      ] }),
+      code: `import { Skeleton } from '@open-mercato/ui/primitives/skeleton'
+
+<Skeleton shape="circle" className="size-10" />
+<Skeleton className="h-8 w-24" />
+<Skeleton className="h-8 flex-1" />`
+    },
+    {
+      id: "text-lines",
+      title: "Text lines",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(Skeleton, { shape: "text", lines: 3 }) }),
+      code: `import { Skeleton } from '@open-mercato/ui/primitives/skeleton'
+
+<Skeleton shape="text" lines={3} />`
+    },
+    {
+      id: "card-placeholder",
+      title: "Card placeholder",
+      render: () => /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-md items-start gap-3 rounded-lg border border-border p-4", children: [
+        /* @__PURE__ */ jsx(Skeleton, { shape: "circle", className: "size-12" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/3" }),
+          /* @__PURE__ */ jsx(Skeleton, { shape: "text", lines: 2 })
+        ] })
+      ] }),
+      code: `import { Skeleton } from '@open-mercato/ui/primitives/skeleton'
+
+<div className="flex items-start gap-3 rounded-lg border border-border p-4">
+  <Skeleton shape="circle" className="size-12" />
+  <div className="flex-1 space-y-2">
+    <Skeleton className="h-4 w-1/3" />
+    <Skeleton shape="text" lines={2} />
+  </div>
+</div>`
+    }
+  ]
+};
+const progressEntry = {
+  id: "progress",
+  title: "Progress",
+  importPath: "@open-mercato/ui/primitives/progress",
+  variants: [
+    {
+      id: "basic",
+      title: "Basic",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(Progress, { value: 50 }) }),
+      code: `import { Progress } from '@open-mercato/ui/primitives/progress'
+
+<Progress value={50} />`
+    },
+    {
+      id: "labelled",
+      title: "Labelled",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(
+        Progress,
+        {
+          value: 80,
+          label: "Data storage",
+          showValue: true,
+          description: "Upgrade to unlock unlimited storage."
+        }
+      ) }),
+      code: `import { Progress } from '@open-mercato/ui/primitives/progress'
+
+<Progress
+  value={80}
+  label="Data storage"
+  showValue
+  description="Upgrade to unlock unlimited storage."
+/>`
+    },
+    {
+      id: "tones",
+      title: "Tones",
+      render: () => /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-md flex-col gap-3", children: [
+        /* @__PURE__ */ jsx(Progress, { value: 42, tone: "accent" }),
+        /* @__PURE__ */ jsx(Progress, { value: 42, tone: "success" }),
+        /* @__PURE__ */ jsx(Progress, { value: 42, tone: "warning" }),
+        /* @__PURE__ */ jsx(Progress, { value: 42, tone: "destructive" }),
+        /* @__PURE__ */ jsx(Progress, { value: 42, tone: "muted" })
+      ] }),
+      code: `import { Progress } from '@open-mercato/ui/primitives/progress'
+
+<Progress value={42} tone="accent" />
+<Progress value={42} tone="success" />
+<Progress value={42} tone="warning" />
+<Progress value={42} tone="destructive" />
+<Progress value={42} tone="muted" />`
+    },
+    {
+      id: "circular",
+      title: "CircularProgress",
+      render: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(CircularProgress, { value: 75, size: "lg", showValue: true }),
+        /* @__PURE__ */ jsx(CircularProgress, { value: 75, size: "default", showValue: true }),
+        /* @__PURE__ */ jsx(CircularProgress, { value: 75, size: "sm" }),
+        /* @__PURE__ */ jsx(CircularProgress, { value: 75, size: "xs" }),
+        /* @__PURE__ */ jsx(CircularProgress, { value: 100, tone: "success", showValue: true })
+      ] }),
+      code: `import { CircularProgress } from '@open-mercato/ui/primitives/progress'
+
+<CircularProgress value={75} size="lg" showValue />
+<CircularProgress value={75} size="default" showValue />
+<CircularProgress value={75} size="sm" />
+<CircularProgress value={75} size="xs" />
+<CircularProgress value={100} tone="success" showValue />`
+    }
+  ]
+};
+const spinnerEntry = {
+  id: "spinner",
+  title: "Spinner",
+  importPath: "@open-mercato/ui/primitives/spinner",
+  variants: [
+    {
+      id: "sizes",
+      title: "Sizes",
+      render: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Spinner, { size: "sm" }),
+        /* @__PURE__ */ jsx(Spinner, { size: "md" }),
+        /* @__PURE__ */ jsx(Spinner, { size: "lg" })
+      ] }),
+      code: `import { Spinner } from '@open-mercato/ui/primitives/spinner'
+
+<Spinner size="sm" />
+<Spinner size="md" />
+<Spinner size="lg" />`
+    },
+    {
+      id: "inline-with-label",
+      title: "Inline with label",
+      render: () => /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2 text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsx(Spinner, { size: "sm" }),
+        "Loading orders\u2026"
+      ] }),
+      code: `import { Spinner } from '@open-mercato/ui/primitives/spinner'
+
+<span className="inline-flex items-center gap-2 text-sm text-muted-foreground">
+  <Spinner size="sm" />
+  Loading orders\u2026
+</span>`
+    }
+  ]
+};
+function InteractiveRatingDemo() {
+  const [value, setValue] = React.useState(3);
+  return /* @__PURE__ */ jsx(Rating, { value, onChange: setValue, "aria-label": "Your rating" });
+}
+const ratingEntry = {
+  id: "rating",
+  title: "Rating",
+  importPath: "@open-mercato/ui/primitives/rating",
+  variants: [
+    {
+      id: "read-only",
+      title: "Read-only",
+      render: () => /* @__PURE__ */ jsx(Rating, { value: 4, max: 5 }),
+      code: `import { Rating } from '@open-mercato/ui/primitives/rating'
+
+<Rating value={4} max={5} />`
+    },
+    {
+      id: "half-precision",
+      title: "Half precision",
+      render: () => /* @__PURE__ */ jsx(Rating, { value: 3.5, max: 5, allowHalf: true }),
+      code: `import { Rating } from '@open-mercato/ui/primitives/rating'
+
+<Rating value={3.5} max={5} allowHalf />`
+    },
+    {
+      id: "interactive",
+      title: "Interactive",
+      render: () => /* @__PURE__ */ jsx(InteractiveRatingDemo, {}),
+      code: `import { Rating } from '@open-mercato/ui/primitives/rating'
+
+const [value, setValue] = React.useState(3)
+
+<Rating value={value} onChange={setValue} aria-label="Your rating" />`
+    },
+    {
+      id: "icons-and-sizes",
+      title: "Icons and sizes",
+      render: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Rating, { value: 3, max: 5, icon: "heart" }),
+        /* @__PURE__ */ jsx(Rating, { value: 3, max: 5, icon: "circle", size: "sm" }),
+        /* @__PURE__ */ jsx(Rating, { value: 3, max: 5, size: "lg" })
+      ] }),
+      code: `import { Rating } from '@open-mercato/ui/primitives/rating'
+
+<Rating value={3} max={5} icon="heart" />
+<Rating value={3} max={5} icon="circle" size="sm" />
+<Rating value={3} max={5} size="lg" />`
+    }
+  ]
+};
+const wizardSteps = [
+  { id: "account", label: "Account", status: "complete" },
+  { id: "profile", label: "Profile", status: "current" },
+  { id: "review", label: "Review", status: "pending" }
+];
+const verticalSteps = [
+  { id: "details", label: "Store details", description: "Name, currency, region", status: "complete" },
+  { id: "payments", label: "Payments", description: "Connect a payment provider", status: "current" },
+  { id: "shipping", label: "Shipping", description: "Zones and carriers", status: "pending" }
+];
+const errorSteps = [
+  { id: "upload", label: "Upload file", status: "complete" },
+  { id: "validate", label: "Validation", status: "error" },
+  { id: "import", label: "Import", status: "pending" }
+];
+const stepIndicatorEntry = {
+  id: "step-indicator",
+  title: "StepIndicator",
+  importPath: "@open-mercato/ui/primitives/step-indicator",
+  variants: [
+    {
+      id: "horizontal",
+      title: "Horizontal",
+      render: () => /* @__PURE__ */ jsx(StepIndicator, { steps: wizardSteps }),
+      code: `import { StepIndicator, type StepIndicatorStep } from '@open-mercato/ui/primitives/step-indicator'
+
+const steps: StepIndicatorStep[] = [
+  { id: 'account', label: 'Account', status: 'complete' },
+  { id: 'profile', label: 'Profile', status: 'current' },
+  { id: 'review', label: 'Review', status: 'pending' },
+]
+
+<StepIndicator steps={steps} />`
+    },
+    {
+      id: "vertical",
+      title: "Vertical with descriptions",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-xs", children: /* @__PURE__ */ jsx(StepIndicator, { steps: verticalSteps, orientation: "vertical" }) }),
+      code: `import { StepIndicator, type StepIndicatorStep } from '@open-mercato/ui/primitives/step-indicator'
+
+const steps: StepIndicatorStep[] = [
+  { id: 'details', label: 'Store details', description: 'Name, currency, region', status: 'complete' },
+  { id: 'payments', label: 'Payments', description: 'Connect a payment provider', status: 'current' },
+  { id: 'shipping', label: 'Shipping', description: 'Zones and carriers', status: 'pending' },
+]
+
+<StepIndicator steps={steps} orientation="vertical" />`
+    },
+    {
+      id: "error-state",
+      title: "Error state",
+      render: () => /* @__PURE__ */ jsx(StepIndicator, { steps: errorSteps }),
+      code: `import { StepIndicator, type StepIndicatorStep } from '@open-mercato/ui/primitives/step-indicator'
+
+const steps: StepIndicatorStep[] = [
+  { id: 'upload', label: 'Upload file', status: 'complete' },
+  { id: 'validate', label: 'Validation', status: 'error' },
+  { id: 'import', label: 'Import', status: 'pending' },
+]
+
+<StepIndicator steps={steps} />`
+    }
+  ]
+};
+const notificationEntry = {
+  id: "notification",
+  title: "Notification",
+  importPath: "@open-mercato/ui/primitives/notification",
+  variants: [
+    {
+      id: "information",
+      title: "Information",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(
+        Notification,
+        {
+          title: "Scheduled maintenance",
+          description: "The admin panel will be read-only on Sunday between 02:00 and 04:00 UTC.",
+          timestamp: "2 min ago"
+        }
+      ) }),
+      code: `import { Notification } from '@open-mercato/ui/primitives/notification'
+
+<Notification
+  title="Scheduled maintenance"
+  description="The admin panel will be read-only on Sunday between 02:00 and 04:00 UTC."
+  timestamp="2 min ago"
+  onDismiss={() => dismiss(id)}
+/>`
+    },
+    {
+      id: "success-with-actions",
+      title: "Success with actions",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(
+        Notification,
+        {
+          status: "success",
+          title: "Export ready",
+          description: "Your product export (1,204 rows) finished successfully.",
+          timestamp: "just now",
+          actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(LinkButton, { variant: "black", underline: "always", children: "Download" }),
+            /* @__PURE__ */ jsx(LinkButton, { variant: "gray", underline: "always", children: "View log" })
+          ] })
+        }
+      ) }),
+      code: `import { Notification } from '@open-mercato/ui/primitives/notification'
+import { LinkButton } from '@open-mercato/ui/primitives/link-button'
+
+<Notification
+  status="success"
+  title="Export ready"
+  description="Your product export (1,204 rows) finished successfully."
+  timestamp="just now"
+  actions={
+    <>
+      <LinkButton variant="black" underline="always">Download</LinkButton>
+      <LinkButton variant="gray" underline="always">View log</LinkButton>
+    </>
+  }
+/>`
+    },
+    {
+      id: "error",
+      title: "Error",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(
+        Notification,
+        {
+          status: "error",
+          title: "Webhook delivery failed",
+          description: "The endpoint responded with 503 after 3 retries.",
+          timestamp: "5 min ago",
+          actions: /* @__PURE__ */ jsx(LinkButton, { variant: "error", underline: "always", children: "Retry now" })
+        }
+      ) }),
+      code: `import { Notification } from '@open-mercato/ui/primitives/notification'
+import { LinkButton } from '@open-mercato/ui/primitives/link-button'
+
+<Notification
+  status="error"
+  title="Webhook delivery failed"
+  description="The endpoint responded with 503 after 3 retries."
+  timestamp="5 min ago"
+  actions={<LinkButton variant="error" underline="always">Retry now</LinkButton>}
+/>`
+    }
+  ]
+};
+const notificationFeedEntry = {
+  id: "notification-feed",
+  title: "NotificationFeed",
+  importPath: "@open-mercato/ui/primitives/notification-feed",
+  variants: [
+    {
+      id: "default",
+      title: "default",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-sm", children: /* @__PURE__ */ jsxs(NotificationFeed, { children: [
+        /* @__PURE__ */ jsx(NotificationFeedHeader, { title: "Notifications", children: /* @__PURE__ */ jsx(IconButton, { size: "sm", variant: "ghost", "aria-label": "Notification settings", children: /* @__PURE__ */ jsx(Settings, {}) }) }),
+        /* @__PURE__ */ jsxs(NotificationFeedList, { children: [
+          /* @__PURE__ */ jsx(
+            NotificationFeedItem,
+            {
+              icon: /* @__PURE__ */ jsx(NotificationFeedIconBadge, { tone: "indigo", children: /* @__PURE__ */ jsx(UserPlus, { className: "size-5" }) }),
+              title: "New lead generated",
+              body: "John Smith submitted the contact form.",
+              timestamp: "10 minutes ago",
+              unread: true
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            NotificationFeedItem,
+            {
+              icon: /* @__PURE__ */ jsx(NotificationFeedIconBadge, { tone: "success", children: /* @__PURE__ */ jsx(RefreshCw, { className: "size-5" }) }),
+              title: "Catalog sync completed",
+              body: "312 products updated from the PIM.",
+              timestamp: "1 hour ago"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(NotificationFeedFooter, { children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", className: "w-full", children: "Archive all" }) })
+      ] }) }),
+      code: `import { Settings, UserPlus } from 'lucide-react'
+import {
+  NotificationFeed,
+  NotificationFeedFooter,
+  NotificationFeedHeader,
+  NotificationFeedIconBadge,
+  NotificationFeedItem,
+  NotificationFeedList,
+} from '@open-mercato/ui/primitives/notification-feed'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+
+<NotificationFeed>
+  <NotificationFeedHeader title="Notifications">
+    <IconButton size="sm" variant="ghost" aria-label="Notification settings">
+      <Settings />
+    </IconButton>
+  </NotificationFeedHeader>
+  <NotificationFeedList>
+    <NotificationFeedItem
+      icon={
+        <NotificationFeedIconBadge tone="indigo">
+          <UserPlus className="size-5" />
+        </NotificationFeedIconBadge>
+      }
+      title="New lead generated"
+      body="John Smith submitted the contact form."
+      timestamp="10 minutes ago"
+      unread
+    />
+  </NotificationFeedList>
+  <NotificationFeedFooter>
+    <Button variant="outline" size="sm" className="w-full">Archive all</Button>
+  </NotificationFeedFooter>
+</NotificationFeed>`
+    },
+    {
+      id: "icon-badge-tones",
+      title: "NotificationFeedIconBadge tones",
+      render: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(NotificationFeedIconBadge, { tone: "indigo", children: /* @__PURE__ */ jsx(UserPlus, { className: "size-5" }) }),
+        /* @__PURE__ */ jsx(NotificationFeedIconBadge, { tone: "success", children: /* @__PURE__ */ jsx(RefreshCw, { className: "size-5" }) }),
+        /* @__PURE__ */ jsx(NotificationFeedIconBadge, { tone: "error", children: /* @__PURE__ */ jsx(Inbox, { className: "size-5" }) }),
+        /* @__PURE__ */ jsx(NotificationFeedIconBadge, { tone: "info", children: /* @__PURE__ */ jsx(Search, { className: "size-5" }) }),
+        /* @__PURE__ */ jsx(NotificationFeedIconBadge, { tone: "neutral", children: /* @__PURE__ */ jsx(Settings, { className: "size-5" }) })
+      ] }),
+      code: `import { UserPlus } from 'lucide-react'
+import { NotificationFeedIconBadge } from '@open-mercato/ui/primitives/notification-feed'
+
+<NotificationFeedIconBadge tone="indigo"><UserPlus className="size-5" /></NotificationFeedIconBadge>
+<NotificationFeedIconBadge tone="success"><RefreshCw className="size-5" /></NotificationFeedIconBadge>
+<NotificationFeedIconBadge tone="error"><Inbox className="size-5" /></NotificationFeedIconBadge>
+<NotificationFeedIconBadge tone="info"><Search className="size-5" /></NotificationFeedIconBadge>
+<NotificationFeedIconBadge tone="neutral"><Settings className="size-5" /></NotificationFeedIconBadge>`
+    }
+  ]
+};
+const entries = [
+  alertEntry,
+  emptyStateEntry,
+  skeletonEntry,
+  progressEntry,
+  spinnerEntry,
+  ratingEntry,
+  stepIndicatorEntry,
+  notificationEntry,
+  notificationFeedEntry
+];
+export {
+  entries
+};
+//# sourceMappingURL=feedback.js.map