@skdx/react 0.26.0

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

@@ -0,0 +1,121 @@
+import type * as React from 'react';
+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';
+/** @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>;
+    contentRef: React.RefObject<HTMLDivElement | null>;
+    contentId: string;
+    titleId: string;
+    descriptionId: string;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}
+/** Props for the {@link AlertDialog} root. */
+export interface AlertDialogProps {
+    /**
+     * The alert dialog's parts — typically an `AlertDialogTrigger` and an `AlertDialogPortal`.
+     * @default undefined — renders nothing if omitted.
+     */
+    children?: React.ReactNode;
+    /**
+     * Whether the alert dialog is open, for controlled usage. Pair with `onOpenChange`.
+     * @default undefined — uncontrolled, tracks its own open state internally.
+     */
+    open?: boolean;
+    /**
+     * Whether the alert dialog is initially open, for uncontrolled usage.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Fires with the new open state whenever the alert dialog opens or closes, controlled or not.
+     * @default undefined — no-op if omitted.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Fires with the new open state once the change has finished on screen —
+     * after `AlertDialogContent`'s enter or exit animation ends, or as soon as it has
+     * settled when the panel declares no animation. Use it for work that must not race
+     * the transition; use `onOpenChange` for work that must not wait for it.
+     * @default undefined — no-op if omitted.
+     */
+    onOpenChangeComplete?: (open: boolean) => void;
+}
+/** Props for {@link AlertDialogTrigger}, the button that opens the alert dialog. */
+export interface AlertDialogTriggerProps extends PrimitivePropsWithRef<'button'> {
+}
+/** Props for {@link AlertDialogPortal}, which teleports its children to `document.body`. */
+export interface AlertDialogPortalProps extends PortalProps {
+    /**
+     * Render the portal even while the alert dialog is closed, instead of
+     * unmounting it. Useful for animation libraries that need the outgoing
+     * content present in the DOM during an exit transition.
+     * @default false
+     */
+    forceMount?: boolean;
+}
+/** Props for {@link AlertDialogOverlay}, the backdrop rendered behind `AlertDialogContent`. */
+export interface AlertDialogOverlayProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Keep this overlay mounted even while the alert dialog is closed. Useful
+     * for animation libraries that need the outgoing overlay present in the
+     * DOM during an exit transition.
+     * @default false
+     */
+    forceMount?: boolean;
+}
+/** Props for {@link AlertDialogContent}, the alert dialog's panel. */
+export interface AlertDialogContentProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Keep this panel mounted even while the alert dialog is closed. Useful
+     * for animation libraries that need the outgoing panel present in the DOM
+     * during an exit transition.
+     * @default false
+     */
+    forceMount?: boolean;
+    /**
+     * 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.
+     */
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    /**
+     * Fires on pointer-down outside the content. Notification only — an outside interaction never closes the alert dialog, so there is nothing to prevent.
+     * @default undefined — no-op if omitted.
+     */
+    onPointerDownOutside?: (event: PointerEvent) => void;
+    /**
+     * Fires when focus moves to an element outside the content. Notification only — an outside interaction never closes the alert dialog. Receives a cancelable stand-in carrying the original `focusin` as its `detail`, since `focusin` itself cannot be canceled.
+     * @default undefined — no-op if omitted.
+     */
+    onFocusOutside?: (event: FocusOutsideEvent) => void;
+    /**
+     * Fires for either kind of outside interaction — pointer-down or focus — immediately before the specific handler above and with the same event. Notification only, like the two above.
+     * @default undefined — no-op if omitted.
+     */
+    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).
+     */
+    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.
+     */
+    onCloseAutoFocus?: (event: AutoFocusEvent) => void;
+}
+/** Props for {@link AlertDialogTitle}, the alert dialog's accessible name. */
+export interface AlertDialogTitleProps extends PrimitivePropsWithRef<'h2'> {
+}
+/** Props for {@link AlertDialogDescription}, the alert dialog's accessible description. */
+export interface AlertDialogDescriptionProps extends PrimitivePropsWithRef<'p'> {
+}
+/** Props for {@link AlertDialogAction}, the button confirming the destructive/primary action. */
+export interface AlertDialogActionProps extends PrimitivePropsWithRef<'button'> {
+}
+/** Props for {@link AlertDialogCancel}, the button that dismisses the alert dialog safely. Receives initial focus on open. */
+export interface AlertDialogCancelProps extends PrimitivePropsWithRef<'button'> {
+}

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

