@elabs-ai/components-ui 4.0.0

package/src/components/progress/progress.stories.tsx

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+import { Progress } from "./progress";
+const meta = {
+  title: "Display/Progress",
+  component: Progress,
+  tags: ["autodocs"],
+  argTypes: {
+    value: {
+      description: "Current progress value (0–100). `null` / undefined = indeterminate.",
+      control: "number",
+      table: { category: "State" },
+    },
+    max: {
+      description: "Maximum value; defaults to 100.",
+      control: "number",
+      table: { category: "Behavior" },
+    },
+    variant: {
+      description:
+        "Indicator fill tone (#358) — reuses the StatusBadge/Alert vocabulary. Pair a non-default tone with `aria-valuetext` so the state isn't color-only.",
+      control: { type: "select" },
+      options: ["default", "success", "warning", "destructive"],
+      table: { category: "Appearance" },
+    },
+    className: {
+      description: "Extra Tailwind classes merged via cn() on the track.",
+      control: "text",
+      table: { category: "Appearance" },
+    },
+  },
+} satisfies Meta<typeof Progress>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = { render: () => <Progress value={62} className="w-64" /> };
+export const Full: Story = { render: () => <Progress value={100} className="w-64" /> };
+export const Empty: Story = { render: () => <Progress value={0} className="w-64" /> };
+
+/**
+ * All four tones (#358). Non-text contrast of the indicator fill against the
+ * `bg-muted` track (WCAG 1.4.11, ≥3:1), **measured in a real browser** on this
+ * story (`getComputedStyle` → canvas readback, 2026-08-02) rather than derived
+ * from the token literals:
+ *
+ * | tone        | light | dark |
+ * | ----------- | ----------- | --------- |
+ * | default     | 4.09:1      | 7.17:1    |
+ * | success     | 5.19:1      | 9.07:1    |
+ * | warning     | 4.44:1      | 7.88:1    |
+ * | destructive | 4.94:1      | 4.79:1    |
+ *
+ * All four clear 3:1 in both painted themes. `warning` used to be the hole in
+ * this table (1.88:1 in light); it was a token-value gap, not a component
+ * one, and #381 fixed it at the token — `--warning` is now a deep amber that
+ * clears 3:1 on every content surface.
+ *
+ * High decoration is deliberately NOT in this table: the decoration dial no
+ * longer re-inks controls at all (decoration paints backgrounds and chart
+ * fills only), so the indicator fill is the SAME painted token at every
+ * decoration level and this measurement holds across the whole dial.
+ */
+export const Tones: Story = {
+  render: () => (
+    <div className="flex w-64 flex-col gap-3">
+      <Progress value={62} variant="default" aria-label="Default tone" />
+      <Progress value={62} variant="success" aria-label="Success tone" />
+      <Progress value={62} variant="warning" aria-label="Warning tone" />
+      <Progress
+        value={100}
+        variant="destructive"
+        aria-label="Destructive tone"
+        aria-valuetext="Exceeded — 120 of 100"
+      />
+    </div>
+  ),
+  play: async ({ canvas }) => {
+    const destructive = canvas.getByRole("progressbar", { name: "Destructive tone" });
+    await expect(destructive).toHaveAttribute("aria-valuetext", "Exceeded — 120 of 100");
+  },
+};

package/src/components/progress/progress.test.tsx

@@ -0,0 +1,35 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Progress } from "./progress";
+describe("Progress", () => {
+  it("exposes the value to AT", () => {
+    render(<Progress value={40} />);
+    expect(screen.getByRole("progressbar")).toHaveAttribute("aria-valuenow", "40");
+  });
+
+  // #358 — tone variant
+  it("defaults the indicator fill to bg-primary when no variant is passed", () => {
+    const { container } = render(<Progress value={40} />);
+    const indicator = container.querySelector('[role="progressbar"] > *');
+    expect(indicator).toHaveClass("bg-primary");
+    expect(indicator).not.toHaveClass("bg-destructive");
+  });
+
+  it.each(["success", "warning", "destructive"] as const)(
+    "renders the %s tone as the indicator fill and not bg-primary",
+    (variant) => {
+      const { container } = render(<Progress value={40} variant={variant} />);
+      const indicator = container.querySelector('[role="progressbar"] > *');
+      expect(indicator).toHaveClass(`bg-${variant}`);
+      expect(indicator).not.toHaveClass("bg-primary");
+    },
+  );
+
+  it("passes aria-valuetext through to the underlying progressbar (non-color signal)", () => {
+    render(<Progress value={100} variant="destructive" aria-valuetext="Exceeded — 100 of 100" />);
+    expect(screen.getByRole("progressbar")).toHaveAttribute(
+      "aria-valuetext",
+      "Exceeded — 100 of 100",
+    );
+  });
+});

