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

package/dist/modules/design_system/gallery/demos/foundation-references.js

@@ -0,0 +1,188 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { SearchInput } from "@open-mercato/ui/primitives/search-input";
+import { flash } from "@open-mercato/ui/backend/FlashMessages";
+import { colors, grid, radius, shadows, typography } from "./foundation-reference-data.js";
+function ReferenceNote({ message }) {
+  const t = useT();
+  return /* @__PURE__ */ jsx("p", { className: "max-w-3xl text-sm leading-relaxed text-muted-foreground", children: t(`design_system.foundations.reference.${message}`) });
+}
+function SourceTypography() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsx(ReferenceNote, { message: "typographyNote" }),
+    /* @__PURE__ */ jsx("div", { className: "divide-y divide-border", children: typography.map((item) => /* @__PURE__ */ jsxs("article", { className: "min-w-0 space-y-4 py-6", "data-foundation": "typography", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline justify-between gap-3", children: [
+        /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium", children: t(`design_system.foundations.reference.type.${item.id}`) }),
+        /* @__PURE__ */ jsxs("dl", { className: "flex flex-wrap gap-x-5 gap-y-2 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("dt", { className: "inline", children: [
+              t("design_system.foundations.reference.sizeHeight"),
+              " "
+            ] }),
+            /* @__PURE__ */ jsxs("dd", { className: "inline font-mono", children: [
+              item.size,
+              "/",
+              item.lineHeight,
+              " px"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("dt", { className: "inline", children: [
+              t("design_system.foundations.reference.weight"),
+              " "
+            ] }),
+            /* @__PURE__ */ jsx("dd", { className: "inline font-mono", children: item.weight })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("dt", { className: "inline", children: [
+              t("design_system.foundations.reference.tracking"),
+              " "
+            ] }),
+            /* @__PURE__ */ jsxs("dd", { className: "inline font-mono", children: [
+              item.tracking,
+              "%"
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "break-words font-sans", style: { fontSize: item.size, lineHeight: `${item.lineHeight}px`, fontWeight: item.weight, letterSpacing: `${item.tracking / 100}em`, textTransform: item.name.toLowerCase().startsWith("subhead") ? "uppercase" : void 0 }, children: t("design_system.gallery.samples.typeSample") })
+    ] }, item.id)) })
+  ] });
+}
+function SourceRadius() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsx(ReferenceNote, { message: "radiusNote" }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-x-6 gap-y-8 sm:grid-cols-3 xl:grid-cols-4", children: radius.map((item) => /* @__PURE__ */ jsxs("article", { className: "space-y-3", "data-foundation": "radius", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-24 border-2 border-foreground bg-muted/40", style: { borderRadius: item.pixels }, "aria-hidden": true }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap justify-between gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx("code", { children: item.name }),
+        /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+          item.pixels,
+          " px"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: item.applicationClassName ?? t("design_system.foundations.reference.sourceOnly") })
+    ] }, item.id)) })
+  ] });
+}
+function SourceShadows() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsx(ReferenceNote, { message: "shadowNote" }),
+    /* @__PURE__ */ jsx("div", { className: "grid gap-6 sm:grid-cols-2 xl:grid-cols-3", children: shadows.map((item) => /* @__PURE__ */ jsxs("article", { className: "min-w-0 space-y-4 rounded-lg border border-border p-5", "data-foundation": "shadow", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex h-40 items-center justify-center overflow-hidden rounded-md", style: { backgroundColor: "#ffffff" }, children: /* @__PURE__ */ jsx("div", { className: "h-20 w-28 rounded-lg", style: { backgroundColor: "#ffffff", boxShadow: item.css }, "aria-hidden": true }) }),
+      /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium", children: t(`design_system.foundations.reference.shadow.${item.id}`) }),
+      /* @__PURE__ */ jsx("code", { className: "block break-words text-xs text-muted-foreground", children: item.name }),
+      /* @__PURE__ */ jsxs("section", { className: "text-xs", children: [
+        /* @__PURE__ */ jsx("h5", { className: "text-xs font-medium", children: t("design_system.foundations.reference.shadowLayers") }),
+        /* @__PURE__ */ jsx("code", { className: "mt-3 block break-words leading-relaxed text-muted-foreground", children: item.css })
+      ] })
+    ] }, item.id)) })
+  ] });
+}
+function SourceGrids() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-8", children: [
+    /* @__PURE__ */ jsx(ReferenceNote, { message: "gridNote" }),
+    grid.map((item) => /* @__PURE__ */ jsxs("article", { className: "space-y-4", "data-foundation": "grid", children: [
+      /* @__PURE__ */ jsx("h4", { className: "text-base font-medium", children: t(`design_system.foundations.reference.grid.${item.id}`) }),
+      /* @__PURE__ */ jsxs("div", { role: "img", "aria-label": t(`design_system.foundations.reference.grid.${item.id}`), className: "relative flex h-36 overflow-hidden rounded-lg border border-border bg-background sm:h-48", children: [
+        item.sidebar > 0 ? /* @__PURE__ */ jsx("div", { className: "h-full shrink-0 bg-primary", style: { width: `${item.sidebar / item.width * 100}%` } }) : null,
+        item.submenu > 0 ? /* @__PURE__ */ jsx("div", { className: "h-full shrink-0 bg-muted", style: { width: `${item.submenu / item.width * 100}%` } }) : null,
+        /* @__PURE__ */ jsx("div", { className: "flex h-full min-w-0 flex-1", style: { paddingInline: `${item.safe / item.width * 100}%`, gap: `${item.gutter / (item.width - item.sidebar - item.submenu - item.safe * 2) * 100}%` }, children: Array.from({ length: 12 }, (_, index) => /* @__PURE__ */ jsx("div", { className: "h-full min-w-0 flex-1 bg-primary/15" }, index)) })
+      ] }),
+      /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-2 gap-4 text-sm sm:grid-cols-4", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("dt", { className: "text-xs text-muted-foreground", children: t("design_system.figmaFoundations.columns") }),
+          /* @__PURE__ */ jsxs("dd", { className: "mt-1 font-mono", children: [
+            "12 \xD7 ",
+            item.column,
+            " px"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("dt", { className: "text-xs text-muted-foreground", children: t("design_system.figmaFoundations.gutter") }),
+          /* @__PURE__ */ jsxs("dd", { className: "mt-1 font-mono", children: [
+            item.gutter,
+            " px"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("dt", { className: "text-xs text-muted-foreground", children: t("design_system.figmaFoundations.safeArea") }),
+          /* @__PURE__ */ jsxs("dd", { className: "mt-1 font-mono", children: [
+            item.safe,
+            " px"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("dt", { className: "text-xs text-muted-foreground", children: t("design_system.figmaFoundations.sidebar") }),
+          /* @__PURE__ */ jsxs("dd", { className: "mt-1 font-mono", children: [
+            item.sidebar,
+            item.submenu ? ` + ${item.submenu}` : "",
+            " px"
+          ] })
+        ] })
+      ] })
+    ] }, item.id))
+  ] });
+}
+function colorGroup(item) {
+  if (item.mode) return item.mode;
+  if (item.kind.startsWith("Color/")) return "brand";
+  if (item.name.includes(" [")) return item.name.split(" [")[0].toLowerCase();
+  return item.name.split("-")[0];
+}
+function SourceSwatch({ item }) {
+  const t = useT();
+  const value = item.opacity < 1 ? `${item.hex}${Math.round(item.opacity * 255).toString(16).padStart(2, "0")}` : item.hex;
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(value);
+      flash(t("design_system.gallery.tokenCopied", { token: value }), "success");
+    } catch {
+      flash(t("design_system.gallery.tokenCopyFailed"), "error");
+    }
+  };
+  return /* @__PURE__ */ jsxs(Button, { type: "button", variant: "ghost", onClick: copy, title: t("design_system.gallery.copyToken", { token: value }), className: "h-auto min-w-0 flex-col items-stretch justify-start gap-2 whitespace-normal rounded-md p-1.5 text-left", "data-foundation": "color", children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "block h-16 shrink-0 overflow-hidden rounded-md border border-border bg-background", children: /* @__PURE__ */ jsx("span", { className: "block h-full", style: { backgroundColor: item.hex, opacity: item.opacity } }) }),
+    /* @__PURE__ */ jsx("span", { className: "break-words text-xs font-medium", children: item.role || item.name }),
+    /* @__PURE__ */ jsx("span", { className: "font-mono text-xs text-muted-foreground", children: value.toUpperCase() }),
+    item.mismatch ? /* @__PURE__ */ jsx("span", { className: "text-overline leading-normal text-muted-foreground", children: t("design_system.foundations.reference.sourceCaption", { value: item.captions.join(", ") }) }) : null
+  ] });
+}
+function SourceColors() {
+  const t = useT();
+  const [query, setQuery] = React.useState("");
+  const needle = query.trim().toLocaleLowerCase();
+  const grouped = /* @__PURE__ */ new Map();
+  for (const item of colors) {
+    const group = colorGroup(item);
+    const label = t(`design_system.foundations.reference.colorGroup.${group}`, group);
+    if (needle && !`${label} ${item.name} ${item.role ?? ""} ${item.hex} ${item.captions.join(" ")}`.toLocaleLowerCase().includes(needle)) continue;
+    const items = grouped.get(group) ?? [];
+    items.push(item);
+    grouped.set(group, items);
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-8", children: [
+    /* @__PURE__ */ jsx(ReferenceNote, { message: "colorNote" }),
+    /* @__PURE__ */ jsx(SearchInput, { value: query, onChange: setQuery, "aria-label": t("design_system.figmaFoundations.filterColors"), placeholder: t("design_system.figmaFoundations.filterColors"), className: "max-w-xl" }),
+    Array.from(grouped, ([group, items]) => /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium", children: t(`design_system.foundations.reference.colorGroup.${group}`, group) }),
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-4 xl:grid-cols-6", children: items.map((item) => /* @__PURE__ */ jsx(SourceSwatch, { item }, item.id)) })
+    ] }, group)),
+    grouped.size === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("design_system.figmaFoundations.emptyResults") }) : null
+  ] });
+}
+export {
+  SourceColors,
+  SourceGrids,
+  SourceRadius,
+  SourceShadows,
+  SourceTypography
+};
+//# sourceMappingURL=foundation-references.js.map

