@primitiv-ui/react 0.1.38 → 0.1.40

package/src/Status/README.md

@@ -1,50 +0,0 @@
-# Status
-
-A polite live region for low-priority, non-urgent status messages,
-implementing the
-[WAI-ARIA `status` role](https://www.w3.org/TR/wai-aria-1.2/#status).
-
-```tsx
-import { Status } from "@primitiv-ui/react";
-
-{
-  saved && <Status>All changes saved.</Status>;
-}
-```
-
-## Props
-
-| Prop        | Type                    | Default | Notes                                              |
-| ----------- | ----------------------- | ------- | -------------------------------------------------- |
-| `asChild`   | `boolean`               | `false` | Render the consumer's element instead of a `<div>` |
-| `className` | `string`                | —       | Applied directly to the rendered element           |
-| `...rest`   | `ComponentProps<"div">` | —       | All other `<div>` props, including `aria-*`         |
-
-## Behaviour
-
-`Status` renders a `<div role="status">`. The `status` role carries an
-implicit `aria-live="polite"` and `aria-atomic="true"`, so assistive
-technology announces the message once the user is idle, without
-interrupting them. Use it for confirmations, counts, and background
-progress — for errors the user must see immediately, reach for
-[`Alert`](../Alert/README.md).
-
-## Announce on change
-
-A live region announces content that changes *after* the region is in
-the DOM. Either render the `Status` conditionally, or keep it mounted
-and update its text content:
-
-```tsx
-<Status>{count} items in your cart</Status>
-```
-
-## asChild
-
-Pass `asChild` to apply `role="status"` to the consumer's own element:
-
-```tsx
-<Status asChild>
-  <output>{count} items in your cart</output>
-</Status>
-```

package/src/Status/Status.tsx

@@ -1,72 +0,0 @@
-import type { ReactElement } from "react";
-
-import { Slot } from "../Slot/index.ts";
-import { StatusProps } from "./types";
-
-/**
- * A polite live region for low-priority, non-urgent status messages,
- * implementing the WAI-ARIA `status` role.
- *
- * Renders a `<div role="status">`. The `status` role carries an implicit
- * `aria-live="polite"` and `aria-atomic="true"`, so assistive technology
- * announces the message once the user is idle, without interrupting
- * them — use it for confirmations, counts, and background progress. For
- * errors the user must see immediately, reach for `Alert` instead.
- *
- * **Live region timing.** A live region only announces content that
- * changes *after* the region is already in the DOM. Either render
- * `Status` conditionally (mount when a message is ready), or keep it
- * mounted and update its text:
- *
- * ```tsx
- * // Conditional mount — announces on first appearance
- * {saved && <Status>All changes saved.</Status>}
- *
- * // Persistent — announces on every content change
- * <Status>{count} items in your cart</Status>
- * ```
- *
- * **`asChild` composition.** Pass `asChild` to render the consumer's own
- * element instead of a `<div>`, merging `role="status"` and all other
- * props onto it via the {@link Slot} utility. Event handlers compose with
- * the child's own handlers (child runs first).
- *
- * @extends HTMLDivElement
- *
- * @example Confirmation message
- * ```tsx
- * import { Status } from "@primitiv-ui/react";
- *
- * function SaveIndicator({ saved }: { saved: boolean }) {
- *   return saved ? <Status>All changes saved.</Status> : null;
- * }
- * ```
- *
- * @example Cart count — persistent live region
- * ```tsx
- * <Status>{count} items in your cart</Status>
- * ```
- *
- * @example asChild — apply the status role to a semantic element
- * ```tsx
- * <Status asChild>
- *   <output>{count} items in your cart</output>
- * </Status>
- * ```
- */
-export function Status({
-  asChild = false,
-  children,
-  ...rest
-}: StatusProps): ReactElement {
-  const rootProps = { role: "status", ...rest };
-
-  if (asChild) {
-    return <Slot {...rootProps}>{children}</Slot>;
-  }
-
-  return <div {...rootProps}>{children}</div>;
-}
-
-/** @internal */
-Status.displayName = "Status";

package/src/Status/__tests__/Status.test.tsx

@@ -1,33 +0,0 @@
-import { Status } from "../index.ts";
-import { render, screen } from "@testing-library/react";
-
-describe("Status component", () => {
-  it("should render a div with role status containing its children", () => {
-    // Arrange
-    render(<Status>3 items added to your cart</Status>);
-
-    // Assert
-    const status = screen.getByRole("status");
-    expect(status.tagName).toBe("DIV");
-    expect(status).toHaveTextContent("3 items added to your cart");
-  });
-
-  it("should render the consumer element with asChild, keeping role status", () => {
-    // Arrange
-    render(
-      <Status asChild>
-        <section>Saved</section>
-      </Status>,
-    );
-
-    // Assert
-    const status = screen.getByRole("status");
-    expect(status.tagName).toBe("SECTION");
-    expect(status).toHaveTextContent("Saved");
-  });
-
-  it('sets displayName to "Status" for React DevTools and stack traces', () => {
-    // Assert — an empty displayName would render it as an anonymous component.
-    expect(Status.displayName).toBe("Status");
-  });
-});

package/src/Status/index.ts

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

package/src/Status/types.ts

@@ -1,20 +0,0 @@
-import { ComponentProps, ReactNode } from "react";
-
-/**
- * Props for {@link Status} — all native `<div>` attributes plus the
- * `asChild` escape hatch.
- */
-export type StatusProps = ComponentProps<"div"> & {
-  /**
-   * Renders the child element instead of a native `<div>`, merging
-   * `role="status"` and all other props onto it via {@link Slot}.
-   * Event handlers compose with the child's own handlers (child runs
-   * first). Use this to apply the live-region role to a semantically
-   * appropriate element (e.g. `<output>`).
-   * @default false
-   */
-  asChild?: boolean;
-  /** Content to announce. A live region announces changes that occur
-   * after the region is already present in the DOM. */
-  children?: ReactNode;
-};

package/src/Switch/README.md

@@ -1,126 +0,0 @@
-# Switch
-
-Headless, accessible **Switch** — a compound component built on a **real,
-visually-hidden native `<input type="checkbox" role="switch">`**. Semantically
-represents an immediate on/off action (as opposed to a selection choice), and —
-being a genuine native input — participates in forms. Zero styles ship.
-
-```tsx
-import { Switch } from "@primitiv-ui/react";
-
-<Switch.Root name="notify" value="on" defaultChecked aria-label="Enable notifications">
-  <Switch.Thumb />
-</Switch.Root>
-```
-
-## Sub-components
-
-| Export | Element | ARIA / data hooks | `asChild` |
-|--------|---------|------------------|-----------|
-| `Switch.Root` | `<label>` + hidden `<input>` | input is `role="switch"`; `data-state`, `data-disabled` on the label | — |
-| `Switch.Thumb` | `<span>` | `aria-hidden="true"`, `data-state` | yes |
-
-`Switch.Root`'s `className` / `style` style the **track** (the `<label>` you
-see). Every other prop spreads onto the hidden `<input>`, because semantically
-the Root *is* the switch: pass `name`, `value`, `id`, `required`, `aria-*`,
-`ref`, etc. straight to `Switch.Root`.
-
-## State modes
-
-### Uncontrolled
-
-Pass `defaultChecked` (or omit for off on mount). The **browser** owns the
-value, so the switch participates in forms and resets.
-
-```tsx
-<Switch.Root name="dark" value="on" defaultChecked aria-label="Enable dark mode">
-  <Switch.Thumb />
-</Switch.Root>
-```
-
-### Controlled
-
-Pass `checked` and `onCheckedChange` together. The parent owns the value.
-
-```tsx
-const [enabled, setEnabled] = useState(false);
-
-<Switch.Root checked={enabled} onCheckedChange={setEnabled} aria-label="...">
-  <Switch.Thumb />
-</Switch.Root>
-```
-
-> **`data-state` is a best-effort mirror.** Drive the *visual* on/off look off
-> the input's native `:checked` (and `:has(> input:checked)` on the track), as
-> the shipped registry stylesheet does — it stays correct through a form reset,
-> which fires no React event.
-
-## Keyboard interaction
-
-| Key | Behaviour |
-|-----|-----------|
-| `Space` | Toggle the switch (native checkbox behaviour) |
-| `Tab` | Move focus to or from the switch |
-
-`Enter` does **not** toggle — a checkbox-based control responds to `Space` only.
-
-## Disabled
-
-Pass `disabled` on the Root. The native attribute suppresses clicks and removes
-the switch from the focus ring. `data-disabled=""` is set on the track for CSS.
-
-```tsx
-<Switch.Root aria-label="Enable feature" disabled>
-  <Switch.Thumb />
-</Switch.Root>
-```
-
-## Size
-
-The styled surface installed by `primitiv add switch` exposes a `size` prop.
-The default is `md` (`xs` · `sm` · `md` · `lg` · `xl`).
-
-```tsx
-<Switch size="sm" aria-label="Enable notifications" />
-```
-
-## The Thumb
-
-`Switch.Thumb` is **always mounted**. Its visual position (off → on) should be
-driven by CSS keyed off the input's native `:checked` (a sibling selector), so
-it stays correct through a form reset. It gives consumers a real DOM node to
-animate with `transition` or Web Animations.
-
-```css
-.switch {
-  position: relative;
-}
-.switch:has(> input:checked) {
-  background: #6366f1;
-}
-.switch__thumb {
-  transition: translate var(--primitiv-motion-duration-control) var(--primitiv-motion-easing-default);
-}
-.switch > input:checked ~ .switch__thumb {
-  translate: 1.25rem 0;
-}
-```
-
-## `asChild` composition
-
-`Switch.Thumb` accepts `asChild`: the library's `aria-hidden`, `data-state`, and
-ref are merged onto the consumer's element.
-
-```tsx
-<Switch.Thumb asChild>
-  <span className="my-thumb" />
-</Switch.Thumb>
-```
-
-## Styling hooks
-
-| Attribute | Values | Set on |
-|-----------|--------|--------|
-| `data-state` | `"checked"` \| `"unchecked"` | `Switch.Root` (track), `Switch.Thumb` |
-| `data-disabled` | `""` (present when disabled) | `Switch.Root` (track) |
-| `:checked` / `:focus-visible` / `:disabled` | native | the hidden `<input>` |

