@primitiv-ui/react 0.1.38 → 0.1.40

package/src/Field/__tests__/Field.basic-rendering.test.tsx

@@ -1,115 +0,0 @@
-import { render, screen } from "@testing-library/react";
-
-import { Field } from "../Field";
-
-describe("Field basic rendering", () => {
-  it("renders a wrapper element with data-field on the root", () => {
-    // Arrange & Act
-    render(<Field.Root data-testid="field" />);
-
-    // Assert
-    const root = screen.getByTestId("field");
-    expect(root.tagName).toBe("DIV");
-    expect(root).toHaveAttribute("data-field", "");
-  });
-
-  it("Field is callable as an alias of Field.Root", () => {
-    // Arrange & Act
-    render(<Field data-testid="field" />);
-
-    // Assert
-    expect(screen.getByTestId("field").tagName).toBe("DIV");
-  });
-
-  it("Field.Label renders a <label> wired to an auto-generated id", () => {
-    // Arrange & Act
-    render(
-      <Field.Root>
-        <Field.Label>Email</Field.Label>
-      </Field.Root>,
-    );
-    const label = screen.getByText("Email");
-
-    // Assert
-    expect(label.tagName).toBe("LABEL");
-    expect(label).toHaveAttribute("for");
-    expect(label.getAttribute("for")).toBeTruthy();
-  });
-
-  it("Field.Label uses a consumer-supplied id on Root", () => {
-    // Arrange & Act
-    render(
-      <Field.Root id="email">
-        <Field.Label>Email</Field.Label>
-      </Field.Root>,
-    );
-
-    // Assert
-    expect(screen.getByText("Email")).toHaveAttribute("for", "email");
-  });
-
-  it("Field.Description renders a <div> with id derived from the field id", () => {
-    // Arrange & Act
-    render(
-      <Field.Root id="email">
-        <Field.Description>We won't share it.</Field.Description>
-      </Field.Root>,
-    );
-
-    // Assert
-    expect(screen.getByText("We won't share it.")).toHaveAttribute(
-      "id",
-      "email-description",
-    );
-  });
-
-  it("Field.ErrorText renders a <div role='alert'> with derived id when invalid", () => {
-    // Arrange & Act
-    render(
-      <Field.Root id="email" invalid>
-        <Field.ErrorText>Required.</Field.ErrorText>
-      </Field.Root>,
-    );
-    const error = screen.getByText("Required.");
-
-    // Assert
-    expect(error.tagName).toBe("DIV");
-    expect(error).toHaveAttribute("role", "alert");
-    expect(error).toHaveAttribute("id", "email-error");
-  });
-
-  it("renders children inside the wrapper in source order", () => {
-    // Arrange & Act
-    render(
-      <Field.Root id="email">
-        <Field.Label>Email</Field.Label>
-        <input data-testid="input" />
-        <Field.Description>Hint.</Field.Description>
-      </Field.Root>,
-    );
-    const wrapper = screen.getByText("Email").parentElement;
-
-    // Assert
-    expect(wrapper).toContainElement(screen.getByTestId("input"));
-    expect(wrapper).toContainElement(screen.getByText("Hint."));
-  });
-
-  it("passes className and data-* through on the Root", () => {
-    // Arrange & Act
-    render(<Field.Root className="form-field" data-testid="field" />);
-
-    // Assert
-    expect(screen.getByTestId("field")).toHaveClass("form-field");
-  });
-
-  it("sets a displayName on the compound and each sub-component", () => {
-    // Assert — empty displayNames would render each as anonymous in DevTools.
-    // `Field`, `Field.Root`, and the underlying function are one object
-    // (Object.assign compound), so the compound's "Field" alias is the
-    // observable Root displayName; the sub-components are distinct objects.
-    expect(Field.displayName).toBe("Field");
-    expect(Field.Label.displayName).toBe("FieldLabel");
-    expect(Field.Description.displayName).toBe("FieldDescription");
-    expect(Field.ErrorText.displayName).toBe("FieldErrorText");
-  });
-});

package/src/Field/__tests__/Field.contract.test.tsx

