@open-mercato/core 0.6.7-develop.6785.1.1dd7cfac55 → 0.6.7-develop.6795.1.8a3f27921c

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

@@ -0,0 +1,1217 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Copy, Globe, Info, Link2, Send, User } from "lucide-react";
+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";
+import { InlineSelectTrigger } from "@open-mercato/ui/primitives/inline-select";
+import { InlineInput } from "@open-mercato/ui/primitives/inline-input";
+import { Checkbox } from "@open-mercato/ui/primitives/checkbox";
+import { CheckboxField } from "@open-mercato/ui/primitives/checkbox-field";
+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 { 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 { 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";
+import { DigitInput } from "@open-mercato/ui/primitives/digit-input";
+import { CardInput } from "@open-mercato/ui/primitives/card-input";
+import { ButtonInput } from "@open-mercato/ui/primitives/button-input";
+import {
+  ColorPicker,
+  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 { IconButton } from "@open-mercato/ui/primitives/icon-button";
+function DemoSearchInput({ size }) {
+  const [value, setValue] = React.useState("open orders");
+  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 }) });
+}
+function DemoCounterInput({
+  initial = 2,
+  step,
+  precision,
+  min,
+  max
+}) {
+  const [value, setValue] = React.useState(initial);
+  return /* @__PURE__ */ jsx("div", { className: "w-36", children: /* @__PURE__ */ jsx(
+    CounterInput,
+    {
+      value,
+      onChange: setValue,
+      step,
+      precision,
+      min,
+      max
+    }
+  ) });
+}
+function DemoCardInput({ initial = "" }) {
+  const [value, setValue] = React.useState(initial);
+  return /* @__PURE__ */ jsx("div", { className: "w-80", children: /* @__PURE__ */ jsx(CardInput, { value, onChange: setValue }) });
+}
+function DemoColorPicker({
+  allowCustom,
+  swatches
+}) {
+  const [color, setColor] = React.useState("#6366F1");
+  return /* @__PURE__ */ jsx(
+    ColorPicker,
+    {
+      value: color,
+      onChange: setColor,
+      allowCustom,
+      swatches,
+      "aria-label": "Pick color"
+    }
+  );
+}
+function DemoTagInput({
+  initial = [],
+  maxTags,
+  placeholder
+}) {
+  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 }) });
+}
+const inputEntry = {
+  id: "input",
+  title: "Input",
+  importPath: "@open-mercato/ui/primitives/input",
+  variants: [
+    {
+      id: "default",
+      title: "default",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(Input, { placeholder: "Product name" }) }),
+      code: `import { Input } from '@open-mercato/ui/primitives/input'
+
+<Input placeholder="Product name" />`
+    },
+    {
+      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" }) })
+      ] }),
+      code: `import { Info, User } from 'lucide-react'
+import { Input } from '@open-mercato/ui/primitives/input'
+
+<Input leftIcon={<User />} placeholder="Assignee" />
+<Input rightIcon={<Info />} placeholder="SKU" />`
+    },
+    {
+      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" }) })
+      ] }),
+      code: `import { Input } from '@open-mercato/ui/primitives/input'
+
+<Input size="lg" placeholder="Large" />
+<Input size="default" placeholder="Default" />
+<Input size="sm" placeholder="Small" />`
+    },
+    {
+      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" }) })
+      ] }),
+      code: `import { Input } from '@open-mercato/ui/primitives/input'
+
+<Input aria-invalid defaultValue="not-a-number" />
+<Input disabled placeholder="Disabled" />`
+    }
+  ]
+};
+const textareaEntry = {
+  id: "textarea",
+  title: "Textarea",
+  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" }) }),
+      code: `import { Textarea } from '@open-mercato/ui/primitives/textarea'
+
+<Textarea placeholder="Internal note for the fulfillment team" />`
+    },
+    {
+      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."
+        }
+      ) }),
+      code: `import { Textarea } from '@open-mercato/ui/primitives/textarea'
+
+<Textarea showCount maxLength={200} defaultValue="Customer prefers delivery after 4 PM." />`
+    },
+    {
+      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" }) })
+      ] }),
+      code: `import { Textarea } from '@open-mercato/ui/primitives/textarea'
+
+<Textarea aria-invalid defaultValue="Too short" />
+<Textarea disabled placeholder="Disabled" />`
+    }
+  ]
+};
+const selectEntry = {
+  id: "select",
+  title: "Select",
+  importPath: "@open-mercato/ui/primitives/select",
+  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>`
+    }
+  ]
+};
+const compactSelectEntry = {
+  id: "compact-select",
+  title: "CompactSelectTrigger",
+  importPath: "@open-mercato/ui/primitives/compact-select",
+  variants: [
+    {
+      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" })
+        ] })
+      ] }) }),
+      code: `import {
+  CompactSelectTrigger,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectValue,
+} from '@open-mercato/ui/primitives/compact-select'
+
+<Select defaultValue="newest">
+  <CompactSelectTrigger triggerLabel="Sort:">
+    <SelectValue />
+  </CompactSelectTrigger>
+  <SelectContent>
+    <SelectItem value="newest">Newest</SelectItem>
+    <SelectItem value="oldest">Oldest</SelectItem>
+    <SelectItem value="value">Highest value</SelectItem>
+  </SelectContent>
+</Select>`
+    },
+    {
+      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" })
+        ] })
+      ] }) }),
+      code: `import {
+  CompactSelectTrigger,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectValue,
+} from '@open-mercato/ui/primitives/compact-select'
+
+<Select defaultValue="table">
+  <CompactSelectTrigger>
+    <SelectValue />
+  </CompactSelectTrigger>
+  <SelectContent>
+    <SelectItem value="table">Table</SelectItem>
+    <SelectItem value="board">Board</SelectItem>
+  </SelectContent>
+</Select>`
+    }
+  ]
+};
+const inlineSelectEntry = {
+  id: "inline-select",
+  title: "InlineSelectTrigger",
+  importPath: "@open-mercato/ui/primitives/inline-select",
+  variants: [
+    {
+      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" })
+        ] })
+      ] }) }),
+      code: `import {
+  InlineSelectTrigger,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectValue,
+} from '@open-mercato/ui/primitives/inline-select'
+
+<Select defaultValue="high">
+  <InlineSelectTrigger>
+    <SelectValue />
+  </InlineSelectTrigger>
+  <SelectContent>
+    <SelectItem value="low">Low</SelectItem>
+    <SelectItem value="medium">Medium</SelectItem>
+    <SelectItem value="high">High</SelectItem>
+  </SelectContent>
+</Select>`
+    },
+    {
+      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" })
+        ] })
+      ] }) }),
+      code: `import {
+  InlineSelectTrigger,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectValue,
+} from '@open-mercato/ui/primitives/inline-select'
+
+<InlineSelectTrigger showBorderOnHover={false}>
+  <SelectValue />
+</InlineSelectTrigger>`
+    }
+  ]
+};
+const inlineInputEntry = {
+  id: "inline-input",
+  title: "InlineInput",
+  importPath: "@open-mercato/ui/primitives/inline-input",
+  variants: [
+    {
+      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" }) }),
+      code: `import { InlineInput } from '@open-mercato/ui/primitives/inline-input'
+
+<InlineInput defaultValue="Aurora desk lamp" aria-label="Product name" onBlur={save} />`
+    },
+    {
+      id: "invisible",
+      title: "Invisible until focus",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-56", children: /* @__PURE__ */ jsx(
+        InlineInput,
+        {
+          showBorderOnHover: false,
+          defaultValue: "SKU-2041",
+          "aria-label": "SKU"
+        }
+      ) }),
+      code: `import { InlineInput } from '@open-mercato/ui/primitives/inline-input'
+
+<InlineInput showBorderOnHover={false} defaultValue="SKU-2041" aria-label="SKU" />`
+    }
+  ]
+};
+const checkboxEntry = {
+  id: "checkbox",
+  title: "Checkbox",
+  importPath: "@open-mercato/ui/primitives/checkbox",
+  variants: [
+    {
+      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" })
+      ] }),
+      code: `import { Checkbox } from '@open-mercato/ui/primitives/checkbox'
+
+<Checkbox />
+<Checkbox defaultChecked />
+<Checkbox checked="indeterminate" />`
+    },
+    {
+      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" })
+      ] }),
+      code: `import { Checkbox } from '@open-mercato/ui/primitives/checkbox'
+
+<Checkbox size="sm" defaultChecked />
+<Checkbox size="md" defaultChecked />`
+    },
+    {
+      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" })
+      ] }),
+      code: `import { Checkbox } from '@open-mercato/ui/primitives/checkbox'
+
+<Checkbox disabled />
+<Checkbox disabled defaultChecked />`
+    }
+  ]
+};
+const checkboxFieldEntry = {
+  id: "checkbox-field",
+  title: "CheckboxField",
+  importPath: "@open-mercato/ui/primitives/checkbox-field",
+  variants: [
+    {
+      id: "default",
+      title: "default",
+      render: () => /* @__PURE__ */ jsx(CheckboxField, { label: "Email notifications", defaultChecked: true }),
+      code: `import { CheckboxField } from '@open-mercato/ui/primitives/checkbox-field'
+
+<CheckboxField label="Email notifications" defaultChecked />`
+    },
+    {
+      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."
+        }
+      ) }),
+      code: `import { CheckboxField } from '@open-mercato/ui/primitives/checkbox-field'
+
+<CheckboxField
+  label="Auto-archive"
+  sublabel="(recommended)"
+  description="Closed conversations move to the archive after 30 days."
+/>`
+    },
+    {
+      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 }) }),
+      code: `import { CheckboxField } from '@open-mercato/ui/primitives/checkbox-field'
+
+<CheckboxField flip label="Include shipping costs" defaultChecked />`
+    }
+  ]
+};
+const radioEntry = {
+  id: "radio",
+  title: "Radio",
+  importPath: "@open-mercato/ui/primitives/radio",
+  keywords: ["radiobutton", "radio button", "option group"],
+  variants: [
+    {
+      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" })
+      ] }),
+      code: `import { Radio, RadioGroup } from '@open-mercato/ui/primitives/radio'
+
+<RadioGroup defaultValue="card" aria-label="Payment method">
+  <Radio value="card" aria-label="Card" />
+  <Radio value="transfer" aria-label="Bank transfer" />
+  <Radio value="cash" aria-label="Cash" />
+</RadioGroup>`
+    },
+    {
+      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" })
+      ] }),
+      code: `import { Radio, RadioGroup } from '@open-mercato/ui/primitives/radio'
+
+<RadioGroup defaultValue="a" disabled>
+  <Radio value="a" />
+  <Radio value="b" />
+</RadioGroup>`
+    }
+  ]
+};
+const radioFieldEntry = {
+  keywords: ["radiobutton", "radio button"],
+  id: "radio-field",
+  title: "RadioField",
+  importPath: "@open-mercato/ui/primitives/radio-field",
+  variants: [
+    {
+      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" })
+      ] }),
+      code: `import { RadioGroup } from '@open-mercato/ui/primitives/radio'
+import { RadioField } from '@open-mercato/ui/primitives/radio-field'
+
+<RadioGroup defaultValue="standard" aria-label="Shipping speed">
+  <RadioField value="standard" label="Standard" />
+  <RadioField value="express" label="Express" />
+</RadioGroup>`
+    },
+    {
+      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."
+          }
+        )
+      ] }) }),
+      code: `import { RadioGroup } from '@open-mercato/ui/primitives/radio'
+import { RadioField } from '@open-mercato/ui/primitives/radio-field'
+
+<RadioGroup defaultValue="invoice" aria-label="Billing">
+  <RadioField value="invoice" label="Invoice" description="Pay within 14 days of delivery." />
+  <RadioField value="prepaid" label="Prepaid" description="Order ships after payment clears." />
+</RadioGroup>`
+    }
+  ]
+};
+const switchEntry = {
+  id: "switch",
+  title: "Switch",
+  importPath: "@open-mercato/ui/primitives/switch",
+  variants: [
+    {
+      id: "states",
+      title: "States",
+      render: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Switch, { "aria-label": "Off" }),
+        /* @__PURE__ */ jsx(Switch, { defaultChecked: true, "aria-label": "On" })
+      ] }),
+      code: `import { Switch } from '@open-mercato/ui/primitives/switch'
+
+<Switch />
+<Switch defaultChecked />`
+    },
+    {
+      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" })
+      ] }),
+      code: `import { Switch } from '@open-mercato/ui/primitives/switch'
+
+<Switch disabled />
+<Switch disabled defaultChecked />`
+    }
+  ]
+};
+const switchFieldEntry = {
+  id: "switch-field",
+  title: "SwitchField",
+  importPath: "@open-mercato/ui/primitives/switch-field",
+  variants: [
+    {
+      id: "default",
+      title: "default (switch right)",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(SwitchField, { label: "Two-factor authentication", defaultChecked: true }) }),
+      code: `import { SwitchField } from '@open-mercato/ui/primitives/switch-field'
+
+<SwitchField label="Two-factor authentication" defaultChecked />`
+    },
+    {
+      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."
+        }
+      ) }),
+      code: `import { SwitchField } from '@open-mercato/ui/primitives/switch-field'
+
+<SwitchField
+  label="Low-stock alerts"
+  description="Notify purchasing when stock drops below the reorder point."
+/>`
+    },
+    {
+      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 }) }),
+      code: `import { SwitchField } from '@open-mercato/ui/primitives/switch-field'
+
+<SwitchField flip label="Sync inventory nightly" defaultChecked />`
+    }
+  ]
+};
+const sliderEntry = {
+  id: "slider",
+  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" }) }),
+      code: `import { Slider } from '@open-mercato/ui/primitives/slider'
+
+<Slider defaultValue={[40]} min={0} max={100} step={5} aria-label="Discount" />`
+    },
+    {
+      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" }) }),
+      code: `import { Slider } from '@open-mercato/ui/primitives/slider'
+
+<Slider defaultValue={[20, 60]} min={0} max={100} aria-label="Price range" />`
+    },
+    {
+      id: "disabled",
+      title: "Disabled",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(Slider, { defaultValue: [45], disabled: true, "aria-label": "Disabled slider" }) }),
+      code: `import { Slider } from '@open-mercato/ui/primitives/slider'
+
+<Slider defaultValue={[45]} disabled />`
+    }
+  ]
+};
+const formFieldEntry = {
+  id: "form-field",
+  title: "FormField",
+  importPath: "@open-mercato/ui/primitives/form-field",
+  variants: [
+    {
+      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" }) }) }),
+      code: `import { FormField } from '@open-mercato/ui/primitives/form-field'
+import { Input } from '@open-mercato/ui/primitives/input'
+
+<FormField label="Warehouse code" description="Short identifier used on labels.">
+  <Input placeholder="WAW-01" />
+</FormField>`
+    },
+    {
+      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." }) }) }),
+      code: `import { FormField } from '@open-mercato/ui/primitives/form-field'
+import { Input } from '@open-mercato/ui/primitives/input'
+
+<FormField label="Company name" required>
+  <Input placeholder="Acme sp. z o.o." />
+</FormField>`
+    },
+    {
+      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" }) }) }),
+      code: `import { FormField } from '@open-mercato/ui/primitives/form-field'
+import { Input } from '@open-mercato/ui/primitives/input'
+
+<FormField label="VAT ID" error="VAT ID must have 10 digits.">
+  <Input defaultValue="52601" />
+</FormField>`
+    },
+    {
+      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 }) }) }),
+      code: `import { FormField } from '@open-mercato/ui/primitives/form-field'
+import { Switch } from '@open-mercato/ui/primitives/switch'
+
+<FormField label="Enable webhooks" orientation="horizontal">
+  <Switch defaultChecked />
+</FormField>`
+    }
+  ]
+};
+const searchInputEntry = {
+  id: "search-input",
+  title: "SearchInput",
+  importPath: "@open-mercato/ui/primitives/search-input",
+  variants: [
+    {
+      id: "default",
+      title: "default (clearable)",
+      render: () => /* @__PURE__ */ jsx(DemoSearchInput, {}),
+      code: `import { SearchInput } from '@open-mercato/ui/primitives/search-input'
+
+const [query, setQuery] = React.useState('')
+
+<SearchInput value={query} onChange={setQuery} />`
+    },
+    {
+      id: "small",
+      title: "Small",
+      render: () => /* @__PURE__ */ jsx(DemoSearchInput, { size: "sm" }),
+      code: `import { SearchInput } from '@open-mercato/ui/primitives/search-input'
+
+<SearchInput size="sm" value={query} onChange={setQuery} />`
+    }
+  ]
+};
+const emailInputEntry = {
+  id: "email-input",
+  title: "EmailInput",
+  importPath: "@open-mercato/ui/primitives/email-input",
+  variants: [
+    {
+      id: "default",
+      title: "default",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(EmailInput, {}) }),
+      code: `import { EmailInput } from '@open-mercato/ui/primitives/email-input'
+
+<EmailInput />`
+    },
+    {
+      id: "no-icon",
+      title: "Without icon",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(EmailInput, { showIcon: false }) }),
+      code: `import { EmailInput } from '@open-mercato/ui/primitives/email-input'
+
+<EmailInput showIcon={false} />`
+    },
+    {
+      id: "invalid",
+      title: "Invalid",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(EmailInput, { "aria-invalid": true, defaultValue: "not-an-email" }) }),
+      code: `import { EmailInput } from '@open-mercato/ui/primitives/email-input'
+
+<EmailInput aria-invalid defaultValue="not-an-email" />`
+    }
+  ]
+};
+const passwordInputEntry = {
+  id: "password-input",
+  title: "PasswordInput",
+  importPath: "@open-mercato/ui/primitives/password-input",
+  variants: [
+    {
+      id: "default",
+      title: "default (reveal toggle)",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(PasswordInput, { defaultValue: "correct-horse-battery", autoComplete: "off" }) }),
+      code: `import { PasswordInput } from '@open-mercato/ui/primitives/password-input'
+
+<PasswordInput autoComplete="current-password" />`
+    },
+    {
+      id: "no-lock",
+      title: "Without lock icon",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(PasswordInput, { showLockIcon: false, autoComplete: "off" }) }),
+      code: `import { PasswordInput } from '@open-mercato/ui/primitives/password-input'
+
+<PasswordInput showLockIcon={false} />`
+    },
+    {
+      id: "disabled",
+      title: "Disabled",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(PasswordInput, { disabled: true, autoComplete: "off" }) }),
+      code: `import { PasswordInput } from '@open-mercato/ui/primitives/password-input'
+
+<PasswordInput disabled />`
+    }
+  ]
+};
+const websiteInputEntry = {
+  id: "website-input",
+  title: "WebsiteInput",
+  importPath: "@open-mercato/ui/primitives/website-input",
+  variants: [
+    {
+      id: "default",
+      title: "default (https:// prefix)",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(WebsiteInput, {}) }),
+      code: `import { WebsiteInput } from '@open-mercato/ui/primitives/website-input'
+
+<WebsiteInput />`
+    },
+    {
+      id: "custom-prefix",
+      title: "Custom prefix",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(WebsiteInput, { prefix: "http://" }) }),
+      code: `import { WebsiteInput } from '@open-mercato/ui/primitives/website-input'
+
+<WebsiteInput prefix="http://" />`
+    },
+    {
+      id: "no-prefix",
+      title: "Without prefix",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(WebsiteInput, { showPrefix: false }) }),
+      code: `import { WebsiteInput } from '@open-mercato/ui/primitives/website-input'
+
+<WebsiteInput showPrefix={false} />`
+    }
+  ]
+};
+const amountInputEntry = {
+  id: "amount-input",
+  title: "AmountInput",
+  importPath: "@open-mercato/ui/primitives/amount-input",
+  variants: [
+    {
+      id: "default",
+      title: "default (currency picker)",
+      render: () => /* @__PURE__ */ jsx(DemoAmountInput, {}),
+      code: `import { AmountInput, type AmountValue } from '@open-mercato/ui/primitives/amount-input'
+
+const [value, setValue] = React.useState<AmountValue>({ amount: '', currency: 'EUR' })
+
+<AmountInput value={value} onChange={setValue} />`
+    },
+    {
+      id: "no-currency",
+      title: "Without currency picker",
+      render: () => /* @__PURE__ */ jsx(DemoAmountInput, { showCurrency: false }),
+      code: `import { AmountInput } from '@open-mercato/ui/primitives/amount-input'
+
+<AmountInput value={value} onChange={setValue} showCurrency={false} />`
+    }
+  ]
+};
+const counterInputEntry = {
+  id: "counter-input",
+  title: "CounterInput",
+  importPath: "@open-mercato/ui/primitives/counter-input",
+  variants: [
+    {
+      id: "default",
+      title: "default",
+      render: () => /* @__PURE__ */ jsx(DemoCounterInput, { min: 0, max: 10 }),
+      code: `import { CounterInput } from '@open-mercato/ui/primitives/counter-input'
+
+const [qty, setQty] = React.useState<number | null>(2)
+
+<CounterInput value={qty} onChange={setQty} min={0} max={10} />`
+    },
+    {
+      id: "step-precision",
+      title: "Step + precision",
+      render: () => /* @__PURE__ */ jsx(DemoCounterInput, { initial: 2.5, step: 0.5, precision: 1, min: 0 }),
+      code: `import { CounterInput } from '@open-mercato/ui/primitives/counter-input'
+
+<CounterInput value={weight} onChange={setWeight} step={0.5} precision={1} min={0} />`
+    },
+    {
+      id: "disabled",
+      title: "Disabled",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-36", children: /* @__PURE__ */ jsx(CounterInput, { value: 5, disabled: true }) }),
+      code: `import { CounterInput } from '@open-mercato/ui/primitives/counter-input'
+
+<CounterInput value={5} disabled />`
+    }
+  ]
+};
+const digitInputEntry = {
+  id: "digit-input",
+  title: "DigitInput",
+  importPath: "@open-mercato/ui/primitives/digit-input",
+  variants: [
+    {
+      id: "default",
+      title: "default (6 cells)",
+      render: () => /* @__PURE__ */ jsx(DigitInput, { "aria-label": "Verification code" }),
+      code: `import { DigitInput } from '@open-mercato/ui/primitives/digit-input'
+
+<DigitInput onComplete={(code) => verify(code)} />`
+    },
+    {
+      id: "masked",
+      title: "Masked (4 cells)",
+      render: () => /* @__PURE__ */ jsx(DigitInput, { length: 4, mask: true, value: "1234", "aria-label": "PIN" }),
+      code: `import { DigitInput } from '@open-mercato/ui/primitives/digit-input'
+
+<DigitInput length={4} mask aria-label="PIN" />`
+    },
+    {
+      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" })
+      ] }),
+      code: `import { DigitInput } from '@open-mercato/ui/primitives/digit-input'
+
+<DigitInput length={4} aria-invalid />
+<DigitInput length={4} disabled />`
+    }
+  ]
+};
+const cardInputEntry = {
+  id: "card-input",
+  title: "CardInput",
+  importPath: "@open-mercato/ui/primitives/card-input",
+  variants: [
+    {
+      id: "default",
+      title: "default (empty)",
+      render: () => /* @__PURE__ */ jsx(DemoCardInput, {}),
+      code: `import { CardInput } from '@open-mercato/ui/primitives/card-input'
+
+const [digits, setDigits] = React.useState('')
+
+<CardInput value={digits} onChange={setDigits} />`
+    },
+    {
+      id: "brand-detected",
+      title: "Brand detected",
+      render: () => /* @__PURE__ */ jsx(DemoCardInput, { initial: "4242424242424242" }),
+      code: `import { CardInput } from '@open-mercato/ui/primitives/card-input'
+
+<CardInput value={digits} onChange={setDigits} onBrandChange={setBrand} />`
+    }
+  ]
+};
+const buttonInputEntry = {
+  id: "button-input",
+  title: "ButtonInput",
+  importPath: "@open-mercato/ui/primitives/button-input",
+  variants: [
+    {
+      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, {}) })
+        }
+      ) }),
+      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'
+
+<ButtonInput
+  readOnly
+  defaultValue="https://app.example.com/i/8f2c"
+  leftIcon={<Link2 />}
+  trailingAction={
+    <IconButton variant="ghost" aria-label="Copy link"><Copy /></IconButton>
+  }
+/>`
+    },
+    {
+      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, {}) })
+        }
+      ) }),
+      code: `import { Send } from 'lucide-react'
+import { ButtonInput } from '@open-mercato/ui/primitives/button-input'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+
+<ButtonInput
+  placeholder="Invite by email"
+  trailingAction={
+    <IconButton variant="ghost" aria-label="Send invite"><Send /></IconButton>
+  }
+/>`
+    }
+  ]
+};
+const colorPickerEntry = {
+  id: "color-picker",
+  title: "ColorPicker",
+  importPath: "@open-mercato/ui/primitives/color-picker",
+  variants: [
+    {
+      id: "default",
+      title: "default",
+      render: () => /* @__PURE__ */ jsx(DemoColorPicker, {}),
+      code: `import { ColorPicker } from '@open-mercato/ui/primitives/color-picker'
+
+const [color, setColor] = React.useState('#6366F1')
+
+<ColorPicker value={color} onChange={setColor} />`
+    },
+    {
+      id: "locked-palette",
+      title: "Locked palette",
+      render: () => /* @__PURE__ */ jsx(
+        DemoColorPicker,
+        {
+          allowCustom: false,
+          swatches: COLOR_PICKER_DEFAULT_SWATCHES.slice(0, 5)
+        }
+      ),
+      code: `import { ColorPicker, COLOR_PICKER_DEFAULT_SWATCHES } from '@open-mercato/ui/primitives/color-picker'
+
+<ColorPicker
+  value={color}
+  onChange={setColor}
+  swatches={COLOR_PICKER_DEFAULT_SWATCHES.slice(0, 5)}
+  allowCustom={false}
+/>`
+    }
+  ]
+};
+const tagInputEntry = {
+  id: "tag-input",
+  title: "TagInput",
+  importPath: "@open-mercato/ui/primitives/tag-input",
+  variants: [
+    {
+      id: "default",
+      title: "default",
+      render: () => /* @__PURE__ */ jsx(DemoTagInput, { initial: ["wholesale", "priority", "eu"], placeholder: "Add tag" }),
+      code: `import { TagInput } from '@open-mercato/ui/primitives/tag-input'
+
+const [tags, setTags] = React.useState<string[]>(['wholesale', 'priority', 'eu'])
+
+<TagInput value={tags} onChange={setTags} placeholder="Add tag" />`
+    },
+    {
+      id: "max-tags",
+      title: "Max tags reached",
+      render: () => /* @__PURE__ */ jsx(DemoTagInput, { initial: ["red", "green", "blue"], maxTags: 3, placeholder: "Add tag" }),
+      code: `import { TagInput } from '@open-mercato/ui/primitives/tag-input'
+
+<TagInput value={tags} onChange={setTags} maxTags={3} />`
+    }
+  ]
+};
+const richEditorEntry = {
+  id: "rich-editor",
+  title: "RichEditor",
+  importPath: "@open-mercato/ui/primitives/rich-editor",
+  variants: [
+    {
+      id: "minimal",
+      title: "minimal",
+      render: () => /* @__PURE__ */ jsx(DemoRichEditor, { variant: "minimal" }),
+      code: `import { RichEditor } from '@open-mercato/ui/primitives/rich-editor'
+
+const [html, setHtml] = React.useState('')
+
+<RichEditor value={html} onChange={setHtml} variant="minimal" />`
+    },
+    {
+      id: "standard",
+      title: "standard",
+      render: () => /* @__PURE__ */ jsx(DemoRichEditor, { variant: "standard" }),
+      code: `import { RichEditor } from '@open-mercato/ui/primitives/rich-editor'
+
+<RichEditor value={html} onChange={setHtml} variant="standard" />`
+    }
+  ]
+};
+const entries = [
+  inputEntry,
+  textareaEntry,
+  selectEntry,
+  compactSelectEntry,
+  inlineSelectEntry,
+  inlineInputEntry,
+  checkboxEntry,
+  checkboxFieldEntry,
+  radioEntry,
+  radioFieldEntry,
+  switchEntry,
+  switchFieldEntry,
+  sliderEntry,
+  formFieldEntry,
+  searchInputEntry,
+  emailInputEntry,
+  passwordInputEntry,
+  websiteInputEntry,
+  amountInputEntry,
+  counterInputEntry,
+  digitInputEntry,
+  cardInputEntry,
+  buttonInputEntry,
+  colorPickerEntry,
+  tagInputEntry,
+  richEditorEntry
+];
+export {
+  entries
+};
+//# sourceMappingURL=inputs.js.map