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

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

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

package/dist/modules/design_system/gallery/demos/time-picker-code.generated.js

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

package/dist/modules/design_system/gallery/demos/time-picker-code.generated.js.map

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

package/dist/modules/design_system/gallery/demos/time-picker.js

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

package/dist/modules/design_system/gallery/demos/time-picker.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/demos/time-picker.tsx"],
+  "sourcesContent": ["import * as React from 'react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { TimePickerDurationChip, TimePickerSlot, TimePickerStatusChip } from '@open-mercato/ui/primitives/time-picker'\n\nconst states = ['default', 'hover', 'selected', 'disabled'] as const\nconst statuses = ['available', 'busy', 'in-meeting', 'offline'] as const\n\nexport function TimePickerStatusExamples() {\n  const t = useT()\n  const [active, setActive] = React.useState<string[]>(statuses.map(status => `selected-${status}`))\n  return <div className=\"grid w-full gap-4 sm:grid-cols-2\">{states.map(state => <div key={state} className=\"space-y-2\">\n    <p className=\"text-xs text-muted-foreground\">{state}</p><div className=\"flex flex-wrap gap-2\">{statuses.map(status => {\n      const key = `${state}-${status}`\n      return <TimePickerStatusChip key={key} variant={status} label={t(`design_system.gallery.samples.time.${status}`)} state={state === 'selected' ? 'default' : state} selected={active.includes(key)} disabled={state === 'disabled'} onSelect={() => setActive(value => value.includes(key) ? value.filter(item => item !== key) : [...value, key])} />\n    })}</div>\n  </div>)}</div>\n}\n\nexport function TimePickerDurationExamples() {\n  const t = useT()\n  const [active, setActive] = React.useState<string[]>(['selected'])\n  return <div className=\"flex flex-wrap gap-4\">{states.map(state => <div key={state} className=\"space-y-2\"><p className=\"text-xs text-muted-foreground\">{state === 'selected' ? 'active' : state}</p><TimePickerDurationChip value={30} label={t('design_system.gallery.samples.time.duration')} state={state === 'selected' ? 'default' : state} selected={active.includes(state)} disabled={state === 'disabled'} onSelect={() => setActive(value => value.includes(state) ? value.filter(item => item !== state) : [...value, state])} /></div>)}</div>\n}\n\nexport function TimePickerSlotExamples() {\n  const [active, setActive] = React.useState<string[]>(['right-selected', 'center-selected'])\n  return <div className=\"grid w-full gap-5 sm:grid-cols-2\">{(['right', 'center'] as const).map(position => <div key={position} className=\"w-full max-w-80 space-y-2\"><p className=\"text-xs text-muted-foreground\">{position}</p>{states.map(state => {\n    const key = `${position}-${state}`\n    return <TimePickerSlot key={key} value=\"09:30\" rightText=\"09:30\" checkPosition={position} state={state === 'selected' ? 'default' : state} selected={active.includes(key)} disabled={state === 'disabled'} onSelect={() => setActive(value => value.includes(key) ? value.filter(item => item !== key) : [...value, key])} />\n  })}</div>)}</div>\n}\n"],
+  "mappings": "AAUgF,SAC5E,KAD4E;AAVhF,YAAY,WAAW;AACvB,SAAS,YAAY;AACrB,SAAS,wBAAwB,gBAAgB,4BAA4B;AAE7E,MAAM,SAAS,CAAC,WAAW,SAAS,YAAY,UAAU;AAC1D,MAAM,WAAW,CAAC,aAAa,QAAQ,cAAc,SAAS;AAEvD,SAAS,2BAA2B;AACzC,QAAM,IAAI,KAAK;AACf,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAmB,SAAS,IAAI,YAAU,YAAY,MAAM,EAAE,CAAC;AACjG,SAAO,oBAAC,SAAI,WAAU,oCAAoC,iBAAO,IAAI,WAAS,qBAAC,SAAgB,WAAU,aACvG;AAAA,wBAAC,OAAE,WAAU,iCAAiC,iBAAM;AAAA,IAAI,oBAAC,SAAI,WAAU,wBAAwB,mBAAS,IAAI,YAAU;AACpH,YAAM,MAAM,GAAG,KAAK,IAAI,MAAM;AAC9B,aAAO,oBAAC,wBAA+B,SAAS,QAAQ,OAAO,EAAE,sCAAsC,MAAM,EAAE,GAAG,OAAO,UAAU,aAAa,YAAY,OAAO,UAAU,OAAO,SAAS,GAAG,GAAG,UAAU,UAAU,YAAY,UAAU,MAAM,UAAU,WAAS,MAAM,SAAS,GAAG,IAAI,MAAM,OAAO,UAAQ,SAAS,GAAG,IAAI,CAAC,GAAG,OAAO,GAAG,CAAC,KAA9S,GAAiT;AAAA,IACrV,CAAC,GAAE;AAAA,OAJmF,KAKxF,CAAM,GAAE;AACV;AAEO,SAAS,6BAA6B;AAC3C,QAAM,IAAI,KAAK;AACf,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAmB,CAAC,UAAU,CAAC;AACjE,SAAO,oBAAC,SAAI,WAAU,wBAAwB,iBAAO,IAAI,WAAS,qBAAC,SAAgB,WAAU,aAAY;AAAA,wBAAC,OAAE,WAAU,iCAAiC,oBAAU,aAAa,WAAW,OAAM;AAAA,IAAI,oBAAC,0BAAuB,OAAO,IAAI,OAAO,EAAE,6CAA6C,GAAG,OAAO,UAAU,aAAa,YAAY,OAAO,UAAU,OAAO,SAAS,KAAK,GAAG,UAAU,UAAU,YAAY,UAAU,MAAM,UAAU,WAAS,MAAM,SAAS,KAAK,IAAI,MAAM,OAAO,UAAQ,SAAS,KAAK,IAAI,CAAC,GAAG,OAAO,KAAK,CAAC,GAAG;AAAA,OAA5b,KAA8b,CAAM,GAAE;AACphB;AAEO,SAAS,yBAAyB;AACvC,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAmB,CAAC,kBAAkB,iBAAiB,CAAC;AAC1F,SAAO,oBAAC,SAAI,WAAU,oCAAqC,WAAC,SAAS,QAAQ,EAAY,IAAI,cAAY,qBAAC,SAAmB,WAAU,6BAA4B;AAAA,wBAAC,OAAE,WAAU,iCAAiC,oBAAS;AAAA,IAAK,OAAO,IAAI,WAAS;AACjP,YAAM,MAAM,GAAG,QAAQ,IAAI,KAAK;AAChC,aAAO,oBAAC,kBAAyB,OAAM,SAAQ,WAAU,SAAQ,eAAe,UAAU,OAAO,UAAU,aAAa,YAAY,OAAO,UAAU,OAAO,SAAS,GAAG,GAAG,UAAU,UAAU,YAAY,UAAU,MAAM,UAAU,WAAS,MAAM,SAAS,GAAG,IAAI,MAAM,OAAO,UAAQ,SAAS,GAAG,IAAI,CAAC,GAAG,OAAO,GAAG,CAAC,KAA5R,GAA+R;AAAA,IAC7T,CAAC;AAAA,OAHkH,QAGhH,CAAM,GAAE;AACb;",
+  "names": []
+}