package/src/components/progress/progress.tsx

@@ -0,0 +1,50 @@
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../lib/cn";
+
+/**
+ * Tone vocabulary reused from `StatusBadge`/`Alert` (success/warning/destructive
+ * on semantic tokens, #358) rather than reinvented. `default` keeps the fill
+ * byte-identical (`bg-primary`) when `variant` is unset.
+ */
+export const progressIndicatorVariants = cva("size-full flex-1 transition-transform", {
+  variants: {
+    variant: {
+      default: "bg-primary",
+      success: "bg-success",
+      warning: "bg-warning",
+      destructive: "bg-destructive",
+    },
+  },
+  defaultVariants: { variant: "default" },
+});
+
+export interface ProgressProps
+  extends
+    ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>,
+    VariantProps<typeof progressIndicatorVariants> {}
+
+/**
+ * Color must not be the only signal a guardrail tripped: set `aria-valuetext`
+ * (e.g. `"Exceeded — 120 of 100"`) alongside a non-`default` `variant` — it
+ * passes straight through to the underlying `role="progressbar"` element via
+ * `...props` (Radix's `ProgressPrimitive.Root` already supports it).
+ */
+export const Progress = forwardRef<ElementRef<typeof ProgressPrimitive.Root>, ProgressProps>(
+  function Progress({ className, value, variant, ...props }, ref) {
+    return (
+      <ProgressPrimitive.Root
+        ref={ref}
+        value={value}
+        className={cn("relative h-2 w-full overflow-hidden rounded-full bg-muted", className)}
+        {...props}
+      >
+        <ProgressPrimitive.Indicator
+          className={progressIndicatorVariants({ variant })}
+          style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+        />
+      </ProgressPrimitive.Root>
+    );
+  },
+);

package/src/components/radio-group/index.ts

@@ -0,0 +1 @@
+export { RadioGroup, RadioGroupItem } from "./radio-group";

package/src/components/radio-group/radio-group.stories.tsx

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+import { RadioGroup, RadioGroupItem } from "./radio-group";
+import { Label } from "../label";
+const meta = {
+  title: "Forms/RadioGroup",
+  component: RadioGroup,
+  tags: ["autodocs"],
+  argTypes: {
+    value: {
+      description: "Controlled selected value.",
+      control: "text",
+      table: { category: "State" },
+    },
+    defaultValue: {
+      description: "Uncontrolled initial selected value.",
+      control: "text",
+      table: { category: "State" },
+    },
+    orientation: {
+      description: "Layout direction of the radio items.",
+      control: { type: "radio" },
+      options: ["horizontal", "vertical"],
+      table: { category: "Appearance" },
+    },
+    disabled: {
+      description: "Disables all radio items in the group.",
+      control: "boolean",
+      table: { category: "State" },
+    },
+    required: {
+      description: "Marks the group as required in a form context.",
+      control: "boolean",
+      table: { category: "Behavior" },
+    },
+    onValueChange: {
+      description: "Called when the selected value changes.",
+      control: false,
+      table: { category: "Behavior" },
+    },
+    children: {
+      description: "RadioGroupItem elements.",
+      control: false,
+      table: { category: "Content" },
+    },
+    className: {
+      description: "Additional CSS classes applied to the root element.",
+      control: "text",
+      table: { category: "Appearance" },
+    },
+  },
+} satisfies Meta<typeof RadioGroup>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  render: () => (
+    <RadioGroup defaultValue="a">
+      {["a", "b", "c"].map((v) => (
+        <div key={v} className="flex items-center gap-2">
+          <RadioGroupItem value={v} id={`r-${v}`} />
+          <Label htmlFor={`r-${v}`}>Option {v.toUpperCase()}</Label>
+        </div>
+      ))}
+    </RadioGroup>
+  ),
+  // "A" starts checked; clicking "B" shifts the selection.
+  play: async ({ canvas, userEvent }) => {
+    const radioA = canvas.getByRole("radio", { name: /option a/i });
+    await expect(radioA).toBeChecked();
+    const radioB = canvas.getByRole("radio", { name: /option b/i });
+    await userEvent.click(radioB);
+    await expect(radioB).toBeChecked();
+    await expect(radioA).not.toBeChecked();
+  },
+};

package/src/components/radio-group/radio-group.test.tsx

