@bearmenu/ui 0.5.2 → 0.6.0

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

package/src/components/currency-input.tsx

@@ -8,60 +8,79 @@ interface CurrencyInputProps {
   value: number | null;
   onChange: (value: number | null) => void;
   placeholder?: string;
-  currency?: string; // default '$'
-  locale?: string; // default 'en-US'
+  currency?: string;
+  locale?: string;
   min?: number;
   max?: number;
   disabled?: boolean;
   className?: string;
   error?: string;
+  id?: string;
 }
 
+const ALLOWED_NAVIGATION_KEYS = new Set([
+  "Backspace",
+  "Tab",
+  "Escape",
+  "Enter",
+  "Delete",
+  "Home",
+  "End",
+  "ArrowLeft",
+  "ArrowRight",
+  "ArrowUp",
+  "ArrowDown",
+]);
+
+const ALLOWED_SHORTCUT_KEYS = new Set(["a", "c", "v", "x", "z"]);
+
 const CurrencyInput = React.forwardRef<HTMLInputElement, CurrencyInputProps>(
   (
     {
       value,
       onChange,
       placeholder = "Enter amount",
-      currency: _currency = "$",
+      currency = "$",
       locale = "en-US",
       min,
       max,
       disabled = false,
       className,
       error,
+      id: providedId,
       ...props
     },
     ref
   ) => {
+    const reactId = React.useId();
+    const id = providedId ?? reactId;
+    const errorId = `${id}-error`;
+
     const [displayValue, setDisplayValue] = React.useState("");
     const [isFocused, setIsFocused] = React.useState(false);
 
-    // Format number for display
-    const formatNumber = (num: number | null): string => {
-      if (num === null || isNaN(num)) return "";
-      return new Intl.NumberFormat(locale, {
-        minimumFractionDigits: 0,
-        maximumFractionDigits: 2,
-      }).format(num);
-    };
+    const formatNumber = React.useCallback(
+      (num: number | null): string => {
+        if (num === null || isNaN(num)) return "";
+        return new Intl.NumberFormat(locale, {
+          minimumFractionDigits: 0,
+          maximumFractionDigits: 2,
+        }).format(num);
+      },
+      [locale]
+    );
 
-    // Parse input value to number
     const parseInput = (input: string): number | null => {
-      // Remove currency symbol and non-numeric characters except decimal point
       const cleaned = input.replace(/[^\d.-]/g, "");
       const parsed = parseFloat(cleaned);
       return isNaN(parsed) ? null : parsed;
     };
 
-    // Update display value when prop value changes
     React.useEffect(() => {
       if (!isFocused) {
         setDisplayValue(formatNumber(value));
       }
-      // formatNumber is inline and recreated each render; locale is the actual dep
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [value, isFocused, locale]);
+    }, [value, isFocused, formatNumber]);
 
     const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
       const inputValue = e.target.value;
@@ -69,14 +88,9 @@ const CurrencyInput = React.forwardRef<HTMLInputElement, CurrencyInputProps>(
 
       const parsedValue = parseInput(inputValue);
 
-      // Validate min/max constraints
       if (parsedValue !== null) {
-        if (min !== undefined && parsedValue < min) {
-          return; // Don't update if below minimum
-        }
-        if (max !== undefined && parsedValue > max) {
-          return; // Don't update if above maximum
-        }
+        if (min !== undefined && parsedValue < min) return;
+        if (max !== undefined && parsedValue > max) return;
       }
 
       onChange(parsedValue);
@@ -84,7 +98,6 @@ const CurrencyInput = React.forwardRef<HTMLInputElement, CurrencyInputProps>(
 
     const handleFocus = () => {
       setIsFocused(true);
-      // Show raw number when focused for easier editing
       if (value !== null && value !== undefined && !isNaN(value)) {
         setDisplayValue(value.toString());
       }
@@ -92,7 +105,6 @@ const CurrencyInput = React.forwardRef<HTMLInputElement, CurrencyInputProps>(
 
     const handleBlur = () => {
       setIsFocused(false);
-      // Format the value when losing focus
       if (value !== null && value !== undefined && !isNaN(value)) {
         setDisplayValue(formatNumber(value));
       } else {
@@ -101,53 +113,59 @@ const CurrencyInput = React.forwardRef<HTMLInputElement, CurrencyInputProps>(
     };
 
     const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-      // Allow: backspace, delete, tab, escape, enter, home, end, left, right, up, down
-      if ([8, 9, 27, 13, 46, 35, 36, 37, 38, 39, 40].includes(e.keyCode)) {
-        return;
-      }
+      if (ALLOWED_NAVIGATION_KEYS.has(e.key)) return;
 
-      // Allow: Ctrl+A, Ctrl+C, Ctrl+V, Ctrl+X, Ctrl+Z
-      if ((e.ctrlKey || e.metaKey) && [65, 67, 86, 88, 90].includes(e.keyCode)) {
-        return;
-      }
+      if ((e.ctrlKey || e.metaKey) && ALLOWED_SHORTCUT_KEYS.has(e.key.toLowerCase())) return;
 
-      // Allow: numbers, decimal point, minus sign
-      if (
-        (e.keyCode >= 48 && e.keyCode <= 57) || // 0-9
-        (e.keyCode >= 96 && e.keyCode <= 105) || // numpad 0-9
-        e.keyCode === 190 ||
-        e.keyCode === 110 || // decimal point
-        e.keyCode === 189 ||
-        e.keyCode === 109
-      ) {
-        // minus sign
-        return;
-      }
+      if (/^[0-9]$/.test(e.key)) return;
+
+      if (e.key === "." || e.key === "-") return;
 
-      // Prevent all other keys
       e.preventDefault();
     };
 
+    const symbolLength = currency.length;
+    const inputPaddingClass =
+      symbolLength <= 1
+        ? "pl-8"
+        : symbolLength === 2
+          ? "pl-10"
+          : symbolLength === 3
+            ? "pl-12"
+            : "pl-14";
+
     return (
-      <div className="relative">
-        <Input
-          ref={ref}
-          type="text"
-          value={displayValue}
-          onChange={handleInputChange}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          onKeyDown={handleKeyDown}
-          placeholder={placeholder}
-          disabled={disabled}
-          className={cn(
-            "pl-8", // Space for currency symbol
-            error && "border-destructive focus-visible:ring-destructive",
-            className
-          )}
-          {...props}
-        />
-        {error && <p className="text-sm text-destructive mt-1 ml-1">{error}</p>}
+      <div className="w-full">
+        <div className="relative">
+          <span
+            aria-hidden
+            className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm font-medium text-muted-foreground"
+          >
+            {currency}
+          </span>
+          <Input
+            ref={ref}
+            id={id}
+            type="text"
+            inputMode="decimal"
+            value={displayValue}
+            onChange={handleInputChange}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            onKeyDown={handleKeyDown}
+            placeholder={placeholder}
+            disabled={disabled}
+            aria-invalid={error ? true : undefined}
+            aria-describedby={error ? errorId : undefined}
+            className={cn(inputPaddingClass, className)}
+            {...props}
+          />
+        </div>
+        {error && (
+          <p id={errorId} className="ml-1 mt-1 text-sm text-destructive">
+            {error}
+          </p>
+        )}
       </div>
     );
   }

package/src/components/date-input.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { DateInput } from "./date-input";
+
+const meta = {
+  title: "Components/DateInput",
+  component: DateInput,
+  tags: ["autodocs"],
+} satisfies Meta<typeof DateInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => <DateInput className="w-64" />,
+};
+
+export const Types: Story = {
+  render: () => (
+    <div className="flex w-64 flex-col gap-3">
+      <DateInput type="date" />
+      <DateInput type="datetime-local" />
+      <DateInput type="time" />
+      <DateInput type="month" />
+      <DateInput type="week" />
+    </div>
+  ),
+};
+
+export const WithoutIcon: Story = {
+  render: () => <DateInput className="w-64" showIcon={false} />,
+};

package/src/components/date-input.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import * as React from "react";
+import { Calendar as CalendarIcon } from "lucide-react";
+import { Input } from "./input";
+import { cn } from "../lib/utils";
+
+type DateInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+  /** Native input type. Defaults to "date". */
+  type?: "date" | "datetime-local" | "time" | "month" | "week";
+  size?: "sm" | "default" | "lg";
+  showIcon?: boolean;
+};
+
+const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
+  ({ className, type = "date", size = "default", showIcon = true, ...props }, ref) => (
+    <div className="relative w-full">
+      {showIcon && (
+        <CalendarIcon
+          aria-hidden
+          className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
+        />
+      )}
+      <Input
+        ref={ref}
+        type={type}
+        data-slot="date-input"
+        size={size}
+        className={cn(
+          showIcon && "pl-9",
+          // Hide the native calendar picker indicator — we render our own icon.
+          // The trigger stays on the input itself so click-anywhere still opens the picker.
+          "[&::-webkit-calendar-picker-indicator]:opacity-0 [&::-webkit-calendar-picker-indicator]:absolute [&::-webkit-calendar-picker-indicator]:inset-0 [&::-webkit-calendar-picker-indicator]:w-full [&::-webkit-calendar-picker-indicator]:h-full [&::-webkit-calendar-picker-indicator]:cursor-pointer",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+);
+DateInput.displayName = "DateInput";
+
+export { DateInput };

package/src/components/description-list.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  DescriptionList,
+  DescriptionItem,
+  DescriptionTerm,
+  DescriptionDetail,
+} from "./description-list";
+
+const meta = {
+  title: "Components/DescriptionList",
+  component: DescriptionList,
+  tags: ["autodocs"],
+} satisfies Meta<typeof DescriptionList>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const items = [
+  { term: "Name", detail: "Adrian Sterea" },
+  { term: "Role", detail: "Senior frontend engineer" },
+  { term: "Location", detail: "Bucharest, Romania" },
+  { term: "Status", detail: "Active" },
+];
+
+export const Stacked: Story = {
+  render: () => (
+    <DescriptionList className="w-80">
+      {items.map((item) => (
+        <DescriptionItem key={item.term}>
+          <DescriptionTerm>{item.term}</DescriptionTerm>
+          <DescriptionDetail>{item.detail}</DescriptionDetail>
+        </DescriptionItem>
+      ))}
+    </DescriptionList>
+  ),
+};
+
+export const Grid: Story = {
+  render: () => (
+    <DescriptionList layout="grid" className="w-96">
+      {items.map((item) => (
+        <DescriptionItem key={item.term}>
+          <DescriptionTerm>{item.term}</DescriptionTerm>
+          <DescriptionDetail>{item.detail}</DescriptionDetail>
+        </DescriptionItem>
+      ))}
+    </DescriptionList>
+  ),
+};
+
+export const Inline: Story = {
+  render: () => (
+    <DescriptionList layout="inline">
+      {items.slice(0, 3).map((item) => (
+        <DescriptionItem key={item.term}>
+          <DescriptionTerm>{item.term}</DescriptionTerm>
+          <DescriptionDetail>{item.detail}</DescriptionDetail>
+        </DescriptionItem>
+      ))}
+    </DescriptionList>
+  ),
+};

package/src/components/description-list.tsx

@@ -0,0 +1,68 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/utils";
+
+const descriptionListVariants = cva("text-sm", {
+  variants: {
+    layout: {
+      stacked: "flex flex-col gap-3 [&>[data-slot=description-item]]:flex [&>[data-slot=description-item]]:flex-col [&>[data-slot=description-item]]:gap-0.5",
+      grid: "grid grid-cols-[max-content_1fr] gap-x-6 gap-y-2 [&>[data-slot=description-item]]:contents [&_[data-slot=description-term]]:text-muted-foreground [&_[data-slot=description-detail]]:text-foreground",
+      inline: "flex flex-wrap items-center gap-x-4 gap-y-1 [&_[data-slot=description-term]]:after:content-[':'] [&_[data-slot=description-term]]:after:ml-0.5",
+    },
+  },
+  defaultVariants: {
+    layout: "stacked",
+  },
+});
+
+const DescriptionList = React.forwardRef<
+  HTMLDListElement,
+  React.HTMLAttributes<HTMLDListElement> & VariantProps<typeof descriptionListVariants>
+>(({ className, layout, ...props }, ref) => (
+  <dl
+    ref={ref}
+    data-slot="description-list"
+    className={cn(descriptionListVariants({ layout }), className)}
+    {...props}
+  />
+));
+DescriptionList.displayName = "DescriptionList";
+
+const DescriptionItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} data-slot="description-item" className={cn(className)} {...props} />
+  )
+);
+DescriptionItem.displayName = "DescriptionItem";
+
+const DescriptionTerm = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
+  ({ className, ...props }, ref) => (
+    <dt
+      ref={ref as React.Ref<HTMLElement>}
+      data-slot="description-term"
+      className={cn("text-xs font-medium uppercase tracking-wide text-muted-foreground", className)}
+      {...props}
+    />
+  )
+);
+DescriptionTerm.displayName = "DescriptionTerm";
+
+const DescriptionDetail = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
+  ({ className, ...props }, ref) => (
+    <dd
+      ref={ref as React.Ref<HTMLElement>}
+      data-slot="description-detail"
+      className={cn("text-sm text-foreground", className)}
+      {...props}
+    />
+  )
+);
+DescriptionDetail.displayName = "DescriptionDetail";
+
+export {
+  DescriptionList,
+  DescriptionItem,
+  DescriptionTerm,
+  DescriptionDetail,
+  descriptionListVariants,
+};