@primitiv-ui/react 0.1.37 → 0.1.39

package/src/ToggleGroup/__tests__/ToggleGroup.single-mode.test.tsx

@@ -1,139 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-import { ToggleGroup } from "../ToggleGroup";
-
-function Fixture({
-  defaultValue,
-  value,
-  onValueChange,
-}: {
-  defaultValue?: string;
-  value?: string | undefined;
-  onValueChange?: (v: string | undefined) => void;
-}) {
-  if (value !== undefined || onValueChange) {
-    return (
-      <ToggleGroup.Root
-        type="single"
-        value={value}
-        onValueChange={onValueChange!}
-        aria-label="Alignment"
-      >
-        <ToggleGroup.Item value="left">Left</ToggleGroup.Item>
-        <ToggleGroup.Item value="center">Center</ToggleGroup.Item>
-        <ToggleGroup.Item value="right">Right</ToggleGroup.Item>
-      </ToggleGroup.Root>
-    );
-  }
-  return (
-    <ToggleGroup.Root
-      type="single"
-      defaultValue={defaultValue}
-      aria-label="Alignment"
-    >
-      <ToggleGroup.Item value="left">Left</ToggleGroup.Item>
-      <ToggleGroup.Item value="center">Center</ToggleGroup.Item>
-      <ToggleGroup.Item value="right">Right</ToggleGroup.Item>
-    </ToggleGroup.Root>
-  );
-}
-
-describe("ToggleGroup single mode — uncontrolled", () => {
-  it("starts with no item pressed when defaultValue is omitted", () => {
-    render(<Fixture />);
-    for (const name of ["Left", "Center", "Right"]) {
-      expect(screen.getByRole("button", { name })).toHaveAttribute(
-        "aria-pressed",
-        "false",
-      );
-    }
-  });
-
-  it("starts with the defaultValue item pressed", () => {
-    render(<Fixture defaultValue="center" />);
-    expect(screen.getByRole("button", { name: "Center" })).toHaveAttribute(
-      "aria-pressed",
-      "true",
-    );
-    expect(screen.getByRole("button", { name: "Left" })).toHaveAttribute(
-      "aria-pressed",
-      "false",
-    );
-  });
-
-  it("pressing an unpressed item presses it and unpresses the previously pressed item", async () => {
-    const user = userEvent.setup();
-    render(<Fixture defaultValue="left" />);
-    await user.click(screen.getByRole("button", { name: "Center" }));
-    expect(screen.getByRole("button", { name: "Center" })).toHaveAttribute(
-      "aria-pressed",
-      "true",
-    );
-    expect(screen.getByRole("button", { name: "Left" })).toHaveAttribute(
-      "aria-pressed",
-      "false",
-    );
-  });
-
-  it("pressing the active item deselects it (toggle-off)", async () => {
-    const user = userEvent.setup();
-    render(<Fixture defaultValue="left" />);
-    await user.click(screen.getByRole("button", { name: "Left" }));
-    expect(screen.getByRole("button", { name: "Left" })).toHaveAttribute(
-      "aria-pressed",
-      "false",
-    );
-  });
-
-  it('sets data-state="on" on the pressed item and "off" on others', async () => {
-    const user = userEvent.setup();
-    render(<Fixture />);
-    await user.click(screen.getByRole("button", { name: "Right" }));
-    expect(screen.getByRole("button", { name: "Right" })).toHaveAttribute(
-      "data-state",
-      "on",
-    );
-    expect(screen.getByRole("button", { name: "Left" })).toHaveAttribute(
-      "data-state",
-      "off",
-    );
-  });
-});
-
-describe("ToggleGroup single mode — controlled", () => {
-  it("reflects the controlled value", () => {
-    render(<Fixture value="center" onValueChange={vi.fn()} />);
-    expect(screen.getByRole("button", { name: "Center" })).toHaveAttribute(
-      "aria-pressed",
-      "true",
-    );
-  });
-
-  it("calls onValueChange with the new value when a different item is clicked", async () => {
-    const user = userEvent.setup();
-    const onValueChange = vi.fn();
-    render(<Fixture value="left" onValueChange={onValueChange} />);
-    await user.click(screen.getByRole("button", { name: "Center" }));
-    expect(onValueChange).toHaveBeenCalledWith("center");
-  });
-
-  it("calls onValueChange with undefined when the active item is clicked", async () => {
-    const user = userEvent.setup();
-    const onValueChange = vi.fn();
-    render(<Fixture value="left" onValueChange={onValueChange} />);
-    await user.click(screen.getByRole("button", { name: "Left" }));
-    expect(onValueChange).toHaveBeenCalledWith(undefined);
-  });
-
-  it("does not flip the UI without a re-render (controlled contract)", async () => {
-    const user = userEvent.setup();
-    const onValueChange = vi.fn();
-    render(<Fixture value="left" onValueChange={onValueChange} />);
-    await user.click(screen.getByRole("button", { name: "Center" }));
-    expect(screen.getByRole("button", { name: "Left" })).toHaveAttribute(
-      "aria-pressed",
-      "true",
-    );
-  });
-});

