@primitiv-ui/react 0.1.38 → 0.1.39

package/dist/RadioGroup/types.d.ts

@@ -0,0 +1,130 @@
+import { ComponentProps, ReactNode, Ref } from "react";
+/**
+ * Which arrow keys navigate the group. `"both"` (default) accepts all
+ * four; `"horizontal"` only Arrow Left/Right; `"vertical"` only Arrow
+ * Up/Down.
+ */
+export type RadioGroupOrientation = "horizontal" | "vertical" | "both";
+/** Reading direction — swaps the horizontal arrow pair when `"rtl"`. */
+export type RadioGroupReadingDirection = "ltr" | "rtl";
+/**
+ * Shared base for both {@link RadioGroupRootProps} variants — the native
+ * `<div>` attributes (minus the component-owned `role` and the narrowed
+ * `dir`) plus the `asChild` escape hatch, orientation, reading direction,
+ * and a typed `ref`.
+ */
+export type RadioGroupRootBaseProps = Omit<ComponentProps<"div">, "role" | "dir" | "defaultValue"> & {
+    /** The group's radios — typically {@link RadioGroupItemProps | `RadioGroup.Item`}
+     * elements, each optionally wrapping a {@link RadioGroupIndicatorProps | `RadioGroup.Indicator`}. */
+    children?: ReactNode;
+    /** Forwarded to the underlying `HTMLDivElement`. */
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * When `true`, Root delegates rendering to a single consumer-supplied
+     * element (e.g. `<menu role="menu">` for dropdown composition) via the
+     * {@link Slot} pattern instead of the default `<div>`; `role="radiogroup"`,
+     * `aria-orientation`, `dir`, and remaining props are merged onto it.
+     * @default false
+     */
+    asChild?: boolean;
+    /**
+     * Which arrow keys move focus and selection through the group.
+     * `"both"` enables all four arrows; `"horizontal"` only Arrow
+     * Left/Right; `"vertical"` only Arrow Up/Down. When not `"both"`, the
+     * value is also reflected as `aria-orientation` on the root.
+     * @default "both"
+     */
+    orientation?: RadioGroupOrientation;
+    /**
+     * Reading direction. In `"rtl"` the horizontal arrow pair is swapped so
+     * Arrow Left moves forward. When omitted, it is inherited from the
+     * nearest {@link DirectionProvider}, falling back to `"ltr"`.
+     */
+    dir?: RadioGroupReadingDirection;
+};
+/**
+ * Uncontrolled variant of {@link RadioGroupRootProps}: the component owns
+ * the selected value. Pass `defaultValue` (or omit it); `onValueChange` is
+ * optional and `value` is forbidden.
+ */
+export type RadioGroupRootUncontrolledProps = RadioGroupRootBaseProps & {
+    /** Value of the radio selected on first render. Omit for nothing
+     * selected on mount. */
+    defaultValue?: string;
+    /** Forbidden in uncontrolled mode — use `defaultValue` instead. */
+    value?: never;
+    /** Called with the new value whenever the selection changes. Optional
+     * in uncontrolled mode. */
+    onValueChange?: (value: string) => void;
+};
+/**
+ * Controlled variant of {@link RadioGroupRootProps}: the parent owns the
+ * selected value. Pass `value` and `onValueChange` together; `defaultValue`
+ * is forbidden.
+ */
+export type RadioGroupRootControlledProps = RadioGroupRootBaseProps & {
+    /** Forbidden in controlled mode — use `value` instead. */
+    defaultValue?: never;
+    /** The currently selected value. Must be kept in sync by the parent
+     * via `onValueChange`. */
+    value: string;
+    /** Called with the new value whenever the selection changes. Required
+     * in controlled mode. */
+    onValueChange: (value: string) => void;
+};
+/**
+ * Props for {@link RadioGroup.Root}. A discriminated union of
+ * {@link RadioGroupRootUncontrolledProps} and
+ * {@link RadioGroupRootControlledProps}, so TypeScript accepts exactly one
+ * state mode.
+ */
+export type RadioGroupRootProps = RadioGroupRootUncontrolledProps | RadioGroupRootControlledProps;
+/**
+ * Props for {@link RadioGroupItem | `RadioGroup.Item`} — the radio button.
+ * `value` identifies the option; all native `<button>` attributes (minus
+ * the component-owned `type`, `role`, `aria-checked`, and `value`) plus the
+ * `asChild` escape hatch and a typed `ref` are passed through.
+ */
+export type RadioGroupItemProps = Omit<ComponentProps<"button">, "type" | "role" | "aria-checked" | "value"> & {
+    /** Uniquely identifies this radio within the group and is reported to
+     * `onValueChange` / matched against Root's `value` when selected. Required. */
+    value: string;
+    /** The radio's visible content — its label, and typically a leading
+     * {@link RadioGroupIndicatorProps | `RadioGroup.Indicator`}. */
+    children?: ReactNode;
+    /** Forwarded to the underlying `HTMLButtonElement`. */
+    ref?: Ref<HTMLButtonElement>;
+    /**
+     * When `true`, renders the single child element (e.g.
+     * `<li role="menuitemradio">`) via the {@link Slot} pattern instead of
+     * the default `<button>`; ARIA, `data-state`, `tabIndex`, `onClick`,
+     * `onKeyDown`, `disabled`, and `ref` are merged onto it. A non-focusable
+     * child must be made focusable by the consumer.
+     * @default false
+     */
+    asChild?: boolean;
+};
+/**
+ * Props for {@link RadioGroupIndicator | `RadioGroup.Indicator`} — all
+ * native `<span>` attributes plus `forceMount` and the `asChild` escape
+ * hatch.
+ */
+export type RadioGroupIndicatorProps = ComponentProps<"span"> & {
+    /** The visual mark (e.g. a filled dot) shown while the parent Item is
+     * selected. */
+    children?: ReactNode;
+    /**
+     * When `true`, keeps the indicator mounted while unchecked so a CSS exit
+     * animation can play against `data-state="unchecked"`. Consumers who set
+     * it own the exit lifecycle.
+     * @default false
+     */
+    forceMount?: boolean;
+    /**
+     * When `true`, renders the single child element (typically an `<svg>`
+     * dot) via the {@link Slot} pattern instead of the default `<span>`;
+     * `aria-hidden` and `data-state` are merged onto it.
+     * @default false
+     */
+    asChild?: boolean;
+};

