@primitiv-ui/react 0.1.38 → 0.1.39

package/dist/SplitButton/SplitButton.js

@@ -0,0 +1,343 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId, useMemo } from "react";
+import { Dropdown } from "../Dropdown/index.js";
+import { useDropdownContext } from "../Dropdown/hooks/index.js";
+import { Slot, composeEventHandlers } from "../Slot/index.js";
+import { deriveId } from "../utils/index.js";
+import { SplitButtonProvider, useSplitButtonContext, } from "./SplitButtonContext.js";
+/**
+ * The root of a SplitButton — renders the `role="group"` element that binds
+ * the primary action and the menu trigger into one widget, and owns the
+ * menu's open state by rendering a {@link Dropdown | `Dropdown.Root`} around
+ * it.
+ *
+ * **Two controls, one widget.** A split button is *not* a `Select`: the left
+ * half performs an action immediately, the right half opens a menu of related
+ * alternatives. Both halves stay independently tabbable — that is correct for
+ * two genuinely separate commands, and deliberately *not* a roving tabstop.
+ *
+ * **Open state.** Identical to `Dropdown.Root`'s: uncontrolled via
+ * `defaultOpen`, or controlled via `open` + `onOpenChange`, statically
+ * discriminated at the type level. `dir` is forwarded too, so submenus
+ * composed from `Dropdown.Sub` invert their arrow keys in RTL.
+ *
+ * **Styling hooks.** `data-split-button=""`, `data-state="open" | "closed"`
+ * tracking the menu, and `data-disabled=""` when the group is disabled.
+ *
+ * **`asChild` composition.** Pass `asChild` to render a consumer-supplied
+ * element as the group instead of `<div>`.
+ *
+ * @extends HTMLDivElement
+ *
+ * @example Uncontrolled
+ * ```tsx
+ * <SplitButton>
+ *   <SplitButton.Action onClick={squashAndMerge}>
+ *     Squash and merge
+ *   </SplitButton.Action>
+ *   <SplitButton.Trigger>
+ *     <ChevronDown aria-hidden="true" />
+ *     <VisuallyHidden>More merge options</VisuallyHidden>
+ *   </SplitButton.Trigger>
+ *   <SplitButton.Menu>
+ *     <SplitButton.Item onSelect={mergeCommit}>
+ *       Create a merge commit
+ *     </SplitButton.Item>
+ *     <SplitButton.Item onSelect={rebase}>Rebase and merge</SplitButton.Item>
+ *   </SplitButton.Menu>
+ * </SplitButton>
+ * ```
+ *
+ * @example Controlled menu, whole widget disabled
+ * ```tsx
+ * const [open, setOpen] = useState(false);
+ *
+ * <SplitButton open={open} onOpenChange={setOpen} disabled={saving}>
+ *   ...
+ * </SplitButton>
+ * ```
+ */
+export function SplitButtonRoot({ defaultOpen, open, onOpenChange, dir, disabled = false, children, ref, ...rest }) {
+    return (_jsx(Dropdown.Root, { ...{ defaultOpen, open, onOpenChange, dir }, children: _jsx(SplitButtonFrame, { ...rest, ref: ref, disabled: disabled, children: children }) }));
+}
+/** @internal */
+// Stryker disable next-line StringLiteral: the compound is `Object.assign(SplitButtonRoot, ...)`,
+// so `SplitButton.displayName = "SplitButton"` overwrites this value at load — it is never
+// observable at runtime. The assignment itself must stay: it is what declares `displayName`
+// on `typeof SplitButtonRoot`, which `TSplitButtonCompound` extends.
+SplitButtonRoot.displayName = "SplitButtonRoot";
+/**
+ * The group element itself, split out of {@link SplitButtonRoot} so it can
+ * read the open state of the `Dropdown.Root` that Root renders around it.
+ *
+ * @internal
+ */
+function SplitButtonFrame({ asChild = false, disabled, children, ref, ...rest }) {
+    const { open } = useDropdownContext();
+    const rootId = useId();
+    const contextValue = useMemo(() => ({
+        actionId: deriveId(rootId, "split-button", "action"),
+        triggerId: deriveId(rootId, "split-button", "trigger"),
+        disabled,
+    }), [rootId, disabled]);
+    const frameProps = {
+        ...rest,
+        ref,
+        role: "group",
+        "data-split-button": "",
+        "data-state": open ? "open" : "closed",
+        "data-disabled": disabled ? "" : undefined,
+    };
+    return (_jsx(SplitButtonProvider, { value: contextValue, children: asChild ? (_jsx(Slot, { ...frameProps, children: children })) : (_jsx("div", { ...frameProps, children: children })) }));
+}
+/**
+ * The primary half — a `<button type="button">` that performs the default
+ * action immediately on click. It is **not** the menu trigger and carries no
+ * `aria-haspopup`.
+ *
+ * **Keyboard.** `ArrowDown` opens the menu and moves focus to its first item,
+ * the standard split-button affordance for reaching the alternatives without
+ * tabbing past the action. Every other key falls through, and a consumer's own
+ * `onKeyDown` runs first.
+ *
+ * **Accessible naming.** This element's `id` is component-owned (hence
+ * `Omit`-ted from the props) because
+ * {@link SplitButtonTrigger | `SplitButton.Trigger`} references it to build
+ * its own accessible name — give the action a visible text label and the
+ * chevron half is named for free.
+ *
+ * **Disabled.** Sets native `disabled` plus `data-disabled=""` when either
+ * this prop or the group's `disabled` is set; the two are OR-ed, so the group
+ * can never be overridden back to enabled.
+ *
+ * **`asChild` composition.** Renders the consumer's element instead of
+ * `<button>` — e.g. a router link. `type="button"` is **not** forwarded in
+ * this mode; the child owns its own type semantics.
+ *
+ * @extends HTMLButtonElement
+ *
+ * @example
+ * ```tsx
+ * <SplitButton.Action onClick={squashAndMerge}>
+ *   Squash and merge
+ * </SplitButton.Action>
+ * ```
+ *
+ * @example asChild — the action navigates instead of firing a handler
+ * ```tsx
+ * <SplitButton.Action asChild>
+ *   <a href="/merge">Squash and merge</a>
+ * </SplitButton.Action>
+ * ```
+ */
+export function SplitButtonAction({ asChild = false, children, disabled, onKeyDown, ref, ...rest }) {
+    const { actionId, disabled: groupDisabled } = useSplitButtonContext();
+    const { setOpen } = useDropdownContext();
+    const isDisabled = groupDisabled || disabled === true;
+    const openMenu = (event) => {
+        if (event.key !== "ArrowDown")
+            return;
+        event.preventDefault();
+        setOpen(true);
+    };
+    const actionProps = {
+        ...rest,
+        ref,
+        id: actionId,
+        disabled: isDisabled,
+        onKeyDown: composeEventHandlers(onKeyDown, openMenu),
+        "data-disabled": isDisabled ? "" : undefined,
+        "data-split-button-action": "",
+    };
+    if (asChild) {
+        return _jsx(Slot, { ...actionProps, children: children });
+    }
+    return (_jsx("button", { type: "button", ...actionProps, children: children }));
+}
+SplitButtonAction.displayName = "SplitButtonAction";
+/**
+ * The menu half — a `<button type="button">` carrying `aria-haspopup="menu"`,
+ * `aria-expanded` and `aria-controls`, all inherited from
+ * {@link Dropdown | `Dropdown.Trigger`}.
+ *
+ * **Accessible name, derived.** A chevron-only control has no text of its own,
+ * so unless you pass `aria-label` or `aria-labelledby` the trigger defaults to
+ * `aria-labelledby="<its own id> <the action's id>"`. Self-reference is valid
+ * in `aria-labelledby` and resolves to the element's own contents, so a
+ * visually-hidden "More options" inside the trigger yields
+ * *"More options, Squash and merge"* rather than an unlabelled button or a
+ * second control with the same name as the action. Passing either ARIA
+ * attribute yourself opts out entirely.
+ *
+ * **Disabled.** OR-ed with the group's `disabled`, exactly like
+ * {@link SplitButtonAction | `SplitButton.Action`}.
+ *
+ * **Styling hooks.** `data-split-button-trigger=""`, plus `data-disabled=""`.
+ * Its `id` is component-owned (`Omit`-ted from the props) because the derived
+ * name references it.
+ *
+ * @extends HTMLButtonElement
+ *
+ * @example Derived name — chevron plus hidden text
+ * ```tsx
+ * <SplitButton.Trigger>
+ *   <ChevronDown aria-hidden="true" />
+ *   <VisuallyHidden>More merge options</VisuallyHidden>
+ * </SplitButton.Trigger>
+ * ```
+ *
+ * @example Explicit name — opts out of the derivation
+ * ```tsx
+ * <SplitButton.Trigger aria-label="More merge options">
+ *   <ChevronDown aria-hidden="true" />
+ * </SplitButton.Trigger>
+ * ```
+ */
+export function SplitButtonTrigger({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, disabled, ...rest }) {
+    const { actionId, triggerId, disabled: groupDisabled, } = useSplitButtonContext();
+    const named = ariaLabel !== undefined || ariaLabelledBy !== undefined;
+    const isDisabled = groupDisabled || disabled === true;
+    return (_jsx(Dropdown.Trigger, { ...rest, id: triggerId, "aria-label": ariaLabel, "aria-labelledby": named ? ariaLabelledBy : `${triggerId} ${actionId}`, disabled: isDisabled, "data-disabled": isDisabled ? "" : undefined, "data-split-button-trigger": "" }));
+}
+SplitButtonTrigger.displayName = "SplitButtonTrigger";
+/**
+ * The menu panel of alternative actions — a `role="menu"` native
+ * `popover="auto"` element delegating wholly to
+ * {@link Dropdown | `Dropdown.Content`}: arrow-key navigation, Home/End,
+ * typeahead, Escape-to-close-and-restore-focus, and light dismiss all come
+ * from there.
+ *
+ * Anything valid inside a `Dropdown.Content` is valid here — `Dropdown.Group`,
+ * `Dropdown.Label`, `Dropdown.CheckboxItem`, `Dropdown.Sub` — because Root
+ * provides the same Dropdown context. `SplitButton` re-exports only the two
+ * parts a split button's menu almost always needs
+ * ({@link SplitButtonItem | `Item`} and
+ * {@link SplitButtonSeparator | `Separator`}); reach for `Dropdown.*` directly
+ * for the rest.
+ *
+ * **Styling hook.** `data-split-button-menu=""`, alongside Dropdown's own.
+ *
+ * @extends HTMLMenuElement
+ *
+ * @example
+ * ```tsx
+ * <SplitButton.Menu>
+ *   <SplitButton.Item onSelect={mergeCommit}>Create a merge commit</SplitButton.Item>
+ *   <SplitButton.Separator />
+ *   <SplitButton.Item disabled>Rebase and merge</SplitButton.Item>
+ * </SplitButton.Menu>
+ * ```
+ */
+export function SplitButtonMenu(props) {
+    return _jsx(Dropdown.Content, { ...props, "data-split-button-menu": "" });
+}
+SplitButtonMenu.displayName = "SplitButtonMenu";
+/**
+ * One alternative action in the menu — a `role="menuitem"` row, delegating
+ * wholly to {@link Dropdown | `Dropdown.Item`}. Fires `onSelect` with a
+ * cancellable event and auto-closes the menu; call `event.preventDefault()`
+ * to keep it open. `disabled` rows get `aria-disabled` and are skipped by
+ * arrow navigation and typeahead.
+ *
+ * @extends HTMLDivElement
+ *
+ * @example
+ * ```tsx
+ * <SplitButton.Item onSelect={() => merge("rebase")}>
+ *   Rebase and merge
+ * </SplitButton.Item>
+ * ```
+ */
+export function SplitButtonItem(props) {
+    return _jsx(Dropdown.Item, { ...props });
+}
+SplitButtonItem.displayName = "SplitButtonItem";
+/**
+ * A `role="separator"` divider between groups of alternatives, delegating
+ * wholly to {@link Dropdown | `Dropdown.Separator`}. Skipped by focus and
+ * typeahead.
+ *
+ * @extends HTMLDivElement
+ *
+ * @example
+ * ```tsx
+ * <SplitButton.Separator />
+ * ```
+ */
+export function SplitButtonSeparator(props) {
+    return _jsx(Dropdown.Separator, { ...props });
+}
+SplitButtonSeparator.displayName = "SplitButtonSeparator";
+/**
+ * Headless, accessible **SplitButton** — one primary action paired with a menu
+ * of related alternatives, bound into a single `role="group"` widget. Zero
+ * styles ship.
+ *
+ * A split button is an **actions** control, not a value control: clicking the
+ * left half runs the default action immediately, and the right half opens a
+ * menu of alternatives (which may run their own action, or re-point what the
+ * primary half does). If what you need is "which option is currently
+ * selected?", reach for {@link Select} instead.
+ *
+ * `SplitButton` is a composition over {@link Dropdown} — Root renders a
+ * `Dropdown.Root` and every menu part delegates to Dropdown's, so all the menu
+ * keyboard/focus/light-dismiss behaviour is Dropdown's, tested once. What this
+ * component adds on top is the coordination between the two halves that
+ * Dropdown alone cannot provide:
+ *
+ * - the `role="group"` boundary that makes them read as one widget;
+ * - the trigger's accessible name, derived from the primary action;
+ * - `disabled` propagating from the group to both halves;
+ * - `ArrowDown` on the action opening the menu.
+ *
+ * `SplitButton` is both callable (an alias of `SplitButton.Root`) and carries
+ * its sub-components as static properties:
+ *
+ * - {@link SplitButtonRoot | `SplitButton.Root`} — the `role="group"` element
+ *   and the menu's state owner.
+ * - {@link SplitButtonAction | `SplitButton.Action`} — the primary half.
+ * - {@link SplitButtonTrigger | `SplitButton.Trigger`} — the menu half.
+ * - {@link SplitButtonMenu | `SplitButton.Menu`} — the menu panel.
+ * - {@link SplitButtonItem | `SplitButton.Item`} — one alternative action.
+ * - {@link SplitButtonSeparator | `SplitButton.Separator`} — a divider.
+ *
+ * **Both halves are tabbable.** They are two separate commands, so each is its
+ * own tab stop — this is not a roving-tabindex widget, and should not become
+ * one.
+ *
+ * @example
+ * ```tsx
+ * import { SplitButton, VisuallyHidden } from "@primitiv-ui/react";
+ *
+ * <SplitButton>
+ *   <SplitButton.Action onClick={squashAndMerge}>
+ *     Squash and merge
+ *   </SplitButton.Action>
+ *   <SplitButton.Trigger>
+ *     <ChevronDown aria-hidden="true" />
+ *     <VisuallyHidden>More merge options</VisuallyHidden>
+ *   </SplitButton.Trigger>
+ *   <SplitButton.Menu>
+ *     <SplitButton.Item onSelect={mergeCommit}>
+ *       Create a merge commit
+ *     </SplitButton.Item>
+ *     <SplitButton.Item onSelect={rebase}>Rebase and merge</SplitButton.Item>
+ *   </SplitButton.Menu>
+ * </SplitButton>
+ * ```
+ *
+ * @see {@link SplitButtonRoot} for open-state modes and the group anatomy.
+ * @see {@link SplitButtonTrigger} for how the derived accessible name works.
+ * @see {@link Dropdown} for everything the menu itself does.
+ */
+const SplitButtonCompound = Object.assign(SplitButtonRoot, {
+    Root: SplitButtonRoot,
+    Action: SplitButtonAction,
+    Trigger: SplitButtonTrigger,
+    Menu: SplitButtonMenu,
+    Item: SplitButtonItem,
+    Separator: SplitButtonSeparator,
+});
+SplitButtonCompound.displayName = "SplitButton";
+export { SplitButtonCompound as SplitButton };

