@epilot/spark-ui 0.26.1 → 0.27.0

package/dist/components/rating.cjs

@@ -0,0 +1,167 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-DY84GLCh.cjs");
+const require_components_field = require("./field.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _base_ui_react_radio = require("@base-ui/react/radio");
+let _base_ui_react_radio_group = require("@base-ui/react/radio-group");
+let cn = require("cn");
+//#region src/components/rating.tsx
+const RatingContext = react.createContext(null);
+function useRating() {
+	const context = react.useContext(RatingContext);
+	if (!context) throw new Error("RatingStars and RatingCaption need a Rating");
+	return context;
+}
+function Rating({ value: valueProp, defaultValue = null, onValueChange, max = 5, labels, size = "medium", readOnly = false, disabled = false, name, className, children, ...props }) {
+	const [uncontrolled, setUncontrolled] = react.useState(defaultValue);
+	const [hovered, setHovered] = react.useState(null);
+	const value = valueProp === void 0 ? uncontrolled : valueProp;
+	const setValue = react.useCallback((next) => {
+		setUncontrolled(next);
+		onValueChange?.(next);
+	}, [onValueChange]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RatingContext.Provider, {
+		value: {
+			value,
+			setValue,
+			hovered: readOnly || disabled ? null : hovered,
+			setHovered,
+			max,
+			labels,
+			size,
+			readOnly,
+			disabled,
+			name
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"data-slot": "rating",
+			className: (0, cn.cn)("flex flex-col items-start gap-[calc(var(--spark-layout-gap)*1)]", className),
+			...props,
+			children
+		})
+	});
+}
+const sizeClasses = {
+	small: {
+		star: "size-4",
+		button: "size-6"
+	},
+	medium: {
+		star: "size-6",
+		button: "size-8"
+	},
+	large: {
+		star: "size-8",
+		button: "size-11"
+	}
+};
+const compactSizeClasses = {
+	small: {
+		star: "size-3.5",
+		button: "size-6"
+	},
+	medium: {
+		star: "size-4.5",
+		button: "size-6"
+	},
+	large: {
+		star: "size-5",
+		button: "size-6"
+	}
+};
+function starTone(fill, disabled) {
+	if (disabled) return fill === "off" ? "fill-none stroke-gray-a6" : "fill-gray-a7 stroke-gray-a7";
+	if (fill === "on") return "fill-spark-9 stroke-spark-9";
+	if (fill === "preview") return "fill-spark-a4 stroke-spark-9";
+	return "fill-none stroke-gray-a9";
+}
+function captionTone(hasLabel, hovered, disabled) {
+	if (disabled) return "text-gray-a9";
+	if (!hasLabel) return "text-gray-11";
+	return hovered ? "text-spark-11" : "text-gray-12";
+}
+function Star({ className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		strokeWidth: 1.5,
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		className: (0, cn.cn)("transition-colors motion-reduce:transition-none", className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12.60 3.17 L14.72 8.03 Q15.00 8.67 15.69 8.74 L20.97 9.26 Q22.46 9.40 21.34 10.40 L17.37 13.91 Q16.85 14.38 17.00 15.06 L18.14 20.23 Q18.47 21.70 17.17 20.94 L12.60 18.25 Q12.00 17.90 11.40 18.25 L6.83 20.94 Q5.53 21.70 5.86 20.23 L7.00 15.06 Q7.15 14.38 6.63 13.91 L2.66 10.40 Q1.54 9.40 3.03 9.26 L8.31 8.74 Q9.00 8.67 9.28 8.03 L11.40 3.17 Q12.00 1.80 12.60 3.17Z" })
+	});
+}
+function RatingStars({ className, onPointerLeave, onKeyDown, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedByProp, ...props }) {
+	const rating = useRating();
+	const { field, ariaDescribedBy, ariaInvalid } = require_components_field.useFieldControl({ ariaDescribedBy: ariaDescribedByProp });
+	const invalid = require_components_field.useFieldSetInvalid();
+	const { star: starSize, button: buttonSize } = (rating.max > 5 ? compactSizeClasses : sizeClasses)[rating.size];
+	const interactive = !rating.readOnly && !rating.disabled;
+	const low = Math.min(rating.value ?? 0, rating.hovered ?? rating.value ?? 0);
+	const high = Math.max(rating.value ?? 0, rating.hovered ?? 0);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_radio_group.RadioGroup, {
+		"data-slot": "rating-stars",
+		"data-invalid": invalid,
+		"aria-labelledby": ariaLabelledBy ?? (field?.readOnly ? field.labelId : void 0),
+		"aria-describedby": ariaDescribedBy,
+		"aria-invalid": ariaInvalid,
+		value: rating.value,
+		onValueChange: (next) => next !== null && rating.setValue(next),
+		readOnly: rating.readOnly,
+		disabled: rating.disabled,
+		name: rating.name,
+		className: (0, cn.cn)("flex", className),
+		onPointerLeave: (event) => {
+			rating.setHovered(null);
+			onPointerLeave?.(event);
+		},
+		onKeyDown: (event) => {
+			rating.setHovered(null);
+			onKeyDown?.(event);
+		},
+		...props,
+		children: Array.from({ length: rating.max }, (_, index) => {
+			const star = index + 1;
+			const fill = star <= low ? "on" : star <= high ? "preview" : "off";
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_radio.Radio.Root, {
+				value: star,
+				"aria-label": rating.labels?.[index] ?? String(star),
+				"data-slot": "rating-star",
+				"data-fill": fill,
+				"aria-readonly": void 0,
+				nativeButton: true,
+				render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {}),
+				onPointerEnter: interactive ? () => rating.setHovered(star) : void 0,
+				className: (0, cn.cn)("inline-flex min-h-[24px] min-w-[24px] shrink-0 cursor-pointer items-center justify-center rounded-sm border-0 bg-transparent p-0 touch-target-row any-pointer-coarse:min-w-11", "focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden", "data-disabled:cursor-not-allowed data-readonly:cursor-default", buttonSize),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Star, { className: (0, cn.cn)(starSize, starTone(fill, rating.disabled)) })
+			}, star);
+		})
+	});
+}
+const captionTextSize = {
+	small: "text-[0.8125rem]",
+	medium: "text-sm",
+	large: "text-base"
+};
+function RatingCaption({ className, children, ...props }) {
+	const rating = useRating();
+	const shown = rating.hovered ?? rating.value;
+	const label = shown ? rating.labels?.[shown - 1] : void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		"data-slot": "rating-caption",
+		"aria-hidden": "true",
+		"aria-disabled": rating.disabled || void 0,
+		className: (0, cn.cn)("leading-5", captionTextSize[rating.size], label !== void 0 && "font-medium", captionTone(label !== void 0, !!rating.hovered, rating.disabled), className),
+		...props,
+		children: label ?? children
+	});
+}
+//#endregion
+exports.Rating = Rating;
+exports.RatingCaption = RatingCaption;
+exports.RatingStars = RatingStars;
+
+//# sourceMappingURL=rating.cjs.map

