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

package/dist/modules/design_system/gallery/demos/menu-sources.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/demos/menu-sources.ts"],
+  "sourcesContent": ["export const selectSourceCode = \"import * as React from 'react'\\nimport { Globe, UserRound } from 'lucide-react'\\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\\nimport { Avatar } from '@open-mercato/ui/primitives/avatar'\\nimport mastercard from '@open-mercato/core/modules/design_system/gallery/assets/menu-mastercard.svg'\\nimport apex from '@open-mercato/core/modules/design_system/gallery/assets/menu-apex.svg'\\nimport spotify from '@open-mercato/core/modules/design_system/gallery/assets/menu-spotify.svg'\\nimport unitedStates from '@open-mercato/core/modules/design_system/gallery/assets/menu-united-states.svg'\\nimport google from '@open-mercato/core/modules/design_system/gallery/assets/select-google.png'\\nimport poland from '@open-mercato/core/modules/design_system/gallery/assets/select-poland.png'\\nimport avatar from '@open-mercato/core/modules/design_system/gallery/assets/avatar-illustration.png'\\n\\nexport type MenuKind = 'basic' | 'country' | 'avatar' | 'provider' | 'brand' | 'company' | 'icon'\\nexport const selectKinds: MenuKind[] = ['basic', 'country', 'avatar', 'provider', 'brand', 'company']\\nexport const commandKinds: MenuKind[] = ['basic', 'avatar', 'icon', 'brand', 'company', 'country']\\n\\nconst imageSource = (asset: string | { readonly src: string }) => typeof asset === 'string' ? asset : asset.src\\n\\nexport function useMenuChoices(kind: MenuKind) {\\n  const t = useT()\\n  return [0, 1, 2].map((index) => ({\\n    value: `${kind}-${index}`,\\n    label: t(`design_system.gallery.samples.menu.${kind}.${index}`),\\n    description: t('design_system.gallery.samples.menu.description'),\\n    disabled: index === 2,\\n    alternative: index !== 0,\\n  }))\\n}\\n\\nexport function MenuVisual({ kind, large = false, alternative = false, providerSize = 'row' }: {\\n  kind: MenuKind\\n  large?: boolean\\n  alternative?: boolean\\n  providerSize?: 'row' | 'select'\\n}) {\\n  if (kind === 'avatar') {\\n    return <Avatar size={large ? 40 : 20} label={alternative ? 'Sophia Williams' : 'James Brown'} src={alternative ? undefined : imageSource(avatar)} />\\n  }\\n  const asset = kind === 'country' ? alternative ? poland : unitedStates\\n    : kind === 'provider' ? mastercard\\n      : kind === 'brand' ? alternative ? google : spotify\\n        : kind === 'company' ? apex : undefined\\n  const Icon = kind === 'icon' ? UserRound : Globe\\n  const content = asset\\n    ? <img src={imageSource(asset)} alt=\\\"\\\" className={kind === 'provider' ? providerSize === 'select' ? 'h-6 w-8 object-contain' : 'h-5 w-6.5 object-contain' : large ? 'size-6 object-contain' : 'size-5 object-contain'} />\\n    : <Icon aria-hidden=\\\"true\\\" className={large ? 'size-6' : 'size-5'} />\\n  return <span aria-hidden=\\\"true\\\" className={large ? 'flex size-10 shrink-0 items-center justify-center rounded-full border border-input bg-background text-muted-foreground' : 'inline-flex shrink-0 items-center justify-center text-muted-foreground'}>{content}</span>\\n}\\n\\nimport { Info, Plus } from 'lucide-react'\\nimport { Button } from '@open-mercato/ui/primitives/button'\\nimport { Badge } from '@open-mercato/ui/primitives/badge'\\nimport { Kbd } from '@open-mercato/ui/primitives/kbd'\\nimport { FormField } from '@open-mercato/ui/primitives/form-field'\\nimport { SimpleTooltip } from '@open-mercato/ui/primitives/tooltip'\\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectTriggerLeading, SelectValue } from '@open-mercato/ui/primitives/select'\\nimport { Dropdown, DropdownTrigger, DropdownContent, DropdownInput, DropdownList, DropdownEmpty, DropdownItem, DropdownFooter, DropdownCaption } from '@open-mercato/ui/primitives/dropdown'\\nimport { CommandMenu, CommandMenuTrigger, CommandMenuContent, CommandMenuInput, CommandMenuList, CommandMenuEmpty, CommandMenuItem, CommandMenuGroup, CommandMenuSeparator, CommandMenuFooter } from '@open-mercato/ui/primitives/command-menu'\\n\\nexport function SelectSourceExample({ kind, size = 36, state = 'filled' }: {\\n  kind: MenuKind\\n  size?: 32 | 36 | 40\\n  state?: 'default' | 'filled' | 'disabled' | 'error'\\n}) {\\n  const t = useT()\\n  const choices = useMenuChoices(kind)\\n  const [value, setValue] = React.useState(state === 'default' || state === 'error' ? '' : choices[0].value)\\n  const selected = choices.find((choice) => choice.value === value)\\n  const disabled = state === 'disabled'\\n  const label = t(`design_system.gallery.samples.menu.kind.${kind}`)\\n  const providerPadding = kind !== 'provider' ? undefined : size === 40 ? 'p-2' : size === 36 ? 'p-1.5' : 'p-1'\\n  return (\\n    <Select value={value} onValueChange={setValue} disabled={disabled}>\\n      <FormField label={label} disabled={disabled} description={t('design_system.gallery.samples.menu.hint')} error={state === 'error' ? t('design_system.gallery.samples.menu.required') : undefined}>\\n        <SelectTrigger size={size} className={providerPadding}>\\n          {kind !== 'basic' && <SelectTriggerLeading><MenuVisual kind={kind} alternative={selected?.alternative} providerSize=\\\"select\\\" /></SelectTriggerLeading>}\\n          <SelectValue className=\\\"min-w-0 flex-1 text-left\\\" placeholder={t('design_system.gallery.samples.menu.placeholder')} />\\n        </SelectTrigger>\\n      </FormField>\\n      <SelectContent>\\n        {choices.map((choice) => <SelectItem key={choice.value} value={choice.value} disabled={choice.disabled} leading={kind === 'basic' ? undefined : <MenuVisual kind={kind} alternative={choice.alternative} />}>\\n          {choice.label}\\n        </SelectItem>)}\\n      </SelectContent>\\n    </Select>\\n  )\\n}\\n\\nexport function SelectSourceMatrix({ size = 36, state = 'filled' }: { size?: 32 | 36 | 40; state?: 'default' | 'filled' | 'disabled' | 'error' }) {\\n  return <div className=\\\"grid w-full gap-6 sm:grid-cols-2 xl:grid-cols-3\\\">{selectKinds.map((kind) => <SelectSourceExample key={kind} kind={kind} size={size} state={state} />)}</div>\\n}\\n\\n\"\n\nexport const dropdownSourceCode = \"import * as React from 'react'\\nimport { Globe, UserRound } from 'lucide-react'\\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\\nimport { Avatar } from '@open-mercato/ui/primitives/avatar'\\nimport mastercard from '@open-mercato/core/modules/design_system/gallery/assets/menu-mastercard.svg'\\nimport apex from '@open-mercato/core/modules/design_system/gallery/assets/menu-apex.svg'\\nimport spotify from '@open-mercato/core/modules/design_system/gallery/assets/menu-spotify.svg'\\nimport unitedStates from '@open-mercato/core/modules/design_system/gallery/assets/menu-united-states.svg'\\nimport google from '@open-mercato/core/modules/design_system/gallery/assets/select-google.png'\\nimport poland from '@open-mercato/core/modules/design_system/gallery/assets/select-poland.png'\\nimport avatar from '@open-mercato/core/modules/design_system/gallery/assets/avatar-illustration.png'\\n\\nexport type MenuKind = 'basic' | 'country' | 'avatar' | 'provider' | 'brand' | 'company' | 'icon'\\nexport const selectKinds: MenuKind[] = ['basic', 'country', 'avatar', 'provider', 'brand', 'company']\\nexport const commandKinds: MenuKind[] = ['basic', 'avatar', 'icon', 'brand', 'company', 'country']\\n\\nconst imageSource = (asset: string | { readonly src: string }) => typeof asset === 'string' ? asset : asset.src\\n\\nexport function useMenuChoices(kind: MenuKind) {\\n  const t = useT()\\n  return [0, 1, 2].map((index) => ({\\n    value: `${kind}-${index}`,\\n    label: t(`design_system.gallery.samples.menu.${kind}.${index}`),\\n    description: t('design_system.gallery.samples.menu.description'),\\n    disabled: index === 2,\\n    alternative: index !== 0,\\n  }))\\n}\\n\\nexport function MenuVisual({ kind, large = false, alternative = false, providerSize = 'row' }: {\\n  kind: MenuKind\\n  large?: boolean\\n  alternative?: boolean\\n  providerSize?: 'row' | 'select'\\n}) {\\n  if (kind === 'avatar') {\\n    return <Avatar size={large ? 40 : 20} label={alternative ? 'Sophia Williams' : 'James Brown'} src={alternative ? undefined : imageSource(avatar)} />\\n  }\\n  const asset = kind === 'country' ? alternative ? poland : unitedStates\\n    : kind === 'provider' ? mastercard\\n      : kind === 'brand' ? alternative ? google : spotify\\n        : kind === 'company' ? apex : undefined\\n  const Icon = kind === 'icon' ? UserRound : Globe\\n  const content = asset\\n    ? <img src={imageSource(asset)} alt=\\\"\\\" className={kind === 'provider' ? providerSize === 'select' ? 'h-6 w-8 object-contain' : 'h-5 w-6.5 object-contain' : large ? 'size-6 object-contain' : 'size-5 object-contain'} />\\n    : <Icon aria-hidden=\\\"true\\\" className={large ? 'size-6' : 'size-5'} />\\n  return <span aria-hidden=\\\"true\\\" className={large ? 'flex size-10 shrink-0 items-center justify-center rounded-full border border-input bg-background text-muted-foreground' : 'inline-flex shrink-0 items-center justify-center text-muted-foreground'}>{content}</span>\\n}\\n\\nimport { Info, Plus } from 'lucide-react'\\nimport { Button } from '@open-mercato/ui/primitives/button'\\nimport { Badge } from '@open-mercato/ui/primitives/badge'\\nimport { Kbd } from '@open-mercato/ui/primitives/kbd'\\nimport { FormField } from '@open-mercato/ui/primitives/form-field'\\nimport { SimpleTooltip } from '@open-mercato/ui/primitives/tooltip'\\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectTriggerLeading, SelectValue } from '@open-mercato/ui/primitives/select'\\nimport { Dropdown, DropdownTrigger, DropdownContent, DropdownInput, DropdownList, DropdownEmpty, DropdownItem, DropdownFooter, DropdownCaption } from '@open-mercato/ui/primitives/dropdown'\\nimport { CommandMenu, CommandMenuTrigger, CommandMenuContent, CommandMenuInput, CommandMenuList, CommandMenuEmpty, CommandMenuItem, CommandMenuGroup, CommandMenuSeparator, CommandMenuFooter } from '@open-mercato/ui/primitives/command-menu'\\n\\nexport function DropdownSourceExample({ size = 36, empty = false }: { size?: 36 | 56; empty?: boolean }) {\\n  const t = useT()\\n  const [open, setOpen] = React.useState(false)\\n  const [value, setValue] = React.useState('basic')\\n  const [query, setQuery] = React.useState(empty ? 'zzzz' : '')\\n  const [workspaceCount, setWorkspaceCount] = React.useState(0)\\n  return (\\n    <div className=\\\"flex w-full flex-col items-start gap-3\\\">\\n      <Dropdown open={open} onOpenChange={setOpen}>\\n        <DropdownTrigger asChild><Button variant=\\\"outline\\\">{t('design_system.gallery.samples.menu.openDropdown')}</Button></DropdownTrigger>\\n        <DropdownContent className=\\\"w-96 max-w-full\\\" aria-label={t('design_system.gallery.samples.menu.openDropdown')} commandProps={{ label: t('design_system.gallery.samples.menu.options') }}>\\n          <DropdownInput value={query} onValueChange={setQuery} aria-label={t('design_system.gallery.samples.menu.search')} placeholder={t('design_system.gallery.samples.menu.search')} />\\n          <DropdownList>\\n            <DropdownEmpty>{t('design_system.gallery.samples.menu.noResults')}</DropdownEmpty>\\n            {selectKinds.map((kind) => {\\n              const label = t(`design_system.gallery.samples.menu.${kind}.0`)\\n              return <DropdownItem key={kind} value={label} size={size} checked={value === kind} leading={<MenuVisual kind={kind} large={size === 56} />}\\n                description={size === 56 ? t('design_system.gallery.samples.menu.description') : undefined}\\n                sublabel={kind === 'basic' ? t('design_system.gallery.samples.menu.sublabel') : undefined}\\n                badge={kind === 'brand' ? <Badge appearance=\\\"lighter\\\" tone=\\\"info\\\" size={20}>{t('design_system.gallery.samples.menu.new')}</Badge> : undefined}\\n                shortcut={kind === 'company' ? <Kbd>\\u23181</Kbd> : undefined}\\n                onSelect={() => { setValue(kind); setOpen(false) }}>\\n                {label}\\n              </DropdownItem>\\n            })}\\n            <DropdownItem value={t('design_system.gallery.samples.menu.unavailable')} size={size} disabled leading={<MenuVisual kind=\\\"basic\\\" large={size === 56} />}>{t('design_system.gallery.samples.menu.unavailable')}</DropdownItem>\\n          </DropdownList>\\n          <DropdownFooter><Button variant=\\\"outline\\\" size=\\\"sm\\\" className=\\\"w-full\\\" onClick={() => { setWorkspaceCount((count) => count + 1); setOpen(false) }}><Plus className=\\\"size-5\\\" />{t('design_system.gallery.samples.menu.addWorkspace')}</Button></DropdownFooter>\\n          <DropdownCaption>{t('design_system.gallery.samples.menu.localCaption')}</DropdownCaption>\\n        </DropdownContent>\\n      </Dropdown>\\n      <output aria-live=\\\"polite\\\" className=\\\"text-sm text-muted-foreground\\\">{t('design_system.gallery.samples.menu.selected', { value: t(`design_system.gallery.samples.menu.${value}.0`) })}</output>\\n      {workspaceCount > 0 && <output aria-live=\\\"polite\\\" className=\\\"text-sm text-muted-foreground\\\">{t('design_system.gallery.samples.menu.created', { count: workspaceCount })}</output>}\\n    </div>\\n  )\\n}\\n\\n\"\n\nexport const commandSourceCode = \"import * as React from 'react'\\nimport { Globe, UserRound } from 'lucide-react'\\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\\nimport { Avatar } from '@open-mercato/ui/primitives/avatar'\\nimport mastercard from '@open-mercato/core/modules/design_system/gallery/assets/menu-mastercard.svg'\\nimport apex from '@open-mercato/core/modules/design_system/gallery/assets/menu-apex.svg'\\nimport spotify from '@open-mercato/core/modules/design_system/gallery/assets/menu-spotify.svg'\\nimport unitedStates from '@open-mercato/core/modules/design_system/gallery/assets/menu-united-states.svg'\\nimport google from '@open-mercato/core/modules/design_system/gallery/assets/select-google.png'\\nimport poland from '@open-mercato/core/modules/design_system/gallery/assets/select-poland.png'\\nimport avatar from '@open-mercato/core/modules/design_system/gallery/assets/avatar-illustration.png'\\n\\nexport type MenuKind = 'basic' | 'country' | 'avatar' | 'provider' | 'brand' | 'company' | 'icon'\\nexport const selectKinds: MenuKind[] = ['basic', 'country', 'avatar', 'provider', 'brand', 'company']\\nexport const commandKinds: MenuKind[] = ['basic', 'avatar', 'icon', 'brand', 'company', 'country']\\n\\nconst imageSource = (asset: string | { readonly src: string }) => typeof asset === 'string' ? asset : asset.src\\n\\nexport function useMenuChoices(kind: MenuKind) {\\n  const t = useT()\\n  return [0, 1, 2].map((index) => ({\\n    value: `${kind}-${index}`,\\n    label: t(`design_system.gallery.samples.menu.${kind}.${index}`),\\n    description: t('design_system.gallery.samples.menu.description'),\\n    disabled: index === 2,\\n    alternative: index !== 0,\\n  }))\\n}\\n\\nexport function MenuVisual({ kind, large = false, alternative = false, providerSize = 'row' }: {\\n  kind: MenuKind\\n  large?: boolean\\n  alternative?: boolean\\n  providerSize?: 'row' | 'select'\\n}) {\\n  if (kind === 'avatar') {\\n    return <Avatar size={large ? 40 : 20} label={alternative ? 'Sophia Williams' : 'James Brown'} src={alternative ? undefined : imageSource(avatar)} />\\n  }\\n  const asset = kind === 'country' ? alternative ? poland : unitedStates\\n    : kind === 'provider' ? mastercard\\n      : kind === 'brand' ? alternative ? google : spotify\\n        : kind === 'company' ? apex : undefined\\n  const Icon = kind === 'icon' ? UserRound : Globe\\n  const content = asset\\n    ? <img src={imageSource(asset)} alt=\\\"\\\" className={kind === 'provider' ? providerSize === 'select' ? 'h-6 w-8 object-contain' : 'h-5 w-6.5 object-contain' : large ? 'size-6 object-contain' : 'size-5 object-contain'} />\\n    : <Icon aria-hidden=\\\"true\\\" className={large ? 'size-6' : 'size-5'} />\\n  return <span aria-hidden=\\\"true\\\" className={large ? 'flex size-10 shrink-0 items-center justify-center rounded-full border border-input bg-background text-muted-foreground' : 'inline-flex shrink-0 items-center justify-center text-muted-foreground'}>{content}</span>\\n}\\n\\nimport { Info, Plus } from 'lucide-react'\\nimport { Button } from '@open-mercato/ui/primitives/button'\\nimport { Badge } from '@open-mercato/ui/primitives/badge'\\nimport { Kbd } from '@open-mercato/ui/primitives/kbd'\\nimport { FormField } from '@open-mercato/ui/primitives/form-field'\\nimport { SimpleTooltip } from '@open-mercato/ui/primitives/tooltip'\\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectTriggerLeading, SelectValue } from '@open-mercato/ui/primitives/select'\\nimport { Dropdown, DropdownTrigger, DropdownContent, DropdownInput, DropdownList, DropdownEmpty, DropdownItem, DropdownFooter, DropdownCaption } from '@open-mercato/ui/primitives/dropdown'\\nimport { CommandMenu, CommandMenuTrigger, CommandMenuContent, CommandMenuInput, CommandMenuList, CommandMenuEmpty, CommandMenuItem, CommandMenuGroup, CommandMenuSeparator, CommandMenuFooter } from '@open-mercato/ui/primitives/command-menu'\\n\\nfunction CommandSourceRows({ size, onSelect }: { size: 40 | 64; onSelect: (value: string) => void }) {\\n  const t = useT()\\n  return <>{commandKinds.map((kind) => {\\n    const label = t(`design_system.gallery.samples.menu.${kind}.0`)\\n    return <CommandMenuItem key={kind} value={label} size={size} leading={kind === 'basic' ? undefined : <MenuVisual kind={kind} large={size === 64} />}\\n      description={size === 64 ? t('design_system.gallery.samples.menu.description') : undefined}\\n      sublabel={kind === 'basic' ? t('design_system.gallery.samples.menu.sublabel') : undefined}\\n      badge={kind === 'brand' ? <Badge appearance=\\\"lighter\\\" tone=\\\"info\\\" size={20}>{t('design_system.gallery.samples.menu.new')}</Badge> : undefined}\\n      shortcut={kind === 'company' ? <Kbd>\\u2318K</Kbd> : undefined}\\n      onSelect={() => onSelect(label)}>{label}</CommandMenuItem>\\n  })}</>\\n}\\n\\nexport function CommandSourceExample({ size = 40, empty = false, withGroups = false }: { size?: 40 | 64; empty?: boolean; withGroups?: boolean }) {\\n  const t = useT()\\n  const [open, setOpen] = React.useState(false)\\n  const [query, setQuery] = React.useState(empty ? 'zzzz' : '')\\n  const [result, setResult] = React.useState('')\\n  const onSelect = (label: string) => { setResult(label); setOpen(false) }\\n  const rows = <CommandSourceRows size={size} onSelect={onSelect} />\\n  return (\\n    <div className=\\\"flex flex-col items-start gap-3\\\">\\n      <CommandMenu open={open} onOpenChange={setOpen}>\\n        <CommandMenuTrigger asChild><Button variant=\\\"outline\\\">{t('design_system.gallery.samples.menu.openCommand')}</Button></CommandMenuTrigger>\\n        <CommandMenuContent title={t('design_system.gallery.samples.menu.openCommand')} commandProps={{ loop: true }}>\\n          <CommandMenuInput appearance=\\\"source\\\" value={query} onValueChange={setQuery} aria-label={t('design_system.gallery.samples.menu.search')} placeholder={t('design_system.gallery.samples.menu.search')}\\n            trailing={<SimpleTooltip content={t('design_system.gallery.samples.menu.hint')}><Button variant=\\\"ghost\\\" size=\\\"2xs\\\" aria-label={t('design_system.gallery.samples.menu.help')}><Info className=\\\"size-5\\\" /></Button></SimpleTooltip>} />\\n          <CommandMenuList>\\n            <CommandMenuEmpty>{t('design_system.gallery.samples.menu.noResults')}</CommandMenuEmpty>\\n            {withGroups ? <CommandMenuGroup heading={t('design_system.gallery.samples.menu.caption')} actionLabel={t('design_system.gallery.samples.menu.seeAll')} onAction={() => setQuery('')}>{rows}</CommandMenuGroup> : rows}\\n            {withGroups && <><CommandMenuSeparator /><CommandMenuGroup heading={t('design_system.gallery.samples.menu.unavailable')}><CommandMenuItem value=\\\"unavailable\\\" disabled size={size}>{t('design_system.gallery.samples.menu.unavailable')}</CommandMenuItem></CommandMenuGroup></>}\\n          </CommandMenuList>\\n          <CommandMenuFooter className=\\\"min-h-12 flex-wrap px-5 py-3.5\\\" helpSlot={<Button variant=\\\"link\\\" size=\\\"2xs\\\" onClick={() => setResult(t('design_system.gallery.samples.menu.hint'))}>{t('design_system.gallery.samples.menu.help')}</Button>} />\\n        </CommandMenuContent>\\n      </CommandMenu>\\n      {result && <output aria-live=\\\"polite\\\" className=\\\"text-sm text-muted-foreground\\\">{t('design_system.gallery.samples.menu.selected', { value: result })}</output>}\\n    </div>\\n  )\\n}\\n\"\n"],
+  "mappings": "AAAO,MAAM,mBAAmB;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;AAEzB,MAAM,qBAAqB;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;AAE3B,MAAM,oBAAoB;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;",
+  "names": []
+}

