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

package/dist/primitives/progress.js

@@ -1,28 +1,201 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
 import { cn } from "@open-mercato/shared/lib/utils";
-function Progress({ value, max = 100, className, ...props }) {
+const PROGRESS_TONE_FILL = {
+  accent: "bg-accent-indigo",
+  success: "bg-status-success-icon",
+  warning: "bg-status-warning-icon",
+  destructive: "bg-status-error-icon",
+  muted: "bg-muted-foreground"
+};
+const progressTrackVariants = cva(
+  "relative w-full overflow-hidden rounded-full bg-input",
+  {
+    variants: {
+      size: {
+        sm: "h-1",
+        default: "h-2",
+        lg: "h-3"
+      }
+    },
+    defaultVariants: { size: "default" }
+  }
+);
+const progressFillVariants = cva(
+  "h-full transition-all duration-300 ease-in-out",
+  {
+    variants: {
+      tone: {
+        accent: PROGRESS_TONE_FILL.accent,
+        success: PROGRESS_TONE_FILL.success,
+        warning: PROGRESS_TONE_FILL.warning,
+        destructive: PROGRESS_TONE_FILL.destructive,
+        muted: PROGRESS_TONE_FILL.muted
+      }
+    },
+    defaultVariants: { tone: "accent" }
+  }
+);
+function Progress({
+  value,
+  max = 100,
+  size,
+  tone,
+  showValue,
+  label,
+  description,
+  className,
+  fillClassName,
+  ...props
+}) {
   const percentage = Math.min(100, Math.max(0, Math.round(value / max * 100)));
-  return /* @__PURE__ */ jsx(
+  const hasLabelRow = label !== void 0 || showValue === true;
+  const bar = /* @__PURE__ */ jsx(
     "div",
     {
       role: "progressbar",
       "aria-valuenow": value,
       "aria-valuemin": 0,
       "aria-valuemax": max,
-      className: cn("relative w-full overflow-hidden rounded-full bg-secondary", className),
+      "data-slot": "progress",
+      "data-tone": tone ?? "accent",
+      className: cn(progressTrackVariants({ size }), className),
       ...props,
       children: /* @__PURE__ */ jsx(
         "div",
         {
-          className: "h-full bg-primary transition-all duration-300 ease-in-out",
+          "data-slot": "progress-fill",
+          className: cn(progressFillVariants({ tone }), fillClassName),
           style: { width: `${percentage}%` }
         }
       )
     }
   );
+  if (!hasLabelRow && description === void 0) return bar;
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "progress-wrapper", className: "flex w-full flex-col gap-1.5", children: [
+    hasLabelRow ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 text-sm font-medium text-foreground", children: [
+      /* @__PURE__ */ jsx("span", { "data-slot": "progress-label", className: "min-w-0 truncate", children: label }),
+      showValue ? /* @__PURE__ */ jsxs(
+        "span",
+        {
+          "data-slot": "progress-value",
+          className: "shrink-0 text-muted-foreground",
+          children: [
+            percentage,
+            "%"
+          ]
+        }
+      ) : null
+    ] }) : null,
+    bar,
+    description !== void 0 ? /* @__PURE__ */ jsx("div", { "data-slot": "progress-description", className: "text-sm text-muted-foreground", children: description }) : null
+  ] });
+}
+const CIRCULAR_SIZE_MAP = {
+  xs: { box: 24, stroke: 3, textClass: "text-[9px]" },
+  sm: { box: 32, stroke: 3, textClass: "text-[10px]" },
+  default: { box: 48, stroke: 4, textClass: "text-xs" },
+  lg: { box: 64, stroke: 5, textClass: "text-sm" }
+};
+const CIRCULAR_TONE_STROKE = {
+  accent: "stroke-accent-indigo",
+  success: "stroke-status-success-icon",
+  warning: "stroke-status-warning-icon",
+  destructive: "stroke-status-error-icon",
+  muted: "stroke-muted-foreground"
+};
+function CircularProgress({
+  value,
+  max = 100,
+  size = "default",
+  tone = "accent",
+  showValue,
+  children,
+  ariaLabel,
+  className,
+  trackClassName,
+  fillClassName
+}) {
+  const percentage = Math.min(100, Math.max(0, Math.round(value / max * 100)));
+  const { box, stroke, textClass } = CIRCULAR_SIZE_MAP[size];
+  const radius = (box - stroke) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const dashOffset = circumference * (1 - percentage / 100);
+  const half = box / 2;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "progressbar",
+      "aria-valuenow": value,
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      "aria-label": ariaLabel ?? `${percentage}%`,
+      "data-slot": "circular-progress",
+      "data-tone": tone,
+      "data-size": size,
+      className: cn("relative inline-flex items-center justify-center", className),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            width: box,
+            height: box,
+            viewBox: `0 0 ${box} ${box}`,
+            className: "-rotate-90",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  "data-slot": "circular-progress-track",
+                  cx: half,
+                  cy: half,
+                  r: radius,
+                  fill: "none",
+                  strokeWidth: stroke,
+                  className: cn("stroke-input", trackClassName)
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  "data-slot": "circular-progress-fill",
+                  cx: half,
+                  cy: half,
+                  r: radius,
+                  fill: "none",
+                  strokeWidth: stroke,
+                  strokeLinecap: "round",
+                  strokeDasharray: circumference,
+                  strokeDashoffset: dashOffset,
+                  className: cn(
+                    CIRCULAR_TONE_STROKE[tone],
+                    "transition-all duration-300 ease-in-out",
+                    fillClassName
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        showValue ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "circular-progress-value",
+            className: cn(
+              "absolute inset-0 inline-flex items-center justify-center font-medium text-foreground",
+              textClass
+            ),
+            children: children ?? `${percentage}%`
+          }
+        ) : null
+      ]
+    }
+  );
 }
 export {
+  CircularProgress,
   Progress
 };
 //# sourceMappingURL=progress.js.map

