npm - @open-mercato/core - Versions diffs - 0.7.1-develop.7203.1.9396450b78 → 0.8.0 - Mend

@open-mercato/core 0.7.1-develop.7203.1.9396450b78 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (416) hide show

package/dist/modules/design_system/gallery/entries/charts.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/modules/design_system/gallery/entries/charts.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport {\n  BarChart,\n  DeltaBadge,\n  KpiCard,\n  LineChart,\n  PieChart,\n  Sparkline,\n  TopNTable,\n  type TopNTableColumn,\n} from '@open-mercato/ui/backend/charts'\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// ---------------------------------------------------------------------------\n// Inline mock datasets \u2014 realistic dashboard shapes, no API calls. All charts\n// pick up the DS palette (`--chart-1`\u2026`--chart-5`) natively; no color props.\n// ---------------------------------------------------------------------------\n\nconst revenueByMonth = [\n  { month: 'Jan', revenue: 48200 },\n  { month: 'Feb', revenue: 51400 },\n  { month: 'Mar', revenue: 47900 },\n  { month: 'Apr', revenue: 61200 },\n  { month: 'May', revenue: 58600 },\n  { month: 'Jun', revenue: 67300 },\n]\n\nconst revenueByChannel = [\n  { channel: 'Online store', revenue: 182400 },\n  { channel: 'Marketplace', revenue: 96800 },\n  { channel: 'Retail', revenue: 64200 },\n  { channel: 'Wholesale', revenue: 41500 },\n]\n\nconst ordersByMonth = [\n  { month: 'Jan', online: 320, retail: 180 },\n  { month: 'Feb', online: 348, retail: 164 },\n  { month: 'Mar', online: 331, retail: 196 },\n  { month: 'Apr', online: 402, retail: 214 },\n  { month: 'May', online: 389, retail: 205 },\n  { month: 'Jun', online: 446, retail: 232 },\n]\n\nconst ordersByStatus = [\n  { name: 'Completed', value: 268 },\n  { name: 'Processing', value: 84 },\n  { name: 'Pending payment', value: 37 },\n  { name: 'Cancelled', value: 22 },\n]\n\nconst weeklyOrdersTrend = [12, 18, 14, 22, 19, 27, 24, 31, 28, 35, 33, 41]\n\ntype TopProductRow = {\n  product: string\n  orders: number\n  revenue: number\n  [key: string]: unknown\n}\n\nconst topProducts: TopProductRow[] = [\n  { product: 'Aurora desk lamp', orders: 412, revenue: 28840 },\n  { product: 'Birch side table', orders: 366, revenue: 47580 },\n  { product: 'Linen throw pillow', orders: 341, revenue: 11935 },\n  { product: 'Oak bookshelf', orders: 214, revenue: 53500 },\n  { product: 'Ceramic vase set', orders: 198, revenue: 8910 },\n]\n\nconst formatCurrency = (value: number) => `\u20AC${value.toLocaleString('en-US')}`\n\nconst topProductColumns: TopNTableColumn<TopProductRow>[] = [\n  { key: 'product', header: 'Product' },\n  { key: 'orders', header: 'Orders', align: 'right' },\n  {\n    key: 'revenue',\n    header: 'Revenue',\n    align: 'right',\n    formatter: (value) => formatCurrency(value as number),\n  },\n]\n\nconst kpiCardEntry: GalleryEntry = {\n  id: 'kpi-card',\n  title: 'KpiCard',\n  importPath: '@open-mercato/ui/backend/charts',\n  variants: [\n    {\n      id: 'trend-directions',\n      title: 'Trend directions',\n      render: () => (\n        <div className=\"grid w-full max-w-3xl grid-cols-1 gap-4 sm:grid-cols-3\">\n          <KpiCard\n            title=\"Revenue\"\n            value={67300}\n            prefix=\"\u20AC\"\n            trend={{ value: 14.8, direction: 'up' }}\n            comparisonLabel=\"vs. previous month\"\n          />\n          <KpiCard\n            title=\"Cancelled orders\"\n            value={22}\n            trend={{ value: 6.1, direction: 'down' }}\n            comparisonLabel=\"vs. previous month\"\n          />\n          <KpiCard\n            title=\"Active customers\"\n            value={1284}\n            trend={{ value: 0, direction: 'unchanged' }}\n            comparisonLabel=\"vs. previous month\"\n          />\n        </div>\n      ),\n      code: `import { KpiCard } from '@open-mercato/ui/backend/charts'\n\n<KpiCard\n  title=\"Revenue\"\n  value={67300}\n  prefix=\"\u20AC\"\n  trend={{ value: 14.8, direction: 'up' }}\n  comparisonLabel=\"vs. previous month\"\n/>`,\n    },\n    {\n      id: 'suffix-and-footer',\n      title: 'Suffix and footer slot',\n      render: () => (\n        <div className=\"w-full max-w-xs\">\n          <KpiCard\n            title=\"Average order value\"\n            value={86.4}\n            prefix=\"\u20AC\"\n            suffix=\"net\"\n            trend={{ value: 3.2, direction: 'up' }}\n            footer={\n              <span className=\"text-muted-foreground\">\n                <Sparkline values={weeklyOrdersTrend} ariaLabel=\"Weekly orders trend\" />\n              </span>\n            }\n          />\n        </div>\n      ),\n      code: `import { KpiCard, Sparkline } from '@open-mercato/ui/backend/charts'\n\n<KpiCard\n  title=\"Average order value\"\n  value={86.4}\n  prefix=\"\u20AC\"\n  suffix=\"net\"\n  trend={{ value: 3.2, direction: 'up' }}\n  footer={<Sparkline values={weeklyTrend} ariaLabel=\"Weekly orders trend\" />}\n/>`,\n    },\n    {\n      id: 'states',\n      title: 'Loading, error and empty states',\n      render: () => (\n        <div className=\"grid w-full max-w-3xl grid-cols-1 gap-4 sm:grid-cols-3\">\n          <KpiCard title=\"Loading\" value={null} loading />\n          <KpiCard title=\"Error\" value={null} error=\"Failed to load metric\" />\n          <KpiCard title=\"No data\" value={null} />\n        </div>\n      ),\n      code: `import { KpiCard } from '@open-mercato/ui/backend/charts'\n\n<KpiCard title=\"Loading\" value={null} loading />\n<KpiCard title=\"Error\" value={null} error=\"Failed to load metric\" />\n<KpiCard title=\"No data\" value={null} />`,\n    },\n    {\n      id: 'delta-badge',\n      title: 'DeltaBadge (standalone)',\n      render: () => (\n        <div className=\"flex items-center gap-3\">\n          <DeltaBadge direction=\"up\" value={12.4} />\n          <DeltaBadge direction=\"down\" value={4.7} />\n          <DeltaBadge direction=\"unchanged\" value={0} />\n          <DeltaBadge direction=\"up\" value={38} unit=\" pts\" />\n        </div>\n      ),\n      code: `import { DeltaBadge } from '@open-mercato/ui/backend/charts'\n\n<DeltaBadge direction=\"up\" value={12.4} />\n<DeltaBadge direction=\"down\" value={4.7} />\n<DeltaBadge direction=\"unchanged\" value={0} />\n<DeltaBadge direction=\"up\" value={38} unit=\" pts\" />`,\n    },\n  ],\n}\n\nconst sparklineEntry: GalleryEntry = {\n  id: 'sparkline',\n  title: 'Sparkline',\n  importPath: '@open-mercato/ui/backend/charts',\n  variants: [\n    {\n      id: 'default',\n      title: 'default',\n      render: () => (\n        <span className=\"text-muted-foreground\">\n          <Sparkline values={weeklyOrdersTrend} ariaLabel=\"Weekly orders trend\" />\n        </span>\n      ),\n      code: `import { Sparkline } from '@open-mercato/ui/backend/charts'\n\n<Sparkline values={[12, 18, 14, 22, 19, 27, 24, 31]} ariaLabel=\"Weekly orders trend\" />`,\n    },\n    {\n      id: 'semantic-color',\n      title: 'Colored via currentColor',\n      render: () => (\n        <div className=\"flex items-center gap-6\">\n          <span className=\"text-primary\">\n            <Sparkline values={weeklyOrdersTrend} ariaLabel=\"Orders trending up\" />\n          </span>\n          <span className=\"text-destructive\">\n            <Sparkline\n              values={[...weeklyOrdersTrend].reverse()}\n              ariaLabel=\"Returns trending down\"\n            />\n          </span>\n        </div>\n      ),\n      code: `import { Sparkline } from '@open-mercato/ui/backend/charts'\n\n// Sparkline strokes with currentColor \u2014 set a semantic text token on the wrapper.\n<span className=\"text-primary\">\n  <Sparkline values={values} ariaLabel=\"Orders trending up\" />\n</span>`,\n    },\n    {\n      id: 'sizes',\n      title: 'Custom width and height',\n      render: () => (\n        <div className=\"flex items-end gap-6 text-muted-foreground\">\n          <Sparkline values={weeklyOrdersTrend} ariaLabel=\"Small trend\" width={64} height={20} />\n          <Sparkline values={weeklyOrdersTrend} ariaLabel=\"Default trend\" />\n          <Sparkline values={weeklyOrdersTrend} ariaLabel=\"Large trend\" width={160} height={40} />\n        </div>\n      ),\n      code: `import { Sparkline } from '@open-mercato/ui/backend/charts'\n\n<Sparkline values={values} ariaLabel=\"Small trend\" width={64} height={20} />\n<Sparkline values={values} ariaLabel=\"Default trend\" />\n<Sparkline values={values} ariaLabel=\"Large trend\" width={160} height={40} />`,\n    },\n  ],\n}\n\nconst barChartEntry: GalleryEntry = {\n  id: 'bar-chart',\n  title: 'BarChart',\n  importPath: '@open-mercato/ui/backend/charts',\n  variants: [\n    {\n      id: 'basic',\n      title: 'Basic (revenue by month)',\n      render: () => (\n        <div className=\"w-full max-w-xl\">\n          <BarChart\n            title=\"Revenue by month\"\n            data={revenueByMonth}\n            index=\"month\"\n            categories={['revenue']}\n            showLegend={false}\n          />\n        </div>\n      ),\n      code: `import { BarChart } from '@open-mercato/ui/backend/charts'\n\n<BarChart\n  title=\"Revenue by month\"\n  data={revenueByMonth}\n  index=\"month\"\n  categories={['revenue']}\n  showLegend={false}\n/>`,\n    },\n    {\n      id: 'horizontal',\n      title: 'Horizontal layout',\n      render: () => (\n        <div className=\"w-full max-w-xl\">\n          <BarChart\n            title=\"Revenue by channel\"\n            data={revenueByChannel}\n            index=\"channel\"\n            categories={['revenue']}\n            layout=\"horizontal\"\n            showLegend={false}\n          />\n        </div>\n      ),\n      code: `import { BarChart } from '@open-mercato/ui/backend/charts'\n\n<BarChart\n  title=\"Revenue by channel\"\n  data={revenueByChannel}\n  index=\"channel\"\n  categories={['revenue']}\n  layout=\"horizontal\"\n  showLegend={false}\n/>`,\n    },\n    {\n      id: 'multi-series',\n      title: 'Multiple series with legend',\n      render: () => (\n        <div className=\"w-full max-w-xl\">\n          <BarChart\n            title=\"Orders by month\"\n            data={ordersByMonth}\n            index=\"month\"\n            categories={['online', 'retail']}\n            categoryLabels={{ online: 'Online', retail: 'Retail' }}\n          />\n        </div>\n      ),\n      code: `import { BarChart } from '@open-mercato/ui/backend/charts'\n\n<BarChart\n  title=\"Orders by month\"\n  data={ordersByMonth}\n  index=\"month\"\n  categories={['online', 'retail']}\n  categoryLabels={{ online: 'Online', retail: 'Retail' }}\n/>`,\n    },\n  ],\n}\n\nconst lineChartEntry: GalleryEntry = {\n  id: 'line-chart',\n  title: 'LineChart',\n  importPath: '@open-mercato/ui/backend/charts',\n  variants: [\n    {\n      id: 'basic',\n      title: 'Basic (revenue by month)',\n      render: () => (\n        <div className=\"w-full max-w-xl\">\n          <LineChart\n            title=\"Revenue by month\"\n            data={revenueByMonth}\n            index=\"month\"\n            categories={['revenue']}\n            showLegend={false}\n          />\n        </div>\n      ),\n      code: `import { LineChart } from '@open-mercato/ui/backend/charts'\n\n<LineChart\n  title=\"Revenue by month\"\n  data={revenueByMonth}\n  index=\"month\"\n  categories={['revenue']}\n  showLegend={false}\n/>`,\n    },\n    {\n      id: 'area',\n      title: 'Area fill',\n      render: () => (\n        <div className=\"w-full max-w-xl\">\n          <LineChart\n            title=\"Revenue by month\"\n            data={revenueByMonth}\n            index=\"month\"\n            categories={['revenue']}\n            showArea\n            showLegend={false}\n          />\n        </div>\n      ),\n      code: `import { LineChart } from '@open-mercato/ui/backend/charts'\n\n<LineChart\n  title=\"Revenue by month\"\n  data={revenueByMonth}\n  index=\"month\"\n  categories={['revenue']}\n  showArea\n  showLegend={false}\n/>`,\n    },\n    {\n      id: 'multi-series',\n      title: 'Multiple series, monotone curve',\n      render: () => (\n        <div className=\"w-full max-w-xl\">\n          <LineChart\n            title=\"Orders by month\"\n            data={ordersByMonth}\n            index=\"month\"\n            categories={['online', 'retail']}\n            categoryLabels={{ online: 'Online', retail: 'Retail' }}\n            curveType=\"monotone\"\n          />\n        </div>\n      ),\n      code: `import { LineChart } from '@open-mercato/ui/backend/charts'\n\n<LineChart\n  title=\"Orders by month\"\n  data={ordersByMonth}\n  index=\"month\"\n  categories={['online', 'retail']}\n  categoryLabels={{ online: 'Online', retail: 'Retail' }}\n  curveType=\"monotone\"\n/>`,\n    },\n  ],\n}\n\nconst pieChartEntry: GalleryEntry = {\n  id: 'pie-chart',\n  title: 'PieChart',\n  importPath: '@open-mercato/ui/backend/charts',\n  variants: [\n    {\n      id: 'pie',\n      title: 'Pie (orders by status)',\n      render: () => (\n        <div className=\"w-full max-w-md\">\n          <PieChart title=\"Orders by status\" data={ordersByStatus} />\n        </div>\n      ),\n      code: `import { PieChart } from '@open-mercato/ui/backend/charts'\n\n<PieChart title=\"Orders by status\" data={ordersByStatus} />`,\n    },\n    {\n      id: 'donut',\n      title: 'Donut',\n      render: () => (\n        <div className=\"w-full max-w-md\">\n          <PieChart title=\"Orders by status\" data={ordersByStatus} variant=\"donut\" />\n        </div>\n      ),\n      code: `import { PieChart } from '@open-mercato/ui/backend/charts'\n\n<PieChart title=\"Orders by status\" data={ordersByStatus} variant=\"donut\" />`,\n    },\n  ],\n}\n\nconst topNTableEntry: GalleryEntry = {\n  id: 'top-n-table',\n  title: 'TopNTable',\n  importPath: '@open-mercato/ui/backend/charts',\n  variants: [\n    {\n      id: 'basic',\n      title: 'Top products by revenue',\n      render: () => (\n        <div className=\"w-full max-w-xl\">\n          <TopNTable title=\"Top products\" data={topProducts} columns={topProductColumns} />\n        </div>\n      ),\n      code: `import { TopNTable, type TopNTableColumn } from '@open-mercato/ui/backend/charts'\n\nconst columns: TopNTableColumn<TopProductRow>[] = [\n  { key: 'product', header: 'Product' },\n  { key: 'orders', header: 'Orders', align: 'right' },\n  { key: 'revenue', header: 'Revenue', align: 'right', formatter: (v) => formatCurrency(v as number) },\n]\n\n<TopNTable title=\"Top products\" data={topProducts} columns={columns} />`,\n    },\n    {\n      id: 'max-rows',\n      title: 'Capped with maxRows',\n      render: () => (\n        <div className=\"w-full max-w-xl\">\n          <TopNTable\n            title=\"Top 3 products\"\n            data={topProducts}\n            columns={topProductColumns}\n            maxRows={3}\n          />\n        </div>\n      ),\n      code: `import { TopNTable } from '@open-mercato/ui/backend/charts'\n\n<TopNTable title=\"Top 3 products\" data={topProducts} columns={columns} maxRows={3} />`,\n    },\n    {\n      id: 'empty',\n      title: 'Empty state',\n      render: () => (\n        <div className=\"w-full max-w-xl\">\n          <TopNTable\n            title=\"Top products\"\n            data={[]}\n            columns={topProductColumns}\n            emptyMessage=\"No sales in this period\"\n          />\n        </div>\n      ),\n      code: `import { TopNTable } from '@open-mercato/ui/backend/charts'\n\n<TopNTable title=\"Top products\" data={[]} columns={columns} emptyMessage=\"No sales in this period\" />`,\n    },\n  ],\n}\n\nexport const entries: GalleryEntry[] = [\n  kpiCardEntry,\n  sparklineEntry,\n  barChartEntry,\n  lineChartEntry,\n  pieChartEntry,\n  topNTableEntry,\n]\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { MarketingWidgetDemo } from '../demos/marketing-widgets'\nimport { marketingWidgetExampleCode } from '../demos/marketing-widgets-code.generated'\nimport * as React from 'react'\nimport {\n  BarChart,\n  DeltaBadge,\n  KpiCard,\n  LineChart,\n  PieChart,\n  Sparkline,\n  TopNTable,\n  type TopNTableColumn,\n} from '@open-mercato/ui/backend/charts'\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// ---------------------------------------------------------------------------\n// Inline mock datasets \u2014 realistic dashboard shapes, no API calls. All charts\n// pick up the DS palette (`--chart-1`\u2026`--chart-5`) natively; no color props.\n// ---------------------------------------------------------------------------\nfunction KpiCardEntryDeltaBadgePreview() {\n  const t = useT()\n  return (\n    <div className=\"flex items-center gap-3\">\n      <DeltaBadge direction=\"up\" value={12.4} />\n      <DeltaBadge direction=\"down\" value={4.7} />\n      <DeltaBadge direction=\"unchanged\" value={0} />\n      <DeltaBadge direction=\"up\" value={38} unit={t('design_system.gallery.samples.content.pts')} />\n    </div>\n  )\n}\nfunction SparklineEntryDefaultPreview() {\n  const t = useT()\n  return (\n    <span className=\"text-muted-foreground\">\n      <Sparkline values={weeklyOrdersTrend} ariaLabel={t('design_system.gallery.samples.content.weeklyOrdersTrend')} />\n    </span>\n  )\n}\nfunction SparklineEntrySemanticColorPreview() {\n  const t = useT()\n  return (\n    <div className=\"flex items-center gap-6\">\n      <span className=\"text-primary\">\n        <Sparkline values={weeklyOrdersTrend} ariaLabel={t('design_system.gallery.samples.content.ordersTrendingUp')} />\n      </span>\n      <span className=\"text-destructive\">\n        <Sparkline\n          values={[...weeklyOrdersTrend].reverse()}\n          ariaLabel={t('design_system.gallery.samples.content.returnsTrendingDown')}\n        />\n      </span>\n    </div>\n  )\n}\nfunction SparklineEntrySizesPreview() {\n  const t = useT()\n  return (\n    <div className=\"flex items-end gap-6 text-muted-foreground\">\n      <Sparkline\n        values={weeklyOrdersTrend}\n        ariaLabel={t('design_system.gallery.samples.content.smallTrend')}\n        width={64}\n        height={20}\n      />\n      <Sparkline values={weeklyOrdersTrend} ariaLabel={t('design_system.gallery.samples.content.defaultTrend')} />\n      <Sparkline\n        values={weeklyOrdersTrend}\n        ariaLabel={t('design_system.gallery.samples.content.largeTrend')}\n        width={160}\n        height={40}\n      />\n    </div>\n  )\n}\nfunction KpiCardEntryTrendDirectionsPreview() {\n  const t = useT()\n  return (\n    <div className=\"grid w-full max-w-3xl grid-cols-1 gap-4 sm:grid-cols-3\">\n      <KpiCard\n        title={t('design_system.gallery.samples.content.revenue')}\n        value={67300}\n        prefix=\"\u20AC\"\n        trend={{\n          value: 14.8,\n          direction: 'up',\n        }}\n        comparisonLabel={t('design_system.gallery.samples.content.vsPreviousMonth')}\n      />\n      <KpiCard\n        title={t('design_system.gallery.samples.content.cancelledOrders')}\n        value={22}\n        trend={{\n          value: 6.1,\n          direction: 'down',\n        }}\n        comparisonLabel={t('design_system.gallery.samples.content.vsPreviousMonth')}\n      />\n      <KpiCard\n        title={t('design_system.gallery.samples.content.activeCustomers')}\n        value={1284}\n        trend={{\n          value: 0,\n          direction: 'unchanged',\n        }}\n        comparisonLabel={t('design_system.gallery.samples.content.vsPreviousMonth')}\n      />\n    </div>\n  )\n}\nfunction KpiCardEntrySuffixAndFooterPreview() {\n  const t = useT()\n  return (\n    <div className=\"w-full max-w-xs\">\n      <KpiCard\n        title={t('design_system.gallery.samples.content.averageOrderValue')}\n        value={86.4}\n        prefix=\"\u20AC\"\n        suffix={t('design_system.gallery.samples.content.net')}\n        trend={{\n          value: 3.2,\n          direction: 'up',\n        }}\n        footer={\n          <span className=\"text-muted-foreground\">\n            <Sparkline\n              values={weeklyOrdersTrend}\n              ariaLabel={t('design_system.gallery.samples.content.weeklyOrdersTrend')}\n            />\n          </span>\n        }\n      />\n    </div>\n  )\n}\nfunction KpiCardEntryStatesPreview() {\n  const t = useT()\n  return (\n    <div className=\"grid w-full max-w-3xl grid-cols-1 gap-4 sm:grid-cols-3\">\n      <KpiCard title={t('design_system.gallery.samples.content.loading')} value={null} loading />\n      <KpiCard\n        title={t('design_system.gallery.samples.content.error')}\n        value={null}\n        error={t('design_system.gallery.samples.content.failedToLoadMetric')}\n      />\n      <KpiCard title={t('design_system.gallery.samples.content.noData')} value={null} />\n    </div>\n  )\n}\nfunction BarChartEntryBasicPreview() {\n  const t = useT()\n  return (\n    <div className=\"w-full max-w-xl\">\n      <BarChart\n        title={t('design_system.gallery.samples.content.revenueByMonth')}\n        data={revenueByMonth(t)}\n        index=\"month\"\n        categories={['revenue']}\n        showLegend={false}\n      />\n    </div>\n  )\n}\nfunction BarChartEntryHorizontalPreview() {\n  const t = useT()\n  return (\n    <div className=\"w-full max-w-xl\">\n      <BarChart\n        title={t('design_system.gallery.samples.content.revenueByChannel')}\n        data={revenueByChannel(t)}\n        index=\"channel\"\n        categories={['revenue']}\n        layout=\"horizontal\"\n        showLegend={false}\n      />\n    </div>\n  )\n}\nfunction BarChartEntryMultiSeriesPreview() {\n  const t = useT()\n  return (\n    <div className=\"w-full max-w-xl\">\n      <BarChart\n        title={t('design_system.gallery.samples.content.ordersByMonth')}\n        data={ordersByMonth(t)}\n        index=\"month\"\n        categories={['online', 'retail']}\n        categoryLabels={{\n          online: t('design_system.gallery.samples.content.online'),\n          retail: t('design_system.gallery.samples.content.retail'),\n        }}\n      />\n    </div>\n  )\n}\nfunction LineChartEntryBasicPreview() {\n  const t = useT()\n  return (\n    <div className=\"w-full max-w-xl\">\n      <LineChart\n        title={t('design_system.gallery.samples.content.revenueByMonth')}\n        data={revenueByMonth(t)}\n        index=\"month\"\n        categories={['revenue']}\n        showLegend={false}\n      />\n    </div>\n  )\n}\nfunction LineChartEntryAreaPreview() {\n  const t = useT()\n  return (\n    <div className=\"w-full max-w-xl\">\n      <LineChart\n        title={t('design_system.gallery.samples.content.revenueByMonth')}\n        data={revenueByMonth(t)}\n        index=\"month\"\n        categories={['revenue']}\n        showArea\n        showLegend={false}\n      />\n    </div>\n  )\n}\nfunction LineChartEntryMultiSeriesPreview() {\n  const t = useT()\n  return (\n    <div className=\"w-full max-w-xl\">\n      <LineChart\n        title={t('design_system.gallery.samples.content.ordersByMonth')}\n        data={ordersByMonth(t)}\n        index=\"month\"\n        categories={['online', 'retail']}\n        categoryLabels={{\n          online: t('design_system.gallery.samples.content.online'),\n          retail: t('design_system.gallery.samples.content.retail'),\n        }}\n        curveType=\"monotone\"\n      />\n    </div>\n  )\n}\nfunction PieChartEntryPiePreview() {\n  const t = useT()\n  return (\n    <div className=\"w-full max-w-md\">\n      <PieChart title={t('design_system.gallery.samples.content.ordersByStatus')} data={ordersByStatus(t)} />\n    </div>\n  )\n}\nfunction PieChartEntryDonutPreview() {\n  const t = useT()\n  return (\n    <div className=\"w-full max-w-md\">\n      <PieChart\n        title={t('design_system.gallery.samples.content.ordersByStatus')}\n        data={ordersByStatus(t)}\n        variant=\"donut\"\n      />\n    </div>\n  )\n}\nfunction TopNTableEntryBasicPreview() {\n  const t = useT()\n  return (\n    <div className=\"w-full max-w-xl\">\n      <TopNTable\n        title={t('design_system.gallery.samples.content.topProducts')}\n        data={topProducts(t)}\n        columns={topProductColumns(t)}\n      />\n    </div>\n  )\n}\nfunction TopNTableEntryMaxRowsPreview() {\n  const t = useT()\n  return (\n    <div className=\"w-full max-w-xl\">\n      <TopNTable\n        title={t('design_system.gallery.samples.content.top3Products')}\n        data={topProducts(t)}\n        columns={topProductColumns(t)}\n        maxRows={3}\n      />\n    </div>\n  )\n}\nfunction TopNTableEntryEmptyPreview() {\n  const t = useT()\n  return (\n    <div className=\"w-full max-w-xl\">\n      <TopNTable\n        title={t('design_system.gallery.samples.content.topProducts')}\n        data={[]}\n        columns={topProductColumns(t)}\n        emptyMessage={t('design_system.gallery.samples.content.noSalesInThisPeriod')}\n      />\n    </div>\n  )\n}\nconst revenueByMonth = (t: ReturnType<typeof useT>) => [\n  {\n    month: t('design_system.gallery.samples.content.jan'),\n    revenue: 48200,\n  },\n  {\n    month: t('design_system.gallery.samples.content.feb'),\n    revenue: 51400,\n  },\n  {\n    month: t('design_system.gallery.samples.content.mar'),\n    revenue: 47900,\n  },\n  {\n    month: t('design_system.gallery.samples.content.apr'),\n    revenue: 61200,\n  },\n  {\n    month: t('design_system.gallery.samples.content.may'),\n    revenue: 58600,\n  },\n  {\n    month: t('design_system.gallery.samples.content.jun'),\n    revenue: 67300,\n  },\n]\nconst revenueByChannel = (t: ReturnType<typeof useT>) => [\n  {\n    channel: t('design_system.gallery.samples.content.onlineStore'),\n    revenue: 182400,\n  },\n  {\n    channel: t('design_system.gallery.samples.content.marketplace'),\n    revenue: 96800,\n  },\n  {\n    channel: t('design_system.gallery.samples.content.retail'),\n    revenue: 64200,\n  },\n  {\n    channel: t('design_system.gallery.samples.content.wholesale'),\n    revenue: 41500,\n  },\n]\nconst ordersByMonth = (t: ReturnType<typeof useT>) => [\n  {\n    month: t('design_system.gallery.samples.content.jan'),\n    online: 320,\n    retail: 180,\n  },\n  {\n    month: t('design_system.gallery.samples.content.feb'),\n    online: 348,\n    retail: 164,\n  },\n  {\n    month: t('design_system.gallery.samples.content.mar'),\n    online: 331,\n    retail: 196,\n  },\n  {\n    month: t('design_system.gallery.samples.content.apr'),\n    online: 402,\n    retail: 214,\n  },\n  {\n    month: t('design_system.gallery.samples.content.may'),\n    online: 389,\n    retail: 205,\n  },\n  {\n    month: t('design_system.gallery.samples.content.jun'),\n    online: 446,\n    retail: 232,\n  },\n]\nconst ordersByStatus = (t: ReturnType<typeof useT>) => [\n  {\n    name: t('design_system.gallery.samples.content.completed'),\n    value: 268,\n  },\n  {\n    name: t('design_system.gallery.samples.content.processing'),\n    value: 84,\n  },\n  {\n    name: t('design_system.gallery.samples.content.pendingPayment'),\n    value: 37,\n  },\n  {\n    name: t('design_system.gallery.samples.content.cancelled'),\n    value: 22,\n  },\n]\nconst weeklyOrdersTrend = [12, 18, 14, 22, 19, 27, 24, 31, 28, 35, 33, 41]\ntype TopProductRow = {\n  product: string\n  orders: number\n  revenue: number\n  [key: string]: unknown\n}\nconst topProducts = (t: ReturnType<typeof useT>): TopProductRow[] => [\n  {\n    product: t('design_system.gallery.samples.content.auroraDeskLamp'),\n    orders: 412,\n    revenue: 28840,\n  },\n  {\n    product: t('design_system.gallery.samples.content.birchSideTable'),\n    orders: 366,\n    revenue: 47580,\n  },\n  {\n    product: t('design_system.gallery.samples.content.linenThrowPillow'),\n    orders: 341,\n    revenue: 11935,\n  },\n  {\n    product: t('design_system.gallery.samples.content.oakBookshelf'),\n    orders: 214,\n    revenue: 53500,\n  },\n  {\n    product: t('design_system.gallery.samples.content.ceramicVaseSet'),\n    orders: 198,\n    revenue: 8910,\n  },\n]\nconst formatCurrency = (value: number) => `\u20AC${value.toLocaleString('en-US')}`\nconst topProductColumns = (t: ReturnType<typeof useT>): TopNTableColumn<TopProductRow>[] => [\n  {\n    key: 'product',\n    header: t('design_system.gallery.samples.content.product'),\n  },\n  {\n    key: 'orders',\n    header: t('design_system.gallery.samples.content.orders'),\n    align: 'right',\n  },\n  {\n    key: 'revenue',\n    header: t('design_system.gallery.samples.content.revenue'),\n    align: 'right',\n    formatter: (value) => formatCurrency(value as number),\n  },\n]\nconst kpiCardEntry: GalleryEntry = {\n  id: 'kpi-card',\n  title: 'KpiCard',\n  importPath: '@open-mercato/ui/backend/charts',\n  variants: [\n    {\n      id: 'trend-directions',\n      title: 'Trend directions',\n      render: () => <KpiCardEntryTrendDirectionsPreview />,\n      code: `import { KpiCard } from '@open-mercato/ui/backend/charts'\n\n<KpiCard\n  title=\"Revenue\"\n  value={67300}\n  prefix=\"\u20AC\"\n  trend={{ value: 14.8, direction: 'up' }}\n  comparisonLabel=\"vs. previous month\"\n/>`,\n    },\n    {\n      id: 'suffix-and-footer',\n      title: 'Suffix and footer slot',\n      render: () => <KpiCardEntrySuffixAndFooterPreview />,\n      code: `import { KpiCard, Sparkline } from '@open-mercato/ui/backend/charts'\n\n<KpiCard\n  title=\"Average order value\"\n  value={86.4}\n  prefix=\"\u20AC\"\n  suffix=\"net\"\n  trend={{ value: 3.2, direction: 'up' }}\n  footer={<Sparkline values={weeklyTrend} ariaLabel=\"Weekly orders trend\" />}\n/>`,\n    },\n    {\n      id: 'states',\n      title: 'Loading, error and empty states',\n      render: () => <KpiCardEntryStatesPreview />,\n      code: `import { KpiCard } from '@open-mercato/ui/backend/charts'\n\n<KpiCard title=\"Loading\" value={null} loading />\n<KpiCard title=\"Error\" value={null} error=\"Failed to load metric\" />\n<KpiCard title=\"No data\" value={null} />`,\n    },\n    {\n      id: 'delta-badge',\n      title: 'DeltaBadge (standalone)',\n      render: () => <KpiCardEntryDeltaBadgePreview />,\n      code: `import { DeltaBadge } from '@open-mercato/ui/backend/charts'\n\n<DeltaBadge direction=\"up\" value={12.4} />\n<DeltaBadge direction=\"down\" value={4.7} />\n<DeltaBadge direction=\"unchanged\" value={0} />\n<DeltaBadge direction=\"up\" value={38} unit=\" pts\" />`,\n    },\n  ],\n}\nconst sparklineEntry: GalleryEntry = {\n  id: 'sparkline',\n  title: 'Sparkline',\n  importPath: '@open-mercato/ui/backend/charts',\n  variants: [\n    {\n      id: 'default',\n      title: 'default',\n      render: () => <SparklineEntryDefaultPreview />,\n      code: `import { Sparkline } from '@open-mercato/ui/backend/charts'\n\n<Sparkline values={[12, 18, 14, 22, 19, 27, 24, 31]} ariaLabel=\"Weekly orders trend\" />`,\n    },\n    {\n      id: 'semantic-color',\n      title: 'Colored via currentColor',\n      render: () => <SparklineEntrySemanticColorPreview />,\n      code: `import { Sparkline } from '@open-mercato/ui/backend/charts'\n\n// Sparkline strokes with currentColor \u2014 set a semantic text token on the wrapper.\n<span className=\"text-primary\">\n  <Sparkline values={values} ariaLabel=\"Orders trending up\" />\n</span>`,\n    },\n    {\n      id: 'sizes',\n      title: 'Custom width and height',\n      render: () => <SparklineEntrySizesPreview />,\n      code: `import { Sparkline } from '@open-mercato/ui/backend/charts'\n\n<Sparkline values={values} ariaLabel=\"Small trend\" width={64} height={20} />\n<Sparkline values={values} ariaLabel=\"Default trend\" />\n<Sparkline values={values} ariaLabel=\"Large trend\" width={160} height={40} />`,\n    },\n  ],\n}\nconst barChartEntry: GalleryEntry = {\n  id: 'bar-chart',\n  title: 'BarChart',\n  importPath: '@open-mercato/ui/backend/charts',\n  variants: [\n    {\n      id: 'basic',\n      title: 'Basic (revenue by month)',\n      render: () => <BarChartEntryBasicPreview />,\n      code: `import { BarChart } from '@open-mercato/ui/backend/charts'\n\n<BarChart\n  title=\"Revenue by month\"\n  data={revenueByMonth}\n  index=\"month\"\n  categories={['revenue']}\n  showLegend={false}\n/>`,\n    },\n    {\n      id: 'horizontal',\n      title: 'Horizontal layout',\n      render: () => <BarChartEntryHorizontalPreview />,\n      code: `import { BarChart } from '@open-mercato/ui/backend/charts'\n\n<BarChart\n  title=\"Revenue by channel\"\n  data={revenueByChannel}\n  index=\"channel\"\n  categories={['revenue']}\n  layout=\"horizontal\"\n  showLegend={false}\n/>`,\n    },\n    {\n      id: 'multi-series',\n      title: 'Multiple series with legend',\n      render: () => <BarChartEntryMultiSeriesPreview />,\n      code: `import { BarChart } from '@open-mercato/ui/backend/charts'\n\n<BarChart\n  title=\"Orders by month\"\n  data={ordersByMonth}\n  index=\"month\"\n  categories={['online', 'retail']}\n  categoryLabels={{ online: 'Online', retail: 'Retail' }}\n/>`,\n    },\n  ],\n}\nconst lineChartEntry: GalleryEntry = {\n  id: 'line-chart',\n  title: 'LineChart',\n  importPath: '@open-mercato/ui/backend/charts',\n  variants: [\n    {\n      id: 'basic',\n      title: 'Basic (revenue by month)',\n      render: () => <LineChartEntryBasicPreview />,\n      code: `import { LineChart } from '@open-mercato/ui/backend/charts'\n\n<LineChart\n  title=\"Revenue by month\"\n  data={revenueByMonth}\n  index=\"month\"\n  categories={['revenue']}\n  showLegend={false}\n/>`,\n    },\n    {\n      id: 'area',\n      title: 'Area fill',\n      render: () => <LineChartEntryAreaPreview />,\n      code: `import { LineChart } from '@open-mercato/ui/backend/charts'\n\n<LineChart\n  title=\"Revenue by month\"\n  data={revenueByMonth}\n  index=\"month\"\n  categories={['revenue']}\n  showArea\n  showLegend={false}\n/>`,\n    },\n    {\n      id: 'multi-series',\n      title: 'Multiple series, monotone curve',\n      render: () => <LineChartEntryMultiSeriesPreview />,\n      code: `import { LineChart } from '@open-mercato/ui/backend/charts'\n\n<LineChart\n  title=\"Orders by month\"\n  data={ordersByMonth}\n  index=\"month\"\n  categories={['online', 'retail']}\n  categoryLabels={{ online: 'Online', retail: 'Retail' }}\n  curveType=\"monotone\"\n/>`,\n    },\n  ],\n}\nconst pieChartEntry: GalleryEntry = {\n  id: 'pie-chart',\n  title: 'PieChart',\n  importPath: '@open-mercato/ui/backend/charts',\n  variants: [\n    {\n      id: 'pie',\n      title: 'Pie (orders by status)',\n      render: () => <PieChartEntryPiePreview />,\n      code: `import { PieChart } from '@open-mercato/ui/backend/charts'\n\n<PieChart title=\"Orders by status\" data={ordersByStatus} />`,\n    },\n    {\n      id: 'donut',\n      title: 'Donut',\n      render: () => <PieChartEntryDonutPreview />,\n      code: `import { PieChart } from '@open-mercato/ui/backend/charts'\n\n<PieChart title=\"Orders by status\" data={ordersByStatus} variant=\"donut\" />`,\n    },\n  ],\n}\nconst topNTableEntry: GalleryEntry = {\n  id: 'top-n-table',\n  title: 'TopNTable',\n  importPath: '@open-mercato/ui/backend/charts',\n  variants: [\n    {\n      id: 'basic',\n      title: 'Top products by revenue',\n      render: () => <TopNTableEntryBasicPreview />,\n      code: `import { TopNTable, type TopNTableColumn } from '@open-mercato/ui/backend/charts'\n\nconst columns: TopNTableColumn<TopProductRow>[] = [\n  { key: 'product', header: 'Product' },\n  { key: 'orders', header: 'Orders', align: 'right' },\n  { key: 'revenue', header: 'Revenue', align: 'right', formatter: (v) => formatCurrency(v as number) },\n]\n\n<TopNTable title=\"Top products\" data={topProducts} columns={columns} />`,\n    },\n    {\n      id: 'max-rows',\n      title: 'Capped with maxRows',\n      render: () => <TopNTableEntryMaxRowsPreview />,\n      code: `import { TopNTable } from '@open-mercato/ui/backend/charts'\n\n<TopNTable title=\"Top 3 products\" data={topProducts} columns={columns} maxRows={3} />`,\n    },\n    {\n      id: 'empty',\n      title: 'Empty state',\n      render: () => <TopNTableEntryEmptyPreview />,\n      code: `import { TopNTable } from '@open-mercato/ui/backend/charts'\n\n<TopNTable title=\"Top products\" data={[]} columns={columns} emptyMessage=\"No sales in this period\" />`,\n    },\n  ],\n}\nconst marketingWidgetsEntry: GalleryEntry = {\n  id: 'marketing-widgets',\n  title: 'Marketing & Sales Widgets',\n  importPath: '@open-mercato/ui/primitives/card',\n  figmaNodeId: '164628:1734',\n  variants: [\n    {\n      id: 'total-sales',\n      title: 'total-sales',\n      render: () => <MarketingWidgetDemo kind=\"total-sales\" />,\n      code: marketingWidgetExampleCode('<MarketingWidgetDemo kind=\"total-sales\" />'),\n    },\n    {\n      id: 'total-visitors',\n      title: 'total-visitors',\n      render: () => <MarketingWidgetDemo kind=\"total-visitors\" />,\n      code: marketingWidgetExampleCode('<MarketingWidgetDemo kind=\"total-visitors\" />'),\n    },\n    {\n      id: 'conversion-rate',\n      title: 'conversion-rate',\n      render: () => <MarketingWidgetDemo kind=\"conversion-rate\" />,\n      code: marketingWidgetExampleCode('<MarketingWidgetDemo kind=\"conversion-rate\" />'),\n    },\n    {\n      id: 'user-retention',\n      title: 'user-retention',\n      render: () => <MarketingWidgetDemo kind=\"user-retention\" />,\n      code: marketingWidgetExampleCode('<MarketingWidgetDemo kind=\"user-retention\" />'),\n    },\n    {\n      id: 'weekly-visitors',\n      title: 'weekly-visitors',\n      render: () => <MarketingWidgetDemo kind=\"weekly-visitors\" />,\n      code: marketingWidgetExampleCode('<MarketingWidgetDemo kind=\"weekly-visitors\" />'),\n    },\n    {\n      id: 'visitor-channels',\n      title: 'visitor-channels',\n      render: () => <MarketingWidgetDemo kind=\"visitor-channels\" />,\n      code: marketingWidgetExampleCode('<MarketingWidgetDemo kind=\"visitor-channels\" />'),\n    },\n    {\n      id: 'geography',\n      title: 'geography',\n      render: () => <MarketingWidgetDemo kind=\"geography\" />,\n      code: marketingWidgetExampleCode('<MarketingWidgetDemo kind=\"geography\" />'),\n    },\n    {\n      id: 'realtime-visitors',\n      title: 'realtime-visitors',\n      render: () => <MarketingWidgetDemo kind=\"realtime-visitors\" />,\n      code: marketingWidgetExampleCode('<MarketingWidgetDemo kind=\"realtime-visitors\" />'),\n    },\n    {\n      id: 'marketing-channels',\n      title: 'marketing-channels',\n      render: () => <MarketingWidgetDemo kind=\"marketing-channels\" />,\n      code: marketingWidgetExampleCode('<MarketingWidgetDemo kind=\"marketing-channels\" />'),\n    },\n    {\n      id: 'product-performance',\n      title: 'product-performance',\n      render: () => <MarketingWidgetDemo kind=\"product-performance\" />,\n      code: marketingWidgetExampleCode('<MarketingWidgetDemo kind=\"product-performance\" />'),\n    },\n    {\n      id: 'shipping-tracking',\n      title: 'shipping-tracking',\n      render: () => <MarketingWidgetDemo kind=\"shipping-tracking\" />,\n      code: marketingWidgetExampleCode('<MarketingWidgetDemo kind=\"shipping-tracking\" />'),\n    },\n    {\n      id: 'my-products',\n      title: 'my-products',\n      render: () => <MarketingWidgetDemo kind=\"my-products\" />,\n      code: marketingWidgetExampleCode('<MarketingWidgetDemo kind=\"my-products\" />'),\n    },\n    {\n      id: 'product-categories',\n      title: 'product-categories',\n      render: () => <MarketingWidgetDemo kind=\"product-categories\" />,\n      code: marketingWidgetExampleCode('<MarketingWidgetDemo kind=\"product-categories\" />'),\n    },\n    {\n      id: 'customer-segments',\n      title: 'customer-segments',\n      render: () => <MarketingWidgetDemo kind=\"customer-segments\" />,\n      code: marketingWidgetExampleCode('<MarketingWidgetDemo kind=\"customer-segments\" />'),\n    },\n    {\n      id: 'sales-channels',\n      title: 'sales-channels',\n      render: () => <MarketingWidgetDemo kind=\"sales-channels\" />,\n      code: marketingWidgetExampleCode('<MarketingWidgetDemo kind=\"sales-channels\" />'),\n    },\n    {\n      id: 'campaign-data',\n      title: 'campaign-data',\n      render: () => <MarketingWidgetDemo kind=\"campaign-data\" />,\n      code: marketingWidgetExampleCode('<MarketingWidgetDemo kind=\"campaign-data\" />'),\n    },\n    {\n      id: 'support-analytics',\n      title: 'support-analytics',\n      render: () => <MarketingWidgetDemo kind=\"support-analytics\" />,\n      code: marketingWidgetExampleCode('<MarketingWidgetDemo kind=\"support-analytics\" />'),\n    },\n    {\n      id: 'recent-activities',\n      title: 'recent-activities',\n      render: () => <MarketingWidgetDemo kind=\"recent-activities\" />,\n      code: marketingWidgetExampleCode('<MarketingWidgetDemo kind=\"recent-activities\" />'),\n    },\n  ],\n}\nexport const entries: GalleryEntry[] = [\n  marketingWidgetsEntry,\n  kpiCardEntry,\n  sparklineEntry,\n  barChartEntry,\n  lineChartEntry,\n  pieChartEntry,\n  topNTableEntry,\n]\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/modules/design_system/gallery/entries/dates.js CHANGED Viewed