package/dist/modules/design_system/gallery/demos/foundation-references.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/demos/foundation-references.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { SearchInput } from '@open-mercato/ui/primitives/search-input'\nimport { flash } from '@open-mercato/ui/backend/FlashMessages'\nimport { colors, grid, radius, shadows, typography } from './foundation-reference-data'\n\nfunction ReferenceNote({ message }: { message: string }) {\n  const t = useT()\n  return <p className=\"max-w-3xl text-sm leading-relaxed text-muted-foreground\">{t(`design_system.foundations.reference.${message}`)}</p>\n}\n\nexport function SourceTypography() {\n  const t = useT()\n  return <div className=\"space-y-6\">\n    <ReferenceNote message=\"typographyNote\" />\n    <div className=\"divide-y divide-border\">\n      {typography.map(item => <article key={item.id} className=\"min-w-0 space-y-4 py-6\" data-foundation=\"typography\">\n        <div className=\"flex flex-wrap items-baseline justify-between gap-3\">\n          <h4 className=\"text-sm font-medium\">{t(`design_system.foundations.reference.type.${item.id}`)}</h4>\n          <dl className=\"flex flex-wrap gap-x-5 gap-y-2 text-xs text-muted-foreground\">\n            <div><dt className=\"inline\">{t('design_system.foundations.reference.sizeHeight')} </dt><dd className=\"inline font-mono\">{item.size}/{item.lineHeight} px</dd></div>\n            <div><dt className=\"inline\">{t('design_system.foundations.reference.weight')} </dt><dd className=\"inline font-mono\">{item.weight}</dd></div>\n            <div><dt className=\"inline\">{t('design_system.foundations.reference.tracking')} </dt><dd className=\"inline font-mono\">{item.tracking}%</dd></div>\n          </dl>\n        </div>\n        <p className=\"break-words font-sans\" style={{ fontSize: item.size, lineHeight: `${item.lineHeight}px`, fontWeight: item.weight, letterSpacing: `${item.tracking / 100}em`, textTransform: item.name.toLowerCase().startsWith('subhead') ? 'uppercase' : undefined }}>{t('design_system.gallery.samples.typeSample')}</p>\n      </article>)}\n    </div>\n  </div>\n}\n\nexport function SourceRadius() {\n  const t = useT()\n  return <div className=\"space-y-6\">\n    <ReferenceNote message=\"radiusNote\" />\n    <div className=\"grid grid-cols-2 gap-x-6 gap-y-8 sm:grid-cols-3 xl:grid-cols-4\">\n      {radius.map(item => <article key={item.id} className=\"space-y-3\" data-foundation=\"radius\">\n        <div className=\"h-24 border-2 border-foreground bg-muted/40\" style={{ borderRadius: item.pixels }} aria-hidden />\n        <div className=\"flex flex-wrap justify-between gap-2 text-sm\"><code>{item.name}</code><span className=\"text-muted-foreground\">{item.pixels} px</span></div>\n        <p className=\"text-xs text-muted-foreground\">{item.applicationClassName ?? t('design_system.foundations.reference.sourceOnly')}</p>\n      </article>)}\n    </div>\n  </div>\n}\n\nexport function SourceShadows() {\n  const t = useT()\n  return <div className=\"space-y-6\">\n    <ReferenceNote message=\"shadowNote\" />\n    <div className=\"grid gap-6 sm:grid-cols-2 xl:grid-cols-3\">\n      {shadows.map(item => <article key={item.id} className=\"min-w-0 space-y-4 rounded-lg border border-border p-5\" data-foundation=\"shadow\">\n        <div className=\"flex h-40 items-center justify-center overflow-hidden rounded-md\" style={{ backgroundColor: '#ffffff' }}>\n          <div className=\"h-20 w-28 rounded-lg\" style={{ backgroundColor: '#ffffff', boxShadow: item.css }} aria-hidden />\n        </div>\n        <h4 className=\"text-sm font-medium\">{t(`design_system.foundations.reference.shadow.${item.id}`)}</h4>\n        <code className=\"block break-words text-xs text-muted-foreground\">{item.name}</code>\n        <section className=\"text-xs\">\n          <h5 className=\"text-xs font-medium\">{t('design_system.foundations.reference.shadowLayers')}</h5>\n          <code className=\"mt-3 block break-words leading-relaxed text-muted-foreground\">{item.css}</code>\n        </section>\n      </article>)}\n    </div>\n  </div>\n}\n\nexport function SourceGrids() {\n  const t = useT()\n  return <div className=\"space-y-8\">\n    <ReferenceNote message=\"gridNote\" />\n    {grid.map(item => <article key={item.id} className=\"space-y-4\" data-foundation=\"grid\">\n      <h4 className=\"text-base font-medium\">{t(`design_system.foundations.reference.grid.${item.id}`)}</h4>\n      <div role=\"img\" aria-label={t(`design_system.foundations.reference.grid.${item.id}`)} className=\"relative flex h-36 overflow-hidden rounded-lg border border-border bg-background sm:h-48\">\n        {item.sidebar > 0 ? <div className=\"h-full shrink-0 bg-primary\" style={{ width: `${item.sidebar / item.width * 100}%` }} /> : null}\n        {item.submenu > 0 ? <div className=\"h-full shrink-0 bg-muted\" style={{ width: `${item.submenu / item.width * 100}%` }} /> : null}\n        <div className=\"flex h-full min-w-0 flex-1\" style={{ paddingInline: `${item.safe / item.width * 100}%`, gap: `${item.gutter / (item.width - item.sidebar - item.submenu - item.safe * 2) * 100}%` }}>\n          {Array.from({ length: 12 }, (_, index) => <div key={index} className=\"h-full min-w-0 flex-1 bg-primary/15\" />)}\n        </div>\n      </div>\n      <dl className=\"grid grid-cols-2 gap-4 text-sm sm:grid-cols-4\">\n        <div><dt className=\"text-xs text-muted-foreground\">{t('design_system.figmaFoundations.columns')}</dt><dd className=\"mt-1 font-mono\">12 \u00D7 {item.column} px</dd></div>\n        <div><dt className=\"text-xs text-muted-foreground\">{t('design_system.figmaFoundations.gutter')}</dt><dd className=\"mt-1 font-mono\">{item.gutter} px</dd></div>\n        <div><dt className=\"text-xs text-muted-foreground\">{t('design_system.figmaFoundations.safeArea')}</dt><dd className=\"mt-1 font-mono\">{item.safe} px</dd></div>\n        <div><dt className=\"text-xs text-muted-foreground\">{t('design_system.figmaFoundations.sidebar')}</dt><dd className=\"mt-1 font-mono\">{item.sidebar}{item.submenu ? ` + ${item.submenu}` : ''} px</dd></div>\n      </dl>\n    </article>)}\n  </div>\n}\n\nfunction colorGroup(item: typeof colors[number]) {\n  if (item.mode) return item.mode\n  if (item.kind.startsWith('Color/')) return 'brand'\n  if (item.name.includes(' [')) return item.name.split(' [')[0].toLowerCase()\n  return item.name.split('-')[0]\n}\n\nfunction SourceSwatch({ item }: { item: typeof colors[number] }) {\n  const t = useT()\n  const value = item.opacity < 1 ? `${item.hex}${Math.round(item.opacity * 255).toString(16).padStart(2, '0')}` : item.hex\n  const copy = async () => {\n    try {\n      await navigator.clipboard.writeText(value)\n      flash(t('design_system.gallery.tokenCopied', { token: value }), 'success')\n    } catch {\n      flash(t('design_system.gallery.tokenCopyFailed'), 'error')\n    }\n  }\n  return <Button type=\"button\" variant=\"ghost\" onClick={copy} title={t('design_system.gallery.copyToken', { token: value })} className=\"h-auto min-w-0 flex-col items-stretch justify-start gap-2 whitespace-normal rounded-md p-1.5 text-left\" data-foundation=\"color\">\n    <span aria-hidden className=\"block h-16 shrink-0 overflow-hidden rounded-md border border-border bg-background\"><span className=\"block h-full\" style={{ backgroundColor: item.hex, opacity: item.opacity }} /></span>\n    <span className=\"break-words text-xs font-medium\">{item.role || item.name}</span>\n    <span className=\"font-mono text-xs text-muted-foreground\">{value.toUpperCase()}</span>\n    {item.mismatch ? <span className=\"text-overline leading-normal text-muted-foreground\">{t('design_system.foundations.reference.sourceCaption', { value: item.captions.join(', ') })}</span> : null}\n  </Button>\n}\n\nexport function SourceColors() {\n  const t = useT()\n  const [query, setQuery] = React.useState('')\n  const needle = query.trim().toLocaleLowerCase()\n  const grouped = new Map<string, Array<typeof colors[number]>>()\n  for (const item of colors) {\n    const group = colorGroup(item)\n    const label = t(`design_system.foundations.reference.colorGroup.${group}`, group)\n    if (needle && !`${label} ${item.name} ${item.role ?? ''} ${item.hex} ${item.captions.join(' ')}`.toLocaleLowerCase().includes(needle)) continue\n    const items = grouped.get(group) ?? []\n    items.push(item)\n    grouped.set(group, items)\n  }\n  return <div className=\"space-y-8\">\n    <ReferenceNote message=\"colorNote\" />\n    <SearchInput value={query} onChange={setQuery} aria-label={t('design_system.figmaFoundations.filterColors')} placeholder={t('design_system.figmaFoundations.filterColors')} className=\"max-w-xl\" />\n    {Array.from(grouped, ([group, items]) => <section key={group} className=\"space-y-3\">\n      <h4 className=\"text-sm font-medium\">{t(`design_system.foundations.reference.colorGroup.${group}`, group)}</h4>\n      <div className=\"grid grid-cols-2 gap-3 sm:grid-cols-4 xl:grid-cols-6\">{items.map(item => <SourceSwatch key={item.id} item={item} />)}</div>\n    </section>)}\n    {grouped.size === 0 ? <p className=\"text-sm text-muted-foreground\">{t('design_system.figmaFoundations.emptyResults')}</p> : null}\n  </div>\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/modules/design_system/gallery/demos/key-components-code.generated.js

@@ -0,0 +1,6 @@
+const source = "import * as React from 'react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { FieldLabel } from '@open-mercato/ui/primitives/label'\nimport { HintText } from '@open-mercato/ui/primitives/hint-text'\nimport { FormField } from '@open-mercato/ui/primitives/form-field'\nimport { Input } from '@open-mercato/ui/primitives/input'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { CompactButton } from '@open-mercato/ui/primitives/compact-button'\nimport { LinkButton } from '@open-mercato/ui/primitives/link-button'\nimport { SimpleTooltip } from '@open-mercato/ui/primitives/tooltip'\nimport { CheckboxField } from '@open-mercato/ui/primitives/checkbox-field'\nimport { Avatar } from '@open-mercato/ui/primitives/avatar'\nimport { Badge } from '@open-mercato/ui/primitives/badge'\nimport { Switch } from '@open-mercato/ui/primitives/switch'\nimport { ContentLabel } from '@open-mercato/ui/primitives/content-label'\nimport { ContentCard } from '@open-mercato/ui/primitives/content-card'\nimport { KeyIcon, KeyIconGlyph, type KeyIconColor } from '@open-mercato/ui/primitives/key-icon'\nimport { PaymentIcon, type PaymentIconCategory } from '@open-mercato/ui/primitives/payment-icon'\nimport { ChartLegend, ChartLegendDot, type ChartLegendColor } from '@open-mercato/ui/primitives/chart-legend'\nimport { navigationBrandArtwork } from '@open-mercato/ui/assets/navigation-brand-artwork'\nimport mastercard from '../assets/menu-mastercard.svg'\nimport spotify from '../assets/menu-spotify.svg'\nimport avatar from '../assets/avatar-photo.png'\n\nconst imageSource = (asset: string | { readonly src: string }) => typeof asset === 'string' ? asset : asset.src\nconst prefix = 'design_system.gallery.examples.keyComponents.'\ntype ContentKind = 'basic' | 'icon' | 'avatar' | 'provider' | 'brand' | 'company'\n\nfunction ContentLeading({ kind, size = 40 }: { kind: ContentKind; size?: 40 | 48 }) {\n  if (kind === 'basic') return null\n  if (kind === 'icon') return <KeyIcon size={size}><KeyIconGlyph /></KeyIcon>\n  if (kind === 'avatar') return <Avatar label=\"James Brown\" size={size} src={imageSource(avatar)} />\n  if (kind === 'provider') return <img alt=\"\" src={imageSource(mastercard)} className=\"h-6 w-8 object-contain\" />\n  return <img alt=\"\" src={kind === 'company' ? navigationBrandArtwork.synergyOriginal : imageSource(spotify)} className={size === 40 ? 'size-10 object-contain' : 'size-12 object-contain'} />\n}\n\nexport function FieldLabelExample({ disabled = false, kind = 'all' }: { disabled?: boolean; kind?: 'all' | 'required' | 'optional' | 'information' | 'action' }) {\n  const t = useT()\n  const inputId = React.useId()\n  const helpId = React.useId()\n  const [help, setHelp] = React.useState(false)\n  const information = <SimpleTooltip content={t(`${prefix}helpText`)}><CompactButton type=\"button\" size={20} appearance=\"ghost\" disabled={disabled} aria-label={t(`${prefix}information`)}><KeyIconGlyph name=\"labelInformation\" /></CompactButton></SimpleTooltip>\n  const action = <LinkButton type=\"button\" size=\"sm\" variant=\"gray\" disabled={disabled} className=\"disabled:text-text-disabled disabled:opacity-100\" aria-expanded={help} aria-controls={helpId} onClick={() => setHelp(value => !value)}>{t(`${prefix}help`)}</LinkButton>\n  return <div className=\"grid w-80 max-w-full gap-2\">\n    <FieldLabel htmlFor={inputId} disabled={disabled} required={kind === 'required'} sublabel={kind === 'all' || kind === 'optional' ? t(`${prefix}optional`) : undefined} information={kind === 'all' || kind === 'information' ? information : undefined} action={kind === 'all' || kind === 'action' ? action : undefined}>{t(`${prefix}label`)}</FieldLabel>\n    <Input id={inputId} disabled={disabled} aria-required={kind === 'required'} aria-describedby={help ? helpId : undefined} />\n    <p id={helpId} hidden={!help} className=\"text-xs text-muted-foreground\">{t(`${prefix}helpText`)}</p>\n  </div>\n}\n\nexport function FormFieldLabelExample() {\n  const t = useT()\n  return <div className=\"grid w-80 max-w-full gap-5\">{[false, true].map(disabled => <FormField key={String(disabled)} sourceLabel label={t(`${prefix}label`)} labelSublabel={t(`${prefix}optional`)} disabled={disabled} description={t(`${prefix}hint`)}><Input /></FormField>)}</div>\n}\n\nexport function HintTextExample({ state = 'default', icon = true }: { state?: 'default' | 'error' | 'disabled'; icon?: boolean }) {\n  const t = useT()\n  return <HintText state={state} leading={icon ? <KeyIconGlyph name=\"information\" /> : undefined}>{t(`${prefix}hint`)}</HintText>\n}\n\nexport function ContentLabelExample({ kind = 'basic', size = 40, configurable = false }: { kind?: Exclude<ContentKind, 'provider'>; size?: 40 | 48; configurable?: boolean }) {\n  const t = useT()\n  const [sublabel, setSublabel] = React.useState(true)\n  const [badge, setBadge] = React.useState(false)\n  const [toggle, setToggle] = React.useState(false)\n  const [enabled, setEnabled] = React.useState(false)\n  return <div className=\"grid w-full gap-5\">\n    {configurable ? <div className=\"flex flex-wrap gap-4\"><CheckboxField label={t(`${prefix}sublabelControl`)} checked={sublabel} onCheckedChange={checked => setSublabel(checked === true)} /><CheckboxField label={t(`${prefix}badgeControl`)} checked={badge} onCheckedChange={checked => setBadge(checked === true)} /><CheckboxField label={t(`${prefix}toggleControl`)} checked={toggle} onCheckedChange={checked => setToggle(checked === true)} /></div> : null}\n    <ContentLabel size={size} label={t(`${prefix}label`)} description={t(`${prefix}description`)} sublabel={sublabel ? t(`${prefix}sublabel`) : undefined} leading={kind === 'basic' ? undefined : <ContentLeading kind={kind} size={size} />} badge={badge ? <Badge size={20} tone=\"info\" appearance=\"light\">{t(`${prefix}new`)}</Badge> : undefined} trailing={toggle ? <Switch aria-label={t(`${prefix}enabled`)} checked={enabled} onCheckedChange={setEnabled} /> : undefined} className={configurable ? 'w-full max-w-md' : 'w-75 max-w-full'} />\n    {toggle ? <output className=\"text-xs text-muted-foreground\">{t(`${prefix}${enabled ? 'enabled' : 'disabled'}`)}</output> : null}\n  </div>\n}\n\nexport function ContentCardExample({ kind = 'basic', disabled = false }: { kind?: ContentKind; disabled?: boolean }) {\n  const t = useT()\n  const [visible, setVisible] = React.useState(true)\n  return <div className=\"grid w-90 max-w-full gap-3\">\n    {visible ? <ContentCard label={t(`${prefix}label`)} description={t(`${prefix}description`)} sublabel={t(`${prefix}sublabel`)} leading={kind === 'basic' ? undefined : <ContentLeading kind={kind} />} badge={<Badge size={16} tone=\"info\" appearance=\"light\">{t(`${prefix}new`)}</Badge>} onDismiss={() => setVisible(false)} dismissLabel={t(`${prefix}dismiss`)} disabled={disabled} /> : <><output className=\"text-sm text-muted-foreground\">{t(`${prefix}dismissed`)}</output><Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={() => setVisible(true)}>{t(`${prefix}restore`)}</Button></>}\n  </div>\n}\n\nconst keyColors: KeyIconColor[] = ['gray', 'blue', 'orange', 'red', 'green', 'yellow', 'purple', 'pink', 'teal']\nconst legendColors: ChartLegendColor[] = ['gray', 'light-gray', 'blue', 'orange', 'red', 'green', 'yellow', 'purple', 'sky', 'pink', 'teal']\n\nexport function KeyIconExamples({ appearance = 'stroke' }: { appearance?: 'stroke' | 'lighter' }) {\n  const t = useT()\n  return <div className=\"grid w-full gap-4\"><p className=\"max-w-xl text-sm text-muted-foreground\">{t(`${prefix}paletteNote`)}</p>{keyColors.map(color => <div key={color} className=\"flex flex-wrap items-center gap-4\"><span className=\"w-20 text-xs text-muted-foreground\">{t(`${prefix}color.${color}`)}</span>{([64, 56, 48, 40, 32] as const).map(size => <KeyIcon key={size} color={color} appearance={appearance} size={size} aria-label={`${t(`${prefix}color.${color}`)} ${size}`}><KeyIconGlyph /></KeyIcon>)}</div>)}</div>\n}\n\nexport function PaymentIconExamples() {\n  const t = useT()\n  return <div className=\"grid grid-cols-2 gap-6 sm:grid-cols-4\">{(['water', 'gas', 'electricity', 'donate', 'internet', 'phone', 'rent', 'tax'] as PaymentIconCategory[]).map(category => <div key={category} className=\"flex items-center gap-3\"><PaymentIcon category={category} /><span className=\"text-sm text-foreground\">{t(`${prefix}payment.${category}`)}</span></div>)}</div>\n}\n\nexport function ChartLegendExamples({ interactive = false }: { interactive?: boolean }) {\n  const t = useT()\n  const [hidden, setHidden] = React.useState<ChartLegendColor[]>([])\n  return <div className=\"grid w-full gap-5\"><div className=\"flex flex-wrap gap-5\">{legendColors.map(color => interactive ? <Button key={color} type=\"button\" variant=\"ghost\" size=\"sm\" aria-pressed={!hidden.includes(color)} onClick={() => setHidden(items => items.includes(color) ? items.filter(item => item !== color) : [...items, color])}><ChartLegend color={color} disabled={hidden.includes(color)}>{t(`${prefix}color.${color}`)}</ChartLegend></Button> : <ChartLegend key={color} color={color}>{t(`${prefix}color.${color}`)}</ChartLegend>)}{!interactive ? <ChartLegend disabled>{t(`${prefix}disabled`)}</ChartLegend> : null}</div>\n    {interactive ? <div className=\"flex flex-wrap gap-3\" role=\"list\" aria-label={t(`${prefix}visibleSeries`)}>{legendColors.filter(color => !hidden.includes(color)).map(color => <div key={color} role=\"listitem\" className=\"rounded-md border border-border p-3\"><ChartLegend color={color}>{t(`${prefix}color.${color}`)}</ChartLegend></div>)}</div> : null}\n  </div>\n}\n\nexport function ChartLegendDotExamples({ size = 16 }: { size?: 16 | 20 }) {\n  const t = useT()\n  return <div className=\"flex flex-wrap items-center gap-5\">{legendColors.map(color => <div key={color} className=\"flex items-center gap-1\"><ChartLegendDot color={color} size={size} /><span className=\"text-xs text-muted-foreground\">{t(`${prefix}color.${color}`)}</span></div>)}</div>\n}\n";
+const keyComponentExampleCode = (expression) => source + "\n" + expression + "\n";
+export {
+  keyComponentExampleCode
+};
+//# sourceMappingURL=key-components-code.generated.js.map

package/dist/modules/design_system/gallery/demos/key-components-code.generated.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/demos/key-components-code.generated.ts"],
+  "sourcesContent": ["// Generated by yarn storybook:generate from key-components.tsx.\nconst source = \"import * as React from 'react'\\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\\nimport { FieldLabel } from '@open-mercato/ui/primitives/label'\\nimport { HintText } from '@open-mercato/ui/primitives/hint-text'\\nimport { FormField } from '@open-mercato/ui/primitives/form-field'\\nimport { Input } from '@open-mercato/ui/primitives/input'\\nimport { Button } from '@open-mercato/ui/primitives/button'\\nimport { CompactButton } from '@open-mercato/ui/primitives/compact-button'\\nimport { LinkButton } from '@open-mercato/ui/primitives/link-button'\\nimport { SimpleTooltip } from '@open-mercato/ui/primitives/tooltip'\\nimport { CheckboxField } from '@open-mercato/ui/primitives/checkbox-field'\\nimport { Avatar } from '@open-mercato/ui/primitives/avatar'\\nimport { Badge } from '@open-mercato/ui/primitives/badge'\\nimport { Switch } from '@open-mercato/ui/primitives/switch'\\nimport { ContentLabel } from '@open-mercato/ui/primitives/content-label'\\nimport { ContentCard } from '@open-mercato/ui/primitives/content-card'\\nimport { KeyIcon, KeyIconGlyph, type KeyIconColor } from '@open-mercato/ui/primitives/key-icon'\\nimport { PaymentIcon, type PaymentIconCategory } from '@open-mercato/ui/primitives/payment-icon'\\nimport { ChartLegend, ChartLegendDot, type ChartLegendColor } from '@open-mercato/ui/primitives/chart-legend'\\nimport { navigationBrandArtwork } from '@open-mercato/ui/assets/navigation-brand-artwork'\\nimport mastercard from '../assets/menu-mastercard.svg'\\nimport spotify from '../assets/menu-spotify.svg'\\nimport avatar from '../assets/avatar-photo.png'\\n\\nconst imageSource = (asset: string | { readonly src: string }) => typeof asset === 'string' ? asset : asset.src\\nconst prefix = 'design_system.gallery.examples.keyComponents.'\\ntype ContentKind = 'basic' | 'icon' | 'avatar' | 'provider' | 'brand' | 'company'\\n\\nfunction ContentLeading({ kind, size = 40 }: { kind: ContentKind; size?: 40 | 48 }) {\\n  if (kind === 'basic') return null\\n  if (kind === 'icon') return <KeyIcon size={size}><KeyIconGlyph /></KeyIcon>\\n  if (kind === 'avatar') return <Avatar label=\\\"James Brown\\\" size={size} src={imageSource(avatar)} />\\n  if (kind === 'provider') return <img alt=\\\"\\\" src={imageSource(mastercard)} className=\\\"h-6 w-8 object-contain\\\" />\\n  return <img alt=\\\"\\\" src={kind === 'company' ? navigationBrandArtwork.synergyOriginal : imageSource(spotify)} className={size === 40 ? 'size-10 object-contain' : 'size-12 object-contain'} />\\n}\\n\\nexport function FieldLabelExample({ disabled = false, kind = 'all' }: { disabled?: boolean; kind?: 'all' | 'required' | 'optional' | 'information' | 'action' }) {\\n  const t = useT()\\n  const inputId = React.useId()\\n  const helpId = React.useId()\\n  const [help, setHelp] = React.useState(false)\\n  const information = <SimpleTooltip content={t(`${prefix}helpText`)}><CompactButton type=\\\"button\\\" size={20} appearance=\\\"ghost\\\" disabled={disabled} aria-label={t(`${prefix}information`)}><KeyIconGlyph name=\\\"labelInformation\\\" /></CompactButton></SimpleTooltip>\\n  const action = <LinkButton type=\\\"button\\\" size=\\\"sm\\\" variant=\\\"gray\\\" disabled={disabled} className=\\\"disabled:text-text-disabled disabled:opacity-100\\\" aria-expanded={help} aria-controls={helpId} onClick={() => setHelp(value => !value)}>{t(`${prefix}help`)}</LinkButton>\\n  return <div className=\\\"grid w-80 max-w-full gap-2\\\">\\n    <FieldLabel htmlFor={inputId} disabled={disabled} required={kind === 'required'} sublabel={kind === 'all' || kind === 'optional' ? t(`${prefix}optional`) : undefined} information={kind === 'all' || kind === 'information' ? information : undefined} action={kind === 'all' || kind === 'action' ? action : undefined}>{t(`${prefix}label`)}</FieldLabel>\\n    <Input id={inputId} disabled={disabled} aria-required={kind === 'required'} aria-describedby={help ? helpId : undefined} />\\n    <p id={helpId} hidden={!help} className=\\\"text-xs text-muted-foreground\\\">{t(`${prefix}helpText`)}</p>\\n  </div>\\n}\\n\\nexport function FormFieldLabelExample() {\\n  const t = useT()\\n  return <div className=\\\"grid w-80 max-w-full gap-5\\\">{[false, true].map(disabled => <FormField key={String(disabled)} sourceLabel label={t(`${prefix}label`)} labelSublabel={t(`${prefix}optional`)} disabled={disabled} description={t(`${prefix}hint`)}><Input /></FormField>)}</div>\\n}\\n\\nexport function HintTextExample({ state = 'default', icon = true }: { state?: 'default' | 'error' | 'disabled'; icon?: boolean }) {\\n  const t = useT()\\n  return <HintText state={state} leading={icon ? <KeyIconGlyph name=\\\"information\\\" /> : undefined}>{t(`${prefix}hint`)}</HintText>\\n}\\n\\nexport function ContentLabelExample({ kind = 'basic', size = 40, configurable = false }: { kind?: Exclude<ContentKind, 'provider'>; size?: 40 | 48; configurable?: boolean }) {\\n  const t = useT()\\n  const [sublabel, setSublabel] = React.useState(true)\\n  const [badge, setBadge] = React.useState(false)\\n  const [toggle, setToggle] = React.useState(false)\\n  const [enabled, setEnabled] = React.useState(false)\\n  return <div className=\\\"grid w-full gap-5\\\">\\n    {configurable ? <div className=\\\"flex flex-wrap gap-4\\\"><CheckboxField label={t(`${prefix}sublabelControl`)} checked={sublabel} onCheckedChange={checked => setSublabel(checked === true)} /><CheckboxField label={t(`${prefix}badgeControl`)} checked={badge} onCheckedChange={checked => setBadge(checked === true)} /><CheckboxField label={t(`${prefix}toggleControl`)} checked={toggle} onCheckedChange={checked => setToggle(checked === true)} /></div> : null}\\n    <ContentLabel size={size} label={t(`${prefix}label`)} description={t(`${prefix}description`)} sublabel={sublabel ? t(`${prefix}sublabel`) : undefined} leading={kind === 'basic' ? undefined : <ContentLeading kind={kind} size={size} />} badge={badge ? <Badge size={20} tone=\\\"info\\\" appearance=\\\"light\\\">{t(`${prefix}new`)}</Badge> : undefined} trailing={toggle ? <Switch aria-label={t(`${prefix}enabled`)} checked={enabled} onCheckedChange={setEnabled} /> : undefined} className={configurable ? 'w-full max-w-md' : 'w-75 max-w-full'} />\\n    {toggle ? <output className=\\\"text-xs text-muted-foreground\\\">{t(`${prefix}${enabled ? 'enabled' : 'disabled'}`)}</output> : null}\\n  </div>\\n}\\n\\nexport function ContentCardExample({ kind = 'basic', disabled = false }: { kind?: ContentKind; disabled?: boolean }) {\\n  const t = useT()\\n  const [visible, setVisible] = React.useState(true)\\n  return <div className=\\\"grid w-90 max-w-full gap-3\\\">\\n    {visible ? <ContentCard label={t(`${prefix}label`)} description={t(`${prefix}description`)} sublabel={t(`${prefix}sublabel`)} leading={kind === 'basic' ? undefined : <ContentLeading kind={kind} />} badge={<Badge size={16} tone=\\\"info\\\" appearance=\\\"light\\\">{t(`${prefix}new`)}</Badge>} onDismiss={() => setVisible(false)} dismissLabel={t(`${prefix}dismiss`)} disabled={disabled} /> : <><output className=\\\"text-sm text-muted-foreground\\\">{t(`${prefix}dismissed`)}</output><Button type=\\\"button\\\" variant=\\\"outline\\\" size=\\\"sm\\\" onClick={() => setVisible(true)}>{t(`${prefix}restore`)}</Button></>}\\n  </div>\\n}\\n\\nconst keyColors: KeyIconColor[] = ['gray', 'blue', 'orange', 'red', 'green', 'yellow', 'purple', 'pink', 'teal']\\nconst legendColors: ChartLegendColor[] = ['gray', 'light-gray', 'blue', 'orange', 'red', 'green', 'yellow', 'purple', 'sky', 'pink', 'teal']\\n\\nexport function KeyIconExamples({ appearance = 'stroke' }: { appearance?: 'stroke' | 'lighter' }) {\\n  const t = useT()\\n  return <div className=\\\"grid w-full gap-4\\\"><p className=\\\"max-w-xl text-sm text-muted-foreground\\\">{t(`${prefix}paletteNote`)}</p>{keyColors.map(color => <div key={color} className=\\\"flex flex-wrap items-center gap-4\\\"><span className=\\\"w-20 text-xs text-muted-foreground\\\">{t(`${prefix}color.${color}`)}</span>{([64, 56, 48, 40, 32] as const).map(size => <KeyIcon key={size} color={color} appearance={appearance} size={size} aria-label={`${t(`${prefix}color.${color}`)} ${size}`}><KeyIconGlyph /></KeyIcon>)}</div>)}</div>\\n}\\n\\nexport function PaymentIconExamples() {\\n  const t = useT()\\n  return <div className=\\\"grid grid-cols-2 gap-6 sm:grid-cols-4\\\">{(['water', 'gas', 'electricity', 'donate', 'internet', 'phone', 'rent', 'tax'] as PaymentIconCategory[]).map(category => <div key={category} className=\\\"flex items-center gap-3\\\"><PaymentIcon category={category} /><span className=\\\"text-sm text-foreground\\\">{t(`${prefix}payment.${category}`)}</span></div>)}</div>\\n}\\n\\nexport function ChartLegendExamples({ interactive = false }: { interactive?: boolean }) {\\n  const t = useT()\\n  const [hidden, setHidden] = React.useState<ChartLegendColor[]>([])\\n  return <div className=\\\"grid w-full gap-5\\\"><div className=\\\"flex flex-wrap gap-5\\\">{legendColors.map(color => interactive ? <Button key={color} type=\\\"button\\\" variant=\\\"ghost\\\" size=\\\"sm\\\" aria-pressed={!hidden.includes(color)} onClick={() => setHidden(items => items.includes(color) ? items.filter(item => item !== color) : [...items, color])}><ChartLegend color={color} disabled={hidden.includes(color)}>{t(`${prefix}color.${color}`)}</ChartLegend></Button> : <ChartLegend key={color} color={color}>{t(`${prefix}color.${color}`)}</ChartLegend>)}{!interactive ? <ChartLegend disabled>{t(`${prefix}disabled`)}</ChartLegend> : null}</div>\\n    {interactive ? <div className=\\\"flex flex-wrap gap-3\\\" role=\\\"list\\\" aria-label={t(`${prefix}visibleSeries`)}>{legendColors.filter(color => !hidden.includes(color)).map(color => <div key={color} role=\\\"listitem\\\" className=\\\"rounded-md border border-border p-3\\\"><ChartLegend color={color}>{t(`${prefix}color.${color}`)}</ChartLegend></div>)}</div> : null}\\n  </div>\\n}\\n\\nexport function ChartLegendDotExamples({ size = 16 }: { size?: 16 | 20 }) {\\n  const t = useT()\\n  return <div className=\\\"flex flex-wrap items-center gap-5\\\">{legendColors.map(color => <div key={color} className=\\\"flex items-center gap-1\\\"><ChartLegendDot color={color} size={size} /><span className=\\\"text-xs text-muted-foreground\\\">{t(`${prefix}color.${color}`)}</span></div>)}</div>\\n}\\n\"\nexport const keyComponentExampleCode = (expression: string) => source + \"\\n\" + expression + \"\\n\"\n"],
+  "mappings": "AACA,MAAM,SAAS;AACR,MAAM,0BAA0B,CAAC,eAAuB,SAAS,OAAO,aAAa;",
+  "names": []
+}