package/dist/primitives/progress.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/primitives/progress.tsx"],
-  "sourcesContent": ["\"use client\"\nimport * as React from 'react'\nimport { cn } from '@open-mercato/shared/lib/utils'\n\nexport interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n  value: number\n  max?: number\n}\n\nexport function Progress({ value, max = 100, className, ...props }: ProgressProps) {\n  const percentage = Math.min(100, Math.max(0, Math.round((value / max) * 100)))\n\n  return (\n    <div\n      role=\"progressbar\"\n      aria-valuenow={value}\n      aria-valuemin={0}\n      aria-valuemax={max}\n      className={cn('relative w-full overflow-hidden rounded-full bg-secondary', className)}\n      {...props}\n    >\n      <div\n        className=\"h-full bg-primary transition-all duration-300 ease-in-out\"\n        style={{ width: `${percentage}%` }}\n      />\n    </div>\n  )\n}\n"],
-  "mappings": ";AAqBM;AAnBN,SAAS,UAAU;AAOZ,SAAS,SAAS,EAAE,OAAO,MAAM,KAAK,WAAW,GAAG,MAAM,GAAkB;AACjF,QAAM,aAAa,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,MAAO,QAAQ,MAAO,GAAG,CAAC,CAAC;AAE7E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,WAAW,GAAG,6DAA6D,SAAS;AAAA,MACnF,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,OAAO,GAAG,UAAU,IAAI;AAAA;AAAA,MACnC;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nimport { cn } from '@open-mercato/shared/lib/utils'\n\n/**\n * Determinate progress bar \u2014 both linear and circular. Linear is the\n * default `Progress` export; circular is `CircularProgress`.\n *\n * Figma source: DS Open Mercato `Progress Bar` page (`450:17758`):\n * `Progress Bar [1.1]` (`450:17821`), `Progress Bar Label [1.1]`\n * (`515:3758`), `Progress Bar Line [1.1]` (`450:17810`, 5 tone\n * variants: muted / accent / destructive / warning / success),\n * `Circular Progress Bar [1.1]` (`466:4652`).\n *\n * Backward compatibility (Phase B rewrite): the original\n * `<Progress value={n} max={100} className=\"...\" />` API stays\n * callable verbatim. The 3 existing call sites\n * (`packages/ui/src/backend/NextStepCallout.tsx`,\n * `packages/core/.../data_sync/.../runs/[id]/page.tsx`,\n * `packages/sync-akeneo/.../akeneo-config/widget.client.tsx`)\n * keep working without changes. New optional props (`size`, `tone`,\n * `showValue`, `label`, `description`) are additive.\n *\n * ```tsx\n * // Backward-compatible bare bar:\n * <Progress value={50} />\n *\n * // Labelled variant per `Progress Bar Label [1.1]`:\n * <Progress\n *   value={80}\n *   label=\"Data Storage\"\n *   showValue\n *   description=\"Upgrade to unlock unlimited storage.\"\n * />\n *\n * // Tone variants per `Progress Bar Line [1.1]`:\n * <Progress value={42} tone=\"success\" />\n * <Progress value={42} tone=\"warning\" />\n * <Progress value={42} tone=\"destructive\" />\n *\n * // Circular variant per `Circular Progress Bar [1.1]`:\n * <CircularProgress value={75} size=\"default\" showValue />\n * ```\n */\n\nexport type ProgressTone =\n  | 'accent'\n  | 'success'\n  | 'warning'\n  | 'destructive'\n  | 'muted'\n\nconst PROGRESS_TONE_FILL: Record<ProgressTone, string> = {\n  accent: 'bg-accent-indigo',\n  success: 'bg-status-success-icon',\n  warning: 'bg-status-warning-icon',\n  destructive: 'bg-status-error-icon',\n  muted: 'bg-muted-foreground',\n}\n\nconst progressTrackVariants = cva(\n  'relative w-full overflow-hidden rounded-full bg-input',\n  {\n    variants: {\n      size: {\n        sm: 'h-1',\n        default: 'h-2',\n        lg: 'h-3',\n      },\n    },\n    defaultVariants: { size: 'default' },\n  },\n)\n\nconst progressFillVariants = cva(\n  'h-full transition-all duration-300 ease-in-out',\n  {\n    variants: {\n      tone: {\n        accent: PROGRESS_TONE_FILL.accent,\n        success: PROGRESS_TONE_FILL.success,\n        warning: PROGRESS_TONE_FILL.warning,\n        destructive: PROGRESS_TONE_FILL.destructive,\n        muted: PROGRESS_TONE_FILL.muted,\n      },\n    },\n    defaultVariants: { tone: 'accent' },\n  },\n)\n\nexport interface ProgressProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof progressTrackVariants> {\n  value: number\n  max?: number\n  /** Color of the filled portion. Default `accent` (indigo). */\n  tone?: ProgressTone\n  /** Show the percentage badge on the right of the label row. */\n  showValue?: boolean\n  /** Optional label rendered above the bar. */\n  label?: React.ReactNode\n  /** Optional description rendered below the bar in muted text. */\n  description?: React.ReactNode\n  /** Override the inner fill className (e.g. to apply a gradient). */\n  fillClassName?: string\n}\n\nexport function Progress({\n  value,\n  max = 100,\n  size,\n  tone,\n  showValue,\n  label,\n  description,\n  className,\n  fillClassName,\n  ...props\n}: ProgressProps) {\n  const percentage = Math.min(100, Math.max(0, Math.round((value / max) * 100)))\n  const hasLabelRow = label !== undefined || showValue === true\n  const bar = (\n    <div\n      role=\"progressbar\"\n      aria-valuenow={value}\n      aria-valuemin={0}\n      aria-valuemax={max}\n      data-slot=\"progress\"\n      data-tone={tone ?? 'accent'}\n      className={cn(progressTrackVariants({ size }), className)}\n      {...props}\n    >\n      <div\n        data-slot=\"progress-fill\"\n        className={cn(progressFillVariants({ tone }), fillClassName)}\n        style={{ width: `${percentage}%` }}\n      />\n    </div>\n  )\n\n  if (!hasLabelRow && description === undefined) return bar\n\n  return (\n    <div data-slot=\"progress-wrapper\" className=\"flex w-full flex-col gap-1.5\">\n      {hasLabelRow ? (\n        <div className=\"flex items-center justify-between gap-3 text-sm font-medium text-foreground\">\n          <span data-slot=\"progress-label\" className=\"min-w-0 truncate\">\n            {label}\n          </span>\n          {showValue ? (\n            <span\n              data-slot=\"progress-value\"\n              className=\"shrink-0 text-muted-foreground\"\n            >\n              {percentage}%\n            </span>\n          ) : null}\n        </div>\n      ) : null}\n      {bar}\n      {description !== undefined ? (\n        <div data-slot=\"progress-description\" className=\"text-sm text-muted-foreground\">\n          {description}\n        </div>\n      ) : null}\n    </div>\n  )\n}\n\n// ---------------------------------------------------------------------\n// CircularProgress\n// ---------------------------------------------------------------------\n\nconst CIRCULAR_SIZE_MAP = {\n  xs: { box: 24, stroke: 3, textClass: 'text-[9px]' },\n  sm: { box: 32, stroke: 3, textClass: 'text-[10px]' },\n  default: { box: 48, stroke: 4, textClass: 'text-xs' },\n  lg: { box: 64, stroke: 5, textClass: 'text-sm' },\n} as const\n\nexport type CircularProgressSize = keyof typeof CIRCULAR_SIZE_MAP\n\nconst CIRCULAR_TONE_STROKE: Record<ProgressTone, string> = {\n  accent: 'stroke-accent-indigo',\n  success: 'stroke-status-success-icon',\n  warning: 'stroke-status-warning-icon',\n  destructive: 'stroke-status-error-icon',\n  muted: 'stroke-muted-foreground',\n}\n\nexport interface CircularProgressProps {\n  value: number\n  max?: number\n  size?: CircularProgressSize\n  tone?: ProgressTone\n  /** Render the percentage in the centre of the ring. */\n  showValue?: boolean\n  /** Override the inner content (replaces the default percentage label\n   * when `showValue` is true). Renders only when `showValue` is true. */\n  children?: React.ReactNode\n  /** Accessible label for the progressbar. Falls back to `${percentage}%`. */\n  ariaLabel?: string\n  className?: string\n  /** Override the track ring className (defaults to `stroke-input`). */\n  trackClassName?: string\n  /** Override the fill ring className (defaults per `tone`). */\n  fillClassName?: string\n}\n\nexport function CircularProgress({\n  value,\n  max = 100,\n  size = 'default',\n  tone = 'accent',\n  showValue,\n  children,\n  ariaLabel,\n  className,\n  trackClassName,\n  fillClassName,\n}: CircularProgressProps) {\n  const percentage = Math.min(100, Math.max(0, Math.round((value / max) * 100)))\n  const { box, stroke, textClass } = CIRCULAR_SIZE_MAP[size]\n  const radius = (box - stroke) / 2\n  const circumference = 2 * Math.PI * radius\n  const dashOffset = circumference * (1 - percentage / 100)\n  const half = box / 2\n  return (\n    <div\n      role=\"progressbar\"\n      aria-valuenow={value}\n      aria-valuemin={0}\n      aria-valuemax={max}\n      aria-label={ariaLabel ?? `${percentage}%`}\n      data-slot=\"circular-progress\"\n      data-tone={tone}\n      data-size={size}\n      className={cn('relative inline-flex items-center justify-center', className)}\n    >\n      <svg\n        width={box}\n        height={box}\n        viewBox={`0 0 ${box} ${box}`}\n        className=\"-rotate-90\"\n        aria-hidden=\"true\"\n      >\n        <circle\n          data-slot=\"circular-progress-track\"\n          cx={half}\n          cy={half}\n          r={radius}\n          fill=\"none\"\n          strokeWidth={stroke}\n          className={cn('stroke-input', trackClassName)}\n        />\n        <circle\n          data-slot=\"circular-progress-fill\"\n          cx={half}\n          cy={half}\n          r={radius}\n          fill=\"none\"\n          strokeWidth={stroke}\n          strokeLinecap=\"round\"\n          strokeDasharray={circumference}\n          strokeDashoffset={dashOffset}\n          className={cn(\n            CIRCULAR_TONE_STROKE[tone],\n            'transition-all duration-300 ease-in-out',\n            fillClassName,\n          )}\n        />\n      </svg>\n      {showValue ? (\n        <span\n          data-slot=\"circular-progress-value\"\n          className={cn(\n            'absolute inset-0 inline-flex items-center justify-center font-medium text-foreground',\n            textClass,\n          )}\n        >\n          {children ?? `${percentage}%`}\n        </span>\n      ) : null}\n    </div>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/primitives/rating.js

