@skdx/react 0.26.0 → 0.28.0

package/dist/segmented-control/SegmentedControlIndicator.d.cts

@@ -1,39 +1,11 @@
 import * as React from 'react';
 import type { SegmentedControlIndicatorProps } from './types.cjs';
 /**
- * The sliding highlight behind the checked segment — the reason this family
- * exists as something other than a styled radio group.
- *
- * It measures the checked `SegmentedControlItem` against the root with a
- * `ResizeObserver` (watching both, so a re-flowed strip or a re-labelled
- * segment re-measures) and publishes the geometry as CSS custom properties on
- * its own element:
- *
- * - `--skdx-segmented-control-x` — offset from the root's left edge, in `px`
- * - `--skdx-segmented-control-width`
- * - `--skdx-segmented-control-y` / `--skdx-segmented-control-height` — added only
- *   when the root's `orientation` is `'vertical'`
- *
- * So the whole animation is one CSS rule and no consumer JavaScript:
- *
- * ```css
- * .my-indicator {
- *   position: absolute;
- *   inset-block: 0;
- *   width: var(--skdx-segmented-control-width);
- *   translate: var(--skdx-segmented-control-x) 0;
- *   transition: translate 150ms, width 150ms;
- * }
- * ```
- *
- * `x` is a *physical* offset from the root's left edge, not a logical one, so
- * `translate` is correct under `dir="rtl"` without a second rule.
- *
- * With nothing selected there is nothing to measure: the element renders with
- * `data-state="hidden"` and publishes **no** custom properties at all, rather
- * than a zero-width bar parked at the start — `width: var(--…, 0)` then lets
- * CSS decide what "not yet chosen" looks like. It redraws a state the items
- * already report, so it is `aria-hidden="true"`.
+ * Sliding highlight behind checked segment; measures with ResizeObserver.
+ * Publishes CSS custom properties: `--skdx-segmented-control-x`, `width`,
+ * and (vertical only) `y`, `height`. One CSS transition rule, no JS.
+ * `x` is physical offset from root left (RTL-correct). With nothing selected,
+ * renders `data-state="hidden"` with no properties; `aria-hidden="true"`.
  *
  * @example
  * ```tsx

package/dist/segmented-control/SegmentedControlIndicator.d.ts

@@ -1,39 +1,11 @@
 import * as React from 'react';
 import type { SegmentedControlIndicatorProps } from './types.js';
 /**
- * The sliding highlight behind the checked segment — the reason this family
- * exists as something other than a styled radio group.
- *
- * It measures the checked `SegmentedControlItem` against the root with a
- * `ResizeObserver` (watching both, so a re-flowed strip or a re-labelled
- * segment re-measures) and publishes the geometry as CSS custom properties on
- * its own element:
- *
- * - `--skdx-segmented-control-x` — offset from the root's left edge, in `px`
- * - `--skdx-segmented-control-width`
- * - `--skdx-segmented-control-y` / `--skdx-segmented-control-height` — added only
- *   when the root's `orientation` is `'vertical'`
- *
- * So the whole animation is one CSS rule and no consumer JavaScript:
- *
- * ```css
- * .my-indicator {
- *   position: absolute;
- *   inset-block: 0;
- *   width: var(--skdx-segmented-control-width);
- *   translate: var(--skdx-segmented-control-x) 0;
- *   transition: translate 150ms, width 150ms;
- * }
- * ```
- *
- * `x` is a *physical* offset from the root's left edge, not a logical one, so
- * `translate` is correct under `dir="rtl"` without a second rule.
- *
- * With nothing selected there is nothing to measure: the element renders with
- * `data-state="hidden"` and publishes **no** custom properties at all, rather
- * than a zero-width bar parked at the start — `width: var(--…, 0)` then lets
- * CSS decide what "not yet chosen" looks like. It redraws a state the items
- * already report, so it is `aria-hidden="true"`.
+ * Sliding highlight behind checked segment; measures with ResizeObserver.
+ * Publishes CSS custom properties: `--skdx-segmented-control-x`, `width`,
+ * and (vertical only) `y`, `height`. One CSS transition rule, no JS.
+ * `x` is physical offset from root left (RTL-correct). With nothing selected,
+ * renders `data-state="hidden"` with no properties; `aria-hidden="true"`.
  *
  * @example
  * ```tsx

package/dist/segmented-control/SegmentedControlItem.d.cts

@@ -1,14 +1,13 @@
 import * as React from 'react';
 import type { SegmentedControlItemProps } from './types.cjs';
 /**
- * One segment within a {@link SegmentedControl}. Renders `role="radio"` with
- * `aria-checked`, `aria-disabled`, `data-state` (`'checked'` / `'unchecked'`),
- * `data-disabled` and `data-value`. Selects on click **and on focus** — which is what makes
- * arrow-key navigation select as it moves, per the WAI-ARIA radio pattern.
+ * One segment in a {@link SegmentedControl}. Renders `role="radio"` with
+ * `aria-checked`, `aria-disabled`, `data-state`, `data-disabled`, `data-value`.
+ * Selects on click and on focus from a sibling (arrow keys auto-select per WAI-ARIA).
  *
- * Only one segment is ever in the tab order: the checked one, or the first
- * enabled segment while nothing is checked. Enter is suppressed so it does not
- * fire a second, native click on top of the keyboard selection.
+ * Only checked item (or first enabled, if none checked) is tab-stop. Enter suppressed
+ * to prevent double-select. With `selectOnFocus={false}`, only Space/Enter select (APG toolbar).
+ * When strip has `name`, also renders hidden radio for form submission.
  *
  * @example
  * ```tsx

package/dist/segmented-control/SegmentedControlItem.d.ts

@@ -1,14 +1,13 @@
 import * as React from 'react';
 import type { SegmentedControlItemProps } from './types.js';
 /**
- * One segment within a {@link SegmentedControl}. Renders `role="radio"` with
- * `aria-checked`, `aria-disabled`, `data-state` (`'checked'` / `'unchecked'`),
- * `data-disabled` and `data-value`. Selects on click **and on focus** — which is what makes
- * arrow-key navigation select as it moves, per the WAI-ARIA radio pattern.
+ * One segment in a {@link SegmentedControl}. Renders `role="radio"` with
+ * `aria-checked`, `aria-disabled`, `data-state`, `data-disabled`, `data-value`.
+ * Selects on click and on focus from a sibling (arrow keys auto-select per WAI-ARIA).
  *
- * Only one segment is ever in the tab order: the checked one, or the first
- * enabled segment while nothing is checked. Enter is suppressed so it does not
- * fire a second, native click on top of the keyboard selection.
+ * Only checked item (or first enabled, if none checked) is tab-stop. Enter suppressed
+ * to prevent double-select. With `selectOnFocus={false}`, only Space/Enter select (APG toolbar).
+ * When strip has `name`, also renders hidden radio for form submission.
  *
  * @example
  * ```tsx

package/dist/segmented-control/index.d.cts

@@ -1,4 +1,2 @@
 export { SegmentedControl } from './SegmentedControl.cjs';
-export { SegmentedControlIndicator } from './SegmentedControlIndicator.cjs';
-export { SegmentedControlItem } from './SegmentedControlItem.cjs';
-export type { SegmentedControlIndicatorProps, SegmentedControlItemProps, SegmentedControlOrientation, SegmentedControlProps, } from './types.cjs';
+export type { SegmentedControlHandle, SegmentedControlOption, SegmentedControlOrientation, SegmentedControlProps, SegmentedControlChangeReason, SegmentedControlValueChangeDetail, } from './types.cjs';

package/dist/segmented-control/index.d.ts

@@ -1,4 +1,2 @@
 export { SegmentedControl } from './SegmentedControl.js';
-export { SegmentedControlIndicator } from './SegmentedControlIndicator.js';
-export { SegmentedControlItem } from './SegmentedControlItem.js';
-export type { SegmentedControlIndicatorProps, SegmentedControlItemProps, SegmentedControlOrientation, SegmentedControlProps, } from './types.js';
+export type { SegmentedControlHandle, SegmentedControlOption, SegmentedControlOrientation, SegmentedControlProps, SegmentedControlChangeReason, SegmentedControlValueChangeDetail, } from './types.js';

package/dist/segmented-control/primitives.d.cts

@@ -0,0 +1,21 @@
+/**
+ * Advanced primitives for `SegmentedControl` — the parts the recipe composes.
+ *
+ * @example
+ * ```tsx
+ * import { SegmentedControl, SegmentedControlIndicator, SegmentedControlItem } from '@skdx/react/primitives/segmented-control';
+ *
+ * <SegmentedControl defaultValue="week" aria-label="Date range">
+ *   <SegmentedControlIndicator />
+ *   <SegmentedControlItem value="day">
+ *     <CalendarIcon />
+ *     Day
+ *   </SegmentedControlItem>
+ *   <SegmentedControlItem value="week">Week</SegmentedControlItem>
+ * </SegmentedControl>
+ * ```
+ */
+export { SegmentedControl } from './SegmentedControl.cjs';
+export { SegmentedControlIndicator } from './SegmentedControlIndicator.cjs';
+export { SegmentedControlItem } from './SegmentedControlItem.cjs';
+export type { SegmentedControlProps, SegmentedControlIndicatorProps, SegmentedControlItemProps, } from './types.cjs';