package/dist/components/rating.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"rating.cjs","names":["React","useFieldControl","useFieldSetInvalid","RadioGroupPrimitive","RadioPrimitive"],"sources":["../../src/components/rating.tsx"],"sourcesContent":["import { Radio as RadioPrimitive } from '@base-ui/react/radio'\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { useFieldControl, useFieldSetInvalid } from './field'\n\ntype RatingSize = 'small' | 'medium' | 'large'\n\ntype RatingContextValue = {\n  value: number | null\n  setValue: (value: number) => void\n  hovered: number | null\n  setHovered: (value: number | null) => void\n  max: number\n  labels?: string[]\n  size: RatingSize\n  readOnly: boolean\n  disabled: boolean\n  name?: string\n}\n\nconst RatingContext = React.createContext<RatingContextValue | null>(null)\n\nfunction useRating() {\n  const context = React.useContext(RatingContext)\n  if (!context) throw new Error('RatingStars and RatingCaption need a Rating')\n  return context\n}\n\ninterface RatingProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'defaultValue' | 'onChange'\n> {\n  /** The chosen star, 1-based. `null` means nothing is chosen yet. */\n  value?: number | null\n  defaultValue?: number | null\n  onValueChange?: (value: number) => void\n  max?: number\n  /** One label per star: the star's accessible name and the caption text. */\n  labels?: string[]\n  size?: RatingSize\n  readOnly?: boolean\n  disabled?: boolean\n  name?: string\n}\n\nfunction Rating({\n  value: valueProp,\n  defaultValue = null,\n  onValueChange,\n  max = 5,\n  labels,\n  size = 'medium',\n  readOnly = false,\n  disabled = false,\n  name,\n  className,\n  children,\n  ...props\n}: RatingProps) {\n  const [uncontrolled, setUncontrolled] = React.useState(defaultValue)\n  const [hovered, setHovered] = React.useState<number | null>(null)\n  const value = valueProp === undefined ? uncontrolled : valueProp\n\n  const setValue = React.useCallback(\n    (next: number) => {\n      setUncontrolled(next)\n      onValueChange?.(next)\n    },\n    [onValueChange],\n  )\n\n  return (\n    <RatingContext.Provider\n      value={{\n        value,\n        setValue,\n        hovered: readOnly || disabled ? null : hovered,\n        setHovered,\n        max,\n        labels,\n        size,\n        readOnly,\n        disabled,\n        name,\n      }}\n    >\n      <div\n        data-slot=\"rating\"\n        className={cn(\n          'flex flex-col items-start gap-[calc(var(--spark-layout-gap)*1)]',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </RatingContext.Provider>\n  )\n}\n\ntype SizeClasses = { star: string; button: string }\n\nconst sizeClasses: Record<RatingSize, SizeClasses> = {\n  small: { star: 'size-4', button: 'size-6' },\n  medium: { star: 'size-6', button: 'size-8' },\n  large: { star: 'size-8', button: 'size-11' },\n}\n\n// above five stars the row would outgrow narrow panels\nconst compactSizeClasses: Record<RatingSize, SizeClasses> = {\n  small: { star: 'size-3.5', button: 'size-6' },\n  medium: { star: 'size-4.5', button: 'size-6' },\n  large: { star: 'size-5', button: 'size-6' },\n}\n\ntype StarFill = 'on' | 'preview' | 'off'\n\nfunction starTone(fill: StarFill, disabled: boolean) {\n  if (disabled) {\n    return fill === 'off'\n      ? 'fill-none stroke-gray-a6'\n      : 'fill-gray-a7 stroke-gray-a7'\n  }\n  if (fill === 'on') return 'fill-spark-9 stroke-spark-9'\n  if (fill === 'preview') return 'fill-spark-a4 stroke-spark-9'\n  return 'fill-none stroke-gray-a9'\n}\n\nfunction captionTone(hasLabel: boolean, hovered: boolean, disabled: boolean) {\n  if (disabled) return 'text-gray-a9'\n  if (!hasLabel) return 'text-gray-11'\n  return hovered ? 'text-spark-11' : 'text-gray-12'\n}\n\nfunction Star({ className }: { className: string }) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      strokeWidth={1.5}\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n      className={cn(\n        'transition-colors motion-reduce:transition-none',\n        className,\n      )}\n    >\n      <path d=\"M12.60 3.17 L14.72 8.03 Q15.00 8.67 15.69 8.74 L20.97 9.26 Q22.46 9.40 21.34 10.40 L17.37 13.91 Q16.85 14.38 17.00 15.06 L18.14 20.23 Q18.47 21.70 17.17 20.94 L12.60 18.25 Q12.00 17.90 11.40 18.25 L6.83 20.94 Q5.53 21.70 5.86 20.23 L7.00 15.06 Q7.15 14.38 6.63 13.91 L2.66 10.40 Q1.54 9.40 3.03 9.26 L8.31 8.74 Q9.00 8.67 9.28 8.03 L11.40 3.17 Q12.00 1.80 12.60 3.17Z\" />\n    </svg>\n  )\n}\n\ntype RatingStarsProps = Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'defaultValue' | 'onChange'\n>\n\nfunction RatingStars({\n  className,\n  onPointerLeave,\n  onKeyDown,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedByProp,\n  ...props\n}: RatingStarsProps) {\n  const rating = useRating()\n  const { field, ariaDescribedBy, ariaInvalid } = useFieldControl({\n    ariaDescribedBy: ariaDescribedByProp,\n  })\n  const invalid = useFieldSetInvalid()\n  const { star: starSize, button: buttonSize } = (\n    rating.max > 5 ? compactSizeClasses : sizeClasses\n  )[rating.size]\n  const interactive = !rating.readOnly && !rating.disabled\n  const low = Math.min(rating.value ?? 0, rating.hovered ?? rating.value ?? 0)\n  const high = Math.max(rating.value ?? 0, rating.hovered ?? 0)\n\n  return (\n    <RadioGroupPrimitive<number | null>\n      data-slot=\"rating-stars\"\n      data-invalid={invalid}\n      // a read-only FieldLabel renders the Field's labelId and drops a caller id\n      aria-labelledby={\n        ariaLabelledBy ?? (field?.readOnly ? field.labelId : undefined)\n      }\n      aria-describedby={ariaDescribedBy}\n      aria-invalid={ariaInvalid}\n      value={rating.value}\n      onValueChange={(next) => next !== null && rating.setValue(next)}\n      readOnly={rating.readOnly}\n      disabled={rating.disabled}\n      name={rating.name}\n      className={cn('flex', className)}\n      onPointerLeave={(event) => {\n        rating.setHovered(null)\n        onPointerLeave?.(event)\n      }}\n      onKeyDown={(event) => {\n        rating.setHovered(null)\n        onKeyDown?.(event)\n      }}\n      {...props}\n    >\n      {Array.from({ length: rating.max }, (_, index) => {\n        const star = index + 1\n        const fill: StarFill =\n          star <= low ? 'on' : star <= high ? 'preview' : 'off'\n        return (\n          <RadioPrimitive.Root\n            key={star}\n            value={star}\n            aria-label={rating.labels?.[index] ?? String(star)}\n            data-slot=\"rating-star\"\n            data-fill={fill}\n            // ARIA allows aria-readonly on the radiogroup, which Base UI also sets, not on a radio\n            aria-readonly={undefined}\n            nativeButton\n            render={<button />}\n            onPointerEnter={\n              interactive ? () => rating.setHovered(star) : undefined\n            }\n            className={cn(\n              // p-0 keeps the box against the UA button padding without preflight;\n              // the px floor keeps axe's 24px target size when [data-scaling] shrinks rems\n              'inline-flex min-h-[24px] min-w-[24px] shrink-0 cursor-pointer items-center justify-center rounded-sm border-0 bg-transparent p-0 touch-target-row any-pointer-coarse:min-w-11',\n              'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n              'data-disabled:cursor-not-allowed data-readonly:cursor-default',\n              buttonSize,\n            )}\n          >\n            <Star className={cn(starSize, starTone(fill, rating.disabled))} />\n          </RadioPrimitive.Root>\n        )\n      })}\n    </RadioGroupPrimitive>\n  )\n}\n\nconst captionTextSize: Record<RatingSize, string> = {\n  small: 'text-[0.8125rem]',\n  medium: 'text-sm',\n  large: 'text-base',\n}\n\nfunction RatingCaption({\n  className,\n  children,\n  ...props\n}: React.HTMLAttributes<HTMLParagraphElement>) {\n  const rating = useRating()\n  const shown = rating.hovered ?? rating.value\n  const label = shown ? rating.labels?.[shown - 1] : undefined\n\n  return (\n    <p\n      data-slot=\"rating-caption\"\n      // the stars already carry each label as their accessible name\n      aria-hidden=\"true\"\n      // axe skips contrast on inactive text, and the dim tone is the disabled cue\n      aria-disabled={rating.disabled || undefined}\n      className={cn(\n        'leading-5',\n        captionTextSize[rating.size],\n        label !== undefined && 'font-medium',\n        captionTone(label !== undefined, !!rating.hovered, rating.disabled),\n        className,\n      )}\n      {...props}\n    >\n      {label ?? children}\n    </p>\n  )\n}\n\nexport { Rating, RatingCaption, RatingStars }\nexport type { RatingProps, RatingStarsProps }\n"],"mappings":"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"}