package/dist/modules/design_system/gallery/demos/key-components.js

@@ -0,0 +1,127 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { FieldLabel } from "@open-mercato/ui/primitives/label";
+import { HintText } from "@open-mercato/ui/primitives/hint-text";
+import { FormField } from "@open-mercato/ui/primitives/form-field";
+import { Input } from "@open-mercato/ui/primitives/input";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { CompactButton } from "@open-mercato/ui/primitives/compact-button";
+import { LinkButton } from "@open-mercato/ui/primitives/link-button";
+import { SimpleTooltip } from "@open-mercato/ui/primitives/tooltip";
+import { CheckboxField } from "@open-mercato/ui/primitives/checkbox-field";
+import { Avatar } from "@open-mercato/ui/primitives/avatar";
+import { Badge } from "@open-mercato/ui/primitives/badge";
+import { Switch } from "@open-mercato/ui/primitives/switch";
+import { ContentLabel } from "@open-mercato/ui/primitives/content-label";
+import { ContentCard } from "@open-mercato/ui/primitives/content-card";
+import { KeyIcon, KeyIconGlyph } from "@open-mercato/ui/primitives/key-icon";
+import { PaymentIcon } from "@open-mercato/ui/primitives/payment-icon";
+import { ChartLegend, ChartLegendDot } from "@open-mercato/ui/primitives/chart-legend";
+import { navigationBrandArtwork } from "@open-mercato/ui/assets/navigation-brand-artwork";
+import mastercard from "../assets/menu-mastercard.svg";
+import spotify from "../assets/menu-spotify.svg";
+import avatar from "../assets/avatar-photo.png";
+const imageSource = (asset) => typeof asset === "string" ? asset : asset.src;
+const prefix = "design_system.gallery.examples.keyComponents.";
+function ContentLeading({ kind, size = 40 }) {
+  if (kind === "basic") return null;
+  if (kind === "icon") return /* @__PURE__ */ jsx(KeyIcon, { size, children: /* @__PURE__ */ jsx(KeyIconGlyph, {}) });
+  if (kind === "avatar") return /* @__PURE__ */ jsx(Avatar, { label: "James Brown", size, src: imageSource(avatar) });
+  if (kind === "provider") return /* @__PURE__ */ jsx("img", { alt: "", src: imageSource(mastercard), className: "h-6 w-8 object-contain" });
+  return /* @__PURE__ */ jsx("img", { alt: "", src: kind === "company" ? navigationBrandArtwork.synergyOriginal : imageSource(spotify), className: size === 40 ? "size-10 object-contain" : "size-12 object-contain" });
+}
+function FieldLabelExample({ disabled = false, kind = "all" }) {
+  const t = useT();
+  const inputId = React.useId();
+  const helpId = React.useId();
+  const [help, setHelp] = React.useState(false);
+  const information = /* @__PURE__ */ jsx(SimpleTooltip, { content: t(`${prefix}helpText`), children: /* @__PURE__ */ jsx(CompactButton, { type: "button", size: 20, appearance: "ghost", disabled, "aria-label": t(`${prefix}information`), children: /* @__PURE__ */ jsx(KeyIconGlyph, { name: "labelInformation" }) }) });
+  const action = /* @__PURE__ */ jsx(LinkButton, { type: "button", size: "sm", variant: "gray", disabled, className: "disabled:text-text-disabled disabled:opacity-100", "aria-expanded": help, "aria-controls": helpId, onClick: () => setHelp((value) => !value), children: t(`${prefix}help`) });
+  return /* @__PURE__ */ jsxs("div", { className: "grid w-80 max-w-full gap-2", children: [
+    /* @__PURE__ */ jsx(FieldLabel, { htmlFor: inputId, disabled, required: kind === "required", sublabel: kind === "all" || kind === "optional" ? t(`${prefix}optional`) : void 0, information: kind === "all" || kind === "information" ? information : void 0, action: kind === "all" || kind === "action" ? action : void 0, children: t(`${prefix}label`) }),
+    /* @__PURE__ */ jsx(Input, { id: inputId, disabled, "aria-required": kind === "required", "aria-describedby": help ? helpId : void 0 }),
+    /* @__PURE__ */ jsx("p", { id: helpId, hidden: !help, className: "text-xs text-muted-foreground", children: t(`${prefix}helpText`) })
+  ] });
+}
+function FormFieldLabelExample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "grid w-80 max-w-full gap-5", children: [false, true].map((disabled) => /* @__PURE__ */ jsx(FormField, { sourceLabel: true, label: t(`${prefix}label`), labelSublabel: t(`${prefix}optional`), disabled, description: t(`${prefix}hint`), children: /* @__PURE__ */ jsx(Input, {}) }, String(disabled))) });
+}
+function HintTextExample({ state = "default", icon = true }) {
+  const t = useT();
+  return /* @__PURE__ */ jsx(HintText, { state, leading: icon ? /* @__PURE__ */ jsx(KeyIconGlyph, { name: "information" }) : void 0, children: t(`${prefix}hint`) });
+}
+function ContentLabelExample({ kind = "basic", size = 40, configurable = false }) {
+  const t = useT();
+  const [sublabel, setSublabel] = React.useState(true);
+  const [badge, setBadge] = React.useState(false);
+  const [toggle, setToggle] = React.useState(false);
+  const [enabled, setEnabled] = React.useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: "grid w-full gap-5", children: [
+    configurable ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-4", children: [
+      /* @__PURE__ */ jsx(CheckboxField, { label: t(`${prefix}sublabelControl`), checked: sublabel, onCheckedChange: (checked) => setSublabel(checked === true) }),
+      /* @__PURE__ */ jsx(CheckboxField, { label: t(`${prefix}badgeControl`), checked: badge, onCheckedChange: (checked) => setBadge(checked === true) }),
+      /* @__PURE__ */ jsx(CheckboxField, { label: t(`${prefix}toggleControl`), checked: toggle, onCheckedChange: (checked) => setToggle(checked === true) })
+    ] }) : null,
+    /* @__PURE__ */ jsx(ContentLabel, { size, label: t(`${prefix}label`), description: t(`${prefix}description`), sublabel: sublabel ? t(`${prefix}sublabel`) : void 0, leading: kind === "basic" ? void 0 : /* @__PURE__ */ jsx(ContentLeading, { kind, size }), badge: badge ? /* @__PURE__ */ jsx(Badge, { size: 20, tone: "info", appearance: "light", children: t(`${prefix}new`) }) : void 0, trailing: toggle ? /* @__PURE__ */ jsx(Switch, { "aria-label": t(`${prefix}enabled`), checked: enabled, onCheckedChange: setEnabled }) : void 0, className: configurable ? "w-full max-w-md" : "w-75 max-w-full" }),
+    toggle ? /* @__PURE__ */ jsx("output", { className: "text-xs text-muted-foreground", children: t(`${prefix}${enabled ? "enabled" : "disabled"}`) }) : null
+  ] });
+}
+function ContentCardExample({ kind = "basic", disabled = false }) {
+  const t = useT();
+  const [visible, setVisible] = React.useState(true);
+  return /* @__PURE__ */ jsx("div", { className: "grid w-90 max-w-full gap-3", children: visible ? /* @__PURE__ */ jsx(ContentCard, { label: t(`${prefix}label`), description: t(`${prefix}description`), sublabel: t(`${prefix}sublabel`), leading: kind === "basic" ? void 0 : /* @__PURE__ */ jsx(ContentLeading, { kind }), badge: /* @__PURE__ */ jsx(Badge, { size: 16, tone: "info", appearance: "light", children: t(`${prefix}new`) }), onDismiss: () => setVisible(false), dismissLabel: t(`${prefix}dismiss`), disabled }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("output", { className: "text-sm text-muted-foreground", children: t(`${prefix}dismissed`) }),
+    /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setVisible(true), children: t(`${prefix}restore`) })
+  ] }) });
+}
+const keyColors = ["gray", "blue", "orange", "red", "green", "yellow", "purple", "pink", "teal"];
+const legendColors = ["gray", "light-gray", "blue", "orange", "red", "green", "yellow", "purple", "sky", "pink", "teal"];
+function KeyIconExamples({ appearance = "stroke" }) {
+  const t = useT();
+  return /* @__PURE__ */ jsxs("div", { className: "grid w-full gap-4", children: [
+    /* @__PURE__ */ jsx("p", { className: "max-w-xl text-sm text-muted-foreground", children: t(`${prefix}paletteNote`) }),
+    keyColors.map((color) => /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [
+      /* @__PURE__ */ jsx("span", { className: "w-20 text-xs text-muted-foreground", children: t(`${prefix}color.${color}`) }),
+      [64, 56, 48, 40, 32].map((size) => /* @__PURE__ */ jsx(KeyIcon, { color, appearance, size, "aria-label": `${t(`${prefix}color.${color}`)} ${size}`, children: /* @__PURE__ */ jsx(KeyIconGlyph, {}) }, size))
+    ] }, color))
+  ] });
+}
+function PaymentIconExamples() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-6 sm:grid-cols-4", children: ["water", "gas", "electricity", "donate", "internet", "phone", "rent", "tax"].map((category) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ jsx(PaymentIcon, { category }),
+    /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground", children: t(`${prefix}payment.${category}`) })
+  ] }, category)) });
+}
+function ChartLegendExamples({ interactive = false }) {
+  const t = useT();
+  const [hidden, setHidden] = React.useState([]);
+  return /* @__PURE__ */ jsxs("div", { className: "grid w-full gap-5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-5", children: [
+      legendColors.map((color) => interactive ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", "aria-pressed": !hidden.includes(color), onClick: () => setHidden((items) => items.includes(color) ? items.filter((item) => item !== color) : [...items, color]), children: /* @__PURE__ */ jsx(ChartLegend, { color, disabled: hidden.includes(color), children: t(`${prefix}color.${color}`) }) }, color) : /* @__PURE__ */ jsx(ChartLegend, { color, children: t(`${prefix}color.${color}`) }, color)),
+      !interactive ? /* @__PURE__ */ jsx(ChartLegend, { disabled: true, children: t(`${prefix}disabled`) }) : null
+    ] }),
+    interactive ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-3", role: "list", "aria-label": t(`${prefix}visibleSeries`), children: legendColors.filter((color) => !hidden.includes(color)).map((color) => /* @__PURE__ */ jsx("div", { role: "listitem", className: "rounded-md border border-border p-3", children: /* @__PURE__ */ jsx(ChartLegend, { color, children: t(`${prefix}color.${color}`) }) }, color)) }) : null
+  ] });
+}
+function ChartLegendDotExamples({ size = 16 }) {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-5", children: legendColors.map((color) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+    /* @__PURE__ */ jsx(ChartLegendDot, { color, size }),
+    /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t(`${prefix}color.${color}`) })
+  ] }, color)) });
+}
+export {
+  ChartLegendDotExamples,
+  ChartLegendExamples,
+  ContentCardExample,
+  ContentLabelExample,
+  FieldLabelExample,
+  FormFieldLabelExample,
+  HintTextExample,
+  KeyIconExamples,
+  PaymentIconExamples
+};
+//# sourceMappingURL=key-components.js.map

