@bearmenu/ui 0.5.2 → 0.6.1

package/src/components/combobox.test.tsx

@@ -0,0 +1,118 @@
+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 { Combobox, type ComboboxOption } from "./combobox";
+
+const options: ComboboxOption[] = [
+  { value: "apple", label: "Apple" },
+  { value: "banana", label: "Banana" },
+  { value: "cherry", label: "Cherry", disabled: true },
+];
+
+function Wrap({
+  initial,
+  ...rest
+}: {
+  initial?: string;
+  clearable?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
+  onChange?: (v: string | undefined) => void;
+}) {
+  const [value, setValue] = React.useState<string | undefined>(initial);
+  return (
+    <Combobox
+      options={options}
+      value={value}
+      onValueChange={(v) => {
+        setValue(v);
+        rest.onChange?.(v);
+      }}
+      clearable={rest.clearable}
+      disabled={rest.disabled}
+      loading={rest.loading}
+    />
+  );
+}
+
+describe("Combobox", () => {
+  it("renders placeholder when nothing is selected", () => {
+    render(<Wrap />);
+    expect(screen.getByRole("combobox")).toHaveTextContent("Select...");
+  });
+
+  it("renders selected label when value provided", () => {
+    render(<Wrap initial="banana" />);
+    expect(screen.getByRole("combobox")).toHaveTextContent("Banana");
+  });
+
+  it("opens on trigger click and exposes aria-expanded=true", async () => {
+    const user = userEvent.setup();
+    render(<Wrap />);
+    const trigger = screen.getByRole("combobox");
+    expect(trigger.getAttribute("aria-expanded")).toBe("false");
+    await user.click(trigger);
+    expect(trigger.getAttribute("aria-expanded")).toBe("true");
+    expect(screen.getByPlaceholderText("Search...")).toBeInTheDocument();
+  });
+
+  it("selects an option and closes the popover", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Wrap onChange={onChange} />);
+    await user.click(screen.getByRole("combobox"));
+    await user.click(screen.getByText("Apple"));
+    expect(onChange).toHaveBeenCalledWith("apple");
+    expect(screen.getByRole("combobox")).toHaveTextContent("Apple");
+  });
+
+  it("clears selection when the same value is re-selected", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Wrap initial="apple" onChange={onChange} />);
+    await user.click(screen.getByRole("combobox"));
+    await user.click(screen.getByRole("option", { name: /apple/i }));
+    expect(onChange).toHaveBeenCalledWith(undefined);
+  });
+
+  it("disabled options cannot be selected via click", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Wrap onChange={onChange} />);
+    await user.click(screen.getByRole("combobox"));
+    const cherry = screen.getByText("Cherry");
+    await user.click(cherry);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("shows clear button when value is set and clearable=true", async () => {
+    render(<Wrap initial="banana" />);
+    expect(screen.getByRole("button", { name: "Clear selection" })).toBeInTheDocument();
+  });
+
+  it("clear button resets the value", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Wrap initial="banana" onChange={onChange} />);
+    await user.click(screen.getByRole("button", { name: "Clear selection" }));
+    expect(onChange).toHaveBeenCalledWith(undefined);
+  });
+
+  it("hides clear button when clearable=false", () => {
+    render(<Wrap initial="banana" clearable={false} />);
+    expect(screen.queryByRole("button", { name: "Clear selection" })).toBeNull();
+  });
+
+  it("disables trigger when disabled=true", () => {
+    render(<Wrap initial="banana" disabled />);
+    expect((screen.getByRole("combobox") as HTMLButtonElement).disabled).toBe(true);
+  });
+
+  it("shows loading state instead of empty message", async () => {
+    const user = userEvent.setup();
+    render(<Wrap loading />);
+    await user.click(screen.getByRole("combobox"));
+    expect(screen.getByText("Loading…")).toBeInTheDocument();
+  });
+});

