@bearmenu/ui 0.5.1 → 0.6.0

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

@@ -0,0 +1,64 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { RadioGroup, RadioGroupItem } from "./radio-group";
+
+function Setup({
+  value,
+  onValueChange,
+}: {
+  value?: string;
+  onValueChange?: (v: string) => void;
+}) {
+  return (
+    <RadioGroup value={value} onValueChange={onValueChange} aria-label="favorite">
+      <RadioGroupItem value="a" aria-label="A" />
+      <RadioGroupItem value="b" aria-label="B" />
+      <RadioGroupItem value="c" aria-label="C" />
+    </RadioGroup>
+  );
+}
+
+describe("RadioGroup", () => {
+  it("renders a radiogroup with items", () => {
+    render(<Setup />);
+    expect(screen.getByRole("radiogroup", { name: /favorite/i })).toBeDefined();
+    expect(screen.getAllByRole("radio")).toHaveLength(3);
+  });
+
+  it("marks the matching item as checked", () => {
+    render(<Setup value="b" onValueChange={() => {}} />);
+    expect(screen.getByRole("radio", { name: "B" })).toHaveAttribute("data-state", "checked");
+    expect(screen.getByRole("radio", { name: "A" })).toHaveAttribute("data-state", "unchecked");
+  });
+
+  it("fires onValueChange when clicking an item", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(<Setup onValueChange={onValueChange} />);
+    await user.click(screen.getByRole("radio", { name: "B" }));
+    expect(onValueChange).toHaveBeenCalledWith("b");
+  });
+
+  it("disabled items reject clicks", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(
+      <RadioGroup onValueChange={onValueChange} aria-label="x">
+        <RadioGroupItem value="a" aria-label="A" disabled />
+        <RadioGroupItem value="b" aria-label="B" />
+      </RadioGroup>
+    );
+    await user.click(screen.getByRole("radio", { name: "A" }));
+    expect(onValueChange).not.toHaveBeenCalled();
+  });
+
+  it("respects aria-invalid on items", () => {
+    render(
+      <RadioGroup aria-label="x">
+        <RadioGroupItem value="a" aria-label="A" aria-invalid />
+      </RadioGroup>
+    );
+    expect(screen.getByRole("radio", { name: "A" })).toHaveAttribute("aria-invalid", "true");
+  });
+});

package/src/components/radio-group.tsx

@@ -9,7 +9,14 @@ const RadioGroup = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
 >(({ className, ...props }, ref) => {
-  return <RadioGroupPrimitive.Root className={cn("grid gap-2", className)} {...props} ref={ref} />;
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  );
 });
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 
@@ -20,14 +27,15 @@ const RadioGroupItem = React.forwardRef<
   return (
     <RadioGroupPrimitive.Item
       ref={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}
     >
       <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <Circle className="h-2.5 w-2.5 fill-current text-current animate-in zoom-in-50 duration-200" />
+        <Circle className="size-2.5 fill-current text-primary animate-in zoom-in-50 duration-150" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
   );

package/src/components/rating.test.tsx

