@primitiv-ui/react 0.1.38 → 0.1.40

package/src/DirectionProvider/types.ts

@@ -1,36 +0,0 @@
-import { ReactNode } from "react";
-
-/**
- * A reading direction value — left-to-right or right-to-left.
- *
- * Used as the {@link DirectionProviderProps.dir | `dir`} prop on
- * {@link DirectionProvider} and as the `dir` prop accepted by every
- * direction-aware component (e.g. `Tabs.Root`, `Slider.Root`).
- * {@link useDirection} returns this type.
- */
-export type Direction = "ltr" | "rtl";
-
-/**
- * Props for {@link DirectionProvider} — the reading direction broadcast to
- * all descendant components.
- *
- * `DirectionProvider` accepts no native HTML element props: it renders no
- * DOM host element and is a pure React context provider.
- */
-export type DirectionProviderProps = {
-  /**
-   * The reading direction to broadcast to every descendant.
-   * See {@link Direction}.
-   *
-   * Direction-aware components (e.g. `Tabs.Root`, `Slider.Root`) read
-   * this value via {@link useDirection} when their own `dir` prop is
-   * omitted. An explicit `dir` prop on a descendant always takes
-   * precedence over the inherited value.
-   */
-  dir: Direction;
-  /**
-   * The subtree whose direction-aware components will inherit `dir`.
-   * Any React content is accepted; there is no DOM wrapper.
-   */
-  children?: ReactNode;
-};

package/src/Divider/Divider.tsx

@@ -1,74 +0,0 @@
-import type { ReactElement } from "react";
-
-import { DividerProps } from "./types";
-
-/**
- * A headless `<span role="separator">` that marks a visual and semantic
- * boundary between content sections.
- *
- * Renders a native `<span>` with `role="separator"` and the matching
- * `aria-orientation` attribute. Screen readers announce it as a separator,
- * which is appropriate when the divider conveys genuine structural meaning
- * (e.g. separating navigation groups or distinct content areas).
- *
- * **Decorative use.** When the divider is purely visual and carries no
- * semantic meaning, pass `aria-hidden="true"` to remove it from the
- * accessibility tree entirely:
- *
- * ```tsx
- * <Divider aria-hidden="true" />
- * ```
- *
- * **Styling hooks.** No styles ship with the component. Because Divider
- * emits no `data-*` attributes, target the rendered element via the
- * `aria-orientation` attribute selector or a `className`:
- *
- * ```css
- * [role="separator"][aria-orientation="horizontal"] { height: 1px; width: 100%; background: currentColor; }
- * [role="separator"][aria-orientation="vertical"]   { width: 1px; height: 100%; background: currentColor; }
- * ```
- *
- * ```tsx
- * <Divider className="my-divider" />
- * <Divider orientation="vertical" className="my-divider--vertical" />
- * ```
- *
- * @extends HTMLSpanElement
- *
- * @example Horizontal (default)
- * ```tsx
- * <Divider />
- * ```
- *
- * @example Vertical
- * ```tsx
- * <Divider orientation="vertical" />
- * ```
- *
- * @example Decorative — hidden from screen readers
- * ```tsx
- * <Divider aria-hidden="true" />
- * ```
- *
- * @example With a className
- * ```tsx
- * <Divider className="my-section-rule" />
- * ```
- */
-export function Divider({
-  orientation = "horizontal",
-  className = "",
-  ...rest
-}: DividerProps): ReactElement {
-  return (
-    <span
-      role="separator"
-      aria-orientation={orientation}
-      className={className}
-      {...rest}
-    />
-  );
-}
-
-/** @internal */
-Divider.displayName = "Divider";

package/src/Divider/README.md

