@boxcustodia/library 2.0.0-alpha.2 → 2.0.0-alpha.21

package/src/components/number-input/number-input.tsx

@@ -0,0 +1,228 @@
+"use client";
+
+import { NumberField as NumberFieldPrimitive } from "@base-ui/react/number-field";
+import {
+  ChevronDownIcon,
+  ChevronUpIcon,
+  MinusIcon,
+  PlusIcon,
+} from "lucide-react";
+import { type ComponentProps } from "react";
+import { cn } from "../../lib";
+
+// ── Primitives ────────────────────────────────────────────────────────────────
+
+export function NumberInputRoot({
+  className,
+  ...props
+}: NumberFieldPrimitive.Root.Props) {
+  return (
+    <NumberFieldPrimitive.Root
+      className={cn("w-full", className)}
+      data-slot="number-input"
+      {...props}
+    />
+  );
+}
+
+export function NumberInputGroup({
+  className,
+  ...props
+}: NumberFieldPrimitive.Group.Props) {
+  return (
+    <NumberFieldPrimitive.Group
+      className={cn(
+        "flex h-8 w-full items-center overflow-hidden rounded-md bg-background text-sm transition-shadow",
+        "outline outline-1 outline-input [outline-offset:-1px]",
+        "focus-within:outline-ring",
+        "aria-invalid:outline-error focus-within:aria-invalid:ring-error/20",
+        "has-aria-invalid:outline-error focus-within:has-aria-invalid:ring-error/20",
+        "data-[invalid]:outline-error focus-within:data-[invalid]:ring-error/20",
+        "data-disabled:cursor-not-allowed data-disabled:opacity-50 data-disabled:pointer-events-none",
+        "[&_svg]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
+      )}
+      data-slot="number-input-group"
+      {...props}
+    />
+  );
+}
+
+export function NumberInputInput({
+  className,
+  ...props
+}: NumberFieldPrimitive.Input.Props) {
+  return (
+    <NumberFieldPrimitive.Input
+      className={cn(
+        "min-w-0 flex-1 bg-transparent px-3 text-left tabular-nums outline-none",
+        "placeholder:text-muted-foreground",
+        className,
+      )}
+      data-slot="number-input-input"
+      {...props}
+    />
+  );
+}
+
+export function NumberInputDecrement({
+  className,
+  children,
+  ...props
+}: NumberFieldPrimitive.Decrement.Props) {
+  return (
+    <NumberFieldPrimitive.Decrement
+      className={cn(
+        "flex shrink-0 cursor-pointer items-center justify-center border-r border-input px-2 text-muted-foreground transition-colors",
+        "hover:bg-accent hover:text-foreground",
+        "disabled:pointer-events-none disabled:opacity-50",
+        className,
+      )}
+      data-slot="number-input-decrement"
+      {...props}
+    >
+      {children ?? <MinusIcon />}
+    </NumberFieldPrimitive.Decrement>
+  );
+}
+
+export function NumberInputIncrement({
+  className,
+  children,
+  ...props
+}: NumberFieldPrimitive.Increment.Props) {
+  return (
+    <NumberFieldPrimitive.Increment
+      className={cn(
+        "flex shrink-0 cursor-pointer items-center justify-center border-l border-input px-2 text-muted-foreground transition-colors",
+        "hover:bg-accent hover:text-foreground",
+        "disabled:pointer-events-none disabled:opacity-50",
+        className,
+      )}
+      data-slot="number-input-increment"
+      {...props}
+    >
+      {children ?? <PlusIcon />}
+    </NumberFieldPrimitive.Increment>
+  );
+}
+
+export function NumberInputScrubArea({
+  className,
+  ...props
+}: NumberFieldPrimitive.ScrubArea.Props) {
+  return (
+    <NumberFieldPrimitive.ScrubArea
+      className={cn("inline-flex cursor-ew-resize items-center", className)}
+      data-slot="number-input-scrub-area"
+      {...props}
+    />
+  );
+}
+
+export function NumberInputScrubAreaCursor({
+  className,
+  ...props
+}: NumberFieldPrimitive.ScrubAreaCursor.Props) {
+  return (
+    <NumberFieldPrimitive.ScrubAreaCursor
+      className={cn("drop-shadow-[0_1px_1px_#0008] filter", className)}
+      {...props}
+    />
+  );
+}
+
+export function NumberInputCursorIcon(props: ComponentProps<"svg">) {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="black"
+      height="14"
+      stroke="white"
+      viewBox="0 0 24 14"
+      width="26"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z" />
+    </svg>
+  );
+}
+
+// ── Composite ─────────────────────────────────────────────────────────────────
+
+export interface NumberInputProps extends NumberFieldPrimitive.Root.Props {
+  /** Hides the increment/decrement buttons. */
+  hideControls?: boolean;
+  /** Marks the field as invalid, adding the error border to the group. */
+  invalid?: boolean;
+  /** Forwarded to the underlying input element. */
+  placeholder?: string;
+  /** Styles applied to each internal slot. */
+  classNames?: {
+    /** Native `<input>` element. */
+    input?: string;
+    /** Column wrapper around the increment/decrement buttons. */
+    controls?: string;
+    /** Increment button (Chevron up). */
+    increment?: string;
+    /** Decrement button (Chevron down). */
+    decrement?: string;
+  };
+}
+
+export function NumberInput({
+  className,
+  hideControls = false,
+  onValueChange,
+  invalid,
+  placeholder,
+  classNames,
+  ...props
+}: NumberInputProps) {
+  return (
+    <NumberInputRoot onValueChange={onValueChange} {...props}>
+      <NumberInputGroup
+        aria-invalid={invalid || undefined}
+        className={className}
+      >
+        <NumberInputInput
+          {...(invalid ? { "aria-invalid": true } : {})}
+          placeholder={placeholder}
+          className={cn("self-stretch", classNames?.input)}
+        />
+        {!hideControls && (
+          <div
+            className={cn(
+              "flex flex-col self-stretch divide-y divide-input border-l border-input",
+              classNames?.controls,
+            )}
+          >
+            <NumberInputIncrement
+              data-testid="increment-trigger"
+              className={cn(
+                "flex-1 border-l-0 py-0 [&_svg]:size-3",
+                classNames?.increment,
+              )}
+            >
+              <ChevronUpIcon />
+            </NumberInputIncrement>
+            <NumberInputDecrement
+              data-testid="decrement-trigger"
+              className={cn(
+                "flex-1 border-r-0 py-0 [&_svg]:size-3",
+                classNames?.decrement,
+              )}
+            >
+              <ChevronDownIcon />
+            </NumberInputDecrement>
+          </div>
+        )}
+      </NumberInputGroup>
+    </NumberInputRoot>
+  );
+}
+
+// ── Primitive escape hatch ────────────────────────────────────────────────────
+
+export { NumberFieldPrimitive as NumberInputPrimitive };

