@bearmenu/ui 0.5.2 → 0.6.1

package/src/components/card.tsx

@@ -1,21 +1,42 @@
 import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../lib/utils";
 import { textVariants } from "./text";
 
-type CardVariant = "glass" | "surface";
+const cardVariants = cva("rounded-3xl text-card-foreground transition-colors", {
+  variants: {
+    variant: {
+      surface: "bg-card border border-border",
+      glass: "glass",
+      outline: "bg-transparent border border-border",
+      muted: "bg-muted border border-transparent",
+    },
+    size: {
+      sm: "[&_[data-slot=card-header]]:p-4 [&_[data-slot=card-content]]:p-4 [&_[data-slot=card-content]]:pt-0 [&_[data-slot=card-footer]]:p-4 [&_[data-slot=card-footer]]:pt-0",
+      default:
+        "[&_[data-slot=card-header]]:p-6 [&_[data-slot=card-content]]:p-6 [&_[data-slot=card-content]]:pt-0 [&_[data-slot=card-footer]]:p-6 [&_[data-slot=card-footer]]:pt-0",
+      lg: "[&_[data-slot=card-header]]:p-8 [&_[data-slot=card-content]]:p-8 [&_[data-slot=card-content]]:pt-0 [&_[data-slot=card-footer]]:p-8 [&_[data-slot=card-footer]]:pt-0",
+    },
+    interactive: {
+      true: "cursor-pointer hover:border-primary/40 hover:-translate-y-0.5 transition-[transform,border-color] duration-200",
+      false: "",
+    },
+  },
+  defaultVariants: {
+    variant: "surface",
+    size: "default",
+    interactive: false,
+  },
+});
 
 const Card = React.forwardRef<
   HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & { variant?: CardVariant }
->(({ className, variant = "glass", ...props }, ref) => (
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof cardVariants>
+>(({ className, variant, size, interactive, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn(
-      variant === "glass"
-        ? "glass rounded-[22px] border border-transparent text-card-foreground transition-[transform,border-color] duration-300 [@media(hover:hover)]:hover:-translate-y-0.5 hover:border-primary/40"
-        : "bg-surface rounded-[22px] border border-border text-card-foreground transition-all duration-200 hover:border-primary/40 hover:-translate-y-0.5",
-      className
-    )}
+    data-slot="card"
+    className={cn(cardVariants({ variant, size, interactive }), className)}
     {...props}
   />
 ));
@@ -23,7 +44,12 @@ Card.displayName = "Card";
 
 const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+    <div
+      ref={ref}
+      data-slot="card-header"
+      className={cn("flex flex-col space-y-1.5 p-6", className)}
+      {...props}
+    />
   )
 );
 CardHeader.displayName = "CardHeader";
@@ -32,6 +58,7 @@ const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivE
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
+      data-slot="card-title"
       className={cn(textVariants({ variant: "h4", wrap: "balance" }), className)}
       {...props}
     />
@@ -43,6 +70,7 @@ const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HT
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
+      data-slot="card-description"
       className={cn("text-sm", textVariants({ color: "muted", wrap: "pretty" }), className)}
       {...props}
     />
@@ -52,7 +80,7 @@ CardDescription.displayName = "CardDescription";
 
 const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+    <div ref={ref} data-slot="card-content" className={cn("p-6 pt-0", className)} {...props} />
   )
 );
 CardContent.displayName = "CardContent";
@@ -71,9 +99,23 @@ CardAction.displayName = "CardAction";
 
 const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+    <div
+      ref={ref}
+      data-slot="card-footer"
+      className={cn("flex items-center p-6 pt-0", className)}
+      {...props}
+    />
   )
 );
 CardFooter.displayName = "CardFooter";
 
-export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+  cardVariants,
+};

package/src/components/carousel.tsx

@@ -16,6 +16,8 @@ type CarouselProps = {
   opts?: CarouselOptions;
   plugins?: CarouselPlugin;
   orientation?: "horizontal" | "vertical";
+  /** Gap between slides in pixels. Defaults to 16. */
+  gap?: number;
   setApi?: (api: CarouselApi) => void;
 };
 
