@primitiv-ui/react 0.1.37 → 0.1.39

package/src/Tabs/types.ts

@@ -1,166 +0,0 @@
-import { ComponentProps, Ref } from "react";
-
-/** Layout axis of the tab list. `"horizontal"` arranges triggers in a row and
- * binds ArrowLeft/ArrowRight; `"vertical"` stacks them and binds
- * ArrowUp/ArrowDown. */
-export type TabsOrientation = "horizontal" | "vertical";
-
-/** Reading direction of the tab list. In `"rtl"` the horizontal arrow keys are
- * mirrored so navigation follows the visual order. */
-export type TabsReadingDirection = "ltr" | "rtl";
-
-/** When a focused trigger becomes active. `"automatic"` activates a tab as soon
- * as it receives focus via the arrow keys; `"manual"` requires Enter/Space. */
-export type TabsActivationMode = "automatic" | "manual";
-
-/**
- * Payload delivered to the {@link BaseTabsRootProps.onChange | `onChange`} callback
- * on every user-driven tab activation.
- *
- * - `index` — zero-based position of the activated trigger in registration order.
- * - `name`  — the programmatic **value** string passed to `Tabs.Trigger` (e.g.
- *   `"settings"`), **not** the human-readable label text rendered inside the
- *   trigger. Use the `children` of the trigger for the visible label.
- */
-export type TabMetadata = { index: number; name: string };
-
-/** Props common to both controlled and uncontrolled `Tabs.Root` usage. */
-export type BaseTabsRootProps = {
-  /** Fired on every user-driven activation with the activated tab's metadata. */
-  onChange?: ({ index, name }: TabMetadata) => void;
-};
-
-/** Uncontrolled `Tabs.Root` props: the component owns the active tab, seeded by
- * an optional `defaultValue`. Mutually exclusive with the controlled props. */
-export type UncontrolledTabsRootProps = {
-  /** Value of the tab active on first render. */
-  defaultValue?: string;
-  value?: never;
-  onValueChange?: never;
-};
-
-/** Controlled `Tabs.Root` props: the caller owns the active tab via `value` and
- * is notified of activation requests through `onValueChange`. */
-export type ControlledTabsRootProps = {
-  /** Value of the currently active tab. */
-  value: string;
-  /** Called with the requested value when the user activates a tab. */
-  onValueChange: (value: string) => void;
-  defaultValue?: never;
-};
-
-/** Props for `Tabs.Root` — the state owner and context provider. Extends the
- * native `<div>` props (minus `onChange`) and resolves to either the
- * controlled or uncontrolled prop shape.
- *
- * `ref` is omitted from the inherited `<div>` props deliberately: `Tabs.Root`
- * is a `forwardRef` component whose ref is the {@link TabsImperativeApi}
- * imperative handle, **not** the underlying `HTMLDivElement`. The component
- * type re-adds the correct `ref` via `RefAttributes<TabsImperativeApi>`. Were
- * the `HTMLDivElement` `ref` left in, a styled wrapper that spreads these props
- * straight back into `Tabs.Root` (`<Tabs.Root {...props} />`) would fail to
- * type-check on incompatible `ref` types (D58). */
-export type TabsRootProps = Omit<
-  ComponentProps<"div">,
-  "onChange" | "ref" | "dir" | "defaultValue"
-> & {
-  /** Layout axis; see {@link TabsOrientation}.
-   * @default "horizontal" */
-  orientation?: TabsOrientation;
-  /** Reading direction; see {@link TabsReadingDirection}. Inherited from the
-   * nearest `DirectionProvider` when omitted, falling back to `"ltr"`. */
-  dir?: TabsReadingDirection;
-  /** When a focused trigger becomes active; see {@link TabsActivationMode}.
-   * @default "automatic" */
-  activationMode?: TabsActivationMode;
-  /** When `true`, a panel's children are not rendered until that tab is first
-   * activated. Once mounted they remain in the DOM across subsequent tab
-   * switches (lazy mount, not unmount-on-hide). Useful for panels that own
-   * expensive initialisation — e.g. a scroll-snap carousel whose initial
-   * scroll position must be set while the panel is visible. */
-  lazyMount?: boolean;
-} & BaseTabsRootProps &
-  (UncontrolledTabsRootProps | ControlledTabsRootProps);
-
-/** The value shared by `Tabs.Root` with its descendants through context:
- * resolved configuration, the active tab and its setter, and the registry of
- * triggers used for roving focus and keyboard navigation. */
-export type TabsContextValue = {
-  orientation: TabsOrientation;
-  dir: TabsReadingDirection;
-  activationMode: TabsActivationMode;
-  activeValue: string | undefined;
-  isControlled: boolean;
-  setActiveValue: (next: string) => void;
-  onValueChange?: (value: string) => void;
-  onChange?: ({ index, name }: TabMetadata) => void;
-  tabsId: string;
-  lazyMount: boolean;
-  registerTrigger: (
-    value: string,
-    element: HTMLButtonElement | null,
-    disabled?: boolean,
-  ) => void;
-  triggerValues: string[];
-  disabledTriggerValues: Set<string>;
-  focusTrigger: (value: string) => void;
-};
-
-/** Props for `Tabs.List` — the `role="tablist"` container. Requires exactly one
- * accessible name source: either an inline `label` or an `ariaLabelledBy` id
- * referencing existing label text. */
-export type TabsListProps = Omit<
-  ComponentProps<"div">,
-  "label" | "aria-labelledby"
-> &
-  (
-    | {
-        /** Accessible name for the tablist, announced as `aria-label`. Pick a
-         * short, human-readable description of the set (e.g. `"Account
-         * sections"`, not `"Tabs"`). Mutually exclusive with `ariaLabelledBy`. */
-        label: string;
-        ariaLabelledBy?: never;
-      }
-    | {
-        label?: never;
-        /** Id of an existing element to use as the tablist's accessible name,
-         * set as `aria-labelledby`. Mutually exclusive with `label`. */
-        ariaLabelledBy: string;
-      }
-  );
-/** Props for `Tabs.Trigger` — an individual `role="tab"` button. Identified by
- * its required `value`, which links it to the `Tabs.Content` of the same value.
- * The element type defaults to `HTMLButtonElement` and can be overridden via
- * `asChild` and the `ref` type parameter. */
-export type TabsTriggerProps<T extends HTMLElement = HTMLButtonElement> = Omit<
-  ComponentProps<"button">,
-  "ref" | "value"
-> & {
-  /** Removes the trigger from the roving tab order and marks it
-   * `aria-disabled`/`data-disabled`; arrow-key navigation skips it.
-   * @default false */
-  disabled?: boolean;
-  /** Identifies this trigger, linking it to the `Tabs.Content` of the same
-   * value. Not the visible label — use `children` for that. */
-  value: string;
-  /** Render the child element instead of the default `<button>`. All tab
-   * ARIA attributes and event handlers are merged onto the child. The child
-   * must accept a `ref`. Useful for routing links that need tab semantics. */
-  asChild?: boolean;
-  /** Ref to the rendered element. Defaults to `HTMLButtonElement`; when using
-   * `asChild`, specify the child's element type (e.g. `HTMLAnchorElement`). */
-  ref?: Ref<T>;
-};
-
-/** Props for `Tabs.Content` — a `role="tabpanel"`. Its required `value` links
- * it to the `Tabs.Trigger` of the same value. */
-export type TabsContentProps = ComponentProps<"div"> & {
-  /** Value of the trigger this panel belongs to. */
-  value: string;
-};
-
-/** Imperative handle exposed on the `Tabs.Root` ref for programmatic control. */
-export type TabsImperativeApi = {
-  /** Activate the tab with the given value. */
-  setActiveTab: (value: string) => void;
-};

