@bearmenu/ui 0.5.2 → 0.6.1

package/src/components/native-select.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { NativeSelect } from "./native-select";
+
+const meta = {
+  title: "Components/NativeSelect",
+  component: NativeSelect,
+  tags: ["autodocs"],
+} satisfies Meta<typeof NativeSelect>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <NativeSelect className="w-64" defaultValue="">
+      <option value="" disabled>
+        Pick a fruit…
+      </option>
+      <option value="apple">Apple</option>
+      <option value="banana">Banana</option>
+      <option value="cherry">Cherry</option>
+    </NativeSelect>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex w-64 flex-col gap-3">
+      <NativeSelect size="sm" defaultValue="small">
+        <option value="small">Small</option>
+      </NativeSelect>
+      <NativeSelect size="default" defaultValue="default">
+        <option value="default">Default</option>
+      </NativeSelect>
+      <NativeSelect size="lg" defaultValue="large">
+        <option value="large">Large</option>
+      </NativeSelect>
+    </div>
+  ),
+};
+
+export const Invalid: Story = {
+  render: () => (
+    <NativeSelect className="w-64" aria-invalid defaultValue="">
+      <option value="" disabled>
+        Required field…
+      </option>
+      <option value="a">Option A</option>
+      <option value="b">Option B</option>
+    </NativeSelect>
+  ),
+};

package/src/components/native-select.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { ChevronDown } from "lucide-react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/utils";
+
+const 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",
+    },
+  }
+);
+
+type NativeSelectProps = Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size"> &
+  VariantProps<typeof nativeSelectVariants>;
+
+const NativeSelect = React.forwardRef<HTMLSelectElement, NativeSelectProps>(
+  ({ className, size, children, ...props }, ref) => (
+    <div className="relative inline-flex w-full">
+      <select
+        ref={ref}
+        data-slot="native-select"
+        className={cn(nativeSelectVariants({ size }), className)}
+        {...props}
+      >
+        {children}
+      </select>
+      <ChevronDown
+        aria-hidden
+        className="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
+      />
+    </div>
+  )
+);
+NativeSelect.displayName = "NativeSelect";
+
+export { NativeSelect, nativeSelectVariants };

package/src/components/pagination.tsx

@@ -1,5 +1,11 @@
 import * as React from "react";
-import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronsLeftIcon,
+  ChevronsRightIcon,
+  MoreHorizontalIcon,
+} from "lucide-react";
 
 import { cn } from "../lib/utils";
 import { Button, buttonVariants } from "./button";