package/dist/RadioGroup/types.js

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

package/dist/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,145 @@
+import type { ReactElement } from "react";
+import { SegmentedControlItemProps, SegmentedControlRootProps } from "./types.js";
+/**
+ * The root of a SegmentedControl — a `<div role="radiogroup">` that owns
+ * the selected value and provides {@link SegmentedControlContext} to
+ * descendant {@link SegmentedControlItem | `SegmentedControl.Item`}s. It is
+ * the single-select value picker of the design system (the same WAI-ARIA
+ * radio-group semantics as {@link RadioGroupRoot | `RadioGroup`}), styled as
+ * a linear strip of segments rather than a stack of radios.
+ *
+ * Supports two state modes, statically discriminated at the type level:
+ *
+ * - **Uncontrolled** — pass
+ *   {@link SegmentedControlRootProps.defaultValue | `defaultValue`} (or omit
+ *   for nothing selected on mount). The component owns the value.
+ * - **Controlled** — pass
+ *   {@link SegmentedControlRootProps.value | `value`} *and*
+ *   {@link SegmentedControlRootProps.onValueChange | `onValueChange`}
+ *   together. The parent owns the value; the component defers every change
+ *   back through the callback.
+ *
+ * **ARIA.** `role="radiogroup"` and `aria-orientation` are set
+ * automatically. Provide an accessible name via `aria-label` or
+ * `aria-labelledby`.
+ *
+ * **Orientation.** `"horizontal"` (default) binds the Arrow Left/Right pair;
+ * `"vertical"` binds Arrow Up/Down. Reflected as `data-orientation` on the
+ * root for styling.
+ *
+ * **Disabled.** Pass `disabled` to disable the whole control — every segment
+ * becomes non-interactive and drops out of arrow-key navigation, and
+ * `data-disabled=""` is set on the root.
+ *
+ * **Reading direction.** `dir` (`"ltr"` / `"rtl"`) swaps the horizontal
+ * arrow pair so Arrow Left moves forward in RTL. When omitted, it is
+ * inherited from the nearest {@link DirectionProvider}, falling back to
+ * `"ltr"`.
+ *
+ * **`asChild` prop.** Pass `asChild` to render any consumer-supplied element
+ * in place of the native `<div>`, with the control's `role`,
+ * `aria-orientation`, `data-orientation`, `data-disabled`, `dir`, and
+ * remaining props merged in.
+ *
+ * @extends HTMLDivElement
+ *
+ * @example Uncontrolled
+ * ```tsx
+ * <SegmentedControl.Root defaultValue="headless" aria-label="Consumption mode">
+ *   <SegmentedControl.Item value="headless">Headless</SegmentedControl.Item>
+ *   <SegmentedControl.Item value="styled">Styled</SegmentedControl.Item>
+ *   <SegmentedControl.Item value="figma">Figma</SegmentedControl.Item>
+ * </SegmentedControl.Root>
+ * ```
+ *
+ * @example Controlled
+ * ```tsx
+ * const [value, setValue] = useState("headless");
+ *
+ * <SegmentedControl.Root value={value} onValueChange={setValue} aria-label="...">
+ *   <SegmentedControl.Item value="headless">Headless</SegmentedControl.Item>
+ *   <SegmentedControl.Item value="styled">Styled</SegmentedControl.Item>
+ * </SegmentedControl.Root>
+ * ```
+ */
+export declare function SegmentedControlRoot({ defaultValue, value: controlledValue, onValueChange, orientation, dir, disabled, asChild, children, ...rest }: SegmentedControlRootProps): ReactElement;
+export declare namespace SegmentedControlRoot {
+    var displayName: string;
+}
+/**
+ * An individual segment inside a SegmentedControl — a native
+ * `<button role="radio">` that reports its state, participates in the
+ * roving tabindex, and handles arrow-key navigation within the control.
+ *
+ * **Selection.** Clicking a segment (or pressing Space / Enter on the
+ * focused segment via native `<button>` behaviour) selects it. The arrow
+ * keys enabled by the control's `orientation` move focus and selection to
+ * the next or previous non-disabled segment, wrapping at the ends.
+ *
+ * **Roving tabindex.** Only one segment per control is in the document tab
+ * sequence at a time: the selected one if any, otherwise the first
+ * non-disabled segment. All others have `tabIndex=-1` so `Tab` escapes the
+ * control in a single keystroke.
+ *
+ * **Disabled.** Passing `disabled` forwards the native attribute and
+ * excludes the segment from arrow-key navigation and the roving-tabindex
+ * home base. The whole control can also be disabled via Root's `disabled`
+ * prop, which disables every segment.
+ *
+ * **Styling hooks.** `data-state="checked" | "unchecked"` mirrors the
+ * selection state; `data-disabled=""` is set when the segment (or the whole
+ * control) is disabled.
+ *
+ * **`asChild` prop.** Pass `asChild` to render any consumer element in place
+ * of the native `<button>`, with the segment's ARIA, `data-state`,
+ * `data-disabled`, `tabIndex`, `onClick`, `onKeyDown`, `disabled`, and `ref`
+ * merged onto it. A non-focusable child must be made focusable by the
+ * consumer.
+ *
+ * @extends HTMLButtonElement
+ *
+ * @throws if rendered outside a `SegmentedControl.Root`.
+ */
+export declare function SegmentedControlItem({ value, children, onClick, onKeyDown, disabled: itemDisabled, asChild, ref, ...rest }: SegmentedControlItemProps): ReactElement;
+export declare namespace SegmentedControlItem {
+    var displayName: string;
+}
+/** Type of the {@link SegmentedControl} compound: the root callable plus its attached sub-components. */
+export type TSegmentedControlCompound = typeof SegmentedControlRoot & {
+    Root: typeof SegmentedControlRoot;
+    Item: typeof SegmentedControlItem;
+};
+/**
+ * Headless, accessible **SegmentedControl** — a compound component for
+ * picking one option from a small linear set. It implements the
+ * [WAI-ARIA Radio Group pattern](https://www.w3.org/WAI/ARIA/apg/patterns/radio/)
+ * on native `<button role="radio">` elements: exactly one segment is
+ * selected at a time and the selection can never be cleared to nothing
+ * (unlike a toggle group). Zero styles ship.
+ *
+ * `SegmentedControl` is both callable (an alias of
+ * {@link SegmentedControlRoot | `SegmentedControl.Root`}) and carries its
+ * sub-components as static properties. Prefer the namespaced form in
+ * application code for readability and grep-ability.
+ *
+ * - {@link SegmentedControlRoot | `SegmentedControl.Root`} — state owner,
+ *   context provider, `<div role="radiogroup">` wrapper.
+ * - {@link SegmentedControlItem | `SegmentedControl.Item`} — a selectable
+ *   segment participating in the roving tabindex.
+ *
+ * @example Minimal usage
+ * ```tsx
+ * import { SegmentedControl } from "@primitiv-ui/react";
+ *
+ * <SegmentedControl.Root defaultValue="headless" aria-label="Consumption mode">
+ *   <SegmentedControl.Item value="headless">Headless</SegmentedControl.Item>
+ *   <SegmentedControl.Item value="styled">Styled</SegmentedControl.Item>
+ *   <SegmentedControl.Item value="figma">Figma</SegmentedControl.Item>
+ * </SegmentedControl.Root>;
+ * ```
+ *
+ * @see {@link SegmentedControlRoot} for state modes, orientation, and ARIA.
+ * @see {@link SegmentedControlItem} for selection, roving tabindex, and keyboard navigation.
+ */
+declare const SegmentedControlCompound: TSegmentedControlCompound;
+export { SegmentedControlCompound as SegmentedControl };

