@skdx/react 0.26.0 → 0.28.0

package/dist/scroll-area/ScrollAreaCorner.d.ts

@@ -1,12 +1,9 @@
 import * as React from 'react';
 import type { ScrollAreaCornerProps } from './types.js';
 /**
- * The small square filling the gap where a vertical and horizontal
- * `ScrollAreaScrollbar` meet. Renders `<div data-skdx-scroll-area-corner>`,
- * or `null` when both scrollbars aren't simultaneously enabled — unless
- * `forceMount` is set, which is what an always-visible scrollbar pair
- * (`forceMount` on both `ScrollAreaScrollbar`s) needs to avoid an unfilled
- * notch where they meet.
+ * Corner square where scrollbars meet. Renders only if both enabled or
+ * `forceMount` set. `aria-hidden="true"` — custom skins; scrolling announced
+ * through viewport.
  *
  * @example
  * ```tsx

package/dist/scroll-area/ScrollAreaScrollbar.d.cts

@@ -3,12 +3,9 @@ import type { ScrollAreaScrollbarProps } from './types.cjs';
 /** @internal Provides the current scrollbar's axis to descendant parts (e.g. `ScrollAreaThumb`). */
 export declare const ScrollbarOrientationContext: React.Context<"horizontal" | "vertical">;
 /**
- * A scrollbar track for one axis. Renders `<div data-skdx-scroll-area-scrollbar>`
- * with `data-orientation` (`'vertical'` | `'horizontal'`) and `data-state`
- * (`'visible'` | `'hidden'`, driven by the parent `ScrollArea`'s `type`).
- * Returns `null` when that axis doesn't overflow, unless `forceMount` is set.
- * Clicking the track (not the thumb) pages the viewport by one client size
- * towards the click.
+ * Scrollbar track for one axis. Renders hidden when that axis doesn't overflow,
+ * unless `forceMount` or `type="always"`. Track clicks page the viewport.
+ * `aria-hidden` because the platform already exposes the scrolling mechanism.
  *
  * @example
  * ```tsx

package/dist/scroll-area/ScrollAreaScrollbar.d.ts

@@ -3,12 +3,9 @@ import type { ScrollAreaScrollbarProps } from './types.js';
 /** @internal Provides the current scrollbar's axis to descendant parts (e.g. `ScrollAreaThumb`). */
 export declare const ScrollbarOrientationContext: React.Context<"horizontal" | "vertical">;
 /**
- * A scrollbar track for one axis. Renders `<div data-skdx-scroll-area-scrollbar>`
- * with `data-orientation` (`'vertical'` | `'horizontal'`) and `data-state`
- * (`'visible'` | `'hidden'`, driven by the parent `ScrollArea`'s `type`).
- * Returns `null` when that axis doesn't overflow, unless `forceMount` is set.
- * Clicking the track (not the thumb) pages the viewport by one client size
- * towards the click.
+ * Scrollbar track for one axis. Renders hidden when that axis doesn't overflow,
+ * unless `forceMount` or `type="always"`. Track clicks page the viewport.
+ * `aria-hidden` because the platform already exposes the scrolling mechanism.
  *
  * @example
  * ```tsx

package/dist/scroll-area/ScrollAreaThumb.d.cts

@@ -1,11 +1,9 @@
 import * as React from 'react';
 import type { ScrollAreaThumbProps } from './types.cjs';
 /**
- * The draggable handle inside a {@link ScrollAreaScrollbar}, sized and
- * positioned as a percentage of its track to match the viewport's visible
- * fraction and scroll offset. Renders `<div data-skdx-scroll-area-thumb>`
- * with `data-orientation` inherited from the enclosing scrollbar. Dragging it
- * (pointer capture-based) scrolls the viewport proportionally along that axis.
+ * Draggable handle within a {@link ScrollAreaScrollbar}, sized and positioned
+ * as a percentage of its track. Pointer capture-based drag scrolls the viewport
+ * proportionally. Renders `<div data-skdx-scroll-area-thumb>` with `aria-hidden="true"`.
  *
  * @example
  * ```tsx

package/dist/scroll-area/ScrollAreaThumb.d.ts

@@ -1,11 +1,9 @@
 import * as React from 'react';
 import type { ScrollAreaThumbProps } from './types.js';
 /**
- * The draggable handle inside a {@link ScrollAreaScrollbar}, sized and
- * positioned as a percentage of its track to match the viewport's visible
- * fraction and scroll offset. Renders `<div data-skdx-scroll-area-thumb>`
- * with `data-orientation` inherited from the enclosing scrollbar. Dragging it
- * (pointer capture-based) scrolls the viewport proportionally along that axis.
+ * Draggable handle within a {@link ScrollAreaScrollbar}, sized and positioned
+ * as a percentage of its track. Pointer capture-based drag scrolls the viewport
+ * proportionally. Renders `<div data-skdx-scroll-area-thumb>` with `aria-hidden="true"`.
  *
  * @example
  * ```tsx

package/dist/scroll-area/ScrollAreaViewport.d.cts

@@ -1,18 +1,16 @@
 import * as React from 'react';
 import type { ScrollAreaViewportProps } from './types.cjs';
 /**
- * The natively-scrollable region (`overflow: auto`) that renders `children`.
- * Wraps them in an inner `<div data-skdx-scroll-area-content>` used to measure
- * content size, and watches both elements with a `ResizeObserver` to keep
- * `ScrollArea`'s scrollbar-enabled flags current. Sets `data-skdx-scroll-area-viewport`
- * on the scrollable element and flips {@link ScrollAreaContextValue.scrolling}
- * true for the root's `scrollHideDelay` (600ms by default) after each scroll
- * event (used to drive `type="scroll"` visibility).
+ * Native scrollable region: `overflow: auto`, wraps content in measurable `<div>`,
+ * watches both with `ResizeObserver`. Tab-stop with `tabIndex={0}` for arrow-key scrolling.
+ *
+ * Pass `aria-label` / `aria-labelledby` to emit `role="region"` with that name;
+ * neither → role-less generic (unnamed region is dropped from landmarks).
  *
  * @example
  * ```tsx
  * <ScrollArea>
- *   <ScrollAreaViewport>{children}</ScrollAreaViewport>
+ *   <ScrollAreaViewport aria-label="Release notes">{children}</ScrollAreaViewport>
  * </ScrollArea>
  * ```
  */

package/dist/scroll-area/ScrollAreaViewport.d.ts

