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

package/src/modules/design_system/gallery/demos/source-filters-code.generated.ts

@@ -0,0 +1,3 @@
+// Generated by yarn storybook:generate from source-filters.tsx.
+const source = "import * as React from 'react'\nimport { CalendarDays, Check, Filter, Settings2 } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { ButtonGroup } from '@open-mercato/ui/primitives/button-group'\nimport { Calendar } from '@open-mercato/ui/primitives/calendar'\nimport { CheckboxField } from '@open-mercato/ui/primitives/checkbox-field'\nimport { FilterToolbar, FilterPanelItem, FilterPanelHeader, FilterPanelFooter } from '@open-mercato/ui/primitives/filter-toolbar'\nimport { IconButton } from '@open-mercato/ui/primitives/icon-button'\nimport { Popover, PopoverContent, PopoverTrigger } from '@open-mercato/ui/primitives/popover'\nimport { SearchInput } from '@open-mercato/ui/primitives/search-input'\nimport { SegmentedControl, SegmentedControlItem } from '@open-mercato/ui/primitives/segmented-control'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@open-mercato/ui/primitives/select'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@open-mercato/ui/primitives/table'\n\ntype Filters = { date?: Date; statuses: string[] }\nconst transactionRows = [\n  { name: 'Apex', type: 'income', date: new Date(2023, 7, 11), amount: 1240, status: 'completed' },\n  { name: 'Spotify', type: 'expense', date: new Date(2023, 7, 10), amount: -12, status: 'completed' },\n  { name: 'Synergy', type: 'income', date: new Date(2023, 7, 9), amount: 680, status: 'pending' },\n  { name: 'Loom', type: 'expense', date: new Date(2023, 7, 11), amount: -18, status: 'pending' },\n]\nconst emptyFilters = (): Filters => ({ statuses: [] })\n\nfunction useFilterCopy() {\n  const t = useT()\n  return (key: string, values?: Record<string, string | number>) => t(`design_system.gallery.examples.sourceFilters.${key}`, values)\n}\n\nexport function SourceFilterPanel({ value, onApply }: { value?: Filters; onApply?: (value: Filters) => void }) {\n  const copy = useFilterCopy()\n  const [draft, setDraft] = React.useState<Filters>(() => value ?? emptyFilters())\n  const [section, setSection] = React.useState('date')\n  const [applied, setApplied] = React.useState(false)\n  const panelId = React.useId()\n  function clear() { setDraft(emptyFilters()); setApplied(false) }\n  return <div className=\"w-full min-w-0 bg-background\" data-example=\"filter-panel\">\n    <div className=\"flex flex-col sm:flex-row\">\n      <div className=\"flex shrink-0 flex-wrap gap-1 border-b border-border p-3 sm:w-[224px] sm:flex-col sm:border-b-0 sm:border-r\" role=\"group\" aria-label={copy('categories')}>\n        <FilterPanelItem active={section === 'date'} leading={<CalendarDays />} aria-controls={panelId} onClick={() => setSection('date')}>{copy('date')}</FilterPanelItem>\n        <FilterPanelItem active={section === 'status'} leading={<Check />} aria-controls={panelId} onClick={() => setSection('status')}>{copy('status')}</FilterPanelItem>\n      </div>\n      <section id={panelId} aria-label={copy(section)} className=\"min-w-0 flex-1\">\n        <FilterPanelHeader title={copy(section)} leading={section === 'date' ? <CalendarDays /> : <Check />} action={<Button variant=\"link\" className=\"h-auto p-0 text-sm leading-5 text-muted-foreground\" onClick={clear}>{copy('clear')}</Button>} />\n        <div className=\"flex min-h-80 justify-center px-5 pb-5\">\n          {section === 'date'\n            ? <Calendar mode=\"single\" defaultMonth={draft.date ?? new Date(2023, 7, 1)} selected={draft.date} onSelect={date => { setDraft(previous => ({ ...previous, date })); setApplied(false) }} />\n            : <div className=\"w-full space-y-4 pt-2\">{['completed', 'pending'].map(status => <CheckboxField key={status} label={copy(status)} checked={draft.statuses.includes(status)} onCheckedChange={checked => { setDraft(previous => ({ ...previous, statuses: checked ? [...previous.statuses, status] : previous.statuses.filter(item => item !== status) })); setApplied(false) }} />)}</div>}\n        </div>\n      </section>\n    </div>\n    <FilterPanelFooter><Button variant=\"outline\" onClick={clear}>{copy('clear')}</Button><Button variant=\"primary-filled\" onClick={() => { onApply?.(draft); setApplied(true) }}>{copy('apply')}</Button></FilterPanelFooter>\n    {applied ? <p role=\"status\" className=\"px-5 pb-4 text-sm text-muted-foreground\">{copy('applied')}</p> : null}\n  </div>\n}\n\nexport function SourceFilterParts() {\n  const copy = useFilterCopy()\n  const [active, setActive] = React.useState(2)\n  const [notice, setNotice] = React.useState('')\n  return <div className=\"grid w-full gap-6\">\n    <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-3\">\n      {['Default', 'Hover', 'Active'].map((state, index) => <div key={state} className=\"w-[200px] max-w-full space-y-2\">\n        <p className=\"text-xs text-muted-foreground\">{state}</p>\n        <FilterPanelItem active={active === index} leading={<CalendarDays />} onClick={() => setActive(index)}>{copy('date')}</FilterPanelItem>\n      </div>)}\n    </div>\n    <div className=\"w-[400px] max-w-full rounded-md border border-border\"><FilterPanelHeader title={copy('date')} leading={<CalendarDays />} action={<Button variant=\"link\" className=\"h-auto p-0 text-sm leading-5 text-muted-foreground\" onClick={() => { setActive(-1); setNotice(copy('cleared')) }}>{copy('clear')}</Button>} /></div>\n    <div className=\"w-[472px] max-w-full\"><FilterPanelFooter><Button variant=\"outline\" onClick={() => { setActive(-1); setNotice(copy('cleared')) }}>{copy('clear')}</Button><Button variant=\"primary-filled\" onClick={() => setNotice(copy('applied'))}>{copy('apply')}</Button></FilterPanelFooter></div>\n    <p role=\"status\" className=\"min-h-5 text-sm text-muted-foreground\">{notice}</p>\n  </div>\n}\n\nexport function SourceFilterToolbar({ type }: { type: 'table' | 'calendar' }) {\n  const copy = useFilterCopy()\n  const [query, setQuery] = React.useState('')\n  const [category, setCategory] = React.useState('all')\n  const [sort, setSort] = React.useState('recent')\n  const [period, setPeriod] = React.useState('7')\n  const [endDate, setEndDate] = React.useState(new Date(2023, 7, 11))\n  const [filters, setFilters] = React.useState<Filters>(emptyFilters)\n  const [filterOpen, setFilterOpen] = React.useState(false)\n  const [showAmount, setShowAmount] = React.useState(true)\n  const [dateOpen, setDateOpen] = React.useState(false)\n  const periodStart = new Date(endDate)\n  periodStart.setDate(endDate.getDate() - Number(period))\n  const rows = transactionRows.filter(row => {\n    if (category !== 'all' && row.type !== category) return false\n    if (query && !row.name.toLowerCase().includes(query.trim().toLowerCase())) return false\n    if (filters.statuses.length && !filters.statuses.includes(row.status)) return false\n    if (filters.date && row.date.toDateString() !== filters.date.toDateString()) return false\n    return type !== 'calendar' || (row.date >= periodStart && row.date <= endDate)\n  }).sort((a, b) => sort === 'amount' ? b.amount - a.amount : b.date.getTime() - a.date.getTime())\n  const dateText = `${periodStart.toLocaleDateString()} – ${endDate.toLocaleDateString()}`\n  return <div className=\"w-full min-w-0 space-y-4\" data-example={`filter-toolbar-${type}`}>\n    <FilterToolbar className=\"max-w-[1104px]\" leading={type === 'table'\n      ? <SegmentedControl value={category} onValueChange={setCategory} aria-label={copy('transactionType')} className=\"h-9 w-80 max-w-full rounded-md border-0 p-1\">\n        {['all', 'income', 'expense'].map(item => <SegmentedControlItem key={item} value={item} className=\"flex-1 rounded-sm\">{copy(item)}</SegmentedControlItem>)}\n      </SegmentedControl>\n      : <><Button variant=\"outline\" onClick={() => { setEndDate(new Date()); setPeriod('0') }}>{copy('today')}</Button>\n        <ButtonGroup size={36} aria-label={copy('dateRange')} className=\"max-w-full flex-wrap\">\n          <Select value={period} onValueChange={setPeriod}><SelectTrigger className=\"w-auto\" aria-label={copy('period')}><SelectValue /></SelectTrigger><SelectContent>{['0', '7', '30'].map(item => <SelectItem key={item} value={item}>{copy(`period${item}`)}</SelectItem>)}</SelectContent></Select>\n          <Popover open={dateOpen} onOpenChange={setDateOpen}><PopoverTrigger asChild><Button variant=\"outline\" aria-label={copy('dateRange')}><CalendarDays className=\"size-5\" aria-hidden=\"true\" /><span className=\"truncate\">{dateText}</span></Button></PopoverTrigger><PopoverContent className=\"w-auto p-3\" align=\"start\"><Calendar mode=\"single\" selected={endDate} defaultMonth={endDate} onSelect={date => { if (date) { setEndDate(date); setDateOpen(false) } }} /></PopoverContent></Popover>\n        </ButtonGroup></>}>\n      <SearchInput value={query} onChange={setQuery} aria-label={copy('search')} placeholder={copy('search')} className=\"w-[300px] max-w-full [&>svg]:size-5\" />\n      <Popover open={filterOpen} onOpenChange={setFilterOpen}><PopoverTrigger asChild><Button variant=\"outline\"><Filter className=\"size-5\" aria-hidden=\"true\" />{copy('filter')}</Button></PopoverTrigger>\n        <PopoverContent className=\"w-[640px] max-w-[calc(100vw-24px)] overflow-hidden p-0\" align=\"end\"><SourceFilterPanel value={filters} onApply={value => { setFilters(value); setFilterOpen(false) }} /></PopoverContent>\n      </Popover>\n      <Popover><PopoverTrigger asChild><IconButton variant=\"outline\" aria-label={copy('settings')}><Settings2 className=\"size-5\" /></IconButton></PopoverTrigger><PopoverContent className=\"w-60\"><CheckboxField checked={showAmount} onCheckedChange={checked => setShowAmount(checked === true)} label={copy('showAmount')} /></PopoverContent></Popover>\n      {type === 'table' ? <Select value={sort} onValueChange={setSort}><SelectTrigger className=\"w-40\" aria-label={copy('sort')}><SelectValue /></SelectTrigger><SelectContent><SelectItem value=\"recent\">{copy('recent')}</SelectItem><SelectItem value=\"amount\">{copy('amount')}</SelectItem></SelectContent></Select> : null}\n    </FilterToolbar>\n    <p role=\"status\" className=\"text-sm text-muted-foreground\">{copy('results', { count: rows.length })}</p>\n    <div className=\"overflow-x-auto rounded-md border border-border\"><Table className=\"min-w-[440px]\">\n      <TableHeader><TableRow><TableHead>{copy('name')}</TableHead><TableHead>{copy('status')}</TableHead>{showAmount ? <TableHead className=\"text-right\">{copy('amount')}</TableHead> : null}</TableRow></TableHeader>\n      <TableBody>{rows.map(row => <TableRow key={row.name}><TableCell className=\"font-medium\">{row.name}</TableCell><TableCell>{copy(row.status)}</TableCell>{showAmount ? <TableCell className=\"text-right tabular-nums\">{row.amount.toLocaleString(undefined, { style: 'currency', currency: 'USD' })}</TableCell> : null}</TableRow>)}</TableBody>\n    </Table></div>\n    <Button size=\"sm\" variant=\"ghost\" onClick={() => { setQuery(''); setCategory('all'); setFilters(emptyFilters()); setPeriod('7'); setEndDate(new Date(2023, 7, 11)); setSort('recent'); setShowAmount(true) }}>{copy('reset')}</Button>\n  </div>\n}\n"
+export const sourceFilterExampleCode = (expression: string) => source + "\n" + expression + "\n"