@@ -0,0 +1,174 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Circle, Heart, Star, StarHalf } 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 ratingRootVariants = cva("inline-flex items-center gap-0.5", {
+  variants: {
+    size: {
+      sm: "[&>*]:size-4",
+      default: "[&>*]:size-5",
+      lg: "[&>*]:size-6"
+    },
+    disabled: {
+      true: "cursor-not-allowed opacity-60",
+      false: ""
+    }
+  },
+  defaultVariants: { size: "default", disabled: false }
+});
+const ratingItemColorVariants = cva("transition-colors", {
+  variants: {
+    fill: {
+      full: "fill-status-warning-icon text-status-warning-icon",
+      half: "fill-status-warning-icon text-status-warning-icon",
+      empty: "fill-transparent text-muted-foreground/30"
+    }
+  },
+  defaultVariants: { fill: "empty" }
+});
+function resolveFillState(index, value, allowHalf) {
+  if (value >= index + 1) return "full";
+  if (allowHalf && value >= index + 0.5) return "half";
+  return "empty";
+}
+function StarFull(props) {
+  return /* @__PURE__ */ jsx(Star, { "aria-hidden": "true", ...props });
+}
+function StarHalfIcon(props) {
+  return /* @__PURE__ */ jsx(StarHalf, { "aria-hidden": "true", ...props });
+}
+function HeartIcon(props) {
+  return /* @__PURE__ */ jsx(Heart, { "aria-hidden": "true", ...props });
+}
+function CircleIcon(props) {
+  return /* @__PURE__ */ jsx(Circle, { "aria-hidden": "true", ...props });
+}
+function renderIcon(iconType, fill, className) {
+  if (iconType === "heart") {
+    return /* @__PURE__ */ jsx(HeartIcon, { className });
+  }
+  if (iconType === "circle") {
+    return /* @__PURE__ */ jsx(CircleIcon, { className });
+  }
+  if (fill === "half") return /* @__PURE__ */ jsx(StarHalfIcon, { className });
+  return /* @__PURE__ */ jsx(StarFull, { className });
+}
+const Rating = React.forwardRef(
+  ({
+    className,
+    value,
+    max = 5,
+    onChange,
+    icon = "star",
+    allowHalf = false,
+    size,
+    disabled,
+    ...rest
+  }, ref) => {
+    const t = useT();
+    const interactive = typeof onChange === "function";
+    const handleSelect = React.useCallback(
+      (next) => {
+        if (disabled) return;
+        onChange?.(next);
+      },
+      [disabled, onChange]
+    );
+    if (!interactive) {
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          ref,
+          role: "img",
+          "aria-label": rest["aria-label"] ?? t("ui.rating.summary.ariaLabel", "{value} out of {max}", { value, max }),
+          "data-slot": "rating",
+          className: cn(ratingRootVariants({ size, disabled }), className),
+          ...rest,
+          children: Array.from({ length: max }).map((_, index) => {
+            const fill = resolveFillState(index, value, allowHalf);
+            return /* @__PURE__ */ jsx(
+              "span",
+              {
+                "data-slot": "rating-item",
+                "data-fill": fill,
+                className: "inline-flex items-center justify-center",
+                children: renderIcon(icon, fill, ratingItemColorVariants({ fill }))
+              },
+              index
+            );
+          })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        role: "radiogroup",
+        "aria-label": rest["aria-label"],
+        "data-slot": "rating",
+        className: cn(ratingRootVariants({ size, disabled }), className),
+        ...rest,
+        children: Array.from({ length: max }).map((_, index) => {
+          const fill = resolveFillState(index, value, allowHalf);
+          const isCurrent = value === 0 ? index === 0 : Math.ceil(value) - 1 === index;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "radio",
+              "aria-checked": fill !== "empty",
+              "aria-label": t("ui.rating.item.ariaLabel", "{position} of {max}", { position: index + 1, max }),
+              tabIndex: isCurrent ? 0 : -1,
+              "data-slot": "rating-item",
+              "data-fill": fill,
+              disabled,
+              onClick: (event) => {
+                if (!allowHalf) {
+                  handleSelect(index + 1);
+                  return;
+                }
+                const rect = event.currentTarget.getBoundingClientRect();
+                const isLeftHalf = event.clientX - rect.left < rect.width / 2;
+                handleSelect(isLeftHalf ? index + 0.5 : index + 1);
+              },
+              onKeyDown: (event) => {
+                if (event.key === "ArrowRight" || event.key === "ArrowUp") {
+                  event.preventDefault();
+                  handleSelect(Math.min(max, value + (allowHalf ? 0.5 : 1)));
+                } else if (event.key === "ArrowLeft" || event.key === "ArrowDown") {
+                  event.preventDefault();
+                  handleSelect(Math.max(0, value - (allowHalf ? 0.5 : 1)));
+                } else if (event.key === "Home") {
+                  event.preventDefault();
+                  handleSelect(allowHalf ? 0.5 : 1);
+                } else if (event.key === "End") {
+                  event.preventDefault();
+                  handleSelect(max);
+                }
+              },
+              className: cn(
+                "inline-flex items-center justify-center rounded-sm outline-none",
+                "focus-visible:shadow-focus",
+                "enabled:hover:scale-110 enabled:hover:transition-transform",
+                "disabled:cursor-not-allowed"
+              ),
+              children: renderIcon(icon, fill, ratingItemColorVariants({ fill }))
+            },
+            index
+          );
+        })
+      }
+    );
+  }
+);
+Rating.displayName = "Rating";
+export {
+  Rating,
+  ratingItemColorVariants,
+  ratingRootVariants
+};
+//# sourceMappingURL=rating.js.map

