@primitiv-ui/react 0.1.38 → 0.1.40

package/src/Fieldset/Fieldset.tsx

@@ -1,156 +0,0 @@
-import type { ReactElement } from "react";
-
-import { FieldsetLegendProps, FieldsetProps } from "./types";
-
-/**
- * The root of a Fieldset — renders a native `<fieldset>` element with an
- * implicit `role="group"`.
- *
- * Groups a set of related form controls (radios, checkboxes, inputs). Pair
- * it with a {@link FieldsetLegend} as the first child so the group is
- * announced with an accessible name when the user moves focus into any
- * control inside it.
- *
- * **Styling hooks.** `data-disabled=""` is set when the `disabled` prop is
- * truthy (omitted otherwise), so CSS can target the state without relying
- * on the `:disabled` pseudo-class:
- *
- * ```css
- * fieldset[data-disabled] { opacity: 0.5; cursor: not-allowed; }
- * ```
- *
- * **Disabled.** Forwarding the native `disabled` attribute disables *every*
- * form control nested inside the fieldset at once — the standard way to
- * disable a whole section of a form.
- *
- * **Ref forwarding.** Pass a `ref` prop to access the underlying
- * `HTMLFieldSetElement` directly:
- *
- * ```tsx
- * const ref = useRef<HTMLFieldSetElement>(null);
- * <Fieldset.Root ref={ref}>...</Fieldset.Root>
- * ```
- *
- * @extends HTMLFieldSetElement
- *
- * @example Basic grouping
- * ```tsx
- * <Fieldset.Root>
- *   <Fieldset.Legend>Notifications</Fieldset.Legend>
- *   <label><input type="checkbox" name="email" /> Email</label>
- *   <label><input type="checkbox" name="sms" /> SMS</label>
- * </Fieldset.Root>
- * ```
- *
- * @example Disabled section
- * ```tsx
- * <Fieldset.Root disabled>
- *   <Fieldset.Legend>Billing</Fieldset.Legend>
- *   ...every nested control is disabled...
- * </Fieldset.Root>
- * ```
- */
-export function FieldsetRoot({
-  disabled,
-  children,
-  ...rest
-}: FieldsetProps): ReactElement {
-  return (
-    <fieldset
-      {...rest}
-      disabled={disabled}
-      data-disabled={disabled ? "" : undefined}
-    >
-      {children}
-    </fieldset>
-  );
-}
-
-/** @internal */
-// Stryker disable next-line StringLiteral: overwritten by the compound alias — an equivalent mutant.
-FieldsetRoot.displayName = "Fieldset";
-
-/**
- * The caption for a {@link FieldsetRoot | `Fieldset.Root`} — renders a
- * native `<legend>`.
- *
- * Must be the **first child** of the `<fieldset>`. It supplies the group's
- * accessible name; assistive technology announces it when the user moves
- * focus into any control within the group.
- *
- * **Ref forwarding.** Pass a `ref` prop to access the underlying
- * `HTMLLegendElement` directly:
- *
- * ```tsx
- * const ref = useRef<HTMLLegendElement>(null);
- * <Fieldset.Legend ref={ref}>Address</Fieldset.Legend>
- * ```
- *
- * @extends HTMLLegendElement
- *
- * @example
- * ```tsx
- * <Fieldset.Legend>Shipping address</Fieldset.Legend>
- * ```
- */
-export function FieldsetLegend({
-  children,
-  ...rest
-}: FieldsetLegendProps): ReactElement {
-  return <legend {...rest}>{children}</legend>;
-}
-
-/** @internal */
-FieldsetLegend.displayName = "FieldsetLegend";
-
-/**
- * The shape of the exported `Fieldset` value — callable as
- * `Fieldset.Root` and carrying `Root` and `Legend` as static properties.
- */
-export type FieldsetCompound = typeof FieldsetRoot & {
-  Root: typeof FieldsetRoot;
-  Legend: typeof FieldsetLegend;
-};
-
-/**
- * Headless, accessible **Fieldset** — a stateless compound component that
- * groups related form controls, with zero styles.
- *
- * `Fieldset` is both callable (an alias of {@link FieldsetRoot | `Fieldset.Root`})
- * and carries its sub-component as a static property. Prefer the
- * namespaced form in application code:
- *
- * - {@link FieldsetRoot | `Fieldset.Root`} — `<fieldset>`, implicit `role="group"`.
- * - {@link FieldsetLegend | `Fieldset.Legend`} — `<legend>`, the group's accessible name.
- *
- * @example Grouping a set of radios
- * ```tsx
- * import { Fieldset } from "@primitiv-ui/react";
- *
- * <Fieldset.Root>
- *   <Fieldset.Legend>Plan</Fieldset.Legend>
- *   <label><input type="radio" name="plan" value="free" /> Free</label>
- *   <label><input type="radio" name="plan" value="pro" /> Pro</label>
- * </Fieldset.Root>
- * ```
- *
- * @example Disabling a whole section
- * ```tsx
- * <Fieldset.Root disabled>
- *   <Fieldset.Legend>Billing</Fieldset.Legend>
- *   ...every nested control is disabled...
- * </Fieldset.Root>
- * ```
- *
- * @see {@link FieldsetRoot} for the `disabled` prop and `data-disabled` styling hook.
- * @see {@link FieldsetLegend} for accessible name requirements.
- */
-const FieldsetCompound: FieldsetCompound = Object.assign(FieldsetRoot, {
-  Root: FieldsetRoot,
-  Legend: FieldsetLegend,
-});
-
-/** @internal */
-FieldsetCompound.displayName = "Fieldset";
-
-export { FieldsetCompound as Fieldset };