package/dist/components/rating.d.cts

@@ -0,0 +1,50 @@
+"use client";
+
+import * as React$1 from "react";
+
+//#region src/components/rating.d.ts
+type RatingSize = 'small' | 'medium' | 'large';
+interface RatingProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
+  /** The chosen star, 1-based. `null` means nothing is chosen yet. */
+  value?: number | null;
+  defaultValue?: number | null;
+  onValueChange?: (value: number) => void;
+  max?: number;
+  /** One label per star: the star's accessible name and the caption text. */
+  labels?: string[];
+  size?: RatingSize;
+  readOnly?: boolean;
+  disabled?: boolean;
+  name?: string;
+}
+declare function Rating({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  max,
+  labels,
+  size,
+  readOnly,
+  disabled,
+  name,
+  className,
+  children,
+  ...props
+}: RatingProps): import("react/jsx-runtime").JSX.Element;
+type RatingStarsProps = Omit<React$1.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'>;
+declare function RatingStars({
+  className,
+  onPointerLeave,
+  onKeyDown,
+  'aria-labelledby': ariaLabelledBy,
+  'aria-describedby': ariaDescribedByProp,
+  ...props
+}: RatingStarsProps): import("react/jsx-runtime").JSX.Element;
+declare function RatingCaption({
+  className,
+  children,
+  ...props
+}: React$1.HTMLAttributes<HTMLParagraphElement>): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Rating, RatingCaption, type RatingProps, RatingStars, type RatingStarsProps };
+//# sourceMappingURL=rating.d.cts.map

package/dist/components/rating.d.ts

@@ -0,0 +1,50 @@
+"use client";
+
+import * as React$1 from "react";
+
+//#region src/components/rating.d.ts
+type RatingSize = 'small' | 'medium' | 'large';
+interface RatingProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
+  /** The chosen star, 1-based. `null` means nothing is chosen yet. */
+  value?: number | null;
+  defaultValue?: number | null;
+  onValueChange?: (value: number) => void;
+  max?: number;
+  /** One label per star: the star's accessible name and the caption text. */
+  labels?: string[];
+  size?: RatingSize;
+  readOnly?: boolean;
+  disabled?: boolean;
+  name?: string;
+}
+declare function Rating({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  max,
+  labels,
+  size,
+  readOnly,
+  disabled,
+  name,
+  className,
+  children,
+  ...props
+}: RatingProps): import("react/jsx-runtime").JSX.Element;
+type RatingStarsProps = Omit<React$1.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'>;
+declare function RatingStars({
+  className,
+  onPointerLeave,
+  onKeyDown,
+  'aria-labelledby': ariaLabelledBy,
+  'aria-describedby': ariaDescribedByProp,
+  ...props
+}: RatingStarsProps): import("react/jsx-runtime").JSX.Element;
+declare function RatingCaption({
+  className,
+  children,
+  ...props
+}: React$1.HTMLAttributes<HTMLParagraphElement>): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Rating, RatingCaption, type RatingProps, RatingStars, type RatingStarsProps };
+//# sourceMappingURL=rating.d.ts.map

package/dist/components/rating.js