package/src/components/otp/index.ts

@@ -0,0 +1 @@
+export * from "./otp";

package/src/components/otp/otp.stories.tsx

@@ -0,0 +1,209 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import React from "react";
+
+import { Button } from "../button/button";
+import { Field } from "../field/field";
+import { Form } from "../form/form";
+import { OTP, OTPInput, OTPRoot, OTPSeparator } from "./otp";
+
+/**
+ * Segmented input for one-time passwords and verification codes.
+ * The composite `OTP` generates slots from `length` and places
+ * `OTPSeparator` automatically via `split`. Use `inputProps` to forward
+ * props to every slot. Compose primitives (`OTPRoot`, `OTPInput`,
+ * `OTPSeparator`) directly for full control over slot layout.
+ */
+const meta: Meta<typeof OTP> = {
+  title: "Components/OTP",
+  component: OTP,
+  parameters: { layout: "centered" },
+  args: {
+    length: 6,
+    "aria-label": "Verification code",
+  },
+  tags: ["new"],
+};
+
+export default meta;
+type Story = StoryObj<typeof OTP>;
+
+export const Default: Story = {};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <OTP aria-label="Default size" length={6} />
+      <OTP aria-label="Large size" length={6} size="lg" />
+    </div>
+  ),
+};
+
+/**
+ * `split={n}` inserts `OTPSeparator` after the nth slot (1-indexed).
+ */
+export const WithSeparator: Story = {
+  args: {
+    split: 3,
+  },
+};
+
+/**
+ * Associate a visible label using a `<label>` pointing to the root's `id`.
+ * When inside a `Field` with `FieldLabel`, the association is automatic.
+ */
+export const WithLabel: Story = {
+  render: () => (
+    <div className="flex flex-col gap-1.5">
+      <label className="text-sm font-medium" htmlFor="otp-with-label">
+        Verification code
+      </label>
+      <OTP
+        id="otp-with-label"
+        aria-label="Verification code"
+        length={6}
+        split={3}
+      />
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    split: 3,
+  },
+};
+
+/**
+ * `validationType="alphanumeric"` for recovery, backup, or invite codes
+ * that mix letters and numbers. Forward `inputMode="text"` via `inputProps`
+ * so mobile keyboards show letters alongside digits.
+ */
+export const Alphanumeric: Story = {
+  args: {
+    validationType: "alphanumeric",
+    split: 3,
+    inputProps: { inputMode: "text" },
+  },
+};
+
+/**
+ * `mask` obscures typed characters in each slot while preserving keyboard
+ * navigation and paste behavior — useful on shared screens.
+ */
+export const Masked: Story = {
+  args: {
+    mask: true,
+  },
+};
+
+/**
+ * `placeholder` on each slot shows a hint character. Forward via `inputProps`
+ * alongside `focus-visible:placeholder:text-transparent` to hide the hint on
+ * the active slot so it does not compete with typed input.
+ */
+export const WithPlaceholder: Story = {
+  args: {
+    inputProps: {
+      placeholder: "1",
+      className: "focus-visible:placeholder:text-transparent",
+    },
+  },
+};
+
+/**
+ * Controlled via `value` + `onValueChange`. Fires with the full string on
+ * every keystroke. Check `value.length === length` to detect completion.
+ */
+export const Controlled: Story = {
+  render: (args) => {
+    const [value, setValue] = React.useState("");
+    const done = value.length === 6;
+    return (
+      <div className="flex flex-col items-start gap-3">
+        <OTP {...args} value={value} onValueChange={setValue} />
+        <p className="text-sm text-muted-foreground">
+          {done ? (
+            <span className="text-foreground font-medium">Code: {value}</span>
+          ) : (
+            <>{value.length} / 6 characters</>
+          )}
+        </p>
+      </div>
+    );
+  },
+};
+
+/**
+ * Uncontrolled via `name` — value is read from `FormData` on submit.
+ * Declare constraint errors on `Field` so Base UI intercepts native browser
+ * validation and shows messages inline instead of the browser tooltip.
+ * `patternMismatch` fires when the OTP is partially filled; `valueMissing`
+ * when empty with `required`. `onFormSubmit` only runs when all constraints pass.
+ */
+export const WithForm: Story = {
+  render: () => {
+    const [result, setResult] = React.useState<string | null>(null);
+
+    return (
+      <Form
+        className="flex flex-col items-start gap-3"
+        onFormSubmit={(data) => setResult(data.code as string)}
+      >
+        <Field
+          name="code"
+          label="Verification code"
+          error={[
+            {
+              message: "Verification code is required.",
+              match: "valueMissing",
+            },
+            { message: "Enter all 6 digits.", match: "patternMismatch" },
+          ]}
+        >
+          <OTP length={6} split={3} required />
+        </Field>
+        <Button type="submit">Verify</Button>
+        {result && (
+          <p className="text-sm text-muted-foreground">
+            Submitted:{" "}
+            <span className="font-medium text-foreground">{result}</span>
+          </p>
+        )}
+      </Form>
+    );
+  },
+};
+
+/**
+ * Use primitives directly when you need custom slot layout, conditional
+ * rendering, or per-slot props that `inputProps` cannot express uniformly.
+ */
+export const Primitive: Story = {
+  render: () => (
+    <OTPRoot aria-label="Verification code" length={6}>
+      <OTPInput aria-label="Character 1 of 6" />
+      <OTPInput aria-label="Character 2 of 6" />
+      <OTPInput aria-label="Character 3 of 6" />
+      <OTPSeparator />
+      <OTPInput aria-label="Character 4 of 6" />
+      <OTPInput aria-label="Character 5 of 6" />
+      <OTPInput aria-label="Character 6 of 6" />
+    </OTPRoot>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `<OTPRoot aria-label="Verification code" length={6}>
+  <OTPInput aria-label="Character 1 of 6" />
+  <OTPInput aria-label="Character 2 of 6" />
+  <OTPInput aria-label="Character 3 of 6" />
+  <OTPSeparator />
+  <OTPInput aria-label="Character 4 of 6" />
+  <OTPInput aria-label="Character 5 of 6" />
+  <OTPInput aria-label="Character 6 of 6" />
+</OTPRoot>`,
+      },
+    },
+  },
+};

