@pixpilot/shadcn 0.7.1 → 0.8.0

package/dist/components/index.cjs

@@ -22,6 +22,7 @@ const require_separator = require('./ui/separator.cjs');
 const require_OrContinueWithSeparator = require('./ui/OrContinueWithSeparator.cjs');
 const require_pagination = require('./ui/pagination.cjs');
 const require_radio_group = require('./ui/radio-group.cjs');
+const require_rating = require('./ui/rating.cjs');
 const require_index = require('./ui/shadcn-io/tags/index.cjs');
 const require_index$1 = require('./ui/shadcn-io/tags-input-inline/index.cjs');
 const require_sheet = require('./ui/sheet.cjs');

package/dist/components/index.d.cts

@@ -20,6 +20,7 @@ import { Label } from "./ui/label.cjs";
 import { OrContinueWithSeparator } from "./ui/OrContinueWithSeparator.cjs";
 import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "./ui/pagination.cjs";
 import { RadioGroup, RadioGroupItem } from "./ui/radio-group.cjs";
+import { Rating, RatingButton, RatingButtonProps, RatingProps, useRating } from "./ui/rating.cjs";
 import { Separator } from "./ui/separator.cjs";
 import { Tags, TagsContent, TagsContentProps, TagsEmpty, TagsEmptyProps, TagsGroup, TagsGroupProps, TagsInput, TagsInputProps, TagsItem, TagsItemProps, TagsList, TagsListProps, TagsProps, TagsTrigger, TagsTriggerProps, TagsValue, TagsValueProps } from "./ui/shadcn-io/tags/index.cjs";
 import { TagsInputInLineClear, TagsInputInLineInput, TagsInputInLineItem, TagsInputInLineLabel, TagsInputInLineList, TagsInputInLineRoot } from "./ui/shadcn-io/tags-input-inline/index.cjs";

package/dist/components/index.d.ts

@@ -20,6 +20,7 @@ import { Label } from "./ui/label.js";
 import { OrContinueWithSeparator } from "./ui/OrContinueWithSeparator.js";
 import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "./ui/pagination.js";
 import { RadioGroup, RadioGroupItem } from "./ui/radio-group.js";
+import { Rating, RatingButton, RatingButtonProps, RatingProps, useRating } from "./ui/rating.js";
 import { Separator } from "./ui/separator.js";
 import { Tags, TagsContent, TagsContentProps, TagsEmpty, TagsEmptyProps, TagsGroup, TagsGroupProps, TagsInput, TagsInputProps, TagsItem, TagsItemProps, TagsList, TagsListProps, TagsProps, TagsTrigger, TagsTriggerProps, TagsValue, TagsValueProps } from "./ui/shadcn-io/tags/index.js";
 import { TagsInputInLineClear, TagsInputInLineInput, TagsInputInLineItem, TagsInputInLineLabel, TagsInputInLineList, TagsInputInLineRoot } from "./ui/shadcn-io/tags-input-inline/index.js";

package/dist/components/index.js

@@ -22,6 +22,7 @@ import { Separator } from "./ui/separator.js";
 import { OrContinueWithSeparator } from "./ui/OrContinueWithSeparator.js";
 import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "./ui/pagination.js";
 import { RadioGroup, RadioGroupItem } from "./ui/radio-group.js";
+import { Rating, RatingButton, useRating } from "./ui/rating.js";
 import { Tags, TagsContent, TagsEmpty, TagsGroup, TagsInput, TagsItem, TagsList, TagsTrigger, TagsValue } from "./ui/shadcn-io/tags/index.js";
 import { TagsInputInLineClear, TagsInputInLineInput, TagsInputInLineItem, TagsInputInLineLabel, TagsInputInLineList, TagsInputInLineRoot } from "./ui/shadcn-io/tags-input-inline/index.js";
 import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "./ui/sheet.js";

package/dist/components/ui/alert.d.cts

@@ -1,5 +1,5 @@
 import * as class_variance_authority_types0 from "class-variance-authority/types";
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
 import * as React from "react";
 