package/dist/modules/design_system/gallery/demos/key-components.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/demos/key-components.tsx"],
+  "sourcesContent": ["import * as React from 'react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { FieldLabel } from '@open-mercato/ui/primitives/label'\nimport { HintText } from '@open-mercato/ui/primitives/hint-text'\nimport { FormField } from '@open-mercato/ui/primitives/form-field'\nimport { Input } from '@open-mercato/ui/primitives/input'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { CompactButton } from '@open-mercato/ui/primitives/compact-button'\nimport { LinkButton } from '@open-mercato/ui/primitives/link-button'\nimport { SimpleTooltip } from '@open-mercato/ui/primitives/tooltip'\nimport { CheckboxField } from '@open-mercato/ui/primitives/checkbox-field'\nimport { Avatar } from '@open-mercato/ui/primitives/avatar'\nimport { Badge } from '@open-mercato/ui/primitives/badge'\nimport { Switch } from '@open-mercato/ui/primitives/switch'\nimport { ContentLabel } from '@open-mercato/ui/primitives/content-label'\nimport { ContentCard } from '@open-mercato/ui/primitives/content-card'\nimport { KeyIcon, KeyIconGlyph, type KeyIconColor } from '@open-mercato/ui/primitives/key-icon'\nimport { PaymentIcon, type PaymentIconCategory } from '@open-mercato/ui/primitives/payment-icon'\nimport { ChartLegend, ChartLegendDot, type ChartLegendColor } from '@open-mercato/ui/primitives/chart-legend'\nimport { navigationBrandArtwork } from '@open-mercato/ui/assets/navigation-brand-artwork'\nimport mastercard from '../assets/menu-mastercard.svg'\nimport spotify from '../assets/menu-spotify.svg'\nimport avatar from '../assets/avatar-photo.png'\n\nconst imageSource = (asset: string | { readonly src: string }) => typeof asset === 'string' ? asset : asset.src\nconst prefix = 'design_system.gallery.examples.keyComponents.'\ntype ContentKind = 'basic' | 'icon' | 'avatar' | 'provider' | 'brand' | 'company'\n\nfunction ContentLeading({ kind, size = 40 }: { kind: ContentKind; size?: 40 | 48 }) {\n  if (kind === 'basic') return null\n  if (kind === 'icon') return <KeyIcon size={size}><KeyIconGlyph /></KeyIcon>\n  if (kind === 'avatar') return <Avatar label=\"James Brown\" size={size} src={imageSource(avatar)} />\n  if (kind === 'provider') return <img alt=\"\" src={imageSource(mastercard)} className=\"h-6 w-8 object-contain\" />\n  return <img alt=\"\" src={kind === 'company' ? navigationBrandArtwork.synergyOriginal : imageSource(spotify)} className={size === 40 ? 'size-10 object-contain' : 'size-12 object-contain'} />\n}\n\nexport function FieldLabelExample({ disabled = false, kind = 'all' }: { disabled?: boolean; kind?: 'all' | 'required' | 'optional' | 'information' | 'action' }) {\n  const t = useT()\n  const inputId = React.useId()\n  const helpId = React.useId()\n  const [help, setHelp] = React.useState(false)\n  const information = <SimpleTooltip content={t(`${prefix}helpText`)}><CompactButton type=\"button\" size={20} appearance=\"ghost\" disabled={disabled} aria-label={t(`${prefix}information`)}><KeyIconGlyph name=\"labelInformation\" /></CompactButton></SimpleTooltip>\n  const action = <LinkButton type=\"button\" size=\"sm\" variant=\"gray\" disabled={disabled} className=\"disabled:text-text-disabled disabled:opacity-100\" aria-expanded={help} aria-controls={helpId} onClick={() => setHelp(value => !value)}>{t(`${prefix}help`)}</LinkButton>\n  return <div className=\"grid w-80 max-w-full gap-2\">\n    <FieldLabel htmlFor={inputId} disabled={disabled} required={kind === 'required'} sublabel={kind === 'all' || kind === 'optional' ? t(`${prefix}optional`) : undefined} information={kind === 'all' || kind === 'information' ? information : undefined} action={kind === 'all' || kind === 'action' ? action : undefined}>{t(`${prefix}label`)}</FieldLabel>\n    <Input id={inputId} disabled={disabled} aria-required={kind === 'required'} aria-describedby={help ? helpId : undefined} />\n    <p id={helpId} hidden={!help} className=\"text-xs text-muted-foreground\">{t(`${prefix}helpText`)}</p>\n  </div>\n}\n\nexport function FormFieldLabelExample() {\n  const t = useT()\n  return <div className=\"grid w-80 max-w-full gap-5\">{[false, true].map(disabled => <FormField key={String(disabled)} sourceLabel label={t(`${prefix}label`)} labelSublabel={t(`${prefix}optional`)} disabled={disabled} description={t(`${prefix}hint`)}><Input /></FormField>)}</div>\n}\n\nexport function HintTextExample({ state = 'default', icon = true }: { state?: 'default' | 'error' | 'disabled'; icon?: boolean }) {\n  const t = useT()\n  return <HintText state={state} leading={icon ? <KeyIconGlyph name=\"information\" /> : undefined}>{t(`${prefix}hint`)}</HintText>\n}\n\nexport function ContentLabelExample({ kind = 'basic', size = 40, configurable = false }: { kind?: Exclude<ContentKind, 'provider'>; size?: 40 | 48; configurable?: boolean }) {\n  const t = useT()\n  const [sublabel, setSublabel] = React.useState(true)\n  const [badge, setBadge] = React.useState(false)\n  const [toggle, setToggle] = React.useState(false)\n  const [enabled, setEnabled] = React.useState(false)\n  return <div className=\"grid w-full gap-5\">\n    {configurable ? <div className=\"flex flex-wrap gap-4\"><CheckboxField label={t(`${prefix}sublabelControl`)} checked={sublabel} onCheckedChange={checked => setSublabel(checked === true)} /><CheckboxField label={t(`${prefix}badgeControl`)} checked={badge} onCheckedChange={checked => setBadge(checked === true)} /><CheckboxField label={t(`${prefix}toggleControl`)} checked={toggle} onCheckedChange={checked => setToggle(checked === true)} /></div> : null}\n    <ContentLabel size={size} label={t(`${prefix}label`)} description={t(`${prefix}description`)} sublabel={sublabel ? t(`${prefix}sublabel`) : undefined} leading={kind === 'basic' ? undefined : <ContentLeading kind={kind} size={size} />} badge={badge ? <Badge size={20} tone=\"info\" appearance=\"light\">{t(`${prefix}new`)}</Badge> : undefined} trailing={toggle ? <Switch aria-label={t(`${prefix}enabled`)} checked={enabled} onCheckedChange={setEnabled} /> : undefined} className={configurable ? 'w-full max-w-md' : 'w-75 max-w-full'} />\n    {toggle ? <output className=\"text-xs text-muted-foreground\">{t(`${prefix}${enabled ? 'enabled' : 'disabled'}`)}</output> : null}\n  </div>\n}\n\nexport function ContentCardExample({ kind = 'basic', disabled = false }: { kind?: ContentKind; disabled?: boolean }) {\n  const t = useT()\n  const [visible, setVisible] = React.useState(true)\n  return <div className=\"grid w-90 max-w-full gap-3\">\n    {visible ? <ContentCard label={t(`${prefix}label`)} description={t(`${prefix}description`)} sublabel={t(`${prefix}sublabel`)} leading={kind === 'basic' ? undefined : <ContentLeading kind={kind} />} badge={<Badge size={16} tone=\"info\" appearance=\"light\">{t(`${prefix}new`)}</Badge>} onDismiss={() => setVisible(false)} dismissLabel={t(`${prefix}dismiss`)} disabled={disabled} /> : <><output className=\"text-sm text-muted-foreground\">{t(`${prefix}dismissed`)}</output><Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={() => setVisible(true)}>{t(`${prefix}restore`)}</Button></>}\n  </div>\n}\n\nconst keyColors: KeyIconColor[] = ['gray', 'blue', 'orange', 'red', 'green', 'yellow', 'purple', 'pink', 'teal']\nconst legendColors: ChartLegendColor[] = ['gray', 'light-gray', 'blue', 'orange', 'red', 'green', 'yellow', 'purple', 'sky', 'pink', 'teal']\n\nexport function KeyIconExamples({ appearance = 'stroke' }: { appearance?: 'stroke' | 'lighter' }) {\n  const t = useT()\n  return <div className=\"grid w-full gap-4\"><p className=\"max-w-xl text-sm text-muted-foreground\">{t(`${prefix}paletteNote`)}</p>{keyColors.map(color => <div key={color} className=\"flex flex-wrap items-center gap-4\"><span className=\"w-20 text-xs text-muted-foreground\">{t(`${prefix}color.${color}`)}</span>{([64, 56, 48, 40, 32] as const).map(size => <KeyIcon key={size} color={color} appearance={appearance} size={size} aria-label={`${t(`${prefix}color.${color}`)} ${size}`}><KeyIconGlyph /></KeyIcon>)}</div>)}</div>\n}\n\nexport function PaymentIconExamples() {\n  const t = useT()\n  return <div className=\"grid grid-cols-2 gap-6 sm:grid-cols-4\">{(['water', 'gas', 'electricity', 'donate', 'internet', 'phone', 'rent', 'tax'] as PaymentIconCategory[]).map(category => <div key={category} className=\"flex items-center gap-3\"><PaymentIcon category={category} /><span className=\"text-sm text-foreground\">{t(`${prefix}payment.${category}`)}</span></div>)}</div>\n}\n\nexport function ChartLegendExamples({ interactive = false }: { interactive?: boolean }) {\n  const t = useT()\n  const [hidden, setHidden] = React.useState<ChartLegendColor[]>([])\n  return <div className=\"grid w-full gap-5\"><div className=\"flex flex-wrap gap-5\">{legendColors.map(color => interactive ? <Button key={color} type=\"button\" variant=\"ghost\" size=\"sm\" aria-pressed={!hidden.includes(color)} onClick={() => setHidden(items => items.includes(color) ? items.filter(item => item !== color) : [...items, color])}><ChartLegend color={color} disabled={hidden.includes(color)}>{t(`${prefix}color.${color}`)}</ChartLegend></Button> : <ChartLegend key={color} color={color}>{t(`${prefix}color.${color}`)}</ChartLegend>)}{!interactive ? <ChartLegend disabled>{t(`${prefix}disabled`)}</ChartLegend> : null}</div>\n    {interactive ? <div className=\"flex flex-wrap gap-3\" role=\"list\" aria-label={t(`${prefix}visibleSeries`)}>{legendColors.filter(color => !hidden.includes(color)).map(color => <div key={color} role=\"listitem\" className=\"rounded-md border border-border p-3\"><ChartLegend color={color}>{t(`${prefix}color.${color}`)}</ChartLegend></div>)}</div> : null}\n  </div>\n}\n\nexport function ChartLegendDotExamples({ size = 16 }: { size?: 16 | 20 }) {\n  const t = useT()\n  return <div className=\"flex flex-wrap items-center gap-5\">{legendColors.map(color => <div key={color} className=\"flex items-center gap-1\"><ChartLegendDot color={color} size={size} /><span className=\"text-xs text-muted-foreground\">{t(`${prefix}color.${color}`)}</span></div>)}</div>\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/modules/design_system/gallery/demos/marketing-controls-code.generated.js

@@ -0,0 +1,98 @@
+const source = `import * as React from 'react'
+import { CheckCircle2, ChevronRight, Info, Pencil, UserRound } from 'lucide-react'
+import { useLocale, useT } from '@open-mercato/shared/lib/i18n/context'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { InlineInput } from '@open-mercato/ui/primitives/inline-input'
+import { InlineSelectTrigger } from '@open-mercato/ui/primitives/inline-select'
+import { Label } from '@open-mercato/ui/primitives/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@open-mercato/ui/primitives/select'
+import { Textarea } from '@open-mercato/ui/primitives/textarea'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@open-mercato/ui/primitives/tooltip'
+import { marketingProducts } from '../assets/marketing-artwork'
+
+export type MarketingControlState = 'default' | 'hover' | 'active' | 'filled' | 'placeholder' | 'focus' | 'disabled' | 'complete' | 'selected'
+export type MarketingControlKind = 'step-item' | 'select' | 'input' | 'textarea' | 'amount' | 'tab-menu' | 'inline-input' | 'inline-select' | 'chart-tooltip' | 'selected-button' | 'product-image'
+type ControlProps = { kind: MarketingControlKind; state?: MarketingControlState; size?: 'medium' | 'large'; side?: 'right' | 'left' | 'bottom' | 'top'; product?: number }
+const key = (name: string) => \`design_system.gallery.samples.marketing.\${name}\`
+const focusStyle = 'focus-within:border-accent-orange-border focus-within:shadow-none'
+
+function UnderlineField({ kind, state = 'default', size = 'medium' }: ControlProps) {
+  const t = useT()
+  const id = React.useId()
+  const large = size === 'large' || kind === 'amount'
+  const label = t(key(kind === 'textarea' ? 'description' : kind === 'amount' ? 'productPricing' : kind === 'select' ? 'category' : 'productName'))
+  const placeholder = t(key(kind === 'textarea' ? 'productDescriptionPlaceholder' : kind === 'select' ? 'categoryPlaceholder' : 'productNamePlaceholder'))
+  const [value, setValue] = React.useState(state === 'filled' ? kind === 'select' ? 'accessories' : kind === 'amount' ? '800' : t(key(kind === 'textarea' ? 'productDescription' : 'productNameExample')) : '')
+  const active = state === 'active'
+  return <div data-slot="marketing-control" data-kind={kind} className={cn('relative flex w-93 max-w-full flex-col gap-1.5 pb-3.5 after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-border focus-within:after:h-0.5 focus-within:after:bg-accent-orange-border', large ? 'h-20' : 'h-16', active && 'after:h-0.5 after:bg-accent-orange-border')}>
+    <Label htmlFor={id} className="flex h-5 shrink-0 items-center gap-1 text-sm font-medium text-muted-foreground">{label}<Info aria-hidden="true" className="size-3 text-text-disabled" /></Label>
+    {kind === 'select' ? <Select value={value} onValueChange={setValue}><SelectTrigger id={id} aria-label={label} className={cn('h-6 rounded-none border-0 bg-transparent p-0 text-lg font-medium shadow-none hover:bg-transparent focus:border-0 focus:shadow-none', state === 'hover' && 'text-muted-foreground', active && '[&_svg]:text-accent-orange-text')}><SelectValue placeholder={placeholder} /></SelectTrigger><SelectContent>{['accessories','computers','audio'].map(option => <SelectItem key={option} value={option}>{t(key(option))}</SelectItem>)}</SelectContent></Select> : kind === 'textarea' ? <Textarea id={id} aria-label={label} rows={1} value={value} onChange={event => setValue(event.target.value)} placeholder={placeholder} autoFocus={active} className={cn('h-6 min-h-6 resize-none rounded-none border-0 bg-transparent p-0 text-lg font-medium leading-6 shadow-none hover:bg-transparent focus-visible:shadow-none', state === 'hover' && 'placeholder:text-muted-foreground')} /> : <Input id={id} aria-label={label} value={value} onChange={event => setValue(event.target.value)} type={kind === 'amount' ? 'number' : 'text'} min={kind === 'amount' ? 0 : undefined} step={kind === 'amount' ? '0.01' : undefined} autoFocus={active} placeholder={kind === 'amount' ? '0.00' : placeholder} leading={kind === 'amount' ? <span aria-hidden="true" className={cn('text-title-4 font-medium', !value && !active && 'text-text-disabled')}>$</span> : undefined} className={cn('rounded-none border-0 bg-transparent p-0 shadow-none hover:bg-transparent focus-within:shadow-none', large ? 'h-10' : 'h-6')} inputClassName={cn('font-medium placeholder:text-text-disabled', large ? 'text-title-4 leading-10' : 'text-lg leading-6', state === 'hover' && 'placeholder:text-muted-foreground')} />}
+  </div>
+}
+
+function InlineEditor({ state = 'placeholder' }: { state?: MarketingControlState }) {
+  const t = useT()
+  const [value, setValue] = React.useState(state === 'filled' ? 'James Brown' : '')
+  const [draft, setDraft] = React.useState(value)
+  const [editing, setEditing] = React.useState(state === 'focus')
+  const disabled = state === 'disabled'
+  const save = () => { setValue(draft.trim()); setEditing(false) }
+  const cancel = () => { setDraft(value); setEditing(false) }
+  return <div data-slot="marketing-control" data-kind="inline-input" className="w-78 max-w-full">
+    {editing ? <InlineInput autoFocus value={draft} onChange={event => setDraft(event.target.value)} aria-label={t(key('name'))} placeholder={t(key('namePlaceholder'))} className={cn('h-10 gap-2 rounded-lg border-accent-orange-border bg-background px-3', focusStyle)} onKeyDown={event => { if (event.key === 'Escape') { event.preventDefault(); cancel() } if (event.key === 'Enter') { event.preventDefault(); save() } }} trailing={<div className="flex gap-2"><Button variant="ghost" className="h-5 p-0 text-sm font-normal" onClick={cancel}>{t(key('cancel'))}</Button><Button variant="ghost" className="h-5 p-0 text-sm font-normal text-accent-orange-text" onClick={save}>{t(key('save'))}</Button></div>} /> : <Button disabled={disabled} variant="ghost" onClick={() => setEditing(true)} className={cn('h-10 w-full justify-between rounded-lg px-3 text-sm font-normal', state === 'hover' && 'bg-muted', !value && 'text-muted-foreground')}><span className="truncate">{value || t(key('namePlaceholder'))}</span><Pencil aria-hidden="true" className="size-4 shrink-0 text-text-disabled" /></Button>}
+  </div>
+}
+
+function InlineLanguage({ state = 'placeholder' }: { state?: MarketingControlState }) {
+  const t = useT()
+  const [value, setValue] = React.useState(state === 'filled' ? 'en' : '')
+  const [open, setOpen] = React.useState(false)
+  return <div data-slot="marketing-control" data-kind="inline-select" className="w-64 max-w-full"><Select value={value} onValueChange={setValue} open={open} onOpenChange={setOpen} disabled={state === 'disabled'}><InlineSelectTrigger aria-label={t(key('language'))} className={cn('h-10 rounded-lg px-3 focus:border-accent-orange-border focus:shadow-none', state === 'hover' && 'bg-muted', state === 'focus' && 'border-accent-orange-border')}><SelectValue placeholder={t(key('languagePlaceholder'))} /></InlineSelectTrigger><SelectContent>{['en','pl','de','es','ko'].map(language => <SelectItem key={language} value={language}>{t(key(\`language\${language}\`))}</SelectItem>)}</SelectContent></Select></div>
+}
+
+function StepItem({ state = 'default' }: { state?: MarketingControlState }) {
+  const t = useT()
+  const [selected, setSelected] = React.useState(state === 'active')
+  return <Button data-slot="marketing-control" data-kind="step-item" variant="ghost" aria-pressed={selected} onClick={() => setSelected(current => !current)} className={cn('h-11 w-45 max-w-full flex-col items-start justify-start gap-1 rounded-none border-r-2 border-transparent p-0 pr-6 text-sm font-normal hover:bg-transparent', selected && 'border-r-accent-orange')}><span className={cn('flex h-5 items-center gap-1', selected ? 'text-accent-orange-text' : 'text-muted-foreground')}>{t(key('step'), undefined, { current: 1, total: 5 })}{state === 'complete' ? <CheckCircle2 aria-hidden="true" className="size-3.5 fill-status-success-icon text-status-success-foreground" /> : null}</span><span className="h-5">{t(key('generalInformation'))}</span></Button>
+}
+
+function SelectedAmount({ state = 'default' }: { state?: MarketingControlState }) {
+  const locale = useLocale()
+  const [selected,setSelected] = React.useState(state === 'selected')
+  return <Button data-slot="marketing-control" data-kind="selected-button" aria-pressed={selected} disabled={state === 'disabled'} variant={selected ? 'default' : 'outline'} onClick={() => setSelected(current => !current)} className={cn('h-7 gap-1.5 rounded-md border border-border px-2.5 py-1 font-normal', state === 'hover' && 'bg-muted', selected && 'border-transparent bg-accent-orange/10 text-accent-orange-text hover:bg-accent-orange/20')}>
+    {selected ? <CheckCircle2 aria-hidden="true" className="size-3.5" /> : null}{new Intl.NumberFormat(locale).format(800)}
+  </Button>
+}
+
+function MenuItem({ state = 'default' }: { state?: MarketingControlState }) {
+  const t = useT()
+  const [selected,setSelected] = React.useState(state === 'active')
+  return <Button data-slot="marketing-control" data-kind="tab-menu" variant="ghost" aria-pressed={selected} onClick={() => setSelected(current => !current)} className={cn('h-9 w-56 max-w-full justify-start gap-2 rounded-lg p-2 text-sm font-medium', (state === 'hover' || selected) && 'bg-muted')}><UserRound aria-hidden="true" className={cn('size-5', selected ? 'text-accent-orange-text' : 'text-muted-foreground')} /><span className="flex-1 text-left">{t(key('accountSettings'))}</span><ChevronRight aria-hidden="true" className="size-4 text-muted-foreground" /></Button>
+}
+
+function ChartTooltipExample({ side = 'right' }: { side?: 'right' | 'left' | 'bottom' | 'top' }) {
+  const t = useT()
+  const locale = useLocale()
+  const [open,setOpen] = React.useState(true)
+  return <div data-slot="marketing-control" data-kind="chart-tooltip" className="flex h-40 w-80 max-w-full items-center justify-center"><TooltipProvider delayDuration={0}><Tooltip open={open} onOpenChange={setOpen}><Button asChild variant="ghost" size="sm"><TooltipTrigger>{t(key('chartPoint'))}</TooltipTrigger></Button><TooltipContent side={side === 'right' ? 'left' : side === 'left' ? 'right' : side === 'bottom' ? 'top' : 'bottom'} variant="light" className="h-16 w-39.5 rounded-lg p-3 shadow-lg"><p className="text-xs leading-4 text-muted-foreground">{new Intl.DateTimeFormat(locale,{weekday:'short',month:'short',day:'numeric',timeZone:'UTC'}).format(new Date('2026-01-08T00:00:00Z'))}</p><div className="mt-1 flex items-center gap-1.5"><span className="text-lg font-medium leading-6">{new Intl.NumberFormat(locale).format(3484)}</span><span className="text-xs text-status-success-icon">+7.1%</span><span className="text-xs text-muted-foreground">{t(key('versusPrevious'))}</span></div></TooltipContent></Tooltip></TooltipProvider></div>
+}
+
+export function MarketingControlDemo(props: ControlProps) {
+  if (['input','select','textarea','amount'].includes(props.kind)) return <UnderlineField {...props} />
+  if (props.kind === 'inline-input') return <InlineEditor state={props.state} />
+  if (props.kind === 'inline-select') return <InlineLanguage state={props.state} />
+  if (props.kind === 'step-item') return <StepItem state={props.state} />
+  if (props.kind === 'selected-button') return <SelectedAmount state={props.state} />
+  if (props.kind === 'tab-menu') return <MenuItem state={props.state} />
+  if (props.kind === 'chart-tooltip') return <ChartTooltipExample side={props.side} />
+  const product = marketingProducts[props.product ?? 0]
+  return <img data-slot="marketing-control" data-kind="product-image" src={product.src} alt={product.name} className="size-50 max-w-full object-contain" />
+}
+`;
+const marketingControlExampleCode = (expression) => source + "\n" + expression + "\n";
+export {
+  marketingControlExampleCode
+};
+//# sourceMappingURL=marketing-controls-code.generated.js.map