package/dist/segmented-control/primitives.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Advanced primitives for `SegmentedControl` — the parts the recipe composes.
+ *
+ * @example
+ * ```tsx
+ * import { SegmentedControl, SegmentedControlIndicator, SegmentedControlItem } from '@skdx/react/primitives/segmented-control';
+ *
+ * <SegmentedControl defaultValue="week" aria-label="Date range">
+ *   <SegmentedControlIndicator />
+ *   <SegmentedControlItem value="day">
+ *     <CalendarIcon />
+ *     Day
+ *   </SegmentedControlItem>
+ *   <SegmentedControlItem value="week">Week</SegmentedControlItem>
+ * </SegmentedControl>
+ * ```
+ */
+export { SegmentedControl } from './SegmentedControl.js';
+export { SegmentedControlIndicator } from './SegmentedControlIndicator.js';
+export { SegmentedControlItem } from './SegmentedControlItem.js';
+export type { SegmentedControlProps, SegmentedControlIndicatorProps, SegmentedControlItemProps, } from './types.js';

package/dist/segmented-control/types.d.cts

@@ -1,12 +1,37 @@
 import type * as React from 'react';
+import type { FormValidityHandle } from '../utils/formControl.cjs';
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+/**
+ * What `SegmentedControl`'s forwarded ref carries: the root `<div>` it always
+ * did, plus the three constraint-validation methods. Type your ref with
+ * `React.useRef<SegmentedControlHandle>(null)`.
+ */
+export type SegmentedControlHandle = HTMLDivElement & FormValidityHandle;
 /** Layout axis of a {@link SegmentedControl}. Unlike a roving-focus `Orientation` there is no `'both'`: a segmented control is a strip, and a strip has one axis. */
 export type SegmentedControlOrientation = 'horizontal' | 'vertical';
 /**
- * @internal Geometry of the checked segment, relative to the root's padding
- * box, published by {@link SegmentedControlIndicator} as CSS custom properties.
- * Not part of the public API.
+ * Why the selected segment changed: `'pointer'`, `'keyboard'`, or `'programmatic'`.
+ * The spellings match `@skdx/shared/contracts/change-reason` identically.
  */
+export type SegmentedControlChangeReason = 'keyboard' | 'pointer' | 'programmatic';
+/**
+ * Payload for `onValueChange`. Selection follows focus (APG radio pattern),
+ * so arrow keys, clicks, and form resets all trigger the same event — use
+ * `reason` to distinguish them. `previousValue` is provided because a
+ * controlled component's old value is gone by the time the handler runs.
+ */
+export interface SegmentedControlValueChangeDetail {
+    /** The segment that is now selected. */
+    value: string;
+    /** The value selected before this change, or `null` when nothing was. */
+    previousValue: string | null;
+    /**
+     * What drove the change: `'pointer'` for a click, `'keyboard'` for the focus
+     * an arrow key/Home/End moved, `'programmatic'` for a form reset.
+     */
+    reason: SegmentedControlChangeReason;
+}
+/** @internal Segment geometry published as CSS custom properties. */
 export interface SegmentedControlRect {
     x: number;
     y: number;
@@ -18,14 +43,30 @@ export interface SegmentedControlContextValue {
     value: string | undefined;
     orientation: SegmentedControlOrientation;
     disabled: boolean;
+    /** Whether the strip displays a committed choice the user may not change. */
+    readOnly: boolean;
     /** Fallback single tab stop when nothing is selected yet. */
     firstEnabledValue: string | null;
-    onValueChange: (value: string) => void;
+    /** The `name` every segment's hidden radio input carries; no name, no inputs. */
+    name?: string;
+    /** The strip's `form` id, forwarded to every segment's hidden radio input. */
+    form?: string;
+    /** Marks those hidden inputs required, so an empty strip is `valueMissing`. */
+    required: boolean;
+    /** Whether moving focus between segments also selects; `false` is APG's toolbar variant. */
+    selectOnFocus: boolean;
+    /** Selects `value` and reports it, tagged with what drove the selection. */
+    onValueChange: (value: string, reason: SegmentedControlChangeReason) => void;
     /** The root element, so the indicator can measure the checked item against it. */
     rootRef: React.RefObject<HTMLDivElement | null>;
 }
 /** Props for the {@link SegmentedControl} root. */
 export interface SegmentedControlProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Segments the strip derives as `SegmentedControlItem`s (ignored when `children` is given).
+     * @default undefined — compose segments manually as `children`.
+     */
+    options?: SegmentedControlOption[];
     /**
      * Selected segment's value, for controlled usage. Pair with `onValueChange`.
      * @default undefined — uncontrolled, tracks its own selection internally.
@@ -38,17 +79,16 @@ export interface SegmentedControlProps extends PrimitivePropsWithRef<'div'> {
      */
     defaultValue?: string;
     /**
-     * Fires with the new value whenever the selected segment changes, controlled
-     * or not — including when an arrow key moves focus, since focus selects here.
+     * Fires when the selection changes: from arrow keys, clicks, or form resets.
+     * Does not fire if the selected segment is clicked again. Receives the new
+     * value, previous value, and reason for the change.
      * @default undefined — no-op if omitted.
      */
-    onValueChange?: (value: string) => void;
+    onValueChange?: (detail: SegmentedControlValueChangeDetail) => void;
     /**
-     * Layout axis, exposed as `data-orientation` and `aria-orientation`, and the
-     * axis arrow keys navigate along. `'vertical'` also makes the indicator
-     * publish `--skdx-segmented-control-y` / `--skdx-segmented-control-height`.
-     * @default 'horizontal' — Left/Right navigate, and the indicator publishes
-     * only the x/width pair.
+     * Layout axis for arrow-key navigation, exposed as `data-orientation` and `aria-orientation`.
+     * `'vertical'` also publishes `y` / `height` in CSS custom properties (only `x` / `width` for horizontal).
+     * @default 'horizontal'
      */
     orientation?: SegmentedControlOrientation;
     /**
@@ -57,8 +97,67 @@ export interface SegmentedControlProps extends PrimitivePropsWithRef<'div'> {
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Marks the selection as committed and unchangeable. Segments remain focusable
+     * and arrow-navigable with `aria-readonly="true"`, but neither clicks nor focus changes the value.
+     * Unlike `disabled`, a read-only control stays in the tab order and answers the question posed.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the control as invalid: emits `aria-invalid` and `data-invalid` for styling and announcement.
+     * Presentational only — use `required` or `setCustomValidity()` for errors the form enforces.
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Form field name for submission. When set, each segment renders a hidden native radio input
+     * carrying this name, so `formData.get(name)` returns the selection and `form.reset()` restores `defaultValue`.
+     * @default undefined — no inputs rendered, nothing submitted, validation passes.
+     */
+    name?: string;
+    /**
+     * Form id for a control rendered outside its `<form>` (e.g., in a portal).
+     * Forwarded to each segment's hidden radio input and used to listen for `form.reset()`.
+     * @default undefined — the strip uses its nearest ancestor `<form>`, if any.
+     */
+    form?: string;
+    /**
+     * Marks the strip required for native constraint validation: while nothing is
+     * selected it reports `valueMissing`, so the form does not submit. Only
+     * meaningful alongside `name`, which is what renders the control the
+     * constraint lives on.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Whether focus movement selects the segment. When `false`, arrow keys move focus only;
+     * Space or Enter checks the focused segment (APG toolbar variant).
+     * @default true — focus selects (WAI-ARIA radio-group behavior).
+     */
+    selectOnFocus?: boolean;
+    /**
+     * Wraps arrow-key navigation from last segment back to first and vice versa.
+     * Unlike `RadioGroup.loop`, wrapping here changes the user's selection (focus selects).
+     * @default false — arrows stop at each end; Home/End still jump to them.
+     */
+    loop?: boolean;
+}
+/** One entry of {@link SegmentedControlProps.options} — a single segment. */
+export interface SegmentedControlOption {
+    /** Unique identifier compared against the strip's selected value. */
+    value: string;
+    /** Text rendered inside the derived `SegmentedControlItem`. */
+    label: React.ReactNode;
+    /**
+     * Prevents this segment from being selected. It keeps its place in the
+     * roving order — APG's radio pattern keeps disabled radios reachable — and
+     * carries `data-disabled`.
+     * @default false
+     */
+    disabled?: boolean;
 }