package/src/ToggleGroup/hooks/index.ts

@@ -1,2 +0,0 @@
-export { useToggleGroupRoot } from "./useToggleGroupRoot";
-export { useToggleGroupContext } from "./useToggleGroupContext";

package/src/ToggleGroup/hooks/useToggleGroupContext.ts

@@ -1 +0,0 @@
-export { useToggleGroupContext } from "../ToggleGroupContext";

package/src/ToggleGroup/hooks/useToggleGroupRoot.ts

@@ -1,130 +0,0 @@
-import { useCallback, useMemo, useState } from "react";
-
-import { useCollection, useControllableState } from "../../hooks/index.ts";
-
-type ItemMeta = { element: HTMLButtonElement; disabled: boolean };
-
-type UseToggleGroupRootArgs = {
-  type: "single" | "multiple";
-  defaultValue?: string | string[];
-  value?: string | string[] | undefined;
-  onValueChange?:
-    | ((v: string | undefined) => void)
-    | ((v: string[]) => void);
-  orientation: "horizontal" | "vertical";
-  dir: "ltr" | "rtl";
-};
-
-function toArray(v: string | string[] | undefined): string[] {
-  if (v === undefined) return [];
-  if (typeof v === "string") return [v];
-  return v;
-}
-
-export function useToggleGroupRoot({
-  type,
-  defaultValue,
-  value: rawControlled,
-  onValueChange,
-  orientation,
-  dir,
-}: UseToggleGroupRootArgs) {
-  const isControlled = onValueChange !== undefined;
-  const normalizedControlled = isControlled ? toArray(rawControlled) : undefined;
-  const normalizedDefault = toArray(defaultValue);
-
-  const [value, setValue] = useControllableState<string[]>(
-    normalizedControlled,
-    normalizedDefault,
-  );
-
-  const toggle = useCallback(
-    (itemValue: string) => {
-      const isSelected = value.includes(itemValue);
-      if (type === "single") {
-        // Deselecting clears the selection to the empty array. Stryker's
-        // ArrayDeclaration mutant fills this with a phantom value, but since
-        // that value can never equal a registered item's `value` — and single
-        // mode always overwrites the whole array on the next selection — no
-        // item ever reads it as pressed. The mutation is observationally
-        // identical, so it is isolated here to keep the disable off the tested
-        // `[itemValue]` literal below.
-        // Stryker disable next-line ArrayDeclaration
-        const cleared: string[] = [];
-        const next = isSelected ? cleared : [itemValue];
-        setValue(next);
-        (onValueChange as ((v: string | undefined) => void) | undefined)?.(
-          isSelected ? undefined : itemValue,
-        );
-      } else {
-        const next = isSelected
-          ? value.filter((v) => v !== itemValue)
-          : [...value, itemValue];
-        setValue(next);
-        (onValueChange as ((v: string[]) => void) | undefined)?.(next);
-      }
-    },
-    [type, value, setValue, onValueChange],
-  );
-
-  const {
-    register: registerBase,
-    itemsRef,
-    keys: itemValues,
-  } = useCollection<string, ItemMeta>();
-
-  const registerItem = useCallback(
-    (itemValue: string, element: HTMLButtonElement | null, disabled = false) => {
-      registerBase(itemValue, element ? { element, disabled } : null);
-    },
-    // `registerBase` is a stable useCollection callback (its own deps never
-    // change), so emptying this array yields the identical memoised function.
-    // Stryker disable next-line ArrayDeclaration: equivalent — stable dependency.
-    [registerBase],
-  );
-
-  const disabledValues = useMemo(
-    () =>
-      new Set(
-        Array.from(itemsRef.current.entries())
-          .filter(([, meta]) => meta.disabled)
-          .map(([v]) => v),
-      ),
-    [itemValues, itemsRef],
-  );
-
-  const focusItem = useCallback(
-    (itemValue: string) => {
-      // `itemValue` is always sourced from `navigable` (the enabled subset of
-      // `itemValues`), and useCollection's register() writes `itemsRef` and the
-      // `itemValues` state together — so a value that reaches here is guaranteed
-      // to have a live entry in the map.
-      // Stryker disable next-line OptionalChaining: unreachable given that invariant.
-      itemsRef.current.get(itemValue)?.element.focus();
-    },
-    // `itemsRef` is a stable RefObject, so emptying this array yields the
-    // identical memoised function.
-    // Stryker disable next-line ArrayDeclaration: equivalent — stable dependency.
-    [itemsRef],
-  );
-
-  // Tracks which item holds the tabstop. Initialises to the first pressed
-  // value so the selected item is immediately tabbable. Updated via the
-  // onFocus handler in each Item so the tabstop follows actual focus.
-  const [focusedValue, setFocusedValue] = useState<string | undefined>(
-    () => value[0],
-  );
-
-  return {
-    value,
-    toggle,
-    registerItem,
-    itemValues,
-    disabledValues,
-    focusItem,
-    focusedValue,
-    setFocusedValue,
-    orientation,
-    dir,
-  };
-}