package/src/components/combobox.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import * as React from "react";
+import { Check, ChevronsUpDown, X } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandLoading,
+} from "./command";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+
+export interface ComboboxOption {
+  value: string;
+  label: string;
+  description?: string;
+  disabled?: boolean;
+}
+
+interface ComboboxProps {
+  options: ComboboxOption[];
+  value: string | undefined;
+  onValueChange: (value: string | undefined) => void;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyText?: string;
+  loadingText?: string;
+  className?: string;
+  disabled?: boolean;
+  loading?: boolean;
+  /** Allow clearing the selection. Defaults to true. */
+  clearable?: boolean;
+  /** If set, external search drives the option list (controlled). */
+  onSearchChange?: (search: string) => void;
+}
+
+function Combobox({
+  options,
+  value,
+  onValueChange,
+  placeholder = "Select...",
+  searchPlaceholder = "Search...",
+  emptyText = "No results.",
+  loadingText = "Loading…",
+  className,
+  disabled = false,
+  loading = false,
+  clearable = true,
+  onSearchChange,
+}: ComboboxProps) {
+  const [open, setOpen] = React.useState(false);
+  const selected = options.find((o) => o.value === value);
+
+  return (
+    <div className={cn("relative", className)}>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            aria-haspopup="listbox"
+            disabled={disabled}
+            className={cn("w-full justify-between font-normal", !selected && "text-muted-foreground", value && clearable && !disabled && "pr-16")}
+          >
+            <span className="truncate">{selected?.label || placeholder}</span>
+            <ChevronsUpDown className="size-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          align="start"
+          className="w-[var(--radix-popover-trigger-width)] p-0"
+        >
+          <Command shouldFilter={!onSearchChange}>
+            <CommandInput placeholder={searchPlaceholder} onValueChange={onSearchChange} />
+            <CommandList>
+              {loading ? (
+                <CommandLoading>{loadingText}</CommandLoading>
+              ) : (
+                <CommandEmpty>{emptyText}</CommandEmpty>
+              )}
+              <CommandGroup>
+                {options.map((option) => (
+                  <CommandItem
+                    key={option.value}
+                    value={option.value}
+                    disabled={option.disabled}
+                    onSelect={() => {
+                      onValueChange(option.value === value ? undefined : option.value);
+                      setOpen(false);
+                    }}
+                  >
+                    <Check
+                      className={cn(
+                        "mr-2 size-4",
+                        value === option.value ? "opacity-100" : "opacity-0"
+                      )}
+                    />
+                    <div className="flex min-w-0 flex-col">
+                      <span className="truncate">{option.label}</span>
+                      {option.description && (
+                        <span className="truncate text-xs text-muted-foreground">
+                          {option.description}
+                        </span>
+                      )}
+                    </div>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+      {value && clearable && !disabled && (
+        <button
+          type="button"
+          aria-label="Clear selection"
+          onClick={(e) => {
+            e.stopPropagation();
+            onValueChange(undefined);
+          }}
+          className="absolute right-9 top-1/2 inline-flex size-6 -translate-y-1/2 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
+        >
+          <X className="size-3.5" />
+        </button>
+      )}
+    </div>
+  );
+}
+
+export { Combobox };

package/src/components/command.test.tsx

@@ -0,0 +1,91 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+} from "./command";
+
+function CommandSample({ onSelect }: { onSelect?: (v: string) => void }) {
+  return (
+    <Command>
+      <CommandInput placeholder="Search…" />
+      <CommandList>
+        <CommandEmpty>No results.</CommandEmpty>
+        <CommandGroup heading="Fruit">
+          <CommandItem value="apple" onSelect={() => onSelect?.("apple")}>
+            Apple
+          </CommandItem>
+          <CommandItem value="banana" onSelect={() => onSelect?.("banana")}>
+            Banana
+          </CommandItem>
+          <CommandItem value="cherry" onSelect={() => onSelect?.("cherry")}>
+            Cherry
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  );
+}
+
+describe("Command", () => {
+  it("renders input with combobox role and options", () => {
+    render(<CommandSample />);
+    expect(screen.getByRole("combobox")).toBeInTheDocument();
+    expect(screen.getAllByRole("option")).toHaveLength(3);
+  });
+
+  it("filters items based on input typing", async () => {
+    const user = userEvent.setup();
+    render(<CommandSample />);
+    const input = screen.getByPlaceholderText("Search…");
+    await user.type(input, "ban");
+    const visible = screen
+      .getAllByRole("option")
+      .filter((el) => el.getAttribute("aria-disabled") !== "true" && el.getAttribute("data-hidden") !== "true");
+    expect(visible.map((el) => el.textContent)).toEqual(["Banana"]);
+  });
+
+  it("shows empty state when no items match", async () => {
+    const user = userEvent.setup();
+    render(<CommandSample />);
+    await user.type(screen.getByPlaceholderText("Search…"), "xyz");
+    expect(screen.getByText("No results.")).toBeInTheDocument();
+  });
+
+  it("supports ArrowDown / ArrowUp navigation via aria-selected", async () => {
+    const user = userEvent.setup();
+    render(<CommandSample />);
+    const input = screen.getByRole("combobox");
+    input.focus();
+    // First item is selected by default
+    const options = screen.getAllByRole("option");
+    expect(options[0].getAttribute("aria-selected")).toBe("true");
+    await user.keyboard("{ArrowDown}");
+    expect(screen.getAllByRole("option")[1].getAttribute("aria-selected")).toBe("true");
+    await user.keyboard("{ArrowUp}");
+    expect(screen.getAllByRole("option")[0].getAttribute("aria-selected")).toBe("true");
+  });
+
+  it("calls onSelect when item is clicked", async () => {
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+    render(<CommandSample onSelect={onSelect} />);
+    await user.click(screen.getByText("Banana"));
+    expect(onSelect).toHaveBeenCalledWith("banana");
+  });
+
+  it("calls onSelect when Enter is pressed on highlighted item", async () => {
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+    render(<CommandSample onSelect={onSelect} />);
+    const input = screen.getByRole("combobox");
+    input.focus();
+    await user.keyboard("{ArrowDown}{Enter}");
+    expect(onSelect).toHaveBeenCalledWith("banana");
+  });
+});

package/src/components/command.tsx

@@ -5,7 +5,7 @@ import type { DialogProps } from "@radix-ui/react-dialog";
 import { Command as CommandPrimitive } from "cmdk";
 import { Search } from "lucide-react";
 import { cn } from "../lib/utils";
-import { Dialog, DialogContent } from "./dialog";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "./dialog";
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,
@@ -13,8 +13,9 @@ const Command = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive
     ref={ref}
+    data-slot="command"
     className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-xl glass border border-border/50",
+      "flex h-full w-full flex-col overflow-hidden rounded-xl bg-popover text-popover-foreground",
       className
     )}
     {...props}
