@skdx/react 0.26.0

package/dist/utils/color.js

@@ -0,0 +1 @@
+import{clamp as s}from"./clamp.js";function a(n,r=0){let t=10**r;return Math.round(n*t)/t}function i(n){return(n%360+360)%360}function m(n){return s(Math.round(n),0,255).toString(16).padStart(2,"0")}function M(n,r,t,o,e){if(!e)return 0;let u=o===n?(r-t)/e:o===r?(t-n)/e+2:(n-r)/e+4;return i(u*60)}function R(n,r,t,o,e){let u=Math.floor(i(n)/60)%6,l=[[r,t,0],[t,r,0],[0,r,t],[0,t,r],[t,0,r],[r,0,t]],[c,b,f]=l[u]??[0,0,0];return{r:a((c+o)*255),g:a((b+o)*255),b:a((f+o)*255),a:e}}function T(n,r=!1){let t=`#${m(n.r)}${m(n.g)}${m(n.b)}`;return r?`${t}${m(s(n.a,0,1)*255)}`:t}var v=/^#?([\da-f]{3,8})$/i;function N(n){let r=v.exec(n.trim());if(!r)return null;let t=r[1];if((t.length===3||t.length===4)&&(t=t.split("").map(e=>e+e).join("")),t.length!==6&&t.length!==8)return null;let o=e=>parseInt(t.slice(e,e+2),16);return{r:o(0),g:o(2),b:o(4),a:t.length===8?a(o(6)/255,3):1}}function H(n){let r=s(n.r,0,255)/255,t=s(n.g,0,255)/255,o=s(n.b,0,255)/255,e=Math.max(r,t,o),u=e-Math.min(r,t,o);return{h:M(r,t,o,e,u),s:e?u/e*100:0,b:e*100,a:s(n.a,0,1)}}function x(n){let r=i(n.h),t=s(n.s,0,100)/100,o=s(n.b,0,100)/100,e=o*t,u=e*(1-Math.abs(r/60%2-1));return R(r,e,u,o-e,s(n.a,0,1))}function w(n){let r=s(n.r,0,255)/255,t=s(n.g,0,255)/255,o=s(n.b,0,255)/255,e=Math.max(r,t,o),u=Math.min(r,t,o),l=e-u,c=(e+u)/2,b=l?l/(1-Math.abs(2*c-1)):0;return{h:M(r,t,o,e,l),s:s(b*100,0,100),l:c*100,a:s(n.a,0,1)}}function z(n){let r=i(n.h),t=s(n.s,0,100)/100,o=s(n.l,0,100)/100,e=(1-Math.abs(2*o-1))*t,u=e*(1-Math.abs(r/60%2-1));return R(r,e,u,o-e/2,s(n.a,0,1))}function y(n){let r=s(n.s,0,100)/100,t=s(n.b,0,100)/100,o=t*(1-r/2),e=Math.min(o,1-o);return{h:i(n.h),s:e?(t-o)/e*100:0,l:o*100,a:s(n.a,0,1)}}function F(n){let r=s(n.s,0,100)/100,t=s(n.l,0,100)/100,o=t+r*Math.min(t,1-t);return{h:i(n.h),s:o?2*(1-t/o)*100:0,b:o*100,a:s(n.a,0,1)}}var O=/^(rgba?|hsla?|hsba?|hsva?)\(([^()]*)\)$/;function $(n){if(n===void 0)return null;let r=n.endsWith("%"),t=r?n.slice(0,-1):n.replace(/deg$/,"");if(t.trim()==="")return null;let o=Number(t);return Number.isFinite(o)?{value:o,percent:r}:null}function g(n){let r=$(n);return r&&(r.percent?r.value/100*255:r.value)}function p(n){let r=$(n);return r&&r.value}function A(n){if(n===void 0)return 1;let r=$(n);return r&&(r.percent?r.value/100:r.value)}function h(n){return{h:a(i(n.h),2),s:a(s(n.s,0,100),2),b:a(s(n.b,0,100),2),a:a(s(n.a,0,1),3)}}function I(n){if(typeof n!="string")return null;let r=n.trim().toLowerCase();if(!r)return null;let t=O.exec(r);if(!t){let f=N(r);return f?h(H(f)):null}let o=t[1].replace(/a$/,""),e=t[2].replace(/\//g," ").split(/[\s,]+/).filter(Boolean);if(e.length!==3&&e.length!==4)return null;let u=A(e[3]);if(u===null)return null;if(o==="rgb"){let f=g(e[0]),C=g(e[1]),d=g(e[2]);return f===null||C===null||d===null?null:h(H({r:f,g:C,b:d,a:u}))}let l=p(e[0]),c=p(e[1]),b=p(e[2]);return l===null||c===null||b===null?null:h(o==="hsl"?F({h:l,s:c,l:b,a:u}):{h:l,s:c,b,a:u})}function L(n,r,t=!0){let o=a(s(n.a,0,1),3),e=t&&o<1;if(r==="rgb"){let{r:u,g:l,b:c}=x(n);return e?`rgba(${u}, ${l}, ${c}, ${o})`:`rgb(${u}, ${l}, ${c})`}if(r==="hsl"){let u=y(n),l=a(u.h),c=a(u.s),b=a(u.l);return e?`hsla(${l}, ${c}%, ${b}%, ${o})`:`hsl(${l}, ${c}%, ${b}%)`}if(r==="hsb"){let u=a(i(n.h)),l=a(s(n.s,0,100)),c=a(s(n.b,0,100));return e?`hsba(${u}, ${l}%, ${c}%, ${o})`:`hsb(${u}, ${l}%, ${c}%)`}return T(x(n),e)}export{L as formatColor,N as hexToRgb,y as hsbToHsl,x as hsbToRgb,F as hslToHsb,z as hslToRgb,I as parseColor,T as rgbToHex,H as rgbToHsb,w as rgbToHsl};

package/dist/utils/composeRefs.cjs