package/dist/primitives/rating.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives/rating.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { Circle, Heart, Star, StarHalf } 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 * 1-to-N star / heart / dot rating per Figma `Rating & Review [1.0]`\n * (DS Open Mercato componentSet `199969:1797`). Two distinct modes:\n *\n * - **Read-only display** \u2014 no `onChange` prop. Renders `role=\"img\"` with\n *   an `aria-label` like \"4.5 out of 5 stars\". Used in product reviews,\n *   feedback summaries.\n * - **Interactive input** \u2014 `onChange` provided. Renders as a row of\n *   focusable buttons; arrow keys / number keys navigate, click /\n *   Enter / Space commits. Used in submission forms.\n *\n * ```tsx\n * // Read-only\n * <Rating value={4.5} max={5} />\n *\n * // Interactive\n * const [v, setV] = React.useState(0)\n * <Rating value={v} onChange={setV} aria-label=\"Your rating\" />\n *\n * // Half precision (stars only \u2014 Lucide ships StarHalf but not HeartHalf)\n * <Rating value={3.5} max={5} allowHalf />\n *\n * // Heart variant\n * <Rating value={3} max={5} icon=\"heart\" />\n * ```\n */\n\nconst ratingRootVariants = cva('inline-flex items-center gap-0.5', {\n  variants: {\n    size: {\n      sm: '[&>*]:size-4',\n      default: '[&>*]:size-5',\n      lg: '[&>*]:size-6',\n    },\n    disabled: {\n      true: 'cursor-not-allowed opacity-60',\n      false: '',\n    },\n  },\n  defaultVariants: { size: 'default', disabled: false },\n})\n\nconst ratingItemColorVariants = cva('transition-colors', {\n  variants: {\n    fill: {\n      full: 'fill-status-warning-icon text-status-warning-icon',\n      half: 'fill-status-warning-icon text-status-warning-icon',\n      empty: 'fill-transparent text-muted-foreground/30',\n    },\n  },\n  defaultVariants: { fill: 'empty' },\n})\n\ntype FillState = 'full' | 'half' | 'empty'\n\nfunction resolveFillState(index: number, value: number, allowHalf: boolean): FillState {\n  if (value >= index + 1) return 'full'\n  if (allowHalf && value >= index + 0.5) return 'half'\n  return 'empty'\n}\n\nfunction StarFull(props: React.ComponentProps<typeof Star>) {\n  return <Star aria-hidden=\"true\" {...props} />\n}\n\nfunction StarHalfIcon(props: React.ComponentProps<typeof StarHalf>) {\n  return <StarHalf aria-hidden=\"true\" {...props} />\n}\n\nfunction HeartIcon(props: React.ComponentProps<typeof Heart>) {\n  return <Heart aria-hidden=\"true\" {...props} />\n}\n\nfunction CircleIcon(props: React.ComponentProps<typeof Circle>) {\n  return <Circle aria-hidden=\"true\" {...props} />\n}\n\nfunction renderIcon(\n  iconType: 'star' | 'heart' | 'circle',\n  fill: FillState,\n  className: string,\n): React.ReactElement {\n  if (iconType === 'heart') {\n    // Lucide does not ship HeartHalf \u2014 half precision is treated as full\n    // for hearts (consumer should set allowHalf=false when icon=\"heart\").\n    return <HeartIcon className={className} />\n  }\n  if (iconType === 'circle') {\n    return <CircleIcon className={className} />\n  }\n  // star\n  if (fill === 'half') return <StarHalfIcon className={className} />\n  return <StarFull className={className} />\n}\n\nexport type RatingProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'onChange'> &\n  VariantProps<typeof ratingRootVariants> & {\n    /** Current rating value (0..max). Floats allowed when `allowHalf` is `true`. */\n    value: number\n    /** Total number of items. Defaults to 5. */\n    max?: number\n    /** Optional change handler. Presence flips the primitive into interactive mode. */\n    onChange?: (next: number) => void\n    /** Which icon glyph to render. Defaults to `'star'`. */\n    icon?: 'star' | 'heart' | 'circle'\n    /** Enable half-step precision (stars only \u2014 Lucide has no HeartHalf). */\n    allowHalf?: boolean\n    /** When true, dim the control and block clicks. Inherited via `disabled` prop on the root. */\n    disabled?: boolean\n    /** Required when interactive \u2014 screen-readers announce this as the group label. */\n    'aria-label'?: string\n  }\n\nexport const Rating = React.forwardRef<HTMLSpanElement, RatingProps>(\n  (\n    {\n      className,\n      value,\n      max = 5,\n      onChange,\n      icon = 'star',\n      allowHalf = false,\n      size,\n      disabled,\n      ...rest\n    },\n    ref,\n  ) => {\n    const t = useT()\n    const interactive = typeof onChange === 'function'\n    const handleSelect = React.useCallback(\n      (next: number) => {\n        if (disabled) return\n        onChange?.(next)\n      },\n      [disabled, onChange],\n    )\n\n    // Read-only display path \u2014 plain span container with aria-label.\n    if (!interactive) {\n      return (\n        <span\n          ref={ref}\n          role=\"img\"\n          aria-label={rest['aria-label'] ?? t('ui.rating.summary.ariaLabel', '{value} out of {max}', { value, max })}\n          data-slot=\"rating\"\n          className={cn(ratingRootVariants({ size, disabled }), className)}\n          {...rest}\n        >\n          {Array.from({ length: max }).map((_, index) => {\n            const fill = resolveFillState(index, value, allowHalf)\n            return (\n              <span\n                key={index}\n                data-slot=\"rating-item\"\n                data-fill={fill}\n                className=\"inline-flex items-center justify-center\"\n              >\n                {renderIcon(icon, fill, ratingItemColorVariants({ fill }))}\n              </span>\n            )\n          })}\n        </span>\n      )\n    }\n\n    // Interactive path \u2014 N buttons. Arrow keys move focus between items;\n    // Home / End jump to first / last. Click / Enter / Space commits the\n    // value (index + 1 for full clicks; index + 0.5 if allowHalf && the\n    // click landed on the left half of the icon).\n    return (\n      <span\n        ref={ref}\n        role=\"radiogroup\"\n        aria-label={rest['aria-label']}\n        data-slot=\"rating\"\n        className={cn(ratingRootVariants({ size, disabled }), className)}\n        {...rest}\n      >\n        {Array.from({ length: max }).map((_, index) => {\n          const fill = resolveFillState(index, value, allowHalf)\n          // Empty rating (value === 0) falls back to the first item so it stays Tab-reachable.\n          const isCurrent = value === 0 ? index === 0 : Math.ceil(value) - 1 === index\n          return (\n            <button\n              key={index}\n              type=\"button\"\n              role=\"radio\"\n              aria-checked={fill !== 'empty'}\n              aria-label={t('ui.rating.item.ariaLabel', '{position} of {max}', { position: index + 1, max })}\n              tabIndex={isCurrent ? 0 : -1}\n              data-slot=\"rating-item\"\n              data-fill={fill}\n              disabled={disabled}\n              onClick={(event) => {\n                if (!allowHalf) {\n                  handleSelect(index + 1)\n                  return\n                }\n                const rect = event.currentTarget.getBoundingClientRect()\n                const isLeftHalf = event.clientX - rect.left < rect.width / 2\n                handleSelect(isLeftHalf ? index + 0.5 : index + 1)\n              }}\n              onKeyDown={(event) => {\n                if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {\n                  event.preventDefault()\n                  handleSelect(Math.min(max, value + (allowHalf ? 0.5 : 1)))\n                } else if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {\n                  event.preventDefault()\n                  handleSelect(Math.max(0, value - (allowHalf ? 0.5 : 1)))\n                } else if (event.key === 'Home') {\n                  event.preventDefault()\n                  handleSelect(allowHalf ? 0.5 : 1)\n                } else if (event.key === 'End') {\n                  event.preventDefault()\n                  handleSelect(max)\n                }\n              }}\n              className={cn(\n                'inline-flex items-center justify-center rounded-sm outline-none',\n                'focus-visible:shadow-focus',\n                'enabled:hover:scale-110 enabled:hover:transition-transform',\n                'disabled:cursor-not-allowed',\n              )}\n            >\n              {renderIcon(icon, fill, ratingItemColorVariants({ fill }))}\n            </button>\n          )\n        })}\n      </span>\n    )\n  },\n)\nRating.displayName = 'Rating'\n\nexport { ratingRootVariants, ratingItemColorVariants }\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/primitives/scroll-area.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { cn } from "@open-mercato/shared/lib/utils";
+const ScrollAreaRoot = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ScrollAreaPrimitive.Root,
+  {
+    ref,
+    "data-slot": "scroll-area-root",
+    className: cn("relative overflow-hidden", className),
+    ...props
+  }
+));
+ScrollAreaRoot.displayName = ScrollAreaPrimitive.Root.displayName;
+const ScrollAreaViewport = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ScrollAreaPrimitive.Viewport,
+  {
+    ref,
+    "data-slot": "scroll-area-viewport",
+    className: cn("h-full w-full rounded-[inherit]", className),
+    ...props
+  }
+));
+ScrollAreaViewport.displayName = ScrollAreaPrimitive.Viewport.displayName;
+const ScrollAreaScrollbar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
+  ScrollAreaPrimitive.ScrollAreaScrollbar,
+  {
+    ref,
+    orientation,
+    "data-slot": "scroll-area-scrollbar",
+    className: cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-px",
+      orientation === "horizontal" && "h-2.5 w-full border-t border-t-transparent p-px",
+      className
+    ),
+    ...props
+  }
+));
+ScrollAreaScrollbar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+const ScrollAreaThumb = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ScrollAreaPrimitive.ScrollAreaThumb,
+  {
+    ref,
+    "data-slot": "scroll-area-thumb",
+    className: cn(
+      "relative flex-1 rounded-full bg-muted-foreground/30 transition-colors hover:bg-muted-foreground/50",
+      className
+    ),
+    ...props
+  }
+));
+ScrollAreaThumb.displayName = ScrollAreaPrimitive.ScrollAreaThumb.displayName;
+const ScrollAreaCorner = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ScrollAreaPrimitive.Corner,
+  {
+    ref,
+    "data-slot": "scroll-area-corner",
+    className: cn("bg-transparent", className),
+    ...props
+  }
+));
+ScrollAreaCorner.displayName = ScrollAreaPrimitive.Corner.displayName;
+const ScrollArea = React.forwardRef(
+  ({ children, className, scrollbars = "vertical", viewportClassName, scrollbarClassName, thumbClassName, ...props }, ref) => /* @__PURE__ */ jsxs(ScrollAreaRoot, { ref, className, ...props, children: [
+    /* @__PURE__ */ jsx(ScrollAreaViewport, { className: viewportClassName, children }),
+    scrollbars === "vertical" || scrollbars === "both" ? /* @__PURE__ */ jsx(ScrollAreaScrollbar, { orientation: "vertical", className: scrollbarClassName, children: /* @__PURE__ */ jsx(ScrollAreaThumb, { className: thumbClassName }) }) : null,
+    scrollbars === "horizontal" || scrollbars === "both" ? /* @__PURE__ */ jsx(ScrollAreaScrollbar, { orientation: "horizontal", className: scrollbarClassName, children: /* @__PURE__ */ jsx(ScrollAreaThumb, { className: thumbClassName }) }) : null,
+    /* @__PURE__ */ jsx(ScrollAreaCorner, {})
+  ] })
+);
+ScrollArea.displayName = "ScrollArea";
+export {
+  ScrollArea,
+  ScrollAreaCorner,
+  ScrollAreaRoot,
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+  ScrollAreaViewport
+};
+//# sourceMappingURL=scroll-area.js.map

