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

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

@@ -1,17 +1,16 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { MarketingControlDemo } from "../demos/marketing-controls.js";
+import { marketingControlExampleCode } from "../demos/marketing-controls-code.generated.js";
+import { FieldLabelExample, FormFieldLabelExample, HintTextExample } from "../demos/key-components.js";
 import * as React from "react";
-import { Copy, Globe, Info, Link2, Send, User } from "lucide-react";
+import { Copy, Info, Link2, Send, User } from "lucide-react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
 import { Input } from "@open-mercato/ui/primitives/input";
 import { Textarea } from "@open-mercato/ui/primitives/textarea";
 import {
   Select,
   SelectContent,
-  SelectGroup,
   SelectItem,
-  SelectLabel,
-  SelectSeparator,
-  SelectTrigger,
-  SelectTriggerLeading,
   SelectValue
 } from "@open-mercato/ui/primitives/select";
 import { CompactSelectTrigger } from "@open-mercato/ui/primitives/compact-select";
@@ -23,11 +22,13 @@ import { Radio, RadioGroup } from "@open-mercato/ui/primitives/radio";
 import { RadioField } from "@open-mercato/ui/primitives/radio-field";
 import { Switch } from "@open-mercato/ui/primitives/switch";
 import { SwitchField } from "@open-mercato/ui/primitives/switch-field";
+import { Badge } from "@open-mercato/ui/primitives/badge";
 import { Slider } from "@open-mercato/ui/primitives/slider";
 import { FormField } from "@open-mercato/ui/primitives/form-field";
 import { SearchInput } from "@open-mercato/ui/primitives/search-input";
 import { EmailInput } from "@open-mercato/ui/primitives/email-input";
 import { PasswordInput } from "@open-mercato/ui/primitives/password-input";
+import { PasswordStrength } from "@open-mercato/ui/primitives/password-strength";
 import { WebsiteInput } from "@open-mercato/ui/primitives/website-input";
 import { AmountInput } from "@open-mercato/ui/primitives/amount-input";
 import { CounterInput } from "@open-mercato/ui/primitives/counter-input";
@@ -39,16 +40,102 @@ import {
   COLOR_PICKER_DEFAULT_SWATCHES
 } from "@open-mercato/ui/primitives/color-picker";
 import { TagInput } from "@open-mercato/ui/primitives/tag-input";
-import { RichEditor } from "@open-mercato/ui/primitives/rich-editor";
+import { RichEditor, RichEditorColorPalette, RICH_EDITOR_COLOR_PALETTE } from "@open-mercato/ui/primitives/rich-editor";
 import { IconButton } from "@open-mercato/ui/primitives/icon-button";
+import { FileFormatIcon } from "@open-mercato/ui/primitives/file-format-icon";
+import { FileUploadAreaDemo, FileUploadCardDemo, ImageUploadDemo } from "../demos/file-upload.js";
+import { SelectionSourceCardsDemo, IntegrationSwitchDemo } from "../demos/selection-cards.js";
+import { SelectSourceExample, SelectSourceMatrix, DropdownSourceExample } from "../demos/menus.js";
+import { SourceTextInputMatrix, SourcePhoneExamples, SourceTextareaExamples } from "../demos/text-inputs.js";
+import { inputFieldCode, textareaFieldCode, phoneNumberFieldCode, selectFieldCode, dropdownCode, fieldLabelCode, fieldLabelInformationCode, fieldLabelActionCode, formFieldLabelCode, hintTextCode } from "./inputs-snippets.js";
 function DemoSearchInput({ size }) {
-  const [value, setValue] = React.useState("open orders");
+  const t = useT();
+  const [value, setValue] = React.useState(() => t("design_system.gallery.sampleCopy.openOrders"));
   return /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(SearchInput, { value, onChange: setValue, size }) });
 }
 function DemoAmountInput({ showCurrency }) {
   const [value, setValue] = React.useState({ amount: "1250.00", currency: "EUR" });
   return /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(AmountInput, { value, onChange: setValue, showCurrency }) });
 }
+const selectionCardClasses = "relative w-full max-w-90 gap-3.5 rounded-xl border border-border bg-background p-4 shadow-xs transition-colors hover:border-transparent hover:bg-muted hover:shadow-none has-[[data-state=checked]]:border-accent-indigo has-[[data-state=checked]]:shadow-none has-[:focus-visible]:shadow-focus has-[:disabled]:border-border has-[:disabled]:bg-background has-[:disabled]:shadow-none [&_label]:after:absolute [&_label]:after:inset-0 [&_label]:after:rounded-xl [&_button]:relative [&_button]:z-10";
+function SelectionCardsPreview({ control, disabled = false }) {
+  const t = useT();
+  const choices = [
+    { value: "immediate", label: t("design_system.gallery.samples.selection.immediate"), description: t("design_system.gallery.samples.selection.immediateDescription") },
+    { value: "weekly", label: t("design_system.gallery.samples.selection.weekly"), description: t("design_system.gallery.samples.selection.weeklyDescription") }
+  ];
+  const cards = choices.map((choice, index) => {
+    const fieldProps = {
+      label: choice.label,
+      description: choice.description,
+      sublabel: t("design_system.gallery.samples.selection.optional"),
+      badge: /* @__PURE__ */ jsx(Badge, { variant: disabled ? "outline" : "info", size: "sm", className: disabled ? "text-text-disabled" : void 0, children: t("design_system.gallery.samples.selection.new") }),
+      disabled,
+      className: "mt-0",
+      containerClassName: selectionCardClasses
+    };
+    if (control === "radio") return /* @__PURE__ */ jsx(RadioField, { value: choice.value, flip: true, ...fieldProps }, choice.value);
+    if (control === "switch") return /* @__PURE__ */ jsx(SwitchField, { defaultChecked: index === 0, ...fieldProps }, choice.value);
+    return /* @__PURE__ */ jsx(CheckboxField, { defaultChecked: index === 0, flip: true, ...fieldProps }, choice.value);
+  });
+  if (control === "radio") {
+    return /* @__PURE__ */ jsx(RadioGroup, { defaultValue: "immediate", "aria-label": t("design_system.gallery.samples.selection.preferences"), className: "grid w-full gap-4 sm:grid-cols-2", children: cards });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "grid w-full gap-4 sm:grid-cols-2", children: cards });
+}
+function FlippedRadioPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(RadioGroup, { defaultValue: "immediate", "aria-label": t("design_system.gallery.samples.selection.preferences"), className: "w-72", children: [
+    /* @__PURE__ */ jsx(RadioField, { value: "immediate", flip: true, label: t("design_system.gallery.samples.selection.immediate") }),
+    /* @__PURE__ */ jsx(RadioField, { value: "weekly", flip: true, label: t("design_system.gallery.samples.selection.weekly") })
+  ] });
+}
+function ReadOnlyInputPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      className: "w-full max-w-sm",
+      label: t("design_system.gallery.samples.states.recordId"),
+      description: t("design_system.gallery.samples.states.readOnlyHint"),
+      children: /* @__PURE__ */ jsx(Input, { readOnly: true, value: "OM-2026-0042" })
+    }
+  );
+}
+function ReadOnlyTextareaPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      className: "w-full max-w-sm",
+      label: t("design_system.gallery.samples.states.savedNote"),
+      description: t("design_system.gallery.samples.states.readOnlyHint"),
+      children: /* @__PURE__ */ jsx(Textarea, { readOnly: true, value: t("design_system.gallery.samples.states.noteValue") })
+    }
+  );
+}
+function DisabledSearchInputPreview() {
+  const t = useT();
+  const [query, setQuery] = React.useState("OM-2026-0042");
+  return /* @__PURE__ */ jsx(FormField, { className: "w-full max-w-sm", label: t("design_system.gallery.samples.states.search"), disabled: true, children: /* @__PURE__ */ jsx(SearchInput, { value: query, onChange: setQuery }) });
+}
+function InvalidPasswordInputPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      className: "w-full max-w-sm",
+      label: t("design_system.gallery.samples.states.password"),
+      error: t("design_system.gallery.samples.states.passwordError"),
+      children: /* @__PURE__ */ jsx(PasswordInput, { defaultValue: "short", autoComplete: "off" })
+    }
+  );
+}
+function DisabledAmountInputPreview() {
+  const t = useT();
+  const [value, setValue] = React.useState({ amount: "1250.00", currency: "EUR" });
+  return /* @__PURE__ */ jsx(FormField, { className: "w-full max-w-sm", label: t("design_system.gallery.samples.states.amount"), disabled: true, children: /* @__PURE__ */ jsx(AmountInput, { value, onChange: setValue }) });
+}
 function DemoCounterInput({
   initial = 2,
   step,
@@ -75,9 +162,12 @@ function DemoCardInput({ initial = "" }) {
 }
 function DemoColorPicker({
   allowCustom,
-  swatches
+  swatches,
+  showOpacity = false
 }) {
+  const t = useT();
   const [color, setColor] = React.useState("#6366F1");
+  const [opacity, setOpacity] = React.useState(75);
   return /* @__PURE__ */ jsx(
     ColorPicker,
     {
@@ -85,7 +175,10 @@ function DemoColorPicker({
       onChange: setColor,
       allowCustom,
       swatches,
-      "aria-label": "Pick color"
+      showOpacity,
+      opacity: showOpacity ? opacity : 100,
+      onOpacityChange: showOpacity ? setOpacity : void 0,
+      "aria-label": t("design_system.gallery.sampleCopy.pickColor")
     }
   );
 }
@@ -97,21 +190,87 @@ function DemoTagInput({
   const [tags, setTags] = React.useState(initial);
   return /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(TagInput, { value: tags, onChange: setTags, maxTags, placeholder }) });
 }
-function DemoRichEditor({ variant }) {
-  const [html, setHtml] = React.useState(
-    "<p>Ship the <strong>Q3 release notes</strong> before Friday.</p>"
-  );
-  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(RichEditor, { value: html, onChange: setHtml, variant }) });
+function DemoRichEditor({ variant = "standard", toolbarDesign, disabled = false, counter = false }) {
+  const t = useT();
+  const [html, setHtml] = React.useState(() => "<p>" + t("design_system.gallery.samples.richEditor.initial") + "</p>");
+  const [feedback, setFeedback] = React.useState("");
+  const labels = {
+    bold: t("design_system.gallery.samples.richEditor.labels.bold"),
+    italic: t("design_system.gallery.samples.richEditor.labels.italic"),
+    underline: t("design_system.gallery.samples.richEditor.labels.underline"),
+    strikethrough: t("design_system.gallery.samples.richEditor.labels.strikethrough"),
+    unorderedList: t("design_system.gallery.samples.richEditor.labels.unorderedList"),
+    orderedList: t("design_system.gallery.samples.richEditor.labels.orderedList"),
+    checklist: t("design_system.gallery.samples.richEditor.labels.checklist"),
+    blockquote: t("design_system.gallery.samples.richEditor.labels.blockquote"),
+    code: t("design_system.gallery.samples.richEditor.labels.code"),
+    inlineCode: t("design_system.gallery.samples.richEditor.labels.inlineCode"),
+    codeBlock: t("design_system.gallery.samples.richEditor.labels.codeBlock"),
+    horizontalRule: t("design_system.gallery.samples.richEditor.labels.horizontalRule"),
+    image: t("design_system.gallery.samples.richEditor.labels.image"),
+    imageUrlPrompt: t("design_system.gallery.samples.richEditor.labels.imageUrlPrompt"),
+    table: t("design_system.gallery.samples.richEditor.labels.table"),
+    heading: t("design_system.gallery.samples.richEditor.labels.heading"),
+    heading1: t("design_system.gallery.samples.richEditor.labels.heading1"),
+    heading2: t("design_system.gallery.samples.richEditor.labels.heading2"),
+    heading3: t("design_system.gallery.samples.richEditor.labels.heading3"),
+    paragraph: t("design_system.gallery.samples.richEditor.labels.paragraph"),
+    link: t("design_system.gallery.samples.richEditor.labels.link"),
+    linkUrlPrompt: t("design_system.gallery.samples.richEditor.labels.linkUrlPrompt"),
+    color: t("design_system.gallery.samples.richEditor.labels.color"),
+    textColor: t("design_system.gallery.samples.richEditor.labels.textColor"),
+    fontSize: t("design_system.gallery.samples.richEditor.labels.fontSize"),
+    align: t("design_system.gallery.samples.richEditor.labels.align"),
+    alignLeft: t("design_system.gallery.samples.richEditor.labels.alignLeft"),
+    alignCenter: t("design_system.gallery.samples.richEditor.labels.alignCenter"),
+    alignRight: t("design_system.gallery.samples.richEditor.labels.alignRight"),
+    alignJustify: t("design_system.gallery.samples.richEditor.labels.alignJustify"),
+    comment: t("design_system.gallery.samples.richEditor.labels.comment"),
+    mention: t("design_system.gallery.samples.richEditor.labels.mention"),
+    more: t("design_system.gallery.samples.richEditor.labels.more"),
+    help: t("design_system.gallery.samples.richEditor.labels.help"),
+    fullscreen: t("design_system.gallery.samples.richEditor.labels.fullscreen"),
+    placeholder: t("design_system.gallery.samples.richEditor.labels.placeholder"),
+    colors: Object.fromEntries(Object.keys(RICH_EDITOR_COLOR_PALETTE).map((key) => [key, t(`design_system.gallery.samples.richEditor.colors.${key}`)]))
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 w-full max-w-3xl flex-col gap-3", children: [
+    /* @__PURE__ */ jsx(
+      RichEditor,
+      {
+        value: html,
+        onChange: setHtml,
+        variant,
+        toolbarDesign,
+        disabled,
+        maxLength: counter ? 100 : void 0,
+        labels,
+        onComment: () => setFeedback(t("design_system.gallery.samples.richEditor.comment")),
+        onMention: () => setFeedback(t("design_system.gallery.samples.richEditor.mention"))
+      }
+    ),
+    feedback && /* @__PURE__ */ jsx("output", { "aria-live": "polite", className: "text-sm text-muted-foreground", children: feedback })
+  ] });
+}
+function DemoRichEditorPalette() {
+  const t = useT();
+  const [value, setValue] = React.useState("gray");
+  const labels = Object.fromEntries(Object.keys(RICH_EDITOR_COLOR_PALETTE).map((key) => [key, t(`design_system.gallery.samples.richEditor.colors.${key}`)]));
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-sm flex-col gap-3", children: [
+    /* @__PURE__ */ jsx(RichEditorColorPalette, { value, onChange: setValue, labels }),
+    /* @__PURE__ */ jsx("output", { "aria-live": "polite", className: "text-sm text-muted-foreground", children: value ? labels[value] : "" })
+  ] });
 }
 const inputEntry = {
   id: "input",
   title: "Input",
   importPath: "@open-mercato/ui/primitives/input",
+  figmaNodeId: "266:5251",
+  usage: { do: ["Numeric sizes 32, 36 and 40 use the source 14/20 text, 20 px icons and asymmetric input padding. Named sizes preserve existing callers.", "leading and trailing accept interactive controls; provide accessible labels and forward disabled to those controls. leftIcon/rightIcon remain decorative.", "The source compositions cover all twelve Text Input types. Hover and focus are real browser states; the Date example uses the native date picker and locale formatting. Existing CardInput brand badges and phone parsing retain their runtime behavior."] },
   variants: [
     {
       id: "default",
       title: "default",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(Input, { placeholder: "Product name" }) }),
+      render: () => /* @__PURE__ */ jsx(InputInputsDefaultSample, {}),
       code: `import { Input } from '@open-mercato/ui/primitives/input'
 
 <Input placeholder="Product name" />`
@@ -119,10 +278,7 @@ const inputEntry = {
     {
       id: "icon-slots",
       title: "Icon slots",
-      render: () => /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("div", { className: "w-56", children: /* @__PURE__ */ jsx(Input, { leftIcon: /* @__PURE__ */ jsx(User, {}), placeholder: "Assignee" }) }),
-        /* @__PURE__ */ jsx("div", { className: "w-56", children: /* @__PURE__ */ jsx(Input, { rightIcon: /* @__PURE__ */ jsx(Info, {}), placeholder: "SKU" }) })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(InputInputsIconSlotsSample, {}),
       code: `import { Info, User } from 'lucide-react'
 import { Input } from '@open-mercato/ui/primitives/input'
 
@@ -132,11 +288,7 @@ import { Input } from '@open-mercato/ui/primitives/input'
     {
       id: "sizes",
       title: "Sizes",
-      render: () => /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("div", { className: "w-44", children: /* @__PURE__ */ jsx(Input, { size: "lg", placeholder: "Large" }) }),
-        /* @__PURE__ */ jsx("div", { className: "w-44", children: /* @__PURE__ */ jsx(Input, { size: "default", placeholder: "Default" }) }),
-        /* @__PURE__ */ jsx("div", { className: "w-44", children: /* @__PURE__ */ jsx(Input, { size: "sm", placeholder: "Small" }) })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(InputInputsSizesSample, {}),
       code: `import { Input } from '@open-mercato/ui/primitives/input'
 
 <Input size="lg" placeholder="Large" />
@@ -146,26 +298,42 @@ import { Input } from '@open-mercato/ui/primitives/input'
     {
       id: "states",
       title: "States",
-      render: () => /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("div", { className: "w-56", children: /* @__PURE__ */ jsx(Input, { "aria-invalid": true, defaultValue: "not-a-number" }) }),
-        /* @__PURE__ */ jsx("div", { className: "w-56", children: /* @__PURE__ */ jsx(Input, { disabled: true, placeholder: "Disabled" }) })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(InputInputsStatesSample, {}),
       code: `import { Input } from '@open-mercato/ui/primitives/input'
 
 <Input aria-invalid defaultValue="not-a-number" />
 <Input disabled placeholder="Disabled" />`
-    }
+    },
+    {
+      id: "read-only",
+      title: "Read-only",
+      render: () => /* @__PURE__ */ jsx(ReadOnlyInputPreview, {}),
+      code: `import { Input } from '@open-mercato/ui/primitives/input'
+import { FormField } from '@open-mercato/ui/primitives/form-field'
+
+<FormField label="Record ID" description="Read-only content stays focusable and can be selected and copied.">
+  <Input readOnly value="OM-2026-0042" />
+</FormField>`
+    },
+    { id: "source-32", title: "Source / all twelve types / 32 px", render: () => /* @__PURE__ */ jsx(SourceTextInputMatrix, { size: 32 }), code: inputFieldCode({ inputProps: " size={32}" }) },
+    { id: "source-36", title: "Source / all twelve types / 36 px", render: () => /* @__PURE__ */ jsx(SourceTextInputMatrix, { size: 36 }), code: inputFieldCode({ inputProps: " size={36}" }) },
+    { id: "source-40", title: "Source / all twelve types / 40 px", render: () => /* @__PURE__ */ jsx(SourceTextInputMatrix, { size: 40 }), code: inputFieldCode({ inputProps: " size={40}" }) },
+    { id: "source-placeholder", title: "Source / placeholder", render: () => /* @__PURE__ */ jsx(SourceTextInputMatrix, { state: "placeholder" }), code: inputFieldCode() },
+    { id: "source-error", title: "Source / error", render: () => /* @__PURE__ */ jsx(SourceTextInputMatrix, { state: "error" }), code: inputFieldCode({ inputProps: " aria-invalid", fieldProps: ' error="Enter your full name"' }) },
+    { id: "source-disabled", title: "Source / disabled", render: () => /* @__PURE__ */ jsx(SourceTextInputMatrix, { state: "disabled" }), code: inputFieldCode({ inputProps: " disabled", fieldProps: " disabled" }) }
   ]
 };
 const textareaEntry = {
   id: "textarea",
   title: "Textarea",
+  figmaNodeId: "435:5725",
+  usage: { do: ["appearance=source adds the source 112 px minimum field, 12 px radius, 14/20 text and an interior character counter. The browser-native resize handle remains operable.", "The default appearance and external counter retain their current layout. Set maxLength together with showCount and supply a visible field label."] },
   importPath: "@open-mercato/ui/primitives/textarea",
   variants: [
     {
       id: "default",
       title: "default",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-80", children: /* @__PURE__ */ jsx(Textarea, { placeholder: "Internal note for the fulfillment team" }) }),
+      render: () => /* @__PURE__ */ jsx(TextareaInputsDefaultSample, {}),
       code: `import { Textarea } from '@open-mercato/ui/primitives/textarea'
 
 <Textarea placeholder="Internal note for the fulfillment team" />`
@@ -173,14 +341,7 @@ const textareaEntry = {
     {
       id: "character-count",
       title: "Character counter",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-80", children: /* @__PURE__ */ jsx(
-        Textarea,
-        {
-          showCount: true,
-          maxLength: 200,
-          defaultValue: "Customer prefers delivery after 4 PM."
-        }
-      ) }),
+      render: () => /* @__PURE__ */ jsx(TextareaInputsCharacterCountSample, {}),
       code: `import { Textarea } from '@open-mercato/ui/primitives/textarea'
 
 <Textarea showCount maxLength={200} defaultValue="Customer prefers delivery after 4 PM." />`
@@ -188,140 +349,74 @@ const textareaEntry = {
     {
       id: "states",
       title: "States",
-      render: () => /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(Textarea, { "aria-invalid": true, defaultValue: "Too short" }) }),
-        /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(Textarea, { disabled: true, placeholder: "Disabled" }) })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(TextareaInputsStatesSample, {}),
       code: `import { Textarea } from '@open-mercato/ui/primitives/textarea'
 
 <Textarea aria-invalid defaultValue="Too short" />
 <Textarea disabled placeholder="Disabled" />`