package/src/modules/design_system/gallery/demos/source-filters.tsx

@@ -0,0 +1,119 @@
+import * as React from 'react'
+import { CalendarDays, Check, Filter, Settings2 } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { ButtonGroup } from '@open-mercato/ui/primitives/button-group'
+import { Calendar } from '@open-mercato/ui/primitives/calendar'
+import { CheckboxField } from '@open-mercato/ui/primitives/checkbox-field'
+import { FilterToolbar, FilterPanelItem, FilterPanelHeader, FilterPanelFooter } from '@open-mercato/ui/primitives/filter-toolbar'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import { Popover, PopoverContent, PopoverTrigger } from '@open-mercato/ui/primitives/popover'
+import { SearchInput } from '@open-mercato/ui/primitives/search-input'
+import { SegmentedControl, SegmentedControlItem } from '@open-mercato/ui/primitives/segmented-control'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@open-mercato/ui/primitives/select'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@open-mercato/ui/primitives/table'
+
+type Filters = { date?: Date; statuses: string[] }
+const transactionRows = [
+  { name: 'Apex', type: 'income', date: new Date(2023, 7, 11), amount: 1240, status: 'completed' },
+  { name: 'Spotify', type: 'expense', date: new Date(2023, 7, 10), amount: -12, status: 'completed' },
+  { name: 'Synergy', type: 'income', date: new Date(2023, 7, 9), amount: 680, status: 'pending' },
+  { name: 'Loom', type: 'expense', date: new Date(2023, 7, 11), amount: -18, status: 'pending' },
+]
+const emptyFilters = (): Filters => ({ statuses: [] })
+
+function useFilterCopy() {
+  const t = useT()
+  return (key: string, values?: Record<string, string | number>) => t(`design_system.gallery.examples.sourceFilters.${key}`, values)
+}
+
+export function SourceFilterPanel({ value, onApply }: { value?: Filters; onApply?: (value: Filters) => void }) {
+  const copy = useFilterCopy()
+  const [draft, setDraft] = React.useState<Filters>(() => value ?? emptyFilters())
+  const [section, setSection] = React.useState('date')
+  const [applied, setApplied] = React.useState(false)
+  const panelId = React.useId()
+  function clear() { setDraft(emptyFilters()); setApplied(false) }
+  return <div className="w-full min-w-0 bg-background" data-example="filter-panel">
+    <div className="flex flex-col sm:flex-row">
+      <div className="flex shrink-0 flex-wrap gap-1 border-b border-border p-3 sm:w-[224px] sm:flex-col sm:border-b-0 sm:border-r" role="group" aria-label={copy('categories')}>
+        <FilterPanelItem active={section === 'date'} leading={<CalendarDays />} aria-controls={panelId} onClick={() => setSection('date')}>{copy('date')}</FilterPanelItem>
+        <FilterPanelItem active={section === 'status'} leading={<Check />} aria-controls={panelId} onClick={() => setSection('status')}>{copy('status')}</FilterPanelItem>
+      </div>
+      <section id={panelId} aria-label={copy(section)} className="min-w-0 flex-1">
+        <FilterPanelHeader title={copy(section)} leading={section === 'date' ? <CalendarDays /> : <Check />} action={<Button variant="link" className="h-auto p-0 text-sm leading-5 text-muted-foreground" onClick={clear}>{copy('clear')}</Button>} />
+        <div className="flex min-h-80 justify-center px-5 pb-5">
+          {section === 'date'
+            ? <Calendar mode="single" defaultMonth={draft.date ?? new Date(2023, 7, 1)} selected={draft.date} onSelect={date => { setDraft(previous => ({ ...previous, date })); setApplied(false) }} />
+            : <div className="w-full space-y-4 pt-2">{['completed', 'pending'].map(status => <CheckboxField key={status} label={copy(status)} checked={draft.statuses.includes(status)} onCheckedChange={checked => { setDraft(previous => ({ ...previous, statuses: checked ? [...previous.statuses, status] : previous.statuses.filter(item => item !== status) })); setApplied(false) }} />)}</div>}
+        </div>
+      </section>
+    </div>
+    <FilterPanelFooter><Button variant="outline" onClick={clear}>{copy('clear')}</Button><Button variant="primary-filled" onClick={() => { onApply?.(draft); setApplied(true) }}>{copy('apply')}</Button></FilterPanelFooter>
+    {applied ? <p role="status" className="px-5 pb-4 text-sm text-muted-foreground">{copy('applied')}</p> : null}
+  </div>
+}
+
+export function SourceFilterParts() {
+  const copy = useFilterCopy()
+  const [active, setActive] = React.useState(2)
+  const [notice, setNotice] = React.useState('')
+  return <div className="grid w-full gap-6">
+    <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+      {['Default', 'Hover', 'Active'].map((state, index) => <div key={state} className="w-[200px] max-w-full space-y-2">
+        <p className="text-xs text-muted-foreground">{state}</p>
+        <FilterPanelItem active={active === index} leading={<CalendarDays />} onClick={() => setActive(index)}>{copy('date')}</FilterPanelItem>
+      </div>)}
+    </div>
+    <div className="w-[400px] max-w-full rounded-md border border-border"><FilterPanelHeader title={copy('date')} leading={<CalendarDays />} action={<Button variant="link" className="h-auto p-0 text-sm leading-5 text-muted-foreground" onClick={() => { setActive(-1); setNotice(copy('cleared')) }}>{copy('clear')}</Button>} /></div>
+    <div className="w-[472px] max-w-full"><FilterPanelFooter><Button variant="outline" onClick={() => { setActive(-1); setNotice(copy('cleared')) }}>{copy('clear')}</Button><Button variant="primary-filled" onClick={() => setNotice(copy('applied'))}>{copy('apply')}</Button></FilterPanelFooter></div>
+    <p role="status" className="min-h-5 text-sm text-muted-foreground">{notice}</p>
+  </div>
+}
+
+export function SourceFilterToolbar({ type }: { type: 'table' | 'calendar' }) {
+  const copy = useFilterCopy()
+  const [query, setQuery] = React.useState('')
+  const [category, setCategory] = React.useState('all')
+  const [sort, setSort] = React.useState('recent')
+  const [period, setPeriod] = React.useState('7')
+  const [endDate, setEndDate] = React.useState(new Date(2023, 7, 11))
+  const [filters, setFilters] = React.useState<Filters>(emptyFilters)
+  const [filterOpen, setFilterOpen] = React.useState(false)
+  const [showAmount, setShowAmount] = React.useState(true)
+  const [dateOpen, setDateOpen] = React.useState(false)
+  const periodStart = new Date(endDate)
+  periodStart.setDate(endDate.getDate() - Number(period))
+  const rows = transactionRows.filter(row => {
+    if (category !== 'all' && row.type !== category) return false
+    if (query && !row.name.toLowerCase().includes(query.trim().toLowerCase())) return false
+    if (filters.statuses.length && !filters.statuses.includes(row.status)) return false
+    if (filters.date && row.date.toDateString() !== filters.date.toDateString()) return false
+    return type !== 'calendar' || (row.date >= periodStart && row.date <= endDate)
+  }).sort((a, b) => sort === 'amount' ? b.amount - a.amount : b.date.getTime() - a.date.getTime())
+  const dateText = `${periodStart.toLocaleDateString()} – ${endDate.toLocaleDateString()}`
+  return <div className="w-full min-w-0 space-y-4" data-example={`filter-toolbar-${type}`}>
+    <FilterToolbar className="max-w-[1104px]" leading={type === 'table'
+      ? <SegmentedControl value={category} onValueChange={setCategory} aria-label={copy('transactionType')} className="h-9 w-80 max-w-full rounded-md border-0 p-1">
+        {['all', 'income', 'expense'].map(item => <SegmentedControlItem key={item} value={item} className="flex-1 rounded-sm">{copy(item)}</SegmentedControlItem>)}
+      </SegmentedControl>
+      : <><Button variant="outline" onClick={() => { setEndDate(new Date()); setPeriod('0') }}>{copy('today')}</Button>
+        <ButtonGroup size={36} aria-label={copy('dateRange')} className="max-w-full flex-wrap">
+          <Select value={period} onValueChange={setPeriod}><SelectTrigger className="w-auto" aria-label={copy('period')}><SelectValue /></SelectTrigger><SelectContent>{['0', '7', '30'].map(item => <SelectItem key={item} value={item}>{copy(`period${item}`)}</SelectItem>)}</SelectContent></Select>
+          <Popover open={dateOpen} onOpenChange={setDateOpen}><PopoverTrigger asChild><Button variant="outline" aria-label={copy('dateRange')}><CalendarDays className="size-5" aria-hidden="true" /><span className="truncate">{dateText}</span></Button></PopoverTrigger><PopoverContent className="w-auto p-3" align="start"><Calendar mode="single" selected={endDate} defaultMonth={endDate} onSelect={date => { if (date) { setEndDate(date); setDateOpen(false) } }} /></PopoverContent></Popover>
+        </ButtonGroup></>}>
+      <SearchInput value={query} onChange={setQuery} aria-label={copy('search')} placeholder={copy('search')} className="w-[300px] max-w-full [&>svg]:size-5" />
+      <Popover open={filterOpen} onOpenChange={setFilterOpen}><PopoverTrigger asChild><Button variant="outline"><Filter className="size-5" aria-hidden="true" />{copy('filter')}</Button></PopoverTrigger>
+        <PopoverContent className="w-[640px] max-w-[calc(100vw-24px)] overflow-hidden p-0" align="end"><SourceFilterPanel value={filters} onApply={value => { setFilters(value); setFilterOpen(false) }} /></PopoverContent>
+      </Popover>
+      <Popover><PopoverTrigger asChild><IconButton variant="outline" aria-label={copy('settings')}><Settings2 className="size-5" /></IconButton></PopoverTrigger><PopoverContent className="w-60"><CheckboxField checked={showAmount} onCheckedChange={checked => setShowAmount(checked === true)} label={copy('showAmount')} /></PopoverContent></Popover>
+      {type === 'table' ? <Select value={sort} onValueChange={setSort}><SelectTrigger className="w-40" aria-label={copy('sort')}><SelectValue /></SelectTrigger><SelectContent><SelectItem value="recent">{copy('recent')}</SelectItem><SelectItem value="amount">{copy('amount')}</SelectItem></SelectContent></Select> : null}
+    </FilterToolbar>
+    <p role="status" className="text-sm text-muted-foreground">{copy('results', { count: rows.length })}</p>
+    <div className="overflow-x-auto rounded-md border border-border"><Table className="min-w-[440px]">
+      <TableHeader><TableRow><TableHead>{copy('name')}</TableHead><TableHead>{copy('status')}</TableHead>{showAmount ? <TableHead className="text-right">{copy('amount')}</TableHead> : null}</TableRow></TableHeader>
+      <TableBody>{rows.map(row => <TableRow key={row.name}><TableCell className="font-medium">{row.name}</TableCell><TableCell>{copy(row.status)}</TableCell>{showAmount ? <TableCell className="text-right tabular-nums">{row.amount.toLocaleString(undefined, { style: 'currency', currency: 'USD' })}</TableCell> : null}</TableRow>)}</TableBody>
+    </Table></div>
+    <Button size="sm" variant="ghost" onClick={() => { setQuery(''); setCategory('all'); setFilters(emptyFilters()); setPeriod('7'); setEndDate(new Date(2023, 7, 11)); setSort('recent'); setShowAmount(true) }}>{copy('reset')}</Button>
+  </div>
+}

