@skdx/react 0.27.0 → 0.29.0

package/dist/angle-slider/AngleSlider.d.cts

@@ -4,57 +4,48 @@ import type { AngleSliderContextValue, AngleSliderProps } from './types.cjs';
 export declare const MARK_SELECTOR = "[data-skdx-angle-slider-mark]";
 /** @internal Folds any number of degrees into `[0, 360)`, so 450 and -270 both read as 90. */
 export declare function normalizeAngle(angle: number): number;
-/**
- * @internal Every rendered mark's angle, normalized, deduped and sorted.
- * Read from the DOM rather than a registry — the same trade `useRovingFocus`
- * makes for items: dynamically added or removed marks need no bookkeeping.
- */
+/** @internal Every rendered mark's angle: normalized, deduped, sorted, read from the DOM. */
 export declare function readMarks(root: HTMLElement | null): number[];
-/**
- * @internal The mark closest to `angle` measured *around the circle*, so 350°
- * lands on a 0° mark rather than travelling the long way to a 340° one.
- */
+/** @internal Closest mark around the circle (e.g., 350° → 0°, not 340°). */
 export declare function nearestMark(marks: number[], angle: number): number;
-export declare const AngleSliderProvider: {
-    (props: AngleSliderContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useAngleSliderContext: (consumerName: string) => AngleSliderContextValue;
+export declare const AngleSliderProvider: React.FC<AngleSliderContextValue & {
+    children: React.ReactNode;
+}>, useAngleSliderContext: (consumerName: string) => AngleSliderContextValue;
 /**
  * Root of an angle slider — a dial whose value is a *direction* rather than a
- * position along a line: a gradient angle, a wind bearing, a knob. Owns the
- * angle via `useControllableState` and renders a `role="slider"` div reporting
- * `aria-valuemin={0}` / `aria-valuemax={360}` / `aria-valuenow` plus an
- * `aria-valuetext` in degrees.
+ * position along a line: a gradient angle, a wind bearing, a knob. Renders a
+ * `role="slider"` div with `aria-valuemin`/`aria-valuemax`/`aria-valuenow` and
+ * an `aria-valuetext` in degrees.
  *
- * **0° is at 12 o'clock and the angle increases clockwise** (90° = 3 o'clock),
- * matching {@link usePointerAngle}, which does the pointer geometry. The value
- * lives in `[0, 360)`: 360 is never reported, because it is the same direction
- * as 0.
+ * 0° is at 12 o'clock and the angle increases clockwise (90° = 3 o'clock); the
+ * value stays in `[0, 360)`, since 360 and 0 are the same direction.
  *
- * The root publishes `--skdx-angle-slider-angle` (e.g. `45deg`) so the thumb's
- * rotation is pure CSS — `transform: rotate(var(--skdx-angle-slider-angle))` —
- * with no per-frame JS positioning to reimplement.
+ * Publishes `--skdx-angle-slider-angle` so the thumb's rotation is pure CSS,
+ * with no per-frame JS positioning.
  *
- * Every value is reachable **without a pointer**: arrows step by `step`,
- * Shift+arrow by 10°, PageUp/PageDown by 45°, Home/End jump to the first and
- * last reachable angles. Arrow steps wrap around the circle, because a dial has
- * no ends. Under `dir="rtl"` the horizontal arrows swap, via `directionalKey`.
+ * Every value is reachable without a pointer: arrows step by `step`,
+ * Shift+arrow by 10°, PageUp/PageDown by 45°, and Home/End jump to the first
+ * and last reachable angle, wrapping around the circle. Arrow keys are not
+ * mirrored under `dir="rtl"`.
  *
  * Give the root an accessible name (`aria-label` or `aria-labelledby`) — an
  * unnamed slider announces a bare number of degrees.
  *
+ * With no `children` it draws the derived anatomy from `marks`; with children,
+ * they render verbatim — reach for `@skdx/react/primitives/angle-slider` for
+ * the parts.
+ *
  * @example
  * ```tsx
- * <AngleSlider aria-label="Gradient angle" defaultValue={45} step={5}>
- *   <AngleSliderMarks>
- *     {[0, 90, 180, 270].map((angle) => (
- *       <AngleSliderMark key={angle} value={angle} />
- *     ))}
- *   </AngleSliderMarks>
- *   <AngleSliderThumb />
- * </AngleSlider>
+ * <AngleSlider
+ *   aria-label="Gradient angle"
+ *   defaultValue={45}
+ *   step={5}
+ *   marks={[{ value: 0, label: 'N' }, { value: 90, label: 'E' }]}
+ * />
  * ```
  */
-export declare const AngleSlider: React.ForwardRefExoticComponent<Omit<AngleSliderProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const AngleSlider: {
+    ({ ref: forwardedRef, ...props }: AngleSliderProps): React.ReactNode;
+    displayName: string;
+};

package/dist/angle-slider/AngleSlider.d.ts

@@ -4,57 +4,48 @@ import type { AngleSliderContextValue, AngleSliderProps } from './types.js';
 export declare const MARK_SELECTOR = "[data-skdx-angle-slider-mark]";
 /** @internal Folds any number of degrees into `[0, 360)`, so 450 and -270 both read as 90. */
 export declare function normalizeAngle(angle: number): number;
-/**
- * @internal Every rendered mark's angle, normalized, deduped and sorted.
- * Read from the DOM rather than a registry — the same trade `useRovingFocus`
- * makes for items: dynamically added or removed marks need no bookkeeping.
- */
+/** @internal Every rendered mark's angle: normalized, deduped, sorted, read from the DOM. */
 export declare function readMarks(root: HTMLElement | null): number[];
-/**
- * @internal The mark closest to `angle` measured *around the circle*, so 350°
- * lands on a 0° mark rather than travelling the long way to a 340° one.
- */
+/** @internal Closest mark around the circle (e.g., 350° → 0°, not 340°). */
 export declare function nearestMark(marks: number[], angle: number): number;
-export declare const AngleSliderProvider: {
-    (props: AngleSliderContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useAngleSliderContext: (consumerName: string) => AngleSliderContextValue;
+export declare const AngleSliderProvider: React.FC<AngleSliderContextValue & {
+    children: React.ReactNode;
+}>, useAngleSliderContext: (consumerName: string) => AngleSliderContextValue;
 /**
  * Root of an angle slider — a dial whose value is a *direction* rather than a
- * position along a line: a gradient angle, a wind bearing, a knob. Owns the
- * angle via `useControllableState` and renders a `role="slider"` div reporting
- * `aria-valuemin={0}` / `aria-valuemax={360}` / `aria-valuenow` plus an
- * `aria-valuetext` in degrees.
+ * position along a line: a gradient angle, a wind bearing, a knob. Renders a
+ * `role="slider"` div with `aria-valuemin`/`aria-valuemax`/`aria-valuenow` and
+ * an `aria-valuetext` in degrees.
  *
- * **0° is at 12 o'clock and the angle increases clockwise** (90° = 3 o'clock),
- * matching {@link usePointerAngle}, which does the pointer geometry. The value
- * lives in `[0, 360)`: 360 is never reported, because it is the same direction
- * as 0.
+ * 0° is at 12 o'clock and the angle increases clockwise (90° = 3 o'clock); the
+ * value stays in `[0, 360)`, since 360 and 0 are the same direction.
  *
- * The root publishes `--skdx-angle-slider-angle` (e.g. `45deg`) so the thumb's
- * rotation is pure CSS — `transform: rotate(var(--skdx-angle-slider-angle))` —
- * with no per-frame JS positioning to reimplement.
+ * Publishes `--skdx-angle-slider-angle` so the thumb's rotation is pure CSS,
+ * with no per-frame JS positioning.
  *
- * Every value is reachable **without a pointer**: arrows step by `step`,
- * Shift+arrow by 10°, PageUp/PageDown by 45°, Home/End jump to the first and
- * last reachable angles. Arrow steps wrap around the circle, because a dial has
- * no ends. Under `dir="rtl"` the horizontal arrows swap, via `directionalKey`.
+ * Every value is reachable without a pointer: arrows step by `step`,
+ * Shift+arrow by 10°, PageUp/PageDown by 45°, and Home/End jump to the first
+ * and last reachable angle, wrapping around the circle. Arrow keys are not
+ * mirrored under `dir="rtl"`.
  *
  * Give the root an accessible name (`aria-label` or `aria-labelledby`) — an
  * unnamed slider announces a bare number of degrees.
  *
+ * With no `children` it draws the derived anatomy from `marks`; with children,
+ * they render verbatim — reach for `@skdx/react/primitives/angle-slider` for
+ * the parts.
+ *
  * @example
  * ```tsx
- * <AngleSlider aria-label="Gradient angle" defaultValue={45} step={5}>
- *   <AngleSliderMarks>
- *     {[0, 90, 180, 270].map((angle) => (
- *       <AngleSliderMark key={angle} value={angle} />
- *     ))}
- *   </AngleSliderMarks>
- *   <AngleSliderThumb />
- * </AngleSlider>
+ * <AngleSlider
+ *   aria-label="Gradient angle"
+ *   defaultValue={45}
+ *   step={5}
+ *   marks={[{ value: 0, label: 'N' }, { value: 90, label: 'E' }]}
+ * />
  * ```
  */
-export declare const AngleSlider: React.ForwardRefExoticComponent<Omit<AngleSliderProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const AngleSlider: {
+    ({ ref: forwardedRef, ...props }: AngleSliderProps): React.ReactNode;
+    displayName: string;
+};

package/dist/angle-slider/AngleSlider.js

@@ -1 +1,2 @@
-import*as c from"react";import{useComposedRefs as G}from"../utils/composeRefs.js";import{createSafeContext as J}from"../utils/createContext.js";import{directionalKey as Y,useDirection as B}from"../utils/direction.js";import{skdxPart as Q}from"../utils/part.js";import{composeEventHandlers as T,Primitive as X}from"../utils/primitive.js";import{useControllableState as Z}from"../utils/useControllableState.js";import{usePointerAngle as j}from"../utils/usePointerAngle.js";import{jsx as D}from"react/jsx-runtime";var ee="[data-skdx-angle-slider-mark]",re=10,ne=45,te=3,ae={ArrowRight:1,ArrowUp:1,ArrowLeft:-1,ArrowDown:-1,PageUp:1,PageDown:-1};function p(e){return(e%360+360)%360}function oe(e,n){return n<=0?e:Math.round(Math.round(e/n)*n*1e6)/1e6}function ie(e){if(!e)return[];let n=Array.from(e.querySelectorAll(ee),r=>Number(r.getAttribute("data-value"))).filter(r=>Number.isFinite(r));return[...new Set(n.map(p))].sort((r,o)=>r-o)}function w(e,n){let r=e[0],o=1/0;for(let d of e){let S=Math.abs(d-n),A=Math.min(S,360-S);A<o&&(o=A,r=d)}return r}var[le,m]=J("AngleSlider"),E=c.forwardRef((e,n)=>{let{value:r,defaultValue:o=0,onValueChange:d,onValueCommit:S,onValueChangeEnd:A,step:s=1,disabled:u=!1,readOnly:P=!1,restrictToMarks:k=!1,...g}=e,[i=0,_]=Z({prop:r,defaultProp:o,onChange:d}),h=c.useRef(null),$=G(n,h),U=B(),v=!u&&!P,x=c.useRef(i);x.current=i;let M=()=>k?ie(h.current):[],f=a=>{let l=M(),t=p(a);_(l.length?w(l,t):p(oe(t,s)))},{onPointerDown:W,dragging:R}=j({step:k?0:s,onAngleChange:a=>f(a),onAngleChangeEnd:()=>(S??A)?.(x.current)}),I=a=>{let l=Y(a.key,a.currentTarget,U),t=M();if(l==="Home"||l==="End"){a.preventDefault();let b=s>0?Math.floor(359/s)*s:359;f(l==="Home"?t.length?t[0]:0:t.length?t[t.length-1]:b);return}let y=ae[l];if(y===void 0)return;a.preventDefault();let C=l==="PageUp"||l==="PageDown";if(t.length){let b=t.indexOf(w(t,i)),q=y*(C||a.shiftKey?te:1);f(t[((b+q)%t.length+t.length)%t.length]);return}let F=s>0?s:1;f(i+y*(C?ne:a.shiftKey?re:F))},z={"--skdx-angle-slider-angle":`${i}deg`,touchAction:"none",...g.style};return D(le,{value:i,step:s,disabled:u,readOnly:P,dragging:R,children:D(X.div,{role:"slider","aria-valuemin":0,"aria-valuemax":360,"aria-valuenow":i,"aria-valuetext":`${i}\xB0`,"aria-disabled":u||void 0,"aria-readonly":P||void 0,tabIndex:u?-1:0,"data-value":i,"data-disabled":u?"":void 0,"data-readonly":P?"":void 0,"data-dragging":R?"":void 0,...g,...Q("angle-slider","root",g.className),ref:$,onKeyDown:T(g.onKeyDown,a=>{v&&I(a)}),onPointerDown:T(g.onPointerDown,a=>{v&&W(a)}),style:z})})});E.displayName="AngleSlider";import*as H from"react";import{skdxPart as de}from"../utils/part.js";import{Primitive as se}from"../utils/primitive.js";import{jsx as me}from"react/jsx-runtime";var V=H.forwardRef((e,n)=>{let r=m("AngleSliderThumb");return me(se.div,{"aria-hidden":!0,"data-value":r.value,"data-disabled":r.disabled?"":void 0,"data-readonly":r.readOnly?"":void 0,"data-dragging":r.dragging?"":void 0,...e,...de("angle-slider","thumb",e.className),ref:n})});V.displayName="AngleSliderThumb";import*as K from"react";import{skdxPart as ue}from"../utils/part.js";import{Primitive as ge}from"../utils/primitive.js";import{jsx as fe}from"react/jsx-runtime";var N=K.forwardRef((e,n)=>{let r=m("AngleSliderMarks");return fe(ge.div,{"data-disabled":r.disabled?"":void 0,"data-readonly":r.readOnly?"":void 0,...e,...ue("angle-slider","marks",e.className),ref:n})});N.displayName="AngleSliderMarks";import*as L from"react";import{skdxPart as ce}from"../utils/part.js";import{Primitive as pe}from"../utils/primitive.js";import{jsx as Se}from"react/jsx-runtime";var O=L.forwardRef(({value:e,...n},r)=>{let o=m("AngleSliderMark"),d=p(e);return Se(pe.div,{"data-skdx-angle-slider-mark":"","data-value":d,"data-state":o.value===d?"active":"inactive","data-disabled":o.disabled?"":void 0,"data-readonly":o.readOnly?"":void 0,...n,...ce("angle-slider","mark",n.className),ref:r,style:{"--skdx-angle-slider-mark-angle":`${d}deg`,...n.style}})});O.displayName="AngleSliderMark";export{E as AngleSlider,O as AngleSliderMark,N as AngleSliderMarks,V as AngleSliderThumb};
+'use client';
+import*as u from"react";import{useComposedRefs as de}from"../utils/composeRefs.js";import{createSafeContext as se}from"../utils/createContext.js";import{useFormReset as me}from"../utils/formControl.js";import{HiddenInput as ue}from"../utils/hiddenInput.js";import{skdxPart as fe}from"../utils/part.js";import{composeEventHandlers as ge,Primitive as ce,useComposedEventHandlers as pe}from"../utils/primitive.js";import{useControllableState as Se}from"../utils/useControllableState.js";import{usePointerAngle as Ae}from"../utils/usePointerAngle.js";import{skdxPart as Q}from"../utils/part.js";import{Primitive as Z}from"../utils/primitive.js";import{jsx as j}from"react/jsx-runtime";var x=({value:e,ref:r,...t})=>{let l=g("AngleSliderMark"),d=m(e);return j(Z.div,{"data-skdx-angle-slider-mark":"","data-value":d,"data-state":l.value===d?"active":"inactive","data-disabled":l.disabled?"":void 0,"data-readonly":l.readOnly?"":void 0,...t,...Q("angle-slider","mark",t.className),ref:r,style:{"--skdx-angle-slider-mark-angle":`${d}deg`,...t.style}})};x.displayName="AngleSliderMark";import{skdxPart as ee}from"../utils/part.js";import{Primitive as re}from"../utils/primitive.js";import{jsx as te}from"react/jsx-runtime";var M=({ref:e,...r})=>{let t=g("AngleSliderMarks");return te(re.div,{"data-disabled":t.disabled?"":void 0,"data-readonly":t.readOnly?"":void 0,...r,...ee("angle-slider","marks",r.className),ref:e})};M.displayName="AngleSliderMarks";import{skdxPart as ne}from"../utils/part.js";import{Primitive as ae}from"../utils/primitive.js";import{jsx as oe}from"react/jsx-runtime";var C=({ref:e,...r})=>{let t=g("AngleSliderThumb");return oe(ae.div,{"aria-hidden":!0,"data-value":t.value,"data-disabled":t.disabled?"":void 0,"data-readonly":t.readOnly?"":void 0,"data-dragging":t.dragging?"":void 0,...r,...ne("angle-slider","thumb",r.className),ref:e})};C.displayName="AngleSliderThumb";import{Fragment as le,jsx as D,jsxs as ie}from"react/jsx-runtime";var I=({marks:e})=>ie(le,{children:[e&&e.length>0?D(M,{children:e.map(r=>D(x,{value:r.value,children:r.label},r.value))}):null,D(C,{})]});import{jsx as E,jsxs as Ce}from"react/jsx-runtime";var ye="[data-skdx-angle-slider-mark]",be=10,Pe=45,ke=3,he={ArrowRight:1,ArrowUp:1,ArrowLeft:-1,ArrowDown:-1,PageUp:1,PageDown:-1};function m(e){return(e%360+360)%360}function ve(e,r){return r<=0?e:Math.round(Math.round(e/r)*r*1e6)/1e6}function Re(e){if(!e)return[];let r=Array.from(e.querySelectorAll(ye),t=>Number(t.getAttribute("data-value"))).filter(t=>Number.isFinite(t));return[...new Set(r.map(m))].sort((t,l)=>t-l)}function L(e,r){let t=e[0],l=1/0;for(let d of e){let A=Math.abs(d-r),o=Math.min(A,360-A);o<l&&(l=o,t=d)}return t}function xe(e,r,t){return{"aria-disabled":e||void 0,"aria-readonly":r||void 0,tabIndex:e?-1:0,"data-disabled":e?"":void 0,"data-readonly":r?"":void 0,"data-dragging":t?"":void 0}}var[Me,g]=se("AngleSlider"),_=({ref:e,...r})=>{let{value:t,defaultValue:l=0,onValueChange:d,onValueCommit:A,step:o=1,disabled:y=!1,readOnly:b=!1,restrictToMarks:T=!1,formatValue:$,name:V,form:U,marks:W,children:F,...c}=r,P=u.useRef("programmatic"),k=u.useRef(null),[i=0,w]=Se({prop:t,defaultProp:l,onChange:n=>d?.({value:n,previousValue:k.current,reason:P.current})}),h=u.useRef(null),J=de(e,h),N=!y&&!b,p=u.useRef(i);u.useInsertionEffect(()=>{p.current=i});let H=()=>T?Re(h.current):[];me(h,()=>{p.current!==m(l)&&(P.current="programmatic",k.current=p.current,w(m(l)))});let S=(n,s)=>{let a=H(),f=m(n);P.current=s,k.current=p.current,w(a.length?L(a,f):m(ve(f,o)))},{onPointerDown:z,dragging:K}=Ae({step:T?0:o,onAngleChange:n=>S(n,"pointer"),onAngleChangeEnd:()=>A?.(p.current)}),X=n=>{let s=n.key,a=H();if(s==="Home"||s==="End"){n.preventDefault();let R=o>0?Math.floor(359/o)*o:359;S(s==="Home"?a.length?a[0]:0:a.length?a[a.length-1]:R,"keyboard");return}let f=he[s];if(f===void 0)return;n.preventDefault();let O=s==="PageUp"||s==="PageDown";if(a.length){let R=a.indexOf(L(a,i)),B=f*(O||n.shiftKey?ke:1);S(a[((R+B)%a.length+a.length)%a.length],"keyboard");return}let v=o>0?o:1;O?v=Pe:n.shiftKey&&(v=be),S(i+f*v,"keyboard")},q=o>0?Math.floor(359/o)*o:359,G=$?.(i)||`${i}\xB0`,Y={"--skdx-angle-slider-angle":`${i}deg`,touchAction:"none",...c.style};return Ce(Me,{value:i,step:o,disabled:y,readOnly:b,dragging:K,children:[E(ce.div,{role:"slider","aria-valuemin":0,"aria-valuemax":q,"aria-valuenow":i,"aria-valuetext":G,"data-value":i,...xe(y,b,K),...c,...fe("angle-slider","root",c.className),ref:J,onKeyDown:pe(c.onKeyDown,n=>{N&&X(n)}),onPointerDown:ge(c.onPointerDown,n=>{N&&z(n)}),style:Y,children:F??E(I,{marks:W})}),V?E(ue,{type:"hidden",name:V,value:i,disabled:y,form:U}):null]})};_.displayName="AngleSlider";export{_ as AngleSlider,x as AngleSliderMark,M as AngleSliderMarks,Me as AngleSliderProvider,C as AngleSliderThumb,ye as MARK_SELECTOR,L as nearestMark,m as normalizeAngle,Re as readMarks,g as useAngleSliderContext};

package/dist/angle-slider/AngleSliderAnatomy.d.cts

@@ -0,0 +1,6 @@
+import type { JSX } from 'react';
+import type { AngleSliderMarkData } from './types.cjs';
+/** @internal Derived anatomy: one `AngleSliderMark` per entry in `marks`, grouped in `AngleSliderMarks`, plus the `AngleSliderThumb`. */
+export declare const AngleSliderAnatomy: ({ marks, }: {
+    marks?: readonly AngleSliderMarkData[] | undefined;
+}) => JSX.Element;

package/dist/angle-slider/AngleSliderAnatomy.d.ts

@@ -0,0 +1,6 @@
+import type { JSX } from 'react';
+import type { AngleSliderMarkData } from './types.js';
+/** @internal Derived anatomy: one `AngleSliderMark` per entry in `marks`, grouped in `AngleSliderMarks`, plus the `AngleSliderThumb`. */
+export declare const AngleSliderAnatomy: ({ marks, }: {
+    marks?: readonly AngleSliderMarkData[] | undefined;
+}) => JSX.Element;

package/dist/angle-slider/AngleSliderMark.d.cts

@@ -1,11 +1,8 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { AngleSliderMarkProps } from './types.cjs';
 /**
- * One tick on an {@link AngleSlider}'s dial, sitting at `value` degrees.
- *
- * Like the thumb, it ships no positioning: it publishes
- * `--skdx-angle-slider-mark-angle` (e.g. `90deg`) so a single CSS rule places
- * every tick around the ring.
+ * Tick on dial. Publishes `--skdx-angle-slider-mark-angle` for CSS positioning.
+ * Also `data-value`, `data-state`, `data-disabled`, `data-readonly`.
  *
  * ```css
  * .my-mark {
@@ -13,12 +10,6 @@ import type { AngleSliderMarkProps } from './types.cjs';
  * }
  * ```
  *
- * It also carries `data-skdx-angle-slider-mark` and `data-value`, which is how
- * the root discovers the mark set when `restrictToMarks` is on — found by
- * attribute at interaction time, so a mark added or removed later needs no
- * registration. Exposes `data-state="active" | "inactive"` (active when the
- * slider's value sits on this tick) plus `data-disabled` / `data-readonly`.
- *
  * @example
  * ```tsx
  * <AngleSlider aria-label="Wind direction" defaultValue={0} restrictToMarks>
@@ -32,4 +23,7 @@ import type { AngleSliderMarkProps } from './types.cjs';
  * </AngleSlider>
  * ```
  */
-export declare const AngleSliderMark: React.ForwardRefExoticComponent<Omit<AngleSliderMarkProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const AngleSliderMark: {
+    ({ value, ref: forwardedRef, ...props }: AngleSliderMarkProps): React.ReactNode;
+    displayName: string;
+};

package/dist/angle-slider/AngleSliderMark.d.ts

@@ -1,11 +1,8 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { AngleSliderMarkProps } from './types.js';
 /**
- * One tick on an {@link AngleSlider}'s dial, sitting at `value` degrees.
- *
- * Like the thumb, it ships no positioning: it publishes
- * `--skdx-angle-slider-mark-angle` (e.g. `90deg`) so a single CSS rule places
- * every tick around the ring.
+ * Tick on dial. Publishes `--skdx-angle-slider-mark-angle` for CSS positioning.
+ * Also `data-value`, `data-state`, `data-disabled`, `data-readonly`.
  *
  * ```css
  * .my-mark {
@@ -13,12 +10,6 @@ import type { AngleSliderMarkProps } from './types.js';
  * }
  * ```
  *
- * It also carries `data-skdx-angle-slider-mark` and `data-value`, which is how
- * the root discovers the mark set when `restrictToMarks` is on — found by
- * attribute at interaction time, so a mark added or removed later needs no
- * registration. Exposes `data-state="active" | "inactive"` (active when the
- * slider's value sits on this tick) plus `data-disabled` / `data-readonly`.
- *
  * @example
  * ```tsx
  * <AngleSlider aria-label="Wind direction" defaultValue={0} restrictToMarks>
@@ -32,4 +23,7 @@ import type { AngleSliderMarkProps } from './types.js';
  * </AngleSlider>
  * ```
  */
-export declare const AngleSliderMark: React.ForwardRefExoticComponent<Omit<AngleSliderMarkProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const AngleSliderMark: {
+    ({ value, ref: forwardedRef, ...props }: AngleSliderMarkProps): React.ReactNode;
+    displayName: string;
+};

package/dist/angle-slider/AngleSliderMarks.d.cts

@@ -1,17 +1,14 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { AngleSliderMarksProps } from './types.cjs';
 /**
- * Container for an {@link AngleSlider}'s tick marks. Structural only — it
- * mirrors the root's `data-disabled` / `data-readonly` so a brand layer can dim
- * the whole ring in one rule, and otherwise stays out of the way.
+ * Container for {@link AngleSlider} tick marks. Mirrors root's
+ * `data-disabled` / `data-readonly` for consistent styling.
  *
- * It is deliberately **not** `aria-hidden`: marks often carry real labels
- * ("N", "E", "S", "W", "45°"), and hiding them wholesale would throw away text
- * a screen-reader user may want. Add `aria-hidden` yourself on purely
- * decorative ticks.
+ * Deliberately not `aria-hidden`: marks carry labels users need. Add
+ * `aria-hidden` to purely decorative marks.
  *
- * Marks do not have to live inside it — the root finds them anywhere in its
- * subtree — but grouping them gives the ring a single positioning context.
+ * Marks can live anywhere in the root's subtree, but grouping here provides a
+ * single positioning context for the ring.
  *
  * @example
  * ```tsx
@@ -22,4 +19,7 @@ import type { AngleSliderMarksProps } from './types.cjs';
  * </AngleSliderMarks>
  * ```
  */
-export declare const AngleSliderMarks: React.ForwardRefExoticComponent<Omit<AngleSliderMarksProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const AngleSliderMarks: {
+    ({ ref: forwardedRef, ...props }: AngleSliderMarksProps): React.ReactNode;
+    displayName: string;
+};

package/dist/angle-slider/AngleSliderMarks.d.ts

@@ -1,17 +1,14 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { AngleSliderMarksProps } from './types.js';
 /**
- * Container for an {@link AngleSlider}'s tick marks. Structural only — it
- * mirrors the root's `data-disabled` / `data-readonly` so a brand layer can dim
- * the whole ring in one rule, and otherwise stays out of the way.
+ * Container for {@link AngleSlider} tick marks. Mirrors root's
+ * `data-disabled` / `data-readonly` for consistent styling.
  *
- * It is deliberately **not** `aria-hidden`: marks often carry real labels
- * ("N", "E", "S", "W", "45°"), and hiding them wholesale would throw away text
- * a screen-reader user may want. Add `aria-hidden` yourself on purely
- * decorative ticks.
+ * Deliberately not `aria-hidden`: marks carry labels users need. Add
+ * `aria-hidden` to purely decorative marks.
  *
- * Marks do not have to live inside it — the root finds them anywhere in its
- * subtree — but grouping them gives the ring a single positioning context.
+ * Marks can live anywhere in the root's subtree, but grouping here provides a
+ * single positioning context for the ring.
  *
  * @example
  * ```tsx
@@ -22,4 +19,7 @@ import type { AngleSliderMarksProps } from './types.js';
  * </AngleSliderMarks>
  * ```
  */
-export declare const AngleSliderMarks: React.ForwardRefExoticComponent<Omit<AngleSliderMarksProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const AngleSliderMarks: {
+    ({ ref: forwardedRef, ...props }: AngleSliderMarksProps): React.ReactNode;
+    displayName: string;
+};

package/dist/angle-slider/AngleSliderThumb.d.cts

@@ -1,23 +1,9 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { AngleSliderThumbProps } from './types.cjs';
 /**
- * The handle that points at an {@link AngleSlider}'s current angle. Purely
- * visual: `aria-hidden` and out of the tab order, because the root carries the
- * whole widget's `role="slider"` semantics and takes the single tab stop —
- * a second focusable element here would announce the same value twice.
+ * Visual-only angle slider thumb, `aria-hidden` since root carries slider semantics.
  *
- * It ships **no positioning**. The root publishes `--skdx-angle-slider-angle`,
- * so one CSS rule rotates the thumb and nothing recomputes a transform per
- * frame:
- *
- * ```css
- * .my-thumb {
- *   transform: rotate(var(--skdx-angle-slider-angle)) translateY(-60px);
- * }
- * ```
- *
- * Exposes `data-value`, `data-disabled`, `data-readonly` and `data-dragging`
- * (present while a pointer drag is in flight) for styling.
+ * Ships no positioning — use `--skdx-angle-slider-angle` CSS variable. Exposes `data-value`, `data-disabled`, `data-readonly`, `data-dragging`.
  *
  * @example
  * ```tsx
@@ -26,4 +12,7 @@ import type { AngleSliderThumbProps } from './types.cjs';
  * </AngleSlider>
  * ```
  */
-export declare const AngleSliderThumb: React.ForwardRefExoticComponent<Omit<AngleSliderThumbProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const AngleSliderThumb: {
+    ({ ref: forwardedRef, ...props }: AngleSliderThumbProps): React.ReactNode;
+    displayName: string;
+};

package/dist/angle-slider/AngleSliderThumb.d.ts

@@ -1,23 +1,9 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { AngleSliderThumbProps } from './types.js';
 /**
- * The handle that points at an {@link AngleSlider}'s current angle. Purely
- * visual: `aria-hidden` and out of the tab order, because the root carries the
- * whole widget's `role="slider"` semantics and takes the single tab stop —
- * a second focusable element here would announce the same value twice.
+ * Visual-only angle slider thumb, `aria-hidden` since root carries slider semantics.
  *
- * It ships **no positioning**. The root publishes `--skdx-angle-slider-angle`,
- * so one CSS rule rotates the thumb and nothing recomputes a transform per
- * frame:
- *
- * ```css
- * .my-thumb {
- *   transform: rotate(var(--skdx-angle-slider-angle)) translateY(-60px);
- * }
- * ```
- *
- * Exposes `data-value`, `data-disabled`, `data-readonly` and `data-dragging`
- * (present while a pointer drag is in flight) for styling.
+ * Ships no positioning — use `--skdx-angle-slider-angle` CSS variable. Exposes `data-value`, `data-disabled`, `data-readonly`, `data-dragging`.
  *
  * @example
  * ```tsx
@@ -26,4 +12,7 @@ import type { AngleSliderThumbProps } from './types.js';
  * </AngleSlider>
  * ```
  */
-export declare const AngleSliderThumb: React.ForwardRefExoticComponent<Omit<AngleSliderThumbProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const AngleSliderThumb: {
+    ({ ref: forwardedRef, ...props }: AngleSliderThumbProps): React.ReactNode;
+    displayName: string;
+};

package/dist/angle-slider/index.d.cts

@@ -1,5 +1,2 @@
 export { AngleSlider } from './AngleSlider.cjs';
-export { AngleSliderThumb } from './AngleSliderThumb.cjs';
-export { AngleSliderMarks } from './AngleSliderMarks.cjs';
-export { AngleSliderMark } from './AngleSliderMark.cjs';
-export type { AngleSliderProps, AngleSliderThumbProps, AngleSliderMarksProps, AngleSliderMarkProps, } from './types.cjs';
+export type { AngleSliderProps, AngleSliderMarkData, AngleSliderValueChangeDetail } from './types.cjs';

package/dist/angle-slider/index.d.ts

@@ -1,5 +1,2 @@
 export { AngleSlider } from './AngleSlider.js';
-export { AngleSliderThumb } from './AngleSliderThumb.js';
-export { AngleSliderMarks } from './AngleSliderMarks.js';
-export { AngleSliderMark } from './AngleSliderMark.js';
-export type { AngleSliderProps, AngleSliderThumbProps, AngleSliderMarksProps, AngleSliderMarkProps, } from './types.js';
+export type { AngleSliderProps, AngleSliderMarkData, AngleSliderValueChangeDetail } from './types.js';

package/dist/angle-slider/primitives.d.cts

@@ -0,0 +1,23 @@
+/**
+ * Advanced primitives for `AngleSlider` — the parts the recipe composes. Use
+ * for full manual composition.
+ *
+ * @example
+ * ```tsx
+ * import { AngleSlider, AngleSliderMark, AngleSliderMarks, AngleSliderThumb } from '@skdx/react/primitives/angle-slider';
+ *
+ * <AngleSlider defaultValue={45}>
+ *   <AngleSliderMarks>
+ *     {[0, 90, 180, 270].map((angle) => (
+ *       <AngleSliderMark key={angle} value={angle} />
+ *     ))}
+ *   </AngleSliderMarks>
+ *   <AngleSliderThumb />
+ * </AngleSlider>
+ * ```
+ */
+export { AngleSlider } from './AngleSlider.cjs';
+export { AngleSliderThumb } from './AngleSliderThumb.cjs';
+export { AngleSliderMarks } from './AngleSliderMarks.cjs';
+export { AngleSliderMark } from './AngleSliderMark.cjs';
+export type { AngleSliderProps, AngleSliderThumbProps, AngleSliderMarksProps, AngleSliderMarkProps, } from './types.cjs';

package/dist/angle-slider/primitives.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Advanced primitives for `AngleSlider` — the parts the recipe composes. Use
+ * for full manual composition.
+ *
+ * @example
+ * ```tsx
+ * import { AngleSlider, AngleSliderMark, AngleSliderMarks, AngleSliderThumb } from '@skdx/react/primitives/angle-slider';
+ *
+ * <AngleSlider defaultValue={45}>
+ *   <AngleSliderMarks>
+ *     {[0, 90, 180, 270].map((angle) => (
+ *       <AngleSliderMark key={angle} value={angle} />
+ *     ))}
+ *   </AngleSliderMarks>
+ *   <AngleSliderThumb />
+ * </AngleSlider>
+ * ```
+ */
+export { AngleSlider } from './AngleSlider.js';
+export { AngleSliderThumb } from './AngleSliderThumb.js';
+export { AngleSliderMarks } from './AngleSliderMarks.js';
+export { AngleSliderMark } from './AngleSliderMark.js';
+export type { AngleSliderProps, AngleSliderThumbProps, AngleSliderMarksProps, AngleSliderMarkProps, } from './types.js';