@@ -24,19 +26,21 @@ type CarouselContextProps = {
   api: ReturnType<typeof useEmblaCarousel>[1];
   scrollPrev: () => void;
   scrollNext: () => void;
+  scrollTo: (index: number) => void;
   canScrollPrev: boolean;
   canScrollNext: boolean;
+  selectedIndex: number;
+  slideCount: number;
+  gap: number;
 } & CarouselProps;
 
 const CarouselContext = React.createContext<CarouselContextProps | null>(null);
 
 function useCarousel() {
   const context = React.useContext(CarouselContext);
-
   if (!context) {
     throw new Error("useCarousel must be used within a <Carousel />");
   }
-
   return context;
 }
 
@@ -45,6 +49,7 @@ function Carousel({
   opts,
   setApi,
   plugins,
+  gap = 16,
   className,
   children,
   ...props
@@ -58,11 +63,15 @@ function Carousel({
   );
   const [canScrollPrev, setCanScrollPrev] = React.useState(false);
   const [canScrollNext, setCanScrollNext] = React.useState(false);
+  const [selectedIndex, setSelectedIndex] = React.useState(0);
+  const [slideCount, setSlideCount] = React.useState(0);
 
   const onSelect = React.useCallback((api: CarouselApi) => {
     if (!api) return;
     setCanScrollPrev(api.canScrollPrev());
     setCanScrollNext(api.canScrollNext());
+    setSelectedIndex(api.selectedScrollSnap());
+    setSlideCount(api.scrollSnapList().length);
   }, []);
 
   const scrollPrev = React.useCallback(() => {
@@ -73,6 +82,13 @@ function Carousel({
     api?.scrollNext();
   }, [api]);
 
+  const scrollTo = React.useCallback(
+    (index: number) => {
+      api?.scrollTo(index);
+    },
+    [api]
+  );
+
   const handleKeyDown = React.useCallback(
     (event: React.KeyboardEvent<HTMLDivElement>) => {
       if (event.key === "ArrowLeft") {
@@ -96,7 +112,6 @@ function Carousel({
     onSelect(api);
     api.on("reInit", onSelect);
     api.on("select", onSelect);
-
     return () => {
       api?.off("select", onSelect);
     };
@@ -106,13 +121,17 @@ function Carousel({
     <CarouselContext.Provider
       value={{
         carouselRef,
-        api: api,
+        api,
         opts,
         orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        gap,
         scrollPrev,
         scrollNext,
+        scrollTo,
         canScrollPrev,
         canScrollNext,
+        selectedIndex,
+        slideCount,
       }}
     >
       <div
@@ -130,31 +149,36 @@ function Carousel({
 }
 
 function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
-  const { carouselRef, orientation } = useCarousel();
+  const { carouselRef, orientation, gap } = useCarousel();
 
   return (
     <div ref={carouselRef} className="overflow-hidden" data-slot="carousel-content">
       <div
-        className={cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)}
+        className={cn("flex", orientation === "horizontal" ? "" : "flex-col", className)}
+        style={
+          orientation === "horizontal"
+            ? { marginLeft: `-${gap}px` }
+            : { marginTop: `-${gap}px` }
+        }
         {...props}
       />
     </div>
   );
 }
 
-function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
-  const { orientation } = useCarousel();
+function CarouselItem({ className, style, ...props }: React.ComponentProps<"div">) {
+  const { orientation, gap } = useCarousel();
 
   return (
     <div
       role="group"
       aria-roledescription="slide"
       data-slot="carousel-item"
-      className={cn(
-        "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
-        className
-      )}
+      className={cn("min-w-0 shrink-0 grow-0 basis-full", className)}
+      style={{
+        ...(orientation === "horizontal" ? { paddingLeft: `${gap}px` } : { paddingTop: `${gap}px` }),
+        ...style,
+      }}
       {...props}
     />
   );
@@ -220,6 +244,51 @@ function CarouselNext({
   );
 }
 
+function CarouselDots({ className, ...props }: React.ComponentProps<"div">) {
+  const { slideCount, selectedIndex, scrollTo } = useCarousel();
+
+  if (slideCount === 0) return null;
+
+  return (
+    <div
+      data-slot="carousel-dots"
+      className={cn("flex items-center justify-center gap-1.5", className)}
+      {...props}
+    >
+      {Array.from({ length: slideCount }).map((_, i) => (
+        <button
+          key={i}
+          type="button"
+          aria-label={`Go to slide ${i + 1}`}
+          aria-current={i === selectedIndex ? "true" : undefined}
+          onClick={() => scrollTo(i)}
+          className={cn(
+            "size-2 rounded-full transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            i === selectedIndex ? "w-6 bg-primary" : "bg-muted-foreground/30 hover:bg-muted-foreground/50"
+          )}
+        />
+      ))}
+    </div>
+  );
+}
+
+function CarouselCounter({ className, ...props }: React.ComponentProps<"div">) {
+  const { slideCount, selectedIndex } = useCarousel();
+
+  if (slideCount === 0) return null;
+
+  return (
+    <div
+      data-slot="carousel-counter"
+      aria-live="polite"
+      className={cn("text-xs tabular-nums text-muted-foreground", className)}
+      {...props}
+    >
+      {selectedIndex + 1} / {slideCount}
+    </div>
+  );
+}
+
 export {
   type CarouselApi,
   Carousel,
@@ -227,4 +296,7 @@ export {
   CarouselItem,
   CarouselPrevious,
   CarouselNext,
+  CarouselDots,
+  CarouselCounter,
+  useCarousel,
 };

package/src/components/checkbox.test.tsx

@@ -0,0 +1,58 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Checkbox } from "./checkbox";
+
+describe("Checkbox", () => {
+  it("renders an unchecked checkbox by default", () => {
+    render(<Checkbox aria-label="Accept" />);
+    const cb = screen.getByRole("checkbox", { name: /accept/i });
+    expect(cb).toHaveAttribute("data-state", "unchecked");
+  });
+
+  it("renders checked when `checked` is true", () => {
+    render(<Checkbox aria-label="Accept" checked onCheckedChange={() => {}} />);
+    expect(screen.getByRole("checkbox")).toHaveAttribute("data-state", "checked");
+  });
+
+  it("renders indeterminate state", () => {
+    render(<Checkbox aria-label="x" checked="indeterminate" onCheckedChange={() => {}} />);
+    expect(screen.getByRole("checkbox")).toHaveAttribute("data-state", "indeterminate");
+  });
+
+  it("calls onCheckedChange when clicked", async () => {
+    const user = userEvent.setup();
+    const onCheckedChange = vi.fn();
+    render(<Checkbox aria-label="x" onCheckedChange={onCheckedChange} />);
+    await user.click(screen.getByRole("checkbox"));
+    expect(onCheckedChange).toHaveBeenCalledWith(true);
+  });
+
+  it("calls onCheckedChange via Space key", async () => {
+    const user = userEvent.setup();
+    const onCheckedChange = vi.fn();
+    render(<Checkbox aria-label="x" onCheckedChange={onCheckedChange} />);
+    const cb = screen.getByRole("checkbox");
+    cb.focus();
+    await user.keyboard(" ");
+    expect(onCheckedChange).toHaveBeenCalledWith(true);
+  });
+
+  it("does not fire when disabled", async () => {
+    const user = userEvent.setup();
+    const onCheckedChange = vi.fn();
+    render(<Checkbox aria-label="x" disabled onCheckedChange={onCheckedChange} />);
+    await user.click(screen.getByRole("checkbox"));
+    expect(onCheckedChange).not.toHaveBeenCalled();
+  });
+
+  it("forwards the aria-invalid attribute", () => {
+    render(<Checkbox aria-label="x" aria-invalid />);
+    expect(screen.getByRole("checkbox")).toHaveAttribute("aria-invalid", "true");
+  });
+
+  it("merges className", () => {
+    render(<Checkbox aria-label="x" className="custom-class" />);
+    expect(screen.getByRole("checkbox").className).toContain("custom-class");
+  });
+});

package/src/components/checkbox.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { Check } from "lucide-react";
+import { Check, Minus } from "lucide-react";
 import { cn } from "../lib/utils";
 
 const Checkbox = React.forwardRef<
@@ -11,14 +11,19 @@ const Checkbox = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CheckboxPrimitive.Root
     ref={ref}
+    data-slot="checkbox"
     className={cn(
-      "peer h-5 w-5 shrink-0 rounded-md border border-border bg-background transition-all duration-200 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]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary data-[state=checked]:shadow-lg data-[state=checked]:shadow-primary/20 data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground data-[state=indeterminate]:border-primary data-[state=indeterminate]:shadow-lg data-[state=indeterminate]:shadow-primary/20 hover:border-primary/40 hover:shadow-md",
+      "peer size-5 shrink-0 rounded-md border border-border bg-background transition-all duration-150 ease-out 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]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground data-[state=indeterminate]:border-primary hover:border-primary/50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/40",
       className
     )}
     {...props}
   >
     <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
-      <Check className="h-3.5 w-3.5 animate-in zoom-in-50 duration-200" />
+      {props.checked === "indeterminate" ? (
+        <Minus className="size-3.5 animate-in fade-in-0 zoom-in-50 duration-200 ease-out" strokeWidth={3} />
+      ) : (
+        <Check className="size-3.5 animate-in fade-in-0 zoom-in-50 duration-200 ease-out" strokeWidth={3} />
+      )}
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ));

package/src/components/circular-progress.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CircularProgress } from "./circular-progress";
+
+const meta = {
+  title: "Components/CircularProgress",
+  component: CircularProgress,
+  tags: ["autodocs"],
+} satisfies Meta<typeof CircularProgress>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: { value: 60, showLabel: true } };
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <CircularProgress value={75} size={24} />
+      <CircularProgress value={75} size={40} />
+      <CircularProgress value={75} size={56} showLabel />
+      <CircularProgress value={75} size={80} showLabel strokeWidth={6} />
+    </div>
+  ),
+};
+
+export const Tones: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <CircularProgress value={60} tone="primary" showLabel />
+      <CircularProgress value={60} tone="success" showLabel />
+      <CircularProgress value={60} tone="warning" showLabel />
+      <CircularProgress value={60} tone="destructive" showLabel />
+    </div>
+  ),
+};
+
+export const Indeterminate: Story = {
+  args: { indeterminate: true, size: 40 },
+};

package/src/components/circular-progress.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+type CircularProgressProps = React.HTMLAttributes<HTMLDivElement> & {
+  value?: number;
+  max?: number;
+  size?: number;
+  strokeWidth?: number;
+  tone?: "primary" | "success" | "warning" | "destructive";
+  showLabel?: boolean;
+  /** Indeterminate spinner mode. */
+  indeterminate?: boolean;
+  /** Accessible label. Defaults to "Progress". */
+  label?: string;
+};
+
+const toneClasses = {
+  primary: "stroke-primary",
+  success: "stroke-success",
+  warning: "stroke-warning",
+  destructive: "stroke-destructive",
+};
+
+const CircularProgress = React.forwardRef<HTMLDivElement, CircularProgressProps>(
+  (
+    {
+      className,
+      value = 0,
+      max = 100,
+      size = 40,
+      strokeWidth = 4,
+      tone = "primary",
+      showLabel = false,
+      indeterminate = false,
+      label = "Progress",
+      ...props
+    },
+    ref
+  ) => {
+    const radius = (size - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const clampedValue = Math.min(Math.max(value, 0), max);
+    const percent = (clampedValue / max) * 100;
+    const dashOffset = circumference - (circumference * percent) / 100;
+
+    return (
+      <div
+        ref={ref}
+        data-slot="circular-progress"
+        role="progressbar"
+        aria-valuemin={0}
+        aria-valuemax={max}
+        aria-valuenow={indeterminate ? undefined : clampedValue}
+        aria-label={label}
+        className={cn("relative inline-flex shrink-0 items-center justify-center", className)}
+        style={{ width: size, height: size }}
+        {...props}
+      >
+        <svg
+          width={size}
+          height={size}
+          viewBox={`0 0 ${size} ${size}`}
+          className={cn(indeterminate && "animate-spin")}
+        >
+          <circle
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            strokeWidth={strokeWidth}
+            fill="none"
+            className="stroke-muted"
+          />
+          <circle
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            strokeWidth={strokeWidth}
+            fill="none"
+            strokeLinecap="round"
+            className={cn("transition-[stroke-dashoffset] duration-300 ease-out", toneClasses[tone])}
+            style={{
+              strokeDasharray: circumference,
+              strokeDashoffset: indeterminate ? circumference * 0.75 : dashOffset,
+              transform: `rotate(-90deg)`,
+              transformOrigin: `${size / 2}px ${size / 2}px`,
+            }}
+          />
+        </svg>
+        {showLabel && !indeterminate && (
+          <span className="absolute text-xs font-medium tabular-nums text-foreground">
+            {Math.round(percent)}%
+          </span>
+        )}
+      </div>
+    );
+  }
+);
+CircularProgress.displayName = "CircularProgress";
+
+export { CircularProgress };

package/src/components/collapsible.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./collapsible";
 import { Button } from "./button";
-import { ChevronsUpDown } from "lucide-react";
+import { ChevronDown } from "lucide-react";
 
 const meta = {
   title: "Components/Collapsible",
@@ -18,8 +18,12 @@ export const Default: Story = {
       <div className="flex items-center justify-between space-x-4 px-4">
         <h4 className="text-sm font-semibold">@peduarte starred 3 repositories</h4>
         <CollapsibleTrigger asChild>
-          <Button variant="ghost" size="sm" className="w-9 p-0">
-            <ChevronsUpDown className="h-4 w-4" />
+          <Button
+            variant="ghost"
+            size="sm"
+            className="w-9 p-0 [&[data-state=open]>svg]:rotate-180"
+          >
+            <ChevronDown className="h-4 w-4 transition-transform duration-200" />
             <span className="sr-only">Toggle</span>
           </Button>
         </CollapsibleTrigger>

package/src/components/combobox.stories.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { Combobox, type ComboboxOption } from "./combobox";
+
+const meta = {
+  title: "Components/Combobox",
+  component: Combobox,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Combobox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const frameworks: ComboboxOption[] = [
+  { value: "next", label: "Next.js", description: "React framework" },
+  { value: "remix", label: "Remix", description: "Full-stack web framework" },
+  { value: "astro", label: "Astro", description: "Content-driven web framework" },
+  { value: "vite", label: "Vite", description: "Frontend tooling" },
+  { value: "nuxt", label: "Nuxt", description: "Vue framework" },
+];
+
+export const Default: Story = {
+  render: () => {
+    const [value, setValue] = useState<string | undefined>("next");
+    return (
+      <div className="w-72">
+        <Combobox
+          options={frameworks}
+          value={value}
+          onValueChange={setValue}
+          placeholder="Pick a framework"
+        />
+      </div>
+    );
+  },
+};
+
+export const Empty: Story = {
+  render: () => {
+    const [value, setValue] = useState<string | undefined>(undefined);
+    return (
+      <div className="w-72">
+        <Combobox
+          options={frameworks}
+          value={value}
+          onValueChange={setValue}
+          placeholder="No selection"
+        />
+      </div>
+    );
+  },
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="w-72">
+      <Combobox
+        options={frameworks}
+        value="next"
+        onValueChange={() => {}}
+        disabled
+      />
+    </div>
+  ),
+};
+
+export const Loading: Story = {
+  render: () => {
+    const [value, setValue] = useState<string | undefined>(undefined);
+    return (
+      <div className="w-72">
+        <Combobox
+          options={[]}
+          value={value}
+          onValueChange={setValue}
+          loading
+          placeholder="Pick something…"
+        />
+      </div>
+    );
+  },
+};