@bearmenu/ui 0.5.2 → 0.6.1

package/src/components/field.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "../lib/utils";
+import { Label } from "./label";
+
+const FieldContext = React.createContext<{
+  id: string;
+  descriptionId: string;
+  errorId: string;
+  hasError: boolean;
+}>({ id: "", descriptionId: "", errorId: "", hasError: false });
+
+type FieldProps = React.HTMLAttributes<HTMLDivElement> & {
+  /** Field id. Auto-generated if omitted. */
+  id?: string;
+  /** Marks the field invalid. */
+  invalid?: boolean;
+  /** Lay out content horizontally instead of stacked. */
+  orientation?: "vertical" | "horizontal";
+};
+
+const Field = React.forwardRef<HTMLDivElement, FieldProps>(
+  ({ id: providedId, invalid, orientation = "vertical", className, children, ...props }, ref) => {
+    const generatedId = React.useId();
+    const id = providedId ?? generatedId;
+    const descriptionId = `${id}-description`;
+    const errorId = `${id}-error`;
+
+    return (
+      <FieldContext.Provider value={{ id, descriptionId, errorId, hasError: !!invalid }}>
+        <div
+          ref={ref}
+          data-slot="field"
+          data-invalid={invalid || undefined}
+          className={cn(
+            "flex gap-2",
+            orientation === "vertical" ? "flex-col" : "flex-row items-center",
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </FieldContext.Provider>
+    );
+  }
+);
+Field.displayName = "Field";
+
+const FieldLabel = React.forwardRef<
+  HTMLLabelElement,
+  React.ComponentPropsWithoutRef<typeof Label>
+>(({ className, ...props }, ref) => {
+  const { id, hasError } = React.useContext(FieldContext);
+  return (
+    <Label
+      ref={ref}
+      data-slot="field-label"
+      htmlFor={id}
+      className={cn(hasError && "text-destructive", className)}
+      {...props}
+    />
+  );
+});
+FieldLabel.displayName = "FieldLabel";
+
+const FieldControl = React.forwardRef<HTMLElement, React.ComponentPropsWithoutRef<typeof Slot>>(
+  ({ ...props }, ref) => {
+    const { id, descriptionId, errorId, hasError } = React.useContext(FieldContext);
+    return (
+      <Slot
+        ref={ref}
+        data-slot="field-control"
+        id={id}
+        aria-describedby={hasError ? `${descriptionId} ${errorId}` : descriptionId}
+        aria-invalid={hasError || undefined}
+        {...props}
+      />
+    );
+  }
+);
+FieldControl.displayName = "FieldControl";
+
+const FieldDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => {
+    const { descriptionId } = React.useContext(FieldContext);
+    return (
+      <p
+        ref={ref}
+        id={descriptionId}
+        data-slot="field-description"
+        className={cn("text-sm text-muted-foreground", className)}
+        {...props}
+      />
+    );
+  }
+);
+FieldDescription.displayName = "FieldDescription";
+
+const FieldError = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, children, ...props }, ref) => {
+    const { errorId, hasError } = React.useContext(FieldContext);
+    if (!hasError || !children) return null;
+    return (
+      <p
+        ref={ref}
+        id={errorId}
+        role="alert"
+        data-slot="field-error"
+        className={cn("text-sm text-destructive", className)}
+        {...props}
+      >
+        {children}
+      </p>
+    );
+  }
+);
+FieldError.displayName = "FieldError";
+
+const FieldSet = React.forwardRef<HTMLFieldSetElement, React.FieldsetHTMLAttributes<HTMLFieldSetElement>>(
+  ({ className, ...props }, ref) => (
+    <fieldset
+      ref={ref}
+      data-slot="field-set"
+      className={cn("flex flex-col gap-3 rounded-xl border border-border p-4", className)}
+      {...props}
+    />
+  )
+);
+FieldSet.displayName = "FieldSet";
+
+const FieldLegend = React.forwardRef<HTMLLegendElement, React.HTMLAttributes<HTMLLegendElement>>(
+  ({ className, ...props }, ref) => (
+    <legend
+      ref={ref}
+      data-slot="field-legend"
+      className={cn("px-1 text-sm font-medium text-foreground", className)}
+      {...props}
+    />
+  )
+);
+FieldLegend.displayName = "FieldLegend";
+
+export { Field, FieldLabel, FieldControl, FieldDescription, FieldError, FieldSet, FieldLegend };

