@open-mercato/core 0.7.1-develop.7202.1.a52dc6707c → 0.8.0

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

@@ -1,13 +1,21 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Banner } from "@open-mercato/ui/primitives/banner";
 import * as React from "react";
+import { NotificationFeedExample } from "../demos/feeds.js";
+import { notificationFeedExampleCode } from "../demos/feeds-code.generated.js";
 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 { EmptyStateIllustration } from "@open-mercato/ui/primitives/empty-state-illustration";
 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 { RatingCellDemo, RatingReviewDemo } from "../demos/rating-reviews.js";
 import { Rating } from "@open-mercato/ui/primitives/rating";
-import { StepIndicator } from "@open-mercato/ui/primitives/step-indicator";
+import { RatingBar } from "@open-mercato/ui/primitives/rating-bar";
+import { Textarea } from "@open-mercato/ui/primitives/textarea";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { StepIndicator, StepperDots } from "@open-mercato/ui/primitives/step-indicator";
 import { Notification } from "@open-mercato/ui/primitives/notification";
 import {
   NotificationFeed,
@@ -20,8 +28,108 @@ import {
 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 bannerStatuses = ["error", "warning", "success", "information", "feature"];
+function BannerExamples({ appearance, minimal = false }) {
+  const t = useT();
+  const [dismissed, setDismissed] = React.useState([]);
+  const [details, setDetails] = React.useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: "w-full space-y-4", children: [
+    bannerStatuses.filter((status) => !dismissed.includes(status)).map((status) => /* @__PURE__ */ jsx(Banner, { status, style: appearance, title: t("design_system.gallery.samples.banner.title"), description: minimal ? void 0 : t("design_system.gallery.samples.banner.description"), showIcon: !minimal, onDismiss: minimal ? void 0 : () => setDismissed((value) => [...value, status]), action: minimal ? void 0 : /* @__PURE__ */ jsx(Button, { variant: "link", className: "h-auto p-0 text-inherit underline", onClick: () => setDetails((value) => !value), children: t("design_system.gallery.samples.banner.details") }) }, status)),
+    details ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("design_system.gallery.samples.banner.detailsBody") }) : null,
+    dismissed.length ? /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: () => setDismissed([]), children: t("design_system.gallery.samples.banner.restore") }) : null
+  ] });
+}
+function bannerExampleCode(appearance, minimal = false) {
+  return `import * as React from 'react'
+import { Banner } from '@open-mercato/ui/primitives/banner'
+import { Button } from '@open-mercato/ui/primitives/button'
+
+function Example() {
+  const [dismissed, setDismissed] = React.useState<string[]>([])
+  const [details, setDetails] = React.useState(false)
+  return <div className="w-full space-y-4">
+    {(['error', 'warning', 'success', 'information', 'feature'] as const).filter(status => !dismissed.includes(status)).map(status => (
+      <Banner key={status} status={status} style="${appearance}" title="Workspace update"${minimal ? " showIcon={false}" : ' description="Your team can review the latest changes." onDismiss={() => setDismissed(value => [...value, status])} action={<Button variant="link" className="h-auto p-0 text-inherit underline" onClick={() => setDetails(value => !value)}>View details</Button>}'} />
+    ))}
+    {details ? <p className="text-sm text-muted-foreground">This example changes local preview state.</p> : null}
+    {dismissed.length ? <Button variant="outline" size="sm" onClick={() => setDismissed([])}>Restore banners</Button> : null}
+  </div>
+}`;
+}
+const bannerEntry = {
+  id: "banner",
+  title: "Banner",
+  importPath: "@open-mercato/ui/primitives/banner",
+  figmaNodeId: "224:2249",
+  docsAnchor: "#banner",
+  variants: [
+    { id: "filled", title: "5 statuses / Filled", render: () => /* @__PURE__ */ jsx(BannerExamples, { appearance: "filled" }), code: bannerExampleCode("filled") },
+    { id: "light", title: "5 statuses / Light", render: () => /* @__PURE__ */ jsx(BannerExamples, { appearance: "light" }), code: bannerExampleCode("light") },
+    { id: "lighter", title: "5 statuses / Lighter", render: () => /* @__PURE__ */ jsx(BannerExamples, { appearance: "lighter" }), code: bannerExampleCode("lighter") },
+    { id: "stroke", title: "5 statuses / Stroke", render: () => /* @__PURE__ */ jsx(BannerExamples, { appearance: "stroke" }), code: bannerExampleCode("stroke") },
+    { id: "minimal", title: "Title only", render: () => /* @__PURE__ */ jsx(BannerExamples, { appearance: "lighter", minimal: true }), code: bannerExampleCode("lighter", true) }
+  ]
+};
+function AlertSourceExamples({ size }) {
+  const t = useT();
+  const [hidden, setHidden] = React.useState([]);
+  const [details, setDetails] = React.useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: "grid w-full gap-5 lg:grid-cols-2", children: [
+    ["filled", "light", "lighter", "stroke"].map((appearance) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: appearance }),
+      bannerStatuses.filter((status) => !hidden.includes(`${appearance}-${status}`)).map((status) => /* @__PURE__ */ jsx(
+        Alert,
+        {
+          className: "max-w-[390px]",
+          status,
+          style: appearance,
+          size,
+          dismissible: true,
+          onDismiss: () => setHidden((value) => [...value, `${appearance}-${status}`]),
+          dismissAriaLabel: t("ui.banner.dismiss", "Dismiss banner"),
+          action: size === "default" ? void 0 : /* @__PURE__ */ jsx(Button, { variant: "link", className: size === "xs" ? "h-auto p-0 text-xs leading-4 text-inherit underline" : "h-auto p-0 text-sm leading-5 text-inherit underline", onClick: () => setDetails((value) => !value), children: t("design_system.gallery.samples.banner.details") }),
+          footer: size === "default" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Button, { variant: "link", className: "h-auto p-0 text-inherit underline", onClick: () => setDetails((value) => !value), children: t("design_system.gallery.samples.banner.details") }),
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "opacity-50", children: "\u2219" }),
+            /* @__PURE__ */ jsx(Button, { variant: "link", className: "h-auto p-0 text-inherit", onClick: () => setHidden((value) => [...value, `${appearance}-${status}`]), children: t("ui.dialog.close.ariaLabel", "Close") })
+          ] }) : void 0,
+          children: size === "default" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(AlertTitle, { children: t("design_system.gallery.samples.banner.title") }),
+            /* @__PURE__ */ jsx(AlertDescription, { children: t("design_system.gallery.samples.overlay.description") })
+          ] }) : t("design_system.gallery.samples.banner.title")
+        },
+        status
+      ))
+    ] }, appearance)),
+    details ? /* @__PURE__ */ jsx("p", { role: "status", className: "text-sm text-muted-foreground", children: t("design_system.gallery.samples.banner.detailsBody") }) : null,
+    hidden.length ? /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: () => setHidden([]), children: t("design_system.gallery.samples.feeds.restore") }) : null
+  ] });
+}
+function alertSourceCode(size) {
+  return `import * as React from 'react'
+import { Alert, AlertTitle, AlertDescription } from '@open-mercato/ui/primitives/alert'
+import { Button } from '@open-mercato/ui/primitives/button'
+
+function Example() {
+  const [hidden, setHidden] = React.useState<string[]>([])
+  const [details, setDetails] = React.useState(false)
+  const statuses = ['error', 'warning', 'success', 'information', 'feature'] as const
+  return <div className="grid w-full gap-5 lg:grid-cols-2">
+    {(['filled', 'light', 'lighter', 'stroke'] as const).map(appearance => <div key={appearance} className="space-y-3">
+      <p className="text-xs text-muted-foreground">{appearance}</p>
+      {statuses.filter(status => !hidden.includes(appearance + '-' + status)).map(status => <Alert className="max-w-[390px]" key={status} status={status} style={appearance} size="${size}" dismissible onDismiss={() => setHidden(value => [...value, appearance + '-' + status])}
+        ${size === "default" ? "footer" : "action"}={<Button variant="link" className="h-auto p-0 ${size === "xs" ? "text-xs leading-4" : "text-sm leading-5"} text-inherit underline" onClick={() => setDetails(value => !value)}>View details</Button>}>
+        ${size === "default" ? "<AlertTitle>Workspace update</AlertTitle><AlertDescription>Choose how these changes apply to your workspace.</AlertDescription>" : "Workspace update"}
+      </Alert>)}
+    </div>)}
+    {details ? <p role="status">This example changes local preview state.</p> : null}
+    {hidden.length ? <Button size="sm" variant="outline" onClick={() => setHidden([])}>Restore examples</Button> : null}
+  </div>
+}`;
+}
 const alertEntry = {
   id: "alert",
+  figmaNodeId: "169:2399",
   title: "Alert",
   importPath: "@open-mercato/ui/primitives/alert",
   usage: {
@@ -32,16 +140,13 @@ const alertEntry = {
     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: "source-xs", title: "20 status/style combinations / 32px", render: () => /* @__PURE__ */ jsx(AlertSourceExamples, { size: "xs" }), code: alertSourceCode("xs") },
+    { id: "source-sm", title: "20 status/style combinations / 36px", render: () => /* @__PURE__ */ jsx(AlertSourceExamples, { size: "sm" }), code: alertSourceCode("sm") },
+    { id: "source-large", title: "20 status/style combinations / large", render: () => /* @__PURE__ */ jsx(AlertSourceExamples, { size: "default" }), code: alertSourceCode("default") },
     {
       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." })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(AlertFeedbackStatusesLightSample, {}),
       code: `import { Alert } from '@open-mercato/ui/primitives/alert'
 
 <Alert status="error" style="light">Payment failed \u2014 the card was declined.</Alert>
@@ -53,10 +158,7 @@ const alertEntry = {
     {
       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." })
-      ] }) }),
+      render: () => /* @__PURE__ */ jsx(AlertFeedbackFilledSample, {}),
       code: `import { Alert, AlertDescription, AlertTitle } from '@open-mercato/ui/primitives/alert'
 
 <Alert status="error" style="filled" size="default">
@@ -67,10 +169,7 @@ const alertEntry = {
     {
       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." })
-      ] }) }),
+      render: () => /* @__PURE__ */ jsx(AlertFeedbackStrokeSample, {}),
       code: `import { Alert, AlertDescription, AlertTitle } from '@open-mercato/ui/primitives/alert'
 
 <Alert status="success" style="stroke" size="default">
@@ -81,14 +180,7 @@ const alertEntry = {
     {
       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." })
-        ] })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(AlertFeedbackSizesSample, {}),
       code: `import { Alert, AlertDescription, AlertTitle } from '@open-mercato/ui/primitives/alert'
 
 <Alert status="information" size="xs">X-Small \u2014 inline form hint.</Alert>