package/src/Tabs/utils.ts

@@ -1,8 +0,0 @@
-import { deriveId } from "../utils/index.ts";
-
-export function getTriggerAndPanelIds(tabsId: string, value: string) {
-  return {
-    triggerId: deriveId(tabsId, "trigger", value),
-    panelId: deriveId(tabsId, "panel", value),
-  };
-}

package/src/Textarea/README.md

@@ -1,98 +0,0 @@
-# Textarea
-
-A headless, accessible multi-line text input. Zero styles ship — apply
-whatever design system you use.
-
-```tsx
-import { Textarea } from "@primitiv-ui/react";
-
-<label htmlFor="bio">Bio</label>
-<Textarea id="bio" rows={4} placeholder="Tell us about yourself" />
-```
-
-## Props
-
-| Prop       | Type                         | Default | Notes                                                            |
-| ---------- | ---------------------------- | ------- | ---------------------------------------------------------------- |
-| `disabled` | `boolean`                    | —       | Native `disabled` + `data-disabled=""` styling hook              |
-| `asChild`  | `boolean`                    | `false` | Delegate rendering to the child element via Slot                 |
-| `ref`      | `Ref<HTMLTextAreaElement>`   | —       | Forwarded to the underlying textarea element                     |
-| `...rest`  | `ComponentProps<"textarea">` | —       | All other `<textarea>` props (`value`, `rows`, `aria-*`, etc.)   |
-
-## Labelling
-
-A `<textarea>` has no implicit accessible name. Give it one of:
-
-- a `<label>` whose `htmlFor` matches the textarea's `id`,
-- an `aria-label`, or
-- an `aria-labelledby` pointing at visible label text.
-
-```tsx
-<label htmlFor="notes">Notes</label>
-<Textarea id="notes" />
-```
-
-## Disabled
-
-Passing `disabled` forwards the native `disabled` attribute (removing the
-field from the tab order and blocking input) **and** sets
-`data-disabled=""` so CSS can target `[data-disabled]` without relying on
-the `:disabled` pseudo-class:
-
-```tsx
-<Textarea aria-label="Bio" disabled />
-```
-
-```css
-textarea[data-disabled] {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-```
-
-## `asChild` composition
-
-Pass `asChild` to render any consumer-supplied element instead of
-`<textarea>`. All props (`aria-*`, `data-*`, event handlers, `ref`) are
-merged onto the child via the `Slot` utility — event handlers compose
-(child runs first), `style` is shallow-merged, `className` is concatenated.
-
-This is the escape hatch for wrapping a third-party autosizing textarea
-while keeping the same prop contract:
-
-```tsx
-<Textarea asChild aria-label="Bio">
-  <AutosizeTextarea />
-</Textarea>
-```
-
-## Ref forwarding
-
-```tsx
-const ref = useRef<HTMLTextAreaElement>(null);
-<Textarea ref={ref} aria-label="Bio" />
-```
-
-## Field integration
-
-When rendered inside a [`<Field.Root>`](../Field/README.md), `Textarea`
-reads `FieldContext` and inherits:
-
-- `id` (from `field.id`)
-- `aria-describedby` (composed: consumer ids first, then the field's
-  `descriptionId`, then `errorId` when invalid)
-- `aria-invalid` (`"true"` when the field is invalid)
-- `disabled`
-- `required`
-
-Consumer-supplied props always win — pass an explicit value on the
-`Textarea` to override any field-derived one. Outside a `<Field.Root>`,
-behaviour is unchanged.
-
-```tsx
-<Field.Root invalid={!!errors.bio}>
-  <Field.Label>Bio</Field.Label>
-  <Textarea rows={4} required {...register("bio")} />
-  <Field.ErrorText>{errors.bio?.message}</Field.ErrorText>
-</Field.Root>
-```