package/src/components/form.stories.tsx

@@ -8,6 +8,7 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
+  FormRoot,
 } from "./form";
 import { Input } from "./input";
 import { Button } from "./button";
@@ -31,7 +32,7 @@ function FormDemo() {
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(() => {})} className="space-y-6 w-[400px]">
+      <FormRoot onSubmit={form.handleSubmit(() => {})} className="space-y-6 w-[400px]">
         <FormField
           control={form.control}
           name="username"
@@ -63,7 +64,7 @@ function FormDemo() {
           )}
         />
         <Button type="submit">Submit</Button>
-      </form>
+      </FormRoot>
     </Form>
   );
 }

package/src/components/form.test.tsx

@@ -0,0 +1,95 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useForm } from "react-hook-form";
+import {
+  Form,
+  FormRoot,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+} from "./form";
+import { Input } from "./input";
+
+function Wrapper({
+  onSubmit,
+  defaultValues,
+}: {
+  onSubmit?: (data: { name: string }) => void;
+  defaultValues?: { name: string };
+}) {
+  const form = useForm<{ name: string }>({
+    defaultValues: defaultValues ?? { name: "" },
+  });
+  return (
+    <Form {...form}>
+      <FormRoot onSubmit={form.handleSubmit((data) => onSubmit?.(data))}>
+        <FormField
+          control={form.control}
+          name="name"
+          rules={{ required: "Name is required" }}
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Name</FormLabel>
+              <FormControl>
+                <Input {...field} />
+              </FormControl>
+              <FormDescription>Pick a name</FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <button type="submit">submit</button>
+      </FormRoot>
+    </Form>
+  );
+}
+
+describe("Form", () => {
+  it("FormRoot renders a form element with noValidate by default", () => {
+    const { container } = render(<Wrapper />);
+    const form = container.querySelector("form");
+    expect(form).not.toBeNull();
+    expect(form?.noValidate).toBe(true);
+  });
+
+  it("FormLabel links to the input via htmlFor / id", () => {
+    render(<Wrapper />);
+    const label = screen.getByText("Name");
+    const input = screen.getByRole("textbox");
+    expect(label.getAttribute("for")).toBe(input.id);
+  });
+
+  it("FormDescription is wired through aria-describedby", () => {
+    render(<Wrapper />);
+    const input = screen.getByRole("textbox");
+    const description = screen.getByText("Pick a name");
+    expect(input.getAttribute("aria-describedby") ?? "").toContain(description.id);
+  });
+
+  it("submits valid values via onSubmit", async () => {
+    const user = userEvent.setup();
+    const onSubmit = vi.fn();
+    render(<Wrapper onSubmit={onSubmit} defaultValues={{ name: "ada" }} />);
+    await user.click(screen.getByRole("button", { name: /submit/i }));
+    expect(onSubmit).toHaveBeenCalledWith({ name: "ada" });
+  });
+
+  it("renders an error message and sets aria-invalid when validation fails", async () => {
+    const user = userEvent.setup();
+    const onSubmit = vi.fn();
+    render(<Wrapper onSubmit={onSubmit} />);
+    await user.click(screen.getByRole("button", { name: /submit/i }));
+    expect(onSubmit).not.toHaveBeenCalled();
+    expect(await screen.findByText("Name is required")).toBeDefined();
+    expect(screen.getByRole("textbox")).toHaveAttribute("aria-invalid", "true");
+  });
+
+  it("FormRoot allows overriding noValidate to false", () => {
+    const { container } = render(<FormRoot noValidate={false} />);
+    expect(container.querySelector("form")?.noValidate).toBe(false);
+  });
+});

package/src/components/form.tsx

@@ -18,6 +18,14 @@ import { Label } from "./label";
 
 const Form = FormProvider;
 
+function FormRoot({
+  noValidate = true,
+  className,
+  ...props
+}: React.FormHTMLAttributes<HTMLFormElement>) {
+  return <form data-slot="form-root" noValidate={noValidate} className={className} {...props} />;
+}
+
 type FormFieldContextValue<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