package/src/Switch/Switch.tsx

@@ -1,203 +0,0 @@
-import { useMemo } from "react";
-import type { ReactElement } from "react";
-
-import { Slot } from "../Slot/index.ts";
-
-import { SwitchContext } from "./SwitchContext";
-import { useSwitchContext, useSwitchRoot } from "./hooks/index.ts";
-import { SwitchRootProps, SwitchThumbProps } from "./types";
-
-function dataStateOf(checked: boolean) {
-  return checked ? ("checked" as const) : ("unchecked" as const);
-}
-
-/**
- * The root of a Switch — a `<label>` that is itself the **visible track** and
- * wraps a **real, visually-hidden `<input type="checkbox" role="switch">`**
- * (the focusable, form-participating control) plus the
- * {@link SwitchThumb | `Switch.Thumb`}. It provides
- * {@link SwitchContext | `SwitchContext`} to the thumb.
- *
- * Because the underlying element is a genuine native checkbox (with the switch
- * role), it behaves like a real form field: it submits its `value` under `name`
- * with an enclosing form, resets with it, and gets keyboard activation and
- * focus for free. Semantically it represents an immediate on/off action.
- *
- * Props routing: `className` / `style` style the **track** (the `<label>` you
- * see — the input is hidden); every other prop (`name`, `value`, `id`,
- * `aria-*`, `required`, `disabled`, `ref`, ...) spreads onto the input, because
- * semantically the Root *is* the switch.
- *
- * Supports two state modes, statically discriminated at the type level:
- *
- * - **Uncontrolled** — pass `defaultChecked` (or omit). The browser owns the
- *   value, so the switch participates in forms and resets.
- * - **Controlled** — pass `checked` *and* `onCheckedChange` together.
- *
- * **Styling hooks.** `data-state="checked" | "unchecked"` and `data-disabled=""`
- * on the track (and `data-state` on the thumb). These mirror the input, but
- * shipped CSS positions the thumb off the input's native `:checked` instead;
- * `data-state` is a convenience mirror.
- *
- * **Keyboard.** Toggles on `Space` (the native checkbox behaviour); `Enter`
- * does not toggle a checkbox-based control.
- *
- * **`onChange` composition.** The consumer's raw `onChange` fires first; if it
- * calls `event.preventDefault()`, the internal mirror update and
- * `onCheckedChange` are skipped for that event. See {@link SwitchRootBaseProps}.
- *
- * @extends HTMLInputElement
- *
- * @example Uncontrolled
- * ```tsx
- * <Switch.Root name="notify" value="on" defaultChecked aria-label="Enable notifications">
- *   <Switch.Thumb />
- * </Switch.Root>
- * ```
- *
- * @example Controlled
- * ```tsx
- * const [enabled, setEnabled] = useState(false);
- *
- * <Switch.Root checked={enabled} onCheckedChange={setEnabled} aria-label="...">
- *   <Switch.Thumb />
- * </Switch.Root>
- * ```
- */
-export function SwitchRoot({
-  className,
-  style,
-  defaultChecked,
-  checked,
-  onCheckedChange,
-  onChange,
-  disabled,
-  children,
-  ref,
-  ...inputRest
-}: SwitchRootProps): ReactElement {
-  const {
-    checked: isChecked,
-    handleChange,
-    inputStateProps,
-  } = useSwitchRoot({ defaultChecked, checked, onCheckedChange, onChange });
-  const contextValue = useMemo(
-    () => ({ checked: isChecked, disabled: Boolean(disabled) }),
-    [isChecked, disabled],
-  );
-  return (
-    <SwitchContext.Provider value={contextValue}>
-      <label
-        className={className}
-        style={style}
-        data-state={dataStateOf(isChecked)}
-        data-disabled={disabled ? "" : undefined}
-      >
-        <input
-          type="checkbox"
-          role="switch"
-          ref={ref}
-          disabled={disabled}
-          {...inputRest}
-          {...inputStateProps}
-          onChange={handleChange}
-        />
-        {children}
-      </label>
-    </SwitchContext.Provider>
-  );
-}
-
-// Runtime-dead: the compound alias below (same object via Object.assign)
-// overwrites this to "Switch" at load, so the value is never observable. The
-// assignment stays because it declares `displayName` on `typeof SwitchRoot`,
-// which TSwitchCompound extends.
-// Stryker disable next-line StringLiteral: overwritten by the compound alias — an equivalent mutant.
-SwitchRoot.displayName = "SwitchRoot";
-
-/**
- * A decorative `<span aria-hidden="true">` representing the sliding thumb of
- * the switch. Always mounted — its position is driven entirely by CSS, which
- * should key off the input's native `:checked` so it stays correct through a
- * form reset.
- *
- * **Styling hook.** Mirrors the root's `data-state="checked" | "unchecked"`.
- *
- * **`asChild` prop.** Pass `asChild` to render the consumer's own element as
- * the thumb, with `aria-hidden` and `data-state` merged in via the
- * {@link Slot} pattern. See {@link SwitchThumbProps}.
- *
- * @extends HTMLSpanElement
- *
- * @example
- * ```tsx
- * <Switch.Root aria-label="Enable notifications">
- *   <Switch.Thumb />
- * </Switch.Root>
- * ```
- *
- * @throws if rendered outside a `Switch.Root`.
- */
-export function SwitchThumb({
-  children,
-  asChild = false,
-  ...rest
-}: SwitchThumbProps): ReactElement {
-  const { checked } = useSwitchContext();
-  const thumbProps = {
-    ...rest,
-    "aria-hidden": "true" as const,
-    "data-state": dataStateOf(checked),
-  };
-  if (asChild) {
-    return <Slot {...thumbProps}>{children}</Slot>;
-  }
-  return <span {...thumbProps}>{children}</span>;
-}
-
-/** @internal */
-SwitchThumb.displayName = "SwitchThumb";
-
-/** Type of the {@link Switch} compound — the Root callable plus its sub-components. */
-export type TSwitchCompound = typeof SwitchRoot & {
-  /** The root track, owning checked state and context. */
-  Root: typeof SwitchRoot;
-  /** The sliding thumb indicator. */
-  Thumb: typeof SwitchThumb;
-};
-
-/**
- * Headless, accessible **Switch** — a compound component built on a **real,
- * visually-hidden native `<input type="checkbox" role="switch">`**. Unlike a
- * button dressed up with `role="switch"`, it participates in native forms.
- * Semantically represents an immediate on/off action (as opposed to a selection
- * choice). Zero styles ship.
- *
- * `Switch` is both callable (an alias of
- * {@link SwitchRoot | `Switch.Root`}) and carries its sub-components as
- * static properties.
- *
- * - {@link SwitchRoot | `Switch.Root`} — the track: label + hidden input, state owner, context provider.
- * - {@link SwitchThumb | `Switch.Thumb`} — always-mounted decorative thumb;
- *   position driven by CSS (the input's native `:checked`).
- *
- * @example Minimal usage
- * ```tsx
- * import { Switch } from "@primitiv-ui/react";
- *
- * <Switch.Root name="notify" value="on" aria-label="Enable notifications">
- *   <Switch.Thumb />
- * </Switch.Root>
- * ```
- *
- * @see {@link SwitchRoot} for state modes and form participation.
- * @see {@link SwitchThumb} for styling the sliding thumb.
- */
-const SwitchCompound: TSwitchCompound = Object.assign(SwitchRoot, {
-  Root: SwitchRoot,
-  Thumb: SwitchThumb,
-});
-
-SwitchCompound.displayName = "Switch";
-
-export { SwitchCompound as Switch };