@@ -0,0 +1,16 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { RadioGroup, RadioGroupItem } from "./radio-group";
+describe("RadioGroup", () => {
+  it("selects an item", async () => {
+    render(
+      <RadioGroup>
+        <RadioGroupItem value="a" aria-label="a" />
+        <RadioGroupItem value="b" aria-label="b" />
+      </RadioGroup>,
+    );
+    await userEvent.click(screen.getByRole("radio", { name: "b" }));
+    expect(screen.getByRole("radio", { name: "b" })).toBeChecked();
+  });
+});

package/src/components/radio-group/radio-group.tsx

@@ -0,0 +1,33 @@
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { Circle } from "lucide-react";
+import { cn } from "../../lib/cn";
+
+export const RadioGroup = forwardRef<
+  ElementRef<typeof RadioGroupPrimitive.Root>,
+  ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(function RadioGroup({ className, ...props }, ref) {
+  return <RadioGroupPrimitive.Root ref={ref} className={cn("grid gap-2", className)} {...props} />;
+});
+
+export const RadioGroupItem = forwardRef<
+  ElementRef<typeof RadioGroupPrimitive.Item>,
+  ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(function RadioGroupItem({ className, ...props }, ref) {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square size-4 rounded-full border border-input text-primary shadow-sm transition-colors duration-fast ease-standard",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        "disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary",
+        className,
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center animate-in zoom-in-75 fade-in duration-fast ease-entrance">
+        <Circle className="size-2.5 fill-primary text-primary" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+});

package/src/components/rating/index.ts

@@ -0,0 +1 @@
+export { Rating, type RatingProps } from "./rating";

package/src/components/rating/rating.stories.tsx

@@ -0,0 +1,111 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect } from "storybook/test";
+import { useState } from "react";
+import { Rating } from "./rating";
+
+const meta = {
+  title: "Forms/Rating",
+  component: Rating,
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      description: "Visual size of each star.",
+      control: { type: "inline-radio" },
+      options: ["sm", "md", "lg"],
+      table: { category: "Appearance" },
+    },
+    value: {
+      description: "Controlled rating value (0..max).",
+      control: "number",
+      table: { category: "State" },
+    },
+    defaultValue: {
+      description: "Uncontrolled initial value.",
+      control: "number",
+      table: { category: "State" },
+    },
+    max: {
+      description: "Number of stars.",
+      control: "number",
+      table: { category: "Appearance" },
+    },
+    allowHalf: {
+      description: "Allow half-star (0.5) increments.",
+      control: "boolean",
+      table: { category: "Behavior" },
+    },
+    readOnly: {
+      description: "Render as a non-interactive display.",
+      control: "boolean",
+      table: { category: "State" },
+    },
+    disabled: {
+      description: "Disable interaction.",
+      control: "boolean",
+      table: { category: "State" },
+    },
+    onValueChange: {
+      description: "Called when the rating changes.",
+      control: false,
+      table: { category: "Behavior" },
+    },
+    "aria-label": {
+      description: "Accessible name for the rating group.",
+      control: "text",
+      table: { category: "Appearance" },
+    },
+    className: {
+      description: "Additional CSS classes applied to the root element.",
+      control: "text",
+      table: { category: "Appearance" },
+    },
+  },
+} satisfies Meta<typeof Rating>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { defaultValue: 3 },
+  // Clicks the 5th star and confirms it becomes checked.
+  play: async ({ canvas, userEvent }) => {
+    const star5 = canvas.getByRole("radio", { name: /5 stars/i });
+    await userEvent.click(star5);
+    await expect(star5).toHaveAttribute("aria-checked", "true");
+  },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <Rating defaultValue={3} size="sm" aria-label="Small rating" />
+      <Rating defaultValue={3} size="md" aria-label="Medium rating" />
+      <Rating defaultValue={3} size="lg" aria-label="Large rating" />
+    </div>
+  ),
+};
+
+export const HalfSteps: Story = {
+  args: { defaultValue: 2.5, allowHalf: true },
+};
+
+export const ReadOnly: Story = {
+  args: { value: 4, readOnly: true },
+};
+
+export const Disabled: Story = {
+  args: { defaultValue: 2, disabled: true },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [value, setValue] = useState(3);
+    return (
+      <div className="flex flex-col gap-2">
+        <Rating value={value} onValueChange={setValue} aria-label="Controlled rating" />
+        <p className="text-muted-foreground text-body tabular-nums">Value: {value}</p>
+      </div>
+    );
+  },
+};