package/src/Fieldset/README.md

@@ -1,74 +0,0 @@
-# Fieldset
-
-A headless, accessible grouping for related form controls — a stateless
-compound component wrapping `<fieldset>` and `<legend>`. Zero styles ship.
-
-```tsx
-import { Fieldset } from "@primitiv-ui/react";
-
-<Fieldset.Root>
-  <Fieldset.Legend>Notifications</Fieldset.Legend>
-  <label><input type="checkbox" name="email" /> Email</label>
-  <label><input type="checkbox" name="sms" /> SMS</label>
-</Fieldset.Root>;
-```
-
-`Fieldset` is both callable (an alias of `Fieldset.Root`) and carries its
-sub-component as a static property.
-
-## Parts
-
-| Part              | Element      | Notes                                                  |
-| ----------------- | ------------ | ------------------------------------------------------ |
-| `Fieldset.Root`   | `<fieldset>` | Implicit `role="group"`; `disabled` styling hook       |
-| `Fieldset.Legend` | `<legend>`   | Supplies the group's accessible name                   |
-
-## Props
-
-### `Fieldset.Root`
-
-| Prop       | Type                         | Default | Notes                                                       |
-| ---------- | ---------------------------- | ------- | ----------------------------------------------------------- |
-| `disabled` | `boolean`                    | —       | Native `disabled` + `data-disabled=""` styling hook         |
-| `...rest`  | `ComponentProps<"fieldset">` | —       | All other `<fieldset>` props (`aria-*`, `data-*`, etc.)     |
-
-### `Fieldset.Legend`
-
-| Prop      | Type                       | Default | Notes                            |
-| --------- | -------------------------- | ------- | -------------------------------- |
-| `...rest` | `ComponentProps<"legend">` | —       | All `<legend>` props             |
-
-## Accessible name
-
-A `<fieldset>` has an implicit `role="group"`. Place a `Fieldset.Legend`
-as the first child so the group is announced with a name — assistive
-technology reads the legend when the user moves focus into any control
-within the group.
-
-```tsx
-<Fieldset.Root>
-  <Fieldset.Legend>Shipping address</Fieldset.Legend>
-  ...
-</Fieldset.Root>
-```
-
-## Disabled
-
-Passing `disabled` to `Fieldset.Root` forwards the native `disabled`
-attribute. Natively, this disables **every** form control nested inside
-the fieldset at once — the standard way to disable a whole section of a
-form. It also sets `data-disabled=""` so CSS can target the state
-directly:
-
-```tsx
-<Fieldset.Root disabled>
-  <Fieldset.Legend>Billing</Fieldset.Legend>
-  ...every nested control is disabled...
-</Fieldset.Root>
-```
-
-```css
-fieldset[data-disabled] {
-  opacity: 0.5;
-}
-```

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

