@bearmenu/ui 0.5.1 → 0.6.0

package/src/components/field.test.tsx

@@ -0,0 +1,157 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import {
+  Field,
+  FieldLabel,
+  FieldControl,
+  FieldDescription,
+  FieldError,
+  FieldSet,
+  FieldLegend,
+} from "./field";
+import { Input } from "./input";
+
+describe("Field a11y wiring", () => {
+  it("auto-generates an id and wires label htmlFor to control id", () => {
+    render(
+      <Field>
+        <FieldLabel>Email</FieldLabel>
+        <FieldControl>
+          <Input data-testid="i" />
+        </FieldControl>
+      </Field>
+    );
+    const label = screen.getByText("Email") as HTMLLabelElement;
+    const input = screen.getByTestId("i");
+    const id = input.id;
+    expect(id).toBeTruthy();
+    expect(label.getAttribute("for")).toBe(id);
+  });
+
+  it("uses a provided id over the generated one", () => {
+    render(
+      <Field id="custom-id">
+        <FieldLabel>L</FieldLabel>
+        <FieldControl>
+          <Input data-testid="i" />
+        </FieldControl>
+      </Field>
+    );
+    expect(screen.getByTestId("i").id).toBe("custom-id");
+  });
+
+  it("wires aria-describedby to the description by default", () => {
+    render(
+      <Field id="f1">
+        <FieldControl>
+          <Input data-testid="i" />
+        </FieldControl>
+        <FieldDescription>Helper text</FieldDescription>
+      </Field>
+    );
+    const input = screen.getByTestId("i");
+    const desc = screen.getByText("Helper text");
+    expect(desc.id).toBe("f1-description");
+    expect(input.getAttribute("aria-describedby")).toBe("f1-description");
+  });
+
+  it("renders FieldError and wires aria-invalid + aria-describedby when invalid", () => {
+    render(
+      <Field id="f2" invalid>
+        <FieldControl>
+          <Input data-testid="i" />
+        </FieldControl>
+        <FieldDescription>Helper</FieldDescription>
+        <FieldError>Required</FieldError>
+      </Field>
+    );
+    const input = screen.getByTestId("i");
+    const err = screen.getByRole("alert");
+    expect(input.getAttribute("aria-invalid")).toBe("true");
+    expect(err.textContent).toBe("Required");
+    expect(err.id).toBe("f2-error");
+    expect(input.getAttribute("aria-describedby")).toBe("f2-description f2-error");
+  });
+
+  it("does not render FieldError when not invalid", () => {
+    render(
+      <Field id="f3">
+        <FieldControl>
+          <Input data-testid="i" />
+        </FieldControl>
+        <FieldError>Error msg</FieldError>
+      </Field>
+    );
+    expect(screen.queryByRole("alert")).toBeNull();
+  });
+
+  it("does not render FieldError when invalid but no children", () => {
+    render(
+      <Field id="f4" invalid>
+        <FieldControl>
+          <Input data-testid="i" />
+        </FieldControl>
+        <FieldError>{null}</FieldError>
+      </Field>
+    );
+    expect(screen.queryByRole("alert")).toBeNull();
+  });
+
+  it("applies destructive class to label when invalid", () => {
+    render(
+      <Field invalid>
+        <FieldLabel>L</FieldLabel>
+        <FieldControl>
+          <Input />
+        </FieldControl>
+      </Field>
+    );
+    expect(screen.getByText("L").className).toContain("text-destructive");
+  });
+
+  it("sets data-invalid on the field wrapper when invalid", () => {
+    render(
+      <Field invalid data-testid="wrapper">
+        <FieldControl>
+          <Input />
+        </FieldControl>
+      </Field>
+    );
+    expect(screen.getByTestId("wrapper").getAttribute("data-invalid")).toBe("true");
+  });
+
+  it("applies horizontal orientation class", () => {
+    render(
+      <Field orientation="horizontal" data-testid="wrapper">
+        <FieldControl>
+          <Input />
+        </FieldControl>
+      </Field>
+    );
+    expect(screen.getByTestId("wrapper").className).toContain("flex-row");
+  });
+
+  it("applies vertical orientation class by default", () => {
+    render(
+      <Field data-testid="wrapper">
+        <FieldControl>
+          <Input />
+        </FieldControl>
+      </Field>
+    );
+    expect(screen.getByTestId("wrapper").className).toContain("flex-col");
+  });
+});
+
+describe("FieldSet / FieldLegend", () => {
+  it("renders fieldset + legend correctly", () => {
+    render(
+      <FieldSet data-testid="fs">
+        <FieldLegend>Group</FieldLegend>
+      </FieldSet>
+    );
+    const fs = screen.getByTestId("fs");
+    expect(fs.tagName).toBe("FIELDSET");
+    expect(screen.getByText("Group").tagName).toBe("LEGEND");
+  });
+});

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