@bearmenu/ui 0.5.2 → 0.6.1

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

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

@@ -1,10 +1,11 @@
 "use client";
 
 import * as React from "react";
-import { Check, ChevronsUpDown, X } from "lucide-react";
+import { ChevronsUpDown, X } from "lucide-react";
 import { cn } from "../lib/utils";
 import { Button } from "./button";
 import { Badge } from "./badge";
+import { Checkbox } from "./checkbox";
 import {
   Command,
   CommandEmpty,
@@ -50,6 +51,7 @@ export function MultiSelectCombobox({
   shouldFilter = true,
 }: MultiSelectComboboxProps) {
   const [open, setOpen] = React.useState(false);
+  const listboxId = React.useId();
 
   const handleSelect = (value: string) => {
     const newSelected = selected.includes(value)
@@ -58,91 +60,92 @@ export function MultiSelectCombobox({
     onSelectionChange(newSelected);
   };
 
-  const handleRemove = (value: string, e: React.MouseEvent | React.KeyboardEvent) => {
-    e.stopPropagation();
-    onSelectionChange(selected.filter((item) => item !== value));
-  };
-
-  const selectedLabels = selected
-    .map((value) => options.find((opt) => opt.value === value)?.label || value)
-    .slice(0, maxDisplay);
-
-  const remainingCount = selected.length - maxDisplay;
+  const visible = selected.slice(0, maxDisplay);
+  const remaining = selected.length - maxDisplay;
 
   return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          role="combobox"
-          aria-expanded={open}
-          className={cn(
-            "w-full justify-between h-auto min-h-10 py-2",
-            selected.length === 0 && "text-muted-foreground",
-            className
-          )}
-          disabled={disabled}
+    <div className={cn("flex flex-col gap-2", className)}>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            aria-haspopup="listbox"
+            aria-controls={open ? listboxId : undefined}
+            className={cn(
+              "w-full justify-between font-normal",
+              selected.length === 0 && "text-muted-foreground"
+            )}
+            disabled={disabled}
+          >
+            <span className="truncate">
+              {selected.length === 0
+                ? placeholder
+                : `${selected.length} selected`}
+            </span>
+            <ChevronsUpDown className="size-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          id={listboxId}
+          className="w-[var(--radix-popover-trigger-width)] p-0"
+          align="start"
         >
-          <div className="flex flex-wrap gap-1 flex-1 text-left">
-            {selected.length === 0 ? (
-              <span>{placeholder}</span>
-            ) : (
-              <>
-                {selectedLabels.map((label, i) => (
-                  <Badge key={selected[i]} variant="secondary" className="text-xs">
-                    {label}
-                    <div
-                      role="button"
-                      tabIndex={0}
-                      className="ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
-                      onClick={(e) => handleRemove(selected[i], e)}
-                      onKeyDown={(e) => {
-                        if (e.key === "Enter" || e.key === " ") {
-                          e.preventDefault();
-                          handleRemove(selected[i], e);
-                        }
-                      }}
+          <Command shouldFilter={shouldFilter}>
+            <CommandInput placeholder={searchPlaceholder} onValueChange={onSearchChange} />
+            <CommandList>
+              <CommandEmpty>{loading ? "Loading…" : emptyText}</CommandEmpty>
+              <CommandGroup>
+                {options.map((option) => {
+                  const isSelected = selected.includes(option.value);
+                  return (
+                    <CommandItem
+                      key={option.value}
+                      value={option.value}
+                      onSelect={() => handleSelect(option.value)}
+                      className="gap-2"
                     >
-                      <X className="h-3 w-3" />
-                    </div>
-                  </Badge>
-                ))}
-                {remainingCount > 0 && (
-                  <Badge variant="secondary" className="text-xs">
-                    +{remainingCount} more
-                  </Badge>
-                )}
-              </>
-            )}
-          </div>
-          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-full p-0" align="start">
-        <Command shouldFilter={shouldFilter}>
-          <CommandInput placeholder={searchPlaceholder} onValueChange={onSearchChange} />
-          <CommandList>
-            <CommandEmpty>{loading ? "Loading..." : emptyText}</CommandEmpty>
-            <CommandGroup>
-              {options.map((option) => (
-                <CommandItem
-                  key={option.value}
-                  value={option.value}
-                  onSelect={() => handleSelect(option.value)}
+                      <Checkbox
+                        checked={isSelected}
+                        tabIndex={-1}
+                        aria-hidden
+                        className="pointer-events-none"
+                      />
+                      {option.label}
+                    </CommandItem>
+                  );
+                })}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+      {selected.length > 0 && (
+        <div className="flex flex-wrap gap-1">
+          {visible.map((value) => {
+            const label = options.find((opt) => opt.value === value)?.label || value;
+            return (
+              <Badge key={value} variant="secondary" className="gap-1 pr-1">
+                {label}
+                <button
+                  type="button"
+                  aria-label={`Remove ${label}`}
+                  onClick={() =>
+                    onSelectionChange(selected.filter((item) => item !== value))
+                  }
+                  className="rounded-full p-0.5 hover:bg-foreground/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring transition-colors"
                 >
-                  <Check
-                    className={cn(
-                      "mr-2 h-4 w-4",
-                      selected.includes(option.value) ? "opacity-100" : "opacity-0"
-                    )}
-                  />
-                  {option.label}
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
+                  <X className="size-3" />
+                </button>
+              </Badge>
+            );
+          })}
+          {remaining > 0 && (
+            <Badge variant="secondary">+{remaining} more</Badge>
+          )}
+        </div>
+      )}
+    </div>
   );
 }

package/src/components/multi-select-menu.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { cn } from "../lib/utils";
 import { Checkbox } from "./checkbox";
-import { Popover, PopoverContent, PopoverTrigger } from "./popover";
 
 export interface MultiSelectMenuOption {
   value: string;
@@ -15,14 +15,10 @@ export interface MultiSelectMenuProps {
   options: MultiSelectMenuOption[];
   selected: string[];
   onSelectedChange: (values: string[]) => void;
-  /** Trigger element rendered via Radix `asChild` — typically a Button. */
   trigger: React.ReactNode;
-  /** Optional heading rendered above the option list. */
   label?: string;
   align?: "start" | "center" | "end";
-  /** Pixel width of the popover content. Defaults to 220. */
   width?: number;
-  /** className for the popover content. */
   contentClassName?: string;
   emptyText?: string;
 }
@@ -51,46 +47,58 @@ export function MultiSelectMenu({
   }
 
   return (
-    <Popover>
-      <PopoverTrigger asChild>{trigger}</PopoverTrigger>
-      <PopoverContent
-        align={align}
-        className={cn("p-2", contentClassName)}
-        style={{ width }}
-      >
-        {label && (
-          <div className="text-foreground px-2 py-1.5 text-sm font-semibold">
-            {label}
-          </div>
-        )}
-        <div role="group" aria-label={label} className="flex flex-col gap-0.5">
+    <DropdownMenuPrimitive.Root>
+      <DropdownMenuPrimitive.Trigger asChild>{trigger}</DropdownMenuPrimitive.Trigger>
+      <DropdownMenuPrimitive.Portal>
+        <DropdownMenuPrimitive.Content
+          align={align}
+          sideOffset={4}
+          style={{ width }}
+          className={cn(
+            "z-50 overflow-hidden rounded-xl border border-border bg-popover p-2 text-popover-foreground shadow-xl",
+            "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",
+            contentClassName
+          )}
+        >
+          {label && (
+            <DropdownMenuPrimitive.Label className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
+              {label}
+            </DropdownMenuPrimitive.Label>
+          )}
           {options.length === 0 ? (
-            <p className="text-muted-foreground px-2 py-1.5 text-sm">{emptyText}</p>
+            <p className="px-2 py-1.5 text-sm text-muted-foreground">{emptyText}</p>
           ) : (
-            options.map((option) => {
-              const checked = selectedSet.has(option.value);
-              return (
-                <label
-                  key={option.value}
-                  className={cn(
-                    "flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm select-none",
-                    "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-                    option.disabled && "pointer-events-none opacity-50",
-                  )}
-                >
-                  <Checkbox
+            <DropdownMenuPrimitive.Group className="flex flex-col gap-0.5">
+              {options.map((option) => {
+                const checked = selectedSet.has(option.value);
+                return (
+                  <DropdownMenuPrimitive.CheckboxItem
+                    key={option.value}
                     checked={checked}
+                    disabled={option.disabled ?? false}
+                    onSelect={(e) => e.preventDefault()}
                     onCheckedChange={() => handleToggle(option.value)}
-                    disabled={option.disabled}
-                    aria-label={typeof option.label === "string" ? option.label : option.value}
-                  />
-                  <span className="flex-1">{option.label}</span>
-                </label>
-              );
-            })
+                    className={cn(
+                      "relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none",
+                      "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+                      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+                    )}
+                  >
+                    <Checkbox
+                      checked={checked}
+                      tabIndex={-1}
+                      aria-hidden
+                      className="pointer-events-none"
+                    />
+                    <span className="flex-1">{option.label}</span>
+                  </DropdownMenuPrimitive.CheckboxItem>
+                );
+              })}
+            </DropdownMenuPrimitive.Group>
           )}
-        </div>
-      </PopoverContent>
-    </Popover>
+        </DropdownMenuPrimitive.Content>
+      </DropdownMenuPrimitive.Portal>
+    </DropdownMenuPrimitive.Root>
   );
 }