@@ -1,8 +1,12 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { TimePickerDurationExamples, TimePickerSlotExamples, TimePickerStatusExamples } from "../demos/time-picker.js";
+import { timePickerDurationCode, timePickerSlotCode, timePickerStatusCode } from "../demos/time-picker-code.generated.js";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
 import { Clock } from "lucide-react";
-import { Calendar } from "@open-mercato/ui/primitives/calendar";
+import { Calendar, CalendarMonthSelector } from "@open-mercato/ui/primitives/calendar";
 import { DatePicker } from "@open-mercato/ui/primitives/date-picker";
+import { defaultDateRangePresets } from "@open-mercato/ui/primitives/date-picker-helpers";
 import { DateRangePicker } from "@open-mercato/ui/primitives/date-range-picker";
 import {
   TimePicker,
@@ -38,8 +42,74 @@ function DemoCalendarRange() {
     }
   );
 }
+function CalendarMarkedDemo() {
+  const t = useT();
+  const [selected, setSelected] = React.useState(new Date(2026, 5, 12));
+  const marked = [new Date(2026, 5, 8), new Date(2026, 5, 12), new Date(2026, 5, 20)];
+  return /* @__PURE__ */ jsx(
+    Calendar,
+    {
+      mode: "single",
+      daySize: 40,
+      defaultMonth: new Date(2026, 5, 1),
+      today: new Date(2026, 5, 12),
+      selected,
+      onSelect: setSelected,
+      disabled: [new Date(2026, 5, 20)],
+      modifiers: { marked },
+      modifiersClassNames: { marked: "after:absolute after:bottom-1.5 after:left-1/2 after:size-0.75 after:-translate-x-1/2 after:rounded-full after:bg-current after:content-['']" },
+      labels: { labelDayButton: (day, modifiers) => modifiers.marked ? t("design_system.gallery.examples.controls.markedDate", { date: new Intl.DateTimeFormat(void 0, { dateStyle: "full" }).format(day) }) : new Intl.DateTimeFormat(void 0, { dateStyle: "full" }).format(day) }
+    }
+  );
+}
+function CalendarBoundaryDemo() {
+  const [range, setRange] = React.useState({ from: new Date(2026, 5, 8), to: new Date(2026, 5, 19) });
+  return /* @__PURE__ */ jsx(
+    Calendar,
+    {
+      mode: "range",
+      daySize: 40,
+      defaultMonth: new Date(2026, 5, 1),
+      today: new Date(2026, 5, 12),
+      startMonth: new Date(2026, 5, 1),
+      endMonth: new Date(2026, 5, 30),
+      selected: range,
+      onSelect: (value) => setRange(value ?? { from: void 0 }),
+      disabled: [{ before: new Date(2026, 5, 5) }, { after: new Date(2026, 5, 25) }],
+      excludeDisabled: true
+    }
+  );
+}
+function CalendarSelectorDemo({ previous, next }) {
+  const [month, setMonth] = React.useState(new Date(2026, 5, 1));
+  const [selected, setSelected] = React.useState();
+  const move = (offset) => setMonth((current) => new Date(current.getFullYear(), current.getMonth() + offset, 1));
+  return /* @__PURE__ */ jsxs("div", { className: "w-fit", children: [
+    /* @__PURE__ */ jsx(CalendarMonthSelector, { month, onPreviousMonth: previous ? () => move(-1) : void 0, onNextMonth: next ? () => move(1) : void 0 }),
+    /* @__PURE__ */ jsx(Calendar, { mode: "single", daySize: 40, month, onMonthChange: setMonth, selected, onSelect: setSelected, today: new Date(2026, 5, 12), components: { MonthCaption: () => /* @__PURE__ */ jsx(Fragment, {}) } })
+  ] });
+}
+function DatePickerBoundaryDemo() {
+  const t = useT();
+  const [value, setValue] = React.useState(new Date(2026, 5, 12));
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-sm flex-col gap-3", children: [
+    /* @__PURE__ */ jsx(DatePicker, { value, onChange: setValue, minDate: new Date(2026, 5, 5), maxDate: new Date(2026, 5, 25), "aria-label": t("design_system.gallery.examples.controls.date") }),
+    /* @__PURE__ */ jsx(DatePicker, { value, onChange: setValue, readOnly: true, "aria-label": t("design_system.gallery.examples.controls.readOnlyDate") }),
+    /* @__PURE__ */ jsx("output", { className: "text-sm text-muted-foreground", children: value?.toLocaleDateString() })
+  ] });
+}
+function DateRangePresetDemo() {
+  const t = useT();
+  const [value, setValue] = React.useState({ start: new Date(2026, 5, 8), end: new Date(2026, 5, 12) });
+  const presets = React.useMemo(() => defaultDateRangePresets().map((preset) => ({ ...preset, range: () => preset.range(new Date(2026, 5, 12)) })), []);
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-sm flex-col gap-3", children: [
+    /* @__PURE__ */ jsx(DateRangePicker, { value, onChange: setValue, presets, "aria-label": t("design_system.gallery.examples.controls.period") }),
+    /* @__PURE__ */ jsx("output", { className: "text-sm text-muted-foreground", children: value ? `${value.start.toLocaleDateString()} \u2013 ${value.end.toLocaleDateString()}` : t("design_system.gallery.examples.controls.empty") })
+  ] });
+}
 const calendarEntry = {
   id: "calendar",
+  figmaNodeId: "437:175",
   title: "Calendar",
   importPath: "@open-mercato/ui/primitives/calendar",
   variants: [
@@ -70,6 +140,74 @@ const [selected, setSelected] = React.useState<{ from?: Date; to?: Date }>()
       code: `import { Calendar } from '@open-mercato/ui/primitives/calendar'
 <Calendar disabled={{ dayOfWeek: [0, 6] }} />`
+    },
+    {
+      id: "marked-days",
+      title: "Marked / selected / disabled days",
+      render: () => /* @__PURE__ */ jsx(CalendarMarkedDemo, {}),
+      code: `import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Calendar } from '@open-mercato/ui/primitives/calendar'
+function CalendarMarkedDemo() {
+  const t = useT()
+  const [selected, setSelected] = React.useState<Date | undefined>(new Date(2026, 5, 12))
+  const marked = [new Date(2026, 5, 8), new Date(2026, 5, 12), new Date(2026, 5, 20)]
+  return <Calendar mode="single" daySize={40} defaultMonth={new Date(2026, 5, 1)} today={new Date(2026, 5, 12)} selected={selected} onSelect={setSelected}
+    disabled={[new Date(2026, 5, 20)]} modifiers={{ marked }}
+    modifiersClassNames={{ marked: "after:absolute after:bottom-1.5 after:left-1/2 after:size-0.75 after:-translate-x-1/2 after:rounded-full after:bg-current after:content-['']" }}
+    labels={{ labelDayButton: (day, modifiers) => modifiers.marked
+      ? t('design_system.gallery.examples.controls.markedDate', { date: new Intl.DateTimeFormat(undefined, { dateStyle: 'full' }).format(day) })
+      : new Intl.DateTimeFormat(undefined, { dateStyle: 'full' }).format(day) }} />
+}
+<CalendarMarkedDemo />`
+    },
+    {
+      id: "range-boundaries",
+      title: "Range boundaries",
+      render: () => /* @__PURE__ */ jsx(CalendarBoundaryDemo, {}),
+      code: `import * as React from 'react'
+import { Calendar } from '@open-mercato/ui/primitives/calendar'
+function CalendarBoundaryDemo() {
+  const [range, setRange] = React.useState<{ from: Date | undefined; to?: Date }>({ from: new Date(2026, 5, 8), to: new Date(2026, 5, 19) })
+  return <Calendar mode="range" daySize={40} defaultMonth={new Date(2026, 5, 1)} today={new Date(2026, 5, 12)}
+    startMonth={new Date(2026, 5, 1)} endMonth={new Date(2026, 5, 30)}
+    selected={range} onSelect={(value) => setRange(value ?? { from: undefined })}
+    disabled={[{ before: new Date(2026, 5, 5) }, { after: new Date(2026, 5, 25) }]} excludeDisabled />
+}
+<CalendarBoundaryDemo />`
+    },
+    {
+      id: "month-selectors",
+      title: "Month selectors \xB7 4 icon combinations",
+      render: () => /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-6", children: [
+        /* @__PURE__ */ jsx(CalendarSelectorDemo, { previous: false, next: false }),
+        /* @__PURE__ */ jsx(CalendarSelectorDemo, { previous: true, next: false }),
+        /* @__PURE__ */ jsx(CalendarSelectorDemo, { previous: false, next: true }),
+        /* @__PURE__ */ jsx(CalendarSelectorDemo, { previous: true, next: true })
+      ] }),
+      code: `import * as React from 'react'
+import { Calendar, CalendarMonthSelector } from '@open-mercato/ui/primitives/calendar'
+function CalendarSelectorDemo({ previous, next }: { previous: boolean; next: boolean }) {
+  const [month, setMonth] = React.useState(new Date(2026, 5, 1))
+  const [selected, setSelected] = React.useState<Date | undefined>()
+  const move = (offset: number) => setMonth(current => new Date(current.getFullYear(), current.getMonth() + offset, 1))
+  return <div className="w-fit">
+    <CalendarMonthSelector month={month} onPreviousMonth={previous ? () => move(-1) : undefined} onNextMonth={next ? () => move(1) : undefined} />
+    <Calendar mode="single" daySize={40} month={month} onMonthChange={setMonth} selected={selected} onSelect={setSelected} today={new Date(2026, 5, 12)} components={{ MonthCaption: () => <></> }} />
+  </div>
+}
+<div className="flex w-full flex-wrap gap-6">
+  <CalendarSelectorDemo previous={false} next={false} />
+  <CalendarSelectorDemo previous next={false} />
+  <CalendarSelectorDemo previous={false} next />
+  <CalendarSelectorDemo previous next />
+</div>`
     }
   ]
 };