package/dist/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,229 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from "react";
+import { useDirection } from "../DirectionProvider/index.js";
+import { useRovingTabindex } from "../hooks/index.js";
+import { Slot, composeEventHandlers, composeRefs } from "../Slot/index.js";
+import { SegmentedControlContext } from "./SegmentedControlContext.js";
+import { useSegmentedControlContext, useSegmentedControlRoot, } from "./hooks/index.js";
+/**
+ * The root of a SegmentedControl — a `<div role="radiogroup">` that owns
+ * the selected value and provides {@link SegmentedControlContext} to
+ * descendant {@link SegmentedControlItem | `SegmentedControl.Item`}s. It is
+ * the single-select value picker of the design system (the same WAI-ARIA
+ * radio-group semantics as {@link RadioGroupRoot | `RadioGroup`}), styled as
+ * a linear strip of segments rather than a stack of radios.
+ *
+ * Supports two state modes, statically discriminated at the type level:
+ *
+ * - **Uncontrolled** — pass
+ *   {@link SegmentedControlRootProps.defaultValue | `defaultValue`} (or omit
+ *   for nothing selected on mount). The component owns the value.
+ * - **Controlled** — pass
+ *   {@link SegmentedControlRootProps.value | `value`} *and*
+ *   {@link SegmentedControlRootProps.onValueChange | `onValueChange`}
+ *   together. The parent owns the value; the component defers every change
+ *   back through the callback.
+ *
+ * **ARIA.** `role="radiogroup"` and `aria-orientation` are set
+ * automatically. Provide an accessible name via `aria-label` or
+ * `aria-labelledby`.
+ *
+ * **Orientation.** `"horizontal"` (default) binds the Arrow Left/Right pair;
+ * `"vertical"` binds Arrow Up/Down. Reflected as `data-orientation` on the
+ * root for styling.
+ *
+ * **Disabled.** Pass `disabled` to disable the whole control — every segment
+ * becomes non-interactive and drops out of arrow-key navigation, and
+ * `data-disabled=""` is set on the root.
+ *
+ * **Reading direction.** `dir` (`"ltr"` / `"rtl"`) swaps the horizontal
+ * arrow pair so Arrow Left moves forward in RTL. When omitted, it is
+ * inherited from the nearest {@link DirectionProvider}, falling back to
+ * `"ltr"`.
+ *
+ * **`asChild` prop.** Pass `asChild` to render any consumer-supplied element
+ * in place of the native `<div>`, with the control's `role`,
+ * `aria-orientation`, `data-orientation`, `data-disabled`, `dir`, and
+ * remaining props merged in.
+ *
+ * @extends HTMLDivElement
+ *
+ * @example Uncontrolled
+ * ```tsx
+ * <SegmentedControl.Root defaultValue="headless" aria-label="Consumption mode">
+ *   <SegmentedControl.Item value="headless">Headless</SegmentedControl.Item>
+ *   <SegmentedControl.Item value="styled">Styled</SegmentedControl.Item>
+ *   <SegmentedControl.Item value="figma">Figma</SegmentedControl.Item>
+ * </SegmentedControl.Root>
+ * ```
+ *
+ * @example Controlled
+ * ```tsx
+ * const [value, setValue] = useState("headless");
+ *
+ * <SegmentedControl.Root value={value} onValueChange={setValue} aria-label="...">
+ *   <SegmentedControl.Item value="headless">Headless</SegmentedControl.Item>
+ *   <SegmentedControl.Item value="styled">Styled</SegmentedControl.Item>
+ * </SegmentedControl.Root>
+ * ```
+ */
+export function SegmentedControlRoot({ defaultValue, value: controlledValue, onValueChange, orientation = "horizontal", dir, disabled = false, asChild = false, children, ...rest }) {
+    const resolvedDir = dir ?? useDirection();
+    const { value, select, registerItem, itemValues, disabledValues, focusItem } = useSegmentedControlRoot({
+        defaultValue,
+        value: controlledValue,
+        onValueChange,
+    });
+    const contextValue = useMemo(() => ({
+        value,
+        select,
+        registerItem,
+        itemValues,
+        disabledValues,
+        focusItem,
+        orientation,
+        dir: resolvedDir,
+        disabled,
+    }), [
+        value,
+        select,
+        registerItem,
+        itemValues,
+        disabledValues,
+        focusItem,
+        orientation,
+        resolvedDir,
+        disabled,
+    ]);
+    const rootProps = {
+        role: "radiogroup",
+        "aria-orientation": orientation,
+        "data-orientation": orientation,
+        "data-disabled": disabled ? "" : undefined,
+        dir: resolvedDir,
+        ...rest,
+    };
+    return (_jsx(SegmentedControlContext.Provider, { value: contextValue, children: asChild ? (_jsx(Slot, { ...rootProps, children: children })) : (_jsx("div", { ...rootProps, children: children })) }));
+}
+/** @internal */
+// Runtime-dead: the compound alias below (same object via Object.assign)
+// overwrites this to "SegmentedControl" at load, so the value is never
+// observable. The assignment stays because it declares `displayName` on
+// `typeof SegmentedControlRoot`, which TSegmentedControlCompound extends.
+// Stryker disable next-line StringLiteral: overwritten by the compound alias — an equivalent mutant.
+SegmentedControlRoot.displayName = "SegmentedControlRoot";
+/**
+ * An individual segment inside a SegmentedControl — a native
+ * `<button role="radio">` that reports its state, participates in the
+ * roving tabindex, and handles arrow-key navigation within the control.
+ *
+ * **Selection.** Clicking a segment (or pressing Space / Enter on the
+ * focused segment via native `<button>` behaviour) selects it. The arrow
+ * keys enabled by the control's `orientation` move focus and selection to
+ * the next or previous non-disabled segment, wrapping at the ends.
+ *
+ * **Roving tabindex.** Only one segment per control is in the document tab
+ * sequence at a time: the selected one if any, otherwise the first
+ * non-disabled segment. All others have `tabIndex=-1` so `Tab` escapes the
+ * control in a single keystroke.
+ *
+ * **Disabled.** Passing `disabled` forwards the native attribute and
+ * excludes the segment from arrow-key navigation and the roving-tabindex
+ * home base. The whole control can also be disabled via Root's `disabled`
+ * prop, which disables every segment.
+ *
+ * **Styling hooks.** `data-state="checked" | "unchecked"` mirrors the
+ * selection state; `data-disabled=""` is set when the segment (or the whole
+ * control) is disabled.
+ *
+ * **`asChild` prop.** Pass `asChild` to render any consumer element in place
+ * of the native `<button>`, with the segment's ARIA, `data-state`,
+ * `data-disabled`, `tabIndex`, `onClick`, `onKeyDown`, `disabled`, and `ref`
+ * merged onto it. A non-focusable child must be made focusable by the
+ * consumer.
+ *
+ * @extends HTMLButtonElement
+ *
+ * @throws if rendered outside a `SegmentedControl.Root`.
+ */
+export function SegmentedControlItem({ value, children, onClick, onKeyDown, disabled: itemDisabled, asChild = false, ref, ...rest }) {
+    const { value: selectedValue, select, registerItem, itemValues, disabledValues, focusItem, orientation, dir, disabled: groupDisabled, } = useSegmentedControlContext();
+    const isChecked = selectedValue === value;
+    const isDisabled = itemDisabled || groupDisabled;
+    // Arrow-key navigation walks only enabled items: the per-item disabled
+    // set is excluded, and when the whole control is disabled the predicate
+    // fails for every item so the navigable list is empty.
+    const enabledValues = useMemo(() => itemValues.filter((v) => !groupDisabled && !disabledValues.has(v)), [groupDisabled, itemValues, disabledValues]);
+    const isTabStop = selectedValue !== undefined ? isChecked : enabledValues[0] === value;
+    const localRef = useRef(null);
+    const setRef = useMemo(() => composeRefs(localRef, ref), [ref]);
+    useEffect(() => {
+        registerItem(value, localRef.current, itemDisabled);
+        return () => registerItem(value, null);
+    }, [value, itemDisabled, registerItem]);
+    const { handleKeyDown } = useRovingTabindex({
+        orientation,
+        dir,
+        navigable: enabledValues,
+        currentKey: value,
+        onNavigate: (target) => {
+            select(target);
+            focusItem(target);
+        },
+    });
+    const itemProps = {
+        ...rest,
+        ref: setRef,
+        role: "radio",
+        "aria-checked": isChecked,
+        "data-state": isChecked ? "checked" : "unchecked",
+        "data-disabled": isDisabled ? "" : undefined,
+        tabIndex: isTabStop ? 0 : -1,
+        disabled: isDisabled,
+        onClick: composeEventHandlers(onClick, () => select(value)),
+        onKeyDown: composeEventHandlers(onKeyDown, handleKeyDown),
+    };
+    return asChild ? (_jsx(Slot, { ...itemProps, children: children })) : (_jsx("button", { type: "button", ...itemProps, children: children }));
+}
+/** @internal */
+SegmentedControlItem.displayName = "SegmentedControlItem";
+/**
+ * Headless, accessible **SegmentedControl** — a compound component for
+ * picking one option from a small linear set. It implements the
+ * [WAI-ARIA Radio Group pattern](https://www.w3.org/WAI/ARIA/apg/patterns/radio/)
+ * on native `<button role="radio">` elements: exactly one segment is
+ * selected at a time and the selection can never be cleared to nothing
+ * (unlike a toggle group). Zero styles ship.
+ *
+ * `SegmentedControl` is both callable (an alias of
+ * {@link SegmentedControlRoot | `SegmentedControl.Root`}) and carries its
+ * sub-components as static properties. Prefer the namespaced form in
+ * application code for readability and grep-ability.
+ *
+ * - {@link SegmentedControlRoot | `SegmentedControl.Root`} — state owner,
+ *   context provider, `<div role="radiogroup">` wrapper.
+ * - {@link SegmentedControlItem | `SegmentedControl.Item`} — a selectable
+ *   segment participating in the roving tabindex.
+ *
+ * @example Minimal usage
+ * ```tsx
+ * import { SegmentedControl } from "@primitiv-ui/react";
+ *
+ * <SegmentedControl.Root defaultValue="headless" aria-label="Consumption mode">
+ *   <SegmentedControl.Item value="headless">Headless</SegmentedControl.Item>
+ *   <SegmentedControl.Item value="styled">Styled</SegmentedControl.Item>
+ *   <SegmentedControl.Item value="figma">Figma</SegmentedControl.Item>
+ * </SegmentedControl.Root>;
+ * ```
+ *
+ * @see {@link SegmentedControlRoot} for state modes, orientation, and ARIA.
+ * @see {@link SegmentedControlItem} for selection, roving tabindex, and keyboard navigation.
+ */
+const SegmentedControlCompound = Object.assign(SegmentedControlRoot, {
+    Root: SegmentedControlRoot,
+    Item: SegmentedControlItem,
+});
+/** @internal */
+SegmentedControlCompound.displayName = "SegmentedControl";
+export { SegmentedControlCompound as SegmentedControl };

