@open-mercato/core 0.6.7-develop.6785.1.1dd7cfac55 → 0.6.7-develop.6795.1.8a3f27921c

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

@@ -0,0 +1,475 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { CreditCard, LayoutGrid, Settings, ShoppingCart, Truck } from "lucide-react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@open-mercato/ui/primitives/tabs";
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator
+} from "@open-mercato/ui/primitives/breadcrumb";
+import { Pagination } from "@open-mercato/ui/primitives/pagination";
+import {
+  SegmentedControl,
+  SegmentedControlItem
+} from "@open-mercato/ui/primitives/segmented-control";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger
+} from "@open-mercato/ui/primitives/accordion";
+function PaginationBasicDemo() {
+  const [page, setPage] = React.useState(2);
+  const [pageSize, setPageSize] = React.useState(25);
+  return /* @__PURE__ */ jsx(
+    Pagination,
+    {
+      page,
+      pageSize,
+      total: 400,
+      onPageChange: setPage,
+      onPageSizeChange: setPageSize
+    }
+  );
+}
+function PaginationCompactDemo() {
+  const [page, setPage] = React.useState(1);
+  return /* @__PURE__ */ jsx(
+    Pagination,
+    {
+      page,
+      pageSize: 20,
+      total: 120,
+      onPageChange: setPage,
+      showFirstLast: false,
+      showPageSize: false
+    }
+  );
+}
+const tabsEntry = {
+  id: "tabs",
+  title: "Tabs",
+  importPath: "@open-mercato/ui/primitives/tabs",
+  usage: {
+    do: [
+      'variant="underline" is the canon for page-level tab strips; pill only for small embedded switchers.',
+      "TabsList always carries an aria-label; use count and leading to add context to triggers."
+    ],
+    dont: ["No hand-rolled tab strips from buttons and border classes \u2014 lint flags raw tab lists."]
+  },
+  docsAnchor: "#tabs",
+  figmaNodeId: "553:734",
+  variants: [
+    {
+      id: "underline",
+      title: "underline",
+      // Underline is the DS canon for page-level tab strips — flat rail
+      // with an accent underline, per-tab `leading` icon and `count` badge.
+      render: () => /* @__PURE__ */ jsxs(Tabs, { defaultValue: "orders", variant: "underline", className: "w-full", children: [
+        /* @__PURE__ */ jsxs(TabsList, { "aria-label": "Customer sections", children: [
+          /* @__PURE__ */ jsx(TabsTrigger, { value: "overview", leading: /* @__PURE__ */ jsx(LayoutGrid, { className: "size-4" }), children: "Overview" }),
+          /* @__PURE__ */ jsx(TabsTrigger, { value: "orders", leading: /* @__PURE__ */ jsx(ShoppingCart, { className: "size-4" }), count: 12, children: "Orders" }),
+          /* @__PURE__ */ jsx(TabsTrigger, { value: "settings", leading: /* @__PURE__ */ jsx(Settings, { className: "size-4" }), children: "Settings" })
+        ] }),
+        /* @__PURE__ */ jsx(TabsContent, { value: "overview", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Customer overview panel." }) }),
+        /* @__PURE__ */ jsx(TabsContent, { value: "orders", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "12 orders in the last 30 days." }) }),
+        /* @__PURE__ */ jsx(TabsContent, { value: "settings", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Notification and access settings." }) })
+      ] }),
+      code: `import { LayoutGrid, Settings, ShoppingCart } from 'lucide-react'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'
+
+<Tabs defaultValue="orders" variant="underline">
+  <TabsList aria-label="Customer sections">
+    <TabsTrigger value="overview" leading={<LayoutGrid className="size-4" />}>Overview</TabsTrigger>
+    <TabsTrigger value="orders" leading={<ShoppingCart className="size-4" />} count={12}>Orders</TabsTrigger>
+    <TabsTrigger value="settings" leading={<Settings className="size-4" />}>Settings</TabsTrigger>
+  </TabsList>
+  <TabsContent value="overview">\u2026</TabsContent>
+  <TabsContent value="orders">\u2026</TabsContent>
+  <TabsContent value="settings">\u2026</TabsContent>
+</Tabs>`
+    },
+    {
+      id: "pill",
+      title: "pill (default)",
+      render: () => /* @__PURE__ */ jsxs(Tabs, { defaultValue: "preview", children: [
+        /* @__PURE__ */ jsxs(TabsList, { "aria-label": "Editor view", children: [
+          /* @__PURE__ */ jsx(TabsTrigger, { value: "preview", children: "Preview" }),
+          /* @__PURE__ */ jsx(TabsTrigger, { value: "code", children: "Code" }),
+          /* @__PURE__ */ jsx(TabsTrigger, { value: "logs", children: "Logs" })
+        ] }),
+        /* @__PURE__ */ jsx(TabsContent, { value: "preview", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Rendered preview." }) }),
+        /* @__PURE__ */ jsx(TabsContent, { value: "code", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Source code panel." }) }),
+        /* @__PURE__ */ jsx(TabsContent, { value: "logs", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Runtime logs panel." }) })
+      ] }),
+      code: `import { Tabs, TabsContent, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'
+
+<Tabs defaultValue="preview">
+  <TabsList aria-label="Editor view">
+    <TabsTrigger value="preview">Preview</TabsTrigger>
+    <TabsTrigger value="code">Code</TabsTrigger>
+    <TabsTrigger value="logs">Logs</TabsTrigger>
+  </TabsList>
+  <TabsContent value="preview">\u2026</TabsContent>
+  <TabsContent value="code">\u2026</TabsContent>
+  <TabsContent value="logs">\u2026</TabsContent>
+</Tabs>`
+    },
+    {
+      id: "pill-vertical",
+      title: "pill, vertical",
+      render: () => /* @__PURE__ */ jsxs(Tabs, { defaultValue: "profile", orientation: "vertical", className: "w-full", children: [
+        /* @__PURE__ */ jsxs(TabsList, { "aria-label": "Account settings", children: [
+          /* @__PURE__ */ jsx(TabsTrigger, { value: "profile", children: "Profile" }),
+          /* @__PURE__ */ jsx(TabsTrigger, { value: "billing", children: "Billing" }),
+          /* @__PURE__ */ jsx(TabsTrigger, { value: "security", children: "Security" })
+        ] }),
+        /* @__PURE__ */ jsx(TabsContent, { value: "profile", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Profile settings panel." }) }),
+        /* @__PURE__ */ jsx(TabsContent, { value: "billing", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Billing settings panel." }) }),
+        /* @__PURE__ */ jsx(TabsContent, { value: "security", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Security settings panel." }) })
+      ] }),
+      code: `import { Tabs, TabsContent, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'
+
+<Tabs defaultValue="profile" orientation="vertical">
+  <TabsList aria-label="Account settings">
+    <TabsTrigger value="profile">Profile</TabsTrigger>
+    <TabsTrigger value="billing">Billing</TabsTrigger>
+    <TabsTrigger value="security">Security</TabsTrigger>
+  </TabsList>
+  <TabsContent value="profile">\u2026</TabsContent>
+  <TabsContent value="billing">\u2026</TabsContent>
+  <TabsContent value="security">\u2026</TabsContent>
+</Tabs>`
+    }
+  ]
+};
+const breadcrumbEntry = {
+  id: "breadcrumb",
+  title: "Breadcrumb",
+  importPath: "@open-mercato/ui/primitives/breadcrumb",
+  docsAnchor: "#breadcrumb",
+  variants: [
+    {
+      id: "slash",
+      title: "slash (default)",
+      render: () => /* @__PURE__ */ jsx(Breadcrumb, { children: /* @__PURE__ */ jsxs(BreadcrumbList, { children: [
+        /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, { href: "#gallery-entry-breadcrumb", children: "Dashboard" }) }),
+        /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
+        /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, { href: "#gallery-entry-breadcrumb", children: "Products" }) }),
+        /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
+        /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbPage, { children: "Winter catalog" }) })
+      ] }) }),
+      code: `import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@open-mercato/ui/primitives/breadcrumb'
+
+<Breadcrumb>
+  <BreadcrumbList>
+    <BreadcrumbItem>
+      <BreadcrumbLink href="/backend">Dashboard</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem>
+      <BreadcrumbLink href="/backend/products">Products</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem>
+      <BreadcrumbPage>Winter catalog</BreadcrumbPage>
+    </BreadcrumbItem>
+  </BreadcrumbList>
+</Breadcrumb>`
+    },
+    {
+      id: "arrow",
+      title: "arrow divider",
+      render: () => /* @__PURE__ */ jsx(Breadcrumb, { divider: "arrow", children: /* @__PURE__ */ jsxs(BreadcrumbList, { children: [
+        /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, { href: "#gallery-entry-breadcrumb", children: "Orders" }) }),
+        /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
+        /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, { href: "#gallery-entry-breadcrumb", children: "#20418" }) }),
+        /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
+        /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbPage, { children: "Shipment" }) })
+      ] }) }),
+      code: `import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@open-mercato/ui/primitives/breadcrumb'
+
+<Breadcrumb divider="arrow">
+  <BreadcrumbList>
+    <BreadcrumbItem>
+      <BreadcrumbLink href="/backend/orders">Orders</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem>
+      <BreadcrumbLink href="/backend/orders/20418">#20418</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem>
+      <BreadcrumbPage>Shipment</BreadcrumbPage>
+    </BreadcrumbItem>
+  </BreadcrumbList>
+</Breadcrumb>`
+    },
+    {
+      id: "ellipsis",
+      title: "collapsed (ellipsis)",
+      render: () => /* @__PURE__ */ jsx(Breadcrumb, { children: /* @__PURE__ */ jsxs(BreadcrumbList, { children: [
+        /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, { href: "#gallery-entry-breadcrumb", children: "Dashboard" }) }),
+        /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
+        /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbEllipsis, {}) }),
+        /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
+        /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, { href: "#gallery-entry-breadcrumb", children: "Attributes" }) }),
+        /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
+        /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbPage, { children: "Color" }) })
+      ] }) }),
+      code: `import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@open-mercato/ui/primitives/breadcrumb'
+
+<Breadcrumb>
+  <BreadcrumbList>
+    <BreadcrumbItem>
+      <BreadcrumbLink href="/backend">Dashboard</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem>
+      <BreadcrumbEllipsis />
+    </BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem>
+      <BreadcrumbLink href="/backend/products/attributes">Attributes</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem>
+      <BreadcrumbPage>Color</BreadcrumbPage>
+    </BreadcrumbItem>
+  </BreadcrumbList>
+</Breadcrumb>`
+    }
+  ]
+};
+const paginationEntry = {
+  id: "pagination",
+  title: "Pagination",
+  importPath: "@open-mercato/ui/primitives/pagination",
+  docsAnchor: "#pagination",
+  variants: [
+    {
+      id: "basic",
+      title: "Basic",
+      render: () => /* @__PURE__ */ jsx(PaginationBasicDemo, {}),
+      code: `import * as React from 'react'
+import { Pagination } from '@open-mercato/ui/primitives/pagination'
+
+const [page, setPage] = React.useState(2)
+const [pageSize, setPageSize] = React.useState(25)
+
+<Pagination
+  page={page}
+  pageSize={pageSize}
+  total={400}
+  onPageChange={setPage}
+  onPageSizeChange={setPageSize}
+/>`
+    },
+    {
+      id: "compact",
+      title: "Compact",
+      render: () => /* @__PURE__ */ jsx(PaginationCompactDemo, {}),
+      code: `import * as React from 'react'
+import { Pagination } from '@open-mercato/ui/primitives/pagination'
+
+const [page, setPage] = React.useState(1)
+
+<Pagination
+  page={page}
+  pageSize={20}
+  total={120}
+  onPageChange={setPage}
+  showFirstLast={false}
+  showPageSize={false}
+/>`
+    }
+  ]
+};
+const segmentedControlEntry = {
+  id: "segmented-control",
+  title: "SegmentedControl",
+  importPath: "@open-mercato/ui/primitives/segmented-control",
+  docsAnchor: "#segmentedcontrol",
+  variants: [
+    {
+      id: "default",
+      title: "default",
+      render: () => /* @__PURE__ */ jsxs(SegmentedControl, { defaultValue: "all", "aria-label": "View filter", children: [
+        /* @__PURE__ */ jsx(SegmentedControlItem, { value: "all", children: "All" }),
+        /* @__PURE__ */ jsx(SegmentedControlItem, { value: "active", children: "Active" }),
+        /* @__PURE__ */ jsx(SegmentedControlItem, { value: "archived", children: "Archived" })
+      ] }),
+      code: `import { SegmentedControl, SegmentedControlItem } from '@open-mercato/ui/primitives/segmented-control'
+
+<SegmentedControl defaultValue="all" aria-label="View filter">
+  <SegmentedControlItem value="all">All</SegmentedControlItem>
+  <SegmentedControlItem value="active">Active</SegmentedControlItem>
+  <SegmentedControlItem value="archived">Archived</SegmentedControlItem>
+</SegmentedControl>`
+    },
+    {
+      id: "small",
+      title: "Small",
+      render: () => /* @__PURE__ */ jsxs(SegmentedControl, { size: "sm", defaultValue: "30d", "aria-label": "Chart period", children: [
+        /* @__PURE__ */ jsx(SegmentedControlItem, { value: "7d", children: "7d" }),
+        /* @__PURE__ */ jsx(SegmentedControlItem, { value: "30d", children: "30d" }),
+        /* @__PURE__ */ jsx(SegmentedControlItem, { value: "90d", children: "90d" }),
+        /* @__PURE__ */ jsx(SegmentedControlItem, { value: "1y", children: "1y" })
+      ] }),
+      code: `import { SegmentedControl, SegmentedControlItem } from '@open-mercato/ui/primitives/segmented-control'
+
+<SegmentedControl size="sm" defaultValue="30d" aria-label="Chart period">
+  <SegmentedControlItem value="7d">7d</SegmentedControlItem>
+  <SegmentedControlItem value="30d">30d</SegmentedControlItem>
+  <SegmentedControlItem value="90d">90d</SegmentedControlItem>
+  <SegmentedControlItem value="1y">1y</SegmentedControlItem>
+</SegmentedControl>`
+    },
+    {
+      id: "disabled",
+      title: "Disabled",
+      render: () => /* @__PURE__ */ jsxs(SegmentedControl, { defaultValue: "list", disabled: true, "aria-label": "Layout", children: [
+        /* @__PURE__ */ jsx(SegmentedControlItem, { value: "list", children: "List" }),
+        /* @__PURE__ */ jsx(SegmentedControlItem, { value: "grid", children: "Grid" })
+      ] }),
+      code: `import { SegmentedControl, SegmentedControlItem } from '@open-mercato/ui/primitives/segmented-control'
+
+<SegmentedControl defaultValue="list" disabled aria-label="Layout">
+  <SegmentedControlItem value="list">List</SegmentedControlItem>
+  <SegmentedControlItem value="grid">Grid</SegmentedControlItem>
+</SegmentedControl>`
+    }
+  ]
+};
+const accordionEntry = {
+  id: "accordion",
+  title: "Accordion",
+  importPath: "@open-mercato/ui/primitives/accordion",
+  docsAnchor: "#accordion",
+  variants: [
+    {
+      id: "card",
+      title: "card (default)",
+      render: () => /* @__PURE__ */ jsxs(Accordion, { type: "single", collapsible: true, defaultValue: "shipping", className: "w-full space-y-2", children: [
+        /* @__PURE__ */ jsxs(AccordionItem, { value: "shipping", children: [
+          /* @__PURE__ */ jsx(AccordionTrigger, { children: "Shipping and delivery" }),
+          /* @__PURE__ */ jsx(AccordionContent, { children: "Orders placed before 2 PM ship the same business day from the nearest warehouse." })
+        ] }),
+        /* @__PURE__ */ jsxs(AccordionItem, { value: "returns", children: [
+          /* @__PURE__ */ jsx(AccordionTrigger, { children: "Returns" }),
+          /* @__PURE__ */ jsx(AccordionContent, { children: "Items can be returned within 30 days of delivery in their original packaging." })
+        ] }),
+        /* @__PURE__ */ jsxs(AccordionItem, { value: "payments", children: [
+          /* @__PURE__ */ jsx(AccordionTrigger, { children: "Payment methods" }),
+          /* @__PURE__ */ jsx(AccordionContent, { children: "We accept cards, bank transfer, and deferred payment for verified B2B accounts." })
+        ] })
+      ] }),
+      code: `import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@open-mercato/ui/primitives/accordion'
+
+<Accordion type="single" collapsible defaultValue="shipping" className="w-full space-y-2">
+  <AccordionItem value="shipping">
+    <AccordionTrigger>Shipping and delivery</AccordionTrigger>
+    <AccordionContent>Orders placed before 2 PM ship the same business day.</AccordionContent>
+  </AccordionItem>
+  <AccordionItem value="returns">
+    <AccordionTrigger>Returns</AccordionTrigger>
+    <AccordionContent>Items can be returned within 30 days of delivery.</AccordionContent>
+  </AccordionItem>
+  <AccordionItem value="payments">
+    <AccordionTrigger>Payment methods</AccordionTrigger>
+    <AccordionContent>We accept cards, bank transfer, and deferred payment.</AccordionContent>
+  </AccordionItem>
+</Accordion>`
+    },
+    {
+      id: "left-icon",
+      title: "With leftIcon",
+      render: () => /* @__PURE__ */ jsxs(Accordion, { type: "single", collapsible: true, className: "w-full space-y-2", children: [
+        /* @__PURE__ */ jsxs(AccordionItem, { value: "shipping", children: [
+          /* @__PURE__ */ jsx(AccordionTrigger, { leftIcon: /* @__PURE__ */ jsx(Truck, {}), children: "How fast is shipping?" }),
+          /* @__PURE__ */ jsx(AccordionContent, { children: "Same-day dispatch on weekdays; delivery typically takes 1\u20133 business days." })
+        ] }),
+        /* @__PURE__ */ jsxs(AccordionItem, { value: "billing", children: [
+          /* @__PURE__ */ jsx(AccordionTrigger, { leftIcon: /* @__PURE__ */ jsx(CreditCard, {}), children: "When am I charged?" }),
+          /* @__PURE__ */ jsx(AccordionContent, { children: "Your card is charged when the order ships, never at checkout." })
+        ] })
+      ] }),
+      code: `import { CreditCard, Truck } from 'lucide-react'
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@open-mercato/ui/primitives/accordion'
+
+<Accordion type="single" collapsible className="w-full space-y-2">
+  <AccordionItem value="shipping">
+    <AccordionTrigger leftIcon={<Truck />}>How fast is shipping?</AccordionTrigger>
+    <AccordionContent>Same-day dispatch on weekdays.</AccordionContent>
+  </AccordionItem>
+  <AccordionItem value="billing">
+    <AccordionTrigger leftIcon={<CreditCard />}>When am I charged?</AccordionTrigger>
+    <AccordionContent>Your card is charged when the order ships.</AccordionContent>
+  </AccordionItem>
+</Accordion>`
+    },
+    {
+      id: "chevron",
+      title: "Chevron indicator",
+      render: () => /* @__PURE__ */ jsxs(Accordion, { type: "multiple", className: "w-full space-y-2", children: [
+        /* @__PURE__ */ jsxs(AccordionItem, { value: "general", children: [
+          /* @__PURE__ */ jsx(AccordionTrigger, { triggerIcon: "chevron", children: "General" }),
+          /* @__PURE__ */ jsx(AccordionContent, { children: "Store name, contact details, and default locale for the storefront." })
+        ] }),
+        /* @__PURE__ */ jsxs(AccordionItem, { value: "advanced", children: [
+          /* @__PURE__ */ jsx(AccordionTrigger, { triggerIcon: "chevron", children: "Advanced" }),
+          /* @__PURE__ */ jsx(AccordionContent, { children: "Webhooks, API keys, and other developer-facing configuration." })
+        ] })
+      ] }),
+      code: `import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@open-mercato/ui/primitives/accordion'
+
+<Accordion type="multiple" className="w-full space-y-2">
+  <AccordionItem value="general">
+    <AccordionTrigger triggerIcon="chevron">General</AccordionTrigger>
+    <AccordionContent>Store name, contact details, and default locale.</AccordionContent>
+  </AccordionItem>
+  <AccordionItem value="advanced">
+    <AccordionTrigger triggerIcon="chevron">Advanced</AccordionTrigger>
+    <AccordionContent>Webhooks, API keys, and developer configuration.</AccordionContent>
+  </AccordionItem>
+</Accordion>`
+    }
+  ]
+};
+const entries = [
+  tabsEntry,
+  breadcrumbEntry,
+  paginationEntry,
+  segmentedControlEntry,
+  accordionEntry
+];
+export {
+  entries
+};
+//# sourceMappingURL=navigation.js.map

