@primitiv-ui/react 0.1.38 → 0.1.40

package/dist/Fieldset/Fieldset.d.ts

@@ -0,0 +1,124 @@
+import type { ReactElement } from "react";
+import { FieldsetLegendProps, FieldsetProps } from "./types.js";
+/**
+ * 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 declare function FieldsetRoot({ disabled, children, ...rest }: FieldsetProps): ReactElement;
+export declare namespace FieldsetRoot {
+    var displayName: string;
+}
+/**
+ * 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 declare function FieldsetLegend({ children, ...rest }: FieldsetLegendProps): ReactElement;
+export declare namespace FieldsetLegend {
+    var displayName: string;
+}
+/**
+ * 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.
+ */
+declare const FieldsetCompound: FieldsetCompound;
+export { FieldsetCompound as Fieldset };

package/dist/Fieldset/Fieldset.js

@@ -0,0 +1,124 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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 }) {
+    return (_jsx("fieldset", { ...rest, disabled: disabled, "data-disabled": disabled ? "" : undefined, children: children }));
+}
+/** @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 }) {
+    return _jsx("legend", { ...rest, children: children });
+}
+/** @internal */
+FieldsetLegend.displayName = "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 = Object.assign(FieldsetRoot, {
+    Root: FieldsetRoot,
+    Legend: FieldsetLegend,
+});
+/** @internal */
+FieldsetCompound.displayName = "Fieldset";
+export { FieldsetCompound as Fieldset };

package/dist/Fieldset/index.d.ts

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

package/dist/Fieldset/index.js

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

package/dist/Fieldset/types.d.ts

@@ -0,0 +1,23 @@
+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/dist/Fieldset/types.js

@@ -0,0 +1 @@
+export {};

package/dist/Input/Input.d.ts

@@ -0,0 +1,104 @@
+import type { ReactElement } from "react";
+import { InputProps } from "./types.js";
+/**
+ * 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 declare function Input({ asChild, type, children, ref, ...consumer }: InputProps): ReactElement;
+export declare namespace Input {
+    var displayName: string;
+}

package/dist/Input/Input.js

@@ -0,0 +1,116 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useFieldProps } from "../Field/hooks/index.js";
+import { Slot } from "../Slot/index.js";
+/**
+ * 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 }) {
+    const merged = useFieldProps(consumer);
+    const rootProps = {
+        ...merged,
+        ref,
+        "data-disabled": merged.disabled ? "" : undefined,
+    };
+    if (asChild) {
+        return _jsx(Slot, { ...rootProps, children: children });
+    }
+    return _jsx("input", { type: type, ...rootProps });
+}
+/** @internal */
+Input.displayName = "Input";

package/dist/Input/index.d.ts

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

package/dist/Input/index.js

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

package/dist/Input/types.d.ts

@@ -0,0 +1,27 @@
+import { ComponentProps, ReactNode, Ref } from "react";
+/**
+ * Props for {@link Input} — all native `<input>` attributes (with `type`
+ * defaulting to `"text"`) plus the `asChild` escape hatch and a typed `ref`.
+ */
+export type InputProps = ComponentProps<"input"> & {
+    /**
+     * Renders the child element instead of a native `<input>`, merging all
+     * props — `aria-*`, `data-*`, event handlers, `ref` — onto it via
+     * {@link Slot}. Event handlers compose (child runs first). `type` is
+     * not forwarded in this mode; the child owns its own type semantics.
+     * See the `asChild` example on {@link Input}.
+     * @default false
+     */
+    asChild?: boolean;
+    /**
+     * Forwarded to the underlying `HTMLInputElement`. Under `asChild`,
+     * merged onto the rendered child via {@link Slot}.
+     */
+    ref?: Ref<HTMLInputElement>;
+    /**
+     * Under `asChild`, becomes the single child element `Slot` merges props
+     * onto. Not rendered by the native `<input>` path (inputs are void
+     * elements in HTML).
+     */
+    children?: ReactNode;
+};

package/dist/Input/types.js

@@ -0,0 +1 @@
+export {};