@primitiv-ui/react 0.1.38 → 0.1.40

package/src/RadioGroup/types.ts

@@ -1,146 +0,0 @@
-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/src/SegmentedControl/README.md

@@ -1,154 +0,0 @@
-# SegmentedControl
-
-A headless, accessible compound component for picking **one** option from a
-small linear set — the segmented-control pattern (iOS-style pill strip,
-"consumption mode" switch, view toggles). It implements the
-[WAI-ARIA Radio Group pattern](https://www.w3.org/WAI/ARIA/apg/patterns/radio/),
-so exactly one segment is always selected and the selection can never be
-cleared to nothing.
-
-SegmentedControl renders native `<button role="radio">` elements wrapped in a
-`<div role="radiogroup">` so it gets keyboard activation (`Space` / `Enter`),
-focus ring, and disabled semantics for free from the browser. The React layer
-adds single-selection state, roving tabindex, arrow-key navigation, a
-whole-control `disabled`, and the `asChild` composition every primitive in
-this package supports.
-
-```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>;
-```
-
-## SegmentedControl vs ToggleGroup
-
-Reach for `SegmentedControl` when the choice is a **value** — one option is
-always active, like a radio group (view mode, density, a tab-like switch).
-Reach for [`ToggleGroup`](../ToggleGroup/README.md) when the buttons are
-**commands or toggles** that can each be on or off (text formatting, a
-toolbar), including single-select-with-clear. The two look similar but carry
-different semantics: `SegmentedControl` is `role="radiogroup"` /
-`role="radio"` + `aria-checked`; `ToggleGroup` is `role="group"` +
-`aria-pressed` and allows deselecting to nothing.
-
-## Sub-components
-
-| Export                     | Element    | Notes                                                                                          |
-| -------------------------- | ---------- | ---------------------------------------------------------------------------------------------- |
-| `SegmentedControl.Root`    | `<div>`    | `role="radiogroup"`, `aria-orientation`, `data-orientation`, `data-disabled`. State owner. `asChild` |
-| `SegmentedControl.Item`    | `<button>` | `role="radio"`, `aria-checked`, `data-state`, `data-disabled`, participates in roving tabindex. `asChild` |
-
-## State modes
-
-- **Uncontrolled** — pass `defaultValue` (or omit for no initial selection).
-- **Controlled** — pass `value` **and** `onValueChange` together.
-
-The two shapes are statically discriminated at the type level; TypeScript
-rejects mixing them.
-
-```tsx
-// Uncontrolled
-<SegmentedControl.Root defaultValue="headless" aria-label="Mode">
-  ...
-</SegmentedControl.Root>;
-
-// Controlled
-const [value, setValue] = useState("headless");
-<SegmentedControl.Root value={value} onValueChange={setValue} aria-label="Mode">
-  ...
-</SegmentedControl.Root>;
-```
-
-## Keyboard interaction
-
-| Key                        | Behaviour                                                                        |
-| -------------------------- | -------------------------------------------------------------------------------- |
-| `Tab`                      | Moves focus to the control's single tab stop (selected segment, or first if none). |
-| `Space` / `Enter`          | Selects the focused segment (native `<button>` activation).                      |
-| `ArrowRight` / `ArrowLeft` | (horizontal) Moves focus **and** selection to the next / previous segment, wrapping. |
-| `ArrowDown` / `ArrowUp`    | (vertical) Moves focus **and** selection to the next / previous segment, wrapping. |
-
-The control has exactly one tab stop — the selected segment, or the first
-non-disabled segment if nothing is selected. `Tab` takes the user into and out
-of the control in one keystroke; arrow keys navigate inside it.
-
-## Orientation
-
-`orientation` defaults to `"horizontal"` (the usual segmented-control layout),
-which binds `ArrowLeft` / `ArrowRight`. Pass `orientation="vertical"` to bind
-`ArrowUp` / `ArrowDown` instead. Either way the axis is reflected to assistive
-technology via `aria-orientation`, and to CSS via `data-orientation`, on the
-`radiogroup` element.
-
-## Reading direction
-
-Pass `dir` (`"ltr"` / `"rtl"`) to swap the horizontal arrow pair, so
-`ArrowLeft` moves forward and `ArrowRight` moves backward in RTL. The vertical
-pair is never swapped. When `dir` is omitted, it is inherited from the nearest
-[`DirectionProvider`](../DirectionProvider/README.md), falling back to `"ltr"`.
-An explicit `dir` prop always wins over the inherited value.
-
-## Disabled
-
-Disable a **single segment** by passing `disabled` to a
-`SegmentedControl.Item`. It forwards the native `disabled` attribute (removing
-it from the focus ring and suppressing clicks), sets `data-disabled=""`, and
-excludes the segment from arrow-key navigation and the roving-tabindex home
-base.
-
-Disable the **whole control** by passing `disabled` to `SegmentedControl.Root`.
-Every segment becomes disabled, `data-disabled=""` is set on the root, and no
-segment is navigable or takes a tab stop. The current selection is still
-reflected (`aria-checked` / `data-state`) so the control reads correctly while
-inert.
-
-```tsx
-<SegmentedControl.Root aria-label="Plan" disabled defaultValue="pro">
-  <SegmentedControl.Item value="free">Free</SegmentedControl.Item>
-  <SegmentedControl.Item value="pro">Pro</SegmentedControl.Item>
-</SegmentedControl.Root>
-```
-
-## `asChild` composition
-
-`SegmentedControl.Root` and `SegmentedControl.Item` each accept an `asChild`
-boolean. When set, the component delegates rendering to its single child
-element and merges its own ARIA attributes, `data-state`, `data-disabled`,
-composed event handlers, and ref onto the child (the asChild contract: the
-child's handler runs first, the library's runs second unless the child calls
-`preventDefault`).
-
-```tsx
-<SegmentedControl.Root asChild aria-label="View">
-  <nav>
-    <SegmentedControl.Item value="grid" asChild>
-      <a href="#grid">Grid</a>
-    </SegmentedControl.Item>
-    <SegmentedControl.Item value="list" asChild>
-      <a href="#list">List</a>
-    </SegmentedControl.Item>
-  </nav>
-</SegmentedControl.Root>
-```
-
-## Styling hooks
-
-`data-state="checked" | "unchecked"` is set on each `SegmentedControl.Item`,
-and `data-orientation` / `data-disabled` on the root, letting any CSS system
-style the selected segment and the disabled state from plain attribute
-selectors:
-
-```css
-button[role="radio"][data-state="checked"] {
-  background: var(--primitiv-action-primary-default);
-  color: var(--primitiv-action-primary-foreground-default);
-}
-[role="radiogroup"][data-disabled] {
-  opacity: 0.5;
-  pointer-events: none;
-}
-```

package/src/SegmentedControl/SegmentedControl.tsx

@@ -1,309 +0,0 @@
-import { useEffect, useMemo, useRef } from "react";
-import type { ReactElement } from "react";
-
-import { useDirection } from "../DirectionProvider/index.ts";
-import { useRovingTabindex } from "../hooks/index.ts";
-import { Slot, composeEventHandlers, composeRefs } from "../Slot/index.ts";
-
-import { SegmentedControlContext } from "./SegmentedControlContext";
-import {
-  useSegmentedControlContext,
-  useSegmentedControlRoot,
-} from "./hooks/index.ts";
-import {
-  SegmentedControlItemProps,
-  SegmentedControlRootProps,
-} from "./types";
-
-/**
- * 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
-}: SegmentedControlRootProps): ReactElement {
-  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" as const,
-    "aria-orientation": orientation,
-    "data-orientation": orientation,
-    "data-disabled": disabled ? "" : undefined,
-    dir: resolvedDir,
-    ...rest,
-  };
-  return (
-    <SegmentedControlContext.Provider value={contextValue}>
-      {asChild ? (
-        <Slot {...rootProps}>{children}</Slot>
-      ) : (
-        <div {...rootProps}>{children}</div>
-      )}
-    </SegmentedControlContext.Provider>
-  );
-}
-
-/** @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
-}: SegmentedControlItemProps): ReactElement {
-  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<HTMLButtonElement | null>(null);
-  const setRef = useMemo(() => composeRefs(localRef, ref), [ref]);
-
-  useEffect(() => {
-    registerItem(value, localRef.current, itemDisabled);
-    return () => registerItem(value, null);
-  }, [value, itemDisabled, registerItem]);
-
-  const { handleKeyDown } = useRovingTabindex<string>({
-    orientation,
-    dir,
-    navigable: enabledValues,
-    currentKey: value,
-    onNavigate: (target) => {
-      select(target);
-      focusItem(target);
-    },
-  });
-
-  const itemProps = {
-    ...rest,
-    ref: setRef,
-    role: "radio" as const,
-    "aria-checked": isChecked,
-    "data-state": isChecked ? ("checked" as const) : ("unchecked" as const),
-    "data-disabled": isDisabled ? "" : undefined,
-    tabIndex: isTabStop ? 0 : -1,
-    disabled: isDisabled,
-    onClick: composeEventHandlers(onClick, () => select(value)),
-    onKeyDown: composeEventHandlers(onKeyDown, handleKeyDown),
-  };
-
-  return asChild ? (
-    <Slot {...itemProps}>{children}</Slot>
-  ) : (
-    <button type="button" {...itemProps}>
-      {children}
-    </button>
-  );
-}
-
-/** @internal */
-SegmentedControlItem.displayName = "SegmentedControlItem";
-
-/** 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.
- */
-const SegmentedControlCompound: TSegmentedControlCompound = Object.assign(
-  SegmentedControlRoot,
-  {
-    Root: SegmentedControlRoot,
-    Item: SegmentedControlItem,
-  },
-);
-
-/** @internal */
-SegmentedControlCompound.displayName = "SegmentedControl";
-
-export { SegmentedControlCompound as SegmentedControl };

package/src/SegmentedControl/SegmentedControlContext.ts

@@ -1,28 +0,0 @@
-import { createStrictContext } from "../utils/index.ts";
-
-import {
-  SegmentedControlOrientation,
-  SegmentedControlReadingDirection,
-} from "./types";
-
-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 const [SegmentedControlContext, useSegmentedControlContext] =
-  createStrictContext<SegmentedControlContextValue>(
-    "SegmentedControl sub-components must be rendered inside a <SegmentedControl.Root>.",
-  );

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

@@ -1,50 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-import { SegmentedControl } from "../SegmentedControl";
-
-describe("SegmentedControl asChild composition", () => {
-  it("Root asChild renders the consumer element with radiogroup role preserved", () => {
-    // Arrange & Act
-    render(
-      <SegmentedControl.Root asChild aria-label="Mode">
-        <section data-testid="wrap">
-          <SegmentedControl.Item value="a">A</SegmentedControl.Item>
-        </section>
-      </SegmentedControl.Root>,
-    );
-
-    // Assert
-    const root = screen.getByTestId("wrap");
-    expect(root.tagName).toBe("SECTION");
-    expect(root).toHaveAttribute("role", "radiogroup");
-    expect(root).toHaveAttribute("aria-label", "Mode");
-    expect(root).toHaveAttribute("data-orientation", "horizontal");
-  });
-
-  it("Item asChild delegates to the child element while keeping ARIA + selection wiring", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    const onValueChange = vi.fn();
-    render(
-      <SegmentedControl.Root aria-label="Mode" onValueChange={onValueChange}>
-        <SegmentedControl.Item value="a" asChild>
-          <li>A</li>
-        </SegmentedControl.Item>
-      </SegmentedControl.Root>,
-    );
-    const item = screen.getByRole("radio", { name: "A" });
-
-    // Assert element is the consumer's <li>
-    expect(item.tagName).toBe("LI");
-    expect(item).toHaveAttribute("aria-checked", "false");
-    expect(item).toHaveAttribute("data-state", "unchecked");
-
-    // Act
-    await user.click(item);
-
-    // Assert selection wiring still fires via composed onClick
-    expect(onValueChange).toHaveBeenCalledWith("a");
-    expect(item).toHaveAttribute("aria-checked", "true");
-  });
-});