@@ -1,57 +0,0 @@
-# Divider
-
-A visual and semantic separator between content sections, implementing the
-[WAI-ARIA separator role](https://www.w3.org/TR/wai-aria-1.2/#separator).
-
-```tsx
-import { Divider } from "@primitiv-ui/react";
-
-<Divider />;
-```
-
-## Props
-
-| Prop          | Type                           | Default        | Notes                                        |
-| ------------- | ------------------------------ | -------------- | -------------------------------------------- |
-| `orientation` | `"horizontal"` \| `"vertical"` | `"horizontal"` | Sets `aria-orientation` on the element       |
-| `className`   | `string`                       | `""`           | Applied directly to the rendered element     |
-| `...rest`     | `ComponentProps<"span">`       | —              | All other `<span>` props, including `aria-*` |
-
-## Decorative use
-
-When the divider is purely visual and carries no semantic meaning, pass
-`aria-hidden="true"` to remove it from the accessibility tree:
-
-```tsx
-<Divider aria-hidden="true" />
-```
-
-Without `aria-hidden`, screen readers will announce the element as a
-separator. Use the semantic form when the divider genuinely separates
-distinct content groups (e.g. navigation sections, menu items).
-
-## Styling hooks
-
-No styles ship with the component. Target the rendered element with the
-`aria-orientation` attribute selector:
-
-```css
-[role="separator"][aria-orientation="horizontal"] {
-  height: 1px;
-  width: 100%;
-  background: currentColor;
-}
-
-[role="separator"][aria-orientation="vertical"] {
-  width: 1px;
-  height: 100%;
-  background: currentColor;
-}
-```
-
-Or pass a `className`:
-
-```tsx
-<Divider className="my-divider" />
-<Divider orientation="vertical" className="my-divider--vertical" />
-```

package/src/Divider/__tests__/Divider.contract.test.tsx

@@ -1,66 +0,0 @@
-import { readFileSync } from "node:fs";
-import { fileURLToPath } from "node:url";
-import { dirname, resolve } from "node:path";
-
-import { render, screen } from "@testing-library/react";
-
-import { Divider } from "../Divider";
-
-/**
- * Auto-verification of the Divider styling contract (RFC 0004 §3.4 / D15). The
- * `data-*` half of `registry/components/divider/contract.json` is *derived from
- * and asserted against the rendered headless component* so it can never drift
- * from what the component actually emits. Divider has **no** data-* surface — it
- * styles off `aria-orientation` — so the guard also pins that hook: the registry
- * stylesheet's `[aria-orientation="..."]` selectors depend on it.
- */
-const contractPath = resolve(
-  dirname(fileURLToPath(import.meta.url)),
-  "../../../../../registry/components/divider/contract.json",
-);
-
-const contract = JSON.parse(readFileSync(contractPath, "utf8"));
-
-/** Every `data-*` attribute name present on an element. */
-function dataAttributeNames(element: Element): string[] {
-  return [...element.attributes]
-    .map((attribute) => attribute.name)
-    .filter((name) => name.startsWith("data-"))
-    .sort();
-}
-
-describe("Divider styling contract", () => {
-  const autoAttributes = contract.dataAttributes.filter(
-    (attribute: { source: string }) => attribute.source === "auto",
-  );
-
-  it("declares every data-* attribute as auto-verified against the component", () => {
-    expect(autoAttributes).toHaveLength(contract.dataAttributes.length);
-  });
-
-  it("emits no data-* attributes in either orientation", () => {
-    const { rerender } = render(<Divider />);
-    const emitted = new Set(dataAttributeNames(screen.getByRole("separator")));
-
-    rerender(<Divider orientation="vertical" />);
-    for (const name of dataAttributeNames(screen.getByRole("separator"))) {
-      emitted.add(name);
-    }
-
-    expect([...emitted]).toEqual([]);
-  });
-
-  it("exposes the orientation through aria-orientation — the styling hook", () => {
-    const { rerender } = render(<Divider />);
-    expect(screen.getByRole("separator")).toHaveAttribute(
-      "aria-orientation",
-      "horizontal",
-    );
-
-    rerender(<Divider orientation="vertical" />);
-    expect(screen.getByRole("separator")).toHaveAttribute(
-      "aria-orientation",
-      "vertical",
-    );
-  });
-});

package/src/Divider/__tests__/Divider.test.tsx

@@ -1,46 +0,0 @@
-import { Divider } from "../index.ts";
-import { render, screen } from "@testing-library/react";
-
-describe("Divider component", () => {
-  it("should render a horizontal divider by default", () => {
-    // Arrange
-    render(<Divider />);
-
-    // Assert
-    const divider = screen.getByRole("separator");
-    expect(divider).toHaveAttribute("aria-orientation", "horizontal");
-  });
-
-  it("should accept a vertical orientation prop", () => {
-    // Arrange
-    render(<Divider orientation="vertical" />);
-
-    // Assert
-    const divider = screen.getByRole("separator");
-    expect(divider).toHaveAttribute("aria-orientation", "vertical");
-  });
-
-  it("should accept a className prop", () => {
-    // Arrange
-    const testClassName = "test-class";
-    render(<Divider className={testClassName} />);
-
-    // Assert
-    const divider = screen.getByRole("separator");
-    expect(divider).toHaveAttribute("class", testClassName);
-  });
-
-  it("should have a default className of empty string", () => {
-    // Arrange
-    render(<Divider />);
-
-    // Assert
-    const divider = screen.getByRole("separator");
-    expect(divider).toHaveAttribute("class", "");
-  });
-
-  it('sets displayName to "Divider" for React DevTools and stack traces', () => {
-    // Assert — an empty displayName would render it as an anonymous component.
-    expect(Divider.displayName).toBe("Divider");
-  });
-});

package/src/Divider/index.ts

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

package/src/Divider/types.ts

@@ -1,17 +0,0 @@
-import { ComponentProps } from "react";
-
-/**
- * Props for {@link Divider} — all native `<span>` attributes plus an
- * `orientation` that controls both the visual axis and the `aria-orientation`
- * value announced to assistive technology.
- */
-export type DividerProps = ComponentProps<"span"> & {
-  /**
-   * Axis the separator runs along. Sets `aria-orientation` on the rendered
-   * `<span role="separator">` so screen readers announce the correct
-   * orientation. Use `"horizontal"` for row-dividing rules and
-   * `"vertical"` for column-dividing rules.
-   * @default "horizontal"
-   */
-  orientation?: "horizontal" | "vertical";
-};

package/src/Drawer/Drawer.tsx

@@ -1,315 +0,0 @@
-import type { ReactElement } from "react";
-
-import { Modal } from "../Modal/index.ts";
-import type {
-  DrawerCloseProps,
-  DrawerContentProps,
-  DrawerDescriptionProps,
-  DrawerOverlayProps,
-  DrawerPortalProps,
-  DrawerRootProps,
-  DrawerTitleProps,
-  DrawerTriggerProps,
-} from "./types";
-
-/**
- * The root of a Drawer — owns open state, registers the dialog's id,
- * title id, and description id, and exposes an imperative handle for
- * opening / closing from outside the React subtree.
- *
- * A Drawer *is* a {@link Modal | Modal} that slides in from a screen edge, so
- * `Drawer.Root` delegates its entire behaviour to `Modal.Root`: the two
- * state modes (uncontrolled `defaultOpen` vs. controlled `open` +
- * `onOpenChange`, statically discriminated at the type level) and the
- * imperative open/close API are identical.
- *
- * @example Uncontrolled
- * ```tsx
- * <Drawer.Root defaultOpen>
- *   <Drawer.Content>...</Drawer.Content>
- * </Drawer.Root>
- * ```
- *
- * @example Controlled
- * ```tsx
- * const [open, setOpen] = useState(false);
- *
- * <Drawer.Root open={open} onOpenChange={setOpen}>
- *   <Drawer.Trigger>Open</Drawer.Trigger>
- *   <Drawer.Portal>
- *     <Drawer.Overlay />
- *     <Drawer.Content side="right">...</Drawer.Content>
- *   </Drawer.Portal>
- * </Drawer.Root>
- * ```
- */
-function DrawerRoot(props: DrawerRootProps): ReactElement {
-  return <Modal.Root {...props} />;
-}
-
-DrawerRoot.displayName = "DrawerRoot";
-
-/**
- * A button that toggles the drawer open. Renders a
- * `<button type="button">` with full ARIA wiring inherited from
- * `Modal.Trigger`:
- *
- * - `aria-haspopup="dialog"`
- * - `aria-expanded` tracks open state
- * - `aria-controls` points at the `Drawer.Content` dialog's id
- *
- * **`asChild` prop.** Pass `asChild` to render any consumer-supplied
- * element (e.g. a router `<Link>`) with the trigger's ARIA attributes,
- * composed event handlers, and ref merged in.
- *
- * @extends HTMLButtonElement
- *
- * @example
- * ```tsx
- * <Drawer.Trigger>Open menu</Drawer.Trigger>
- *
- * <Drawer.Trigger asChild>
- *   <Link to="/cart">Cart</Link>
- * </Drawer.Trigger>
- * ```
- */
-function DrawerTrigger(props: DrawerTriggerProps): ReactElement {
-  return <Modal.Trigger {...props} />;
-}
-
-DrawerTrigger.displayName = "DrawerTrigger";
-
-/**
- * Renders its children through `React.createPortal` so the drawer is
- * detached from wherever `Drawer.Root` lives in the React tree and becomes
- * a direct child of `container` (default `document.body`).
- *
- * By default the portal only renders while the drawer is open. Pass
- * `forceMount` to keep the subtree in the DOM after `open` flips false —
- * useful for the CSS slide-out animation driven by `data-state="closed"`.
- *
- * @example
- * ```tsx
- * <Drawer.Portal container={document.getElementById("drawer-root")!}>
- *   <Drawer.Overlay />
- *   <Drawer.Content>...</Drawer.Content>
- * </Drawer.Portal>
- * ```
- */
-function DrawerPortal(props: DrawerPortalProps): ReactElement {
-  return <Modal.Portal {...props} />;
-}
-
-DrawerPortal.displayName = "DrawerPortal";
-
-/**
- * A decorative, animation-friendly backdrop rendered as a **sibling** of
- * `Drawer.Content`. Like `Modal.Overlay` it is **not** the click-outside
- * event surface — opening the native `<dialog>` via `showModal()` promotes
- * it to the top layer with a browser-painted `::backdrop` above this
- * overlay, so click-outside-to-close is wired on the dialog itself via
- * `onPointerDownOutside`.
- *
- * - `aria-hidden="true"` (the backdrop is decorative).
- * - `data-state="open" | "closed"` follows the drawer's open state.
- *
- * **`asChild` prop.** Pass `asChild` to render a consumer-supplied element
- * (e.g. a motion wrapper) with the overlay's ARIA and data-state merged in.
- *
- * **`forceMount` prop.** Pass `forceMount` to keep the overlay in the DOM
- * while `open` is false so a CSS fade-out can play.
- *
- * @extends HTMLDivElement
- *
- * @example
- * ```tsx
- * <Drawer.Overlay />
- * ```
- */
-function DrawerOverlay(props: DrawerOverlayProps): ReactElement {
-  return <Modal.Overlay {...props} />;
-}
-
-DrawerOverlay.displayName = "DrawerOverlay";
-
-/**
- * The native `<dialog>` element — the sliding panel. Behaviour is
- * `Modal.Content`'s: React drives `showModal()` / `close()` in response to
- * open state, so the browser owns the inert background, the top layer, and
- * the `Esc` key, while the same JS `Tab`-wrap focus trap (last ⇄ first)
- * applies — inherited from `Modal.Content`. `aria-labelledby` /
- * `aria-describedby` are wired automatically from `Drawer.Title` /
- * `Drawer.Description`, and the `onEscapeKeyDown` / `onPointerDownOutside`
- * escape hatches pass straight through.
- *
- * **The one drawer-specific addition —
- * {@link DrawerContentProps.side | `side`}.** Which edge the panel slides in
- * from (`"top" | "right" | "bottom" | "left"`, default `"right"`). It is
- * emitted verbatim as `data-side` on the dialog for the styled layer to
- * position and animate against; it changes no behaviour, focus, or ARIA.
- *
- * **`asChild` is intentionally not supported** (as with `Modal.Content`) —
- * the native dialog is what provides the inert background and top layer (and
- * hosts the inherited Tab-wrap focus trap).
- *
- * **Styling hooks.** `data-state="open" | "closed"` and
- * `data-side="top|right|bottom|left"` on the dialog.
- *
- * @extends HTMLDialogElement
- *
- * @example Right-hand drawer (default)
- * ```tsx
- * <Drawer.Content>...</Drawer.Content>
- * ```
- *
- * @example Bottom sheet
- * ```tsx
- * <Drawer.Content side="bottom">...</Drawer.Content>
- * ```
- */
-function DrawerContent({
-  side = "right",
-  ...rest
-}: DrawerContentProps): ReactElement {
-  // `side` is stripped from the props and re-emitted as `data-side` on the
-  // native <dialog> (Modal.Content forwards unrecognised props through its own
-  // `...rest`), giving the styled layer its positioning hook.
-  return <Modal.Content {...rest} data-side={side} />;
-}
-
-DrawerContent.displayName = "DrawerContent";
-
-/**
- * The drawer's accessible name. Renders an `<h2>` by default and
- * auto-registers its generated id so `Drawer.Content` can wire it up as
- * `aria-labelledby` (via `Modal.Title`).
- *
- * Pass `asChild` to render the consumer's own heading element; the id is
- * still registered.
- *
- * @extends HTMLHeadingElement
- *
- * @example
- * ```tsx
- * <Drawer.Title>Filters</Drawer.Title>
- * ```
- */
-function DrawerTitle(props: DrawerTitleProps): ReactElement {
-  return <Modal.Title {...props} />;
-}
-
-DrawerTitle.displayName = "DrawerTitle";
-
-/**
- * The drawer's accessible description. Renders a `<p>` by default and
- * auto-registers its generated id so `Drawer.Content` can wire it up as
- * `aria-describedby` (via `Modal.Description`).
- *
- * Pass `asChild` to render any consumer-supplied element; the id is still
- * registered.
- *
- * @extends HTMLParagraphElement
- *
- * @example
- * ```tsx
- * <Drawer.Description>Narrow the results below.</Drawer.Description>
- * ```
- */
-function DrawerDescription(props: DrawerDescriptionProps): ReactElement {
-  return <Modal.Description {...props} />;
-}
-
-DrawerDescription.displayName = "DrawerDescription";
-
-/**
- * A button that closes the drawer. Renders a `<button type="button">`
- * whose `onClick` is composed with the close action (via `Modal.Close`) —
- * consumer handlers run first and can `event.preventDefault()` to veto.
- *
- * **`asChild` prop.** Pass `asChild` to render any element (e.g. an
- * icon-only button of your own) with the close behaviour merged in.
- *
- * @extends HTMLButtonElement
- *
- * @example
- * ```tsx
- * <Drawer.Close>Done</Drawer.Close>
- *
- * <Drawer.Close asChild>
- *   <IconButton aria-label="Close" icon={<XIcon />} />
- * </Drawer.Close>
- * ```
- */
-function DrawerClose(props: DrawerCloseProps): ReactElement {
-  return <Modal.Close {...props} />;
-}
-
-DrawerClose.displayName = "DrawerClose";
-
-/** @internal */
-type DrawerCompound = typeof DrawerRoot & {
-  Root: typeof DrawerRoot;
-  Trigger: typeof DrawerTrigger;
-  Portal: typeof DrawerPortal;
-  Overlay: typeof DrawerOverlay;
-  Content: typeof DrawerContent;
-  Title: typeof DrawerTitle;
-  Description: typeof DrawerDescription;
-  Close: typeof DrawerClose;
-};
-
-/**
- * Headless, accessible **Drawer** — a Modal dialog that slides in from a
- * screen edge. It reuses {@link Modal | Modal}'s native-`<dialog>` machinery
- * wholesale (focus trap, inert background, top layer, `Esc`, click-outside,
- * controlled / uncontrolled state, the imperative API), adding a single
- * presentational axis: {@link DrawerContentProps.side | `side`} on
- * `Drawer.Content`, emitted as `data-side` for the styled layer to slide the
- * panel from `top` / `right` / `bottom` / `left`.
- *
- * `Drawer` is both callable (an alias of {@link DrawerRoot | `Drawer.Root`})
- * and carries its sub-components as static properties.
- *
- * - {@link DrawerRoot | `Drawer.Root`} — state owner, context provider, imperative API holder.
- * - {@link DrawerTrigger | `Drawer.Trigger`} — `<button>` that opens the drawer.
- * - {@link DrawerPortal | `Drawer.Portal`} — `createPortal` wrapper with `container` + `forceMount`.
- * - {@link DrawerOverlay | `Drawer.Overlay`} — click-outside backdrop sibling of the dialog.
- * - {@link DrawerContent | `Drawer.Content`} — native `<dialog>` with the `side` axis and auto-ARIA.
- * - {@link DrawerTitle | `Drawer.Title`} — accessible name; auto-wires `aria-labelledby`.
- * - {@link DrawerDescription | `Drawer.Description`} — auto-wires `aria-describedby`.
- * - {@link DrawerClose | `Drawer.Close`} — `<button>` that closes the drawer.
- *
- * @example Minimal usage
- * ```tsx
- * import { Drawer } from "@primitiv-ui/react";
- *
- * <Drawer.Root>
- *   <Drawer.Trigger>Open</Drawer.Trigger>
- *   <Drawer.Portal>
- *     <Drawer.Overlay />
- *     <Drawer.Content side="right">
- *       <Drawer.Title>Filters</Drawer.Title>
- *       <Drawer.Description>Narrow the results below.</Drawer.Description>
- *       <Drawer.Close>Done</Drawer.Close>
- *     </Drawer.Content>
- *   </Drawer.Portal>
- * </Drawer.Root>;
- * ```
- *
- * @see {@link Modal} for the shared dialog behaviour, state modes, and imperative API.
- * @see {@link DrawerContent} for the `side` axis and the styling hooks.
- */
-const DrawerCompound: DrawerCompound = Object.assign(DrawerRoot, {
-  Root: DrawerRoot,
-  Trigger: DrawerTrigger,
-  Portal: DrawerPortal,
-  Overlay: DrawerOverlay,
-  Content: DrawerContent,
-  Title: DrawerTitle,
-  Description: DrawerDescription,
-  Close: DrawerClose,
-});
-
-DrawerCompound.displayName = "Drawer";
-
-export { DrawerCompound as Drawer };