package/dist/SegmentedControl/SegmentedControlContext.d.ts

@@ -0,0 +1,14 @@
+import { SegmentedControlOrientation, SegmentedControlReadingDirection } from "./types.js";
+export type SegmentedControlContextValue = {
+    value: string | undefined;
+    select: (value: string) => void;
+    registerItem: (value: string, element: HTMLButtonElement | null, disabled?: boolean) => void;
+    itemValues: string[];
+    disabledValues: Set<string>;
+    focusItem: (value: string) => void;
+    orientation: SegmentedControlOrientation;
+    dir: SegmentedControlReadingDirection;
+    /** Whether the whole control is disabled (Root's `disabled` prop). */
+    disabled: boolean;
+};
+export declare const SegmentedControlContext: import("react").Context<SegmentedControlContextValue | null>, useSegmentedControlContext: () => SegmentedControlContextValue;

package/dist/SegmentedControl/SegmentedControlContext.js

@@ -0,0 +1,3 @@
+"use client";
+import { createStrictContext } from "../utils/index.js";
+export const [SegmentedControlContext, useSegmentedControlContext] = createStrictContext("SegmentedControl sub-components must be rendered inside a <SegmentedControl.Root>.");

package/dist/SegmentedControl/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useSegmentedControlContext } from "./useSegmentedControlContext.js";
+export { useSegmentedControlRoot } from "./useSegmentedControlRoot.js";

