@open-mercato/ui 0.6.4-develop.4178.1.aad9ddaa95 → 0.6.4-develop.4210.1.d412061cfe

package/dist/primitives/segmented-control.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives/segmented-control.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nimport { cn } from '@open-mercato/shared/lib/utils'\n\n/**\n * iOS-style segmented control per Figma `Switch / Chart / Cryptocurrency`\n * (component set id `199963:1442` in DS Open Mercato). Renders a single\n * track with N items where exactly one is selected at a time. Selecting\n * a new item fires `onValueChange`.\n *\n * Use for **mutually-exclusive view state** \u2014 list page filters like\n * \"All / Active / Archived\", chart period selectors, layout toggles\n * (List / Grid). For *related actions* (each does something different),\n * reach for `ButtonGroup` instead.\n *\n * Built on Radix `RadioGroup` so we inherit the radio-group ARIA contract\n * (`role=\"radiogroup\"`, `role=\"radio\"` on items, arrow-key navigation,\n * roving tabindex) for free. No new dependency \u2014 Radix RadioGroup is\n * already installed via the `Radio` primitive.\n *\n * ```tsx\n * const [view, setView] = React.useState('all')\n * <SegmentedControl value={view} onValueChange={setView} aria-label=\"View filter\">\n *   <SegmentedControlItem value=\"all\">All</SegmentedControlItem>\n *   <SegmentedControlItem value=\"active\">Active</SegmentedControlItem>\n *   <SegmentedControlItem value=\"archived\">Archived</SegmentedControlItem>\n * </SegmentedControl>\n * ```\n *\n * Sizes:\n * - `default` (h-8 / 32px) \u2014 standard toolbar density.\n * - `sm` (h-7 / 28px) \u2014 tighter; pair with `text-xs`.\n */\n\ntype SegmentedControlContextValue = {\n  size: 'sm' | 'default'\n  disabled?: boolean\n}\n\nconst SegmentedControlContext = React.createContext<SegmentedControlContextValue>({\n  size: 'default',\n  disabled: false,\n})\n\nconst trackVariants = cva(\n  // Pill-shaped track with subtle inner padding so selected items render\n  // a smaller inner pill (the iOS slide-thumb effect). Track is muted \u2014\n  // selected item raises with bg-background + shadow-sm. We use full\n  // `bg-muted` (not /40) so the contrast between track and a selected\n  // bg-background item stays visible in the light theme; in dark mode\n  // the token already darkens further so the contrast holds.\n  //\n  // Height math (box-border on every element):\n  //   default \u2192 track h-8 (32px) \u2212 2px border \u2212 2px padding (p-px \u00D72) = 28px \u2192 matches item h-7\n  //   sm      \u2192 track h-7 (28px) \u2212 2px border \u2212 2px padding (p-px \u00D72) = 24px \u2192 matches item h-6\n  // Using `p-0.5` (2px each side = 4px total) instead breaks both sizes by\n  // 2px so the selected pill clips top and bottom against the track border.\n  'inline-flex w-fit gap-0 rounded-full border border-input bg-muted p-px transition-colors',\n  {\n    variants: {\n      size: {\n        sm: 'h-7',\n        default: 'h-8',\n      },\n      disabled: {\n        true: 'cursor-not-allowed opacity-60',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n      disabled: false,\n    },\n  },\n)\n\nconst itemVariants = cva(\n  // Items are pills that fill the track minus its 2px inner padding.\n  // Selected state lifts via bg-background + shadow-sm + font-semibold\n  // (the font-weight bump gives a secondary visual cue beyond color +\n  // shadow, important when the surrounding theme is high-key and the\n  // shadow alone is hard to read). Unselected text is muted; hover\n  // only nudges color (no bg change \u2014 keeps the track flat).\n  'inline-flex items-center justify-center rounded-full font-medium ' +\n    'transition-all outline-none focus-visible:shadow-focus ' +\n    'disabled:cursor-not-allowed disabled:opacity-50 ' +\n    'data-[state=checked]:bg-background data-[state=checked]:text-foreground data-[state=checked]:font-semibold data-[state=checked]:shadow-sm ' +\n    'data-[state=unchecked]:bg-transparent data-[state=unchecked]:text-muted-foreground data-[state=unchecked]:hover:text-foreground',\n  {\n    variants: {\n      size: {\n        sm: 'h-6 px-2.5 text-xs',\n        default: 'h-7 px-3 text-sm',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  },\n)\n\nexport type SegmentedControlProps = Omit<\n  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>,\n  'orientation'\n> &\n  VariantProps<typeof trackVariants> & {\n    /** Optional screen-reader label for the radio group. */\n    'aria-label'?: string\n  }\n\nexport const SegmentedControl = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Root>,\n  SegmentedControlProps\n>(({ className, size, disabled, children, ...props }, ref) => {\n  const ctx = React.useMemo<SegmentedControlContextValue>(\n    () => ({ size: size ?? 'default', disabled: disabled ?? false }),\n    [size, disabled],\n  )\n  return (\n    <SegmentedControlContext.Provider value={ctx}>\n      <RadioGroupPrimitive.Root\n        ref={ref}\n        orientation=\"horizontal\"\n        disabled={disabled ?? undefined}\n        data-slot=\"segmented-control\"\n        className={cn(trackVariants({ size, disabled }), className)}\n        {...props}\n      >\n        {children}\n      </RadioGroupPrimitive.Root>\n    </SegmentedControlContext.Provider>\n  )\n})\nSegmentedControl.displayName = 'SegmentedControl'\n\nexport type SegmentedControlItemProps = React.ComponentPropsWithoutRef<\n  typeof RadioGroupPrimitive.Item\n>\n\nexport const SegmentedControlItem = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Item>,\n  SegmentedControlItemProps\n>(({ className, children, ...props }, ref) => {\n  const { size } = React.useContext(SegmentedControlContext)\n  return (\n    <RadioGroupPrimitive.Item\n      ref={ref}\n      data-slot=\"segmented-control-item\"\n      className={cn(itemVariants({ size }), className)}\n      {...props}\n    >\n      {children}\n    </RadioGroupPrimitive.Item>\n  )\n})\nSegmentedControlItem.displayName = 'SegmentedControlItem'\n\nexport { trackVariants as segmentedControlTrackVariants, itemVariants as segmentedControlItemVariants }\n"],
+  "mappings": ";AA4HM;AA1HN,YAAY,WAAW;AACvB,YAAY,yBAAyB;AACrC,SAAS,WAA8B;AAEvC,SAAS,UAAU;AAqCnB,MAAM,0BAA0B,MAAM,cAA4C;AAAA,EAChF,MAAM;AAAA,EACN,UAAU;AACZ,CAAC;AAED,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAapB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,MACA,UAAU;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,UAAU;AAAA,IACZ;AAAA,EACF;AACF;AAEA,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOnB;AAAA,EAKA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAWO,MAAM,mBAAmB,MAAM,WAGpC,CAAC,EAAE,WAAW,MAAM,UAAU,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC5D,QAAM,MAAM,MAAM;AAAA,IAChB,OAAO,EAAE,MAAM,QAAQ,WAAW,UAAU,YAAY,MAAM;AAAA,IAC9D,CAAC,MAAM,QAAQ;AAAA,EACjB;AACA,SACE,oBAAC,wBAAwB,UAAxB,EAAiC,OAAO,KACvC;AAAA,IAAC,oBAAoB;AAAA,IAApB;AAAA,MACC;AAAA,MACA,aAAY;AAAA,MACZ,UAAU,YAAY;AAAA,MACtB,aAAU;AAAA,MACV,WAAW,GAAG,cAAc,EAAE,MAAM,SAAS,CAAC,GAAG,SAAS;AAAA,MACzD,GAAG;AAAA,MAEH;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AACD,iBAAiB,cAAc;AAMxB,MAAM,uBAAuB,MAAM,WAGxC,CAAC,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC5C,QAAM,EAAE,KAAK,IAAI,MAAM,WAAW,uBAAuB;AACzD,SACE;AAAA,IAAC,oBAAoB;AAAA,IAApB;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,WAAW,GAAG,aAAa,EAAE,KAAK,CAAC,GAAG,SAAS;AAAA,MAC9C,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ,CAAC;AACD,qBAAqB,cAAc;",
+  "names": []
+}