package/src/Textarea/Textarea.tsx

@@ -1,104 +0,0 @@
-import type { ReactElement } from "react";
-
-import { useFieldProps } from "../Field/hooks/index.ts";
-import { Slot } from "../Slot/index.ts";
-import { TextareaProps } from "./types";
-
-/**
- * A headless, accessible multi-line text input.
- *
- * Renders a native `<textarea>` and passes every standard textarea
- * attribute straight through to the DOM — `value` / `defaultValue`,
- * `rows`, `cols`, `placeholder`, `readOnly`, `required`, `name`,
- * `maxLength`, and so on. No styles ship with the component.
- *
- * **Labelling.** A `<textarea>` has no implicit accessible name. Pair it
- * with a `<label>` (`htmlFor` → the textarea's `id`), or pass `aria-label`
- * / `aria-labelledby` for the control to be announced correctly.
- *
- * **Field integration.** When rendered inside a `<Field.Root>`, Textarea
- * opts into `FieldContext` and inherits `id`, `aria-describedby`,
- * `aria-invalid`, `disabled`, and `required` from the field. Any prop
- * the consumer passes wins; `aria-describedby` is composed (consumer
- * ids first, then field-supplied description / error ids). Outside a
- * `<Field.Root>`, behaviour is unchanged.
- *
- * **Ref forwarding.** Pass a `ref` prop to access the underlying
- * `HTMLTextAreaElement` directly:
- *
- * ```tsx
- * const ref = useRef<HTMLTextAreaElement>(null);
- * <Textarea ref={ref} aria-label="Bio" />
- * ```
- *
- * **Disabled.** Sets native `disabled` (removing the field from the tab
- * order and blocking input) plus `data-disabled=""` so CSS can target
- * `[data-disabled]` without relying on the `:disabled` pseudo-class:
- *
- * ```css
- * textarea[data-disabled] { opacity: 0.5; cursor: not-allowed; }
- * ```
- *
- * **Styling hooks.**
- * - `data-disabled=""` — present when `disabled` is `true`; omitted otherwise.
- *   Target with `[data-disabled]` rather than the `:disabled` pseudo-class so
- *   styles work identically in both native and `asChild` modes.
- *
- * **`asChild` composition.** Renders the consumer's element instead of
- * `<textarea>`, merging all props (aria-*, data-*, event handlers, ref)
- * via the {@link Slot} utility. Use it to wrap an autosizing textarea
- * implementation while keeping this component's prop contract. Event handlers
- * compose with the child's own handlers (child runs first).
- *
- * @extends HTMLTextAreaElement
- *
- * @example Basic usage
- * ```tsx
- * <label htmlFor="bio">Bio</label>
- * <Textarea id="bio" rows={4} placeholder="Tell us about yourself" />
- * ```
- *
- * @example Inside a Field — id and aria wired automatically
- * ```tsx
- * <Field.Root invalid={!!errors.bio}>
- *   <Field.Label>Bio</Field.Label>
- *   <Textarea rows={4} {...register("bio")} />
- *   <Field.ErrorText>{errors.bio?.message}</Field.ErrorText>
- * </Field.Root>
- * ```
- *
- * @example Disabled
- * ```tsx
- * <Textarea aria-label="Bio" disabled />
- * ```
- *
- * @example asChild — wrap an autosizing textarea
- * ```tsx
- * <Textarea asChild aria-label="Bio">
- *   <AutosizeTextarea />
- * </Textarea>
- * ```
- */
-export function Textarea({
-  asChild = false,
-  children,
-  ref,
-  ...consumer
-}: TextareaProps): ReactElement {
-  const merged = useFieldProps(consumer);
-
-  const rootProps = {
-    ...merged,
-    ref,
-    "data-disabled": merged.disabled ? "" : undefined,
-  };
-
-  if (asChild) {
-    return <Slot {...rootProps}>{children}</Slot>;
-  }
-
-  return <textarea {...rootProps} />;
-}
-
-/** @internal */
-Textarea.displayName = "Textarea";

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

