@primitiv-ui/react 0.1.37 → 0.1.39

package/src/Select/hooks/useSelectContent.ts

@@ -1,149 +0,0 @@
-import { KeyboardEvent, KeyboardEventHandler, useEffect, useRef } from "react";
-
-import { composeEventHandlers } from "../../Slot/index.ts";
-import { useSelectContext } from "../SelectContext";
-import {
-  OPTION_SELECTOR,
-  SELECTED_OPTION_SELECTOR,
-  TYPEAHEAD_RESET_MS,
-} from "../constants";
-import type { SelectContentProps } from "../types";
-
-type UseSelectContentArgs = {
-  onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
-  restProps: Omit<SelectContentProps, "children" | "onKeyDown" | "asChild">;
-};
-
-/**
- * Drives the listbox popover for the rich Select: opens/closes the native
- * Popover in sync with context `open`, moves focus onto the selected (or
- * first enabled) option on open, syncs React state when the browser
- * light-dismisses (`toggle`), and implements the WAI-ARIA listbox keyboard
- * contract — Arrow/Home/End roving focus (skipping disabled, wrapping),
- * Enter/Space to select, Escape to close (refocusing the trigger), and
- * printable-character typeahead.
- */
-export function useSelectContent({ onKeyDown, restProps }: UseSelectContentArgs) {
-  const { open, setOpen, contentId, triggerRef } = useSelectContext();
-  const listRef = useRef<HTMLDivElement | null>(null);
-  const typeaheadRef = useRef<{ query: string; timer: number | null }>({
-    query: "",
-    timer: null,
-  });
-
-  useEffect(() => {
-    const list = listRef.current!;
-    if (open) {
-      list.showPopover();
-      const selected = list.querySelector<HTMLElement>(SELECTED_OPTION_SELECTOR);
-      const first = list.querySelector<HTMLElement>(OPTION_SELECTOR);
-      (selected ?? first ?? list).focus();
-    } else {
-      try {
-        list.hidePopover();
-      } catch {
-        /* already hidden — no-op (e.g. browser already light-dismissed) */
-      }
-    }
-  }, [open]);
-
-  useEffect(() => {
-    const list = listRef.current!;
-    const handleToggle = (event: Event) => {
-      if ((event as ToggleEvent).newState === "closed") setOpen(false);
-    };
-    list.addEventListener("toggle", handleToggle);
-    // Stryker disable next-line StringLiteral,ArrowFunction: equivalent — unmount cleanup on a discarded node; removing/altering it only leaks a listener, unobservable.
-    return () => list.removeEventListener("toggle", handleToggle);
-  },
-  // Stryker disable next-line ArrayDeclaration: equivalent — setOpen is stable, so the effect subscribes once either way.
-  [setOpen]);
-
-  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
-    if (event.key === "Escape") {
-      event.preventDefault();
-      setOpen(false);
-      // Stryker disable next-line OptionalChaining: unreachable — the trigger is always mounted while the listbox is open.
-      triggerRef.current?.focus();
-      return;
-    }
-
-    const list = listRef.current!;
-    const items = Array.from(
-      list.querySelectorAll<HTMLElement>(OPTION_SELECTOR),
-    );
-    if (items.length === 0) return;
-    const currentIndex = items.indexOf(document.activeElement as HTMLElement);
-
-    let nextIndex: number | null = null;
-    if (event.key === "ArrowDown") {
-      nextIndex = (currentIndex + 1) % items.length;
-    } else if (event.key === "ArrowUp") {
-      nextIndex = currentIndex <= 0 ? items.length - 1 : currentIndex - 1;
-    } else if (event.key === "Home") {
-      nextIndex = 0;
-    } else if (event.key === "End") {
-      nextIndex = items.length - 1;
-    }
-
-    if (nextIndex !== null) {
-      event.preventDefault();
-      items[nextIndex].focus();
-      return;
-    }
-
-    if (event.key === "Enter" || event.key === " ") {
-      if (currentIndex < 0) return;
-      event.preventDefault();
-      items[currentIndex].click();
-      return;
-    }
-
-    // Space is already handled by the Enter/Space branch above, so any
-    // remaining single-character key is a typeahead search.
-    // Stryker disable next-line ConditionalExpression,EqualityOperator: the false / length!==1 variants are killed by the typeahead tests; the always-true variant is equivalent — no unhandled multi-character key (modifiers, arrows) can prefix-match an option.
-    if (event.key.length === 1) {
-      const state = typeaheadRef.current;
-      // Stryker disable next-line ConditionalExpression,EqualityOperator,MethodExpression,BlockStatement: clearing the pending timer is a real-time optimization; keystroke handling here is synchronous, so its presence/condition/target never changes the search outcome.
-      if (state.timer !== null) window.clearTimeout(state.timer);
-      state.query = (state.query + event.key).toLowerCase();
-      state.timer = window.setTimeout(() => {
-        state.query = "";
-        state.timer = null;
-      }, TYPEAHEAD_RESET_MS);
-
-      const isRepeat =
-        // Stryker disable next-line EqualityOperator,ConditionalExpression: equivalent — `length > 1 → true` reduces to `every(...)`, which for a single char produces the same searchQuery/offset outcome; the < 1 / false variants are killed by the repeated-char cycle test.
-        state.query.length > 1 &&
-        state.query.split("").every((c) => c === state.query[0]);
-      const searchQuery = isRepeat ? state.query[0] : state.query;
-      // Stryker disable next-line EqualityOperator: <= 0 is equivalent — currentIndex 0 yields startIndex 0 either way; the >= 0 variant is killed by the cycle test (advancing from a focused non-first item).
-      const startIndex = currentIndex < 0 ? 0 : currentIndex;
-      // Stryker disable next-line EqualityOperator: the length comparison variants are equivalent — a length-1 query and an isRepeat query both take offset 1 with the same outcome across the fixtures; the killable path is covered by the multi-char prefix test.
-      const offset = searchQuery.length === 1 || isRepeat ? 1 : 0;
-      // Stryker disable next-line EqualityOperator: <= is equivalent — the index wraps via % items.length, so the extra iteration only re-checks an already-visited index.
-      for (let i = 0; i < items.length; i++) {
-        const index = (startIndex + offset + i) % items.length;
-        // Stryker disable next-line MethodExpression: dropping .trim() is equivalent — the fixtures' (and real) option labels carry no surrounding whitespace; dropping .toLowerCase() is killed by the typeahead tests (lowercase query vs title-case labels).
-        const text = items[index].textContent!.trim().toLowerCase();
-        if (text.startsWith(searchQuery)) {
-          event.preventDefault();
-          items[index].focus();
-          return;
-        }
-      }
-    }
-  };
-
-  const contentProps = {
-    ...restProps,
-    ref: listRef,
-    id: contentId,
-    role: "listbox" as const,
-    tabIndex: -1,
-    popover: "auto" as const,
-    onKeyDown: composeEventHandlers(onKeyDown, handleKeyDown),
-  };
-
-  return { contentProps };
-}