@@ -22,12 +23,24 @@ const Command = React.forwardRef<
 ));
 Command.displayName = CommandPrimitive.displayName;
 
-type CommandDialogProps = DialogProps;
+type CommandDialogProps = DialogProps & {
+  title?: string;
+  description?: string;
+};
 
-const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+const CommandDialog = ({
+  title = "Command palette",
+  description = "Search for commands and actions",
+  children,
+  ...props
+}: CommandDialogProps) => {
   return (
     <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0 shadow-2xl">
+      <DialogContent className="overflow-hidden p-0">
+        <DialogHeader className="sr-only">
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
         <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>
@@ -40,19 +53,18 @@ const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b border-border/50 px-3" cmdk-input-wrapper="">
-    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+  <div className="flex items-center border-b border-border px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 size-4 shrink-0 opacity-50" />
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-base outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         className
       )}
       {...props}
     />
   </div>
 ));
-
 CommandInput.displayName = CommandPrimitive.Input.displayName;
 
 const CommandList = React.forwardRef<
@@ -65,7 +77,6 @@ const CommandList = React.forwardRef<
     {...props}
   />
 ));
-
 CommandList.displayName = CommandPrimitive.List.displayName;
 
 const CommandEmpty = React.forwardRef<
@@ -74,13 +85,24 @@ const CommandEmpty = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.Empty
     ref={ref}