package/src/Switch/SwitchContext.ts

@@ -1,20 +0,0 @@
-import type { Context } from "react";
-import { createStrictContext } from "../utils/index.ts";
-
-/** Value shared from `Switch.Root` to `Switch.Thumb` through context. */
-export type SwitchContextValue = {
-  /** Whether the switch is currently checked (best-effort mirror of the input). */
-  checked: boolean;
-  /** Whether the switch is disabled, for the `data-disabled` hook. */
-  disabled: boolean;
-};
-
-const switchContextPair = createStrictContext<SwitchContextValue>(
-  "Switch.Thumb must be rendered inside a <Switch.Root>.",
-);
-
-/** React context carrying the {@link SwitchContextValue} for `Switch.Thumb`. */
-export const SwitchContext: Context<SwitchContextValue | null> =
-  switchContextPair[0];
-/** Read the nearest {@link SwitchContextValue}; throws outside `Switch.Root`. */
-export const useSwitchContext: () => SwitchContextValue = switchContextPair[1];

package/src/Switch/__tests__/Switch.asChild.test.tsx

@@ -1,38 +0,0 @@
-import { render, screen } from "@testing-library/react";
-
-import { Switch } from "../Switch";
-
-describe("Switch asChild", () => {
-  it("renders the Thumb as the consumer element when asChild is set", () => {
-    // Arrange & Act
-    render(
-      <Switch.Root aria-label="Enable notifications">
-        <Switch.Thumb asChild>
-          <span data-testid="custom-thumb" />
-        </Switch.Thumb>
-      </Switch.Root>,
-    );
-    const thumb = screen.getByTestId("custom-thumb");
-
-    // Assert — our span rendered; aria-hidden and data-state merged onto it
-    expect(thumb).toHaveAttribute("aria-hidden", "true");
-    expect(thumb).toHaveAttribute("data-state", "unchecked");
-  });
-
-  it("merges the checked data-state onto the asChild Thumb", () => {
-    // Arrange & Act
-    render(
-      <Switch.Root aria-label="Enable notifications" defaultChecked>
-        <Switch.Thumb asChild>
-          <span data-testid="custom-thumb" />
-        </Switch.Thumb>
-      </Switch.Root>,
-    );
-
-    // Assert
-    expect(screen.getByTestId("custom-thumb")).toHaveAttribute(
-      "data-state",
-      "checked",
-    );
-  });
-});

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