package/dist/SegmentedControl/hooks/index.js

@@ -0,0 +1,2 @@
+export { useSegmentedControlContext } from "./useSegmentedControlContext.js";
+export { useSegmentedControlRoot } from "./useSegmentedControlRoot.js";

package/dist/SegmentedControl/hooks/useSegmentedControlContext.d.ts

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

package/dist/SegmentedControl/hooks/useSegmentedControlContext.js

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

package/dist/SegmentedControl/hooks/useSegmentedControlRoot.d.ts

@@ -0,0 +1,14 @@
+type UseSegmentedControlRootArgs = {
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+};
+export declare function useSegmentedControlRoot({ defaultValue, value: controlledValue, onValueChange, }: UseSegmentedControlRootArgs): {
+    value: string | undefined;
+    select: (next: string) => void;
+    registerItem: (itemValue: string, element: HTMLButtonElement | null, disabled?: boolean) => void;
+    itemValues: string[];
+    disabledValues: Set<string>;
+    focusItem: (itemValue: string) => void;
+};
+export {};

package/dist/SegmentedControl/hooks/useSegmentedControlRoot.js

@@ -0,0 +1,45 @@
+"use client";
+import { useCallback, useMemo } from "react";
+import { useCollection, useControllableState } from "../../hooks/index.js";
+export function useSegmentedControlRoot({ defaultValue, value: controlledValue, onValueChange, }) {
+    const [value, setValue] = useControllableState(controlledValue, defaultValue, onValueChange);
+    const select = useCallback((next) => {
+        if (value === next)
+            return;
+        setValue(next);
+    }, [value, setValue]);
+    // Track registered item metadata in a ref (for focus handling) and their
+    // ordered values as state — required for the roving-tabindex home base.
+    // Disabled values are derived per render from itemsRef; any change that
+    // affects the set (mount, unmount, disabled toggle) re-runs the registrar
+    // effect, which updates the keys state and forces the recompute.
+    const { register: registerItemBase, itemsRef, keys: itemValues, } = useCollection();
+    const registerItem = useCallback((itemValue, element, disabled = false) => {
+        registerItemBase(itemValue, element ? { element, disabled } : null);
+    }, [registerItemBase]);
+    const disabledValues = useMemo(() => new Set(Array.from(itemsRef.current.entries())
+        .filter(([, meta]) => meta.disabled)
+        .map(([v]) => v)), 
+    // itemValues is a fresh array on every register call (new identity even
+    // when the keys are unchanged), so the memo re-runs whenever any item
+    // mounts, unmounts, or toggles disabled — exactly the trigger we want.
+    [itemValues, itemsRef]);
+    const focusItem = useCallback((itemValue) => {
+        // `itemValue` is always sourced from `navigable` (the enabled subset of
+        // `itemValues`), and useCollection's register() writes `itemsRef` and
+        // the `itemValues` state together — so a value that appears here is
+        // guaranteed to already have a live entry in the map.
+        // Stryker disable next-line OptionalChaining: unreachable given that invariant.
+        itemsRef.current.get(itemValue)?.element.focus();
+    }, 
+    // Stryker disable next-line ArrayDeclaration: equivalent — itemsRef is a stable RefObject.
+    [itemsRef]);
+    return {
+        value,
+        select,
+        registerItem,
+        itemValues,
+        disabledValues,
+        focusItem,
+    };
+}

package/dist/SegmentedControl/index.d.ts

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

package/dist/SegmentedControl/index.js

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