@@ -1,91 +0,0 @@
-import { readFileSync } from "node:fs";
-import { fileURLToPath } from "node:url";
-import { dirname, resolve } from "node:path";
-
-import { render } from "@testing-library/react";
-
-import { Field } from "../Field";
-
-/**
- * Auto-verification of the Field styling contract (RFC 0004 §3.4 / D15). The
- * `data-*` half of `registry/components/field/contract.json` is *derived from and
- * asserted against the rendered headless `Field.Root`* so it can never drift from
- * what the component emits. The root always carries `data-field`, plus
- * `data-field-invalid` / `data-field-disabled` / `data-field-required` when the
- * matching flag is set. The authored half (part classes, custom properties) is a
- * styling convention the headless layer does not emit and is checked by the
- * generator drift-guards instead.
- */
-const contractPath = resolve(
-  dirname(fileURLToPath(import.meta.url)),
-  "../../../../../registry/components/field/contract.json",
-);
-
-const contract = JSON.parse(readFileSync(contractPath, "utf8"));
-
-/** Every `data-*` attribute name present on an element. */
-function dataAttributeNames(element: Element): string[] {
-  return [...element.attributes]
-    .map((attribute) => attribute.name)
-    .filter((name) => name.startsWith("data-"))
-    .sort();
-}
-
-/** Render a `Field.Root` with the given flags and return its `[data-field]` element. */
-function renderRoot(props: Record<string, boolean>): Element {
-  const { container } = render(<Field.Root {...props} />);
-  return container.querySelector("[data-field]")!;
-}
-
-describe("Field styling contract", () => {
-  const autoAttributes = contract.dataAttributes.filter(
-    (attribute: { source: string }) => attribute.source === "auto",
-  );
-
-  it("declares every data-* attribute as auto-verified against the component", () => {
-    // The Field has no authored data-* surface; the whole contract is derived.
-    expect(autoAttributes).toHaveLength(contract.dataAttributes.length);
-  });
-
-  it("emits exactly the contracted data-* attribute names across its states", () => {
-    const emitted = new Set<string>();
-    const states: Record<string, boolean>[] = [
-      {},
-      { invalid: true, disabled: true, required: true },
-    ];
-    for (const props of states) {
-      for (const name of dataAttributeNames(renderRoot(props))) {
-        emitted.add(name);
-      }
-    }
-
-    const contracted = new Set(
-      autoAttributes.map((attribute: { name: string }) => attribute.name),
-    );
-    expect([...emitted].sort()).toEqual([...contracted].sort());
-  });
-
-  it("always emits data-field regardless of state", () => {
-    expect(renderRoot({})).toHaveAttribute("data-field", "");
-  });
-
-  it("emits each conditional attribute exactly as the contract documents it", () => {
-    const conditional = autoAttributes.filter(
-      (attribute: { when: string }) => attribute.when !== "always",
-    );
-
-    for (const entry of conditional) {
-      const root = renderRoot({ [entry.when]: true });
-      expect(root).toHaveAttribute(entry.name, entry.value);
-    }
-  });
-
-  it("omits each conditional attribute when its flag is not set", () => {
-    const root = renderRoot({});
-    for (const entry of autoAttributes.filter(
-      (attribute: { when: string }) => attribute.when !== "always",
-    )) {
-      expect(root).not.toHaveAttribute(entry.name);
-    }
-  });
-});

package/src/Field/__tests__/Field.error-handling.test.tsx

@@ -1,23 +0,0 @@
-import { render } from "@testing-library/react";
-
-import { Field } from "../Field";
-import { FieldContext } from "../FieldContext";
-
-describe("Field error handling", () => {
-  it("throws a helpful error when a sub-component is rendered outside Root", () => {
-    // Arrange
-    const error = vi.spyOn(console, "error").mockImplementation(() => {});
-
-    // Assert
-    expect(() => render(<Field.Label>Email</Field.Label>)).toThrow(
-      /Field sub-components must be rendered inside a <Field\.Root>/,
-    );
-
-    error.mockRestore();
-  });
-
-  it("names the context for React DevTools", () => {
-    // Assert — an empty displayName would render the provider as anonymous.
-    expect(FieldContext.displayName).toBe("FieldContext");
-  });
-});

package/src/Field/__tests__/Field.state-cascade.test.tsx