package/dist/primitives/scroll-area.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives/scroll-area.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'\n\nimport { cn } from '@open-mercato/shared/lib/utils'\n\n/**\n * DS-styled scrollable container. Wraps Radix `ScrollArea` with token-driven\n * thumb / track styling that matches the rest of the design system instead of\n * native OS scrollbars (which render inconsistently across macOS / Windows /\n * Linux).\n *\n * No dedicated Figma node \u2014 DS Open Mercato library did not ship a `ScrollArea`\n * master component at the time this primitive was authored. Styling is inferred\n * from the DS scrollbar token decisions used elsewhere (muted-foreground thumb,\n * transparent track, hover state, `rounded-full` thumb shape).\n *\n * Usage \u2014 primary single-element form:\n *\n * ```tsx\n * <ScrollArea className=\"h-72\">\n *   <div className=\"p-4\">{children}</div>\n * </ScrollArea>\n * ```\n *\n * For advanced layouts that need separate access to the `Viewport`,\n * `Scrollbar`, or `Corner`, use the compound API directly:\n *\n * ```tsx\n * <ScrollAreaRoot className=\"h-72\">\n *   <ScrollAreaViewport>{children}</ScrollAreaViewport>\n *   <ScrollAreaScrollbar orientation=\"vertical\">\n *     <ScrollAreaThumb />\n *   </ScrollAreaScrollbar>\n *   <ScrollAreaCorner />\n * </ScrollAreaRoot>\n * ```\n */\n\nconst ScrollAreaRoot = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <ScrollAreaPrimitive.Root\n    ref={ref}\n    data-slot=\"scroll-area-root\"\n    className={cn('relative overflow-hidden', className)}\n    {...props}\n  />\n))\nScrollAreaRoot.displayName = ScrollAreaPrimitive.Root.displayName\n\nconst ScrollAreaViewport = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.Viewport>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Viewport>\n>(({ className, ...props }, ref) => (\n  <ScrollAreaPrimitive.Viewport\n    ref={ref}\n    data-slot=\"scroll-area-viewport\"\n    className={cn('h-full w-full rounded-[inherit]', className)}\n    {...props}\n  />\n))\nScrollAreaViewport.displayName = ScrollAreaPrimitive.Viewport.displayName\n\nconst ScrollAreaScrollbar = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>\n>(({ className, orientation = 'vertical', ...props }, ref) => (\n  <ScrollAreaPrimitive.ScrollAreaScrollbar\n    ref={ref}\n    orientation={orientation}\n    data-slot=\"scroll-area-scrollbar\"\n    className={cn(\n      'flex touch-none select-none transition-colors',\n      orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-px',\n      orientation === 'horizontal' && 'h-2.5 w-full border-t border-t-transparent p-px',\n      className,\n    )}\n    {...props}\n  />\n))\nScrollAreaScrollbar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName\n\nconst ScrollAreaThumb = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaThumb>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaThumb>\n>(({ className, ...props }, ref) => (\n  <ScrollAreaPrimitive.ScrollAreaThumb\n    ref={ref}\n    data-slot=\"scroll-area-thumb\"\n    className={cn(\n      'relative flex-1 rounded-full bg-muted-foreground/30 transition-colors hover:bg-muted-foreground/50',\n      className,\n    )}\n    {...props}\n  />\n))\nScrollAreaThumb.displayName = ScrollAreaPrimitive.ScrollAreaThumb.displayName\n\nconst ScrollAreaCorner = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.Corner>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Corner>\n>(({ className, ...props }, ref) => (\n  <ScrollAreaPrimitive.Corner\n    ref={ref}\n    data-slot=\"scroll-area-corner\"\n    className={cn('bg-transparent', className)}\n    {...props}\n  />\n))\nScrollAreaCorner.displayName = ScrollAreaPrimitive.Corner.displayName\n\ntype ScrollAreaProps = React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {\n  /**\n   * Which scrollbars to render. Defaults to `'vertical'` \u2014 the most common\n   * case. Use `'both'` for two-axis scroll (e.g. wide table preview) or\n   * `'horizontal'` for a horizontal-only carousel.\n   */\n  scrollbars?: 'vertical' | 'horizontal' | 'both'\n  /** Optional className applied to the inner `Viewport`. */\n  viewportClassName?: string\n  /** Optional className applied to every `Scrollbar`. */\n  scrollbarClassName?: string\n  /** Optional className applied to every `Thumb`. */\n  thumbClassName?: string\n}\n\n/**\n * Convenience wrapper that composes Root + Viewport + one or two Scrollbars +\n * Corner in a single element. Reach for `ScrollAreaRoot` + sub-components\n * directly when the wrapper's defaults don't fit (e.g. you need conditional\n * scrollbar rendering or a custom viewport).\n */\nconst ScrollArea = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.Root>,\n  ScrollAreaProps\n>(\n  (\n    { children, className, scrollbars = 'vertical', viewportClassName, scrollbarClassName, thumbClassName, ...props },\n    ref,\n  ) => (\n    <ScrollAreaRoot ref={ref} className={className} {...props}>\n      <ScrollAreaViewport className={viewportClassName}>{children}</ScrollAreaViewport>\n      {(scrollbars === 'vertical' || scrollbars === 'both') ? (\n        <ScrollAreaScrollbar orientation=\"vertical\" className={scrollbarClassName}>\n          <ScrollAreaThumb className={thumbClassName} />\n        </ScrollAreaScrollbar>\n      ) : null}\n      {(scrollbars === 'horizontal' || scrollbars === 'both') ? (\n        <ScrollAreaScrollbar orientation=\"horizontal\" className={scrollbarClassName}>\n          <ScrollAreaThumb className={thumbClassName} />\n        </ScrollAreaScrollbar>\n      ) : null}\n      <ScrollAreaCorner />\n    </ScrollAreaRoot>\n  ),\n)\nScrollArea.displayName = 'ScrollArea'\n\nexport {\n  ScrollArea,\n  ScrollAreaRoot,\n  ScrollAreaViewport,\n  ScrollAreaScrollbar,\n  ScrollAreaThumb,\n  ScrollAreaCorner,\n}\n"],
+  "mappings": ";AA4CE,cAmGE,YAnGF;AA1CF,YAAY,WAAW;AACvB,YAAY,yBAAyB;AAErC,SAAS,UAAU;AAmCnB,MAAM,iBAAiB,MAAM,WAG3B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC,oBAAoB;AAAA,EAApB;AAAA,IACC;AAAA,IACA,aAAU;AAAA,IACV,WAAW,GAAG,4BAA4B,SAAS;AAAA,IAClD,GAAG;AAAA;AACN,CACD;AACD,eAAe,cAAc,oBAAoB,KAAK;AAEtD,MAAM,qBAAqB,MAAM,WAG/B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC,oBAAoB;AAAA,EAApB;AAAA,IACC;AAAA,IACA,aAAU;AAAA,IACV,WAAW,GAAG,mCAAmC,SAAS;AAAA,IACzD,GAAG;AAAA;AACN,CACD;AACD,mBAAmB,cAAc,oBAAoB,SAAS;AAE9D,MAAM,sBAAsB,MAAM,WAGhC,CAAC,EAAE,WAAW,cAAc,YAAY,GAAG,MAAM,GAAG,QACpD;AAAA,EAAC,oBAAoB;AAAA,EAApB;AAAA,IACC;AAAA,IACA;AAAA,IACA,aAAU;AAAA,IACV,WAAW;AAAA,MACT;AAAA,MACA,gBAAgB,cAAc;AAAA,MAC9B,gBAAgB,gBAAgB;AAAA,MAChC;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AACD,oBAAoB,cAAc,oBAAoB,oBAAoB;AAE1E,MAAM,kBAAkB,MAAM,WAG5B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC,oBAAoB;AAAA,EAApB;AAAA,IACC;AAAA,IACA,aAAU;AAAA,IACV,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AACD,gBAAgB,cAAc,oBAAoB,gBAAgB;AAElE,MAAM,mBAAmB,MAAM,WAG7B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC,oBAAoB;AAAA,EAApB;AAAA,IACC;AAAA,IACA,aAAU;AAAA,IACV,WAAW,GAAG,kBAAkB,SAAS;AAAA,IACxC,GAAG;AAAA;AACN,CACD;AACD,iBAAiB,cAAc,oBAAoB,OAAO;AAuB1D,MAAM,aAAa,MAAM;AAAA,EAIvB,CACE,EAAE,UAAU,WAAW,aAAa,YAAY,mBAAmB,oBAAoB,gBAAgB,GAAG,MAAM,GAChH,QAEA,qBAAC,kBAAe,KAAU,WAAuB,GAAG,OAClD;AAAA,wBAAC,sBAAmB,WAAW,mBAAoB,UAAS;AAAA,IAC1D,eAAe,cAAc,eAAe,SAC5C,oBAAC,uBAAoB,aAAY,YAAW,WAAW,oBACrD,8BAAC,mBAAgB,WAAW,gBAAgB,GAC9C,IACE;AAAA,IACF,eAAe,gBAAgB,eAAe,SAC9C,oBAAC,uBAAoB,aAAY,cAAa,WAAW,oBACvD,8BAAC,mBAAgB,WAAW,gBAAgB,GAC9C,IACE;AAAA,IACJ,oBAAC,oBAAiB;AAAA,KACpB;AAEJ;AACA,WAAW,cAAc;",
+  "names": []
+}