package/dist/modules/design_system/gallery/entries/banners.js

@@ -1,9 +1,124 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
 import { CircleCheck, Rocket, Sparkles } from "lucide-react";
 import { Button } from "@open-mercato/ui/primitives/button";
 import { flash } from "@open-mercato/ui/backend/FlashMessages";
 import { NextStepCallout } from "@open-mercato/ui/backend/NextStepCallout";
 import { ContextHelp } from "@open-mercato/ui/backend/ContextHelp";
+function FlashMessagesEntryKindsPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outline",
+        onClick: () => flash(t("design_system.gallery.samples.content.changesSaved"), "success"),
+        children: t("design_system.gallery.samples.content.fireSuccess")
+      }
+    ),
+    /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => flash(t("design_system.gallery.samples.content.syncScheduled"), "info"), children: t("design_system.gallery.samples.content.fireInfo") }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outline",
+        onClick: () => flash(t("design_system.gallery.samples.content.quotaAlmostReached"), "warning"),
+        children: t("design_system.gallery.samples.content.fireWarning")
+      }
+    ),
+    /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => flash(t("design_system.gallery.samples.content.saveFailed"), "error"), children: t("design_system.gallery.samples.content.fireError") })
+  ] });
+}
+function NextStepCalloutEntryBasicPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
+    NextStepCallout,
+    {
+      icon: /* @__PURE__ */ jsx(Rocket, { className: "size-6" }),
+      title: t("design_system.gallery.samples.content.publishYourCatalog"),
+      description: t(
+        "design_system.gallery.samples.content.productsAreImportedAndPricedPublishingMakesThemVisibleOnEverySalesChannel"
+      ),
+      actionLabel: t("design_system.gallery.samples.content.publishCatalog"),
+      actionIcon: /* @__PURE__ */ jsx(Sparkles, { className: "mr-2 size-4" }),
+      onAction: () => {
+      }
+    }
+  ) });
+}
+function NextStepCalloutEntryWithStepsPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
+    NextStepCallout,
+    {
+      title: t("design_system.gallery.samples.content.finishStoreSetup"),
+      description: t("design_system.gallery.samples.content.twoStepsAreDoneConnectAPaymentProviderToStartSelling"),
+      steps: [
+        {
+          id: "import",
+          label: t("design_system.gallery.samples.content.importProducts"),
+          state: "completed"
+        },
+        {
+          id: "pricing",
+          label: t("design_system.gallery.samples.content.setPricing"),
+          state: "completed"
+        },
+        {
+          id: "payments",
+          label: t("design_system.gallery.samples.content.connectPayments"),
+          state: "active"
+        },
+        {
+          id: "launch",
+          label: t("design_system.gallery.samples.content.launch"),
+          state: "pending"
+        }
+      ],
+      actionLabel: t("design_system.gallery.samples.content.connectPayments"),
+      onAction: () => {
+      }
+    }
+  ) });
+}
+function NextStepCalloutEntryWithStatusPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
+    NextStepCallout,
+    {
+      title: t("design_system.gallery.samples.content.indexYourProducts"),
+      description: t("design_system.gallery.samples.content.searchStaysDisabledUntilTheFirstIndexingRunCompletes"),
+      actionLabel: t("design_system.gallery.samples.content.reRunIndexing"),
+      onAction: () => {
+      },
+      busy: true,
+      status: {
+        tone: "info",
+        icon: /* @__PURE__ */ jsx(CircleCheck, { className: "size-4" }),
+        label: t("design_system.gallery.samples.content.indexingInProgress"),
+        progressValue: 64,
+        progressDescription: t("design_system.gallery.samples.content.1280Of2000ProductsIndexed")
+      }
+    }
+  ) });
+}
+function ContextHelpEntryDefaultPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(ContextHelp, { title: t("design_system.gallery.samples.content.howDoExchangeRatesWork"), children: t(
+    "design_system.gallery.samples.content.ratesRefreshNightlyFromTheConfiguredProviderManualOverridesStayPinnedUntilYouClearThem"
+  ) }) });
+}
+function ContextHelpEntryDefaultOpenPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(ContextHelp, { title: t("design_system.gallery.samples.content.whyIsThisFieldRequired"), defaultOpen: true, children: t(
+    "design_system.gallery.samples.content.theTaxOfficeIdentifierIsMandatoryForInvoicesIssuedToCompaniesRegisteredInTheEu"
+  ) }) });
+}
+function ContextHelpEntryInfoIconPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(ContextHelp, { title: t("design_system.gallery.samples.content.aboutDraftOrders"), bulb: false, defaultOpen: true, children: t(
+    "design_system.gallery.samples.content.draftOrdersAreInvisibleToCustomersAndSkipStockReservationUntilTheyAreConfirmed"
+  ) }) });
+}
 const flashMessagesEntry = {
   id: "flash-messages",
   title: "FlashMessages",
@@ -12,12 +127,7 @@ const flashMessagesEntry = {
     {
       id: "kinds",
       title: "flash() kinds (toast via the AppShell singleton)",
-      render: () => /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => flash("Changes saved", "success"), children: "Fire success" }),
-        /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => flash("Sync scheduled", "info"), children: "Fire info" }),
-        /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => flash("Quota almost reached", "warning"), children: "Fire warning" }),
-        /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => flash("Save failed", "error"), children: "Fire error" })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(FlashMessagesEntryKindsPreview, {}),
       code: `import { flash } from '@open-mercato/ui/backend/FlashMessages'
 
 // FlashMessages is mounted once by AppShell \u2014 never mount your own.
@@ -36,18 +146,7 @@ const nextStepCalloutEntry = {
     {
       id: "basic",
       title: "Basic",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
-        NextStepCallout,
-        {
-          icon: /* @__PURE__ */ jsx(Rocket, { className: "size-6" }),
-          title: "Publish your catalog",
-          description: "Products are imported and priced. Publishing makes them visible on every sales channel.",
-          actionLabel: "Publish catalog",
-          actionIcon: /* @__PURE__ */ jsx(Sparkles, { className: "mr-2 size-4" }),
-          onAction: () => {
-          }
-        }
-      ) }),
+      render: () => /* @__PURE__ */ jsx(NextStepCalloutEntryBasicPreview, {}),
       code: `import { Rocket, Sparkles } from 'lucide-react'
 import { NextStepCallout } from '@open-mercato/ui/backend/NextStepCallout'
 
