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

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

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

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

@@ -0,0 +1,505 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Download } from "lucide-react";
+import { Button } from "@open-mercato/ui/primitives/button";
+import {
+  FilterBar
+} from "@open-mercato/ui/backend/FilterBar";
+import { QuickFilters } from "@open-mercato/ui/backend/filters/QuickFilters";
+import { ActiveFilterChips } from "@open-mercato/ui/backend/filters/ActiveFilterChips";
+import { AdvancedFilterBuilder } from "@open-mercato/ui/backend/filters/AdvancedFilterBuilder";
+import { FilterEmptyState } from "@open-mercato/ui/backend/filters/FilterEmptyState";
+import { ListEmptyState } from "@open-mercato/ui/backend/filters/ListEmptyState";
+import { FilteredEmptyResults } from "@open-mercato/ui/backend/filters/FilteredEmptyResults";
+import { SearchEmptyResults } from "@open-mercato/ui/backend/filters/SearchEmptyResults";
+const demoFilterDefs = [
+  { id: "city", label: "City", type: "text", placeholder: "e.g. Berlin" },
+  {
+    id: "status",
+    label: "Status",
+    type: "select",
+    options: [
+      { value: "active", label: "Active" },
+      { value: "prospect", label: "Prospect" },
+      { value: "churned", label: "Churned" }
+    ]
+  },
+  { id: "hasOpenDeals", label: "Has open deals", type: "checkbox" }
+];
+const demoFields = [
+  { key: "name", label: "Name", type: "text" },
+  { key: "email", label: "Email", type: "text" },
+  {
+    key: "status",
+    label: "Status",
+    type: "select",
+    options: [
+      { value: "active", label: "Active", tone: "success" },
+      { value: "prospect", label: "Prospect", tone: "info" },
+      { value: "churned", label: "Churned", tone: "error" }
+    ]
+  },
+  { key: "employees", label: "Employees", type: "number" }
+];
+function rule(id, field, operator, value) {
+  return { id, type: "rule", field, operator, value };
+}
+function tree(children) {
+  return { root: { id: "root", type: "group", combinator: "and", children } };
+}
+const ruleChipsTree = tree([
+  rule("r1", "name", "contains", "north"),
+  rule("r2", "status", "is", "active"),
+  rule("r3", "employees", "between", [10, 50])
+]);
+const groupChipTree = tree([
+  {
+    id: "g1",
+    type: "group",
+    combinator: "or",
+    children: [
+      rule("g1r1", "status", "is", "prospect"),
+      rule("g1r2", "status", "is", "churned")
+    ]
+  }
+]);
+const valuelessChipTree = tree([rule("r4", "email", "is_empty", null)]);
+const builderSingleRuleTree = tree([rule("b1", "status", "is", "active")]);
+const builderNestedTree = tree([
+  rule("b2", "name", "contains", "north"),
+  {
+    id: "bg1",
+    type: "group",
+    combinator: "or",
+    children: [
+      rule("bg1r1", "status", "is", "prospect"),
+      rule("bg1r2", "employees", "greater_than", 100)
+    ]
+  }
+]);
+const demoPresets = [
+  {
+    id: "active-accounts",
+    labelKey: "Active accounts",
+    iconName: "filter",
+    build: () => tree([rule("p1", "status", "is", "active")])
+  },
+  {
+    id: "added-this-week",
+    labelKey: "Added this week",
+    iconName: "clock",
+    build: () => tree([rule("p2", "name", "is_not_empty", null)])
+  }
+];
+const userScopedPresets = [
+  ...demoPresets,
+  {
+    id: "my-accounts",
+    labelKey: "My accounts",
+    requiresUser: true,
+    build: ({ userId }) => tree([rule("p3", "name", "contains", userId)])
+  }
+];
+function DemoFilterBar({
+  layout,
+  trailingItems
+}) {
+  const [search, setSearch] = React.useState("");
+  const [values, setValues] = React.useState({ status: "active" });
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ jsx(
+    FilterBar,
+    {
+      searchValue: search,
+      onSearchChange: setSearch,
+      filters: demoFilterDefs,
+      values,
+      onApply: setValues,
+      onClear: () => setValues({}),
+      layout,
+      trailingItems
+    }
+  ) });
+}
+function DemoActiveFilterChips({ initialTree }) {
+  const [value, setValue] = React.useState(initialTree);
+  const removeNode = (id) => setValue((prev) => ({
+    root: { ...prev.root, children: prev.root.children.filter((child) => child.id !== id) }
+  }));
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ jsx(
+    ActiveFilterChips,
+    {
+      tree: value,
+      fields: demoFields,
+      popoverOpen: false,
+      onRemoveNode: removeNode,
+      onOpen: () => {
+      }
+    }
+  ) });
+}
+function DemoAdvancedFilterBuilder({ initialTree }) {
+  const [value, setValue] = React.useState(initialTree);
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-2xl rounded-lg border bg-popover p-3", children: /* @__PURE__ */ jsx(
+    AdvancedFilterBuilder,
+    {
+      fields: demoFields,
+      value,
+      onChange: setValue,
+      onApply: () => {
+      },
+      onClear: () => setValue(tree([]))
+    }
+  ) });
+}
+function DemoFilterEmptyState({ withQuickFilters }) {
+  const addConditionRef = React.useRef(null);
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl rounded-lg border bg-popover", children: /* @__PURE__ */ jsx(
+    FilterEmptyState,
+    {
+      onAddCondition: () => {
+      },
+      addConditionRef,
+      quickFilters: withQuickFilters ? /* @__PURE__ */ jsx(QuickFilters, { presets: demoPresets, userId: "user-1", onApply: () => {
+      } }) : void 0
+    }
+  ) });
+}
+const filterBarEntry = {
+  id: "filter-bar",
+  title: "FilterBar",
+  importPath: "@open-mercato/ui/backend/FilterBar",
+  variants: [
+    {
+      id: "stacked",
+      title: "Stacked (default)",
+      render: () => /* @__PURE__ */ jsx(DemoFilterBar, {}),
+      code: `import { FilterBar, type FilterDef, type FilterValues } from '@open-mercato/ui/backend/FilterBar'
+
+const filters: FilterDef[] = [
+  { id: 'city', label: 'City', type: 'text' },
+  { id: 'status', label: 'Status', type: 'select', options: statusOptions },
+  { id: 'hasOpenDeals', label: 'Has open deals', type: 'checkbox' },
+]
+
+<FilterBar
+  searchValue={search}
+  onSearchChange={setSearch}
+  filters={filters}
+  values={values}
+  onApply={setValues}
+  onClear={() => setValues({})}
+/>`
+    },
+    {
+      id: "inline",
+      title: "Inline layout",
+      render: () => /* @__PURE__ */ jsx(DemoFilterBar, { layout: "inline" }),
+      code: `import { FilterBar } from '@open-mercato/ui/backend/FilterBar'
+
+<FilterBar
+  searchValue={search}
+  onSearchChange={setSearch}
+  filters={filters}
+  values={values}
+  onApply={setValues}
+  layout="inline"
+/>`
+    },
+    {
+      id: "trailing-items",
+      title: "With trailing items",
+      render: () => /* @__PURE__ */ jsx(
+        DemoFilterBar,
+        {
+          trailingItems: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", children: [
+            /* @__PURE__ */ jsx(Download, {}),
+            "Export"
+          ] })
+        }
+      ),
+      code: `import { Download } from 'lucide-react'
+import { FilterBar } from '@open-mercato/ui/backend/FilterBar'
+import { Button } from '@open-mercato/ui/primitives/button'
+
+<FilterBar
+  searchValue={search}
+  onSearchChange={setSearch}
+  filters={filters}
+  values={values}
+  onApply={setValues}
+  trailingItems={<Button variant="outline" size="sm"><Download />Export</Button>}
+/>`
+    }
+  ]
+};
+const quickFiltersEntry = {
+  id: "quick-filters",
+  title: "QuickFilters",
+  importPath: "@open-mercato/ui/backend/filters/QuickFilters",
+  variants: [
+    {
+      id: "presets",
+      title: "Presets (used inside AdvancedFilterPanel)",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(QuickFilters, { presets: demoPresets, userId: "user-1", onApply: () => {
+      } }) }),
+      code: `import { QuickFilters, type FilterPreset } from '@open-mercato/ui/backend/filters/QuickFilters'
+
+const presets: FilterPreset[] = [
+  { id: 'active-accounts', labelKey: 'customers.filters.activeAccounts', iconName: 'filter', build: () => activeTree },
+  { id: 'added-this-week', labelKey: 'customers.filters.addedThisWeek', iconName: 'clock', build: () => recentTree },
+]
+
+<QuickFilters presets={presets} userId={userId} onApply={(tree, preset) => applyTree(tree)} />`
+    },
+    {
+      id: "user-scoped",
+      title: "User-scoped preset (hidden without userId)",
+      render: () => /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-xl flex-col gap-6", children: [
+        /* @__PURE__ */ jsx(QuickFilters, { presets: userScopedPresets, userId: "user-1", onApply: () => {
+        } }),
+        /* @__PURE__ */ jsx(QuickFilters, { presets: userScopedPresets, userId: "", onApply: () => {
+        } })
+      ] }),
+      code: `import { QuickFilters } from '@open-mercato/ui/backend/filters/QuickFilters'
+
+// Presets with requiresUser: true are hidden when userId is empty.
+<QuickFilters presets={presets} userId={userId} onApply={applyTree} />`
+    }
+  ]
+};
+const activeFilterChipsEntry = {
+  id: "active-filter-chips",
+  title: "ActiveFilterChips",
+  importPath: "@open-mercato/ui/backend/filters/ActiveFilterChips",
+  variants: [
+    {
+      id: "rule-chips",
+      title: "Rule chips (text, toned select, range)",
+      render: () => /* @__PURE__ */ jsx(DemoActiveFilterChips, { initialTree: ruleChipsTree }),
+      code: `import { ActiveFilterChips } from '@open-mercato/ui/backend/filters/ActiveFilterChips'
+
+<ActiveFilterChips
+  tree={tree}
+  fields={fields}
+  popoverOpen={panelOpen}
+  onRemoveNode={(id) => dispatch({ type: 'removeNode', id })}
+  onOpen={(focusNodeId) => setPanelOpen(true)}
+/>`
+    },
+    {
+      id: "group-chip",
+      title: "Group chip (first rule +N)",
+      render: () => /* @__PURE__ */ jsx(DemoActiveFilterChips, { initialTree: groupChipTree }),
+      code: `import { ActiveFilterChips } from '@open-mercato/ui/backend/filters/ActiveFilterChips'
+
+// An OR group renders as a single chip: "Status: Prospect +1".
+<ActiveFilterChips tree={tree} fields={fields} popoverOpen={false} onRemoveNode={removeNode} onOpen={openPanel} />`
+    },
+    {
+      id: "valueless-operator",
+      title: "Valueless operator chip",
+      render: () => /* @__PURE__ */ jsx(DemoActiveFilterChips, { initialTree: valuelessChipTree }),
+      code: `import { ActiveFilterChips } from '@open-mercato/ui/backend/filters/ActiveFilterChips'
+
+// Valueless operators read as a phrase: "Email is empty".
+<ActiveFilterChips tree={tree} fields={fields} popoverOpen={false} onRemoveNode={removeNode} onOpen={openPanel} />`
+    }
+  ]
+};
+const advancedFilterBuilderEntry = {
+  id: "advanced-filter-builder",
+  title: "AdvancedFilterBuilder",
+  importPath: "@open-mercato/ui/backend/filters/AdvancedFilterBuilder",
+  variants: [
+    {
+      id: "single-rule",
+      title: "Single rule (presentational core of AdvancedFilterPanel)",
+      render: () => /* @__PURE__ */ jsx(DemoAdvancedFilterBuilder, { initialTree: builderSingleRuleTree }),
+      code: `import { AdvancedFilterBuilder } from '@open-mercato/ui/backend/filters/AdvancedFilterBuilder'
+
+<AdvancedFilterBuilder
+  fields={fields}
+  value={tree}
+  onChange={setTree}
+  onApply={applyFilters}
+  onClear={clearFilters}
+/>`
+    },
+    {
+      id: "nested-group",
+      title: "Rule with nested OR group",
+      render: () => /* @__PURE__ */ jsx(DemoAdvancedFilterBuilder, { initialTree: builderNestedTree }),
+      code: `import { AdvancedFilterBuilder } from '@open-mercato/ui/backend/filters/AdvancedFilterBuilder'
+
+// Groups nest up to 3 levels; the value is a plain AdvancedFilterTree.
+<AdvancedFilterBuilder fields={fields} value={tree} onChange={setTree} onApply={applyFilters} onClear={clearFilters} />`
+    }
+  ]
+};
+const filterEmptyStateEntry = {
+  id: "filter-empty-state",
+  title: "FilterEmptyState",
+  importPath: "@open-mercato/ui/backend/filters/FilterEmptyState",
+  variants: [
+    {
+      id: "default",
+      title: "Default (panel empty state of AdvancedFilterPanel)",
+      render: () => /* @__PURE__ */ jsx(DemoFilterEmptyState, {}),
+      code: `import { FilterEmptyState } from '@open-mercato/ui/backend/filters/FilterEmptyState'
+
+<FilterEmptyState onAddCondition={openFieldPicker} addConditionRef={addConditionRef} />`
+    },
+    {
+      id: "with-quick-filters",
+      title: "With quick filters slot",
+      render: () => /* @__PURE__ */ jsx(DemoFilterEmptyState, { withQuickFilters: true }),
+      code: `import { FilterEmptyState } from '@open-mercato/ui/backend/filters/FilterEmptyState'
+import { QuickFilters } from '@open-mercato/ui/backend/filters/QuickFilters'
+
+<FilterEmptyState
+  onAddCondition={openFieldPicker}
+  addConditionRef={addConditionRef}
+  quickFilters={<QuickFilters presets={presets} userId={userId} onApply={applyTree} />}
+/>`
+    }
+  ]
+};
+const listEmptyStateEntry = {
+  id: "list-empty-state",
+  title: "ListEmptyState",
+  importPath: "@open-mercato/ui/backend/filters/ListEmptyState",
+  variants: [
+    {
+      id: "with-create-action",
+      title: "With create action",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(ListEmptyState, { entityName: "companies", onCreate: () => {
+      }, createLabel: "Add company" }) }),
+      code: `import { ListEmptyState } from '@open-mercato/ui/backend/filters/ListEmptyState'
+
+// Pass to DataTable's emptyState for the zero-records case.
+<ListEmptyState entityName="companies" createHref="/backend/customers/companies/create" createLabel="Add company" />`
+    },
+    {
+      id: "custom-copy",
+      title: "Custom title and description",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(
+        ListEmptyState,
+        {
+          title: "No imports yet",
+          description: "Connect a source or upload a CSV file to bring records in."
+        }
+      ) }),
+      code: `import { ListEmptyState } from '@open-mercato/ui/backend/filters/ListEmptyState'
+
+<ListEmptyState
+  title="No imports yet"
+  description="Connect a source or upload a CSV file to bring records in."
+/>`
+    }
+  ]
+};
+const filteredEmptyResultsEntry = {
+  id: "filtered-empty-results",
+  title: "FilteredEmptyResults",
+  importPath: "@open-mercato/ui/backend/filters/FilteredEmptyResults",
+  variants: [
+    {
+      id: "filters-only",
+      title: "Filters active",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(
+        FilteredEmptyResults,
+        {
+          entityNamePlural: "companies",
+          canRemoveLast: true,
+          onClearAll: () => {
+          },
+          onRemoveLast: () => {
+          }
+        }
+      ) }),
+      code: `import { FilteredEmptyResults } from '@open-mercato/ui/backend/filters/FilteredEmptyResults'
+
+// DataTable renders this automatically when filters match nothing.
+<FilteredEmptyResults
+  entityNamePlural="companies"
+  canRemoveLast={tree.root.children.length > 0}
+  onClearAll={clearFilters}
+  onRemoveLast={removeLastFilter}
+/>`
+    },
+    {
+      id: "with-search",
+      title: "Search and filters active",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(
+        FilteredEmptyResults,
+        {
+          entityNamePlural: "companies",
+          canRemoveLast: true,
+          onClearAll: () => {
+          },
+          onRemoveLast: () => {
+          },
+          onClearSearch: () => {
+          }
+        }
+      ) }),
+      code: `import { FilteredEmptyResults } from '@open-mercato/ui/backend/filters/FilteredEmptyResults'
+
+// Passing onClearSearch switches to combined copy and clears both at once.
+<FilteredEmptyResults
+  entityNamePlural="companies"
+  canRemoveLast
+  onClearAll={clearFilters}
+  onRemoveLast={removeLastFilter}
+  onClearSearch={clearSearch}
+/>`
+    }
+  ]
+};
+const searchEmptyResultsEntry = {
+  id: "search-empty-results",
+  title: "SearchEmptyResults",
+  importPath: "@open-mercato/ui/backend/filters/SearchEmptyResults",
+  variants: [
+    {
+      id: "default",
+      title: "Default",
+      render: () => /* @__PURE__ */ jsx("div", { className: "flex w-full max-w-xl justify-center", children: /* @__PURE__ */ jsx(SearchEmptyResults, { query: "northwind", onClearSearch: () => {
+      } }) }),
+      code: `import { SearchEmptyResults } from '@open-mercato/ui/backend/filters/SearchEmptyResults'
+
+// DataTable renders this automatically when a search matches nothing.
+<SearchEmptyResults query={search} onClearSearch={() => setSearch('')} />`
+    },
+    {
+      id: "with-entity",
+      title: "With entity label",
+      render: () => /* @__PURE__ */ jsx("div", { className: "flex w-full max-w-xl justify-center", children: /* @__PURE__ */ jsx(
+        SearchEmptyResults,
+        {
+          query: "northwind",
+          entityNamePlural: "companies",
+          onClearSearch: () => {
+          }
+        }
+      ) }),
+      code: `import { SearchEmptyResults } from '@open-mercato/ui/backend/filters/SearchEmptyResults'
+
+<SearchEmptyResults query={search} entityNamePlural="companies" onClearSearch={() => setSearch('')} />`
+    }
+  ]
+};
+const entries = [
+  filterBarEntry,
+  quickFiltersEntry,
+  activeFilterChipsEntry,
+  advancedFilterBuilderEntry,
+  filterEmptyStateEntry,
+  listEmptyStateEntry,
+  filteredEmptyResultsEntry,
+  searchEmptyResultsEntry
+];
+export {
+  entries
+};
+//# sourceMappingURL=filters.js.map