@@ -87,6 +225,7 @@ function DemoDatePickerTodayClear() {
 }
 const datePickerEntry = {
   id: "date-picker",
+  figmaNodeId: "446:7413",
   title: "DatePicker",
   importPath: "@open-mercato/ui/primitives/date-picker",
   variants: [
@@ -133,6 +272,26 @@ const [value, setValue] = React.useState<Date | null>(null)
 <DatePicker value={value} onChange={setValue} size="sm" />
 <DatePicker value={value} onChange={setValue} disabled />`
+    },
+    {
+      id: "boundaries-readonly",
+      title: "Date boundaries and readOnly",
+      render: () => /* @__PURE__ */ jsx(DatePickerBoundaryDemo, {}),
+      code: `import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { DatePicker } from '@open-mercato/ui/primitives/date-picker'
+function DatePickerBoundaryDemo() {
+  const t = useT()
+  const [value, setValue] = React.useState<Date | null>(new Date(2026, 5, 12))
+  return <div className="flex w-full max-w-sm flex-col gap-3">
+    <DatePicker value={value} onChange={setValue} minDate={new Date(2026, 5, 5)} maxDate={new Date(2026, 5, 25)} aria-label={t('design_system.gallery.examples.controls.date')} />
+    <DatePicker value={value} onChange={setValue} readOnly aria-label={t('design_system.gallery.examples.controls.readOnlyDate')} />
+    <output className="text-sm text-muted-foreground">{value?.toLocaleDateString()}</output>
+  </div>
+}
+<DatePickerBoundaryDemo />`
     }
   ]
 };
@@ -155,6 +314,7 @@ function DemoDateRangePickerCompact() {
 }
 const dateRangePickerEntry = {
   id: "date-range-picker",
+  figmaNodeId: "446:7412",
   title: "DateRangePicker",
   importPath: "@open-mercato/ui/primitives/date-range-picker",
   variants: [
@@ -191,33 +351,61 @@ const [value, setValue] = React.useState<DateRange | null>(null)
       code: `import { DateRangePicker } from '@open-mercato/ui/primitives/date-range-picker'
 <DateRangePicker value={value} onChange={setValue} disabled />`
+    },
+    {
+      id: "fixed-presets",
+      title: "Eight reproducible presets and draft/apply",
+      render: () => /* @__PURE__ */ jsx(DateRangePresetDemo, {}),
+      code: `import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { DateRangePicker } from '@open-mercato/ui/primitives/date-range-picker'
+import { defaultDateRangePresets } from '@open-mercato/ui/primitives/date-picker-helpers'
+import type { DateRange } from '@open-mercato/ui/backend/date-range'
+function DateRangePresetDemo() {
+  const t = useT()
+  const [value, setValue] = React.useState<DateRange | null>({ start: new Date(2026, 5, 8), end: new Date(2026, 5, 12) })
+  const presets = React.useMemo(() => defaultDateRangePresets().map(preset => ({ ...preset, range: () => preset.range(new Date(2026, 5, 12)) })), [])
+  return <div className="flex w-full max-w-sm flex-col gap-3">
+    <DateRangePicker value={value} onChange={setValue} presets={presets} aria-label={t('design_system.gallery.examples.controls.period')} />
+    <output className="text-sm text-muted-foreground">{value ? \`\${value.start.toLocaleDateString()} \u2013 \${value.end.toLocaleDateString()}\` : t('design_system.gallery.examples.controls.empty')}</output>
+  </div>
+}
+<DateRangePresetDemo />`
     }
   ]
 };
 const sampleSlots = ["09:00", "09:30", "10:00", "10:30", "11:00", "11:30"];
 function DemoTimePickerTrigger() {
+  const t = useT();
   return /* @__PURE__ */ jsx(
     TimePicker,
     {
       defaultValue: "10:00",
       slots: sampleSlots,
       maxHeight: 200,
-      trigger: /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Pick a time" })
+      trigger: /* @__PURE__ */ jsx(Button, { variant: "outline", children: t("design_system.gallery.sampleCopy.pickATime") })
     }
   );
 }
 const timePickerEntry = {
   id: "time-picker",
+  figmaNodeId: "165483:5687",
   title: "TimePicker",
   importPath: "@open-mercato/ui/primitives/time-picker",
   variants: [
+    { id: "source-statuses", title: "4 statuses / 4 states", render: () => /* @__PURE__ */ jsx(TimePickerStatusExamples, {}), code: timePickerStatusCode },
+    { id: "source-durations", title: "Duration / 4 states", render: () => /* @__PURE__ */ jsx(TimePickerDurationExamples, {}), code: timePickerDurationCode },
+    { id: "source-slots", title: "Selection indicator right / center / 4 states", render: () => /* @__PURE__ */ jsx(TimePickerSlotExamples, {}), code: timePickerSlotCode },
     {
       id: "inline-card",
       title: "Inline card",
-      render: () => /* @__PURE__ */ jsx(TimePicker, { defaultValue: "10:00", slots: sampleSlots, maxHeight: 160 }),
+      render: () => /* @__PURE__ */ jsx(TimePicker, { defaultValue: "10:00", slots: sampleSlots, maxHeight: 160, className: "max-w-full" }),
       code: `import { TimePicker } from '@open-mercato/ui/primitives/time-picker'
 <TimePicker
+  className="max-w-full"
   defaultValue="10:00"
   slots={['09:00', '09:30', '10:00', '10:30', '11:00', '11:30']}
 />`

package/dist/modules/design_system/gallery/entries/dates.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/modules/design_system/gallery/entries/dates.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport { Clock } from 'lucide-react'\nimport { Calendar } from '@open-mercato/ui/primitives/calendar'\nimport { DatePicker } from '@open-mercato/ui/primitives/date-picker'\nimport { DateRangePicker } from '@open-mercato/ui/primitives/date-range-picker'\nimport {\n  TimePicker,\n  TimePickerSlot,\n  TimePickerDurationChip,\n  TimePickerStatusChip,\n} from '@open-mercato/ui/primitives/time-picker'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport type { DateRange } from '@open-mercato/ui/backend/date-range'\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// Fixed sample dates \u2014 previews must not depend on \"today\" so the gallery\n// renders identically on any day (the `today` highlight ring aside).\nconst sampleDay = new Date(2026, 5, 12)\nconst sampleMonth = new Date(2026, 5, 1)\nconst sampleRange: DateRange = { start: new Date(2026, 5, 8), end: new Date(2026, 5, 19) }\n\nfunction DemoCalendarSingle() {\n  const [selected, setSelected] = React.useState<Date | undefined>(sampleDay)\n  return (\n    <Calendar\n      mode=\"single\"\n      selected={selected}\n      onSelect={(day) => setSelected(day)}\n      defaultMonth={sampleMonth}\n    />\n  )\n}\n\nfunction DemoCalendarRange() {\n  const [selected, setSelected] = React.useState<\n    { from: Date | undefined; to?: Date | undefined } | undefined\n  >({ from: sampleRange.start, to: sampleRange.end })\n  return (\n    <Calendar\n      mode=\"range\"\n      selected={selected}\n      onSelect={(range) => setSelected(range)}\n      defaultMonth={sampleMonth}\n    />\n  )\n}\n\nconst calendarEntry: GalleryEntry = {\n  id: 'calendar',\n  title: 'Calendar',\n  importPath: '@open-mercato/ui/primitives/calendar',\n  variants: [\n    {\n      id: 'single',\n      title: 'Single selection',\n      render: () => <DemoCalendarSingle />,\n      code: `import { Calendar } from '@open-mercato/ui/primitives/calendar'\n\nconst [selected, setSelected] = React.useState<Date | undefined>()\n\n<Calendar mode=\"single\" selected={selected} onSelect={setSelected} />`,\n    },\n    {\n      id: 'range',\n      title: 'Range selection',\n      render: () => <DemoCalendarRange />,\n      code: `import { Calendar } from '@open-mercato/ui/primitives/calendar'\n\nconst [selected, setSelected] = React.useState<{ from?: Date; to?: Date }>()\n\n<Calendar mode=\"range\" selected={selected} onSelect={setSelected} />`,\n    },\n    {\n      id: 'disabled-days',\n      title: 'Disabled days',\n      render: () => <Calendar defaultMonth={sampleMonth} disabled={{ dayOfWeek: [0, 6] }} />,\n      code: `import { Calendar } from '@open-mercato/ui/primitives/calendar'\n\n<Calendar disabled={{ dayOfWeek: [0, 6] }} />`,\n    },\n  ],\n}\n\nfunction DemoDatePicker() {\n  const [value, setValue] = React.useState<Date | null>(sampleDay)\n  return <DatePicker value={value} onChange={setValue} />\n}\n\nfunction DemoDatePickerWithTime() {\n  const [value, setValue] = React.useState<Date | null>(new Date(2026, 5, 12, 9, 30))\n  return <DatePicker value={value} onChange={setValue} withTime minuteStep={15} />\n}\n\nfunction DemoDatePickerTodayClear() {\n  const [value, setValue] = React.useState<Date | null>(null)\n  return <DatePicker value={value} onChange={setValue} footer=\"today-clear\" />\n}\n\nconst datePickerEntry: GalleryEntry = {\n  id: 'date-picker',\n  title: 'DatePicker',\n  importPath: '@open-mercato/ui/primitives/date-picker',\n  variants: [\n    {\n      id: 'default',\n      title: 'default (apply-cancel footer)',\n      render: () => <DemoDatePicker />,\n      code: `import { DatePicker } from '@open-mercato/ui/primitives/date-picker'\n\nconst [value, setValue] = React.useState<Date | null>(null)\n\n<DatePicker value={value} onChange={setValue} />`,\n    },\n    {\n      id: 'with-time',\n      title: 'withTime',\n      render: () => <DemoDatePickerWithTime />,\n      code: `import { DatePicker } from '@open-mercato/ui/primitives/date-picker'\n\nconst [value, setValue] = React.useState<Date | null>(null)\n\n<DatePicker value={value} onChange={setValue} withTime minuteStep={15} />`,\n    },\n    {\n      id: 'today-clear-footer',\n      title: \"footer='today-clear'\",\n      render: () => <DemoDatePickerTodayClear />,\n      code: `import { DatePicker } from '@open-mercato/ui/primitives/date-picker'\n\nconst [value, setValue] = React.useState<Date | null>(null)\n\n<DatePicker value={value} onChange={setValue} footer=\"today-clear\" />`,\n    },\n    {\n      id: 'states',\n      title: 'Small / disabled',\n      render: () => (\n        <>\n          <DatePicker value={sampleDay} onChange={() => {}} size=\"sm\" />\n          <DatePicker value={sampleDay} onChange={() => {}} disabled />\n        </>\n      ),\n      code: `import { DatePicker } from '@open-mercato/ui/primitives/date-picker'\n\n<DatePicker value={value} onChange={setValue} size=\"sm\" />\n<DatePicker value={value} onChange={setValue} disabled />`,\n    },\n  ],\n}\n\nfunction DemoDateRangePicker() {\n  const [value, setValue] = React.useState<DateRange | null>(sampleRange)\n  return <DateRangePicker value={value} onChange={setValue} />\n}\n\nfunction DemoDateRangePickerCompact() {\n  const [value, setValue] = React.useState<DateRange | null>(null)\n  return (\n    <DateRangePicker\n      value={value}\n      onChange={setValue}\n      showPresets={false}\n      numberOfMonths={1}\n      size=\"sm\"\n    />\n  )\n}\n\nconst dateRangePickerEntry: GalleryEntry = {\n  id: 'date-range-picker',\n  title: 'DateRangePicker',\n  importPath: '@open-mercato/ui/primitives/date-range-picker',\n  variants: [\n    {\n      id: 'default',\n      title: 'default (presets + two months)',\n      render: () => <DemoDateRangePicker />,\n      code: `import { DateRangePicker } from '@open-mercato/ui/primitives/date-range-picker'\nimport type { DateRange } from '@open-mercato/ui/backend/date-range'\n\nconst [value, setValue] = React.useState<DateRange | null>(null)\n\n<DateRangePicker value={value} onChange={setValue} />`,\n    },\n    {\n      id: 'compact',\n      title: 'Compact (no presets, one month)',\n      render: () => <DemoDateRangePickerCompact />,\n      code: `import { DateRangePicker } from '@open-mercato/ui/primitives/date-range-picker'\n\n<DateRangePicker\n  value={value}\n  onChange={setValue}\n  showPresets={false}\n  numberOfMonths={1}\n  size=\"sm\"\n/>`,\n    },\n    {\n      id: 'disabled',\n      title: 'Disabled',\n      render: () => <DateRangePicker value={sampleRange} onChange={() => {}} disabled />,\n      code: `import { DateRangePicker } from '@open-mercato/ui/primitives/date-range-picker'\n\n<DateRangePicker value={value} onChange={setValue} disabled />`,\n    },\n  ],\n}\n\nconst sampleSlots = ['09:00', '09:30', '10:00', '10:30', '11:00', '11:30']\n\nfunction DemoTimePickerTrigger() {\n  return (\n    <TimePicker\n      defaultValue=\"10:00\"\n      slots={sampleSlots}\n      maxHeight={200}\n      trigger={<Button variant=\"outline\">Pick a time</Button>}\n    />\n  )\n}\n\nconst timePickerEntry: GalleryEntry = {\n  id: 'time-picker',\n  title: 'TimePicker',\n  importPath: '@open-mercato/ui/primitives/time-picker',\n  variants: [\n    {\n      id: 'inline-card',\n      title: 'Inline card',\n      render: () => (\n        <TimePicker defaultValue=\"10:00\" slots={sampleSlots} maxHeight={160} />\n      ),\n      code: `import { TimePicker } from '@open-mercato/ui/primitives/time-picker'\n\n<TimePicker\n  defaultValue=\"10:00\"\n  slots={['09:00', '09:30', '10:00', '10:30', '11:00', '11:30']}\n/>`,\n    },\n    {\n      id: 'durations-statuses',\n      title: 'Durations + statuses',\n      render: () => (\n        <TimePicker\n          defaultValue=\"09:30\"\n          slots={sampleSlots}\n          maxHeight={140}\n          durations={[{ value: 15 }, { value: 30 }, { value: 60 }, { value: 90 }]}\n          defaultActiveDuration={30}\n          statuses={[{ variant: 'available' }, { variant: 'busy' }, { variant: 'in-meeting' }]}\n          defaultActiveStatus=\"available\"\n        />\n      ),\n      code: `import { TimePicker } from '@open-mercato/ui/primitives/time-picker'\n\n<TimePicker\n  defaultValue=\"09:30\"\n  slots={['09:00', '09:30', '10:00', '10:30', '11:00', '11:30']}\n  durations={[{ value: 15 }, { value: 30 }, { value: 60 }, { value: 90 }]}\n  defaultActiveDuration={30}\n  statuses={[{ variant: 'available' }, { variant: 'busy' }, { variant: 'in-meeting' }]}\n  defaultActiveStatus=\"available\"\n/>`,\n    },\n    {\n      id: 'with-trigger',\n      title: 'With trigger (popover)',\n      render: () => <DemoTimePickerTrigger />,\n      code: `import { TimePicker } from '@open-mercato/ui/primitives/time-picker'\nimport { Button } from '@open-mercato/ui/primitives/button'\n\n<TimePicker\n  defaultValue=\"10:00\"\n  slots={['09:00', '09:30', '10:00', '10:30', '11:00', '11:30']}\n  trigger={<Button variant=\"outline\">Pick a time</Button>}\n/>`,\n    },\n    {\n      id: 'atoms',\n      title: 'Atoms (Slot / DurationChip / StatusChip)',\n      render: () => (\n        <div className=\"flex flex-col gap-3\">\n          <div className=\"flex w-56 flex-col gap-0.5\">\n            <TimePickerSlot value=\"09:30\" />\n            <TimePickerSlot value=\"10:00\" selected />\n            <TimePickerSlot value=\"10:30\" disabled />\n          </div>\n          <div className=\"flex items-center gap-2\">\n            <TimePickerDurationChip value={30} />\n            <TimePickerDurationChip value={90} selected />\n          </div>\n          <div className=\"flex items-center gap-2\">\n            <TimePickerStatusChip variant=\"available\" selected />\n            <TimePickerStatusChip variant=\"busy\" />\n            <TimePickerStatusChip variant=\"in-meeting\" icon={<Clock className=\"size-3\" aria-hidden=\"true\" />} />\n          </div>\n        </div>\n      ),\n      code: `import { Clock } from 'lucide-react'\nimport {\n  TimePickerSlot,\n  TimePickerDurationChip,\n  TimePickerStatusChip,\n} from '@open-mercato/ui/primitives/time-picker'\n\n<TimePickerSlot value=\"10:00\" selected />\n<TimePickerDurationChip value={90} selected />\n<TimePickerStatusChip variant=\"busy\" />\n<TimePickerStatusChip variant=\"in-meeting\" icon={<Clock className=\"size-3\" />} />`,\n    },\n  ],\n}\n\nexport const entries: GalleryEntry[] = [\n  calendarEntry,\n  datePickerEntry,\n  dateRangePickerEntry,\n  timePickerEntry,\n]\n"],
-  "mappings": "AA6BI,SAiHI,UAjHJ,KAiHI,YAjHJ;AA7BJ,YAAY,WAAW;AACvB,SAAS,aAAa;AACtB,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc;AAWvB,MAAM,YAAY,IAAI,KAAK,MAAM,GAAG,EAAE;AACtC,MAAM,cAAc,IAAI,KAAK,MAAM,GAAG,CAAC;AACvC,MAAM,cAAyB,EAAE,OAAO,IAAI,KAAK,MAAM,GAAG,CAAC,GAAG,KAAK,IAAI,KAAK,MAAM,GAAG,EAAE,EAAE;AAEzF,SAAS,qBAAqB;AAC5B,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAA2B,SAAS;AAC1E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA,UAAU,CAAC,QAAQ,YAAY,GAAG;AAAA,MAClC,cAAc;AAAA;AAAA,EAChB;AAEJ;AAEA,SAAS,oBAAoB;AAC3B,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAEpC,EAAE,MAAM,YAAY,OAAO,IAAI,YAAY,IAAI,CAAC;AAClD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA,UAAU,CAAC,UAAU,YAAY,KAAK;AAAA,MACtC,cAAc;AAAA;AAAA,EAChB;AAEJ;AAEA,MAAM,gBAA8B;AAAA,EAClC,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,UAAU;AAAA,IACR;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ,MAAM,oBAAC,sBAAmB;AAAA,MAClC,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,IAKR;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ,MAAM,oBAAC,qBAAkB;AAAA,MACjC,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,IAKR;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ,MAAM,oBAAC,YAAS,cAAc,aAAa,UAAU,EAAE,WAAW,CAAC,GAAG,CAAC,EAAE,GAAG;AAAA,MACpF,MAAM;AAAA;AAAA;AAAA,IAGR;AAAA,EACF;AACF;AAEA,SAAS,iBAAiB;AACxB,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAsB,SAAS;AAC/D,SAAO,oBAAC,cAAW,OAAc,UAAU,UAAU;AACvD;AAEA,SAAS,yBAAyB;AAChC,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAsB,IAAI,KAAK,MAAM,GAAG,IAAI,GAAG,EAAE,CAAC;AAClF,SAAO,oBAAC,cAAW,OAAc,UAAU,UAAU,UAAQ,MAAC,YAAY,IAAI;AAChF;AAEA,SAAS,2BAA2B;AAClC,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAsB,IAAI;AAC1D,SAAO,oBAAC,cAAW,OAAc,UAAU,UAAU,QAAO,eAAc;AAC5E;AAEA,MAAM,kBAAgC;AAAA,EACpC,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,UAAU;AAAA,IACR;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ,MAAM,oBAAC,kBAAe;AAAA,MAC9B,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,IAKR;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ,MAAM,oBAAC,0BAAuB;AAAA,MACtC,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,IAKR;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ,MAAM,oBAAC,4BAAyB;AAAA,MACxC,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,IAKR;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ,MACN,iCACE;AAAA,4BAAC,cAAW,OAAO,WAAW,UAAU,MAAM;AAAA,QAAC,GAAG,MAAK,MAAK;AAAA,QAC5D,oBAAC,cAAW,OAAO,WAAW,UAAU,MAAM;AAAA,QAAC,GAAG,UAAQ,MAAC;AAAA,SAC7D;AAAA,MAEF,MAAM;AAAA;AAAA;AAAA;AAAA,IAIR;AAAA,EACF;AACF;AAEA,SAAS,sBAAsB;AAC7B,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAA2B,WAAW;AACtE,SAAO,oBAAC,mBAAgB,OAAc,UAAU,UAAU;AAC5D;AAEA,SAAS,6BAA6B;AACpC,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAA2B,IAAI;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,aAAa;AAAA,MACb,gBAAgB;AAAA,MAChB,MAAK;AAAA;AAAA,EACP;AAEJ;AAEA,MAAM,uBAAqC;AAAA,EACzC,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,UAAU;AAAA,IACR;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ,MAAM,oBAAC,uBAAoB;AAAA,MACnC,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMR;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ,MAAM,oBAAC,8BAA2B;AAAA,MAC1C,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASR;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ,MAAM,oBAAC,mBAAgB,OAAO,aAAa,UAAU,MAAM;AAAA,MAAC,GAAG,UAAQ,MAAC;AAAA,MAChF,MAAM;AAAA;AAAA;AAAA,IAGR;AAAA,EACF;AACF;AAEA,MAAM,cAAc,CAAC,SAAS,SAAS,SAAS,SAAS,SAAS,OAAO;AAEzE,SAAS,wBAAwB;AAC/B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAa;AAAA,MACb,OAAO;AAAA,MACP,WAAW;AAAA,MACX,SAAS,oBAAC,UAAO,SAAQ,WAAU,yBAAW;AAAA;AAAA,EAChD;AAEJ;AAEA,MAAM,kBAAgC;AAAA,EACpC,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,UAAU;AAAA,IACR;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ,MACN,oBAAC,cAAW,cAAa,SAAQ,OAAO,aAAa,WAAW,KAAK;AAAA,MAEvE,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMR;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ,MACN;AAAA,QAAC;AAAA;AAAA,UACC,cAAa;AAAA,UACb,OAAO;AAAA,UACP,WAAW;AAAA,UACX,WAAW,CAAC,EAAE,OAAO,GAAG,GAAG,EAAE,OAAO,GAAG,GAAG,EAAE,OAAO,GAAG,GAAG,EAAE,OAAO,GAAG,CAAC;AAAA,UACtE,uBAAuB;AAAA,UACvB,UAAU,CAAC,EAAE,SAAS,YAAY,GAAG,EAAE,SAAS,OAAO,GAAG,EAAE,SAAS,aAAa,CAAC;AAAA,UACnF,qBAAoB;AAAA;AAAA,MACtB;AAAA,MAEF,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUR;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ,MAAM,oBAAC,yBAAsB;AAAA,MACrC,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQR;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ,MACN,qBAAC,SAAI,WAAU,uBACb;AAAA,6BAAC,SAAI,WAAU,8BACb;AAAA,8BAAC,kBAAe,OAAM,SAAQ;AAAA,UAC9B,oBAAC,kBAAe,OAAM,SAAQ,UAAQ,MAAC;AAAA,UACvC,oBAAC,kBAAe,OAAM,SAAQ,UAAQ,MAAC;AAAA,WACzC;AAAA,QACA,qBAAC,SAAI,WAAU,2BACb;AAAA,8BAAC,0BAAuB,OAAO,IAAI;AAAA,UACnC,oBAAC,0BAAuB,OAAO,IAAI,UAAQ,MAAC;AAAA,WAC9C;AAAA,QACA,qBAAC,SAAI,WAAU,2BACb;AAAA,8BAAC,wBAAqB,SAAQ,aAAY,UAAQ,MAAC;AAAA,UACnD,oBAAC,wBAAqB,SAAQ,QAAO;AAAA,UACrC,oBAAC,wBAAqB,SAAQ,cAAa,MAAM,oBAAC,SAAM,WAAU,UAAS,eAAY,QAAO,GAAI;AAAA,WACpG;AAAA,SACF;AAAA,MAEF,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWR;AAAA,EACF;AACF;AAEO,MAAM,UAA0B;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;",
+  "sourcesContent": ["import * as React from 'react'\nimport { TimePickerDurationExamples, TimePickerSlotExamples, TimePickerStatusExamples } from '../demos/time-picker'\nimport { timePickerDurationCode, timePickerSlotCode, timePickerStatusCode } from '../demos/time-picker-code.generated'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Clock } from 'lucide-react'\nimport { Calendar, CalendarMonthSelector } from '@open-mercato/ui/primitives/calendar'\nimport { DatePicker } from '@open-mercato/ui/primitives/date-picker'\nimport { defaultDateRangePresets } from '@open-mercato/ui/primitives/date-picker-helpers'\nimport { DateRangePicker } from '@open-mercato/ui/primitives/date-range-picker'\nimport {\n  TimePicker,\n  TimePickerSlot,\n  TimePickerDurationChip,\n  TimePickerStatusChip,\n} from '@open-mercato/ui/primitives/time-picker'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport type { DateRange } from '@open-mercato/ui/backend/date-range'\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// Fixed sample dates \u2014 previews must not depend on \"today\" so the gallery\n// renders identically on any day (the `today` highlight ring aside).\nconst sampleDay = new Date(2026, 5, 12)\nconst sampleMonth = new Date(2026, 5, 1)\nconst sampleRange: DateRange = { start: new Date(2026, 5, 8), end: new Date(2026, 5, 19) }\n\nfunction DemoCalendarSingle() {\n  const [selected, setSelected] = React.useState<Date | undefined>(sampleDay)\n  return (\n    <Calendar\n      mode=\"single\"\n      selected={selected}\n      onSelect={(day) => setSelected(day)}\n      defaultMonth={sampleMonth}\n    />\n  )\n}\n\nfunction DemoCalendarRange() {\n  const [selected, setSelected] = React.useState<\n    { from: Date | undefined; to?: Date | undefined } | undefined\n  >({ from: sampleRange.start, to: sampleRange.end })\n  return (\n    <Calendar\n      mode=\"range\"\n      selected={selected}\n      onSelect={(range) => setSelected(range)}\n      defaultMonth={sampleMonth}\n    />\n  )\n}\n\nfunction CalendarMarkedDemo() {\n  const t = useT()\n  const [selected, setSelected] = React.useState<Date | undefined>(new Date(2026, 5, 12))\n  const marked = [new Date(2026, 5, 8), new Date(2026, 5, 12), new Date(2026, 5, 20)]\n  return <Calendar mode=\"single\" daySize={40} defaultMonth={new Date(2026, 5, 1)} today={new Date(2026, 5, 12)} selected={selected} onSelect={setSelected}\n    disabled={[new Date(2026, 5, 20)]} modifiers={{ marked }}\n    modifiersClassNames={{ marked: \"after:absolute after:bottom-1.5 after:left-1/2 after:size-0.75 after:-translate-x-1/2 after:rounded-full after:bg-current after:content-['']\" }}\n    labels={{ labelDayButton: (day, modifiers) => modifiers.marked\n      ? t('design_system.gallery.examples.controls.markedDate', { date: new Intl.DateTimeFormat(undefined, { dateStyle: 'full' }).format(day) })\n      : new Intl.DateTimeFormat(undefined, { dateStyle: 'full' }).format(day) }} />\n}\n\nfunction CalendarBoundaryDemo() {\n  const [range, setRange] = React.useState<{ from: Date | undefined; to?: Date }>({ from: new Date(2026, 5, 8), to: new Date(2026, 5, 19) })\n  return <Calendar mode=\"range\" daySize={40} defaultMonth={new Date(2026, 5, 1)} today={new Date(2026, 5, 12)}\n    startMonth={new Date(2026, 5, 1)} endMonth={new Date(2026, 5, 30)}\n    selected={range} onSelect={(value) => setRange(value ?? { from: undefined })}\n    disabled={[{ before: new Date(2026, 5, 5) }, { after: new Date(2026, 5, 25) }]} excludeDisabled />\n}\n\nfunction CalendarSelectorDemo({ previous, next }: { previous: boolean; next: boolean }) {\n  const [month, setMonth] = React.useState(new Date(2026, 5, 1))\n  const [selected, setSelected] = React.useState<Date | undefined>()\n  const move = (offset: number) => setMonth(current => new Date(current.getFullYear(), current.getMonth() + offset, 1))\n  return <div className=\"w-fit\">\n    <CalendarMonthSelector month={month} onPreviousMonth={previous ? () => move(-1) : undefined} onNextMonth={next ? () => move(1) : undefined} />\n    <Calendar mode=\"single\" daySize={40} month={month} onMonthChange={setMonth} selected={selected} onSelect={setSelected} today={new Date(2026, 5, 12)} components={{ MonthCaption: () => <></> }} />\n  </div>\n}\n\nfunction DatePickerBoundaryDemo() {\n  const t = useT()\n  const [value, setValue] = React.useState<Date | null>(new Date(2026, 5, 12))\n  return <div className=\"flex w-full max-w-sm flex-col gap-3\">\n    <DatePicker value={value} onChange={setValue} minDate={new Date(2026, 5, 5)} maxDate={new Date(2026, 5, 25)} aria-label={t('design_system.gallery.examples.controls.date')} />\n    <DatePicker value={value} onChange={setValue} readOnly aria-label={t('design_system.gallery.examples.controls.readOnlyDate')} />\n    <output className=\"text-sm text-muted-foreground\">{value?.toLocaleDateString()}</output>\n  </div>\n}\n\nfunction DateRangePresetDemo() {\n  const t = useT()\n  const [value, setValue] = React.useState<DateRange | null>({ start: new Date(2026, 5, 8), end: new Date(2026, 5, 12) })\n  const presets = React.useMemo(() => defaultDateRangePresets().map(preset => ({ ...preset, range: () => preset.range(new Date(2026, 5, 12)) })), [])\n  return <div className=\"flex w-full max-w-sm flex-col gap-3\">\n    <DateRangePicker value={value} onChange={setValue} presets={presets} aria-label={t('design_system.gallery.examples.controls.period')} />\n    <output className=\"text-sm text-muted-foreground\">{value ? `${value.start.toLocaleDateString()} \u2013 ${value.end.toLocaleDateString()}` : t('design_system.gallery.examples.controls.empty')}</output>\n  </div>\n}\n\nconst calendarEntry: GalleryEntry = {\n  id: 'calendar',\n  figmaNodeId: '437:175',\n  title: 'Calendar',\n  importPath: '@open-mercato/ui/primitives/calendar',\n  variants: [\n    {\n      id: 'single',\n      title: 'Single selection',\n      render: () => <DemoCalendarSingle />,\n      code: `import { Calendar } from '@open-mercato/ui/primitives/calendar'\n\nconst [selected, setSelected] = React.useState<Date | undefined>()\n\n<Calendar mode=\"single\" selected={selected} onSelect={setSelected} />`,\n    },\n    {\n      id: 'range',\n      title: 'Range selection',\n      render: () => <DemoCalendarRange />,\n      code: `import { Calendar } from '@open-mercato/ui/primitives/calendar'\n\nconst [selected, setSelected] = React.useState<{ from?: Date; to?: Date }>()\n\n<Calendar mode=\"range\" selected={selected} onSelect={setSelected} />`,\n    },\n    {\n      id: 'disabled-days',\n      title: 'Disabled days',\n      render: () => <Calendar defaultMonth={sampleMonth} disabled={{ dayOfWeek: [0, 6] }} />,\n      code: `import { Calendar } from '@open-mercato/ui/primitives/calendar'\n\n<Calendar disabled={{ dayOfWeek: [0, 6] }} />`,\n    },\n    {\n      id: 'marked-days',\n      title: 'Marked / selected / disabled days',\n      render: () => <CalendarMarkedDemo />,\n      code: `import * as React from 'react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Calendar } from '@open-mercato/ui/primitives/calendar'\n\nfunction CalendarMarkedDemo() {\n  const t = useT()\n  const [selected, setSelected] = React.useState<Date | undefined>(new Date(2026, 5, 12))\n  const marked = [new Date(2026, 5, 8), new Date(2026, 5, 12), new Date(2026, 5, 20)]\n  return <Calendar mode=\"single\" daySize={40} defaultMonth={new Date(2026, 5, 1)} today={new Date(2026, 5, 12)} selected={selected} onSelect={setSelected}\n    disabled={[new Date(2026, 5, 20)]} modifiers={{ marked }}\n    modifiersClassNames={{ marked: \"after:absolute after:bottom-1.5 after:left-1/2 after:size-0.75 after:-translate-x-1/2 after:rounded-full after:bg-current after:content-['']\" }}\n    labels={{ labelDayButton: (day, modifiers) => modifiers.marked\n      ? t('design_system.gallery.examples.controls.markedDate', { date: new Intl.DateTimeFormat(undefined, { dateStyle: 'full' }).format(day) })\n      : new Intl.DateTimeFormat(undefined, { dateStyle: 'full' }).format(day) }} />\n}\n\n<CalendarMarkedDemo />`,\n    },\n    {\n      id: 'range-boundaries',\n      title: 'Range boundaries',\n      render: () => <CalendarBoundaryDemo />,\n      code: `import * as React from 'react'\nimport { Calendar } from '@open-mercato/ui/primitives/calendar'\n\nfunction CalendarBoundaryDemo() {\n  const [range, setRange] = React.useState<{ from: Date | undefined; to?: Date }>({ from: new Date(2026, 5, 8), to: new Date(2026, 5, 19) })\n  return <Calendar mode=\"range\" daySize={40} defaultMonth={new Date(2026, 5, 1)} today={new Date(2026, 5, 12)}\n    startMonth={new Date(2026, 5, 1)} endMonth={new Date(2026, 5, 30)}\n    selected={range} onSelect={(value) => setRange(value ?? { from: undefined })}\n    disabled={[{ before: new Date(2026, 5, 5) }, { after: new Date(2026, 5, 25) }]} excludeDisabled />\n}\n\n<CalendarBoundaryDemo />`,\n    },\n    {\n      id: 'month-selectors',\n      title: 'Month selectors \u00B7 4 icon combinations',\n      render: () => <div className=\"flex flex-wrap gap-6\"><CalendarSelectorDemo previous={false} next={false} /><CalendarSelectorDemo previous next={false} /><CalendarSelectorDemo previous={false} next /><CalendarSelectorDemo previous next /></div>,\n      code: `import * as React from 'react'\nimport { Calendar, CalendarMonthSelector } from '@open-mercato/ui/primitives/calendar'\n\nfunction CalendarSelectorDemo({ previous, next }: { previous: boolean; next: boolean }) {\n  const [month, setMonth] = React.useState(new Date(2026, 5, 1))\n  const [selected, setSelected] = React.useState<Date | undefined>()\n  const move = (offset: number) => setMonth(current => new Date(current.getFullYear(), current.getMonth() + offset, 1))\n  return <div className=\"w-fit\">\n    <CalendarMonthSelector month={month} onPreviousMonth={previous ? () => move(-1) : undefined} onNextMonth={next ? () => move(1) : undefined} />\n    <Calendar mode=\"single\" daySize={40} month={month} onMonthChange={setMonth} selected={selected} onSelect={setSelected} today={new Date(2026, 5, 12)} components={{ MonthCaption: () => <></> }} />\n  </div>\n}\n\n<div className=\"flex w-full flex-wrap gap-6\">\n  <CalendarSelectorDemo previous={false} next={false} />\n  <CalendarSelectorDemo previous next={false} />\n  <CalendarSelectorDemo previous={false} next />\n  <CalendarSelectorDemo previous next />\n</div>`,\n    },\n  ],\n}\n\nfunction DemoDatePicker() {\n  const [value, setValue] = React.useState<Date | null>(sampleDay)\n  return <DatePicker value={value} onChange={setValue} />\n}\n\nfunction DemoDatePickerWithTime() {\n  const [value, setValue] = React.useState<Date | null>(new Date(2026, 5, 12, 9, 30))\n  return <DatePicker value={value} onChange={setValue} withTime minuteStep={15} />\n}\n\nfunction DemoDatePickerTodayClear() {\n  const [value, setValue] = React.useState<Date | null>(null)\n  return <DatePicker value={value} onChange={setValue} footer=\"today-clear\" />\n}\n\nconst datePickerEntry: GalleryEntry = {\n  id: 'date-picker',\n  figmaNodeId: '446:7413',\n  title: 'DatePicker',\n  importPath: '@open-mercato/ui/primitives/date-picker',\n  variants: [\n    {\n      id: 'default',\n      title: 'default (apply-cancel footer)',\n      render: () => <DemoDatePicker />,\n      code: `import { DatePicker } from '@open-mercato/ui/primitives/date-picker'\n\nconst [value, setValue] = React.useState<Date | null>(null)\n\n<DatePicker value={value} onChange={setValue} />`,\n    },\n    {\n      id: 'with-time',\n      title: 'withTime',\n      render: () => <DemoDatePickerWithTime />,\n      code: `import { DatePicker } from '@open-mercato/ui/primitives/date-picker'\n\nconst [value, setValue] = React.useState<Date | null>(null)\n\n<DatePicker value={value} onChange={setValue} withTime minuteStep={15} />`,\n    },\n    {\n      id: 'today-clear-footer',\n      title: \"footer='today-clear'\",\n      render: () => <DemoDatePickerTodayClear />,\n      code: `import { DatePicker } from '@open-mercato/ui/primitives/date-picker'\n\nconst [value, setValue] = React.useState<Date | null>(null)\n\n<DatePicker value={value} onChange={setValue} footer=\"today-clear\" />`,\n    },\n    {\n      id: 'states',\n      title: 'Small / disabled',\n      render: () => (\n        <>\n          <DatePicker value={sampleDay} onChange={() => {}} size=\"sm\" />\n          <DatePicker value={sampleDay} onChange={() => {}} disabled />\n        </>\n      ),\n      code: `import { DatePicker } from '@open-mercato/ui/primitives/date-picker'\n\n<DatePicker value={value} onChange={setValue} size=\"sm\" />\n<DatePicker value={value} onChange={setValue} disabled />`,\n    },\n    {\n      id: 'boundaries-readonly',\n      title: 'Date boundaries and readOnly',\n      render: () => <DatePickerBoundaryDemo />,\n      code: `import * as React from 'react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { DatePicker } from '@open-mercato/ui/primitives/date-picker'\n\nfunction DatePickerBoundaryDemo() {\n  const t = useT()\n  const [value, setValue] = React.useState<Date | null>(new Date(2026, 5, 12))\n  return <div className=\"flex w-full max-w-sm flex-col gap-3\">\n    <DatePicker value={value} onChange={setValue} minDate={new Date(2026, 5, 5)} maxDate={new Date(2026, 5, 25)} aria-label={t('design_system.gallery.examples.controls.date')} />\n    <DatePicker value={value} onChange={setValue} readOnly aria-label={t('design_system.gallery.examples.controls.readOnlyDate')} />\n    <output className=\"text-sm text-muted-foreground\">{value?.toLocaleDateString()}</output>\n  </div>\n}\n\n<DatePickerBoundaryDemo />`,\n    },\n  ],\n}\n\nfunction DemoDateRangePicker() {\n  const [value, setValue] = React.useState<DateRange | null>(sampleRange)\n  return <DateRangePicker value={value} onChange={setValue} />\n}\n\nfunction DemoDateRangePickerCompact() {\n  const [value, setValue] = React.useState<DateRange | null>(null)\n  return (\n    <DateRangePicker\n      value={value}\n      onChange={setValue}\n      showPresets={false}\n      numberOfMonths={1}\n      size=\"sm\"\n    />\n  )\n}\n\nconst dateRangePickerEntry: GalleryEntry = {\n  id: 'date-range-picker',\n  figmaNodeId: '446:7412',\n  title: 'DateRangePicker',\n  importPath: '@open-mercato/ui/primitives/date-range-picker',\n  variants: [\n    {\n      id: 'default',\n      title: 'default (presets + two months)',\n      render: () => <DemoDateRangePicker />,\n      code: `import { DateRangePicker } from '@open-mercato/ui/primitives/date-range-picker'\nimport type { DateRange } from '@open-mercato/ui/backend/date-range'\n\nconst [value, setValue] = React.useState<DateRange | null>(null)\n\n<DateRangePicker value={value} onChange={setValue} />`,\n    },\n    {\n      id: 'compact',\n      title: 'Compact (no presets, one month)',\n      render: () => <DemoDateRangePickerCompact />,\n      code: `import { DateRangePicker } from '@open-mercato/ui/primitives/date-range-picker'\n\n<DateRangePicker\n  value={value}\n  onChange={setValue}\n  showPresets={false}\n  numberOfMonths={1}\n  size=\"sm\"\n/>`,\n    },\n    {\n      id: 'disabled',\n      title: 'Disabled',\n      render: () => <DateRangePicker value={sampleRange} onChange={() => {}} disabled />,\n      code: `import { DateRangePicker } from '@open-mercato/ui/primitives/date-range-picker'\n\n<DateRangePicker value={value} onChange={setValue} disabled />`,\n    },\n    {\n      id: 'fixed-presets',\n      title: 'Eight reproducible presets and draft/apply',\n      render: () => <DateRangePresetDemo />,\n      code: `import * as React from 'react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { DateRangePicker } from '@open-mercato/ui/primitives/date-range-picker'\nimport { defaultDateRangePresets } from '@open-mercato/ui/primitives/date-picker-helpers'\nimport type { DateRange } from '@open-mercato/ui/backend/date-range'\n\nfunction DateRangePresetDemo() {\n  const t = useT()\n  const [value, setValue] = React.useState<DateRange | null>({ start: new Date(2026, 5, 8), end: new Date(2026, 5, 12) })\n  const presets = React.useMemo(() => defaultDateRangePresets().map(preset => ({ ...preset, range: () => preset.range(new Date(2026, 5, 12)) })), [])\n  return <div className=\"flex w-full max-w-sm flex-col gap-3\">\n    <DateRangePicker value={value} onChange={setValue} presets={presets} aria-label={t('design_system.gallery.examples.controls.period')} />\n    <output className=\"text-sm text-muted-foreground\">{value ? \\`\\${value.start.toLocaleDateString()} \u2013 \\${value.end.toLocaleDateString()}\\` : t('design_system.gallery.examples.controls.empty')}</output>\n  </div>\n}\n\n<DateRangePresetDemo />`,\n    },\n  ],\n}\n\nconst sampleSlots = ['09:00', '09:30', '10:00', '10:30', '11:00', '11:30']\n\nfunction DemoTimePickerTrigger() {\n  const t = useT()\n  return (\n    <TimePicker\n      defaultValue=\"10:00\"\n      slots={sampleSlots}\n      maxHeight={200}\n      trigger={<Button variant=\"outline\">{t('design_system.gallery.sampleCopy.pickATime')}</Button>}\n    />\n  )\n}\n\nconst timePickerEntry: GalleryEntry = {\n  id: 'time-picker',\n  figmaNodeId: '165483:5687',\n  title: 'TimePicker',\n  importPath: '@open-mercato/ui/primitives/time-picker',\n  variants: [\n    { id: 'source-statuses', title: '4 statuses / 4 states', render: () => <TimePickerStatusExamples />, code: timePickerStatusCode },\n    { id: 'source-durations', title: 'Duration / 4 states', render: () => <TimePickerDurationExamples />, code: timePickerDurationCode },\n    { id: 'source-slots', title: 'Selection indicator right / center / 4 states', render: () => <TimePickerSlotExamples />, code: timePickerSlotCode },\n    {\n      id: 'inline-card',\n      title: 'Inline card',\n      render: () => (\n        <TimePicker defaultValue=\"10:00\" slots={sampleSlots} maxHeight={160} className=\"max-w-full\" />\n      ),\n      code: `import { TimePicker } from '@open-mercato/ui/primitives/time-picker'\n\n<TimePicker\n  className=\"max-w-full\"\n  defaultValue=\"10:00\"\n  slots={['09:00', '09:30', '10:00', '10:30', '11:00', '11:30']}\n/>`,\n    },\n    {\n      id: 'durations-statuses',\n      title: 'Durations + statuses',\n      render: () => (\n        <TimePicker\n          defaultValue=\"09:30\"\n          slots={sampleSlots}\n          maxHeight={140}\n          durations={[{ value: 15 }, { value: 30 }, { value: 60 }, { value: 90 }]}\n          defaultActiveDuration={30}\n          statuses={[{ variant: 'available' }, { variant: 'busy' }, { variant: 'in-meeting' }]}\n          defaultActiveStatus=\"available\"\n        />\n      ),\n      code: `import { TimePicker } from '@open-mercato/ui/primitives/time-picker'\n\n<TimePicker\n  defaultValue=\"09:30\"\n  slots={['09:00', '09:30', '10:00', '10:30', '11:00', '11:30']}\n  durations={[{ value: 15 }, { value: 30 }, { value: 60 }, { value: 90 }]}\n  defaultActiveDuration={30}\n  statuses={[{ variant: 'available' }, { variant: 'busy' }, { variant: 'in-meeting' }]}\n  defaultActiveStatus=\"available\"\n/>`,\n    },\n    {\n      id: 'with-trigger',\n      title: 'With trigger (popover)',\n      render: () => <DemoTimePickerTrigger />,\n      code: `import { TimePicker } from '@open-mercato/ui/primitives/time-picker'\nimport { Button } from '@open-mercato/ui/primitives/button'\n\n<TimePicker\n  defaultValue=\"10:00\"\n  slots={['09:00', '09:30', '10:00', '10:30', '11:00', '11:30']}\n  trigger={<Button variant=\"outline\">Pick a time</Button>}\n/>`,\n    },\n    {\n      id: 'atoms',\n      title: 'Atoms (Slot / DurationChip / StatusChip)',\n      render: () => (\n        <div className=\"flex flex-col gap-3\">\n          <div className=\"flex w-56 flex-col gap-0.5\">\n            <TimePickerSlot value=\"09:30\" />\n            <TimePickerSlot value=\"10:00\" selected />\n            <TimePickerSlot value=\"10:30\" disabled />\n          </div>\n          <div className=\"flex items-center gap-2\">\n            <TimePickerDurationChip value={30} />\n            <TimePickerDurationChip value={90} selected />\n          </div>\n          <div className=\"flex items-center gap-2\">\n            <TimePickerStatusChip variant=\"available\" selected />\n            <TimePickerStatusChip variant=\"busy\" />\n            <TimePickerStatusChip variant=\"in-meeting\" icon={<Clock className=\"size-3\" aria-hidden=\"true\" />} />\n          </div>\n        </div>\n      ),\n      code: `import { Clock } from 'lucide-react'\nimport {\n  TimePickerSlot,\n  TimePickerDurationChip,\n  TimePickerStatusChip,\n} from '@open-mercato/ui/primitives/time-picker'\n\n<TimePickerSlot value=\"10:00\" selected />\n<TimePickerDurationChip value={90} selected />\n<TimePickerStatusChip variant=\"busy\" />\n<TimePickerStatusChip variant=\"in-meeting\" icon={<Clock className=\"size-3\" />} />`,\n    },\n  ],\n}\n\nexport const entries: GalleryEntry[] = [\n  calendarEntry,\n  datePickerEntry,\n  dateRangePickerEntry,\n  timePickerEntry,\n]\n"],
+  "mappings": "AAiCI,SAiDuL,UAjDvL,KA+CK,YA/CL;AAjCJ,YAAY,WAAW;AACvB,SAAS,4BAA4B,wBAAwB,gCAAgC;AAC7F,SAAS,wBAAwB,oBAAoB,4BAA4B;AACjF,SAAS,YAAY;AACrB,SAAS,aAAa;AACtB,SAAS,UAAU,6BAA6B;AAChD,SAAS,kBAAkB;AAC3B,SAAS,+BAA+B;AACxC,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc;AAWvB,MAAM,YAAY,IAAI,KAAK,MAAM,GAAG,EAAE;AACtC,MAAM,cAAc,IAAI,KAAK,MAAM,GAAG,CAAC;AACvC,MAAM,cAAyB,EAAE,OAAO,IAAI,KAAK,MAAM,GAAG,CAAC,GAAG,KAAK,IAAI,KAAK,MAAM,GAAG,EAAE,EAAE;AAEzF,SAAS,qBAAqB;AAC5B,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAA2B,SAAS;AAC1E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA,UAAU,CAAC,QAAQ,YAAY,GAAG;AAAA,MAClC,cAAc;AAAA;AAAA,EAChB;AAEJ;AAEA,SAAS,oBAAoB;AAC3B,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAEpC,EAAE,MAAM,YAAY,OAAO,IAAI,YAAY,IAAI,CAAC;AAClD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA,UAAU,CAAC,UAAU,YAAY,KAAK;AAAA,MACtC,cAAc;AAAA;AAAA,EAChB;AAEJ;AAEA,SAAS,qBAAqB;AAC5B,QAAM,IAAI,KAAK;AACf,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAA2B,IAAI,KAAK,MAAM,GAAG,EAAE,CAAC;AACtF,QAAM,SAAS,CAAC,IAAI,KAAK,MAAM,GAAG,CAAC,GAAG,IAAI,KAAK,MAAM,GAAG,EAAE,GAAG,IAAI,KAAK,MAAM,GAAG,EAAE,CAAC;AAClF,SAAO;AAAA,IAAC;AAAA;AAAA,MAAS,MAAK;AAAA,MAAS,SAAS;AAAA,MAAI,cAAc,IAAI,KAAK,MAAM,GAAG,CAAC;AAAA,MAAG,OAAO,IAAI,KAAK,MAAM,GAAG,EAAE;AAAA,MAAG;AAAA,MAAoB,UAAU;AAAA,MAC1I,UAAU,CAAC,IAAI,KAAK,MAAM,GAAG,EAAE,CAAC;AAAA,MAAG,WAAW,EAAE,OAAO;AAAA,MACvD,qBAAqB,EAAE,QAAQ,+IAA+I;AAAA,MAC9K,QAAQ,EAAE,gBAAgB,CAAC,KAAK,cAAc,UAAU,SACpD,EAAE,sDAAsD,EAAE,MAAM,IAAI,KAAK,eAAe,QAAW,EAAE,WAAW,OAAO,CAAC,EAAE,OAAO,GAAG,EAAE,CAAC,IACvI,IAAI,KAAK,eAAe,QAAW,EAAE,WAAW,OAAO,CAAC,EAAE,OAAO,GAAG,EAAE;AAAA;AAAA,EAAG;AACjF;AAEA,SAAS,uBAAuB;AAC9B,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAgD,EAAE,MAAM,IAAI,KAAK,MAAM,GAAG,CAAC,GAAG,IAAI,IAAI,KAAK,MAAM,GAAG,EAAE,EAAE,CAAC;AACzI,SAAO;AAAA,IAAC;AAAA;AAAA,MAAS,MAAK;AAAA,MAAQ,SAAS;AAAA,MAAI,cAAc,IAAI,KAAK,MAAM,GAAG,CAAC;AAAA,MAAG,OAAO,IAAI,KAAK,MAAM,GAAG,EAAE;AAAA,MACxG,YAAY,IAAI,KAAK,MAAM,GAAG,CAAC;AAAA,MAAG,UAAU,IAAI,KAAK,MAAM,GAAG,EAAE;AAAA,MAChE,UAAU;AAAA,MAAO,UAAU,CAAC,UAAU,SAAS,SAAS,EAAE,MAAM,OAAU,CAAC;AAAA,MAC3E,UAAU,CAAC,EAAE,QAAQ,IAAI,KAAK,MAAM,GAAG,CAAC,EAAE,GAAG,EAAE,OAAO,IAAI,KAAK,MAAM,GAAG,EAAE,EAAE,CAAC;AAAA,MAAG,iBAAe;AAAA;AAAA,EAAC;AACpG;AAEA,SAAS,qBAAqB,EAAE,UAAU,KAAK,GAAyC;AACtF,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,IAAI,KAAK,MAAM,GAAG,CAAC,CAAC;AAC7D,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAA2B;AACjE,QAAM,OAAO,CAAC,WAAmB,SAAS,aAAW,IAAI,KAAK,QAAQ,YAAY,GAAG,QAAQ,SAAS,IAAI,QAAQ,CAAC,CAAC;AACpH,SAAO,qBAAC,SAAI,WAAU,SACpB;AAAA,wBAAC,yBAAsB,OAAc,iBAAiB,WAAW,MAAM,KAAK,EAAE,IAAI,QAAW,aAAa,OAAO,MAAM,KAAK,CAAC,IAAI,QAAW;AAAA,IAC5I,oBAAC,YAAS,MAAK,UAAS,SAAS,IAAI,OAAc,eAAe,UAAU,UAAoB,UAAU,aAAa,OAAO,IAAI,KAAK,MAAM,GAAG,EAAE,GAAG,YAAY,EAAE,cAAc,MAAM,gCAAE,EAAI,GAAG;AAAA,KAClM;AACF;AAEA,SAAS,yBAAyB;AAChC,QAAM,IAAI,KAAK;AACf,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAsB,IAAI,KAAK,MAAM,GAAG,EAAE,CAAC;AAC3E,SAAO,qBAAC,SAAI,WAAU,uCACpB;AAAA,wBAAC,cAAW,OAAc,UAAU,UAAU,SAAS,IAAI,KAAK,MAAM,GAAG,CAAC,GAAG,SAAS,IAAI,KAAK,MAAM,GAAG,EAAE,GAAG,cAAY,EAAE,8CAA8C,GAAG;AAAA,IAC5K,oBAAC,cAAW,OAAc,UAAU,UAAU,UAAQ,MAAC,cAAY,EAAE,sDAAsD,GAAG;AAAA,IAC9H,oBAAC,YAAO,WAAU,iCAAiC,iBAAO,mBAAmB,GAAE;AAAA,KACjF;AACF;AAEA,SAAS,sBAAsB;AAC7B,QAAM,IAAI,KAAK;AACf,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAA2B,EAAE,OAAO,IAAI,KAAK,MAAM,GAAG,CAAC,GAAG,KAAK,IAAI,KAAK,MAAM,GAAG,EAAE,EAAE,CAAC;AACtH,QAAM,UAAU,MAAM,QAAQ,MAAM,wBAAwB,EAAE,IAAI,aAAW,EAAE,GAAG,QAAQ,OAAO,MAAM,OAAO,MAAM,IAAI,KAAK,MAAM,GAAG,EAAE,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC;AAClJ,SAAO,qBAAC,SAAI,WAAU,uCACpB;AAAA,wBAAC,mBAAgB,OAAc,UAAU,UAAU,SAAkB,cAAY,EAAE,gDAAgD,GAAG;AAAA,IACtI,oBAAC,YAAO,WAAU,iCAAiC,kBAAQ,GAAG,MAAM,MAAM,mBAAmB,CAAC,WAAM,MAAM,IAAI,mBAAmB,CAAC,KAAK,EAAE,+CAA+C,GAAE;AAAA,KAC5L;AACF;AAEA,MAAM,gBAA8B;AAAA,EAClC,IAAI;AAAA,EACJ,aAAa;AAAA,EACb,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,UAAU;AAAA,IACR;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ,MAAM,oBAAC,sBAAmB;AAAA,MAClC,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,IAKR;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ,MAAM,oBAAC,qBAAkB;AAAA,MACjC,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,IAKR;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ,MAAM,oBAAC,YAAS,cAAc,aAAa,UAAU,EAAE,WAAW,CAAC,GAAG,CAAC,EAAE,GAAG;AAAA,MACpF,MAAM;AAAA;AAAA;AAAA,IAGR;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ,MAAM,oBAAC,sBAAmB;AAAA,MAClC,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAiBR;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ,MAAM,oBAAC,wBAAqB;AAAA,MACpC,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAYR;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ,MAAM,qBAAC,SAAI,WAAU,wBAAuB;AAAA,4BAAC,wBAAqB,UAAU,OAAO,MAAM,OAAO;AAAA,QAAE,oBAAC,wBAAqB,UAAQ,MAAC,MAAM,OAAO;AAAA,QAAE,oBAAC,wBAAqB,UAAU,OAAO,MAAI,MAAC;AAAA,QAAE,oBAAC,wBAAqB,UAAQ,MAAC,MAAI,MAAC;AAAA,SAAE;AAAA,MAC5O,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAmBR;AAAA,EACF;AACF;AAEA,SAAS,iBAAiB;AACxB,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAsB,SAAS;AAC/D,SAAO,oBAAC,cAAW,OAAc,UAAU,UAAU;AACvD;AAEA,SAAS,yBAAyB;AAChC,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAsB,IAAI,KAAK,MAAM,GAAG,IAAI,GAAG,EAAE,CAAC;AAClF,SAAO,oBAAC,cAAW,OAAc,UAAU,UAAU,UAAQ,MAAC,YAAY,IAAI;AAChF;AAEA,SAAS,2BAA2B;AAClC,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAsB,IAAI;AAC1D,SAAO,oBAAC,cAAW,OAAc,UAAU,UAAU,QAAO,eAAc;AAC5E;AAEA,MAAM,kBAAgC;AAAA,EACpC,IAAI;AAAA,EACJ,aAAa;AAAA,EACb,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,UAAU;AAAA,IACR;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ,MAAM,oBAAC,kBAAe;AAAA,MAC9B,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,IAKR;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ,MAAM,oBAAC,0BAAuB;AAAA,MACtC,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,IAKR;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ,MAAM,oBAAC,4BAAyB;AAAA,MACxC,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,IAKR;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ,MACN,iCACE;AAAA,4BAAC,cAAW,OAAO,WAAW,UAAU,MAAM;AAAA,QAAC,GAAG,MAAK,MAAK;AAAA,QAC5D,oBAAC,cAAW,OAAO,WAAW,UAAU,MAAM;AAAA,QAAC,GAAG,UAAQ,MAAC;AAAA,SAC7D;AAAA,MAEF,MAAM;AAAA;AAAA;AAAA;AAAA,IAIR;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ,MAAM,oBAAC,0BAAuB;AAAA,MACtC,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAeR;AAAA,EACF;AACF;AAEA,SAAS,sBAAsB;AAC7B,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAA2B,WAAW;AACtE,SAAO,oBAAC,mBAAgB,OAAc,UAAU,UAAU;AAC5D;AAEA,SAAS,6BAA6B;AACpC,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAA2B,IAAI;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,aAAa;AAAA,MACb,gBAAgB;AAAA,MAChB,MAAK;AAAA;AAAA,EACP;AAEJ;AAEA,MAAM,uBAAqC;AAAA,EACzC,IAAI;AAAA,EACJ,aAAa;AAAA,EACb,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,UAAU;AAAA,IACR;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ,MAAM,oBAAC,uBAAoB;AAAA,MACnC,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMR;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ,MAAM,oBAAC,8BAA2B;AAAA,MAC1C,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASR;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ,MAAM,oBAAC,mBAAgB,OAAO,aAAa,UAAU,MAAM;AAAA,MAAC,GAAG,UAAQ,MAAC;AAAA,MAChF,MAAM;AAAA;AAAA;AAAA,IAGR;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ,MAAM,oBAAC,uBAAoB;AAAA,MACnC,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAiBR;AAAA,EACF;AACF;AAEA,MAAM,cAAc,CAAC,SAAS,SAAS,SAAS,SAAS,SAAS,OAAO;AAEzE,SAAS,wBAAwB;AAC/B,QAAM,IAAI,KAAK;AACf,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAa;AAAA,MACb,OAAO;AAAA,MACP,WAAW;AAAA,MACX,SAAS,oBAAC,UAAO,SAAQ,WAAW,YAAE,4CAA4C,GAAE;AAAA;AAAA,EACtF;AAEJ;AAEA,MAAM,kBAAgC;AAAA,EACpC,IAAI;AAAA,EACJ,aAAa;AAAA,EACb,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,UAAU;AAAA,IACR,EAAE,IAAI,mBAAmB,OAAO,yBAAyB,QAAQ,MAAM,oBAAC,4BAAyB,GAAI,MAAM,qBAAqB;AAAA,IAChI,EAAE,IAAI,oBAAoB,OAAO,uBAAuB,QAAQ,MAAM,oBAAC,8BAA2B,GAAI,MAAM,uBAAuB;AAAA,IACnI,EAAE,IAAI,gBAAgB,OAAO,iDAAiD,QAAQ,MAAM,oBAAC,0BAAuB,GAAI,MAAM,mBAAmB;AAAA,IACjJ;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ,MACN,oBAAC,cAAW,cAAa,SAAQ,OAAO,aAAa,WAAW,KAAK,WAAU,cAAa;AAAA,MAE9F,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOR;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ,MACN;AAAA,QAAC;AAAA;AAAA,UACC,cAAa;AAAA,UACb,OAAO;AAAA,UACP,WAAW;AAAA,UACX,WAAW,CAAC,EAAE,OAAO,GAAG,GAAG,EAAE,OAAO,GAAG,GAAG,EAAE,OAAO,GAAG,GAAG,EAAE,OAAO,GAAG,CAAC;AAAA,UACtE,uBAAuB;AAAA,UACvB,UAAU,CAAC,EAAE,SAAS,YAAY,GAAG,EAAE,SAAS,OAAO,GAAG,EAAE,SAAS,aAAa,CAAC;AAAA,UACnF,qBAAoB;AAAA;AAAA,MACtB;AAAA,MAEF,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUR;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ,MAAM,oBAAC,yBAAsB;AAAA,MACrC,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQR;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ,MACN,qBAAC,SAAI,WAAU,uBACb;AAAA,6BAAC,SAAI,WAAU,8BACb;AAAA,8BAAC,kBAAe,OAAM,SAAQ;AAAA,UAC9B,oBAAC,kBAAe,OAAM,SAAQ,UAAQ,MAAC;AAAA,UACvC,oBAAC,kBAAe,OAAM,SAAQ,UAAQ,MAAC;AAAA,WACzC;AAAA,QACA,qBAAC,SAAI,WAAU,2BACb;AAAA,8BAAC,0BAAuB,OAAO,IAAI;AAAA,UACnC,oBAAC,0BAAuB,OAAO,IAAI,UAAQ,MAAC;AAAA,WAC9C;AAAA,QACA,qBAAC,SAAI,WAAU,2BACb;AAAA,8BAAC,wBAAqB,SAAQ,aAAY,UAAQ,MAAC;AAAA,UACnD,oBAAC,wBAAqB,SAAQ,QAAO;AAAA,UACrC,oBAAC,wBAAqB,SAAQ,cAAa,MAAM,oBAAC,SAAM,WAAU,UAAS,eAAY,QAAO,GAAI;AAAA,WACpG;AAAA,SACF;AAAA,MAEF,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWR;AAAA,EACF;AACF;AAEO,MAAM,UAA0B;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;",
   "names": []
 }