package/dist/primitives/separator.js

@@ -1,7 +1,106 @@
-import { jsx } from "react/jsx-runtime";
-function Separator({ className = "", orientation = "horizontal" }) {
-  const base = orientation === "vertical" ? "w-px h-full" : "h-px w-full";
-  return /* @__PURE__ */ jsx("div", { role: "separator", "aria-orientation": orientation, className: `${base} bg-border ${className}` });
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@open-mercato/shared/lib/utils";
+const HORIZONTAL_RULE_CLASSES = {
+  solid: "h-px bg-border",
+  dashed: "h-0 border-t border-dashed border-border"
+};
+const HORIZONTAL_LABELED_SEGMENT = {
+  solid: "h-px bg-border",
+  dashed: "h-0 border-t border-dashed border-border"
+};
+const VERTICAL_RULE_CLASSES = {
+  solid: "w-px bg-border",
+  dashed: "w-0 border-l border-dashed border-border"
+};
+function Separator({
+  className = "",
+  orientation = "horizontal",
+  variant = "solid",
+  label,
+  labelAlign = "center",
+  section = false,
+  children
+}) {
+  if (section) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "separator",
+        "data-slot": "separator",
+        "data-variant": "section",
+        "aria-orientation": "horizontal",
+        className: cn(
+          "w-full bg-muted px-3 py-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground",
+          className
+        ),
+        children: label ?? children
+      }
+    );
+  }
+  if (orientation === "vertical") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "separator",
+        "aria-orientation": "vertical",
+        "data-slot": "separator",
+        "data-variant": variant,
+        className: cn("h-full", VERTICAL_RULE_CLASSES[variant], className)
+      }
+    );
+  }
+  if (label !== void 0) {
+    const startSpan = labelAlign === "start" ? "w-6" : "flex-1";
+    const endSpan = labelAlign === "end" ? "w-6" : "flex-1";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "separator",
+        "aria-orientation": "horizontal",
+        "data-slot": "separator",
+        "data-variant": variant,
+        "data-label-align": labelAlign,
+        className: cn("flex w-full items-center gap-3", className),
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              "data-slot": "separator-rule",
+              className: cn("shrink-0", HORIZONTAL_LABELED_SEGMENT[variant], startSpan)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "separator-label",
+              className: "shrink-0 text-xs font-medium uppercase tracking-wide text-muted-foreground",
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              "data-slot": "separator-rule",
+              className: cn("shrink-0", HORIZONTAL_LABELED_SEGMENT[variant], endSpan)
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "separator",
+      "aria-orientation": "horizontal",
+      "data-slot": "separator",
+      "data-variant": variant,
+      className: cn("w-full", HORIZONTAL_RULE_CLASSES[variant], className)
+    }
+  );
 }
 export {
   Separator

package/dist/primitives/separator.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/primitives/separator.tsx"],
-  "sourcesContent": ["import * as React from 'react'\n\nexport function Separator({ className = '', orientation = 'horizontal' }: { className?: string; orientation?: 'horizontal' | 'vertical' }) {\n  const base = orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full'\n  return <div role=\"separator\" aria-orientation={orientation} className={`${base} bg-border ${className}`} />\n}\n\n"],
-  "mappings": "AAIS;AAFF,SAAS,UAAU,EAAE,YAAY,IAAI,cAAc,aAAa,GAAoE;AACzI,QAAM,OAAO,gBAAgB,aAAa,gBAAgB;AAC1D,SAAO,oBAAC,SAAI,MAAK,aAAY,oBAAkB,aAAa,WAAW,GAAG,IAAI,cAAc,SAAS,IAAI;AAC3G;",
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\n\nimport { cn } from '@open-mercato/shared/lib/utils'\n\n/**\n * Visual divider \u2014 horizontal or vertical. Phase B.3 rewrite (Figma\n * `Content Divider` page, componentSet `414:4401`) keeps the original\n * bare-rule API and adds the labeled / dashed / section variants.\n *\n * ## Backward compatibility (5 import sites)\n *\n * All five existing consumers pass `<Separator />` or `<Separator\n * className=\"my-4\" />` and keep working verbatim:\n *\n *   customers/.../companies/[id]/page.tsx\n *   workflows/.../tasks/[id]/page.tsx\n *   workflows/components/EdgeEditDialog.tsx\n *   workflows/components/mobile/MobileTaskForm.tsx\n *   data_sync/.../data-sync/page.tsx\n *\n * ## Variants per Figma `Content Divider [1.1]`\n *\n *   plain          \u2014 `<Separator />`\n *   labeled        \u2014 `<Separator label=\"OR\" />`\n *   labeled start  \u2014 `<Separator label=\"OR\" labelAlign=\"start\" />`\n *   section header \u2014 `<Separator section>AMOUNT & ACCOUNT</Separator>`\n *   dashed         \u2014 `<Separator variant=\"dashed\" />`\n *\n * For the \"rule + center button overlay\" examples (Figma variants\n * 6-9 \u2014 `+` button, navigation, \"Add\" button, button row) the\n * primitive ships only the rule. Wrap your buttons in a parent\n * positioned over the separator at the consumer level \u2014 adding an\n * `overlay` slot to the primitive would multiply layout failure\n * modes (button width, button height, button spacing) far more\n * than the small win of saving the consumer wrap.\n */\n\nexport type SeparatorProps = {\n  className?: string\n  orientation?: 'horizontal' | 'vertical'\n  /** Visual style of the rule. */\n  variant?: 'solid' | 'dashed'\n  /** Optional inline label. When set, the primitive renders as two\n   * rule halves with the label between them (horizontal only).\n   * Ignored for vertical orientation \u2014 pass plain children inside a\n   * vertical flex container instead. */\n  label?: React.ReactNode\n  /** Alignment of the label between the two rule halves.\n   * @default 'center' */\n  labelAlign?: 'center' | 'start' | 'end'\n  /** Section-header style \u2014 full-width bg-muted strip + uppercase\n   * label (Figma variant 5: \"AMOUNT & ACCOUNT\" content header). When\n   * `section` is true the `label` prop is rendered inside the strip;\n   * or pass content via `children`. Mutually exclusive with\n   * `label`/`labelAlign` (those use the inline-rule style). */\n  section?: boolean\n  /** Children \u2014 only consumed when `section` is true (the strip\n   * label can be JSX). Ignored for non-section variants. */\n  children?: React.ReactNode\n}\n\n// `solid` keeps the legacy `bg-border` painted-line approach for\n// max backward compat with any consumers relying on box-model sizing.\n// `dashed` requires `border-style` so it falls back to `border-t`\n// with the painted line dropped via `h-0`.\nconst HORIZONTAL_RULE_CLASSES: Record<'solid' | 'dashed', string> = {\n  solid: 'h-px bg-border',\n  dashed: 'h-0 border-t border-dashed border-border',\n}\n\nconst HORIZONTAL_LABELED_SEGMENT: Record<'solid' | 'dashed', string> = {\n  solid: 'h-px bg-border',\n  dashed: 'h-0 border-t border-dashed border-border',\n}\n\nconst VERTICAL_RULE_CLASSES: Record<'solid' | 'dashed', string> = {\n  solid: 'w-px bg-border',\n  dashed: 'w-0 border-l border-dashed border-border',\n}\n\nexport function Separator({\n  className = '',\n  orientation = 'horizontal',\n  variant = 'solid',\n  label,\n  labelAlign = 'center',\n  section = false,\n  children,\n}: SeparatorProps) {\n  // ---- Section header variant (Figma 5: AMOUNT & ACCOUNT) ----------\n  if (section) {\n    return (\n      <div\n        role=\"separator\"\n        data-slot=\"separator\"\n        data-variant=\"section\"\n        aria-orientation=\"horizontal\"\n        className={cn(\n          'w-full bg-muted px-3 py-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground',\n          className,\n        )}\n      >\n        {label ?? children}\n      </div>\n    )\n  }\n\n  // ---- Vertical rule (no label support \u2014 Figma doesn't ship that\n  // pattern) -----------------------------------------------------------\n  if (orientation === 'vertical') {\n    return (\n      <div\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        data-slot=\"separator\"\n        data-variant={variant}\n        className={cn('h-full', VERTICAL_RULE_CLASSES[variant], className)}\n      />\n    )\n  }\n\n  // ---- Horizontal rule with optional inline label -------------------\n  if (label !== undefined) {\n    const startSpan = labelAlign === 'start' ? 'w-6' : 'flex-1'\n    const endSpan = labelAlign === 'end' ? 'w-6' : 'flex-1'\n    return (\n      <div\n        role=\"separator\"\n        aria-orientation=\"horizontal\"\n        data-slot=\"separator\"\n        data-variant={variant}\n        data-label-align={labelAlign}\n        className={cn('flex w-full items-center gap-3', className)}\n      >\n        <span\n          aria-hidden=\"true\"\n          data-slot=\"separator-rule\"\n          className={cn('shrink-0', HORIZONTAL_LABELED_SEGMENT[variant], startSpan)}\n        />\n        <span\n          data-slot=\"separator-label\"\n          className=\"shrink-0 text-xs font-medium uppercase tracking-wide text-muted-foreground\"\n        >\n          {label}\n        </span>\n        <span\n          aria-hidden=\"true\"\n          data-slot=\"separator-rule\"\n          className={cn('shrink-0', HORIZONTAL_LABELED_SEGMENT[variant], endSpan)}\n        />\n      </div>\n    )\n  }\n\n  // ---- Plain horizontal rule (original bare-line look) -------------\n  return (\n    <div\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n      data-slot=\"separator\"\n      data-variant={variant}\n      className={cn('w-full', HORIZONTAL_RULE_CLASSES[variant], className)}\n    />\n  )\n}\n"],
+  "mappings": ";AA8FM,cAkCA,YAlCA;AA1FN,SAAS,UAAU;AA+DnB,MAAM,0BAA8D;AAAA,EAClE,OAAO;AAAA,EACP,QAAQ;AACV;AAEA,MAAM,6BAAiE;AAAA,EACrE,OAAO;AAAA,EACP,QAAQ;AACV;AAEA,MAAM,wBAA4D;AAAA,EAChE,OAAO;AAAA,EACP,QAAQ;AACV;AAEO,SAAS,UAAU;AAAA,EACxB,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,UAAU;AAAA,EACV;AAAA,EACA,aAAa;AAAA,EACb,UAAU;AAAA,EACV;AACF,GAAmB;AAEjB,MAAI,SAAS;AACX,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,aAAU;AAAA,QACV,gBAAa;AAAA,QACb,oBAAiB;AAAA,QACjB,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QAEC,mBAAS;AAAA;AAAA,IACZ;AAAA,EAEJ;AAIA,MAAI,gBAAgB,YAAY;AAC9B,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,oBAAiB;AAAA,QACjB,aAAU;AAAA,QACV,gBAAc;AAAA,QACd,WAAW,GAAG,UAAU,sBAAsB,OAAO,GAAG,SAAS;AAAA;AAAA,IACnE;AAAA,EAEJ;AAGA,MAAI,UAAU,QAAW;AACvB,UAAM,YAAY,eAAe,UAAU,QAAQ;AACnD,UAAM,UAAU,eAAe,QAAQ,QAAQ;AAC/C,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,oBAAiB;AAAA,QACjB,aAAU;AAAA,QACV,gBAAc;AAAA,QACd,oBAAkB;AAAA,QAClB,WAAW,GAAG,kCAAkC,SAAS;AAAA,QAEzD;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,eAAY;AAAA,cACZ,aAAU;AAAA,cACV,WAAW,GAAG,YAAY,2BAA2B,OAAO,GAAG,SAAS;AAAA;AAAA,UAC1E;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,aAAU;AAAA,cACV,WAAU;AAAA,cAET;AAAA;AAAA,UACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,eAAY;AAAA,cACZ,aAAU;AAAA,cACV,WAAW,GAAG,YAAY,2BAA2B,OAAO,GAAG,OAAO;AAAA;AAAA,UACxE;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AAGA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,oBAAiB;AAAA,MACjB,aAAU;AAAA,MACV,gBAAc;AAAA,MACd,WAAW,GAAG,UAAU,wBAAwB,OAAO,GAAG,SAAS;AAAA;AAAA,EACrE;AAEJ;",
   "names": []
 }