-    className={cn("py-6 text-center text-sm", className)}
+    className={cn("py-6 text-center text-sm text-muted-foreground", className)}
     {...props}
   />
 ));
-
 CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
 
+const CommandLoading = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Loading>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Loading>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Loading
+    ref={ref}
+    className={cn("py-6 text-center text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+CommandLoading.displayName = "CommandLoading";
+
 const CommandGroup = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Group>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
@@ -94,7 +116,6 @@ const CommandGroup = React.forwardRef<
     {...props}
   />
 ));
-
 CommandGroup.displayName = CommandPrimitive.Group.displayName;
 
 const CommandSeparator = React.forwardRef<
@@ -116,13 +137,14 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-lg px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 transition-all duration-200 hover:bg-accent/50",
+      "relative flex cursor-default select-none items-center rounded-lg px-2 py-1.5 text-sm outline-none transition-colors",
+      "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground",
+      "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
       className
     )}
     {...props}
   />
 ));
-
 CommandItem.displayName = CommandPrimitive.Item.displayName;
 
 const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
@@ -141,6 +163,7 @@ export {
   CommandInput,
   CommandList,
   CommandEmpty,
+  CommandLoading,
   CommandGroup,
   CommandItem,
   CommandShortcut,

package/src/components/currency-input.test.tsx

@@ -0,0 +1,63 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { CurrencyInput } from "./currency-input";
+
+describe("CurrencyInput", () => {
+  it("renders with the default `$` symbol", () => {
+    render(<CurrencyInput value={null} onChange={() => {}} />);
+    expect(screen.getByText("$")).toBeDefined();
+  });
+
+  it("renders a custom currency symbol", () => {
+    render(<CurrencyInput value={null} onChange={() => {}} currency="RON" />);
+    expect(screen.getByText("RON")).toBeDefined();
+  });
+
+  it("widens left padding for multi-char currency symbols", () => {
+    render(<CurrencyInput value={null} onChange={() => {}} currency="RON" />);
+    expect(screen.getByRole("textbox").className).toContain("pl-12");
+  });
+
+  it("formats the blurred value with locale separators", () => {
+    render(<CurrencyInput value={1234.5} onChange={() => {}} />);
+    expect(screen.getByRole("textbox")).toHaveValue("1,234.5");
+  });
+
+  it("fires onChange with a parsed number when typing", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<CurrencyInput value={null} onChange={onChange} />);
+    const input = screen.getByRole("textbox");
+    await user.type(input, "42");
+    expect(onChange).toHaveBeenLastCalledWith(42);
+  });
+
+  it("renders an error message and links it via aria-describedby", () => {
+    render(
+      <CurrencyInput value={null} onChange={() => {}} error="Required" id="amt" />
+    );
+    const input = screen.getByRole("textbox");
+    expect(input).toHaveAttribute("aria-invalid", "true");
+    expect(input).toHaveAttribute("aria-describedby", "amt-error");
+    expect(screen.getByText("Required").id).toBe("amt-error");
+  });
+
+  it("does not set aria-invalid when no error", () => {
+    render(<CurrencyInput value={null} onChange={() => {}} />);
+    expect(screen.getByRole("textbox")).not.toHaveAttribute("aria-invalid");
+  });
+
+  it("blocks non-numeric character entry", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<CurrencyInput value={null} onChange={onChange} />);
+    await user.type(screen.getByRole("textbox"), "abc");
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("respects disabled", () => {
+    render(<CurrencyInput value={null} onChange={() => {}} disabled />);
+    expect(screen.getByRole("textbox")).toBeDisabled();
+  });
+});