package/src/components/rating/rating.test.tsx

@@ -0,0 +1,41 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Rating } from "./rating";
+
+describe("Rating", () => {
+  it("renders `max` interactive stars as a radiogroup", () => {
+    render(<Rating defaultValue={0} max={5} aria-label="Quality" />);
+    expect(screen.getByRole("radiogroup", { name: "Quality" })).toBeInTheDocument();
+    expect(screen.getAllByRole("radio")).toHaveLength(5);
+  });
+
+  it("marks the current star as checked", () => {
+    render(<Rating value={3} aria-label="Quality" />);
+    expect(screen.getByRole("radio", { name: "3 stars" })).toHaveAttribute("aria-checked", "true");
+    expect(screen.getByRole("radio", { name: "2 stars" })).toHaveAttribute("aria-checked", "false");
+  });
+
+  it("calls onValueChange when a star is clicked", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(<Rating defaultValue={0} onValueChange={onValueChange} aria-label="Quality" />);
+    await user.click(screen.getByRole("radio", { name: "4 stars" }));
+    expect(onValueChange).toHaveBeenCalledWith(4);
+  });
+
+  it("adjusts the value with arrow keys", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(<Rating defaultValue={2} onValueChange={onValueChange} aria-label="Quality" />);
+    await user.tab(); // focus the roving tab stop
+    await user.keyboard("{ArrowRight}");
+    expect(onValueChange).toHaveBeenCalledWith(3);
+  });
+
+  it("renders readOnly as a non-interactive img with an accessible label", () => {
+    render(<Rating value={4} max={5} readOnly />);
+    expect(screen.getByRole("img", { name: "4 out of 5" })).toBeInTheDocument();
+    expect(screen.queryByRole("radio")).not.toBeInTheDocument();
+  });
+});

package/src/components/rating/rating.tsx