@@ -101,16 +193,7 @@ const alertEntry = {
     {
       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."
-        }
-      ) }),
+      render: () => /* @__PURE__ */ jsx(AlertFeedbackDismissibleWithActionSample, {}),
       code: `import { Alert } from '@open-mercato/ui/primitives/alert'
 import { LinkButton } from '@open-mercato/ui/primitives/link-button'
 
@@ -131,16 +214,28 @@ const emptyStateEntry = {
   title: "EmptyState",
   importPath: "@open-mercato/ui/primitives/empty-state",
   variants: [
+    {
+      id: "source-illustration",
+      title: "Open Mercato",
+      render: () => /* @__PURE__ */ jsx(IllustratedEmptyStateExample, {}),
+      code: `import { EmptyState } from '@open-mercato/ui/primitives/empty-state'
+import { EmptyStateIllustration } from '@open-mercato/ui/primitives/empty-state-illustration'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+function RecordsEmptyState() {
+  const t = useT()
+  return <EmptyState
+    variant="subtle"
+    title={t('design_system.gallery.samples.emptyArtwork.records.title')}
+    description={t('design_system.gallery.samples.emptyArtwork.records.description')}
+    illustration={<EmptyStateIllustration kind="mercato-records" />}
+  />
+}`
+    },
     {
       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."
-        }
-      ) }),
+      render: () => /* @__PURE__ */ jsx(EmptyStateFeedbackDefaultSample, {}),
       code: `import { EmptyState } from '@open-mercato/ui/primitives/empty-state'
 
 <EmptyState
@@ -151,15 +246,7 @@ const emptyStateEntry = {
     {
       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" })
-        }
-      ) }),
+      render: () => /* @__PURE__ */ jsx(EmptyStateFeedbackWithActionsSample, {}),
       code: `import { Inbox } from 'lucide-react'
 import { EmptyState } from '@open-mercato/ui/primitives/empty-state'
 import { Button } from '@open-mercato/ui/primitives/button'
@@ -174,16 +261,7 @@ import { Button } from '@open-mercato/ui/primitives/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."
-        }
-      ) }),
+      render: () => /* @__PURE__ */ jsx(EmptyStateFeedbackSubtleSample, {}),
       code: `import { Search } from 'lucide-react'
 import { EmptyState } from '@open-mercato/ui/primitives/empty-state'
 
@@ -197,6 +275,64 @@ import { EmptyState } from '@open-mercato/ui/primitives/empty-state'
     }
   ]
 };
+function IllustratedEmptyStateExample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx(
+    EmptyState,
+    {
+      variant: "subtle",
+      title: t("design_system.gallery.samples.emptyArtwork.records.title"),
+      description: t("design_system.gallery.samples.emptyArtwork.records.description"),
+      illustration: /* @__PURE__ */ jsx(EmptyStateIllustration, { kind: "mercato-records" })
+    }
+  );
+}
+const emptyArtworkSubjects = ["records", "search", "files", "messages"];
+function EmptyIllustrationsExample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "grid w-full grid-cols-1 gap-6 lg:grid-cols-2", children: emptyArtworkSubjects.map((subject) => /* @__PURE__ */ jsx(
+    EmptyState,
+    {
+      variant: "subtle",
+      className: "min-w-0 border border-border bg-background",
+      title: t(`design_system.gallery.samples.emptyArtwork.${subject}.title`),
+      description: t(`design_system.gallery.samples.emptyArtwork.${subject}.description`),
+      illustration: /* @__PURE__ */ jsx(EmptyStateIllustration, { kind: `mercato-${subject}` })
+    },
+    subject
+  )) });
+}
+const emptyStateIllustrationEntry = {
+  id: "empty-state-illustration",
+  title: "EmptyStateIllustration",
+  importPath: "@open-mercato/ui/primitives/empty-state-illustration",
+  variants: [
+    {
+      id: "mercato",
+      title: "Open Mercato",
+      render: () => /* @__PURE__ */ jsx(EmptyIllustrationsExample, {}),
+      code: `import { EmptyStateIllustration } from '@open-mercato/ui/primitives/empty-state-illustration'
+import { EmptyState } from '@open-mercato/ui/primitives/empty-state'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+const subjects = ['records', 'search', 'files', 'messages'] as const
+
+function EmptyStateCollection() {
+  const t = useT()
+  return <div className="grid w-full grid-cols-1 gap-6 lg:grid-cols-2">
+    {subjects.map(subject => <EmptyState
+      key={subject}
+      variant="subtle"
+      className="min-w-0 border border-border bg-background"
+      title={t(\`design_system.gallery.samples.emptyArtwork.\${subject}.title\`)}
+      description={t(\`design_system.gallery.samples.emptyArtwork.\${subject}.description\`)}
+      illustration={<EmptyStateIllustration kind={\`mercato-\${subject}\`} />}
+    />)}
+  </div>
+}`
+    }
+  ]
+};
 const skeletonEntry = {
   id: "skeleton",
   title: "Skeleton",
@@ -246,9 +382,36 @@ const skeletonEntry = {
     }
   ]
 };