@@ -0,0 +1,162 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { useFieldControl, useFieldSetInvalid } from "./field.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+//#region src/components/rating.tsx
+const RatingContext = React$1.createContext(null);
+function useRating() {
+	const context = React$1.useContext(RatingContext);
+	if (!context) throw new Error("RatingStars and RatingCaption need a Rating");
+	return context;
+}
+function Rating({ value: valueProp, defaultValue = null, onValueChange, max = 5, labels, size = "medium", readOnly = false, disabled = false, name, className, children, ...props }) {
+	const [uncontrolled, setUncontrolled] = React$1.useState(defaultValue);
+	const [hovered, setHovered] = React$1.useState(null);
+	const value = valueProp === void 0 ? uncontrolled : valueProp;
+	const setValue = React$1.useCallback((next) => {
+		setUncontrolled(next);
+		onValueChange?.(next);
+	}, [onValueChange]);
+	return /* @__PURE__ */ jsx(RatingContext.Provider, {
+		value: {
+			value,
+			setValue,
+			hovered: readOnly || disabled ? null : hovered,
+			setHovered,
+			max,
+			labels,
+			size,
+			readOnly,
+			disabled,
+			name
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "rating",
+			className: cn("flex flex-col items-start gap-[calc(var(--spark-layout-gap)*1)]", className),
+			...props,
+			children
+		})
+	});
+}
+const sizeClasses = {
+	small: {
+		star: "size-4",
+		button: "size-6"
+	},
+	medium: {
+		star: "size-6",
+		button: "size-8"
+	},
+	large: {
+		star: "size-8",
+		button: "size-11"
+	}
+};
+const compactSizeClasses = {
+	small: {
+		star: "size-3.5",
+		button: "size-6"
+	},
+	medium: {
+		star: "size-4.5",
+		button: "size-6"
+	},
+	large: {
+		star: "size-5",
+		button: "size-6"
+	}
+};
+function starTone(fill, disabled) {
+	if (disabled) return fill === "off" ? "fill-none stroke-gray-a6" : "fill-gray-a7 stroke-gray-a7";
+	if (fill === "on") return "fill-spark-9 stroke-spark-9";
+	if (fill === "preview") return "fill-spark-a4 stroke-spark-9";
+	return "fill-none stroke-gray-a9";
+}
+function captionTone(hasLabel, hovered, disabled) {
+	if (disabled) return "text-gray-a9";
+	if (!hasLabel) return "text-gray-11";
+	return hovered ? "text-spark-11" : "text-gray-12";
+}
+function Star({ className }) {
+	return /* @__PURE__ */ jsx("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		strokeWidth: 1.5,
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		className: cn("transition-colors motion-reduce:transition-none", className),
+		children: /* @__PURE__ */ jsx("path", { d: "M12.60 3.17 L14.72 8.03 Q15.00 8.67 15.69 8.74 L20.97 9.26 Q22.46 9.40 21.34 10.40 L17.37 13.91 Q16.85 14.38 17.00 15.06 L18.14 20.23 Q18.47 21.70 17.17 20.94 L12.60 18.25 Q12.00 17.90 11.40 18.25 L6.83 20.94 Q5.53 21.70 5.86 20.23 L7.00 15.06 Q7.15 14.38 6.63 13.91 L2.66 10.40 Q1.54 9.40 3.03 9.26 L8.31 8.74 Q9.00 8.67 9.28 8.03 L11.40 3.17 Q12.00 1.80 12.60 3.17Z" })
+	});
+}
+function RatingStars({ className, onPointerLeave, onKeyDown, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedByProp, ...props }) {
+	const rating = useRating();
+	const { field, ariaDescribedBy, ariaInvalid } = useFieldControl({ ariaDescribedBy: ariaDescribedByProp });
+	const invalid = useFieldSetInvalid();
+	const { star: starSize, button: buttonSize } = (rating.max > 5 ? compactSizeClasses : sizeClasses)[rating.size];
+	const interactive = !rating.readOnly && !rating.disabled;
+	const low = Math.min(rating.value ?? 0, rating.hovered ?? rating.value ?? 0);
+	const high = Math.max(rating.value ?? 0, rating.hovered ?? 0);
+	return /* @__PURE__ */ jsx(RadioGroup, {
+		"data-slot": "rating-stars",
+		"data-invalid": invalid,
+		"aria-labelledby": ariaLabelledBy ?? (field?.readOnly ? field.labelId : void 0),
+		"aria-describedby": ariaDescribedBy,
+		"aria-invalid": ariaInvalid,
+		value: rating.value,
+		onValueChange: (next) => next !== null && rating.setValue(next),
+		readOnly: rating.readOnly,
+		disabled: rating.disabled,
+		name: rating.name,
+		className: cn("flex", className),
+		onPointerLeave: (event) => {
+			rating.setHovered(null);
+			onPointerLeave?.(event);
+		},
+		onKeyDown: (event) => {
+			rating.setHovered(null);
+			onKeyDown?.(event);
+		},
+		...props,
+		children: Array.from({ length: rating.max }, (_, index) => {
+			const star = index + 1;
+			const fill = star <= low ? "on" : star <= high ? "preview" : "off";
+			return /* @__PURE__ */ jsx(Radio.Root, {
+				value: star,
+				"aria-label": rating.labels?.[index] ?? String(star),
+				"data-slot": "rating-star",
+				"data-fill": fill,
+				"aria-readonly": void 0,
+				nativeButton: true,
+				render: /* @__PURE__ */ jsx("button", {}),
+				onPointerEnter: interactive ? () => rating.setHovered(star) : void 0,
+				className: cn("inline-flex min-h-[24px] min-w-[24px] shrink-0 cursor-pointer items-center justify-center rounded-sm border-0 bg-transparent p-0 touch-target-row any-pointer-coarse:min-w-11", "focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden", "data-disabled:cursor-not-allowed data-readonly:cursor-default", buttonSize),
+				children: /* @__PURE__ */ jsx(Star, { className: cn(starSize, starTone(fill, rating.disabled)) })
+			}, star);
+		})
+	});
+}
+const captionTextSize = {
+	small: "text-[0.8125rem]",
+	medium: "text-sm",
+	large: "text-base"
+};
+function RatingCaption({ className, children, ...props }) {
+	const rating = useRating();
+	const shown = rating.hovered ?? rating.value;
+	const label = shown ? rating.labels?.[shown - 1] : void 0;
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "rating-caption",
+		"aria-hidden": "true",
+		"aria-disabled": rating.disabled || void 0,
+		className: cn("leading-5", captionTextSize[rating.size], label !== void 0 && "font-medium", captionTone(label !== void 0, !!rating.hovered, rating.disabled), className),
+		...props,
+		children: label ?? children
+	});
+}
+//#endregion
+export { Rating, RatingCaption, RatingStars };
+
+//# sourceMappingURL=rating.js.map