package/dist/primitives/segmented-control.js

@@ -0,0 +1,101 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { cva } from "class-variance-authority";
+import { cn } from "@open-mercato/shared/lib/utils";
+const SegmentedControlContext = React.createContext({
+  size: "default",
+  disabled: false
+});
+const trackVariants = cva(
+  // Pill-shaped track with subtle inner padding so selected items render
+  // a smaller inner pill (the iOS slide-thumb effect). Track is muted —
+  // selected item raises with bg-background + shadow-sm. We use full
+  // `bg-muted` (not /40) so the contrast between track and a selected
+  // bg-background item stays visible in the light theme; in dark mode
+  // the token already darkens further so the contrast holds.
+  //
+  // Height math (box-border on every element):
+  //   default → track h-8 (32px) − 2px border − 2px padding (p-px ×2) = 28px → matches item h-7
+  //   sm      → track h-7 (28px) − 2px border − 2px padding (p-px ×2) = 24px → matches item h-6
+  // Using `p-0.5` (2px each side = 4px total) instead breaks both sizes by
+  // 2px so the selected pill clips top and bottom against the track border.
+  "inline-flex w-fit gap-0 rounded-full border border-input bg-muted p-px transition-colors",
+  {
+    variants: {
+      size: {
+        sm: "h-7",
+        default: "h-8"
+      },
+      disabled: {
+        true: "cursor-not-allowed opacity-60",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      disabled: false
+    }
+  }
+);
+const itemVariants = cva(
+  // Items are pills that fill the track minus its 2px inner padding.
+  // Selected state lifts via bg-background + shadow-sm + font-semibold
+  // (the font-weight bump gives a secondary visual cue beyond color +
+  // shadow, important when the surrounding theme is high-key and the
+  // shadow alone is hard to read). Unselected text is muted; hover
+  // only nudges color (no bg change — keeps the track flat).
+  "inline-flex items-center justify-center rounded-full font-medium transition-all outline-none focus-visible:shadow-focus disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-background data-[state=checked]:text-foreground data-[state=checked]:font-semibold data-[state=checked]:shadow-sm data-[state=unchecked]:bg-transparent data-[state=unchecked]:text-muted-foreground data-[state=unchecked]:hover:text-foreground",
+  {
+    variants: {
+      size: {
+        sm: "h-6 px-2.5 text-xs",
+        default: "h-7 px-3 text-sm"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+const SegmentedControl = React.forwardRef(({ className, size, disabled, children, ...props }, ref) => {
+  const ctx = React.useMemo(
+    () => ({ size: size ?? "default", disabled: disabled ?? false }),
+    [size, disabled]
+  );
+  return /* @__PURE__ */ jsx(SegmentedControlContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Root,
+    {
+      ref,
+      orientation: "horizontal",
+      disabled: disabled ?? void 0,
+      "data-slot": "segmented-control",
+      className: cn(trackVariants({ size, disabled }), className),
+      ...props,
+      children
+    }
+  ) });
+});
+SegmentedControl.displayName = "SegmentedControl";
+const SegmentedControlItem = React.forwardRef(({ className, children, ...props }, ref) => {
+  const { size } = React.useContext(SegmentedControlContext);
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Item,
+    {
+      ref,
+      "data-slot": "segmented-control-item",
+      className: cn(itemVariants({ size }), className),
+      ...props,
+      children
+    }
+  );
+});
+SegmentedControlItem.displayName = "SegmentedControlItem";
+export {
+  SegmentedControl,
+  SegmentedControlItem,
+  itemVariants as segmentedControlItemVariants,
+  trackVariants as segmentedControlTrackVariants
+};
+//# sourceMappingURL=segmented-control.js.map