@bearmenu/ui 0.5.2 → 0.6.1

package/dist/components/multi-select-menu.js

@@ -1,8 +1,8 @@
-import { Popover, PopoverTrigger, PopoverContent } from '../chunk-4UO73SKC.js';
-import { Checkbox } from '../chunk-IQASCH2V.js';
+import { Checkbox } from '../chunk-D5QHEHXJ.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import '../chunk-3GWWZKX7.js';
 import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 function MultiSelectMenu({
@@ -26,34 +26,45 @@ function MultiSelectMenu({
     }
     onSelectedChange(Array.from(next));
   }
-  return /* @__PURE__ */ jsxs(Popover, { children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsxs(
-      PopoverContent,
+  return /* @__PURE__ */ jsxs(DropdownMenuPrimitive.Root, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuPrimitive.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+      DropdownMenuPrimitive.Content,
       {
         align,
-        className: cn("p-2", contentClassName),
+        sideOffset: 4,
         style: { width },
+        className: cn(
+          "z-50 overflow-hidden rounded-xl border border-border bg-popover p-2 text-popover-foreground shadow-xl",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+          "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          contentClassName
+        ),
         children: [
-          label && /* @__PURE__ */ jsx("div", { className: "text-foreground px-2 py-1.5 text-sm font-semibold", children: label }),
-          /* @__PURE__ */ jsx("div", { role: "group", "aria-label": label, className: "flex flex-col gap-0.5", children: options.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground px-2 py-1.5 text-sm", children: emptyText }) : options.map((option) => {
+          label && /* @__PURE__ */ jsx(DropdownMenuPrimitive.Label, { className: "px-2 py-1.5 text-xs font-semibold text-muted-foreground", children: label }),
+          options.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-2 py-1.5 text-sm text-muted-foreground", children: emptyText }) : /* @__PURE__ */ jsx(DropdownMenuPrimitive.Group, { className: "flex flex-col gap-0.5", children: options.map((option) => {
+            var _a;
             const checked = selectedSet.has(option.value);
             return /* @__PURE__ */ jsxs(
-              "label",
+              DropdownMenuPrimitive.CheckboxItem,
               {
+                checked,
+                disabled: (_a = option.disabled) != null ? _a : false,
+                onSelect: (e) => e.preventDefault(),
+                onCheckedChange: () => handleToggle(option.value),
                 className: cn(
-                  "flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm select-none",
-                  "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-                  option.disabled && "pointer-events-none opacity-50"
+                  "relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none",
+                  "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+                  "data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
                 ),
                 children: [
                   /* @__PURE__ */ jsx(
                     Checkbox,
                     {
                       checked,
-                      onCheckedChange: () => handleToggle(option.value),
-                      disabled: option.disabled,
-                      "aria-label": typeof option.label === "string" ? option.label : option.value
+                      tabIndex: -1,
+                      "aria-hidden": true,
+                      className: "pointer-events-none"
                     }
                   ),
                   /* @__PURE__ */ jsx("span", { className: "flex-1", children: option.label })
@@ -64,7 +75,7 @@ function MultiSelectMenu({
           }) })
         ]
       }
-    )
+    ) })
   ] });
 }
 

package/dist/components/native-select.d.ts

@@ -0,0 +1,12 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const nativeSelectVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const NativeSelect: React.ForwardRefExoticComponent<Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size"> & VariantProps<(props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLSelectElement>>;
+
+export { NativeSelect, nativeSelectVariants };

package/dist/components/native-select.js

@@ -0,0 +1,49 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadProps, __spreadValues } from '../chunk-3GWWZKX7.js';
+import * as React from 'react';
+import { ChevronDown } from 'lucide-react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var nativeSelectVariants = cva(
+  "w-full appearance-none rounded-xl border border-border bg-background pr-9 text-sm text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/40",
+  {
+    variants: {
+      size: {
+        sm: "h-9 pl-3",
+        default: "h-11 pl-4",
+        lg: "h-12 pl-5"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var NativeSelect = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, size, children } = _b, props = __objRest(_b, ["className", "size", "children"]);
+    return /* @__PURE__ */ jsxs("div", { className: "relative inline-flex w-full", children: [
+      /* @__PURE__ */ jsx(
+        "select",
+        __spreadProps(__spreadValues({
+          ref,
+          "data-slot": "native-select",
+          className: cn(nativeSelectVariants({ size }), className)
+        }, props), {
+          children
+        })
+      ),
+      /* @__PURE__ */ jsx(
+        ChevronDown,
+        {
+          "aria-hidden": true,
+          className: "pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
+        }
+      )
+    ] });
+  }
+);
+NativeSelect.displayName = "NativeSelect";
+
+export { NativeSelect, nativeSelectVariants };