-    }
+    },
+    {
+      id: "read-only",
+      title: "Read-only",
+      render: () => /* @__PURE__ */ jsx(ReadOnlyTextareaPreview, {}),
+      code: `import { Textarea } from '@open-mercato/ui/primitives/textarea'
+import { FormField } from '@open-mercato/ui/primitives/form-field'
+
+<FormField label="Saved note" description="Read-only content stays focusable and can be selected and copied.">
+  <Textarea readOnly value="Customer requested delivery after 4 PM." />
+</FormField>`
+    },
+    { id: "source-states", title: "Source / default, filled, error and disabled", render: () => /* @__PURE__ */ jsx(SourceTextareaExamples, {}), code: textareaFieldCode }
+  ]
+};
+const phoneNumberEntry = {
+  id: "phone-number-field",
+  title: "PhoneNumberField",
+  importPath: "@open-mercato/ui/backend/inputs/PhoneNumberField",
+  figmaNodeId: "313:10101",
+  usage: { do: ["Numeric sizes 32/36/40 add source geometry while the existing automatic height remains the default.", "Choose a country or edit the national number to update the local value. Validation and optional duplicate lookup retain their existing contracts.", "countries translates and limits picker choices; countryLabel names the picker and renderCountryIcon can supply actual country assets."] },
+  variants: [
+    { id: "sizes", title: "Source / 32, 36 and 40 px", render: () => /* @__PURE__ */ jsx(SourcePhoneExamples, {}), code: phoneNumberFieldCode() },
+    { id: "placeholder", title: "Source / placeholder", render: () => /* @__PURE__ */ jsx(SourcePhoneExamples, { state: "placeholder" }), code: phoneNumberFieldCode() },
+    { id: "validation", title: "Source / validation", render: () => /* @__PURE__ */ jsx(SourcePhoneExamples, { state: "error" }), code: phoneNumberFieldCode(' externalError="Enter a valid phone number"') },
+    { id: "disabled", title: "Source / disabled", render: () => /* @__PURE__ */ jsx(SourcePhoneExamples, { state: "disabled" }), code: phoneNumberFieldCode(" disabled") }
   ]
 };
 const selectEntry = {
   id: "select",
+  figmaNodeId: "270:1085",
   title: "Select",
   importPath: "@open-mercato/ui/primitives/select",
+  usage: { do: [
+    "Six source leading types: Basic, Country, Avatar, Provider, Brand, and Company. The 32/36/40 numeric sizes use the measured source text, icons, padding and radii; named sizes retain their existing defaults.",
+    "SelectItem leading keeps the visual outside Radix ItemText. The trigger renders its selected visual explicitly, so a selection never duplicates the icon.",
+    "Use Dropdown for searchable choices. Select keeps Radix keyboard typeahead; search inputs must not be nested in a Select listbox."
+  ] },
   variants: [
-    {
-      id: "default",
-      title: "default",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-56", children: /* @__PURE__ */ jsxs(Select, { defaultValue: "pln", children: [
-        /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Choose currency" }) }),
-        /* @__PURE__ */ jsxs(SelectContent, { children: [
-          /* @__PURE__ */ jsx(SelectItem, { value: "eur", children: "Euro (EUR)" }),
-          /* @__PURE__ */ jsx(SelectItem, { value: "pln", children: "Polish Z\u0142oty (PLN)" }),
-          /* @__PURE__ */ jsx(SelectItem, { value: "usd", children: "US Dollar (USD)" })
-        ] })
-      ] }) }),
-      code: `import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@open-mercato/ui/primitives/select'
-
-<Select defaultValue="pln">
-  <SelectTrigger>
-    <SelectValue placeholder="Choose currency" />
-  </SelectTrigger>
-  <SelectContent>
-    <SelectItem value="eur">Euro (EUR)</SelectItem>
-    <SelectItem value="pln">Polish Z\u0142oty (PLN)</SelectItem>
-    <SelectItem value="usd">US Dollar (USD)</SelectItem>
-  </SelectContent>
-</Select>`
-    },
-    {
-      id: "groups-leading",
-      title: "Groups + leading slot",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-56", children: /* @__PURE__ */ jsxs(Select, { children: [
-        /* @__PURE__ */ jsxs(SelectTrigger, { children: [
-          /* @__PURE__ */ jsx(SelectTriggerLeading, { children: /* @__PURE__ */ jsx(Globe, {}) }),
-          /* @__PURE__ */ jsx(SelectValue, { placeholder: "Sales channel" })
-        ] }),
-        /* @__PURE__ */ jsxs(SelectContent, { children: [
-          /* @__PURE__ */ jsxs(SelectGroup, { children: [
-            /* @__PURE__ */ jsx(SelectLabel, { children: "Online" }),
-            /* @__PURE__ */ jsx(SelectItem, { value: "webstore", children: "Webstore" }),
-            /* @__PURE__ */ jsx(SelectItem, { value: "marketplace", children: "Marketplace" })
-          ] }),
-          /* @__PURE__ */ jsx(SelectSeparator, {}),
-          /* @__PURE__ */ jsxs(SelectGroup, { children: [
-            /* @__PURE__ */ jsx(SelectLabel, { children: "Offline" }),
-            /* @__PURE__ */ jsx(SelectItem, { value: "retail", children: "Retail store" })
-          ] })
-        ] })
-      ] }) }),
-      code: `import { Globe } from 'lucide-react'
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectSeparator,
-  SelectTrigger,
-  SelectTriggerLeading,
-  SelectValue,
-} from '@open-mercato/ui/primitives/select'
-
-<Select>
-  <SelectTrigger>
-    <SelectTriggerLeading><Globe /></SelectTriggerLeading>
-    <SelectValue placeholder="Sales channel" />
-  </SelectTrigger>
-  <SelectContent>
-    <SelectGroup>
-      <SelectLabel>Online</SelectLabel>
-      <SelectItem value="webstore">Webstore</SelectItem>
-      <SelectItem value="marketplace">Marketplace</SelectItem>
-    </SelectGroup>
-    <SelectSeparator />
-    <SelectGroup>
-      <SelectLabel>Offline</SelectLabel>
-      <SelectItem value="retail">Retail store</SelectItem>
-    </SelectGroup>
-  </SelectContent>
-</Select>`
-    },
-    {
-      id: "sizes",
-      title: "Sizes",
-      render: () => /* @__PURE__ */ jsx(Fragment, { children: ["lg", "default", "sm", "xs"].map((size) => /* @__PURE__ */ jsx("div", { className: "w-40", children: /* @__PURE__ */ jsxs(Select, { defaultValue: "active", children: [
-        /* @__PURE__ */ jsx(SelectTrigger, { size, children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-        /* @__PURE__ */ jsxs(SelectContent, { children: [
-          /* @__PURE__ */ jsx(SelectItem, { value: "active", children: "Active" }),
-          /* @__PURE__ */ jsx(SelectItem, { value: "archived", children: "Archived" })
-        ] })
-      ] }) }, size)) }),
-      code: `import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@open-mercato/ui/primitives/select'
-
-<SelectTrigger size="lg" />
-<SelectTrigger size="default" />
-<SelectTrigger size="sm" />
-<SelectTrigger size="xs" />`
-    },
-    {
-      id: "states",
-      title: "States",
-      render: () => /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("div", { className: "w-48", children: /* @__PURE__ */ jsxs(Select, { children: [
-          /* @__PURE__ */ jsx(SelectTrigger, { "aria-invalid": "true", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Required" }) }),
-          /* @__PURE__ */ jsx(SelectContent, { children: /* @__PURE__ */ jsx(SelectItem, { value: "a", children: "Option A" }) })
-        ] }) }),
-        /* @__PURE__ */ jsx("div", { className: "w-48", children: /* @__PURE__ */ jsxs(Select, { children: [
-          /* @__PURE__ */ jsx(SelectTrigger, { disabled: true, children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Disabled" }) }),
-          /* @__PURE__ */ jsx(SelectContent, { children: /* @__PURE__ */ jsx(SelectItem, { value: "a", children: "Option A" }) })
-        ] }) })
-      ] }),
-      code: `import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@open-mercato/ui/primitives/select'
-
-<SelectTrigger aria-invalid="true"><SelectValue placeholder="Required" /></SelectTrigger>
-<SelectTrigger disabled><SelectValue placeholder="Disabled" /></SelectTrigger>`
-    }
+    { id: "default", title: "Basic / 36 px", render: () => /* @__PURE__ */ jsx("div", { className: "w-72 max-w-full", children: /* @__PURE__ */ jsx(SelectSourceExample, { kind: "basic" }) }), code: selectFieldCode() },
+    { id: "groups-leading", title: "All six leading types / 36 px", render: () => /* @__PURE__ */ jsx(SelectSourceMatrix, {}), code: selectFieldCode({ leading: true }) },
+    { id: "sizes", title: "All types / 32 px", render: () => /* @__PURE__ */ jsx(SelectSourceMatrix, { size: 32 }), code: selectFieldCode({ size: 32, leading: true }) },
+    { id: "medium", title: "All types / 40 px", render: () => /* @__PURE__ */ jsx(SelectSourceMatrix, { size: 40 }), code: selectFieldCode({ size: 40, leading: true }) },
+    { id: "placeholder", title: "All types / placeholders", render: () => /* @__PURE__ */ jsx(SelectSourceMatrix, { state: "default" }), code: selectFieldCode({ leading: true, initialValue: "" }) },
+    { id: "states", title: "All types / disabled", render: () => /* @__PURE__ */ jsx(SelectSourceMatrix, { state: "disabled" }), code: selectFieldCode({ leading: true, selectProps: " disabled", fieldProps: " disabled" }) },
+    { id: "errors", title: "All types / errors", render: () => /* @__PURE__ */ jsx(SelectSourceMatrix, { state: "error" }), code: selectFieldCode({ leading: true, initialValue: "", fieldProps: ' error="Choose an office"' }) }
+  ]
+};
+const dropdownEntry = {
+  id: "dropdown",
+  figmaNodeId: "379:6629",
+  title: "Dropdown",
+  importPath: "@open-mercato/ui/primitives/dropdown",
+  descriptionKey: "design_system.entries.dropdown.description",
+  usage: { do: [
+    "A searchable, keyboard-operated picker built from Popover and cmdk. All six leading types use source assets and production components at 36 or 56 px.",
+    "Search, clear, choose with arrows and Enter, or dismiss with Escape. The selected value and footer action update local example state.",
+    "The saved checked state is separate from the active keyboard option. Footer buttons remain outside listbox options. Source Misc Items 414:8031 supplies search, action and caption layouts."
+  ] },
+  variants: [
+    { id: "small", title: "All six types / 36 px", render: () => /* @__PURE__ */ jsx(DropdownSourceExample, {}), code: dropdownCode() },
+    { id: "large", title: "All six types / 56 px", render: () => /* @__PURE__ */ jsx(DropdownSourceExample, { size: 56 }), code: dropdownCode({ size: 56 }) },
+    { id: "empty", title: "No results / clear to recover", render: () => /* @__PURE__ */ jsx(DropdownSourceExample, { empty: true }), code: dropdownCode({ initialQuery: "zzzz" }) }
   ]
 };
 const compactSelectEntry = {
@@ -332,14 +427,7 @@ const compactSelectEntry = {
     {
       id: "trigger-label",
       title: "With trigger label",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-44", children: /* @__PURE__ */ jsxs(Select, { defaultValue: "newest", children: [
-        /* @__PURE__ */ jsx(CompactSelectTrigger, { triggerLabel: "Sort:", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-        /* @__PURE__ */ jsxs(SelectContent, { children: [
-          /* @__PURE__ */ jsx(SelectItem, { value: "newest", children: "Newest" }),
-          /* @__PURE__ */ jsx(SelectItem, { value: "oldest", children: "Oldest" }),
-          /* @__PURE__ */ jsx(SelectItem, { value: "value", children: "Highest value" })
-        ] })
-      ] }) }),
+      render: () => /* @__PURE__ */ jsx(CompactSelectInputsTriggerLabelSample, {}),
       code: `import {
   CompactSelectTrigger,
   Select,
@@ -362,13 +450,7 @@ const compactSelectEntry = {
     {
       id: "plain",
       title: "Without label",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-36", children: /* @__PURE__ */ jsxs(Select, { defaultValue: "table", children: [
-        /* @__PURE__ */ jsx(CompactSelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-        /* @__PURE__ */ jsxs(SelectContent, { children: [
-          /* @__PURE__ */ jsx(SelectItem, { value: "table", children: "Table" }),
-          /* @__PURE__ */ jsx(SelectItem, { value: "board", children: "Board" })
-        ] })
-      ] }) }),
+      render: () => /* @__PURE__ */ jsx(CompactSelectInputsPlainSample, {}),
       code: `import {
   CompactSelectTrigger,
   Select,
@@ -397,14 +479,7 @@ const inlineSelectEntry = {
     {
       id: "default",
       title: "default (border on hover)",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-40", children: /* @__PURE__ */ jsxs(Select, { defaultValue: "high", children: [
-        /* @__PURE__ */ jsx(InlineSelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-        /* @__PURE__ */ jsxs(SelectContent, { children: [
-          /* @__PURE__ */ jsx(SelectItem, { value: "low", children: "Low" }),
-          /* @__PURE__ */ jsx(SelectItem, { value: "medium", children: "Medium" }),
-          /* @__PURE__ */ jsx(SelectItem, { value: "high", children: "High" })
-        ] })
-      ] }) }),
+      render: () => /* @__PURE__ */ jsx(InlineSelectInputsDefaultSample, {}),
       code: `import {
   InlineSelectTrigger,
   Select,
@@ -427,13 +502,7 @@ const inlineSelectEntry = {
     {
       id: "invisible",
       title: "Invisible until focus",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-40", children: /* @__PURE__ */ jsxs(Select, { defaultValue: "draft", children: [
-        /* @__PURE__ */ jsx(InlineSelectTrigger, { showBorderOnHover: false, children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-        /* @__PURE__ */ jsxs(SelectContent, { children: [
-          /* @__PURE__ */ jsx(SelectItem, { value: "draft", children: "Draft" }),
-          /* @__PURE__ */ jsx(SelectItem, { value: "published", children: "Published" })
-        ] })
-      ] }) }),
+      render: () => /* @__PURE__ */ jsx(InlineSelectInputsInvisibleSample, {}),
       code: `import {
   InlineSelectTrigger,
   Select,
@@ -456,7 +525,7 @@ const inlineInputEntry = {
     {
       id: "default",
       title: "default (border on hover)",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-56", children: /* @__PURE__ */ jsx(InlineInput, { defaultValue: "Aurora desk lamp", "aria-label": "Product name" }) }),
+      render: () => /* @__PURE__ */ jsx(InlineInputInputsDefaultSample, {}),
       code: `import { InlineInput } from '@open-mercato/ui/primitives/inline-input'
 
 <InlineInput defaultValue="Aurora desk lamp" aria-label="Product name" onBlur={save} />`
@@ -486,11 +555,7 @@ const checkboxEntry = {
     {
       id: "states",
       title: "States",
-      render: () => /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Checkbox, { "aria-label": "Unchecked" }),
-        /* @__PURE__ */ jsx(Checkbox, { defaultChecked: true, "aria-label": "Checked" }),
-        /* @__PURE__ */ jsx(Checkbox, { checked: "indeterminate", "aria-label": "Indeterminate" })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(CheckboxInputsStatesSample, {}),
       code: `import { Checkbox } from '@open-mercato/ui/primitives/checkbox'
 
 <Checkbox />
@@ -500,10 +565,7 @@ const checkboxEntry = {
     {
       id: "sizes",
       title: "Sizes",
-      render: () => /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Checkbox, { size: "sm", defaultChecked: true, "aria-label": "Small" }),
-        /* @__PURE__ */ jsx(Checkbox, { size: "md", defaultChecked: true, "aria-label": "Medium" })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(CheckboxInputsSizesSample, {}),
       code: `import { Checkbox } from '@open-mercato/ui/primitives/checkbox'
 
 <Checkbox size="sm" defaultChecked />
@@ -512,10 +574,7 @@ const checkboxEntry = {
     {
       id: "disabled",
       title: "Disabled",
-      render: () => /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Checkbox, { disabled: true, "aria-label": "Disabled" }),
-        /* @__PURE__ */ jsx(Checkbox, { disabled: true, defaultChecked: true, "aria-label": "Disabled checked" })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(CheckboxInputsDisabledSample, {}),
       code: `import { Checkbox } from '@open-mercato/ui/primitives/checkbox'
 
 <Checkbox disabled />
@@ -527,11 +586,12 @@ const checkboxFieldEntry = {
   id: "checkbox-field",
   title: "CheckboxField",
   importPath: "@open-mercato/ui/primitives/checkbox-field",
+  figmaNodeId: "231:4897",
   variants: [
     {
       id: "default",
       title: "default",
-      render: () => /* @__PURE__ */ jsx(CheckboxField, { label: "Email notifications", defaultChecked: true }),
+      render: () => /* @__PURE__ */ jsx(CheckboxFieldInputsDefaultSample, {}),
       code: `import { CheckboxField } from '@open-mercato/ui/primitives/checkbox-field'
 
 <CheckboxField label="Email notifications" defaultChecked />`
@@ -539,14 +599,7 @@ const checkboxFieldEntry = {
     {
       id: "with-description",
       title: "With sublabel + description",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-80", children: /* @__PURE__ */ jsx(
-        CheckboxField,
-        {
-          label: "Auto-archive",
-          sublabel: "(recommended)",
-          description: "Closed conversations move to the archive after 30 days."
-        }
-      ) }),
+      render: () => /* @__PURE__ */ jsx(CheckboxFieldInputsWithDescriptionSample, {}),
       code: `import { CheckboxField } from '@open-mercato/ui/primitives/checkbox-field'
 
 <CheckboxField
@@ -558,10 +611,207 @@ const checkboxFieldEntry = {
     {
       id: "flip",
       title: "Flipped (checkbox right)",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(CheckboxField, { flip: true, label: "Include shipping costs", defaultChecked: true }) }),
+      render: () => /* @__PURE__ */ jsx(CheckboxFieldInputsFlipSample, {}),
       code: `import { CheckboxField } from '@open-mercato/ui/primitives/checkbox-field'
 
 <CheckboxField flip label="Include shipping costs" defaultChecked />`
+    },
+    {
+      id: "cards",
+      title: "Card / default, selected and hover",
+      render: () => /* @__PURE__ */ jsx(SelectionCardsPreview, { control: "checkbox" }),
+      code: `import { CheckboxField } from '@open-mercato/ui/primitives/checkbox-field'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+
+const cardClassName = 'relative w-full max-w-90 gap-3.5 rounded-xl border border-border bg-background p-4 shadow-xs transition-colors hover:border-transparent hover:bg-muted hover:shadow-none has-[[data-state=checked]]:border-accent-indigo has-[[data-state=checked]]:shadow-none has-[:focus-visible]:shadow-focus has-[:disabled]:border-border has-[:disabled]:bg-background has-[:disabled]:shadow-none [&_label]:after:absolute [&_label]:after:inset-0 [&_label]:after:rounded-xl [&_button]:relative [&_button]:z-10'
+
+<div className="grid w-full gap-4 sm:grid-cols-2">
+  <CheckboxField flip defaultChecked
+    label="Immediate updates"
+    sublabel="(Optional)"
+    description="Receive an update when an order changes."
+    badge={<Badge variant="info" size="sm">New</Badge>}
+    className="mt-0"
+    containerClassName={cardClassName}
+  />
+  <CheckboxField flip
+    label="Weekly summary"
+    sublabel="(Optional)"
+    description="Receive one summary every Monday."
+    badge={<Badge variant="info" size="sm">New</Badge>}
+    className="mt-0"
+    containerClassName={cardClassName}
+  />
+</div>`
+    },
+    {
+      id: "cards-disabled",
+      title: "Card / disabled",
+      render: () => /* @__PURE__ */ jsx(SelectionCardsPreview, { control: "checkbox", disabled: true }),
+      code: `import { CheckboxField } from '@open-mercato/ui/primitives/checkbox-field'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+
+const cardClassName = 'relative w-full max-w-90 gap-3.5 rounded-xl border border-border bg-background p-4 shadow-xs transition-colors hover:border-transparent hover:bg-muted hover:shadow-none has-[[data-state=checked]]:border-accent-indigo has-[[data-state=checked]]:shadow-none has-[:focus-visible]:shadow-focus has-[:disabled]:border-border has-[:disabled]:bg-background has-[:disabled]:shadow-none [&_label]:after:absolute [&_label]:after:inset-0 [&_label]:after:rounded-xl [&_button]:relative [&_button]:z-10'
+
+<div className="grid w-full gap-4 sm:grid-cols-2">
+  <CheckboxField flip defaultChecked disabled
+    label="Immediate updates"
+    sublabel="(Optional)"
+    description="Receive an update when an order changes."
+    badge={<Badge variant="outline" size="sm" className="text-text-disabled">New</Badge>}
+    className="mt-0"
+    containerClassName={cardClassName}
+  />
+  <CheckboxField flip disabled
+    label="Weekly summary"
+    sublabel="(Optional)"
+    description="Receive one summary every Monday."
+    badge={<Badge variant="outline" size="sm" className="text-text-disabled">New</Badge>}
+    className="mt-0"
+    containerClassName={cardClassName}
+  />
+</div>`
+    },
+    {
+      id: "source-cards-icon",
+      title: "icon cards / default, active, disabled and live hover",
+      render: () => /* @__PURE__ */ jsx(SelectionSourceCardsDemo, { control: "checkbox", kind: "icon" }),
+      code: `import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { CheckboxField } from '@open-mercato/ui/primitives/checkbox-field'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+
+function SelectionCardExample({ imageUrl, disabled = false }: { imageUrl: string; disabled?: boolean }) {
+  const [checked, setChecked] = React.useState(false)
+  const label = 'Label'
+  return (
+
+    <div className={cn('relative flex w-90 max-w-full items-start gap-3.5 rounded-selection-card bg-background p-4 ring-1 ring-inset ring-border shadow-xs transition-colors hover:bg-muted hover:shadow-none has-[[data-state=checked]]:ring-accent-indigo has-[[data-state=checked]]:shadow-none has-[:focus-visible]:shadow-focus [&_label]:after:absolute [&_label]:after:inset-0 [&_label]:after:rounded-selection-card [&_button]:relative [&_button]:z-10', disabled && 'shadow-none hover:bg-background has-[[data-state=checked]]:ring-border')}>
+      <img src={imageUrl} alt="" className="size-10 shrink-0 object-contain" />
+      <CheckboxField flip checked={checked} onCheckedChange={value => setChecked(value === true)} disabled={disabled}
+        label={label}
+        sublabel="(Sublabel)"
+        description="Insert the checkbox description here."
+        badge={<Badge size={16} appearance={disabled ? 'stroke' : 'light'} tone={disabled ? 'neutral' : 'info'}>New</Badge>}
+        className="mt-0 disabled:opacity-100 disabled:data-[state=checked]:bg-bg-disabled disabled:data-[state=checked]:border-border-disabled disabled:data-[state=checked]:text-background" containerClassName="min-w-0 flex-1 gap-3.5"
+      />
+    </div>
+
+  )
+}`
+    },
+    {
+      id: "source-cards-avatar",
+      title: "avatar cards / default, active, disabled and live hover",
+      render: () => /* @__PURE__ */ jsx(SelectionSourceCardsDemo, { control: "checkbox", kind: "avatar" }),
+      code: `import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { CheckboxField } from '@open-mercato/ui/primitives/checkbox-field'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { Avatar } from '@open-mercato/ui/primitives/avatar'
+
+function SelectionCardExample({ imageUrl, disabled = false }: { imageUrl: string; disabled?: boolean }) {
+  const [checked, setChecked] = React.useState(false)
+  const label = 'Label'
+  return (
+
+    <div className={cn('relative flex w-90 max-w-full items-start gap-3.5 rounded-selection-card bg-background p-4 ring-1 ring-inset ring-border shadow-xs transition-colors hover:bg-muted hover:shadow-none has-[[data-state=checked]]:ring-accent-indigo has-[[data-state=checked]]:shadow-none has-[:focus-visible]:shadow-focus [&_label]:after:absolute [&_label]:after:inset-0 [&_label]:after:rounded-selection-card [&_button]:relative [&_button]:z-10', disabled && 'shadow-none hover:bg-background has-[[data-state=checked]]:ring-border')}>
+      <Avatar label={label} size={40} src={imageUrl} aria-hidden="true" />
+      <CheckboxField flip checked={checked} onCheckedChange={value => setChecked(value === true)} disabled={disabled}
+        label={label}
+        sublabel="(Sublabel)"
+        description="Insert the checkbox description here."
+        badge={<Badge size={16} appearance={disabled ? 'stroke' : 'light'} tone={disabled ? 'neutral' : 'info'}>New</Badge>}
+        className="mt-0 disabled:opacity-100 disabled:data-[state=checked]:bg-bg-disabled disabled:data-[state=checked]:border-border-disabled disabled:data-[state=checked]:text-background" containerClassName="min-w-0 flex-1 gap-3.5"
+      />
+    </div>
+
+  )
+}`
+    },
+    {
+      id: "source-cards-provider",
+      title: "provider cards / default, active, disabled and live hover",
+      render: () => /* @__PURE__ */ jsx(SelectionSourceCardsDemo, { control: "checkbox", kind: "provider" }),
+      code: `import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { CheckboxField } from '@open-mercato/ui/primitives/checkbox-field'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+
+function SelectionCardExample({ imageUrl, disabled = false }: { imageUrl: string; disabled?: boolean }) {
+  const [checked, setChecked] = React.useState(false)
+  const label = 'Label'
+  return (
+
+    <div className={cn('relative flex w-90 max-w-full items-start gap-3.5 rounded-selection-card bg-background p-4 ring-1 ring-inset ring-border shadow-xs transition-colors hover:bg-muted hover:shadow-none has-[[data-state=checked]]:ring-accent-indigo has-[[data-state=checked]]:shadow-none has-[:focus-visible]:shadow-focus [&_label]:after:absolute [&_label]:after:inset-0 [&_label]:after:rounded-selection-card [&_button]:relative [&_button]:z-10', disabled && 'shadow-none hover:bg-background has-[[data-state=checked]]:ring-border')}>
+      <img src={imageUrl} alt="" className="h-6 w-8 shrink-0 object-contain" />
+      <CheckboxField flip checked={checked} onCheckedChange={value => setChecked(value === true)} disabled={disabled}
+        label={label}
+        sublabel="(Sublabel)"
+        description="Insert the checkbox description here."
+        badge={<Badge size={16} appearance={disabled ? 'stroke' : 'light'} tone={disabled ? 'neutral' : 'info'}>New</Badge>}
+        className="mt-0 disabled:opacity-100 disabled:data-[state=checked]:bg-bg-disabled disabled:data-[state=checked]:border-border-disabled disabled:data-[state=checked]:text-background" containerClassName="min-w-0 flex-1 gap-3.5"
+      />
+    </div>
+
+  )
+}`
+    },
+    {
+      id: "source-cards-brand",
+      title: "brand cards / default, active, disabled and live hover",
+      render: () => /* @__PURE__ */ jsx(SelectionSourceCardsDemo, { control: "checkbox", kind: "brand" }),
+      code: `import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { CheckboxField } from '@open-mercato/ui/primitives/checkbox-field'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+
+function SelectionCardExample({ imageUrl, disabled = false }: { imageUrl: string; disabled?: boolean }) {
+  const [checked, setChecked] = React.useState(false)
+  const label = 'Label'
+  return (
+
+    <div className={cn('relative flex w-90 max-w-full items-start gap-3.5 rounded-selection-card bg-background p-4 ring-1 ring-inset ring-border shadow-xs transition-colors hover:bg-muted hover:shadow-none has-[[data-state=checked]]:ring-accent-indigo has-[[data-state=checked]]:shadow-none has-[:focus-visible]:shadow-focus [&_label]:after:absolute [&_label]:after:inset-0 [&_label]:after:rounded-selection-card [&_button]:relative [&_button]:z-10', disabled && 'shadow-none hover:bg-background has-[[data-state=checked]]:ring-border')}>
+      <img src={imageUrl} alt="" className="size-10 shrink-0 object-contain" />
+      <CheckboxField flip checked={checked} onCheckedChange={value => setChecked(value === true)} disabled={disabled}
+        label={label}
+        sublabel="(Sublabel)"
+        description="Insert the checkbox description here."
+        badge={<Badge size={16} appearance={disabled ? 'stroke' : 'light'} tone={disabled ? 'neutral' : 'info'}>New</Badge>}
+        className="mt-0 disabled:opacity-100 disabled:data-[state=checked]:bg-bg-disabled disabled:data-[state=checked]:border-border-disabled disabled:data-[state=checked]:text-background" containerClassName="min-w-0 flex-1 gap-3.5"
+      />
+    </div>
+
+  )
+}`
+    },
+    {
+      id: "source-cards-company",
+      title: "company cards / default, active, disabled and live hover",
+      render: () => /* @__PURE__ */ jsx(SelectionSourceCardsDemo, { control: "checkbox", kind: "company" }),
+      code: `import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { CheckboxField } from '@open-mercato/ui/primitives/checkbox-field'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+
+function SelectionCardExample({ imageUrl, disabled = false }: { imageUrl: string; disabled?: boolean }) {
+  const [checked, setChecked] = React.useState(false)
+  const label = 'Label'
+  return (
+
+    <div className={cn('relative flex w-90 max-w-full items-start gap-3.5 rounded-selection-card bg-background p-4 ring-1 ring-inset ring-border shadow-xs transition-colors hover:bg-muted hover:shadow-none has-[[data-state=checked]]:ring-accent-indigo has-[[data-state=checked]]:shadow-none has-[:focus-visible]:shadow-focus [&_label]:after:absolute [&_label]:after:inset-0 [&_label]:after:rounded-selection-card [&_button]:relative [&_button]:z-10', disabled && 'shadow-none hover:bg-background has-[[data-state=checked]]:ring-border')}>
+      <img src={imageUrl} alt="" className="size-10 shrink-0 object-contain" />
+      <CheckboxField flip checked={checked} onCheckedChange={value => setChecked(value === true)} disabled={disabled}
+        label={label}
+        sublabel="(Sublabel)"
+        description="Insert the checkbox description here."
+        badge={<Badge size={16} appearance={disabled ? 'stroke' : 'light'} tone={disabled ? 'neutral' : 'info'}>New</Badge>}
+        className="mt-0 disabled:opacity-100 disabled:data-[state=checked]:bg-bg-disabled disabled:data-[state=checked]:border-border-disabled disabled:data-[state=checked]:text-background" containerClassName="min-w-0 flex-1 gap-3.5"
+      />
+    </div>
+
+  )
+}`
     }
   ]
 };
@@ -574,11 +824,7 @@ const radioEntry = {
     {
       id: "group",
       title: "RadioGroup",
-      render: () => /* @__PURE__ */ jsxs(RadioGroup, { defaultValue: "card", className: "flex-row gap-3", "aria-label": "Payment method", children: [
-        /* @__PURE__ */ jsx(Radio, { value: "card", "aria-label": "Card" }),
-        /* @__PURE__ */ jsx(Radio, { value: "transfer", "aria-label": "Bank transfer" }),
-        /* @__PURE__ */ jsx(Radio, { value: "cash", "aria-label": "Cash" })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(RadioInputsGroupSample, {}),
       code: `import { Radio, RadioGroup } from '@open-mercato/ui/primitives/radio'
 
 <RadioGroup defaultValue="card" aria-label="Payment method">
@@ -590,10 +836,7 @@ const radioEntry = {
     {
       id: "disabled",
       title: "Disabled",
-      render: () => /* @__PURE__ */ jsxs(RadioGroup, { defaultValue: "a", disabled: true, className: "flex-row gap-3", "aria-label": "Disabled group", children: [
-        /* @__PURE__ */ jsx(Radio, { value: "a", "aria-label": "Selected disabled" }),
-        /* @__PURE__ */ jsx(Radio, { value: "b", "aria-label": "Unselected disabled" })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(RadioInputsDisabledSample, {}),
       code: `import { Radio, RadioGroup } from '@open-mercato/ui/primitives/radio'
 
 <RadioGroup defaultValue="a" disabled>
@@ -608,14 +851,24 @@ const radioFieldEntry = {
   id: "radio-field",
   title: "RadioField",
   importPath: "@open-mercato/ui/primitives/radio-field",
+  figmaNodeId: "515:4282",
   variants: [
+    {
+      id: "flip",
+      title: "Flipped (radio right)",
+      render: () => /* @__PURE__ */ jsx(FlippedRadioPreview, {}),
+      code: `import { RadioGroup } from '@open-mercato/ui/primitives/radio'
+import { RadioField } from '@open-mercato/ui/primitives/radio-field'
+
+<RadioGroup defaultValue="immediate" aria-label="Notification preferences" className="w-72">
+  <RadioField value="immediate" flip label="Immediate updates" />
+  <RadioField value="weekly" flip label="Weekly summary" />
+</RadioGroup>`
+    },
     {
       id: "default",
       title: "default",
-      render: () => /* @__PURE__ */ jsxs(RadioGroup, { defaultValue: "standard", "aria-label": "Shipping speed", children: [
-        /* @__PURE__ */ jsx(RadioField, { value: "standard", label: "Standard" }),
-        /* @__PURE__ */ jsx(RadioField, { value: "express", label: "Express" })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(RadioFieldInputsDefaultSample, {}),
       code: `import { RadioGroup } from '@open-mercato/ui/primitives/radio'
 import { RadioField } from '@open-mercato/ui/primitives/radio-field'
 
@@ -627,24 +880,7 @@ import { RadioField } from '@open-mercato/ui/primitives/radio-field'
     {
       id: "with-description",
       title: "With description",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-80", children: /* @__PURE__ */ jsxs(RadioGroup, { defaultValue: "invoice", "aria-label": "Billing", children: [
-        /* @__PURE__ */ jsx(
-          RadioField,
-          {
-            value: "invoice",
-            label: "Invoice",
-            description: "Pay within 14 days of delivery."
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          RadioField,
-          {
-            value: "prepaid",
-            label: "Prepaid",
-            description: "Order ships after payment clears."
-          }
-        )
-      ] }) }),
+      render: () => /* @__PURE__ */ jsx(RadioFieldInputsWithDescriptionSample, {}),
       code: `import { RadioGroup } from '@open-mercato/ui/primitives/radio'
 import { RadioField } from '@open-mercato/ui/primitives/radio-field'
 
@@ -652,6 +888,210 @@ import { RadioField } from '@open-mercato/ui/primitives/radio-field'
   <RadioField value="invoice" label="Invoice" description="Pay within 14 days of delivery." />
   <RadioField value="prepaid" label="Prepaid" description="Order ships after payment clears." />
 </RadioGroup>`
+    },
+    {
+      id: "cards",
+      title: "Card / default, selected and hover",
+      render: () => /* @__PURE__ */ jsx(SelectionCardsPreview, { control: "radio" }),
+      code: `import { RadioField } from '@open-mercato/ui/primitives/radio-field'
+import { RadioGroup } from '@open-mercato/ui/primitives/radio'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+
+const cardClassName = 'relative w-full max-w-90 gap-3.5 rounded-xl border border-border bg-background p-4 shadow-xs transition-colors hover:border-transparent hover:bg-muted hover:shadow-none has-[[data-state=checked]]:border-accent-indigo has-[[data-state=checked]]:shadow-none has-[:focus-visible]:shadow-focus has-[:disabled]:border-border has-[:disabled]:bg-background has-[:disabled]:shadow-none [&_label]:after:absolute [&_label]:after:inset-0 [&_label]:after:rounded-xl [&_button]:relative [&_button]:z-10'
+
+<RadioGroup defaultValue="immediate" aria-label="Notification preferences" className="grid w-full gap-4 sm:grid-cols-2">
+  <RadioField flip value="immediate"
+    label="Immediate updates"
+    sublabel="(Optional)"
+    description="Receive an update when an order changes."
+    badge={<Badge variant="info" size="sm">New</Badge>}
+    className="mt-0"
+    containerClassName={cardClassName}
+  />
+  <RadioField flip value="weekly"
+    label="Weekly summary"
+    sublabel="(Optional)"
+    description="Receive one summary every Monday."
+    badge={<Badge variant="info" size="sm">New</Badge>}
+    className="mt-0"
+    containerClassName={cardClassName}
+  />
+</RadioGroup>`
+    },
+    {
+      id: "cards-disabled",
+      title: "Card / disabled",
+      render: () => /* @__PURE__ */ jsx(SelectionCardsPreview, { control: "radio", disabled: true }),
+      code: `import { RadioField } from '@open-mercato/ui/primitives/radio-field'
+import { RadioGroup } from '@open-mercato/ui/primitives/radio'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+
+const cardClassName = 'relative w-full max-w-90 gap-3.5 rounded-xl border border-border bg-background p-4 shadow-xs transition-colors hover:border-transparent hover:bg-muted hover:shadow-none has-[[data-state=checked]]:border-accent-indigo has-[[data-state=checked]]:shadow-none has-[:focus-visible]:shadow-focus has-[:disabled]:border-border has-[:disabled]:bg-background has-[:disabled]:shadow-none [&_label]:after:absolute [&_label]:after:inset-0 [&_label]:after:rounded-xl [&_button]:relative [&_button]:z-10'
+
+<RadioGroup defaultValue="immediate" aria-label="Notification preferences" className="grid w-full gap-4 sm:grid-cols-2">
+  <RadioField flip value="immediate" disabled
+    label="Immediate updates"
+    sublabel="(Optional)"
+    description="Receive an update when an order changes."
+    badge={<Badge variant="outline" size="sm" className="text-text-disabled">New</Badge>}
+    className="mt-0"
+    containerClassName={cardClassName}
+  />
+  <RadioField flip value="weekly" disabled
+    label="Weekly summary"
+    sublabel="(Optional)"
+    description="Receive one summary every Monday."
+    badge={<Badge variant="outline" size="sm" className="text-text-disabled">New</Badge>}
+    className="mt-0"
+    containerClassName={cardClassName}
+  />
+</RadioGroup>`
+    },
+    {
+      id: "source-cards-icon",
+      title: "icon cards / default, active, disabled and live hover",
+      render: () => /* @__PURE__ */ jsx(SelectionSourceCardsDemo, { control: "radio", kind: "icon" }),
+      code: `import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { RadioField } from '@open-mercato/ui/primitives/radio-field'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { RadioGroup } from '@open-mercato/ui/primitives/radio'
+
+function SelectionCardExample({ imageUrl, disabled = false }: { imageUrl: string; disabled?: boolean }) {
+  const [value, setValue] = React.useState('selected')
+  const label = 'Label'
+  return (
+    <RadioGroup value={value} onValueChange={setValue} aria-label={label}>
+    <div className={cn('relative flex w-90 max-w-full items-start gap-3.5 rounded-selection-card bg-background p-4 ring-1 ring-inset ring-border shadow-xs transition-colors hover:bg-muted hover:shadow-none has-[[data-state=checked]]:ring-accent-indigo has-[[data-state=checked]]:shadow-none has-[:focus-visible]:shadow-focus [&_label]:after:absolute [&_label]:after:inset-0 [&_label]:after:rounded-selection-card [&_button]:relative [&_button]:z-10', disabled && 'shadow-none hover:bg-background has-[[data-state=checked]]:ring-border')}>
+      <img src={imageUrl} alt="" className="size-10 shrink-0 object-contain" />
+      <RadioField value="selected" flip disabled={disabled}
+        label={label}
+        sublabel="(Sublabel)"
+        description="Insert the checkbox description here."
+        badge={<Badge size={16} appearance={disabled ? 'stroke' : 'light'} tone={disabled ? 'neutral' : 'info'}>New</Badge>}
+        className="mt-0 disabled:opacity-100 disabled:data-[state=checked]:bg-bg-disabled disabled:data-[state=checked]:border-border-disabled disabled:data-[state=checked]:text-background" containerClassName="min-w-0 flex-1 gap-3.5"
+      />
+    </div>
+    </RadioGroup>
+  )
+}`
+    },
+    {
+      id: "source-cards-avatar",
+      title: "avatar cards / default, active, disabled and live hover",
+      render: () => /* @__PURE__ */ jsx(SelectionSourceCardsDemo, { control: "radio", kind: "avatar" }),
+      code: `import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { RadioField } from '@open-mercato/ui/primitives/radio-field'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { RadioGroup } from '@open-mercato/ui/primitives/radio'
+import { Avatar } from '@open-mercato/ui/primitives/avatar'
+
+function SelectionCardExample({ imageUrl, disabled = false }: { imageUrl: string; disabled?: boolean }) {
+  const [value, setValue] = React.useState('selected')
+  const label = 'Label'
+  return (
+    <RadioGroup value={value} onValueChange={setValue} aria-label={label}>
+    <div className={cn('relative flex w-90 max-w-full items-start gap-3.5 rounded-selection-card bg-background p-4 ring-1 ring-inset ring-border shadow-xs transition-colors hover:bg-muted hover:shadow-none has-[[data-state=checked]]:ring-accent-indigo has-[[data-state=checked]]:shadow-none has-[:focus-visible]:shadow-focus [&_label]:after:absolute [&_label]:after:inset-0 [&_label]:after:rounded-selection-card [&_button]:relative [&_button]:z-10', disabled && 'shadow-none hover:bg-background has-[[data-state=checked]]:ring-border')}>
+      <Avatar label={label} size={40} src={imageUrl} aria-hidden="true" />
+      <RadioField value="selected" flip disabled={disabled}
+        label={label}
+        sublabel="(Sublabel)"
+        description="Insert the checkbox description here."
+        badge={<Badge size={16} appearance={disabled ? 'stroke' : 'light'} tone={disabled ? 'neutral' : 'info'}>New</Badge>}
+        className="mt-0 disabled:opacity-100 disabled:data-[state=checked]:bg-bg-disabled disabled:data-[state=checked]:border-border-disabled disabled:data-[state=checked]:text-background" containerClassName="min-w-0 flex-1 gap-3.5"
+      />
+    </div>
+    </RadioGroup>
+  )
+}`
+    },
+    {
+      id: "source-cards-provider",
+      title: "provider cards / default, active, disabled and live hover",
+      render: () => /* @__PURE__ */ jsx(SelectionSourceCardsDemo, { control: "radio", kind: "provider" }),
+      code: `import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { RadioField } from '@open-mercato/ui/primitives/radio-field'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { RadioGroup } from '@open-mercato/ui/primitives/radio'
+
+function SelectionCardExample({ imageUrl, disabled = false }: { imageUrl: string; disabled?: boolean }) {
+  const [value, setValue] = React.useState('selected')
+  const label = 'Label'
+  return (
+    <RadioGroup value={value} onValueChange={setValue} aria-label={label}>
+    <div className={cn('relative flex w-90 max-w-full items-start gap-3.5 rounded-selection-card bg-background p-4 ring-1 ring-inset ring-border shadow-xs transition-colors hover:bg-muted hover:shadow-none has-[[data-state=checked]]:ring-accent-indigo has-[[data-state=checked]]:shadow-none has-[:focus-visible]:shadow-focus [&_label]:after:absolute [&_label]:after:inset-0 [&_label]:after:rounded-selection-card [&_button]:relative [&_button]:z-10', disabled && 'shadow-none hover:bg-background has-[[data-state=checked]]:ring-border')}>
+      <img src={imageUrl} alt="" className="h-6 w-8 shrink-0 object-contain" />
+      <RadioField value="selected" flip disabled={disabled}
+        label={label}
+        sublabel="(Sublabel)"
+        description="Insert the checkbox description here."
+        badge={<Badge size={16} appearance={disabled ? 'stroke' : 'light'} tone={disabled ? 'neutral' : 'info'}>New</Badge>}
+        className="mt-0 disabled:opacity-100 disabled:data-[state=checked]:bg-bg-disabled disabled:data-[state=checked]:border-border-disabled disabled:data-[state=checked]:text-background" containerClassName="min-w-0 flex-1 gap-3.5"
+      />
+    </div>
+    </RadioGroup>
+  )
+}`
+    },
+    {
+      id: "source-cards-brand",
+      title: "brand cards / default, active, disabled and live hover",
+      render: () => /* @__PURE__ */ jsx(SelectionSourceCardsDemo, { control: "radio", kind: "brand" }),
+      code: `import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { RadioField } from '@open-mercato/ui/primitives/radio-field'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { RadioGroup } from '@open-mercato/ui/primitives/radio'
+
+function SelectionCardExample({ imageUrl, disabled = false }: { imageUrl: string; disabled?: boolean }) {
+  const [value, setValue] = React.useState('selected')
+  const label = 'Label'
+  return (
+    <RadioGroup value={value} onValueChange={setValue} aria-label={label}>
+    <div className={cn('relative flex w-90 max-w-full items-start gap-3.5 rounded-selection-card bg-background p-4 ring-1 ring-inset ring-border shadow-xs transition-colors hover:bg-muted hover:shadow-none has-[[data-state=checked]]:ring-accent-indigo has-[[data-state=checked]]:shadow-none has-[:focus-visible]:shadow-focus [&_label]:after:absolute [&_label]:after:inset-0 [&_label]:after:rounded-selection-card [&_button]:relative [&_button]:z-10', disabled && 'shadow-none hover:bg-background has-[[data-state=checked]]:ring-border')}>
+      <img src={imageUrl} alt="" className="size-10 shrink-0 object-contain" />
+      <RadioField value="selected" flip disabled={disabled}
+        label={label}
+        sublabel="(Sublabel)"
+        description="Insert the checkbox description here."
+        badge={<Badge size={16} appearance={disabled ? 'stroke' : 'light'} tone={disabled ? 'neutral' : 'info'}>New</Badge>}
+        className="mt-0 disabled:opacity-100 disabled:data-[state=checked]:bg-bg-disabled disabled:data-[state=checked]:border-border-disabled disabled:data-[state=checked]:text-background" containerClassName="min-w-0 flex-1 gap-3.5"
+      />
+    </div>
+    </RadioGroup>
+  )
+}`
+    },
+    {
+      id: "source-cards-company",
+      title: "company cards / default, active, disabled and live hover",
+      render: () => /* @__PURE__ */ jsx(SelectionSourceCardsDemo, { control: "radio", kind: "company" }),
+      code: `import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { RadioField } from '@open-mercato/ui/primitives/radio-field'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { RadioGroup } from '@open-mercato/ui/primitives/radio'
+
+function SelectionCardExample({ imageUrl, disabled = false }: { imageUrl: string; disabled?: boolean }) {
+  const [value, setValue] = React.useState('selected')
+  const label = 'Label'
+  return (
+    <RadioGroup value={value} onValueChange={setValue} aria-label={label}>
+    <div className={cn('relative flex w-90 max-w-full items-start gap-3.5 rounded-selection-card bg-background p-4 ring-1 ring-inset ring-border shadow-xs transition-colors hover:bg-muted hover:shadow-none has-[[data-state=checked]]:ring-accent-indigo has-[[data-state=checked]]:shadow-none has-[:focus-visible]:shadow-focus [&_label]:after:absolute [&_label]:after:inset-0 [&_label]:after:rounded-selection-card [&_button]:relative [&_button]:z-10', disabled && 'shadow-none hover:bg-background has-[[data-state=checked]]:ring-border')}>
+      <img src={imageUrl} alt="" className="size-10 shrink-0 object-contain" />
+      <RadioField value="selected" flip disabled={disabled}
+        label={label}
+        sublabel="(Sublabel)"
+        description="Insert the checkbox description here."
+        badge={<Badge size={16} appearance={disabled ? 'stroke' : 'light'} tone={disabled ? 'neutral' : 'info'}>New</Badge>}
+        className="mt-0 disabled:opacity-100 disabled:data-[state=checked]:bg-bg-disabled disabled:data-[state=checked]:border-border-disabled disabled:data-[state=checked]:text-background" containerClassName="min-w-0 flex-1 gap-3.5"
+      />
+    </div>
+    </RadioGroup>
+  )
+}`
     }
   ]
 };
@@ -663,10 +1103,7 @@ const switchEntry = {
     {
       id: "states",
       title: "States",
-      render: () => /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Switch, { "aria-label": "Off" }),
-        /* @__PURE__ */ jsx(Switch, { defaultChecked: true, "aria-label": "On" })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(SwitchInputsStatesSample, {}),
       code: `import { Switch } from '@open-mercato/ui/primitives/switch'
 
 <Switch />
@@ -675,10 +1112,7 @@ const switchEntry = {
     {
       id: "disabled",
       title: "Disabled",
-      render: () => /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Switch, { disabled: true, "aria-label": "Disabled off" }),
-        /* @__PURE__ */ jsx(Switch, { disabled: true, defaultChecked: true, "aria-label": "Disabled on" })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(SwitchInputsDisabledSample, {}),
       code: `import { Switch } from '@open-mercato/ui/primitives/switch'
 
 <Switch disabled />
@@ -690,11 +1124,12 @@ const switchFieldEntry = {
   id: "switch-field",
   title: "SwitchField",
   importPath: "@open-mercato/ui/primitives/switch-field",
+  figmaNodeId: "385:4580",
   variants: [
     {
       id: "default",
       title: "default (switch right)",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(SwitchField, { label: "Two-factor authentication", defaultChecked: true }) }),
+      render: () => /* @__PURE__ */ jsx(SwitchFieldInputsDefaultSample, {}),
       code: `import { SwitchField } from '@open-mercato/ui/primitives/switch-field'
 
 <SwitchField label="Two-factor authentication" defaultChecked />`
@@ -702,13 +1137,7 @@ const switchFieldEntry = {
     {
       id: "with-description",
       title: "With description",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-80", children: /* @__PURE__ */ jsx(
-        SwitchField,
-        {
-          label: "Low-stock alerts",
-          description: "Notify purchasing when stock drops below the reorder point."
-        }
-      ) }),
+      render: () => /* @__PURE__ */ jsx(SwitchFieldInputsWithDescriptionSample, {}),
       code: `import { SwitchField } from '@open-mercato/ui/primitives/switch-field'
 
 <SwitchField
@@ -719,22 +1148,428 @@ const switchFieldEntry = {
     {
       id: "flip",
       title: "Flipped (switch left)",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(SwitchField, { flip: true, label: "Sync inventory nightly", defaultChecked: true }) }),
+      render: () => /* @__PURE__ */ jsx(SwitchFieldInputsFlipSample, {}),
       code: `import { SwitchField } from '@open-mercato/ui/primitives/switch-field'
 
 <SwitchField flip label="Sync inventory nightly" defaultChecked />`
+    },
+    {
+      id: "cards",
+      title: "Card / default, selected and hover",
+      render: () => /* @__PURE__ */ jsx(SelectionCardsPreview, { control: "switch" }),
+      code: `import { SwitchField } from '@open-mercato/ui/primitives/switch-field'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+
+const cardClassName = 'relative w-full max-w-90 gap-3.5 rounded-xl border border-border bg-background p-4 shadow-xs transition-colors hover:border-transparent hover:bg-muted hover:shadow-none has-[[data-state=checked]]:border-accent-indigo has-[[data-state=checked]]:shadow-none has-[:focus-visible]:shadow-focus has-[:disabled]:border-border has-[:disabled]:bg-background has-[:disabled]:shadow-none [&_label]:after:absolute [&_label]:after:inset-0 [&_label]:after:rounded-xl [&_button]:relative [&_button]:z-10'
+
+<div className="grid w-full gap-4 sm:grid-cols-2">
+  <SwitchField defaultChecked
+    label="Immediate updates"
+    sublabel="(Optional)"
+    description="Receive an update when an order changes."
+    badge={<Badge variant="info" size="sm">New</Badge>}
+    className="mt-0"
+    containerClassName={cardClassName}
+  />
+  <SwitchField
+    label="Weekly summary"
+    sublabel="(Optional)"
+    description="Receive one summary every Monday."
+    badge={<Badge variant="info" size="sm">New</Badge>}
+    className="mt-0"
+    containerClassName={cardClassName}
+  />
+</div>`
+    },
+    {
+      id: "cards-disabled",
+      title: "Card / disabled",
+      render: () => /* @__PURE__ */ jsx(SelectionCardsPreview, { control: "switch", disabled: true }),
+      code: `import { SwitchField } from '@open-mercato/ui/primitives/switch-field'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+
+const cardClassName = 'relative w-full max-w-90 gap-3.5 rounded-xl border border-border bg-background p-4 shadow-xs transition-colors hover:border-transparent hover:bg-muted hover:shadow-none has-[[data-state=checked]]:border-accent-indigo has-[[data-state=checked]]:shadow-none has-[:focus-visible]:shadow-focus has-[:disabled]:border-border has-[:disabled]:bg-background has-[:disabled]:shadow-none [&_label]:after:absolute [&_label]:after:inset-0 [&_label]:after:rounded-xl [&_button]:relative [&_button]:z-10'
+
+<div className="grid w-full gap-4 sm:grid-cols-2">
+  <SwitchField defaultChecked disabled
+    label="Immediate updates"
+    sublabel="(Optional)"
+    description="Receive an update when an order changes."
+    badge={<Badge variant="outline" size="sm" className="text-text-disabled">New</Badge>}
+    className="mt-0"
+    containerClassName={cardClassName}
+  />
+  <SwitchField disabled
+    label="Weekly summary"
+    sublabel="(Optional)"
+    description="Receive one summary every Monday."
+    badge={<Badge variant="outline" size="sm" className="text-text-disabled">New</Badge>}
+    className="mt-0"
+    containerClassName={cardClassName}
+  />
+</div>`
+    },
+    {
+      id: "source-cards-icon",
+      title: "icon cards / default, active, disabled and live hover",
+      render: () => /* @__PURE__ */ jsx(SelectionSourceCardsDemo, { control: "switch", kind: "icon" }),
+      code: `import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { SwitchField } from '@open-mercato/ui/primitives/switch-field'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+
+function SelectionCardExample({ imageUrl, disabled = false }: { imageUrl: string; disabled?: boolean }) {
+  const [checked, setChecked] = React.useState(false)
+  const label = 'Label'
+  return (
+
+    <div className={cn('relative flex w-90 max-w-full items-start gap-3.5 rounded-selection-card bg-background p-4 ring-1 ring-inset ring-border shadow-xs transition-colors hover:bg-muted hover:shadow-none has-[[data-state=checked]]:ring-accent-indigo has-[[data-state=checked]]:shadow-none has-[:focus-visible]:shadow-focus [&_label]:after:absolute [&_label]:after:inset-0 [&_label]:after:rounded-selection-card [&_button]:relative [&_button]:z-10', disabled && 'shadow-none hover:bg-background has-[[data-state=checked]]:ring-border')}>
+      <img src={imageUrl} alt="" className="size-10 shrink-0 object-contain" />
+      <SwitchField checked={checked} onCheckedChange={setChecked} disabled={disabled}
+        label={label}
+        sublabel="(Sublabel)"
+        description="Insert the checkbox description here."
+        badge={<Badge size={16} appearance={disabled ? 'stroke' : 'light'} tone={disabled ? 'neutral' : 'info'}>New</Badge>}
+        className="mt-0" containerClassName="min-w-0 flex-1 gap-3.5"
+      />
+    </div>
+
+  )
+}`
+    },
+    {
+      id: "source-cards-avatar",
+      title: "avatar cards / default, active, disabled and live hover",
+      render: () => /* @__PURE__ */ jsx(SelectionSourceCardsDemo, { control: "switch", kind: "avatar" }),
+      code: `import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { SwitchField } from '@open-mercato/ui/primitives/switch-field'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { Avatar } from '@open-mercato/ui/primitives/avatar'
+
+function SelectionCardExample({ imageUrl, disabled = false }: { imageUrl: string; disabled?: boolean }) {
+  const [checked, setChecked] = React.useState(false)
+  const label = 'Label'
+  return (
+
+    <div className={cn('relative flex w-90 max-w-full items-start gap-3.5 rounded-selection-card bg-background p-4 ring-1 ring-inset ring-border shadow-xs transition-colors hover:bg-muted hover:shadow-none has-[[data-state=checked]]:ring-accent-indigo has-[[data-state=checked]]:shadow-none has-[:focus-visible]:shadow-focus [&_label]:after:absolute [&_label]:after:inset-0 [&_label]:after:rounded-selection-card [&_button]:relative [&_button]:z-10', disabled && 'shadow-none hover:bg-background has-[[data-state=checked]]:ring-border')}>
+      <Avatar label={label} size={40} src={imageUrl} aria-hidden="true" />
+      <SwitchField checked={checked} onCheckedChange={setChecked} disabled={disabled}
+        label={label}
+        sublabel="(Sublabel)"
+        description="Insert the checkbox description here."
+        badge={<Badge size={16} appearance={disabled ? 'stroke' : 'light'} tone={disabled ? 'neutral' : 'info'}>New</Badge>}
+        className="mt-0" containerClassName="min-w-0 flex-1 gap-3.5"
+      />
+    </div>
+
+  )
+}`
+    },
+    {
+      id: "source-cards-provider",
+      title: "provider cards / default, active, disabled and live hover",
+      render: () => /* @__PURE__ */ jsx(SelectionSourceCardsDemo, { control: "switch", kind: "provider" }),
+      code: `import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { SwitchField } from '@open-mercato/ui/primitives/switch-field'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+
+function SelectionCardExample({ imageUrl, disabled = false }: { imageUrl: string; disabled?: boolean }) {
+  const [checked, setChecked] = React.useState(false)
+  const label = 'Label'
+  return (
+
+    <div className={cn('relative flex w-90 max-w-full items-start gap-3.5 rounded-selection-card bg-background p-4 ring-1 ring-inset ring-border shadow-xs transition-colors hover:bg-muted hover:shadow-none has-[[data-state=checked]]:ring-accent-indigo has-[[data-state=checked]]:shadow-none has-[:focus-visible]:shadow-focus [&_label]:after:absolute [&_label]:after:inset-0 [&_label]:after:rounded-selection-card [&_button]:relative [&_button]:z-10', disabled && 'shadow-none hover:bg-background has-[[data-state=checked]]:ring-border')}>
+      <img src={imageUrl} alt="" className="h-6 w-8 shrink-0 object-contain" />
+      <SwitchField checked={checked} onCheckedChange={setChecked} disabled={disabled}
+        label={label}
+        sublabel="(Sublabel)"
+        description="Insert the checkbox description here."
+        badge={<Badge size={16} appearance={disabled ? 'stroke' : 'light'} tone={disabled ? 'neutral' : 'info'}>New</Badge>}
+        className="mt-0" containerClassName="min-w-0 flex-1 gap-3.5"
+      />
+    </div>
+
+  )
+}`
+    },
+    {
+      id: "source-cards-brand",
+      title: "brand cards / default, active, disabled and live hover",
+      render: () => /* @__PURE__ */ jsx(SelectionSourceCardsDemo, { control: "switch", kind: "brand" }),
+      code: `import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { SwitchField } from '@open-mercato/ui/primitives/switch-field'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+
+function SelectionCardExample({ imageUrl, disabled = false }: { imageUrl: string; disabled?: boolean }) {
+  const [checked, setChecked] = React.useState(false)
+  const label = 'Label'
+  return (
+
+    <div className={cn('relative flex w-90 max-w-full items-start gap-3.5 rounded-selection-card bg-background p-4 ring-1 ring-inset ring-border shadow-xs transition-colors hover:bg-muted hover:shadow-none has-[[data-state=checked]]:ring-accent-indigo has-[[data-state=checked]]:shadow-none has-[:focus-visible]:shadow-focus [&_label]:after:absolute [&_label]:after:inset-0 [&_label]:after:rounded-selection-card [&_button]:relative [&_button]:z-10', disabled && 'shadow-none hover:bg-background has-[[data-state=checked]]:ring-border')}>
+      <img src={imageUrl} alt="" className="size-10 shrink-0 object-contain" />
+      <SwitchField checked={checked} onCheckedChange={setChecked} disabled={disabled}
+        label={label}
+        sublabel="(Sublabel)"
+        description="Insert the checkbox description here."
+        badge={<Badge size={16} appearance={disabled ? 'stroke' : 'light'} tone={disabled ? 'neutral' : 'info'}>New</Badge>}
+        className="mt-0" containerClassName="min-w-0 flex-1 gap-3.5"
+      />
+    </div>
+
+  )
+}`
+    },
+    {
+      id: "source-cards-company",
+      title: "company cards / default, active, disabled and live hover",
+      render: () => /* @__PURE__ */ jsx(SelectionSourceCardsDemo, { control: "switch", kind: "company" }),
+      code: `import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { SwitchField } from '@open-mercato/ui/primitives/switch-field'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+
+function SelectionCardExample({ imageUrl, disabled = false }: { imageUrl: string; disabled?: boolean }) {
+  const [checked, setChecked] = React.useState(false)
+  const label = 'Label'
+  return (
+
+    <div className={cn('relative flex w-90 max-w-full items-start gap-3.5 rounded-selection-card bg-background p-4 ring-1 ring-inset ring-border shadow-xs transition-colors hover:bg-muted hover:shadow-none has-[[data-state=checked]]:ring-accent-indigo has-[[data-state=checked]]:shadow-none has-[:focus-visible]:shadow-focus [&_label]:after:absolute [&_label]:after:inset-0 [&_label]:after:rounded-selection-card [&_button]:relative [&_button]:z-10', disabled && 'shadow-none hover:bg-background has-[[data-state=checked]]:ring-border')}>
+      <img src={imageUrl} alt="" className="size-10 shrink-0 object-contain" />
+      <SwitchField checked={checked} onCheckedChange={setChecked} disabled={disabled}
+        label={label}
+        sublabel="(Sublabel)"
+        description="Insert the checkbox description here."
+        badge={<Badge size={16} appearance={disabled ? 'stroke' : 'light'} tone={disabled ? 'neutral' : 'info'}>New</Badge>}
+        className="mt-0" containerClassName="min-w-0 flex-1 gap-3.5"
+      />
+    </div>
+
+  )
+}`
+    },
+    {
+      id: "integration-horizontal-card",
+      title: "Integration / horizontal / card",
+      render: () => /* @__PURE__ */ jsx(IntegrationSwitchDemo, { alignment: "horizontal", appearance: "card" }),
+      code: `import * as React from 'react'
+import { Settings } from 'lucide-react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { SwitchField } from '@open-mercato/ui/primitives/switch-field'
+import { Switch } from '@open-mercato/ui/primitives/switch'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@open-mercato/ui/primitives/dialog'
+
+function IntegrationExample({ brandUrl, alignment, appearance }: { brandUrl: string; alignment: 'horizontal' | 'vertical'; appearance: 'card' | 'list' }) {
+  const t = useT()
+  const id = React.useId()
+  const [checked, setChecked] = React.useState(false)
+  const [open, setOpen] = React.useState(false)
+  const horizontal = alignment === 'horizontal'
+  const card = appearance === 'card'
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <div data-slot="integration-switch" data-alignment={alignment} data-appearance={appearance} className={cn('relative flex max-w-full gap-3.5', horizontal ? 'w-154 flex-wrap items-center sm:flex-nowrap' : 'w-95 flex-col items-start', card && 'rounded-selection-card bg-background p-4 ring-1 ring-inset ring-border shadow-xs')}>
+        <img src={brandUrl} alt="" className={cn('shrink-0', card ? 'size-10' : 'size-12')} />
+        <div className={cn('flex min-w-0 flex-col gap-1', horizontal && 'min-w-40 flex-1')}>
+          <div className="flex flex-wrap items-center gap-1.5">
+            <span id={id} className={cn('font-medium text-foreground', card ? 'text-sm leading-5' : 'text-base leading-6')}>Microsoft Office 365</span>
+            <Badge size={16} appearance="light" tone="info">New</Badge>
+          </div>
+          <p className={cn('text-muted-foreground', card ? 'text-xs leading-4' : 'text-sm leading-5')}>Seamless collaboration and document management.</p>
+        </div>
+        <Button asChild variant="outline" size="default" className={horizontal ? undefined : 'w-full'}><DialogTrigger><Settings aria-hidden="true" />Manage</DialogTrigger></Button>
+        <Switch aria-labelledby={id} checked={checked} onCheckedChange={setChecked} className={horizontal ? undefined : card ? 'absolute top-5 right-5' : 'absolute top-3 right-3'} />
+      </div>
+        <DialogContent onKeyDownCapture={event => { if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) { event.preventDefault(); setOpen(false) } }}>
+          <DialogHeader><DialogTitle>Microsoft Office 365 settings</DialogTitle><DialogDescription>Seamless collaboration and document management.</DialogDescription></DialogHeader>
+          <SwitchField label="Enable integration" checked={checked} onCheckedChange={setChecked} />
+          <DialogFooter><Button variant="outline" onClick={() => setOpen(false)}>{t('common.close')}</Button></DialogFooter>
+        </DialogContent>
+    </Dialog>
+  )
+}
+
+<IntegrationExample brandUrl={brandUrl} alignment="horizontal" appearance="card" />`
+    },
+    {
+      id: "integration-horizontal-list",
+      title: "Integration / horizontal / list",
+      render: () => /* @__PURE__ */ jsx(IntegrationSwitchDemo, { alignment: "horizontal", appearance: "list" }),
+      code: `import * as React from 'react'
+import { Settings } from 'lucide-react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { SwitchField } from '@open-mercato/ui/primitives/switch-field'
+import { Switch } from '@open-mercato/ui/primitives/switch'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@open-mercato/ui/primitives/dialog'
+
+function IntegrationExample({ brandUrl, alignment, appearance }: { brandUrl: string; alignment: 'horizontal' | 'vertical'; appearance: 'card' | 'list' }) {
+  const t = useT()
+  const id = React.useId()
+  const [checked, setChecked] = React.useState(false)
+  const [open, setOpen] = React.useState(false)
+  const horizontal = alignment === 'horizontal'
+  const card = appearance === 'card'
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <div data-slot="integration-switch" data-alignment={alignment} data-appearance={appearance} className={cn('relative flex max-w-full gap-3.5', horizontal ? 'w-154 flex-wrap items-center sm:flex-nowrap' : 'w-95 flex-col items-start', card && 'rounded-selection-card bg-background p-4 ring-1 ring-inset ring-border shadow-xs')}>
+        <img src={brandUrl} alt="" className={cn('shrink-0', card ? 'size-10' : 'size-12')} />
+        <div className={cn('flex min-w-0 flex-col gap-1', horizontal && 'min-w-40 flex-1')}>
+          <div className="flex flex-wrap items-center gap-1.5">
+            <span id={id} className={cn('font-medium text-foreground', card ? 'text-sm leading-5' : 'text-base leading-6')}>Microsoft Office 365</span>
+            <Badge size={16} appearance="light" tone="info">New</Badge>
+          </div>
+          <p className={cn('text-muted-foreground', card ? 'text-xs leading-4' : 'text-sm leading-5')}>Seamless collaboration and document management.</p>
+        </div>
+        <Button asChild variant="outline" size="default" className={horizontal ? undefined : 'w-full'}><DialogTrigger><Settings aria-hidden="true" />Manage</DialogTrigger></Button>
+        <Switch aria-labelledby={id} checked={checked} onCheckedChange={setChecked} className={horizontal ? undefined : card ? 'absolute top-5 right-5' : 'absolute top-3 right-3'} />
+      </div>
+        <DialogContent onKeyDownCapture={event => { if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) { event.preventDefault(); setOpen(false) } }}>
+          <DialogHeader><DialogTitle>Microsoft Office 365 settings</DialogTitle><DialogDescription>Seamless collaboration and document management.</DialogDescription></DialogHeader>
+          <SwitchField label="Enable integration" checked={checked} onCheckedChange={setChecked} />
+          <DialogFooter><Button variant="outline" onClick={() => setOpen(false)}>{t('common.close')}</Button></DialogFooter>
+        </DialogContent>
+    </Dialog>
+  )
+}
+
+<IntegrationExample brandUrl={brandUrl} alignment="horizontal" appearance="list" />`
+    },
+    {
+      id: "integration-vertical-card",
+      title: "Integration / vertical / card",
+      render: () => /* @__PURE__ */ jsx(IntegrationSwitchDemo, { alignment: "vertical", appearance: "card" }),
+      code: `import * as React from 'react'
+import { Settings } from 'lucide-react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { SwitchField } from '@open-mercato/ui/primitives/switch-field'
+import { Switch } from '@open-mercato/ui/primitives/switch'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@open-mercato/ui/primitives/dialog'
+
+function IntegrationExample({ brandUrl, alignment, appearance }: { brandUrl: string; alignment: 'horizontal' | 'vertical'; appearance: 'card' | 'list' }) {
+  const t = useT()
+  const id = React.useId()
+  const [checked, setChecked] = React.useState(false)
+  const [open, setOpen] = React.useState(false)
+  const horizontal = alignment === 'horizontal'
+  const card = appearance === 'card'
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <div data-slot="integration-switch" data-alignment={alignment} data-appearance={appearance} className={cn('relative flex max-w-full gap-3.5', horizontal ? 'w-154 flex-wrap items-center sm:flex-nowrap' : 'w-95 flex-col items-start', card && 'rounded-selection-card bg-background p-4 ring-1 ring-inset ring-border shadow-xs')}>
+        <img src={brandUrl} alt="" className={cn('shrink-0', card ? 'size-10' : 'size-12')} />
+        <div className={cn('flex min-w-0 flex-col gap-1', horizontal && 'min-w-40 flex-1')}>
+          <div className="flex flex-wrap items-center gap-1.5">
+            <span id={id} className={cn('font-medium text-foreground', card ? 'text-sm leading-5' : 'text-base leading-6')}>Microsoft Office 365</span>
+            <Badge size={16} appearance="light" tone="info">New</Badge>
+          </div>
+          <p className={cn('text-muted-foreground', card ? 'text-xs leading-4' : 'text-sm leading-5')}>Seamless collaboration and document management.</p>
+        </div>
+        <Button asChild variant="outline" size="default" className={horizontal ? undefined : 'w-full'}><DialogTrigger><Settings aria-hidden="true" />Manage</DialogTrigger></Button>
+        <Switch aria-labelledby={id} checked={checked} onCheckedChange={setChecked} className={horizontal ? undefined : card ? 'absolute top-5 right-5' : 'absolute top-3 right-3'} />
+      </div>
+        <DialogContent onKeyDownCapture={event => { if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) { event.preventDefault(); setOpen(false) } }}>
+          <DialogHeader><DialogTitle>Microsoft Office 365 settings</DialogTitle><DialogDescription>Seamless collaboration and document management.</DialogDescription></DialogHeader>
+          <SwitchField label="Enable integration" checked={checked} onCheckedChange={setChecked} />
+          <DialogFooter><Button variant="outline" onClick={() => setOpen(false)}>{t('common.close')}</Button></DialogFooter>
+        </DialogContent>
+    </Dialog>
+  )
+}
+
+<IntegrationExample brandUrl={brandUrl} alignment="vertical" appearance="card" />`
+    },
+    {
+      id: "integration-vertical-list",
+      title: "Integration / vertical / list",
+      render: () => /* @__PURE__ */ jsx(IntegrationSwitchDemo, { alignment: "vertical", appearance: "list" }),
+      code: `import * as React from 'react'
+import { Settings } from 'lucide-react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { SwitchField } from '@open-mercato/ui/primitives/switch-field'
+import { Switch } from '@open-mercato/ui/primitives/switch'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@open-mercato/ui/primitives/dialog'
+
+function IntegrationExample({ brandUrl, alignment, appearance }: { brandUrl: string; alignment: 'horizontal' | 'vertical'; appearance: 'card' | 'list' }) {
+  const t = useT()
+  const id = React.useId()
+  const [checked, setChecked] = React.useState(false)
+  const [open, setOpen] = React.useState(false)
+  const horizontal = alignment === 'horizontal'
+  const card = appearance === 'card'
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <div data-slot="integration-switch" data-alignment={alignment} data-appearance={appearance} className={cn('relative flex max-w-full gap-3.5', horizontal ? 'w-154 flex-wrap items-center sm:flex-nowrap' : 'w-95 flex-col items-start', card && 'rounded-selection-card bg-background p-4 ring-1 ring-inset ring-border shadow-xs')}>
+        <img src={brandUrl} alt="" className={cn('shrink-0', card ? 'size-10' : 'size-12')} />
+        <div className={cn('flex min-w-0 flex-col gap-1', horizontal && 'min-w-40 flex-1')}>
+          <div className="flex flex-wrap items-center gap-1.5">
+            <span id={id} className={cn('font-medium text-foreground', card ? 'text-sm leading-5' : 'text-base leading-6')}>Microsoft Office 365</span>
+            <Badge size={16} appearance="light" tone="info">New</Badge>
+          </div>
+          <p className={cn('text-muted-foreground', card ? 'text-xs leading-4' : 'text-sm leading-5')}>Seamless collaboration and document management.</p>
+        </div>
+        <Button asChild variant="outline" size="default" className={horizontal ? undefined : 'w-full'}><DialogTrigger><Settings aria-hidden="true" />Manage</DialogTrigger></Button>
+        <Switch aria-labelledby={id} checked={checked} onCheckedChange={setChecked} className={horizontal ? undefined : card ? 'absolute top-5 right-5' : 'absolute top-3 right-3'} />
+      </div>
+        <DialogContent onKeyDownCapture={event => { if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) { event.preventDefault(); setOpen(false) } }}>
+          <DialogHeader><DialogTitle>Microsoft Office 365 settings</DialogTitle><DialogDescription>Seamless collaboration and document management.</DialogDescription></DialogHeader>
+          <SwitchField label="Enable integration" checked={checked} onCheckedChange={setChecked} />
+          <DialogFooter><Button variant="outline" onClick={() => setOpen(false)}>{t('common.close')}</Button></DialogFooter>
+        </DialogContent>
+    </Dialog>
+  )
+}
+
+<IntegrationExample brandUrl={brandUrl} alignment="vertical" appearance="list" />`
     }
   ]
 };
+function SliderValueDemo({ initialValues }) {
+  const t = useT();
+  const id = React.useId();
+  const [values, setValues] = React.useState(initialValues);
+  const range = values.length === 2;
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-72 max-w-full flex-col gap-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 text-xs", children: [
+      /* @__PURE__ */ jsx("span", { id, children: t(range ? "design_system.gallery.examples.controls.range" : "design_system.gallery.examples.controls.value") }),
+      /* @__PURE__ */ jsx("output", { className: "text-muted-foreground", children: values.join(" \u2013 ") })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Slider,
+      {
+        value: values,
+        onValueChange: setValues,
+        min: 0,
+        max: 100,
+        className: "h-4",
+        "aria-labelledby": id,
+        thumbLabels: range ? [t("design_system.gallery.examples.controls.lower"), t("design_system.gallery.examples.controls.upper")] : void 0
+      }
+    )
+  ] });
+}
 const sliderEntry = {
   id: "slider",
+  figmaNodeId: "2617:1169",
   title: "Slider",
   importPath: "@open-mercato/ui/primitives/slider",
   variants: [
     {
       id: "single",
       title: "Single value",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(Slider, { defaultValue: [40], min: 0, max: 100, step: 5, "aria-label": "Discount" }) }),
+      render: () => /* @__PURE__ */ jsx(SliderInputsSingleSample, {}),
       code: `import { Slider } from '@open-mercato/ui/primitives/slider'
 
 <Slider defaultValue={[40]} min={0} max={100} step={5} aria-label="Discount" />`
@@ -742,7 +1577,7 @@ const sliderEntry = {
     {
       id: "range",
       title: "Range (two thumbs)",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(Slider, { defaultValue: [20, 60], min: 0, max: 100, "aria-label": "Price range" }) }),
+      render: () => /* @__PURE__ */ jsx(SliderInputsRangeSample, {}),
       code: `import { Slider } from '@open-mercato/ui/primitives/slider'
 
 <Slider defaultValue={[20, 60]} min={0} max={100} aria-label="Price range" />`
@@ -750,10 +1585,56 @@ const sliderEntry = {
     {
       id: "disabled",
       title: "Disabled",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(Slider, { defaultValue: [45], disabled: true, "aria-label": "Disabled slider" }) }),
+      render: () => /* @__PURE__ */ jsx(SliderInputsDisabledSample, {}),
       code: `import { Slider } from '@open-mercato/ui/primitives/slider'
 
 <Slider defaultValue={[45]} disabled />`
+    },
+    {
+      id: "source-values",
+      title: "Source values \xB7 0 / 25 / 50 / 75 / 100",
+      render: () => /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap gap-6", children: [0, 25, 50, 75, 100].map((value) => /* @__PURE__ */ jsx(SliderValueDemo, { initialValues: [value] }, value)) }),
+      code: `import * as React from 'react'
+import { Slider } from '@open-mercato/ui/primitives/slider'
+
+function SliderValueDemo({ initialValues }: { initialValues: number[] }) {
+  const id = React.useId()
+  const [values, setValues] = React.useState(initialValues)
+  const range = values.length === 2
+  return <div className="flex w-72 max-w-full flex-col gap-1">
+    <div className="flex items-center justify-between gap-2 text-xs">
+      <span id={id}>{range ? 'Range' : 'Value'}</span>
+      <output className="text-muted-foreground">{values.join(' \u2013 ')}</output>
+    </div>
+    <Slider value={values} onValueChange={setValues} min={0} max={100} className="h-4" aria-labelledby={id}
+      thumbLabels={range ? ['Lower value', 'Upper value'] : undefined} />
+  </div>
+}
+
+<div className="flex w-full flex-wrap gap-6">{[0, 25, 50, 75, 100].map(value => <SliderValueDemo key={value} initialValues={[value]} />)}</div>`
+    },
+    {
+      id: "source-ranges",
+      title: "Source ranges \xB7 11 pairs",
+      render: () => /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap gap-6", children: [[0, 0], [0, 25], [25, 50], [50, 75], [75, 100], [0, 50], [25, 75], [50, 100], [0, 75], [25, 100], [0, 100]].map((values) => /* @__PURE__ */ jsx(SliderValueDemo, { initialValues: values }, values.join("-"))) }),
+      code: `import * as React from 'react'
+import { Slider } from '@open-mercato/ui/primitives/slider'
+
+function SliderValueDemo({ initialValues }: { initialValues: number[] }) {
+  const id = React.useId()
+  const [values, setValues] = React.useState(initialValues)
+  const range = values.length === 2
+  return <div className="flex w-72 max-w-full flex-col gap-1">
+    <div className="flex items-center justify-between gap-2 text-xs">
+      <span id={id}>{range ? 'Range' : 'Value'}</span>
+      <output className="text-muted-foreground">{values.join(' \u2013 ')}</output>
+    </div>
+    <Slider value={values} onValueChange={setValues} min={0} max={100} className="h-4" aria-labelledby={id}
+      thumbLabels={range ? ['Lower value', 'Upper value'] : undefined} />
+  </div>
+}
+
+<div className="flex w-full flex-wrap gap-6">{[[0, 0], [0, 25], [25, 50], [50, 75], [75, 100], [0, 50], [25, 75], [50, 100], [0, 75], [25, 100], [0, 100]].map(values => <SliderValueDemo key={values.join("-")} initialValues={values} />)}</div>`
     }
   ]
 };
@@ -765,7 +1646,7 @@ const formFieldEntry = {
     {
       id: "default",
       title: "Label + description",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(FormField, { label: "Warehouse code", description: "Short identifier used on labels.", children: /* @__PURE__ */ jsx(Input, { placeholder: "WAW-01" }) }) }),
+      render: () => /* @__PURE__ */ jsx(FormFieldInputsDefaultSample, {}),
       code: `import { FormField } from '@open-mercato/ui/primitives/form-field'
 import { Input } from '@open-mercato/ui/primitives/input'
 
@@ -776,7 +1657,7 @@ import { Input } from '@open-mercato/ui/primitives/input'
     {
       id: "required",
       title: "Required",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(FormField, { label: "Company name", required: true, children: /* @__PURE__ */ jsx(Input, { placeholder: "Acme sp. z o.o." }) }) }),
+      render: () => /* @__PURE__ */ jsx(FormFieldInputsRequiredSample, {}),
       code: `import { FormField } from '@open-mercato/ui/primitives/form-field'
 import { Input } from '@open-mercato/ui/primitives/input'
 
@@ -787,7 +1668,7 @@ import { Input } from '@open-mercato/ui/primitives/input'
     {
       id: "error",
       title: "Error",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(FormField, { label: "VAT ID", error: "VAT ID must have 10 digits.", children: /* @__PURE__ */ jsx(Input, { defaultValue: "52601" }) }) }),
+      render: () => /* @__PURE__ */ jsx(FormFieldInputsErrorSample, {}),
       code: `import { FormField } from '@open-mercato/ui/primitives/form-field'
 import { Input } from '@open-mercato/ui/primitives/input'
 
@@ -798,7 +1679,7 @@ import { Input } from '@open-mercato/ui/primitives/input'
     {
       id: "horizontal",
       title: "Horizontal",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(FormField, { label: "Enable webhooks", orientation: "horizontal", children: /* @__PURE__ */ jsx(Switch, { defaultChecked: true }) }) }),
+      render: () => /* @__PURE__ */ jsx(FormFieldInputsHorizontalSample, {}),
       code: `import { FormField } from '@open-mercato/ui/primitives/form-field'
 import { Switch } from '@open-mercato/ui/primitives/switch'
 
@@ -830,6 +1711,19 @@ const [query, setQuery] = React.useState('')
       code: `import { SearchInput } from '@open-mercato/ui/primitives/search-input'
 
 <SearchInput size="sm" value={query} onChange={setQuery} />`
+    },
+    {
+      id: "disabled",
+      title: "Disabled (clear action hidden)",
+      render: () => /* @__PURE__ */ jsx(DisabledSearchInputPreview, {}),
+      code: `import { SearchInput } from '@open-mercato/ui/primitives/search-input'
+import { FormField } from '@open-mercato/ui/primitives/form-field'
+
+const [query, setQuery] = React.useState('OM-2026-0042')
+
+<FormField label="Search orders" disabled>
+  <SearchInput value={query} onChange={setQuery} />
+</FormField>`
     }
   ]
 };
@@ -864,6 +1758,105 @@ const emailInputEntry = {
     }
   ]
 };
