@zentauri-ui/zentauri-components 1.7.7 → 1.7.8

package/dist/ui/rating.mjs

@@ -0,0 +1,315 @@
+"use client";
+import { cn } from '../chunk-4D54YOL6.mjs';
+import { useId, useState, useCallback } from 'react';
+import { FaStar, FaThumbsUp, FaFire, FaHeart } from 'react-icons/fa';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/design-system/rating.ts
+var zuiRatingRootBase = "grid w-fit gap-2 text-[color:var(--zui-rating-label-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-rating-label-fg-dark,oklch(98.4%_0.003_247.858))] data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50";
+var zuiRatingLabelBase = "text-sm font-medium leading-6 text-[color:var(--zui-rating-label-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-rating-label-fg-dark,oklch(98.4%_0.003_247.858))]";
+var zuiRatingHintBase = "max-w-sm text-xs leading-5 text-[color:var(--zui-rating-hint-fg,oklch(55.4%_0.046_257.417))] dark:text-[color:var(--zui-rating-hint-fg-dark,oklch(70.4%_0.04_256.788))]";
+var zuiRatingGroupBase = "flex w-fit flex-wrap items-center gap-[var(--zui-rating-gap,0.25rem)]";
+var zuiRatingItemBase = "relative inline-grid shrink-0 place-items-center text-[color:var(--zui-rating-empty,oklch(86.9%_0.022_252.894))] transition-transform duration-200 data-[interactive=true]:hover:-translate-y-0.5 dark:text-[color:var(--zui-rating-empty-dark,oklch(37.2%_0.044_257.287))]";
+var zuiRatingIconBase = "pointer-events-none col-start-1 row-start-1 transition-[clip-path,color,transform] duration-200 ease-out";
+var zuiRatingControlBase = "absolute inset-y-0 z-[1] cursor-pointer rounded-md bg-transparent outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-[var(--zui-rating-ring-focus,oklch(54.6%_0.245_262.881_/_0.32))] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--zui-rating-ring-offset-focus,#ffffff)] disabled:cursor-not-allowed dark:focus-visible:ring-offset-[var(--zui-rating-ring-offset-focus-dark,oklch(12.9%_0.042_264.695))]";
+var zuiRatingErrorBase = "text-sm leading-6 text-[color:var(--zui-rating-error-fg,oklch(58.6%_0.253_17.585))] dark:text-[color:var(--zui-rating-error-fg-dark,oklch(71.2%_0.194_13.428))]";
+var zuiRatingSizes = {
+  sm: "size-5 text-lg",
+  md: "size-7 text-2xl",
+  lg: "size-9 text-3xl"
+};
+var zuiRatingAppearances = {
+  default: "text-[color:var(--zui-rating-default-active,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-rating-default-active-dark,oklch(98.4%_0.003_247.858))]",
+  secondary: "text-[color:var(--zui-rating-secondary-active,oklch(44.6%_0.043_257.281))] dark:text-[color:var(--zui-rating-secondary-active-dark,oklch(86.9%_0.022_252.894))]",
+  destructive: "text-[color:var(--zui-rating-destructive-active,oklch(58.6%_0.253_17.585))] dark:text-[color:var(--zui-rating-destructive-active-dark,oklch(71.2%_0.194_13.428))]",
+  outline: "text-[color:var(--zui-rating-outline-active,oklch(44.6%_0.043_257.281))] dark:text-[color:var(--zui-rating-outline-active-dark,oklch(86.9%_0.022_252.894))]",
+  ghost: "text-[color:var(--zui-rating-ghost-active,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-rating-ghost-active-dark,oklch(92.9%_0.013_255.508))]",
+  glass: "text-[color:var(--zui-rating-glass-active,oklch(54.6%_0.245_262.881))] drop-shadow-[0_2px_12px_rgba(59,130,246,0.25)] dark:text-[color:var(--zui-rating-glass-active-dark,oklch(78.9%_0.154_211.53))]",
+  emerald: "text-[color:var(--zui-rating-emerald-active,oklch(59.6%_0.145_163.225))] dark:text-[color:var(--zui-rating-emerald-active-dark,oklch(77.7%_0.152_181.912))]",
+  indigo: "text-[color:var(--zui-rating-indigo-active,oklch(51.1%_0.262_276.966))] dark:text-[color:var(--zui-rating-indigo-active-dark,oklch(67.3%_0.182_276.935))]",
+  purple: "text-[color:var(--zui-rating-purple-active,oklch(55.8%_0.288_302.321))] dark:text-[color:var(--zui-rating-purple-active-dark,oklch(71.4%_0.203_305.504))]",
+  pink: "text-[color:var(--zui-rating-pink-active,oklch(59.2%_0.249_0.584))] dark:text-[color:var(--zui-rating-pink-active-dark,oklch(71.8%_0.202_349.761))]",
+  rose: "text-[color:var(--zui-rating-rose-active,oklch(58.6%_0.253_17.585))] dark:text-[color:var(--zui-rating-rose-active-dark,oklch(71.2%_0.194_13.428))]",
+  sky: "text-[color:var(--zui-rating-sky-active,oklch(62.3%_0.214_259.815))] dark:text-[color:var(--zui-rating-sky-active-dark,oklch(74.6%_0.16_232.661))]",
+  teal: "text-[color:var(--zui-rating-teal-active,oklch(60%_0.118_184.704))] dark:text-[color:var(--zui-rating-teal-active-dark,oklch(77.7%_0.152_181.912))]",
+  yellow: "text-[color:var(--zui-rating-yellow-active,oklch(79.5%_0.184_86.047))] dark:text-[color:var(--zui-rating-yellow-active-dark,oklch(85.2%_0.199_91.936))]",
+  orange: "text-[color:var(--zui-rating-orange-active,oklch(64.6%_0.222_41.116))] dark:text-[color:var(--zui-rating-orange-active-dark,oklch(75%_0.183_55.934))]",
+  gray: "text-[color:var(--zui-rating-gray-active,oklch(55.1%_0.027_264.364))] dark:text-[color:var(--zui-rating-gray-active-dark,oklch(70.7%_0.022_261.325))]",
+  amber: "text-[color:var(--zui-rating-amber-active,oklch(76.9%_0.188_70.08))] dark:text-[color:var(--zui-rating-amber-active-dark,oklch(82.8%_0.189_84.429))]",
+  violet: "text-[color:var(--zui-rating-violet-active,oklch(54.1%_0.281_293.009))] dark:text-[color:var(--zui-rating-violet-active-dark,oklch(70.2%_0.183_293.541))]",
+  "gradient-blue": "text-[color:var(--zui-rating-gradient-blue-active,oklch(54.6%_0.245_262.881))] drop-shadow-[0_2px_12px_rgba(37,99,235,0.28)] dark:text-[color:var(--zui-rating-gradient-blue-active-dark,oklch(70.7%_0.165_254.624))]",
+  "gradient-green": "text-[color:var(--zui-rating-gradient-green-active,oklch(62.7%_0.194_149.214))] drop-shadow-[0_2px_12px_rgba(22,163,74,0.24)] dark:text-[color:var(--zui-rating-gradient-green-active-dark,oklch(79.2%_0.209_151.711))]",
+  "gradient-red": "text-[color:var(--zui-rating-gradient-red-active,oklch(57.7%_0.245_27.325))] drop-shadow-[0_2px_12px_rgba(220,38,38,0.24)] dark:text-[color:var(--zui-rating-gradient-red-active-dark,oklch(70.4%_0.191_22.216))]",
+  "gradient-yellow": "text-[color:var(--zui-rating-gradient-yellow-active,oklch(79.5%_0.184_86.047))] drop-shadow-[0_2px_12px_rgba(234,179,8,0.24)] dark:text-[color:var(--zui-rating-gradient-yellow-active-dark,oklch(85.2%_0.199_91.936))]",
+  "gradient-purple": "text-[color:var(--zui-rating-gradient-purple-active,oklch(62.7%_0.265_303.9))] drop-shadow-[0_2px_12px_rgba(147,51,234,0.24)] dark:text-[color:var(--zui-rating-gradient-purple-active-dark,oklch(71.4%_0.203_305.504))]",
+  "gradient-teal": "text-[color:var(--zui-rating-gradient-teal-active,oklch(60%_0.118_184.704))] drop-shadow-[0_2px_12px_rgba(13,148,136,0.24)] dark:text-[color:var(--zui-rating-gradient-teal-active-dark,oklch(77.7%_0.152_181.912))]",
+  "gradient-indigo": "text-[color:var(--zui-rating-gradient-indigo-active,oklch(51.1%_0.262_276.966))] drop-shadow-[0_2px_12px_rgba(79,70,229,0.24)] dark:text-[color:var(--zui-rating-gradient-indigo-active-dark,oklch(67.3%_0.182_276.935))]",
+  "gradient-pink": "text-[color:var(--zui-rating-gradient-pink-active,oklch(59.2%_0.249_0.584))] drop-shadow-[0_2px_12px_rgba(219,39,119,0.24)] dark:text-[color:var(--zui-rating-gradient-pink-active-dark,oklch(71.8%_0.202_349.761))]",
+  "gradient-orange": "text-[color:var(--zui-rating-gradient-orange-active,oklch(64.6%_0.222_41.116))] drop-shadow-[0_2px_12px_rgba(234,88,12,0.24)] dark:text-[color:var(--zui-rating-gradient-orange-active-dark,oklch(75%_0.183_55.934))]"
+};
+var ratingItemVariants = cva(zuiRatingItemBase, {
+  variants: {
+    size: zuiRatingSizes
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var ratingIconVariants = cva(zuiRatingIconBase, {
+  variants: {
+    appearance: zuiRatingAppearances
+  },
+  defaultVariants: {
+    appearance: "amber"
+  }
+});
+var PRESET_ICONS = {
+  star: FaStar,
+  heart: FaHeart,
+  flame: FaFire,
+  thumb: FaThumbsUp
+};
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function normalizeMax(max) {
+  const resolved = Number.isFinite(max) ? Number(max) : 5;
+  return Math.max(1, Math.min(10, Math.floor(resolved)));
+}
+function normalizeValue(value, max, allowHalf) {
+  const resolved = Number.isFinite(value) ? Number(value) : 0;
+  const step = allowHalf ? 0.5 : 1;
+  return clamp(Math.round(resolved / step) * step, 0, max);
+}
+function defaultGetLabel(value, max) {
+  return `${value} of ${max}`;
+}
+function resolveIcon(icon) {
+  if (!icon) {
+    return PRESET_ICONS.star;
+  }
+  if (typeof icon === "string") {
+    return PRESET_ICONS[icon] ?? PRESET_ICONS.star;
+  }
+  return icon;
+}
+function Rating(props) {
+  const {
+    allowClear = false,
+    allowHalf = false,
+    appearance,
+    className,
+    defaultValue = 0,
+    disabled,
+    errorMessage,
+    getLabel = defaultGetLabel,
+    hint,
+    icon,
+    iconClassName,
+    id,
+    label,
+    max = 5,
+    name,
+    onValueChange,
+    readOnly,
+    ref,
+    size,
+    value,
+    ...rest
+  } = props;
+  const generatedId = useId();
+  const rootId = id ?? generatedId;
+  const resolvedMax = normalizeMax(max);
+  const isControlled = value !== void 0;
+  const [uncontrolledValue, setUncontrolledValue] = useState(
+    () => normalizeValue(defaultValue, resolvedMax, allowHalf)
+  );
+  const [hoverValue, setHoverValue] = useState();
+  const resolvedValue = normalizeValue(
+    isControlled ? value : uncontrolledValue,
+    resolvedMax,
+    allowHalf
+  );
+  const displayValue = hoverValue ?? resolvedValue;
+  const Icon = resolveIcon(icon);
+  const interactive = !disabled && !readOnly;
+  const controlsDisabled = disabled || readOnly;
+  const step = allowHalf ? 0.5 : 1;
+  const labelId = `${rootId}-label`;
+  const hintId = `${rootId}-hint`;
+  const errorId = `${rootId}-error`;
+  const describedBy = [
+    hint !== void 0 ? hintId : void 0,
+    errorMessage !== void 0 ? errorId : void 0
+  ].filter(Boolean).join(" ");
+  const commitValue = useCallback(
+    (nextValue) => {
+      const normalized = normalizeValue(nextValue, resolvedMax, allowHalf);
+      const next = allowClear && normalized === resolvedValue ? 0 : normalized;
+      if (!isControlled) {
+        setUncontrolledValue(next);
+      }
+      onValueChange?.(next);
+    },
+    [
+      allowClear,
+      allowHalf,
+      isControlled,
+      onValueChange,
+      resolvedMax,
+      resolvedValue
+    ]
+  );
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (!interactive) {
+        return;
+      }
+      const root = event.currentTarget.closest('[data-slot="rating"]');
+      const focusValue = (nextValue) => {
+        const control = root?.querySelector(
+          `button[data-value="${nextValue}"]`
+        );
+        control?.focus();
+      };
+      if (event.key === "ArrowRight" || event.key === "ArrowUp") {
+        event.preventDefault();
+        const nextValue = clamp(resolvedValue + step, step, resolvedMax);
+        commitValue(nextValue);
+        focusValue(nextValue);
+        return;
+      }
+      if (event.key === "ArrowLeft" || event.key === "ArrowDown") {
+        event.preventDefault();
+        const nextValue = clamp(resolvedValue - step, 0, resolvedMax);
+        commitValue(nextValue);
+        focusValue(nextValue === 0 ? step : nextValue);
+        return;
+      }
+      if (event.key === "Home") {
+        event.preventDefault();
+        commitValue(step);
+        focusValue(step);
+        return;
+      }
+      if (event.key === "End") {
+        event.preventDefault();
+        commitValue(resolvedMax);
+        focusValue(resolvedMax);
+      }
+    },
+    [commitValue, interactive, resolvedMax, resolvedValue, step]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      id: rootId,
+      className: cn(zuiRatingRootBase, className),
+      "data-disabled": disabled ? "true" : void 0,
+      "data-readonly": readOnly ? "true" : void 0,
+      "data-slot": "rating",
+      ...rest,
+      children: [
+        label !== void 0 && /* @__PURE__ */ jsx("p", { id: labelId, className: zuiRatingLabelBase, children: label }),
+        hint !== void 0 && /* @__PURE__ */ jsx("p", { id: hintId, className: zuiRatingHintBase, children: hint }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-describedby": describedBy || void 0,
+            "aria-invalid": errorMessage !== void 0 ? true : void 0,
+            "aria-labelledby": label !== void 0 ? labelId : void 0,
+            "aria-label": label === void 0 ? "Rating" : void 0,
+            className: zuiRatingGroupBase,
+            "data-slot": "rating-group",
+            onPointerLeave: () => setHoverValue(void 0),
+            role: "radiogroup",
+            children: Array.from({ length: resolvedMax }, (_, index) => {
+              const fullValue = index + 1;
+              const fillAmount = clamp(displayValue - index, 0, 1);
+              const clipStyle = {
+                clipPath: `inset(0 ${100 - fillAmount * 100}% 0 0)`
+              };
+              const itemOptions = allowHalf ? [fullValue - 0.5, fullValue] : [fullValue];
+              return /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  className: ratingItemVariants({ size }),
+                  "data-interactive": interactive ? "true" : void 0,
+                  "data-slot": "rating-item",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        "aria-hidden": "true",
+                        className: cn("col-start-1 row-start-1", iconClassName)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        "aria-hidden": "true",
+                        className: cn(
+                          ratingIconVariants({ appearance }),
+                          iconClassName
+                        ),
+                        "data-slot": "rating-icon-fill",
+                        style: clipStyle
+                      }
+                    ),
+                    itemOptions.map((optionValue, optionIndex) => /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-checked": resolvedValue === optionValue,
+                        "aria-label": getLabel(optionValue, resolvedMax),
+                        className: cn(
+                          zuiRatingControlBase,
+                          allowHalf ? optionIndex === 0 ? "left-0 w-1/2" : "right-0 w-1/2" : "inset-x-0"
+                        ),
+                        "data-slot": "rating-control",
+                        "data-value": optionValue,
+                        disabled: controlsDisabled,
+                        onClick: () => {
+                          if (interactive) {
+                            commitValue(optionValue);
+                          }
+                        },
+                        onKeyDown: handleKeyDown,
+                        onPointerEnter: () => {
+                          if (interactive) {
+                            setHoverValue(optionValue);
+                          }
+                        },
+                        role: "radio",
+                        tabIndex: resolvedValue === optionValue || resolvedValue === 0 && optionValue === step ? 0 : -1
+                      },
+                      optionValue
+                    ))
+                  ]
+                },
+                fullValue
+              );
+            })
+          }
+        ),
+        name !== void 0 && /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "hidden",
+            name,
+            value: resolvedValue,
+            disabled
+          }
+        ),
+        errorMessage !== void 0 && /* @__PURE__ */ jsx("p", { id: errorId, className: zuiRatingErrorBase, children: errorMessage })
+      ]
+    }
+  );
+}
+Rating.displayName = "Rating";
+
+export { Rating, ratingIconVariants, ratingItemVariants };
+//# sourceMappingURL=rating.mjs.map
+//# sourceMappingURL=rating.mjs.map