package/dist/modules/design_system/gallery/demos/menus.js

@@ -0,0 +1,150 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Info, Plus } from "lucide-react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { Badge } from "@open-mercato/ui/primitives/badge";
+import { Kbd } from "@open-mercato/ui/primitives/kbd";
+import { FormField } from "@open-mercato/ui/primitives/form-field";
+import { SimpleTooltip } from "@open-mercato/ui/primitives/tooltip";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectTriggerLeading, SelectValue } from "@open-mercato/ui/primitives/select";
+import { Dropdown, DropdownTrigger, DropdownContent, DropdownInput, DropdownList, DropdownEmpty, DropdownItem, DropdownFooter, DropdownCaption } from "@open-mercato/ui/primitives/dropdown";
+import { CommandMenu, CommandMenuTrigger, CommandMenuContent, CommandMenuInput, CommandMenuList, CommandMenuEmpty, CommandMenuItem, CommandMenuGroup, CommandMenuSeparator, CommandMenuFooter } from "@open-mercato/ui/primitives/command-menu";
+import { MenuVisual, useMenuChoices, selectKinds, commandKinds } from "./menu-fixtures.js";
+function SelectSourceExample({ kind, size = 36, state = "filled" }) {
+  const t = useT();
+  const choices = useMenuChoices(kind);
+  const [value, setValue] = React.useState(state === "default" || state === "error" ? "" : choices[0].value);
+  const selected = choices.find((choice) => choice.value === value);
+  const disabled = state === "disabled";
+  const label = t(`design_system.gallery.samples.menu.kind.${kind}`);
+  const providerPadding = kind !== "provider" ? void 0 : size === 40 ? "p-2" : size === 36 ? "p-1.5" : "p-1";
+  return /* @__PURE__ */ jsxs(Select, { value, onValueChange: setValue, disabled, children: [
+    /* @__PURE__ */ jsx(FormField, { label, disabled, description: t("design_system.gallery.samples.menu.hint"), error: state === "error" ? t("design_system.gallery.samples.menu.required") : void 0, children: /* @__PURE__ */ jsxs(SelectTrigger, { size, className: providerPadding, children: [
+      kind !== "basic" && /* @__PURE__ */ jsx(SelectTriggerLeading, { children: /* @__PURE__ */ jsx(MenuVisual, { kind, alternative: selected?.alternative, providerSize: "select" }) }),
+      /* @__PURE__ */ jsx(SelectValue, { className: "min-w-0 flex-1 text-left", placeholder: t("design_system.gallery.samples.menu.placeholder") })
+    ] }) }),
+    /* @__PURE__ */ jsx(SelectContent, { children: choices.map((choice) => /* @__PURE__ */ jsx(SelectItem, { value: choice.value, disabled: choice.disabled, leading: kind === "basic" ? void 0 : /* @__PURE__ */ jsx(MenuVisual, { kind, alternative: choice.alternative }), children: choice.label }, choice.value)) })
+  ] });
+}
+function SelectSourceMatrix({ size = 36, state = "filled" }) {
+  return /* @__PURE__ */ jsx("div", { className: "grid w-full gap-6 sm:grid-cols-2 xl:grid-cols-3", children: selectKinds.map((kind) => /* @__PURE__ */ jsx(SelectSourceExample, { kind, size, state }, kind)) });
+}
+function DropdownSourceExample({ size = 36, empty = false }) {
+  const t = useT();
+  const [open, setOpen] = React.useState(false);
+  const [value, setValue] = React.useState("basic");
+  const [query, setQuery] = React.useState(empty ? "zzzz" : "");
+  const [workspaceCount, setWorkspaceCount] = React.useState(0);
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-start gap-3", children: [
+    /* @__PURE__ */ jsxs(Dropdown, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(DropdownTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: t("design_system.gallery.samples.menu.openDropdown") }) }),
+      /* @__PURE__ */ jsxs(DropdownContent, { className: "w-96 max-w-full", "aria-label": t("design_system.gallery.samples.menu.openDropdown"), commandProps: { label: t("design_system.gallery.samples.menu.options") }, children: [
+        /* @__PURE__ */ jsx(DropdownInput, { value: query, onValueChange: setQuery, "aria-label": t("design_system.gallery.samples.menu.search"), placeholder: t("design_system.gallery.samples.menu.search") }),
+        /* @__PURE__ */ jsxs(DropdownList, { children: [
+          /* @__PURE__ */ jsx(DropdownEmpty, { children: t("design_system.gallery.samples.menu.noResults") }),
+          selectKinds.map((kind) => {
+            const label = t(`design_system.gallery.samples.menu.${kind}.0`);
+            return /* @__PURE__ */ jsx(
+              DropdownItem,
+              {
+                value: label,
+                size,
+                checked: value === kind,
+                leading: /* @__PURE__ */ jsx(MenuVisual, { kind, large: size === 56 }),
+                description: size === 56 ? t("design_system.gallery.samples.menu.description") : void 0,
+                sublabel: kind === "basic" ? t("design_system.gallery.samples.menu.sublabel") : void 0,
+                badge: kind === "brand" ? /* @__PURE__ */ jsx(Badge, { appearance: "lighter", tone: "info", size: 20, children: t("design_system.gallery.samples.menu.new") }) : void 0,
+                shortcut: kind === "company" ? /* @__PURE__ */ jsx(Kbd, { children: "\u23181" }) : void 0,
+                onSelect: () => {
+                  setValue(kind);
+                  setOpen(false);
+                },
+                children: label
+              },
+              kind
+            );
+          }),
+          /* @__PURE__ */ jsx(DropdownItem, { value: t("design_system.gallery.samples.menu.unavailable"), size, disabled: true, leading: /* @__PURE__ */ jsx(MenuVisual, { kind: "basic", large: size === 56 }), children: t("design_system.gallery.samples.menu.unavailable") })
+        ] }),
+        /* @__PURE__ */ jsx(DropdownFooter, { children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className: "w-full", onClick: () => {
+          setWorkspaceCount((count) => count + 1);
+          setOpen(false);
+        }, children: [
+          /* @__PURE__ */ jsx(Plus, { className: "size-5" }),
+          t("design_system.gallery.samples.menu.addWorkspace")
+        ] }) }),
+        /* @__PURE__ */ jsx(DropdownCaption, { children: t("design_system.gallery.samples.menu.localCaption") })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("output", { "aria-live": "polite", className: "text-sm text-muted-foreground", children: t("design_system.gallery.samples.menu.selected", { value: t(`design_system.gallery.samples.menu.${value}.0`) }) }),
+    workspaceCount > 0 && /* @__PURE__ */ jsx("output", { "aria-live": "polite", className: "text-sm text-muted-foreground", children: t("design_system.gallery.samples.menu.created", { count: workspaceCount }) })
+  ] });
+}
+function CommandSourceRows({ size, onSelect }) {
+  const t = useT();
+  return /* @__PURE__ */ jsx(Fragment, { children: commandKinds.map((kind) => {
+    const label = t(`design_system.gallery.samples.menu.${kind}.0`);
+    return /* @__PURE__ */ jsx(
+      CommandMenuItem,
+      {
+        value: label,
+        size,
+        leading: kind === "basic" ? void 0 : /* @__PURE__ */ jsx(MenuVisual, { kind, large: size === 64 }),
+        description: size === 64 ? t("design_system.gallery.samples.menu.description") : void 0,
+        sublabel: kind === "basic" ? t("design_system.gallery.samples.menu.sublabel") : void 0,
+        badge: kind === "brand" ? /* @__PURE__ */ jsx(Badge, { appearance: "lighter", tone: "info", size: 20, children: t("design_system.gallery.samples.menu.new") }) : void 0,
+        shortcut: kind === "company" ? /* @__PURE__ */ jsx(Kbd, { children: "\u2318K" }) : void 0,
+        onSelect: () => onSelect(label),
+        children: label
+      },
+      kind
+    );
+  }) });
+}
+function CommandSourceExample({ size = 40, empty = false, withGroups = false }) {
+  const t = useT();
+  const [open, setOpen] = React.useState(false);
+  const [query, setQuery] = React.useState(empty ? "zzzz" : "");
+  const [result, setResult] = React.useState("");
+  const onSelect = (label) => {
+    setResult(label);
+    setOpen(false);
+  };
+  const rows = /* @__PURE__ */ jsx(CommandSourceRows, { size, onSelect });
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-3", children: [
+    /* @__PURE__ */ jsxs(CommandMenu, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(CommandMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: t("design_system.gallery.samples.menu.openCommand") }) }),
+      /* @__PURE__ */ jsxs(CommandMenuContent, { title: t("design_system.gallery.samples.menu.openCommand"), commandProps: { loop: true }, children: [
+        /* @__PURE__ */ jsx(
+          CommandMenuInput,
+          {
+            appearance: "source",
+            value: query,
+            onValueChange: setQuery,
+            "aria-label": t("design_system.gallery.samples.menu.search"),
+            placeholder: t("design_system.gallery.samples.menu.search"),
+            trailing: /* @__PURE__ */ jsx(SimpleTooltip, { content: t("design_system.gallery.samples.menu.hint"), children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "2xs", "aria-label": t("design_system.gallery.samples.menu.help"), children: /* @__PURE__ */ jsx(Info, { className: "size-5" }) }) })
+          }
+        ),
+        /* @__PURE__ */ jsxs(CommandMenuList, { children: [
+          /* @__PURE__ */ jsx(CommandMenuEmpty, { children: t("design_system.gallery.samples.menu.noResults") }),
+          withGroups ? /* @__PURE__ */ jsx(CommandMenuGroup, { heading: t("design_system.gallery.samples.menu.caption"), actionLabel: t("design_system.gallery.samples.menu.seeAll"), onAction: () => setQuery(""), children: rows }) : rows,
+          withGroups && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(CommandMenuSeparator, {}),
+            /* @__PURE__ */ jsx(CommandMenuGroup, { heading: t("design_system.gallery.samples.menu.unavailable"), children: /* @__PURE__ */ jsx(CommandMenuItem, { value: "unavailable", disabled: true, size, children: t("design_system.gallery.samples.menu.unavailable") }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(CommandMenuFooter, { className: "min-h-12 flex-wrap px-5 py-3.5", helpSlot: /* @__PURE__ */ jsx(Button, { variant: "link", size: "2xs", onClick: () => setResult(t("design_system.gallery.samples.menu.hint")), children: t("design_system.gallery.samples.menu.help") }) })
+      ] })
+    ] }),
+    result && /* @__PURE__ */ jsx("output", { "aria-live": "polite", className: "text-sm text-muted-foreground", children: t("design_system.gallery.samples.menu.selected", { value: result }) })
+  ] });
+}
+export {
+  CommandSourceExample,
+  DropdownSourceExample,
+  SelectSourceExample,
+  SelectSourceMatrix
+};
+//# sourceMappingURL=menus.js.map

