@skdx/react 0.26.0

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

@@ -0,0 +1,17 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <ScrollAreaScrollbar orientation="vertical">
+ *   <ScrollAreaThumb />
+ * </ScrollAreaScrollbar>
+ * ```
+ */
+export declare const ScrollAreaThumb: React.ForwardRefExoticComponent<Omit<ScrollAreaThumbProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,19 @@
+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).
+ *
+ * @example
+ * ```tsx
+ * <ScrollArea>
+ *   <ScrollAreaViewport>{children}</ScrollAreaViewport>
+ * </ScrollArea>
+ * ```
+ */
+export declare const ScrollAreaViewport: React.ForwardRefExoticComponent<Omit<ScrollAreaViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,19 @@
+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).
+ *
+ * @example
+ * ```tsx
+ * <ScrollArea>
+ *   <ScrollAreaViewport>{children}</ScrollAreaViewport>
+ * </ScrollArea>
+ * ```
+ */
+export declare const ScrollAreaViewport: React.ForwardRefExoticComponent<Omit<ScrollAreaViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,6 @@
+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';

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

@@ -0,0 +1,6 @@
+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';

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

@@ -0,0 +1,79 @@
+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';
+/** @internal Shared state distributed from {@link ScrollArea} to its parts via context. Not part of the public API. */
+export interface ScrollAreaContextValue {
+    type: ScrollAreaType;
+    viewportRef: React.RefObject<HTMLDivElement | null>;
+    contentRef: React.RefObject<HTMLDivElement | null>;
+    scrollbarXEnabled: boolean;
+    scrollbarYEnabled: boolean;
+    setScrollbarXEnabled: (enabled: boolean) => void;
+    setScrollbarYEnabled: (enabled: boolean) => void;
+    hovering: boolean;
+    scrolling: boolean;
+    setScrolling: (scrolling: boolean) => void;
+    scrollHideDelay: number;
+}
+/** Props for the {@link ScrollArea} root. */
+export interface ScrollAreaProps 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).
+     * @default 'hover'
+     */
+    type?: ScrollAreaType;
+    /**
+     * How long, in milliseconds, the scrollbar stays visible after scrolling
+     * stops when `type="scroll"`. Only `'scroll'` reads it — `'hover'` is driven
+     * by the pointer, and `'always'`/`'auto'` never hide.
+     * @default 600
+     */
+    scrollHideDelay?: number;
+}
+/** Props for {@link ScrollAreaViewport}, the natively-scrollable region that renders the content. */
+export interface ScrollAreaViewportProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Props for the internal `data-skdx-scroll-area-content` wrapper the children
+     * are measured through — `className`, `style`, `ref`, anything else. Its
+     * `min-width: 100%; display: table` measurement defaults are merged, not
+     * replaced, so yours win: `contentProps={{ style: { display: 'block' } }}`
+     * opts out of the table layout model (at the cost of horizontal overflow
+     * detection, which is what `display: table` is there for).
+     * @default undefined
+     */
+    contentProps?: React.ComponentPropsWithRef<'div'>;
+}
+/** Props for a {@link ScrollAreaScrollbar}, the custom scrollbar track along one axis. */
+export interface ScrollAreaScrollbarProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Which scroll axis this scrollbar controls.
+     * @default 'vertical'
+     */
+    orientation?: 'vertical' | 'horizontal';
+    /**
+     * Render even when the content doesn't overflow in this axis.
+     * @default false
+     */
+    forceMount?: boolean;
+}
+/** Props for the {@link ScrollAreaThumb}, the draggable handle inside a {@link ScrollAreaScrollbar}. */
+export interface ScrollAreaThumbProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Props for the {@link ScrollAreaCorner}, the filler square where horizontal and vertical scrollbars meet. */
+export interface ScrollAreaCornerProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Render even when the content doesn't overflow in both axes. Pair it with
+     * `forceMount` on both {@link ScrollAreaScrollbar}s: an always-visible
+     * scrollbar pair otherwise leaves an unfilled notch where they meet, because
+     * the corner's own render condition is overflow rather than what the
+     * scrollbars did.
+     * @default false
+     */
+    forceMount?: boolean;
+}

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

@@ -0,0 +1,79 @@
+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';
+/** @internal Shared state distributed from {@link ScrollArea} to its parts via context. Not part of the public API. */
+export interface ScrollAreaContextValue {
+    type: ScrollAreaType;
+    viewportRef: React.RefObject<HTMLDivElement | null>;
+    contentRef: React.RefObject<HTMLDivElement | null>;
+    scrollbarXEnabled: boolean;
+    scrollbarYEnabled: boolean;
+    setScrollbarXEnabled: (enabled: boolean) => void;
+    setScrollbarYEnabled: (enabled: boolean) => void;
+    hovering: boolean;
+    scrolling: boolean;
+    setScrolling: (scrolling: boolean) => void;
+    scrollHideDelay: number;
+}
+/** Props for the {@link ScrollArea} root. */
+export interface ScrollAreaProps 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).
+     * @default 'hover'
+     */
+    type?: ScrollAreaType;
+    /**
+     * How long, in milliseconds, the scrollbar stays visible after scrolling
+     * stops when `type="scroll"`. Only `'scroll'` reads it — `'hover'` is driven
+     * by the pointer, and `'always'`/`'auto'` never hide.
+     * @default 600
+     */
+    scrollHideDelay?: number;
+}
+/** Props for {@link ScrollAreaViewport}, the natively-scrollable region that renders the content. */
+export interface ScrollAreaViewportProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Props for the internal `data-skdx-scroll-area-content` wrapper the children
+     * are measured through — `className`, `style`, `ref`, anything else. Its
+     * `min-width: 100%; display: table` measurement defaults are merged, not
+     * replaced, so yours win: `contentProps={{ style: { display: 'block' } }}`
+     * opts out of the table layout model (at the cost of horizontal overflow
+     * detection, which is what `display: table` is there for).
+     * @default undefined
+     */
+    contentProps?: React.ComponentPropsWithRef<'div'>;
+}
+/** Props for a {@link ScrollAreaScrollbar}, the custom scrollbar track along one axis. */
+export interface ScrollAreaScrollbarProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Which scroll axis this scrollbar controls.
+     * @default 'vertical'
+     */
+    orientation?: 'vertical' | 'horizontal';
+    /**
+     * Render even when the content doesn't overflow in this axis.
+     * @default false
+     */
+    forceMount?: boolean;
+}
+/** Props for the {@link ScrollAreaThumb}, the draggable handle inside a {@link ScrollAreaScrollbar}. */
+export interface ScrollAreaThumbProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Props for the {@link ScrollAreaCorner}, the filler square where horizontal and vertical scrollbars meet. */
+export interface ScrollAreaCornerProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Render even when the content doesn't overflow in both axes. Pair it with
+     * `forceMount` on both {@link ScrollAreaScrollbar}s: an always-visible
+     * scrollbar pair otherwise leaves an unfilled notch where they meet, because
+     * the corner's own render condition is overflow rather than what the
+     * scrollbars did.
+     * @default false
+     */
+    forceMount?: boolean;
+}

package/dist/segmented-control/SegmentedControl.cjs

@@ -0,0 +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});

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

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import type { SegmentedControlContextValue, SegmentedControlProps } from './types.cjs';
+/** @internal Marks a segment for roving focus and for the indicator's measurement query. */
+export declare const ITEM_SELECTOR = "[data-skdx-segmented-control-item]";
+export declare const SegmentedControlProvider: {
+    (props: SegmentedControlContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    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.
+ *
+ * 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.
+ *
+ * Direction-aware: under `dir="rtl"` ArrowLeft moves to the *next* segment, via
+ * `useDirection` inside `useRovingFocus`.
+ *
+ * @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>
+ * ```
+ */
+export declare const SegmentedControl: React.ForwardRefExoticComponent<Omit<SegmentedControlProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import type { SegmentedControlContextValue, SegmentedControlProps } from './types.js';
+/** @internal Marks a segment for roving focus and for the indicator's measurement query. */
+export declare const ITEM_SELECTOR = "[data-skdx-segmented-control-item]";
+export declare const SegmentedControlProvider: {
+    (props: SegmentedControlContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    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.
+ *
+ * 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.
+ *
+ * Direction-aware: under `dir="rtl"` ArrowLeft moves to the *next* segment, via
+ * `useDirection` inside `useRovingFocus`.
+ *
+ * @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>
+ * ```
+ */
+export declare const SegmentedControl: React.ForwardRefExoticComponent<Omit<SegmentedControlProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/segmented-control/SegmentedControl.js

@@ -0,0 +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};

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

@@ -0,0 +1,47 @@
+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"`.
+ *
+ * @example
+ * ```tsx
+ * <SegmentedControl defaultValue="week" aria-label="Date range">
+ *   <SegmentedControlIndicator className="my-indicator" />
+ *   <SegmentedControlItem value="day">Day</SegmentedControlItem>
+ *   <SegmentedControlItem value="week">Week</SegmentedControlItem>
+ * </SegmentedControl>
+ * ```
+ */
+export declare const SegmentedControlIndicator: React.ForwardRefExoticComponent<Omit<SegmentedControlIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,47 @@
+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"`.
+ *
+ * @example
+ * ```tsx
+ * <SegmentedControl defaultValue="week" aria-label="Date range">
+ *   <SegmentedControlIndicator className="my-indicator" />
+ *   <SegmentedControlItem value="day">Day</SegmentedControlItem>
+ *   <SegmentedControlItem value="week">Week</SegmentedControlItem>
+ * </SegmentedControl>
+ * ```
+ */
+export declare const SegmentedControlIndicator: React.ForwardRefExoticComponent<Omit<SegmentedControlIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,21 @@
+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.
+ *
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * <SegmentedControl defaultValue="grid" aria-label="View">
+ *   <SegmentedControlItem value="list">List</SegmentedControlItem>
+ *   <SegmentedControlItem value="grid">Grid</SegmentedControlItem>
+ * </SegmentedControl>
+ * ```
+ */
+export declare const SegmentedControlItem: React.ForwardRefExoticComponent<Omit<SegmentedControlItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,21 @@
+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.
+ *
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * <SegmentedControl defaultValue="grid" aria-label="View">
+ *   <SegmentedControlItem value="list">List</SegmentedControlItem>
+ *   <SegmentedControlItem value="grid">Grid</SegmentedControlItem>
+ * </SegmentedControl>
+ * ```
+ */
+export declare const SegmentedControlItem: React.ForwardRefExoticComponent<Omit<SegmentedControlItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

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

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

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

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

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

@@ -0,0 +1,73 @@
+import type * as React from 'react';
+import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+/** 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.
+ */
+export interface SegmentedControlRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/** @internal Shared state distributed from {@link SegmentedControl} to its parts via context. Not part of the public API. */
+export interface SegmentedControlContextValue {
+    value: string | undefined;
+    orientation: SegmentedControlOrientation;
+    disabled: boolean;
+    /** Fallback single tab stop when nothing is selected yet. */
+    firstEnabledValue: string | null;
+    onValueChange: (value: string) => 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'> {
+    /**
+     * Selected segment's value, for controlled usage. Pair with `onValueChange`.
+     * @default undefined — uncontrolled, tracks its own selection internally.
+     */
+    value?: string;
+    /**
+     * Initially selected segment's value, for uncontrolled usage.
+     * @default undefined — nothing is selected, so the first enabled segment
+     * carries the tab stop and the indicator publishes no geometry.
+     */
+    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.
+     * @default undefined — no-op if omitted.
+     */
+    onValueChange?: (value: string) => 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.
+     */
+    orientation?: SegmentedControlOrientation;
+    /**
+     * Disables every segment, blocking selection and taking the whole control out
+     * of the tab order.
+     * @default false
+     */
+    disabled?: boolean;
+}
+/** Props for a single {@link SegmentedControlItem}. */
+export interface SegmentedControlItemProps extends PrimitivePropsWithRef<'button'> {
+    /** Unique identifier compared against the group's selected value. */
+    value: string;
+}
+/**
+ * Props for {@link SegmentedControlIndicator}, the element that slides behind
+ * the selected item. It reads the group's measured geometry from context and
+ * publishes it as CSS custom properties, so the movement itself is one CSS
+ * transition you write rather than any animation this library owns.
+ */
+export interface SegmentedControlIndicatorProps extends PrimitivePropsWithRef<'div'> {
+}