@@ -1,18 +1,16 @@
 import * as React from 'react';
 import type { ScrollAreaViewportProps } from './types.js';
 /**
- * The natively-scrollable region (`overflow: auto`) that renders `children`.
- * Wraps them in an inner `<div data-skdx-scroll-area-content>` used to measure
- * content size, and watches both elements with a `ResizeObserver` to keep
- * `ScrollArea`'s scrollbar-enabled flags current. Sets `data-skdx-scroll-area-viewport`
- * on the scrollable element and flips {@link ScrollAreaContextValue.scrolling}
- * true for the root's `scrollHideDelay` (600ms by default) after each scroll
- * event (used to drive `type="scroll"` visibility).
+ * Native scrollable region: `overflow: auto`, wraps content in measurable `<div>`,
+ * watches both with `ResizeObserver`. Tab-stop with `tabIndex={0}` for arrow-key scrolling.
+ *
+ * Pass `aria-label` / `aria-labelledby` to emit `role="region"` with that name;
+ * neither → role-less generic (unnamed region is dropped from landmarks).
  *
  * @example
  * ```tsx
  * <ScrollArea>
- *   <ScrollAreaViewport>{children}</ScrollAreaViewport>
+ *   <ScrollAreaViewport aria-label="Release notes">{children}</ScrollAreaViewport>
  * </ScrollArea>
  * ```
  */

package/dist/scroll-area/index.d.cts

@@ -1,6 +1,2 @@
-export * from './ScrollArea.cjs';
-export { ScrollAreaViewport } from './ScrollAreaViewport.cjs';
-export { ScrollAreaScrollbar } from './ScrollAreaScrollbar.cjs';
-export { ScrollAreaThumb } from './ScrollAreaThumb.cjs';
-export { ScrollAreaCorner } from './ScrollAreaCorner.cjs';
-export type { ScrollAreaProps, ScrollAreaViewportProps, ScrollAreaScrollbarProps, ScrollAreaThumbProps, ScrollAreaCornerProps, } from './types.cjs';
+export { ScrollArea, useScrollAreaContext } from './ScrollArea.cjs';
+export type { ScrollAreaProps, ScrollAreaOverflow, ScrollAreaScrollPosition, ScrollAreaScrollToOptions, } from './types.cjs';

package/dist/scroll-area/index.d.ts

@@ -1,6 +1,2 @@
-export * from './ScrollArea.js';
-export { ScrollAreaViewport } from './ScrollAreaViewport.js';
-export { ScrollAreaScrollbar } from './ScrollAreaScrollbar.js';
-export { ScrollAreaThumb } from './ScrollAreaThumb.js';
-export { ScrollAreaCorner } from './ScrollAreaCorner.js';
-export type { ScrollAreaProps, ScrollAreaViewportProps, ScrollAreaScrollbarProps, ScrollAreaThumbProps, ScrollAreaCornerProps, } from './types.js';
+export { ScrollArea, useScrollAreaContext } from './ScrollArea.js';
+export type { ScrollAreaProps, ScrollAreaOverflow, ScrollAreaScrollPosition, ScrollAreaScrollToOptions, } from './types.js';

package/dist/scroll-area/primitives.d.cts

@@ -0,0 +1,22 @@
+/**
+ * Advanced primitives for `ScrollArea` — the parts the recipe composes.
+ *
+ * @example
+ * ```tsx
+ * import { ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from '@skdx/react/primitives/scroll-area';
+ *
+ * <ScrollAreaRoot style={{ height: 200 }}>
+ *   <ScrollAreaViewport aria-label="Release notes">Long content…</ScrollAreaViewport>
+ *   <ScrollAreaScrollbar orientation="vertical">
+ *     <ScrollAreaThumb />
+ *   </ScrollAreaScrollbar>
+ *   <ScrollAreaCorner />
+ * </ScrollAreaRoot>
+ * ```
+ */
+export { ScrollAreaRoot } from './ScrollArea.cjs';
+export { ScrollAreaViewport } from './ScrollAreaViewport.cjs';
+export { ScrollAreaScrollbar } from './ScrollAreaScrollbar.cjs';
+export { ScrollAreaThumb } from './ScrollAreaThumb.cjs';
+export { ScrollAreaCorner } from './ScrollAreaCorner.cjs';
+export type { ScrollAreaRootProps, ScrollAreaViewportProps, ScrollAreaScrollbarProps, ScrollAreaThumbProps, ScrollAreaCornerProps, } from './types.cjs';

package/dist/scroll-area/primitives.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Advanced primitives for `ScrollArea` — the parts the recipe composes.
+ *
+ * @example
+ * ```tsx
+ * import { ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from '@skdx/react/primitives/scroll-area';
+ *
+ * <ScrollAreaRoot style={{ height: 200 }}>
+ *   <ScrollAreaViewport aria-label="Release notes">Long content…</ScrollAreaViewport>
+ *   <ScrollAreaScrollbar orientation="vertical">
+ *     <ScrollAreaThumb />
+ *   </ScrollAreaScrollbar>
+ *   <ScrollAreaCorner />
+ * </ScrollAreaRoot>
+ * ```
+ */
+export { ScrollAreaRoot } from './ScrollArea.js';
+export { ScrollAreaViewport } from './ScrollAreaViewport.js';
+export { ScrollAreaScrollbar } from './ScrollAreaScrollbar.js';
+export { ScrollAreaThumb } from './ScrollAreaThumb.js';
+export { ScrollAreaCorner } from './ScrollAreaCorner.js';
+export type { ScrollAreaRootProps, ScrollAreaViewportProps, ScrollAreaScrollbarProps, ScrollAreaThumbProps, ScrollAreaCornerProps, } from './types.js';

package/dist/scroll-area/types.d.cts

@@ -2,6 +2,18 @@ import type * as React from 'react';
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
 /** Controls when the custom {@link ScrollAreaScrollbar} is shown, mirroring the CSS `overflow` keywords. */
 export type ScrollAreaType = 'auto' | 'always' | 'hover' | 'scroll';