+function PasswordStrengthDemo({ initialValue = "", interactive = false }) {
+  const t = useT();
+  const [password, setPassword] = React.useState(initialValue);
+  const requirements = [
+    { id: "uppercase", label: t("design_system.gallery.samples.passwordStrength.uppercase"), met: /[A-Z]/.test(password) },
+    { id: "number", label: t("design_system.gallery.samples.passwordStrength.number"), met: /[0-9]/.test(password) },
+    { id: "length", label: t("design_system.gallery.samples.passwordStrength.length"), met: password.length >= 8 }
+  ];
+  const met = requirements.filter((requirement) => requirement.met).length;
+  const strength = password.length === 0 ? "empty" : met === 3 ? "strong" : met === 2 ? "moderate" : "weak";
+  return /* @__PURE__ */ jsxs("div", { className: "w-75 max-w-full", children: [
+    interactive ? /* @__PURE__ */ jsx(PasswordInput, { value: password, onChange: (event) => setPassword(event.target.value), "aria-label": t("design_system.gallery.samples.passwordStrength.password") }) : null,
+    /* @__PURE__ */ jsx(PasswordStrength, { strength, requirements })
+  ] });
+}
+const passwordStrengthEntry = {
+  id: "password-strength",
+  title: "PasswordStrength",
+  importPath: "@open-mercato/ui/primitives/password-strength",
+  figmaNodeId: "327:8202",
+  usage: {
+    do: ["Supply the evaluated strength and requirements from the policy that owns the form.", "The interactive example demonstrates the three rules shown in Figma; the visual primitive does not define authentication policy."]
+  },
+  variants: [
+    {
+      id: "empty",
+      title: "empty",
+      render: () => /* @__PURE__ */ jsx(PasswordStrengthDemo, { initialValue: "" }),
+      code: `import { PasswordStrength } from '@open-mercato/ui/primitives/password-strength'
+
+
+<PasswordStrength strength="empty" requirements={[
+  { id: 'uppercase', label: 'At least 1 uppercase', met: false },
+  { id: 'number', label: 'At least 1 number', met: false },
+  { id: 'length', label: 'At least 8 characters', met: false },
+]} />`
+    },
+    {
+      id: "weak",
+      title: "weak",
+      render: () => /* @__PURE__ */ jsx(PasswordStrengthDemo, { initialValue: "A" }),
+      code: `import { PasswordStrength } from '@open-mercato/ui/primitives/password-strength'
+
+
+<PasswordStrength strength="weak" requirements={[
+  { id: 'uppercase', label: 'At least 1 uppercase', met: true },
+  { id: 'number', label: 'At least 1 number', met: false },
+  { id: 'length', label: 'At least 8 characters', met: false },
+]} />`
+    },
+    {
+      id: "moderate",
+      title: "moderate",
+      render: () => /* @__PURE__ */ jsx(PasswordStrengthDemo, { initialValue: "A1" }),
+      code: `import { PasswordStrength } from '@open-mercato/ui/primitives/password-strength'
+
+
+<PasswordStrength strength="moderate" requirements={[
+  { id: 'uppercase', label: 'At least 1 uppercase', met: true },
+  { id: 'number', label: 'At least 1 number', met: true },
+  { id: 'length', label: 'At least 8 characters', met: false },
+]} />`
+    },
+    {
+      id: "strong",
+      title: "strong",
+      render: () => /* @__PURE__ */ jsx(PasswordStrengthDemo, { initialValue: "A1234567" }),
+      code: `import { PasswordStrength } from '@open-mercato/ui/primitives/password-strength'
+
+
+<PasswordStrength strength="strong" requirements={[
+  { id: 'uppercase', label: 'At least 1 uppercase', met: true },
+  { id: 'number', label: 'At least 1 number', met: true },
+  { id: 'length', label: 'At least 8 characters', met: true },
+]} />`
+    },
+    {
+      id: "interactive",
+      title: "interactive",
+      render: () => /* @__PURE__ */ jsx(PasswordStrengthDemo, { interactive: true }),
+      code: `import { PasswordStrength } from '@open-mercato/ui/primitives/password-strength'
+import { PasswordInput } from '@open-mercato/ui/primitives/password-input'
+
+const [password, setPassword] = React.useState('')
+const requirements = [
+  { id: 'uppercase', label: 'At least 1 uppercase', met: /[A-Z]/.test(password) },
+  { id: 'number', label: 'At least 1 number', met: /[0-9]/.test(password) },
+  { id: 'length', label: 'At least 8 characters', met: password.length >= 8 },
+]
+const met = requirements.filter(requirement => requirement.met).length
+const strength = password.length === 0 ? 'empty' : met === 3 ? 'strong' : met === 2 ? 'moderate' : 'weak'
+
+<div className="w-75 max-w-full">
+  <PasswordInput value={password} onChange={event => setPassword(event.target.value)} aria-label="Password" />
+  <PasswordStrength strength={strength} requirements={requirements} />
+</div>`
+    }
+  ]
+};
 const passwordInputEntry = {
   id: "password-input",
   title: "PasswordInput",
@@ -892,6 +1885,17 @@ const passwordInputEntry = {
       code: `import { PasswordInput } from '@open-mercato/ui/primitives/password-input'
 
 <PasswordInput disabled />`
+    },
+    {
+      id: "invalid",
+      title: "Invalid (described error)",
+      render: () => /* @__PURE__ */ jsx(InvalidPasswordInputPreview, {}),
+      code: `import { PasswordInput } from '@open-mercato/ui/primitives/password-input'
+import { FormField } from '@open-mercato/ui/primitives/form-field'
+
+<FormField label="Password" error="Use at least 12 characters.">
+  <PasswordInput defaultValue="short" autoComplete="off" />
+</FormField>`
     }
   ]
 };