@@ -1,96 +0,0 @@
-import { render, screen } from "@testing-library/react";
-
-import { Field } from "../Field";
-
-describe("Field state cascade", () => {
-  it("sets data-field-invalid='' on the root when invalid", () => {
-    // Arrange & Act
-    render(<Field.Root data-testid="field" invalid />);
-
-    // Assert
-    expect(screen.getByTestId("field")).toHaveAttribute(
-      "data-field-invalid",
-      "",
-    );
-  });
-
-  it("sets data-field-disabled='' on the root when disabled", () => {
-    // Arrange & Act
-    render(<Field.Root data-testid="field" disabled />);
-
-    // Assert
-    expect(screen.getByTestId("field")).toHaveAttribute(
-      "data-field-disabled",
-      "",
-    );
-  });
-
-  it("sets data-field-required='' on the root when required", () => {
-    // Arrange & Act
-    render(<Field.Root data-testid="field" required />);
-
-    // Assert
-    expect(screen.getByTestId("field")).toHaveAttribute(
-      "data-field-required",
-      "",
-    );
-  });
-
-  it("does not set state data-* attributes when the corresponding flag is false", () => {
-    // Arrange & Act
-    render(<Field.Root data-testid="field" />);
-    const root = screen.getByTestId("field");
-
-    // Assert
-    expect(root).not.toHaveAttribute("data-field-invalid");
-    expect(root).not.toHaveAttribute("data-field-disabled");
-    expect(root).not.toHaveAttribute("data-field-required");
-  });
-
-  it("Field.ErrorText returns null when invalid=false", () => {
-    // Arrange & Act
-    render(
-      <Field.Root>
-        <Field.ErrorText>You should not see this.</Field.ErrorText>
-      </Field.Root>,
-    );
-
-    // Assert
-    expect(
-      screen.queryByText("You should not see this."),
-    ).not.toBeInTheDocument();
-  });
-
-  it("Field.ErrorText renders when invalid=true", () => {
-    // Arrange & Act
-    render(
-      <Field.Root invalid>
-        <Field.ErrorText>Required.</Field.ErrorText>
-      </Field.Root>,
-    );
-
-    // Assert
-    expect(screen.getByText("Required.")).toBeInTheDocument();
-  });
-
-  it("re-derives the cascaded context when a flag changes after mount", () => {
-    // Arrange — a valid field: the error is gated off.
-    const { rerender } = render(
-      <Field.Root>
-        <Field.ErrorText>Required.</Field.ErrorText>
-      </Field.Root>,
-    );
-    expect(screen.queryByText("Required.")).not.toBeInTheDocument();
-
-    // Act — flip to invalid; the memoised context value must recompute.
-    rerender(
-      <Field.Root invalid>
-        <Field.ErrorText>Required.</Field.ErrorText>
-      </Field.Root>,
-    );
-
-    // Assert — a frozen memo (empty dependency array) would leave the error
-    // gated off; the recomputed context reveals it.
-    expect(screen.getByText("Required.")).toBeInTheDocument();
-  });
-});

package/src/Field/hooks/__tests__/useFieldProps.test.tsx