@@ -0,0 +1,121 @@
+import type * as React from 'react';
+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';
+/** @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>;
+    contentRef: React.RefObject<HTMLDivElement | null>;
+    contentId: string;
+    titleId: string;
+    descriptionId: string;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}
+/** Props for the {@link AlertDialog} root. */
+export interface AlertDialogProps {
+    /**
+     * The alert dialog's parts — typically an `AlertDialogTrigger` and an `AlertDialogPortal`.
+     * @default undefined — renders nothing if omitted.
+     */
+    children?: React.ReactNode;
+    /**
+     * Whether the alert dialog is open, for controlled usage. Pair with `onOpenChange`.
+     * @default undefined — uncontrolled, tracks its own open state internally.
+     */
+    open?: boolean;
+    /**
+     * Whether the alert dialog is initially open, for uncontrolled usage.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Fires with the new open state whenever the alert dialog opens or closes, controlled or not.
+     * @default undefined — no-op if omitted.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Fires with the new open state once the change has finished on screen —
+     * after `AlertDialogContent`'s enter or exit animation ends, or as soon as it has
+     * settled when the panel declares no animation. Use it for work that must not race
+     * the transition; use `onOpenChange` for work that must not wait for it.
+     * @default undefined — no-op if omitted.
+     */
+    onOpenChangeComplete?: (open: boolean) => void;
+}
+/** Props for {@link AlertDialogTrigger}, the button that opens the alert dialog. */
+export interface AlertDialogTriggerProps extends PrimitivePropsWithRef<'button'> {
+}
+/** Props for {@link AlertDialogPortal}, which teleports its children to `document.body`. */
+export interface AlertDialogPortalProps extends PortalProps {
+    /**
+     * Render the portal even while the alert dialog is closed, instead of
+     * unmounting it. Useful for animation libraries that need the outgoing
+     * content present in the DOM during an exit transition.
+     * @default false
+     */
+    forceMount?: boolean;
+}
+/** Props for {@link AlertDialogOverlay}, the backdrop rendered behind `AlertDialogContent`. */
+export interface AlertDialogOverlayProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Keep this overlay mounted even while the alert dialog is closed. Useful
+     * for animation libraries that need the outgoing overlay present in the
+     * DOM during an exit transition.
+     * @default false
+     */
+    forceMount?: boolean;
+}
+/** Props for {@link AlertDialogContent}, the alert dialog's panel. */
+export interface AlertDialogContentProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Keep this panel mounted even while the alert dialog is closed. Useful
+     * for animation libraries that need the outgoing panel present in the DOM
+     * during an exit transition.
+     * @default false
+     */
+    forceMount?: boolean;
+    /**
+     * 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.
+     */
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    /**
+     * Fires on pointer-down outside the content. Notification only — an outside interaction never closes the alert dialog, so there is nothing to prevent.
+     * @default undefined — no-op if omitted.
+     */
+    onPointerDownOutside?: (event: PointerEvent) => void;
+    /**
+     * Fires when focus moves to an element outside the content. Notification only — an outside interaction never closes the alert dialog. Receives a cancelable stand-in carrying the original `focusin` as its `detail`, since `focusin` itself cannot be canceled.
+     * @default undefined — no-op if omitted.
+     */
+    onFocusOutside?: (event: FocusOutsideEvent) => void;
+    /**
+     * Fires for either kind of outside interaction — pointer-down or focus — immediately before the specific handler above and with the same event. Notification only, like the two above.
+     * @default undefined — no-op if omitted.
+     */
+    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).
+     */
+    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.
+     */
+    onCloseAutoFocus?: (event: AutoFocusEvent) => void;
+}
+/** Props for {@link AlertDialogTitle}, the alert dialog's accessible name. */
+export interface AlertDialogTitleProps extends PrimitivePropsWithRef<'h2'> {
+}
+/** Props for {@link AlertDialogDescription}, the alert dialog's accessible description. */
+export interface AlertDialogDescriptionProps extends PrimitivePropsWithRef<'p'> {
+}
+/** Props for {@link AlertDialogAction}, the button confirming the destructive/primary action. */
+export interface AlertDialogActionProps extends PrimitivePropsWithRef<'button'> {
+}
+/** Props for {@link AlertDialogCancel}, the button that dismisses the alert dialog safely. Receives initial focus on open. */
+export interface AlertDialogCancelProps extends PrimitivePropsWithRef<'button'> {
+}