package/src/modules/design_system/gallery/demos/source-icons.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { SourceIcon, sourceIconNames, type SourceIconName } from '@open-mercato/ui/assets/source-icons'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Pagination } from '@open-mercato/ui/primitives/pagination'
+import { SearchInput } from '@open-mercato/ui/primitives/search-input'
+import { EmptyState } from '@open-mercato/ui/primitives/empty-state'
+import { Popover, PopoverContent, PopoverTrigger } from '@open-mercato/ui/primitives/popover'
+
+const pageSize = 48
+
+function SourceIconTile({ name }: { name: SourceIconName }) {
+  const t = useT()
+  const [notice, setNotice] = React.useState('')
+  const code = `import { SourceIcon } from '@open-mercato/ui/assets/source-icons'\n\n<SourceIcon name="${name}" aria-hidden="true" className="size-6" />`
+  async function copy() {
+    try { await navigator.clipboard.writeText(code); setNotice(t('design_system.gallery.sourceIcons.copied')) }
+    catch { setNotice(t('design_system.gallery.copyFailed')) }
+  }
+  return <Popover onOpenChange={() => setNotice('')}>
+    <PopoverTrigger asChild>
+      <Button type="button" variant="ghost" aria-label={name} className="h-auto min-h-28 min-w-0 flex-col gap-3 whitespace-normal rounded-lg border border-border bg-background p-3">
+        <SourceIcon name={name} aria-hidden="true" className="size-7" />
+        <span className="max-w-full break-words text-center text-xs font-normal leading-4 text-muted-foreground">{name}</span>
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent className="w-72 space-y-4 p-4" aria-label={name}>
+      <div className="flex h-24 items-center justify-center rounded-md bg-muted"><SourceIcon name={name} aria-hidden="true" className="size-10" /></div>
+      <p className="break-words font-medium">{name}</p>
+      <Button type="button" variant="outline" size="sm" onClick={copy}>{t('design_system.gallery.sourceIcons.copy')}</Button>
+      {notice ? <p role="status" className="text-xs text-muted-foreground">{notice}</p> : null}
+    </PopoverContent>
+  </Popover>
+}
+
+export function SourceIconCatalogue({ collectionControl }: { collectionControl?: React.ReactNode } = {}) {
+  const t = useT()
+  const [query, setQuery] = React.useState('')
+  const [page, setPage] = React.useState(1)
+  const filtered = sourceIconNames.filter(name => name.includes(query.trim().toLowerCase()))
+  const visible = filtered.slice((page - 1) * pageSize, page * pageSize)
+  return <div className="w-full min-w-0 space-y-5" data-example="source-icon-catalogue">
+    <div className="flex flex-wrap items-center gap-4">
+      {collectionControl}
+      <SearchInput value={query} onChange={value => { setQuery(value); setPage(1) }} aria-label={t('design_system.gallery.iconSearchPlaceholder')} placeholder={t('design_system.gallery.iconSearchPlaceholder')} className="w-80 max-w-full" />
+      <p className="text-sm text-muted-foreground" role="status">{t('design_system.gallery.iconCountFiltered', { visible: filtered.length, total: sourceIconNames.length })}</p>
+    </div>
+    {visible.length ? <div className="grid grid-cols-2 gap-3 sm:grid-cols-4 lg:grid-cols-6">
+      {visible.map(name => <SourceIconTile key={name} name={name} />)}
+    </div> : <EmptyState title={t('design_system.gallery.noResults')} />}
+    {filtered.length > pageSize ? <Pagination page={page} pageSize={pageSize} total={filtered.length} showPageSize={false} onPageChange={setPage} aria-label={t('design_system.gallery.sourceIcons.pages')} /> : null}
+  </div>
+}
+
+export const sourceIconCatalogueCode = `import { SourceIcon, sourceIconNames } from '@open-mercato/ui/assets/source-icons'
+
+<div className="grid grid-cols-4 gap-4">
+  {sourceIconNames.map(name => <div key={name} className="flex items-center gap-2">
+    <SourceIcon name={name} aria-hidden="true" />
+    <span>{name}</span>
+  </div>)}
+</div>`