package/dist/SplitButton/SplitButtonContext.d.ts

@@ -0,0 +1,11 @@
+import type { Context, Provider } from "react";
+import type { SplitButtonContextValue } from "./types.js";
+/** Strict React context carrying the {@link SplitButtonContextValue} from
+ * `SplitButton.Root` to its Action and Trigger. `null` outside a Root. */
+export declare const SplitButtonContext: Context<SplitButtonContextValue | null>;
+/** Reads the {@link SplitButtonContextValue}; throws outside a
+ * `SplitButton.Root`. */
+export declare const useSplitButtonContext: () => SplitButtonContextValue;
+/** Provider for {@link SplitButtonContext}, used by `SplitButton.Root`. */
+declare const SplitButtonProvider: Provider<SplitButtonContextValue | null>;
+export { SplitButtonProvider };

package/dist/SplitButton/SplitButtonContext.js

@@ -0,0 +1,12 @@
+"use client";
+import { createStrictContext } from "../utils/index.js";
+const splitButtonContextPair = createStrictContext("SplitButton sub-components must be rendered inside a <SplitButton.Root>.", "SplitButtonContext");
+/** Strict React context carrying the {@link SplitButtonContextValue} from
+ * `SplitButton.Root` to its Action and Trigger. `null` outside a Root. */
+export const SplitButtonContext = splitButtonContextPair[0];
+/** Reads the {@link SplitButtonContextValue}; throws outside a
+ * `SplitButton.Root`. */
+export const useSplitButtonContext = splitButtonContextPair[1];
+/** Provider for {@link SplitButtonContext}, used by `SplitButton.Root`. */
+const SplitButtonProvider = SplitButtonContext.Provider;
+export { SplitButtonProvider };