@@ -143,6 +151,7 @@ function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
 export {
   useFormField,
   Form,
+  FormRoot,
   FormItem,
   FormLabel,
   FormControl,

package/src/components/haptic-button.tsx

@@ -15,5 +15,5 @@ export function HapticButton({ hapticStyle = "light", onClick, ...props }: Hapti
     onClick?.(e);
   };
 
-  return <Button onClick={handleClick} {...props} />;
+  return <Button {...props} onClick={handleClick} haptic={false} />;
 }

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

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Mail, Search } from "lucide-react";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "./input-group";
+
+const meta = {
+  title: "Components/InputGroup",
+  component: InputGroup,
+  tags: ["autodocs"],
+} satisfies Meta<typeof InputGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const WithLeadingIcon: Story = {
+  render: () => (
+    <InputGroup className="w-72">
+      <InputGroupAddon>
+        <Search className="size-4" />
+      </InputGroupAddon>
+      <InputGroupInput placeholder="Search…" />
+    </InputGroup>
+  ),
+};
+
+export const WithTrailingButton: Story = {
+  render: () => (
+    <InputGroup className="w-72">
+      <InputGroupAddon>
+        <Mail className="size-4" />
+      </InputGroupAddon>
+      <InputGroupInput type="email" placeholder="you@example.com" />
+      <InputGroupAddon align="end">
+        <InputGroupButton>Send</InputGroupButton>
+      </InputGroupAddon>
+    </InputGroup>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3 w-72">
+      <InputGroup size="sm">
+        <InputGroupAddon><Search className="size-4" /></InputGroupAddon>
+        <InputGroupInput placeholder="Small" />
+      </InputGroup>
+      <InputGroup size="default">
+        <InputGroupAddon><Search className="size-4" /></InputGroupAddon>
+        <InputGroupInput placeholder="Default" />
+      </InputGroup>
+      <InputGroup size="lg">
+        <InputGroupAddon><Search className="size-4" /></InputGroupAddon>
+        <InputGroupInput placeholder="Large" />
+      </InputGroup>
+    </div>
+  ),
+};

package/src/components/input-group.tsx

@@ -0,0 +1,99 @@
+"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 inputGroupVariants = cva(
+  "flex items-center w-full rounded-xl border border-border bg-background text-base md:text-sm text-foreground transition-colors focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50 aria-invalid:border-destructive aria-invalid:focus-within:ring-destructive/40",
+  {
+    variants: {
+      size: {
+        sm: "h-9",
+        default: "h-11",
+        lg: "h-12",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+);
+
+type InputGroupContextValue = VariantProps<typeof inputGroupVariants>;
+const InputGroupContext = React.createContext<InputGroupContextValue>({});
+
+const InputGroup = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof inputGroupVariants>
+>(({ className, size, children, ...props }, ref) => (
+  <InputGroupContext.Provider value={{ size }}>
+    <div
+      ref={ref}
+      data-slot="input-group"
+      className={cn(inputGroupVariants({ size }), className)}
+      {...props}
+    >
+      {children}
+    </div>
+  </InputGroupContext.Provider>
+));
+InputGroup.displayName = "InputGroup";
+
+const InputGroupInput = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
+  ({ className, ...props }, ref) => (
+    <input
+      ref={ref}
+      data-slot="input-group-input"
+      className={cn(
+        "h-full min-w-0 flex-1 bg-transparent px-3 outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+InputGroupInput.displayName = "InputGroupInput";
+
+const InputGroupAddon = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & {
+    align?: "start" | "end";
+    asChild?: boolean;
+  }
+>(({ className, align = "start", asChild, ...props }, ref) => {
+  const Comp = asChild ? Slot : "div";
+  return (
+    <Comp
+      ref={ref}
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(
+        "inline-flex h-full items-center gap-1 text-sm text-muted-foreground",
+        align === "start" ? "pl-3 pr-1" : "pl-1 pr-3",
+        className
+      )}
+      {...props}
+    />
+  );
+});
+InputGroupAddon.displayName = "InputGroupAddon";
+
+const InputGroupButton = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
+  ({ className, type = "button", ...props }, ref) => (
+    <button
+      ref={ref}
+      type={type}
+      data-slot="input-group-button"
+      className={cn(
+        "inline-flex h-7 min-w-7 cursor-pointer items-center justify-center gap-1 rounded-md px-2 text-xs font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&:has(svg:only-child)]:w-7 [&:has(svg:only-child)]:px-0 [&_svg]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+InputGroupButton.displayName = "InputGroupButton";
+
+export { InputGroup, InputGroupInput, InputGroupAddon, InputGroupButton, inputGroupVariants };

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