@@ -63,22 +162,7 @@ import { NextStepCallout } from '@open-mercato/ui/backend/NextStepCallout'
     {
       id: "with-steps",
       title: "With steps",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
-        NextStepCallout,
-        {
-          title: "Finish store setup",
-          description: "Two steps are done \u2014 connect a payment provider to start selling.",
-          steps: [
-            { id: "import", label: "Import products", state: "completed" },
-            { id: "pricing", label: "Set pricing", state: "completed" },
-            { id: "payments", label: "Connect payments", state: "active" },
-            { id: "launch", label: "Launch", state: "pending" }
-          ],
-          actionLabel: "Connect payments",
-          onAction: () => {
-          }
-        }
-      ) }),
+      render: () => /* @__PURE__ */ jsx(NextStepCalloutEntryWithStepsPreview, {}),
       code: `import { NextStepCallout } from '@open-mercato/ui/backend/NextStepCallout'
 
 <NextStepCallout
@@ -97,24 +181,7 @@ import { NextStepCallout } from '@open-mercato/ui/backend/NextStepCallout'
     {
       id: "with-status",
       title: "With status progress",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
-        NextStepCallout,
-        {
-          title: "Index your products",
-          description: "Search stays disabled until the first indexing run completes.",
-          actionLabel: "Re-run indexing",
-          onAction: () => {
-          },
-          busy: true,
-          status: {
-            tone: "info",
-            icon: /* @__PURE__ */ jsx(CircleCheck, { className: "size-4" }),
-            label: "Indexing in progress",
-            progressValue: 64,
-            progressDescription: "1,280 of 2,000 products indexed"
-          }
-        }
-      ) }),
+      render: () => /* @__PURE__ */ jsx(NextStepCalloutEntryWithStatusPreview, {}),
       code: `import { CircleCheck } from 'lucide-react'
 import { NextStepCallout } from '@open-mercato/ui/backend/NextStepCallout'
 