@@ -1,85 +0,0 @@
-import { createRef } from "react";
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-import { Textarea } from "../Textarea";
-
-describe("Textarea asChild composition", () => {
-  it("renders the consumer's element instead of its own <textarea>", () => {
-    // Arrange & Act
-    render(
-      <Textarea asChild aria-label="Bio">
-        <textarea data-testid="autosize" />
-      </Textarea>,
-    );
-
-    // Assert
-    expect(screen.getByRole("textbox", { name: "Bio" })).toHaveAttribute(
-      "data-testid",
-      "autosize",
-    );
-  });
-
-  it("renders exactly one textarea — the child, not an extra wrapper", () => {
-    // Arrange & Act
-    render(
-      <Textarea asChild aria-label="Bio">
-        <textarea />
-      </Textarea>,
-    );
-
-    // Assert
-    expect(screen.getAllByRole("textbox")).toHaveLength(1);
-  });
-
-  it("merges aria-* props onto the child element", () => {
-    // Arrange & Act
-    render(
-      <Textarea asChild aria-label="Bio" aria-invalid>
-        <textarea />
-      </Textarea>,
-    );
-
-    // Assert
-    expect(screen.getByRole("textbox", { name: "Bio" })).toHaveAttribute(
-      "aria-invalid",
-      "true",
-    );
-  });
-
-  it("composes onChange — child handler fires first, then Textarea's", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    const order: string[] = [];
-    render(
-      <Textarea
-        asChild
-        aria-label="Bio"
-        onChange={() => order.push("textarea")}
-      >
-        <textarea onChange={() => order.push("child")} />
-      </Textarea>,
-    );
-
-    // Act
-    await user.type(screen.getByRole("textbox", { name: "Bio" }), "x");
-
-    // Assert
-    expect(order).toEqual(["child", "textarea"]);
-  });
-
-  it("forwards a ref to the child element", () => {
-    // Arrange
-    const ref = createRef<HTMLTextAreaElement>();
-
-    // Act
-    render(
-      <Textarea asChild aria-label="Bio" ref={ref}>
-        <textarea />
-      </Textarea>,
-    );
-
-    // Assert
-    expect(ref.current).toBe(screen.getByRole("textbox", { name: "Bio" }));
-  });
-});

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

