@bearmenu/ui 0.5.2 → 0.6.1

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,
+};

package/src/components/dialog.test.tsx

@@ -0,0 +1,84 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogClose,
+} from "./dialog";
+
+function TestDialog({ defaultOpen, showCloseButton }: { defaultOpen?: boolean; showCloseButton?: boolean }) {
+  return (
+    <Dialog defaultOpen={defaultOpen}>
+      <DialogTrigger>Open</DialogTrigger>
+      <DialogContent showCloseButton={showCloseButton}>
+        <DialogHeader>
+          <DialogTitle>Title</DialogTitle>
+          <DialogDescription>Description</DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <DialogClose data-testid="footer-close">Dismiss</DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+describe("Dialog", () => {
+  it("is closed by default", () => {
+    render(<TestDialog />);
+    expect(screen.queryByRole("dialog")).toBeNull();
+  });
+
+  it("opens on trigger click", async () => {
+    const user = userEvent.setup();
+    render(<TestDialog />);
+    await user.click(screen.getByText("Open"));
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+  });
+
+  it("renders title and description with aria links", () => {
+    render(<TestDialog defaultOpen />);
+    const dialog = screen.getByRole("dialog");
+    const title = screen.getByText("Title");
+    const desc = screen.getByText("Description");
+    expect(dialog.getAttribute("aria-labelledby")).toBe(title.id);
+    expect(dialog.getAttribute("aria-describedby")).toBe(desc.id);
+  });
+
+  it("renders close button by default", () => {
+    render(<TestDialog defaultOpen />);
+    expect(screen.getByRole("button", { name: /close/i })).toBeInTheDocument();
+  });
+
+  it("hides X close button when showCloseButton=false", () => {
+    render(<TestDialog defaultOpen showCloseButton={false} />);
+    expect(screen.queryByRole("button", { name: /close/i })).toBeNull();
+    expect(screen.getByTestId("footer-close")).toBeInTheDocument();
+  });
+
+  it("closes on Escape key", async () => {
+    const user = userEvent.setup();
+    render(<TestDialog defaultOpen />);
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+    await user.keyboard("{Escape}");
+    expect(screen.queryByRole("dialog")).toBeNull();
+  });
+
+  it("closes when DialogClose is clicked", async () => {
+    const user = userEvent.setup();
+    render(<TestDialog defaultOpen />);
+    await user.click(screen.getByTestId("footer-close"));
+    expect(screen.queryByRole("dialog")).toBeNull();
+  });
+
+  it("applies data-slot attributes for styling hooks", () => {
+    render(<TestDialog defaultOpen />);
+    expect(screen.getByRole("dialog").getAttribute("data-slot")).toBe("dialog-content");
+  });
+});

package/src/components/dialog.tsx

@@ -2,15 +2,13 @@
 
 import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { cva, type VariantProps } from "class-variance-authority";
 import { X } from "lucide-react";
 import { cn } from "../lib/utils";
 
 const Dialog = DialogPrimitive.Root;
-
 const DialogTrigger = DialogPrimitive.Trigger;
-
 const DialogPortal = DialogPrimitive.Portal;
-
 const DialogClose = DialogPrimitive.Close;
 
 const DialogOverlay = React.forwardRef<
@@ -19,6 +17,7 @@ const DialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Overlay
     ref={ref}
+    data-slot="dialog-overlay"
     className={cn(
       "fixed inset-0 z-[1000] bg-black/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
@@ -28,37 +27,75 @@ const DialogOverlay = React.forwardRef<
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
+const dialogContentVariants = cva(
+  "fixed left-[50%] top-[50%] z-[1000] grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 bg-card p-6 shadow-2xl duration-200 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 rounded-2xl border border-border",
+  {
+    variants: {
+      size: {
+        sm: "max-w-sm",
+        default: "max-w-lg",
+        lg: "max-w-2xl",
+        xl: "max-w-4xl",
+        full: "max-w-[95vw] max-h-[95vh]",
+      },
+      scrollBehavior: {
+        inside: "max-h-[85vh] overflow-hidden",
+        outside: "",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+      scrollBehavior: "outside",
+    },
+  }
+);
+
+type DialogContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> &
+  VariantProps<typeof dialogContentVariants> & {
+    showCloseButton?: boolean;
+  };
+
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-[1000] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 bg-card p-6 shadow-2xl duration-300 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 rounded-2xl border border-border",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-lg opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground hover:bg-muted p-2">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-));
+  DialogContentProps
+>(
+  (
+    { className, children, size, scrollBehavior, showCloseButton = true, ...props },
+    ref
+  ) => (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        ref={ref}
+        data-slot="dialog-content"
+        className={cn(dialogContentVariants({ size, scrollBehavior }), className)}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close className="absolute right-4 top-4 inline-flex size-8 items-center justify-center rounded-lg text-muted-foreground opacity-70 transition-opacity hover:bg-accent hover:text-accent-foreground hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent">
+            <X className="size-4" />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+);
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
+  <div
+    data-slot="dialog-header"
+    className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)}
+    {...props}
+  />
 );
 DialogHeader.displayName = "DialogHeader";
 
 const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
+    data-slot="dialog-footer"
     className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
     {...props}
   />
@@ -71,6 +108,7 @@ const DialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
+    data-slot="dialog-title"
     className={cn("text-lg font-semibold leading-none tracking-tight", className)}
     {...props}
   />
@@ -83,6 +121,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
+    data-slot="dialog-description"
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
@@ -100,4 +139,5 @@ export {
   DialogFooter,
   DialogTitle,
   DialogDescription,
+  dialogContentVariants,
 };