-/** Props for a single {@link SegmentedControlItem}. */
+/** Props for {@link SegmentedControlItem}, one segment of the strip. */
 export interface SegmentedControlItemProps extends PrimitivePropsWithRef<'button'> {
     /** Unique identifier compared against the group's selected value. */
     value: string;

package/dist/segmented-control/types.d.ts

@@ -1,12 +1,37 @@
 import type * as React from 'react';
+import type { FormValidityHandle } from '../utils/formControl.js';
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+/**
+ * What `SegmentedControl`'s forwarded ref carries: the root `<div>` it always
+ * did, plus the three constraint-validation methods. Type your ref with
+ * `React.useRef<SegmentedControlHandle>(null)`.
+ */
+export type SegmentedControlHandle = HTMLDivElement & FormValidityHandle;
 /** Layout axis of a {@link SegmentedControl}. Unlike a roving-focus `Orientation` there is no `'both'`: a segmented control is a strip, and a strip has one axis. */
 export type SegmentedControlOrientation = 'horizontal' | 'vertical';
 /**
- * @internal Geometry of the checked segment, relative to the root's padding
- * box, published by {@link SegmentedControlIndicator} as CSS custom properties.
- * Not part of the public API.
+ * Why the selected segment changed: `'pointer'`, `'keyboard'`, or `'programmatic'`.
+ * The spellings match `@skdx/shared/contracts/change-reason` identically.
  */
+export type SegmentedControlChangeReason = 'keyboard' | 'pointer' | 'programmatic';
+/**
+ * Payload for `onValueChange`. Selection follows focus (APG radio pattern),
+ * so arrow keys, clicks, and form resets all trigger the same event — use
+ * `reason` to distinguish them. `previousValue` is provided because a
+ * controlled component's old value is gone by the time the handler runs.
+ */
+export interface SegmentedControlValueChangeDetail {
+    /** The segment that is now selected. */
+    value: string;
+    /** The value selected before this change, or `null` when nothing was. */
+    previousValue: string | null;
+    /**
+     * What drove the change: `'pointer'` for a click, `'keyboard'` for the focus
+     * an arrow key/Home/End moved, `'programmatic'` for a form reset.
+     */
+    reason: SegmentedControlChangeReason;
+}
+/** @internal Segment geometry published as CSS custom properties. */
 export interface SegmentedControlRect {
     x: number;
     y: number;
@@ -18,14 +43,30 @@ export interface SegmentedControlContextValue {
     value: string | undefined;
     orientation: SegmentedControlOrientation;
     disabled: boolean;
+    /** Whether the strip displays a committed choice the user may not change. */
+    readOnly: boolean;
     /** Fallback single tab stop when nothing is selected yet. */
     firstEnabledValue: string | null;
-    onValueChange: (value: string) => void;
+    /** The `name` every segment's hidden radio input carries; no name, no inputs. */
+    name?: string;
+    /** The strip's `form` id, forwarded to every segment's hidden radio input. */
+    form?: string;
+    /** Marks those hidden inputs required, so an empty strip is `valueMissing`. */
+    required: boolean;
+    /** Whether moving focus between segments also selects; `false` is APG's toolbar variant. */
+    selectOnFocus: boolean;
+    /** Selects `value` and reports it, tagged with what drove the selection. */
+    onValueChange: (value: string, reason: SegmentedControlChangeReason) => void;
     /** The root element, so the indicator can measure the checked item against it. */
     rootRef: React.RefObject<HTMLDivElement | null>;
 }
 /** Props for the {@link SegmentedControl} root. */
 export interface SegmentedControlProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Segments the strip derives as `SegmentedControlItem`s (ignored when `children` is given).
+     * @default undefined — compose segments manually as `children`.
+     */
+    options?: SegmentedControlOption[];
     /**
      * Selected segment's value, for controlled usage. Pair with `onValueChange`.
      * @default undefined — uncontrolled, tracks its own selection internally.
@@ -38,17 +79,16 @@ export interface SegmentedControlProps extends PrimitivePropsWithRef<'div'> {
      */
     defaultValue?: string;
     /**
-     * Fires with the new value whenever the selected segment changes, controlled
-     * or not — including when an arrow key moves focus, since focus selects here.
+     * Fires when the selection changes: from arrow keys, clicks, or form resets.
+     * Does not fire if the selected segment is clicked again. Receives the new
+     * value, previous value, and reason for the change.
      * @default undefined — no-op if omitted.
      */
-    onValueChange?: (value: string) => void;
+    onValueChange?: (detail: SegmentedControlValueChangeDetail) => void;
     /**
-     * Layout axis, exposed as `data-orientation` and `aria-orientation`, and the
-     * axis arrow keys navigate along. `'vertical'` also makes the indicator
-     * publish `--skdx-segmented-control-y` / `--skdx-segmented-control-height`.
-     * @default 'horizontal' — Left/Right navigate, and the indicator publishes
-     * only the x/width pair.
+     * Layout axis for arrow-key navigation, exposed as `data-orientation` and `aria-orientation`.
+     * `'vertical'` also publishes `y` / `height` in CSS custom properties (only `x` / `width` for horizontal).
+     * @default 'horizontal'
      */
     orientation?: SegmentedControlOrientation;
     /**
@@ -57,8 +97,67 @@ export interface SegmentedControlProps extends PrimitivePropsWithRef<'div'> {
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Marks the selection as committed and unchangeable. Segments remain focusable
+     * and arrow-navigable with `aria-readonly="true"`, but neither clicks nor focus changes the value.
+     * Unlike `disabled`, a read-only control stays in the tab order and answers the question posed.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the control as invalid: emits `aria-invalid` and `data-invalid` for styling and announcement.
+     * Presentational only — use `required` or `setCustomValidity()` for errors the form enforces.
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Form field name for submission. When set, each segment renders a hidden native radio input
+     * carrying this name, so `formData.get(name)` returns the selection and `form.reset()` restores `defaultValue`.
+     * @default undefined — no inputs rendered, nothing submitted, validation passes.
+     */
+    name?: string;
+    /**
+     * Form id for a control rendered outside its `<form>` (e.g., in a portal).
+     * Forwarded to each segment's hidden radio input and used to listen for `form.reset()`.
+     * @default undefined — the strip uses its nearest ancestor `<form>`, if any.
+     */
+    form?: string;
+    /**
+     * Marks the strip required for native constraint validation: while nothing is
+     * selected it reports `valueMissing`, so the form does not submit. Only
+     * meaningful alongside `name`, which is what renders the control the
+     * constraint lives on.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Whether focus movement selects the segment. When `false`, arrow keys move focus only;
+     * Space or Enter checks the focused segment (APG toolbar variant).
+     * @default true — focus selects (WAI-ARIA radio-group behavior).
+     */
+    selectOnFocus?: boolean;
+    /**
+     * Wraps arrow-key navigation from last segment back to first and vice versa.
+     * Unlike `RadioGroup.loop`, wrapping here changes the user's selection (focus selects).
+     * @default false — arrows stop at each end; Home/End still jump to them.
+     */
+    loop?: boolean;
+}
+/** One entry of {@link SegmentedControlProps.options} — a single segment. */
+export interface SegmentedControlOption {
+    /** Unique identifier compared against the strip's selected value. */
+    value: string;
+    /** Text rendered inside the derived `SegmentedControlItem`. */
+    label: React.ReactNode;
+    /**
+     * Prevents this segment from being selected. It keeps its place in the
+     * roving order — APG's radio pattern keeps disabled radios reachable — and
+     * carries `data-disabled`.
+     * @default false
+     */
+    disabled?: boolean;
 }
-/** Props for a single {@link SegmentedControlItem}. */
+/** Props for {@link SegmentedControlItem}, one segment of the strip. */
 export interface SegmentedControlItemProps extends PrimitivePropsWithRef<'button'> {
     /** Unique identifier compared against the group's selected value. */
     value: string;

package/dist/select/Select.cjs

@@ -1 +1 @@
-"use strict";var pt=Object.create;var w=Object.defineProperty;var mt=Object.getOwnPropertyDescriptor;var ft=Object.getOwnPropertyNames;var dt=Object.getPrototypeOf,ut=Object.prototype.hasOwnProperty;var St=(e,o)=>{for(var t in o)w(e,t,{get:o[t],enumerable:!0})},te=(e,o,t,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let c of ft(o))!ut.call(e,c)&&c!==t&&w(e,c,{get:()=>o[c],enumerable:!(r=mt(o,c))||r.enumerable});return e};var u=(e,o,t)=>(t=e!=null?pt(dt(e)):{},te(o||!e||!e.__esModule?w(t,"default",{value:e,enumerable:!0}):t,e)),Pt=e=>te(w({},"__esModule",{value:!0}),e);var yt={};St(yt,{Select:()=>ie,SelectContent:()=>B,SelectGroup:()=>Q,SelectIcon:()=>G,SelectItem:()=>_,SelectItemIndicator:()=>J,SelectItemText:()=>z,SelectLabel:()=>X,SelectPortal:()=>F,SelectProvider:()=>se,SelectSeparator:()=>Y,SelectTrigger:()=>K,SelectValue:()=>A,SelectViewport:()=>U,useSelectContext:()=>S});module.exports=Pt(yt);var i=u(require("react"),1),oe=require("../utils/createContext.cjs"),L=require("../utils/formControl.cjs"),re=require("../utils/hiddenInput.cjs"),le=require("../utils/popper.cjs"),ne=require("../utils/useControllableState.cjs"),ae=require("../utils/useOpenChangeComplete.cjs"),ce=require("../utils/useSelection.cjs"),h=require("react/jsx-runtime"),[se,S]=(0,oe.createSafeContext)("Select"),ie=i.forwardRef(function({children:o,value:t,defaultValue:r,onValueChange:c,multiple:n=!1,items:p,open:a,defaultOpen:d=!1,onOpenChange:s,onOpenChangeComplete:l,disabled:v=!1,required:b=!1,invalid:m=!1,name:R},D){let T=i.useRef(null),Z=i.useRef(null),$=i.useRef(null),{selectedValues:O,isSelected:ot,selectItem:rt,setSelection:lt}=(0,ce.useSelection)({value:t,defaultValue:r,onValueChange:c,multiple:n}),[j=!1,nt]=(0,ne.useControllableState)({prop:a,defaultProp:d,onChange:s});(0,ae.useOpenChangeComplete)(j,Z,l);let[I,at]=i.useState(new Map),ct=i.useCallback((f,P)=>{at(M=>{if(M.get(f)===P)return M;let ee=new Map(M);return ee.set(f,P),ee})},[]),st=i.useMemo(()=>p?p.map(f=>({...f,label:I.get(f.value)??f.label??f.value})):[...I].map(([f,P])=>({value:f,label:P})),[p,I]),it=i.useCallback(f=>I.get(f)??p?.find(P=>P.value===f)?.label??f,[I,p]);return i.useImperativeHandle(D,()=>(0,L.formValidityHandle)($),[]),(0,L.useFormReset)(T,()=>{r!==void 0&&lt(r)}),(0,h.jsx)(le.PopperRoot,{children:(0,h.jsxs)(se,{triggerRef:T,contentRef:Z,contentId:i.useId(),multiple:n,selectedValues:O,isSelected:ot,selectItem:rt,open:j,onOpenChange:nt,disabled:v,required:b,invalid:m,name:R,registerOptionLabel:ct,getOptionLabel:it,collection:st,children:[o,R&&(O.length>0?O:[""]).map((f,P)=>(0,h.jsx)(re.HiddenInput,{ref:P===0?$:void 0,type:"text",name:R,value:f,required:b,disabled:v},f||P))]})})});ie.displayName="Select";var y=u(require("react"),1),pe=require("../utils/composeRefs.cjs"),me=require("../utils/part.cjs"),fe=require("../utils/popper.cjs"),C=require("../utils/primitive.cjs"),k=require("../utils/useTypeahead.cjs");var V=require("react/jsx-runtime"),K=y.forwardRef((e,o)=>{let t=S("SelectTrigger"),r=(0,pe.useComposedRefs)(o,t.triggerRef),c=t.disabled||e.disabled,n=y.useRef(t.collection);n.current=t.collection.filter(a=>!a.disabled);let p=(0,k.useTypeahead)(y.useCallback(()=>n.current.map(a=>a.label??a.value),[]));return(0,V.jsx)(fe.PopperAnchor,{asChild:!0,children:(0,V.jsx)(C.Primitive.button,{type:"button",role:"combobox","aria-haspopup":"listbox","aria-expanded":t.open,"aria-controls":t.contentId,"aria-required":t.required||void 0,"aria-invalid":t.invalid?!0:void 0,"data-state":t.open?"open":"closed","data-disabled":c?"":void 0,"data-invalid":t.invalid?"":void 0,"data-placeholder":t.selectedValues.length===0?"":void 0,"data-multiple":t.multiple?"":void 0,disabled:c,...e,...(0,me.skdxPart)("select","trigger",e.className),ref:r,onClick:(0,C.composeEventHandlers)(e.onClick,()=>t.onOpenChange(!t.open)),onKeyDown:(0,C.composeEventHandlers)(e.onKeyDown,a=>{if(["ArrowDown","ArrowUp"," ","Enter"].includes(a.key)){a.preventDefault(),t.onOpenChange(!0);return}if(t.open||!(0,k.isTypeaheadKey)(a))return;if(a.preventDefault(),t.multiple){t.onOpenChange(!0);return}let d=n.current.findIndex(l=>t.isSelected(l.value)),s=p(a.key,d);s!==-1&&t.selectItem(n.current[s].value)})})})});K.displayName="SelectTrigger";var de=u(require("react"),1),ue=require("../utils/part.cjs"),Se=require("../utils/primitive.cjs");var q=require("react/jsx-runtime"),A=de.forwardRef(({placeholder:e,children:o,...t},r)=>{let{selectedValues:c,multiple:n,getOptionLabel:p}=S("SelectValue"),a,d=!1;return o!==void 0?a=o:c.length===0?(a=e,d=!0):n?a=c.map(s=>(0,q.jsx)("span",{"data-chip":"","data-value":s,children:p(s)},s)):a=p(c[0]),(0,q.jsx)(Se.Primitive.span,{"data-multiple":n?"":void 0,"data-placeholder":d?"":void 0,...t,...(0,ue.skdxPart)("select","value",t.className),ref:r,style:{pointerEvents:"none",...t.style},children:a})});A.displayName="SelectValue";var Pe=u(require("react"),1),Re=require("../utils/part.cjs"),ye=require("../utils/primitive.cjs"),ge=require("react/jsx-runtime"),G=Pe.forwardRef(({children:e,...o},t)=>(0,ge.jsx)(ye.Primitive.span,{"aria-hidden":!0,...o,...(0,Re.skdxPart)("select","icon",o.className),ref:t,children:e??"\u25BE"}));G.displayName="SelectIcon";var xe=require("../utils/portal.cjs");var Ie=require("react/jsx-runtime"),F=({forceMount:e,children:o,...t})=>{let r=S("SelectPortal");return e||r.open?(0,Ie.jsx)(xe.Portal,{...t,children:o}):null};F.displayName="SelectPortal";var E=u(require("react"),1),Ce=require("../utils/composeRefs.cjs"),ve=require("../utils/part.cjs"),be=require("../utils/popper.cjs"),Te=require("../utils/primitive.cjs"),we=require("../utils/useDismiss.cjs"),Le=require("../utils/useRovingFocus.cjs");var ke=require("react/jsx-runtime"),he='[role="option"]:not([data-disabled])',B=E.forwardRef(({forceMount:e,side:o="bottom",align:t="start",sideOffset:r=4,onEscapeKeyDown:c,onPointerDownOutside:n,onFocusOutside:p,onInteractOutside:a,...d},s)=>{let l=S("SelectContent"),v=(0,Ce.useComposedRefs)(s,l.contentRef),b=(0,Le.useRovingFocus)({orientation:"vertical",loop:!1,itemSelector:he,typeahead:!0});return(0,we.useDismiss)({enabled:l.open,onEscapeKeyDown:m=>{c?.(m),!m.defaultPrevented&&(l.onOpenChange(!1),l.triggerRef.current?.focus())},onInteractOutside:a,onPointerDownOutside:m=>{n?.(m),m.defaultPrevented||l.onOpenChange(!1)},onFocusOutside:m=>{p?.(m),m.defaultPrevented||l.onOpenChange(!1)}},[l.contentRef,l.triggerRef]),E.useEffect(()=>{if(!l.open)return;let m=requestAnimationFrame(()=>{let R=l.contentRef.current;if(!R)return;let D=R.querySelector('[role="option"][data-state="checked"]'),T=R.querySelector(he);(D??T??R).focus()});return()=>cancelAnimationFrame(m)},[l.open,l.contentRef]),e||l.open?(0,ke.jsx)(be.PopperContent,{component:"select",role:"listbox",id:l.contentId,"aria-multiselectable":l.multiple?!0:void 0,"data-state":l.open?"open":"closed","data-multiple":l.multiple?"":void 0,tabIndex:-1,side:o,align:t,sideOffset:r,...d,...(0,ve.skdxPart)("select","content",d.className),ref:v,onKeyDown:(0,Te.composeEventHandlers)(d.onKeyDown,m=>{b(m),m.key==="Tab"&&(m.preventDefault(),l.onOpenChange(!1),l.triggerRef.current?.focus())})}):null});B.displayName="SelectContent";var Ee=u(require("react"),1),He=require("../utils/part.cjs"),Ne=require("../utils/primitive.cjs"),De=require("react/jsx-runtime"),U=Ee.forwardRef((e,o)=>(0,De.jsx)(Ne.Primitive.div,{...e,...(0,He.skdxPart)("select","viewport",e.className),ref:o,style:{overflow:"auto",...e.style}}));U.displayName="SelectViewport";var H=u(require("react"),1),Oe=require("../utils/createContext.cjs"),Me=require("../utils/part.cjs"),g=require("../utils/primitive.cjs");var W=require("react/jsx-runtime"),[Rt,N]=(0,Oe.createSafeContext)("SelectItem"),_=H.forwardRef(({value:e,disabled:o,textValue:t,...r},c)=>{let n=S("SelectItem"),p=n.isSelected(e),a=H.useCallback(s=>n.registerOptionLabel(e,t??s),[n.registerOptionLabel,e,t]),d=()=>{o||(n.selectItem(e),!n.multiple&&(n.onOpenChange(!1),n.triggerRef.current?.focus()))};return(0,W.jsx)(Rt,{value:e,selected:p,registerText:a,children:(0,W.jsx)(g.Primitive.div,{role:"option","aria-selected":p,"data-state":p?"checked":"unchecked","data-text-value":t,"data-disabled":o?"":void 0,tabIndex:o?void 0:-1,...r,...(0,Me.skdxPart)("select","item",r.className),ref:c,onClick:(0,g.composeEventHandlers)(r.onClick,d),onKeyDown:(0,g.composeEventHandlers)(r.onKeyDown,s=>{[" ","Enter"].includes(s.key)&&(s.preventDefault(),d())}),onPointerEnter:(0,g.composeEventHandlers)(r.onPointerEnter,s=>{o||s.currentTarget.focus()})})})});_.displayName="SelectItem";var x=u(require("react"),1),Ve=require("../utils/composeRefs.cjs"),Ke=require("../utils/part.cjs"),qe=require("../utils/primitive.cjs");var Ae=require("react/jsx-runtime"),z=x.forwardRef(({children:e,...o},t)=>{let r=N("SelectItemText"),c=x.useRef(null),n=(0,Ve.useComposedRefs)(t,c);return x.useLayoutEffect(()=>{r.registerText(c.current?.textContent??"")}),(0,Ae.jsx)(qe.Primitive.span,{...o,...(0,Ke.skdxPart)("select","item-text",o.className),ref:n,children:e})});z.displayName="SelectItemText";var Ge=u(require("react"),1),Fe=require("../utils/part.cjs"),Be=require("../utils/primitive.cjs");var Ue=require("react/jsx-runtime"),J=Ge.forwardRef(({forceMount:e,...o},t)=>{let r=N("SelectItemIndicator");return e||r.selected?(0,Ue.jsx)(Be.Primitive.span,{"aria-hidden":!0,...o,...(0,Fe.skdxPart)("select","item-indicator",o.className),ref:t}):null});J.displayName="SelectItemIndicator";var We=u(require("react"),1),_e=require("../utils/part.cjs"),ze=require("../utils/primitive.cjs"),Je=require("react/jsx-runtime"),Q=We.forwardRef((e,o)=>(0,Je.jsx)(ze.Primitive.div,{role:"group",...e,...(0,_e.skdxPart)("select","group",e.className),ref:o}));Q.displayName="SelectGroup";var Qe=u(require("react"),1),Xe=require("../utils/part.cjs"),Ye=require("../utils/primitive.cjs"),Ze=require("react/jsx-runtime"),X=Qe.forwardRef((e,o)=>(0,Ze.jsx)(Ye.Primitive.div,{...e,...(0,Xe.skdxPart)("select","label",e.className),ref:o}));X.displayName="SelectLabel";var $e=u(require("react"),1),je=require("../utils/part.cjs"),et=require("../utils/primitive.cjs"),tt=require("react/jsx-runtime"),Y=$e.forwardRef((e,o)=>(0,tt.jsx)(et.Primitive.div,{"aria-hidden":!0,...e,...(0,je.skdxPart)("select","separator",e.className),ref:o}));Y.displayName="SelectSeparator";0&&(module.exports={Select,SelectContent,SelectGroup,SelectIcon,SelectItem,SelectItemIndicator,SelectItemText,SelectLabel,SelectPortal,SelectProvider,SelectSeparator,SelectTrigger,SelectValue,SelectViewport,useSelectContext});
+"use strict";var Ut=Object.create;var q=Object.defineProperty;var _t=Object.getOwnPropertyDescriptor;var Wt=Object.getOwnPropertyNames;var Yt=Object.getPrototypeOf,Zt=Object.prototype.hasOwnProperty;var zt=(t,o)=>{for(var e in o)q(t,e,{get:o[e],enumerable:!0})},ge=(t,o,e,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let m of Wt(o))!Zt.call(t,m)&&m!==e&&q(t,m,{get:()=>o[m],enumerable:!(s=_t(o,m))||s.enumerable});return t};var h=(t,o,e)=>(e=t!=null?Ut(Yt(t)):{},ge(o||!t||!t.__esModule?q(e,"default",{value:t,enumerable:!0}):e,t)),Jt=t=>ge(q({},"__esModule",{value:!0}),t);var jt={};zt(jt,{OPTION_SELECTOR:()=>A,Select:()=>gt,SelectContent:()=>U,SelectGroup:()=>W,SelectGroupProvider:()=>we,SelectIcon:()=>Y,SelectItem:()=>Z,SelectItemIndicator:()=>z,SelectItemProvider:()=>Ve,SelectItemText:()=>J,SelectLabel:()=>Q,SelectPortal:()=>X,SelectProvider:()=>yt,SelectSeparator:()=>bt,SelectTrigger:()=>$,SelectValue:()=>j,SelectViewport:()=>ee,useSelectContext:()=>I,useSelectGroupContext:()=>ae,useSelectItemContext:()=>G});module.exports=Jt(jt);var i=h(require("react"),1),mt=require("../utils/createContext.cjs"),te=require("../utils/formControl.cjs"),dt=require("../utils/hiddenInput.cjs"),pt=require("../utils/popper.cjs"),ft=require("../utils/useControllableState.cjs"),ut=require("../utils/useFocusTrap.cjs"),St=require("../utils/useOpenChangeComplete.cjs"),Rt=require("../utils/useSelection.cjs");var st=h(require("react"),1);var B=h(require("react"),1),he=require("../utils/composeRefs.cjs"),Ie=require("../utils/part.cjs"),Pe=require("../utils/popper.cjs"),be=require("../utils/primitive.cjs"),xe=require("../utils/useDismiss.cjs");var ve=require("react/jsx-runtime");function Qt(t,o){let e=t.querySelector('[data-part="viewport"]')??t;if(e===o||!e.contains(o))return;let s=e.getBoundingClientRect(),m=o.getBoundingClientRect();e.scrollTop+=m.top-s.top-(s.height-m.height)/2}var U=B.forwardRef(({forceMount:t,side:o="bottom",align:e="start",sideOffset:s=4,onEscapeKeyDown:m,onPointerDownOutside:a,onFocusOutside:y,onInteractOutside:S,onCloseAutoFocus:f,...n},d)=>{let c=I("SelectContent"),v=(0,he.useComposedRefs)(d,c.contentRef);c.closeAutoFocusRef.current=f,(0,xe.useDismiss)({enabled:c.open,onEscapeKeyDown:l=>{m?.(l),!l.defaultPrevented&&(c.onOpenChange(!1),c.focusTrigger())},onInteractOutside:S,onPointerDownOutside:l=>{a?.(l),l.defaultPrevented||c.onOpenChange(!1)},onFocusOutside:l=>{y?.(l),l.defaultPrevented||c.onOpenChange(!1)}},[c.contentRef,c.triggerRef]);let{setActiveId:C,openIntentRef:r}=c;return B.useEffect(()=>{if(!c.open)return;let l=requestAnimationFrame(()=>{let g=c.contentRef.current;if(!g)return;let P=r.current;r.current="selected";let u=Array.from(g.querySelectorAll(A)),M=u[0],oe=u[u.length-1],K=g.querySelector('[role="option"][data-state="checked"]'),H=P==="first"?M:P==="last"?oe:K??M;H&&(C(H.id),Qt(g,H))});return()=>cancelAnimationFrame(l)},[c.open,c.contentRef,C,r]),t||c.open?(0,ve.jsx)(Pe.PopperContent,{component:"select",role:"listbox",id:c.contentId,"aria-multiselectable":c.multiple?!0:void 0,"data-state":c.open?"open":"closed","data-multiple":c.multiple?"":void 0,tabIndex:-1,side:o,align:e,sideOffset:s,...n,...(0,Ie.skdxPart)("select","content",n.className),ref:v,onMouseDown:(0,be.composeEventHandlers)(n.onMouseDown,l=>l.preventDefault())}):null});U.displayName="SelectContent";var _=h(require("react"),1),Ce=require("../utils/createContext.cjs"),Oe=require("../utils/part.cjs"),Te=require("../utils/primitive.cjs"),ne=require("react/jsx-runtime"),[we,ae]=(0,Ce.createSafeContext)("SelectGroup",{labelId:null}),W=_.forwardRef((t,o)=>{let e=_.useId();return(0,ne.jsx)(we,{labelId:e,children:(0,ne.jsx)(Te.Primitive.div,{role:"group","aria-labelledby":e,...t,...(0,Oe.skdxPart)("select","group",t.className),ref:o})})});W.displayName="SelectGroup";var Ee=h(require("react"),1),ke=require("../utils/part.cjs"),Le=require("../utils/primitive.cjs"),Me=require("react/jsx-runtime"),Y=Ee.forwardRef(({children:t,...o},e)=>(0,Me.jsx)(Le.Primitive.span,{"aria-hidden":!0,...o,...(0,ke.skdxPart)("select","icon",o.className),ref:e,children:t??"\u25BE"}));Y.displayName="SelectIcon";var w=h(require("react"),1),He=require("../utils/createContext.cjs"),De=require("../utils/part.cjs"),N=require("../utils/primitive.cjs");var ce=require("react/jsx-runtime"),[Ve,G]=(0,He.createSafeContext)("SelectItem"),Z=w.forwardRef(({value:t,disabled:o,textValue:e,...s},m)=>{let a=I("SelectItem"),y=w.useId(),S=a.isSelected(t),f=a.activeId===y,{registerOptionLabel:n}=a,d=w.useCallback(v=>n(t,e??v),[n,t,e]),c=()=>{o||(a.selectItem(t),a.closeOnSelect&&(a.onOpenChange(!1),a.focusTrigger()))};return(0,ce.jsx)(Ve,{value:t,selected:S,registerText:d,children:(0,ce.jsx)(N.Primitive.div,{role:"option",id:y,"data-value":t,"aria-selected":S,"data-state":S?"checked":"unchecked","data-highlighted":f?"":void 0,"data-text-value":e,"aria-disabled":o||void 0,"data-disabled":o?"":void 0,...s,...(0,De.skdxPart)("select","item",s.className),ref:m,onClick:(0,N.composeEventHandlers)(s.onClick,c),onPointerEnter:(0,N.composeEventHandlers)(s.onPointerEnter,()=>{o||a.setActiveId(y)})})})});Z.displayName="SelectItem";var Ae=h(require("react"),1),Ne=require("../utils/part.cjs"),Ge=require("../utils/primitive.cjs");var Fe=require("react/jsx-runtime"),z=Ae.forwardRef(({forceMount:t,...o},e)=>{let s=G("SelectItemIndicator");return t||s.selected?(0,Fe.jsx)(Ge.Primitive.span,{"aria-hidden":!0,...o,...(0,Ne.skdxPart)("select","item-indicator",o.className),ref:e}):null});z.displayName="SelectItemIndicator";var E=h(require("react"),1),Ke=require("../utils/composeRefs.cjs"),qe=require("../utils/part.cjs"),Be=require("../utils/primitive.cjs");var Ue=require("react/jsx-runtime"),J=E.forwardRef(({children:t,...o},e)=>{let s=G("SelectItemText"),m=E.useRef(null),a=(0,Ke.useComposedRefs)(e,m);return E.useLayoutEffect(()=>{s.registerText(m.current?.textContent??"")}),(0,Ue.jsx)(Be.Primitive.span,{...o,...(0,qe.skdxPart)("select","item-text",o.className),ref:a,children:t})});J.displayName="SelectItemText";var _e=h(require("react"),1),We=require("../utils/part.cjs"),Ye=require("../utils/primitive.cjs");var Ze=require("react/jsx-runtime"),Q=_e.forwardRef((t,o)=>{let e=ae("SelectLabel");return(0,Ze.jsx)(Ye.Primitive.div,{id:e.labelId??void 0,...t,...(0,We.skdxPart)("select","label",t.className),ref:o})});Q.displayName="SelectLabel";var ze=require("../utils/portal.cjs");var Je=require("react/jsx-runtime"),X=({forceMount:t,children:o,...e})=>{let s=I("SelectPortal");return t||s.open?(0,Je.jsx)(ze.Portal,{...e,children:o}):null};X.displayName="SelectPortal";var b=h(require("react"),1),Xe=require("../utils/composeRefs.cjs"),$e=require("../utils/part.cjs"),je=require("../utils/popper.cjs"),F=require("../utils/primitive.cjs"),et=require("../utils/useRovingFocus.cjs"),k=require("../utils/useTypeahead.cjs");var se=require("react/jsx-runtime"),Qe=10,Xt={ArrowDown:"first",Home:"first",ArrowUp:"last",End:"last",Enter:"selected"," ":"selected"},$=b.forwardRef((t,o)=>{let e=I("SelectTrigger"),s=(0,Xe.useComposedRefs)(o,e.triggerRef),m=e.disabled||t.disabled,a=b.useRef(e.collection);a.current=e.collection.filter(r=>!r.disabled);let y=(0,k.useTypeahead)(b.useCallback(()=>a.current.map(r=>r.label??r.value),[])),S=b.useRef([]),f=(0,k.useTypeahead)(b.useCallback(()=>S.current.map(r=>(0,et.itemText)(r)),[])),n=r=>{r&&(e.setActiveId(r.id),r.scrollIntoView?.({block:"nearest"}))},d=r=>{let l=r?.getAttribute("data-value");l!=null&&(e.selectItem(l),e.closeOnSelect&&e.onOpenChange(!1))},c=r=>{let l=r?.getAttribute("data-value");l!=null&&(e.multiple&&e.isSelected(l)||e.selectItem(l))},v=r=>{let l=Array.from(e.contentRef.current?.querySelectorAll(A)??[]);S.current=l;let g=l.findIndex(u=>u.id===e.activeId);if(r.altKey&&(r.key==="ArrowUp"||r.key==="ArrowDown")){r.preventDefault(),r.key==="ArrowUp"&&(d(l[g]),e.onOpenChange(!1));return}if(r.key==="ArrowDown"||r.key==="ArrowUp"){if(r.preventDefault(),l.length===0)return;let u=r.key==="ArrowDown"?1:-1;n(l[Math.min(l.length-1,Math.max(0,g+u))]);return}if(r.key==="PageDown"||r.key==="PageUp"){if(r.preventDefault(),l.length===0)return;let u=r.key==="PageDown"?Qe:-Qe;n(l[Math.min(l.length-1,Math.max(0,g+u))]);return}if(r.key==="Home"||r.key==="End"){r.preventDefault(),n(r.key==="Home"?l[0]:l[l.length-1]);return}if(r.key==="Enter"||r.key===" "){r.preventDefault(),d(l[g]);return}if(r.key==="Tab"){c(l[g]),e.onOpenChange(!1);return}if(!(0,k.isTypeaheadKey)(r))return;r.preventDefault();let P=f(r.key,g);P!==-1&&n(l[P])},C=t["aria-label"]===void 0&&e.hasValuePart?[t["aria-labelledby"],e.valueId].filter(Boolean).join(" "):t["aria-labelledby"];return(0,se.jsx)(je.PopperAnchor,{asChild:!0,children:(0,se.jsx)(F.Primitive.button,{type:"button",role:"combobox","aria-haspopup":"listbox","aria-expanded":e.open,"aria-controls":e.contentId,"aria-activedescendant":e.activeId??void 0,"aria-required":e.required||void 0,"aria-invalid":e.invalid?!0:void 0,"aria-readonly":e.readOnly?!0:void 0,"data-state":e.open?"open":"closed","data-disabled":m?"":void 0,"data-readonly":e.readOnly?"":void 0,"data-invalid":e.invalid?"":void 0,"data-placeholder":e.selectedValues.length===0?"":void 0,"data-multiple":e.multiple?"":void 0,disabled:m,...t,"aria-labelledby":C,...(0,$e.skdxPart)("select","trigger",t.className),ref:s,onClick:(0,F.composeEventHandlers)(t.onClick,()=>e.onOpenChange(!e.open)),onKeyDown:(0,F.composeEventHandlers)(t.onKeyDown,r=>{if(e.open){v(r);return}let l=Xt[r.key];if(r.altKey&&r.key==="ArrowUp")return;if(l!==void 0){r.preventDefault(),e.openIntentRef.current=r.altKey&&r.key==="ArrowDown"?"selected":l,e.onOpenChange(!0);return}if(!(0,k.isTypeaheadKey)(r))return;if(r.preventDefault(),e.multiple){e.onOpenChange(!0);return}let g=a.current.findIndex(u=>e.isSelected(u.value)),P=y(r.key,g);P!==-1&&e.selectItem(a.current[P].value)})})})});$.displayName="SelectTrigger";var x=h(require("react"),1),tt=require("../utils/part.cjs"),ot=require("../utils/primitive.cjs");var ie=require("react/jsx-runtime"),j=x.forwardRef(({placeholder:t,children:o,...e},s)=>{let{selectedValues:m,multiple:a,getOptionLabel:y,valueId:S,setHasValuePart:f}=I("SelectValue");x.useEffect(()=>(f(!0),()=>f(!1)),[f]);let n,d=!1;return!e.asChild&&o!==void 0?n=o:m.length===0?(n=t,d=!0):a?n=m.map(c=>(0,ie.jsx)("span",{"data-chip":"","data-value":c,children:y(c)},c)):n=y(m[0]),(0,ie.jsx)(ot.Primitive.span,{id:S,"data-multiple":a?"":void 0,"data-placeholder":d?"":void 0,...e,...(0,tt.skdxPart)("select","value",e.className),ref:s,style:{pointerEvents:"none",...e.style},children:e.asChild&&x.isValidElement(o)?x.cloneElement(o,void 0,n):n})});j.displayName="SelectValue";var rt=h(require("react"),1),lt=require("../utils/part.cjs"),nt=require("../utils/primitive.cjs"),at=require("react/jsx-runtime"),ee=rt.forwardRef((t,o)=>(0,at.jsx)(nt.Primitive.div,{...t,...(0,lt.skdxPart)("select","viewport",t.className),ref:o,style:{overflow:"auto",...t.style}}));ee.displayName="SelectViewport";var R=require("react/jsx-runtime"),ct=t=>"options"in t,it=({options:t,renderOption:o,renderValue:e,placeholder:s,passThrough:m})=>{let a=I("Select"),y=st.useMemo(()=>{let n=new Map;for(let d of t)for(let c of ct(d)?d.options:[d])n.set(c.value,c);return n},[t]),S=n=>(0,R.jsxs)(Z,{value:n.value,disabled:n.disabled,textValue:n.label,children:[(0,R.jsx)(z,{children:"\u2713"}),(0,R.jsx)(J,{children:o?o(n,{selected:a.isSelected(n.value)}):n.label??n.value})]},n.value),f;if(e){let n=a.multiple?a.selectedValues.map(d=>y.get(d)??{value:d}):y.get(a.selectedValues[0]??"")??(a.selectedValues[0]?{value:a.selectedValues[0]}:null);f=e(n)}return(0,R.jsxs)(R.Fragment,{children:[(0,R.jsxs)($,{...m,children:[(0,R.jsx)(j,{placeholder:s,children:f}),(0,R.jsx)(Y,{})]}),(0,R.jsx)(X,{children:(0,R.jsx)(U,{children:(0,R.jsx)(ee,{children:t.map(n=>ct(n)?(0,R.jsxs)(W,{children:[(0,R.jsx)(Q,{children:n.label}),n.options.map(S)]},n.label):S(n))})})})]})};var L=require("react/jsx-runtime");function $t(t){let o=[];for(let e of t)for(let s of"options"in e?e.options:[e])o.push(s);return o}var A='[role="option"]:not([data-disabled])',[yt,I]=(0,mt.createSafeContext)("Select"),gt=i.forwardRef(function({children:o,value:e,defaultValue:s,onValueChange:m,multiple:a=!1,deselectable:y=!1,items:S,options:f,renderOption:n,renderValue:d,placeholder:c,closeOnSelect:v=!a,open:C,defaultOpen:r=!1,onOpenChange:l,onOpenChangeComplete:g,disabled:P=!1,readOnly:u=!1,required:M=!1,invalid:oe=!1,name:K,form:H,autoComplete:vt,...Ct},Ot){let re=i.useRef(null),me=i.useRef(null),de=i.useRef(null),{selectedValues:pe,isSelected:Tt,selectItem:fe,setSelection:wt}=(0,Rt.useSelection)({value:e,defaultValue:s,onValueChange:m,multiple:a,deselectable:y,label:"Select"}),[O=!1,ue]=(0,ft.useControllableState)({prop:C,defaultProp:r,onChange:l}),Et=i.useCallback(p=>{u&&p||ue(p)},[u,ue]),kt=i.useCallback(p=>{u||fe(p)},[u,fe]);(0,St.useOpenChangeComplete)(O,me,g);let Se=i.useRef(void 0),Lt=i.useCallback(()=>{(0,ut.autoFocusEvent)("close-auto-focus",Se.current)&&re.current?.focus()},[]),[Mt,Re]=i.useState(null),[Ht,Dt]=i.useState(O);O!==Ht&&(Dt(O),O||Re(null));let Vt=i.useRef("selected"),At=i.useId(),[Nt,Gt]=i.useState(!1),[D,Ft]=i.useState(new Map),Kt=i.useCallback((p,T)=>{Ft(le=>{if(le.get(p)===T)return le;let ye=new Map(le);return ye.set(p,T),ye})},[]),V=i.useMemo(()=>S??(f?$t(f):void 0),[S,f]),qt=i.useMemo(()=>V?V.map(p=>({...p,label:D.get(p.value)??p.label??p.value})):[...D].map(([p,T])=>({value:p,label:T})),[V,D]),Bt=i.useCallback(p=>D.get(p)??V?.find(T=>T.value===p)?.label??p,[D,V]);return i.useImperativeHandle(Ot,()=>(0,te.formValidityHandle)(de),[]),(0,te.useFormReset)(re,()=>{s!==void 0&&wt(s)}),(0,L.jsx)(pt.PopperRoot,{children:(0,L.jsxs)(yt,{triggerRef:re,focusTrigger:Lt,closeAutoFocusRef:Se,contentRef:me,contentId:i.useId(),valueId:At,hasValuePart:Nt,setHasValuePart:Gt,activeId:Mt,setActiveId:Re,openIntentRef:Vt,multiple:a,closeOnSelect:v,selectedValues:pe,isSelected:Tt,selectItem:kt,open:O,onOpenChange:Et,disabled:P,readOnly:u,required:M,invalid:oe,name:K,registerOptionLabel:Kt,getOptionLabel:Bt,collection:qt,children:[o??(0,L.jsx)(it,{options:f??[],renderOption:n,renderValue:d,placeholder:c,passThrough:Ct}),(0,L.jsx)(dt.MirroredValues,{name:K,values:pe,required:M,disabled:P,form:H,autoComplete:vt,singleValued:!a,controlRef:de})]})})});gt.displayName="Select";var ht=h(require("react"),1),It=require("../utils/part.cjs"),Pt=require("../utils/primitive.cjs"),xt=require("react/jsx-runtime"),bt=ht.forwardRef((t,o)=>(0,xt.jsx)(Pt.Primitive.div,{"aria-hidden":!0,...t,...(0,It.skdxPart)("select","separator",t.className),ref:o}));bt.displayName="SelectSeparator";0&&(module.exports={OPTION_SELECTOR,Select,SelectContent,SelectGroup,SelectGroupProvider,SelectIcon,SelectItem,SelectItemIndicator,SelectItemProvider,SelectItemText,SelectLabel,SelectPortal,SelectProvider,SelectSeparator,SelectTrigger,SelectValue,SelectViewport,useSelectContext,useSelectGroupContext,useSelectItemContext});