+/**
+ * Overflow state published as `data-overflow-x` / `data-overflow-y` on root.
+ * Logical (RTL-aware): none/start/end/both.
+ */
+export type ScrollAreaOverflow = 'none' | 'start' | 'end' | 'both';
+/** The scroll position a ScrollArea reports through `onScrollPositionChange`. */
+export interface ScrollAreaScrollPosition {
+    /** The viewport's `scrollLeft`. Negative in an RTL scroll container, exactly as the platform reports it. */
+    x: number;
+    /** The viewport's `scrollTop`. */
+    y: number;
+}
 /** @internal Shared state distributed from {@link ScrollArea} to its parts via context. Not part of the public API. */
 export interface ScrollAreaContextValue {
     type: ScrollAreaType;
@@ -15,16 +27,33 @@ export interface ScrollAreaContextValue {
     scrolling: boolean;
     setScrolling: (scrolling: boolean) => void;
     scrollHideDelay: number;
+    /** Reports a new scroll position from the Viewport to the root, which forwards it to `onScrollPositionChange`. */
+    reportScrollPosition: (position: ScrollAreaScrollPosition, overflow: {
+        x: ScrollAreaOverflow;
+        y: ScrollAreaOverflow;
+    }) => void;
+    /**
+     * Scroll the Viewport programmatically.
+     */
+    scrollTo: (options: ScrollAreaScrollToOptions) => void;
+}
+/** Options for the ScrollArea's `scrollTo` method — the subset of `ScrollToOptions` that makes sense here. */
+export interface ScrollAreaScrollToOptions {
+    /** Target `scrollTop`. Omit to leave the block axis where it is. */
+    top?: number;
+    /** Target `scrollLeft`. Omit to leave the inline axis where it is. */
+    left?: number;
+    /**
+     * Whether to animate the scroll.
+     * @default 'auto'
+     */
+    behavior?: 'auto' | 'smooth';
 }
-/** Props for the {@link ScrollArea} root. */
-export interface ScrollAreaProps extends PrimitivePropsWithRef<'div'> {
+/** Props for {@link ScrollAreaRoot}: {@link ScrollAreaProps} minus the derived-anatomy-only `scrollbars`. */
+export interface ScrollAreaRootProps extends PrimitivePropsWithRef<'div'> {
     /**
-     * Mirrors the CSS `overflow` keywords; drives `data-state` (`'visible'` /
-     * `'hidden'`) on {@link ScrollAreaScrollbar} for brand-layer styling.
-     * `'hover'` shows the scrollbar while the pointer is over the area,
-     * `'scroll'` while hovering or actively scrolling, `'always'` shows it
-     * unconditionally, `'auto'` also shows it unconditionally (native overflow
-     * behavior is left to consumer CSS).
+     * When to show scrollbar. `'hover'` while pointer over, `'scroll'` while scrolling,
+     * `'always'` visible, `'auto'` visible only when overflowing.
      * @default 'hover'
      */
     type?: ScrollAreaType;
@@ -35,6 +64,30 @@ export interface ScrollAreaProps extends PrimitivePropsWithRef<'div'> {
      * @default 600
      */
     scrollHideDelay?: number;
+    /**
+     * Fires with viewport `{ x, y }` offsets on every scroll tick. `x` is raw
+     * `scrollLeft` (negative in RTL containers).
+     * @default undefined — no-op if omitted.
+     */
+    onScrollPositionChange?: (position: ScrollAreaScrollPosition) => void;
+}
+/**
+ * Props for the {@link ScrollArea} recipe. `children` is the scrollable user
+ * content, always rendered inside a derived `ScrollAreaViewport` — there is
+ * no manual-composition switch here; reach for `primitives/scroll-area`'s
+ * headless `ScrollAreaRoot` for that.
+ *
+ * `aria-label`/`aria-labelledby`, inherited from {@link ScrollAreaRootProps},
+ * land on the derived Viewport rather than the root: the Viewport is the
+ * scrollable, tabbable element `role="region"` lives on, so it is the one
+ * that needs the name.
+ */
+export interface ScrollAreaProps extends ScrollAreaRootProps {
+    /**
+     * Which derived scrollbar tracks to render.
+     * @default 'both'
+     */
+    scrollbars?: 'vertical' | 'horizontal' | 'both';
 }
 /** Props for {@link ScrollAreaViewport}, the natively-scrollable region that renders the content. */
 export interface ScrollAreaViewportProps extends PrimitivePropsWithRef<'div'> {

package/dist/scroll-area/types.d.ts

@@ -2,6 +2,18 @@ import type * as React from 'react';
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
 /** Controls when the custom {@link ScrollAreaScrollbar} is shown, mirroring the CSS `overflow` keywords. */
 export type ScrollAreaType = 'auto' | 'always' | 'hover' | 'scroll';
+/**
+ * Overflow state published as `data-overflow-x` / `data-overflow-y` on root.
+ * Logical (RTL-aware): none/start/end/both.
+ */
+export type ScrollAreaOverflow = 'none' | 'start' | 'end' | 'both';
+/** The scroll position a ScrollArea reports through `onScrollPositionChange`. */
+export interface ScrollAreaScrollPosition {
+    /** The viewport's `scrollLeft`. Negative in an RTL scroll container, exactly as the platform reports it. */
+    x: number;
+    /** The viewport's `scrollTop`. */
+    y: number;
+}
 /** @internal Shared state distributed from {@link ScrollArea} to its parts via context. Not part of the public API. */
 export interface ScrollAreaContextValue {
     type: ScrollAreaType;
@@ -15,16 +27,33 @@ export interface ScrollAreaContextValue {
     scrolling: boolean;
     setScrolling: (scrolling: boolean) => void;
     scrollHideDelay: number;
+    /** Reports a new scroll position from the Viewport to the root, which forwards it to `onScrollPositionChange`. */
+    reportScrollPosition: (position: ScrollAreaScrollPosition, overflow: {
+        x: ScrollAreaOverflow;
+        y: ScrollAreaOverflow;
+    }) => void;
+    /**
+     * Scroll the Viewport programmatically.
+     */
+    scrollTo: (options: ScrollAreaScrollToOptions) => void;
+}
+/** Options for the ScrollArea's `scrollTo` method — the subset of `ScrollToOptions` that makes sense here. */
+export interface ScrollAreaScrollToOptions {
+    /** Target `scrollTop`. Omit to leave the block axis where it is. */
+    top?: number;
+    /** Target `scrollLeft`. Omit to leave the inline axis where it is. */
+    left?: number;
+    /**
+     * Whether to animate the scroll.
+     * @default 'auto'
+     */
+    behavior?: 'auto' | 'smooth';
 }
-/** Props for the {@link ScrollArea} root. */
-export interface ScrollAreaProps extends PrimitivePropsWithRef<'div'> {
+/** Props for {@link ScrollAreaRoot}: {@link ScrollAreaProps} minus the derived-anatomy-only `scrollbars`. */
+export interface ScrollAreaRootProps extends PrimitivePropsWithRef<'div'> {
     /**
-     * Mirrors the CSS `overflow` keywords; drives `data-state` (`'visible'` /
-     * `'hidden'`) on {@link ScrollAreaScrollbar} for brand-layer styling.
-     * `'hover'` shows the scrollbar while the pointer is over the area,
-     * `'scroll'` while hovering or actively scrolling, `'always'` shows it
-     * unconditionally, `'auto'` also shows it unconditionally (native overflow
-     * behavior is left to consumer CSS).
+     * When to show scrollbar. `'hover'` while pointer over, `'scroll'` while scrolling,
+     * `'always'` visible, `'auto'` visible only when overflowing.
      * @default 'hover'
      */
     type?: ScrollAreaType;
@@ -35,6 +64,30 @@ export interface ScrollAreaProps extends PrimitivePropsWithRef<'div'> {
      * @default 600
      */
     scrollHideDelay?: number;
+    /**
+     * Fires with viewport `{ x, y }` offsets on every scroll tick. `x` is raw
+     * `scrollLeft` (negative in RTL containers).
+     * @default undefined — no-op if omitted.
+     */
+    onScrollPositionChange?: (position: ScrollAreaScrollPosition) => void;
+}
+/**
+ * Props for the {@link ScrollArea} recipe. `children` is the scrollable user
+ * content, always rendered inside a derived `ScrollAreaViewport` — there is
+ * no manual-composition switch here; reach for `primitives/scroll-area`'s
+ * headless `ScrollAreaRoot` for that.
+ *
+ * `aria-label`/`aria-labelledby`, inherited from {@link ScrollAreaRootProps},
+ * land on the derived Viewport rather than the root: the Viewport is the
+ * scrollable, tabbable element `role="region"` lives on, so it is the one
+ * that needs the name.
+ */
+export interface ScrollAreaProps extends ScrollAreaRootProps {
+    /**
+     * Which derived scrollbar tracks to render.
+     * @default 'both'
+     */
+    scrollbars?: 'vertical' | 'horizontal' | 'both';
 }
 /** Props for {@link ScrollAreaViewport}, the natively-scrollable region that renders the content. */
 export interface ScrollAreaViewportProps extends PrimitivePropsWithRef<'div'> {

package/dist/segmented-control/SegmentedControl.cjs

@@ -1 +1 @@
-"use strict";var _=Object.create;var h=Object.defineProperty;var G=Object.getOwnPropertyDescriptor;var J=Object.getOwnPropertyNames;var Q=Object.getPrototypeOf,U=Object.prototype.hasOwnProperty;var X=(e,n)=>{for(var o in n)h(e,o,{get:n[o],enumerable:!0})},L=(e,n,o,r)=>{if(n&&typeof n=="object"||typeof n=="function")for(let t of J(n))!U.call(e,t)&&t!==o&&h(e,t,{get:()=>n[t],enumerable:!(r=G(n,t))||r.enumerable});return e};var E=(e,n,o)=>(o=e!=null?_(Q(e)):{},L(n||!e||!e.__esModule?h(o,"default",{value:e,enumerable:!0}):o,e)),Y=e=>L(h({},"__esModule",{value:!0}),e);var j={};X(j,{SegmentedControl:()=>k,SegmentedControlIndicator:()=>I,SegmentedControlItem:()=>w});module.exports=Y(j);var i=E(require("react"),1),$=require("../utils/composeRefs.cjs"),D=require("../utils/createContext.cjs"),H=require("../utils/part.cjs"),v=require("../utils/primitive.cjs"),M=require("../utils/useControllableState.cjs"),N=require("../utils/useRovingFocus.cjs"),P=require("react/jsx-runtime"),x="[data-skdx-segmented-control-item]",[Z,y]=(0,D.createSafeContext)("SegmentedControl"),k=i.forwardRef(({value:e,defaultValue:n,onValueChange:o,orientation:r="horizontal",disabled:t=!1,...d},s)=>{let[a,m]=(0,M.useControllableState)({prop:e,defaultProp:n,onChange:o}),c=i.useRef(null),b=(0,$.useComposedRefs)(s,c),f=(0,N.useRovingFocus)({orientation:r,loop:!1,itemSelector:x}),[p,S]=i.useState(null);return i.useLayoutEffect(()=>{if(a!==void 0)return;let u=c.current?.querySelector(`${x}:not([disabled])`);S(u?.getAttribute("data-value")??null)},[a]),(0,P.jsx)(Z,{value:a,orientation:r,disabled:t,firstEnabledValue:p,onValueChange:m,rootRef:c,children:(0,P.jsx)(v.Primitive.div,{role:"radiogroup","aria-orientation":r,"aria-disabled":t||void 0,"data-orientation":r,"data-disabled":t?"":void 0,...d,...(0,H.skdxPart)("segmented-control","root",d.className),ref:b,onKeyDown:(0,v.composeEventHandlers)(d.onKeyDown,u=>{t||f(u)})})})});k.displayName="SegmentedControl";var l=E(require("react"),1),B=require("../utils/composeRefs.cjs"),K=require("../utils/part.cjs"),O=require("../utils/primitive.cjs");var F=require("react/jsx-runtime"),I=l.forwardRef((e,n)=>{let{value:o,orientation:r,rootRef:t}=y("SegmentedControlIndicator"),d=l.useRef(null),s=(0,B.useComposedRefs)(n,d),[a,m]=l.useState(null),c=l.useRef(null);l.useLayoutEffect(()=>{let f=t.current??d.current?.closest('[role="radiogroup"]');if(!f)return;let p=f.querySelector(`${x}[data-state="checked"]`);if(!p){c.current=null,m(null);return}let S=()=>{let R=p.getBoundingClientRect(),T=f.getBoundingClientRect(),C={x:R.left-T.left,y:R.top-T.top,width:R.width,height:R.height},V=`${C.x},${C.y},${C.width},${C.height}`;c.current!==V&&(c.current=V,m(C))};if(S(),typeof ResizeObserver>"u")return;let u=new ResizeObserver(S);return u.observe(f),u.observe(p),()=>u.disconnect()},[o,r,t]);let b=a?{"--skdx-segmented-control-x":`${a.x}px`,"--skdx-segmented-control-width":`${a.width}px`,...r==="vertical"&&{"--skdx-segmented-control-y":`${a.y}px`,"--skdx-segmented-control-height":`${a.height}px`}}:{};return(0,F.jsx)(O.Primitive.div,{"aria-hidden":"true","data-orientation":r,"data-state":a?"visible":"hidden",...e,...(0,K.skdxPart)("segmented-control","indicator",e.className),ref:s,style:{...b,...e.style}})});I.displayName="SegmentedControlIndicator";var z=E(require("react"),1),q=require("../utils/part.cjs"),g=require("../utils/primitive.cjs"),A=require("../utils/useRovingFocus.cjs");var W=require("react/jsx-runtime"),w=z.forwardRef(({value:e,disabled:n,...o},r)=>{let t=y("SegmentedControlItem"),d=t.value===e,s=t.disabled||n||!1,a=d||t.value===void 0&&t.firstEnabledValue===e;return(0,W.jsx)(g.Primitive.button,{type:"button",role:"radio","aria-checked":d,"aria-disabled":s||void 0,"data-skdx-segmented-control-item":"","data-state":d?"checked":"unchecked","data-disabled":s?"":void 0,"data-value":e,disabled:s,tabIndex:(0,A.rovingTabIndex)(t.value!==void 0||t.firstEnabledValue!==null,a,s),...o,...(0,q.skdxPart)("segmented-control","item",o.className),ref:r,onClick:(0,g.composeEventHandlers)(o.onClick,()=>{d||t.onValueChange(e)}),onFocus:(0,g.composeEventHandlers)(o.onFocus,()=>{d||t.onValueChange(e)}),onKeyDown:(0,g.composeEventHandlers)(o.onKeyDown,m=>{m.key==="Enter"&&m.preventDefault()})})});w.displayName="SegmentedControlItem";0&&(module.exports={SegmentedControl,SegmentedControlIndicator,SegmentedControlItem});
+"use strict";var ne=Object.create;var T=Object.defineProperty;var re=Object.getOwnPropertyDescriptor;var ae=Object.getOwnPropertyNames;var le=Object.getPrototypeOf,ie=Object.prototype.hasOwnProperty;var de=(t,o)=>{for(var n in o)T(t,n,{get:o[n],enumerable:!0})},F=(t,o,n,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of ae(o))!ie.call(t,e)&&e!==n&&T(t,e,{get:()=>o[e],enumerable:!(r=re(o,e))||r.enumerable});return t};var O=(t,o,n)=>(n=t!=null?ne(le(t)):{},F(o||!t||!t.__esModule?T(n,"default",{value:t,enumerable:!0}):n,t)),se=t=>F(T({},"__esModule",{value:!0}),t);var ue={};de(ue,{ITEM_SELECTOR:()=>k,SegmentedControl:()=>$,SegmentedControlIndicator:()=>w,SegmentedControlItem:()=>D,SegmentedControlProvider:()=>X,useSegmentedControlContext:()=>P});module.exports=se(ue);var m=O(require("react"),1),U=require("../utils/createContext.cjs"),L=require("../utils/formControl.cjs"),G=require("../utils/part.cjs"),M=require("../utils/primitive.cjs"),J=require("../utils/useControllableState.cjs"),Q=require("../utils/useRovingFocus.cjs");var g=O(require("react"),1),N=require("../utils/composeRefs.cjs"),q=require("../utils/part.cjs"),B=require("../utils/primitive.cjs");var K=require("react/jsx-runtime"),w=g.forwardRef((t,o)=>{let{value:n,orientation:r,rootRef:e}=P("SegmentedControlIndicator"),l=g.useRef(null),i=(0,N.useComposedRefs)(o,l),[u,c]=g.useState(null),d=g.useRef(null);g.useLayoutEffect(()=>{let f=e.current??l.current?.closest('[role="radiogroup"]');if(!f)return;let h=f.querySelector(`${k}[data-state="checked"]`);if(!h){d.current=null,c(null);return}let I=()=>{let b=h.getBoundingClientRect(),v=f.getBoundingClientRect(),s={x:b.left-v.left,y:b.top-v.top,width:b.width,height:b.height},E=`${s.x},${s.y},${s.width},${s.height}`;d.current!==E&&(d.current=E,c(s))};if(I(),typeof ResizeObserver>"u")return;let C=new ResizeObserver(I);return C.observe(f),C.observe(h),()=>C.disconnect()},[n,r,e]);let a=u?{"--skdx-segmented-control-x":`${u.x}px`,"--skdx-segmented-control-width":`${u.width}px`,...r==="vertical"&&{"--skdx-segmented-control-y":`${u.y}px`,"--skdx-segmented-control-height":`${u.height}px`}}:{};return(0,K.jsx)(B.Primitive.div,{"aria-hidden":"true","data-orientation":r,"data-state":u?"visible":"hidden",...t,...(0,q.skdxPart)("segmented-control","indicator",t.className),ref:i,style:{...a,...t.style}})});w.displayName="SegmentedControlIndicator";var V=O(require("react"),1),A=require("../utils/hiddenInput.cjs"),_=require("../utils/part.cjs"),p=require("../utils/primitive.cjs"),z=require("../utils/useRovingFocus.cjs");var y=require("react/jsx-runtime"),D=V.forwardRef(({value:t,disabled:o,...n},r)=>{let e=P("SegmentedControlItem"),l=e.value===t,i=e.disabled||o||!1,u=l||e.value===void 0&&e.firstEnabledValue===t,c=V.useRef(!1),d=a=>{e.readOnly||l||e.onValueChange(t,a)};return(0,y.jsxs)(y.Fragment,{children:[(0,y.jsx)(p.Primitive.button,{type:"button",role:"radio","aria-checked":l,"aria-disabled":i||void 0,"data-skdx-segmented-control-item":"","data-state":l?"checked":"unchecked","data-disabled":i?"":void 0,"data-value":t,tabIndex:(0,z.rovingTabIndex)(e.value!==void 0||e.firstEnabledValue!==null,u&&!e.disabled,i),...n,...(0,_.skdxPart)("segmented-control","item",n.className),ref:r,onClick:(0,p.composeEventHandlers)(n.onClick,()=>{i||d("pointer")}),onPointerDown:(0,p.composeEventHandlers)(n.onPointerDown,()=>{c.current=!0}),onBlur:(0,p.composeEventHandlers)(n.onBlur,()=>{c.current=!1}),onFocus:(0,p.composeEventHandlers)(n.onFocus,a=>{if(i||!e.selectOnFocus)return;if(c.current){d("pointer");return}let f=a.relatedTarget;f?.getAttribute("role")==="radio"&&f.closest('[role="radiogroup"]')===a.currentTarget.closest('[role="radiogroup"]')&&d("keyboard")}),onKeyDown:(0,p.composeEventHandlers)(n.onKeyDown,a=>{i||(a.key==="Enter"?(a.preventDefault(),e.selectOnFocus||d("keyboard")):a.key===" "&&!e.selectOnFocus&&(a.preventDefault(),d("keyboard")))})}),e.name&&(0,y.jsx)(A.HiddenInput,{type:"radio",name:e.name,value:t,form:e.form,checked:l,required:e.required,disabled:i})]})});D.displayName="SegmentedControlItem";var R=require("react/jsx-runtime"),W=({options:t=[]})=>(0,R.jsxs)(R.Fragment,{children:[(0,R.jsx)(w,{}),t.map(o=>(0,R.jsx)(D,{value:o.value,disabled:o.disabled,children:o.label},o.value))]});var H=require("react/jsx-runtime"),k="[data-skdx-segmented-control-item]",me='input[type="radio"]',[X,P]=(0,U.createSafeContext)("SegmentedControl"),$=m.forwardRef(({value:t,defaultValue:o,onValueChange:n,orientation:r="horizontal",disabled:e=!1,readOnly:l=!1,invalid:i=!1,name:u,form:c,required:d=!1,selectOnFocus:a=!0,loop:f=!1,options:h,children:I,...C},b)=>{let v=m.useRef({previousValue:null,reason:"programmatic"}),[s,E]=(0,J.useControllableState)({prop:t,defaultProp:o,onChange:S=>{n?.({value:S,...v.current})}}),x=m.useRef(null),Y=(0,Q.useRovingFocus)({orientation:r,loop:f,itemSelector:k,includeDisabled:!0}),[Z,j]=m.useState(null),ee=m.useMemo(()=>({get current(){return x.current?.querySelector(me)??null}}),[]);(0,L.useFormValidityHandle)(b,x,ee);let te=(S,oe)=>{v.current={previousValue:s??null,reason:oe},E(S)};return(0,L.useFormReset)(x,()=>{v.current={previousValue:s??null,reason:"programmatic"},E(o)},c),m.useLayoutEffect(()=>{if(s!==void 0)return;let S=x.current?.querySelector(`${k}:not([data-disabled])`);j(S?.getAttribute("data-value")??null)},[s]),(0,H.jsx)(X,{value:s,orientation:r,disabled:e,readOnly:l,firstEnabledValue:Z,name:u,form:c,required:d,selectOnFocus:a,onValueChange:te,rootRef:x,children:(0,H.jsx)(M.Primitive.div,{role:"radiogroup","aria-orientation":r,"aria-disabled":e||void 0,"aria-readonly":l||void 0,"aria-invalid":i||void 0,"aria-required":d||void 0,"data-orientation":r,"data-disabled":e?"":void 0,"data-readonly":l?"":void 0,"data-invalid":i?"":void 0,...C,...(0,G.skdxPart)("segmented-control","root",C.className),ref:x,onKeyDown:(0,M.composeEventHandlers)(C.onKeyDown,S=>{e||Y(S)}),children:I??(0,H.jsx)(W,{options:h})})})});$.displayName="SegmentedControl";0&&(module.exports={ITEM_SELECTOR,SegmentedControl,SegmentedControlIndicator,SegmentedControlItem,SegmentedControlProvider,useSegmentedControlContext});

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

@@ -9,38 +9,39 @@ export declare const SegmentedControlProvider: {
     displayName: string;
 }, useSegmentedControlContext: (consumerName: string) => SegmentedControlContextValue;
 /**
- * Root of a segmented control: a strip of mutually exclusive segments with a
- * movable indicator. Renders `role="radiogroup"` with `aria-orientation`,
- * `data-orientation` and `data-disabled`, owns the selected value via
- * `useControllableState`, and hands it to `SegmentedControlItem`s and the
- * `SegmentedControlIndicator` through context.
+ * Mutually exclusive segments with indicator. `role="radiogroup"`, focus and
+ * selection coupled (arrows select). Use for choices (view switcher, plan picker);
+ * ToggleGroup for actions (text alignment). Arrows don't loop by default. Home/End
+ * jump to ends. With `name`, renders hidden radio inputs for form submission.
+ * surrounding `<form>`, `form.reset()` restores `defaultValue`, and `required`
+ * reports `valueMissing` while nothing is picked. The forwarded ref carries
+ * `checkValidity()`/`reportValidity()`/`setCustomValidity()` as well as
+ * everything an `HTMLDivElement` ref already did — type it with
+ * {@link SegmentedControlHandle}.
  *
- * It is a **radio group, not a toggle group**. Every segment is a
- * `role="radio"` with `aria-checked`, exactly one is a tab stop, and arrow keys
- * *move focus and select in the same keystroke* — the WAI-ARIA radio pattern,
- * where focus and selection are not separable. `ToggleGroup type="single"`
- * models pressed *buttons* (`aria-pressed`, every item tabbable via roving
- * focus but selection decoupled from focus) and is the right choice when a
- * segment is an action, e.g. a text-alignment strip. When the segments are
- * mutually exclusive *choices* — a view switcher, a plan picker, a date-range
- * selector — they are radios, and this is the component.
- *
- * Arrow keys **do not loop**: reaching the last segment and pressing again
- * stays put. A looping radio group is a trap for a screen-reader user, who
- * hears the first option again with nothing to say the strip ended — and here
- * looping would also silently re-select it. Home/End jump to the ends.
+ * `selectOnFocus={false}` switches off the focus/selection coupling entirely —
+ * APG's toolbar variant, where arrows move focus and Space or Enter checks.
  *
  * Direction-aware: under `dir="rtl"` ArrowLeft moves to the *next* segment, via
  * `useDirection` inside `useRovingFocus`.
  *
+ * Given no `children` it draws the derived anatomy from `options` — the
+ * `SegmentedControlIndicator`, then one `SegmentedControlItem` per entry. Given children, they are rendered
+ * verbatim for full manual composition. Only presence is inspected, never what
+ * the children are — reach for `@skdx/react/primitives/segmented-control` for
+ * the parts.
+ *
  * @example
  * ```tsx
- * <SegmentedControl defaultValue="week" aria-label="Date range">
- *   <SegmentedControlIndicator />
- *   <SegmentedControlItem value="day">Day</SegmentedControlItem>
- *   <SegmentedControlItem value="week">Week</SegmentedControlItem>
- *   <SegmentedControlItem value="month">Month</SegmentedControlItem>
- * </SegmentedControl>
+ * <SegmentedControl
+ *   defaultValue="week"
+ *   aria-label="Date range"
+ *   options={[
+ *     { value: 'day', label: 'Day' },
+ *     { value: 'week', label: 'Week' },
+ *     { value: 'month', label: 'Month' },
+ *   ]}
+ * />
  * ```
  */
 export declare const SegmentedControl: React.ForwardRefExoticComponent<Omit<SegmentedControlProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -9,38 +9,39 @@ export declare const SegmentedControlProvider: {
     displayName: string;
 }, useSegmentedControlContext: (consumerName: string) => SegmentedControlContextValue;
 /**
- * Root of a segmented control: a strip of mutually exclusive segments with a
- * movable indicator. Renders `role="radiogroup"` with `aria-orientation`,
- * `data-orientation` and `data-disabled`, owns the selected value via
- * `useControllableState`, and hands it to `SegmentedControlItem`s and the
- * `SegmentedControlIndicator` through context.
+ * Mutually exclusive segments with indicator. `role="radiogroup"`, focus and
+ * selection coupled (arrows select). Use for choices (view switcher, plan picker);
+ * ToggleGroup for actions (text alignment). Arrows don't loop by default. Home/End
+ * jump to ends. With `name`, renders hidden radio inputs for form submission.
+ * surrounding `<form>`, `form.reset()` restores `defaultValue`, and `required`
+ * reports `valueMissing` while nothing is picked. The forwarded ref carries
+ * `checkValidity()`/`reportValidity()`/`setCustomValidity()` as well as
+ * everything an `HTMLDivElement` ref already did — type it with
+ * {@link SegmentedControlHandle}.
  *
- * It is a **radio group, not a toggle group**. Every segment is a
- * `role="radio"` with `aria-checked`, exactly one is a tab stop, and arrow keys
- * *move focus and select in the same keystroke* — the WAI-ARIA radio pattern,
- * where focus and selection are not separable. `ToggleGroup type="single"`
- * models pressed *buttons* (`aria-pressed`, every item tabbable via roving
- * focus but selection decoupled from focus) and is the right choice when a
- * segment is an action, e.g. a text-alignment strip. When the segments are
- * mutually exclusive *choices* — a view switcher, a plan picker, a date-range
- * selector — they are radios, and this is the component.
- *
- * Arrow keys **do not loop**: reaching the last segment and pressing again
- * stays put. A looping radio group is a trap for a screen-reader user, who
- * hears the first option again with nothing to say the strip ended — and here
- * looping would also silently re-select it. Home/End jump to the ends.
+ * `selectOnFocus={false}` switches off the focus/selection coupling entirely —
+ * APG's toolbar variant, where arrows move focus and Space or Enter checks.
  *
  * Direction-aware: under `dir="rtl"` ArrowLeft moves to the *next* segment, via
  * `useDirection` inside `useRovingFocus`.
  *
+ * Given no `children` it draws the derived anatomy from `options` — the
+ * `SegmentedControlIndicator`, then one `SegmentedControlItem` per entry. Given children, they are rendered
+ * verbatim for full manual composition. Only presence is inspected, never what
+ * the children are — reach for `@skdx/react/primitives/segmented-control` for
+ * the parts.
+ *
  * @example
  * ```tsx
- * <SegmentedControl defaultValue="week" aria-label="Date range">
- *   <SegmentedControlIndicator />
- *   <SegmentedControlItem value="day">Day</SegmentedControlItem>
- *   <SegmentedControlItem value="week">Week</SegmentedControlItem>
- *   <SegmentedControlItem value="month">Month</SegmentedControlItem>
- * </SegmentedControl>
+ * <SegmentedControl
+ *   defaultValue="week"
+ *   aria-label="Date range"
+ *   options={[
+ *     { value: 'day', label: 'Day' },
+ *     { value: 'week', label: 'Week' },
+ *     { value: 'month', label: 'Month' },
+ *   ]}
+ * />
  * ```
  */
 export declare const SegmentedControl: React.ForwardRefExoticComponent<Omit<SegmentedControlProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/segmented-control/SegmentedControl.js

@@ -1 +1 @@
-import*as s from"react";import{useComposedRefs as T}from"../utils/composeRefs.js";import{createSafeContext as V}from"../utils/createContext.js";import{skdxPart as L}from"../utils/part.js";import{composeEventHandlers as $,Primitive as D}from"../utils/primitive.js";import{useControllableState as H}from"../utils/useControllableState.js";import{useRovingFocus as M}from"../utils/useRovingFocus.js";import{jsx as E}from"react/jsx-runtime";var R="[data-skdx-segmented-control-item]",[N,h]=V("SegmentedControl"),P=s.forwardRef(({value:n,defaultValue:f,onValueChange:d,orientation:r="horizontal",disabled:e=!1,...t},l)=>{let[o,i]=H({prop:n,defaultProp:f,onChange:d}),m=s.useRef(null),x=T(l,m),u=M({orientation:r,loop:!1,itemSelector:R}),[g,C]=s.useState(null);return s.useLayoutEffect(()=>{if(o!==void 0)return;let c=m.current?.querySelector(`${R}:not([disabled])`);C(c?.getAttribute("data-value")??null)},[o]),E(N,{value:o,orientation:r,disabled:e,firstEnabledValue:g,onValueChange:i,rootRef:m,children:E(D.div,{role:"radiogroup","aria-orientation":r,"aria-disabled":e||void 0,"data-orientation":r,"data-disabled":e?"":void 0,...t,...L("segmented-control","root",t.className),ref:x,onKeyDown:$(t.onKeyDown,c=>{e||u(c)})})})});P.displayName="SegmentedControl";import*as a from"react";import{useComposedRefs as B}from"../utils/composeRefs.js";import{skdxPart as K}from"../utils/part.js";import{Primitive as O}from"../utils/primitive.js";import{jsx as F}from"react/jsx-runtime";var k=a.forwardRef((n,f)=>{let{value:d,orientation:r,rootRef:e}=h("SegmentedControlIndicator"),t=a.useRef(null),l=B(f,t),[o,i]=a.useState(null),m=a.useRef(null);a.useLayoutEffect(()=>{let u=e.current??t.current?.closest('[role="radiogroup"]');if(!u)return;let g=u.querySelector(`${R}[data-state="checked"]`);if(!g){m.current=null,i(null);return}let C=()=>{let S=g.getBoundingClientRect(),y=u.getBoundingClientRect(),p={x:S.left-y.left,y:S.top-y.top,width:S.width,height:S.height},b=`${p.x},${p.y},${p.width},${p.height}`;m.current!==b&&(m.current=b,i(p))};if(C(),typeof ResizeObserver>"u")return;let c=new ResizeObserver(C);return c.observe(u),c.observe(g),()=>c.disconnect()},[d,r,e]);let x=o?{"--skdx-segmented-control-x":`${o.x}px`,"--skdx-segmented-control-width":`${o.width}px`,...r==="vertical"&&{"--skdx-segmented-control-y":`${o.y}px`,"--skdx-segmented-control-height":`${o.height}px`}}:{};return F(O.div,{"aria-hidden":"true","data-orientation":r,"data-state":o?"visible":"hidden",...n,...K("segmented-control","indicator",n.className),ref:l,style:{...x,...n.style}})});k.displayName="SegmentedControlIndicator";import*as I from"react";import{skdxPart as z}from"../utils/part.js";import{composeEventHandlers as v,Primitive as q}from"../utils/primitive.js";import{rovingTabIndex as A}from"../utils/useRovingFocus.js";import{jsx as W}from"react/jsx-runtime";var w=I.forwardRef(({value:n,disabled:f,...d},r)=>{let e=h("SegmentedControlItem"),t=e.value===n,l=e.disabled||f||!1,o=t||e.value===void 0&&e.firstEnabledValue===n;return W(q.button,{type:"button",role:"radio","aria-checked":t,"aria-disabled":l||void 0,"data-skdx-segmented-control-item":"","data-state":t?"checked":"unchecked","data-disabled":l?"":void 0,"data-value":n,disabled:l,tabIndex:A(e.value!==void 0||e.firstEnabledValue!==null,o,l),...d,...z("segmented-control","item",d.className),ref:r,onClick:v(d.onClick,()=>{t||e.onValueChange(n)}),onFocus:v(d.onFocus,()=>{t||e.onValueChange(n)}),onKeyDown:v(d.onKeyDown,i=>{i.key==="Enter"&&i.preventDefault()})})});w.displayName="SegmentedControlItem";export{P as SegmentedControl,k as SegmentedControlIndicator,w as SegmentedControlItem};
+import*as s from"react";import{createSafeContext as Z}from"../utils/createContext.js";import{useFormReset as j,useFormValidityHandle as ee}from"../utils/formControl.js";import{skdxPart as te}from"../utils/part.js";import{composeEventHandlers as oe,Primitive as ne}from"../utils/primitive.js";import{useControllableState as re}from"../utils/useControllableState.js";import{useRovingFocus as ae}from"../utils/useRovingFocus.js";import*as g from"react";import{useComposedRefs as B}from"../utils/composeRefs.js";import{skdxPart as K}from"../utils/part.js";import{Primitive as A}from"../utils/primitive.js";import{jsx as _}from"react/jsx-runtime";var I=g.forwardRef((t,l)=>{let{value:i,orientation:m,rootRef:e}=k("SegmentedControlIndicator"),n=g.useRef(null),r=B(l,n),[u,c]=g.useState(null),a=g.useRef(null);g.useLayoutEffect(()=>{let f=e.current??n.current?.closest('[role="radiogroup"]');if(!f)return;let S=f.querySelector(`${E}[data-state="checked"]`);if(!S){a.current=null,c(null);return}let x=()=>{let y=S.getBoundingClientRect(),R=f.getBoundingClientRect(),d={x:y.left-R.left,y:y.top-R.top,width:y.width,height:y.height},b=`${d.x},${d.y},${d.width},${d.height}`;a.current!==b&&(a.current=b,c(d))};if(x(),typeof ResizeObserver>"u")return;let p=new ResizeObserver(x);return p.observe(f),p.observe(S),()=>p.disconnect()},[i,m,e]);let o=u?{"--skdx-segmented-control-x":`${u.x}px`,"--skdx-segmented-control-width":`${u.width}px`,...m==="vertical"&&{"--skdx-segmented-control-y":`${u.y}px`,"--skdx-segmented-control-height":`${u.height}px`}}:{};return _(A.div,{"aria-hidden":"true","data-orientation":m,"data-state":u?"visible":"hidden",...t,...K("segmented-control","indicator",t.className),ref:r,style:{...o,...t.style}})});I.displayName="SegmentedControlIndicator";import*as P from"react";import{HiddenInput as z}from"../utils/hiddenInput.js";import{skdxPart as W}from"../utils/part.js";import{composeEventHandlers as v,Primitive as U}from"../utils/primitive.js";import{rovingTabIndex as G}from"../utils/useRovingFocus.js";import{Fragment as J,jsx as V,jsxs as Q}from"react/jsx-runtime";var T=P.forwardRef(({value:t,disabled:l,...i},m)=>{let e=k("SegmentedControlItem"),n=e.value===t,r=e.disabled||l||!1,u=n||e.value===void 0&&e.firstEnabledValue===t,c=P.useRef(!1),a=o=>{e.readOnly||n||e.onValueChange(t,o)};return Q(J,{children:[V(U.button,{type:"button",role:"radio","aria-checked":n,"aria-disabled":r||void 0,"data-skdx-segmented-control-item":"","data-state":n?"checked":"unchecked","data-disabled":r?"":void 0,"data-value":t,tabIndex:G(e.value!==void 0||e.firstEnabledValue!==null,u&&!e.disabled,r),...i,...W("segmented-control","item",i.className),ref:m,onClick:v(i.onClick,()=>{r||a("pointer")}),onPointerDown:v(i.onPointerDown,()=>{c.current=!0}),onBlur:v(i.onBlur,()=>{c.current=!1}),onFocus:v(i.onFocus,o=>{if(r||!e.selectOnFocus)return;if(c.current){a("pointer");return}let f=o.relatedTarget;f?.getAttribute("role")==="radio"&&f.closest('[role="radiogroup"]')===o.currentTarget.closest('[role="radiogroup"]')&&a("keyboard")}),onKeyDown:v(i.onKeyDown,o=>{r||(o.key==="Enter"?(o.preventDefault(),e.selectOnFocus||a("keyboard")):o.key===" "&&!e.selectOnFocus&&(o.preventDefault(),a("keyboard")))})}),e.name&&V(z,{type:"radio",name:e.name,value:t,form:e.form,checked:n,required:e.required,disabled:r})]})});T.displayName="SegmentedControlItem";import{Fragment as X,jsx as D,jsxs as Y}from"react/jsx-runtime";var H=({options:t=[]})=>Y(X,{children:[D(I,{}),t.map(l=>D(T,{value:l.value,disabled:l.disabled,children:l.label},l.value))]});import{jsx as w}from"react/jsx-runtime";var E="[data-skdx-segmented-control-item]",le='input[type="radio"]',[ie,k]=Z("SegmentedControl"),L=s.forwardRef(({value:t,defaultValue:l,onValueChange:i,orientation:m="horizontal",disabled:e=!1,readOnly:n=!1,invalid:r=!1,name:u,form:c,required:a=!1,selectOnFocus:o=!0,loop:f=!1,options:S,children:x,...p},y)=>{let R=s.useRef({previousValue:null,reason:"programmatic"}),[d,b]=re({prop:t,defaultProp:l,onChange:C=>{i?.({value:C,...R.current})}}),h=s.useRef(null),M=ae({orientation:m,loop:f,itemSelector:E,includeDisabled:!0}),[O,$]=s.useState(null),F=s.useMemo(()=>({get current(){return h.current?.querySelector(le)??null}}),[]);ee(y,h,F);let N=(C,q)=>{R.current={previousValue:d??null,reason:q},b(C)};return j(h,()=>{R.current={previousValue:d??null,reason:"programmatic"},b(l)},c),s.useLayoutEffect(()=>{if(d!==void 0)return;let C=h.current?.querySelector(`${E}:not([data-disabled])`);$(C?.getAttribute("data-value")??null)},[d]),w(ie,{value:d,orientation:m,disabled:e,readOnly:n,firstEnabledValue:O,name:u,form:c,required:a,selectOnFocus:o,onValueChange:N,rootRef:h,children:w(ne.div,{role:"radiogroup","aria-orientation":m,"aria-disabled":e||void 0,"aria-readonly":n||void 0,"aria-invalid":r||void 0,"aria-required":a||void 0,"data-orientation":m,"data-disabled":e?"":void 0,"data-readonly":n?"":void 0,"data-invalid":r?"":void 0,...p,...te("segmented-control","root",p.className),ref:h,onKeyDown:oe(p.onKeyDown,C=>{e||M(C)}),children:x??w(H,{options:S})})})});L.displayName="SegmentedControl";export{E as ITEM_SELECTOR,L as SegmentedControl,I as SegmentedControlIndicator,T as SegmentedControlItem,ie as SegmentedControlProvider,k as useSegmentedControlContext};

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

@@ -0,0 +1,10 @@
+import type { SegmentedControlOption } from './types.cjs';
+/**
+ * The anatomy a {@link SegmentedControl} draws from `options`: the sliding
+ * `SegmentedControlIndicator`, then one `SegmentedControlItem` per entry.
+ *
+ * @internal
+ */
+export declare const SegmentedControlAnatomy: ({ options, }: {
+    options?: SegmentedControlOption[];
+}) => import("react").JSX.Element;

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

@@ -0,0 +1,10 @@
+import type { SegmentedControlOption } from './types.js';
+/**
+ * The anatomy a {@link SegmentedControl} draws from `options`: the sliding
+ * `SegmentedControlIndicator`, then one `SegmentedControlItem` per entry.
+ *
+ * @internal
+ */
+export declare const SegmentedControlAnatomy: ({ options, }: {
+    options?: SegmentedControlOption[];
+}) => import("react").JSX.Element;