package/src/ToggleGroup/index.ts

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

package/src/ToggleGroup/types.ts

@@ -1,165 +0,0 @@
-import { HTMLAttributes, ButtonHTMLAttributes, ReactNode, Ref } from "react";
-
-/**
- * Mode-independent props shared by every `ToggleGroup.Root` variant —
- * orientation, direction, `asChild`, children, and the ref. Combined with
- * a mode-specific arm to form {@link ToggleGroupRootProps}.
- */
-export type ToggleGroupRootBaseProps = Omit<
-  HTMLAttributes<HTMLDivElement>,
-  "dir" | "defaultValue"
-> & {
-  /** Layout axis for keyboard navigation. `"horizontal"` binds
-   * ArrowLeft/ArrowRight; `"vertical"` binds ArrowUp/ArrowDown. Surfaces as
-   * `data-orientation` on the root for styling; it does not itself apply any
-   * flex/grid layout.
-   * @default "horizontal" */
-  orientation?: "horizontal" | "vertical";
-  /** Reading direction. In `"rtl"` the horizontal arrow keys are mirrored so
-   * focus follows the visual order. Inherited from the nearest
-   * {@link DirectionProvider} when omitted, falling back to `"ltr"`. */
-  dir?: "ltr" | "rtl";
-  /** Render a single consumer-supplied element in place of the native
-   * `<div>`, with the group's `role="group"`, `data-orientation`, and `ref`
-   * merged onto it via the {@link Slot} pattern.
-   * @default false */
-  asChild?: boolean;
-  /** The {@link ToggleGroupItemProps | `ToggleGroup.Item`} elements that make
-   * up the segmented control. */
-  children?: ReactNode;
-  /** Forwarded to the underlying `HTMLDivElement`. */
-  ref?: Ref<HTMLDivElement>;
-};
-
-/**
- * Single-selection mode, uncontrolled — at most one item pressed, with the
- * initial value supplied via `defaultValue`.
- */
-export type SingleUncontrolledProps = {
-  /** Selects single-selection semantics: at most one item pressed at a time,
-   * and pressing the active item again clears the selection. */
-  type: "single";
-  /** Value of the item pressed on first render. Omit to start with nothing
-   * pressed. */
-  defaultValue?: string;
-  /** Forbidden in uncontrolled mode — use `defaultValue`. */
-  value?: never;
-  /** Forbidden in uncontrolled mode. */
-  onValueChange?: never;
-};
-
-/**
- * Single-selection mode, controlled — the pressed value is owned by the
- * caller via `value` / `onValueChange`.
- */
-export type SingleControlledProps = {
-  /** Selects single-selection semantics: at most one item pressed at a time,
-   * and pressing the active item again clears the selection. */
-  type: "single";
-  /** The currently pressed item's value, or `undefined` when none is pressed.
-   * Must be kept in sync by the caller via `onValueChange`. */
-  value: string | undefined;
-  /** Called with the requested next value — the pressed item's value, or
-   * `undefined` when the active item is pressed again to deselect it. */
-  onValueChange: (value: string | undefined) => void;
-  /** Forbidden in controlled mode — use `value`. */
-  defaultValue?: never;
-};
-
-/**
- * Multiple-selection mode, uncontrolled — items toggle independently, with
- * the initial set supplied via `defaultValue`.
- */
-export type MultipleUncontrolledProps = {
-  /** Selects multiple-selection semantics: any number of items can be pressed
-   * simultaneously and each toggles independently. */
-  type: "multiple";
-  /** Values of the items pressed on first render. Omit to start with nothing
-   * pressed. */
-  defaultValue?: string[];
-  /** Forbidden in uncontrolled mode — use `defaultValue`. */
-  value?: never;
-  /** Forbidden in uncontrolled mode. */
-  onValueChange?: never;
-};
-
-/**
- * Multiple-selection mode, controlled — the set of pressed values is owned
- * by the caller via `value` / `onValueChange`.
- */
-export type MultipleControlledProps = {
-  /** Selects multiple-selection semantics: any number of items can be pressed
-   * simultaneously and each toggles independently. */
-  type: "multiple";
-  /** The full set of currently pressed item values. Must be kept in sync by
-   * the caller via `onValueChange`. */
-  value: string[];
-  /** Called with the complete next array of pressed values whenever the user
-   * toggles any item. */
-  onValueChange: (value: string[]) => void;
-  /** Forbidden in controlled mode — use `value`. */
-  defaultValue?: never;
-};
-
-/**
- * Props for `ToggleGroup.Root`. Combines the shared
- * {@link ToggleGroupRootBaseProps} with one mode-specific arm — single or
- * multiple, controlled or uncontrolled — so the `value` / `defaultValue` /
- * `onValueChange` shape is enforced per `type`.
- */
-export type ToggleGroupRootProps = ToggleGroupRootBaseProps &
-  (
-    | SingleUncontrolledProps
-    | SingleControlledProps
-    | MultipleUncontrolledProps
-    | MultipleControlledProps
-  );
-
-/**
- * Props for `ToggleGroup.Item` — a pressable toggle button. `value`
- * identifies the item within the group; `asChild` merges the behaviour
- * onto a custom child element.
- */
-export type ToggleGroupItemProps = Omit<
-  ButtonHTMLAttributes<HTMLButtonElement>,
-  "type" | "value"
-> & {
-  /** Identifies this item within the group. It is this string — not the
-   * visible label — that is compared against the group's pressed
-   * `value` / `defaultValue`; use `children` for the label. */
-  value: string;
-  /** Forwards the native `disabled` attribute and removes the item from the
-   * roving tab order so arrow-key navigation skips it. Also sets
-   * `data-disabled=""` for CSS targeting.
-   * @default false */
-  disabled?: boolean;
-  /** Render a single consumer-supplied element in place of the native
-   * `<button>`, with the item's `aria-pressed`, `data-state`, `tabIndex`, and
-   * event handlers merged onto it via the {@link Slot} pattern.
-   * @default false */
-  asChild?: boolean;
-  /** Forwarded to the underlying `HTMLButtonElement`. */
-  ref?: Ref<HTMLButtonElement>;
-};
-
-/**
- * Context shared from `ToggleGroup.Root` to its items — the pressed
- * values, the toggle action, item registration for roving tabindex, and
- * the resolved orientation / direction.
- */
-export type ToggleGroupContextValue = {
-  value: string[];
-  toggle: (itemValue: string) => void;
-  registerItem: (
-    itemValue: string,
-    element: HTMLButtonElement | null,
-    disabled?: boolean,
-  ) => void;
-  itemValues: string[];
-  disabledValues: Set<string>;
-  focusItem: (itemValue: string) => void;
-  focusedValue: string | undefined;
-  setFocusedValue: (itemValue: string) => void;
-  orientation: "horizontal" | "vertical";
-  dir: "ltr" | "rtl";
-};