@@ -11,14 +11,14 @@ declare function Alert({
   className,
   variant,
   ...props
-}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>): react_jsx_runtime3.JSX.Element;
+}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>): react_jsx_runtime0.JSX.Element;
 declare function AlertTitle({
   className,
   ...props
-}: React.ComponentProps<'div'>): react_jsx_runtime3.JSX.Element;
+}: React.ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
 declare function AlertDescription({
   className,
   ...props
-}: React.ComponentProps<'div'>): react_jsx_runtime3.JSX.Element;
+}: React.ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { Alert, AlertDescription, AlertTitle };

package/dist/components/ui/index.cjs

@@ -22,6 +22,7 @@ const require_separator = require('./separator.cjs');
 const require_OrContinueWithSeparator = require('./OrContinueWithSeparator.cjs');
 const require_pagination = require('./pagination.cjs');
 const require_radio_group = require('./radio-group.cjs');
+const require_rating = require('./rating.cjs');
 const require_index = require('./shadcn-io/tags/index.cjs');
 const require_index$1 = require('./shadcn-io/tags-input-inline/index.cjs');
 const require_sheet = require('./sheet.cjs');

package/dist/components/ui/index.d.cts

@@ -20,6 +20,7 @@ import { Label } from "./label.cjs";
 import { OrContinueWithSeparator } from "./OrContinueWithSeparator.cjs";
 import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "./pagination.cjs";
 import { RadioGroup, RadioGroupItem } from "./radio-group.cjs";
+import { Rating, RatingButton, RatingButtonProps, RatingProps, useRating } from "./rating.cjs";
 import { Separator } from "./separator.cjs";
 import { Tags, TagsContent, TagsContentProps, TagsEmpty, TagsEmptyProps, TagsGroup, TagsGroupProps, TagsInput, TagsInputProps, TagsItem, TagsItemProps, TagsList, TagsListProps, TagsProps, TagsTrigger, TagsTriggerProps, TagsValue, TagsValueProps } from "./shadcn-io/tags/index.cjs";
 import { TagsInputInLineClear, TagsInputInLineInput, TagsInputInLineItem, TagsInputInLineLabel, TagsInputInLineList, TagsInputInLineRoot } from "./shadcn-io/tags-input-inline/index.cjs";

package/dist/components/ui/index.d.ts

@@ -20,6 +20,7 @@ import { Label } from "./label.js";
 import { OrContinueWithSeparator } from "./OrContinueWithSeparator.js";
 import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "./pagination.js";
 import { RadioGroup, RadioGroupItem } from "./radio-group.js";
+import { Rating, RatingButton, RatingButtonProps, RatingProps, useRating } from "./rating.js";
 import { Separator } from "./separator.js";
 import { Tags, TagsContent, TagsContentProps, TagsEmpty, TagsEmptyProps, TagsGroup, TagsGroupProps, TagsInput, TagsInputProps, TagsItem, TagsItemProps, TagsList, TagsListProps, TagsProps, TagsTrigger, TagsTriggerProps, TagsValue, TagsValueProps } from "./shadcn-io/tags/index.js";
 import { TagsInputInLineClear, TagsInputInLineInput, TagsInputInLineItem, TagsInputInLineLabel, TagsInputInLineList, TagsInputInLineRoot } from "./shadcn-io/tags-input-inline/index.js";

package/dist/components/ui/index.js

@@ -22,6 +22,7 @@ import { Separator } from "./separator.js";
 import { OrContinueWithSeparator } from "./OrContinueWithSeparator.js";
 import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "./pagination.js";
 import { RadioGroup, RadioGroupItem } from "./radio-group.js";
+import { Rating, RatingButton, useRating } from "./rating.js";
 import { Tags, TagsContent, TagsEmpty, TagsGroup, TagsInput, TagsItem, TagsList, TagsTrigger, TagsValue } from "./shadcn-io/tags/index.js";
 import { TagsInputInLineClear, TagsInputInLineInput, TagsInputInLineItem, TagsInputInLineLabel, TagsInputInLineList, TagsInputInLineRoot } from "./shadcn-io/tags-input-inline/index.js";
 import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "./sheet.js";