package/dist/components/rating.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rating.js","names":["React","RadioGroupPrimitive","RadioPrimitive"],"sources":["../../src/components/rating.tsx"],"sourcesContent":["import { Radio as RadioPrimitive } from '@base-ui/react/radio'\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { useFieldControl, useFieldSetInvalid } from './field'\n\ntype RatingSize = 'small' | 'medium' | 'large'\n\ntype RatingContextValue = {\n  value: number | null\n  setValue: (value: number) => void\n  hovered: number | null\n  setHovered: (value: number | null) => void\n  max: number\n  labels?: string[]\n  size: RatingSize\n  readOnly: boolean\n  disabled: boolean\n  name?: string\n}\n\nconst RatingContext = React.createContext<RatingContextValue | null>(null)\n\nfunction useRating() {\n  const context = React.useContext(RatingContext)\n  if (!context) throw new Error('RatingStars and RatingCaption need a Rating')\n  return context\n}\n\ninterface RatingProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'defaultValue' | 'onChange'\n> {\n  /** The chosen star, 1-based. `null` means nothing is chosen yet. */\n  value?: number | null\n  defaultValue?: number | null\n  onValueChange?: (value: number) => void\n  max?: number\n  /** One label per star: the star's accessible name and the caption text. */\n  labels?: string[]\n  size?: RatingSize\n  readOnly?: boolean\n  disabled?: boolean\n  name?: string\n}\n\nfunction Rating({\n  value: valueProp,\n  defaultValue = null,\n  onValueChange,\n  max = 5,\n  labels,\n  size = 'medium',\n  readOnly = false,\n  disabled = false,\n  name,\n  className,\n  children,\n  ...props\n}: RatingProps) {\n  const [uncontrolled, setUncontrolled] = React.useState(defaultValue)\n  const [hovered, setHovered] = React.useState<number | null>(null)\n  const value = valueProp === undefined ? uncontrolled : valueProp\n\n  const setValue = React.useCallback(\n    (next: number) => {\n      setUncontrolled(next)\n      onValueChange?.(next)\n    },\n    [onValueChange],\n  )\n\n  return (\n    <RatingContext.Provider\n      value={{\n        value,\n        setValue,\n        hovered: readOnly || disabled ? null : hovered,\n        setHovered,\n        max,\n        labels,\n        size,\n        readOnly,\n        disabled,\n        name,\n      }}\n    >\n      <div\n        data-slot=\"rating\"\n        className={cn(\n          'flex flex-col items-start gap-[calc(var(--spark-layout-gap)*1)]',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </RatingContext.Provider>\n  )\n}\n\ntype SizeClasses = { star: string; button: string }\n\nconst sizeClasses: Record<RatingSize, SizeClasses> = {\n  small: { star: 'size-4', button: 'size-6' },\n  medium: { star: 'size-6', button: 'size-8' },\n  large: { star: 'size-8', button: 'size-11' },\n}\n\n// above five stars the row would outgrow narrow panels\nconst compactSizeClasses: Record<RatingSize, SizeClasses> = {\n  small: { star: 'size-3.5', button: 'size-6' },\n  medium: { star: 'size-4.5', button: 'size-6' },\n  large: { star: 'size-5', button: 'size-6' },\n}\n\ntype StarFill = 'on' | 'preview' | 'off'\n\nfunction starTone(fill: StarFill, disabled: boolean) {\n  if (disabled) {\n    return fill === 'off'\n      ? 'fill-none stroke-gray-a6'\n      : 'fill-gray-a7 stroke-gray-a7'\n  }\n  if (fill === 'on') return 'fill-spark-9 stroke-spark-9'\n  if (fill === 'preview') return 'fill-spark-a4 stroke-spark-9'\n  return 'fill-none stroke-gray-a9'\n}\n\nfunction captionTone(hasLabel: boolean, hovered: boolean, disabled: boolean) {\n  if (disabled) return 'text-gray-a9'\n  if (!hasLabel) return 'text-gray-11'\n  return hovered ? 'text-spark-11' : 'text-gray-12'\n}\n\nfunction Star({ className }: { className: string }) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      strokeWidth={1.5}\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n      className={cn(\n        'transition-colors motion-reduce:transition-none',\n        className,\n      )}\n    >\n      <path d=\"M12.60 3.17 L14.72 8.03 Q15.00 8.67 15.69 8.74 L20.97 9.26 Q22.46 9.40 21.34 10.40 L17.37 13.91 Q16.85 14.38 17.00 15.06 L18.14 20.23 Q18.47 21.70 17.17 20.94 L12.60 18.25 Q12.00 17.90 11.40 18.25 L6.83 20.94 Q5.53 21.70 5.86 20.23 L7.00 15.06 Q7.15 14.38 6.63 13.91 L2.66 10.40 Q1.54 9.40 3.03 9.26 L8.31 8.74 Q9.00 8.67 9.28 8.03 L11.40 3.17 Q12.00 1.80 12.60 3.17Z\" />\n    </svg>\n  )\n}\n\ntype RatingStarsProps = Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'defaultValue' | 'onChange'\n>\n\nfunction RatingStars({\n  className,\n  onPointerLeave,\n  onKeyDown,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedByProp,\n  ...props\n}: RatingStarsProps) {\n  const rating = useRating()\n  const { field, ariaDescribedBy, ariaInvalid } = useFieldControl({\n    ariaDescribedBy: ariaDescribedByProp,\n  })\n  const invalid = useFieldSetInvalid()\n  const { star: starSize, button: buttonSize } = (\n    rating.max > 5 ? compactSizeClasses : sizeClasses\n  )[rating.size]\n  const interactive = !rating.readOnly && !rating.disabled\n  const low = Math.min(rating.value ?? 0, rating.hovered ?? rating.value ?? 0)\n  const high = Math.max(rating.value ?? 0, rating.hovered ?? 0)\n\n  return (\n    <RadioGroupPrimitive<number | null>\n      data-slot=\"rating-stars\"\n      data-invalid={invalid}\n      // a read-only FieldLabel renders the Field's labelId and drops a caller id\n      aria-labelledby={\n        ariaLabelledBy ?? (field?.readOnly ? field.labelId : undefined)\n      }\n      aria-describedby={ariaDescribedBy}\n      aria-invalid={ariaInvalid}\n      value={rating.value}\n      onValueChange={(next) => next !== null && rating.setValue(next)}\n      readOnly={rating.readOnly}\n      disabled={rating.disabled}\n      name={rating.name}\n      className={cn('flex', className)}\n      onPointerLeave={(event) => {\n        rating.setHovered(null)\n        onPointerLeave?.(event)\n      }}\n      onKeyDown={(event) => {\n        rating.setHovered(null)\n        onKeyDown?.(event)\n      }}\n      {...props}\n    >\n      {Array.from({ length: rating.max }, (_, index) => {\n        const star = index + 1\n        const fill: StarFill =\n          star <= low ? 'on' : star <= high ? 'preview' : 'off'\n        return (\n          <RadioPrimitive.Root\n            key={star}\n            value={star}\n            aria-label={rating.labels?.[index] ?? String(star)}\n            data-slot=\"rating-star\"\n            data-fill={fill}\n            // ARIA allows aria-readonly on the radiogroup, which Base UI also sets, not on a radio\n            aria-readonly={undefined}\n            nativeButton\n            render={<button />}\n            onPointerEnter={\n              interactive ? () => rating.setHovered(star) : undefined\n            }\n            className={cn(\n              // p-0 keeps the box against the UA button padding without preflight;\n              // the px floor keeps axe's 24px target size when [data-scaling] shrinks rems\n              'inline-flex min-h-[24px] min-w-[24px] shrink-0 cursor-pointer items-center justify-center rounded-sm border-0 bg-transparent p-0 touch-target-row any-pointer-coarse:min-w-11',\n              'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n              'data-disabled:cursor-not-allowed data-readonly:cursor-default',\n              buttonSize,\n            )}\n          >\n            <Star className={cn(starSize, starTone(fill, rating.disabled))} />\n          </RadioPrimitive.Root>\n        )\n      })}\n    </RadioGroupPrimitive>\n  )\n}\n\nconst captionTextSize: Record<RatingSize, string> = {\n  small: 'text-[0.8125rem]',\n  medium: 'text-sm',\n  large: 'text-base',\n}\n\nfunction RatingCaption({\n  className,\n  children,\n  ...props\n}: React.HTMLAttributes<HTMLParagraphElement>) {\n  const rating = useRating()\n  const shown = rating.hovered ?? rating.value\n  const label = shown ? rating.labels?.[shown - 1] : undefined\n\n  return (\n    <p\n      data-slot=\"rating-caption\"\n      // the stars already carry each label as their accessible name\n      aria-hidden=\"true\"\n      // axe skips contrast on inactive text, and the dim tone is the disabled cue\n      aria-disabled={rating.disabled || undefined}\n      className={cn(\n        'leading-5',\n        captionTextSize[rating.size],\n        label !== undefined && 'font-medium',\n        captionTone(label !== undefined, !!rating.hovered, rating.disabled),\n        className,\n      )}\n      {...props}\n    >\n      {label ?? children}\n    </p>\n  )\n}\n\nexport { Rating, RatingCaption, RatingStars }\nexport type { RatingProps, RatingStarsProps }\n"],"mappings":"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"}

