@open-mercato/core 0.7.1-develop.7202.1.a52dc6707c → 0.8.0

package/dist/modules/design_system/gallery/demos/table-cells-code.generated.js

@@ -0,0 +1,150 @@
+const source = `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>
+}\`
+}
+`;
+const tableHeaderExampleCode = source + "\n<TableHeaderExamples />\n";
+export {
+  tableHeaderExampleCode
+};
+//# sourceMappingURL=table-cells-code.generated.js.map

package/dist/modules/design_system/gallery/demos/table-cells-code.generated.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/demos/table-cells-code.generated.ts"],
+  "sourcesContent": ["// Generated by yarn storybook:generate from table-cells.tsx.\nconst 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\"\nexport const tableHeaderExampleCode = source + \"\\n<TableHeaderExamples />\\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;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,yBAAyB,SAAS;",
+  "names": []
+}

package/dist/modules/design_system/gallery/demos/table-cells.js

@@ -0,0 +1,181 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+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"];
+function TableHeaderExamples() {
+  const t = useT();
+  const [selected, setSelected] = React.useState(false);
+  const [order, setOrder] = React.useState("none");
+  const SortIcon = order === "ascending" ? ArrowUp : order === "descending" ? ArrowDown : ArrowUpDown;
+  return /* @__PURE__ */ jsxs("div", { className: "w-full space-y-3 overflow-x-auto", children: [
+    /* @__PURE__ */ jsxs(Table, { className: "w-[576px] table-fixed", children: [
+      /* @__PURE__ */ jsx(TableCaption, { className: "sr-only", children: t("design_system.gallery.samples.table.caption") }),
+      /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableHead, { scope: "col", "aria-sort": order, className: "h-9 w-64 bg-muted px-3 py-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
+          /* @__PURE__ */ jsx(Checkbox, { checked: selected, onCheckedChange: (value) => setSelected(value === true), "aria-label": t("design_system.gallery.samples.table.selection") }),
+          /* @__PURE__ */ jsxs(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"), children: [
+            t("design_system.gallery.samples.table.component"),
+            /* @__PURE__ */ jsx(SortIcon, { className: "size-5", "aria-hidden": "true" })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsx(TableHead, { scope: "col", className: "h-9 w-64 bg-muted px-3 py-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
+          /* @__PURE__ */ jsx(Checkbox, { disabled: true, "aria-label": t("design_system.gallery.samples.table.selection") }),
+          /* @__PURE__ */ jsxs(Button, { disabled: true, size: "sm", variant: "ghost", className: "h-auto gap-0.5 p-0 font-normal", children: [
+            t("design_system.gallery.samples.table.preview"),
+            /* @__PURE__ */ jsx(ArrowUpDown, { className: "size-5", "aria-hidden": "true" })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsx(TableHead, { scope: "col", className: "h-9 w-16 bg-muted px-3 py-0", children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("design_system.gallery.samples.table.empty") }) })
+      ] }) }),
+      /* @__PURE__ */ jsx(TableBody, { children: /* @__PURE__ */ jsxs(TableRow, { "data-state": selected ? "selected" : void 0, children: [
+        /* @__PURE__ */ jsx(TableCell, { children: t("design_system.gallery.variantTitles.default") }),
+        /* @__PURE__ */ jsx(TableCell, { children: t("design_system.gallery.variantTitles.disabled") }),
+        /* @__PURE__ */ jsx(TableCell, { children: t("design_system.gallery.variantTitles.empty") })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx("p", { role: "status", className: "text-sm text-muted-foreground", children: t("design_system.gallery.samples.table.selected", { count: Number(selected) }) })
+  ] });
+}
+function TableCellExamples({ rowHeight }) {
+  const t = useT();
+  const [selected, setSelected] = React.useState(["Leading"]);
+  const [order, setOrder] = React.useState("none");
+  const [rating, setRating] = React.useState(3);
+  const [notice, setNotice] = React.useState("");
+  const typeLabel = (type) => 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) {
+    switch (type) {
+      case "Leading":
+        return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx(Avatar, { label: "Wei Chen", size: rowHeight === 48 ? 32 : 40 }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium leading-5", children: "Wei Chen" }),
+            rowHeight === 64 ? /* @__PURE__ */ jsx("p", { className: "text-xs leading-4 text-muted-foreground", children: t("design_system.gallery.samples.table.description") }) : null
+          ] })
+        ] });
+      case "Regular":
+        return /* @__PURE__ */ jsx("span", { children: label });
+      case "Passive":
+        return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: label });
+      case "Empty":
+        return /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("design_system.gallery.samples.table.empty") });
+      case "Button":
+        return /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", onClick: () => setNotice(t("design_system.gallery.samples.table.actionDone")), children: t("design_system.gallery.samples.table.action") });
+      case "ButtonGroup":
+        return /* @__PURE__ */ jsxs(ButtonGroup, { size: 32, "aria-label": t("design_system.gallery.samples.table.actions"), children: [
+          /* @__PURE__ */ jsx(Button, { variant: "outline", size: "icon", "aria-label": t("design_system.gallery.examples.navigation.previous"), onClick: () => setNotice(t("design_system.gallery.examples.navigation.previous")), children: /* @__PURE__ */ jsx(ChevronLeft, {}) }),
+          /* @__PURE__ */ jsx(Button, { variant: "outline", size: "icon", "aria-label": t("design_system.gallery.examples.navigation.next"), onClick: () => setNotice(t("design_system.gallery.examples.navigation.next")), children: /* @__PURE__ */ jsx(ChevronRight, {}) })
+        ] });
+      case "Switch":
+        return /* @__PURE__ */ jsx(Switch, { "aria-label": t("design_system.gallery.samples.table.enabled"), defaultChecked: true });
+      case "Rating":
+        return /* @__PURE__ */ jsx(Rating, { value: rating, onChange: setRating, "aria-label": t("design_system.gallery.samples.rating.label") });
+      case "Progress":
+        return /* @__PURE__ */ jsx(Progress, { value: 65, className: "w-40", "aria-label": t("design_system.gallery.examples.navigation.progress") });
+      case "StatusBadge":
+        return /* @__PURE__ */ jsx(StatusBadge, { variant: "success", appearance: "light", dot: true, children: t("design_system.gallery.samples.table.ready") });
+      case "BadgeGroup":
+        return /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+          /* @__PURE__ */ jsx(Badge, { size: 20, appearance: "lighter", tone: "purple", children: "CRM" }),
+          /* @__PURE__ */ jsx(Badge, { size: 20, appearance: "lighter", tone: "sky", children: "ERP" }),
+          /* @__PURE__ */ jsx(Badge, { size: 20, appearance: "stroke", tone: "neutral", numeric: true, children: "+2" })
+        ] });
+      case "AvatarStack":
+        return /* @__PURE__ */ jsxs(AvatarStack, { max: 3, size: 24, children: [
+          /* @__PURE__ */ jsx(Avatar, { size: 24, label: "Wei Chen" }),
+          /* @__PURE__ */ jsx(Avatar, { size: 24, label: "Laura Perez" }),
+          /* @__PURE__ */ jsx(Avatar, { size: 24, label: "Omar Haddad" }),
+          /* @__PURE__ */ jsx(Avatar, { size: 24, label: "James Brown" })
+        ] });
+      default:
+        return null;
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "w-full min-w-0 space-y-3", children: [
+    /* @__PURE__ */ jsx("div", { className: "w-full overflow-x-auto rounded-lg border border-border", children: /* @__PURE__ */ jsxs(Table, { className: "min-w-[600px]", children: [
+      /* @__PURE__ */ jsx(TableCaption, { className: "sr-only", children: t("design_system.gallery.samples.table.caption") }),
+      /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableHead, { className: "h-9 w-12 py-1", children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("design_system.gallery.samples.table.selection") }) }),
+        /* @__PURE__ */ jsx(TableHead, { "aria-sort": order, className: "h-9 py-1", children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", className: "h-auto gap-2 p-0", onClick: () => setOrder((value) => value === "ascending" ? "descending" : "ascending"), children: [
+          t("design_system.gallery.samples.table.component"),
+          /* @__PURE__ */ jsx(SortIcon, { "aria-hidden": "true", className: "size-5" })
+        ] }) }),
+        /* @__PURE__ */ jsx(TableHead, { className: "h-9 py-1", children: t("design_system.gallery.samples.table.preview") })
+      ] }) }),
+      /* @__PURE__ */ jsx(TableBody, { children: sorted.map((type) => /* @__PURE__ */ jsxs(TableRow, { "data-state": selected.includes(type) ? "selected" : void 0, className: "data-[state=selected]:bg-muted", children: [
+        /* @__PURE__ */ jsx(TableCell, { className: rowHeight === 48 ? "h-12 py-0" : "h-16 py-0", children: /* @__PURE__ */ jsx(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)) }) }),
+        /* @__PURE__ */ jsx(TableCell, { className: "font-medium", children: typeLabel(type) }),
+        /* @__PURE__ */ jsx(TableCell, { className: rowHeight === 48 ? "h-12 py-0" : "h-16 py-0", children: cell(type) })
+      ] }, type)) })
+    ] }) }),
+    /* @__PURE__ */ jsx("p", { role: "status", className: "min-h-5 text-sm text-muted-foreground", children: notice || t("design_system.gallery.samples.table.selected", { count: selected.length }) })
+  ] });
+}
+function tableCellExampleCode(rowHeight) {
+  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>
+}`;
+}
+export {
+  TableCellExamples,
+  TableHeaderExamples,
+  tableCellExampleCode
+};
+//# sourceMappingURL=table-cells.js.map

package/dist/modules/design_system/gallery/demos/table-cells.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/demos/table-cells.tsx"],
+  "sourcesContent": ["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"],
+  "mappings": "AAuBM,cAKM,YALN;AAvBN,YAAY,WAAW;AACvB,SAAS,WAAW,SAAS,aAAa,aAAa,oBAAoB;AAC3E,SAAS,YAAY;AACrB,SAAS,QAAQ,mBAAmB;AACpC,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AACvB,SAAS,OAAO,WAAW,cAAc,WAAW,WAAW,aAAa,gBAAgB;AAE5F,MAAM,WAAW,CAAC,WAAW,WAAW,WAAW,SAAS,UAAU,eAAe,UAAU,UAAU,YAAY,eAAe,cAAc,aAAa;AAExJ,SAAS,sBAAsB;AACpC,QAAM,IAAI,KAAK;AACf,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAAS,KAAK;AACpD,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAA8C,MAAM;AACpF,QAAM,WAAW,UAAU,cAAc,UAAU,UAAU,eAAe,YAAY;AACxF,SAAO,qBAAC,SAAI,WAAU,oCACpB;AAAA,yBAAC,SAAM,WAAU,yBACf;AAAA,0BAAC,gBAAa,WAAU,WAAW,YAAE,6CAA6C,GAAE;AAAA,MACpF,oBAAC,eAAY,+BAAC,YACZ;AAAA,4BAAC,aAAU,OAAM,OAAM,aAAW,OAAO,WAAU,+BACjD,+BAAC,SAAI,WAAU,6BACb;AAAA,8BAAC,YAAS,SAAS,UAAU,iBAAiB,WAAS,YAAY,UAAU,IAAI,GAAG,cAAY,EAAE,+CAA+C,GAAG;AAAA,UACpJ,qBAAC,UAAO,MAAK,MAAK,SAAQ,SAAQ,WAAU,kCAAiC,SAAS,MAAM,SAAS,WAAS,UAAU,SAAS,cAAc,UAAU,cAAc,eAAe,MAAM,GACzL;AAAA,cAAE,+CAA+C;AAAA,YAAE,oBAAC,YAAS,WAAU,UAAS,eAAY,QAAO;AAAA,aACtG;AAAA,WACF,GACF;AAAA,QACA,oBAAC,aAAU,OAAM,OAAM,WAAU,+BAC/B,+BAAC,SAAI,WAAU,6BACb;AAAA,8BAAC,YAAS,UAAQ,MAAC,cAAY,EAAE,+CAA+C,GAAG;AAAA,UACnF,qBAAC,UAAO,UAAQ,MAAC,MAAK,MAAK,SAAQ,SAAQ,WAAU,kCAAkC;AAAA,cAAE,6CAA6C;AAAA,YAAE,oBAAC,eAAY,WAAU,UAAS,eAAY,QAAO;AAAA,aAAE;AAAA,WAC/L,GACF;AAAA,QACA,oBAAC,aAAU,OAAM,OAAM,WAAU,+BAA8B,8BAAC,UAAK,WAAU,WAAW,YAAE,2CAA2C,GAAE,GAAO;AAAA,SAClJ,GAAW;AAAA,MACX,oBAAC,aAAU,+BAAC,YAAS,cAAY,WAAW,aAAa,QACvD;AAAA,4BAAC,aAAW,YAAE,6CAA6C,GAAE;AAAA,QAAY,oBAAC,aAAW,YAAE,8CAA8C,GAAE;AAAA,QAAY,oBAAC,aAAW,YAAE,2CAA2C,GAAE;AAAA,SAChN,GAAW;AAAA,OACb;AAAA,IACA,oBAAC,OAAE,MAAK,UAAS,WAAU,iCAAiC,YAAE,gDAAgD,EAAE,OAAO,OAAO,QAAQ,EAAE,CAAC,GAAE;AAAA,KAC7I;AACF;AAEO,SAAS,kBAAkB,EAAE,UAAU,GAA2B;AACvE,QAAM,IAAI,KAAK;AACf,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAAS,CAAC,SAAS,CAAC;AAC1D,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAA8C,MAAM;AACpF,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,CAAC;AAC5C,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,EAAE;AAC7C,QAAM,YAAY,CAAC,SAAiB,EAAE,6CAA6C,IAAI,IAAI,IAAI;AAC/F,QAAM,SAAS,UAAU,SAAS,WAAW,CAAC,GAAG,QAAQ,EAAE,KAAK,CAAC,GAAG,MAAM,UAAU,cAAc,UAAU,CAAC,EAAE,cAAc,UAAU,CAAC,CAAC,IAAI,UAAU,CAAC,EAAE,cAAc,UAAU,CAAC,CAAC,CAAC;AACrL,QAAM,WAAW,UAAU,cAAc,UAAU,UAAU,eAAe,YAAY;AACxF,QAAM,QAAQ,EAAE,2CAA2C;AAC3D,WAAS,KAAK,MAAc;AAC1B,YAAQ,MAAM;AAAA,MACZ,KAAK;AAAW,eAAO,qBAAC,SAAI,WAAU,2BAA0B;AAAA,8BAAC,UAAO,OAAM,YAAW,MAAM,cAAc,KAAK,KAAK,IAAI;AAAA,UAAE,qBAAC,SAAI,WAAU,eAAc;AAAA,gCAAC,OAAE,WAAU,iCAAgC,sBAAQ;AAAA,YAAK,cAAc,KAAK,oBAAC,OAAE,WAAU,2CAA2C,YAAE,iDAAiD,GAAE,IAAO;AAAA,aAAK;AAAA,WAAM;AAAA,MACtW,KAAK;AAAW,eAAO,oBAAC,UAAM,iBAAM;AAAA,MACpC,KAAK;AAAW,eAAO,oBAAC,UAAK,WAAU,yBAAyB,iBAAM;AAAA,MACtE,KAAK;AAAS,eAAO,oBAAC,UAAK,WAAU,WAAW,YAAE,2CAA2C,GAAE;AAAA,MAC/F,KAAK;AAAU,eAAO,oBAAC,UAAO,MAAK,MAAK,SAAQ,WAAU,SAAS,MAAM,UAAU,EAAE,gDAAgD,CAAC,GAAI,YAAE,4CAA4C,GAAE;AAAA,MAC1L,KAAK;AAAe,eAAO,qBAAC,eAAY,MAAM,IAAI,cAAY,EAAE,6CAA6C,GAAG;AAAA,8BAAC,UAAO,SAAQ,WAAU,MAAK,QAAO,cAAY,EAAE,oDAAoD,GAAG,SAAS,MAAM,UAAU,EAAE,oDAAoD,CAAC,GAAG,8BAAC,eAAY,GAAE;AAAA,UAAS,oBAAC,UAAO,SAAQ,WAAU,MAAK,QAAO,cAAY,EAAE,gDAAgD,GAAG,SAAS,MAAM,UAAU,EAAE,gDAAgD,CAAC,GAAG,8BAAC,gBAAa,GAAE;AAAA,WAAS;AAAA,MACrhB,KAAK;AAAU,eAAO,oBAAC,UAAO,cAAY,EAAE,6CAA6C,GAAG,gBAAc,MAAC;AAAA,MAC3G,KAAK;AAAU,eAAO,oBAAC,UAAO,OAAO,QAAQ,UAAU,WAAW,cAAY,EAAE,4CAA4C,GAAG;AAAA,MAC/H,KAAK;AAAY,eAAO,oBAAC,YAAS,OAAO,IAAI,WAAU,QAAO,cAAY,EAAE,oDAAoD,GAAG;AAAA,MACnI,KAAK;AAAe,eAAO,oBAAC,eAAY,SAAQ,WAAU,YAAW,SAAQ,KAAG,MAAE,YAAE,2CAA2C,GAAE;AAAA,MACjI,KAAK;AAAc,eAAO,qBAAC,SAAI,WAAU,cAAa;AAAA,8BAAC,SAAM,MAAM,IAAI,YAAW,WAAU,MAAK,UAAS,iBAAG;AAAA,UAAQ,oBAAC,SAAM,MAAM,IAAI,YAAW,WAAU,MAAK,OAAM,iBAAG;AAAA,UAAQ,oBAAC,SAAM,MAAM,IAAI,YAAW,UAAS,MAAK,WAAU,SAAO,MAAC,gBAAE;AAAA,WAAQ;AAAA,MACvP,KAAK;AAAe,eAAO,qBAAC,eAAY,KAAK,GAAG,MAAM,IAAI;AAAA,8BAAC,UAAO,MAAM,IAAI,OAAM,YAAW;AAAA,UAAE,oBAAC,UAAO,MAAM,IAAI,OAAM,eAAc;AAAA,UAAE,oBAAC,UAAO,MAAM,IAAI,OAAM,eAAc;AAAA,UAAE,oBAAC,UAAO,MAAM,IAAI,OAAM,eAAc;AAAA,WAAE;AAAA,MACvN;AAAS,eAAO;AAAA,IAClB;AAAA,EACF;AACA,SAAO,qBAAC,SAAI,WAAU,4BACpB;AAAA,wBAAC,SAAI,WAAU,0DACb,+BAAC,SAAM,WAAU,iBACf;AAAA,0BAAC,gBAAa,WAAU,WAAW,YAAE,6CAA6C,GAAE;AAAA,MACpF,oBAAC,eAAY,+BAAC,YACZ;AAAA,4BAAC,aAAU,WAAU,iBAAgB,8BAAC,UAAK,WAAU,WAAW,YAAE,+CAA+C,GAAE,GAAO;AAAA,QAC1H,oBAAC,aAAU,aAAW,OAAO,WAAU,YAAW,+BAAC,UAAO,SAAQ,SAAQ,MAAK,MAAK,WAAU,oBAAmB,SAAS,MAAM,SAAS,WAAS,UAAU,cAAc,eAAe,WAAW,GAAI;AAAA,YAAE,+CAA+C;AAAA,UAAE,oBAAC,YAAS,eAAY,QAAO,WAAU,UAAS;AAAA,WAAE,GAAS;AAAA,QACtT,oBAAC,aAAU,WAAU,YAAY,YAAE,6CAA6C,GAAE;AAAA,SACpF,GAAW;AAAA,MACX,oBAAC,aAAW,iBAAO,IAAI,UAAQ,qBAAC,YAAoB,cAAY,SAAS,SAAS,IAAI,IAAI,aAAa,QAAW,WAAU,kCAC1H;AAAA,4BAAC,aAAU,WAAW,cAAc,KAAK,cAAc,aAAa,8BAAC,YAAS,SAAS,SAAS,SAAS,IAAI,GAAG,cAAY,EAAE,8CAA8C,EAAE,MAAM,UAAU,IAAI,EAAE,CAAC,GAAG,iBAAiB,aAAW,YAAY,WAAS,UAAU,CAAC,GAAG,OAAO,IAAI,IAAI,MAAM,OAAO,UAAQ,SAAS,IAAI,CAAC,GAAG,GAAE;AAAA,QAC9T,oBAAC,aAAU,WAAU,eAAe,oBAAU,IAAI,GAAE;AAAA,QACpD,oBAAC,aAAU,WAAW,cAAc,KAAK,cAAc,aAAc,eAAK,IAAI,GAAE;AAAA,WAHpC,IAI9C,CAAW,GAAE;AAAA,OACf,GACF;AAAA,IACA,oBAAC,OAAE,MAAK,UAAS,WAAU,yCAAyC,oBAAU,EAAE,gDAAgD,EAAE,OAAO,SAAS,OAAO,CAAC,GAAE;AAAA,KAC9J;AACF;AAEO,SAAS,qBAAqB,WAAoB;AACvD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yFAoBgF,cAAc,KAAK,KAAK,EAAE,oEAAoE,cAAc,KAAK,qEAAqE,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAkBjP,cAAc,KAAK,cAAc,WAAW;AAAA;AAAA,gCAE5C,cAAc,KAAK,cAAc,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAM5E;",
+  "names": []
+}

package/dist/modules/design_system/gallery/demos/text-inputs.js

@@ -0,0 +1,113 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+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 } 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 } 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"];
+function assetSource(asset) {
+  return typeof asset === "string" ? asset : asset.src;
+}
+function SourceTextInput({ kind, size = 36, state = "filled" }) {
+  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" ? "\u{1F642}" : kind === "date" ? "2026-09-18" : t("design_system.gallery.samples.textInput.sample"));
+  const [phone, setPhone] = React.useState(isPlaceholder ? void 0 : "+1 212 555 1234");
+  const [amount, setAmount] = React.useState({ 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(null);
+  const label = t(`design_system.gallery.samples.textInput.${kind}`);
+  const error = state === "error" ? t("design_system.gallery.samples.textInput.error") : void 0;
+  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 = [
+    { iso2: "US", dialCode: "+1", label: t("design_system.gallery.samples.textInput.us"), flag: "\u{1F1FA}\u{1F1F8}" },
+    { iso2: "PL", dialCode: "+48", label: t("design_system.gallery.samples.textInput.pl"), flag: "\u{1F1F5}\u{1F1F1}" }
+  ];
+  let control;
+  if (kind === "phone") {
+    control = /* @__PURE__ */ jsx(PhoneNumberField, { id, size, ariaLabel: label, ariaDescribedBy: `${id}-desc`, countryLabel: t("design_system.gallery.samples.textInput.country"), value: phone, onValueChange: setPhone, countries, disabled, externalError: error, renderCountryIcon: (country) => /* @__PURE__ */ jsx("img", { src: assetSource(country.iso2 === "PL" ? poland : unitedStates), alt: "", className: "size-5 object-contain" }) });
+  } else if (kind === "email") {
+    control = /* @__PURE__ */ jsx(EmailInput, { ...common, value: text, onChange: (event) => setText(event.target.value) });
+  } else if (kind === "website") {
+    control = /* @__PURE__ */ jsx(WebsiteInput, { ...common, value: text, onChange: (event) => setText(event.target.value) });
+  } else if (kind === "amount") {
+    control = /* @__PURE__ */ jsx(AmountInput, { ...common, value: amount, onChange: setAmount, currencies: [{ code: "USD", symbol: "$", label: "USD" }, { code: "EUR", symbol: "\u20AC", label: "EUR" }], renderCurrencyIcon: (currency) => /* @__PURE__ */ jsx("img", { src: assetSource(currency.code === "EUR" ? europeanUnion : unitedStates), alt: "", className: "size-5 object-contain" }) });
+  } else if (kind === "card") {
+    control = /* @__PURE__ */ jsx(CardInput, { ...common, value: card, onChange: setCard });
+  } else if (kind === "search") {
+    control = /* @__PURE__ */ jsx(SearchInput, { ...common, value: text, onChange: setText });
+  } else if (kind === "password") {
+    control = /* @__PURE__ */ jsx(PasswordInput, { ...common, value: text, onChange: (event) => setText(event.target.value) });
+  } else if (kind === "button") {
+    control = /* @__PURE__ */ jsx(ButtonInput, { ...common, value: text, onChange: (event) => setText(event.target.value), leftIcon: /* @__PURE__ */ jsx(User, {}), trailingAction: /* @__PURE__ */ jsx(CompactButton, { size: 24, appearance: "ghost", disabled, "aria-label": t("design_system.gallery.samples.textInput.send"), onClick: () => setFeedback(t("design_system.gallery.samples.textInput.sent")), children: /* @__PURE__ */ jsx(Send, { className: "size-5" }) }) });
+  } else if (kind === "dropdown") {
+    control = /* @__PURE__ */ jsx(Input, { ...common, value: text, onChange: (event) => setText(event.target.value), leftIcon: /* @__PURE__ */ jsx(User, {}), trailing: /* @__PURE__ */ jsxs(Select, { value: permission, onValueChange: setPermission, disabled, children: [
+      /* @__PURE__ */ jsxs(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", children: [
+        /* @__PURE__ */ jsx(Globe, { className: "size-5", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx(SelectValue, {})
+      ] }),
+      /* @__PURE__ */ jsxs(SelectContent, { children: [
+        /* @__PURE__ */ jsx(SelectItem, { value: "view", children: t("design_system.gallery.samples.textInput.view") }),
+        /* @__PURE__ */ jsx(SelectItem, { value: "edit", children: t("design_system.gallery.samples.textInput.edit") })
+      ] })
+    ] }) });
+  } else if (kind === "emoji") {
+    control = /* @__PURE__ */ jsx(Input, { ...common, value: text, onChange: (event) => setText(event.target.value), leading: /* @__PURE__ */ jsxs(Popover, { open: emojiOpen, onOpenChange: setEmojiOpen, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(CompactButton, { size: 20, appearance: "ghost", disabled, "aria-label": t("design_system.gallery.samples.textInput.chooseEmoji"), children: /* @__PURE__ */ jsx(Smile, { className: "size-5" }) }) }),
+      /* @__PURE__ */ jsx(PopoverContent, { className: "flex w-fit gap-2 p-2", children: ["\u{1F642}", "\u{1F389}", "\u{1F680}", "\u2764\uFE0F"].map((emoji) => /* @__PURE__ */ jsx(CompactButton, { size: 24, appearance: "ghost", "aria-label": emoji, onClick: () => {
+        setText((current) => `${current}${emoji}`);
+        setEmojiOpen(false);
+      }, children: emoji }, emoji)) })
+    ] }) });
+  } else if (kind === "date") {
+    control = /* @__PURE__ */ jsx(Input, { ...common, ref: dateRef, type: "date", value: text, onChange: (event) => setText(event.target.value), inputClassName: "[&::-webkit-calendar-picker-indicator]:hidden", leading: /* @__PURE__ */ jsx(CompactButton, { size: 20, appearance: "ghost", disabled, "aria-label": t("design_system.gallery.samples.textInput.chooseDate"), onClick: () => {
+      dateRef.current?.focus();
+      dateRef.current?.showPicker?.();
+    }, children: /* @__PURE__ */ jsx(Calendar, { className: "size-5" }) }) });
+  } else {
+    control = /* @__PURE__ */ jsx(Input, { ...common, value: text, onChange: (event) => setText(event.target.value), leftIcon: /* @__PURE__ */ jsx(User, {}), rightIcon: state === "error" ? /* @__PURE__ */ jsx(Info, {}) : void 0 });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "min-w-0", "data-input-kind": kind, "data-input-size": size, children: [
+    /* @__PURE__ */ jsx(FormField, { id, label, description: hint, error: kind === "phone" ? void 0 : error, disabled, children: control }),
+    feedback ? /* @__PURE__ */ jsx("output", { className: "mt-2 block text-xs text-muted-foreground", "aria-live": "polite", children: feedback }) : null,
+    kind === "phone" && phone ? /* @__PURE__ */ jsx("output", { className: "mt-2 block text-xs text-muted-foreground", "aria-live": "polite", children: phone }) : null
+  ] });
+}
+function SourceTextInputMatrix({ size = 36, state = "filled" }) {
+  return /* @__PURE__ */ jsx("div", { className: "grid w-full grid-cols-1 gap-6 lg:grid-cols-2 xl:grid-cols-3", children: inputKinds.map((kind) => /* @__PURE__ */ jsx(SourceTextInput, { kind, size, state }, `${kind}-${size}-${state}`)) });
+}
+function SourcePhoneExamples({ state = "filled" }) {
+  return /* @__PURE__ */ jsx("div", { className: "grid w-full grid-cols-1 gap-6 lg:grid-cols-3", children: [32, 36, 40].map((size) => /* @__PURE__ */ jsx(SourceTextInput, { kind: "phone", size, state }, `${size}-${state}`)) });
+}
+function SourceTextareaExamples() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "grid w-full grid-cols-1 gap-6 lg:grid-cols-2", children: ["placeholder", "filled", "error", "disabled"].map((state) => /* @__PURE__ */ jsx(FormField, { 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") : void 0, children: /* @__PURE__ */ jsx(Textarea, { appearance: "source", showCount: true, maxLength: 200, placeholder: t("design_system.gallery.samples.textInput.placeholder"), defaultValue: state === "placeholder" ? "" : t("design_system.gallery.samples.textInput.noteValue") }) }, state)) });
+}
+export {
+  SourcePhoneExamples,
+  SourceTextInput,
+  SourceTextInputMatrix,
+  SourceTextareaExamples
+};
+//# sourceMappingURL=text-inputs.js.map