package/dist/components/ui/rating.cjs

@@ -0,0 +1,160 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_utils = require('../../lib/utils.cjs');
+require('../../lib/index.cjs');
+let class_variance_authority = require("class-variance-authority");
+class_variance_authority = require_rolldown_runtime.__toESM(class_variance_authority);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+let lucide_react = require("lucide-react");
+lucide_react = require_rolldown_runtime.__toESM(lucide_react);
+
+//#region src/components/ui/rating.tsx
+const ratingVariants = (0, class_variance_authority.cva)("inline-flex items-center gap-1", {
+	variants: { size: {
+		sm: "[&_svg]:size-4",
+		default: "[&_svg]:size-5",
+		lg: "[&_svg]:size-6",
+		xl: "[&_svg]:size-8"
+	} },
+	defaultVariants: { size: "default" }
+});
+const RatingContext = react.createContext(void 0);
+function useRating() {
+	const context = react.use(RatingContext);
+	if (!context) throw new Error("Rating components must be used within a Rating provider");
+	return context;
+}
+/**
+* Rating component for displaying and collecting star/circle ratings
+*/
+function Rating({ value: controlledValue, defaultValue = 0, onValueChange, max = 5, iconType = "star", labels, readOnly = false, disabled = false, name, required = false, size = "default", className, children }) {
+	const [uncontrolledValue, setUncontrolledValue] = react.useState(defaultValue);
+	const [hoverValue, setHoverValue] = react.useState(0);
+	const isControlled = controlledValue !== void 0;
+	const value = isControlled ? controlledValue : uncontrolledValue;
+	const handleValueChange = react.useCallback((newValue) => {
+		if (readOnly || disabled) return;
+		if (!isControlled) setUncontrolledValue(newValue);
+		onValueChange?.(newValue);
+	}, [
+		readOnly,
+		disabled,
+		isControlled,
+		onValueChange
+	]);
+	const handleHoverChange = react.useCallback((newHoverValue) => {
+		if (readOnly || disabled) return;
+		setHoverValue(newHoverValue);
+	}, [readOnly, disabled]);
+	const contextValue = react.useMemo(() => ({
+		value,
+		hoverValue,
+		max,
+		readOnly,
+		disabled,
+		size: size === "sm" ? 16 : size === "lg" ? 24 : size === "xl" ? 32 : 20,
+		iconType,
+		labels,
+		onValueChange: handleValueChange,
+		onHoverChange: handleHoverChange
+	}), [
+		value,
+		hoverValue,
+		max,
+		readOnly,
+		disabled,
+		size,
+		iconType,
+		labels,
+		handleValueChange,
+		handleHoverChange
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RatingContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: require_utils.cn(ratingVariants({ size }), className),
+			role: "radiogroup",
+			"aria-label": "Rating",
+			"aria-required": required,
+			tabIndex: 0,
+			onMouseLeave: () => handleHoverChange(0),
+			children: [children, name && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				type: "hidden",
+				name,
+				value,
+				required
+			})]
+		})
+	});
+}
+/**
+* Individual rating item button component
+*/
+function RatingButton({ index, className,...props }) {
+	const { value, hoverValue, max, readOnly, disabled, size, iconType, labels, onValueChange, onHoverChange } = useRating();
+	const isFilled = index <= (hoverValue || value);
+	const label = labels?.[index - 1];
+	const Icon = iconType === "circle" ? lucide_react.Circle : lucide_react.Star;
+	const handleClick = () => {
+		if (!readOnly && !disabled) onValueChange?.(index);
+	};
+	const handleMouseEnter = () => {
+		if (!readOnly && !disabled) onHoverChange(index);
+	};
+	const handleKeyDown = (e) => {
+		if (readOnly || disabled) return;
+		switch (e.key) {
+			case "ArrowRight":
+			case "ArrowUp":
+				e.preventDefault();
+				onHoverChange(Math.min(index + 1, max));
+				break;
+			case "ArrowLeft":
+			case "ArrowDown":
+				e.preventDefault();
+				onHoverChange(Math.max(index - 1, 1));
+				break;
+			case "Home":
+				e.preventDefault();
+				onHoverChange(1);
+				break;
+			case "End":
+				e.preventDefault();
+				onHoverChange(max);
+				break;
+			case " ":
+			case "Enter":
+				e.preventDefault();
+				handleClick();
+				break;
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type: "button",
+		role: "radio",
+		"aria-checked": index === value,
+		"aria-label": label || `Rate ${index}`,
+		title: label,
+		disabled: disabled || readOnly,
+		onClick: handleClick,
+		onMouseEnter: handleMouseEnter,
+		onKeyDown: handleKeyDown,
+		className: require_utils.cn("inline-flex items-center justify-center transition-all outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm", readOnly && "cursor-default", !readOnly && !disabled && "cursor-pointer hover:scale-110", disabled && "opacity-50 cursor-not-allowed", className),
+		...props,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+			className: require_utils.cn("transition-all", isFilled ? "fill-yellow-400 text-yellow-400 dark:fill-yellow-500 dark:text-yellow-500" : "fill-transparent text-muted-foreground"),
+			size,
+			"aria-hidden": "true"
+		}), label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "sr-only",
+			children: label
+		})]
+	});
+}
+
+//#endregion
+exports.Rating = Rating;
+exports.RatingButton = RatingButton;
+exports.useRating = useRating;