package/dist/components/pagination.d.ts

@@ -9,10 +9,13 @@ declare function PaginationContent({ className, ...props }: React.ComponentProps
 declare function PaginationItem({ ...props }: React.ComponentProps<"li">): react_jsx_runtime.JSX.Element;
 type PaginationLinkProps = {
     isActive?: boolean;
+    disabled?: boolean;
 } & Pick<React.ComponentProps<typeof Button>, "size"> & React.ComponentProps<"a">;
-declare function PaginationLink({ className, isActive, size, ...props }: PaginationLinkProps): react_jsx_runtime.JSX.Element;
+declare function PaginationLink({ className, isActive, disabled, size, onClick, ...props }: PaginationLinkProps): react_jsx_runtime.JSX.Element;
+declare function PaginationFirst({ className, ...props }: React.ComponentProps<typeof PaginationLink>): react_jsx_runtime.JSX.Element;
 declare function PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>): react_jsx_runtime.JSX.Element;
 declare function PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>): react_jsx_runtime.JSX.Element;
+declare function PaginationLast({ className, ...props }: React.ComponentProps<typeof PaginationLink>): react_jsx_runtime.JSX.Element;
 declare function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
 
-export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationItem, PaginationLast, PaginationLink, PaginationNext, PaginationPrevious };

package/dist/components/pagination.js

@@ -1,8 +1,8 @@
-import { buttonVariants } from '../chunk-2BMJRXQX.js';
+import { buttonVariants } from '../chunk-ZFNOCP6W.js';
 import '../chunk-R47NEOSI.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues, __spreadProps } from '../chunk-3GWWZKX7.js';
-import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from 'lucide-react';
+import { ChevronsLeftIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsRightIcon, MoreHorizontalIcon } from 'lucide-react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 function Pagination(_a) {
@@ -32,25 +32,63 @@ function PaginationItem(_a) {
   return /* @__PURE__ */ jsx("li", __spreadValues({ "data-slot": "pagination-item" }, props));
 }
 function PaginationLink(_a) {
-  var _b = _a, { className, isActive, size = "icon" } = _b, props = __objRest(_b, ["className", "isActive", "size"]);
+  var _b = _a, {
+    className,
+    isActive,
+    disabled,
+    size = "icon",
+    onClick
+  } = _b, props = __objRest(_b, [
+    "className",
+    "isActive",
+    "disabled",
+    "size",
+    "onClick"
+  ]);
   return /* @__PURE__ */ jsx(
     "a",
     __spreadValues({
       "aria-current": isActive ? "page" : void 0,
+      "aria-disabled": disabled || void 0,
       "data-slot": "pagination-link",
       "data-active": isActive,
+      tabIndex: disabled ? -1 : void 0,
+      onClick: disabled ? (e) => e.preventDefault() : onClick,
       className: cn(
         buttonVariants({
-          variant: isActive ? "outline" : "ghost",
+          variant: isActive ? "default" : "ghost",
           size
         }),
+        isActive && "pointer-events-none",
+        disabled && "pointer-events-none opacity-50",
         className
       )
     }, props)
   );
 }