@@ -0,0 +1 @@
+"use strict";var R=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var r=Object.getOwnPropertyNames;var T=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var d=(e,t)=>{for(var n in t)l(e,n,{get:t[n],enumerable:!0})},s=(e,t,n,c)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of r(t))!b.call(e,o)&&o!==n&&l(e,o,{get:()=>t[o],enumerable:!(c=p(t,o))||c.enumerable});return e};var m=(e,t,n)=>(n=e!=null?R(T(e)):{},s(t||!e||!e.__esModule?l(n,"default",{value:e,enumerable:!0}):n,e)),C=e=>s(l({},"__esModule",{value:!0}),e);var P={};d(P,{composeRefs:()=>i,useComposedRefs:()=>y});module.exports=C(P);var a=m(require("react"),1);function u(e,t){if(typeof e=="function")return e(t);e!=null&&(e.current=t)}function i(...e){return t=>{let n=!1,c=e.map(o=>{let f=u(o,t);return!n&&typeof f=="function"&&(n=!0),f});if(n)return()=>{for(let o=0;o<c.length;o++){let f=c[o];typeof f=="function"?f():u(e[o],null)}}}}function y(...e){return a.useCallback(i(...e),[...e])}0&&(module.exports={composeRefs,useComposedRefs});

package/dist/utils/composeRefs.d.cts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+type PossibleRef<T> = React.Ref<T> | undefined;
+/**
+ * Merges any number of refs (callback refs, ref objects, `null`/`undefined`)
+ * into a single callback ref that assigns the DOM node to all of them —
+ * needed wherever a component both forwards a consumer's ref and keeps its
+ * own internal ref on the same node. Supports React 19 cleanup functions:
+ * if any callback ref returns a cleanup, the composed ref returns one too.
+ *
+ * Prefer {@link useComposedRefs} inside components so the composed ref is
+ * memoized; use `composeRefs` directly only outside the render/hook flow.
+ *
+ * @example
+ * ```tsx
+ * const internalRef = React.useRef<HTMLDivElement>(null);
+ * return <div ref={composeRefs(forwardedRef, internalRef)} />;
+ * ```
+ */
+export declare function composeRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T>;
+/**
+ * Hook version of {@link composeRefs} — memoizes the composed callback ref
+ * with `useCallback` so the DOM node isn't detached and reattached on every
+ * render (which `composeRefs(...)` called inline in JSX would cause).
+ *
+ * @example
+ * ```tsx
+ * const rootRef = React.useRef<HTMLDivElement>(null);
+ * const composedRef = useComposedRefs(forwardedRef, rootRef);
+ * return <Primitive.div {...props} ref={composedRef} />;
+ * ```
+ */
+export declare function useComposedRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T>;
+export {};

package/dist/utils/composeRefs.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+type PossibleRef<T> = React.Ref<T> | undefined;
+/**
+ * Merges any number of refs (callback refs, ref objects, `null`/`undefined`)
+ * into a single callback ref that assigns the DOM node to all of them —
+ * needed wherever a component both forwards a consumer's ref and keeps its
+ * own internal ref on the same node. Supports React 19 cleanup functions:
+ * if any callback ref returns a cleanup, the composed ref returns one too.
+ *
+ * Prefer {@link useComposedRefs} inside components so the composed ref is
+ * memoized; use `composeRefs` directly only outside the render/hook flow.
+ *
+ * @example
+ * ```tsx
+ * const internalRef = React.useRef<HTMLDivElement>(null);
+ * return <div ref={composeRefs(forwardedRef, internalRef)} />;
+ * ```
+ */
+export declare function composeRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T>;
+/**
+ * Hook version of {@link composeRefs} — memoizes the composed callback ref
+ * with `useCallback` so the DOM node isn't detached and reattached on every
+ * render (which `composeRefs(...)` called inline in JSX would cause).
+ *
+ * @example
+ * ```tsx
+ * const rootRef = React.useRef<HTMLDivElement>(null);
+ * const composedRef = useComposedRefs(forwardedRef, rootRef);
+ * return <Primitive.div {...props} ref={composedRef} />;
+ * ```
+ */
+export declare function useComposedRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T>;
+export {};

package/dist/utils/composeRefs.js

@@ -0,0 +1 @@
+import*as s from"react";function l(e,o){if(typeof e=="function")return e(o);e!=null&&(e.current=o)}function u(...e){return o=>{let c=!1,f=e.map(t=>{let n=l(t,o);return!c&&typeof n=="function"&&(c=!0),n});if(c)return()=>{for(let t=0;t<f.length;t++){let n=f[t];typeof n=="function"?n():l(e[t],null)}}}}function a(...e){return s.useCallback(u(...e),[...e])}export{u as composeRefs,a as useComposedRefs};

package/dist/utils/createContext.cjs

@@ -0,0 +1 @@
+"use strict";var l=Object.create;var i=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var v=(e,t)=>{for(var n in t)i(e,n,{get:t[n],enumerable:!0})},x=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of R(t))!g.call(e,o)&&o!==n&&i(e,o,{get:()=>t[o],enumerable:!(r=C(t,o))||r.enumerable});return e};var w=(e,t,n)=>(n=e!=null?l(h(e)):{},x(t||!e||!e.__esModule?i(n,"default",{value:e,enumerable:!0}):n,e)),b=e=>x(i({},"__esModule",{value:!0}),e);var P={};v(P,{createSafeContext:()=>k});module.exports=b(P);var c=w(require("react"),1),f=require("react/jsx-runtime");function j(e,t){let n=Object.keys(e);return n.length!==Object.keys(t).length?!1:n.every(r=>r in t&&Object.is(e[r],t[r]))}function k(e,t){let n=c.createContext(t);function r(u){let{children:s,...a}=u,d=c.useRef(a);return j(d.current,a)||(d.current=a),(0,f.jsx)(n.Provider,{value:d.current,children:s})}r.displayName=`${e}Provider`;function o(u){let s=c.useContext(n);if(s!==void 0)return s;if(t!==void 0)return t;throw new Error(`[skandadx] \`${u}\` must be used within \`${e}\`.`)}return[r,o]}0&&(module.exports={createSafeContext});