package/dist/modules/design_system/gallery/entries/navigation.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/entries/navigation.tsx"],
+  "sourcesContent": ["import * as React from 'react'\nimport { CreditCard, LayoutGrid, Settings, ShoppingCart, Truck } from 'lucide-react'\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@open-mercato/ui/primitives/breadcrumb'\nimport { Pagination } from '@open-mercato/ui/primitives/pagination'\nimport {\n  SegmentedControl,\n  SegmentedControlItem,\n} from '@open-mercato/ui/primitives/segmented-control'\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from '@open-mercato/ui/primitives/accordion'\nimport type { GalleryEntry } from '../types'\n\n// Component titles and variant names are proper nouns from the codebase and\n// are deliberately not translated. `code` MUST contain the entry's importPath\n// (enforced by the registry-integrity test) and is always reviewed alongside\n// its sibling `render`.\n\n// Pagination is a controlled component \u2014 these small wrappers own the page\n// state so the preview stays interactive without polluting the entry shape.\n\nfunction PaginationBasicDemo() {\n  const [page, setPage] = React.useState(2)\n  const [pageSize, setPageSize] = React.useState(25)\n  return (\n    <Pagination\n      page={page}\n      pageSize={pageSize}\n      total={400}\n      onPageChange={setPage}\n      onPageSizeChange={setPageSize}\n    />\n  )\n}\n\nfunction PaginationCompactDemo() {\n  const [page, setPage] = React.useState(1)\n  return (\n    <Pagination\n      page={page}\n      pageSize={20}\n      total={120}\n      onPageChange={setPage}\n      showFirstLast={false}\n      showPageSize={false}\n    />\n  )\n}\n\nconst tabsEntry: GalleryEntry = {\n  id: 'tabs',\n  title: 'Tabs',\n  importPath: '@open-mercato/ui/primitives/tabs',\n  usage: {\n    do: [\n      'variant=\"underline\" is the canon for page-level tab strips; pill only for small embedded switchers.',\n      'TabsList always carries an aria-label; use count and leading to add context to triggers.',\n    ],\n    dont: ['No hand-rolled tab strips from buttons and border classes \u2014 lint flags raw tab lists.'],\n  },\n  docsAnchor: '#tabs',\n  figmaNodeId: '553:734',\n  variants: [\n    {\n      id: 'underline',\n      title: 'underline',\n      // Underline is the DS canon for page-level tab strips \u2014 flat rail\n      // with an accent underline, per-tab `leading` icon and `count` badge.\n      render: () => (\n        <Tabs defaultValue=\"orders\" variant=\"underline\" className=\"w-full\">\n          <TabsList aria-label=\"Customer sections\">\n            <TabsTrigger value=\"overview\" leading={<LayoutGrid className=\"size-4\" />}>\n              Overview\n            </TabsTrigger>\n            <TabsTrigger value=\"orders\" leading={<ShoppingCart className=\"size-4\" />} count={12}>\n              Orders\n            </TabsTrigger>\n            <TabsTrigger value=\"settings\" leading={<Settings className=\"size-4\" />}>\n              Settings\n            </TabsTrigger>\n          </TabsList>\n          <TabsContent value=\"overview\">\n            <p className=\"text-sm text-muted-foreground\">Customer overview panel.</p>\n          </TabsContent>\n          <TabsContent value=\"orders\">\n            <p className=\"text-sm text-muted-foreground\">12 orders in the last 30 days.</p>\n          </TabsContent>\n          <TabsContent value=\"settings\">\n            <p className=\"text-sm text-muted-foreground\">Notification and access settings.</p>\n          </TabsContent>\n        </Tabs>\n      ),\n      code: `import { LayoutGrid, Settings, ShoppingCart } from 'lucide-react'\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'\n\n<Tabs defaultValue=\"orders\" variant=\"underline\">\n  <TabsList aria-label=\"Customer sections\">\n    <TabsTrigger value=\"overview\" leading={<LayoutGrid className=\"size-4\" />}>Overview</TabsTrigger>\n    <TabsTrigger value=\"orders\" leading={<ShoppingCart className=\"size-4\" />} count={12}>Orders</TabsTrigger>\n    <TabsTrigger value=\"settings\" leading={<Settings className=\"size-4\" />}>Settings</TabsTrigger>\n  </TabsList>\n  <TabsContent value=\"overview\">\u2026</TabsContent>\n  <TabsContent value=\"orders\">\u2026</TabsContent>\n  <TabsContent value=\"settings\">\u2026</TabsContent>\n</Tabs>`,\n    },\n    {\n      id: 'pill',\n      title: 'pill (default)',\n      render: () => (\n        <Tabs defaultValue=\"preview\">\n          <TabsList aria-label=\"Editor view\">\n            <TabsTrigger value=\"preview\">Preview</TabsTrigger>\n            <TabsTrigger value=\"code\">Code</TabsTrigger>\n            <TabsTrigger value=\"logs\">Logs</TabsTrigger>\n          </TabsList>\n          <TabsContent value=\"preview\">\n            <p className=\"text-sm text-muted-foreground\">Rendered preview.</p>\n          </TabsContent>\n          <TabsContent value=\"code\">\n            <p className=\"text-sm text-muted-foreground\">Source code panel.</p>\n          </TabsContent>\n          <TabsContent value=\"logs\">\n            <p className=\"text-sm text-muted-foreground\">Runtime logs panel.</p>\n          </TabsContent>\n        </Tabs>\n      ),\n      code: `import { Tabs, TabsContent, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'\n\n<Tabs defaultValue=\"preview\">\n  <TabsList aria-label=\"Editor view\">\n    <TabsTrigger value=\"preview\">Preview</TabsTrigger>\n    <TabsTrigger value=\"code\">Code</TabsTrigger>\n    <TabsTrigger value=\"logs\">Logs</TabsTrigger>\n  </TabsList>\n  <TabsContent value=\"preview\">\u2026</TabsContent>\n  <TabsContent value=\"code\">\u2026</TabsContent>\n  <TabsContent value=\"logs\">\u2026</TabsContent>\n</Tabs>`,\n    },\n    {\n      id: 'pill-vertical',\n      title: 'pill, vertical',\n      render: () => (\n        <Tabs defaultValue=\"profile\" orientation=\"vertical\" className=\"w-full\">\n          <TabsList aria-label=\"Account settings\">\n            <TabsTrigger value=\"profile\">Profile</TabsTrigger>\n            <TabsTrigger value=\"billing\">Billing</TabsTrigger>\n            <TabsTrigger value=\"security\">Security</TabsTrigger>\n          </TabsList>\n          <TabsContent value=\"profile\">\n            <p className=\"text-sm text-muted-foreground\">Profile settings panel.</p>\n          </TabsContent>\n          <TabsContent value=\"billing\">\n            <p className=\"text-sm text-muted-foreground\">Billing settings panel.</p>\n          </TabsContent>\n          <TabsContent value=\"security\">\n            <p className=\"text-sm text-muted-foreground\">Security settings panel.</p>\n          </TabsContent>\n        </Tabs>\n      ),\n      code: `import { Tabs, TabsContent, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'\n\n<Tabs defaultValue=\"profile\" orientation=\"vertical\">\n  <TabsList aria-label=\"Account settings\">\n    <TabsTrigger value=\"profile\">Profile</TabsTrigger>\n    <TabsTrigger value=\"billing\">Billing</TabsTrigger>\n    <TabsTrigger value=\"security\">Security</TabsTrigger>\n  </TabsList>\n  <TabsContent value=\"profile\">\u2026</TabsContent>\n  <TabsContent value=\"billing\">\u2026</TabsContent>\n  <TabsContent value=\"security\">\u2026</TabsContent>\n</Tabs>`,\n    },\n  ],\n}\n\nconst breadcrumbEntry: GalleryEntry = {\n  id: 'breadcrumb',\n  title: 'Breadcrumb',\n  importPath: '@open-mercato/ui/primitives/breadcrumb',\n  docsAnchor: '#breadcrumb',\n  variants: [\n    {\n      id: 'slash',\n      title: 'slash (default)',\n      render: () => (\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#gallery-entry-breadcrumb\">Dashboard</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#gallery-entry-breadcrumb\">Products</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Winter catalog</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      ),\n      code: `import {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@open-mercato/ui/primitives/breadcrumb'\n\n<Breadcrumb>\n  <BreadcrumbList>\n    <BreadcrumbItem>\n      <BreadcrumbLink href=\"/backend\">Dashboard</BreadcrumbLink>\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbLink href=\"/backend/products\">Products</BreadcrumbLink>\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbPage>Winter catalog</BreadcrumbPage>\n    </BreadcrumbItem>\n  </BreadcrumbList>\n</Breadcrumb>`,\n    },\n    {\n      id: 'arrow',\n      title: 'arrow divider',\n      render: () => (\n        <Breadcrumb divider=\"arrow\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#gallery-entry-breadcrumb\">Orders</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#gallery-entry-breadcrumb\">#20418</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Shipment</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      ),\n      code: `import {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@open-mercato/ui/primitives/breadcrumb'\n\n<Breadcrumb divider=\"arrow\">\n  <BreadcrumbList>\n    <BreadcrumbItem>\n      <BreadcrumbLink href=\"/backend/orders\">Orders</BreadcrumbLink>\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbLink href=\"/backend/orders/20418\">#20418</BreadcrumbLink>\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbPage>Shipment</BreadcrumbPage>\n    </BreadcrumbItem>\n  </BreadcrumbList>\n</Breadcrumb>`,\n    },\n    {\n      id: 'ellipsis',\n      title: 'collapsed (ellipsis)',\n      render: () => (\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#gallery-entry-breadcrumb\">Dashboard</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbEllipsis />\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#gallery-entry-breadcrumb\">Attributes</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Color</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      ),\n      code: `import {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@open-mercato/ui/primitives/breadcrumb'\n\n<Breadcrumb>\n  <BreadcrumbList>\n    <BreadcrumbItem>\n      <BreadcrumbLink href=\"/backend\">Dashboard</BreadcrumbLink>\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbEllipsis />\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbLink href=\"/backend/products/attributes\">Attributes</BreadcrumbLink>\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbPage>Color</BreadcrumbPage>\n    </BreadcrumbItem>\n  </BreadcrumbList>\n</Breadcrumb>`,\n    },\n  ],\n}\n\nconst paginationEntry: GalleryEntry = {\n  id: 'pagination',\n  title: 'Pagination',\n  importPath: '@open-mercato/ui/primitives/pagination',\n  docsAnchor: '#pagination',\n  variants: [\n    {\n      id: 'basic',\n      title: 'Basic',\n      render: () => <PaginationBasicDemo />,\n      code: `import * as React from 'react'\nimport { Pagination } from '@open-mercato/ui/primitives/pagination'\n\nconst [page, setPage] = React.useState(2)\nconst [pageSize, setPageSize] = React.useState(25)\n\n<Pagination\n  page={page}\n  pageSize={pageSize}\n  total={400}\n  onPageChange={setPage}\n  onPageSizeChange={setPageSize}\n/>`,\n    },\n    {\n      id: 'compact',\n      title: 'Compact',\n      render: () => <PaginationCompactDemo />,\n      code: `import * as React from 'react'\nimport { Pagination } from '@open-mercato/ui/primitives/pagination'\n\nconst [page, setPage] = React.useState(1)\n\n<Pagination\n  page={page}\n  pageSize={20}\n  total={120}\n  onPageChange={setPage}\n  showFirstLast={false}\n  showPageSize={false}\n/>`,\n    },\n  ],\n}\n\nconst segmentedControlEntry: GalleryEntry = {\n  id: 'segmented-control',\n  title: 'SegmentedControl',\n  importPath: '@open-mercato/ui/primitives/segmented-control',\n  docsAnchor: '#segmentedcontrol',\n  variants: [\n    {\n      id: 'default',\n      title: 'default',\n      render: () => (\n        <SegmentedControl defaultValue=\"all\" aria-label=\"View filter\">\n          <SegmentedControlItem value=\"all\">All</SegmentedControlItem>\n          <SegmentedControlItem value=\"active\">Active</SegmentedControlItem>\n          <SegmentedControlItem value=\"archived\">Archived</SegmentedControlItem>\n        </SegmentedControl>\n      ),\n      code: `import { SegmentedControl, SegmentedControlItem } from '@open-mercato/ui/primitives/segmented-control'\n\n<SegmentedControl defaultValue=\"all\" aria-label=\"View filter\">\n  <SegmentedControlItem value=\"all\">All</SegmentedControlItem>\n  <SegmentedControlItem value=\"active\">Active</SegmentedControlItem>\n  <SegmentedControlItem value=\"archived\">Archived</SegmentedControlItem>\n</SegmentedControl>`,\n    },\n    {\n      id: 'small',\n      title: 'Small',\n      render: () => (\n        <SegmentedControl size=\"sm\" defaultValue=\"30d\" aria-label=\"Chart period\">\n          <SegmentedControlItem value=\"7d\">7d</SegmentedControlItem>\n          <SegmentedControlItem value=\"30d\">30d</SegmentedControlItem>\n          <SegmentedControlItem value=\"90d\">90d</SegmentedControlItem>\n          <SegmentedControlItem value=\"1y\">1y</SegmentedControlItem>\n        </SegmentedControl>\n      ),\n      code: `import { SegmentedControl, SegmentedControlItem } from '@open-mercato/ui/primitives/segmented-control'\n\n<SegmentedControl size=\"sm\" defaultValue=\"30d\" aria-label=\"Chart period\">\n  <SegmentedControlItem value=\"7d\">7d</SegmentedControlItem>\n  <SegmentedControlItem value=\"30d\">30d</SegmentedControlItem>\n  <SegmentedControlItem value=\"90d\">90d</SegmentedControlItem>\n  <SegmentedControlItem value=\"1y\">1y</SegmentedControlItem>\n</SegmentedControl>`,\n    },\n    {\n      id: 'disabled',\n      title: 'Disabled',\n      render: () => (\n        <SegmentedControl defaultValue=\"list\" disabled aria-label=\"Layout\">\n          <SegmentedControlItem value=\"list\">List</SegmentedControlItem>\n          <SegmentedControlItem value=\"grid\">Grid</SegmentedControlItem>\n        </SegmentedControl>\n      ),\n      code: `import { SegmentedControl, SegmentedControlItem } from '@open-mercato/ui/primitives/segmented-control'\n\n<SegmentedControl defaultValue=\"list\" disabled aria-label=\"Layout\">\n  <SegmentedControlItem value=\"list\">List</SegmentedControlItem>\n  <SegmentedControlItem value=\"grid\">Grid</SegmentedControlItem>\n</SegmentedControl>`,\n    },\n  ],\n}\n\nconst accordionEntry: GalleryEntry = {\n  id: 'accordion',\n  title: 'Accordion',\n  importPath: '@open-mercato/ui/primitives/accordion',\n  docsAnchor: '#accordion',\n  variants: [\n    {\n      id: 'card',\n      title: 'card (default)',\n      render: () => (\n        <Accordion type=\"single\" collapsible defaultValue=\"shipping\" className=\"w-full space-y-2\">\n          <AccordionItem value=\"shipping\">\n            <AccordionTrigger>Shipping and delivery</AccordionTrigger>\n            <AccordionContent>\n              Orders placed before 2 PM ship the same business day from the nearest warehouse.\n            </AccordionContent>\n          </AccordionItem>\n          <AccordionItem value=\"returns\">\n            <AccordionTrigger>Returns</AccordionTrigger>\n            <AccordionContent>\n              Items can be returned within 30 days of delivery in their original packaging.\n            </AccordionContent>\n          </AccordionItem>\n          <AccordionItem value=\"payments\">\n            <AccordionTrigger>Payment methods</AccordionTrigger>\n            <AccordionContent>\n              We accept cards, bank transfer, and deferred payment for verified B2B accounts.\n            </AccordionContent>\n          </AccordionItem>\n        </Accordion>\n      ),\n      code: `import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@open-mercato/ui/primitives/accordion'\n\n<Accordion type=\"single\" collapsible defaultValue=\"shipping\" className=\"w-full space-y-2\">\n  <AccordionItem value=\"shipping\">\n    <AccordionTrigger>Shipping and delivery</AccordionTrigger>\n    <AccordionContent>Orders placed before 2 PM ship the same business day.</AccordionContent>\n  </AccordionItem>\n  <AccordionItem value=\"returns\">\n    <AccordionTrigger>Returns</AccordionTrigger>\n    <AccordionContent>Items can be returned within 30 days of delivery.</AccordionContent>\n  </AccordionItem>\n  <AccordionItem value=\"payments\">\n    <AccordionTrigger>Payment methods</AccordionTrigger>\n    <AccordionContent>We accept cards, bank transfer, and deferred payment.</AccordionContent>\n  </AccordionItem>\n</Accordion>`,\n    },\n    {\n      id: 'left-icon',\n      title: 'With leftIcon',\n      render: () => (\n        <Accordion type=\"single\" collapsible className=\"w-full space-y-2\">\n          <AccordionItem value=\"shipping\">\n            <AccordionTrigger leftIcon={<Truck />}>How fast is shipping?</AccordionTrigger>\n            <AccordionContent>\n              Same-day dispatch on weekdays; delivery typically takes 1\u20133 business days.\n            </AccordionContent>\n          </AccordionItem>\n          <AccordionItem value=\"billing\">\n            <AccordionTrigger leftIcon={<CreditCard />}>When am I charged?</AccordionTrigger>\n            <AccordionContent>\n              Your card is charged when the order ships, never at checkout.\n            </AccordionContent>\n          </AccordionItem>\n        </Accordion>\n      ),\n      code: `import { CreditCard, Truck } from 'lucide-react'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@open-mercato/ui/primitives/accordion'\n\n<Accordion type=\"single\" collapsible className=\"w-full space-y-2\">\n  <AccordionItem value=\"shipping\">\n    <AccordionTrigger leftIcon={<Truck />}>How fast is shipping?</AccordionTrigger>\n    <AccordionContent>Same-day dispatch on weekdays.</AccordionContent>\n  </AccordionItem>\n  <AccordionItem value=\"billing\">\n    <AccordionTrigger leftIcon={<CreditCard />}>When am I charged?</AccordionTrigger>\n    <AccordionContent>Your card is charged when the order ships.</AccordionContent>\n  </AccordionItem>\n</Accordion>`,\n    },\n    {\n      id: 'chevron',\n      title: 'Chevron indicator',\n      render: () => (\n        <Accordion type=\"multiple\" className=\"w-full space-y-2\">\n          <AccordionItem value=\"general\">\n            <AccordionTrigger triggerIcon=\"chevron\">General</AccordionTrigger>\n            <AccordionContent>\n              Store name, contact details, and default locale for the storefront.\n            </AccordionContent>\n          </AccordionItem>\n          <AccordionItem value=\"advanced\">\n            <AccordionTrigger triggerIcon=\"chevron\">Advanced</AccordionTrigger>\n            <AccordionContent>\n              Webhooks, API keys, and other developer-facing configuration.\n            </AccordionContent>\n          </AccordionItem>\n        </Accordion>\n      ),\n      code: `import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@open-mercato/ui/primitives/accordion'\n\n<Accordion type=\"multiple\" className=\"w-full space-y-2\">\n  <AccordionItem value=\"general\">\n    <AccordionTrigger triggerIcon=\"chevron\">General</AccordionTrigger>\n    <AccordionContent>Store name, contact details, and default locale.</AccordionContent>\n  </AccordionItem>\n  <AccordionItem value=\"advanced\">\n    <AccordionTrigger triggerIcon=\"chevron\">Advanced</AccordionTrigger>\n    <AccordionContent>Webhooks, API keys, and developer configuration.</AccordionContent>\n  </AccordionItem>\n</Accordion>`,\n    },\n  ],\n}\n\nexport const entries: GalleryEntry[] = [\n  tabsEntry,\n  breadcrumbEntry,\n  paginationEntry,\n  segmentedControlEntry,\n  accordionEntry,\n]\n"],
+  "mappings": "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",
+  "names": []
+}