package/dist/ui/rating.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/design-system/rating.ts","../../src/ui/rating/variants.ts","../../src/ui/rating/rating.tsx"],"names":[],"mappings":"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","file":"rating.mjs","sourcesContent":["export const zuiRatingRootBase =\n  \"grid w-fit gap-2 text-[color:var(--zui-rating-label-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-rating-label-fg-dark,oklch(98.4%_0.003_247.858))] data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50\";\n\nexport const zuiRatingLabelBase =\n  \"text-sm font-medium leading-6 text-[color:var(--zui-rating-label-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-rating-label-fg-dark,oklch(98.4%_0.003_247.858))]\";\n\nexport const zuiRatingHintBase =\n  \"max-w-sm text-xs leading-5 text-[color:var(--zui-rating-hint-fg,oklch(55.4%_0.046_257.417))] dark:text-[color:var(--zui-rating-hint-fg-dark,oklch(70.4%_0.04_256.788))]\";\n\nexport const zuiRatingGroupBase =\n  \"flex w-fit flex-wrap items-center gap-[var(--zui-rating-gap,0.25rem)]\";\n\nexport const zuiRatingItemBase =\n  \"relative inline-grid shrink-0 place-items-center text-[color:var(--zui-rating-empty,oklch(86.9%_0.022_252.894))] transition-transform duration-200 data-[interactive=true]:hover:-translate-y-0.5 dark:text-[color:var(--zui-rating-empty-dark,oklch(37.2%_0.044_257.287))]\";\n\nexport const zuiRatingIconBase =\n  \"pointer-events-none col-start-1 row-start-1 transition-[clip-path,color,transform] duration-200 ease-out\";\n\nexport const zuiRatingControlBase =\n  \"absolute inset-y-0 z-[1] cursor-pointer rounded-md bg-transparent outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-[var(--zui-rating-ring-focus,oklch(54.6%_0.245_262.881_/_0.32))] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--zui-rating-ring-offset-focus,#ffffff)] disabled:cursor-not-allowed dark:focus-visible:ring-offset-[var(--zui-rating-ring-offset-focus-dark,oklch(12.9%_0.042_264.695))]\";\n\nexport const zuiRatingErrorBase =\n  \"text-sm leading-6 text-[color:var(--zui-rating-error-fg,oklch(58.6%_0.253_17.585))] dark:text-[color:var(--zui-rating-error-fg-dark,oklch(71.2%_0.194_13.428))]\";\n\nexport const zuiRatingSizes = {\n  sm: \"size-5 text-lg\",\n  md: \"size-7 text-2xl\",\n  lg: \"size-9 text-3xl\",\n} as const;\n\nexport const zuiRatingAppearances = {\n  default:\n    \"text-[color:var(--zui-rating-default-active,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-rating-default-active-dark,oklch(98.4%_0.003_247.858))]\",\n  secondary:\n    \"text-[color:var(--zui-rating-secondary-active,oklch(44.6%_0.043_257.281))] dark:text-[color:var(--zui-rating-secondary-active-dark,oklch(86.9%_0.022_252.894))]\",\n  destructive:\n    \"text-[color:var(--zui-rating-destructive-active,oklch(58.6%_0.253_17.585))] dark:text-[color:var(--zui-rating-destructive-active-dark,oklch(71.2%_0.194_13.428))]\",\n  outline:\n    \"text-[color:var(--zui-rating-outline-active,oklch(44.6%_0.043_257.281))] dark:text-[color:var(--zui-rating-outline-active-dark,oklch(86.9%_0.022_252.894))]\",\n  ghost:\n    \"text-[color:var(--zui-rating-ghost-active,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-rating-ghost-active-dark,oklch(92.9%_0.013_255.508))]\",\n  glass:\n    \"text-[color:var(--zui-rating-glass-active,oklch(54.6%_0.245_262.881))] drop-shadow-[0_2px_12px_rgba(59,130,246,0.25)] dark:text-[color:var(--zui-rating-glass-active-dark,oklch(78.9%_0.154_211.53))]\",\n  emerald:\n    \"text-[color:var(--zui-rating-emerald-active,oklch(59.6%_0.145_163.225))] dark:text-[color:var(--zui-rating-emerald-active-dark,oklch(77.7%_0.152_181.912))]\",\n  indigo:\n    \"text-[color:var(--zui-rating-indigo-active,oklch(51.1%_0.262_276.966))] dark:text-[color:var(--zui-rating-indigo-active-dark,oklch(67.3%_0.182_276.935))]\",\n  purple:\n    \"text-[color:var(--zui-rating-purple-active,oklch(55.8%_0.288_302.321))] dark:text-[color:var(--zui-rating-purple-active-dark,oklch(71.4%_0.203_305.504))]\",\n  pink: \"text-[color:var(--zui-rating-pink-active,oklch(59.2%_0.249_0.584))] dark:text-[color:var(--zui-rating-pink-active-dark,oklch(71.8%_0.202_349.761))]\",\n  rose: \"text-[color:var(--zui-rating-rose-active,oklch(58.6%_0.253_17.585))] dark:text-[color:var(--zui-rating-rose-active-dark,oklch(71.2%_0.194_13.428))]\",\n  sky: \"text-[color:var(--zui-rating-sky-active,oklch(62.3%_0.214_259.815))] dark:text-[color:var(--zui-rating-sky-active-dark,oklch(74.6%_0.16_232.661))]\",\n  teal: \"text-[color:var(--zui-rating-teal-active,oklch(60%_0.118_184.704))] dark:text-[color:var(--zui-rating-teal-active-dark,oklch(77.7%_0.152_181.912))]\",\n  yellow:\n    \"text-[color:var(--zui-rating-yellow-active,oklch(79.5%_0.184_86.047))] dark:text-[color:var(--zui-rating-yellow-active-dark,oklch(85.2%_0.199_91.936))]\",\n  orange:\n    \"text-[color:var(--zui-rating-orange-active,oklch(64.6%_0.222_41.116))] dark:text-[color:var(--zui-rating-orange-active-dark,oklch(75%_0.183_55.934))]\",\n  gray: \"text-[color:var(--zui-rating-gray-active,oklch(55.1%_0.027_264.364))] dark:text-[color:var(--zui-rating-gray-active-dark,oklch(70.7%_0.022_261.325))]\",\n  amber:\n    \"text-[color:var(--zui-rating-amber-active,oklch(76.9%_0.188_70.08))] dark:text-[color:var(--zui-rating-amber-active-dark,oklch(82.8%_0.189_84.429))]\",\n  violet:\n    \"text-[color:var(--zui-rating-violet-active,oklch(54.1%_0.281_293.009))] dark:text-[color:var(--zui-rating-violet-active-dark,oklch(70.2%_0.183_293.541))]\",\n  \"gradient-blue\":\n    \"text-[color:var(--zui-rating-gradient-blue-active,oklch(54.6%_0.245_262.881))] drop-shadow-[0_2px_12px_rgba(37,99,235,0.28)] dark:text-[color:var(--zui-rating-gradient-blue-active-dark,oklch(70.7%_0.165_254.624))]\",\n  \"gradient-green\":\n    \"text-[color:var(--zui-rating-gradient-green-active,oklch(62.7%_0.194_149.214))] drop-shadow-[0_2px_12px_rgba(22,163,74,0.24)] dark:text-[color:var(--zui-rating-gradient-green-active-dark,oklch(79.2%_0.209_151.711))]\",\n  \"gradient-red\":\n    \"text-[color:var(--zui-rating-gradient-red-active,oklch(57.7%_0.245_27.325))] drop-shadow-[0_2px_12px_rgba(220,38,38,0.24)] dark:text-[color:var(--zui-rating-gradient-red-active-dark,oklch(70.4%_0.191_22.216))]\",\n  \"gradient-yellow\":\n    \"text-[color:var(--zui-rating-gradient-yellow-active,oklch(79.5%_0.184_86.047))] drop-shadow-[0_2px_12px_rgba(234,179,8,0.24)] dark:text-[color:var(--zui-rating-gradient-yellow-active-dark,oklch(85.2%_0.199_91.936))]\",\n  \"gradient-purple\":\n    \"text-[color:var(--zui-rating-gradient-purple-active,oklch(62.7%_0.265_303.9))] drop-shadow-[0_2px_12px_rgba(147,51,234,0.24)] dark:text-[color:var(--zui-rating-gradient-purple-active-dark,oklch(71.4%_0.203_305.504))]\",\n  \"gradient-teal\":\n    \"text-[color:var(--zui-rating-gradient-teal-active,oklch(60%_0.118_184.704))] drop-shadow-[0_2px_12px_rgba(13,148,136,0.24)] dark:text-[color:var(--zui-rating-gradient-teal-active-dark,oklch(77.7%_0.152_181.912))]\",\n  \"gradient-indigo\":\n    \"text-[color:var(--zui-rating-gradient-indigo-active,oklch(51.1%_0.262_276.966))] drop-shadow-[0_2px_12px_rgba(79,70,229,0.24)] dark:text-[color:var(--zui-rating-gradient-indigo-active-dark,oklch(67.3%_0.182_276.935))]\",\n  \"gradient-pink\":\n    \"text-[color:var(--zui-rating-gradient-pink-active,oklch(59.2%_0.249_0.584))] drop-shadow-[0_2px_12px_rgba(219,39,119,0.24)] dark:text-[color:var(--zui-rating-gradient-pink-active-dark,oklch(71.8%_0.202_349.761))]\",\n  \"gradient-orange\":\n    \"text-[color:var(--zui-rating-gradient-orange-active,oklch(64.6%_0.222_41.116))] drop-shadow-[0_2px_12px_rgba(234,88,12,0.24)] dark:text-[color:var(--zui-rating-gradient-orange-active-dark,oklch(75%_0.183_55.934))]\",\n} as const;\n","import { cva } from \"class-variance-authority\";\n\nimport {\n  zuiRatingAppearances,\n  zuiRatingIconBase,\n  zuiRatingItemBase,\n  zuiRatingSizes,\n} from \"../../design-system/rating\";\n\nexport const ratingItemVariants = cva(zuiRatingItemBase, {\n  variants: {\n    size: zuiRatingSizes,\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nexport const ratingIconVariants = cva(zuiRatingIconBase, {\n  variants: {\n    appearance: zuiRatingAppearances,\n  },\n  defaultVariants: {\n    appearance: \"amber\",\n  },\n});\n","\"use client\";\n\nimport {\n  type CSSProperties,\n  type KeyboardEvent,\n  useCallback,\n  useId,\n  useState,\n} from \"react\";\nimport { FaFire, FaHeart, FaStar, FaThumbsUp } from \"react-icons/fa\";\nimport type { IconType } from \"react-icons\";\n\nimport {\n  zuiRatingControlBase,\n  zuiRatingErrorBase,\n  zuiRatingGroupBase,\n  zuiRatingHintBase,\n  zuiRatingLabelBase,\n  zuiRatingRootBase,\n} from \"../../design-system/rating\";\nimport { cn } from \"../../lib/utils\";\n\nimport type { RatingPresetIcon, RatingProps } from \"./types\";\nimport { ratingIconVariants, ratingItemVariants } from \"./variants\";\n\nconst PRESET_ICONS: Record<RatingPresetIcon, IconType> = {\n  star: FaStar,\n  heart: FaHeart,\n  flame: FaFire,\n  thumb: FaThumbsUp,\n};\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(Math.max(value, min), max);\n}\n\nfunction normalizeMax(max: number | undefined): number {\n  const resolved = Number.isFinite(max) ? Number(max) : 5;\n  return Math.max(1, Math.min(10, Math.floor(resolved)));\n}\n\nfunction normalizeValue(\n  value: number | undefined,\n  max: number,\n  allowHalf: boolean,\n): number {\n  const resolved = Number.isFinite(value) ? Number(value) : 0;\n  const step = allowHalf ? 0.5 : 1;\n  return clamp(Math.round(resolved / step) * step, 0, max);\n}\n\nfunction defaultGetLabel(value: number, max: number): string {\n  return `${value} of ${max}`;\n}\n\nfunction resolveIcon(icon: RatingProps[\"icon\"]): IconType {\n  if (!icon) {\n    return PRESET_ICONS.star;\n  }\n\n  if (typeof icon === \"string\") {\n    return PRESET_ICONS[icon as RatingPresetIcon] ?? PRESET_ICONS.star;\n  }\n\n  return icon;\n}\n\nexport function Rating(props: RatingProps) {\n  const {\n    allowClear = false,\n    allowHalf = false,\n    appearance,\n    className,\n    defaultValue = 0,\n    disabled,\n    errorMessage,\n    getLabel = defaultGetLabel,\n    hint,\n    icon,\n    iconClassName,\n    id,\n    label,\n    max = 5,\n    name,\n    onValueChange,\n    readOnly,\n    ref,\n    size,\n    value,\n    ...rest\n  } = props;\n\n  const generatedId = useId();\n  const rootId = id ?? generatedId;\n  const resolvedMax = normalizeMax(max);\n  const isControlled = value !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(() =>\n    normalizeValue(defaultValue, resolvedMax, allowHalf),\n  );\n  const [hoverValue, setHoverValue] = useState<number | undefined>();\n  const resolvedValue = normalizeValue(\n    isControlled ? value : uncontrolledValue,\n    resolvedMax,\n    allowHalf,\n  );\n  const displayValue = hoverValue ?? resolvedValue;\n  const Icon = resolveIcon(icon);\n  const interactive = !disabled && !readOnly;\n  const controlsDisabled = disabled || readOnly;\n  const step = allowHalf ? 0.5 : 1;\n  const labelId = `${rootId}-label`;\n  const hintId = `${rootId}-hint`;\n  const errorId = `${rootId}-error`;\n  const describedBy = [\n    hint !== undefined ? hintId : undefined,\n    errorMessage !== undefined ? errorId : undefined,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  const commitValue = useCallback(\n    (nextValue: number) => {\n      const normalized = normalizeValue(nextValue, resolvedMax, allowHalf);\n      const next = allowClear && normalized === resolvedValue ? 0 : normalized;\n\n      if (!isControlled) {\n        setUncontrolledValue(next);\n      }\n      onValueChange?.(next);\n    },\n    [\n      allowClear,\n      allowHalf,\n      isControlled,\n      onValueChange,\n      resolvedMax,\n      resolvedValue,\n    ],\n  );\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLButtonElement>) => {\n      if (!interactive) {\n        return;\n      }\n\n      const root = event.currentTarget.closest('[data-slot=\"rating\"]');\n      const focusValue = (nextValue: number) => {\n        const control = root?.querySelector(\n          `button[data-value=\"${nextValue}\"]`,\n        ) as HTMLButtonElement | null;\n        control?.focus();\n      };\n\n      if (event.key === \"ArrowRight\" || event.key === \"ArrowUp\") {\n        event.preventDefault();\n        const nextValue = clamp(resolvedValue + step, step, resolvedMax);\n        commitValue(nextValue);\n        focusValue(nextValue);\n        return;\n      }\n\n      if (event.key === \"ArrowLeft\" || event.key === \"ArrowDown\") {\n        event.preventDefault();\n        const nextValue = clamp(resolvedValue - step, 0, resolvedMax);\n        commitValue(nextValue);\n        focusValue(nextValue === 0 ? step : nextValue);\n        return;\n      }\n\n      if (event.key === \"Home\") {\n        event.preventDefault();\n        commitValue(step);\n        focusValue(step);\n        return;\n      }\n\n      if (event.key === \"End\") {\n        event.preventDefault();\n        commitValue(resolvedMax);\n        focusValue(resolvedMax);\n      }\n    },\n    [commitValue, interactive, resolvedMax, resolvedValue, step],\n  );\n\n  return (\n    <div\n      ref={ref}\n      id={rootId}\n      className={cn(zuiRatingRootBase, className)}\n      data-disabled={disabled ? \"true\" : undefined}\n      data-readonly={readOnly ? \"true\" : undefined}\n      data-slot=\"rating\"\n      {...rest}\n    >\n      {label !== undefined && (\n        <p id={labelId} className={zuiRatingLabelBase}>\n          {label}\n        </p>\n      )}\n      {hint !== undefined && (\n        <p id={hintId} className={zuiRatingHintBase}>\n          {hint}\n        </p>\n      )}\n      <div\n        aria-describedby={describedBy || undefined}\n        aria-invalid={errorMessage !== undefined ? true : undefined}\n        aria-labelledby={label !== undefined ? labelId : undefined}\n        aria-label={label === undefined ? \"Rating\" : undefined}\n        className={zuiRatingGroupBase}\n        data-slot=\"rating-group\"\n        onPointerLeave={() => setHoverValue(undefined)}\n        role=\"radiogroup\"\n      >\n        {Array.from({ length: resolvedMax }, (_, index) => {\n          const fullValue = index + 1;\n          const fillAmount = clamp(displayValue - index, 0, 1);\n          const clipStyle = {\n            clipPath: `inset(0 ${100 - fillAmount * 100}% 0 0)`,\n          } satisfies CSSProperties;\n          const itemOptions = allowHalf\n            ? [fullValue - 0.5, fullValue]\n            : [fullValue];\n\n          return (\n            <span\n              key={fullValue}\n              className={ratingItemVariants({ size })}\n              data-interactive={interactive ? \"true\" : undefined}\n              data-slot=\"rating-item\"\n            >\n              <Icon\n                aria-hidden=\"true\"\n                className={cn(\"col-start-1 row-start-1\", iconClassName)}\n              />\n              <Icon\n                aria-hidden=\"true\"\n                className={cn(\n                  ratingIconVariants({ appearance }),\n                  iconClassName,\n                )}\n                data-slot=\"rating-icon-fill\"\n                style={clipStyle}\n              />\n              {itemOptions.map((optionValue, optionIndex) => (\n                <button\n                  key={optionValue}\n                  type=\"button\"\n                  aria-checked={resolvedValue === optionValue}\n                  aria-label={getLabel(optionValue, resolvedMax)}\n                  className={cn(\n                    zuiRatingControlBase,\n                    allowHalf\n                      ? optionIndex === 0\n                        ? \"left-0 w-1/2\"\n                        : \"right-0 w-1/2\"\n                      : \"inset-x-0\",\n                  )}\n                  data-slot=\"rating-control\"\n                  data-value={optionValue}\n                  disabled={controlsDisabled}\n                  onClick={() => {\n                    if (interactive) {\n                      commitValue(optionValue);\n                    }\n                  }}\n                  onKeyDown={handleKeyDown}\n                  onPointerEnter={() => {\n                    if (interactive) {\n                      setHoverValue(optionValue);\n                    }\n                  }}\n                  role=\"radio\"\n                  tabIndex={\n                    resolvedValue === optionValue ||\n                    (resolvedValue === 0 && optionValue === step)\n                      ? 0\n                      : -1\n                  }\n                />\n              ))}\n            </span>\n          );\n        })}\n      </div>\n      {name !== undefined && (\n        <input\n          type=\"hidden\"\n          name={name}\n          value={resolvedValue}\n          disabled={disabled}\n        />\n      )}\n      {errorMessage !== undefined && (\n        <p id={errorId} className={zuiRatingErrorBase}>\n          {errorMessage}\n        </p>\n      )}\n    </div>\n  );\n}\n\nRating.displayName = \"Rating\";\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zentauri-ui/zentauri-components",
-  "version": "1.7.7",
+  "version": "1.7.8",
   "description": "React + Tailwind UI kit with charts, ESM/CJS builds, per-entry exports, and a zentauri-components / zentauri-ui CLI to vendor UI or hook source into your app",
   "license": "MIT",
   "files": [

package/src/design-system/index.ts

@@ -20,6 +20,7 @@ export * from "./otp-input";
 export * from "./pagination";
 export * from "./popover";
 export * from "./progress";
+export * from "./rating";
 export * from "./radio-group";
 export * from "./scroll-area";
 export * from "./select";

package/src/design-system/rating.ts

@@ -0,0 +1,81 @@
+export const zuiRatingRootBase =
+  "grid w-fit gap-2 text-[color:var(--zui-rating-label-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-rating-label-fg-dark,oklch(98.4%_0.003_247.858))] data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50";
+
+export const zuiRatingLabelBase =
+  "text-sm font-medium leading-6 text-[color:var(--zui-rating-label-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-rating-label-fg-dark,oklch(98.4%_0.003_247.858))]";
+
+export const zuiRatingHintBase =
+  "max-w-sm text-xs leading-5 text-[color:var(--zui-rating-hint-fg,oklch(55.4%_0.046_257.417))] dark:text-[color:var(--zui-rating-hint-fg-dark,oklch(70.4%_0.04_256.788))]";
+
+export const zuiRatingGroupBase =
+  "flex w-fit flex-wrap items-center gap-[var(--zui-rating-gap,0.25rem)]";
+
+export const zuiRatingItemBase =
+  "relative inline-grid shrink-0 place-items-center text-[color:var(--zui-rating-empty,oklch(86.9%_0.022_252.894))] transition-transform duration-200 data-[interactive=true]:hover:-translate-y-0.5 dark:text-[color:var(--zui-rating-empty-dark,oklch(37.2%_0.044_257.287))]";
+
+export const zuiRatingIconBase =
+  "pointer-events-none col-start-1 row-start-1 transition-[clip-path,color,transform] duration-200 ease-out";
+
+export const zuiRatingControlBase =
+  "absolute inset-y-0 z-[1] cursor-pointer rounded-md bg-transparent outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-[var(--zui-rating-ring-focus,oklch(54.6%_0.245_262.881_/_0.32))] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--zui-rating-ring-offset-focus,#ffffff)] disabled:cursor-not-allowed dark:focus-visible:ring-offset-[var(--zui-rating-ring-offset-focus-dark,oklch(12.9%_0.042_264.695))]";
+
+export const zuiRatingErrorBase =
+  "text-sm leading-6 text-[color:var(--zui-rating-error-fg,oklch(58.6%_0.253_17.585))] dark:text-[color:var(--zui-rating-error-fg-dark,oklch(71.2%_0.194_13.428))]";
+
+export const zuiRatingSizes = {
+  sm: "size-5 text-lg",
+  md: "size-7 text-2xl",
+  lg: "size-9 text-3xl",
+} as const;
+
+export const zuiRatingAppearances = {
+  default:
+    "text-[color:var(--zui-rating-default-active,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-rating-default-active-dark,oklch(98.4%_0.003_247.858))]",
+  secondary:
+    "text-[color:var(--zui-rating-secondary-active,oklch(44.6%_0.043_257.281))] dark:text-[color:var(--zui-rating-secondary-active-dark,oklch(86.9%_0.022_252.894))]",
+  destructive:
+    "text-[color:var(--zui-rating-destructive-active,oklch(58.6%_0.253_17.585))] dark:text-[color:var(--zui-rating-destructive-active-dark,oklch(71.2%_0.194_13.428))]",
+  outline:
+    "text-[color:var(--zui-rating-outline-active,oklch(44.6%_0.043_257.281))] dark:text-[color:var(--zui-rating-outline-active-dark,oklch(86.9%_0.022_252.894))]",
+  ghost:
+    "text-[color:var(--zui-rating-ghost-active,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-rating-ghost-active-dark,oklch(92.9%_0.013_255.508))]",
+  glass:
+    "text-[color:var(--zui-rating-glass-active,oklch(54.6%_0.245_262.881))] drop-shadow-[0_2px_12px_rgba(59,130,246,0.25)] dark:text-[color:var(--zui-rating-glass-active-dark,oklch(78.9%_0.154_211.53))]",
+  emerald:
+    "text-[color:var(--zui-rating-emerald-active,oklch(59.6%_0.145_163.225))] dark:text-[color:var(--zui-rating-emerald-active-dark,oklch(77.7%_0.152_181.912))]",
+  indigo:
+    "text-[color:var(--zui-rating-indigo-active,oklch(51.1%_0.262_276.966))] dark:text-[color:var(--zui-rating-indigo-active-dark,oklch(67.3%_0.182_276.935))]",
+  purple:
+    "text-[color:var(--zui-rating-purple-active,oklch(55.8%_0.288_302.321))] dark:text-[color:var(--zui-rating-purple-active-dark,oklch(71.4%_0.203_305.504))]",
+  pink: "text-[color:var(--zui-rating-pink-active,oklch(59.2%_0.249_0.584))] dark:text-[color:var(--zui-rating-pink-active-dark,oklch(71.8%_0.202_349.761))]",
+  rose: "text-[color:var(--zui-rating-rose-active,oklch(58.6%_0.253_17.585))] dark:text-[color:var(--zui-rating-rose-active-dark,oklch(71.2%_0.194_13.428))]",
+  sky: "text-[color:var(--zui-rating-sky-active,oklch(62.3%_0.214_259.815))] dark:text-[color:var(--zui-rating-sky-active-dark,oklch(74.6%_0.16_232.661))]",
+  teal: "text-[color:var(--zui-rating-teal-active,oklch(60%_0.118_184.704))] dark:text-[color:var(--zui-rating-teal-active-dark,oklch(77.7%_0.152_181.912))]",
+  yellow:
+    "text-[color:var(--zui-rating-yellow-active,oklch(79.5%_0.184_86.047))] dark:text-[color:var(--zui-rating-yellow-active-dark,oklch(85.2%_0.199_91.936))]",
+  orange:
+    "text-[color:var(--zui-rating-orange-active,oklch(64.6%_0.222_41.116))] dark:text-[color:var(--zui-rating-orange-active-dark,oklch(75%_0.183_55.934))]",
+  gray: "text-[color:var(--zui-rating-gray-active,oklch(55.1%_0.027_264.364))] dark:text-[color:var(--zui-rating-gray-active-dark,oklch(70.7%_0.022_261.325))]",
+  amber:
+    "text-[color:var(--zui-rating-amber-active,oklch(76.9%_0.188_70.08))] dark:text-[color:var(--zui-rating-amber-active-dark,oklch(82.8%_0.189_84.429))]",
+  violet:
+    "text-[color:var(--zui-rating-violet-active,oklch(54.1%_0.281_293.009))] dark:text-[color:var(--zui-rating-violet-active-dark,oklch(70.2%_0.183_293.541))]",
+  "gradient-blue":
+    "text-[color:var(--zui-rating-gradient-blue-active,oklch(54.6%_0.245_262.881))] drop-shadow-[0_2px_12px_rgba(37,99,235,0.28)] dark:text-[color:var(--zui-rating-gradient-blue-active-dark,oklch(70.7%_0.165_254.624))]",
+  "gradient-green":
+    "text-[color:var(--zui-rating-gradient-green-active,oklch(62.7%_0.194_149.214))] drop-shadow-[0_2px_12px_rgba(22,163,74,0.24)] dark:text-[color:var(--zui-rating-gradient-green-active-dark,oklch(79.2%_0.209_151.711))]",
+  "gradient-red":
+    "text-[color:var(--zui-rating-gradient-red-active,oklch(57.7%_0.245_27.325))] drop-shadow-[0_2px_12px_rgba(220,38,38,0.24)] dark:text-[color:var(--zui-rating-gradient-red-active-dark,oklch(70.4%_0.191_22.216))]",
+  "gradient-yellow":
+    "text-[color:var(--zui-rating-gradient-yellow-active,oklch(79.5%_0.184_86.047))] drop-shadow-[0_2px_12px_rgba(234,179,8,0.24)] dark:text-[color:var(--zui-rating-gradient-yellow-active-dark,oklch(85.2%_0.199_91.936))]",
+  "gradient-purple":
+    "text-[color:var(--zui-rating-gradient-purple-active,oklch(62.7%_0.265_303.9))] drop-shadow-[0_2px_12px_rgba(147,51,234,0.24)] dark:text-[color:var(--zui-rating-gradient-purple-active-dark,oklch(71.4%_0.203_305.504))]",
+  "gradient-teal":
+    "text-[color:var(--zui-rating-gradient-teal-active,oklch(60%_0.118_184.704))] drop-shadow-[0_2px_12px_rgba(13,148,136,0.24)] dark:text-[color:var(--zui-rating-gradient-teal-active-dark,oklch(77.7%_0.152_181.912))]",
+  "gradient-indigo":
+    "text-[color:var(--zui-rating-gradient-indigo-active,oklch(51.1%_0.262_276.966))] drop-shadow-[0_2px_12px_rgba(79,70,229,0.24)] dark:text-[color:var(--zui-rating-gradient-indigo-active-dark,oklch(67.3%_0.182_276.935))]",
+  "gradient-pink":
+    "text-[color:var(--zui-rating-gradient-pink-active,oklch(59.2%_0.249_0.584))] drop-shadow-[0_2px_12px_rgba(219,39,119,0.24)] dark:text-[color:var(--zui-rating-gradient-pink-active-dark,oklch(71.8%_0.202_349.761))]",
+  "gradient-orange":
+    "text-[color:var(--zui-rating-gradient-orange-active,oklch(64.6%_0.222_41.116))] drop-shadow-[0_2px_12px_rgba(234,88,12,0.24)] dark:text-[color:var(--zui-rating-gradient-orange-active-dark,oklch(75%_0.183_55.934))]",
+} as const;

package/src/ui/rating/index.ts

@@ -0,0 +1,10 @@
+"use client";
+
+export { Rating } from "./rating";
+export type {
+  RatingIconVariantProps,
+  RatingItemVariantProps,
+  RatingPresetIcon,
+  RatingProps,
+} from "./types";
+export { ratingIconVariants, ratingItemVariants } from "./variants";

package/src/ui/rating/rating.test.tsx

@@ -0,0 +1,139 @@
+import { createRef } from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { Rating } from "./rating";
+
+describe("Rating", () => {
+  it("should expose displayName", () => {
+    expect(Rating.displayName).toBe("Rating");
+  });
+
+  it("should stamp data slots and render the requested number of controls", () => {
+    render(<Rating label="Product score" max={4} />);
+
+    expect(document.querySelector('[data-slot="rating"]')).toBeTruthy();
+    expect(screen.getByRole("radiogroup")).toBeInTheDocument();
+    expect(screen.getAllByRole("radio")).toHaveLength(4);
+  });
+
+  it("should render half-step radio options when allowHalf is enabled", () => {
+    render(<Rating allowHalf label="Product score" max={3} />);
+
+    expect(screen.getAllByRole("radio")).toHaveLength(6);
+    expect(screen.getByLabelText("2.5 of 3")).toBeInTheDocument();
+  });
+
+  it("should support uncontrolled value changes", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(<Rating label="Product score" onValueChange={onValueChange} />);
+
+    await user.click(screen.getByLabelText("4 of 5"));
+
+    expect(screen.getByLabelText("4 of 5")).toHaveAttribute(
+      "aria-checked",
+      "true",
+    );
+    expect(onValueChange).toHaveBeenLastCalledWith(4);
+  });
+
+  it("should support controlled state", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(
+      <Rating label="Product score" value={2} onValueChange={onValueChange} />,
+    );
+
+    await user.click(screen.getByLabelText("5 of 5"));
+
+    expect(screen.getByLabelText("2 of 5")).toHaveAttribute(
+      "aria-checked",
+      "true",
+    );
+    expect(onValueChange).toHaveBeenLastCalledWith(5);
+  });
+
+  it("should clear the current value when allowClear is enabled", async () => {
+    const user = userEvent.setup();
+    render(<Rating allowClear defaultValue={3} label="Product score" />);
+
+    await user.click(screen.getByLabelText("3 of 5"));
+
+    expect(screen.getByLabelText("1 of 5")).toHaveAttribute("tabindex", "0");
+    expect(screen.getByLabelText("3 of 5")).toHaveAttribute(
+      "aria-checked",
+      "false",
+    );
+  });
+
+  it("should step with arrow keys", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(
+      <Rating
+        allowHalf
+        defaultValue={2}
+        label="Product score"
+        onValueChange={onValueChange}
+      />,
+    );
+
+    screen.getByLabelText("2 of 5").focus();
+    await user.keyboard("{ArrowRight}");
+
+    expect(onValueChange).toHaveBeenLastCalledWith(2.5);
+    expect(screen.getByLabelText("2.5 of 5")).toHaveAttribute(
+      "aria-checked",
+      "true",
+    );
+    expect(screen.getByLabelText("2.5 of 5")).toHaveFocus();
+  });
+
+  it("should fall back to the star icon for unknown icon preset strings", () => {
+    render(
+      <Rating
+        icon={"unknown" as never}
+        defaultValue={3}
+        label="Product score"
+      />,
+    );
+
+    expect(screen.getByRole("radiogroup")).toBeInTheDocument();
+  });
+
+  it("should not change when disabled", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(
+      <Rating
+        disabled
+        defaultValue={2}
+        label="Product score"
+        onValueChange={onValueChange}
+      />,
+    );
+
+    await user.click(screen.getByLabelText("4 of 5"));
+
+    expect(onValueChange).not.toHaveBeenCalled();
+    expect(screen.getByLabelText("2 of 5")).toHaveAttribute(
+      "aria-checked",
+      "true",
+    );
+  });
+
+  it("should render a hidden input when name is provided", () => {
+    render(<Rating defaultValue={3.5} allowHalf label="Score" name="score" />);
+
+    expect(document.querySelector('input[name="score"]')).toHaveValue("3.5");
+  });
+
+  it("should forward ref to the root", () => {
+    const ref = createRef<HTMLDivElement>();
+    render(<Rating ref={ref} label="Product score" />);
+
+    expect(ref.current?.getAttribute("data-slot")).toBe("rating");
+  });
+});