@skdx/react 0.26.0 → 0.28.0

package/dist/alert-dialog/types.d.cts

@@ -1,8 +1,18 @@
 import type * as React from 'react';
+import type { PassThroughProps } from '../utils/passThrough.cjs';
 import type { PortalProps } from '../utils/portal.cjs';
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
 import type { FocusOutsideEvent, InteractOutsideEvent } from '../utils/useDismiss.cjs';
 import type { AutoFocusEvent } from '../utils/useFocusTrap.cjs';
+/**
+ * Which un-prevented interaction may close an {@link AlertDialog}. Two-valued
+ * (vs. Dialog's four) because the WAI-ARIA `alertdialog` pattern requires
+ * confirmation, so outside dismissal is not allowed — `'any'` and `'outside'`
+ * don't apply here.
+ */
+export type AlertDialogDismiss = 'escape' | 'none';
+/** The derived {@link AlertDialog} panel's semantic emphasis, reflected as `data-tone` on `AlertDialogContent` and the derived `AlertDialogAction`. */
+export type AlertDialogTone = 'neutral' | 'danger';
 /** @internal Shared state distributed from {@link AlertDialog} to its parts via context. Not part of the public API. */
 export interface AlertDialogContextValue {
     triggerRef: React.RefObject<HTMLButtonElement | null>;
@@ -10,14 +20,28 @@ export interface AlertDialogContextValue {
     contentId: string;
     titleId: string;
     descriptionId: string;
+    /** Whether an {@link AlertDialogTitle} is mounted, so Content can withhold a dangling `aria-labelledby`. */
+    hasTitle: boolean;
+    setHasTitle: (present: boolean) => void;
+    /** Whether an {@link AlertDialogDescription} is mounted, gating `aria-describedby` the same way. */
+    hasDescription: boolean;
+    setHasDescription: (present: boolean) => void;
     open: boolean;
     onOpenChange: (open: boolean) => void;
+    /** The resolved dismissal policy, read by `AlertDialogContent` to gate Escape and to write `data-dismiss`. */
+    dismiss: AlertDialogDismiss;
 }
-/** Props for the {@link AlertDialog} root. */
-export interface AlertDialogProps {
+/**
+ * Props for the {@link AlertDialog} root. Standard attributes ({@link
+ * PassThroughProps}) land on the derived `AlertDialogContent` panel.
+ */
+export interface AlertDialogProps extends PassThroughProps {
     /**
-     * The alert dialog's parts — typically an `AlertDialogTrigger` and an `AlertDialogPortal`.
-     * @default undefined — renders nothing if omitted.
+     * Full manual composition — typically an `AlertDialogTrigger` and an
+     * `AlertDialogPortal`. Replaces the derived anatomy entirely; when omitted,
+     * the root draws its panel from `title`/`description`/`confirmLabel`/
+     * `cancelLabel`/`tone` instead.
+     * @default undefined — the derived anatomy renders instead.
      */
     children?: React.ReactNode;
     /**
@@ -30,6 +54,14 @@ export interface AlertDialogProps {
      * @default false
      */
     defaultOpen?: boolean;
+    /**
+     * Which interaction closes the alert dialog: `'escape'` allows the Escape
+     * key, `'none'` requires an explicit button click. `onEscapeKeyDown` fires
+     * regardless; `'none'` just prevents auto-close. Reflected as `data-dismiss`
+     * on `AlertDialogContent`.
+     * @default 'escape'
+     */
+    dismiss?: AlertDialogDismiss;
     /**
      * Fires with the new open state whenever the alert dialog opens or closes, controlled or not.
      * @default undefined — no-op if omitted.
@@ -43,6 +75,55 @@ export interface AlertDialogProps {
      * @default undefined — no-op if omitted.
      */
     onOpenChangeComplete?: (open: boolean) => void;
+    /**
+     * The derived panel's title, rendered as an `AlertDialogTitle`. Only read
+     * when `children` is omitted.
+     * @default undefined — no derived title.
+     */
+    title?: string;
+    /**
+     * The derived panel's description, rendered as an `AlertDialogDescription`.
+     * Only read when `children` is omitted.
+     * @default undefined — no derived description.
+     */
+    description?: string;
+    /**
+     * Label of the derived primary action button. Only read when `children`
+     * is omitted.
+     * @default 'Confirm'
+     */
+    confirmLabel?: string;
+    /**
+     * Label of the derived `AlertDialogCancel` button. Only read when
+     * `children` is omitted.
+     * @default 'Cancel'
+     */
+    cancelLabel?: string;
+    /**
+     * Fires when the derived primary action button is clicked, before it
+     * closes the alert dialog. Call `event.preventDefault()` to keep it open —
+     * the same veto `AlertDialogAction` documents, for an asynchronous
+     * confirmation that must stay up until the request settles. Only read
+     * when `children` is omitted.
+     * @default undefined — no-op if omitted.
+     */
+    onConfirm?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Fires when the derived `AlertDialogCancel` button is clicked, before it
+     * closes the alert dialog. Call `event.preventDefault()` to keep it open.
+     * Only read when `children` is omitted.
+     * @default undefined — no-op if omitted.
+     */
+    onCancel?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Semantic emphasis of the derived primary Action button, reflected as
+     * `data-tone` on that button for a skin to style from — `'danger'` for a
+     * destructive confirmation. The panel never carries it: this family is
+     * styled identically to `Dialog` otherwise. Only read when `children` is
+     * omitted.
+     * @default 'neutral'
+     */
+    tone?: AlertDialogTone;
 }
 /** Props for {@link AlertDialogTrigger}, the button that opens the alert dialog. */
 export interface AlertDialogTriggerProps extends PrimitivePropsWithRef<'button'> {
@@ -76,9 +157,43 @@ export interface AlertDialogContentProps extends PrimitivePropsWithRef<'div'> {
      * @default false
      */
     forceMount?: boolean;
+    /**
+     * CSS selector for the element inside this panel that should receive focus
+     * when the alert dialog opens, instead of the `AlertDialogCancel` button.
+     *
+     * Resolved with `querySelector` against the panel itself, and only when
+     * `onOpenAutoFocus` did **not** call `preventDefault()` — a vetoed event
+     * means the consumer is placing focus by hand and this prop would fight it.
+     * A selector matching nothing falls back to Cancel, then the first tabbable
+     * element, then the panel, and warns: an always-modal panel with focus
+     * stranded on `<body>` is unreachable from the keyboard.
+     *
+     * A selector string rather than an element handle so the same member exists
+     * as the `initial-focus` attribute on `<skdx-alert-dialog-content>`.
+     * @default undefined — focus lands on `AlertDialogCancel`.
+     */
+    initialFocus?: string;
+    /**
+     * CSS selector for the element that should receive focus when the alert
+     * dialog closes, instead of whatever was focused before it opened.
+     *
+     * Resolved with `querySelector` against the whole **document**, not this
+     * panel: the return target is outside the panel by definition, and here it is
+     * routinely not the trigger either — the row whose deletion this alert dialog
+     * just confirmed is gone, and its trigger went with it. That vanished-trigger
+     * case is the common one for this family, which is why the prop earns its
+     * keep here more than on any other overlay.
+     *
+     * Applied only when `onCloseAutoFocus` did not call `preventDefault()`; a
+     * selector matching nothing falls back to the previously focused element and
+     * warns.
+     * @default undefined — focus returns to the element focused before opening.
+     */
+    finalFocus?: string;
     /**
      * Fires when Escape is pressed while the alert dialog is open. Call `event.preventDefault()` to stop it from closing.
-     * @default undefined — Escape closes the alert dialog.
+     * Fires under `dismiss="none"` too, where the close it announces does not happen.
+     * @default undefined — Escape closes the alert dialog, unless the root's `dismiss` is `'none'`.
      */
     onEscapeKeyDown?: (event: KeyboardEvent) => void;
     /**
@@ -97,13 +212,13 @@ export interface AlertDialogContentProps extends PrimitivePropsWithRef<'div'> {
      */
     onInteractOutside?: (event: InteractOutsideEvent) => void;
     /**
-     * Fires before focus moves to the `AlertDialogCancel` button on open. Call `event.preventDefault()` to keep focus where it is and place it yourself.
-     * @default undefined — focus moves to Cancel (or the first tabbable element).
+     * Fires before focus moves to the `AlertDialogCancel` button on open — or to `initialFocus`, when that selector matches. Call `event.preventDefault()` to keep focus where it is and place it yourself; that also suppresses `initialFocus`.
+     * @default undefined — focus moves to `initialFocus`, then Cancel, then the first tabbable element.
      */
     onOpenAutoFocus?: (event: AutoFocusEvent) => void;
     /**
-     * Fires before focus returns to the previously focused element on close. Call `event.preventDefault()` to suppress the return — useful when the trigger no longer exists.
-     * @default undefined — focus returns to the element focused before the alert dialog opened.
+     * Fires before focus returns to the previously focused element on close — or to `finalFocus`, when that selector matches. Call `event.preventDefault()` to suppress the return entirely, `finalFocus` included; `finalFocus` is the declarative form of the same redirect for the common vanished-trigger case.
+     * @default undefined — focus returns to `finalFocus`, else to the element focused before the alert dialog opened.
      */
     onCloseAutoFocus?: (event: AutoFocusEvent) => void;
 }

package/dist/alert-dialog/types.d.ts

@@ -1,8 +1,18 @@
 import type * as React from 'react';
+import type { PassThroughProps } from '../utils/passThrough.js';
 import type { PortalProps } from '../utils/portal.js';
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
 import type { FocusOutsideEvent, InteractOutsideEvent } from '../utils/useDismiss.js';
 import type { AutoFocusEvent } from '../utils/useFocusTrap.js';
+/**
+ * Which un-prevented interaction may close an {@link AlertDialog}. Two-valued
+ * (vs. Dialog's four) because the WAI-ARIA `alertdialog` pattern requires
+ * confirmation, so outside dismissal is not allowed — `'any'` and `'outside'`
+ * don't apply here.
+ */
+export type AlertDialogDismiss = 'escape' | 'none';
+/** The derived {@link AlertDialog} panel's semantic emphasis, reflected as `data-tone` on `AlertDialogContent` and the derived `AlertDialogAction`. */
+export type AlertDialogTone = 'neutral' | 'danger';
 /** @internal Shared state distributed from {@link AlertDialog} to its parts via context. Not part of the public API. */
 export interface AlertDialogContextValue {
     triggerRef: React.RefObject<HTMLButtonElement | null>;
@@ -10,14 +20,28 @@ export interface AlertDialogContextValue {
     contentId: string;
     titleId: string;
     descriptionId: string;
+    /** Whether an {@link AlertDialogTitle} is mounted, so Content can withhold a dangling `aria-labelledby`. */
+    hasTitle: boolean;
+    setHasTitle: (present: boolean) => void;
+    /** Whether an {@link AlertDialogDescription} is mounted, gating `aria-describedby` the same way. */
+    hasDescription: boolean;
+    setHasDescription: (present: boolean) => void;
     open: boolean;
     onOpenChange: (open: boolean) => void;
+    /** The resolved dismissal policy, read by `AlertDialogContent` to gate Escape and to write `data-dismiss`. */
+    dismiss: AlertDialogDismiss;
 }
-/** Props for the {@link AlertDialog} root. */
-export interface AlertDialogProps {
+/**
+ * Props for the {@link AlertDialog} root. Standard attributes ({@link
+ * PassThroughProps}) land on the derived `AlertDialogContent` panel.
+ */
+export interface AlertDialogProps extends PassThroughProps {
     /**
-     * The alert dialog's parts — typically an `AlertDialogTrigger` and an `AlertDialogPortal`.
-     * @default undefined — renders nothing if omitted.
+     * Full manual composition — typically an `AlertDialogTrigger` and an
+     * `AlertDialogPortal`. Replaces the derived anatomy entirely; when omitted,
+     * the root draws its panel from `title`/`description`/`confirmLabel`/
+     * `cancelLabel`/`tone` instead.
+     * @default undefined — the derived anatomy renders instead.
      */
     children?: React.ReactNode;
     /**
@@ -30,6 +54,14 @@ export interface AlertDialogProps {
      * @default false
      */
     defaultOpen?: boolean;
+    /**
+     * Which interaction closes the alert dialog: `'escape'` allows the Escape
+     * key, `'none'` requires an explicit button click. `onEscapeKeyDown` fires
+     * regardless; `'none'` just prevents auto-close. Reflected as `data-dismiss`
+     * on `AlertDialogContent`.
+     * @default 'escape'
+     */
+    dismiss?: AlertDialogDismiss;
     /**
      * Fires with the new open state whenever the alert dialog opens or closes, controlled or not.
      * @default undefined — no-op if omitted.
@@ -43,6 +75,55 @@ export interface AlertDialogProps {
      * @default undefined — no-op if omitted.
      */
     onOpenChangeComplete?: (open: boolean) => void;
+    /**
+     * The derived panel's title, rendered as an `AlertDialogTitle`. Only read
+     * when `children` is omitted.
+     * @default undefined — no derived title.
+     */
+    title?: string;
+    /**
+     * The derived panel's description, rendered as an `AlertDialogDescription`.
+     * Only read when `children` is omitted.
+     * @default undefined — no derived description.
+     */
+    description?: string;
+    /**
+     * Label of the derived primary action button. Only read when `children`
+     * is omitted.
+     * @default 'Confirm'
+     */
+    confirmLabel?: string;
+    /**
+     * Label of the derived `AlertDialogCancel` button. Only read when
+     * `children` is omitted.
+     * @default 'Cancel'
+     */
+    cancelLabel?: string;
+    /**
+     * Fires when the derived primary action button is clicked, before it
+     * closes the alert dialog. Call `event.preventDefault()` to keep it open —
+     * the same veto `AlertDialogAction` documents, for an asynchronous
+     * confirmation that must stay up until the request settles. Only read
+     * when `children` is omitted.
+     * @default undefined — no-op if omitted.
+     */
+    onConfirm?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Fires when the derived `AlertDialogCancel` button is clicked, before it
+     * closes the alert dialog. Call `event.preventDefault()` to keep it open.
+     * Only read when `children` is omitted.
+     * @default undefined — no-op if omitted.
+     */
+    onCancel?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Semantic emphasis of the derived primary Action button, reflected as
+     * `data-tone` on that button for a skin to style from — `'danger'` for a
+     * destructive confirmation. The panel never carries it: this family is
+     * styled identically to `Dialog` otherwise. Only read when `children` is
+     * omitted.
+     * @default 'neutral'
+     */
+    tone?: AlertDialogTone;
 }
 /** Props for {@link AlertDialogTrigger}, the button that opens the alert dialog. */
 export interface AlertDialogTriggerProps extends PrimitivePropsWithRef<'button'> {
@@ -76,9 +157,43 @@ export interface AlertDialogContentProps extends PrimitivePropsWithRef<'div'> {
      * @default false
      */
     forceMount?: boolean;
+    /**
+     * CSS selector for the element inside this panel that should receive focus
+     * when the alert dialog opens, instead of the `AlertDialogCancel` button.
+     *
+     * Resolved with `querySelector` against the panel itself, and only when
+     * `onOpenAutoFocus` did **not** call `preventDefault()` — a vetoed event
+     * means the consumer is placing focus by hand and this prop would fight it.
+     * A selector matching nothing falls back to Cancel, then the first tabbable
+     * element, then the panel, and warns: an always-modal panel with focus
+     * stranded on `<body>` is unreachable from the keyboard.
+     *
+     * A selector string rather than an element handle so the same member exists
+     * as the `initial-focus` attribute on `<skdx-alert-dialog-content>`.
+     * @default undefined — focus lands on `AlertDialogCancel`.
+     */
+    initialFocus?: string;
+    /**
+     * CSS selector for the element that should receive focus when the alert
+     * dialog closes, instead of whatever was focused before it opened.
+     *
+     * Resolved with `querySelector` against the whole **document**, not this
+     * panel: the return target is outside the panel by definition, and here it is
+     * routinely not the trigger either — the row whose deletion this alert dialog
+     * just confirmed is gone, and its trigger went with it. That vanished-trigger
+     * case is the common one for this family, which is why the prop earns its
+     * keep here more than on any other overlay.
+     *
+     * Applied only when `onCloseAutoFocus` did not call `preventDefault()`; a
+     * selector matching nothing falls back to the previously focused element and
+     * warns.
+     * @default undefined — focus returns to the element focused before opening.
+     */
+    finalFocus?: string;
     /**
      * Fires when Escape is pressed while the alert dialog is open. Call `event.preventDefault()` to stop it from closing.
-     * @default undefined — Escape closes the alert dialog.
+     * Fires under `dismiss="none"` too, where the close it announces does not happen.
+     * @default undefined — Escape closes the alert dialog, unless the root's `dismiss` is `'none'`.
      */
     onEscapeKeyDown?: (event: KeyboardEvent) => void;
     /**
@@ -97,13 +212,13 @@ export interface AlertDialogContentProps extends PrimitivePropsWithRef<'div'> {
      */
     onInteractOutside?: (event: InteractOutsideEvent) => void;
     /**
-     * Fires before focus moves to the `AlertDialogCancel` button on open. Call `event.preventDefault()` to keep focus where it is and place it yourself.
-     * @default undefined — focus moves to Cancel (or the first tabbable element).
+     * Fires before focus moves to the `AlertDialogCancel` button on open — or to `initialFocus`, when that selector matches. Call `event.preventDefault()` to keep focus where it is and place it yourself; that also suppresses `initialFocus`.
+     * @default undefined — focus moves to `initialFocus`, then Cancel, then the first tabbable element.
      */
     onOpenAutoFocus?: (event: AutoFocusEvent) => void;
     /**
-     * Fires before focus returns to the previously focused element on close. Call `event.preventDefault()` to suppress the return — useful when the trigger no longer exists.
-     * @default undefined — focus returns to the element focused before the alert dialog opened.
+     * Fires before focus returns to the previously focused element on close — or to `finalFocus`, when that selector matches. Call `event.preventDefault()` to suppress the return entirely, `finalFocus` included; `finalFocus` is the declarative form of the same redirect for the common vanished-trigger case.
+     * @default undefined — focus returns to `finalFocus`, else to the element focused before the alert dialog opened.
      */
     onCloseAutoFocus?: (event: AutoFocusEvent) => void;
 }

package/dist/angle-slider/AngleSlider.cjs

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

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

@@ -5,14 +5,12 @@ 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 DOM, not registry—dynamic marks need no bookkeeping.
  */
 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: {
@@ -40,21 +38,26 @@ export declare const AngleSliderProvider: {
  * 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`.
+ * no ends. The arrows are **not** mirrored under `dir="rtl"`: a circle has no
+ * writing direction, and the pointer geometry is a fixed clockwise-from-12
+ * convention that no stylesheet flips.
  *
  * Give the root an accessible name (`aria-label` or `aria-labelledby`) — an
  * unnamed slider announces a bare number of degrees.
  *
+ * Given no `children` it draws the derived anatomy from `marks`. Given
+ * children, they are rendered verbatim for full manual composition — only
+ * presence is inspected, never what the children are; 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>>;

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

@@ -5,14 +5,12 @@ 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 DOM, not registry—dynamic marks need no bookkeeping.
  */
 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: {
@@ -40,21 +38,26 @@ export declare const AngleSliderProvider: {
  * 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`.
+ * no ends. The arrows are **not** mirrored under `dir="rtl"`: a circle has no
+ * writing direction, and the pointer geometry is a fixed clockwise-from-12
+ * convention that no stylesheet flips.
  *
  * Give the root an accessible name (`aria-label` or `aria-labelledby`) — an
  * unnamed slider announces a bare number of degrees.
  *
+ * Given no `children` it draws the derived anatomy from `marks`. Given
+ * children, they are rendered verbatim for full manual composition — only
+ * presence is inspected, never what the children are; 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>>;

package/dist/angle-slider/AngleSlider.js

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

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

@@ -0,0 +1,11 @@
+import type { AngleSliderMarkData } from './types.cjs';
+/**
+ * The anatomy an {@link AngleSlider} draws when given no children: one
+ * derived `AngleSliderMark` per entry in `marks`, grouped in a `AngleSliderMarks` container, plus
+ * the `AngleSliderThumb`.
+ *
+ * @internal
+ */
+export declare const AngleSliderAnatomy: ({ marks }: {
+    marks?: readonly AngleSliderMarkData[];
+}) => import("react").JSX.Element;

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

@@ -0,0 +1,11 @@
+import type { AngleSliderMarkData } from './types.js';
+/**
+ * The anatomy an {@link AngleSlider} draws when given no children: one
+ * derived `AngleSliderMark` per entry in `marks`, grouped in a `AngleSliderMarks` container, plus
+ * the `AngleSliderThumb`.
+ *
+ * @internal
+ */
+export declare const AngleSliderAnatomy: ({ marks }: {
+    marks?: readonly AngleSliderMarkData[];
+}) => import("react").JSX.Element;

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

@@ -1,11 +1,8 @@
 import * 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>

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

@@ -1,11 +1,8 @@
 import * 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>