package/dist/components/ui/rating.d.cts

@@ -0,0 +1,112 @@
+import * as class_variance_authority_types4 from "class-variance-authority/types";
+import * as react_jsx_runtime114 from "react/jsx-runtime";
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+//#region src/components/ui/rating.d.ts
+declare const ratingVariants: (props?: ({
+  size?: "default" | "sm" | "lg" | "xl" | null | undefined;
+} & class_variance_authority_types4.ClassProp) | undefined) => string;
+interface RatingContextValue {
+  value: number;
+  hoverValue: number;
+  max: number;
+  readOnly: boolean;
+  disabled: boolean;
+  size: number;
+  iconType: 'star' | 'circle';
+  labels?: string[];
+  onValueChange?: (value: number) => void;
+  onHoverChange: (value: number) => void;
+}
+declare function useRating(): RatingContextValue;
+interface RatingProps extends VariantProps<typeof ratingVariants> {
+  /**
+   * Current rating value for controlled mode
+   */
+  value?: number;
+  /**
+   * Initial rating value for uncontrolled mode
+   * @default 0
+   */
+  defaultValue?: number;
+  /**
+   * Callback when rating value changes
+   */
+  onValueChange?: (value: number) => void;
+  /**
+   * Maximum rating value (number of items)
+   * @default 5
+   */
+  max?: number;
+  /**
+   * Icon type to display
+   * @default 'star'
+   */
+  iconType?: 'star' | 'circle';
+  /**
+   * Labels for each rating level (displayed on hover)
+   */
+  labels?: string[];
+  /**
+   * Disables interaction and shows display-only mode
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * Disables all rating interactions
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Form input name for form integration
+   */
+  name?: string;
+  /**
+   * Makes rating selection required for forms
+   * @default false
+   */
+  required?: boolean;
+  /**
+   * Additional CSS classes for container
+   */
+  className?: string;
+  /**
+   * Children components (RatingButton)
+   */
+  children?: React.ReactNode;
+}
+/**
+ * Rating component for displaying and collecting star/circle ratings
+ */
+declare function Rating({
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  max,
+  iconType,
+  labels,
+  readOnly,
+  disabled,
+  name,
+  required,
+  size,
+  className,
+  children
+}: RatingProps): react_jsx_runtime114.JSX.Element;
+interface RatingButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * The rating value this button represents (1-based index)
+   */
+  index: number;
+}
+/**
+ * Individual rating item button component
+ */
+declare function RatingButton({
+  index,
+  className,
+  ...props
+}: RatingButtonProps): react_jsx_runtime114.JSX.Element;
+//#endregion
+export { Rating, RatingButton, RatingButtonProps, RatingProps, useRating };