+function CircularSourceDemo() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-6", children: [
+    [48, 56, 64, 72, 80].map((size) => /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [
+      /* @__PURE__ */ jsxs("span", { className: "w-12 text-xs text-muted-foreground", children: [
+        size,
+        "px"
+      ] }),
+      [0, 25, 50, 75, 100].map((value) => /* @__PURE__ */ jsx(CircularProgress, { value, size, showValue: size !== 48, ariaLabel: t("design_system.gallery.examples.navigation.progress") }, value))
+    ] }, size)),
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("design_system.gallery.examples.navigation.circularHint") })
+  ] });
+}
+function ProgressLabelDemo() {
+  const t = useT();
+  const label = t("design_system.gallery.examples.controls.storage");
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-md flex-col gap-6", children: [
+    /* @__PURE__ */ jsx(Progress, { value: 80, size: "md", label, "aria-label": label, showValue: true, description: t("design_system.gallery.examples.controls.storageHint") }),
+    /* @__PURE__ */ jsx(Progress, { value: 80, size: "md", label, "aria-label": label, showValue: true }),
+    /* @__PURE__ */ jsx(Progress, { value: 80, size: "md", "aria-label": label, showValue: true, valuePlacement: "right" })
+  ] });
+}
+function ProgressEndpointDemo() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "flex w-full max-w-md flex-col gap-4", children: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100].map((value) => /* @__PURE__ */ jsx(Progress, { value, size: "md", showValue: true, valuePlacement: "right", "aria-label": t("design_system.gallery.examples.controls.storage") }, value)) });
+}
 const progressEntry = {
   id: "progress",
   title: "Progress",
+  figmaNodeId: "450:17821",
   importPath: "@open-mercato/ui/primitives/progress",
   variants: [
     {
@@ -262,15 +425,7 @@ const progressEntry = {
     {
       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."
-        }
-      ) }),
+      render: () => /* @__PURE__ */ jsx(ProgressFeedbackLabelledSample, {}),
       code: `import { Progress } from '@open-mercato/ui/primitives/progress'
 
 <Progress
@@ -315,6 +470,62 @@ const progressEntry = {
 <CircularProgress value={75} size="sm" />
 <CircularProgress value={75} size="xs" />
 <CircularProgress value={100} tone="success" showValue />`
+    },
+    {
+      id: "circular-source-sizes",
+      title: "Circular source sizes \xB7 25 states",
+      render: () => /* @__PURE__ */ jsx(CircularSourceDemo, {}),
+      code: `import { CircularProgress } from '@open-mercato/ui/primitives/progress'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+const t = useT()
+
+{([48, 56, 64, 72, 80] as const).map((size) => (
+  <div key={size} className="flex flex-wrap items-center gap-4">
+    <span>{size}px</span>
+    {[0, 25, 50, 75, 100].map((value) => (
+      <CircularProgress key={value} value={value} size={size} showValue={size !== 48} ariaLabel={t('design_system.gallery.examples.navigation.progress')} />
+    ))}
+  </div>
+))}`
+    },
+    {
+      id: "label-positions",
+      title: "Label positions \xB7 top / description / right",
+      render: () => /* @__PURE__ */ jsx(ProgressLabelDemo, {}),
+      code: `import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Progress } from '@open-mercato/ui/primitives/progress'
+
+function ProgressLabelDemo() {
+  const t = useT()
+  const label = t('design_system.gallery.examples.controls.storage')
+  return <div className="flex w-full max-w-md flex-col gap-6">
+    <Progress value={80} size="md" label={label} aria-label={label} showValue description={t('design_system.gallery.examples.controls.storageHint')} />
+    <Progress value={80} size="md" label={label} aria-label={label} showValue />
+    <Progress value={80} size="md" aria-label={label} showValue valuePlacement="right" />
+  </div>
+}
+
+
+<ProgressLabelDemo />`
+    },
+    {
+      id: "endpoints",
+      title: "Linear values \xB7 0 to 100",
+      render: () => /* @__PURE__ */ jsx(ProgressEndpointDemo, {}),
+      code: `import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Progress } from '@open-mercato/ui/primitives/progress'
+
+function ProgressEndpointDemo() {
+  const t = useT()
+  return <div className="flex w-full max-w-md flex-col gap-4">
+    {[0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100].map(value => <Progress key={value} value={value} size="md" showValue valuePlacement="right" aria-label={t('design_system.gallery.examples.controls.storage')} />)}
+  </div>
+}
+
+<ProgressEndpointDemo />`
     }
   ]
 };
@@ -340,10 +551,7 @@ const spinnerEntry = {
     {
       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"
-      ] }),
+      render: () => /* @__PURE__ */ jsx(SpinnerFeedbackInlineWithLabelSample, {}),
       code: `import { Spinner } from '@open-mercato/ui/primitives/spinner'
 
 <span className="inline-flex items-center gap-2 text-sm text-muted-foreground">
@@ -353,14 +561,16 @@ const spinnerEntry = {
     }
   ]
 };
-function InteractiveRatingDemo() {
+function InteractiveRatingDemo({ allowHalf = false }) {
+  const t = useT();
   const [value, setValue] = React.useState(3);
-  return /* @__PURE__ */ jsx(Rating, { value, onChange: setValue, "aria-label": "Your rating" });
+  return /* @__PURE__ */ jsx(Rating, { value, onChange: setValue, allowHalf, "aria-label": t("design_system.gallery.samples.rating.label") });
 }
 const ratingEntry = {
   id: "rating",
   title: "Rating",
   importPath: "@open-mercato/ui/primitives/rating",
+  figmaNodeId: "532:4340",
   variants: [
     {
       id: "read-only",
@@ -383,10 +593,32 @@ const ratingEntry = {
       title: "Interactive",
       render: () => /* @__PURE__ */ jsx(InteractiveRatingDemo, {}),
       code: `import { Rating } from '@open-mercato/ui/primitives/rating'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+const t = useT()
+const [value, setValue] = React.useState(3)
+
+<Rating value={value} onChange={setValue} aria-label={t('design_system.gallery.samples.rating.label')} />`
+    },
+    {
+      id: "half-heart",
+      title: "Heart / half precision",
+      render: () => /* @__PURE__ */ jsx(Rating, { value: 3.5, icon: "heart", allowHalf: true }),
+      code: `import { Rating } from '@open-mercato/ui/primitives/rating'
 
+<Rating value={3.5} icon="heart" allowHalf />`
+    },
+    {
+      id: "interactive-half",
+      title: "Interactive / half precision",
+      render: () => /* @__PURE__ */ jsx(InteractiveRatingDemo, { allowHalf: true }),
+      code: `import { Rating } from '@open-mercato/ui/primitives/rating'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+const t = useT()
 const [value, setValue] = React.useState(3)
 