package/dist/SplitButton/index.d.ts

@@ -0,0 +1,2 @@
+export { SplitButton } from "./SplitButton.js";
+export type * from "./types.js";

package/dist/SplitButton/index.js

@@ -0,0 +1 @@
+export { SplitButton } from "./SplitButton.js";

package/dist/SplitButton/types.d.ts

@@ -0,0 +1,161 @@
+import { ComponentProps, ReactNode, Ref } from "react";
+import type { Direction } from "../DirectionProvider/index.js";
+import type { DropdownContentProps, DropdownItemProps, DropdownSeparatorProps, DropdownTriggerProps } from "../Dropdown/types.js";
+/**
+ * Shared base for both {@link SplitButtonRootProps} variants — the native
+ * `<div>` attributes (minus the component-owned `role` and the narrowed
+ * `dir`) plus the `asChild` escape hatch, reading direction, and the
+ * group-level `disabled`.
+ */
+export type SplitButtonRootBaseProps = Omit<ComponentProps<"div">, "role" | "dir"> & {
+    /**
+     * The widget's parts — typically one
+     * {@link SplitButtonActionProps | `SplitButton.Action`}, one
+     * {@link SplitButtonTriggerProps | `SplitButton.Trigger`}, and one
+     * {@link SplitButtonMenuProps | `SplitButton.Menu`}.
+     */
+    children?: ReactNode;
+    /** Forwarded to the underlying `HTMLDivElement` (or to the `asChild`
+     * element). */
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * When `true`, Root delegates rendering to a single consumer-supplied
+     * element via the {@link Slot} pattern instead of the default `<div>`;
+     * `role="group"`, `data-state`, `data-disabled` and the remaining props are
+     * merged onto it.
+     * @default false
+     */
+    asChild?: boolean;
+    /**
+     * Reading direction for the menu. Only affects which arrow key opens or
+     * closes a submenu composed from `Dropdown.Sub` — `ArrowRight` opens in
+     * `"ltr"`, `ArrowLeft` in `"rtl"`. When omitted it is inherited from the
+     * nearest {@link DirectionProvider}, falling back to `"ltr"`.
+     */
+    dir?: Direction;
+    /**
+     * Disables the whole widget — both the primary action and the menu trigger
+     * become non-interactive, and `data-disabled=""` is set on the group. OR-ed
+     * with each half's own `disabled`, so a disabled group can never be
+     * overridden back to enabled by a part.
+     * @default false
+     */
+    disabled?: boolean;
+};
+/**
+ * Uncontrolled variant of {@link SplitButtonRootProps}: the component owns the
+ * menu's open state. Pass `defaultOpen` (or omit it); `onOpenChange` is
+ * optional and `open` is forbidden.
+ */
+export type SplitButtonRootUncontrolledProps = SplitButtonRootBaseProps & {
+    /**
+     * Whether the menu is open on first render. Omit to start closed. The
+     * component owns the state thereafter.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /** Forbidden in uncontrolled mode — use `defaultOpen` instead. */
+    open?: never;
+    /**
+     * Called whenever a user-driven transition opens or closes the menu
+     * (trigger click, `ArrowDown` on the action, Escape, outside click,
+     * selection). Optional in uncontrolled mode.
+     */
+    onOpenChange?: (open: boolean) => void;
+};
+/**
+ * Controlled variant of {@link SplitButtonRootProps}: the parent owns the
+ * menu's open state. Pass `open` and `onOpenChange` together; `defaultOpen` is
+ * forbidden.
+ */
+export type SplitButtonRootControlledProps = SplitButtonRootBaseProps & {
+    /** Forbidden in controlled mode — use `open` instead. */
+    defaultOpen?: never;
+    /**
+     * Whether the menu is currently open. Must be kept in sync by the parent via
+     * `onOpenChange`; the component never mutates it internally.
+     */
+    open: boolean;
+    /**
+     * Called whenever a user-driven transition would open or close the menu. The
+     * parent is responsible for reflecting the new value back into `open`.
+     * Required in controlled mode.
+     */
+    onOpenChange: (open: boolean) => void;
+};
+/**
+ * Props for {@link SplitButtonRoot | `SplitButton.Root`} — the
+ * controlled/uncontrolled discriminated union pairing
+ * {@link SplitButtonRootUncontrolledProps} with
+ * {@link SplitButtonRootControlledProps}, plus the shared group props.
+ */
+export type SplitButtonRootProps = SplitButtonRootUncontrolledProps | SplitButtonRootControlledProps;
+/**
+ * Props for the internal frame component that renders the group element. Root
+ * splits it out so the frame sits *inside* the `Dropdown.Root` it renders and
+ * can therefore read the menu's open state.
+ *
+ * @internal
+ */
+export type SplitButtonFrameProps = Omit<SplitButtonRootBaseProps, "dir" | "disabled"> & {
+    /** Already defaulted by Root, so the frame receives a definite boolean. */
+    disabled: boolean;
+};
+/**
+ * Value published by `SplitButtonContext` — the derived ids that wire the
+ * trigger's accessible name to the action, plus the group's disabled flag.
+ *
+ * @internal
+ */
+export type SplitButtonContextValue = {
+    /** DOM id applied to {@link SplitButtonActionProps | `SplitButton.Action`};
+     * referenced by the trigger's derived `aria-labelledby`. */
+    actionId: string;
+    /** DOM id applied to {@link SplitButtonTriggerProps | `SplitButton.Trigger`};
+     * the self-reference half of its derived `aria-labelledby`. */
+    triggerId: string;
+    /** Whether the whole widget is disabled (Root's `disabled` prop). */
+    disabled: boolean;
+};
+/**
+ * Props for {@link SplitButtonAction | `SplitButton.Action`} — the native
+ * `<button>` attributes minus `id`, which the component owns because the menu
+ * trigger's accessible name references it.
+ */
+export type SplitButtonActionProps = Omit<ComponentProps<"button">, "id"> & {
+    /** The action's visible label. Keep it real text — the menu trigger borrows
+     * it for its own accessible name. */
+    children?: ReactNode;
+    /** Forwarded to the underlying `HTMLButtonElement` (or to the `asChild`
+     * element). */
+    ref?: Ref<HTMLButtonElement>;
+    /**
+     * When `true`, renders the consumer's element instead of `<button>` via the
+     * {@link Slot} pattern. `type="button"` is **not** forwarded in this mode —
+     * the child owns its own type semantics.
+     * @default false
+     */
+    asChild?: boolean;
+};
+/**
+ * Props for {@link SplitButtonTrigger | `SplitButton.Trigger`} —
+ * {@link DropdownTriggerProps} minus `id`, which the component owns because
+ * its derived `aria-labelledby` self-references it. Supply `aria-label` or
+ * `aria-labelledby` to opt out of the derived name.
+ */
+export type SplitButtonTriggerProps = Omit<DropdownTriggerProps, "id">;
+/**
+ * Props for {@link SplitButtonMenu | `SplitButton.Menu`} — identical to
+ * {@link DropdownContentProps}; the menu *is* a `Dropdown.Content`.
+ */
+export type SplitButtonMenuProps = DropdownContentProps;
+/**
+ * Props for {@link SplitButtonItem | `SplitButton.Item`} — identical to
+ * {@link DropdownItemProps}.
+ */
+export type SplitButtonItemProps = DropdownItemProps;
+/**
+ * Props for {@link SplitButtonSeparator | `SplitButton.Separator`} — identical
+ * to {@link DropdownSeparatorProps}.
+ */
+export type SplitButtonSeparatorProps = DropdownSeparatorProps;

package/dist/SplitButton/types.js

@@ -0,0 +1 @@
+export {};

package/dist/Status/Status.d.ts

@@ -0,0 +1,57 @@
+import type { ReactElement } from "react";
+import { StatusProps } from "./types.js";
+/**
+ * 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 declare function Status({ asChild, children, ...rest }: StatusProps): ReactElement;
+export declare namespace Status {
+    var displayName: string;
+}

package/dist/Status/Status.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from "../Slot/index.js";
+/**
+ * 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 }) {
+    const rootProps = { role: "status", ...rest };
+    if (asChild) {
+        return _jsx(Slot, { ...rootProps, children: children });
+    }
+    return _jsx("div", { ...rootProps, children: children });
+}
+/** @internal */
+Status.displayName = "Status";

package/dist/Status/index.d.ts

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

package/dist/Status/index.js

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