package/src/modules/design_system/gallery/demos/table-cells-code.generated.ts

@@ -0,0 +1,3 @@
+// Generated by yarn storybook:generate from table-cells.tsx.
+const source = "import * as React from 'react'\nimport { ArrowDown, ArrowUp, ArrowUpDown, ChevronLeft, ChevronRight } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Avatar, AvatarStack } from '@open-mercato/ui/primitives/avatar'\nimport { Badge } from '@open-mercato/ui/primitives/badge'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { ButtonGroup } from '@open-mercato/ui/primitives/button-group'\nimport { Checkbox } from '@open-mercato/ui/primitives/checkbox'\nimport { Progress } from '@open-mercato/ui/primitives/progress'\nimport { Rating } from '@open-mercato/ui/primitives/rating'\nimport { StatusBadge } from '@open-mercato/ui/primitives/status-badge'\nimport { Switch } from '@open-mercato/ui/primitives/switch'\nimport { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from '@open-mercato/ui/primitives/table'\n\nconst examples = ['Leading', 'Regular', 'Passive', 'Empty', 'Button', 'ButtonGroup', 'Switch', 'Rating', 'Progress', 'StatusBadge', 'BadgeGroup', 'AvatarStack']\n\nexport function TableHeaderExamples() {\n  const t = useT()\n  const [selected, setSelected] = React.useState(false)\n  const [order, setOrder] = React.useState<'none' | 'ascending' | 'descending'>('none')\n  const SortIcon = order === 'ascending' ? ArrowUp : order === 'descending' ? ArrowDown : ArrowUpDown\n  return <div className=\"w-full space-y-3 overflow-x-auto\">\n    <Table className=\"w-[576px] table-fixed\">\n      <TableCaption className=\"sr-only\">{t('design_system.gallery.samples.table.caption')}</TableCaption>\n      <TableHeader><TableRow>\n        <TableHead scope=\"col\" aria-sort={order} className=\"h-9 w-64 bg-muted px-3 py-0\">\n          <div className=\"flex items-center gap-2.5\">\n            <Checkbox checked={selected} onCheckedChange={value => setSelected(value === true)} aria-label={t('design_system.gallery.samples.table.selection')} />\n            <Button size=\"sm\" variant=\"ghost\" className=\"h-auto gap-0.5 p-0 font-normal\" onClick={() => setOrder(value => value === 'none' ? 'ascending' : value === 'ascending' ? 'descending' : 'none')}>\n              {t('design_system.gallery.samples.table.component')}<SortIcon className=\"size-5\" aria-hidden=\"true\" />\n            </Button>\n          </div>\n        </TableHead>\n        <TableHead scope=\"col\" className=\"h-9 w-64 bg-muted px-3 py-0\">\n          <div className=\"flex items-center gap-2.5\">\n            <Checkbox disabled aria-label={t('design_system.gallery.samples.table.selection')} />\n            <Button disabled size=\"sm\" variant=\"ghost\" className=\"h-auto gap-0.5 p-0 font-normal\">{t('design_system.gallery.samples.table.preview')}<ArrowUpDown className=\"size-5\" aria-hidden=\"true\" /></Button>\n          </div>\n        </TableHead>\n        <TableHead scope=\"col\" className=\"h-9 w-16 bg-muted px-3 py-0\"><span className=\"sr-only\">{t('design_system.gallery.samples.table.empty')}</span></TableHead>\n      </TableRow></TableHeader>\n      <TableBody><TableRow data-state={selected ? 'selected' : undefined}>\n        <TableCell>{t('design_system.gallery.variantTitles.default')}</TableCell><TableCell>{t('design_system.gallery.variantTitles.disabled')}</TableCell><TableCell>{t('design_system.gallery.variantTitles.empty')}</TableCell>\n      </TableRow></TableBody>\n    </Table>\n    <p role=\"status\" className=\"text-sm text-muted-foreground\">{t('design_system.gallery.samples.table.selected', { count: Number(selected) })}</p>\n  </div>\n}\n\nexport function TableCellExamples({ rowHeight }: { rowHeight: 48 | 64 }) {\n  const t = useT()\n  const [selected, setSelected] = React.useState(['Leading'])\n  const [order, setOrder] = React.useState<'none' | 'ascending' | 'descending'>('none')\n  const [rating, setRating] = React.useState(3)\n  const [notice, setNotice] = React.useState('')\n  const typeLabel = (type: string) => t(`design_system.gallery.samples.table.types.${type}`, type)\n  const sorted = order === 'none' ? examples : [...examples].sort((a, b) => order === 'ascending' ? typeLabel(a).localeCompare(typeLabel(b)) : typeLabel(b).localeCompare(typeLabel(a)))\n  const SortIcon = order === 'ascending' ? ArrowUp : order === 'descending' ? ArrowDown : ArrowUpDown\n  const label = t('design_system.gallery.samples.table.label')\n  function cell(type: string) {\n    switch (type) {\n      case 'Leading': return <div className=\"flex items-center gap-3\"><Avatar label=\"Wei Chen\" size={rowHeight === 48 ? 32 : 40} /><div className=\"space-y-0.5\"><p className=\"text-sm font-medium leading-5\">Wei Chen</p>{rowHeight === 64 ? <p className=\"text-xs leading-4 text-muted-foreground\">{t('design_system.gallery.samples.table.description')}</p> : null}</div></div>\n      case 'Regular': return <span>{label}</span>\n      case 'Passive': return <span className=\"text-muted-foreground\">{label}</span>\n      case 'Empty': return <span className=\"sr-only\">{t('design_system.gallery.samples.table.empty')}</span>\n      case 'Button': return <Button size=\"sm\" variant=\"outline\" onClick={() => setNotice(t('design_system.gallery.samples.table.actionDone'))}>{t('design_system.gallery.samples.table.action')}</Button>\n      case 'ButtonGroup': return <ButtonGroup size={32} aria-label={t('design_system.gallery.samples.table.actions')}><Button variant=\"outline\" size=\"icon\" aria-label={t('design_system.gallery.examples.navigation.previous')} onClick={() => setNotice(t('design_system.gallery.examples.navigation.previous'))}><ChevronLeft /></Button><Button variant=\"outline\" size=\"icon\" aria-label={t('design_system.gallery.examples.navigation.next')} onClick={() => setNotice(t('design_system.gallery.examples.navigation.next'))}><ChevronRight /></Button></ButtonGroup>\n      case 'Switch': return <Switch aria-label={t('design_system.gallery.samples.table.enabled')} defaultChecked />\n      case 'Rating': return <Rating value={rating} onChange={setRating} aria-label={t('design_system.gallery.samples.rating.label')} />\n      case 'Progress': return <Progress value={65} className=\"w-40\" aria-label={t('design_system.gallery.examples.navigation.progress')} />\n      case 'StatusBadge': return <StatusBadge variant=\"success\" appearance=\"light\" dot>{t('design_system.gallery.samples.table.ready')}</StatusBadge>\n      case 'BadgeGroup': return <div className=\"flex gap-1\"><Badge size={20} appearance=\"lighter\" tone=\"purple\">CRM</Badge><Badge size={20} appearance=\"lighter\" tone=\"sky\">ERP</Badge><Badge size={20} appearance=\"stroke\" tone=\"neutral\" numeric>+2</Badge></div>\n      case 'AvatarStack': return <AvatarStack max={3} size={24}><Avatar size={24} label=\"Wei Chen\" /><Avatar size={24} label=\"Laura Perez\" /><Avatar size={24} label=\"Omar Haddad\" /><Avatar size={24} label=\"James Brown\" /></AvatarStack>\n      default: return null\n    }\n  }\n  return <div className=\"w-full min-w-0 space-y-3\">\n    <div className=\"w-full overflow-x-auto rounded-lg border border-border\">\n      <Table className=\"min-w-[600px]\">\n        <TableCaption className=\"sr-only\">{t('design_system.gallery.samples.table.caption')}</TableCaption>\n        <TableHeader><TableRow>\n          <TableHead className=\"h-9 w-12 py-1\"><span className=\"sr-only\">{t('design_system.gallery.samples.table.selection')}</span></TableHead>\n          <TableHead aria-sort={order} className=\"h-9 py-1\"><Button variant=\"ghost\" size=\"sm\" className=\"h-auto gap-2 p-0\" onClick={() => setOrder(value => value === 'ascending' ? 'descending' : 'ascending')}>{t('design_system.gallery.samples.table.component')}<SortIcon aria-hidden=\"true\" className=\"size-5\" /></Button></TableHead>\n          <TableHead className=\"h-9 py-1\">{t('design_system.gallery.samples.table.preview')}</TableHead>\n        </TableRow></TableHeader>\n        <TableBody>{sorted.map(type => <TableRow key={type} data-state={selected.includes(type) ? 'selected' : undefined} className=\"data-[state=selected]:bg-muted\">\n          <TableCell className={rowHeight === 48 ? 'h-12 py-0' : 'h-16 py-0'}><Checkbox checked={selected.includes(type)} aria-label={t('design_system.gallery.samples.table.select', { name: typeLabel(type) })} onCheckedChange={checked => setSelected(value => checked ? [...value, type] : value.filter(item => item !== type))} /></TableCell>\n          <TableCell className=\"font-medium\">{typeLabel(type)}</TableCell>\n          <TableCell className={rowHeight === 48 ? 'h-12 py-0' : 'h-16 py-0'}>{cell(type)}</TableCell>\n        </TableRow>)}</TableBody>\n      </Table>\n    </div>\n    <p role=\"status\" className=\"min-h-5 text-sm text-muted-foreground\">{notice || t('design_system.gallery.samples.table.selected', { count: selected.length })}</p>\n  </div>\n}\n\nexport function tableCellExampleCode(rowHeight: 48 | 64) {\n  return `import * as React from 'react'\nimport { ArrowDown, ArrowUp, ArrowUpDown, ChevronLeft, ChevronRight } from 'lucide-react'\nimport { Avatar, AvatarStack } from '@open-mercato/ui/primitives/avatar'\nimport { Badge } from '@open-mercato/ui/primitives/badge'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { ButtonGroup } from '@open-mercato/ui/primitives/button-group'\nimport { Checkbox } from '@open-mercato/ui/primitives/checkbox'\nimport { Progress } from '@open-mercato/ui/primitives/progress'\nimport { Rating } from '@open-mercato/ui/primitives/rating'\nimport { StatusBadge } from '@open-mercato/ui/primitives/status-badge'\nimport { Switch } from '@open-mercato/ui/primitives/switch'\nimport { Table, TableHeader, TableBody, TableHead, TableRow, TableCell } from '@open-mercato/ui/primitives/table'\n\nfunction Example() {\n  const [rating, setRating] = React.useState(3)\n  const [selected, setSelected] = React.useState<string[]>(['Leading'])\n  const [action, setAction] = React.useState('')\n  const [order, setOrder] = React.useState<'none' | 'ascending' | 'descending'>('none')\n  const SortIcon = order === 'ascending' ? ArrowUp : order === 'descending' ? ArrowDown : ArrowUpDown\n  const cells = [\n    { name: 'Leading', content: <div className=\"flex items-center gap-3\"><Avatar size={${rowHeight === 48 ? 32 : 40}} label=\"Wei Chen\" /><div><p className=\"font-medium\">Wei Chen</p>${rowHeight === 64 ? '<p className=\"text-xs text-muted-foreground\">Account manager</p>' : ''}</div></div> },\n    { name: 'Regular', content: <span>Label</span> },\n    { name: 'Passive', content: <span className=\"text-muted-foreground\">Label</span> },\n    { name: 'Empty', content: null },\n    { name: 'Button', content: <Button size=\"sm\" variant=\"outline\" onClick={() => setAction('Opened')}>Open</Button> },\n    { name: 'ButtonGroup', content: <ButtonGroup size={32} aria-label=\"Related actions\"><Button variant=\"outline\" size=\"icon\" aria-label=\"Previous\" onClick={() => setAction('Previous')}><ChevronLeft /></Button><Button variant=\"outline\" size=\"icon\" aria-label=\"Next\" onClick={() => setAction('Next')}><ChevronRight /></Button></ButtonGroup> },\n    { name: 'Switch', content: <Switch defaultChecked aria-label=\"Enabled\" /> },\n    { name: 'Rating', content: <Rating value={rating} onChange={setRating} aria-label=\"Rating\" /> },\n    { name: 'Progress', content: <Progress value={65} className=\"w-40\" aria-label=\"Progress\" /> },\n    { name: 'StatusBadge', content: <StatusBadge variant=\"success\" appearance=\"light\" dot>Ready</StatusBadge> },\n    { name: 'BadgeGroup', content: <div className=\"flex gap-1\"><Badge size={20} appearance=\"lighter\" tone=\"purple\">CRM</Badge><Badge size={20} appearance=\"lighter\" tone=\"sky\">ERP</Badge><Badge size={20} appearance=\"stroke\" tone=\"neutral\" numeric>+2</Badge></div> },\n    { name: 'AvatarStack', content: <AvatarStack max={3} size={24}><Avatar size={24} label=\"Wei Chen\" /><Avatar size={24} label=\"Laura Perez\" /><Avatar size={24} label=\"Omar Haddad\" /><Avatar size={24} label=\"James Brown\" /></AvatarStack> },\n  ]\n  const sorted = order === 'none' ? cells : [...cells].sort((a, b) => order === 'ascending' ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name))\n  return <div className=\"w-full overflow-x-auto\">\n    <Table className=\"min-w-[600px]\">\n      <TableHeader><TableRow><TableHead>Selection</TableHead><TableHead aria-sort={order}><Button size=\"sm\" variant=\"ghost\" onClick={() => setOrder(value => value === 'ascending' ? 'descending' : 'ascending')}>Component<SortIcon /></Button></TableHead><TableHead>Preview</TableHead></TableRow></TableHeader>\n      <TableBody>{sorted.map(cell => <TableRow key={cell.name} data-state={selected.includes(cell.name) ? 'selected' : undefined} className=\"data-[state=selected]:bg-muted\">\n        <TableCell className=\"${rowHeight === 48 ? 'h-12 py-0' : 'h-16 py-0'}\"><Checkbox checked={selected.includes(cell.name)} aria-label={\\`Select \\${cell.name}\\`} onCheckedChange={checked => setSelected(value => checked ? [...value, cell.name] : value.filter(name => name !== cell.name))} /></TableCell>\n        <TableCell className=\"font-medium\">{cell.name}</TableCell>\n        <TableCell className=\"${rowHeight === 48 ? 'h-12 py-0' : 'h-16 py-0'}\">{cell.content}</TableCell>\n      </TableRow>)}</TableBody>\n    </Table>\n    <p role=\"status\">{action || selected.length + ' rows selected'}</p>\n  </div>\n}`\n}\n"
+export const tableHeaderExampleCode = source + "\n<TableHeaderExamples />\n"

