@bearmenu/ui 0.5.2 → 0.6.0

package/src/components/stepper.stories.tsx

@@ -0,0 +1,71 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Stepper } from "./stepper";
+import { Button } from "./button";
+
+const meta = {
+  title: "Components/Stepper",
+  component: Stepper,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Stepper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const steps = [
+  { id: "account", title: "Account" },
+  { id: "details", title: "Details" },
+  { id: "review", title: "Review" },
+];
+
+export const Default: Story = {
+  render: () => (
+    <div className="w-[36rem]">
+      <Stepper steps={steps} activeStep={1} />
+    </div>
+  ),
+};
+
+export const Complete: Story = {
+  render: () => (
+    <div className="w-[36rem]">
+      <Stepper steps={steps} activeStep={steps.length} />
+    </div>
+  ),
+};
+
+export const Interactive: Story = {
+  render: () => {
+    const [active, setActive] = useState(0);
+    const [furthest, setFurthest] = useState(0);
+    return (
+      <div className="w-[36rem] space-y-6">
+        <Stepper
+          steps={steps}
+          activeStep={active}
+          furthestStep={furthest}
+          onStepClick={(i) => setActive(i)}
+        />
+        <div className="flex gap-2">
+          <Button
+            variant="outline"
+            disabled={active === 0}
+            onClick={() => setActive((a) => Math.max(0, a - 1))}
+          >
+            Back
+          </Button>
+          <Button
+            disabled={active === steps.length - 1}
+            onClick={() => {
+              const next = Math.min(steps.length - 1, active + 1);
+              setActive(next);
+              setFurthest((f) => Math.max(f, next));
+            }}
+          >
+            Next
+          </Button>
+        </div>
+      </div>
+    );
+  },
+};

package/src/components/stepper.tsx

@@ -0,0 +1,220 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+export interface StepperStep {
+  id: string;
+  title: string;
+  description?: string;
+}
+
+type StepStatus = "complete" | "current" | "upcoming";
+
+type StepperProps = React.HTMLAttributes<HTMLElement> & {
+  steps: StepperStep[];
+  activeStep: number;
+  /** Highest step the user has reached (enables clicking back). Defaults to activeStep. */
+  furthestStep?: number;
+  /** When provided, steps render as buttons. */
+  onStepClick?: (index: number) => void;
+  ariaLabel?: string;
+};
+
+const Stepper = React.forwardRef<HTMLElement, StepperProps>(
+  (
+    {
+      className,
+      steps,
+      activeStep,
+      furthestStep,
+      onStepClick,
+      ariaLabel = "Progress",
+      ...props
+    },
+    ref,
+  ) => {
+    const reachable = furthestStep ?? activeStep;
+    const isInteractive = typeof onStepClick === "function";
+
+    return (
+      <nav
+        ref={ref as React.Ref<HTMLElement>}
+        aria-label={ariaLabel}
+        className={cn("w-full", className)}
+        {...props}
+      >
+        {/* Desktop: circle + label, animated connectors */}
+        <ol className="hidden md:flex w-full items-center" data-slot="stepper">
+          {steps.map((step, i) => {
+            const status: StepStatus =
+              i < activeStep ? "complete" : i === activeStep ? "current" : "upcoming";
+            const isLast = i === steps.length - 1;
+            const canClick = isInteractive && i <= reachable;
+
+            const Item = canClick ? "button" : "div";
+            const itemProps = canClick
+              ? {
+                  type: "button" as const,
+                  onClick: () => onStepClick?.(i),
+                  disabled: !canClick,
+                }
+              : {};
+
+            return (
+              <li key={step.id} className="contents" data-status={status}>
+                <Item
+                  {...itemProps}
+                  aria-current={status === "current" ? "step" : undefined}
+                  className={cn(
+                    "group inline-flex items-center gap-2 rounded-full text-sm transition-opacity",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+                    canClick && status !== "current" && "hover:opacity-80",
+                  )}
+                >
+                  <StepCircle index={i} status={status} />
+                  <span
+                    className={cn(
+                      "whitespace-nowrap transition-colors",
+                      status === "current" && "font-semibold text-foreground",
+                      status === "complete" && "font-medium text-foreground/80",
+                      status === "upcoming" && "text-foreground/40",
+                    )}
+                  >
+                    {step.title}
+                  </span>
+                </Item>
+
+                {!isLast && <StepConnector filled={i < activeStep} />}
+              </li>
+            );
+          })}
+        </ol>
+
+        {/* Mobile: numeric dots + active label below */}
+        <div className="md:hidden">
+          <ol className="flex items-center gap-1.5" role="list">
+            {steps.map((step, i) => {
+              const status: StepStatus =
+                i < activeStep ? "complete" : i === activeStep ? "current" : "upcoming";
+              const canClick = isInteractive && i <= reachable;
+
+              return (
+                <li key={step.id} className="flex-1">
+                  {canClick ? (
+                    <button
+                      type="button"
+                      onClick={() => onStepClick?.(i)}
+                      aria-label={`${i + 1}. ${step.title}`}
+                      aria-current={status === "current" ? "step" : undefined}
+                      className={cn(
+                        "block w-full h-1.5 rounded-full transition-colors",
+                        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+                        status === "current" && "bg-foreground",
+                        status === "complete" && "bg-foreground/50",
+                        status === "upcoming" && "bg-foreground/15",
+                      )}
+                    />
+                  ) : (
+                    <div
+                      aria-label={`${i + 1}. ${step.title}`}
+                      aria-current={status === "current" ? "step" : undefined}
+                      className={cn(
+                        "block w-full h-1.5 rounded-full transition-colors",
+                        status === "current" && "bg-foreground",
+                        status === "complete" && "bg-foreground/50",
+                        status === "upcoming" && "bg-foreground/15",
+                      )}
+                    />
+                  )}
+                </li>
+              );
+            })}
+          </ol>
+          <p className="mt-3 text-xs uppercase tracking-[0.12em] text-foreground/40">
+            {`${activeStep + 1} / ${steps.length}`}
+          </p>
+          <p className="mt-1 text-base font-semibold text-foreground">
+            {steps[activeStep]?.title}
+          </p>
+        </div>
+      </nav>
+    );
+  },
+);
+Stepper.displayName = "Stepper";
+
+function StepCircle({ index, status }: { index: number; status: StepStatus }) {
+  const isFilled = status !== "upcoming";
+  const isComplete = status === "complete";
+
+  return (
+    <span
+      aria-hidden="true"
+      className="relative inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full"
+    >
+      {/* Outline (visible when upcoming, fades when filled) */}
+      <span
+        className={cn(
+          "absolute inset-0 rounded-full border transition-opacity duration-300",
+          isFilled ? "opacity-0 border-transparent" : "opacity-100 border-foreground/25",
+        )}
+      />
+      {/* Filled background — scales in from center, synced with check stroke */}
+      <span
+        className={cn(
+          "absolute inset-0 rounded-full bg-foreground origin-center transition-transform duration-300 ease-out",
+          isFilled ? "scale-100" : "scale-0",
+        )}
+      />
+      {/* Number (visible when not complete) */}
+      <span
+        className={cn(
+          "relative text-xs font-semibold transition-opacity duration-200",
+          isComplete ? "opacity-0" : "opacity-100",
+          status === "current" ? "text-background" : "text-foreground/40",
+        )}
+      >
+        {index + 1}
+      </span>
+      {/* Animated check — short stroke first, then long stroke */}
+      <svg
+        className="pointer-events-none absolute inset-0 m-auto h-3.5 w-3.5 text-background"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path
+          d="M5 12 L10 17 L20 7"
+          pathLength={1}
+          strokeDasharray="1"
+          strokeDashoffset={isComplete ? 0 : 1}
+          style={{
+            transition: isComplete
+              ? "stroke-dashoffset 450ms cubic-bezier(0.65, 0, 0.35, 1) 180ms"
+              : "stroke-dashoffset 150ms ease-in",
+          }}
+        />
+      </svg>
+    </span>
+  );
+}
+
+function StepConnector({ filled }: { filled: boolean }) {
+  return (
+    <div
+      aria-hidden="true"
+      className="relative h-1 flex-1 mx-3 overflow-hidden rounded-full bg-foreground/10"
+    >
+      <div
+        className="absolute inset-y-0 left-0 rounded-full bg-foreground/50 transition-[width] duration-500 ease-out"
+        style={{ width: filled ? "100%" : "0%" }}
+      />
+    </div>
+  );
+}
+
+export { Stepper };

package/src/components/switch.test.tsx

@@ -0,0 +1,52 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Switch } from "./switch";
+
+describe("Switch", () => {
+  it("renders unchecked by default", () => {
+    render(<Switch aria-label="notifications" />);
+    expect(screen.getByRole("switch")).toHaveAttribute("data-state", "unchecked");
+  });
+
+  it("renders checked when prop is set", () => {
+    render(<Switch aria-label="x" checked onCheckedChange={() => {}} />);
+    expect(screen.getByRole("switch")).toHaveAttribute("data-state", "checked");
+  });
+
+  it("toggles on click", async () => {
+    const user = userEvent.setup();
+    const onCheckedChange = vi.fn();
+    render(<Switch aria-label="x" onCheckedChange={onCheckedChange} />);
+    await user.click(screen.getByRole("switch"));
+    expect(onCheckedChange).toHaveBeenCalledWith(true);
+  });
+
+  it("ignores clicks when disabled", async () => {
+    const user = userEvent.setup();
+    const onCheckedChange = vi.fn();
+    render(<Switch aria-label="x" disabled onCheckedChange={onCheckedChange} />);
+    await user.click(screen.getByRole("switch"));
+    expect(onCheckedChange).not.toHaveBeenCalled();
+  });
+
+  it("toggles via Space key when focused", async () => {
+    const user = userEvent.setup();
+    const onCheckedChange = vi.fn();
+    render(<Switch aria-label="x" onCheckedChange={onCheckedChange} />);
+    const sw = screen.getByRole("switch");
+    sw.focus();
+    await user.keyboard(" ");
+    expect(onCheckedChange).toHaveBeenCalledWith(true);
+  });
+
+  it("supports aria-invalid", () => {
+    render(<Switch aria-label="x" aria-invalid />);
+    expect(screen.getByRole("switch")).toHaveAttribute("aria-invalid", "true");
+  });
+
+  it("merges className", () => {
+    render(<Switch aria-label="x" className="custom" />);
+    expect(screen.getByRole("switch").className).toContain("custom");
+  });
+});