-<Rating value={value} onChange={setValue} aria-label="Your rating" />`
+<Rating value={value} onChange={setValue} allowHalf aria-label={t('design_system.gallery.samples.rating.label')} />`
     },
     {
       id: "icons-and-sizes",
@@ -401,6 +633,452 @@ const [value, setValue] = React.useState(3)
 <Rating value={3} max={5} icon="heart" />
 <Rating value={3} max={5} icon="circle" size="sm" />
 <Rating value={3} max={5} size="lg" />`
+    },
+    {
+      id: "cell-star-default",
+      title: "Cell / star / default and live hover",
+      render: () => /* @__PURE__ */ jsx(RatingCellDemo, { icon: "star", initialValue: 0 }),
+      code: `import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Rating } from '@open-mercato/ui/primitives/rating'
+
+function RatingCellExample() {
+  const t = useT()
+  const [value, setValue] = React.useState(0)
+  return <Rating appearance="cell" icon="star" value={value} onChange={setValue} max={1} aria-label={t('design_system.gallery.samples.rating.label')} />
+}
+
+<RatingCellExample />`
+    },
+    {
+      id: "cell-star-selected",
+      title: "Cell / star / selected and live hover",
+      render: () => /* @__PURE__ */ jsx(RatingCellDemo, { icon: "star", initialValue: 1 }),
+      code: `import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Rating } from '@open-mercato/ui/primitives/rating'
+
+function RatingCellExample() {
+  const t = useT()
+  const [value, setValue] = React.useState(1)
+  return <Rating appearance="cell" icon="star" value={value} onChange={setValue} max={1} aria-label={t('design_system.gallery.samples.rating.label')} />
+}
+
+<RatingCellExample />`
+    },
+    {
+      id: "cell-heart-default",
+      title: "Cell / heart / default and live hover",
+      render: () => /* @__PURE__ */ jsx(RatingCellDemo, { icon: "heart", initialValue: 0 }),
+      code: `import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Rating } from '@open-mercato/ui/primitives/rating'
+
+function RatingCellExample() {
+  const t = useT()
+  const [value, setValue] = React.useState(0)
+  return <Rating appearance="cell" icon="heart" value={value} onChange={setValue} max={1} aria-label={t('design_system.gallery.samples.rating.label')} />
+}
+
+<RatingCellExample />`
+    },
+    {
+      id: "cell-heart-selected",
+      title: "Cell / heart / selected and live hover",
+      render: () => /* @__PURE__ */ jsx(RatingCellDemo, { icon: "heart", initialValue: 1 }),
+      code: `import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Rating } from '@open-mercato/ui/primitives/rating'
+
+function RatingCellExample() {
+  const t = useT()
+  const [value, setValue] = React.useState(1)
+  return <Rating appearance="cell" icon="heart" value={value} onChange={setValue} max={1} aria-label={t('design_system.gallery.samples.rating.label')} />
+}
+
+<RatingCellExample />`
+    },
+    {
+      id: "cells-interactive",
+      title: "Cells / keyboard selection",
+      render: () => /* @__PURE__ */ jsx(RatingCellDemo, { icon: "star", initialValue: 3, max: 5 }),
+      code: `import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Rating } from '@open-mercato/ui/primitives/rating'
+
+function RatingCellsExample() {
+  const t = useT()
+  const [value, setValue] = React.useState(3)
+  return <Rating appearance="cell" value={value} onChange={setValue} max={5} aria-label={t('design_system.gallery.samples.rating.label')} />
+}
+
+<RatingCellsExample />`
+    },
+    {
+      id: "cells-disabled",
+      title: "Cells / disabled",
+      render: () => /* @__PURE__ */ jsx(RatingCellDemo, { icon: "star", initialValue: 3, max: 5, disabled: true }),
+      code: `import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Rating } from '@open-mercato/ui/primitives/rating'
+
+function RatingCellsExample() {
+  const t = useT()
+  const [value, setValue] = React.useState(3)
+  return <Rating appearance="cell" value={value} onChange={setValue} max={5} disabled aria-label={t('design_system.gallery.samples.rating.label')} />
+}
+
+<RatingCellsExample />`
+    },
+    {
+      id: "review-star-vertical",
+      title: "Review / star / vertical",
+      render: () => /* @__PURE__ */ jsx(RatingReviewDemo, { icon: "star", alignment: "vertical" }),
+      code: `import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useLocale, useT } from '@open-mercato/shared/lib/i18n/context'
+import { Rating } from '@open-mercato/ui/primitives/rating'
+import { LinkButton } from '@open-mercato/ui/primitives/link-button'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { ScrollArea } from '@open-mercato/ui/primitives/scroll-area'
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@open-mercato/ui/primitives/dialog'
+
+function RatingReviewExample({ icon, alignment }: { icon: 'star' | 'heart'; alignment: 'vertical' | 'horizontal' }) {
+  const t = useT()
+  const locale = useLocale()
+  const [open, setOpen] = React.useState(false)
+  const value = new Intl.NumberFormat(locale).format(4.5)
+  const count = new Intl.NumberFormat(locale, { notation: 'compact', maximumFractionDigits: 1 }).format(5200)
+  const summary = t('design_system.gallery.samples.rating.summary', '{value} \u2219 {count} Ratings', { value, count })
+  const reviews = t('design_system.gallery.samples.rating.reviews', '{count} reviews', { count: 18 })
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <div data-slot="rating-review" data-alignment={alignment} className={cn('inline-flex max-w-full items-start gap-2', alignment === 'vertical' ? 'flex-col' : 'flex-wrap')}>
+        <Rating value={4.5} allowHalf icon={icon} />
+        <div className="flex flex-wrap items-start gap-1 text-sm leading-5">
+          <span>{summary}</span>
+          <LinkButton asChild variant="gray" underline="always"><DialogTrigger>{reviews}</DialogTrigger></LinkButton>
+        </div>
+      </div>
+      <DialogContent onKeyDownCapture={event => { if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) { event.preventDefault(); setOpen(false) } }}>
+        <DialogHeader><DialogTitle>{reviews}</DialogTitle><DialogDescription>{summary}</DialogDescription></DialogHeader>
+        <ScrollArea className="h-72" scrollbarSize="md">
+          <ol className="flex flex-col gap-3 pr-6">
+            {Array.from({ length: 18 }, (_, index) => <li key={index} className="flex items-center justify-between gap-3 text-sm"><span>{t('design_system.gallery.samples.rating.reviewNumber', 'Review {number}', { number: index + 1 })}</span><Rating value={index < 9 ? 5 : 4} icon={icon} /></li>)}
+          </ol>
+        </ScrollArea>
+        <DialogFooter><Button asChild variant="outline"><DialogClose>{t('common.close')}</DialogClose></Button></DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+<RatingReviewExample icon="star" alignment="vertical" />`
+    },
+    {
+      id: "review-star-horizontal",
+      title: "Review / star / horizontal",
+      render: () => /* @__PURE__ */ jsx(RatingReviewDemo, { icon: "star", alignment: "horizontal" }),
+      code: `import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useLocale, useT } from '@open-mercato/shared/lib/i18n/context'
+import { Rating } from '@open-mercato/ui/primitives/rating'
+import { LinkButton } from '@open-mercato/ui/primitives/link-button'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { ScrollArea } from '@open-mercato/ui/primitives/scroll-area'
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@open-mercato/ui/primitives/dialog'
+
+function RatingReviewExample({ icon, alignment }: { icon: 'star' | 'heart'; alignment: 'vertical' | 'horizontal' }) {
+  const t = useT()
+  const locale = useLocale()
+  const [open, setOpen] = React.useState(false)
+  const value = new Intl.NumberFormat(locale).format(4.5)
+  const count = new Intl.NumberFormat(locale, { notation: 'compact', maximumFractionDigits: 1 }).format(5200)
+  const summary = t('design_system.gallery.samples.rating.summary', '{value} \u2219 {count} Ratings', { value, count })
+  const reviews = t('design_system.gallery.samples.rating.reviews', '{count} reviews', { count: 18 })
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <div data-slot="rating-review" data-alignment={alignment} className={cn('inline-flex max-w-full items-start gap-2', alignment === 'vertical' ? 'flex-col' : 'flex-wrap')}>
+        <Rating value={4.5} allowHalf icon={icon} />
+        <div className="flex flex-wrap items-start gap-1 text-sm leading-5">
+          <span>{summary}</span>
+          <LinkButton asChild variant="gray" underline="always"><DialogTrigger>{reviews}</DialogTrigger></LinkButton>
+        </div>
+      </div>
+      <DialogContent onKeyDownCapture={event => { if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) { event.preventDefault(); setOpen(false) } }}>
+        <DialogHeader><DialogTitle>{reviews}</DialogTitle><DialogDescription>{summary}</DialogDescription></DialogHeader>
+        <ScrollArea className="h-72" scrollbarSize="md">
+          <ol className="flex flex-col gap-3 pr-6">
+            {Array.from({ length: 18 }, (_, index) => <li key={index} className="flex items-center justify-between gap-3 text-sm"><span>{t('design_system.gallery.samples.rating.reviewNumber', 'Review {number}', { number: index + 1 })}</span><Rating value={index < 9 ? 5 : 4} icon={icon} /></li>)}
+          </ol>
+        </ScrollArea>
+        <DialogFooter><Button asChild variant="outline"><DialogClose>{t('common.close')}</DialogClose></Button></DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+<RatingReviewExample icon="star" alignment="horizontal" />`
+    },
+    {
+      id: "review-heart-vertical",
+      title: "Review / heart / vertical",
+      render: () => /* @__PURE__ */ jsx(RatingReviewDemo, { icon: "heart", alignment: "vertical" }),
+      code: `import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useLocale, useT } from '@open-mercato/shared/lib/i18n/context'
+import { Rating } from '@open-mercato/ui/primitives/rating'
+import { LinkButton } from '@open-mercato/ui/primitives/link-button'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { ScrollArea } from '@open-mercato/ui/primitives/scroll-area'
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@open-mercato/ui/primitives/dialog'
+
+function RatingReviewExample({ icon, alignment }: { icon: 'star' | 'heart'; alignment: 'vertical' | 'horizontal' }) {
+  const t = useT()
+  const locale = useLocale()
+  const [open, setOpen] = React.useState(false)
+  const value = new Intl.NumberFormat(locale).format(4.5)
+  const count = new Intl.NumberFormat(locale, { notation: 'compact', maximumFractionDigits: 1 }).format(5200)
+  const summary = t('design_system.gallery.samples.rating.summary', '{value} \u2219 {count} Ratings', { value, count })
+  const reviews = t('design_system.gallery.samples.rating.reviews', '{count} reviews', { count: 18 })
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <div data-slot="rating-review" data-alignment={alignment} className={cn('inline-flex max-w-full items-start gap-2', alignment === 'vertical' ? 'flex-col' : 'flex-wrap')}>
+        <Rating value={4.5} allowHalf icon={icon} />
+        <div className="flex flex-wrap items-start gap-1 text-sm leading-5">
+          <span>{summary}</span>
+          <LinkButton asChild variant="gray" underline="always"><DialogTrigger>{reviews}</DialogTrigger></LinkButton>
+        </div>
+      </div>
+      <DialogContent onKeyDownCapture={event => { if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) { event.preventDefault(); setOpen(false) } }}>
+        <DialogHeader><DialogTitle>{reviews}</DialogTitle><DialogDescription>{summary}</DialogDescription></DialogHeader>
+        <ScrollArea className="h-72" scrollbarSize="md">
+          <ol className="flex flex-col gap-3 pr-6">
+            {Array.from({ length: 18 }, (_, index) => <li key={index} className="flex items-center justify-between gap-3 text-sm"><span>{t('design_system.gallery.samples.rating.reviewNumber', 'Review {number}', { number: index + 1 })}</span><Rating value={index < 9 ? 5 : 4} icon={icon} /></li>)}
+          </ol>
+        </ScrollArea>
+        <DialogFooter><Button asChild variant="outline"><DialogClose>{t('common.close')}</DialogClose></Button></DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+<RatingReviewExample icon="heart" alignment="vertical" />`
+    },
+    {
+      id: "review-heart-horizontal",
+      title: "Review / heart / horizontal",
+      render: () => /* @__PURE__ */ jsx(RatingReviewDemo, { icon: "heart", alignment: "horizontal" }),
+      code: `import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useLocale, useT } from '@open-mercato/shared/lib/i18n/context'
+import { Rating } from '@open-mercato/ui/primitives/rating'
+import { LinkButton } from '@open-mercato/ui/primitives/link-button'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { ScrollArea } from '@open-mercato/ui/primitives/scroll-area'
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@open-mercato/ui/primitives/dialog'
+
+function RatingReviewExample({ icon, alignment }: { icon: 'star' | 'heart'; alignment: 'vertical' | 'horizontal' }) {
+  const t = useT()
+  const locale = useLocale()
+  const [open, setOpen] = React.useState(false)
+  const value = new Intl.NumberFormat(locale).format(4.5)
+  const count = new Intl.NumberFormat(locale, { notation: 'compact', maximumFractionDigits: 1 }).format(5200)
+  const summary = t('design_system.gallery.samples.rating.summary', '{value} \u2219 {count} Ratings', { value, count })
+  const reviews = t('design_system.gallery.samples.rating.reviews', '{count} reviews', { count: 18 })
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <div data-slot="rating-review" data-alignment={alignment} className={cn('inline-flex max-w-full items-start gap-2', alignment === 'vertical' ? 'flex-col' : 'flex-wrap')}>
+        <Rating value={4.5} allowHalf icon={icon} />
+        <div className="flex flex-wrap items-start gap-1 text-sm leading-5">
+          <span>{summary}</span>
+          <LinkButton asChild variant="gray" underline="always"><DialogTrigger>{reviews}</DialogTrigger></LinkButton>
+        </div>
+      </div>
+      <DialogContent onKeyDownCapture={event => { if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) { event.preventDefault(); setOpen(false) } }}>
+        <DialogHeader><DialogTitle>{reviews}</DialogTitle><DialogDescription>{summary}</DialogDescription></DialogHeader>
+        <ScrollArea className="h-72" scrollbarSize="md">
+          <ol className="flex flex-col gap-3 pr-6">
+            {Array.from({ length: 18 }, (_, index) => <li key={index} className="flex items-center justify-between gap-3 text-sm"><span>{t('design_system.gallery.samples.rating.reviewNumber', 'Review {number}', { number: index + 1 })}</span><Rating value={index < 9 ? 5 : 4} icon={icon} /></li>)}
+          </ol>
+        </ScrollArea>
+        <DialogFooter><Button asChild variant="outline"><DialogClose>{t('common.close')}</DialogClose></Button></DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+<RatingReviewExample icon="heart" alignment="horizontal" />`
+    }
+  ]
+};
+function RatingBarDemo({ variant = "emoji", initialValue = 0, disabled = false, feedback = false }) {
+  const t = useT();
+  const [value, setValue] = React.useState(initialValue);
+  const bar = /* @__PURE__ */ jsx(RatingBar, { variant, value, onChange: setValue, disabled, "aria-label": t("design_system.gallery.samples.rating.label"), className: feedback ? "w-full border-0 border-b" : void 0 });
+  return feedback ? /* @__PURE__ */ jsxs("div", { className: "w-80 max-w-full overflow-hidden rounded-xl border border-border bg-background focus-within:shadow-focus", children: [
+    bar,
+    /* @__PURE__ */ jsx(Textarea, { "aria-label": t("design_system.gallery.samples.rating.feedback"), placeholder: t("design_system.gallery.samples.rating.feedback"), disabled, className: "min-h-24 resize-none rounded-none border-0 p-3 shadow-none focus-visible:shadow-none" })
+  ] }) : bar;
+}
+const ratingBarEntry = {
+  id: "rating-bar",
+  title: "RatingBar",
+  importPath: "@open-mercato/ui/primitives/rating-bar",
+  figmaNodeId: "535:4658",
+  usage: {
+    do: ["Use the five-part feedback scale with a translated group label.", "The feedback-area composition joins the scale to a Textarea and keeps both controls independently accessible."],
+    dont: ["Do not use this feedback scale for unrelated actions; use ButtonGroup for actions."]
+  },
+  variants: [
+    {
+      id: "emoji",
+      title: "emoji / unselected",
+      render: () => /* @__PURE__ */ jsx(RatingBarDemo, { variant: "emoji" }),
+      code: `import { RatingBar } from '@open-mercato/ui/primitives/rating-bar'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+const t = useT()
+const [value, setValue] = React.useState(0)
+
+<RatingBar variant="emoji" value={value} onChange={setValue} aria-label={t('design_system.gallery.samples.rating.label')} />`
+    },
+    {
+      id: "emoji-selected",
+      title: "emoji / selected",
+      render: () => /* @__PURE__ */ jsx(RatingBarDemo, { variant: "emoji", initialValue: 4 }),
+      code: `import { RatingBar } from '@open-mercato/ui/primitives/rating-bar'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+const t = useT()
+const [value, setValue] = React.useState(4)
+
+<RatingBar variant="emoji" value={value} onChange={setValue} aria-label={t('design_system.gallery.samples.rating.label')} />`
+    },
+    {
+      id: "number",
+      title: "number / unselected",
+      render: () => /* @__PURE__ */ jsx(RatingBarDemo, { variant: "number" }),
+      code: `import { RatingBar } from '@open-mercato/ui/primitives/rating-bar'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+const t = useT()
+const [value, setValue] = React.useState(0)
+
+<RatingBar variant="number" value={value} onChange={setValue} aria-label={t('design_system.gallery.samples.rating.label')} />`
+    },
+    {
+      id: "number-selected",
+      title: "number / selected",
+      render: () => /* @__PURE__ */ jsx(RatingBarDemo, { variant: "number", initialValue: 4 }),
+      code: `import { RatingBar } from '@open-mercato/ui/primitives/rating-bar'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+const t = useT()
+const [value, setValue] = React.useState(4)
+
+<RatingBar variant="number" value={value} onChange={setValue} aria-label={t('design_system.gallery.samples.rating.label')} />`
+    },
+    {
+      id: "star",
+      title: "star / unselected",
+      render: () => /* @__PURE__ */ jsx(RatingBarDemo, { variant: "star" }),
+      code: `import { RatingBar } from '@open-mercato/ui/primitives/rating-bar'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+const t = useT()
+const [value, setValue] = React.useState(0)
+
+<RatingBar variant="star" value={value} onChange={setValue} aria-label={t('design_system.gallery.samples.rating.label')} />`
+    },
+    {
+      id: "star-selected",
+      title: "star / selected",
+      render: () => /* @__PURE__ */ jsx(RatingBarDemo, { variant: "star", initialValue: 4 }),
+      code: `import { RatingBar } from '@open-mercato/ui/primitives/rating-bar'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+const t = useT()
+const [value, setValue] = React.useState(4)
+
+<RatingBar variant="star" value={value} onChange={setValue} aria-label={t('design_system.gallery.samples.rating.label')} />`
+    },
+    {
+      id: "heart",
+      title: "heart / unselected",
+      render: () => /* @__PURE__ */ jsx(RatingBarDemo, { variant: "heart" }),
+      code: `import { RatingBar } from '@open-mercato/ui/primitives/rating-bar'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+const t = useT()
+const [value, setValue] = React.useState(0)
+
+<RatingBar variant="heart" value={value} onChange={setValue} aria-label={t('design_system.gallery.samples.rating.label')} />`
+    },
+    {
+      id: "heart-selected",
+      title: "heart / selected",
+      render: () => /* @__PURE__ */ jsx(RatingBarDemo, { variant: "heart", initialValue: 4 }),
+      code: `import { RatingBar } from '@open-mercato/ui/primitives/rating-bar'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+const t = useT()
+const [value, setValue] = React.useState(4)
+
+<RatingBar variant="heart" value={value} onChange={setValue} aria-label={t('design_system.gallery.samples.rating.label')} />`
+    },
+    {
+      id: "feedback-area",
+      title: "Feedback area / all types",
+      render: () => /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-wrap gap-6", children: [
+        /* @__PURE__ */ jsx(RatingBarDemo, { variant: "emoji", feedback: true }),
+        /* @__PURE__ */ jsx(RatingBarDemo, { variant: "number", feedback: true }),
+        /* @__PURE__ */ jsx(RatingBarDemo, { variant: "star", feedback: true }),
+        /* @__PURE__ */ jsx(RatingBarDemo, { variant: "heart", feedback: true })
+      ] }),
+      code: `import { RatingBar, type RatingBarProps } from '@open-mercato/ui/primitives/rating-bar'
+import { Textarea } from '@open-mercato/ui/primitives/textarea'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+function RatingFeedback({ variant }: { variant: RatingBarProps['variant'] }) {
+  const t = useT()
+  const [value, setValue] = React.useState(0)
+  return (
+    <div className="w-80 max-w-full overflow-hidden rounded-xl border border-border bg-background focus-within:shadow-focus">
+      <RatingBar variant={variant} value={value} onChange={setValue} aria-label={t('design_system.gallery.samples.rating.label')} className="w-full border-0 border-b" />
+      <Textarea aria-label={t('design_system.gallery.samples.rating.feedback')} placeholder={t('design_system.gallery.samples.rating.feedback')} className="min-h-24 resize-none rounded-none border-0 p-3 shadow-none focus-visible:shadow-none" />
+    </div>
+  )
+}
+
+<div className="flex w-full flex-wrap gap-6">
+  <RatingFeedback variant="emoji" />
+  <RatingFeedback variant="number" />
+  <RatingFeedback variant="star" />
+  <RatingFeedback variant="heart" />
+</div>`
+    },
+    {
+      id: "disabled",
+      title: "Disabled / all types",
+      render: () => /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-wrap gap-6", children: [
+        /* @__PURE__ */ jsx(RatingBarDemo, { variant: "emoji", initialValue: 4, disabled: true }),
+        /* @__PURE__ */ jsx(RatingBarDemo, { variant: "number", initialValue: 4, disabled: true }),
+        /* @__PURE__ */ jsx(RatingBarDemo, { variant: "star", initialValue: 4, disabled: true }),
+        /* @__PURE__ */ jsx(RatingBarDemo, { variant: "heart", initialValue: 4, disabled: true })
+      ] }),
+      code: `import { RatingBar } from '@open-mercato/ui/primitives/rating-bar'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+const t = useT()
+const [value, setValue] = React.useState(4)
+
+<div className="flex w-full flex-wrap gap-6">
+  <RatingBar variant="emoji" value={value} onChange={setValue} disabled aria-label={t('design_system.gallery.samples.rating.label')} />
+  <RatingBar variant="number" value={value} onChange={setValue} disabled aria-label={t('design_system.gallery.samples.rating.label')} />
+  <RatingBar variant="star" value={value} onChange={setValue} disabled aria-label={t('design_system.gallery.samples.rating.label')} />
+  <RatingBar variant="heart" value={value} onChange={setValue} disabled aria-label={t('design_system.gallery.samples.rating.label')} />
+</div>`
     }
   ]
 };
@@ -419,9 +1097,42 @@ const errorSteps = [
   { id: "validate", label: "Validation", status: "error" },
   { id: "import", label: "Import", status: "pending" }
 ];
+function StepQuantityDemo({ orientation }) {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: orientation === "vertical" ? "grid w-full gap-6 md:grid-cols-3" : "flex w-full flex-col gap-6 overflow-x-auto", children: [3, 4, 5].map((count) => /* @__PURE__ */ jsx(StepIndicator, { showNumbers: true, orientation, steps: Array.from({ length: count }, (_, index) => ({
+    id: String(index),
+    label: t("design_system.gallery.examples.navigation.step", { step: index + 1 }),
+    status: index === 0 ? "complete" : index === 1 ? "current" : "pending"
+  })) }, count)) });
+}
+function StepInteractiveDemo() {
+  const t = useT();
+  const [activeStep, setActiveStep] = React.useState(1);
+  const steps = Array.from({ length: 5 }, (_, index) => ({
+    id: String(index),
+    label: t("design_system.gallery.examples.navigation.step", { step: index + 1 }),
+    status: index < activeStep ? "complete" : index === activeStep ? "current" : "pending"
+  }));
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "overflow-x-auto p-1", children: /* @__PURE__ */ jsx(StepIndicator, { steps, showNumbers: true, onStepClick: (id) => setActiveStep(Number(id)) }) }),
+    /* @__PURE__ */ jsx(StepperDots, { count: 5, activeStep, "aria-label": t("design_system.gallery.examples.navigation.progress") }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", disabled: activeStep === 0, onClick: () => setActiveStep((value) => value - 1), children: t("design_system.gallery.examples.navigation.previous") }),
+      /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", disabled: activeStep === 4, onClick: () => setActiveStep((value) => value + 1), children: t("design_system.gallery.examples.navigation.next") })
+    ] })
+  ] });
+}
+function StepperDotsDemo() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-8", children: ["sm", "xs"].map((size) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: size }),
+    [0, 1, 2].map((activeStep) => /* @__PURE__ */ jsx(StepperDots, { count: 3, activeStep, size, "aria-label": t("design_system.gallery.examples.navigation.progress") }, activeStep))
+  ] }, size)) });
+}
 const stepIndicatorEntry = {
   id: "step-indicator",
   title: "StepIndicator",
+  figmaNodeId: "3507:28",
   importPath: "@open-mercato/ui/primitives/step-indicator",
   variants: [
     {
@@ -465,6 +1176,96 @@ const steps: StepIndicatorStep[] = [
 ]
 
 <StepIndicator steps={steps} />`