@@ -32,20 +38,33 @@ function PaginationItem({ ...props }: React.ComponentProps<"li">) {
 
 type PaginationLinkProps = {
   isActive?: boolean;
+  disabled?: boolean;
 } & Pick<React.ComponentProps<typeof Button>, "size"> &
   React.ComponentProps<"a">;
 
-function PaginationLink({ className, isActive, size = "icon", ...props }: PaginationLinkProps) {
+function PaginationLink({
+  className,
+  isActive,
+  disabled,
+  size = "icon",
+  onClick,
+  ...props
+}: PaginationLinkProps) {
   return (
     <a
       aria-current={isActive ? "page" : undefined}
+      aria-disabled={disabled || undefined}
       data-slot="pagination-link"
       data-active={isActive}
+      tabIndex={disabled ? -1 : undefined}
+      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}
@@ -53,7 +72,26 @@ function PaginationLink({ className, isActive, size = "icon", ...props }: Pagina
   );
 }
 
-function PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {
+function PaginationFirst({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to first page"
+      size="icon"
+      className={cn(className)}
+      {...props}
+    >
+      <ChevronsLeftIcon />
+    </PaginationLink>
+  );
+}
+
+function PaginationPrevious({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
   return (
     <PaginationLink
       aria-label="Go to previous page"
@@ -67,7 +105,10 @@ function PaginationPrevious({ className, ...props }: React.ComponentProps<typeof
   );
 }
 
-function PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {
+function PaginationNext({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
   return (
     <PaginationLink
       aria-label="Go to next page"
@@ -81,6 +122,22 @@ function PaginationNext({ className, ...props }: React.ComponentProps<typeof Pag
   );
 }
 
+function PaginationLast({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to last page"
+      size="icon"
+      className={cn(className)}
+      {...props}
+    >
+      <ChevronsRightIcon />
+    </PaginationLink>
+  );
+}
+
 function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">) {
   return (
     <span
@@ -100,7 +157,9 @@ export {
   PaginationContent,
   PaginationLink,
   PaginationItem,
+  PaginationFirst,
   PaginationPrevious,
   PaginationNext,
+  PaginationLast,
   PaginationEllipsis,
 };

package/src/components/popover.tsx

@@ -5,8 +5,9 @@ import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { cn } from "../lib/utils";
 
 const Popover = PopoverPrimitive.Root;
-
 const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverAnchor = PopoverPrimitive.Anchor;
+const PopoverClose = PopoverPrimitive.Close;
 
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
@@ -15,10 +16,12 @@ const PopoverContent = React.forwardRef<
   <PopoverPrimitive.Portal>
     <PopoverPrimitive.Content
       ref={ref}
+      data-slot="popover-content"
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 w-72 rounded-xl bg-cave-depth p-4 text-popover-foreground shadow-2xl outline-none 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 border border-border/50",
+        "z-50 w-72 rounded-xl border border-border bg-popover p-4 text-popover-foreground shadow-xl outline-none",
+        "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",
         className
       )}
       {...props}
@@ -27,4 +30,64 @@ const PopoverContent = React.forwardRef<
 ));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverTrigger, PopoverContent };
+const PopoverArrow = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Arrow>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Arrow>
+>(({ className, ...props }, ref) => (
+  <PopoverPrimitive.Arrow
+    ref={ref}
+    data-slot="popover-arrow"
+    className={cn("fill-popover stroke-border", className)}
+    {...props}
+  />
+));
+PopoverArrow.displayName = PopoverPrimitive.Arrow.displayName;
+
+const PopoverHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="popover-header"
+      className={cn("flex flex-col space-y-1.5 pb-3", className)}
+      {...props}
+    />
+  )
+);
+PopoverHeader.displayName = "PopoverHeader";
+
+const PopoverTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3
+      ref={ref}
+      data-slot="popover-title"
+      className={cn("text-sm font-semibold leading-none", className)}
+      {...props}
+    />
+  )
+);
+PopoverTitle.displayName = "PopoverTitle";
+
+const PopoverDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    data-slot="popover-description"
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+PopoverDescription.displayName = "PopoverDescription";
+
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverAnchor,
+  PopoverClose,
+  PopoverArrow,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverDescription,
+};

package/src/components/progress.tsx

@@ -4,20 +4,43 @@ import * as React from "react";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
 import { cn } from "../lib/utils";
 
+type ProgressTone = "primary" | "success" | "warning" | "destructive";
+
+type ProgressProps = React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & {
+  tone?: ProgressTone;
+  size?: "sm" | "default" | "lg";
+};
+
+const toneClasses: Record<ProgressTone, string> = {
+  primary: "bg-primary",
+  success: "bg-success",
+  warning: "bg-warning",
+  destructive: "bg-destructive",
+};
+
+const sizeClasses = {
+  sm: "h-1",
+  default: "h-2",
+  lg: "h-3",
+} as const;
+
 const Progress = React.forwardRef<
   React.ElementRef<typeof ProgressPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
->(({ className, value, ...props }, ref) => (
+  ProgressProps
+>(({ className, value, tone = "primary", size = "default", ...props }, ref) => (
   <ProgressPrimitive.Root
     ref={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}
   >
     <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)}%)` }}
     />
   </ProgressPrimitive.Root>

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);
+  });
+});