package/dist/primitives/slider.js

@@ -0,0 +1,115 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { cva } from "class-variance-authority";
+import { cn } from "@open-mercato/shared/lib/utils";
+const sliderRootVariants = cva(
+  // Disabled cursor + greyed body via explicit disabled colors on the
+  // range and thumb (NOT a blanket opacity — opacity over indigo would
+  // bleed a faded indigo through the thumb, which the Figma disabled
+  // state explicitly avoids).
+  "relative flex w-full touch-none select-none items-center data-[disabled]:cursor-not-allowed",
+  {
+    variants: {
+      orientation: {
+        horizontal: "h-5",
+        vertical: "h-full w-5 flex-col"
+      }
+    },
+    defaultVariants: { orientation: "horizontal" }
+  }
+);
+const sliderTrackVariants = cva(
+  "relative grow overflow-hidden rounded-full bg-muted",
+  {
+    variants: {
+      orientation: {
+        horizontal: "h-1.5 w-full",
+        vertical: "w-1.5 h-full"
+      }
+    },
+    defaultVariants: { orientation: "horizontal" }
+  }
+);
+const sliderRangeVariants = cva(
+  // Enabled: indigo brand color (Figma `#6366F1`). Disabled: collapse to
+  // a neutral mid-grey so the range visually merges with the track (the
+  // Figma disabled state shows no indigo bleed at all).
+  "absolute rounded-full bg-accent-indigo data-[disabled]:bg-muted-foreground/25",
+  {
+    variants: {
+      orientation: {
+        horizontal: "h-full",
+        vertical: "w-full"
+      }
+    },
+    defaultVariants: { orientation: "horizontal" }
+  }
+);
+const sliderThumbVariants = cva(
+  // Figma `Slider [1.1]` (componentSet 2617:1169):
+  //
+  //   Enabled state — 16×16 white circle with NO outer stroke and a
+  //     centered 6×6 indigo dot. Separation from the track comes from a
+  //     drop shadow, not a border. Outer = `bg-background` + `shadow-sm`,
+  //     inner dot via `::after` so the thumb stays a single DOM node.
+  //
+  //   Disabled state — same 16×16 white circle but now with a thin grey
+  //     ring (the shadow is dropped entirely) and a grey inner dot. The
+  //     border is what makes the thumb still legible against the track
+  //     when shadow + indigo are both gone.
+  "relative block size-4 rounded-full bg-background shadow-sm transition-shadow after:content-[''] after:absolute after:left-1/2 after:top-1/2 after:size-1.5 after:-translate-x-1/2 after:-translate-y-1/2 after:rounded-full after:bg-accent-indigo hover:shadow-md focus-visible:outline-none focus-visible:shadow-focus data-[disabled]:pointer-events-none data-[disabled]:shadow-none data-[disabled]:border data-[disabled]:border-muted-foreground/30 data-[disabled]:after:bg-muted-foreground/40"
+);
+const Slider = React.forwardRef(({ className, orientation, value, defaultValue, ...props }, ref) => {
+  const thumbCount = (() => {
+    const v = value ?? defaultValue;
+    if (Array.isArray(v) && v.length > 0) return v.length;
+    return 1;
+  })();
+  return /* @__PURE__ */ jsxs(
+    SliderPrimitive.Root,
+    {
+      ref,
+      orientation: orientation ?? "horizontal",
+      value,
+      defaultValue,
+      "data-slot": "slider-root",
+      className: cn(sliderRootVariants({ orientation }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          SliderPrimitive.Track,
+          {
+            "data-slot": "slider-track",
+            className: cn(sliderTrackVariants({ orientation })),
+            children: /* @__PURE__ */ jsx(
+              SliderPrimitive.Range,
+              {
+                "data-slot": "slider-range",
+                className: cn(sliderRangeVariants({ orientation }))
+              }
+            )
+          }
+        ),
+        Array.from({ length: thumbCount }).map((_, index) => /* @__PURE__ */ jsx(
+          SliderPrimitive.Thumb,
+          {
+            "data-slot": "slider-thumb",
+            className: cn(sliderThumbVariants())
+          },
+          index
+        ))
+      ]
+    }
+  );
+});
+Slider.displayName = "Slider";
+export {
+  Slider,
+  sliderRangeVariants,
+  sliderRootVariants,
+  sliderThumbVariants,
+  sliderTrackVariants
+};
+//# sourceMappingURL=slider.js.map