package/dist/modules/design_system/gallery/demos/menus.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/demos/menus.tsx"],
+  "sourcesContent": ["import * as React from 'react'\nimport { Info, Plus } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Badge } from '@open-mercato/ui/primitives/badge'\nimport { Kbd } from '@open-mercato/ui/primitives/kbd'\nimport { FormField } from '@open-mercato/ui/primitives/form-field'\nimport { SimpleTooltip } from '@open-mercato/ui/primitives/tooltip'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectTriggerLeading, SelectValue } from '@open-mercato/ui/primitives/select'\nimport { Dropdown, DropdownTrigger, DropdownContent, DropdownInput, DropdownList, DropdownEmpty, DropdownItem, DropdownFooter, DropdownCaption } from '@open-mercato/ui/primitives/dropdown'\nimport { CommandMenu, CommandMenuTrigger, CommandMenuContent, CommandMenuInput, CommandMenuList, CommandMenuEmpty, CommandMenuItem, CommandMenuGroup, CommandMenuSeparator, CommandMenuFooter } from '@open-mercato/ui/primitives/command-menu'\nimport { MenuVisual, useMenuChoices, selectKinds, commandKinds, type MenuKind } from './menu-fixtures'\n\nexport function SelectSourceExample({ kind, size = 36, state = 'filled' }: {\n  kind: MenuKind\n  size?: 32 | 36 | 40\n  state?: 'default' | 'filled' | 'disabled' | 'error'\n}) {\n  const t = useT()\n  const choices = useMenuChoices(kind)\n  const [value, setValue] = React.useState(state === 'default' || state === 'error' ? '' : choices[0].value)\n  const selected = choices.find((choice) => choice.value === value)\n  const disabled = state === 'disabled'\n  const label = t(`design_system.gallery.samples.menu.kind.${kind}`)\n  const providerPadding = kind !== 'provider' ? undefined : size === 40 ? 'p-2' : size === 36 ? 'p-1.5' : 'p-1'\n  return (\n    <Select value={value} onValueChange={setValue} disabled={disabled}>\n      <FormField label={label} disabled={disabled} description={t('design_system.gallery.samples.menu.hint')} error={state === 'error' ? t('design_system.gallery.samples.menu.required') : undefined}>\n        <SelectTrigger size={size} className={providerPadding}>\n          {kind !== 'basic' && <SelectTriggerLeading><MenuVisual kind={kind} alternative={selected?.alternative} providerSize=\"select\" /></SelectTriggerLeading>}\n          <SelectValue className=\"min-w-0 flex-1 text-left\" placeholder={t('design_system.gallery.samples.menu.placeholder')} />\n        </SelectTrigger>\n      </FormField>\n      <SelectContent>\n        {choices.map((choice) => <SelectItem key={choice.value} value={choice.value} disabled={choice.disabled} leading={kind === 'basic' ? undefined : <MenuVisual kind={kind} alternative={choice.alternative} />}>\n          {choice.label}\n        </SelectItem>)}\n      </SelectContent>\n    </Select>\n  )\n}\n\nexport function SelectSourceMatrix({ size = 36, state = 'filled' }: { size?: 32 | 36 | 40; state?: 'default' | 'filled' | 'disabled' | 'error' }) {\n  return <div className=\"grid w-full gap-6 sm:grid-cols-2 xl:grid-cols-3\">{selectKinds.map((kind) => <SelectSourceExample key={kind} kind={kind} size={size} state={state} />)}</div>\n}\n\nexport function DropdownSourceExample({ size = 36, empty = false }: { size?: 36 | 56; empty?: boolean }) {\n  const t = useT()\n  const [open, setOpen] = React.useState(false)\n  const [value, setValue] = React.useState('basic')\n  const [query, setQuery] = React.useState(empty ? 'zzzz' : '')\n  const [workspaceCount, setWorkspaceCount] = React.useState(0)\n  return (\n    <div className=\"flex w-full flex-col items-start gap-3\">\n      <Dropdown open={open} onOpenChange={setOpen}>\n        <DropdownTrigger asChild><Button variant=\"outline\">{t('design_system.gallery.samples.menu.openDropdown')}</Button></DropdownTrigger>\n        <DropdownContent className=\"w-96 max-w-full\" aria-label={t('design_system.gallery.samples.menu.openDropdown')} commandProps={{ label: t('design_system.gallery.samples.menu.options') }}>\n          <DropdownInput value={query} onValueChange={setQuery} aria-label={t('design_system.gallery.samples.menu.search')} placeholder={t('design_system.gallery.samples.menu.search')} />\n          <DropdownList>\n            <DropdownEmpty>{t('design_system.gallery.samples.menu.noResults')}</DropdownEmpty>\n            {selectKinds.map((kind) => {\n              const label = t(`design_system.gallery.samples.menu.${kind}.0`)\n              return <DropdownItem key={kind} value={label} size={size} checked={value === kind} leading={<MenuVisual kind={kind} large={size === 56} />}\n                description={size === 56 ? t('design_system.gallery.samples.menu.description') : undefined}\n                sublabel={kind === 'basic' ? t('design_system.gallery.samples.menu.sublabel') : undefined}\n                badge={kind === 'brand' ? <Badge appearance=\"lighter\" tone=\"info\" size={20}>{t('design_system.gallery.samples.menu.new')}</Badge> : undefined}\n                shortcut={kind === 'company' ? <Kbd>\u23181</Kbd> : undefined}\n                onSelect={() => { setValue(kind); setOpen(false) }}>\n                {label}\n              </DropdownItem>\n            })}\n            <DropdownItem value={t('design_system.gallery.samples.menu.unavailable')} size={size} disabled leading={<MenuVisual kind=\"basic\" large={size === 56} />}>{t('design_system.gallery.samples.menu.unavailable')}</DropdownItem>\n          </DropdownList>\n          <DropdownFooter><Button variant=\"outline\" size=\"sm\" className=\"w-full\" onClick={() => { setWorkspaceCount((count) => count + 1); setOpen(false) }}><Plus className=\"size-5\" />{t('design_system.gallery.samples.menu.addWorkspace')}</Button></DropdownFooter>\n          <DropdownCaption>{t('design_system.gallery.samples.menu.localCaption')}</DropdownCaption>\n        </DropdownContent>\n      </Dropdown>\n      <output aria-live=\"polite\" className=\"text-sm text-muted-foreground\">{t('design_system.gallery.samples.menu.selected', { value: t(`design_system.gallery.samples.menu.${value}.0`) })}</output>\n      {workspaceCount > 0 && <output aria-live=\"polite\" className=\"text-sm text-muted-foreground\">{t('design_system.gallery.samples.menu.created', { count: workspaceCount })}</output>}\n    </div>\n  )\n}\n\nfunction CommandSourceRows({ size, onSelect }: { size: 40 | 64; onSelect: (value: string) => void }) {\n  const t = useT()\n  return <>{commandKinds.map((kind) => {\n    const label = t(`design_system.gallery.samples.menu.${kind}.0`)\n    return <CommandMenuItem key={kind} value={label} size={size} leading={kind === 'basic' ? undefined : <MenuVisual kind={kind} large={size === 64} />}\n      description={size === 64 ? t('design_system.gallery.samples.menu.description') : undefined}\n      sublabel={kind === 'basic' ? t('design_system.gallery.samples.menu.sublabel') : undefined}\n      badge={kind === 'brand' ? <Badge appearance=\"lighter\" tone=\"info\" size={20}>{t('design_system.gallery.samples.menu.new')}</Badge> : undefined}\n      shortcut={kind === 'company' ? <Kbd>\u2318K</Kbd> : undefined}\n      onSelect={() => onSelect(label)}>{label}</CommandMenuItem>\n  })}</>\n}\n\nexport function CommandSourceExample({ size = 40, empty = false, withGroups = false }: { size?: 40 | 64; empty?: boolean; withGroups?: boolean }) {\n  const t = useT()\n  const [open, setOpen] = React.useState(false)\n  const [query, setQuery] = React.useState(empty ? 'zzzz' : '')\n  const [result, setResult] = React.useState('')\n  const onSelect = (label: string) => { setResult(label); setOpen(false) }\n  const rows = <CommandSourceRows size={size} onSelect={onSelect} />\n  return (\n    <div className=\"flex flex-col items-start gap-3\">\n      <CommandMenu open={open} onOpenChange={setOpen}>\n        <CommandMenuTrigger asChild><Button variant=\"outline\">{t('design_system.gallery.samples.menu.openCommand')}</Button></CommandMenuTrigger>\n        <CommandMenuContent title={t('design_system.gallery.samples.menu.openCommand')} commandProps={{ loop: true }}>\n          <CommandMenuInput appearance=\"source\" value={query} onValueChange={setQuery} aria-label={t('design_system.gallery.samples.menu.search')} placeholder={t('design_system.gallery.samples.menu.search')}\n            trailing={<SimpleTooltip content={t('design_system.gallery.samples.menu.hint')}><Button variant=\"ghost\" size=\"2xs\" aria-label={t('design_system.gallery.samples.menu.help')}><Info className=\"size-5\" /></Button></SimpleTooltip>} />\n          <CommandMenuList>\n            <CommandMenuEmpty>{t('design_system.gallery.samples.menu.noResults')}</CommandMenuEmpty>\n            {withGroups ? <CommandMenuGroup heading={t('design_system.gallery.samples.menu.caption')} actionLabel={t('design_system.gallery.samples.menu.seeAll')} onAction={() => setQuery('')}>{rows}</CommandMenuGroup> : rows}\n            {withGroups && <><CommandMenuSeparator /><CommandMenuGroup heading={t('design_system.gallery.samples.menu.unavailable')}><CommandMenuItem value=\"unavailable\" disabled size={size}>{t('design_system.gallery.samples.menu.unavailable')}</CommandMenuItem></CommandMenuGroup></>}\n          </CommandMenuList>\n          <CommandMenuFooter className=\"min-h-12 flex-wrap px-5 py-3.5\" helpSlot={<Button variant=\"link\" size=\"2xs\" onClick={() => setResult(t('design_system.gallery.samples.menu.hint'))}>{t('design_system.gallery.samples.menu.help')}</Button>} />\n        </CommandMenuContent>\n      </CommandMenu>\n      {result && <output aria-live=\"polite\" className=\"text-sm text-muted-foreground\">{t('design_system.gallery.samples.menu.selected', { value: result })}</output>}\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/modules/design_system/gallery/demos/rating-reviews.js

@@ -0,0 +1,53 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@open-mercato/shared/lib/utils";
+import { useLocale, useT } from "@open-mercato/shared/lib/i18n/context";
+import { Rating } from "@open-mercato/ui/primitives/rating";
+import { LinkButton } from "@open-mercato/ui/primitives/link-button";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { ScrollArea } from "@open-mercato/ui/primitives/scroll-area";
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@open-mercato/ui/primitives/dialog";
+function RatingCellDemo({ icon, initialValue = 0, max = 1, disabled = false }) {
+  const t = useT();
+  const [value, setValue] = React.useState(initialValue);
+  return /* @__PURE__ */ jsx(Rating, { value, onChange: setValue, max, icon, appearance: "cell", disabled, "aria-label": t("design_system.gallery.samples.rating.label") });
+}
+function RatingReviewDemo({ icon, alignment }) {
+  const t = useT();
+  const locale = useLocale();
+  const [open, setOpen] = React.useState(false);
+  const value = new Intl.NumberFormat(locale).format(4.5);
+  const count = new Intl.NumberFormat(locale, { notation: "compact", maximumFractionDigits: 1 }).format(5200);
+  const summary = t("design_system.gallery.samples.rating.summary", "{value} \u2219 {count} Ratings", { value, count });
+  const reviews = t("design_system.gallery.samples.rating.reviews", "{count} reviews", { count: 18 });
+  return /* @__PURE__ */ jsxs(Dialog, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxs("div", { "data-slot": "rating-review", "data-alignment": alignment, className: cn("inline-flex max-w-full items-start gap-2", alignment === "vertical" ? "flex-col" : "flex-wrap"), children: [
+      /* @__PURE__ */ jsx(Rating, { value: 4.5, allowHalf: true, icon }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start gap-1 text-sm leading-5", children: [
+        /* @__PURE__ */ jsx("span", { children: summary }),
+        /* @__PURE__ */ jsx(LinkButton, { asChild: true, variant: "gray", underline: "always", children: /* @__PURE__ */ jsx(DialogTrigger, { children: reviews }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(DialogContent, { onKeyDownCapture: (event) => {
+      if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        setOpen(false);
+      }
+    }, children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: reviews }),
+        /* @__PURE__ */ jsx(DialogDescription, { children: summary })
+      ] }),
+      /* @__PURE__ */ jsx(ScrollArea, { className: "h-72", scrollbarSize: "md", children: /* @__PURE__ */ jsx("ol", { className: "flex flex-col gap-3 pr-6", children: Array.from({ length: 18 }, (_, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between gap-3 text-sm", children: [
+        /* @__PURE__ */ jsx("span", { children: t("design_system.gallery.samples.rating.reviewNumber", "Review {number}", { number: index + 1 }) }),
+        /* @__PURE__ */ jsx(Rating, { value: index < 9 ? 5 : 4, icon })
+      ] }, index)) }) }),
+      /* @__PURE__ */ jsx(DialogFooter, { children: /* @__PURE__ */ jsx(Button, { asChild: true, variant: "outline", children: /* @__PURE__ */ jsx(DialogClose, { children: t("common.close") }) }) })
+    ] })
+  ] });
+}
+export {
+  RatingCellDemo,
+  RatingReviewDemo
+};
+//# sourceMappingURL=rating-reviews.js.map