package/dist/components/ui/rating.d.ts

@@ -0,0 +1,112 @@
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+import * as react_jsx_runtime114 from "react/jsx-runtime";
+import * as class_variance_authority_types4 from "class-variance-authority/types";
+
+//#region src/components/ui/rating.d.ts
+declare const ratingVariants: (props?: ({
+  size?: "default" | "sm" | "lg" | "xl" | null | undefined;
+} & class_variance_authority_types4.ClassProp) | undefined) => string;
+interface RatingContextValue {
+  value: number;
+  hoverValue: number;
+  max: number;
+  readOnly: boolean;
+  disabled: boolean;
+  size: number;
+  iconType: 'star' | 'circle';
+  labels?: string[];
+  onValueChange?: (value: number) => void;
+  onHoverChange: (value: number) => void;
+}
+declare function useRating(): RatingContextValue;
+interface RatingProps extends VariantProps<typeof ratingVariants> {
+  /**
+   * Current rating value for controlled mode
+   */
+  value?: number;
+  /**
+   * Initial rating value for uncontrolled mode
+   * @default 0
+   */
+  defaultValue?: number;
+  /**
+   * Callback when rating value changes
+   */
+  onValueChange?: (value: number) => void;
+  /**
+   * Maximum rating value (number of items)
+   * @default 5
+   */
+  max?: number;
+  /**
+   * Icon type to display
+   * @default 'star'
+   */
+  iconType?: 'star' | 'circle';
+  /**
+   * Labels for each rating level (displayed on hover)
+   */
+  labels?: string[];
+  /**
+   * Disables interaction and shows display-only mode
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * Disables all rating interactions
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Form input name for form integration
+   */
+  name?: string;
+  /**
+   * Makes rating selection required for forms
+   * @default false
+   */
+  required?: boolean;
+  /**
+   * Additional CSS classes for container
+   */
+  className?: string;
+  /**
+   * Children components (RatingButton)
+   */
+  children?: React.ReactNode;
+}
+/**
+ * Rating component for displaying and collecting star/circle ratings
+ */
+declare function Rating({
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  max,
+  iconType,
+  labels,
+  readOnly,
+  disabled,
+  name,
+  required,
+  size,
+  className,
+  children
+}: RatingProps): react_jsx_runtime114.JSX.Element;
+interface RatingButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * The rating value this button represents (1-based index)
+   */
+  index: number;
+}
+/**
+ * Individual rating item button component
+ */
+declare function RatingButton({
+  index,
+  className,
+  ...props
+}: RatingButtonProps): react_jsx_runtime114.JSX.Element;
+//#endregion
+export { Rating, RatingButton, RatingButtonProps, RatingProps, useRating };

package/dist/components/ui/rating.js