package/dist/components/scroll-area.cjs

@@ -7,6 +7,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let _base_ui_react_scroll_area = require("@base-ui/react/scroll-area");
 let cn = require("cn");
 //#region src/components/scroll-area.tsx
+const VIEWPORT_CLASSES = "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none";
 function ScrollArea({ className, children, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_scroll_area.ScrollArea.Root, {
 		"data-slot": "scroll-area",
@@ -15,7 +16,7 @@ function ScrollArea({ className, children, ...props }) {
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_scroll_area.ScrollArea.Viewport, {
 				"data-slot": "scroll-area-viewport",
-				className: "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none",
+				className: VIEWPORT_CLASSES,
 				children
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScrollBar, {}),
@@ -37,7 +38,13 @@ function ScrollBar({ className, orientation = "vertical", ...props }) {
 	});
 }
 const ScrollAreaRoot = _base_ui_react_scroll_area.ScrollArea.Root;
-const ScrollAreaViewport = _base_ui_react_scroll_area.ScrollArea.Viewport;
+const ScrollAreaViewport = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_scroll_area.ScrollArea.Viewport, {
+	ref,
+	"data-slot": "scroll-area-viewport",
+	className: (0, cn.cn)(VIEWPORT_CLASSES, className),
+	...props
+}));
+ScrollAreaViewport.displayName = "ScrollAreaViewport";
 const ScrollAreaScrollbar = _base_ui_react_scroll_area.ScrollArea.Scrollbar;
 const ScrollAreaThumb = _base_ui_react_scroll_area.ScrollArea.Thumb;
 const ScrollAreaCorner = _base_ui_react_scroll_area.ScrollArea.Corner;