package/src/Tooltip/README.md

@@ -1,214 +0,0 @@
-# Tooltip
-
-A headless, accessible compound component implementing the
-[WAI-ARIA Tooltip pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/).
-
-Tooltip is built as a pure React state machine with no floating-UI or
-measurement dependency. Positioning is fully the consumer's responsibility
-via CSS Anchor Positioning — the component emits no inline styles.
-
-- Hover and focus open/close with configurable delay.
-- Provider-level skip-delay: a second tooltip opens instantly when one is
-  already open and the cursor moves between triggers.
-- Grace period: 100 ms after leaving the trigger lets users move the cursor
-  into the tooltip content without it closing.
-- `onEscapeKeyDown` and `onPointerDownOutside` escape hatches.
-- Portal support for breaking out of stacking contexts.
-- `forceMount` on Portal and Content for CSS exit animations.
-- `asChild` composition on Trigger and Arrow.
-
-```tsx
-import { Tooltip } from "@primitiv-ui/react";
-
-<Tooltip.Provider>
-  <Tooltip.Root>
-    <Tooltip.Trigger className="save-btn">Save</Tooltip.Trigger>
-    <Tooltip.Portal>
-      <Tooltip.Content className="tooltip">
-        Save your changes
-      </Tooltip.Content>
-    </Tooltip.Portal>
-  </Tooltip.Root>
-</Tooltip.Provider>
-```
-
-## Sub-components
-
-| Export              | Element          | Notes                                                                                                  |
-| ------------------- | ---------------- | ------------------------------------------------------------------------------------------------------ |
-| `Tooltip.Provider`  | context provider | Sets `delayDuration` (default 700 ms) and `skipDelayDuration` (default 300 ms) for all descendants    |
-| `Tooltip.Root`      | context provider | Owns open state per tooltip. `open`, `defaultOpen`, `onOpenChange`, `delayDuration`, `disableHoverableContent` |
-| `Tooltip.Trigger`   | `<button>`       | Wires `aria-describedby`, hover/focus handlers. `asChild`                                              |
-| `Tooltip.Portal`    | `createPortal`   | `container?: HTMLElement` (default `document.body`). `forceMount`                                      |
-| `Tooltip.Content`   | `<div role="tooltip">` | `data-state`. Escape hatches for Esc / pointer-down-outside. `forceMount`                       |
-| `Tooltip.Arrow`     | `<span>`         | Optional visual pointer. All positioning via consumer CSS. `asChild`                                   |
-
-## Keyboard interaction
-
-| Key   | Behaviour                                                                |
-| ----- | ------------------------------------------------------------------------ |
-| `Tab` | Moves focus to the trigger; opens the tooltip immediately (no delay)     |
-| `Tab` (away) | Closes the tooltip immediately                                  |
-| `Esc` | Closes the tooltip. Preventable via `onEscapeKeyDown`                    |
-
-## State modes
-
-- **Uncontrolled** — pass `defaultOpen` (or omit for closed on mount).
-- **Controlled** — pass `open` and `onOpenChange` together.
-
-The two shapes are statically discriminated at the type level.
-
-```tsx
-// Uncontrolled
-<Tooltip.Root defaultOpen>...</Tooltip.Root>
-
-// Controlled
-const [open, setOpen] = useState(false);
-<Tooltip.Root open={open} onOpenChange={setOpen}>
-  ...
-</Tooltip.Root>
-```
-
-## Delay and skip-delay
-
-`delayDuration` (default 700 ms) controls how long the pointer must rest on
-the trigger before the tooltip opens. Set it on `Tooltip.Provider` to apply
-globally, or on an individual `Tooltip.Root` to override.
-
-`skipDelayDuration` (default 300 ms) controls the "skip window". Once one
-tooltip is open, moving to any other trigger opens it instantly. After the
-last tooltip closes, the skip window is active for `skipDelayDuration` ms
-before the normal delay resumes.
-
-```tsx
-<Tooltip.Provider delayDuration={400} skipDelayDuration={150}>
-  ...
-</Tooltip.Provider>
-```
-
-## Hoverable content
-
-By default, users can move the cursor from the trigger into the tooltip
-content without it closing (a 100 ms grace period bridges the gap). Set
-`disableHoverableContent` on `Tooltip.Root` to close the tooltip immediately
-when the cursor leaves the trigger:
-
-```tsx
-<Tooltip.Root disableHoverableContent>
-  ...
-</Tooltip.Root>
-```
-
-## Escape hatches
-
-Both close paths — Escape and pointer-down-outside — fire observable
-callbacks on `Tooltip.Content`. Call `event.preventDefault()` to keep the
-tooltip open:
-
-```tsx
-<Tooltip.Content
-  onEscapeKeyDown={(event) => {
-    event.preventDefault(); // keep open when Escape is pressed
-  }}
-  onPointerDownOutside={(event) => {
-    event.preventDefault(); // keep open when clicking outside
-  }}
->
-  ...
-</Tooltip.Content>
-```
-
-## CSS anchor positioning
-
-This component is headless — it applies **no inline styles** and no
-positioning logic. Position the tooltip with CSS Anchor Positioning:
-
-```css
-/* Trigger declares an anchor name */
-.my-trigger {
-  anchor-name: --my-tooltip;
-}
-
-/* Content attaches to that anchor */
-.my-tooltip {
-  position: absolute;
-  position-anchor: --my-tooltip;
-  position-area: top;
-  position-try-fallbacks: bottom, left, right;
-  margin-bottom: 8px;
-}
-```
-
-For multiple tooltips on a page, assign each trigger/content pair a
-distinct `anchor-name`. A data attribute or CSS `:nth-child` selector
-can automate this without per-element class names.
-
-## Arrow
-
-`Tooltip.Arrow` renders a `<span>` (or a custom element via `asChild`).
-Arrow position is entirely consumer CSS. A common pattern places it with
-`position: absolute` relative to the content and uses `position-area` or
-a CSS pseudo-element triangle:
-
-```tsx
-<Tooltip.Content className="tooltip">
-  Save your changes
-  <Tooltip.Arrow className="tooltip__arrow" />
-</Tooltip.Content>
-```
-
-```css
-.tooltip__arrow {
-  position: absolute;
-  bottom: -4px;
-  left: 50%;
-  translate: -50% 0;
-  width: 8px;
-  height: 8px;
-  background: inherit;
-  rotate: 45deg;
-}
-```
-
-## Animation hooks
-
-`Tooltip.Portal` and `Tooltip.Content` accept `forceMount`. When set, the
-subtree stays in the DOM while closed so a CSS animation can play on
-`data-state="closed"`:
-
-```tsx
-<Tooltip.Portal forceMount>
-  <Tooltip.Content forceMount>...</Tooltip.Content>
-</Tooltip.Portal>
-```
-
-```css
-[data-state="open"]  { animation: fade-in var(--primitiv-motion-duration-control) var(--primitiv-motion-easing-enter); }
-[data-state="closed"] { animation: fade-out var(--primitiv-motion-duration-feedback) var(--primitiv-motion-easing-exit) forwards; }
-```
-
-## `asChild` composition
-
-`Tooltip.Trigger` and `Tooltip.Arrow` accept `asChild`. The component
-merges its own props (event handlers, ARIA, `data-state`) onto the
-child element; the child's own handlers run first.
-
-```tsx
-<Tooltip.Trigger asChild>
-  <a href="/help">Help</a>
-</Tooltip.Trigger>
-
-<Tooltip.Arrow asChild>
-  <svg viewBox="0 0 10 5">...</svg>
-</Tooltip.Arrow>
-```
-
-## Styling hooks
-
-`data-state="open" | "closed"` is set on both `Tooltip.Trigger` and
-`Tooltip.Content`:
-
-```css
-.tooltip[data-state="open"]   { opacity: 1; }
-.tooltip[data-state="closed"] { opacity: 0; }
-```