package/src/modules/design_system/gallery/demos/table-cells.tsx

@@ -0,0 +1,144 @@
+import * as React from 'react'
+import { ArrowDown, ArrowUp, ArrowUpDown, ChevronLeft, ChevronRight } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Avatar, AvatarStack } from '@open-mercato/ui/primitives/avatar'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { ButtonGroup } from '@open-mercato/ui/primitives/button-group'
+import { Checkbox } from '@open-mercato/ui/primitives/checkbox'
+import { Progress } from '@open-mercato/ui/primitives/progress'
+import { Rating } from '@open-mercato/ui/primitives/rating'
+import { StatusBadge } from '@open-mercato/ui/primitives/status-badge'
+import { Switch } from '@open-mercato/ui/primitives/switch'
+import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from '@open-mercato/ui/primitives/table'
+
+const examples = ['Leading', 'Regular', 'Passive', 'Empty', 'Button', 'ButtonGroup', 'Switch', 'Rating', 'Progress', 'StatusBadge', 'BadgeGroup', 'AvatarStack']
+
+export function TableHeaderExamples() {
+  const t = useT()
+  const [selected, setSelected] = React.useState(false)
+  const [order, setOrder] = React.useState<'none' | 'ascending' | 'descending'>('none')
+  const SortIcon = order === 'ascending' ? ArrowUp : order === 'descending' ? ArrowDown : ArrowUpDown
+  return <div className="w-full space-y-3 overflow-x-auto">
+    <Table className="w-[576px] table-fixed">
+      <TableCaption className="sr-only">{t('design_system.gallery.samples.table.caption')}</TableCaption>
+      <TableHeader><TableRow>
+        <TableHead scope="col" aria-sort={order} className="h-9 w-64 bg-muted px-3 py-0">
+          <div className="flex items-center gap-2.5">
+            <Checkbox checked={selected} onCheckedChange={value => setSelected(value === true)} aria-label={t('design_system.gallery.samples.table.selection')} />
+            <Button size="sm" variant="ghost" className="h-auto gap-0.5 p-0 font-normal" onClick={() => setOrder(value => value === 'none' ? 'ascending' : value === 'ascending' ? 'descending' : 'none')}>
+              {t('design_system.gallery.samples.table.component')}<SortIcon className="size-5" aria-hidden="true" />
+            </Button>
+          </div>
+        </TableHead>
+        <TableHead scope="col" className="h-9 w-64 bg-muted px-3 py-0">
+          <div className="flex items-center gap-2.5">
+            <Checkbox disabled aria-label={t('design_system.gallery.samples.table.selection')} />
+            <Button disabled size="sm" variant="ghost" className="h-auto gap-0.5 p-0 font-normal">{t('design_system.gallery.samples.table.preview')}<ArrowUpDown className="size-5" aria-hidden="true" /></Button>
+          </div>
+        </TableHead>
+        <TableHead scope="col" className="h-9 w-16 bg-muted px-3 py-0"><span className="sr-only">{t('design_system.gallery.samples.table.empty')}</span></TableHead>
+      </TableRow></TableHeader>
+      <TableBody><TableRow data-state={selected ? 'selected' : undefined}>
+        <TableCell>{t('design_system.gallery.variantTitles.default')}</TableCell><TableCell>{t('design_system.gallery.variantTitles.disabled')}</TableCell><TableCell>{t('design_system.gallery.variantTitles.empty')}</TableCell>
+      </TableRow></TableBody>
+    </Table>
+    <p role="status" className="text-sm text-muted-foreground">{t('design_system.gallery.samples.table.selected', { count: Number(selected) })}</p>
+  </div>
+}
+
+export function TableCellExamples({ rowHeight }: { rowHeight: 48 | 64 }) {
+  const t = useT()
+  const [selected, setSelected] = React.useState(['Leading'])
+  const [order, setOrder] = React.useState<'none' | 'ascending' | 'descending'>('none')
+  const [rating, setRating] = React.useState(3)
+  const [notice, setNotice] = React.useState('')
+  const typeLabel = (type: string) => t(`design_system.gallery.samples.table.types.${type}`, type)
+  const sorted = order === 'none' ? examples : [...examples].sort((a, b) => order === 'ascending' ? typeLabel(a).localeCompare(typeLabel(b)) : typeLabel(b).localeCompare(typeLabel(a)))
+  const SortIcon = order === 'ascending' ? ArrowUp : order === 'descending' ? ArrowDown : ArrowUpDown
+  const label = t('design_system.gallery.samples.table.label')
+  function cell(type: string) {
+    switch (type) {
+      case 'Leading': return <div className="flex items-center gap-3"><Avatar label="Wei Chen" size={rowHeight === 48 ? 32 : 40} /><div className="space-y-0.5"><p className="text-sm font-medium leading-5">Wei Chen</p>{rowHeight === 64 ? <p className="text-xs leading-4 text-muted-foreground">{t('design_system.gallery.samples.table.description')}</p> : null}</div></div>
+      case 'Regular': return <span>{label}</span>
+      case 'Passive': return <span className="text-muted-foreground">{label}</span>
+      case 'Empty': return <span className="sr-only">{t('design_system.gallery.samples.table.empty')}</span>
+      case 'Button': return <Button size="sm" variant="outline" onClick={() => setNotice(t('design_system.gallery.samples.table.actionDone'))}>{t('design_system.gallery.samples.table.action')}</Button>
+      case 'ButtonGroup': return <ButtonGroup size={32} aria-label={t('design_system.gallery.samples.table.actions')}><Button variant="outline" size="icon" aria-label={t('design_system.gallery.examples.navigation.previous')} onClick={() => setNotice(t('design_system.gallery.examples.navigation.previous'))}><ChevronLeft /></Button><Button variant="outline" size="icon" aria-label={t('design_system.gallery.examples.navigation.next')} onClick={() => setNotice(t('design_system.gallery.examples.navigation.next'))}><ChevronRight /></Button></ButtonGroup>
+      case 'Switch': return <Switch aria-label={t('design_system.gallery.samples.table.enabled')} defaultChecked />
+      case 'Rating': return <Rating value={rating} onChange={setRating} aria-label={t('design_system.gallery.samples.rating.label')} />
+      case 'Progress': return <Progress value={65} className="w-40" aria-label={t('design_system.gallery.examples.navigation.progress')} />
+      case 'StatusBadge': return <StatusBadge variant="success" appearance="light" dot>{t('design_system.gallery.samples.table.ready')}</StatusBadge>
+      case 'BadgeGroup': return <div className="flex gap-1"><Badge size={20} appearance="lighter" tone="purple">CRM</Badge><Badge size={20} appearance="lighter" tone="sky">ERP</Badge><Badge size={20} appearance="stroke" tone="neutral" numeric>+2</Badge></div>
+      case 'AvatarStack': return <AvatarStack max={3} size={24}><Avatar size={24} label="Wei Chen" /><Avatar size={24} label="Laura Perez" /><Avatar size={24} label="Omar Haddad" /><Avatar size={24} label="James Brown" /></AvatarStack>
+      default: return null
+    }
+  }
+  return <div className="w-full min-w-0 space-y-3">
+    <div className="w-full overflow-x-auto rounded-lg border border-border">
+      <Table className="min-w-[600px]">
+        <TableCaption className="sr-only">{t('design_system.gallery.samples.table.caption')}</TableCaption>
+        <TableHeader><TableRow>
+          <TableHead className="h-9 w-12 py-1"><span className="sr-only">{t('design_system.gallery.samples.table.selection')}</span></TableHead>
+          <TableHead aria-sort={order} className="h-9 py-1"><Button variant="ghost" size="sm" className="h-auto gap-2 p-0" onClick={() => setOrder(value => value === 'ascending' ? 'descending' : 'ascending')}>{t('design_system.gallery.samples.table.component')}<SortIcon aria-hidden="true" className="size-5" /></Button></TableHead>
+          <TableHead className="h-9 py-1">{t('design_system.gallery.samples.table.preview')}</TableHead>
+        </TableRow></TableHeader>
+        <TableBody>{sorted.map(type => <TableRow key={type} data-state={selected.includes(type) ? 'selected' : undefined} className="data-[state=selected]:bg-muted">
+          <TableCell className={rowHeight === 48 ? 'h-12 py-0' : 'h-16 py-0'}><Checkbox checked={selected.includes(type)} aria-label={t('design_system.gallery.samples.table.select', { name: typeLabel(type) })} onCheckedChange={checked => setSelected(value => checked ? [...value, type] : value.filter(item => item !== type))} /></TableCell>
+          <TableCell className="font-medium">{typeLabel(type)}</TableCell>
+          <TableCell className={rowHeight === 48 ? 'h-12 py-0' : 'h-16 py-0'}>{cell(type)}</TableCell>
+        </TableRow>)}</TableBody>
+      </Table>
+    </div>
+    <p role="status" className="min-h-5 text-sm text-muted-foreground">{notice || t('design_system.gallery.samples.table.selected', { count: selected.length })}</p>
+  </div>
+}
+
+export function tableCellExampleCode(rowHeight: 48 | 64) {
+  return `import * as React from 'react'
+import { ArrowDown, ArrowUp, ArrowUpDown, ChevronLeft, ChevronRight } from 'lucide-react'
+import { Avatar, AvatarStack } from '@open-mercato/ui/primitives/avatar'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { ButtonGroup } from '@open-mercato/ui/primitives/button-group'
+import { Checkbox } from '@open-mercato/ui/primitives/checkbox'
+import { Progress } from '@open-mercato/ui/primitives/progress'
+import { Rating } from '@open-mercato/ui/primitives/rating'
+import { StatusBadge } from '@open-mercato/ui/primitives/status-badge'
+import { Switch } from '@open-mercato/ui/primitives/switch'
+import { Table, TableHeader, TableBody, TableHead, TableRow, TableCell } from '@open-mercato/ui/primitives/table'
+
+function Example() {
+  const [rating, setRating] = React.useState(3)
+  const [selected, setSelected] = React.useState<string[]>(['Leading'])
+  const [action, setAction] = React.useState('')
+  const [order, setOrder] = React.useState<'none' | 'ascending' | 'descending'>('none')
+  const SortIcon = order === 'ascending' ? ArrowUp : order === 'descending' ? ArrowDown : ArrowUpDown
+  const cells = [
+    { name: 'Leading', content: <div className="flex items-center gap-3"><Avatar size={${rowHeight === 48 ? 32 : 40}} label="Wei Chen" /><div><p className="font-medium">Wei Chen</p>${rowHeight === 64 ? '<p className="text-xs text-muted-foreground">Account manager</p>' : ''}</div></div> },
+    { name: 'Regular', content: <span>Label</span> },
+    { name: 'Passive', content: <span className="text-muted-foreground">Label</span> },
+    { name: 'Empty', content: null },
+    { name: 'Button', content: <Button size="sm" variant="outline" onClick={() => setAction('Opened')}>Open</Button> },
+    { name: 'ButtonGroup', content: <ButtonGroup size={32} aria-label="Related actions"><Button variant="outline" size="icon" aria-label="Previous" onClick={() => setAction('Previous')}><ChevronLeft /></Button><Button variant="outline" size="icon" aria-label="Next" onClick={() => setAction('Next')}><ChevronRight /></Button></ButtonGroup> },
+    { name: 'Switch', content: <Switch defaultChecked aria-label="Enabled" /> },
+    { name: 'Rating', content: <Rating value={rating} onChange={setRating} aria-label="Rating" /> },
+    { name: 'Progress', content: <Progress value={65} className="w-40" aria-label="Progress" /> },
+    { name: 'StatusBadge', content: <StatusBadge variant="success" appearance="light" dot>Ready</StatusBadge> },
+    { name: 'BadgeGroup', content: <div className="flex gap-1"><Badge size={20} appearance="lighter" tone="purple">CRM</Badge><Badge size={20} appearance="lighter" tone="sky">ERP</Badge><Badge size={20} appearance="stroke" tone="neutral" numeric>+2</Badge></div> },
+    { name: 'AvatarStack', content: <AvatarStack max={3} size={24}><Avatar size={24} label="Wei Chen" /><Avatar size={24} label="Laura Perez" /><Avatar size={24} label="Omar Haddad" /><Avatar size={24} label="James Brown" /></AvatarStack> },
+  ]
+  const sorted = order === 'none' ? cells : [...cells].sort((a, b) => order === 'ascending' ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name))
+  return <div className="w-full overflow-x-auto">
+    <Table className="min-w-[600px]">
+      <TableHeader><TableRow><TableHead>Selection</TableHead><TableHead aria-sort={order}><Button size="sm" variant="ghost" onClick={() => setOrder(value => value === 'ascending' ? 'descending' : 'ascending')}>Component<SortIcon /></Button></TableHead><TableHead>Preview</TableHead></TableRow></TableHeader>
+      <TableBody>{sorted.map(cell => <TableRow key={cell.name} data-state={selected.includes(cell.name) ? 'selected' : undefined} className="data-[state=selected]:bg-muted">
+        <TableCell className="${rowHeight === 48 ? 'h-12 py-0' : 'h-16 py-0'}"><Checkbox checked={selected.includes(cell.name)} aria-label={\`Select \${cell.name}\`} onCheckedChange={checked => setSelected(value => checked ? [...value, cell.name] : value.filter(name => name !== cell.name))} /></TableCell>
+        <TableCell className="font-medium">{cell.name}</TableCell>
+        <TableCell className="${rowHeight === 48 ? 'h-12 py-0' : 'h-16 py-0'}">{cell.content}</TableCell>
+      </TableRow>)}</TableBody>
+    </Table>
+    <p role="status">{action || selected.length + ' rows selected'}</p>
+  </div>
+}`
+}