package/dist/components/scroll-area.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area.cjs","names":["ScrollAreaPrimitive"],"sources":["../../src/components/scroll-area.tsx"],"sourcesContent":["import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn('relative', className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction ScrollBar({\n  className,\n  orientation = 'vertical',\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Scrollbar>) {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        'flex touch-none p-px transition-colors select-none data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2.5 data-[orientation=vertical]:border-l data-[orientation=vertical]:border-l-transparent',\n        // radix type=\"hover\" behavior: fade in on hover/scroll, fade out 600ms later\n        'opacity-0 transition-[color,background-color,opacity] delay-[600ms] duration-150 data-hovering:opacity-100 data-hovering:delay-0 data-scrolling:opacity-100 data-scrolling:delay-0 motion-reduce:transition-none',\n        className,\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"relative flex-1 rounded-full bg-gray-a8 [[data-high-contrast]_&]:bg-gray-a11\"\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  )\n}\n\n// Radix primitives for consumers that need a custom composition (e.g. an\n// aria-labelled focusable viewport or a horizontal-only scroll area)\nconst ScrollAreaRoot = ScrollAreaPrimitive.Root\nconst ScrollAreaViewport = ScrollAreaPrimitive.Viewport\nconst ScrollAreaScrollbar = ScrollAreaPrimitive.Scrollbar\nconst ScrollAreaThumb = ScrollAreaPrimitive.Thumb\nconst ScrollAreaCorner = ScrollAreaPrimitive.Corner\n\nexport {\n  ScrollArea,\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  ScrollAreaScrollbar,\n  ScrollAreaThumb,\n  ScrollAreaViewport,\n  ScrollBar,\n}\n"],"mappings":";;;;;;;;;AAIA,SAAS,WAAW,EAClB,WACA,UACA,GAAG,SACqD;CACxD,OACE,iBAAA,GAAA,kBAAA,MAACA,2BAAAA,WAAoB,MAArB;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IAAc,YAAY,SAAS;EACnC,GAAI;YAHN;GAKE,iBAAA,GAAA,kBAAA,KAACA,2BAAAA,WAAoB,UAArB;IACE,aAAU;IACV,WAAU;IAET;GAC2B,CAAA;GAC9B,iBAAA,GAAA,kBAAA,KAAC,WAAD,CAAY,CAAA;GACZ,iBAAA,GAAA,kBAAA,KAACA,2BAAAA,WAAoB,QAArB,CAA6B,CAAA;EACL;;AAE9B;AAEA,SAAS,UAAU,EACjB,WACA,cAAc,YACd,GAAG,SAC0D;CAC7D,OACE,iBAAA,GAAA,kBAAA,KAACA,2BAAAA,WAAoB,WAArB;EACE,aAAU;EACV,oBAAkB;EACL;EACb,YAAA,GAAA,GAAA,IACE,sXAEA,oNACA,SACF;EACA,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACA,2BAAAA,WAAoB,OAArB;GACE,aAAU;GACV,WAAU;EACX,CAAA;CAC4B,CAAA;AAEnC;AAIA,MAAM,iBAAiBA,2BAAAA,WAAoB;AAC3C,MAAM,qBAAqBA,2BAAAA,WAAoB;AAC/C,MAAM,sBAAsBA,2BAAAA,WAAoB;AAChD,MAAM,kBAAkBA,2BAAAA,WAAoB;AAC5C,MAAM,mBAAmBA,2BAAAA,WAAoB"}
+{"version":3,"file":"scroll-area.cjs","names":["ScrollAreaPrimitive","React"],"sources":["../../src/components/scroll-area.tsx"],"sourcesContent":["import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\nconst VIEWPORT_CLASSES =\n  'size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none'\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn('relative', className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className={VIEWPORT_CLASSES}\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction ScrollBar({\n  className,\n  orientation = 'vertical',\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Scrollbar>) {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        'flex touch-none p-px transition-colors select-none data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2.5 data-[orientation=vertical]:border-l data-[orientation=vertical]:border-l-transparent',\n        // radix type=\"hover\" behavior: fade in on hover/scroll, fade out 600ms later\n        'opacity-0 transition-[color,background-color,opacity] delay-[600ms] duration-150 data-hovering:opacity-100 data-hovering:delay-0 data-scrolling:opacity-100 data-scrolling:delay-0 motion-reduce:transition-none',\n        className,\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"relative flex-1 rounded-full bg-gray-a8 [[data-high-contrast]_&]:bg-gray-a11\"\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  )\n}\n\n// Radix primitives for consumers that need a custom composition (e.g. an\n// aria-labelled focusable viewport or a horizontal-only scroll area)\nconst ScrollAreaRoot = ScrollAreaPrimitive.Root\nconst ScrollAreaViewport = React.forwardRef<\n  HTMLDivElement,\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(VIEWPORT_CLASSES, className)}\n    {...props}\n  />\n))\nScrollAreaViewport.displayName = 'ScrollAreaViewport'\nconst ScrollAreaScrollbar = ScrollAreaPrimitive.Scrollbar\nconst ScrollAreaThumb = ScrollAreaPrimitive.Thumb\nconst ScrollAreaCorner = ScrollAreaPrimitive.Corner\n\nexport {\n  ScrollArea,\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  ScrollAreaScrollbar,\n  ScrollAreaThumb,\n  ScrollAreaViewport,\n  ScrollBar,\n}\n"],"mappings":";;;;;;;;;AAIA,MAAM,mBACJ;AAEF,SAAS,WAAW,EAClB,WACA,UACA,GAAG,SACqD;CACxD,OACE,iBAAA,GAAA,kBAAA,MAACA,2BAAAA,WAAoB,MAArB;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IAAc,YAAY,SAAS;EACnC,GAAI;YAHN;GAKE,iBAAA,GAAA,kBAAA,KAACA,2BAAAA,WAAoB,UAArB;IACE,aAAU;IACV,WAAW;IAEV;GAC2B,CAAA;GAC9B,iBAAA,GAAA,kBAAA,KAAC,WAAD,CAAY,CAAA;GACZ,iBAAA,GAAA,kBAAA,KAACA,2BAAAA,WAAoB,QAArB,CAA6B,CAAA;EACL;;AAE9B;AAEA,SAAS,UAAU,EACjB,WACA,cAAc,YACd,GAAG,SAC0D;CAC7D,OACE,iBAAA,GAAA,kBAAA,KAACA,2BAAAA,WAAoB,WAArB;EACE,aAAU;EACV,oBAAkB;EACL;EACb,YAAA,GAAA,GAAA,IACE,sXAEA,oNACA,SACF;EACA,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACA,2BAAAA,WAAoB,OAArB;GACE,aAAU;GACV,WAAU;EACX,CAAA;CAC4B,CAAA;AAEnC;AAIA,MAAM,iBAAiBA,2BAAAA,WAAoB;AAC3C,MAAM,qBAAqBC,MAAM,YAG9B,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAACD,2BAAAA,WAAoB,UAArB;CACO;CACL,aAAU;CACV,YAAA,GAAA,GAAA,IAAc,kBAAkB,SAAS;CACzC,GAAI;AACL,CAAA,CACF;AACD,mBAAmB,cAAc;AACjC,MAAM,sBAAsBA,2BAAAA,WAAoB;AAChD,MAAM,kBAAkBA,2BAAAA,WAAoB;AAC5C,MAAM,mBAAmBA,2BAAAA,WAAoB"}

package/dist/components/scroll-area.d.cts

@@ -15,7 +15,7 @@ declare function ScrollBar({
   ...props
 }: React$1.ComponentProps<typeof ScrollArea$1.Scrollbar>): import("react/jsx-runtime").JSX.Element;
 declare const ScrollAreaRoot: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").ScrollAreaRootProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
-declare const ScrollAreaViewport: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").ScrollAreaViewportProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const ScrollAreaViewport: React$1.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ScrollAreaViewportProps, "ref"> & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const ScrollAreaScrollbar: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").ScrollAreaScrollbarProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const ScrollAreaThumb: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").ScrollAreaThumbProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const ScrollAreaCorner: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").ScrollAreaCornerProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;

package/dist/components/scroll-area.d.ts

@@ -15,7 +15,7 @@ declare function ScrollBar({
   ...props
 }: React$1.ComponentProps<typeof ScrollArea$1.Scrollbar>): import("react/jsx-runtime").JSX.Element;
 declare const ScrollAreaRoot: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").ScrollAreaRootProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
-declare const ScrollAreaViewport: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").ScrollAreaViewportProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const ScrollAreaViewport: React$1.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ScrollAreaViewportProps, "ref"> & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const ScrollAreaScrollbar: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").ScrollAreaScrollbarProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const ScrollAreaThumb: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").ScrollAreaThumbProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const ScrollAreaCorner: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").ScrollAreaCornerProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;

package/dist/components/scroll-area.js

@@ -1,9 +1,10 @@
 "use client";
 import { cn } from "../utils/cn.js";
-import "react";
+import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
 //#region src/components/scroll-area.tsx