package/src/Select/hooks/useSelectRoot.ts

@@ -1,149 +0,0 @@
-import {
-  ReactNode,
-  useCallback,
-  useEffect,
-  useId,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-
-import { useControllableState } from "../../hooks/index.ts";
-import type { SelectContextValue } from "../SelectContext";
-
-type UseSelectRootArgs = {
-  defaultOpen?: boolean;
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  value?: string;
-  defaultValue?: string;
-  onValueChange?: (value: string) => void;
-};
-
-/**
- * State owner for the rich (non-`native`) Select. Manages the open/close
- * state of the listbox popover — controlled (`open` + `onOpenChange`) or
- * uncontrolled (`defaultOpen`) — and derives the trigger/content ids.
- * Mirrors {@link useDropdownRoot}, including the `openRef` de-dupe so a
- * single light-dismiss that fires both a `toggle` event and our own close
- * does not double-notify `onOpenChange`.
- */
-export function useSelectRoot({
-  defaultOpen = false,
-  open: controlledOpen,
-  onOpenChange,
-  value: controlledValue,
-  defaultValue,
-  onValueChange,
-}: UseSelectRootArgs): {
-  contextValue: SelectContextValue;
-  value: string;
-  itemValues: string[];
-} {
-  const contentId = useId();
-  const triggerId = useId();
-  const triggerRef = useRef<HTMLButtonElement | null>(null);
-  const [open, setOpenBase] = useControllableState<boolean>(
-    controlledOpen,
-    defaultOpen,
-    onOpenChange,
-  );
-  const [value, setValue] = useControllableState<string>(
-    controlledValue,
-    defaultValue ?? "",
-    onValueChange,
-  );
-
-  const openRef = useRef(open);
-  useEffect(() => {
-    openRef.current = open;
-  });
-
-  const setOpen = useCallback(
-    (next: boolean) => {
-      if (openRef.current === next) return;
-      openRef.current = next;
-      setOpenBase(next);
-    },
-    [setOpenBase],
-  );
-
-  // Commit a selection: update the value, close the listbox, and return
-  // focus to the trigger (the standard listbox close-on-select behaviour).
-  const select = useCallback(
-    (next: string) => {
-      setValue(next);
-      setOpenBase(false);
-      openRef.current = false;
-      // Stryker disable next-line OptionalChaining: unreachable — the trigger is always mounted when an item is selected (selection happens inside the open Content).
-      triggerRef.current?.focus();
-    },
-    [setValue, setOpenBase],
-  );
-
-  // Item registry — lets Select.Value mirror the selected item's content
-  // (written once on the Item). Children live in a ref (updated silently
-  // every render, no re-render churn); `itemVersion` bumps only when the set
-  // of registered values changes (mount/unmount), so Value re-renders when
-  // items appear or disappear. See the react-component-patterns skill.
-  const itemChildrenRef = useRef<Map<string, ReactNode>>(new Map());
-  const [itemVersion, setItemVersion] = useState(0);
-
-  const registerItem = useCallback((itemValue: string, node: ReactNode) => {
-    const isNew = !itemChildrenRef.current.has(itemValue);
-    itemChildrenRef.current.set(itemValue, node);
-    // Stryker disable next-line ArithmeticOperator,ArrowFunction: equivalent — the version is an opaque re-render trigger; any updater (v+1, v-1, or `() => undefined`) changes state and re-renders identically.
-    if (isNew) setItemVersion((v) => v + 1);
-  }, []);
-
-  const unregisterItem = useCallback((itemValue: string) => {
-    itemChildrenRef.current.delete(itemValue);
-    // Stryker disable next-line ArithmeticOperator,ArrowFunction: equivalent — the version is an opaque re-render trigger; any updater changes state and re-renders identically.
-    setItemVersion((v) => v + 1);
-  }, []);
-
-  const getItemChildren = useCallback(
-    (itemValue: string) => itemChildrenRef.current.get(itemValue),
-    [],
-  );
-
-  // Registered values, recomputed whenever items mount/unmount, so Root can
-  // render a matching <option> in the hidden form <select>.
-  const itemValues = useMemo(
-    () => Array.from(itemChildrenRef.current.keys()),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [itemVersion],
-  );
-
-  const contextValue = useMemo(
-    () => ({
-      open,
-      setOpen,
-      value,
-      select,
-      registerItem,
-      unregisterItem,
-      getItemChildren,
-      contentId,
-      triggerId,
-      triggerRef,
-    }),
-    // itemVersion is intentionally in the dep list (not the value) so the
-    // context identity changes when items mount/unmount, re-rendering
-    // Select.Value even though the callbacks are stable.
-    [
-      open,
-      setOpen,
-      value,
-      select,
-      registerItem,
-      unregisterItem,
-      getItemChildren,
-      contentId,
-      triggerId,
-      itemVersion,
-    ],
-  );
-
-  return { contextValue, value, itemValues };
-}

package/src/Select/index.ts

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

package/src/Select/types.ts

@@ -1,272 +0,0 @@
-import {
-  ChangeEventHandler,
-  ComponentProps,
-  HTMLAttributes,
-  ReactNode,
-  Ref,
-} from "react";
-
-/**
- * Shared base for both {@link SelectRootProps} variants — the native
- * `<select>` attributes (minus the state-owning and multiple-selection
- * ones), the `asChild` escape hatch, and the raw `onChange` passthrough.
- */
-export type SelectRootBaseProps = Omit<
-  ComponentProps<"select">,
-  "value" | "defaultValue" | "multiple" | "onChange"
-> & {
-  /** Content of the select — typically {@link SelectOption}, {@link SelectGroup},
-   * and optionally a leading {@link SelectPlaceholder}. */
-  children?: ReactNode;
-  /** Forwarded to the underlying `HTMLSelectElement`. */
-  ref?: Ref<HTMLSelectElement>;
-  /**
-   * Native `change` handler. Fires alongside `onValueChange` whenever the
-   * user picks a different option. Use this when you want the raw
-   * `ChangeEvent` (e.g. to inspect `event.target.validity`).
-   */
-  onChange?: ChangeEventHandler<HTMLSelectElement>;
-  /**
-   * When `true`, Root delegates to a single consumer-supplied element
-   * (expected to render a `<select>`) and merges its own props onto it
-   * via the {@link Slot} pattern. Placeholder-detection inside Root
-   * walks direct children only in this mode, so the `asChild` +
-   * placeholder combination requires the consumer to set
-   * `defaultValue=""` explicitly.
-   * @default false
-   */
-  asChild?: boolean;
-  /**
-   * Selects the render path:
-   *
-   * - `false` (the default) — the **rich** render path: a fully-styleable
-   *   Popover-API listbox built from {@link SelectTrigger | `Select.Trigger`},
-   *   {@link SelectValue | `Select.Value`},
-   *   {@link SelectContent | `Select.Content`} and
-   *   {@link SelectItem | `Select.Item`}. Icons and other rich content on an
-   *   item render as authored.
-   * - `true` — the **native** render path: a thin wrapper over a real
-   *   `<select>` / `<option>` / `<optgroup>`, for flat, OS-native cases
-   *   (mobile wheel pickers, maximum-compatibility forms). Under `native`,
-   *   {@link SelectItem | `Select.Item`} renders an `<option>` from its
-   *   string/number children only — element children (icons, indicators)
-   *   are dropped.
-   *
-   * Both modes share the same `value` / `onValueChange` / `disabled` / form
-   * `name` API.
-   * @default false
-   */
-  native?: boolean;
-  /**
-   * Rich mode only — whether the listbox popover is open on first render.
-   * Ignored under `native` (the browser owns the popup). Uncontrolled: pass
-   * this (or omit for closed) and let the component manage the state.
-   * @default false
-   */
-  defaultOpen?: boolean;
-  /**
-   * Rich mode only — the controlled open state of the listbox popover. Pass
-   * together with {@link SelectRootBaseProps.onOpenChange | `onOpenChange`}
-   * to own the state from the parent.
-   */
-  open?: boolean;
-  /**
-   * Rich mode only — called with the next open state whenever the listbox
-   * opens or closes (trigger click, selection, Escape, light-dismiss).
-   */
-  onOpenChange?: (open: boolean) => void;
-};
-
-/**
- * Uncontrolled variant of {@link SelectRootProps}: the browser owns the
- * selection. Pass `defaultValue` (or omit it); `onValueChange` is optional
- * and `value` is forbidden.
- */
-export type SelectRootUncontrolledProps = SelectRootBaseProps & {
-  /** Value of the option selected on first render. When omitted and a
-   * {@link SelectPlaceholder} is present among Root's direct children,
-   * Root infers `""` automatically so the placeholder is the initial
-   * selection. */
-  defaultValue?: string;
-  /** Forbidden in uncontrolled mode — use `defaultValue` instead. */
-  value?: never;
-  /** Called with the new option value whenever the user changes the
-   * selection. Optional in uncontrolled mode. */
-  onValueChange?: (value: string) => void;
-};
-
-/**
- * Controlled variant of {@link SelectRootProps}: the parent owns the
- * selection. Pass `value` and `onValueChange` together; `defaultValue` is
- * forbidden.
- */
-export type SelectRootControlledProps = SelectRootBaseProps & {
-  /** Forbidden in controlled mode — use `value` instead. */
-  defaultValue?: never;
-  /** The currently selected option value. Must be kept in sync by the
-   * parent via `onValueChange`. */
-  value: string;
-  /** Called with the new option value whenever the user changes the
-   * selection. Required in controlled mode. */
-  onValueChange: (value: string) => void;
-};
-
-/**
- * Props for {@link SelectRoot | `Select.Root`}.
- *
- * Resolves to either {@link SelectRootUncontrolledProps} or
- * {@link SelectRootControlledProps} — only one shape is accepted by
- * TypeScript at a time. Native `multiple`-selection mode is not supported
- * in v1.
- */
-export type SelectRootProps =
-  | SelectRootUncontrolledProps
-  | SelectRootControlledProps;
-
-/**
- * Props for {@link SelectItem | `Select.Item`}.
- *
- * `Select.Item` renders different elements per mode — an `<option>` under
- * `native`, a `<div role="option">` in rich mode — so it extends the
- * element-agnostic `HTMLAttributes<HTMLElement>` rather than an
- * option-specific type.
- */
-export type SelectItemProps = HTMLAttributes<HTMLElement> & {
-  /** The value this item represents; committed as the Select's value when
-   * chosen, and matched against the current value for the selected state. */
-  value: string;
-  /** Marks the item unselectable while still visible. */
-  disabled?: boolean;
-  /** The item content. In `native` mode only its string/number parts are
-   * kept as the `<option>` text (element children are dropped); in rich mode
-   * arbitrary content (icons, indicators) renders as authored. */
-  children?: ReactNode;
-};
-
-/**
- * Props for {@link SelectGroup | `Select.Group`} — all
- * `OptgroupHTMLAttributes` on the underlying `<optgroup>` element (with
- * `label` narrowed to a required `string`), plus a typed `ref`.
- */
-export type SelectGroupProps = HTMLAttributes<HTMLElement> & {
-  /**
-   * The group heading. In `native` mode it is the `<optgroup>`'s `label`
-   * attribute; in rich mode it becomes the `<div role="group">`'s
-   * `aria-label`. Either way it is the group's accessible name. Required —
-   * a group without one is inaccessible.
-   */
-  label: string;
-  /** The {@link SelectItem} elements belonging to this group. */
-  children?: ReactNode;
-};
-
-/**
- * Props for {@link SelectPlaceholder | `Select.Placeholder`}.
- *
- * `value`, `disabled`, and `hidden` are owned by the component —
- * the placeholder always renders with `value=""`, `disabled`, and `hidden`
- * — so they are excluded from this type and cannot be set by the consumer.
- */
-export type SelectPlaceholderProps = Omit<
-  ComponentProps<"option">,
-  "value" | "disabled" | "hidden"
-> & {
-  /** The placeholder hint text shown in the closed select before the user
-   * makes a selection (e.g. `"Choose a fruit..."`). */
-  children?: ReactNode;
-  /** Forwarded to the underlying `HTMLOptionElement`. */
-  ref?: Ref<HTMLOptionElement>;
-};
-
-/**
- * Props for {@link SelectTrigger | `Select.Trigger`} — the rich-mode button
- * that opens the listbox. Extends the native `<button>` attributes.
- */
-export type SelectTriggerProps = ComponentProps<"button"> & {
-  /** Trigger content — typically a {@link SelectValue | `Select.Value`}. */
-  children?: ReactNode;
-  /**
-   * Render the composed child element instead of a `<button>`, merging the
-   * trigger's ARIA attributes and click handler via the {@link Slot}
-   * pattern.
-   * @default false
-   */
-  asChild?: boolean;
-  /** Forwarded to the underlying `HTMLButtonElement`. */
-  ref?: Ref<HTMLButtonElement>;
-};
-
-/**
- * Props for {@link SelectValue | `Select.Value`} — the rich-mode element,
- * placed inside {@link SelectTrigger | `Select.Trigger`}, that displays the
- * current selection (mirrored from the selected item in a later cycle) or a
- * placeholder when nothing is selected. Extends `<span>` attributes minus
- * `children`, which the component owns.
- */
-export type SelectValueProps = Omit<ComponentProps<"span">, "children"> & {
-  /** Shown when no value is selected (e.g. `"Select a framework..."`). */
-  placeholder?: ReactNode;
-  /** Forwarded to the underlying `HTMLSpanElement`. */
-  ref?: Ref<HTMLSpanElement>;
-};
-
-/**
- * Props for {@link SelectItemIndicator | `Select.ItemIndicator`} — the
- * selection mark inside a rich {@link SelectItem | `Select.Item`}. Extends
- * the native `<span>` attributes.
- */
-export type SelectItemIndicatorProps = ComponentProps<"span"> & {
-  /** The mark to render (e.g. a checkmark glyph or icon). */
-  children?: ReactNode;
-  /**
-   * Render the composed child element instead of a `<span>` via the
-   * {@link Slot} pattern.
-   * @default false
-   */
-  asChild?: boolean;
-  /**
-   * Keep the indicator mounted even when the item is not selected (it still
-   * exposes `data-state="unchecked"`), useful for CSS enter/exit animation.
-   * @default false
-   */
-  forceMount?: boolean;
-  /** Forwarded to the underlying `HTMLSpanElement`. */
-  ref?: Ref<HTMLSpanElement>;
-};
-
-/**
- * Props for {@link SelectContent | `Select.Content`} — the rich-mode
- * Popover-API listbox panel. Extends the native `<div>` attributes.
- */
-export type SelectContentProps = ComponentProps<"div"> & {
-  /** Listbox content — {@link SelectItem | `Select.Item`} /
-   * {@link SelectGroup | `Select.Group`} elements. */
-  children?: ReactNode;
-  /**
-   * Render the composed child element instead of a `<div>`, merging the
-   * listbox props via the {@link Slot} pattern.
-   * @default false
-   */
-  asChild?: boolean;
-  /** Forwarded to the underlying `HTMLDivElement`. */
-  ref?: Ref<HTMLDivElement>;
-};
-
-/**
- * Props for {@link SelectSeparator | `Select.Separator`} — a non-interactive
- * divider between groups of options in rich mode. Extends the native `<div>`
- * attributes and adds `asChild`.
- */
-export type SelectSeparatorProps = Omit<ComponentProps<"div">, "role"> & {
-  /** Optional content; separators are usually empty, and only render (via
-   * the {@link Slot} pattern) when `asChild` composes onto a custom element. */
-  children?: ReactNode;
-  /** Forwarded to the underlying `HTMLDivElement`. */
-  ref?: Ref<HTMLDivElement>;
-  /**
-   * Render the composed child element (with separator semantics) instead of
-   * the default `<div role="separator">`.
-   * @default false
-   */
-  asChild?: boolean;
-};

package/src/SkipNav/README.md

@@ -1,87 +0,0 @@
-# SkipNav
-
-A "skip to main content" link and its focus target, letting keyboard and
-screen-reader users bypass repeated navigation. Implements the
-[WCAG 2.4.1 Bypass Blocks](https://www.w3.org/WAI/WCAG22/Understanding/bypass-blocks.html)
-technique.
-
-```tsx
-import { SkipNav } from "@primitiv-ui/react";
-
-<>
-  <SkipNav.Link>Skip to main content</SkipNav.Link>
-  <header>...site navigation...</header>
-  <SkipNav.Content>
-    <main>...</main>
-  </SkipNav.Content>
-</>;
-```
-
-`SkipNav.Link` and `SkipNav.Content` are stateless siblings, not nested.
-Render the link as the very first focusable element on the page and wrap
-the main content in the target.
-
-## How it works
-
-`SkipNav.Link` is a plain in-page anchor: its `href` is a URL fragment
-(`#primitiv-skip-nav`) pointing at the `id` of `SkipNav.Content`.
-`SkipNav.Content` carries `tabIndex={-1}` so it is a valid focus
-destination — following the link scrolls to it _and_ moves focus into it,
-so the next <kbd>Tab</kbd> continues from the main content. No JavaScript
-runs.
-
-## Sub-components
-
-### `SkipNav.Link`
-
-Renders an `<a>`.
-
-| Prop        | Type                              | Default             | Notes                                            |
-| ----------- | --------------------------------- | ------------------- | ------------------------------------------------ |
-| `contentId` | `string`                          | `"primitiv-skip-nav"` | Id of the target; `href` is derived as `#${contentId}` |
-| `children`  | `ReactNode`                       | —                   | The visible link text                            |
-| `...rest`   | `AnchorHTMLAttributes`            | —                   | All other `<a>` props, including `className`      |
-
-### `SkipNav.Content`
-
-Renders a `<div>` with `tabIndex={-1}`.
-
-| Prop       | Type                  | Default               | Notes                                                  |
-| ---------- | --------------------- | --------------------- | ------------------------------------------------------ |
-| `id`       | `string`              | `"primitiv-skip-nav"` | Must match `SkipNav.Link`'s `contentId`                |
-| `children` | `ReactNode`           | —                     | The main page content                                 |
-| `...rest`  | `HTMLAttributes`      | —                     | All other `<div>` props                                |
-
-## Matching a custom id
-
-The default content id connects the pair with no configuration. To use a
-custom id, set it on both sides:
-
-```tsx
-<SkipNav.Link contentId="main">Skip to main content</SkipNav.Link>
-<SkipNav.Content id="main">
-  <main>...</main>
-</SkipNav.Content>
-```
-
-## Styling hooks
-
-No styles ship with the component. The conventional pattern keeps the link
-visually hidden until it receives focus, so it does not disrupt the visual
-design but is the first thing a keyboard user reaches:
-
-```css
-a[href="#primitiv-skip-nav"] {
-  position: absolute;
-  left: -9999px;
-}
-
-a[href="#primitiv-skip-nav"]:focus {
-  left: 0;
-  top: 0;
-}
-```
-
-Or pass a `className` and target that instead. Do **not** use
-`display: none` or `visibility: hidden` — those remove the link from the
-tab order, defeating its purpose.