package/dist/angle-slider/AngleSlider.cjs

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

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

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import type { AngleSliderContextValue, AngleSliderProps } from './types.cjs';
+/** @internal Marks are found by attribute at interaction time — no registration plumbing. */
+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.
+ */
+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.
+ */
+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;
+/**
+ * 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.
+ *
+ * **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.
+ *
+ * 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.
+ *
+ * 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`.
+ *
+ * Give the root an accessible name (`aria-label` or `aria-labelledby`) — an
+ * unnamed slider announces a bare number of degrees.
+ *
+ * @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>
+ * ```
+ */
+export declare const AngleSlider: React.ForwardRefExoticComponent<Omit<AngleSliderProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import type { AngleSliderContextValue, AngleSliderProps } from './types.js';
+/** @internal Marks are found by attribute at interaction time — no registration plumbing. */
+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.
+ */
+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.
+ */
+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;
+/**
+ * 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.
+ *
+ * **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.
+ *
+ * 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.
+ *
+ * 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`.
+ *
+ * Give the root an accessible name (`aria-label` or `aria-labelledby`) — an
+ * unnamed slider announces a bare number of degrees.
+ *
+ * @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>
+ * ```
+ */
+export declare const AngleSlider: React.ForwardRefExoticComponent<Omit<AngleSliderProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/angle-slider/AngleSlider.js

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

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

@@ -0,0 +1,35 @@
+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.
+ *
+ * ```css
+ * .my-mark {
+ *   transform: rotate(var(--skdx-angle-slider-mark-angle)) translateY(-70px);
+ * }
+ * ```
+ *
+ * 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>
+ *   <AngleSliderMarks>
+ *     <AngleSliderMark value={0}>N</AngleSliderMark>
+ *     <AngleSliderMark value={90}>E</AngleSliderMark>
+ *     <AngleSliderMark value={180}>S</AngleSliderMark>
+ *     <AngleSliderMark value={270}>W</AngleSliderMark>
+ *   </AngleSliderMarks>
+ *   <AngleSliderThumb />
+ * </AngleSlider>
+ * ```
+ */
+export declare const AngleSliderMark: React.ForwardRefExoticComponent<Omit<AngleSliderMarkProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,35 @@
+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.
+ *
+ * ```css
+ * .my-mark {
+ *   transform: rotate(var(--skdx-angle-slider-mark-angle)) translateY(-70px);
+ * }
+ * ```
+ *
+ * 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>
+ *   <AngleSliderMarks>
+ *     <AngleSliderMark value={0}>N</AngleSliderMark>
+ *     <AngleSliderMark value={90}>E</AngleSliderMark>
+ *     <AngleSliderMark value={180}>S</AngleSliderMark>
+ *     <AngleSliderMark value={270}>W</AngleSliderMark>
+ *   </AngleSliderMarks>
+ *   <AngleSliderThumb />
+ * </AngleSlider>
+ * ```
+ */
+export declare const AngleSliderMark: React.ForwardRefExoticComponent<Omit<AngleSliderMarkProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,25 @@
+import * 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.
+ *
+ * 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.
+ *
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * <AngleSliderMarks>
+ *   {[0, 90, 180, 270].map((angle) => (
+ *     <AngleSliderMark key={angle} value={angle} />
+ *   ))}
+ * </AngleSliderMarks>
+ * ```
+ */
+export declare const AngleSliderMarks: React.ForwardRefExoticComponent<Omit<AngleSliderMarksProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,25 @@
+import * 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.
+ *
+ * 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.
+ *
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * <AngleSliderMarks>
+ *   {[0, 90, 180, 270].map((angle) => (
+ *     <AngleSliderMark key={angle} value={angle} />
+ *   ))}
+ * </AngleSliderMarks>
+ * ```
+ */
+export declare const AngleSliderMarks: React.ForwardRefExoticComponent<Omit<AngleSliderMarksProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,29 @@
+import * 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.
+ *
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * <AngleSlider aria-label="Gradient angle" defaultValue={45}>
+ *   <AngleSliderThumb className="my-thumb" />
+ * </AngleSlider>
+ * ```
+ */
+export declare const AngleSliderThumb: React.ForwardRefExoticComponent<Omit<AngleSliderThumbProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,29 @@
+import * 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.
+ *
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * <AngleSlider aria-label="Gradient angle" defaultValue={45}>
+ *   <AngleSliderThumb className="my-thumb" />
+ * </AngleSlider>
+ * ```
+ */
+export declare const AngleSliderThumb: React.ForwardRefExoticComponent<Omit<AngleSliderThumbProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,5 @@
+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/index.d.ts

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