package/dist/primitives/slider.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives/slider.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport * as SliderPrimitive from '@radix-ui/react-slider'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nimport { cn } from '@open-mercato/shared/lib/utils'\n\n/**\n * Numeric value selector \u2014 single value or two-thumb range. Used for price\n * ranges, quantity selectors, opacity / brightness controls, threshold\n * configuration. Built on Radix `@radix-ui/react-slider` so we inherit\n * the slider ARIA contract (`role=\"slider\"`, `aria-valuemin/max/now`,\n * keyboard arrow / home / end navigation, RTL flip).\n *\n * No dedicated Figma node in the DS Open Mercato library at the time\n * this primitive was authored \u2014 `Level Slider` in the file is an emoji\n * icon, not a track-thumb component. Styling inferred from DS tokens\n * (primary brand on the selected portion, muted track, contrasting\n * thumb with focus ring) \u2014 see R4 in the v5 spec for the\n * inferred-design protocol.\n *\n * Single thumb:\n *\n * ```tsx\n * const [v, setV] = React.useState([20])\n * <Slider value={v} onValueChange={setV} min={0} max={100} step={5} />\n * ```\n *\n * Range (two thumbs):\n *\n * ```tsx\n * const [range, setRange] = React.useState([10, 60])\n * <Slider value={range} onValueChange={setRange} aria-label=\"Price range\" />\n * ```\n *\n * Optional `aria-label` should be provided when the slider's purpose\n * is not obvious from surrounding context.\n */\n\nconst sliderRootVariants = cva(\n  // Disabled cursor + greyed body via explicit disabled colors on the\n  // range and thumb (NOT a blanket opacity \u2014 opacity over indigo would\n  // bleed a faded indigo through the thumb, which the Figma disabled\n  // state explicitly avoids).\n  'relative flex w-full touch-none select-none items-center data-[disabled]:cursor-not-allowed',\n  {\n    variants: {\n      orientation: {\n        horizontal: 'h-5',\n        vertical: 'h-full w-5 flex-col',\n      },\n    },\n    defaultVariants: { orientation: 'horizontal' },\n  },\n)\n\nconst sliderTrackVariants = cva(\n  'relative grow overflow-hidden rounded-full bg-muted',\n  {\n    variants: {\n      orientation: {\n        horizontal: 'h-1.5 w-full',\n        vertical: 'w-1.5 h-full',\n      },\n    },\n    defaultVariants: { orientation: 'horizontal' },\n  },\n)\n\nconst sliderRangeVariants = cva(\n  // Enabled: indigo brand color (Figma `#6366F1`). Disabled: collapse to\n  // a neutral mid-grey so the range visually merges with the track (the\n  // Figma disabled state shows no indigo bleed at all).\n  'absolute rounded-full bg-accent-indigo data-[disabled]:bg-muted-foreground/25',\n  {\n    variants: {\n      orientation: {\n        horizontal: 'h-full',\n        vertical: 'w-full',\n      },\n    },\n    defaultVariants: { orientation: 'horizontal' },\n  },\n)\n\nconst sliderThumbVariants = cva(\n  // Figma `Slider [1.1]` (componentSet 2617:1169):\n  //\n  //   Enabled state \u2014 16\u00D716 white circle with NO outer stroke and a\n  //     centered 6\u00D76 indigo dot. Separation from the track comes from a\n  //     drop shadow, not a border. Outer = `bg-background` + `shadow-sm`,\n  //     inner dot via `::after` so the thumb stays a single DOM node.\n  //\n  //   Disabled state \u2014 same 16\u00D716 white circle but now with a thin grey\n  //     ring (the shadow is dropped entirely) and a grey inner dot. The\n  //     border is what makes the thumb still legible against the track\n  //     when shadow + indigo are both gone.\n  'relative block size-4 rounded-full bg-background shadow-sm transition-shadow ' +\n    \"after:content-[''] after:absolute after:left-1/2 after:top-1/2 after:size-1.5 after:-translate-x-1/2 after:-translate-y-1/2 after:rounded-full after:bg-accent-indigo \" +\n    'hover:shadow-md ' +\n    'focus-visible:outline-none focus-visible:shadow-focus ' +\n    'data-[disabled]:pointer-events-none data-[disabled]:shadow-none data-[disabled]:border data-[disabled]:border-muted-foreground/30 ' +\n    'data-[disabled]:after:bg-muted-foreground/40',\n)\n\nexport type SliderProps = React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> &\n  VariantProps<typeof sliderRootVariants>\n\nexport const Slider = React.forwardRef<\n  React.ElementRef<typeof SliderPrimitive.Root>,\n  SliderProps\n>(({ className, orientation, value, defaultValue, ...props }, ref) => {\n  // Derive the number of thumbs from the value/defaultValue length so we\n  // render the right number of `Thumb` nodes. Radix supports both\n  // single-thumb and range; the dom-level pattern is identical apart\n  // from the count of thumb children.\n  const thumbCount = (() => {\n    const v = (value ?? defaultValue) as number[] | undefined\n    if (Array.isArray(v) && v.length > 0) return v.length\n    return 1\n  })()\n\n  return (\n    <SliderPrimitive.Root\n      ref={ref}\n      orientation={orientation ?? 'horizontal'}\n      value={value}\n      defaultValue={defaultValue}\n      data-slot=\"slider-root\"\n      className={cn(sliderRootVariants({ orientation }), className)}\n      {...props}\n    >\n      <SliderPrimitive.Track\n        data-slot=\"slider-track\"\n        className={cn(sliderTrackVariants({ orientation }))}\n      >\n        <SliderPrimitive.Range\n          data-slot=\"slider-range\"\n          className={cn(sliderRangeVariants({ orientation }))}\n        />\n      </SliderPrimitive.Track>\n      {Array.from({ length: thumbCount }).map((_, index) => (\n        <SliderPrimitive.Thumb\n          key={index}\n          data-slot=\"slider-thumb\"\n          className={cn(sliderThumbVariants())}\n        />\n      ))}\n    </SliderPrimitive.Root>\n  )\n})\nSlider.displayName = 'Slider'\n\nexport {\n  sliderRootVariants,\n  sliderTrackVariants,\n  sliderRangeVariants,\n  sliderThumbVariants,\n}\n"],
+  "mappings": ";AA4HI,SAaI,KAbJ;AA1HJ,YAAY,WAAW;AACvB,YAAY,qBAAqB;AACjC,SAAS,WAA8B;AAEvC,SAAS,UAAU;AAkCnB,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA,EAKzB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,aAAa;AAAA,QACX,YAAY;AAAA,QACZ,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,aAAa,aAAa;AAAA,EAC/C;AACF;AAEA,MAAM,sBAAsB;AAAA,EAC1B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,aAAa;AAAA,QACX,YAAY;AAAA,QACZ,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,aAAa,aAAa;AAAA,EAC/C;AACF;AAEA,MAAM,sBAAsB;AAAA;AAAA;AAAA;AAAA,EAI1B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,aAAa;AAAA,QACX,YAAY;AAAA,QACZ,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,aAAa,aAAa;AAAA,EAC/C;AACF;AAEA,MAAM,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAY1B;AAMF;AAKO,MAAM,SAAS,MAAM,WAG1B,CAAC,EAAE,WAAW,aAAa,OAAO,cAAc,GAAG,MAAM,GAAG,QAAQ;AAKpE,QAAM,cAAc,MAAM;AACxB,UAAM,IAAK,SAAS;AACpB,QAAI,MAAM,QAAQ,CAAC,KAAK,EAAE,SAAS,EAAG,QAAO,EAAE;AAC/C,WAAO;AAAA,EACT,GAAG;AAEH,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC;AAAA,MACA,aAAa,eAAe;AAAA,MAC5B;AAAA,MACA;AAAA,MACA,aAAU;AAAA,MACV,WAAW,GAAG,mBAAmB,EAAE,YAAY,CAAC,GAAG,SAAS;AAAA,MAC3D,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC,gBAAgB;AAAA,UAAhB;AAAA,YACC,aAAU;AAAA,YACV,WAAW,GAAG,oBAAoB,EAAE,YAAY,CAAC,CAAC;AAAA,YAElD;AAAA,cAAC,gBAAgB;AAAA,cAAhB;AAAA,gBACC,aAAU;AAAA,gBACV,WAAW,GAAG,oBAAoB,EAAE,YAAY,CAAC,CAAC;AAAA;AAAA,YACpD;AAAA;AAAA,QACF;AAAA,QACC,MAAM,KAAK,EAAE,QAAQ,WAAW,CAAC,EAAE,IAAI,CAAC,GAAG,UAC1C;AAAA,UAAC,gBAAgB;AAAA,UAAhB;AAAA,YAEC,aAAU;AAAA,YACV,WAAW,GAAG,oBAAoB,CAAC;AAAA;AAAA,UAF9B;AAAA,QAGP,CACD;AAAA;AAAA;AAAA,EACH;AAEJ,CAAC;AACD,OAAO,cAAc;",
+  "names": []
+}