package/src/components/otp/otp.test.tsx

@@ -0,0 +1,103 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { OTP, OTPInput, OTPPrimitive, OTPRoot } from "./otp";
+
+describe("OTPRoot", () => {
+  it("renders with data-slot='otp'", () => {
+    render(<OTPRoot length={4} />);
+    expect(document.querySelector('[data-slot="otp"]')).toBeInTheDocument();
+  });
+
+  it("sets data-size='default' by default", () => {
+    render(<OTPRoot length={4} />);
+    expect(document.querySelector('[data-slot="otp"]')).toHaveAttribute(
+      "data-size",
+      "default",
+    );
+  });
+
+  it("sets data-size='lg' when size prop is 'lg'", () => {
+    render(<OTPRoot length={4} size="lg" />);
+    expect(document.querySelector('[data-slot="otp"]')).toHaveAttribute(
+      "data-size",
+      "lg",
+    );
+  });
+
+  it("forwards className", () => {
+    render(<OTPRoot length={4} className="otp-root-cls" />);
+    expect(document.querySelector('[data-slot="otp"]')).toHaveClass(
+      "otp-root-cls",
+    );
+  });
+});
+
+describe("OTPInput", () => {
+  it("renders with data-slot='otp-input' inside OTPRoot", () => {
+    render(
+      <OTPRoot length={1}>
+        <OTPInput />
+      </OTPRoot>,
+    );
+    expect(
+      document.querySelector('[data-slot="otp-input"]'),
+    ).toBeInTheDocument();
+  });
+});
+
+describe("OTP composite", () => {
+  it("renders the correct number of inputs", () => {
+    render(<OTP length={4} />);
+    const inputs = document.querySelectorAll('[data-slot="otp-input"]');
+    expect(inputs).toHaveLength(4);
+  });
+
+  it("assigns accessible aria-label to inputs after the first", () => {
+    // Base UI strips aria-label from the first OTP input (it uses its own labelling)
+    render(<OTP length={3} />);
+    expect(
+      screen.getByRole("textbox", { name: "Character 2 of 3" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("textbox", { name: "Character 3 of 3" }),
+    ).toBeInTheDocument();
+  });
+
+  it("inserts a separator after the split position", () => {
+    render(<OTP length={6} split={3} />);
+    expect(
+      document.querySelector('[data-slot="otp-input"]'),
+    ).toBeInTheDocument();
+    expect(
+      document.querySelector('[data-slot="separator"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("propagates aria-invalid to all inputs", () => {
+    render(<OTP length={3} aria-invalid />);
+    const inputs = document.querySelectorAll('[data-slot="otp-input"]');
+    expect(inputs).toHaveLength(3);
+    for (const input of inputs) {
+      expect(input).toHaveAttribute("aria-invalid", "true");
+    }
+  });
+
+  it("applies size prop to root", () => {
+    render(<OTP length={4} size="lg" />);
+    expect(document.querySelector('[data-slot="otp"]')).toHaveAttribute(
+      "data-size",
+      "lg",
+    );
+  });
+
+  it("forwards className to root", () => {
+    render(<OTP length={2} className="otp-cls" />);
+    expect(document.querySelector('[data-slot="otp"]')).toHaveClass("otp-cls");
+  });
+});
+
+describe("OTPPrimitive", () => {
+  it("is exported and defined", () => {
+    expect(OTPPrimitive).toBeDefined();
+  });
+});

package/src/components/otp/otp.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { OTPFieldPreview as OTPPrimitive } from "@base-ui/react/otp-field";
+import type React from "react";
+import { Fragment } from "react";
+
+import { cn } from "../../lib";
+import { Divider } from "../divider/divider";
+
+export function OTPRoot({
+  className,
+  size = "default",
+  ...props
+}: OTPPrimitive.Root.Props & {
+  size?: "default" | "lg";
+}): React.ReactElement {
+  return (
+    <OTPPrimitive.Root
+      className={cn(
+        "flex items-center gap-2 has-disabled:opacity-64 has-disabled:**:data-[slot=otp-input]:shadow-none has-disabled:**:data-[slot=otp-input]:before:shadow-none!",
+        className,
+      )}
+      data-size={size}
+      data-slot="otp"
+      {...props}
+    />
+  );
+}
+
+export function OTPInput({
+  className,
+  ...props
+}: OTPPrimitive.Input.Props): React.ReactElement {
+  return (
+    <OTPPrimitive.Input
+      className={cn(
+        "in-[[data-slot=otp][data-size=lg]]:size-10 size-9 min-w-0 rounded-lg border border-input bg-background text-center in-[[data-slot=otp][data-size=lg]]:text-lg text-base text-foreground in-[[data-slot=otp][data-size=lg]]:leading-10 leading-9 outline-none transition-shadow focus-visible:z-10 focus-visible:border-ring aria-invalid:border-error focus-visible:aria-invalid:border-error focus-visible:aria-invalid:ring-error/20 in-[[data-slot=field][data-invalid]]:border-error in-[[data-slot=field][data-invalid]]:focus-visible:border-error in-[[data-slot=field][data-invalid]]:focus-visible:ring-error/20 sm:in-[[data-slot=otp][data-size=lg]]:size-9 sm:size-8 sm:in-[[data-slot=otp][data-size=lg]]:text-base sm:text-sm sm:in-[[data-slot=otp][data-size=lg]]:leading-9 sm:leading-8",
+        className,
+      )}
+      data-slot="otp-input"
+      spellCheck={false}
+      {...props}
+    />
+  );
+}
+
+export function OTPSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Divider>): React.ReactElement {
+  return (
+    <OTPPrimitive.Separator
+      render={
+        <Divider
+          className={cn(
+            "rounded-full bg-input data-[orientation=horizontal]:h-0.5 data-[orientation=horizontal]:w-3",
+            className,
+          )}
+          orientation="horizontal"
+          {...props}
+        />
+      }
+    />
+  );
+}
+
+interface OTPProps extends Omit<OTPPrimitive.Root.Props, "children"> {
+  size?: "default" | "lg";
+  /** Insert a separator after this slot (1-indexed). */
+  split?: number;
+  inputProps?: OTPPrimitive.Input.Props;
+}
+
+export function OTP({
+  split,
+  inputProps,
+  size,
+  length,
+  "aria-invalid": ariaInvalid,
+  ...props
+}: OTPProps): React.ReactElement {
+  const slotProps: OTPPrimitive.Input.Props = {
+    ...(ariaInvalid ? { "aria-invalid": true } : {}),
+    ...inputProps,
+  };
+
+  return (
+    <OTPRoot size={size} length={length} aria-invalid={ariaInvalid} {...props}>
+      {Array.from({ length }, (_, i) => (
+        <Fragment key={i}>
+          <OTPInput
+            aria-label={`Character ${i + 1} of ${length}`}
+            {...slotProps}
+          />
+          {split === i + 1 && <OTPSeparator />}
+        </Fragment>
+      ))}
+    </OTPRoot>
+  );
+}
+
+export { OTPPrimitive };

package/src/components/pagination/index.ts

@@ -0,0 +1,2 @@
+export * from "./pagination";
+export * from "./pagination.model";

package/src/components/pagination/pagination.model.ts

@@ -0,0 +1,2 @@
+export const PAGINATION_SIZES = [10, 25, 50] as const;
+export type PageSize = (typeof PAGINATION_SIZES)[number] | number;