package/src/modules/design_system/gallery/demos/text-inputs.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react'
+import { Calendar, Globe, Info, Send, Smile, User } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { Textarea } from '@open-mercato/ui/primitives/textarea'
+import { FormField } from '@open-mercato/ui/primitives/form-field'
+import { EmailInput } from '@open-mercato/ui/primitives/email-input'
+import { SearchInput } from '@open-mercato/ui/primitives/search-input'
+import { PasswordInput } from '@open-mercato/ui/primitives/password-input'
+import { WebsiteInput } from '@open-mercato/ui/primitives/website-input'
+import { AmountInput, type AmountValue } from '@open-mercato/ui/primitives/amount-input'
+import { CardInput } from '@open-mercato/ui/primitives/card-input'
+import { ButtonInput } from '@open-mercato/ui/primitives/button-input'
+import { CompactButton } from '@open-mercato/ui/primitives/compact-button'
+import { Popover, PopoverContent, PopoverTrigger } from '@open-mercato/ui/primitives/popover'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@open-mercato/ui/primitives/select'
+import { PhoneNumberField, type PhoneCountry } from '@open-mercato/ui/backend/inputs/PhoneNumberField'
+import unitedStates from '../assets/menu-united-states.svg'
+import europeanUnion from '../assets/input-european-union.svg'
+import poland from '../assets/select-poland.png'
+
+const inputKinds = ['basic', 'email', 'phone', 'card', 'website', 'amount', 'date', 'search', 'password', 'button', 'dropdown', 'emoji'] as const
+type InputKind = typeof inputKinds[number]
+type InputState = 'placeholder' | 'filled' | 'error' | 'disabled'
+type InputSize = 32 | 36 | 40
+
+function assetSource(asset: string | { src: string }) { return typeof asset === 'string' ? asset : asset.src }
+
+export function SourceTextInput({ kind, size = 36, state = 'filled' }: { kind: InputKind; size?: InputSize; state?: InputState }) {
+  const t = useT()
+  const id = React.useId()
+  const isPlaceholder = state === 'placeholder'
+  const disabled = state === 'disabled'
+  const [text, setText] = React.useState(isPlaceholder ? '' : kind === 'basic' || kind === 'dropdown' ? 'Alex Morgan' : kind === 'email' ? 'alex@example.com' : kind === 'website' ? 'openmercato.com' : kind === 'password' ? 'LocalExample2026!' : kind === 'emoji' ? '🙂' : kind === 'date' ? '2026-09-18' : t('design_system.gallery.samples.textInput.sample'))
+  const [phone, setPhone] = React.useState<string | undefined>(isPlaceholder ? undefined : '+1 212 555 1234')
+  const [amount, setAmount] = React.useState<AmountValue>({ amount: isPlaceholder ? '' : '1250.00', currency: 'EUR' })
+  const [card, setCard] = React.useState(isPlaceholder ? '' : '4242424242424242')
+  const [permission, setPermission] = React.useState('view')
+  const [emojiOpen, setEmojiOpen] = React.useState(false)
+  const [feedback, setFeedback] = React.useState('')
+  const dateRef = React.useRef<HTMLInputElement>(null)
+  const label = t(`design_system.gallery.samples.textInput.${kind}`)
+  const error = state === 'error' ? t('design_system.gallery.samples.textInput.error') : undefined
+  const hint = t('design_system.gallery.samples.textInput.hint')
+  const common = { id, size, disabled, 'aria-label': label, 'aria-invalid': !!error, 'aria-describedby': `${id}-${error ? 'error' : 'desc'}`, placeholder: t('design_system.gallery.samples.textInput.placeholder') }
+  const countries: PhoneCountry[] = [
+    { iso2: 'US', dialCode: '+1', label: t('design_system.gallery.samples.textInput.us'), flag: '🇺🇸' },
+    { iso2: 'PL', dialCode: '+48', label: t('design_system.gallery.samples.textInput.pl'), flag: '🇵🇱' },
+  ]
+  let control: React.ReactNode
+  if (kind === 'phone') {
+    control = <PhoneNumberField id={id} size={size} ariaLabel={label} ariaDescribedBy={`${id}-desc`} countryLabel={t('design_system.gallery.samples.textInput.country')} value={phone} onValueChange={setPhone} countries={countries} disabled={disabled} externalError={error} renderCountryIcon={country => <img src={assetSource(country.iso2 === 'PL' ? poland : unitedStates)} alt="" className="size-5 object-contain" />} />
+  } else if (kind === 'email') {
+    control = <EmailInput {...common} value={text} onChange={event => setText(event.target.value)} />
+  } else if (kind === 'website') {
+    control = <WebsiteInput {...common} value={text} onChange={event => setText(event.target.value)} />
+  } else if (kind === 'amount') {
+    control = <AmountInput {...common} value={amount} onChange={setAmount} currencies={[{ code: 'USD', symbol: '$', label: 'USD' }, { code: 'EUR', symbol: '€', label: 'EUR' }]} renderCurrencyIcon={currency => <img src={assetSource(currency.code === 'EUR' ? europeanUnion : unitedStates)} alt="" className="size-5 object-contain" />} />
+  } else if (kind === 'card') {
+    control = <CardInput {...common} value={card} onChange={setCard} />
+  } else if (kind === 'search') {
+    control = <SearchInput {...common} value={text} onChange={setText} />
+  } else if (kind === 'password') {
+    control = <PasswordInput {...common} value={text} onChange={event => setText(event.target.value)} />
+  } else if (kind === 'button') {
+    control = <ButtonInput {...common} value={text} onChange={event => setText(event.target.value)} leftIcon={<User />} trailingAction={<CompactButton size={24} appearance="ghost" disabled={disabled} aria-label={t('design_system.gallery.samples.textInput.send')} onClick={() => setFeedback(t('design_system.gallery.samples.textInput.sent'))}><Send className="size-5" /></CompactButton>} />
+  } else if (kind === 'dropdown') {
+    control = <Input {...common} value={text} onChange={event => setText(event.target.value)} leftIcon={<User />} trailing={<Select value={permission} onValueChange={setPermission} disabled={disabled}><SelectTrigger size={32} aria-label={t('design_system.gallery.samples.textInput.permission')} className="h-5 w-auto gap-1 border-0 rounded-none bg-transparent p-0 text-muted-foreground shadow-none"><Globe className="size-5" aria-hidden="true" /><SelectValue /></SelectTrigger><SelectContent><SelectItem value="view">{t('design_system.gallery.samples.textInput.view')}</SelectItem><SelectItem value="edit">{t('design_system.gallery.samples.textInput.edit')}</SelectItem></SelectContent></Select>} />
+  } else if (kind === 'emoji') {
+    control = <Input {...common} value={text} onChange={event => setText(event.target.value)} leading={<Popover open={emojiOpen} onOpenChange={setEmojiOpen}><PopoverTrigger asChild><CompactButton size={20} appearance="ghost" disabled={disabled} aria-label={t('design_system.gallery.samples.textInput.chooseEmoji')}><Smile className="size-5" /></CompactButton></PopoverTrigger><PopoverContent className="flex w-fit gap-2 p-2">{['🙂', '🎉', '🚀', '❤️'].map(emoji => <CompactButton key={emoji} size={24} appearance="ghost" aria-label={emoji} onClick={() => { setText(current => `${current}${emoji}`); setEmojiOpen(false) }}>{emoji}</CompactButton>)}</PopoverContent></Popover>} />
+  } else if (kind === 'date') {
+    control = <Input {...common} ref={dateRef} type="date" value={text} onChange={event => setText(event.target.value)} inputClassName="[&::-webkit-calendar-picker-indicator]:hidden" leading={<CompactButton size={20} appearance="ghost" disabled={disabled} aria-label={t('design_system.gallery.samples.textInput.chooseDate')} onClick={() => { dateRef.current?.focus(); dateRef.current?.showPicker?.() }}><Calendar className="size-5" /></CompactButton>} />
+  } else {
+    control = <Input {...common} value={text} onChange={event => setText(event.target.value)} leftIcon={<User />} rightIcon={state === 'error' ? <Info /> : undefined} />
+  }
+  return <div className="min-w-0" data-input-kind={kind} data-input-size={size}><FormField id={id} label={label} description={hint} error={kind === 'phone' ? undefined : error} disabled={disabled}>{control}</FormField>{feedback ? <output className="mt-2 block text-xs text-muted-foreground" aria-live="polite">{feedback}</output> : null}{kind === 'phone' && phone ? <output className="mt-2 block text-xs text-muted-foreground" aria-live="polite">{phone}</output> : null}</div>
+}
+
+export function SourceTextInputMatrix({ size = 36, state = 'filled' }: { size?: InputSize; state?: InputState }) {
+  return <div className="grid w-full grid-cols-1 gap-6 lg:grid-cols-2 xl:grid-cols-3">{inputKinds.map(kind => <SourceTextInput key={`${kind}-${size}-${state}`} kind={kind} size={size} state={state} />)}</div>
+}
+
+export function SourcePhoneExamples({ state = 'filled' }: { state?: InputState }) {
+  return <div className="grid w-full grid-cols-1 gap-6 lg:grid-cols-3">{([32, 36, 40] as const).map(size => <SourceTextInput key={`${size}-${state}`} kind="phone" size={size} state={state} />)}</div>
+}
+
+export function SourceTextareaExamples() {
+  const t = useT()
+  return <div className="grid w-full grid-cols-1 gap-6 lg:grid-cols-2">{(['placeholder', 'filled', 'error', 'disabled'] as const).map(state => <FormField key={state} label={t('design_system.gallery.samples.textInput.note')} description={t('design_system.gallery.samples.textInput.hint')} disabled={state === 'disabled'} error={state === 'error' ? t('design_system.gallery.samples.textInput.error') : undefined}><Textarea appearance="source" showCount maxLength={200} placeholder={t('design_system.gallery.samples.textInput.placeholder')} defaultValue={state === 'placeholder' ? '' : t('design_system.gallery.samples.textInput.noteValue')} /></FormField>)}</div>
+}