package/dist/primitives/step-indicator.js

@@ -0,0 +1,187 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Check, ChevronRight, X } from "lucide-react";
+import { cva } from "class-variance-authority";
+import { cn } from "@open-mercato/shared/lib/utils";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+const rootVariants = cva("flex", {
+  variants: {
+    orientation: {
+      horizontal: "flex-row items-center gap-4",
+      vertical: "flex-col items-stretch gap-2"
+    }
+  },
+  defaultVariants: { orientation: "horizontal" }
+});
+const horizontalItemVariants = cva("inline-flex items-center gap-2", {
+  variants: {
+    status: {
+      pending: "",
+      current: "",
+      complete: "",
+      error: ""
+    }
+  },
+  defaultVariants: { status: "pending" }
+});
+const verticalItemVariants = cva(
+  "inline-flex items-center gap-2.5 rounded-lg px-3 py-2 transition-colors w-full",
+  {
+    variants: {
+      status: {
+        pending: "bg-muted/40",
+        current: "bg-background ring-1 ring-border",
+        complete: "bg-muted/40",
+        error: "bg-status-error-bg ring-1 ring-status-error-border"
+      }
+    },
+    defaultVariants: { status: "pending" }
+  }
+);
+const dotVariants = cva(
+  "relative z-10 inline-flex shrink-0 items-center justify-center rounded-full transition-colors",
+  {
+    variants: {
+      size: {
+        sm: "size-4",
+        default: "size-5"
+      },
+      status: {
+        pending: "border border-muted-foreground/30 bg-background",
+        current: "bg-accent-indigo text-accent-indigo-foreground",
+        complete: "bg-status-success-icon text-status-success-bg",
+        error: "bg-status-error-icon text-status-error-bg"
+      }
+    },
+    defaultVariants: { size: "default", status: "pending" }
+  }
+);
+const labelVariants = cva("text-sm leading-tight", {
+  variants: {
+    status: {
+      pending: "text-muted-foreground",
+      current: "text-foreground font-medium",
+      complete: "text-muted-foreground",
+      error: "text-status-error-text font-medium"
+    }
+  },
+  defaultVariants: { status: "pending" }
+});
+const DEFAULT_CLICKABLE = ["complete", "current"];
+function renderDotContent(status) {
+  if (status === "complete") return /* @__PURE__ */ jsx(Check, { "aria-hidden": "true", className: "size-3" });
+  if (status === "error") return /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-3" });
+  return null;
+}
+const StepIndicator = React.forwardRef(
+  ({
+    className,
+    steps,
+    orientation,
+    size,
+    onStepClick,
+    clickableStatuses = DEFAULT_CLICKABLE,
+    ...props
+  }, ref) => {
+    const t = useT();
+    const isVertical = orientation === "vertical";
+    const interactive = typeof onStepClick === "function";
+    return /* @__PURE__ */ jsx(
+      "ol",
+      {
+        ref,
+        "data-slot": "step-indicator",
+        "aria-orientation": isVertical ? "vertical" : "horizontal",
+        className: cn(rootVariants({ orientation }), className),
+        ...props,
+        children: steps.map((step, index) => {
+          const isLast = index === steps.length - 1;
+          const canClick = interactive && clickableStatuses.includes(step.status);
+          const dotNode = /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "step-indicator-dot",
+              "data-status": step.status,
+              className: cn(dotVariants({ size, status: step.status })),
+              "aria-current": step.status === "current" ? "step" : void 0,
+              children: renderDotContent(step.status)
+            }
+          );
+          const labelNode = /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx("span", { className: cn(labelVariants({ status: step.status })), children: step.label }),
+            step.description && isVertical ? /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-xs text-muted-foreground leading-tight", children: step.description }) : null
+          ] });
+          const verticalTrailingChevron = isVertical && step.status === "current" ? /* @__PURE__ */ jsx(
+            ChevronRight,
+            {
+              "aria-hidden": "true",
+              className: "ml-auto size-4 text-muted-foreground"
+            }
+          ) : null;
+          const itemBody = isVertical ? /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn(
+                verticalItemVariants({ status: step.status }),
+                canClick && "cursor-pointer"
+              ),
+              children: [
+                dotNode,
+                labelNode,
+                verticalTrailingChevron
+              ]
+            }
+          ) : /* @__PURE__ */ jsxs("span", { className: cn(horizontalItemVariants({ status: step.status })), children: [
+            dotNode,
+            labelNode
+          ] });
+          return /* @__PURE__ */ jsxs(
+            "li",
+            {
+              "data-slot": "step-indicator-item",
+              "data-status": step.status,
+              className: cn(
+                isVertical ? "list-none" : "flex items-center gap-4 list-none"
+              ),
+              children: [
+                canClick ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => onStepClick?.(step.id),
+                    "aria-label": t("ui.stepIndicator.goToStep.ariaLabel", "Go to step: {label}", { label: step.label }),
+                    className: cn(
+                      "inline-flex items-center gap-2",
+                      isVertical && "w-full",
+                      "rounded-md outline-none focus-visible:shadow-focus text-left"
+                    ),
+                    children: itemBody
+                  }
+                ) : itemBody,
+                !isVertical && !isLast ? /* @__PURE__ */ jsx(
+                  ChevronRight,
+                  {
+                    "aria-hidden": "true",
+                    "data-slot": "step-indicator-connector",
+                    className: "size-4 shrink-0 text-muted-foreground/50"
+                  }
+                ) : null
+              ]
+            },
+            step.id
+          );
+        })
+      }
+    );
+  }
+);
+StepIndicator.displayName = "StepIndicator";
+export {
+  StepIndicator,
+  dotVariants as stepIndicatorDotVariants,
+  horizontalItemVariants as stepIndicatorHorizontalItemVariants,
+  rootVariants as stepIndicatorRootVariants,
+  verticalItemVariants as stepIndicatorVerticalItemVariants
+};
+//# sourceMappingURL=step-indicator.js.map