package/src/components/switch.tsx

@@ -9,16 +9,17 @@ const Switch = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>
 >(({ className, ...props }, ref) => (
   <SwitchPrimitive.Root
+    ref={ref}
+    data-slot="switch"
     className={cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-all duration-300 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=unchecked]:bg-input glass data-[state=checked]:shadow-lg data-[state=checked]:shadow-primary/20 hover:shadow-md",
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent 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]:bg-primary data-[state=unchecked]:bg-input aria-invalid:ring-2 aria-invalid:ring-destructive/40",
       className
     )}
     {...props}
-    ref={ref}
   >
     <SwitchPrimitive.Thumb
       className={cn(
-        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-all duration-300 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-primary-foreground backdrop-blur-md border border-border/50"
+        "pointer-events-none block size-5 rounded-full bg-background shadow-md ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-primary-foreground"
       )}
     />
   </SwitchPrimitive.Root>

package/src/components/table.tsx

@@ -1,20 +1,38 @@
+"use client";
+
 import * as React from "react";
+import { ChevronDown, ChevronUp, ChevronsUpDown } from "lucide-react";
 import { cn } from "../lib/utils";
 
-const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
-  ({ className, ...props }, ref) => (
-    <div className="relative w-full overflow-auto">
-      <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
-    </div>
-  )
-);
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement> & { containerClassName?: string }
+>(({ className, containerClassName, ...props }, ref) => (
+  <div className={cn("relative w-full overflow-auto rounded-xl border border-border", containerClassName)}>
+    <table
+      ref={ref}
+      data-slot="table"
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+));
 Table.displayName = "Table";
 
 const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+  React.HTMLAttributes<HTMLTableSectionElement> & { sticky?: boolean }
