@bearmenu/ui 0.5.1 → 0.6.0

package/src/components/input.test.tsx

@@ -0,0 +1,103 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Input, inputVariants } from "./input";
+
+// ─── inputVariants CVA ────────────────────────────────────────────────────────
+
+describe("inputVariants", () => {
+  it("returns default size classes when called with no args", () => {
+    const result = inputVariants({});
+    expect(result).toContain("h-11");
+  });
+
+  it("maps size prop to correct classes", () => {
+    expect(inputVariants({ size: "sm" })).toContain("h-9");
+    expect(inputVariants({ size: "default" })).toContain("h-11");
+    expect(inputVariants({ size: "lg" })).toContain("h-12");
+  });
+
+  it("includes aria-invalid styles in base classes", () => {
+    const result = inputVariants({});
+    expect(result).toContain("aria-invalid:border-destructive");
+  });
+});
+
+// ─── <Input> component ────────────────────────────────────────────────────────
+
+describe("Input component", () => {
+  it("renders as <input> by default", () => {
+    render(<Input placeholder="enter" />);
+    const el = screen.getByPlaceholderText("enter");
+    expect(el.tagName).toBe("INPUT");
+  });
+
+  it("applies data-slot=input attribute", () => {
+    render(<Input data-testid="i" />);
+    expect(screen.getByTestId("i").getAttribute("data-slot")).toBe("input");
+  });
+
+  it("forwards ref to the underlying input element", () => {
+    const ref = { current: null as HTMLInputElement | null };
+    render(<Input ref={ref} />);
+    expect(ref.current).toBeInstanceOf(HTMLInputElement);
+  });
+
+  it("respects type prop", () => {
+    render(<Input type="email" data-testid="i" />);
+    expect((screen.getByTestId("i") as HTMLInputElement).type).toBe("email");
+  });
+
+  it("accepts user input", async () => {
+    const user = userEvent.setup();
+    render(<Input data-testid="i" />);
+    const el = screen.getByTestId("i") as HTMLInputElement;
+    await user.type(el, "hello");
+    expect(el.value).toBe("hello");
+  });
+
+  it("calls onChange handler", async () => {
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    render(<Input data-testid="i" onChange={onChange} />);
+    await user.type(screen.getByTestId("i"), "a");
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it("respects disabled prop", async () => {
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    render(<Input data-testid="i" disabled onChange={onChange} />);
+    const el = screen.getByTestId("i") as HTMLInputElement;
+    expect(el.disabled).toBe(true);
+    await user.type(el, "x");
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("wires aria-invalid for invalid state", () => {
+    render(<Input data-testid="i" aria-invalid="true" />);
+    expect(screen.getByTestId("i").getAttribute("aria-invalid")).toBe("true");
+  });
+
+  it("respects controlled value", () => {
+    render(<Input data-testid="i" value="hello" onChange={() => {}} />);
+    expect((screen.getByTestId("i") as HTMLInputElement).value).toBe("hello");
+  });
+
+  it("applies size class from size prop", () => {
+    render(<Input data-testid="i" size="sm" />);
+    expect(screen.getByTestId("i").className).toContain("h-9");
+  });
+
+  it("merges className via twMerge", () => {
+    render(<Input data-testid="i" className="text-red-500" />);
+    expect(screen.getByTestId("i").className).toContain("text-red-500");
+  });
+
+  it("passes through name and id", () => {
+    render(<Input id="email" name="email" data-testid="i" />);
+    const el = screen.getByTestId("i");
+    expect(el.id).toBe("email");
+    expect(el.getAttribute("name")).toBe("email");
+  });
+});

package/src/components/input.tsx

@@ -1,17 +1,34 @@
 import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../lib/utils";
 
-export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+const inputVariants = cva(
+  "flex w-full rounded-xl border border-border bg-input/50 text-base transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:bg-input disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/40",
+  {
+    variants: {
+      size: {
+        sm: "h-9 px-3 text-base md:text-sm",
+        default: "h-11 px-4 py-2",
+        lg: "h-12 px-5 text-base",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+);
+
+export interface InputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">,
+    VariantProps<typeof inputVariants> {}
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
+  ({ className, type, size, ...props }, ref) => {
     return (
       <input
         type={type}
-        className={cn(
-          "flex h-11 w-full rounded-xl border border-border bg-input/50 backdrop-blur-md px-4 py-2 text-base transition-all duration-300 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:bg-input focus-visible:border-accent-foreground/30 focus-visible:shadow-lg focus-visible:shadow-accent/10 disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        )}
+        data-slot="input"
+        className={cn(inputVariants({ size }), className)}
         ref={ref}
         {...props}
       />
@@ -20,4 +37,4 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 );
 Input.displayName = "Input";
 
-export { Input };
+export { Input, inputVariants };

package/src/components/item.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Mail, ChevronRight } from "lucide-react";
+import { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle } from "./item";
+import { Avatar, AvatarFallback } from "./avatar";
+
+const meta = {
+  title: "Components/Item",
+  component: Item,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Item>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Item interactive className="w-80">
+      <ItemMedia>
+        <Mail className="size-5" />
+      </ItemMedia>
+      <ItemContent>
+        <ItemTitle>Inbox</ItemTitle>
+        <ItemDescription>3 new messages</ItemDescription>
+      </ItemContent>
+      <ItemActions>
+        <ChevronRight className="size-4 text-muted-foreground" />
+      </ItemActions>
+    </Item>
+  ),
+};
+
+export const Variants: Story = {
+  render: () => (
+    <div className="flex w-80 flex-col gap-2">
+      <Item variant="default" interactive>
+        <ItemMedia>
+          <Avatar size="sm"><AvatarFallback>AS</AvatarFallback></Avatar>
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Alice Smith</ItemTitle>
+          <ItemDescription>Online</ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item variant="muted">
+        <ItemContent><ItemTitle>Muted background</ItemTitle></ItemContent>
+      </Item>
+      <Item variant="outline">
+        <ItemContent><ItemTitle>Outline border</ItemTitle></ItemContent>
+      </Item>
+    </div>
+  ),
+};

package/src/components/item.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/utils";
+
+const itemVariants = cva(
+  "flex w-full items-center gap-3 rounded-xl 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",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        muted: "bg-muted",
+        outline: "border border-border bg-transparent",
+      },
+      size: {
+        sm: "px-3 py-2",
+        default: "px-4 py-3",
+        lg: "px-5 py-4",
+      },
+      interactive: {
+        true: "cursor-pointer hover:bg-accent hover:text-accent-foreground active:scale-[0.99]",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      interactive: false,
+    },
+  }
+);
+
+type ItemProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof itemVariants> & {
+    asChild?: boolean;
+  };
+
+const Item = React.forwardRef<HTMLDivElement, ItemProps>(
+  ({ className, variant, size, interactive, asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : "div";
+    return (
+      <Comp
+        ref={ref}
+        data-slot="item"
+        className={cn(itemVariants({ variant, size, interactive }), className)}
+        {...props}
+      />
+    );
+  }
+);
+Item.displayName = "Item";
+
+const ItemMedia = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="item-media"
+      className={cn("inline-flex shrink-0 items-center justify-center text-muted-foreground", className)}
+      {...props}
+    />
+  )
+);
+ItemMedia.displayName = "ItemMedia";
+
+const ItemContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="item-content"
+      className={cn("flex min-w-0 flex-1 flex-col gap-0.5", className)}
+      {...props}
+    />
+  )
+);
+ItemContent.displayName = "ItemContent";
+
+const ItemTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="item-title"
+      className={cn("truncate text-sm font-medium text-foreground", className)}
+      {...props}
+    />
+  )
+);
+ItemTitle.displayName = "ItemTitle";
+
+const ItemDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="item-description"
+      className={cn("truncate text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+);
+ItemDescription.displayName = "ItemDescription";
+
+const ItemActions = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="item-actions"
+      className={cn("ml-auto inline-flex shrink-0 items-center gap-1", className)}
+      {...props}
+    />
+  )
+);
+ItemActions.displayName = "ItemActions";
+
+export { Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, itemVariants };

package/src/components/kbd.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Kbd, KbdGroup } from "./kbd";
+
+const meta = {
+  title: "Components/Kbd",
+  component: Kbd,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Kbd>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: { children: "⌘" } };
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-2">
+      <Kbd size="sm">⌘</Kbd>
+      <Kbd size="default">⌘</Kbd>
+      <Kbd size="lg">⌘</Kbd>
+    </div>
+  ),
+};
+
+export const Combination: Story = {
+  render: () => (
+    <KbdGroup>
+      <Kbd>⌘</Kbd>
+      <span className="text-muted-foreground">+</span>
+      <Kbd>K</Kbd>
+    </KbdGroup>
+  ),
+};