package/dist/primitives/step-indicator.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives/step-indicator.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { Check, ChevronRight, X } from 'lucide-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\n\n/**\n * Multi-step progress indicator for wizards, onboarding flows, checkout\n * funnels.\n *\n * Anchored on Figma:\n * - `Step Indicator Horizontal [1.1]` (DS OM componentSet `3507:28`) \u2014\n *   horizontal flow: each item followed by a chevron-right icon\n *   connector except the last item, which has no trailing connector\n * - `Step Indicator Horizontal Items [1.1]` (componentSet `3505:3498`) \u2014\n *   horizontal item with 3 states (Default / Active / Completed)\n * - `Step Indicator Vertical [1.1]` (componentSet `3507:227`) \u2014 vertical\n *   pill list (each item is its own bg+rounded container)\n * - `Step Indicator Vertical Items [1.1]` (componentSet `3507:190`) \u2014\n *   vertical item with 3 states\n *\n * Distinct from `Progress` (continuous %) \u2014 StepIndicator is discrete\n * (Step 2 of 5) with named labels per step.\n *\n * The four `status` values supported by this primitive are:\n *\n * - `'pending'`  \u2014 Figma \"Default\" (white dot, muted label)\n * - `'current'`  \u2014 Figma \"Active\"  (accent-indigo dot, foreground label)\n * - `'complete'` \u2014 Figma \"Completed\" (status-success dot with check)\n * - `'error'`    \u2014 extension beyond the Figma source. Figma does not\n *   model an error state, but real product surfaces (failed checkout\n *   step, rejected workflow step) need one. Rendered with\n *   `status-error-icon` + an X glyph, paralleling the success branch.\n *\n * ```tsx\n * const steps: StepIndicatorStep[] = [\n *   { id: 'account', label: 'Account', status: 'complete' },\n *   { id: 'profile', label: 'Profile', status: 'current' },\n *   { id: 'review',  label: 'Review',  status: 'pending'  },\n * ]\n * <StepIndicator steps={steps} />\n * <StepIndicator steps={steps} orientation=\"vertical\" />\n *\n * // Interactive \u2014 only completed + current become clickable by default\n * <StepIndicator steps={steps} onStepClick={(id) => goToStep(id)} />\n * ```\n */\n\nexport type StepIndicatorStatus = 'pending' | 'current' | 'complete' | 'error'\n\nexport type StepIndicatorStep = {\n  /** Stable id, returned by onStepClick. */\n  id: string\n  /** Label rendered beside the dot. */\n  label: string\n  /** Optional sub-text rendered below the label (vertical only). */\n  description?: string\n  /** Current visual state. */\n  status: StepIndicatorStatus\n}\n\nconst rootVariants = cva('flex', {\n  variants: {\n    orientation: {\n      horizontal: 'flex-row items-center gap-4',\n      vertical: 'flex-col items-stretch gap-2',\n    },\n  },\n  defaultVariants: { orientation: 'horizontal' },\n})\n\n// Horizontal item: dot + gap + label, no own bg/border (lives inline).\nconst horizontalItemVariants = cva('inline-flex items-center gap-2', {\n  variants: {\n    status: {\n      pending: '',\n      current: '',\n      complete: '',\n      error: '',\n    },\n  },\n  defaultVariants: { status: 'pending' },\n})\n\n// Vertical item: pill container per Figma `Step Indicator Vertical Items\n// [1.1]` (`cornerRadius: 10`). Active item raises with bg-background;\n// pending / complete items sit on bg-muted/40 (Figma `#F7F7F7`).\nconst verticalItemVariants = cva(\n  'inline-flex items-center gap-2.5 rounded-lg px-3 py-2 transition-colors w-full',\n  {\n    variants: {\n      status: {\n        pending: 'bg-muted/40',\n        current: 'bg-background ring-1 ring-border',\n        complete: 'bg-muted/40',\n        error: 'bg-status-error-bg ring-1 ring-status-error-border',\n      },\n    },\n    defaultVariants: { status: 'pending' },\n  },\n)\n\n// Dot \u2014 20\u00D720 rounded-full per Figma. Solid bg per state, no internal\n// number (Figma sample uses the Default state as an empty white circle).\nconst dotVariants = cva(\n  'relative z-10 inline-flex shrink-0 items-center justify-center rounded-full transition-colors',\n  {\n    variants: {\n      size: {\n        sm: 'size-4',\n        default: 'size-5',\n      },\n      status: {\n        pending: 'border border-muted-foreground/30 bg-background',\n        current: 'bg-accent-indigo text-accent-indigo-foreground',\n        complete:\n          'bg-status-success-icon text-status-success-bg',\n        error: 'bg-status-error-icon text-status-error-bg',\n      },\n    },\n    defaultVariants: { size: 'default', status: 'pending' },\n  },\n)\n\nconst labelVariants = cva('text-sm leading-tight', {\n  variants: {\n    status: {\n      pending: 'text-muted-foreground',\n      current: 'text-foreground font-medium',\n      complete: 'text-muted-foreground',\n      error: 'text-status-error-text font-medium',\n    },\n  },\n  defaultVariants: { status: 'pending' },\n})\n\nexport type StepIndicatorProps = React.HTMLAttributes<HTMLOListElement> &\n  VariantProps<typeof rootVariants> & {\n    steps: StepIndicatorStep[]\n    size?: 'sm' | 'default'\n    /** Optional callback. When provided, every step becomes a button. */\n    onStepClick?: (stepId: string) => void\n    /** Optional restriction on which statuses are clickable. Defaults to\n     * `['complete', 'current']` \u2014 past + present only. */\n    clickableStatuses?: StepIndicatorStatus[]\n  }\n\nconst DEFAULT_CLICKABLE: StepIndicatorStatus[] = ['complete', 'current']\n\nfunction renderDotContent(status: StepIndicatorStatus): React.ReactNode {\n  if (status === 'complete') return <Check aria-hidden=\"true\" className=\"size-3\" />\n  if (status === 'error') return <X aria-hidden=\"true\" className=\"size-3\" />\n  return null\n}\n\nexport const StepIndicator = React.forwardRef<HTMLOListElement, StepIndicatorProps>(\n  (\n    {\n      className,\n      steps,\n      orientation,\n      size,\n      onStepClick,\n      clickableStatuses = DEFAULT_CLICKABLE,\n      ...props\n    },\n    ref,\n  ) => {\n    const t = useT()\n    const isVertical = orientation === 'vertical'\n    const interactive = typeof onStepClick === 'function'\n\n    return (\n      <ol\n        ref={ref}\n        data-slot=\"step-indicator\"\n        aria-orientation={isVertical ? 'vertical' : 'horizontal'}\n        className={cn(rootVariants({ orientation }), className)}\n        {...props}\n      >\n        {steps.map((step, index) => {\n          const isLast = index === steps.length - 1\n          const canClick = interactive && clickableStatuses.includes(step.status)\n\n          const dotNode = (\n            <span\n              data-slot=\"step-indicator-dot\"\n              data-status={step.status}\n              className={cn(dotVariants({ size, status: step.status }))}\n              aria-current={step.status === 'current' ? 'step' : undefined}\n            >\n              {renderDotContent(step.status)}\n            </span>\n          )\n\n          const labelNode = (\n            <div className=\"min-w-0\">\n              <span className={cn(labelVariants({ status: step.status }))}>{step.label}</span>\n              {step.description && isVertical ? (\n                <span className=\"mt-0.5 block text-xs text-muted-foreground leading-tight\">\n                  {step.description}\n                </span>\n              ) : null}\n            </div>\n          )\n\n          // Vertical trailing chevron \u2014 Figma shows it only on the\n          // Active item to mark \"you are here\" (the rest of the rail\n          // is bg + rounded-lg + dot).\n          const verticalTrailingChevron =\n            isVertical && step.status === 'current' ? (\n              <ChevronRight\n                aria-hidden=\"true\"\n                className=\"ml-auto size-4 text-muted-foreground\"\n              />\n            ) : null\n\n          const itemBody = isVertical ? (\n            <span\n              className={cn(\n                verticalItemVariants({ status: step.status }),\n                canClick && 'cursor-pointer',\n              )}\n            >\n              {dotNode}\n              {labelNode}\n              {verticalTrailingChevron}\n            </span>\n          ) : (\n            <span className={cn(horizontalItemVariants({ status: step.status }))}>\n              {dotNode}\n              {labelNode}\n            </span>\n          )\n\n          return (\n            <li\n              key={step.id}\n              data-slot=\"step-indicator-item\"\n              data-status={step.status}\n              className={cn(\n                isVertical ? 'list-none' : 'flex items-center gap-4 list-none',\n              )}\n            >\n              {canClick ? (\n                <button\n                  type=\"button\"\n                  onClick={() => onStepClick?.(step.id)}\n                  aria-label={t('ui.stepIndicator.goToStep.ariaLabel', 'Go to step: {label}', { label: step.label })}\n                  className={cn(\n                    'inline-flex items-center gap-2',\n                    isVertical && 'w-full',\n                    'rounded-md outline-none focus-visible:shadow-focus text-left',\n                  )}\n                >\n                  {itemBody}\n                </button>\n              ) : (\n                itemBody\n              )}\n              {/* Horizontal connector \u2014 Figma uses a chevron-right\n                  icon between items, NOT a line. */}\n              {!isVertical && !isLast ? (\n                <ChevronRight\n                  aria-hidden=\"true\"\n                  data-slot=\"step-indicator-connector\"\n                  className=\"size-4 shrink-0 text-muted-foreground/50\"\n                />\n              ) : null}\n            </li>\n          )\n        })}\n      </ol>\n    )\n  },\n)\nStepIndicator.displayName = 'StepIndicator'\n\nexport {\n  rootVariants as stepIndicatorRootVariants,\n  dotVariants as stepIndicatorDotVariants,\n  horizontalItemVariants as stepIndicatorHorizontalItemVariants,\n  verticalItemVariants as stepIndicatorVerticalItemVariants,\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/primitives/table.js