@@ -0,0 +1,226 @@
+// a2ui.exposed: yes
+import {
+  forwardRef,
+  useCallback,
+  useRef,
+  useState,
+  type HTMLAttributes,
+  type KeyboardEvent,
+  type PointerEvent,
+} from "react";
+import { Star } from "lucide-react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../lib/cn";
+
+const ratingVariants = cva("inline-flex items-center", {
+  variants: {
+    size: {
+      sm: "gap-0.5",
+      md: "gap-1",
+      lg: "gap-1.5",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+const STAR_SIZE: Record<NonNullable<VariantProps<typeof ratingVariants>["size"]>, string> = {
+  sm: "size-4",
+  md: "size-5",
+  lg: "size-6",
+};
+
+export interface RatingProps
+  extends
+    Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue">,
+    VariantProps<typeof ratingVariants> {
+  /** Controlled value (0..max). */
+  value?: number;
+  /** Uncontrolled default value (0..max). Default 0. */
+  defaultValue?: number;
+  /** Called when the rating changes. */
+  onValueChange?: (value: number) => void;
+  /** Number of stars. Default 5. */
+  max?: number;
+  /** Allow half-star values (0.5 increments). Default false. */
+  allowHalf?: boolean;
+  /** Render as a non-interactive display of the value. */
+  readOnly?: boolean;
+  /** Disable interaction (interactive variant only). */
+  disabled?: boolean;
+  /** Accessible name for the rating group. Default "Rating". */
+  "aria-label"?: string;
+}
+
+function clamp(v: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, v));
+}
+
+/**
+ * Rating — a star rating control.
+ *
+ * Controlled via `value`/`onValueChange`; uncontrolled via `defaultValue`.
+ * Interactive mode is a `radiogroup` (keyboard ←/→ adjust by `allowHalf ? 0.5 : 1`,
+ * Home clears, End sets max). `readOnly` renders a non-interactive `role="img"`
+ * summary. Half-star clicks land on the left/right half of a star when `allowHalf`.
+ */
+export const Rating = forwardRef<HTMLDivElement, RatingProps>(function Rating(
+  {
+    value: valueProp,
+    defaultValue = 0,
+    onValueChange,
+    max = 5,
+    allowHalf = false,
+    readOnly = false,
+    disabled = false,
+    size = "md",
+    className,
+    "aria-label": ariaLabel = "Rating",
+    ...props
+  },
+  ref,
+) {
+  const isControlled = valueProp !== undefined;
+  const [internalValue, setInternalValue] = useState<number>(defaultValue);
+  const [hoverValue, setHoverValue] = useState<number | null>(null);
+
+  const current = clamp(isControlled ? (valueProp ?? 0) : internalValue, 0, max);
+  const interactive = !readOnly && !disabled;
+  const display = interactive && hoverValue !== null ? hoverValue : current;
+
+  const starRefs = useRef<(HTMLButtonElement | null)[]>([]);
+
+  const commit = useCallback(
+    (next: number) => {
+      const clamped = clamp(next, 0, max);
+      if (!isControlled) setInternalValue(clamped);
+      onValueChange?.(clamped);
+    },
+    [isControlled, max, onValueChange],
+  );
+
+  const step = allowHalf ? 0.5 : 1;
+
+  const valueFromPointer = useCallback(
+    (e: PointerEvent<HTMLButtonElement>, index: number): number => {
+      if (!allowHalf) return index;
+      const rect = e.currentTarget.getBoundingClientRect();
+      const isLeftHalf = e.clientX - rect.left < rect.width / 2;
+      return isLeftHalf ? index - 0.5 : index;
+    },
+    [allowHalf],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLDivElement>) => {
+      if (!interactive) return;
+      let next = current;
+      switch (e.key) {
+        case "ArrowRight":
+        case "ArrowUp":
+          next = clamp(current + step, 0, max);
+          break;
+        case "ArrowLeft":
+        case "ArrowDown":
+          next = clamp(current - step, 0, max);
+          break;
+        case "Home":
+          next = 0;
+          break;
+        case "End":
+          next = max;
+          break;
+        default:
+          return;
+      }
+      e.preventDefault();
+      commit(next);
+      // Move focus to the star representing the new value (roving tabindex).
+      const focusIndex = Math.max(0, Math.ceil(next) - 1);
+      starRefs.current[focusIndex]?.focus();
+    },
+    [interactive, current, step, max, commit],
+  );
+
+  // Roving tabindex: the star at the current value (or the first) is the tab stop.
+  const tabStopIndex = current > 0 ? Math.ceil(current) - 1 : 0;
+
+  // Read-only / disabled: a single non-interactive summary.
+  if (!interactive) {
+    return (
+      <div
+        ref={ref}
+        role="img"
+        aria-label={`${current} out of ${max}`}
+        className={cn(ratingVariants({ size }), disabled && "opacity-50", className)}
+        {...props}
+      >
+        {Array.from({ length: max }, (_, i) => (
+          <StarGlyph key={i} fill={clamp(display - i, 0, 1)} sizeClass={STAR_SIZE[size ?? "md"]} />
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={ref}
+      role="radiogroup"
+      aria-label={ariaLabel}
+      className={cn(ratingVariants({ size }), className)}
+      onKeyDown={handleKeyDown}
+      onPointerLeave={() => setHoverValue(null)}
+      {...props}
+    >
+      {Array.from({ length: max }, (_, i) => {
+        const index = i + 1;
+        const checked = Math.ceil(current) === index;
+        return (
+          <button
+            key={index}
+            ref={(el) => {
+              starRefs.current[i] = el;
+            }}
+            type="button"
+            role="radio"
+            aria-checked={checked}
+            aria-label={`${index} ${index === 1 ? "star" : "stars"}`}
+            tabIndex={i === tabStopIndex ? 0 : -1}
+            className="rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background"
+            onClick={(e) =>
+              commit(valueFromPointer(e as unknown as PointerEvent<HTMLButtonElement>, index))
+            }
+            onPointerMove={(e) => setHoverValue(valueFromPointer(e, index))}
+          >
+            <StarGlyph fill={clamp(display - i, 0, 1)} sizeClass={STAR_SIZE[size ?? "md"]} />
+          </button>
+        );
+      })}
+    </div>
+  );
+});
+
+interface StarGlyphProps {
+  /** Fill fraction 0..1 for this star. */
+  fill: number;
+  sizeClass: string;
+}
+
+/** A single star rendered with a partial fill overlay (supports half stars). */
+function StarGlyph({ fill, sizeClass }: StarGlyphProps) {
+  return (
+    <span className={cn("relative inline-block", sizeClass)} aria-hidden="true">
+      <Star className={cn(sizeClass, "text-muted-foreground")} />
+      {fill > 0 && (
+        <span
+          className="absolute inset-0 overflow-hidden"
+          // Width is a layout value (the fill fraction), never a color.
+          style={{ width: `${fill * 100}%` }}
+        >
+          <Star className={cn(sizeClass, "fill-current text-warning")} />
+        </span>
+      )}
+    </span>
+  );
+}

package/src/components/resizable/index.ts

@@ -0,0 +1 @@
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "./resizable";