package/src/components/kbd.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/utils";
+
+const kbdVariants = cva(
+  "inline-flex select-none items-center justify-center gap-1 rounded-md border border-border bg-muted font-mono font-medium text-muted-foreground shadow-[0_1px_0_0_var(--border)]",
+  {
+    variants: {
+      size: {
+        sm: "h-5 min-w-5 px-1 text-[10px]",
+        default: "h-6 min-w-6 px-1.5 text-xs",
+        lg: "h-7 min-w-7 px-2 text-sm",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+);
+
+const Kbd = React.forwardRef<
+  HTMLElement,
+  React.HTMLAttributes<HTMLElement> & VariantProps<typeof kbdVariants>
+>(({ className, size, ...props }, ref) => (
+  <kbd
+    ref={ref}
+    data-slot="kbd"
+    className={cn(kbdVariants({ size }), className)}
+    {...props}
+  />
+));
+Kbd.displayName = "Kbd";
+
+const KbdGroup = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(
+  ({ className, ...props }, ref) => (
+    <span
+      ref={ref}
+      data-slot="kbd-group"
+      className={cn("inline-flex items-center gap-1", className)}
+      {...props}
+    />
+  )
+);
+KbdGroup.displayName = "KbdGroup";
+
+export { Kbd, KbdGroup, kbdVariants };

package/src/components/lazy-markdown.tsx

@@ -1,20 +1,23 @@
 "use client";
 
-import dynamic from "next/dynamic";
+import * as React from "react";
 import type { Components } from "react-markdown";
 
-// Dynamically imported to keep react-markdown + remark-gfm out of the initial bundle.
-const MarkdownRendererDynamic = dynamic(
-  () => import("./markdown-renderer").then((m) => m.MarkdownRenderer),
-  { ssr: false }
+const MarkdownRendererLazy = React.lazy(() =>
+  import("./markdown-renderer").then((m) => ({ default: m.MarkdownRenderer }))
 );
 
 type LazyMarkdownProps = {
   content: string;
   className?: string;
   components?: Components;
+  fallback?: React.ReactNode;
 };
 
-export function LazyMarkdown(props: LazyMarkdownProps) {
-  return <MarkdownRendererDynamic {...props} />;
+export function LazyMarkdown({ fallback = null, ...props }: LazyMarkdownProps) {
+  return (
+    <React.Suspense fallback={fallback}>
+      <MarkdownRendererLazy {...props} />
+    </React.Suspense>
+  );
 }

package/src/components/multi-select-combobox.test.tsx

@@ -0,0 +1,101 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import * as React from "react";
+import { MultiSelectCombobox, type MultiSelectOption } from "./multi-select-combobox";
+
+const options: MultiSelectOption[] = [
+  { value: "apple", label: "Apple" },
+  { value: "banana", label: "Banana" },
+  { value: "cherry", label: "Cherry" },
+  { value: "date", label: "Date" },
+];
+
+function Wrap({
+  initial = [],
+  maxDisplay,
+  onChange,
+}: {
+  initial?: string[];
+  maxDisplay?: number;
+  onChange?: (v: string[]) => void;
+}) {
+  const [selected, setSelected] = React.useState<string[]>(initial);
+  return (
+    <MultiSelectCombobox
+      options={options}
+      selected={selected}
+      maxDisplay={maxDisplay}
+      onSelectionChange={(v) => {
+        setSelected(v);
+        onChange?.(v);
+      }}
+    />
+  );
+}
+
+describe("MultiSelectCombobox", () => {
+  it("renders placeholder when nothing is selected", () => {
+    render(<Wrap />);
+    expect(screen.getByRole("combobox")).toHaveTextContent("Select items...");
+  });
+
+  it("renders count when items are selected", () => {
+    render(<Wrap initial={["apple", "banana"]} />);
+    expect(screen.getByRole("combobox")).toHaveTextContent("2 selected");
+  });
+
+  it("opens on trigger click and exposes aria-expanded=true", async () => {
+    const user = userEvent.setup();
+    render(<Wrap />);
+    const trigger = screen.getByRole("combobox");
+    await user.click(trigger);
+    expect(trigger.getAttribute("aria-expanded")).toBe("true");
+    expect(screen.getByPlaceholderText("Search...")).toBeInTheDocument();
+  });
+
+  it("adds a value when an option is selected", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Wrap onChange={onChange} />);
+    await user.click(screen.getByRole("combobox"));
+    await user.click(screen.getByRole("option", { name: /apple/i }));
+    expect(onChange).toHaveBeenCalledWith(["apple"]);
+  });
+
+  it("removes a value when an already-selected option is clicked", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Wrap initial={["apple", "banana"]} onChange={onChange} />);
+    await user.click(screen.getByRole("combobox"));
+    await user.click(screen.getByRole("option", { name: /banana/i }));
+    expect(onChange).toHaveBeenCalledWith(["apple"]);
+  });
+
+  it("renders one removal button per visible selection", () => {
+    render(<Wrap initial={["apple", "banana"]} />);
+    expect(screen.getByRole("button", { name: "Remove Apple" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Remove Banana" })).toBeInTheDocument();
+  });
+
+  it("removes a value when its badge X is clicked", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Wrap initial={["apple", "banana"]} onChange={onChange} />);
+    await user.click(screen.getByRole("button", { name: "Remove Apple" }));
+    expect(onChange).toHaveBeenCalledWith(["banana"]);
+  });
+
+  it("respects maxDisplay and shows a +N more badge", () => {
+    render(<Wrap initial={["apple", "banana", "cherry", "date"]} maxDisplay={2} />);
+    expect(screen.getByRole("button", { name: "Remove Apple" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Remove Banana" })).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Remove Cherry" })).toBeNull();
+    expect(screen.getByText("+2 more")).toBeInTheDocument();
+  });
+
+  it("does not render the +N more badge when all fit", () => {
+    render(<Wrap initial={["apple"]} maxDisplay={3} />);
+    expect(screen.queryByText(/\+\d+ more/)).toBeNull();
+  });
+});