+function PaginationFirst(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx(
+    PaginationLink,
+    __spreadProps(__spreadValues({
+      "aria-label": "Go to first page",
+      size: "icon",
+      className: cn(className)
+    }, props), {
+      children: /* @__PURE__ */ jsx(ChevronsLeftIcon, {})
+    })
+  );
+}
 function PaginationPrevious(_a) {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
   return /* @__PURE__ */ jsxs(
     PaginationLink,
     __spreadProps(__spreadValues({
@@ -66,7 +104,11 @@ function PaginationPrevious(_a) {
   );
 }
 function PaginationNext(_a) {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
   return /* @__PURE__ */ jsxs(
     PaginationLink,
     __spreadProps(__spreadValues({
@@ -81,6 +123,23 @@ function PaginationNext(_a) {
     })
   );
 }
+function PaginationLast(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx(
+    PaginationLink,
+    __spreadProps(__spreadValues({
+      "aria-label": "Go to last page",
+      size: "icon",
+      className: cn(className)
+    }, props), {
+      children: /* @__PURE__ */ jsx(ChevronsRightIcon, {})
+    })
+  );
+}
 function PaginationEllipsis(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxs(
@@ -98,4 +157,4 @@ function PaginationEllipsis(_a) {
   );
 }
 
-export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationItem, PaginationLast, PaginationLink, PaginationNext, PaginationPrevious };

package/dist/components/place-about-tab.js

@@ -1,6 +1,6 @@
-export { PlaceAboutTab } from '../chunk-HLQ2IRE7.js';
-import '../chunk-QJ54Z7TC.js';
-import '../chunk-4KOMHDZD.js';
-import '../chunk-NKHH23YK.js';
+export { PlaceAboutTab } from '../chunk-BAZFVSSG.js';
+import '../chunk-XK2ZDQVE.js';
+import '../chunk-Y5D5LP4A.js';
+import '../chunk-YJ6OBKZJ.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-3GWWZKX7.js';

package/dist/components/place-card.js

@@ -1,4 +1,4 @@
-import { Text } from '../chunk-4KOMHDZD.js';
+import { Text } from '../chunk-Y5D5LP4A.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import '../chunk-3GWWZKX7.js';
 import { memo, useState } from 'react';

package/dist/components/place-details-mobile.js

@@ -1,7 +1,7 @@
-import { PlaceAboutTab } from '../chunk-HLQ2IRE7.js';
-import '../chunk-QJ54Z7TC.js';
-import { Text } from '../chunk-4KOMHDZD.js';
-import { Badge } from '../chunk-NKHH23YK.js';
+import { PlaceAboutTab } from '../chunk-BAZFVSSG.js';
+import '../chunk-XK2ZDQVE.js';
+import { Text } from '../chunk-Y5D5LP4A.js';
+import { Badge } from '../chunk-YJ6OBKZJ.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import '../chunk-3GWWZKX7.js';
 import { useState } from 'react';

package/dist/components/popover.d.ts

@@ -3,6 +3,12 @@ import * as PopoverPrimitive from '@radix-ui/react-popover';
 
 declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
 declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
+declare const PopoverClose: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverCloseProps & React.RefAttributes<HTMLButtonElement>>;
 declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const PopoverArrow: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverArrowProps & React.RefAttributes<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+declare const PopoverHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const PopoverTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+declare const PopoverDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
 
-export { Popover, PopoverContent, PopoverTrigger };
+export { Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger };

package/dist/components/popover.js

@@ -1,3 +1,3 @@
-export { Popover, PopoverContent, PopoverTrigger } from '../chunk-4UO73SKC.js';
+export { Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from '../chunk-UUJVXN2O.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-3GWWZKX7.js';

package/dist/components/progress.d.ts

@@ -1,6 +1,10 @@
 import * as React from 'react';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 
-declare const Progress: React.ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type ProgressTone = "primary" | "success" | "warning" | "destructive";
+declare const Progress: React.ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    tone?: ProgressTone;
+    size?: "sm" | "default" | "lg";
+} & React.RefAttributes<HTMLDivElement>>;
 
 export { Progress };

package/dist/components/progress.js

@@ -4,21 +4,35 @@ import * as React from 'react';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 import { jsx } from 'react/jsx-runtime';
 
+var toneClasses = {
+  primary: "bg-primary",
+  success: "bg-success",
+  warning: "bg-warning",
+  destructive: "bg-destructive"
+};
+var sizeClasses = {
+  sm: "h-1",
+  default: "h-2",
+  lg: "h-3"
+};
 var Progress = React.forwardRef((_a, ref) => {
-  var _b = _a, { className, value } = _b, props = __objRest(_b, ["className", "value"]);
+  var _b = _a, { className, value, tone = "primary", size = "default" } = _b, props = __objRest(_b, ["className", "value", "tone", "size"]);
   return /* @__PURE__ */ jsx(
     ProgressPrimitive.Root,
     __spreadProps(__spreadValues({
       ref,
+      "data-slot": "progress",
       className: cn(
-        "relative h-2 w-full overflow-hidden rounded-full glass border border-border/50",
+        "relative w-full overflow-hidden rounded-full bg-muted",
+        sizeClasses[size],
         className
       )
     }, props), {
       children: /* @__PURE__ */ jsx(
         ProgressPrimitive.Indicator,
         {
-          className: "h-full w-full flex-1 bg-gradient-to-r from-primary to-secondary transition-all duration-500 ease-out shadow-lg",
+          "data-slot": "progress-indicator",
+          className: cn("h-full w-full flex-1 transition-transform duration-500 ease-out", toneClasses[tone]),
           style: { transform: `translateX(-${100 - (value || 0)}%)` }
         }
       )

package/dist/components/radio-group.js

@@ -7,7 +7,15 @@ import { jsx } from 'react/jsx-runtime';
 
 var RadioGroup = React.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx(RadioGroupPrimitive.Root, __spreadProps(__spreadValues({ className: cn("grid gap-2", className) }, props), { ref }));
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Root,
+    __spreadProps(__spreadValues({
+      "data-slot": "radio-group",
+      className: cn("grid gap-2", className)
+    }, props), {
+      ref
+    })
+  );
 });
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 var RadioGroupItem = React.forwardRef((_a, ref) => {
@@ -16,12 +24,13 @@ var RadioGroupItem = React.forwardRef((_a, ref) => {
     RadioGroupPrimitive.Item,
     __spreadProps(__spreadValues({
       ref,
+      "data-slot": "radio-group-item",
       className: cn(
-        "aspect-square h-5 w-5 rounded-full border border-border glass text-primary transition-all duration-300 focus: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 data-[state=checked]:shadow-lg data-[state=checked]:shadow-primary/20 hover:border-accent/50 hover:shadow-md",
+        "aspect-square size-5 rounded-full border border-border bg-background text-primary transition-colors 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 hover:border-primary/50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/40",
         className
       )
     }, props), {
-      children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(Circle, { className: "h-2.5 w-2.5 fill-current text-current animate-in zoom-in-50 duration-200" }) })
+      children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(Circle, { className: "size-2.5 fill-current text-primary animate-in zoom-in-50 duration-150" }) })
     })
   );
 });

package/dist/components/rating.d.ts

@@ -9,6 +9,8 @@ interface RatingProps {
     readonly?: boolean;
     onRatingChange?: (rating: number) => void;
     className?: string;
+    /** Accessible label for the rating control. Defaults to "Rating". */
+    label?: string;
 }
 declare const Rating: React.ForwardRefExoticComponent<RatingProps & React.RefAttributes<HTMLDivElement>>;
 

package/dist/components/rating.js

@@ -4,6 +4,18 @@ import * as React from 'react';
 import { Star, StarHalf } from 'lucide-react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+var sizeClasses = {
+  sm: "size-3",
+  md: "size-4",
+  lg: "size-5"
+};
+var textSizeClasses = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base"
+};
+var FILLED_CLASSES = "fill-amber-400 text-amber-400";
+var EMPTY_CLASSES = "fill-transparent text-muted-foreground/40";
 var Rating = React.forwardRef(
   (_a, ref) => {
     var _b = _a, {
@@ -14,7 +26,8 @@ var Rating = React.forwardRef(
       reviewCount,
       readonly = true,
       onRatingChange,
-      className
+      className,
+      label = "Rating"
     } = _b, props = __objRest(_b, [
       "value",
       "max",
@@ -23,89 +36,94 @@ var Rating = React.forwardRef(
       "reviewCount",
       "readonly",
       "onRatingChange",
-      "className"
+      "className",
+      "label"
     ]);
     const [hoverValue, setHoverValue] = React.useState(null);
-    const sizeClasses = {
-      sm: "h-3 w-3",
-      md: "h-4 w-4",
-      lg: "h-5 w-5"
-    };
-    const textSizeClasses = {
-      sm: "text-xs",
-      md: "text-sm",
-      lg: "text-base"
-    };
-    const handleClick = (rating) => {
-      if (!readonly && onRatingChange) {
-        onRatingChange(rating);
-      }
-    };
-    const handleMouseEnter = (rating) => {
-      if (!readonly) {
-        setHoverValue(rating);
-      }
-    };
-    const handleMouseLeave = () => {
-      if (!readonly) {
-        setHoverValue(null);
+    const displayValue = hoverValue != null ? hoverValue : value;
+    if (readonly) {
+      const fullStars = Math.floor(displayValue);
+      const hasHalfStar = displayValue % 1 !== 0;
+      const emptyStars = max - fullStars - (hasHalfStar ? 1 : 0);
+      return /* @__PURE__ */ jsxs(
+        "div",
+        __spreadProps(__spreadValues({
+          ref,
+          role: "img",
+          "aria-label": `${label}: ${value} out of ${max}`,
+          className: cn("flex items-center gap-1", className)
+        }, props), {
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", children: [
+              Array.from({ length: fullStars }).map((_, i) => /* @__PURE__ */ jsx(Star, { className: cn(sizeClasses[size], FILLED_CLASSES) }, `full-${i}`)),
+              hasHalfStar && /* @__PURE__ */ jsx(StarHalf, { className: cn(sizeClasses[size], FILLED_CLASSES) }),
+              Array.from({ length: emptyStars }).map((_, i) => /* @__PURE__ */ jsx(Star, { className: cn(sizeClasses[size], EMPTY_CLASSES) }, `empty-${i}`))
+            ] }),
+            showCount && reviewCount !== void 0 && /* @__PURE__ */ jsxs("span", { className: cn("ml-1 text-muted-foreground", textSizeClasses[size]), children: [
+              "(",
+              reviewCount,
+              ")"
+            ] })
+          ]
+        })
+      );
+    }
+    const handleKeyDown = (e) => {
+      if (!onRatingChange) return;
+      if (e.key === "ArrowRight" || e.key === "ArrowUp") {
+        e.preventDefault();
+        onRatingChange(Math.min(max, value + 1));
+      } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
+        e.preventDefault();
+        onRatingChange(Math.max(0, value - 1));
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        onRatingChange(0);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        onRatingChange(max);
       }
     };
-    const displayValue = hoverValue != null ? hoverValue : value;
-    const fullStars = Math.floor(displayValue);
-    const hasHalfStar = displayValue % 1 !== 0;
-    const emptyStars = max - fullStars - (hasHalfStar ? 1 : 0);
     return /* @__PURE__ */ jsxs(
       "div",
       __spreadProps(__spreadValues({
         ref,
-        className: cn("flex items-center gap-1", !readonly && "cursor-pointer", className)
+        role: "radiogroup",
+        "aria-label": label,
+        onKeyDown: handleKeyDown,
+        className: cn("flex items-center gap-1", className)
       }, props), {
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", children: [
-            Array.from({ length: fullStars }).map((_, i) => /* @__PURE__ */ jsx(
-              Star,
-              {
-                className: cn(
-                  sizeClasses[size],
-                  "fill-primary text-primary transition-colors",
-                  !readonly && "hover:fill-primary/80"
-                ),
-                onClick: () => handleClick(i + 1),
-                onMouseEnter: () => handleMouseEnter(i + 1),
-                onMouseLeave: handleMouseLeave
-              },
-              `full-${i}`
-            )),
-            hasHalfStar && /* @__PURE__ */ jsx(
-              StarHalf,
-              {
-                className: cn(
-                  sizeClasses[size],
-                  "fill-primary text-primary transition-colors",
-                  !readonly && "hover:fill-primary/80"
-                ),
-                onClick: () => handleClick(fullStars + 1),
-                onMouseEnter: () => handleMouseEnter(fullStars + 1),
-                onMouseLeave: handleMouseLeave
-              }
-            ),
-            Array.from({ length: emptyStars }).map((_, i) => /* @__PURE__ */ jsx(
-              Star,
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-0.5", onMouseLeave: () => setHoverValue(null), children: Array.from({ length: max }).map((_, i) => {
+            const starValue = i + 1;
+            const isActive = starValue <= displayValue;
+            return /* @__PURE__ */ jsx(
+              "button",
               {
+                type: "button",
+                role: "radio",
+                "aria-checked": value === starValue,
+                "aria-label": `${starValue} star${starValue === 1 ? "" : "s"}`,
+                onClick: () => onRatingChange == null ? void 0 : onRatingChange(starValue),
+                onMouseEnter: () => setHoverValue(starValue),
                 className: cn(
-                  sizeClasses[size],
-                  "text-muted-foreground/30 transition-colors",
-                  !readonly && "hover:text-primary/50"
+                  "rounded-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
                 ),
-                onClick: () => handleClick(fullStars + (hasHalfStar ? 1 : 0) + i + 1),
-                onMouseEnter: () => handleMouseEnter(fullStars + (hasHalfStar ? 1 : 0) + i + 1),
-                onMouseLeave: handleMouseLeave
+                children: /* @__PURE__ */ jsx(
+                  Star,
+                  {
+                    className: cn(
+                      sizeClasses[size],
+                      isActive ? FILLED_CLASSES : EMPTY_CLASSES,
+                      "transition-colors"
+                    )
+                  }
+                )
               },
-              `empty-${i}`
-            ))
-          ] }),
-          showCount && reviewCount !== void 0 && /* @__PURE__ */ jsxs("span", { className: cn("text-muted-foreground ml-1", textSizeClasses[size]), children: [
+              starValue
+            );
+          }) }),
+          showCount && reviewCount !== void 0 && /* @__PURE__ */ jsxs("span", { className: cn("ml-1 text-muted-foreground", textSizeClasses[size]), children: [
             "(",
             reviewCount,
             ")"

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+type Orientation = "vertical" | "horizontal";
+type FadeColor = "background" | "card" | "muted";
+type Size = "sm" | "md" | "lg";
+interface ScrollFadeProps extends React.HTMLAttributes<HTMLDivElement> {
+    orientation?: Orientation;
+    fadeColor?: FadeColor;
+    size?: Size;
+    /** Class names applied to the inner scrollable element (where overflow lives). */
+    scrollClassName?: string;
+}
+declare const ScrollFade: React.ForwardRefExoticComponent<ScrollFadeProps & React.RefAttributes<HTMLDivElement>>;
+
+export { ScrollFade, type ScrollFadeProps };