package/dist/utils/createContext.d.cts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+/**
+ * Creates a scoped `[Provider, useContext]` pair for a compound component's
+ * internal state (e.g. `Tabs`'s selected value, shared with `TabsTrigger`
+ * and `TabsContent`). Unlike raw `React.createContext`, the returned
+ * `useContext(consumerName)` throws a descriptive error instead of silently
+ * returning `undefined` when a part is rendered outside its root.
+ *
+ * @param rootComponentName - Name of the root component, used in the Provider's `displayName` and in error messages.
+ * @param defaultValue - Optional fallback so the context also works without a Provider (rare; most compound components require one).
+ * @returns A `[Provider, useContext]` tuple. `useContext` takes the *consuming* part's name so its error message names the right component.
+ *
+ * @example
+ * ```tsx
+ * const [TabsProvider, useTabsContext] = createSafeContext<TabsContextValue>('Tabs');
+ *
+ * // in Tabs.tsx
+ * <TabsProvider value={value} onValueChange={setValue}>{children}</TabsProvider>
+ *
+ * // in TabsTrigger.tsx
+ * const context = useTabsContext('TabsTrigger'); // throws "`TabsTrigger` must be used within `Tabs`." if misused
+ * ```
+ */
+export declare function createSafeContext<ContextValue extends object | null>(rootComponentName: string, defaultValue?: ContextValue): readonly [{
+    (props: ContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, (consumerName: string) => ContextValue];

package/dist/utils/createContext.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+/**
+ * Creates a scoped `[Provider, useContext]` pair for a compound component's
+ * internal state (e.g. `Tabs`'s selected value, shared with `TabsTrigger`
+ * and `TabsContent`). Unlike raw `React.createContext`, the returned
+ * `useContext(consumerName)` throws a descriptive error instead of silently
+ * returning `undefined` when a part is rendered outside its root.
+ *
+ * @param rootComponentName - Name of the root component, used in the Provider's `displayName` and in error messages.
+ * @param defaultValue - Optional fallback so the context also works without a Provider (rare; most compound components require one).
+ * @returns A `[Provider, useContext]` tuple. `useContext` takes the *consuming* part's name so its error message names the right component.
+ *
+ * @example
+ * ```tsx
+ * const [TabsProvider, useTabsContext] = createSafeContext<TabsContextValue>('Tabs');
+ *
+ * // in Tabs.tsx
+ * <TabsProvider value={value} onValueChange={setValue}>{children}</TabsProvider>
+ *
+ * // in TabsTrigger.tsx
+ * const context = useTabsContext('TabsTrigger'); // throws "`TabsTrigger` must be used within `Tabs`." if misused
+ * ```
+ */
+export declare function createSafeContext<ContextValue extends object | null>(rootComponentName: string, defaultValue?: ContextValue): readonly [{
+    (props: ContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, (consumerName: string) => ContextValue];

package/dist/utils/createContext.js

@@ -0,0 +1 @@
+import*as n from"react";import{jsx as x}from"react/jsx-runtime";function d(r,e){let o=Object.keys(r);return o.length!==Object.keys(e).length?!1:o.every(t=>t in e&&Object.is(r[t],e[t]))}function f(r,e){let o=n.createContext(e);function t(s){let{children:c,...i}=s,u=n.useRef(i);return d(u.current,i)||(u.current=i),x(o.Provider,{value:u.current,children:c})}t.displayName=`${r}Provider`;function a(s){let c=n.useContext(o);if(c!==void 0)return c;if(e!==void 0)return e;throw new Error(`[skandadx] \`${s}\` must be used within \`${r}\`.`)}return[t,a]}export{f as createSafeContext};

package/dist/utils/dateSegments.cjs

@@ -0,0 +1 @@
+"use strict";var m=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var P=Object.prototype.hasOwnProperty;var E=(e,n)=>{for(var t in n)m(e,t,{get:n[t],enumerable:!0})},H=(e,n,t,r)=>{if(n&&typeof n=="object"||typeof n=="function")for(let o of D(n))!P.call(e,o)&&o!==t&&m(e,o,{get:()=>n[o],enumerable:!(r=C(n,o))||r.enumerable});return e};var $=e=>H(m({},"__esModule",{value:!0}),e);var _={};E(_,{SEGMENT_PLACEHOLDERS:()=>g,buildSegments:()=>w,clearDateSegmentCache:()=>L,dateToFormValue:()=>Y,dateToValues:()=>N,daysInMonth:()=>h,formatSegmentText:()=>b,from24Hour:()=>y,getDayPeriodNames:()=>S,isComplete:()=>I,resolveHourCycle:()=>f,resolveLocale:()=>l,segmentRange:()=>x,segmentTypesFor:()=>p,stepSegment:()=>R,timeStringToValues:()=>U,to24Hour:()=>d,typeDigit:()=>V,valuesToDate:()=>G,valuesToTimeString:()=>A});module.exports=$(_);var g={year:"yyyy",month:"mm",day:"dd",hour:"hh",minute:"mm",second:"ss",dayPeriod:"--"},F={year:4,month:2,day:2,hour:2,minute:2,second:2,dayPeriod:0},v=Date.UTC(2024,0,15,13,45,56),c=new Map,s=new Map;function l(e){return e??new Intl.DateTimeFormat().resolvedOptions().locale}function f(e,n){if(n===12||n===24)return n;let t=new Intl.DateTimeFormat(l(e),{hour:"numeric"}).resolvedOptions(),r=t.hourCycle??(t.hour12?"h12":"h23");return r==="h11"||r==="h12"?12:24}function p(e,n){let t=e==="date"?["year","month","day"]:[];return(e==="time"||n!=="day")&&(t.push("hour","minute"),n==="second"&&t.push("second")),t}function h(e,n){return!e||!n?31:new Date(e,n,0).getDate()}function x(e,n,t){switch(e){case"year":return{min:1,max:9999};case"month":return{min:1,max:12};case"day":return{min:1,max:h(n.year,n.month)};case"hour":return t===12?{min:1,max:12}:{min:0,max:23};case"minute":case"second":return{min:0,max:59};case"dayPeriod":return{min:0,max:1}}}function S(e){let n=l(e),t=s.get(n);if(t)return t;let r=new Intl.DateTimeFormat(n,{hour:"numeric",hourCycle:"h12",timeZone:"UTC"}),o=u=>r.formatToParts(Date.UTC(2024,0,15,u)).find(a=>a.type==="dayPeriod")?.value??(u<12?"AM":"PM"),i=[o(1),o(13)];return s.set(n,i),i}function M(e,n){let t={timeZone:"UTC"};return e.includes("year")&&(t.year="numeric"),e.includes("month")&&(t.month="2-digit"),e.includes("day")&&(t.day="2-digit"),e.includes("hour")&&(t.hour="2-digit",t.hourCycle=n===12?"h12":"h23"),e.includes("minute")&&(t.minute="2-digit"),e.includes("second")&&(t.second="2-digit"),t}function O(e,n,t){let r=`${e}|${n.join(",")}|${t}`,o=c.get(r);if(o)return o;let i=new Intl.DateTimeFormat(e,M(n,t)).formatToParts(v),u=[];for(let a of i)a.type==="literal"?u.push({type:"literal",text:a.value.replace(/[\u202F\u2009\u00A0]/g," "),value:null,min:0,max:0,isPlaceholder:!1,isEditable:!1}):(a.type==="dayPeriod"||n.includes(a.type))&&u.push({type:a.type,text:"",value:null,min:0,max:0,isPlaceholder:!0,isEditable:!0});return c.set(r,u),u}function b(e,n,t){return n===null?g[e]:e==="dayPeriod"?S(t)[n===0?0:1]:String(n).padStart(F[e],"0")}function w(e){let n=l(e.locale),t=f(n,e.hourCycle),r=p(e.kind,e.granularity);return O(n,r,t).map(o=>{if(!o.isEditable)return o;let i=o.type,u=e.values[i]??null,{min:a,max:T}=x(i,e.values,t);return{type:i,text:b(i,u,n),value:u,min:a,max:T,isPlaceholder:u===null,isEditable:!0}})}function R(e,n){let{min:t,max:r}=e;if(e.value===null)return e.type==="year"?new Date().getFullYear():t;let o=r-t+1;return t+((e.value-t+n)%o+o)%o}function V(e,n,t){let r=n*10+t;r>e.max&&(r=t);let o=r*10>e.max;return{value:r,buffer:o?0:r,advance:o}}function I(e){return e.every(n=>!n.isEditable||n.value!==null&&n.value>=n.min&&n.value<=n.max)}function d(e,n,t){return t===24?e:e%12+(n===1?12:0)}function y(e,n){return n===24?[e,null]:[e%12===0?12:e%12,e<12?0:1]}function G(e,n){let{year:t,month:r,day:o}=e;if(!t||!r||!o)return null;let i=e.hour==null?0:d(e.hour,e.dayPeriod,n),u=new Date(t,r-1,o,i,e.minute??0,e.second??0,0);return t<100&&u.setFullYear(t),u}function N(e,n){let[t,r]=y(e.getHours(),n);return{year:e.getFullYear(),month:e.getMonth()+1,day:e.getDate(),hour:t,minute:e.getMinutes(),second:e.getSeconds(),dayPeriod:r}}function A(e,n,t){if(e.hour==null||e.minute==null||t===12&&e.dayPeriod==null)return null;let r=u=>String(u).padStart(2,"0"),o=d(e.hour,e.dayPeriod,t),i=`${r(o)}:${r(e.minute)}`;return n!=="second"?i:e.second==null?null:`${i}:${r(e.second)}`}function U(e,n){let t=/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/.exec(e.trim());if(!t)return{};let r=Number(t[1]),o=Number(t[2]),i=t[3]===void 0?0:Number(t[3]);if(r>23||o>59||i>59)return{};let[u,a]=y(r,n);return{hour:u,minute:o,second:i,dayPeriod:a}}function Y(e,n){let t=(i,u=2)=>String(i).padStart(u,"0"),r=`${t(e.getFullYear(),4)}-${t(e.getMonth()+1)}-${t(e.getDate())}`;if(n==="day")return r;let o=`${t(e.getHours())}:${t(e.getMinutes())}`;return n==="second"?`${r}T${o}:${t(e.getSeconds())}`:`${r}T${o}`}function L(){c.clear(),s.clear()}0&&(module.exports={SEGMENT_PLACEHOLDERS,buildSegments,clearDateSegmentCache,dateToFormValue,dateToValues,daysInMonth,formatSegmentText,from24Hour,getDayPeriodNames,isComplete,resolveHourCycle,resolveLocale,segmentRange,segmentTypesFor,stepSegment,timeStringToValues,to24Hour,typeDigit,valuesToDate,valuesToTimeString});

package/dist/utils/dateSegments.d.cts

@@ -0,0 +1,163 @@
+/**
+ * The segment engine behind {@link DateField} and {@link TimeField}: turns a
+ * locale plus a granularity into an ordered list of editable segments, and
+ * turns keystrokes into new segment values.
+ *
+ * Built entirely on `Intl.DateTimeFormat.formatToParts` — segment order *and*
+ * the literals between segments come from CLDR, so there is no bundled
+ * separator table, no locale data and no date library.
+ *
+ * Every framework package carries its own copy of this module (the same way
+ * each carries its own `calendar/locale` and `numberFormat`), because
+ * `@skdx/shared` is a dev-only dependency — contracts and test assertions, not
+ * runtime code. See `reports/design-system-competitive-audit/RFC-segmented-field.md`.
+ *
+ * The module is deliberately framework-free and side-effect-free apart from its
+ * `Intl` memo caches.
+ */
+/** One editable piece of a segmented date/time value. */
+export type SegmentType = 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second' | 'dayPeriod';
+/** How far down a segmented field is editable. Ordered coarse → fine. */
+export type Granularity = 'day' | 'hour' | 'minute' | 'second';
+/** Whether hours read `1`–`12` (with an AM/PM segment) or `0`–`23`. */
+export type HourCycle = 12 | 24;
+/** Current numeric value of each editable segment; `null` means "not typed yet". */
+export type SegmentValues = Partial<Record<SegmentType, number | null>>;
+/** One rendered piece of a segmented field — an editable segment or a locale literal. */
+export interface Segment {
+    /** The segment this piece edits, or `'literal'` for the text between segments. */
+    type: SegmentType | 'literal';
+    /** What to render: the padded value, the placeholder, or the literal itself. */
+    text: string;
+    /** Current numeric value; `null` for literals and for untyped segments. */
+    value: number | null;
+    /** Lowest accepted value (`0` for literals). */
+    min: number;
+    /** Highest accepted value (`0` for literals). Dynamic for `day`. */
+    max: number;
+    /** Whether this segment is still showing its placeholder. */
+    isPlaceholder: boolean;
+    /** `false` only for literals. */
+    isEditable: boolean;
+}
+/** Placeholder text shown before a segment has been typed. */
+export declare const SEGMENT_PLACEHOLDERS: Record<SegmentType, string>;
+/** The runtime's own locale, used whenever `locale` is omitted — matches `calendar/locale`'s `resolveLocale`. */
+export declare function resolveLocale(locale?: string): string;
+/**
+ * The hour cycle to render with: the explicit `hourCycle` when given, otherwise
+ * whatever the locale resolves to (`h11`/`h12` → `12`, `h23`/`h24` → `24`).
+ *
+ * @example
+ * ```ts
+ * resolveHourCycle('en-US'); // 12
+ * resolveHourCycle('de-DE'); // 24
+ * ```
+ */
+export declare function resolveHourCycle(locale?: string, hourCycle?: HourCycle): HourCycle;
+/**
+ * The editable segments a field of this kind and granularity owns, in canonical
+ * (not locale) order. `dayPeriod` is appended by {@link buildSegments} only when
+ * the resolved hour cycle is 12.
+ *
+ * @example
+ * ```ts
+ * segmentTypesFor('date', 'minute'); // ['year','month','day','hour','minute']
+ * segmentTypesFor('time', 'second'); // ['hour','minute','second']
+ * ```
+ */
+export declare function segmentTypesFor(kind: 'date' | 'time', granularity: Granularity): SegmentType[];
+/** Days in a Gregorian month; `31` while either input is unknown, so `day` stays fully typeable. */
+export declare function daysInMonth(year: number | null | undefined, month: number | null | undefined): number;
+/** The accepted range of one segment, given the values around it. */
+export declare function segmentRange(type: SegmentType, values: SegmentValues, hourCycle: HourCycle): {
+    min: number;
+    max: number;
+};
+/** The locale's AM and PM names, e.g. `['AM', 'PM']` or `['vorm.', 'nachm.']`. */
+export declare function getDayPeriodNames(locale?: string): [string, string];
+/** How a segment renders: zero-padded digits, the locale's AM/PM name, or the placeholder. */
+export declare function formatSegmentText(type: SegmentType, value: number | null, locale?: string): string;
+/** Options for {@link buildSegments}. */
+export interface BuildSegmentsOptions {
+    /** `'date'` adds year/month/day ahead of the time segments. */
+    kind: 'date' | 'time';
+    /** How far down the field is editable. */
+    granularity: Granularity;
+    /** BCP-47 locale deciding segment order, literals and AM/PM names. */
+    locale?: string;
+    /** Forced hour cycle; omitted means "whatever the locale uses". */
+    hourCycle?: HourCycle;
+    /** Current per-segment values. */
+    values: SegmentValues;
+}
+/**
+ * The full ordered render list for a segmented field — editable segments
+ * interleaved with the locale's literals.
+ *
+ * @example
+ * ```ts
+ * buildSegments({ kind: 'date', granularity: 'day', locale: 'en-US', values: {} })
+ *   .filter((s) => s.isEditable)
+ *   .map((s) => s.type); // ['month', 'day', 'year']
+ * ```
+ */
+export declare function buildSegments(options: BuildSegmentsOptions): Segment[];
+/**
+ * Steps one segment by `delta`, wrapping around its range (Arrow Up on `12:59`
+ * minutes gives `12:00`, not `12:59`). An untyped segment starts at `min`,
+ * except `year`, which starts at the current year rather than year 1.
+ */
+export declare function stepSegment(segment: Segment, delta: number): number;
+/** The result of typing one digit into a segment. */
+export interface DigitEntry {
+    /** The segment's new value. May be below `min` mid-entry (typing `0` then `5` into a month). */
+    value: number;
+    /** Buffer to carry into the next keystroke on this segment; `0` once entry is complete. */
+    buffer: number;
+    /** Whether focus should move to the next editable segment. */
+    advance: boolean;
+}
+/**
+ * Types one digit into a segment, with React Aria's roll-over behaviour: a
+ * keystroke that would overflow the segment restarts entry at that digit
+ * instead of being rejected, and focus advances as soon as no further digit
+ * could fit.
+ *
+ * @param segment the segment being typed into
+ * @param buffer what has been typed into it so far (`0` when entry just started)
+ * @param digit the digit `0`–`9` just pressed
+ *
+ * @example
+ * ```ts
+ * // month, "1" already typed, user presses 5 → 15 overflows, restart at 5
+ * typeDigit(monthSegment, 1, 5); // { value: 5, buffer: 0, advance: true }
+ * ```
+ */
+export declare function typeDigit(segment: Segment, buffer: number, digit: number): DigitEntry;
+/** Whether every editable segment has been typed and sits inside its range. */
+export declare function isComplete(segments: Segment[]): boolean;
+/** Converts a possibly-12-hour `hour` plus `dayPeriod` into the 0-23 hour. */
+export declare function to24Hour(hour: number, dayPeriod: number | null | undefined, hourCycle: HourCycle): number;
+/** Converts a 0-23 hour into the `[hour, dayPeriod]` pair the given cycle renders. */
+export declare function from24Hour(hour: number, hourCycle: HourCycle): [number, number | null];
+/**
+ * The `Date` these segment values describe, in local time, or `null` while any
+ * date segment is still untyped. Time segments the field does not own default
+ * to `0`, exactly like `<input type="date">`.
+ */
+export declare function valuesToDate(values: SegmentValues, hourCycle: HourCycle): Date | null;
+/** Splits a `Date` back into segment values for the given hour cycle. */
+export declare function dateToValues(date: Date, hourCycle: HourCycle): SegmentValues;
+/**
+ * The `HH:mm` / `HH:mm:ss` string these segment values describe — always 24
+ * hour, like `<input type="time">`, regardless of the rendered `hourCycle` —
+ * or `null` while hour or minute is untyped.
+ */
+export declare function valuesToTimeString(values: SegmentValues, granularity: Granularity, hourCycle: HourCycle): string | null;
+/** Parses `HH:mm[:ss]` (24 hour) into segment values for the given hour cycle. Invalid input yields empty values. */
+export declare function timeStringToValues(time: string, hourCycle: HourCycle): SegmentValues;
+/** The `YYYY-MM-DD` / `YYYY-MM-DDTHH:mm[:ss]` string a segmented date field submits. */
+export declare function dateToFormValue(date: Date, granularity: Granularity): string;
+/** @internal Drops every memoized `Intl` result. Only needed by tests that switch locales in one process. */
+export declare function clearDateSegmentCache(): void;

package/dist/utils/dateSegments.d.ts

@@ -0,0 +1,163 @@
+/**
+ * The segment engine behind {@link DateField} and {@link TimeField}: turns a
+ * locale plus a granularity into an ordered list of editable segments, and
+ * turns keystrokes into new segment values.
+ *
+ * Built entirely on `Intl.DateTimeFormat.formatToParts` — segment order *and*
+ * the literals between segments come from CLDR, so there is no bundled
+ * separator table, no locale data and no date library.
+ *
+ * Every framework package carries its own copy of this module (the same way
+ * each carries its own `calendar/locale` and `numberFormat`), because
+ * `@skdx/shared` is a dev-only dependency — contracts and test assertions, not
+ * runtime code. See `reports/design-system-competitive-audit/RFC-segmented-field.md`.
+ *
+ * The module is deliberately framework-free and side-effect-free apart from its
+ * `Intl` memo caches.
+ */
+/** One editable piece of a segmented date/time value. */
+export type SegmentType = 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second' | 'dayPeriod';
+/** How far down a segmented field is editable. Ordered coarse → fine. */
+export type Granularity = 'day' | 'hour' | 'minute' | 'second';
+/** Whether hours read `1`–`12` (with an AM/PM segment) or `0`–`23`. */
+export type HourCycle = 12 | 24;
+/** Current numeric value of each editable segment; `null` means "not typed yet". */
+export type SegmentValues = Partial<Record<SegmentType, number | null>>;
+/** One rendered piece of a segmented field — an editable segment or a locale literal. */
+export interface Segment {
+    /** The segment this piece edits, or `'literal'` for the text between segments. */
+    type: SegmentType | 'literal';
+    /** What to render: the padded value, the placeholder, or the literal itself. */
+    text: string;
+    /** Current numeric value; `null` for literals and for untyped segments. */
+    value: number | null;
+    /** Lowest accepted value (`0` for literals). */
+    min: number;
+    /** Highest accepted value (`0` for literals). Dynamic for `day`. */
+    max: number;
+    /** Whether this segment is still showing its placeholder. */
+    isPlaceholder: boolean;
+    /** `false` only for literals. */
+    isEditable: boolean;
+}
+/** Placeholder text shown before a segment has been typed. */
+export declare const SEGMENT_PLACEHOLDERS: Record<SegmentType, string>;
+/** The runtime's own locale, used whenever `locale` is omitted — matches `calendar/locale`'s `resolveLocale`. */
+export declare function resolveLocale(locale?: string): string;
+/**
+ * The hour cycle to render with: the explicit `hourCycle` when given, otherwise
+ * whatever the locale resolves to (`h11`/`h12` → `12`, `h23`/`h24` → `24`).
+ *
+ * @example
+ * ```ts
+ * resolveHourCycle('en-US'); // 12
+ * resolveHourCycle('de-DE'); // 24
+ * ```
+ */
+export declare function resolveHourCycle(locale?: string, hourCycle?: HourCycle): HourCycle;
+/**
+ * The editable segments a field of this kind and granularity owns, in canonical
+ * (not locale) order. `dayPeriod` is appended by {@link buildSegments} only when
+ * the resolved hour cycle is 12.
+ *
+ * @example
+ * ```ts
+ * segmentTypesFor('date', 'minute'); // ['year','month','day','hour','minute']
+ * segmentTypesFor('time', 'second'); // ['hour','minute','second']
+ * ```
+ */
+export declare function segmentTypesFor(kind: 'date' | 'time', granularity: Granularity): SegmentType[];
+/** Days in a Gregorian month; `31` while either input is unknown, so `day` stays fully typeable. */
+export declare function daysInMonth(year: number | null | undefined, month: number | null | undefined): number;
+/** The accepted range of one segment, given the values around it. */
+export declare function segmentRange(type: SegmentType, values: SegmentValues, hourCycle: HourCycle): {
+    min: number;
+    max: number;
+};
+/** The locale's AM and PM names, e.g. `['AM', 'PM']` or `['vorm.', 'nachm.']`. */
+export declare function getDayPeriodNames(locale?: string): [string, string];
+/** How a segment renders: zero-padded digits, the locale's AM/PM name, or the placeholder. */
+export declare function formatSegmentText(type: SegmentType, value: number | null, locale?: string): string;
+/** Options for {@link buildSegments}. */
+export interface BuildSegmentsOptions {
+    /** `'date'` adds year/month/day ahead of the time segments. */
+    kind: 'date' | 'time';
+    /** How far down the field is editable. */
+    granularity: Granularity;
+    /** BCP-47 locale deciding segment order, literals and AM/PM names. */
+    locale?: string;
+    /** Forced hour cycle; omitted means "whatever the locale uses". */
+    hourCycle?: HourCycle;
+    /** Current per-segment values. */
+    values: SegmentValues;
+}
+/**
+ * The full ordered render list for a segmented field — editable segments
+ * interleaved with the locale's literals.
+ *
+ * @example
+ * ```ts
+ * buildSegments({ kind: 'date', granularity: 'day', locale: 'en-US', values: {} })
+ *   .filter((s) => s.isEditable)
+ *   .map((s) => s.type); // ['month', 'day', 'year']
+ * ```
+ */
+export declare function buildSegments(options: BuildSegmentsOptions): Segment[];
+/**
+ * Steps one segment by `delta`, wrapping around its range (Arrow Up on `12:59`
+ * minutes gives `12:00`, not `12:59`). An untyped segment starts at `min`,
+ * except `year`, which starts at the current year rather than year 1.
+ */
+export declare function stepSegment(segment: Segment, delta: number): number;
+/** The result of typing one digit into a segment. */
+export interface DigitEntry {
+    /** The segment's new value. May be below `min` mid-entry (typing `0` then `5` into a month). */
+    value: number;
+    /** Buffer to carry into the next keystroke on this segment; `0` once entry is complete. */
+    buffer: number;
+    /** Whether focus should move to the next editable segment. */
+    advance: boolean;
+}
+/**
+ * Types one digit into a segment, with React Aria's roll-over behaviour: a
+ * keystroke that would overflow the segment restarts entry at that digit
+ * instead of being rejected, and focus advances as soon as no further digit
+ * could fit.
+ *
+ * @param segment the segment being typed into
+ * @param buffer what has been typed into it so far (`0` when entry just started)
+ * @param digit the digit `0`–`9` just pressed
+ *
+ * @example
+ * ```ts
+ * // month, "1" already typed, user presses 5 → 15 overflows, restart at 5
+ * typeDigit(monthSegment, 1, 5); // { value: 5, buffer: 0, advance: true }
+ * ```
+ */
+export declare function typeDigit(segment: Segment, buffer: number, digit: number): DigitEntry;
+/** Whether every editable segment has been typed and sits inside its range. */
+export declare function isComplete(segments: Segment[]): boolean;
+/** Converts a possibly-12-hour `hour` plus `dayPeriod` into the 0-23 hour. */
+export declare function to24Hour(hour: number, dayPeriod: number | null | undefined, hourCycle: HourCycle): number;
+/** Converts a 0-23 hour into the `[hour, dayPeriod]` pair the given cycle renders. */
+export declare function from24Hour(hour: number, hourCycle: HourCycle): [number, number | null];
+/**
+ * The `Date` these segment values describe, in local time, or `null` while any
+ * date segment is still untyped. Time segments the field does not own default
+ * to `0`, exactly like `<input type="date">`.
+ */
+export declare function valuesToDate(values: SegmentValues, hourCycle: HourCycle): Date | null;
+/** Splits a `Date` back into segment values for the given hour cycle. */
+export declare function dateToValues(date: Date, hourCycle: HourCycle): SegmentValues;
+/**
+ * The `HH:mm` / `HH:mm:ss` string these segment values describe — always 24
+ * hour, like `<input type="time">`, regardless of the rendered `hourCycle` —
+ * or `null` while hour or minute is untyped.
+ */
+export declare function valuesToTimeString(values: SegmentValues, granularity: Granularity, hourCycle: HourCycle): string | null;
+/** Parses `HH:mm[:ss]` (24 hour) into segment values for the given hour cycle. Invalid input yields empty values. */
+export declare function timeStringToValues(time: string, hourCycle: HourCycle): SegmentValues;
+/** The `YYYY-MM-DD` / `YYYY-MM-DDTHH:mm[:ss]` string a segmented date field submits. */
+export declare function dateToFormValue(date: Date, granularity: Granularity): string;
+/** @internal Drops every memoized `Intl` result. Only needed by tests that switch locales in one process. */
+export declare function clearDateSegmentCache(): void;

package/dist/utils/dateSegments.js

@@ -0,0 +1 @@
+var g={year:"yyyy",month:"mm",day:"dd",hour:"hh",minute:"mm",second:"ss",dayPeriod:"--"},f={year:4,month:2,day:2,hour:2,minute:2,second:2,dayPeriod:0},p=Date.UTC(2024,0,15,13,45,56),l=new Map,m=new Map;function c(e){return e??new Intl.DateTimeFormat().resolvedOptions().locale}function h(e,t){if(t===12||t===24)return t;let n=new Intl.DateTimeFormat(c(e),{hour:"numeric"}).resolvedOptions(),r=n.hourCycle??(n.hour12?"h12":"h23");return r==="h11"||r==="h12"?12:24}function x(e,t){let n=e==="date"?["year","month","day"]:[];return(e==="time"||t!=="day")&&(n.push("hour","minute"),t==="second"&&n.push("second")),n}function S(e,t){return!e||!t?31:new Date(e,t,0).getDate()}function b(e,t,n){switch(e){case"year":return{min:1,max:9999};case"month":return{min:1,max:12};case"day":return{min:1,max:S(t.year,t.month)};case"hour":return n===12?{min:1,max:12}:{min:0,max:23};case"minute":case"second":return{min:0,max:59};case"dayPeriod":return{min:0,max:1}}}function T(e){let t=c(e),n=m.get(t);if(n)return n;let r=new Intl.DateTimeFormat(t,{hour:"numeric",hourCycle:"h12",timeZone:"UTC"}),o=u=>r.formatToParts(Date.UTC(2024,0,15,u)).find(a=>a.type==="dayPeriod")?.value??(u<12?"AM":"PM"),i=[o(1),o(13)];return m.set(t,i),i}function C(e,t){let n={timeZone:"UTC"};return e.includes("year")&&(n.year="numeric"),e.includes("month")&&(n.month="2-digit"),e.includes("day")&&(n.day="2-digit"),e.includes("hour")&&(n.hour="2-digit",n.hourCycle=t===12?"h12":"h23"),e.includes("minute")&&(n.minute="2-digit"),e.includes("second")&&(n.second="2-digit"),n}function D(e,t,n){let r=`${e}|${t.join(",")}|${n}`,o=l.get(r);if(o)return o;let i=new Intl.DateTimeFormat(e,C(t,n)).formatToParts(p),u=[];for(let a of i)a.type==="literal"?u.push({type:"literal",text:a.value.replace(/[\u202F\u2009\u00A0]/g," "),value:null,min:0,max:0,isPlaceholder:!1,isEditable:!1}):(a.type==="dayPeriod"||t.includes(a.type))&&u.push({type:a.type,text:"",value:null,min:0,max:0,isPlaceholder:!0,isEditable:!0});return l.set(r,u),u}function P(e,t,n){return t===null?g[e]:e==="dayPeriod"?T(n)[t===0?0:1]:String(t).padStart(f[e],"0")}function E(e){let t=c(e.locale),n=h(t,e.hourCycle),r=x(e.kind,e.granularity);return D(t,r,n).map(o=>{if(!o.isEditable)return o;let i=o.type,u=e.values[i]??null,{min:a,max:y}=b(i,e.values,n);return{type:i,text:P(i,u,t),value:u,min:a,max:y,isPlaceholder:u===null,isEditable:!0}})}function H(e,t){let{min:n,max:r}=e;if(e.value===null)return e.type==="year"?new Date().getFullYear():n;let o=r-n+1;return n+((e.value-n+t)%o+o)%o}function $(e,t,n){let r=t*10+n;r>e.max&&(r=n);let o=r*10>e.max;return{value:r,buffer:o?0:r,advance:o}}function F(e){return e.every(t=>!t.isEditable||t.value!==null&&t.value>=t.min&&t.value<=t.max)}function s(e,t,n){return n===24?e:e%12+(t===1?12:0)}function d(e,t){return t===24?[e,null]:[e%12===0?12:e%12,e<12?0:1]}function v(e,t){let{year:n,month:r,day:o}=e;if(!n||!r||!o)return null;let i=e.hour==null?0:s(e.hour,e.dayPeriod,t),u=new Date(n,r-1,o,i,e.minute??0,e.second??0,0);return n<100&&u.setFullYear(n),u}function M(e,t){let[n,r]=d(e.getHours(),t);return{year:e.getFullYear(),month:e.getMonth()+1,day:e.getDate(),hour:n,minute:e.getMinutes(),second:e.getSeconds(),dayPeriod:r}}function O(e,t,n){if(e.hour==null||e.minute==null||n===12&&e.dayPeriod==null)return null;let r=u=>String(u).padStart(2,"0"),o=s(e.hour,e.dayPeriod,n),i=`${r(o)}:${r(e.minute)}`;return t!=="second"?i:e.second==null?null:`${i}:${r(e.second)}`}function w(e,t){let n=/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/.exec(e.trim());if(!n)return{};let r=Number(n[1]),o=Number(n[2]),i=n[3]===void 0?0:Number(n[3]);if(r>23||o>59||i>59)return{};let[u,a]=d(r,t);return{hour:u,minute:o,second:i,dayPeriod:a}}function R(e,t){let n=(i,u=2)=>String(i).padStart(u,"0"),r=`${n(e.getFullYear(),4)}-${n(e.getMonth()+1)}-${n(e.getDate())}`;if(t==="day")return r;let o=`${n(e.getHours())}:${n(e.getMinutes())}`;return t==="second"?`${r}T${o}:${n(e.getSeconds())}`:`${r}T${o}`}function V(){l.clear(),m.clear()}export{g as SEGMENT_PLACEHOLDERS,E as buildSegments,V as clearDateSegmentCache,R as dateToFormValue,M as dateToValues,S as daysInMonth,P as formatSegmentText,d as from24Hour,T as getDayPeriodNames,F as isComplete,h as resolveHourCycle,c as resolveLocale,b as segmentRange,x as segmentTypesFor,H as stepSegment,w as timeStringToValues,s as to24Hour,$ as typeDigit,v as valuesToDate,O as valuesToTimeString};

package/dist/utils/direction.cjs

@@ -0,0 +1 @@
+"use strict";var s=Object.create;var n=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(t,e)=>{for(var r in e)n(t,r,{get:e[r],enumerable:!0})},d=(t,e,r,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of D(e))!g.call(t,i)&&i!==r&&n(t,i,{get:()=>e[i],enumerable:!(c=a(e,i))||c.enumerable});return t};var m=(t,e,r)=>(r=t!=null?s(p(t)):{},d(e||!t||!t.__esModule?n(r,"default",{value:t,enumerable:!0}):r,t)),P=t=>d(n({},"__esModule",{value:!0}),t);var A={};x(A,{DirectionProvider:()=>R,directionalKey:()=>w,resolveDirection:()=>u,resolvePhysicalSide:()=>v,useDirection:()=>h});module.exports=P(A);var o=m(require("react"),1),f=require("react/jsx-runtime"),l=o.createContext(void 0);function R({dir:t,children:e}){return(0,f.jsx)(l.Provider,{value:t,children:e})}function h(t){let e=o.useContext(l);return t??e}function u(t,e){if(e)return e;let r=t?.closest("[dir]")?.getAttribute("dir")?.toLowerCase();return r==="rtl"||r==="ltr"?r:typeof document>"u"?"ltr":(document.dir||document.documentElement?.getAttribute("dir")||"").toLowerCase()==="rtl"?"rtl":"ltr"}function v(t,e){return t==="start"?e==="rtl"?"right":"left":t==="end"?e==="rtl"?"left":"right":t}var y={ArrowLeft:"ArrowRight",ArrowRight:"ArrowLeft"};function w(t,e,r){return u(e,r)==="rtl"?y[t]??t:t}0&&(module.exports={DirectionProvider,directionalKey,resolveDirection,resolvePhysicalSide,useDirection});

package/dist/utils/direction.d.cts

@@ -0,0 +1,82 @@
+import * as React from 'react';
+/**
+ * Writing direction resolution, shared by every component whose keyboard
+ * behaviour is horizontal (arrow-key navigation, submenu open/close, slider
+ * stepping, resize handles).
+ *
+ * There is exactly one rule to apply: **under `dir="rtl"`, ArrowLeft and
+ * ArrowRight swap meaning.** Everything else — Home/End, the vertical arrows,
+ * typeahead — is direction-agnostic, so handlers call {@link directionalKey}
+ * once at the top and then keep their existing LTR-authored branches.
+ *
+ * Direction is resolved in this order:
+ *
+ * 1. an explicit `dir` prop on the component, if it accepts one;
+ * 2. the nearest {@link DirectionProvider};
+ * 3. the nearest `[dir]` ancestor **in the DOM** — which is what a plain
+ *    `dir="rtl"` prop on any skdx component produces, since `dir` is a
+ *    global HTML attribute and `Primitive` spreads it onto the element;
+ * 4. `document.dir`.
+ *
+ * Step 3 is why most components need no `dir` prop of their own and no
+ * provider: `<Tabs dir="rtl">` already renders `dir="rtl"` on the tablist,
+ * and the handler reads it back off `event.currentTarget`. The provider
+ * exists for the case that has no element to hang the attribute on — a whole
+ * app rendered RTL without touching every subtree's markup.
+ */
+/** Writing direction of a subtree. */
+export type Direction = 'ltr' | 'rtl';
+/** Props for {@link DirectionProvider}. */
+export interface DirectionProviderProps {
+    /** Writing direction every descendant skdx component should assume. */
+    dir: Direction;
+    children?: React.ReactNode;
+}
+/**
+ * Declares the writing direction for every skdx component beneath it,
+ * without rendering an element of its own. Wrap your app (or an RTL subtree)
+ * in one when the direction is not already expressed as a `dir` attribute in
+ * the DOM.
+ *
+ * @example
+ * ```tsx
+ * <DirectionProvider dir="rtl">
+ *   <App />
+ * </DirectionProvider>
+ * ```
+ */
+export declare function DirectionProvider({ dir, children }: DirectionProviderProps): React.JSX.Element;
+/**
+ * The direction declared by an explicit prop or the nearest
+ * {@link DirectionProvider}, or `undefined` when neither is present — in
+ * which case {@link directionalKey} falls back to the DOM.
+ */
+export declare function useDirection(dirProp?: Direction): Direction | undefined;
+/** @internal Resolves `el`'s direction, with `override` (prop/provider) winning when set. */
+export declare function resolveDirection(el: Element | null | undefined, override?: Direction): Direction;
+/** @internal An edge named logically: `start`/`end` follow the writing direction. */
+export type LogicalSide = 'start' | 'end' | 'top' | 'bottom';
+/** @internal An edge named physically, which is what CSS `left`/`right` and `data-side` mean. */
+export type PhysicalSide = 'left' | 'right' | 'top' | 'bottom';
+/**
+ * Resolves a logical edge to the physical one it lands on: `start`/`end` swap
+ * under RTL, `top`/`bottom` and already-physical `left`/`right` pass through.
+ *
+ * Components keep publishing the *logical* value (Drawer's `data-placement`,
+ * an overlay's `side` prop) and only resolve at the last moment — a component
+ * that stored `left` instead of `start` would break RTL for every consumer
+ * downstream.
+ *
+ * @internal
+ */
+export declare function resolvePhysicalSide(side: LogicalSide | PhysicalSide, direction: Direction): PhysicalSide;
+/**
+ * Translates the key the user physically pressed into the key an
+ * LTR-authored handler should act on: in RTL, ArrowLeft and ArrowRight swap.
+ * Every other key is returned unchanged, so this is safe to apply
+ * unconditionally — including in vertical widgets, where neither key means
+ * anything.
+ *
+ * @internal
+ */
+export declare function directionalKey(key: string, el: Element | null | undefined, override?: Direction): string;