@@ -1,142 +0,0 @@
-import { render, screen } from "@testing-library/react";
-
-import { FieldContext, type FieldContextValue } from "../../FieldContext";
-import { useFieldProps } from "../useFieldProps";
-
-/**
- * `useFieldProps` is a reusable hook that reads {@link FieldContext} directly,
- * so it is exercised here against a hand-built provider value (and, for the
- * no-context path, no provider at all) rather than the full `Field.Root` —
- * always through a real component that consumes it. `Field.Root` always
- * supplies a truthy `descriptionId`, so its defensive "nothing to describe"
- * fallback is only reachable through a custom provider like the one below.
- */
-type ProbeProps = {
-  id?: string;
-  disabled?: boolean;
-  required?: boolean;
-  "aria-invalid"?: boolean | "true" | "false";
-  "aria-describedby"?: string;
-};
-
-function Probe(props: ProbeProps) {
-  const merged = useFieldProps(props);
-  return <input data-testid="probe" {...merged} />;
-}
-
-function renderInField(field: Partial<FieldContextValue>, props: ProbeProps = {}) {
-  const value: FieldContextValue = {
-    id: "f",
-    descriptionId: "",
-    errorId: "",
-    invalid: false,
-    disabled: false,
-    required: false,
-    ...field,
-  };
-  return render(
-    <FieldContext.Provider value={value}>
-      <Probe {...props} />
-    </FieldContext.Provider>,
-  );
-}
-
-describe("useFieldProps without a FieldContext", () => {
-  it("returns the consumer props unchanged when no provider is in scope", () => {
-    // Arrange & Act — no <FieldContext.Provider>: the early guard must fire.
-    render(<Probe id="consumer-id" aria-invalid="true" />);
-    const probe = screen.getByTestId("probe");
-
-    // Assert — consumer props survive untouched and no field wiring is added.
-    expect(probe).toHaveAttribute("id", "consumer-id");
-    expect(probe).toHaveAttribute("aria-invalid", "true");
-    expect(probe).not.toHaveAttribute("aria-describedby");
-  });
-});
-
-describe("useFieldProps inheriting from the field", () => {
-  it("adopts the field's id, disabled, required, and invalid state when the consumer omits them", () => {
-    // Arrange & Act
-    renderInField(
-      {
-        id: "field-id",
-        descriptionId: "field-desc",
-        errorId: "field-err",
-        invalid: true,
-        disabled: true,
-        required: true,
-      },
-      {},
-    );
-    const probe = screen.getByTestId("probe");
-
-    // Assert — every value falls back to the field.
-    expect(probe).toHaveAttribute("id", "field-id");
-    expect(probe).toBeDisabled();
-    expect(probe).toBeRequired();
-    expect(probe).toHaveAttribute("aria-invalid", "true");
-    expect(probe).toHaveAttribute("aria-describedby", "field-desc field-err");
-  });
-
-  it("omits aria-invalid entirely when the field is valid and the consumer is silent", () => {
-    // Arrange & Act
-    renderInField({ invalid: false }, {});
-
-    // Assert — a valid field contributes no aria-invalid, so the attribute is
-    // absent rather than rendered as aria-invalid="false".
-    expect(screen.getByTestId("probe")).not.toHaveAttribute("aria-invalid");
-  });
-});
-
-describe("useFieldProps with consumer overrides", () => {
-  it("lets consumer id, disabled, required, and aria-invalid win over the field", () => {
-    // Arrange & Act — field would contribute the opposite of each override.
-    renderInField(
-      {
-        id: "field-id",
-        invalid: false,
-        disabled: false,
-        required: false,
-      },
-      {
-        id: "consumer-id",
-        disabled: true,
-        required: true,
-        "aria-invalid": "true",
-      },
-    );
-    const probe = screen.getByTestId("probe");
-
-    // Assert — the consumer's explicit values are preserved.
-    expect(probe).toHaveAttribute("id", "consumer-id");
-    expect(probe).toBeDisabled();
-    expect(probe).toBeRequired();
-    expect(probe).toHaveAttribute("aria-invalid", "true");
-  });
-});
-
-describe("useFieldProps aria-describedby composition", () => {
-  it("omits aria-describedby entirely when nothing contributes an id", () => {
-    // Arrange & Act — empty description/error ids, not invalid, no consumer id.
-    renderInField({});
-
-    // Assert — the empty join collapses to undefined, so the attribute is absent
-    // rather than rendered as aria-describedby="".
-    expect(screen.getByTestId("probe")).not.toHaveAttribute("aria-describedby");
-  });
-
-  it("prepends the consumer's ids ahead of the field's, space-separated", () => {
-    // Arrange & Act — a valid field so the errorId does not join in.
-    renderInField(
-      { descriptionId: "field-desc", errorId: "field-err", invalid: false },
-      { "aria-describedby": "consumer-desc" },
-    );
-
-    // Assert — consumer id first, then the field's descriptionId; the errorId is
-    // excluded while valid.
-    expect(screen.getByTestId("probe")).toHaveAttribute(
-      "aria-describedby",
-      "consumer-desc field-desc",
-    );
-  });
-});

package/src/Field/hooks/index.ts

@@ -1,2 +0,0 @@
-export * from "./useFieldContext";
-export * from "./useFieldProps";

package/src/Field/hooks/useFieldContext.ts

@@ -1 +0,0 @@
-export { useFieldContext } from "../FieldContext";

package/src/Field/hooks/useFieldProps.ts

@@ -1,57 +0,0 @@
-import { useContext } from "react";
-
-import { FieldContext } from "../FieldContext";
-
-type FieldAwareProps = {
-  id?: string;
-  "aria-describedby"?: string;
-  "aria-invalid"?:
-    | boolean
-    | "true"
-    | "false"
-    | "grammar"
-    | "spelling"
-    | undefined;
-  disabled?: boolean;
-  required?: boolean;
-};
-
-/**
- * Merges consumer-supplied props with any {@link FieldContext} available
- * higher in the tree. Use it inside form controls (Input, Textarea,
- * Select, ...) so they automatically inherit the field's id, aria
- * wiring, and `disabled` / `required` cascade when nested inside
- * `<Field.Root>`.
- *
- * **Merge rules**
- * - `id`, `disabled`, `required`, `aria-invalid`: consumer wins; the
- *   field provides the fallback.
- * - `aria-describedby`: composes — consumer-supplied ids come first,
- *   then the field's `descriptionId`, then the `errorId` when invalid.
- *
- * When no FieldContext is in scope the consumer props are returned
- * unchanged, so existing usage outside a `<Field.Root>` is unaffected.
- */
-export function useFieldProps<P extends FieldAwareProps>(consumerProps: P): P {
-  const field = useContext(FieldContext);
-  if (!field) return consumerProps;
-
-  const composedDescribedBy =
-    [
-      consumerProps["aria-describedby"],
-      field.descriptionId,
-      field.invalid ? field.errorId : null,
-    ]
-      .filter(Boolean)
-      .join(" ") || undefined;
-
-  return {
-    ...consumerProps,
-    id: consumerProps.id ?? field.id,
-    disabled: consumerProps.disabled ?? field.disabled,
-    required: consumerProps.required ?? field.required,
-    "aria-invalid":
-      consumerProps["aria-invalid"] ?? (field.invalid || undefined),
-    "aria-describedby": composedDescribedBy,
-  };
-}