@@ -1,27 +1,119 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
+import * as React from "react";
 import { cn } from "@open-mercato/shared/lib/utils";
-function Table({ className, ...props }) {
-  return /* @__PURE__ */ jsx("table", { className: cn("w-full text-sm", className), ...props });
+const TableContext = React.createContext({ variant: "default" });
+function Table({ className, variant = "default", ...props }) {
+  const contextValue = React.useMemo(() => ({ variant }), [variant]);
+  return /* @__PURE__ */ jsx(TableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "table",
+    {
+      "data-slot": "table",
+      "data-variant": variant,
+      className: cn("w-full text-sm", className),
+      ...props
+    }
+  ) });
 }
-function TableHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx("thead", { className: cn(className), ...props });
+function TableHeader({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "thead",
+    {
+      "data-slot": "table-header",
+      className: cn("bg-muted/40 [&_tr]:border-b", className),
+      ...props
+    }
+  );
 }
 function TableBody(props) {
-  return /* @__PURE__ */ jsx("tbody", { ...props });
+  return /* @__PURE__ */ jsx("tbody", { "data-slot": "table-body", ...props });
+}
+function TableFooter({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "tfoot",
+    {
+      "data-slot": "table-footer",
+      className: cn("border-t bg-muted/40 font-medium", className),
+      ...props
+    }
+  );
 }
 function TableRow({ className, ...props }) {
-  return /* @__PURE__ */ jsx("tr", { className: cn("border-b last:border-b-0", className), ...props });
+  const { variant } = React.useContext(TableContext);
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      "data-slot": "table-row",
+      className: cn(
+        "border-b last:border-b-0 transition-colors",
+        // Row hover affordance — only applies to body rows (header
+        // rows have their own bg-muted/40 strip and shouldn't bounce
+        // on hover). Children that are inside <thead> bypass via
+        // CSS-attribute selectors at the consumer level if needed.
+        "[&:not(thead_*)]:hover:bg-muted/30",
+        variant === "striped" ? "[&:not(thead_*)]:even:bg-muted/20" : "",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableHead({
+  className,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      ref,
+      "data-slot": "table-head",
+      className: cn(
+        "text-left font-medium px-4 py-2 whitespace-nowrap text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  );
 }
-function TableHead({ className, ref, ...props }) {
-  return /* @__PURE__ */ jsx("th", { ref, className: cn("text-left font-medium px-4 py-2 whitespace-nowrap text-muted-foreground", className), ...props });
+function TableCell({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      "data-slot": "table-cell",
+      className: cn("px-4 py-2", className),
+      ...props
+    }
+  );
 }
-function TableCell({ className, ...props }) {
-  return /* @__PURE__ */ jsx("td", { className: cn("px-4 py-2", className), ...props });
+function TableCaption({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "caption",
+    {
+      "data-slot": "table-caption",
+      className: cn("mt-2 text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
 }
 export {
   Table,
   TableBody,
+  TableCaption,
   TableCell,
+  TableFooter,
   TableHead,
   TableHeader,
   TableRow