@@ -0,0 +1,153 @@
+import { cn } from "../../lib/utils.js";
+import "../../lib/index.js";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Circle, Star } from "lucide-react";
+
+//#region src/components/ui/rating.tsx
+const ratingVariants = cva("inline-flex items-center gap-1", {
+	variants: { size: {
+		sm: "[&_svg]:size-4",
+		default: "[&_svg]:size-5",
+		lg: "[&_svg]:size-6",
+		xl: "[&_svg]:size-8"
+	} },
+	defaultVariants: { size: "default" }
+});
+const RatingContext = React.createContext(void 0);
+function useRating() {
+	const context = React.use(RatingContext);
+	if (!context) throw new Error("Rating components must be used within a Rating provider");
+	return context;
+}
+/**
+* Rating component for displaying and collecting star/circle ratings
+*/
+function Rating({ value: controlledValue, defaultValue = 0, onValueChange, max = 5, iconType = "star", labels, readOnly = false, disabled = false, name, required = false, size = "default", className, children }) {
+	const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+	const [hoverValue, setHoverValue] = React.useState(0);
+	const isControlled = controlledValue !== void 0;
+	const value = isControlled ? controlledValue : uncontrolledValue;
+	const handleValueChange = React.useCallback((newValue) => {
+		if (readOnly || disabled) return;
+		if (!isControlled) setUncontrolledValue(newValue);
+		onValueChange?.(newValue);
+	}, [
+		readOnly,
+		disabled,
+		isControlled,
+		onValueChange
+	]);
+	const handleHoverChange = React.useCallback((newHoverValue) => {
+		if (readOnly || disabled) return;
+		setHoverValue(newHoverValue);
+	}, [readOnly, disabled]);
+	const contextValue = React.useMemo(() => ({
+		value,
+		hoverValue,
+		max,
+		readOnly,
+		disabled,
+		size: size === "sm" ? 16 : size === "lg" ? 24 : size === "xl" ? 32 : 20,
+		iconType,
+		labels,
+		onValueChange: handleValueChange,
+		onHoverChange: handleHoverChange
+	}), [
+		value,
+		hoverValue,
+		max,
+		readOnly,
+		disabled,
+		size,
+		iconType,
+		labels,
+		handleValueChange,
+		handleHoverChange
+	]);
+	return /* @__PURE__ */ jsx(RatingContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn(ratingVariants({ size }), className),
+			role: "radiogroup",
+			"aria-label": "Rating",
+			"aria-required": required,
+			tabIndex: 0,
+			onMouseLeave: () => handleHoverChange(0),
+			children: [children, name && /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name,
+				value,
+				required
+			})]
+		})
+	});
+}
+/**
+* Individual rating item button component
+*/
+function RatingButton({ index, className,...props }) {
+	const { value, hoverValue, max, readOnly, disabled, size, iconType, labels, onValueChange, onHoverChange } = useRating();
+	const isFilled = index <= (hoverValue || value);
+	const label = labels?.[index - 1];
+	const Icon = iconType === "circle" ? Circle : Star;
+	const handleClick = () => {
+		if (!readOnly && !disabled) onValueChange?.(index);
+	};
+	const handleMouseEnter = () => {
+		if (!readOnly && !disabled) onHoverChange(index);
+	};
+	const handleKeyDown = (e) => {
+		if (readOnly || disabled) return;
+		switch (e.key) {
+			case "ArrowRight":
+			case "ArrowUp":
+				e.preventDefault();
+				onHoverChange(Math.min(index + 1, max));
+				break;
+			case "ArrowLeft":
+			case "ArrowDown":
+				e.preventDefault();
+				onHoverChange(Math.max(index - 1, 1));
+				break;
+			case "Home":
+				e.preventDefault();
+				onHoverChange(1);
+				break;
+			case "End":
+				e.preventDefault();
+				onHoverChange(max);
+				break;
+			case " ":
+			case "Enter":
+				e.preventDefault();
+				handleClick();
+				break;
+		}
+	};
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		role: "radio",
+		"aria-checked": index === value,
+		"aria-label": label || `Rate ${index}`,
+		title: label,
+		disabled: disabled || readOnly,
+		onClick: handleClick,
+		onMouseEnter: handleMouseEnter,
+		onKeyDown: handleKeyDown,
+		className: cn("inline-flex items-center justify-center transition-all outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm", readOnly && "cursor-default", !readOnly && !disabled && "cursor-pointer hover:scale-110", disabled && "opacity-50 cursor-not-allowed", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(Icon, {
+			className: cn("transition-all", isFilled ? "fill-yellow-400 text-yellow-400 dark:fill-yellow-500 dark:text-yellow-500" : "fill-transparent text-muted-foreground"),
+			size,
+			"aria-hidden": "true"
+		}), label && /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: label
+		})]
+	});
+}
+
+//#endregion
+export { Rating, RatingButton, useRating };