@@ -0,0 +1,112 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Rating } from "./rating";
+
+describe("Rating (readonly)", () => {
+  it("renders with role=img and labeled aria description", () => {
+    render(<Rating value={3.5} reviewCount={42} />);
+    const el = screen.getByRole("img");
+    expect(el.getAttribute("aria-label")).toBe("Rating: 3.5 out of 5");
+  });
+
+  it("uses custom label in aria-label", () => {
+    render(<Rating value={2} label="Tasty" />);
+    expect(screen.getByRole("img").getAttribute("aria-label")).toBe("Tasty: 2 out of 5");
+  });
+
+  it("shows review count when provided and showCount is true", () => {
+    render(<Rating value={3} reviewCount={123} />);
+    expect(screen.getByText("(123)")).toBeInTheDocument();
+  });
+
+  it("hides count when showCount=false", () => {
+    render(<Rating value={3} reviewCount={123} showCount={false} />);
+    expect(screen.queryByText("(123)")).toBeNull();
+  });
+
+  it("does not render any radio buttons in readonly mode", () => {
+    render(<Rating value={3} />);
+    expect(screen.queryByRole("radio")).toBeNull();
+  });
+});
+
+describe("Rating (interactive)", () => {
+  it("renders as radiogroup with `max` radios", () => {
+    render(<Rating value={0} readonly={false} onRatingChange={() => {}} />);
+    expect(screen.getByRole("radiogroup")).toBeInTheDocument();
+    expect(screen.getAllByRole("radio")).toHaveLength(5);
+  });
+
+  it("marks the correct radio as checked", () => {
+    render(<Rating value={3} readonly={false} onRatingChange={() => {}} />);
+    const radios = screen.getAllByRole("radio");
+    expect(radios[2].getAttribute("aria-checked")).toBe("true");
+    expect(radios[0].getAttribute("aria-checked")).toBe("false");
+    expect(radios[4].getAttribute("aria-checked")).toBe("false");
+  });
+
+  it("fires onRatingChange when a star is clicked", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Rating value={0} readonly={false} onRatingChange={onChange} />);
+    await user.click(screen.getByRole("radio", { name: "4 stars" }));
+    expect(onChange).toHaveBeenCalledWith(4);
+  });
+
+  it("ArrowRight increments and ArrowLeft decrements", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Rating value={3} readonly={false} onRatingChange={onChange} />);
+    screen.getAllByRole("radio")[0].focus();
+    await user.keyboard("{ArrowRight}");
+    expect(onChange).toHaveBeenLastCalledWith(4);
+    await user.keyboard("{ArrowLeft}");
+    expect(onChange).toHaveBeenLastCalledWith(2);
+  });
+
+  it("ArrowUp increments and ArrowDown decrements", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Rating value={2} readonly={false} onRatingChange={onChange} />);
+    screen.getAllByRole("radio")[0].focus();
+    await user.keyboard("{ArrowUp}");
+    expect(onChange).toHaveBeenLastCalledWith(3);
+    await user.keyboard("{ArrowDown}");
+    expect(onChange).toHaveBeenLastCalledWith(1);
+  });
+
+  it("Home jumps to 0 and End jumps to max", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Rating value={3} readonly={false} onRatingChange={onChange} />);
+    screen.getAllByRole("radio")[0].focus();
+    await user.keyboard("{Home}");
+    expect(onChange).toHaveBeenLastCalledWith(0);
+    await user.keyboard("{End}");
+    expect(onChange).toHaveBeenLastCalledWith(5);
+  });
+
+  it("clamps at max when ArrowRight pressed at max", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Rating value={5} readonly={false} onRatingChange={onChange} />);
+    screen.getAllByRole("radio")[0].focus();
+    await user.keyboard("{ArrowRight}");
+    expect(onChange).toHaveBeenLastCalledWith(5);
+  });
+
+  it("clamps at 0 when ArrowLeft pressed at 0", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Rating value={0} readonly={false} onRatingChange={onChange} />);
+    screen.getAllByRole("radio")[0].focus();
+    await user.keyboard("{ArrowLeft}");
+    expect(onChange).toHaveBeenLastCalledWith(0);
+  });
+
+  it("respects max prop for radio count", () => {
+    render(<Rating value={2} max={10} readonly={false} onRatingChange={() => {}} />);
+    expect(screen.getAllByRole("radio")).toHaveLength(10);
+  });
+});

package/src/components/rating.tsx

@@ -1,20 +1,37 @@
 "use client";
 
 import * as React from "react";
-import { cn } from "../lib/utils";
 import { Star, StarHalf } from "lucide-react";
+import { cn } from "../lib/utils";
 
 interface RatingProps {
-  value: number; // 1-5
-  max?: number; // default 5
+  value: number;
+  max?: number;
   size?: "sm" | "md" | "lg";
   showCount?: boolean;
   reviewCount?: number;
   readonly?: boolean;
   onRatingChange?: (rating: number) => void;
   className?: string;
+  /** Accessible label for the rating control. Defaults to "Rating". */
+  label?: string;
 }
 