@@ -1,90 +0,0 @@
-import { render, screen } from "@testing-library/react";
-
-import { Fieldset } from "../Fieldset";
-
-describe("Fieldset basic rendering", () => {
-  it("renders a <fieldset> element with an implicit group role", () => {
-    // Arrange & Act
-    render(<Fieldset.Root />);
-
-    // Assert
-    expect(screen.getByRole("group").tagName).toBe("FIELDSET");
-  });
-
-  it("Fieldset is callable as an alias of Fieldset.Root", () => {
-    // Arrange & Act
-    render(<Fieldset />);
-
-    // Assert
-    expect(screen.getByRole("group").tagName).toBe("FIELDSET");
-  });
-
-  it("renders Fieldset.Legend as a <legend> element", () => {
-    // Arrange & Act
-    render(
-      <Fieldset.Root>
-        <Fieldset.Legend>Shipping address</Fieldset.Legend>
-      </Fieldset.Root>,
-    );
-
-    // Assert
-    expect(screen.getByText("Shipping address").tagName).toBe("LEGEND");
-  });
-
-  it("uses the legend as the group's accessible name", () => {
-    // Arrange & Act
-    render(
-      <Fieldset.Root>
-        <Fieldset.Legend>Contact details</Fieldset.Legend>
-      </Fieldset.Root>,
-    );
-
-    // Assert
-    expect(
-      screen.getByRole("group", { name: "Contact details" }),
-    ).toBeInTheDocument();
-  });
-
-  it("renders children inside the fieldset", () => {
-    // Arrange & Act
-    render(
-      <Fieldset.Root>
-        <input data-testid="field" />
-      </Fieldset.Root>,
-    );
-
-    // Assert
-    expect(screen.getByRole("group")).toContainElement(
-      screen.getByTestId("field"),
-    );
-  });
-
-  it("passes through className and data-* attributes on the root", () => {
-    // Arrange & Act
-    render(<Fieldset.Root className="group" data-testid="fs" />);
-
-    // Assert
-    expect(screen.getByTestId("fs")).toHaveClass("group");
-  });
-
-  it("passes through props on the legend", () => {
-    // Arrange & Act
-    render(
-      <Fieldset.Root>
-        <Fieldset.Legend className="group__legend">Billing</Fieldset.Legend>
-      </Fieldset.Root>,
-    );
-
-    // Assert
-    expect(screen.getByText("Billing")).toHaveClass("group__legend");
-  });
-
-  it("sets a displayName on the compound and Legend", () => {
-    // Assert — empty displayNames would render each as anonymous in DevTools.
-    // `Fieldset`, `Fieldset.Root`, and the underlying function are one object
-    // (Object.assign compound), so the compound's "Fieldset" alias is the
-    // observable Root displayName; Legend is a distinct object.
-    expect(Fieldset.displayName).toBe("Fieldset");
-    expect(Fieldset.Legend.displayName).toBe("FieldsetLegend");
-  });
-});

package/src/Fieldset/__tests__/Fieldset.disabled.test.tsx

@@ -1,41 +0,0 @@
-import { render, screen } from "@testing-library/react";
-
-import { Fieldset } from "../Fieldset";
-
-describe("Fieldset disabled state", () => {
-  it("sets the native disabled attribute on the fieldset", () => {
-    // Arrange & Act
-    render(<Fieldset.Root disabled />);
-
-    // Assert
-    expect(screen.getByRole("group")).toBeDisabled();
-  });
-
-  it('sets data-disabled="" as a CSS styling hook', () => {
-    // Arrange & Act
-    render(<Fieldset.Root disabled data-testid="fs" />);
-
-    // Assert
-    expect(screen.getByTestId("fs")).toHaveAttribute("data-disabled", "");
-  });
-
-  it("does not set data-disabled when not disabled", () => {
-    // Arrange & Act
-    render(<Fieldset.Root data-testid="fs" />);
-
-    // Assert
-    expect(screen.getByTestId("fs")).not.toHaveAttribute("data-disabled");
-  });
-
-  it("disables form controls nested inside the fieldset", () => {
-    // Arrange & Act
-    render(
-      <Fieldset.Root disabled>
-        <input data-testid="field" />
-      </Fieldset.Root>,
-    );
-
-    // Assert
-    expect(screen.getByTestId("field")).toBeDisabled();
-  });
-});

package/src/Fieldset/index.ts

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

package/src/Fieldset/types.ts

@@ -1,25 +0,0 @@
-import { ComponentProps } from "react";
-
-/**
- * Props for {@link FieldsetRoot | `Fieldset.Root`} — all native `<fieldset>`
- * attributes plus the `data-disabled` styling hook.
- *
- * No custom props narrow any native attribute, so the full `ComponentProps<"fieldset">`
- * surface is passed through unchanged, including `ref` (forwarded to the
- * underlying `HTMLFieldSetElement`).
- *
- * The one behaviour addition over a bare `<fieldset>` is `data-disabled=""`:
- * when `disabled` is truthy the component sets this attribute alongside the
- * native `disabled`, so CSS can target `[data-disabled]` without relying on
- * the `:disabled` pseudo-class.
- */
-export type FieldsetProps = ComponentProps<"fieldset">;
-
-/**
- * Props for {@link FieldsetLegend | `Fieldset.Legend`} — all native `<legend>`
- * attributes, including `ref` (forwarded to the underlying `HTMLLegendElement`).
- *
- * `<legend>` has no interactive state, so no additional `data-*` attributes
- * are emitted beyond what is passed explicitly by the consumer.
- */
-export type FieldsetLegendProps = ComponentProps<"legend">;

package/src/Input/Input.tsx