+>(({ className, sticky, ...props }, ref) => (
+  <thead
+    ref={ref}
+    data-slot="table-header"
+    className={cn(
+      "bg-muted/50 [&_tr]:border-b [&_tr]:border-border",
+      sticky && "sticky top-0 z-10",
+      className
+    )}
+    {...props}
+  />
 ));
 TableHeader.displayName = "TableHeader";
 
@@ -22,7 +40,12 @@ const TableBody = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
+  <tbody
+    ref={ref}
+    data-slot="table-body"
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
 ));
 TableBody.displayName = "TableBody";
 
@@ -32,39 +55,88 @@ const TableFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <tfoot
     ref={ref}
-    className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
+    data-slot="table-footer"
+    className={cn("border-t border-border bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
     {...props}
   />
 ));
 TableFooter.displayName = "TableFooter";
 
-const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
-  ({ className, ...props }, ref) => (
-    <tr
-      ref={ref}
-      className={cn(
-        "border-b border-border/50 transition-all duration-300 hover:bg-muted/30 hover:backdrop-blur-sm data-[state=selected]:bg-muted/50",
-        className
-      )}
-      {...props}
-    />
-  )
-);
-TableRow.displayName = "TableRow";
-
-const TableHead = React.forwardRef<
-  HTMLTableCellElement,
-  React.ThHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <th
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement> & { interactive?: boolean }
+>(({ className, interactive, ...props }, ref) => (
+  <tr
     ref={ref}
+    data-slot="table-row"
     className={cn(
-      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      "border-b border-border transition-colors data-[state=selected]:bg-muted",
+      interactive && "cursor-pointer hover:bg-muted/50",
       className
     )}
     {...props}
   />
 ));