package/src/modules/design_system/gallery/demos/time-picker-code.generated.ts

@@ -0,0 +1,5 @@
+// Generated by yarn storybook:generate from time-picker.tsx.
+const source = "import * as React from 'react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { TimePickerDurationChip, TimePickerSlot, TimePickerStatusChip } from '@open-mercato/ui/primitives/time-picker'\n\nconst states = ['default', 'hover', 'selected', 'disabled'] as const\nconst statuses = ['available', 'busy', 'in-meeting', 'offline'] as const\n\nexport function TimePickerStatusExamples() {\n  const t = useT()\n  const [active, setActive] = React.useState<string[]>(statuses.map(status => `selected-${status}`))\n  return <div className=\"grid w-full gap-4 sm:grid-cols-2\">{states.map(state => <div key={state} className=\"space-y-2\">\n    <p className=\"text-xs text-muted-foreground\">{state}</p><div className=\"flex flex-wrap gap-2\">{statuses.map(status => {\n      const key = `${state}-${status}`\n      return <TimePickerStatusChip key={key} variant={status} label={t(`design_system.gallery.samples.time.${status}`)} state={state === 'selected' ? 'default' : state} selected={active.includes(key)} disabled={state === 'disabled'} onSelect={() => setActive(value => value.includes(key) ? value.filter(item => item !== key) : [...value, key])} />\n    })}</div>\n  </div>)}</div>\n}\n\nexport function TimePickerDurationExamples() {\n  const t = useT()\n  const [active, setActive] = React.useState<string[]>(['selected'])\n  return <div className=\"flex flex-wrap gap-4\">{states.map(state => <div key={state} className=\"space-y-2\"><p className=\"text-xs text-muted-foreground\">{state === 'selected' ? 'active' : state}</p><TimePickerDurationChip value={30} label={t('design_system.gallery.samples.time.duration')} state={state === 'selected' ? 'default' : state} selected={active.includes(state)} disabled={state === 'disabled'} onSelect={() => setActive(value => value.includes(state) ? value.filter(item => item !== state) : [...value, state])} /></div>)}</div>\n}\n\nexport function TimePickerSlotExamples() {\n  const [active, setActive] = React.useState<string[]>(['right-selected', 'center-selected'])\n  return <div className=\"grid w-full gap-5 sm:grid-cols-2\">{(['right', 'center'] as const).map(position => <div key={position} className=\"w-full max-w-80 space-y-2\"><p className=\"text-xs text-muted-foreground\">{position}</p>{states.map(state => {\n    const key = `${position}-${state}`\n    return <TimePickerSlot key={key} value=\"09:30\" rightText=\"09:30\" checkPosition={position} state={state === 'selected' ? 'default' : state} selected={active.includes(key)} disabled={state === 'disabled'} onSelect={() => setActive(value => value.includes(key) ? value.filter(item => item !== key) : [...value, key])} />\n  })}</div>)}</div>\n}\n"
+export const timePickerStatusCode = source + "\n<TimePickerStatusExamples />\n"
+export const timePickerDurationCode = source + "\n<TimePickerDurationExamples />\n"
+export const timePickerSlotCode = source + "\n<TimePickerSlotExamples />\n"