@@ -1,102 +0,0 @@
-import { createRef } from "react";
-import { render, screen } from "@testing-library/react";
-
-import { Switch } from "../Switch";
-
-describe("Switch basic rendering", () => {
-  it('renders a native <input type="checkbox" role="switch">', () => {
-    // Arrange & Act
-    render(<Switch.Root aria-label="Enable notifications" />);
-    const sw = screen.getByRole("switch", { name: "Enable notifications" });
-
-    // Assert
-    expect(sw.tagName).toBe("INPUT");
-    expect(sw).toHaveAttribute("type", "checkbox");
-  });
-
-  it("wraps the input in a <label> so the visible track is clickable", () => {
-    // Arrange & Act
-    render(<Switch.Root aria-label="Enable notifications" />);
-
-    // Assert
-    expect(
-      screen.getByRole("switch", { name: "Enable notifications" }).closest("label"),
-    ).not.toBeNull();
-  });
-
-  it("is unchecked by default", () => {
-    // Arrange & Act
-    render(<Switch.Root aria-label="Enable notifications" />);
-
-    // Assert
-    expect(
-      screen.getByRole("switch", { name: "Enable notifications" }),
-    ).not.toBeChecked();
-  });
-
-  it("forwards native input attributes (name, value) to the input", () => {
-    // Arrange & Act
-    render(<Switch.Root name="notify" value="on" aria-label="Enable notifications" />);
-    const sw = screen.getByRole("switch", { name: "Enable notifications" });
-
-    // Assert
-    expect(sw).toHaveAttribute("name", "notify");
-    expect(sw).toHaveAttribute("value", "on");
-  });
-
-  it("applies className to the track, not the hidden input", () => {
-    // Arrange & Act
-    render(<Switch.Root className="track" aria-label="Enable notifications" />);
-    const sw = screen.getByRole("switch", { name: "Enable notifications" });
-
-    // Assert
-    expect(sw).not.toHaveClass("track");
-    expect(sw.closest("label")).toHaveClass("track");
-  });
-
-  it("forwards a ref to the underlying input", () => {
-    // Arrange
-    const ref = createRef<HTMLInputElement>();
-
-    // Act
-    render(<Switch.Root ref={ref} aria-label="Enable notifications" />);
-
-    // Assert
-    expect(ref.current).toBe(
-      screen.getByRole("switch", { name: "Enable notifications" }),
-    );
-  });
-
-  it('defaults data-state="unchecked" on the track on mount', () => {
-    // Arrange & Act
-    const { container } = render(<Switch.Root aria-label="Enable notifications" />);
-
-    // Assert
-    expect(container.querySelector("label")).toHaveAttribute(
-      "data-state",
-      "unchecked",
-    );
-  });
-
-  it("renders Switch.Thumb as an aria-hidden <span> inside the track", () => {
-    // Arrange & Act
-    render(
-      <Switch.Root aria-label="Enable notifications">
-        <Switch.Thumb data-testid="thumb" />
-      </Switch.Root>,
-    );
-    const thumb = screen.getByTestId("thumb");
-
-    // Assert
-    expect(thumb.tagName).toBe("SPAN");
-    expect(thumb).toHaveAttribute("aria-hidden", "true");
-    expect(thumb).toHaveAttribute("data-state", "unchecked");
-  });
-
-  it("sets a displayName on the compound and the Thumb", () => {
-    // Assert — empty displayNames would render each as anonymous in DevTools.
-    // Root aliases the compound (Object.assign), so its name is "Switch".
-    expect(Switch.displayName).toBe("Switch");
-    expect(Switch.Thumb.displayName).toBe("SwitchThumb");
-  });
-});