+    },
+    {
+      id: "horizontal-quantities",
+      title: "horizontal \xB7 3, 4, 5 steps",
+      render: () => /* @__PURE__ */ jsx(StepQuantityDemo, { orientation: "horizontal" }),
+      code: `import { StepIndicator } from '@open-mercato/ui/primitives/step-indicator'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+const t = useT()
+
+{[3, 4, 5].map((count) => (
+  <StepIndicator key={count} showNumbers orientation="horizontal" steps={Array.from({ length: count }, (_, index) => ({
+    id: String(index),
+    label: t('design_system.gallery.examples.navigation.step', { step: index + 1 }),
+    status: index === 0 ? 'complete' : index === 1 ? 'current' : 'pending',
+  }))} />
+))}`
+    },
+    {
+      id: "vertical-quantities",
+      title: "vertical \xB7 3, 4, 5 steps",
+      render: () => /* @__PURE__ */ jsx(StepQuantityDemo, { orientation: "vertical" }),
+      code: `import { StepIndicator } from '@open-mercato/ui/primitives/step-indicator'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+const t = useT()
+
+{[3, 4, 5].map((count) => (
+  <StepIndicator key={count} showNumbers orientation="vertical" steps={Array.from({ length: count }, (_, index) => ({
+    id: String(index),
+    label: t('design_system.gallery.examples.navigation.step', { step: index + 1 }),
+    status: index === 0 ? 'complete' : index === 1 ? 'current' : 'pending',
+  }))} />
+))}`
+    },
+    {
+      id: "interactive",
+      title: "Interactive steps and dots",
+      render: () => /* @__PURE__ */ jsx(StepInteractiveDemo, {}),
+      code: `import * as React from 'react'
+import { StepIndicator, StepperDots, type StepIndicatorStep } from '@open-mercato/ui/primitives/step-indicator'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+function StepInteractiveDemo() {
+  const t = useT()
+  const [activeStep, setActiveStep] = React.useState(1)
+  const steps: StepIndicatorStep[] = Array.from({ length: 5 }, (_, index) => ({
+    id: String(index),
+    label: t('design_system.gallery.examples.navigation.step', { step: index + 1 }),
+    status: index < activeStep ? 'complete' : index === activeStep ? 'current' : 'pending',
+  }))
+  return (
+    <div className="flex w-full flex-col gap-4">
+      <div className="overflow-x-auto p-1"><StepIndicator steps={steps} showNumbers onStepClick={(id) => setActiveStep(Number(id))} /></div>
+      <StepperDots count={5} activeStep={activeStep} aria-label={t('design_system.gallery.examples.navigation.progress')} />
+      <div className="flex gap-2">
+        <Button variant="outline" size="sm" disabled={activeStep === 0} onClick={() => setActiveStep((value) => value - 1)}>{t('design_system.gallery.examples.navigation.previous')}</Button>
+        <Button variant="outline" size="sm" disabled={activeStep === 4} onClick={() => setActiveStep((value) => value + 1)}>{t('design_system.gallery.examples.navigation.next')}</Button>
+      </div>
+    </div>
+  )
+}
+
+<StepInteractiveDemo />`
+    },
+    {
+      id: "dots",
+      title: "StepperDots \xB7 6 states",
+      render: () => /* @__PURE__ */ jsx(StepperDotsDemo, {}),
+      code: `import * as React from 'react'
+import { StepIndicator, StepperDots, type StepIndicatorStep } from '@open-mercato/ui/primitives/step-indicator'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+function StepperDotsDemo() {
+  const t = useT()
+  return (
+    <div className="flex flex-wrap gap-8">
+      {(['sm', 'xs'] as const).map((size) => (
+        <div key={size} className="flex flex-col gap-4">
+          <span className="text-xs text-muted-foreground">{size}</span>
+          {[0, 1, 2].map((activeStep) => <StepperDots key={activeStep} count={3} activeStep={activeStep} size={size} aria-label={t('design_system.gallery.examples.navigation.progress')} />)}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+<StepperDotsDemo />`
     }
   ]
 };