package/src/Field/index.ts

@@ -1,2 +0,0 @@
-export * from "./Field";
-export * from "./types";

package/src/Field/types.ts

@@ -1,85 +0,0 @@
-import { ComponentProps, ReactNode } from "react";
-
-/**
- * Props for {@link FieldRoot | `Field.Root`} — the wrapper that owns the
- * shared field id, derived `descriptionId` / `errorId`, and the
- * `invalid` / `disabled` / `required` cascade. Extends the native
- * `<div>` props; `id` is redeclared purely to document its role as the
- * field-wide id (its type is unchanged from the native attribute).
- */
-export type FieldRootProps = ComponentProps<"div"> & {
-  /** Stable id for the field. Wired to the control via
-   * {@link FieldLabel | `Field.Label`}'s `htmlFor`, and used to derive
-   * the `descriptionId` (`<id>-description`) and `errorId`
-   * (`<id>-error`) exposed through {@link FieldContext}. Auto-generated
-   * via React's `useId` when omitted. */
-  id?: string;
-  /** Marks the field invalid. Cascades to a context-aware control (e.g.
-   * `Input`) as `aria-invalid`, sets `data-field-invalid` on the
-   * wrapper, and gates {@link FieldErrorText | `Field.ErrorText`}
-   * rendering.
-   * @default false */
-  invalid?: boolean;
-  /** Disables the field. Cascades to the control's `disabled` prop and
-   * sets `data-field-disabled` on the wrapper.
-   * @default false */
-  disabled?: boolean;
-  /** Marks the field required. Cascades to the control's `required` prop
-   * and sets `data-field-required` on the wrapper.
-   * @default false */
-  required?: boolean;
-  /** Render the consumer's element instead of `<div>` via the
-   * {@link Slot} pattern — e.g. a semantic `<fieldset>`. The
-   * `data-field-*` hooks and context provider are preserved.
-   * @default false */
-  asChild?: boolean;
-  /** The label, control, description, and error sub-components composed
-   * inside the field. */
-  children?: ReactNode;
-};
-
-/**
- * Props for {@link FieldLabel | `Field.Label`} — the field's `<label>`,
- * wired to the field id via `htmlFor`. Extends the native `<label>`
- * props.
- */
-export type FieldLabelProps = ComponentProps<"label"> & {
-  /** Render the consumer's element instead of `<label>` via the
-   * {@link Slot} pattern, with `htmlFor` merged on.
-   * @default false */
-  asChild?: boolean;
-  /** The label text. */
-  children?: ReactNode;
-};
-
-/**
- * Props for {@link FieldDescription | `Field.Description`} — the field's
- * supporting helper text, carrying the field's `descriptionId` so a
- * context-aware control can reference it via `aria-describedby`. Extends
- * the native `<div>` props.
- */
-export type FieldDescriptionProps = ComponentProps<"div"> & {
-  /** Render the consumer's element instead of `<div>` via the
-   * {@link Slot} pattern (e.g. a `<p>` or `<span>`), with the derived
-   * `id` merged on.
-   * @default false */
-  asChild?: boolean;
-  /** The helper text. */
-  children?: ReactNode;
-};
-
-/**
- * Props for {@link FieldErrorText | `Field.ErrorText`} — the error
- * message shown only when the field is
- * {@link FieldRootProps.invalid | invalid}. Renders `role="alert"` and
- * carries the field's `errorId`. Extends the native `<div>` props.
- */
-export type FieldErrorTextProps = ComponentProps<"div"> & {
-  /** Render the consumer's element instead of `<div>` via the
-   * {@link Slot} pattern, with the derived `id` and `role="alert"`
-   * merged on.
-   * @default false */
-  asChild?: boolean;
-  /** The error message. */
-  children?: ReactNode;
-};