@@ -1,128 +0,0 @@
-import type { ReactElement } from "react";
-
-import { useFieldProps } from "../Field/hooks/index.ts";
-import { Slot } from "../Slot/index.ts";
-import { InputProps } from "./types";
-
-/**
- * A headless, accessible single-line text input. Renders a native
- * `<input>` element and passes every standard attribute straight through
- * to the DOM. No styles ship with the component.
- *
- * **Default type.** `type="text"` is set by default. Override with the
- * `type` prop for any native variant (`"email"`, `"password"`,
- * `"number"`, `"search"`, `"tel"`, `"url"`, `"date"`, ...). Future
- * composite primitives (`PasswordInput`, `NumberInput`, `DatePicker`)
- * will layer richer interaction on top of those types.
- *
- * **Labelling.** An `<input>` has no implicit accessible name. Pair it
- * with a `<label>` (`htmlFor` → the input's `id`), or pass `aria-label`
- * / `aria-labelledby` for the control to be announced correctly.
- *
- * **Native validation.** All HTML constraint-validation attributes
- * (`required`, `pattern`, `min`, `max`, `minLength`, `maxLength`,
- * `type="email"` / `"url"` / `"number"`) work as the browser intends —
- * the component does not interfere. CSS can target `input:invalid`
- * directly; for assistive technology, set `aria-invalid` explicitly
- * based on your validation state.
- *
- * **Form library compatibility.** `ref`, `name`, `onChange`, and
- * `onBlur` all pass through, so the spread pattern used by
- * react-hook-form's `register("field")` and similar libraries works
- * directly:
- *
- * ```tsx
- * <Input {...register("email")} type="email" required />
- * ```
- *
- * **Field integration.** When rendered inside a `<Field.Root>`, Input
- * opts into `FieldContext` and inherits `id`, `aria-describedby`,
- * `aria-invalid`, `disabled`, and `required` from the field. Any prop
- * the consumer passes wins; `aria-describedby` is composed (consumer
- * ids first, then field-supplied description / error ids). Outside a
- * `<Field.Root>`, behaviour is unchanged.
- *
- * **Styling hooks.**
- * - `data-disabled=""` — present when `disabled` is `true`; absent
- *   otherwise. Lets CSS target `[data-disabled]` without depending on
- *   the `:disabled` pseudo-class.
- *
- * **Ref forwarding.** Pass a `ref` prop to access the underlying
- * `HTMLInputElement`:
- *
- * ```tsx
- * const ref = useRef<HTMLInputElement>(null);
- * <Input ref={ref} aria-label="Email" />
- * ```
- *
- * **Disabled.** Sets native `disabled` (removing the field from the tab
- * order and blocking input) plus `data-disabled=""` so CSS can target
- * `[data-disabled]` without relying on the `:disabled` pseudo-class:
- *
- * ```css
- * input[data-disabled] { opacity: 0.5; cursor: not-allowed; }
- * ```
- *
- * **`asChild` composition.** Renders the consumer's element instead of
- * `<input>`, merging all props (`aria-*`, `data-*`, event handlers,
- * `ref`) via the {@link Slot} utility. Event handlers compose with the
- * child's own handlers (child runs first). `type` is **not** forwarded
- * in this mode — the child element owns its own type semantics.
- *
- * **Adornments** live in the separate `InputGroup` primitive — leading
- * / trailing icons, currency symbols, clear buttons, password-reveal
- * toggles.
- *
- * @extends HTMLInputElement
- *
- * @example Basic usage
- * ```tsx
- * <label htmlFor="email">Email</label>
- * <Input id="email" type="email" required />
- * ```
- *
- * @example Inside a Field — id, aria-*, disabled, required all wired automatically
- * ```tsx
- * <Field.Root invalid={!!errors.email}>
- *   <Field.Label>Email</Field.Label>
- *   <Input type="email" {...register("email")} />
- *   <Field.ErrorText>{errors.email?.message}</Field.ErrorText>
- * </Field.Root>
- * ```
- *
- * @example Disabled
- * ```tsx
- * <Input aria-label="Email" disabled />
- * ```
- *
- * @example asChild — wrap a custom input variant
- * ```tsx
- * <Input asChild aria-label="Email">
- *   <MaskedInput mask="email" />
- * </Input>
- * ```
- */
-export function Input({
-  asChild = false,
-  type = "text",
-  children,
-  ref,
-  ...consumer
-}: InputProps): ReactElement {
-  const merged = useFieldProps(consumer);
-
-  const rootProps = {
-    ...merged,
-    ref,
-    "data-disabled": merged.disabled ? "" : undefined,
-  };
-
-  if (asChild) {
-    return <Slot {...rootProps}>{children}</Slot>;
-  }
-
-  return <input type={type} {...rootProps} />;
-}
-
-/** @internal */
-Input.displayName = "Input";