+const sizeClasses = {
+  sm: "size-3",
+  md: "size-4",
+  lg: "size-5",
+} as const;
+
+const textSizeClasses = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base",
+} as const;
+
+const FILLED_CLASSES = "fill-amber-400 text-amber-400";
+const EMPTY_CLASSES = "fill-transparent text-muted-foreground/40";
+
 const Rating = React.forwardRef<HTMLDivElement, RatingProps>(
   (
     {
@@ -26,103 +43,101 @@ const Rating = React.forwardRef<HTMLDivElement, RatingProps>(
       readonly = true,
       onRatingChange,
       className,
+      label = "Rating",
       ...props
     },
     ref
   ) => {
     const [hoverValue, setHoverValue] = React.useState<number | null>(null);
+    const displayValue = hoverValue ?? value;
 
-    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: number) => {
-      if (!readonly && onRatingChange) {
-        onRatingChange(rating);
-      }
-    };
+    if (readonly) {
+      const fullStars = Math.floor(displayValue);
+      const hasHalfStar = displayValue % 1 !== 0;
+      const emptyStars = max - fullStars - (hasHalfStar ? 1 : 0);
 
-    const handleMouseEnter = (rating: number) => {
-      if (!readonly) {
-        setHoverValue(rating);
-      }
-    };
+      return (
+        <div
+          ref={ref}
+          role="img"
+          aria-label={`${label}: ${value} out of ${max}`}
+          className={cn("flex items-center gap-1", className)}
+          {...props}
+        >
+          <div className="flex items-center gap-0.5">
+            {Array.from({ length: fullStars }).map((_, i) => (
+              <Star key={`full-${i}`} className={cn(sizeClasses[size], FILLED_CLASSES)} />
+            ))}
+            {hasHalfStar && <StarHalf className={cn(sizeClasses[size], FILLED_CLASSES)} />}
+            {Array.from({ length: emptyStars }).map((_, i) => (
+              <Star key={`empty-${i}`} className={cn(sizeClasses[size], EMPTY_CLASSES)} />
+            ))}
+          </div>
+          {showCount && reviewCount !== undefined && (
+            <span className={cn("ml-1 text-muted-foreground", textSizeClasses[size])}>
+              ({reviewCount})
+            </span>
+          )}
+        </div>
+      );
+    }
 
-    const handleMouseLeave = () => {
-      if (!readonly) {
-        setHoverValue(null);
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+      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 ?? value;
-    const fullStars = Math.floor(displayValue);
-    const hasHalfStar = displayValue % 1 !== 0;
-    const emptyStars = max - fullStars - (hasHalfStar ? 1 : 0);
-
     return (
       <div
         ref={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}
       >
-        {/* Stars */}
-        <div className="flex items-center gap-0.5">
-          {/* Full stars */}
-          {Array.from({ length: fullStars }).map((_, i) => (
-            <Star
-              key={`full-${i}`}
-              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}
-            />
-          ))}
-
-          {/* Half star */}
-          {hasHalfStar && (
-            <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}
-            />
-          )}
-
-          {/* Empty stars */}
-          {Array.from({ length: emptyStars }).map((_, i) => (
-            <Star
-              key={`empty-${i}`}
-              className={cn(
-                sizeClasses[size],
-                "text-muted-foreground/30 transition-colors",
-                !readonly && "hover:text-primary/50"
-              )}
-              onClick={() => handleClick(fullStars + (hasHalfStar ? 1 : 0) + i + 1)}
-              onMouseEnter={() => handleMouseEnter(fullStars + (hasHalfStar ? 1 : 0) + i + 1)}
-              onMouseLeave={handleMouseLeave}
-            />
-          ))}
+        <div className="flex items-center gap-0.5" onMouseLeave={() => setHoverValue(null)}>
+          {Array.from({ length: max }).map((_, i) => {
+            const starValue = i + 1;
+            const isActive = starValue <= displayValue;
+            return (
+              <button
+                key={starValue}
+                type="button"
+                role="radio"
+                aria-checked={value === starValue}
+                aria-label={`${starValue} star${starValue === 1 ? "" : "s"}`}
+                onClick={() => onRatingChange?.(starValue)}
+                onMouseEnter={() => setHoverValue(starValue)}
+                className={cn(
+                  "rounded-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
+                )}
+              >
+                <Star
+                  className={cn(
+                    sizeClasses[size],
+                    isActive ? FILLED_CLASSES : EMPTY_CLASSES,
+                    "transition-colors"
+                  )}
+                />
+              </button>
+            );
+          })}
         </div>
-
-        {/* Review count */}
         {showCount && reviewCount !== undefined && (
-          <span className={cn("text-muted-foreground ml-1", textSizeClasses[size])}>
+          <span className={cn("ml-1 text-muted-foreground", textSizeClasses[size])}>
             ({reviewCount})
           </span>
         )}

package/src/components/search-bar.stories.tsx

@@ -20,44 +20,13 @@ export const Default: Story = {
   render: () => <SearchBarDemo />,
 };
 
-export const Editorial: Story = {
+export const Wide: Story = {
   render: () => {
     const [value, setValue] = useState("");
     return (
       <SearchBar
         value={value}
         onChange={setValue}
-        variant="editorial"
-        placeholder="Search..."
-        className="w-[400px]"
-      />
-    );
-  },
-};
-
-export const Primary: Story = {
-  render: () => {
-    const [value, setValue] = useState("");
-    return (
-      <SearchBar
-        value={value}
-        onChange={setValue}
-        variant="primary"
-        placeholder="Search..."
-        className="w-[400px]"
-      />
-    );
-  },
-};
-
-export const Secondary: Story = {
-  render: () => {
-    const [value, setValue] = useState("");
-    return (
-      <SearchBar
-        value={value}
-        onChange={setValue}
-        variant="secondary"
         placeholder="Search..."
         className="w-[400px]"
       />

package/src/components/search-bar.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import type { ChangeEvent } from "react";
-import { Card } from "./card";
 import { Loader2, Search } from "lucide-react";
 import { cn } from "../lib/utils";
 
@@ -15,7 +14,6 @@ interface SearchBarProps {
   autoFocus?: boolean;
   inputAriaLabel?: string;
   size?: "default" | "compact";
-  variant?: "primary" | "secondary" | "editorial";
 }
 
 export function SearchBar({
@@ -28,49 +26,26 @@ export function SearchBar({
   autoFocus = false,
   inputAriaLabel,
   size = "default",
-  variant = "editorial",
 }: SearchBarProps) {
   const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const newValue = e.target.value;
-    onChange?.(newValue);
+    onChange?.(e.target.value);
   };
 
-  const Wrapper = variant === "editorial" ? "div" : Card;
-  const wrapperClassName =
-    variant === "editorial"
-      ? cn(
-          "bg-surface border border-border rounded-[14px] h-12 flex items-center transition-colors focus-within:border-primary",
-          className
-        )
-      : cn(
-          "border-2 border-primary-foreground/20 backdrop-blur-xl rounded-lg p-0",
-          size === "compact" ? "md:p-1.5" : "md:p-2",
-          variant === "primary"
-            ? "!bg-primary-foreground/10 !text-primary !border-primary/20"
-            : "!bg-primary !text-primary-foreground !border-primary/20",
-          className
-        );
-
   return (
-    <Wrapper className={wrapperClassName}>
-      <div className="flex items-center relative">
-        <div
+    <div
+      className={cn(
+        "flex w-full items-center rounded-[14px] border border-border bg-surface transition-colors focus-within:border-primary",
+        size === "compact" ? "h-10" : "h-12",
+        className
+      )}
+    >
+      <div className="relative flex w-full items-center">
+        <Search
           className={cn(
-            "absolute top-1/2 z-10 -translate-y-1/2",
-            size === "compact" ? "left-3.5" : "left-4"
+            "pointer-events-none absolute top-1/2 z-10 -translate-y-1/2 text-muted-foreground",
+            size === "compact" ? "left-3.5 h-3.5 w-3.5" : "left-4 h-4 w-4"
           )}
-        >
-          <Search
-            className={cn(
-              variant === "editorial"
-                ? "text-muted-foreground"
-                : variant === "primary"
-                  ? "text-primary"
-                  : "text-primary-foreground",
-              size === "compact" ? "h-3.5 w-3.5" : "h-4 w-4"
-            )}
-          />
-        </div>
+        />
         <input
           type="text"
           placeholder={placeholder}
@@ -79,35 +54,23 @@ export function SearchBar({
           autoFocus={autoFocus}
           aria-label={inputAriaLabel ?? placeholder}
           className={cn(
-            "w-full bg-transparent border-0 focus:outline-none focus-visible:outline-none",
+            "w-full border-0 bg-transparent text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:outline-none",
             size === "compact"
-              ? "pl-9 pr-3 py-2.5 text-sm placeholder:text-sm rounded-lg"
-              : "pl-10 pr-4 py-3 text-[14px] placeholder:text-[14px] rounded-[14px]",
-            variant === "editorial"
-              ? "text-foreground placeholder:text-muted-foreground"
-              : variant === "primary"
-                ? "!text-primary placeholder:text-primary/60"
-                : "!text-primary-foreground placeholder:text-primary-foreground/60",
+              ? "rounded-lg py-2.5 pl-9 pr-3 text-base placeholder:text-base md:text-sm md:placeholder:text-sm"
+              : "rounded-[14px] py-3 pl-10 pr-4 text-base placeholder:text-base md:text-[14px] md:placeholder:text-[14px]",
             inputClassName
           )}
         />
         {isSearching && (
-          <div
+          <Loader2
+            aria-hidden
             className={cn(
-              "absolute top-1/2 -translate-y-1/2",
-              size === "compact" ? "right-3.5" : "right-4"
+              "absolute top-1/2 -translate-y-1/2 animate-spin text-muted-foreground",
+              size === "compact" ? "right-3.5 h-3.5 w-3.5" : "right-4 h-4 w-4"
             )}
-          >
-            <Loader2
-              className={cn(
-                "animate-spin",
-                variant === "editorial" ? "text-muted-foreground" : "text-primary/60",
-                size === "compact" ? "h-3.5 w-3.5" : "h-4 w-4"
-              )}
-            />
-          </div>
+          />
         )}
       </div>
-    </Wrapper>
+    </div>
   );
 }