@@ -948,6 +1952,19 @@ const [value, setValue] = React.useState<AmountValue>({ amount: '', currency: 'E
       code: `import { AmountInput } from '@open-mercato/ui/primitives/amount-input'
 
 <AmountInput value={value} onChange={setValue} showCurrency={false} />`
+    },
+    {
+      id: "disabled",
+      title: "Disabled (amount and currency)",
+      render: () => /* @__PURE__ */ jsx(DisabledAmountInputPreview, {}),
+      code: `import { AmountInput, type AmountValue } from '@open-mercato/ui/primitives/amount-input'
+import { FormField } from '@open-mercato/ui/primitives/form-field'
+
+const [value, setValue] = React.useState<AmountValue>({ amount: '1250.00', currency: 'EUR' })
+
+<FormField label="Order total" disabled>
+  <AmountInput value={value} onChange={setValue} />
+</FormField>`
     }
   ]
 };
@@ -992,10 +2009,10 @@ const digitInputEntry = {
     {
       id: "default",
       title: "default (6 cells)",
-      render: () => /* @__PURE__ */ jsx(DigitInput, { "aria-label": "Verification code" }),
+      render: () => /* @__PURE__ */ jsx(DigitInputInputsDefaultSample, {}),
       code: `import { DigitInput } from '@open-mercato/ui/primitives/digit-input'
 
-<DigitInput onComplete={(code) => verify(code)} />`
+<DigitInput className="w-full gap-1 sm:w-auto sm:gap-2" cellClassName="min-w-0 w-8 flex-1 sm:w-14 sm:flex-none" onComplete={(code) => verify(code)} />`
     },
     {
       id: "masked",
@@ -1008,10 +2025,7 @@ const digitInputEntry = {
     {
       id: "states",
       title: "States",
-      render: () => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
-        /* @__PURE__ */ jsx(DigitInput, { length: 4, value: "4921", "aria-invalid": true, "aria-label": "Invalid code" }),
-        /* @__PURE__ */ jsx(DigitInput, { length: 4, disabled: true, "aria-label": "Disabled code" })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(DigitInputInputsStatesSample, {}),
       code: `import { DigitInput } from '@open-mercato/ui/primitives/digit-input'
 
 <DigitInput length={4} aria-invalid />
@@ -1052,15 +2066,7 @@ const buttonInputEntry = {
     {
       id: "copy-link",
       title: "Copy link",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-80", children: /* @__PURE__ */ jsx(
-        ButtonInput,
-        {
-          readOnly: true,
-          defaultValue: "https://app.example.com/i/8f2c",
-          leftIcon: /* @__PURE__ */ jsx(Link2, {}),
-          trailingAction: /* @__PURE__ */ jsx(IconButton, { variant: "ghost", "aria-label": "Copy link", children: /* @__PURE__ */ jsx(Copy, {}) })
-        }
-      ) }),
+      render: () => /* @__PURE__ */ jsx(ButtonInputInputsCopyLinkSample, {}),
       code: `import { Copy, Link2 } from 'lucide-react'
 import { ButtonInput } from '@open-mercato/ui/primitives/button-input'
 import { IconButton } from '@open-mercato/ui/primitives/icon-button'
@@ -1077,13 +2083,7 @@ import { IconButton } from '@open-mercato/ui/primitives/icon-button'
     {
       id: "send",
       title: "Send action",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-80", children: /* @__PURE__ */ jsx(
-        ButtonInput,
-        {
-          placeholder: "Invite by email",
-          trailingAction: /* @__PURE__ */ jsx(IconButton, { variant: "ghost", "aria-label": "Send invite", children: /* @__PURE__ */ jsx(Send, {}) })
-        }
-      ) }),
+      render: () => /* @__PURE__ */ jsx(ButtonInputInputsSendSample, {}),
       code: `import { Send } from 'lucide-react'
 import { ButtonInput } from '@open-mercato/ui/primitives/button-input'
 import { IconButton } from '@open-mercato/ui/primitives/icon-button'
@@ -1101,7 +2101,19 @@ const colorPickerEntry = {
   id: "color-picker",
   title: "ColorPicker",
   importPath: "@open-mercato/ui/primitives/color-picker",
+  figmaNodeId: "4415:53671",
   variants: [
+    {
+      id: "opacity",
+      title: "Opacity",
+      render: () => /* @__PURE__ */ jsx(DemoColorPicker, { showOpacity: true }),
+      code: `import { ColorPicker } from '@open-mercato/ui/primitives/color-picker'
+
+const [color, setColor] = React.useState('#6366F1')
+const [opacity, setOpacity] = React.useState(75)
+
+<ColorPicker value={color} onChange={setColor} showOpacity opacity={opacity} onOpacityChange={setOpacity} />`
+    },
     {
       id: "default",
       title: "default",
@@ -1141,7 +2153,7 @@ const tagInputEntry = {
     {
       id: "default",
       title: "default",
-      render: () => /* @__PURE__ */ jsx(DemoTagInput, { initial: ["wholesale", "priority", "eu"], placeholder: "Add tag" }),
+      render: () => /* @__PURE__ */ jsx(TagInputInputsDefaultSample, {}),
       code: `import { TagInput } from '@open-mercato/ui/primitives/tag-input'
 
 const [tags, setTags] = React.useState<string[]>(['wholesale', 'priority', 'eu'])
@@ -1151,7 +2163,7 @@ const [tags, setTags] = React.useState<string[]>(['wholesale', 'priority', 'eu']
     {
       id: "max-tags",
       title: "Max tags reached",
-      render: () => /* @__PURE__ */ jsx(DemoTagInput, { initial: ["red", "green", "blue"], maxTags: 3, placeholder: "Add tag" }),
+      render: () => /* @__PURE__ */ jsx(TagInputInputsMaxTagsSample, {}),
       code: `import { TagInput } from '@open-mercato/ui/primitives/tag-input'
 
 <TagInput value={tags} onChange={setTags} maxTags={3} />`
@@ -1160,33 +2172,478 @@ const [tags, setTags] = React.useState<string[]>(['wholesale', 'priority', 'eu']
 };
 const richEditorEntry = {
   id: "rich-editor",
+  figmaNodeId: "166926:17605",
   title: "RichEditor",
   importPath: "@open-mercato/ui/primitives/rich-editor",
+  docsAnchor: "#richeditor",
+  usage: { do: [
+    "toolbarDesign opts into source layouts 01\u201304 with 28 px controls, 20 px icons and 6 px item radii. Existing full, standard, basic and minimal presets retain their defaults.",
+    "Every source layout includes a working More menu. Hidden commands remain available in that menu when the toolbar narrows.",
+    "The 12-color palette already includes the source Color11 (white) and Color12 (black). Color choice changes editable content; stored HTML still passes through the existing sanitizer.",
+    "The character counter updates while typing. onChange retains its blur contract; consumers supply translated labels and their own comment and mention workflows."
+  ] },
+  variants: [
+    { id: "minimal", title: "Preset / minimal", render: () => /* @__PURE__ */ jsx(DemoRichEditor, { variant: "minimal" }), code: `import * as React from 'react'
+import { RichEditor } from '@open-mercato/ui/primitives/rich-editor'
+
+const [html, setHtml] = React.useState('<p>Editable text</p>')
+<RichEditor value={html} onChange={setHtml} variant="minimal" />` },
+    { id: "standard", title: "Preset / standard", render: () => /* @__PURE__ */ jsx(DemoRichEditor, { variant: "standard" }), code: `import * as React from 'react'
+import { RichEditor } from '@open-mercato/ui/primitives/rich-editor'
+
+const [html, setHtml] = React.useState('<p>Editable text</p>')
+<RichEditor value={html} onChange={setHtml} variant="standard" />` },
+    { id: "basic", title: "Preset / basic", render: () => /* @__PURE__ */ jsx(DemoRichEditor, { variant: "basic" }), code: `import * as React from 'react'
+import { RichEditor } from '@open-mercato/ui/primitives/rich-editor'
+
+const [html, setHtml] = React.useState('<p>Editable text</p>')
+<RichEditor value={html} onChange={setHtml} variant="basic" />` },
+    { id: "full", title: "Preset / full", render: () => /* @__PURE__ */ jsx(DemoRichEditor, { variant: "full" }), code: `import * as React from 'react'
+import { RichEditor } from '@open-mercato/ui/primitives/rich-editor'
+
+const [html, setHtml] = React.useState('<p>Editable text</p>')
+<RichEditor value={html} onChange={setHtml} variant="full" />` },
+    { id: "source-01", title: "Source layout 01", render: () => /* @__PURE__ */ jsx(DemoRichEditor, { toolbarDesign: "01" }), code: `import * as React from 'react'
+import { RichEditor } from '@open-mercato/ui/primitives/rich-editor'
+
+const [html, setHtml] = React.useState('<p>Editable text</p>')
+<RichEditor value={html} onChange={setHtml} toolbarDesign="01" />` },
+    { id: "source-02", title: "Source layout 02", render: () => /* @__PURE__ */ jsx(DemoRichEditor, { toolbarDesign: "02" }), code: `import * as React from 'react'
+import { RichEditor } from '@open-mercato/ui/primitives/rich-editor'
+
+const [html, setHtml] = React.useState('<p>Editable text</p>')
+<RichEditor value={html} onChange={setHtml} toolbarDesign="02" />` },
+    { id: "source-03", title: "Source layout 03", render: () => /* @__PURE__ */ jsx(DemoRichEditor, { toolbarDesign: "03" }), code: `import * as React from 'react'
+import { RichEditor } from '@open-mercato/ui/primitives/rich-editor'
+
+const [html, setHtml] = React.useState('<p>Editable text</p>')
+<RichEditor value={html} onChange={setHtml} toolbarDesign="03" />` },
+    { id: "source-04", title: "Source layout 04", render: () => /* @__PURE__ */ jsx(DemoRichEditor, { toolbarDesign: "04" }), code: `import * as React from 'react'
+import { RichEditor } from '@open-mercato/ui/primitives/rich-editor'
+
+const [html, setHtml] = React.useState('<p>Editable text</p>')
+<RichEditor value={html} onChange={setHtml} toolbarDesign="04" />` },
+    { id: "disabled", title: "Source layout / disabled", render: () => /* @__PURE__ */ jsx(DemoRichEditor, { toolbarDesign: "01", disabled: true }), code: `import { RichEditor } from '@open-mercato/ui/primitives/rich-editor'
+
+<RichEditor value={html} onChange={setHtml} toolbarDesign="01" disabled />` },
+    { id: "counter", title: "Live character counter", render: () => /* @__PURE__ */ jsx(DemoRichEditor, { toolbarDesign: "03", counter: true }), code: `import { RichEditor } from '@open-mercato/ui/primitives/rich-editor'
+
+<RichEditor value={html} onChange={setHtml} toolbarDesign="03" maxLength={100} />` },
+    { id: "palette", title: "All twelve source colors", render: () => /* @__PURE__ */ jsx(DemoRichEditorPalette, {}), code: `import * as React from 'react'
+import { RichEditorColorPalette, type RichEditorColorKey } from '@open-mercato/ui/primitives/rich-editor'
+
+const [color, setColor] = React.useState<RichEditorColorKey | null>('gray')
+<RichEditorColorPalette value={color} onChange={setColor} />` }
+  ]
+};
+const fileUploadAreaEntry = {
+  id: "file-upload",
+  title: "FileUploadArea",
+  importPath: "@open-mercato/ui/primitives/file-upload",
+  figmaNodeId: "450:9413",
+  docsAnchor: "#fileuploadarea",
+  usage: { do: ["Default and hover are live states of the same drop target. Select or drop files to exercise the local demo queue.", "Pass onFilesSelected and handle transfer separately. Demo progress is simulated locally; files never leave the browser.", "Keep custom accept/maxSizeBytes and the description consistent."] },
   variants: [
     {
-      id: "minimal",
-      title: "minimal",
-      render: () => /* @__PURE__ */ jsx(DemoRichEditor, { variant: "minimal" }),
-      code: `import { RichEditor } from '@open-mercato/ui/primitives/rich-editor'
+      id: "default",
+      title: "default",
+      render: () => /* @__PURE__ */ jsx(FileUploadAreaDemo, {}),
+      code: `import { FileUploadArea } from '@open-mercato/ui/primitives/file-upload'
 
-const [html, setHtml] = React.useState('')
+<FileUploadArea onFilesSelected={handleFiles} onFilesRejected={handleRejections} />`
+    },
+    {
+      id: "drag-and-drop",
+      title: "drag-and-drop",
+      render: () => /* @__PURE__ */ jsx(FileUploadAreaDemo, {}),
+      code: `import { FileUploadArea } from '@open-mercato/ui/primitives/file-upload'
 
-<RichEditor value={html} onChange={setHtml} variant="minimal" />`
+<FileUploadArea onFilesSelected={handleFiles} onFilesRejected={handleRejections} />`
     },
     {
-      id: "standard",
-      title: "standard",
-      render: () => /* @__PURE__ */ jsx(DemoRichEditor, { variant: "standard" }),
-      code: `import { RichEditor } from '@open-mercato/ui/primitives/rich-editor'
+      id: "disabled",
+      title: "disabled",
+      render: () => /* @__PURE__ */ jsx(FileUploadAreaDemo, { disabled: true }),
+      code: `import { FileUploadArea } from '@open-mercato/ui/primitives/file-upload'
 
-<RichEditor value={html} onChange={setHtml} variant="standard" />`
+<FileUploadArea disabled onFilesSelected={handleFiles} onFilesRejected={handleRejections} />`
     }
   ]
 };
+const fileUploadCardEntry = {
+  id: "file-upload-card",
+  title: "FileUploadCard",
+  importPath: "@open-mercato/ui/primitives/file-upload-card",
+  figmaNodeId: "451:409",
+  docsAnchor: "#fileuploadcard",
+  usage: { do: ["Cancel/remove and retry are real callbacks. The error example retries using local simulated progress.", "The caller owns transfer state, progress, and localized file-size text."] },
+  variants: [
+    {
+      id: "uploading",
+      title: "uploading",
+      render: () => /* @__PURE__ */ jsx(FileUploadCardDemo, { initialStatus: "uploading" }),
+      code: `import { FileUploadCard } from '@open-mercato/ui/primitives/file-upload-card'
+
+<FileUploadCard fileName="my-cv.pdf" sizeLabel={sizeLabel} status="uploading" progress={progress} onRemove={removeFile} onRetry={retryFile} />`
+    },
+    {
+      id: "success",
+      title: "success",
+      render: () => /* @__PURE__ */ jsx(FileUploadCardDemo, { initialStatus: "success" }),
+      code: `import { FileUploadCard } from '@open-mercato/ui/primitives/file-upload-card'
+
+<FileUploadCard fileName="my-cv.pdf" sizeLabel={sizeLabel} status="success" progress={progress} onRemove={removeFile} onRetry={retryFile} />`
+    },
+    {
+      id: "error",
+      title: "error",
+      render: () => /* @__PURE__ */ jsx(FileUploadCardDemo, { initialStatus: "error" }),
+      code: `import { FileUploadCard } from '@open-mercato/ui/primitives/file-upload-card'
+
+<FileUploadCard fileName="my-cv.pdf" sizeLabel={sizeLabel} status="error" progress={progress} onRemove={removeFile} onRetry={retryFile} />`
+    }
+  ]
+};
+const fileFormatIconEntry = {
+  id: "file-format-icon",
+  title: "FileFormatIcon",
+  importPath: "@open-mercato/ui/primitives/file-format-icon",
+  figmaNodeId: "450:17234",
+  docsAnchor: "#fileformaticon",
+  usage: { do: ["Both sizes and all nine category colors come from Figma. Teal is the source name of the light-blue category.", "The original Figma paper/fold artwork is bundled locally. Category-label foregrounds meet 4.5:1 contrast."] },
+  variants: [
+    {
+      id: "red-default",
+      title: "red / 40px",
+      render: () => /* @__PURE__ */ jsx(FileFormatIcon, { format: "PDF", tone: "red", size: "default" }),
+      code: `import { FileFormatIcon } from '@open-mercato/ui/primitives/file-format-icon'
+
+<FileFormatIcon format="PDF" tone="red" size="default" />`
+    },
+    {
+      id: "orange-default",
+      title: "orange / 40px",
+      render: () => /* @__PURE__ */ jsx(FileFormatIcon, { format: "PDF", tone: "orange", size: "default" }),
+      code: `import { FileFormatIcon } from '@open-mercato/ui/primitives/file-format-icon'
+
+<FileFormatIcon format="PDF" tone="orange" size="default" />`
+    },
+    {
+      id: "yellow-default",
+      title: "yellow / 40px",
+      render: () => /* @__PURE__ */ jsx(FileFormatIcon, { format: "PDF", tone: "yellow", size: "default" }),
+      code: `import { FileFormatIcon } from '@open-mercato/ui/primitives/file-format-icon'
+
+<FileFormatIcon format="PDF" tone="yellow" size="default" />`
+    },
+    {
+      id: "green-default",
+      title: "green / 40px",
+      render: () => /* @__PURE__ */ jsx(FileFormatIcon, { format: "PDF", tone: "green", size: "default" }),
+      code: `import { FileFormatIcon } from '@open-mercato/ui/primitives/file-format-icon'
+
+<FileFormatIcon format="PDF" tone="green" size="default" />`
+    },
+    {
+      id: "teal-default",
+      title: "teal / 40px",
+      render: () => /* @__PURE__ */ jsx(FileFormatIcon, { format: "PDF", tone: "teal", size: "default" }),
+      code: `import { FileFormatIcon } from '@open-mercato/ui/primitives/file-format-icon'
+
+<FileFormatIcon format="PDF" tone="teal" size="default" />`
+    },
+    {
+      id: "blue-default",
+      title: "blue / 40px",
+      render: () => /* @__PURE__ */ jsx(FileFormatIcon, { format: "PDF", tone: "blue", size: "default" }),
+      code: `import { FileFormatIcon } from '@open-mercato/ui/primitives/file-format-icon'
+
+<FileFormatIcon format="PDF" tone="blue" size="default" />`
+    },
+    {
+      id: "purple-default",
+      title: "purple / 40px",
+      render: () => /* @__PURE__ */ jsx(FileFormatIcon, { format: "PDF", tone: "purple", size: "default" }),
+      code: `import { FileFormatIcon } from '@open-mercato/ui/primitives/file-format-icon'
+
+<FileFormatIcon format="PDF" tone="purple" size="default" />`
+    },
+    {
+      id: "pink-default",
+      title: "pink / 40px",
+      render: () => /* @__PURE__ */ jsx(FileFormatIcon, { format: "PDF", tone: "pink", size: "default" }),
+      code: `import { FileFormatIcon } from '@open-mercato/ui/primitives/file-format-icon'
+
+<FileFormatIcon format="PDF" tone="pink" size="default" />`
+    },
+    {
+      id: "gray-default",
+      title: "gray / 40px",
+      render: () => /* @__PURE__ */ jsx(FileFormatIcon, { format: "PDF", tone: "gray", size: "default" }),
+      code: `import { FileFormatIcon } from '@open-mercato/ui/primitives/file-format-icon'
+
+<FileFormatIcon format="PDF" tone="gray" size="default" />`
+    },
+    {
+      id: "red-sm",
+      title: "red / 32px",
+      render: () => /* @__PURE__ */ jsx(FileFormatIcon, { format: "PDF", tone: "red", size: "sm" }),
+      code: `import { FileFormatIcon } from '@open-mercato/ui/primitives/file-format-icon'
+
+<FileFormatIcon format="PDF" tone="red" size="sm" />`
+    },
+    {
+      id: "orange-sm",
+      title: "orange / 32px",
+      render: () => /* @__PURE__ */ jsx(FileFormatIcon, { format: "PDF", tone: "orange", size: "sm" }),
+      code: `import { FileFormatIcon } from '@open-mercato/ui/primitives/file-format-icon'
+
+<FileFormatIcon format="PDF" tone="orange" size="sm" />`
+    },
+    {
+      id: "yellow-sm",
+      title: "yellow / 32px",
+      render: () => /* @__PURE__ */ jsx(FileFormatIcon, { format: "PDF", tone: "yellow", size: "sm" }),
+      code: `import { FileFormatIcon } from '@open-mercato/ui/primitives/file-format-icon'
+
+<FileFormatIcon format="PDF" tone="yellow" size="sm" />`
+    },
+    {
+      id: "green-sm",
+      title: "green / 32px",
+      render: () => /* @__PURE__ */ jsx(FileFormatIcon, { format: "PDF", tone: "green", size: "sm" }),
+      code: `import { FileFormatIcon } from '@open-mercato/ui/primitives/file-format-icon'
+
+<FileFormatIcon format="PDF" tone="green" size="sm" />`
+    },
+    {
+      id: "teal-sm",
+      title: "teal / 32px",
+      render: () => /* @__PURE__ */ jsx(FileFormatIcon, { format: "PDF", tone: "teal", size: "sm" }),
+      code: `import { FileFormatIcon } from '@open-mercato/ui/primitives/file-format-icon'
+
+<FileFormatIcon format="PDF" tone="teal" size="sm" />`
+    },
+    {
+      id: "blue-sm",
+      title: "blue / 32px",
+      render: () => /* @__PURE__ */ jsx(FileFormatIcon, { format: "PDF", tone: "blue", size: "sm" }),
+      code: `import { FileFormatIcon } from '@open-mercato/ui/primitives/file-format-icon'
+
+<FileFormatIcon format="PDF" tone="blue" size="sm" />`
+    },
+    {
+      id: "purple-sm",
+      title: "purple / 32px",
+      render: () => /* @__PURE__ */ jsx(FileFormatIcon, { format: "PDF", tone: "purple", size: "sm" }),
+      code: `import { FileFormatIcon } from '@open-mercato/ui/primitives/file-format-icon'
+
+<FileFormatIcon format="PDF" tone="purple" size="sm" />`
+    },
+    {
+      id: "pink-sm",
+      title: "pink / 32px",
+      render: () => /* @__PURE__ */ jsx(FileFormatIcon, { format: "PDF", tone: "pink", size: "sm" }),
+      code: `import { FileFormatIcon } from '@open-mercato/ui/primitives/file-format-icon'
+
+<FileFormatIcon format="PDF" tone="pink" size="sm" />`
+    },
+    {
+      id: "gray-sm",
+      title: "gray / 32px",
+      render: () => /* @__PURE__ */ jsx(FileFormatIcon, { format: "PDF", tone: "gray", size: "sm" }),
+      code: `import { FileFormatIcon } from '@open-mercato/ui/primitives/file-format-icon'
+
+<FileFormatIcon format="PDF" tone="gray" size="sm" />`
+    }
+  ]
+};
+const imageUploadEntry = {
+  id: "image-upload",
+  title: "ImageUpload",
+  importPath: "@open-mercato/ui/primitives/image-upload",
+  figmaNodeId: "452:653",
+  docsAnchor: "#imageupload",
+  usage: { do: ["Figma calls the layout with text above actions Vertical; both source layouts place the avatar to the left.", "New selections must decode as PNG/JPEG and meet the configured minimum dimensions (400\xD7400 by default). The caller owns the preview URL and transfer.", "Existing uploaded illustrations are exact source fixtures. Change and Remove update only local browser state."] },
+  variants: [
+    {
+      id: "avatar-vertical-empty",
+      title: "avatar / vertical / empty",
+      render: () => /* @__PURE__ */ jsx(ImageUploadDemo, { kind: "avatar", alignment: "vertical", uploaded: false }),
+      code: `import { ImageUpload } from '@open-mercato/ui/primitives/image-upload'
+
+<ImageUpload kind="avatar" alignment="vertical" src={previewUrl} alt={imageLabel} onChange={handleImageChange} />`
+    },
+    {
+      id: "avatar-vertical-uploaded",
+      title: "avatar / vertical / uploaded",
+      render: () => /* @__PURE__ */ jsx(ImageUploadDemo, { kind: "avatar", alignment: "vertical", uploaded: true }),
+      code: `import { ImageUpload } from '@open-mercato/ui/primitives/image-upload'
+
+<ImageUpload kind="avatar" alignment="vertical" src={previewUrl} alt={imageLabel} onChange={handleImageChange} />`
+    },
+    {
+      id: "avatar-horizontal-empty",
+      title: "avatar / horizontal / empty",
+      render: () => /* @__PURE__ */ jsx(ImageUploadDemo, { kind: "avatar", alignment: "horizontal", uploaded: false }),
+      code: `import { ImageUpload } from '@open-mercato/ui/primitives/image-upload'
+
+<ImageUpload kind="avatar" alignment="horizontal" src={previewUrl} alt={imageLabel} onChange={handleImageChange} />`
+    },
+    {
+      id: "avatar-horizontal-uploaded",
+      title: "avatar / horizontal / uploaded",
+      render: () => /* @__PURE__ */ jsx(ImageUploadDemo, { kind: "avatar", alignment: "horizontal", uploaded: true }),
+      code: `import { ImageUpload } from '@open-mercato/ui/primitives/image-upload'
+
+<ImageUpload kind="avatar" alignment="horizontal" src={previewUrl} alt={imageLabel} onChange={handleImageChange} />`
+    },
+    {
+      id: "company-vertical-empty",
+      title: "company / vertical / empty",
+      render: () => /* @__PURE__ */ jsx(ImageUploadDemo, { kind: "company", alignment: "vertical", uploaded: false }),
+      code: `import { ImageUpload } from '@open-mercato/ui/primitives/image-upload'
+
+<ImageUpload kind="company" alignment="vertical" src={previewUrl} alt={imageLabel} onChange={handleImageChange} />`
+    },
+    {
+      id: "company-vertical-uploaded",
+      title: "company / vertical / uploaded",
+      render: () => /* @__PURE__ */ jsx(ImageUploadDemo, { kind: "company", alignment: "vertical", uploaded: true }),
+      code: `import { ImageUpload } from '@open-mercato/ui/primitives/image-upload'
+
+<ImageUpload kind="company" alignment="vertical" src={previewUrl} alt={imageLabel} onChange={handleImageChange} />`
+    },
+    {
+      id: "company-horizontal-empty",
+      title: "company / horizontal / empty",
+      render: () => /* @__PURE__ */ jsx(ImageUploadDemo, { kind: "company", alignment: "horizontal", uploaded: false }),
+      code: `import { ImageUpload } from '@open-mercato/ui/primitives/image-upload'
+
+<ImageUpload kind="company" alignment="horizontal" src={previewUrl} alt={imageLabel} onChange={handleImageChange} />`
+    },
+    {
+      id: "company-horizontal-uploaded",
+      title: "company / horizontal / uploaded",
+      render: () => /* @__PURE__ */ jsx(ImageUploadDemo, { kind: "company", alignment: "horizontal", uploaded: true }),
+      code: `import { ImageUpload } from '@open-mercato/ui/primitives/image-upload'
+
+<ImageUpload kind="company" alignment="horizontal" src={previewUrl} alt={imageLabel} onChange={handleImageChange} />`
+    },
+    {
+      id: "disabled",
+      title: "disabled",
+      render: () => /* @__PURE__ */ jsx(ImageUploadDemo, { kind: "avatar", alignment: "vertical", uploaded: true, disabled: true }),
+      code: `import { ImageUpload } from '@open-mercato/ui/primitives/image-upload'
+
+<ImageUpload disabled src={previewUrl} onChange={handleImageChange} />`
+    }
+  ]
+};
+const labelEntry = {
+  id: "label",
+  title: "FieldLabel",
+  importPath: "@open-mercato/ui/primitives/label",
+  figmaNodeId: "266:2814",
+  descriptionKey: "design_system.entries.label.description",
+  variants: [
+    { id: "normal", title: "normal", render: () => /* @__PURE__ */ jsx(FieldLabelExample, {}), code: fieldLabelCode(' sublabel="(optional)"') },
+    { id: "disabled", title: "disabled", render: () => /* @__PURE__ */ jsx(FieldLabelExample, { disabled: true }), code: fieldLabelCode(" disabled") },
+    { id: "required", title: "required", render: () => /* @__PURE__ */ jsx(FieldLabelExample, { kind: "required" }), code: fieldLabelCode(" required") },
+    { id: "optional", title: "optional", render: () => /* @__PURE__ */ jsx(FieldLabelExample, { kind: "optional" }), code: fieldLabelCode(' sublabel="(optional)"') },
+    { id: "information", title: "information", render: () => /* @__PURE__ */ jsx(FieldLabelExample, { kind: "information" }), code: fieldLabelInformationCode },
+    { id: "action", title: "action", render: () => /* @__PURE__ */ jsx(FieldLabelExample, { kind: "action" }), code: fieldLabelActionCode },
+    { id: "form-field", title: "form-field", render: () => /* @__PURE__ */ jsx(FormFieldLabelExample, {}), code: formFieldLabelCode }
+  ]
+};
+const hint_textEntry = {
+  id: "hint-text",
+  title: "HintText",
+  importPath: "@open-mercato/ui/primitives/hint-text",
+  figmaNodeId: "266:5284",
+  descriptionKey: "design_system.entries.hint-text.description",
+  variants: [
+    { id: "default", title: "default", render: () => /* @__PURE__ */ jsx(HintTextExample, {}), code: hintTextCode() },
+    { id: "error", title: "error", render: () => /* @__PURE__ */ jsx(HintTextExample, { state: "error" }), code: hintTextCode({ state: "error" }) },
+    { id: "disabled", title: "disabled", render: () => /* @__PURE__ */ jsx(HintTextExample, { state: "disabled" }), code: hintTextCode({ state: "disabled" }) },
+    { id: "text-only", title: "text-only", render: () => /* @__PURE__ */ jsx(HintTextExample, { icon: false }), code: hintTextCode({ icon: false }) }
+  ]
+};
+const marketingControlsEntry = {
+  id: "marketing-controls",
+  title: "Marketing Controls",
+  importPath: "@open-mercato/ui/primitives/input",
+  figmaNodeId: "6696:81119",
+  variants: [
+    { id: "product-image-1", title: "product-image-1", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "product-image", product: 0 }), code: marketingControlExampleCode('<MarketingControlDemo kind="product-image" product={0} />') },
+    { id: "product-image-2", title: "product-image-2", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "product-image", product: 1 }), code: marketingControlExampleCode('<MarketingControlDemo kind="product-image" product={1} />') },
+    { id: "product-image-3", title: "product-image-3", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "product-image", product: 2 }), code: marketingControlExampleCode('<MarketingControlDemo kind="product-image" product={2} />') },
+    { id: "product-image-4", title: "product-image-4", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "product-image", product: 3 }), code: marketingControlExampleCode('<MarketingControlDemo kind="product-image" product={3} />') },
+    { id: "product-image-5", title: "product-image-5", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "product-image", product: 4 }), code: marketingControlExampleCode('<MarketingControlDemo kind="product-image" product={4} />') },
+    { id: "product-image-6", title: "product-image-6", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "product-image", product: 5 }), code: marketingControlExampleCode('<MarketingControlDemo kind="product-image" product={5} />') },
+    { id: "product-image-7", title: "product-image-7", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "product-image", product: 6 }), code: marketingControlExampleCode('<MarketingControlDemo kind="product-image" product={6} />') },
+    { id: "product-image-8", title: "product-image-8", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "product-image", product: 7 }), code: marketingControlExampleCode('<MarketingControlDemo kind="product-image" product={7} />') },
+    { id: "product-image-9", title: "product-image-9", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "product-image", product: 8 }), code: marketingControlExampleCode('<MarketingControlDemo kind="product-image" product={8} />') },
+    { id: "product-image-10", title: "product-image-10", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "product-image", product: 9 }), code: marketingControlExampleCode('<MarketingControlDemo kind="product-image" product={9} />') },
+    { id: "step-item-default", title: "step-item-default", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "step-item", state: "default" }), code: marketingControlExampleCode('<MarketingControlDemo kind="step-item" state="default" />') },
+    { id: "step-item-active", title: "step-item-active", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "step-item", state: "active" }), code: marketingControlExampleCode('<MarketingControlDemo kind="step-item" state="active" />') },
+    { id: "step-item-complete", title: "step-item-complete", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "step-item", state: "complete" }), code: marketingControlExampleCode('<MarketingControlDemo kind="step-item" state="complete" />') },
+    { id: "select-default", title: "select-default", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "select", state: "default" }), code: marketingControlExampleCode('<MarketingControlDemo kind="select" state="default" />') },
+    { id: "select-hover", title: "select-hover", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "select", state: "hover" }), code: marketingControlExampleCode('<MarketingControlDemo kind="select" state="hover" />') },
+    { id: "select-active", title: "select-active", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "select", state: "active" }), code: marketingControlExampleCode('<MarketingControlDemo kind="select" state="active" />') },
+    { id: "select-filled", title: "select-filled", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "select", state: "filled" }), code: marketingControlExampleCode('<MarketingControlDemo kind="select" state="filled" />') },
+    { id: "input-default-medium", title: "input-default-medium", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "input", state: "default", size: "medium" }), code: marketingControlExampleCode('<MarketingControlDemo kind="input" state="default" size="medium" />') },
+    { id: "input-hover-medium", title: "input-hover-medium", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "input", state: "hover", size: "medium" }), code: marketingControlExampleCode('<MarketingControlDemo kind="input" state="hover" size="medium" />') },
+    { id: "input-active-medium", title: "input-active-medium", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "input", state: "active", size: "medium" }), code: marketingControlExampleCode('<MarketingControlDemo kind="input" state="active" size="medium" />') },
+    { id: "input-filled-medium", title: "input-filled-medium", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "input", state: "filled", size: "medium" }), code: marketingControlExampleCode('<MarketingControlDemo kind="input" state="filled" size="medium" />') },
+    { id: "input-default-large", title: "input-default-large", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "input", state: "default", size: "large" }), code: marketingControlExampleCode('<MarketingControlDemo kind="input" state="default" size="large" />') },
+    { id: "input-hover-large", title: "input-hover-large", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "input", state: "hover", size: "large" }), code: marketingControlExampleCode('<MarketingControlDemo kind="input" state="hover" size="large" />') },
+    { id: "input-active-large", title: "input-active-large", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "input", state: "active", size: "large" }), code: marketingControlExampleCode('<MarketingControlDemo kind="input" state="active" size="large" />') },
+    { id: "input-filled-large", title: "input-filled-large", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "input", state: "filled", size: "large" }), code: marketingControlExampleCode('<MarketingControlDemo kind="input" state="filled" size="large" />') },
+    { id: "textarea-default", title: "textarea-default", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "textarea", state: "default" }), code: marketingControlExampleCode('<MarketingControlDemo kind="textarea" state="default" />') },
+    { id: "textarea-hover", title: "textarea-hover", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "textarea", state: "hover" }), code: marketingControlExampleCode('<MarketingControlDemo kind="textarea" state="hover" />') },
+    { id: "textarea-active", title: "textarea-active", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "textarea", state: "active" }), code: marketingControlExampleCode('<MarketingControlDemo kind="textarea" state="active" />') },
+    { id: "textarea-filled", title: "textarea-filled", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "textarea", state: "filled" }), code: marketingControlExampleCode('<MarketingControlDemo kind="textarea" state="filled" />') },
+    { id: "amount-default", title: "amount-default", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "amount", state: "default" }), code: marketingControlExampleCode('<MarketingControlDemo kind="amount" state="default" />') },
+    { id: "amount-hover", title: "amount-hover", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "amount", state: "hover" }), code: marketingControlExampleCode('<MarketingControlDemo kind="amount" state="hover" />') },
+    { id: "amount-active", title: "amount-active", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "amount", state: "active" }), code: marketingControlExampleCode('<MarketingControlDemo kind="amount" state="active" />') },
+    { id: "amount-filled", title: "amount-filled", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "amount", state: "filled" }), code: marketingControlExampleCode('<MarketingControlDemo kind="amount" state="filled" />') },
+    { id: "tab-menu-default", title: "tab-menu-default", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "tab-menu", state: "default" }), code: marketingControlExampleCode('<MarketingControlDemo kind="tab-menu" state="default" />') },
+    { id: "tab-menu-hover", title: "tab-menu-hover", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "tab-menu", state: "hover" }), code: marketingControlExampleCode('<MarketingControlDemo kind="tab-menu" state="hover" />') },
+    { id: "tab-menu-active", title: "tab-menu-active", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "tab-menu", state: "active" }), code: marketingControlExampleCode('<MarketingControlDemo kind="tab-menu" state="active" />') },
+    { id: "inline-input-placeholder", title: "inline-input-placeholder", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "inline-input", state: "placeholder" }), code: marketingControlExampleCode('<MarketingControlDemo kind="inline-input" state="placeholder" />') },
+    { id: "inline-input-hover", title: "inline-input-hover", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "inline-input", state: "hover" }), code: marketingControlExampleCode('<MarketingControlDemo kind="inline-input" state="hover" />') },
+    { id: "inline-input-focus", title: "inline-input-focus", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "inline-input", state: "focus" }), code: marketingControlExampleCode('<MarketingControlDemo kind="inline-input" state="focus" />') },
+    { id: "inline-input-filled", title: "inline-input-filled", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "inline-input", state: "filled" }), code: marketingControlExampleCode('<MarketingControlDemo kind="inline-input" state="filled" />') },
+    { id: "inline-input-disabled", title: "inline-input-disabled", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "inline-input", state: "disabled" }), code: marketingControlExampleCode('<MarketingControlDemo kind="inline-input" state="disabled" />') },
+    { id: "inline-select-placeholder", title: "inline-select-placeholder", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "inline-select", state: "placeholder" }), code: marketingControlExampleCode('<MarketingControlDemo kind="inline-select" state="placeholder" />') },
+    { id: "inline-select-hover", title: "inline-select-hover", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "inline-select", state: "hover" }), code: marketingControlExampleCode('<MarketingControlDemo kind="inline-select" state="hover" />') },
+    { id: "inline-select-focus", title: "inline-select-focus", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "inline-select", state: "focus" }), code: marketingControlExampleCode('<MarketingControlDemo kind="inline-select" state="focus" />') },
+    { id: "inline-select-filled", title: "inline-select-filled", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "inline-select", state: "filled" }), code: marketingControlExampleCode('<MarketingControlDemo kind="inline-select" state="filled" />') },
+    { id: "inline-select-disabled", title: "inline-select-disabled", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "inline-select", state: "disabled" }), code: marketingControlExampleCode('<MarketingControlDemo kind="inline-select" state="disabled" />') },
+    { id: "chart-tooltip-right", title: "chart-tooltip-right", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "chart-tooltip", side: "right" }), code: marketingControlExampleCode('<MarketingControlDemo kind="chart-tooltip" side="right" />') },
+    { id: "chart-tooltip-left", title: "chart-tooltip-left", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "chart-tooltip", side: "left" }), code: marketingControlExampleCode('<MarketingControlDemo kind="chart-tooltip" side="left" />') },
+    { id: "chart-tooltip-bottom", title: "chart-tooltip-bottom", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "chart-tooltip", side: "bottom" }), code: marketingControlExampleCode('<MarketingControlDemo kind="chart-tooltip" side="bottom" />') },
+    { id: "chart-tooltip-top", title: "chart-tooltip-top", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "chart-tooltip", side: "top" }), code: marketingControlExampleCode('<MarketingControlDemo kind="chart-tooltip" side="top" />') },
+    { id: "selected-button-default", title: "selected-button-default", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "selected-button", state: "default" }), code: marketingControlExampleCode('<MarketingControlDemo kind="selected-button" state="default" />') },
+    { id: "selected-button-hover", title: "selected-button-hover", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "selected-button", state: "hover" }), code: marketingControlExampleCode('<MarketingControlDemo kind="selected-button" state="hover" />') },
+    { id: "selected-button-selected", title: "selected-button-selected", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "selected-button", state: "selected" }), code: marketingControlExampleCode('<MarketingControlDemo kind="selected-button" state="selected" />') },
+    { id: "selected-button-disabled", title: "selected-button-disabled", render: () => /* @__PURE__ */ jsx(MarketingControlDemo, { kind: "selected-button", state: "disabled" }), code: marketingControlExampleCode('<MarketingControlDemo kind="selected-button" state="disabled" />') }
+  ]
+};
 const entries = [
+  marketingControlsEntry,
+  labelEntry,
+  hint_textEntry,
+  fileUploadAreaEntry,
+  fileUploadCardEntry,
+  fileFormatIconEntry,
+  imageUploadEntry,
   inputEntry,
   textareaEntry,
+  phoneNumberEntry,
   selectEntry,
+  dropdownEntry,
   compactSelectEntry,
   inlineSelectEntry,
   inlineInputEntry,
@@ -1201,6 +2658,7 @@ const entries = [
   searchInputEntry,
   emailInputEntry,
   passwordInputEntry,
+  passwordStrengthEntry,
   websiteInputEntry,
   amountInputEntry,
   counterInputEntry,
@@ -1211,6 +2669,285 @@ const entries = [
   tagInputEntry,
   richEditorEntry
 ];
+function InputInputsDefaultSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(Input, { placeholder: t("design_system.gallery.samples.marketing.productName") }) });
+}
+function InputInputsIconSlotsSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "w-56", children: /* @__PURE__ */ jsx(Input, { leftIcon: /* @__PURE__ */ jsx(User, {}), placeholder: t("design_system.gallery.sampleCopy.assignee") }) }),
+    /* @__PURE__ */ jsx("div", { className: "w-56", children: /* @__PURE__ */ jsx(Input, { rightIcon: /* @__PURE__ */ jsx(Info, {}), placeholder: "SKU" }) })
+  ] });
+}
+function InputInputsSizesSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "w-44", children: /* @__PURE__ */ jsx(Input, { size: "lg", placeholder: t("design_system.gallery.sampleCopy.large") }) }),
+    /* @__PURE__ */ jsx("div", { className: "w-44", children: /* @__PURE__ */ jsx(Input, { size: "default", placeholder: t("design_system.gallery.examples.aiProduct.default") }) }),
+    /* @__PURE__ */ jsx("div", { className: "w-44", children: /* @__PURE__ */ jsx(Input, { size: "sm", placeholder: t("design_system.gallery.sampleCopy.small") }) })
+  ] });
+}
+function InputInputsStatesSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "w-56", children: /* @__PURE__ */ jsx(Input, { "aria-invalid": true, defaultValue: "not-a-number" }) }),
+    /* @__PURE__ */ jsx("div", { className: "w-56", children: /* @__PURE__ */ jsx(Input, { disabled: true, placeholder: t("design_system.gallery.examples.keyComponents.disabled") }) })
+  ] });
+}
+function TextareaInputsDefaultSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-80", children: /* @__PURE__ */ jsx(Textarea, { placeholder: t("design_system.gallery.sampleCopy.internalNoteForTheFulfillmentTeam") }) });
+}
+function TextareaInputsStatesSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(Textarea, { "aria-invalid": true, defaultValue: t("design_system.gallery.sampleCopy.tooShort") }) }),
+    /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(Textarea, { disabled: true, placeholder: t("design_system.gallery.examples.keyComponents.disabled") }) })
+  ] });
+}
+function CompactSelectInputsTriggerLabelSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-44", children: /* @__PURE__ */ jsxs(Select, { defaultValue: "newest", children: [
+    /* @__PURE__ */ jsx(CompactSelectTrigger, { triggerLabel: "Sort:", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+    /* @__PURE__ */ jsxs(SelectContent, { children: [
+      /* @__PURE__ */ jsx(SelectItem, { value: "newest", children: t("design_system.gallery.sampleCopy.newest") }),
+      /* @__PURE__ */ jsx(SelectItem, { value: "oldest", children: t("design_system.gallery.sampleCopy.oldest") }),
+      /* @__PURE__ */ jsx(SelectItem, { value: "value", children: t("design_system.gallery.sampleCopy.highestValue") })
+    ] })
+  ] }) });
+}
+function CompactSelectInputsPlainSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-36", children: /* @__PURE__ */ jsxs(Select, { defaultValue: "table", children: [
+    /* @__PURE__ */ jsx(CompactSelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+    /* @__PURE__ */ jsxs(SelectContent, { children: [
+      /* @__PURE__ */ jsx(SelectItem, { value: "table", children: t("design_system.gallery.samples.richEditor.labels.table") }),
+      /* @__PURE__ */ jsx(SelectItem, { value: "board", children: t("design_system.gallery.sampleCopy.board") })
+    ] })
+  ] }) });
+}
+function InlineSelectInputsDefaultSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-40", children: /* @__PURE__ */ jsxs(Select, { defaultValue: "high", children: [
+    /* @__PURE__ */ jsx(InlineSelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+    /* @__PURE__ */ jsxs(SelectContent, { children: [
+      /* @__PURE__ */ jsx(SelectItem, { value: "low", children: t("design_system.gallery.samples.finance.low") }),
+      /* @__PURE__ */ jsx(SelectItem, { value: "medium", children: t("design_system.gallery.examples.aiProduct.medium") }),
+      /* @__PURE__ */ jsx(SelectItem, { value: "high", children: t("design_system.gallery.samples.finance.high") })
+    ] })
+  ] }) });
+}
+function InlineSelectInputsInvisibleSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-40", children: /* @__PURE__ */ jsxs(Select, { defaultValue: "draft", children: [
+    /* @__PURE__ */ jsx(InlineSelectTrigger, { showBorderOnHover: false, children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+    /* @__PURE__ */ jsxs(SelectContent, { children: [
+      /* @__PURE__ */ jsx(SelectItem, { value: "draft", children: t("design_system.gallery.sampleCopy.draft") }),
+      /* @__PURE__ */ jsx(SelectItem, { value: "published", children: t("design_system.gallery.sampleCopy.published") })
+    ] })
+  ] }) });
+}
+function InlineInputInputsDefaultSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-56", children: /* @__PURE__ */ jsx(InlineInput, { defaultValue: t("design_system.gallery.sampleCopy.auroraDeskLamp"), "aria-label": t("design_system.gallery.samples.marketing.productName") }) });
+}
+function CheckboxInputsStatesSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Checkbox, { "aria-label": t("design_system.gallery.sampleCopy.unchecked") }),
+    /* @__PURE__ */ jsx(Checkbox, { defaultChecked: true, "aria-label": t("design_system.gallery.sampleCopy.checked") }),
+    /* @__PURE__ */ jsx(Checkbox, { checked: "indeterminate", "aria-label": t("design_system.gallery.sampleCopy.indeterminate") })
+  ] });
+}
+function CheckboxInputsSizesSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Checkbox, { size: "sm", defaultChecked: true, "aria-label": t("design_system.gallery.sampleCopy.small") }),
+    /* @__PURE__ */ jsx(Checkbox, { size: "md", defaultChecked: true, "aria-label": t("design_system.gallery.examples.aiProduct.medium") })
+  ] });
+}
+function CheckboxInputsDisabledSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Checkbox, { disabled: true, "aria-label": t("design_system.gallery.examples.keyComponents.disabled") }),
+    /* @__PURE__ */ jsx(Checkbox, { disabled: true, defaultChecked: true, "aria-label": t("design_system.gallery.sampleCopy.disabledChecked") })
+  ] });
+}
+function CheckboxFieldInputsDefaultSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx(CheckboxField, { label: t("design_system.gallery.sampleCopy.emailNotifications"), defaultChecked: true });
+}
+function CheckboxFieldInputsWithDescriptionSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-80", children: /* @__PURE__ */ jsx(
+    CheckboxField,
+    {
+      label: t("design_system.gallery.sampleCopy.autoarchive"),
+      sublabel: "(recommended)",
+      description: t("design_system.gallery.sampleCopy.closedConversationsMoveToTheArchiveAfter30Days")
+    }
+  ) });
+}
+function CheckboxFieldInputsFlipSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(CheckboxField, { flip: true, label: t("design_system.gallery.sampleCopy.includeShippingCosts"), defaultChecked: true }) });
+}
+function RadioInputsGroupSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(RadioGroup, { defaultValue: "card", className: "flex-row gap-3", "aria-label": t("design_system.gallery.samples.menu.kind.provider"), children: [
+    /* @__PURE__ */ jsx(Radio, { value: "card", "aria-label": t("design_system.gallery.sampleCopy.card") }),
+    /* @__PURE__ */ jsx(Radio, { value: "transfer", "aria-label": t("design_system.gallery.sampleCopy.bankTransfer") }),
+    /* @__PURE__ */ jsx(Radio, { value: "cash", "aria-label": t("design_system.gallery.sampleCopy.cash") })
+  ] });
+}
+function RadioInputsDisabledSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(RadioGroup, { defaultValue: "a", disabled: true, className: "flex-row gap-3", "aria-label": t("design_system.gallery.sampleCopy.disabledGroup"), children: [
+    /* @__PURE__ */ jsx(Radio, { value: "a", "aria-label": t("design_system.gallery.sampleCopy.selectedDisabled") }),
+    /* @__PURE__ */ jsx(Radio, { value: "b", "aria-label": t("design_system.gallery.sampleCopy.unselectedDisabled") })
+  ] });
+}
+function RadioFieldInputsDefaultSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(RadioGroup, { defaultValue: "standard", "aria-label": t("design_system.gallery.sampleCopy.shippingSpeed"), children: [
+    /* @__PURE__ */ jsx(RadioField, { value: "standard", label: t("design_system.gallery.sampleCopy.standard") }),
+    /* @__PURE__ */ jsx(RadioField, { value: "express", label: t("design_system.gallery.sampleCopy.express") })
+  ] });
+}
+function RadioFieldInputsWithDescriptionSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-80", children: /* @__PURE__ */ jsxs(RadioGroup, { defaultValue: "invoice", "aria-label": t("design_system.gallery.samples.marketing.billing"), children: [
+    /* @__PURE__ */ jsx(
+      RadioField,
+      {
+        value: "invoice",
+        label: t("design_system.gallery.sampleCopy.invoice"),
+        description: t("design_system.gallery.sampleCopy.payWithin14DaysOfDelivery")
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      RadioField,
+      {
+        value: "prepaid",
+        label: t("design_system.gallery.sampleCopy.prepaid"),
+        description: t("design_system.gallery.sampleCopy.orderShipsAfterPaymentClears")
+      }
+    )
+  ] }) });
+}
+function SwitchInputsStatesSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Switch, { "aria-label": t("design_system.gallery.sampleCopy.off") }),
+    /* @__PURE__ */ jsx(Switch, { defaultChecked: true, "aria-label": t("design_system.gallery.sampleCopy.on") })
+  ] });
+}
+function SwitchInputsDisabledSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Switch, { disabled: true, "aria-label": t("design_system.gallery.sampleCopy.disabledOff") }),
+    /* @__PURE__ */ jsx(Switch, { disabled: true, defaultChecked: true, "aria-label": t("design_system.gallery.sampleCopy.disabledOn") })
+  ] });
+}
+function SwitchFieldInputsDefaultSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(SwitchField, { label: t("design_system.gallery.sampleCopy.twofactorAuthentication"), defaultChecked: true }) });
+}
+function SwitchFieldInputsWithDescriptionSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-80", children: /* @__PURE__ */ jsx(
+    SwitchField,
+    {
+      label: t("design_system.gallery.sampleCopy.lowstockAlerts"),
+      description: t("design_system.gallery.sampleCopy.notifyPurchasingWhenStockDropsBelowTheReorderPoint")
+    }
+  ) });
+}
+function SwitchFieldInputsFlipSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(SwitchField, { flip: true, label: t("design_system.gallery.sampleCopy.syncInventoryNightly"), defaultChecked: true }) });
+}
+function SliderInputsSingleSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(Slider, { defaultValue: [40], min: 0, max: 100, step: 5, "aria-label": t("design_system.gallery.sampleCopy.discount") }) });
+}
+function SliderInputsRangeSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(Slider, { defaultValue: [20, 60], min: 0, max: 100, "aria-label": t("design_system.gallery.sampleCopy.priceRange") }) });
+}
+function SliderInputsDisabledSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(Slider, { defaultValue: [45], disabled: true, "aria-label": t("design_system.gallery.sampleCopy.disabledSlider") }) });
+}
+function FormFieldInputsDefaultSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(FormField, { label: t("design_system.gallery.sampleCopy.warehouseCode"), description: t("design_system.gallery.sampleCopy.shortIdentifierUsedOnLabels"), children: /* @__PURE__ */ jsx(Input, { placeholder: "WAW-01" }) }) });
+}
+function FormFieldInputsRequiredSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(FormField, { label: t("design_system.gallery.sampleCopy.companyName"), required: true, children: /* @__PURE__ */ jsx(Input, { placeholder: "Acme sp. z o.o." }) }) });
+}
+function FormFieldInputsHorizontalSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(FormField, { label: t("design_system.gallery.sampleCopy.enableWebhooks"), orientation: "horizontal", children: /* @__PURE__ */ jsx(Switch, { defaultChecked: true }) }) });
+}
+function DigitInputInputsDefaultSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx(DigitInput, { "aria-label": t("design_system.gallery.examples.aiProduct.verification"), className: "w-full gap-1 sm:w-auto sm:gap-2", cellClassName: "min-w-0 w-8 flex-1 sm:w-14 sm:flex-none" });
+}
+function DigitInputInputsStatesSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsx(DigitInput, { length: 4, value: "4921", "aria-invalid": true, "aria-label": t("design_system.gallery.sampleCopy.invalidCode") }),
+    /* @__PURE__ */ jsx(DigitInput, { length: 4, disabled: true, "aria-label": t("design_system.gallery.sampleCopy.disabledCode") })
+  ] });
+}
+function ButtonInputInputsCopyLinkSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-80", children: /* @__PURE__ */ jsx(
+    ButtonInput,
+    {
+      readOnly: true,
+      defaultValue: "https://app.example.com/i/8f2c",
+      leftIcon: /* @__PURE__ */ jsx(Link2, {}),
+      trailingAction: /* @__PURE__ */ jsx(IconButton, { variant: "ghost", "aria-label": t("design_system.gallery.sampleCopy.copyLink"), children: /* @__PURE__ */ jsx(Copy, {}) })
+    }
+  ) });
+}
+function ButtonInputInputsSendSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-80", children: /* @__PURE__ */ jsx(
+    ButtonInput,
+    {
+      placeholder: t("design_system.gallery.sampleCopy.inviteByEmail"),
+      trailingAction: /* @__PURE__ */ jsx(IconButton, { variant: "ghost", "aria-label": t("design_system.gallery.sampleCopy.sendInvite"), children: /* @__PURE__ */ jsx(Send, {}) })
+    }
+  ) });
+}
+function TagInputInputsDefaultSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx(DemoTagInput, { initial: ["wholesale", "priority", "eu"], placeholder: t("design_system.gallery.sampleCopy.addTag") });
+}
+function TagInputInputsMaxTagsSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx(DemoTagInput, { initial: ["red", "green", "blue"], maxTags: 3, placeholder: t("design_system.gallery.sampleCopy.addTag") });
+}
+function TextareaInputsCharacterCountSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-80", children: /* @__PURE__ */ jsx(
+    Textarea,
+    {
+      showCount: true,
+      maxLength: 200,
+      defaultValue: t("design_system.gallery.sampleCopy.customerPrefersDeliveryAfter4PM")
+    }
+  ) });
+}
+function FormFieldInputsErrorSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(FormField, { label: t("design_system.gallery.sampleCopy.vatID"), error: t("design_system.gallery.sampleCopy.vatIDMustHave10Digits"), children: /* @__PURE__ */ jsx(Input, { defaultValue: "52601" }) }) });
+}
 export {
   entries
 };