package/src/modules/design_system/gallery/demos/time-picker.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { TimePickerDurationChip, TimePickerSlot, TimePickerStatusChip } from '@open-mercato/ui/primitives/time-picker'
+
+const states = ['default', 'hover', 'selected', 'disabled'] as const
+const statuses = ['available', 'busy', 'in-meeting', 'offline'] as const
+
+export function TimePickerStatusExamples() {
+  const t = useT()
+  const [active, setActive] = React.useState<string[]>(statuses.map(status => `selected-${status}`))
+  return <div className="grid w-full gap-4 sm:grid-cols-2">{states.map(state => <div key={state} className="space-y-2">
+    <p className="text-xs text-muted-foreground">{state}</p><div className="flex flex-wrap gap-2">{statuses.map(status => {
+      const key = `${state}-${status}`
+      return <TimePickerStatusChip key={key} variant={status} label={t(`design_system.gallery.samples.time.${status}`)} state={state === 'selected' ? 'default' : state} selected={active.includes(key)} disabled={state === 'disabled'} onSelect={() => setActive(value => value.includes(key) ? value.filter(item => item !== key) : [...value, key])} />
+    })}</div>
+  </div>)}</div>
+}
+
+export function TimePickerDurationExamples() {
+  const t = useT()
+  const [active, setActive] = React.useState<string[]>(['selected'])
+  return <div className="flex flex-wrap gap-4">{states.map(state => <div key={state} className="space-y-2"><p className="text-xs text-muted-foreground">{state === 'selected' ? 'active' : state}</p><TimePickerDurationChip value={30} label={t('design_system.gallery.samples.time.duration')} state={state === 'selected' ? 'default' : state} selected={active.includes(state)} disabled={state === 'disabled'} onSelect={() => setActive(value => value.includes(state) ? value.filter(item => item !== state) : [...value, state])} /></div>)}</div>
+}
+
+export function TimePickerSlotExamples() {
+  const [active, setActive] = React.useState<string[]>(['right-selected', 'center-selected'])
+  return <div className="grid w-full gap-5 sm:grid-cols-2">{(['right', 'center'] as const).map(position => <div key={position} className="w-full max-w-80 space-y-2"><p className="text-xs text-muted-foreground">{position}</p>{states.map(state => {
+    const key = `${position}-${state}`
+    return <TimePickerSlot key={key} value="09:30" rightText="09:30" checkPosition={position} state={state === 'selected' ? 'default' : state} selected={active.includes(key)} disabled={state === 'disabled'} onSelect={() => setActive(value => value.includes(key) ? value.filter(item => item !== key) : [...value, key])} />
+  })}</div>)}</div>
+}