@@ -476,14 +1277,7 @@ const notificationEntry = {
     {
       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"
-        }
-      ) }),
+      render: () => /* @__PURE__ */ jsx(NotificationFeedbackInformationSample, {}),
       code: `import { Notification } from '@open-mercato/ui/primitives/notification'
 
 <Notification
@@ -496,19 +1290,7 @@ const notificationEntry = {
     {
       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" })
-          ] })
-        }
-      ) }),
+      render: () => /* @__PURE__ */ jsx(NotificationFeedbackSuccessWithActionsSample, {}),
       code: `import { Notification } from '@open-mercato/ui/primitives/notification'
 import { LinkButton } from '@open-mercato/ui/primitives/link-button'
 
@@ -528,16 +1310,7 @@ import { LinkButton } from '@open-mercato/ui/primitives/link-button'
     {
       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" })
-        }
-      ) }),
+      render: () => /* @__PURE__ */ jsx(NotificationFeedbackErrorSample, {}),
       code: `import { Notification } from '@open-mercato/ui/primitives/notification'
 import { LinkButton } from '@open-mercato/ui/primitives/link-button'
 
@@ -553,37 +1326,17 @@ import { LinkButton } from '@open-mercato/ui/primitives/link-button'
 };
 const notificationFeedEntry = {
   id: "notification-feed",
+  figmaNodeId: "4308:731",
   title: "NotificationFeed",
   importPath: "@open-mercato/ui/primitives/notification-feed",
   variants: [
+    { id: "source-tabs-2", title: "4 row types / 2 tabs", render: () => /* @__PURE__ */ jsx(NotificationFeedExample, { tabs: 2 }), code: notificationFeedExampleCode(2) },
+    { id: "source-tabs-3", title: "4 row types / 3 tabs", render: () => /* @__PURE__ */ jsx(NotificationFeedExample, { tabs: 3 }), code: notificationFeedExampleCode(3) },
+    { id: "source-tabs-4", title: "4 row types / 4 tabs", render: () => /* @__PURE__ */ jsx(NotificationFeedExample, { tabs: 4 }), code: notificationFeedExampleCode(4) },
     {
       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" }) })
-      ] }) }),
+      render: () => /* @__PURE__ */ jsx(NotificationFeedFeedbackDefaultSample, {}),
       code: `import { Settings, UserPlus } from 'lucide-react'
 import {
   NotificationFeed,
@@ -642,16 +1395,189 @@ import { NotificationFeedIconBadge } from '@open-mercato/ui/primitives/notificat
   ]
 };
 const entries = [
+  bannerEntry,
   alertEntry,
   emptyStateEntry,
+  emptyStateIllustrationEntry,
   skeletonEntry,
   progressEntry,
   spinnerEntry,
   ratingEntry,
+  ratingBarEntry,
   stepIndicatorEntry,
   notificationEntry,
   notificationFeedEntry
 ];
+function AlertFeedbackStatusesLightSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-md flex-col gap-2", children: [
+    /* @__PURE__ */ jsx(Alert, { status: "error", style: "light", children: t("design_system.gallery.sampleCopy.paymentFailedTheCardWasDeclined") }),
+    /* @__PURE__ */ jsx(Alert, { status: "warning", style: "light", children: t("design_system.gallery.sampleCopy.inventorySyncIsRunningBehindSchedule") }),
+    /* @__PURE__ */ jsx(Alert, { status: "success", style: "light", children: t("design_system.gallery.sampleCopy.order10231WasFulfilled") }),
+    /* @__PURE__ */ jsx(Alert, { status: "information", style: "light", children: t("design_system.gallery.sampleCopy.pricesIncludeVATForEUCustomers") }),
+    /* @__PURE__ */ jsx(Alert, { status: "feature", style: "light", children: t("design_system.gallery.sampleCopy.bulkEditingIsNowAvailableInTheCatalog") })
+  ] });
+}
+function AlertFeedbackFilledSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsxs(Alert, { status: "error", style: "filled", size: "default", children: [
+    /* @__PURE__ */ jsx(AlertTitle, { children: t("design_system.gallery.sampleCopy.importFailed") }),
+    /* @__PURE__ */ jsx(AlertDescription, { children: t("design_system.gallery.sampleCopy.14RowsWereRejectedDownloadTheErrorReportToReview") })
+  ] }) });
+}
+function AlertFeedbackStrokeSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsxs(Alert, { status: "success", style: "stroke", size: "default", children: [
+    /* @__PURE__ */ jsx(AlertTitle, { children: t("design_system.gallery.sampleCopy.backupComplete") }),
+    /* @__PURE__ */ jsx(AlertDescription, { children: t("design_system.gallery.sampleCopy.theNightlySnapshotFinishedWithoutWarnings") })
+  ] }) });
+}
+function AlertFeedbackSizesSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-md flex-col gap-2", children: [
+    /* @__PURE__ */ jsx(Alert, { status: "information", size: "xs", children: t("design_system.gallery.sampleCopy.xsmallInlineFormHint") }),
+    /* @__PURE__ */ jsx(Alert, { status: "information", size: "sm", children: t("design_system.gallery.sampleCopy.smallTheDefaultSinglelineAlert") }),
+    /* @__PURE__ */ jsxs(Alert, { status: "information", size: "default", children: [
+      /* @__PURE__ */ jsx(AlertTitle, { children: t("design_system.gallery.sampleCopy.large") }),
+      /* @__PURE__ */ jsx(AlertDescription, { children: t("design_system.gallery.sampleCopy.multilineAlertWithATitleAndADescriptionBody") })
+    ] })
+  ] });
+}
+function AlertFeedbackDismissibleWithActionSample() {
+  const t = useT();
+  return /* @__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: t("design_system.gallery.sampleCopy.review") }),
+      children: t("design_system.gallery.sampleCopy.3ProductsAreMissingTaxCategories")
+    }
+  ) });
+}
+function EmptyStateFeedbackDefaultSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(
+    EmptyState,
+    {
+      title: t("design_system.gallery.sampleCopy.noCustomersYet"),
+      description: t("design_system.gallery.sampleCopy.createYourFirstCustomerToStartTrackingOpportunities")
+    }
+  ) });
+}
+function EmptyStateFeedbackWithActionsSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(
+    EmptyState,
+    {
+      icon: /* @__PURE__ */ jsx(Inbox, { className: "size-8" }),
+      title: t("design_system.gallery.sampleCopy.noOrdersFound"),
+      description: t("design_system.gallery.sampleCopy.ordersWillAppearHereOnceYourStorefrontStartsSelling"),
+      actions: /* @__PURE__ */ jsx(Button, { size: "sm", children: t("design_system.gallery.sampleCopy.createOrder") })
+    }
+  ) });
+}
+function EmptyStateFeedbackSubtleSample() {
+  const t = useT();
+  return /* @__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: t("design_system.gallery.sampleCopy.noResults"),
+      description: t("design_system.gallery.sampleCopy.tryADifferentSearchTermOrClearTheFilters")
+    }
+  ) });
+}
+function ProgressFeedbackLabelledSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(
+    Progress,
+    {
+      value: 80,
+      label: t("design_system.gallery.examples.controls.storage"),
+      showValue: true,
+      description: t("design_system.gallery.examples.controls.storageHint")
+    }
+  ) });
+}
+function SpinnerFeedbackInlineWithLabelSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2 text-sm text-muted-foreground", children: [
+    /* @__PURE__ */ jsx(Spinner, { size: "sm" }),
+    t("design_system.gallery.sampleCopy.loadingOrders")
+  ] });
+}
+function NotificationFeedbackInformationSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(
+    Notification,
+    {
+      title: t("design_system.gallery.samples.crypto.notificationMaintenance"),
+      description: t("design_system.gallery.sampleCopy.theAdminPanelWillBeReadonlyOnSundayBetween0200"),
+      timestamp: t("design_system.gallery.sampleCopy.2MinAgo")
+    }
+  ) });
+}
+function NotificationFeedbackSuccessWithActionsSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(
+    Notification,
+    {
+      status: "success",
+      title: t("design_system.gallery.sampleCopy.exportReady"),
+      description: t("design_system.gallery.sampleCopy.yourProductExport1204RowsFinishedSuccessfully"),
+      timestamp: t("design_system.gallery.sampleCopy.justNow"),
+      actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(LinkButton, { variant: "black", underline: "always", children: t("design_system.gallery.sampleCopy.download") }),
+        /* @__PURE__ */ jsx(LinkButton, { variant: "gray", underline: "always", children: t("design_system.gallery.sampleCopy.viewLog") })
+      ] })
+    }
+  ) });
+}
+function NotificationFeedbackErrorSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(
+    Notification,
+    {
+      status: "error",
+      title: t("design_system.gallery.sampleCopy.webhookDeliveryFailed"),
+      description: t("design_system.gallery.sampleCopy.theEndpointRespondedWith503After3Retries"),
+      timestamp: t("design_system.gallery.sampleCopy.5MinAgo"),
+      actions: /* @__PURE__ */ jsx(LinkButton, { variant: "error", underline: "always", children: t("design_system.gallery.sampleCopy.retryNow") })
+    }
+  ) });
+}
+function NotificationFeedFeedbackDefaultSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-sm", children: /* @__PURE__ */ jsxs(NotificationFeed, { children: [
+    /* @__PURE__ */ jsx(NotificationFeedHeader, { title: t("design_system.families.notifications"), children: /* @__PURE__ */ jsx(IconButton, { size: "sm", variant: "ghost", "aria-label": t("design_system.gallery.sampleCopy.notificationSettings"), 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: t("design_system.gallery.sampleCopy.newLeadGenerated"),
+          body: t("design_system.gallery.sampleCopy.johnSmithSubmittedTheContactForm"),
+          timestamp: t("design_system.gallery.sampleCopy.10MinutesAgo"),
+          unread: true
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        NotificationFeedItem,
+        {
+          icon: /* @__PURE__ */ jsx(NotificationFeedIconBadge, { tone: "success", children: /* @__PURE__ */ jsx(RefreshCw, { className: "size-5" }) }),
+          title: t("design_system.gallery.sampleCopy.catalogSyncCompleted"),
+          body: t("design_system.gallery.sampleCopy.312ProductsUpdatedFromThePIM"),
+          timestamp: t("design_system.gallery.sampleCopy.1HourAgo")
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(NotificationFeedFooter, { children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", className: "w-full", children: t("design_system.gallery.samples.feeds.archive") }) })
+  ] }) });
+}
 export {
   entries
 };