package/dist/modules/design_system/gallery/demos/rating-reviews.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/demos/rating-reviews.tsx"],
+  "sourcesContent": ["import * as React from 'react'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { useLocale, useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Rating } from '@open-mercato/ui/primitives/rating'\nimport { LinkButton } from '@open-mercato/ui/primitives/link-button'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { ScrollArea } from '@open-mercato/ui/primitives/scroll-area'\nimport { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@open-mercato/ui/primitives/dialog'\n\nexport function RatingCellDemo({ icon, initialValue = 0, max = 1, disabled = false }: { icon: 'star' | 'heart'; initialValue?: number; max?: number; disabled?: boolean }) {\n  const t = useT()\n  const [value, setValue] = React.useState(initialValue)\n  return <Rating value={value} onChange={setValue} max={max} icon={icon} appearance=\"cell\" disabled={disabled} aria-label={t('design_system.gallery.samples.rating.label')} />\n}\n\nexport function RatingReviewDemo({ icon, alignment }: { icon: 'star' | 'heart'; alignment: 'vertical' | 'horizontal' }) {\n  const t = useT()\n  const locale = useLocale()\n  const [open, setOpen] = React.useState(false)\n  const value = new Intl.NumberFormat(locale).format(4.5)\n  const count = new Intl.NumberFormat(locale, { notation: 'compact', maximumFractionDigits: 1 }).format(5200)\n  const summary = t('design_system.gallery.samples.rating.summary', '{value} \u2219 {count} Ratings', { value, count })\n  const reviews = t('design_system.gallery.samples.rating.reviews', '{count} reviews', { count: 18 })\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <div data-slot=\"rating-review\" data-alignment={alignment} className={cn('inline-flex max-w-full items-start gap-2', alignment === 'vertical' ? 'flex-col' : 'flex-wrap')}>\n        <Rating value={4.5} allowHalf icon={icon} />\n        <div className=\"flex flex-wrap items-start gap-1 text-sm leading-5\">\n          <span>{summary}</span>\n          <LinkButton asChild variant=\"gray\" underline=\"always\"><DialogTrigger>{reviews}</DialogTrigger></LinkButton>\n        </div>\n      </div>\n      <DialogContent onKeyDownCapture={event => { if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) { event.preventDefault(); setOpen(false) } }}>\n        <DialogHeader><DialogTitle>{reviews}</DialogTitle><DialogDescription>{summary}</DialogDescription></DialogHeader>\n        <ScrollArea className=\"h-72\" scrollbarSize=\"md\">\n          <ol className=\"flex flex-col gap-3 pr-6\">\n            {Array.from({ length: 18 }, (_, index) => <li key={index} className=\"flex items-center justify-between gap-3 text-sm\"><span>{t('design_system.gallery.samples.rating.reviewNumber', 'Review {number}', { number: index + 1 })}</span><Rating value={index < 9 ? 5 : 4} icon={icon} /></li>)}\n          </ol>\n        </ScrollArea>\n        <DialogFooter><Button asChild variant=\"outline\"><DialogClose>{t('common.close')}</DialogClose></Button></DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],
+  "mappings": "AAYS,cAeD,YAfC;AAZT,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,WAAW,YAAY;AAChC,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,QAAQ,aAAa,eAAe,mBAAmB,cAAc,cAAc,aAAa,qBAAqB;AAEvH,SAAS,eAAe,EAAE,MAAM,eAAe,GAAG,MAAM,GAAG,WAAW,MAAM,GAAwF;AACzK,QAAM,IAAI,KAAK;AACf,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,YAAY;AACrD,SAAO,oBAAC,UAAO,OAAc,UAAU,UAAU,KAAU,MAAY,YAAW,QAAO,UAAoB,cAAY,EAAE,4CAA4C,GAAG;AAC5K;AAEO,SAAS,iBAAiB,EAAE,MAAM,UAAU,GAAqE;AACtH,QAAM,IAAI,KAAK;AACf,QAAM,SAAS,UAAU;AACzB,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,KAAK;AAC5C,QAAM,QAAQ,IAAI,KAAK,aAAa,MAAM,EAAE,OAAO,GAAG;AACtD,QAAM,QAAQ,IAAI,KAAK,aAAa,QAAQ,EAAE,UAAU,WAAW,uBAAuB,EAAE,CAAC,EAAE,OAAO,IAAI;AAC1G,QAAM,UAAU,EAAE,gDAAgD,kCAA6B,EAAE,OAAO,MAAM,CAAC;AAC/G,QAAM,UAAU,EAAE,gDAAgD,mBAAmB,EAAE,OAAO,GAAG,CAAC;AAClG,SACE,qBAAC,UAAO,MAAY,cAAc,SAChC;AAAA,yBAAC,SAAI,aAAU,iBAAgB,kBAAgB,WAAW,WAAW,GAAG,4CAA4C,cAAc,aAAa,aAAa,WAAW,GACrK;AAAA,0BAAC,UAAO,OAAO,KAAK,WAAS,MAAC,MAAY;AAAA,MAC1C,qBAAC,SAAI,WAAU,sDACb;AAAA,4BAAC,UAAM,mBAAQ;AAAA,QACf,oBAAC,cAAW,SAAO,MAAC,SAAQ,QAAO,WAAU,UAAS,8BAAC,iBAAe,mBAAQ,GAAgB;AAAA,SAChG;AAAA,OACF;AAAA,IACA,qBAAC,iBAAc,kBAAkB,WAAS;AAAE,UAAI,MAAM,QAAQ,YAAY,MAAM,WAAW,MAAM,UAAU;AAAE,cAAM,eAAe;AAAG,gBAAQ,KAAK;AAAA,MAAE;AAAA,IAAE,GACpJ;AAAA,2BAAC,gBAAa;AAAA,4BAAC,eAAa,mBAAQ;AAAA,QAAc,oBAAC,qBAAmB,mBAAQ;AAAA,SAAoB;AAAA,MAClG,oBAAC,cAAW,WAAU,QAAO,eAAc,MACzC,8BAAC,QAAG,WAAU,4BACX,gBAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,CAAC,GAAG,UAAU,qBAAC,QAAe,WAAU,mDAAkD;AAAA,4BAAC,UAAM,YAAE,qDAAqD,mBAAmB,EAAE,QAAQ,QAAQ,EAAE,CAAC,GAAE;AAAA,QAAO,oBAAC,UAAO,OAAO,QAAQ,IAAI,IAAI,GAAG,MAAY;AAAA,WAAhO,KAAkO,CAAK,GAC5R,GACF;AAAA,MACA,oBAAC,gBAAa,8BAAC,UAAO,SAAO,MAAC,SAAQ,WAAU,8BAAC,eAAa,YAAE,cAAc,GAAE,GAAc,GAAS;AAAA,OACzG;AAAA,KACF;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,104 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { LUCIDE_ICON_REGISTRY } from "@open-mercato/ui/backend/icons/lucideRegistry";
+import { SearchInput } from "@open-mercato/ui/primitives/search-input";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { Pagination } from "@open-mercato/ui/primitives/pagination";
+import { EmptyState } from "@open-mercato/ui/primitives/empty-state";
+import { Popover, PopoverClose, PopoverContent, PopoverTrigger } from "@open-mercato/ui/primitives/popover";
+import { flash } from "@open-mercato/ui/backend/FlashMessages";
+function pascalCase(registryName) {
+  return registryName.split(/[-_]/).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
+}
+function IconTile({ name }) {
+  const t = useT();
+  const Icon = LUCIDE_ICON_REGISTRY[name];
+  const jsxSnippet = `<${pascalCase(name)} aria-hidden className="size-4" />`;
+  const copy = React.useCallback(async (payload) => {
+    try {
+      await navigator.clipboard.writeText(payload);
+      flash(t("design_system.gallery.iconCopied", "Copied: {snippet}", { snippet: payload }), "success");
+    } catch {
+      flash(t("design_system.gallery.copyFailed", "Could not copy the snippet"), "error");
+    }
+  }, [t]);
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        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(Icon, { "aria-hidden": true, className: "size-7 text-foreground", strokeWidth: 1.75 }),
+          /* @__PURE__ */ jsx("code", { className: "max-w-full break-words text-xs leading-4 text-muted-foreground", children: name })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { align: "center", className: "w-auto max-w-xs p-2", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx(PopoverClose, { asChild: true, children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          onClick: () => copy(name),
+          className: "h-auto w-full flex-col items-start gap-0.5 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-muted focus-visible:outline-none focus-visible:shadow-focus",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-foreground", children: t("design_system.gallery.iconCopyMeta", "Copy name for page.meta icon") }),
+            /* @__PURE__ */ jsx("code", { className: "text-xs text-muted-foreground", children: name })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(PopoverClose, { asChild: true, children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          onClick: () => copy(jsxSnippet),
+          className: "h-auto w-full flex-col items-start gap-0.5 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-muted focus-visible:outline-none focus-visible:shadow-focus",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-foreground", children: t("design_system.gallery.iconCopyJsx", "Copy JSX (lucide-react)") }),
+            /* @__PURE__ */ jsx("code", { className: "max-w-full truncate text-xs text-muted-foreground", children: jsxSnippet })
+          ]
+        }
+      ) })
+    ] }) })
+  ] });
+}
+function IconGrid({ collectionControl } = {}) {
+  const t = useT();
+  const [query, setQuery] = React.useState("");
+  const names = React.useMemo(() => Object.keys(LUCIDE_ICON_REGISTRY).sort((a, b) => a.localeCompare(b)), []);
+  const [page, setPage] = React.useState(1);
+  const needle = query.trim().toLowerCase();
+  const filtered = needle ? names.filter((name) => name.toLowerCase().includes(needle)) : names;
+  const visible = filtered.slice((page - 1) * 48, page * 48);
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+      collectionControl,
+      /* @__PURE__ */ jsx("div", { className: "max-w-sm flex-1", children: /* @__PURE__ */ jsx(
+        SearchInput,
+        {
+          value: query,
+          onChange: (value) => {
+            setQuery(value);
+            setPage(1);
+          },
+          placeholder: t("design_system.gallery.iconSearchPlaceholder", "Filter icons\u2026"),
+          "aria-label": t("design_system.gallery.iconSearchPlaceholder", "Filter icons\u2026")
+        }
+      ) }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: needle ? t("design_system.gallery.iconCountFiltered", "{visible} of {total} icons", {
+        visible: filtered.length,
+        total: names.length
+      }) : t("design_system.gallery.iconCountAll", "{total} icons", { total: names.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(IconTile, { name }, name)) }) : /* @__PURE__ */ jsx(EmptyState, { title: t("design_system.gallery.noResults") }),
+    filtered.length > 48 ? /* @__PURE__ */ jsx(Pagination, { page, pageSize: 48, total: filtered.length, showPageSize: false, onPageChange: setPage, "aria-label": t("design_system.gallery.sourceIcons.pages") }) : null
+  ] });
+}
+export {
+  IconGrid
+};
+//# sourceMappingURL=registered-icons.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/demos/registered-icons.tsx"],
+  "sourcesContent": ["import * as React from 'react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { LUCIDE_ICON_REGISTRY } from '@open-mercato/ui/backend/icons/lucideRegistry'\nimport { SearchInput } from '@open-mercato/ui/primitives/search-input'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Pagination } from '@open-mercato/ui/primitives/pagination'\nimport { EmptyState } from '@open-mercato/ui/primitives/empty-state'\nimport { Popover, PopoverClose, PopoverContent, PopoverTrigger } from '@open-mercato/ui/primitives/popover'\nimport { flash } from '@open-mercato/ui/backend/FlashMessages'\n\nfunction pascalCase(registryName: string): string {\n  return registryName\n    .split(/[-_]/)\n    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))\n    .join('')\n}\n\nfunction IconTile({ name }: { name: string }) {\n  const t = useT()\n  const Icon = LUCIDE_ICON_REGISTRY[name]\n  const jsxSnippet = `<${pascalCase(name)} aria-hidden className=\"size-4\" />`\n\n  const copy = React.useCallback(async (payload: string) => {\n    try {\n      await navigator.clipboard.writeText(payload)\n      flash(t('design_system.gallery.iconCopied', 'Copied: {snippet}', { snippet: payload }), 'success')\n    } catch {\n      flash(t('design_system.gallery.copyFailed', 'Could not copy the snippet'), 'error')\n    }\n  }, [t])\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          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        >\n          <Icon aria-hidden className=\"size-7 text-foreground\" strokeWidth={1.75} />\n          <code className=\"max-w-full break-words text-xs leading-4 text-muted-foreground\">{name}</code>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent align=\"center\" className=\"w-auto max-w-xs p-2\">\n        <div className=\"space-y-1\">\n          <PopoverClose asChild>\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              onClick={() => copy(name)}\n              className=\"h-auto w-full flex-col items-start gap-0.5 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-muted focus-visible:outline-none focus-visible:shadow-focus\"\n            >\n              <span className=\"text-xs font-medium text-foreground\">\n                {t('design_system.gallery.iconCopyMeta', 'Copy name for page.meta icon')}\n              </span>\n              <code className=\"text-xs text-muted-foreground\">{name}</code>\n            </Button>\n          </PopoverClose>\n          <PopoverClose asChild>\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              onClick={() => copy(jsxSnippet)}\n              className=\"h-auto w-full flex-col items-start gap-0.5 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-muted focus-visible:outline-none focus-visible:shadow-focus\"\n            >\n              <span className=\"text-xs font-medium text-foreground\">\n                {t('design_system.gallery.iconCopyJsx', 'Copy JSX (lucide-react)')}\n              </span>\n              <code className=\"max-w-full truncate text-xs text-muted-foreground\">{jsxSnippet}</code>\n            </Button>\n          </PopoverClose>\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nexport function IconGrid({ collectionControl }: { collectionControl?: React.ReactNode } = {}) {\n  const t = useT()\n  const [query, setQuery] = React.useState('')\n  const names = React.useMemo(() => Object.keys(LUCIDE_ICON_REGISTRY).sort((a, b) => a.localeCompare(b)), [])\n  const [page, setPage] = React.useState(1)\n  const needle = query.trim().toLowerCase()\n  const filtered = needle ? names.filter((name) => name.toLowerCase().includes(needle)) : names\n  const visible = filtered.slice((page - 1) * 48, page * 48)\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"flex flex-wrap items-center gap-3\">\n        {collectionControl}\n        <div className=\"max-w-sm flex-1\">\n          <SearchInput\n            value={query}\n            onChange={value => { setQuery(value); setPage(1) }}\n            placeholder={t('design_system.gallery.iconSearchPlaceholder', 'Filter icons\u2026')}\n            aria-label={t('design_system.gallery.iconSearchPlaceholder', 'Filter icons\u2026')}\n          />\n        </div>\n        <p className=\"text-xs text-muted-foreground\">\n          {needle\n            ? t('design_system.gallery.iconCountFiltered', '{visible} of {total} icons', {\n                visible: filtered.length,\n                total: names.length,\n              })\n            : t('design_system.gallery.iconCountAll', '{total} icons', { total: names.length })}\n        </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) => (\n          <IconTile key={name} name={name} />\n        ))}\n      </div> : <EmptyState title={t('design_system.gallery.noResults')} />}\n      {filtered.length > 48 ? <Pagination page={page} pageSize={48} total={filtered.length} showPageSize={false} onPageChange={setPage} aria-label={t('design_system.gallery.sourceIcons.pages')} /> : null}\n    </div>\n  )\n}\n\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/modules/design_system/gallery/demos/selection-cards.js

@@ -0,0 +1,99 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Settings } from "lucide-react";
+import { cn } from "@open-mercato/shared/lib/utils";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { Avatar } from "@open-mercato/ui/primitives/avatar";
+import { Badge } from "@open-mercato/ui/primitives/badge";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { CheckboxField } from "@open-mercato/ui/primitives/checkbox-field";
+import { RadioGroup } from "@open-mercato/ui/primitives/radio";
+import { RadioField } from "@open-mercato/ui/primitives/radio-field";
+import { Switch } from "@open-mercato/ui/primitives/switch";
+import { SwitchField } from "@open-mercato/ui/primitives/switch-field";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@open-mercato/ui/primitives/dialog";
+import avatar from "../assets/avatar-photo.png";
+import mastercard from "../assets/menu-mastercard.svg";
+import spotify from "../assets/menu-spotify.svg";
+import company from "../assets/menu-apex.svg";
+import { selectionArtwork } from "../assets/selection-artwork.js";
+const imageSource = (asset) => typeof asset === "string" ? asset : asset.src;
+const selectionSourceCardClassName = "relative flex w-90 max-w-full items-start gap-3.5 rounded-selection-card bg-background p-4 ring-1 ring-inset ring-border shadow-xs transition-colors hover:bg-muted hover:shadow-none has-[[data-state=checked]]:ring-accent-indigo has-[[data-state=checked]]:shadow-none has-[:focus-visible]:shadow-focus [&_label]:after:absolute [&_label]:after:inset-0 [&_label]:after:rounded-selection-card [&_button]:relative [&_button]:z-10";
+function SelectionLeading({ kind }) {
+  if (kind === "avatar") return /* @__PURE__ */ jsx(Avatar, { label: "James Brown", size: 40, src: imageSource(avatar), "aria-hidden": "true" });
+  const source = kind === "icon" ? selectionArtwork.keyIcon : imageSource(kind === "provider" ? mastercard : kind === "brand" ? spotify : company);
+  return /* @__PURE__ */ jsx("img", { src: source, alt: "", "aria-hidden": "true", className: kind === "provider" ? "h-6 w-8 shrink-0 object-contain" : "size-10 shrink-0 object-contain" });
+}
+function SourceSelectionCard({ control, kind, state }) {
+  const t = useT();
+  const disabled = state === "disabled";
+  const fields = {
+    label: t("design_system.gallery.samples.selection.label"),
+    sublabel: t("design_system.gallery.samples.selection.sublabel"),
+    description: t("design_system.gallery.samples.selection.description"),
+    badge: /* @__PURE__ */ jsx(Badge, { size: 16, appearance: disabled ? "stroke" : "light", tone: disabled ? "neutral" : "info", className: disabled ? "border-border text-text-disabled" : void 0, children: t("design_system.gallery.samples.selection.new") }),
+    disabled,
+    containerClassName: "min-w-0 flex-1 gap-3.5",
+    contentClassName: disabled ? "[&_label]:text-text-disabled [&_label]:opacity-100 [&_p]:text-text-disabled [&_span]:text-text-disabled" : void 0,
+    className: cn("mt-0", disabled && control !== "switch" && "disabled:opacity-100 disabled:data-[state=checked]:bg-bg-disabled disabled:data-[state=checked]:border-border-disabled disabled:data-[state=checked]:text-background")
+  };
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "selection-source-card", "data-kind": kind, "data-disabled": disabled, className: cn(selectionSourceCardClassName, disabled && "shadow-none hover:bg-background has-[[data-state=checked]]:ring-border"), children: [
+    /* @__PURE__ */ jsx(SelectionLeading, { kind }),
+    control === "radio" ? /* @__PURE__ */ jsx(RadioField, { value: state, flip: true, ...fields }) : control === "switch" ? /* @__PURE__ */ jsx(SwitchField, { defaultChecked: state === "active", ...fields }) : /* @__PURE__ */ jsx(CheckboxField, { defaultChecked: state !== "default", flip: true, ...fields })
+  ] });
+}
+function SelectionSourceCardsDemo({ control, kind }) {
+  const t = useT();
+  if (control === "radio") return /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
+    /* @__PURE__ */ jsxs(RadioGroup, { defaultValue: "active", "aria-label": t("design_system.gallery.samples.selection.preferences"), className: "gap-3", children: [
+      /* @__PURE__ */ jsx(SourceSelectionCard, { control, kind, state: "default" }),
+      /* @__PURE__ */ jsx(SourceSelectionCard, { control, kind, state: "active" })
+    ] }),
+    /* @__PURE__ */ jsx(RadioGroup, { value: "disabled", disabled: true, "aria-label": t("design_system.gallery.samples.selection.preferences"), children: /* @__PURE__ */ jsx(SourceSelectionCard, { control, kind, state: "disabled" }) })
+  ] });
+  return /* @__PURE__ */ jsx("div", { className: "grid gap-3", children: ["default", "active", "disabled"].map((state) => /* @__PURE__ */ jsx(SourceSelectionCard, { control, kind, state }, state)) });
+}
+function IntegrationSwitchDemo({ alignment, appearance }) {
+  const t = useT();
+  const id = React.useId();
+  const [checked, setChecked] = React.useState(false);
+  const [open, setOpen] = React.useState(false);
+  const horizontal = alignment === "horizontal";
+  const card = appearance === "card";
+  return /* @__PURE__ */ jsxs(Dialog, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxs("div", { "data-slot": "integration-switch", "data-alignment": alignment, "data-appearance": appearance, className: cn("relative flex max-w-full gap-3.5", horizontal ? "w-154 flex-wrap items-center sm:flex-nowrap" : "w-95 flex-col items-start", card && "rounded-selection-card bg-background p-4 ring-1 ring-inset ring-border shadow-xs"), children: [
+      /* @__PURE__ */ jsx("img", { src: card ? selectionArtwork.officeCard : selectionArtwork.officeList, alt: "", className: cn("shrink-0", card ? "size-10" : "size-12") }),
+      /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 flex-col gap-1", horizontal && "min-w-40 flex-1"), children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx("span", { id, className: cn("font-medium text-foreground", card ? "text-sm leading-5" : "text-base leading-6"), children: "Microsoft Office 365" }),
+          /* @__PURE__ */ jsx(Badge, { size: 16, appearance: "light", tone: "info", children: t("design_system.gallery.samples.selection.new") })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground", card ? "text-xs leading-4" : "text-sm leading-5"), children: t("design_system.gallery.samples.selection.integrationDescription") })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { asChild: true, variant: "outline", size: "default", className: horizontal ? void 0 : "w-full", children: /* @__PURE__ */ jsxs(DialogTrigger, { children: [
+        /* @__PURE__ */ jsx(Settings, { "aria-hidden": "true" }),
+        t("design_system.gallery.samples.selection.integrationManage")
+      ] }) }),
+      /* @__PURE__ */ jsx(Switch, { "aria-labelledby": id, checked, onCheckedChange: setChecked, className: horizontal ? void 0 : card ? "absolute top-5 right-5" : "absolute top-3 right-3" })
+    ] }),
+    /* @__PURE__ */ jsxs(DialogContent, { onKeyDownCapture: (event) => {
+      if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        setOpen(false);
+      }
+    }, children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: t("design_system.gallery.samples.selection.integrationDialog") }),
+        /* @__PURE__ */ jsx(DialogDescription, { children: t("design_system.gallery.samples.selection.integrationDescription") })
+      ] }),
+      /* @__PURE__ */ jsx(SwitchField, { label: t("design_system.gallery.samples.selection.integrationEnabled"), checked, onCheckedChange: setChecked }),
+      /* @__PURE__ */ jsx(DialogFooter, { children: /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => setOpen(false), children: t("common.close") }) })
+    ] })
+  ] });
+}
+export {
+  IntegrationSwitchDemo,
+  SelectionSourceCardsDemo,
+  selectionSourceCardClassName
+};
+//# sourceMappingURL=selection-cards.js.map