@skdx/react 0.26.0

package/dist/popover/PopoverClose.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { PopoverCloseProps } from './types.js';
+/**
+ * Button that closes the popover when clicked. Renders inside
+ * `PopoverContent` anywhere you like.
+ *
+ * @example
+ * ```tsx
+ * <PopoverContent>
+ *   <PopoverClose aria-label="Close">✕</PopoverClose>
+ * </PopoverContent>
+ * ```
+ */
+export declare const PopoverClose: React.ForwardRefExoticComponent<Omit<PopoverCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/popover/PopoverContent.d.cts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import type { PopoverContentProps } from './types.cjs';
+/**
+ * The popover's floating panel: `role="dialog"` with `data-state`
+ * (`open`/`closed`), positioned via the shared popper layer against the
+ * trigger (or `PopoverAnchor`) using `side`/`align`/`sideOffset` (defaults
+ * to `4`, overriding the popper default of `0`)/`alignOffset` and flipping/
+ * shifting to avoid viewport collisions unless `avoidCollisions` is `false`.
+ * Also exposes `data-side`/`data-align` reflecting the resolved placement, and
+ * the measurement custom properties `--skdx-popover-available-width` /
+ * `-available-height` / `-trigger-width` / `-transform-origin`, so the panel
+ * can be sized and animated from CSS without measuring anything by hand.
+ * Traps focus when the popover is `modal`. Closes on Escape (returning focus
+ * to the trigger) or on an outside interaction: pointer-down outside or focus
+ * moving outside, each reported to `onPointerDownOutside`/`onFocusOutside`
+ * and, just before them and with the same event, to `onInteractOutside`. Any
+ * of those (or `onEscapeKeyDown`) calling `event.preventDefault()` keeps it
+ * open. Both focus moves the popover makes on the consumer's behalf are
+ * announced first as cancelable `onOpenAutoFocus`/`onCloseAutoFocus` — the
+ * latter also covers the manual return to the trigger a non-modal popover
+ * does on Escape, where there is no trap to do it. Mounts only while open
+ * unless `forceMount` is set.
+ *
+ * @example
+ * ```tsx
+ * <PopoverPortal>
+ *   <PopoverContent side="right" align="start" sideOffset={8}>
+ *     <p>Popover content.</p>
+ *     <PopoverArrow />
+ *   </PopoverContent>
+ * </PopoverPortal>
+ * ```
+ */
+export declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/popover/PopoverContent.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import type { PopoverContentProps } from './types.js';
+/**
+ * The popover's floating panel: `role="dialog"` with `data-state`
+ * (`open`/`closed`), positioned via the shared popper layer against the
+ * trigger (or `PopoverAnchor`) using `side`/`align`/`sideOffset` (defaults
+ * to `4`, overriding the popper default of `0`)/`alignOffset` and flipping/
+ * shifting to avoid viewport collisions unless `avoidCollisions` is `false`.
+ * Also exposes `data-side`/`data-align` reflecting the resolved placement, and
+ * the measurement custom properties `--skdx-popover-available-width` /
+ * `-available-height` / `-trigger-width` / `-transform-origin`, so the panel
+ * can be sized and animated from CSS without measuring anything by hand.
+ * Traps focus when the popover is `modal`. Closes on Escape (returning focus
+ * to the trigger) or on an outside interaction: pointer-down outside or focus
+ * moving outside, each reported to `onPointerDownOutside`/`onFocusOutside`
+ * and, just before them and with the same event, to `onInteractOutside`. Any
+ * of those (or `onEscapeKeyDown`) calling `event.preventDefault()` keeps it
+ * open. Both focus moves the popover makes on the consumer's behalf are
+ * announced first as cancelable `onOpenAutoFocus`/`onCloseAutoFocus` — the
+ * latter also covers the manual return to the trigger a non-modal popover
+ * does on Escape, where there is no trap to do it. Mounts only while open
+ * unless `forceMount` is set.
+ *
+ * @example
+ * ```tsx
+ * <PopoverPortal>
+ *   <PopoverContent side="right" align="start" sideOffset={8}>
+ *     <p>Popover content.</p>
+ *     <PopoverArrow />
+ *   </PopoverContent>
+ * </PopoverPortal>
+ * ```
+ */
+export declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/popover/PopoverPortal.d.cts

