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

package/dist/modules/design_system/gallery/demos/source-filters-code.generated.js

@@ -0,0 +1,125 @@
+const source = `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()} \u2013 \${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>
+}
+`;
+const sourceFilterExampleCode = (expression) => source + "\n" + expression + "\n";
+export {
+  sourceFilterExampleCode
+};
+//# sourceMappingURL=source-filters-code.generated.js.map

package/dist/modules/design_system/gallery/demos/source-filters-code.generated.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/demos/source-filters-code.generated.ts"],
+  "sourcesContent": ["// Generated by yarn storybook:generate from source-filters.tsx.\nconst 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()} \u2013 ${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\"\nexport const sourceFilterExampleCode = (expression: string) => source + \"\\n\" + expression + \"\\n\"\n"],
+  "mappings": "AACA,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACR,MAAM,0BAA0B,CAAC,eAAuB,SAAS,OAAO,aAAa;",
+  "names": []
+}

package/dist/modules/design_system/gallery/demos/source-filters.js

@@ -0,0 +1,185 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+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";
+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 = () => ({ statuses: [] });
+function useFilterCopy() {
+  const t = useT();
+  return (key, values) => t(`design_system.gallery.examples.sourceFilters.${key}`, values);
+}
+function SourceFilterPanel({ value, onApply }) {
+  const copy = useFilterCopy();
+  const [draft, setDraft] = React.useState(() => 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 /* @__PURE__ */ jsxs("div", { className: "w-full min-w-0 bg-background", "data-example": "filter-panel", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row", children: [
+      /* @__PURE__ */ jsxs("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"), children: [
+        /* @__PURE__ */ jsx(FilterPanelItem, { active: section === "date", leading: /* @__PURE__ */ jsx(CalendarDays, {}), "aria-controls": panelId, onClick: () => setSection("date"), children: copy("date") }),
+        /* @__PURE__ */ jsx(FilterPanelItem, { active: section === "status", leading: /* @__PURE__ */ jsx(Check, {}), "aria-controls": panelId, onClick: () => setSection("status"), children: copy("status") })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { id: panelId, "aria-label": copy(section), className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx(FilterPanelHeader, { title: copy(section), leading: section === "date" ? /* @__PURE__ */ jsx(CalendarDays, {}) : /* @__PURE__ */ jsx(Check, {}), action: /* @__PURE__ */ jsx(Button, { variant: "link", className: "h-auto p-0 text-sm leading-5 text-muted-foreground", onClick: clear, children: copy("clear") }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex min-h-80 justify-center px-5 pb-5", children: section === "date" ? /* @__PURE__ */ jsx(Calendar, { mode: "single", defaultMonth: draft.date ?? new Date(2023, 7, 1), selected: draft.date, onSelect: (date) => {
+          setDraft((previous) => ({ ...previous, date }));
+          setApplied(false);
+        } }) : /* @__PURE__ */ jsx("div", { className: "w-full space-y-4 pt-2", children: ["completed", "pending"].map((status) => /* @__PURE__ */ jsx(CheckboxField, { 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);
+        } }, status)) }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(FilterPanelFooter, { children: [
+      /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: clear, children: copy("clear") }),
+      /* @__PURE__ */ jsx(Button, { variant: "primary-filled", onClick: () => {
+        onApply?.(draft);
+        setApplied(true);
+      }, children: copy("apply") })
+    ] }),
+    applied ? /* @__PURE__ */ jsx("p", { role: "status", className: "px-5 pb-4 text-sm text-muted-foreground", children: copy("applied") }) : null
+  ] });
+}
+function SourceFilterParts() {
+  const copy = useFilterCopy();
+  const [active, setActive] = React.useState(2);
+  const [notice, setNotice] = React.useState("");
+  return /* @__PURE__ */ jsxs("div", { className: "grid w-full gap-6", children: [
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-3", children: ["Default", "Hover", "Active"].map((state, index) => /* @__PURE__ */ jsxs("div", { className: "w-[200px] max-w-full space-y-2", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: state }),
+      /* @__PURE__ */ jsx(FilterPanelItem, { active: active === index, leading: /* @__PURE__ */ jsx(CalendarDays, {}), onClick: () => setActive(index), children: copy("date") })
+    ] }, state)) }),
+    /* @__PURE__ */ jsx("div", { className: "w-[400px] max-w-full rounded-md border border-border", children: /* @__PURE__ */ jsx(FilterPanelHeader, { title: copy("date"), leading: /* @__PURE__ */ jsx(CalendarDays, {}), action: /* @__PURE__ */ jsx(Button, { variant: "link", className: "h-auto p-0 text-sm leading-5 text-muted-foreground", onClick: () => {
+      setActive(-1);
+      setNotice(copy("cleared"));
+    }, children: copy("clear") }) }) }),
+    /* @__PURE__ */ jsx("div", { className: "w-[472px] max-w-full", children: /* @__PURE__ */ jsxs(FilterPanelFooter, { children: [
+      /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => {
+        setActive(-1);
+        setNotice(copy("cleared"));
+      }, children: copy("clear") }),
+      /* @__PURE__ */ jsx(Button, { variant: "primary-filled", onClick: () => setNotice(copy("applied")), children: copy("apply") })
+    ] }) }),
+    /* @__PURE__ */ jsx("p", { role: "status", className: "min-h-5 text-sm text-muted-foreground", children: notice })
+  ] });
+}
+function SourceFilterToolbar({ type }) {
+  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(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()} \u2013 ${endDate.toLocaleDateString()}`;
+  return /* @__PURE__ */ jsxs("div", { className: "w-full min-w-0 space-y-4", "data-example": `filter-toolbar-${type}`, children: [
+    /* @__PURE__ */ jsxs(FilterToolbar, { className: "max-w-[1104px]", leading: type === "table" ? /* @__PURE__ */ jsx(SegmentedControl, { value: category, onValueChange: setCategory, "aria-label": copy("transactionType"), className: "h-9 w-80 max-w-full rounded-md border-0 p-1", children: ["all", "income", "expense"].map((item) => /* @__PURE__ */ jsx(SegmentedControlItem, { value: item, className: "flex-1 rounded-sm", children: copy(item) }, item)) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => {
+        setEndDate(/* @__PURE__ */ new Date());
+        setPeriod("0");
+      }, children: copy("today") }),
+      /* @__PURE__ */ jsxs(ButtonGroup, { size: 36, "aria-label": copy("dateRange"), className: "max-w-full flex-wrap", children: [
+        /* @__PURE__ */ jsxs(Select, { value: period, onValueChange: setPeriod, children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { className: "w-auto", "aria-label": copy("period"), children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+          /* @__PURE__ */ jsx(SelectContent, { children: ["0", "7", "30"].map((item) => /* @__PURE__ */ jsx(SelectItem, { value: item, children: copy(`period${item}`) }, item)) })
+        ] }),
+        /* @__PURE__ */ jsxs(Popover, { open: dateOpen, onOpenChange: setDateOpen, children: [
+          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", "aria-label": copy("dateRange"), children: [
+            /* @__PURE__ */ jsx(CalendarDays, { className: "size-5", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: dateText })
+          ] }) }),
+          /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-3", align: "start", children: /* @__PURE__ */ jsx(Calendar, { mode: "single", selected: endDate, defaultMonth: endDate, onSelect: (date) => {
+            if (date) {
+              setEndDate(date);
+              setDateOpen(false);
+            }
+          } }) })
+        ] })
+      ] })
+    ] }), children: [
+      /* @__PURE__ */ jsx(SearchInput, { value: query, onChange: setQuery, "aria-label": copy("search"), placeholder: copy("search"), className: "w-[300px] max-w-full [&>svg]:size-5" }),
+      /* @__PURE__ */ jsxs(Popover, { open: filterOpen, onOpenChange: setFilterOpen, children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", children: [
+          /* @__PURE__ */ jsx(Filter, { className: "size-5", "aria-hidden": "true" }),
+          copy("filter")
+        ] }) }),
+        /* @__PURE__ */ jsx(PopoverContent, { className: "w-[640px] max-w-[calc(100vw-24px)] overflow-hidden p-0", align: "end", children: /* @__PURE__ */ jsx(SourceFilterPanel, { value: filters, onApply: (value) => {
+          setFilters(value);
+          setFilterOpen(false);
+        } }) })
+      ] }),
+      /* @__PURE__ */ jsxs(Popover, { children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { variant: "outline", "aria-label": copy("settings"), children: /* @__PURE__ */ jsx(Settings2, { className: "size-5" }) }) }),
+        /* @__PURE__ */ jsx(PopoverContent, { className: "w-60", children: /* @__PURE__ */ jsx(CheckboxField, { checked: showAmount, onCheckedChange: (checked) => setShowAmount(checked === true), label: copy("showAmount") }) })
+      ] }),
+      type === "table" ? /* @__PURE__ */ jsxs(Select, { value: sort, onValueChange: setSort, children: [
+        /* @__PURE__ */ jsx(SelectTrigger, { className: "w-40", "aria-label": copy("sort"), children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+        /* @__PURE__ */ jsxs(SelectContent, { children: [
+          /* @__PURE__ */ jsx(SelectItem, { value: "recent", children: copy("recent") }),
+          /* @__PURE__ */ jsx(SelectItem, { value: "amount", children: copy("amount") })
+        ] })
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsx("p", { role: "status", className: "text-sm text-muted-foreground", children: copy("results", { count: rows.length }) }),
+    /* @__PURE__ */ jsx("div", { className: "overflow-x-auto rounded-md border border-border", children: /* @__PURE__ */ jsxs(Table, { className: "min-w-[440px]", children: [
+      /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableHead, { children: copy("name") }),
+        /* @__PURE__ */ jsx(TableHead, { children: copy("status") }),
+        showAmount ? /* @__PURE__ */ jsx(TableHead, { className: "text-right", children: copy("amount") }) : null
+      ] }) }),
+      /* @__PURE__ */ jsx(TableBody, { children: rows.map((row) => /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableCell, { className: "font-medium", children: row.name }),
+        /* @__PURE__ */ jsx(TableCell, { children: copy(row.status) }),
+        showAmount ? /* @__PURE__ */ jsx(TableCell, { className: "text-right tabular-nums", children: row.amount.toLocaleString(void 0, { style: "currency", currency: "USD" }) }) : null
+      ] }, row.name)) })
+    ] }) }),
+    /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: () => {
+      setQuery("");
+      setCategory("all");
+      setFilters(emptyFilters());
+      setPeriod("7");
+      setEndDate(new Date(2023, 7, 11));
+      setSort("recent");
+      setShowAmount(true);
+    }, children: copy("reset") })
+  ] });
+}
+export {
+  SourceFilterPanel,
+  SourceFilterParts,
+  SourceFilterToolbar
+};
+//# sourceMappingURL=source-filters.js.map

package/dist/modules/design_system/gallery/demos/source-filters.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/demos/source-filters.tsx"],
+  "sourcesContent": ["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()} \u2013 ${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"],
+  "mappings": "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",
+  "names": []
+}

package/dist/modules/design_system/gallery/demos/source-icons.js

@@ -0,0 +1,69 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { SourceIcon, sourceIconNames } 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 }) {
+  const t = useT();
+  const [notice, setNotice] = React.useState("");
+  const code = `import { SourceIcon } from '@open-mercato/ui/assets/source-icons'
+
+<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 /* @__PURE__ */ jsxs(Popover, { onOpenChange: () => setNotice(""), children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(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", children: [
+      /* @__PURE__ */ jsx(SourceIcon, { name, "aria-hidden": "true", className: "size-7" }),
+      /* @__PURE__ */ jsx("span", { className: "max-w-full break-words text-center text-xs font-normal leading-4 text-muted-foreground", children: name })
+    ] }) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { className: "w-72 space-y-4 p-4", "aria-label": name, children: [
+      /* @__PURE__ */ jsx("div", { className: "flex h-24 items-center justify-center rounded-md bg-muted", children: /* @__PURE__ */ jsx(SourceIcon, { name, "aria-hidden": "true", className: "size-10" }) }),
+      /* @__PURE__ */ jsx("p", { className: "break-words font-medium", children: name }),
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: copy, children: t("design_system.gallery.sourceIcons.copy") }),
+      notice ? /* @__PURE__ */ jsx("p", { role: "status", className: "text-xs text-muted-foreground", children: notice }) : null
+    ] })
+  ] });
+}
+function SourceIconCatalogue({ collectionControl } = {}) {
+  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 /* @__PURE__ */ jsxs("div", { className: "w-full min-w-0 space-y-5", "data-example": "source-icon-catalogue", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [
+      collectionControl,
+      /* @__PURE__ */ jsx(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" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", role: "status", children: t("design_system.gallery.iconCountFiltered", { visible: filtered.length, total: sourceIconNames.length }) })
+    ] }),
+    visible.length ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-4 lg:grid-cols-6", children: visible.map((name) => /* @__PURE__ */ jsx(SourceIconTile, { name }, name)) }) : /* @__PURE__ */ jsx(EmptyState, { title: t("design_system.gallery.noResults") }),
+    filtered.length > pageSize ? /* @__PURE__ */ jsx(Pagination, { page, pageSize, total: filtered.length, showPageSize: false, onPageChange: setPage, "aria-label": t("design_system.gallery.sourceIcons.pages") }) : null
+  ] });
+}
+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>`;
+export {
+  SourceIconCatalogue,
+  sourceIconCatalogueCode
+};
+//# sourceMappingURL=source-icons.js.map

package/dist/modules/design_system/gallery/demos/source-icons.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/demos/source-icons.tsx"],
+  "sourcesContent": ["import * as React from 'react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { SourceIcon, sourceIconNames, type SourceIconName } from '@open-mercato/ui/assets/source-icons'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Pagination } from '@open-mercato/ui/primitives/pagination'\nimport { SearchInput } from '@open-mercato/ui/primitives/search-input'\nimport { EmptyState } from '@open-mercato/ui/primitives/empty-state'\nimport { Popover, PopoverContent, PopoverTrigger } from '@open-mercato/ui/primitives/popover'\n\nconst pageSize = 48\n\nfunction SourceIconTile({ name }: { name: SourceIconName }) {\n  const t = useT()\n  const [notice, setNotice] = React.useState('')\n  const code = `import { SourceIcon } from '@open-mercato/ui/assets/source-icons'\\n\\n<SourceIcon name=\"${name}\" aria-hidden=\"true\" className=\"size-6\" />`\n  async function copy() {\n    try { await navigator.clipboard.writeText(code); setNotice(t('design_system.gallery.sourceIcons.copied')) }\n    catch { setNotice(t('design_system.gallery.copyFailed')) }\n  }\n  return <Popover onOpenChange={() => setNotice('')}>\n    <PopoverTrigger asChild>\n      <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\">\n        <SourceIcon name={name} aria-hidden=\"true\" className=\"size-7\" />\n        <span className=\"max-w-full break-words text-center text-xs font-normal leading-4 text-muted-foreground\">{name}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent className=\"w-72 space-y-4 p-4\" aria-label={name}>\n      <div className=\"flex h-24 items-center justify-center rounded-md bg-muted\"><SourceIcon name={name} aria-hidden=\"true\" className=\"size-10\" /></div>\n      <p className=\"break-words font-medium\">{name}</p>\n      <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={copy}>{t('design_system.gallery.sourceIcons.copy')}</Button>\n      {notice ? <p role=\"status\" className=\"text-xs text-muted-foreground\">{notice}</p> : null}\n    </PopoverContent>\n  </Popover>\n}\n\nexport function SourceIconCatalogue({ collectionControl }: { collectionControl?: React.ReactNode } = {}) {\n  const t = useT()\n  const [query, setQuery] = React.useState('')\n  const [page, setPage] = React.useState(1)\n  const filtered = sourceIconNames.filter(name => name.includes(query.trim().toLowerCase()))\n  const visible = filtered.slice((page - 1) * pageSize, page * pageSize)\n  return <div className=\"w-full min-w-0 space-y-5\" data-example=\"source-icon-catalogue\">\n    <div className=\"flex flex-wrap items-center gap-4\">\n      {collectionControl}\n      <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\" />\n      <p className=\"text-sm text-muted-foreground\" role=\"status\">{t('design_system.gallery.iconCountFiltered', { visible: filtered.length, total: sourceIconNames.length })}</p>\n    </div>\n    {visible.length ? <div className=\"grid grid-cols-2 gap-3 sm:grid-cols-4 lg:grid-cols-6\">\n      {visible.map(name => <SourceIconTile key={name} name={name} />)}\n    </div> : <EmptyState title={t('design_system.gallery.noResults')} />}\n    {filtered.length > pageSize ? <Pagination page={page} pageSize={pageSize} total={filtered.length} showPageSize={false} onPageChange={setPage} aria-label={t('design_system.gallery.sourceIcons.pages')} /> : null}\n  </div>\n}\n\nexport const sourceIconCatalogueCode = `import { SourceIcon, sourceIconNames } from '@open-mercato/ui/assets/source-icons'\n\n<div className=\"grid grid-cols-4 gap-4\">\n  {sourceIconNames.map(name => <div key={name} className=\"flex items-center gap-2\">\n    <SourceIcon name={name} aria-hidden=\"true\" />\n    <span>{name}</span>\n  </div>)}\n</div>`\n"],
+  "mappings": "AAqBM,SACE,KADF;AArBN,YAAY,WAAW;AACvB,SAAS,YAAY;AACrB,SAAS,YAAY,uBAA4C;AACjE,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,SAAS,gBAAgB,sBAAsB;AAExD,MAAM,WAAW;AAEjB,SAAS,eAAe,EAAE,KAAK,GAA6B;AAC1D,QAAM,IAAI,KAAK;AACf,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,EAAE;AAC7C,QAAM,OAAO;AAAA;AAAA,oBAA0F,IAAI;AAC3G,iBAAe,OAAO;AACpB,QAAI;AAAE,YAAM,UAAU,UAAU,UAAU,IAAI;AAAG,gBAAU,EAAE,0CAA0C,CAAC;AAAA,IAAE,QACpG;AAAE,gBAAU,EAAE,kCAAkC,CAAC;AAAA,IAAE;AAAA,EAC3D;AACA,SAAO,qBAAC,WAAQ,cAAc,MAAM,UAAU,EAAE,GAC9C;AAAA,wBAAC,kBAAe,SAAO,MACrB,+BAAC,UAAO,MAAK,UAAS,SAAQ,SAAQ,cAAY,MAAM,WAAU,8GAChE;AAAA,0BAAC,cAAW,MAAY,eAAY,QAAO,WAAU,UAAS;AAAA,MAC9D,oBAAC,UAAK,WAAU,0FAA0F,gBAAK;AAAA,OACjH,GACF;AAAA,IACA,qBAAC,kBAAe,WAAU,sBAAqB,cAAY,MACzD;AAAA,0BAAC,SAAI,WAAU,6DAA4D,8BAAC,cAAW,MAAY,eAAY,QAAO,WAAU,WAAU,GAAE;AAAA,MAC5I,oBAAC,OAAE,WAAU,2BAA2B,gBAAK;AAAA,MAC7C,oBAAC,UAAO,MAAK,UAAS,SAAQ,WAAU,MAAK,MAAK,SAAS,MAAO,YAAE,wCAAwC,GAAE;AAAA,MAC7G,SAAS,oBAAC,OAAE,MAAK,UAAS,WAAU,iCAAiC,kBAAO,IAAO;AAAA,OACtF;AAAA,KACF;AACF;AAEO,SAAS,oBAAoB,EAAE,kBAAkB,IAA6C,CAAC,GAAG;AACvG,QAAM,IAAI,KAAK;AACf,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,EAAE;AAC3C,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,CAAC;AACxC,QAAM,WAAW,gBAAgB,OAAO,UAAQ,KAAK,SAAS,MAAM,KAAK,EAAE,YAAY,CAAC,CAAC;AACzF,QAAM,UAAU,SAAS,OAAO,OAAO,KAAK,UAAU,OAAO,QAAQ;AACrE,SAAO,qBAAC,SAAI,WAAU,4BAA2B,gBAAa,yBAC5D;AAAA,yBAAC,SAAI,WAAU,qCACZ;AAAA;AAAA,MACD,oBAAC,eAAY,OAAO,OAAO,UAAU,WAAS;AAAE,iBAAS,KAAK;AAAG,gBAAQ,CAAC;AAAA,MAAE,GAAG,cAAY,EAAE,6CAA6C,GAAG,aAAa,EAAE,6CAA6C,GAAG,WAAU,mBAAkB;AAAA,MACxO,oBAAC,OAAE,WAAU,iCAAgC,MAAK,UAAU,YAAE,2CAA2C,EAAE,SAAS,SAAS,QAAQ,OAAO,gBAAgB,OAAO,CAAC,GAAE;AAAA,OACxK;AAAA,IACC,QAAQ,SAAS,oBAAC,SAAI,WAAU,wDAC9B,kBAAQ,IAAI,UAAQ,oBAAC,kBAA0B,QAAN,IAAkB,CAAE,GAChE,IAAS,oBAAC,cAAW,OAAO,EAAE,iCAAiC,GAAG;AAAA,IACjE,SAAS,SAAS,WAAW,oBAAC,cAAW,MAAY,UAAoB,OAAO,SAAS,QAAQ,cAAc,OAAO,cAAc,SAAS,cAAY,EAAE,yCAAyC,GAAG,IAAK;AAAA,KAC/M;AACF;AAEO,MAAM,0BAA0B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}