@@ -143,7 +210,7 @@ const contextHelpEntry = {
     {
       id: "default",
       title: "default (collapsed)",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(ContextHelp, { title: "How do exchange rates work?", children: "Rates refresh nightly from the configured provider. Manual overrides stay pinned until you clear them." }) }),
+      render: () => /* @__PURE__ */ jsx(ContextHelpEntryDefaultPreview, {}),
       code: `import { ContextHelp } from '@open-mercato/ui/backend/ContextHelp'
 
 <ContextHelp title="How do exchange rates work?">
@@ -154,7 +221,7 @@ const contextHelpEntry = {
     {
       id: "default-open",
       title: "defaultOpen",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(ContextHelp, { title: "Why is this field required?", defaultOpen: true, children: "The tax office identifier is mandatory for invoices issued to companies registered in the EU." }) }),
+      render: () => /* @__PURE__ */ jsx(ContextHelpEntryDefaultOpenPreview, {}),
       code: `import { ContextHelp } from '@open-mercato/ui/backend/ContextHelp'
 
 <ContextHelp title="Why is this field required?" defaultOpen>
@@ -165,7 +232,7 @@ const contextHelpEntry = {
     {
       id: "info-icon",
       title: "Info icon (bulb={false})",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(ContextHelp, { title: "About draft orders", bulb: false, defaultOpen: true, children: "Draft orders are invisible to customers and skip stock reservation until they are confirmed." }) }),