@@ -0,0 +1,20 @@
+import type { PopoverPortalProps } from './types.cjs';
+/**
+ * Teleports `PopoverContent` to `document.body` (or a custom `container`),
+ * so the popover escapes any clipping/`overflow` ancestors. Mounts only
+ * while open unless `forceMount` is set.
+ *
+ * @example
+ * ```tsx
+ * <Popover>
+ *   <PopoverTrigger>Open</PopoverTrigger>
+ *   <PopoverPortal>
+ *     <PopoverContent>…</PopoverContent>
+ *   </PopoverPortal>
+ * </Popover>
+ * ```
+ */
+export declare const PopoverPortal: {
+    ({ forceMount, children, ...props }: PopoverPortalProps): import("react").JSX.Element | null;
+    displayName: string;
+};

package/dist/popover/PopoverPortal.d.ts

@@ -0,0 +1,20 @@
+import type { PopoverPortalProps } from './types.js';
+/**
+ * Teleports `PopoverContent` to `document.body` (or a custom `container`),
+ * so the popover escapes any clipping/`overflow` ancestors. Mounts only
+ * while open unless `forceMount` is set.
+ *
+ * @example
+ * ```tsx
+ * <Popover>
+ *   <PopoverTrigger>Open</PopoverTrigger>
+ *   <PopoverPortal>
+ *     <PopoverContent>…</PopoverContent>
+ *   </PopoverPortal>
+ * </Popover>
+ * ```
+ */
+export declare const PopoverPortal: {
+    ({ forceMount, children, ...props }: PopoverPortalProps): import("react").JSX.Element | null;
+    displayName: string;
+};

package/dist/popover/PopoverTrigger.d.cts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { PopoverTriggerProps } from './types.cjs';
+/**
+ * Button that opens the popover when clicked and doubles as the default
+ * positioning anchor for `PopoverContent`. Sets `aria-haspopup="dialog"`,
+ * `aria-expanded`, `aria-controls`, and `data-state` (`open`/`closed`).
+ *
+ * @example
+ * ```tsx
+ * <Popover>
+ *   <PopoverTrigger>Open</PopoverTrigger>
+ *   <PopoverPortal>
+ *     <PopoverContent>…</PopoverContent>
+ *   </PopoverPortal>
+ * </Popover>
+ * ```
+ */
+export declare const PopoverTrigger: React.ForwardRefExoticComponent<Omit<PopoverTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/popover/PopoverTrigger.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { PopoverTriggerProps } from './types.js';
+/**
+ * Button that opens the popover when clicked and doubles as the default
+ * positioning anchor for `PopoverContent`. Sets `aria-haspopup="dialog"`,
+ * `aria-expanded`, `aria-controls`, and `data-state` (`open`/`closed`).
+ *
+ * @example
+ * ```tsx
+ * <Popover>
+ *   <PopoverTrigger>Open</PopoverTrigger>
+ *   <PopoverPortal>
+ *     <PopoverContent>…</PopoverContent>
+ *   </PopoverPortal>
+ * </Popover>
+ * ```
+ */
+export declare const PopoverTrigger: React.ForwardRefExoticComponent<Omit<PopoverTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/popover/index.d.cts

@@ -0,0 +1,6 @@
+export * from './Popover.cjs';
+export { PopoverTrigger } from './PopoverTrigger.cjs';
+export { PopoverPortal } from './PopoverPortal.cjs';
+export { PopoverContent } from './PopoverContent.cjs';
+export { PopoverClose } from './PopoverClose.cjs';
+export type { PopoverProps, PopoverTriggerProps, PopoverPortalProps, PopoverContentProps, PopoverCloseProps, } from './types.cjs';

package/dist/popover/index.d.ts

@@ -0,0 +1,6 @@
+export * from './Popover.js';
+export { PopoverTrigger } from './PopoverTrigger.js';
+export { PopoverPortal } from './PopoverPortal.js';
+export { PopoverContent } from './PopoverContent.js';
+export { PopoverClose } from './PopoverClose.js';
+export type { PopoverProps, PopoverTriggerProps, PopoverPortalProps, PopoverContentProps, PopoverCloseProps, } from './types.js';

package/dist/popover/types.d.cts