@@ -1,112 +0,0 @@
-import { createRef } from "react";
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-import { Textarea } from "../Textarea";
-
-describe("Textarea basic rendering", () => {
-  it("renders a <textarea> element", () => {
-    // Arrange & Act
-    render(<Textarea aria-label="Notes" />);
-
-    // Assert
-    expect(screen.getByRole("textbox", { name: "Notes" }).tagName).toBe(
-      "TEXTAREA",
-    );
-  });
-
-  it("forwards a ref to the underlying textarea element (object ref)", () => {
-    // Arrange
-    const ref = createRef<HTMLTextAreaElement>();
-
-    // Act
-    render(<Textarea aria-label="Notes" ref={ref} />);
-
-    // Assert
-    expect(ref.current).toBe(screen.getByRole("textbox", { name: "Notes" }));
-  });
-
-  it("forwards a ref to the underlying textarea element (function ref)", () => {
-    // Arrange
-    const received: (HTMLTextAreaElement | null)[] = [];
-    const functionRef = (node: HTMLTextAreaElement | null) => {
-      received.push(node);
-    };
-
-    // Act
-    render(<Textarea aria-label="Notes" ref={functionRef} />);
-
-    // Assert
-    expect(received).toContain(
-      screen.getByRole("textbox", { name: "Notes" }),
-    );
-  });
-
-  it("reflects a defaultValue", () => {
-    // Arrange & Act
-    render(<Textarea aria-label="Notes" defaultValue="hello" />);
-
-    // Assert
-    expect(screen.getByRole("textbox", { name: "Notes" })).toHaveValue(
-      "hello",
-    );
-  });
-
-  it("passes through textarea attributes (rows, placeholder)", () => {
-    // Arrange & Act
-    render(<Textarea aria-label="Notes" rows={6} placeholder="Type here" />);
-    const textarea = screen.getByRole("textbox", { name: "Notes" });
-
-    // Assert
-    expect(textarea).toHaveAttribute("rows", "6");
-    expect(textarea).toHaveAttribute("placeholder", "Type here");
-  });
-
-  it("passes through aria-* attributes", () => {
-    // Arrange & Act
-    render(<Textarea aria-label="Notes" aria-invalid />);
-
-    // Assert
-    expect(screen.getByRole("textbox", { name: "Notes" })).toHaveAttribute(
-      "aria-invalid",
-      "true",
-    );
-  });
-
-  it("passes through data-* attributes", () => {
-    // Arrange & Act
-    render(<Textarea aria-label="Notes" data-testid="bio" />);
-
-    // Assert
-    expect(screen.getByTestId("bio")).toBeInTheDocument();
-  });
-
-  it("passes through className", () => {
-    // Arrange & Act
-    render(<Textarea aria-label="Notes" className="field" />);
-
-    // Assert
-    expect(screen.getByRole("textbox", { name: "Notes" })).toHaveAttribute(
-      "class",
-      "field",
-    );
-  });
-
-  it("passes through event handlers (onChange)", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    const onChange = vi.fn();
-    render(<Textarea aria-label="Notes" onChange={onChange} />);
-
-    // Act
-    await user.type(screen.getByRole("textbox", { name: "Notes" }), "hi");
-
-    // Assert
-    expect(onChange).toHaveBeenCalledTimes(2);
-  });
-
-  it('sets displayName to "Textarea" for React DevTools and stack traces', () => {
-    // Assert — an empty displayName would render it as an anonymous component.
-    expect(Textarea.displayName).toBe("Textarea");
-  });
-});

package/src/Textarea/__tests__/Textarea.disabled.test.tsx

@@ -1,49 +0,0 @@
-import { render, screen } from "@testing-library/react";
-
-import { Textarea } from "../Textarea";
-
-describe("Textarea disabled state", () => {
-  it("sets the native disabled attribute", () => {
-    // Arrange & Act
-    render(<Textarea aria-label="Notes" disabled />);
-
-    // Assert
-    expect(screen.getByRole("textbox", { name: "Notes" })).toBeDisabled();
-  });
-
-  it('sets data-disabled="" as a CSS styling hook', () => {
-    // Arrange & Act
-    render(<Textarea aria-label="Notes" disabled />);
-
-    // Assert
-    expect(screen.getByRole("textbox", { name: "Notes" })).toHaveAttribute(
-      "data-disabled",
-      "",
-    );
-  });
-
-  it("does not set data-disabled when not disabled", () => {
-    // Arrange & Act
-    render(<Textarea aria-label="Notes" />);
-
-    // Assert
-    expect(
-      screen.getByRole("textbox", { name: "Notes" }),
-    ).not.toHaveAttribute("data-disabled");
-  });
-
-  it("sets data-disabled on the child element when asChild and disabled", () => {
-    // Arrange & Act
-    render(
-      <Textarea asChild aria-label="Notes" disabled>
-        <textarea />
-      </Textarea>,
-    );
-
-    // Assert
-    expect(screen.getByRole("textbox", { name: "Notes" })).toHaveAttribute(
-      "data-disabled",
-      "",
-    );
-  });
-});