+      render: () => /* @__PURE__ */ jsx(ContextHelpEntryInfoIconPreview, {}),
       code: `import { ContextHelp } from '@open-mercato/ui/backend/ContextHelp'
 
 <ContextHelp title="About draft orders" bulb={false} defaultOpen>
@@ -175,11 +242,7 @@ const contextHelpEntry = {
     }
   ]
 };
-const entries = [
-  flashMessagesEntry,
-  nextStepCalloutEntry,
-  contextHelpEntry
-];
+const entries = [flashMessagesEntry, nextStepCalloutEntry, contextHelpEntry];
 export {
   entries
 };

package/dist/modules/design_system/gallery/entries/banners.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/modules/design_system/gallery/entries/banners.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport { CircleCheck, Rocket, Sparkles } from 'lucide-react'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { flash } from '@open-mercato/ui/backend/FlashMessages'\nimport { NextStepCallout } from '@open-mercato/ui/backend/NextStepCallout'\nimport { ContextHelp } from '@open-mercato/ui/backend/ContextHelp'\nimport type { GalleryEntry } from '../types'\n\n// Component titles and variant names are proper nouns from the codebase and\n// are deliberately not translated. `code` MUST contain the entry's importPath\n// (enforced by the registry-integrity test) and is always reviewed alongside\n// its sibling `render`.\n\n// `FlashMessages` itself is a singleton mounted by AppShell \u2014 the gallery only\n// demonstrates the imperative `flash()` API; the triggered toast renders\n// through the already-mounted singleton.\nconst flashMessagesEntry: GalleryEntry = {\n  id: 'flash-messages',\n  title: 'FlashMessages',\n  importPath: '@open-mercato/ui/backend/FlashMessages',\n  variants: [\n    {\n      id: 'kinds',\n      title: 'flash() kinds (toast via the AppShell singleton)',\n      render: () => (\n        <>\n          <Button variant=\"outline\" onClick={() => flash('Changes saved', 'success')}>\n            Fire success\n          </Button>\n          <Button variant=\"outline\" onClick={() => flash('Sync scheduled', 'info')}>\n            Fire info\n          </Button>\n          <Button variant=\"outline\" onClick={() => flash('Quota almost reached', 'warning')}>\n            Fire warning\n          </Button>\n          <Button variant=\"outline\" onClick={() => flash('Save failed', 'error')}>\n            Fire error\n          </Button>\n        </>\n      ),\n      code: `import { flash } from '@open-mercato/ui/backend/FlashMessages'\n\n// FlashMessages is mounted once by AppShell \u2014 never mount your own.\nflash('Changes saved', 'success')\nflash('Sync scheduled', 'info')\nflash('Quota almost reached', 'warning')\nflash('Save failed', 'error')`,\n    },\n  ],\n}\n\nconst nextStepCalloutEntry: GalleryEntry = {\n  id: 'next-step-callout',\n  title: 'NextStepCallout',\n  importPath: '@open-mercato/ui/backend/NextStepCallout',\n  variants: [\n    {\n      id: 'basic',\n      title: 'Basic',\n      render: () => (\n        <div className=\"w-full\">\n          <NextStepCallout\n            icon={<Rocket className=\"size-6\" />}\n            title=\"Publish your catalog\"\n            description=\"Products are imported and priced. Publishing makes them visible on every sales channel.\"\n            actionLabel=\"Publish catalog\"\n            actionIcon={<Sparkles className=\"mr-2 size-4\" />}\n            onAction={() => {}}\n          />\n        </div>\n      ),\n      code: `import { Rocket, Sparkles } from 'lucide-react'\nimport { NextStepCallout } from '@open-mercato/ui/backend/NextStepCallout'\n\n<NextStepCallout\n  icon={<Rocket className=\"size-6\" />}\n  title=\"Publish your catalog\"\n  description=\"Products are imported and priced. Publishing makes them visible on every sales channel.\"\n  actionLabel=\"Publish catalog\"\n  actionIcon={<Sparkles className=\"mr-2 size-4\" />}\n  onAction={handlePublish}\n/>`,\n    },\n    {\n      id: 'with-steps',\n      title: 'With steps',\n      render: () => (\n        <div className=\"w-full\">\n          <NextStepCallout\n            title=\"Finish store setup\"\n            description=\"Two steps are done \u2014 connect a payment provider to start selling.\"\n            steps={[\n              { id: 'import', label: 'Import products', state: 'completed' },\n              { id: 'pricing', label: 'Set pricing', state: 'completed' },\n              { id: 'payments', label: 'Connect payments', state: 'active' },\n              { id: 'launch', label: 'Launch', state: 'pending' },\n            ]}\n            actionLabel=\"Connect payments\"\n            onAction={() => {}}\n          />\n        </div>\n      ),\n      code: `import { NextStepCallout } from '@open-mercato/ui/backend/NextStepCallout'\n\n<NextStepCallout\n  title=\"Finish store setup\"\n  description=\"Two steps are done \u2014 connect a payment provider to start selling.\"\n  steps={[\n    { id: 'import', label: 'Import products', state: 'completed' },\n    { id: 'pricing', label: 'Set pricing', state: 'completed' },\n    { id: 'payments', label: 'Connect payments', state: 'active' },\n    { id: 'launch', label: 'Launch', state: 'pending' },\n  ]}\n  actionLabel=\"Connect payments\"\n  onAction={handleConnect}\n/>`,\n    },\n    {\n      id: 'with-status',\n      title: 'With status progress',\n      render: () => (\n        <div className=\"w-full\">\n          <NextStepCallout\n            title=\"Index your products\"\n            description=\"Search stays disabled until the first indexing run completes.\"\n            actionLabel=\"Re-run indexing\"\n            onAction={() => {}}\n            busy\n            status={{\n              tone: 'info',\n              icon: <CircleCheck className=\"size-4\" />,\n              label: 'Indexing in progress',\n              progressValue: 64,\n              progressDescription: '1,280 of 2,000 products indexed',\n            }}\n          />\n        </div>\n      ),\n      code: `import { CircleCheck } from 'lucide-react'\nimport { NextStepCallout } from '@open-mercato/ui/backend/NextStepCallout'\n\n<NextStepCallout\n  title=\"Index your products\"\n  description=\"Search stays disabled until the first indexing run completes.\"\n  actionLabel=\"Re-run indexing\"\n  onAction={handleReindex}\n  busy\n  status={{\n    tone: 'info',\n    icon: <CircleCheck className=\"size-4\" />,\n    label: 'Indexing in progress',\n    progressValue: 64,\n    progressDescription: '1,280 of 2,000 products indexed',\n  }}\n/>`,\n    },\n  ],\n}\n\nconst contextHelpEntry: GalleryEntry = {\n  id: 'context-help',\n  title: 'ContextHelp',\n  importPath: '@open-mercato/ui/backend/ContextHelp',\n  variants: [\n    {\n      id: 'default',\n      title: 'default (collapsed)',\n      render: () => (\n        <div className=\"w-full max-w-md\">\n          <ContextHelp title=\"How do exchange rates work?\">\n            Rates refresh nightly from the configured provider. Manual overrides\n            stay pinned until you clear them.\n          </ContextHelp>\n        </div>\n      ),\n      code: `import { ContextHelp } from '@open-mercato/ui/backend/ContextHelp'\n\n<ContextHelp title=\"How do exchange rates work?\">\n  Rates refresh nightly from the configured provider. Manual overrides\n  stay pinned until you clear them.\n</ContextHelp>`,\n    },\n    {\n      id: 'default-open',\n      title: 'defaultOpen',\n      render: () => (\n        <div className=\"w-full max-w-md\">\n          <ContextHelp title=\"Why is this field required?\" defaultOpen>\n            The tax office identifier is mandatory for invoices issued to\n            companies registered in the EU.\n          </ContextHelp>\n        </div>\n      ),\n      code: `import { ContextHelp } from '@open-mercato/ui/backend/ContextHelp'\n\n<ContextHelp title=\"Why is this field required?\" defaultOpen>\n  The tax office identifier is mandatory for invoices issued to\n  companies registered in the EU.\n</ContextHelp>`,\n    },\n    {\n      id: 'info-icon',\n      title: 'Info icon (bulb={false})',\n      render: () => (\n        <div className=\"w-full max-w-md\">\n          <ContextHelp title=\"About draft orders\" bulb={false} defaultOpen>\n            Draft orders are invisible to customers and skip stock reservation\n            until they are confirmed.\n          </ContextHelp>\n        </div>\n      ),\n      code: `import { ContextHelp } from '@open-mercato/ui/backend/ContextHelp'\n\n<ContextHelp title=\"About draft orders\" bulb={false} defaultOpen>\n  Draft orders are invisible to customers and skip stock reservation\n  until they are confirmed.\n</ContextHelp>`,\n    },\n  ],\n}\n\nexport const entries: GalleryEntry[] = [\n  flashMessagesEntry,\n  nextStepCalloutEntry,\n  contextHelpEntry,\n]\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useT } from '@open-mercato/shared/lib/i18n/context'\nimport * as React from 'react'\nimport { CircleCheck, Rocket, Sparkles } from 'lucide-react'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { flash } from '@open-mercato/ui/backend/FlashMessages'\nimport { NextStepCallout } from '@open-mercato/ui/backend/NextStepCallout'\nimport { ContextHelp } from '@open-mercato/ui/backend/ContextHelp'\nimport type { GalleryEntry } from '../types'\n\n// Component titles and variant names are proper nouns from the codebase and\n// are deliberately not translated. `code` MUST contain the entry's importPath\n// (enforced by the registry-integrity test) and is always reviewed alongside\n// its sibling `render`.\n\n// `FlashMessages` itself is a singleton mounted by AppShell \u2014 the gallery only\n// demonstrates the imperative `flash()` API; the triggered toast renders\n// through the already-mounted singleton.\nfunction FlashMessagesEntryKindsPreview() {\n  const t = useT()\n  return (\n    <>\n      <Button\n        variant=\"outline\"\n        onClick={() => flash(t('design_system.gallery.samples.content.changesSaved'), 'success')}\n      >\n        {t('design_system.gallery.samples.content.fireSuccess')}\n      </Button>\n      <Button variant=\"outline\" onClick={() => flash(t('design_system.gallery.samples.content.syncScheduled'), 'info')}>\n        {t('design_system.gallery.samples.content.fireInfo')}\n      </Button>\n      <Button\n        variant=\"outline\"\n        onClick={() => flash(t('design_system.gallery.samples.content.quotaAlmostReached'), 'warning')}\n      >\n        {t('design_system.gallery.samples.content.fireWarning')}\n      </Button>\n      <Button variant=\"outline\" onClick={() => flash(t('design_system.gallery.samples.content.saveFailed'), 'error')}>\n        {t('design_system.gallery.samples.content.fireError')}\n      </Button>\n    </>\n  )\n}\nfunction NextStepCalloutEntryBasicPreview() {\n  const t = useT()\n  return (\n    <div className=\"w-full\">\n      <NextStepCallout\n        icon={<Rocket className=\"size-6\" />}\n        title={t('design_system.gallery.samples.content.publishYourCatalog')}\n        description={t(\n          'design_system.gallery.samples.content.productsAreImportedAndPricedPublishingMakesThemVisibleOnEverySalesChannel',\n        )}\n        actionLabel={t('design_system.gallery.samples.content.publishCatalog')}\n        actionIcon={<Sparkles className=\"mr-2 size-4\" />}\n        onAction={() => {}}\n      />\n    </div>\n  )\n}\nfunction NextStepCalloutEntryWithStepsPreview() {\n  const t = useT()\n  return (\n    <div className=\"w-full\">\n      <NextStepCallout\n        title={t('design_system.gallery.samples.content.finishStoreSetup')}\n        description={t('design_system.gallery.samples.content.twoStepsAreDoneConnectAPaymentProviderToStartSelling')}\n        steps={[\n          {\n            id: 'import',\n            label: t('design_system.gallery.samples.content.importProducts'),\n            state: 'completed',\n          },\n          {\n            id: 'pricing',\n            label: t('design_system.gallery.samples.content.setPricing'),\n            state: 'completed',\n          },\n          {\n            id: 'payments',\n            label: t('design_system.gallery.samples.content.connectPayments'),\n            state: 'active',\n          },\n          {\n            id: 'launch',\n            label: t('design_system.gallery.samples.content.launch'),\n            state: 'pending',\n          },\n        ]}\n        actionLabel={t('design_system.gallery.samples.content.connectPayments')}\n        onAction={() => {}}\n      />\n    </div>\n  )\n}\nfunction NextStepCalloutEntryWithStatusPreview() {\n  const t = useT()\n  return (\n    <div className=\"w-full\">\n      <NextStepCallout\n        title={t('design_system.gallery.samples.content.indexYourProducts')}\n        description={t('design_system.gallery.samples.content.searchStaysDisabledUntilTheFirstIndexingRunCompletes')}\n        actionLabel={t('design_system.gallery.samples.content.reRunIndexing')}\n        onAction={() => {}}\n        busy\n        status={{\n          tone: 'info',\n          icon: <CircleCheck className=\"size-4\" />,\n          label: t('design_system.gallery.samples.content.indexingInProgress'),\n          progressValue: 64,\n          progressDescription: t('design_system.gallery.samples.content.1280Of2000ProductsIndexed'),\n        }}\n      />\n    </div>\n  )\n}\nfunction ContextHelpEntryDefaultPreview() {\n  const t = useT()\n  return (\n    <div className=\"w-full max-w-md\">\n      <ContextHelp title={t('design_system.gallery.samples.content.howDoExchangeRatesWork')}>\n        {t(\n          'design_system.gallery.samples.content.ratesRefreshNightlyFromTheConfiguredProviderManualOverridesStayPinnedUntilYouClearThem',\n        )}\n      </ContextHelp>\n    </div>\n  )\n}\nfunction ContextHelpEntryDefaultOpenPreview() {\n  const t = useT()\n  return (\n    <div className=\"w-full max-w-md\">\n      <ContextHelp title={t('design_system.gallery.samples.content.whyIsThisFieldRequired')} defaultOpen>\n        {t(\n          'design_system.gallery.samples.content.theTaxOfficeIdentifierIsMandatoryForInvoicesIssuedToCompaniesRegisteredInTheEu',\n        )}\n      </ContextHelp>\n    </div>\n  )\n}\nfunction ContextHelpEntryInfoIconPreview() {\n  const t = useT()\n  return (\n    <div className=\"w-full max-w-md\">\n      <ContextHelp title={t('design_system.gallery.samples.content.aboutDraftOrders')} bulb={false} defaultOpen>\n        {t(\n          'design_system.gallery.samples.content.draftOrdersAreInvisibleToCustomersAndSkipStockReservationUntilTheyAreConfirmed',\n        )}\n      </ContextHelp>\n    </div>\n  )\n}\nconst flashMessagesEntry: GalleryEntry = {\n  id: 'flash-messages',\n  title: 'FlashMessages',\n  importPath: '@open-mercato/ui/backend/FlashMessages',\n  variants: [\n    {\n      id: 'kinds',\n      title: 'flash() kinds (toast via the AppShell singleton)',\n      render: () => <FlashMessagesEntryKindsPreview />,\n      code: `import { flash } from '@open-mercato/ui/backend/FlashMessages'\n\n// FlashMessages is mounted once by AppShell \u2014 never mount your own.\nflash('Changes saved', 'success')\nflash('Sync scheduled', 'info')\nflash('Quota almost reached', 'warning')\nflash('Save failed', 'error')`,\n    },\n  ],\n}\nconst nextStepCalloutEntry: GalleryEntry = {\n  id: 'next-step-callout',\n  title: 'NextStepCallout',\n  importPath: '@open-mercato/ui/backend/NextStepCallout',\n  variants: [\n    {\n      id: 'basic',\n      title: 'Basic',\n      render: () => <NextStepCalloutEntryBasicPreview />,\n      code: `import { Rocket, Sparkles } from 'lucide-react'\nimport { NextStepCallout } from '@open-mercato/ui/backend/NextStepCallout'\n\n<NextStepCallout\n  icon={<Rocket className=\"size-6\" />}\n  title=\"Publish your catalog\"\n  description=\"Products are imported and priced. Publishing makes them visible on every sales channel.\"\n  actionLabel=\"Publish catalog\"\n  actionIcon={<Sparkles className=\"mr-2 size-4\" />}\n  onAction={handlePublish}\n/>`,\n    },\n    {\n      id: 'with-steps',\n      title: 'With steps',\n      render: () => <NextStepCalloutEntryWithStepsPreview />,\n      code: `import { NextStepCallout } from '@open-mercato/ui/backend/NextStepCallout'\n\n<NextStepCallout\n  title=\"Finish store setup\"\n  description=\"Two steps are done \u2014 connect a payment provider to start selling.\"\n  steps={[\n    { id: 'import', label: 'Import products', state: 'completed' },\n    { id: 'pricing', label: 'Set pricing', state: 'completed' },\n    { id: 'payments', label: 'Connect payments', state: 'active' },\n    { id: 'launch', label: 'Launch', state: 'pending' },\n  ]}\n  actionLabel=\"Connect payments\"\n  onAction={handleConnect}\n/>`,\n    },\n    {\n      id: 'with-status',\n      title: 'With status progress',\n      render: () => <NextStepCalloutEntryWithStatusPreview />,\n      code: `import { CircleCheck } from 'lucide-react'\nimport { NextStepCallout } from '@open-mercato/ui/backend/NextStepCallout'\n\n<NextStepCallout\n  title=\"Index your products\"\n  description=\"Search stays disabled until the first indexing run completes.\"\n  actionLabel=\"Re-run indexing\"\n  onAction={handleReindex}\n  busy\n  status={{\n    tone: 'info',\n    icon: <CircleCheck className=\"size-4\" />,\n    label: 'Indexing in progress',\n    progressValue: 64,\n    progressDescription: '1,280 of 2,000 products indexed',\n  }}\n/>`,\n    },\n  ],\n}\nconst contextHelpEntry: GalleryEntry = {\n  id: 'context-help',\n  title: 'ContextHelp',\n  importPath: '@open-mercato/ui/backend/ContextHelp',\n  variants: [\n    {\n      id: 'default',\n      title: 'default (collapsed)',\n      render: () => <ContextHelpEntryDefaultPreview />,\n      code: `import { ContextHelp } from '@open-mercato/ui/backend/ContextHelp'\n\n<ContextHelp title=\"How do exchange rates work?\">\n  Rates refresh nightly from the configured provider. Manual overrides\n  stay pinned until you clear them.\n</ContextHelp>`,\n    },\n    {\n      id: 'default-open',\n      title: 'defaultOpen',\n      render: () => <ContextHelpEntryDefaultOpenPreview />,\n      code: `import { ContextHelp } from '@open-mercato/ui/backend/ContextHelp'\n\n<ContextHelp title=\"Why is this field required?\" defaultOpen>\n  The tax office identifier is mandatory for invoices issued to\n  companies registered in the EU.\n</ContextHelp>`,\n    },\n    {\n      id: 'info-icon',\n      title: 'Info icon (bulb={false})',\n      render: () => <ContextHelpEntryInfoIconPreview />,\n      code: `import { ContextHelp } from '@open-mercato/ui/backend/ContextHelp'\n\n<ContextHelp title=\"About draft orders\" bulb={false} defaultOpen>\n  Draft orders are invisible to customers and skip stock reservation\n  until they are confirmed.\n</ContextHelp>`,\n    },\n  ],\n}\nexport const entries: GalleryEntry[] = [flashMessagesEntry, nextStepCalloutEntry, contextHelpEntry]\n"],
+  "mappings": "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",
   "names": []
 }