+const VIEWPORT_CLASSES = "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none";
 function ScrollArea({ className, children, ...props }) {
 	return /* @__PURE__ */ jsxs(ScrollArea$1.Root, {
 		"data-slot": "scroll-area",
@@ -12,7 +13,7 @@ function ScrollArea({ className, children, ...props }) {
 		children: [
 			/* @__PURE__ */ jsx(ScrollArea$1.Viewport, {
 				"data-slot": "scroll-area-viewport",
-				className: "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none",
+				className: VIEWPORT_CLASSES,
 				children
 			}),
 			/* @__PURE__ */ jsx(ScrollBar, {}),
@@ -34,7 +35,13 @@ function ScrollBar({ className, orientation = "vertical", ...props }) {
 	});
 }
 const ScrollAreaRoot = ScrollArea$1.Root;
-const ScrollAreaViewport = ScrollArea$1.Viewport;
+const ScrollAreaViewport = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(ScrollArea$1.Viewport, {
+	ref,
+	"data-slot": "scroll-area-viewport",
+	className: cn(VIEWPORT_CLASSES, className),
+	...props
+}));
+ScrollAreaViewport.displayName = "ScrollAreaViewport";
 const ScrollAreaScrollbar = ScrollArea$1.Scrollbar;
 const ScrollAreaThumb = ScrollArea$1.Thumb;
 const ScrollAreaCorner = ScrollArea$1.Corner;

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

@@ -1 +1 @@
-{"version":3,"file":"scroll-area.js","names":["ScrollAreaPrimitive"],"sources":["../../src/components/scroll-area.tsx"],"sourcesContent":["import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn('relative', className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction ScrollBar({\n  className,\n  orientation = 'vertical',\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Scrollbar>) {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        'flex touch-none p-px transition-colors select-none data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2.5 data-[orientation=vertical]:border-l data-[orientation=vertical]:border-l-transparent',\n        // radix type=\"hover\" behavior: fade in on hover/scroll, fade out 600ms later\n        'opacity-0 transition-[color,background-color,opacity] delay-[600ms] duration-150 data-hovering:opacity-100 data-hovering:delay-0 data-scrolling:opacity-100 data-scrolling:delay-0 motion-reduce:transition-none',\n        className,\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"relative flex-1 rounded-full bg-gray-a8 [[data-high-contrast]_&]:bg-gray-a11\"\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  )\n}\n\n// Radix primitives for consumers that need a custom composition (e.g. an\n// aria-labelled focusable viewport or a horizontal-only scroll area)\nconst ScrollAreaRoot = ScrollAreaPrimitive.Root\nconst ScrollAreaViewport = ScrollAreaPrimitive.Viewport\nconst ScrollAreaScrollbar = ScrollAreaPrimitive.Scrollbar\nconst ScrollAreaThumb = ScrollAreaPrimitive.Thumb\nconst ScrollAreaCorner = ScrollAreaPrimitive.Corner\n\nexport {\n  ScrollArea,\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  ScrollAreaScrollbar,\n  ScrollAreaThumb,\n  ScrollAreaViewport,\n  ScrollBar,\n}\n"],"mappings":";;;;;;AAIA,SAAS,WAAW,EAClB,WACA,UACA,GAAG,SACqD;CACxD,OACE,qBAACA,aAAoB,MAArB;EACE,aAAU;EACV,WAAW,GAAG,YAAY,SAAS;EACnC,GAAI;YAHN;GAKE,oBAACA,aAAoB,UAArB;IACE,aAAU;IACV,WAAU;IAET;GAC2B,CAAA;GAC9B,oBAAC,WAAD,CAAY,CAAA;GACZ,oBAACA,aAAoB,QAArB,CAA6B,CAAA;EACL;;AAE9B;AAEA,SAAS,UAAU,EACjB,WACA,cAAc,YACd,GAAG,SAC0D;CAC7D,OACE,oBAACA,aAAoB,WAArB;EACE,aAAU;EACV,oBAAkB;EACL;EACb,WAAW,GACT,sXAEA,oNACA,SACF;EACA,GAAI;YAEJ,oBAACA,aAAoB,OAArB;GACE,aAAU;GACV,WAAU;EACX,CAAA;CAC4B,CAAA;AAEnC;AAIA,MAAM,iBAAiBA,aAAoB;AAC3C,MAAM,qBAAqBA,aAAoB;AAC/C,MAAM,sBAAsBA,aAAoB;AAChD,MAAM,kBAAkBA,aAAoB;AAC5C,MAAM,mBAAmBA,aAAoB"}
+{"version":3,"file":"scroll-area.js","names":["ScrollAreaPrimitive","React"],"sources":["../../src/components/scroll-area.tsx"],"sourcesContent":["import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\nconst VIEWPORT_CLASSES =\n  'size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none'\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn('relative', className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className={VIEWPORT_CLASSES}\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction ScrollBar({\n  className,\n  orientation = 'vertical',\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Scrollbar>) {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        'flex touch-none p-px transition-colors select-none data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2.5 data-[orientation=vertical]:border-l data-[orientation=vertical]:border-l-transparent',\n        // radix type=\"hover\" behavior: fade in on hover/scroll, fade out 600ms later\n        'opacity-0 transition-[color,background-color,opacity] delay-[600ms] duration-150 data-hovering:opacity-100 data-hovering:delay-0 data-scrolling:opacity-100 data-scrolling:delay-0 motion-reduce:transition-none',\n        className,\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"relative flex-1 rounded-full bg-gray-a8 [[data-high-contrast]_&]:bg-gray-a11\"\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  )\n}\n\n// Radix primitives for consumers that need a custom composition (e.g. an\n// aria-labelled focusable viewport or a horizontal-only scroll area)\nconst ScrollAreaRoot = ScrollAreaPrimitive.Root\nconst ScrollAreaViewport = React.forwardRef<\n  HTMLDivElement,\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(VIEWPORT_CLASSES, className)}\n    {...props}\n  />\n))\nScrollAreaViewport.displayName = 'ScrollAreaViewport'\nconst ScrollAreaScrollbar = ScrollAreaPrimitive.Scrollbar\nconst ScrollAreaThumb = ScrollAreaPrimitive.Thumb\nconst ScrollAreaCorner = ScrollAreaPrimitive.Corner\n\nexport {\n  ScrollArea,\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  ScrollAreaScrollbar,\n  ScrollAreaThumb,\n  ScrollAreaViewport,\n  ScrollBar,\n}\n"],"mappings":";;;;;;AAIA,MAAM,mBACJ;AAEF,SAAS,WAAW,EAClB,WACA,UACA,GAAG,SACqD;CACxD,OACE,qBAACA,aAAoB,MAArB;EACE,aAAU;EACV,WAAW,GAAG,YAAY,SAAS;EACnC,GAAI;YAHN;GAKE,oBAACA,aAAoB,UAArB;IACE,aAAU;IACV,WAAW;IAEV;GAC2B,CAAA;GAC9B,oBAAC,WAAD,CAAY,CAAA;GACZ,oBAACA,aAAoB,QAArB,CAA6B,CAAA;EACL;;AAE9B;AAEA,SAAS,UAAU,EACjB,WACA,cAAc,YACd,GAAG,SAC0D;CAC7D,OACE,oBAACA,aAAoB,WAArB;EACE,aAAU;EACV,oBAAkB;EACL;EACb,WAAW,GACT,sXAEA,oNACA,SACF;EACA,GAAI;YAEJ,oBAACA,aAAoB,OAArB;GACE,aAAU;GACV,WAAU;EACX,CAAA;CAC4B,CAAA;AAEnC;AAIA,MAAM,iBAAiBA,aAAoB;AAC3C,MAAM,qBAAqBC,QAAM,YAG9B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAACD,aAAoB,UAArB;CACO;CACL,aAAU;CACV,WAAW,GAAG,kBAAkB,SAAS;CACzC,GAAI;AACL,CAAA,CACF;AACD,mBAAmB,cAAc;AACjC,MAAM,sBAAsBA,aAAoB;AAChD,MAAM,kBAAkBA,aAAoB;AAC5C,MAAM,mBAAmBA,aAAoB"}

package/dist/components/segmented-control.d.cts

@@ -1,6 +1,6 @@
 "use client";
 
-import { f as SparkStyle } from "../theme-types-Bn5E15-P.cjs";
+import { g as SparkStyle } from "../theme-types-CKZzOmSa.cjs";
 import * as React$1 from "react";
 import { Tabs } from "@base-ui/react/tabs";
 

package/dist/components/segmented-control.d.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { f as SparkStyle } from "../theme-types-Bn5E15-P.js";
+import { g as SparkStyle } from "../theme-types-CKZzOmSa.js";
 import * as React$1 from "react";
 import { Tabs } from "@base-ui/react/tabs";