@@ -0,0 +1,112 @@
+import type * as React from 'react';
+import type { PopperContentProps } from '../utils/popper.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';
+/** @internal Shared state distributed from {@link Popover} to its parts via context. Not part of the public API. */
+export interface PopoverContextValue {
+    triggerRef: React.RefObject<HTMLButtonElement | null>;
+    contentRef: React.RefObject<HTMLDivElement | null>;
+    contentId: string;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    modal: boolean;
+}
+/** Props for the {@link Popover} root. */
+export interface PopoverProps {
+    /**
+     * The trigger, portal, and content parts, distributed open state via context.
+     * @default undefined
+     */
+    children?: React.ReactNode;
+    /**
+     * Whether the popover is open, for controlled usage. Pair with `onOpenChange`.
+     * @default undefined — uncontrolled, tracks its own open state internally.
+     */
+    open?: boolean;
+    /**
+     * Whether the popover is initially open, for uncontrolled usage.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Fires with the new open state whenever the popover 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 `PopoverContent`'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;
+    /**
+     * Whether `PopoverContent` traps focus while open. Non-modal (the default)
+     * lets the rest of the page stay interactive.
+     * @default false
+     */
+    modal?: boolean;
+}
+/** Props for {@link PopoverTrigger}, the button that opens the popover and anchors its position. */
+export interface PopoverTriggerProps extends PrimitivePropsWithRef<'button'> {
+}
+/** Props for {@link PopoverPortal}, which teleports its children to `document.body`. */
+export interface PopoverPortalProps extends PortalProps {
+    /**
+     * Render the portal even while the popover 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 PopoverContent}, the floating panel. Extends the shared
+ * popper positioning props (`side`, `align`, `sideOffset`, `alignOffset`,
+ * `avoidCollisions`, `collisionPadding`, `collisionBoundary`).
+ */
+export interface PopoverContentProps extends PopperContentProps {
+    /**
+     * Keep this panel mounted even while the popover 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 popover is open. Call `event.preventDefault()` to stop it from closing.
+     * @default undefined — no-op if omitted.
+     */
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    /**
+     * Fires on pointer-down outside the content. Call `event.preventDefault()` to stop the popover from closing.
+     * @default undefined — no-op if omitted.
+     */
+    onPointerDownOutside?: (event: PointerEvent) => void;
+    /**
+     * Fires when focus moves to an element outside the content. Call `event.preventDefault()` to stop the popover from closing. 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, so one `event.preventDefault()` here vetoes the dismissal whichever way it was triggered.
+     * @default undefined — no-op if omitted.
+     */
+    onInteractOutside?: (event: InteractOutsideEvent) => void;
+    /**
+     * Fires before focus moves into the content on open. Call `event.preventDefault()` to keep focus where it is and place it yourself. Modal popovers only — a non-modal popover never moves focus in.
+     * @default undefined — focus moves to the first tabbable element.
+     */
+    onOpenAutoFocus?: (event: AutoFocusEvent) => void;
+    /**
+     * Fires before focus returns to the trigger (or, when `modal`, to whatever was focused before the popover opened). Call `event.preventDefault()` to suppress the return.
+     * @default undefined — focus returns to the trigger.
+     */
+    onCloseAutoFocus?: (event: AutoFocusEvent) => void;
+}
+/** Props for {@link PopoverClose}, a button that closes the popover. */
+export interface PopoverCloseProps extends PrimitivePropsWithRef<'button'> {
+}

package/dist/popover/types.d.ts

@@ -0,0 +1,112 @@
+import type * as React from 'react';
+import type { PopperContentProps } from '../utils/popper.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';
+/** @internal Shared state distributed from {@link Popover} to its parts via context. Not part of the public API. */
+export interface PopoverContextValue {
+    triggerRef: React.RefObject<HTMLButtonElement | null>;
+    contentRef: React.RefObject<HTMLDivElement | null>;
+    contentId: string;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    modal: boolean;
+}
+/** Props for the {@link Popover} root. */
+export interface PopoverProps {
+    /**
+     * The trigger, portal, and content parts, distributed open state via context.
+     * @default undefined
+     */
+    children?: React.ReactNode;
+    /**
+     * Whether the popover is open, for controlled usage. Pair with `onOpenChange`.
+     * @default undefined — uncontrolled, tracks its own open state internally.
+     */
+    open?: boolean;
+    /**
+     * Whether the popover is initially open, for uncontrolled usage.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Fires with the new open state whenever the popover 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 `PopoverContent`'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;
+    /**
+     * Whether `PopoverContent` traps focus while open. Non-modal (the default)
+     * lets the rest of the page stay interactive.
+     * @default false
+     */
+    modal?: boolean;
+}
+/** Props for {@link PopoverTrigger}, the button that opens the popover and anchors its position. */
+export interface PopoverTriggerProps extends PrimitivePropsWithRef<'button'> {
+}
+/** Props for {@link PopoverPortal}, which teleports its children to `document.body`. */
+export interface PopoverPortalProps extends PortalProps {
+    /**
+     * Render the portal even while the popover 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 PopoverContent}, the floating panel. Extends the shared
+ * popper positioning props (`side`, `align`, `sideOffset`, `alignOffset`,
+ * `avoidCollisions`, `collisionPadding`, `collisionBoundary`).
+ */
+export interface PopoverContentProps extends PopperContentProps {
+    /**
+     * Keep this panel mounted even while the popover 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 popover is open. Call `event.preventDefault()` to stop it from closing.
+     * @default undefined — no-op if omitted.
+     */
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    /**
+     * Fires on pointer-down outside the content. Call `event.preventDefault()` to stop the popover from closing.
+     * @default undefined — no-op if omitted.
+     */
+    onPointerDownOutside?: (event: PointerEvent) => void;
+    /**
+     * Fires when focus moves to an element outside the content. Call `event.preventDefault()` to stop the popover from closing. 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, so one `event.preventDefault()` here vetoes the dismissal whichever way it was triggered.
+     * @default undefined — no-op if omitted.
+     */
+    onInteractOutside?: (event: InteractOutsideEvent) => void;
+    /**
+     * Fires before focus moves into the content on open. Call `event.preventDefault()` to keep focus where it is and place it yourself. Modal popovers only — a non-modal popover never moves focus in.
+     * @default undefined — focus moves to the first tabbable element.
+     */
+    onOpenAutoFocus?: (event: AutoFocusEvent) => void;
+    /**
+     * Fires before focus returns to the trigger (or, when `modal`, to whatever was focused before the popover opened). Call `event.preventDefault()` to suppress the return.
+     * @default undefined — focus returns to the trigger.
+     */
+    onCloseAutoFocus?: (event: AutoFocusEvent) => void;
+}
+/** Props for {@link PopoverClose}, a button that closes the popover. */
+export interface PopoverCloseProps extends PrimitivePropsWithRef<'button'> {
+}

package/dist/progress/Progress.cjs

@@ -0,0 +1 @@
+"use strict";var q=Object.create;var c=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var J=(r,e)=>{for(var s in e)c(r,s,{get:e[s],enumerable:!0})},S=(r,e,s,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of A(e))!F.call(r,o)&&o!==s&&c(r,o,{get:()=>e[o],enumerable:!(t=z(e,o))||t.enumerable});return r};var d=(r,e,s)=>(s=r!=null?q(B(r)):{},S(e||!r||!r.__esModule?c(s,"default",{value:r,enumerable:!0}):s,r)),K=r=>S(c({},"__esModule",{value:!0}),r);var X={};J(X,{Progress:()=>k,ProgressCircle:()=>f,ProgressCircleIndicator:()=>C,ProgressIndicator:()=>p,ProgressProvider:()=>b,getState:()=>a,useProgressContext:()=>n});module.exports=K(X);var v=d(require("react"),1),y=require("../utils/createContext.cjs"),R=require("../utils/part.cjs"),I=require("../utils/primitive.cjs"),P=require("react/jsx-runtime"),[b,n]=(0,y.createSafeContext)("Progress");function O(r,e){return`${Math.round(r/e*100)}%`}function a(r,e){return r==null?"indeterminate":r>=e?"complete":"loading"}var k=v.forwardRef(({value:r=null,max:e=100,getValueLabel:s=O,...t},o)=>{let i=r==null?null:Math.min(Math.max(r,0),e);return(0,P.jsx)(b,{value:i,max:e,children:(0,P.jsx)(I.Primitive.div,{role:"progressbar","aria-valuemin":0,"aria-valuemax":e,"aria-valuenow":i??void 0,"aria-valuetext":i!=null?s(i,e):void 0,"data-state":a(i,e),"data-value":i??void 0,"data-max":e,...t,...(0,R.skdxPart)("progress","root",t.className),ref:o})})});k.displayName="Progress";var h=d(require("react"),1),V=require("../utils/part.cjs"),M=require("../utils/primitive.cjs");var N=require("react/jsx-runtime"),p=h.forwardRef((r,e)=>{let{value:s,max:t}=n("ProgressIndicator");return(0,N.jsx)(M.Primitive.div,{"data-state":a(s,t),"data-value":s??void 0,"data-max":t,...r,...(0,V.skdxPart)("progress","indicator",r.className),ref:e,style:{"--skdx-progress":s!=null?`${s/t*100}%`:void 0,...r.style}})});p.displayName="ProgressIndicator";var W=d(require("react"),1),$=require("../utils/createContext.cjs"),w=require("../utils/part.cjs"),L=require("../utils/primitive.cjs");var u=require("react/jsx-runtime"),[Q,D]=(0,$.createSafeContext)("ProgressCircle"),l=r=>Math.round(r*1e4)/1e4;function U(r,e){return Math.max((r-e)/2,0)}function g(r,e,s){return{"--skdx-progress-circle-circumference":l(r),"--skdx-progress-dasharray":l(r),"--skdx-progress-circle-offset":e==null?void 0:l(r*(1-e/s))}}var f=W.forwardRef(({size:r=48,thickness:e=4,...s},t)=>{let{value:o,max:i}=n("ProgressCircle"),m=U(r,e),x=2*Math.PI*m;return(0,u.jsx)(Q,{size:r,thickness:e,radius:m,circumference:x,children:(0,u.jsx)(L.Primitive.div,{"data-state":a(o,i),"data-value":o??void 0,"data-max":i,...s,...(0,w.skdxPart)("progress","circle",s.className),ref:t,style:{"--skdx-progress-circle-size":r,"--skdx-progress-circle-thickness":e,"--skdx-progress-circle-radius":l(m),...g(x,o,i),...s.style}})})});f.displayName="ProgressCircle";var E=d(require("react"),1),H=require("../utils/part.cjs"),T=require("../utils/primitive.cjs");var G=require("react/jsx-runtime"),C=E.forwardRef((r,e)=>{let{value:s,max:t}=n("ProgressCircleIndicator"),{circumference:o}=D("ProgressCircleIndicator");return(0,G.jsx)(T.Primitive.div,{"data-state":a(s,t),"data-value":s??void 0,"data-max":t,...r,...(0,H.skdxPart)("progress","circle-indicator",r.className),ref:e,style:{"--skdx-progress":s!=null?`${s/t*100}%`:void 0,...g(o,s,t),...r.style}})});C.displayName="ProgressCircleIndicator";0&&(module.exports={Progress,ProgressCircle,ProgressCircleIndicator,ProgressIndicator,ProgressProvider,getState,useProgressContext});

package/dist/progress/Progress.d.cts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import type { ProgressContextValue, ProgressProps } from './types.cjs';
+export declare const ProgressProvider: {
+    (props: ProgressContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useProgressContext: (consumerName: string) => ProgressContextValue;
+/** @internal Maps a progress `value`/`max` to the `data-state` string: `'indeterminate'` when `value` is null, `'complete'` at or above `max`, else `'loading'`. */
+export declare function getState(value: number | null, max: number): "loading" | "indeterminate" | "complete";
+/**
+ * Root of a progress bar: clamps `value` between `0` and `max`, renders
+ * `role="progressbar"` with `aria-valuemin`/`aria-valuemax`/`aria-valuenow`/
+ * `aria-valuetext`, and exposes `data-state` (`"indeterminate"` | `"loading"`
+ * | `"complete"`), `data-value`, and `data-max` for styling. Hands `value`
+ * and `max` down to `ProgressIndicator` via context.
+ *
+ * @example
+ * ```tsx
+ * <Progress value={66}>
+ *   <ProgressIndicator />
+ * </Progress>
+ * ```
+ */
+export declare const Progress: React.ForwardRefExoticComponent<Omit<ProgressProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/progress/Progress.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import type { ProgressContextValue, ProgressProps } from './types.js';
+export declare const ProgressProvider: {
+    (props: ProgressContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useProgressContext: (consumerName: string) => ProgressContextValue;
+/** @internal Maps a progress `value`/`max` to the `data-state` string: `'indeterminate'` when `value` is null, `'complete'` at or above `max`, else `'loading'`. */
+export declare function getState(value: number | null, max: number): "loading" | "indeterminate" | "complete";
+/**
+ * Root of a progress bar: clamps `value` between `0` and `max`, renders
+ * `role="progressbar"` with `aria-valuemin`/`aria-valuemax`/`aria-valuenow`/
+ * `aria-valuetext`, and exposes `data-state` (`"indeterminate"` | `"loading"`
+ * | `"complete"`), `data-value`, and `data-max` for styling. Hands `value`
+ * and `max` down to `ProgressIndicator` via context.
+ *
+ * @example
+ * ```tsx
+ * <Progress value={66}>
+ *   <ProgressIndicator />
+ * </Progress>
+ * ```
+ */
+export declare const Progress: React.ForwardRefExoticComponent<Omit<ProgressProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/progress/Progress.js

@@ -0,0 +1 @@
+import*as p from"react";import{createSafeContext as R}from"../utils/createContext.js";import{skdxPart as I}from"../utils/part.js";import{Primitive as b}from"../utils/primitive.js";import{jsx as P}from"react/jsx-runtime";var[k,n]=R("Progress");function h(r,e){return`${Math.round(r/e*100)}%`}function a(r,e){return r==null?"indeterminate":r>=e?"complete":"loading"}var V=p.forwardRef(({value:r=null,max:e=100,getValueLabel:s=h,...t},i)=>{let o=r==null?null:Math.min(Math.max(r,0),e);return P(k,{value:o,max:e,children:P(b.div,{role:"progressbar","aria-valuemin":0,"aria-valuemax":e,"aria-valuenow":o??void 0,"aria-valuetext":o!=null?s(o,e):void 0,"data-state":a(o,e),"data-value":o??void 0,"data-max":e,...t,...I("progress","root",t.className),ref:i})})});V.displayName="Progress";import*as u from"react";import{skdxPart as M}from"../utils/part.js";import{Primitive as N}from"../utils/primitive.js";import{jsx as W}from"react/jsx-runtime";var g=u.forwardRef((r,e)=>{let{value:s,max:t}=n("ProgressIndicator");return W(N.div,{"data-state":a(s,t),"data-value":s??void 0,"data-max":t,...r,...M("progress","indicator",r.className),ref:e,style:{"--skdx-progress":s!=null?`${s/t*100}%`:void 0,...r.style}})});g.displayName="ProgressIndicator";import*as C from"react";import{createSafeContext as $}from"../utils/createContext.js";import{skdxPart as w}from"../utils/part.js";import{Primitive as L}from"../utils/primitive.js";import{jsx as f}from"react/jsx-runtime";var[D,x]=$("ProgressCircle"),c=r=>Math.round(r*1e4)/1e4;function E(r,e){return Math.max((r-e)/2,0)}function l(r,e,s){return{"--skdx-progress-circle-circumference":c(r),"--skdx-progress-dasharray":c(r),"--skdx-progress-circle-offset":e==null?void 0:c(r*(1-e/s))}}var S=C.forwardRef(({size:r=48,thickness:e=4,...s},t)=>{let{value:i,max:o}=n("ProgressCircle"),d=E(r,e),m=2*Math.PI*d;return f(D,{size:r,thickness:e,radius:d,circumference:m,children:f(L.div,{"data-state":a(i,o),"data-value":i??void 0,"data-max":o,...s,...w("progress","circle",s.className),ref:t,style:{"--skdx-progress-circle-size":r,"--skdx-progress-circle-thickness":e,"--skdx-progress-circle-radius":c(d),...l(m,i,o),...s.style}})})});S.displayName="ProgressCircle";import*as v from"react";import{skdxPart as H}from"../utils/part.js";import{Primitive as T}from"../utils/primitive.js";import{jsx as G}from"react/jsx-runtime";var y=v.forwardRef((r,e)=>{let{value:s,max:t}=n("ProgressCircleIndicator"),{circumference:i}=x("ProgressCircleIndicator");return G(T.div,{"data-state":a(s,t),"data-value":s??void 0,"data-max":t,...r,...H("progress","circle-indicator",r.className),ref:e,style:{"--skdx-progress":s!=null?`${s/t*100}%`:void 0,...l(i,s,t),...r.style}})});y.displayName="ProgressCircleIndicator";export{V as Progress,S as ProgressCircle,y as ProgressCircleIndicator,g as ProgressIndicator,k as ProgressProvider,a as getState,n as useProgressContext};

package/dist/progress/ProgressCircle.d.cts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import type { ProgressCircleContextValue, ProgressCircleProps } from './types.cjs';
+export declare const ProgressCircleProvider: {
+    (props: ProgressCircleContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useProgressCircleContext: (consumerName: string) => ProgressCircleContextValue;
+/**
+ * @internal The value-dependent half of the ring geometry, shared by
+ * `ProgressCircle` and `ProgressCircleIndicator` so both elements can be the
+ * one a consumer writes `stroke-dashoffset` on.
+ *
+ * `--skdx-progress-circle-offset` is omitted when indeterminate, exactly as
+ * `ProgressIndicator` omits `--skdx-progress`: an unset custom property falls
+ * through to whatever the consumer's own animation sets, instead of pinning
+ * the ring at a value it does not have.
+ */
+export declare function getCircleVars(circumference: number, value: number | null, max: number): {
+    '--skdx-progress-circle-circumference': number;
+    '--skdx-progress-dasharray': number;
+    '--skdx-progress-circle-offset': number | undefined;
+};
+/**
+ * Circular geometry host for a `Progress`. Renders **no SVG of its own** — it
+ * is a plain element that publishes the ring's arithmetic as CSS custom
+ * properties, so the consumer brings their own `<svg>` markup and drives
+ * `stroke-dasharray` / `stroke-dashoffset` from CSS alone:
+ *
+ * - `--skdx-progress-circle-size` / `--skdx-progress-circle-thickness` — the props, echoed back.
+ * - `--skdx-progress-circle-radius` — `(size - thickness) / 2`, the `r` of the ring's centre line.
+ * - `--skdx-progress-circle-circumference` — `2πr`.
+ * - `--skdx-progress-dasharray` — the value for `stroke-dasharray`.
+ * - `--skdx-progress-circle-offset` — the value for `stroke-dashoffset`; **absent when indeterminate**.
+ *
+ * Carries the same `data-state` / `data-value` / `data-max` as the linear
+ * parts. ARIA lives on the `Progress` root, which this must be used inside —
+ * this part adds no second `role="progressbar"`.
+ *
+ * @example
+ * ```tsx
+ * <Progress value={66} aria-label="Sync progress">
+ *   <ProgressCircle size={64} thickness={6}>
+ *     <svg width="64" height="64" viewBox="0 0 64 64">
+ *       <ProgressCircleIndicator asChild>
+ *         <circle cx="32" cy="32" r="29" fill="none" stroke="currentColor" strokeWidth={6} />
+ *       </ProgressCircleIndicator>
+ *     </svg>
+ *   </ProgressCircle>
+ * </Progress>
+ * ```
+ */
+export declare const ProgressCircle: React.ForwardRefExoticComponent<Omit<ProgressCircleProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/progress/ProgressCircle.d.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import type { ProgressCircleContextValue, ProgressCircleProps } from './types.js';
+export declare const ProgressCircleProvider: {
+    (props: ProgressCircleContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useProgressCircleContext: (consumerName: string) => ProgressCircleContextValue;
+/**
+ * @internal The value-dependent half of the ring geometry, shared by
+ * `ProgressCircle` and `ProgressCircleIndicator` so both elements can be the
+ * one a consumer writes `stroke-dashoffset` on.
+ *
+ * `--skdx-progress-circle-offset` is omitted when indeterminate, exactly as
+ * `ProgressIndicator` omits `--skdx-progress`: an unset custom property falls
+ * through to whatever the consumer's own animation sets, instead of pinning
+ * the ring at a value it does not have.
+ */
+export declare function getCircleVars(circumference: number, value: number | null, max: number): {
+    '--skdx-progress-circle-circumference': number;
+    '--skdx-progress-dasharray': number;
+    '--skdx-progress-circle-offset': number | undefined;
+};
+/**
+ * Circular geometry host for a `Progress`. Renders **no SVG of its own** — it
+ * is a plain element that publishes the ring's arithmetic as CSS custom
+ * properties, so the consumer brings their own `<svg>` markup and drives
+ * `stroke-dasharray` / `stroke-dashoffset` from CSS alone:
+ *
+ * - `--skdx-progress-circle-size` / `--skdx-progress-circle-thickness` — the props, echoed back.
+ * - `--skdx-progress-circle-radius` — `(size - thickness) / 2`, the `r` of the ring's centre line.
+ * - `--skdx-progress-circle-circumference` — `2πr`.
+ * - `--skdx-progress-dasharray` — the value for `stroke-dasharray`.
+ * - `--skdx-progress-circle-offset` — the value for `stroke-dashoffset`; **absent when indeterminate**.
+ *
+ * Carries the same `data-state` / `data-value` / `data-max` as the linear
+ * parts. ARIA lives on the `Progress` root, which this must be used inside —
+ * this part adds no second `role="progressbar"`.
+ *
+ * @example
+ * ```tsx
+ * <Progress value={66} aria-label="Sync progress">
+ *   <ProgressCircle size={64} thickness={6}>
+ *     <svg width="64" height="64" viewBox="0 0 64 64">
+ *       <ProgressCircleIndicator asChild>
+ *         <circle cx="32" cy="32" r="29" fill="none" stroke="currentColor" strokeWidth={6} />
+ *       </ProgressCircleIndicator>
+ *     </svg>
+ *   </ProgressCircle>
+ * </Progress>
+ * ```
+ */
+export declare const ProgressCircle: React.ForwardRefExoticComponent<Omit<ProgressCircleProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/progress/ProgressCircleIndicator.d.cts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import type { ProgressCircleIndicatorProps } from './types.cjs';
+/**
+ * The swept arc of a `ProgressCircle` — the circular counterpart of
+ * `ProgressIndicator`. Mirrors the root's `data-state` / `data-value` /
+ * `data-max`, and repeats the value-dependent ring properties
+ * (`--skdx-progress-circle-circumference`, `--skdx-progress-dasharray`,
+ * `--skdx-progress-circle-offset`) on itself so this element can be styled
+ * directly, plus `--skdx-progress` as a percentage for anything measured in
+ * percent rather than path length.
+ *
+ * Usually rendered with `asChild` onto the `<circle>` (or `<path>`) it drives,
+ * since it emits a `div` by default and a `div` has no stroke. Must be used
+ * inside a `ProgressCircle`.
+ *
+ * @example
+ * ```tsx
+ * <ProgressCircleIndicator asChild>
+ *   <circle
+ *     cx="32" cy="32" r="29" fill="none" stroke="currentColor" strokeWidth={6}
+ *     style={{
+ *       strokeDasharray: 'var(--skdx-progress-dasharray)',
+ *       strokeDashoffset: 'var(--skdx-progress-circle-offset)',
+ *     }}
+ *   />
+ * </ProgressCircleIndicator>
+ * ```
+ */
+export declare const ProgressCircleIndicator: React.ForwardRefExoticComponent<Omit<ProgressCircleIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/progress/ProgressCircleIndicator.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import type { ProgressCircleIndicatorProps } from './types.js';
+/**
+ * The swept arc of a `ProgressCircle` — the circular counterpart of
+ * `ProgressIndicator`. Mirrors the root's `data-state` / `data-value` /
+ * `data-max`, and repeats the value-dependent ring properties
+ * (`--skdx-progress-circle-circumference`, `--skdx-progress-dasharray`,
+ * `--skdx-progress-circle-offset`) on itself so this element can be styled
+ * directly, plus `--skdx-progress` as a percentage for anything measured in
+ * percent rather than path length.
+ *
+ * Usually rendered with `asChild` onto the `<circle>` (or `<path>`) it drives,
+ * since it emits a `div` by default and a `div` has no stroke. Must be used
+ * inside a `ProgressCircle`.
+ *
+ * @example
+ * ```tsx
+ * <ProgressCircleIndicator asChild>
+ *   <circle
+ *     cx="32" cy="32" r="29" fill="none" stroke="currentColor" strokeWidth={6}
+ *     style={{
+ *       strokeDasharray: 'var(--skdx-progress-dasharray)',
+ *       strokeDashoffset: 'var(--skdx-progress-circle-offset)',
+ *     }}
+ *   />
+ * </ProgressCircleIndicator>
+ * ```
+ */
+export declare const ProgressCircleIndicator: React.ForwardRefExoticComponent<Omit<ProgressCircleIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;