+TableRow.displayName = "TableRow";
+
+type SortDirection = "asc" | "desc" | "none";
+
+type TableHeadProps = React.ThHTMLAttributes<HTMLTableCellElement> & {
+  sortable?: boolean;
+  sortDirection?: SortDirection;
+  onSort?: () => void;
+};
+
+const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(
+  ({ className, sortable, sortDirection = "none", onSort, children, ...props }, ref) => {
+    if (!sortable) {
+      return (
+        <th
+          ref={ref}
+          data-slot="table-head"
+          className={cn(
+            "h-11 px-4 text-left align-middle text-xs font-semibold uppercase tracking-wide text-muted-foreground [&:has([role=checkbox])]:pr-0",
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </th>
+      );
+    }
+
+    const ariaSort =
+      sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : "none";
+
+    return (
+      <th
+        ref={ref}
+        data-slot="table-head"
+        aria-sort={ariaSort}
+        className={cn(
+          "h-11 px-4 text-left align-middle text-xs font-semibold uppercase tracking-wide text-muted-foreground [&:has([role=checkbox])]:pr-0",
+          className
+        )}
+        {...props}
+      >
+        <button
+          type="button"
+          onClick={onSort}
+          className="inline-flex items-center gap-1 rounded-sm text-inherit transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+        >
+          {children}
+          {sortDirection === "asc" ? (
+            <ChevronUp className="size-3.5" aria-hidden />
+          ) : sortDirection === "desc" ? (
+            <ChevronDown className="size-3.5" aria-hidden />
+          ) : (
+            <ChevronsUpDown className="size-3.5 opacity-50" aria-hidden />
+          )}
+        </button>
+      </th>
+    );
+  }
+);
 TableHead.displayName = "TableHead";
 
 const TableCell = React.forwardRef<
@@ -73,7 +145,8 @@ const TableCell = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <td
     ref={ref}
-    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    data-slot="table-cell"
+    className={cn("p-4 align-middle text-sm [&:has([role=checkbox])]:pr-0", className)}
     {...props}
   />
 ));
@@ -83,8 +156,40 @@ const TableCaption = React.forwardRef<
   HTMLTableCaptionElement,
   React.HTMLAttributes<HTMLTableCaptionElement>
 >(({ className, ...props }, ref) => (
-  <caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
+  <caption
+    ref={ref}
+    data-slot="table-caption"
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
 ));
 TableCaption.displayName = "TableCaption";
 
-export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
+const TableEmpty = ({
+  colSpan,
+  children = "No results.",
+  className,
+  ...props
+}: React.ComponentProps<"tr"> & { colSpan: number }) => (
+  <tr data-slot="table-empty" {...props}>
+    <td
+      colSpan={colSpan}
+      className={cn("h-24 text-center text-sm text-muted-foreground", className)}
+    >
+      {children}
+    </td>
+  </tr>
+);
+TableEmpty.displayName = "TableEmpty";
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+  TableEmpty,
+};