@skdx/react 0.28.0 → 0.30.0

package/dist/segmented-control/types.d.cts

@@ -1,172 +0,0 @@
-import type * as React from 'react';
-import type { FormValidityHandle } from '../utils/formControl.cjs';
-import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
-/**
- * What `SegmentedControl`'s forwarded ref carries: the root `<div>` it always
- * did, plus the three constraint-validation methods. Type your ref with
- * `React.useRef<SegmentedControlHandle>(null)`.
- */
-export type SegmentedControlHandle = HTMLDivElement & FormValidityHandle;
-/** Layout axis of a {@link SegmentedControl}. Unlike a roving-focus `Orientation` there is no `'both'`: a segmented control is a strip, and a strip has one axis. */
-export type SegmentedControlOrientation = 'horizontal' | 'vertical';
-/**
- * Why the selected segment changed: `'pointer'`, `'keyboard'`, or `'programmatic'`.
- * The spellings match `@skdx/shared/contracts/change-reason` identically.
- */
-export type SegmentedControlChangeReason = 'keyboard' | 'pointer' | 'programmatic';
-/**
- * Payload for `onValueChange`. Selection follows focus (APG radio pattern),
- * so arrow keys, clicks, and form resets all trigger the same event — use
- * `reason` to distinguish them. `previousValue` is provided because a
- * controlled component's old value is gone by the time the handler runs.
- */
-export interface SegmentedControlValueChangeDetail {
-    /** The segment that is now selected. */
-    value: string;
-    /** The value selected before this change, or `null` when nothing was. */
-    previousValue: string | null;
-    /**
-     * What drove the change: `'pointer'` for a click, `'keyboard'` for the focus
-     * an arrow key/Home/End moved, `'programmatic'` for a form reset.
-     */
-    reason: SegmentedControlChangeReason;
-}
-/** @internal Segment geometry published as CSS custom properties. */
-export interface SegmentedControlRect {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-}
-/** @internal Shared state distributed from {@link SegmentedControl} to its parts via context. Not part of the public API. */
-export interface SegmentedControlContextValue {
-    value: string | undefined;
-    orientation: SegmentedControlOrientation;
-    disabled: boolean;
-    /** Whether the strip displays a committed choice the user may not change. */
-    readOnly: boolean;
-    /** Fallback single tab stop when nothing is selected yet. */
-    firstEnabledValue: string | null;
-    /** The `name` every segment's hidden radio input carries; no name, no inputs. */
-    name?: string;
-    /** The strip's `form` id, forwarded to every segment's hidden radio input. */
-    form?: string;
-    /** Marks those hidden inputs required, so an empty strip is `valueMissing`. */
-    required: boolean;
-    /** Whether moving focus between segments also selects; `false` is APG's toolbar variant. */
-    selectOnFocus: boolean;
-    /** Selects `value` and reports it, tagged with what drove the selection. */
-    onValueChange: (value: string, reason: SegmentedControlChangeReason) => void;
-    /** The root element, so the indicator can measure the checked item against it. */
-    rootRef: React.RefObject<HTMLDivElement | null>;
-}
-/** Props for the {@link SegmentedControl} root. */
-export interface SegmentedControlProps extends PrimitivePropsWithRef<'div'> {
-    /**
-     * Segments the strip derives as `SegmentedControlItem`s (ignored when `children` is given).
-     * @default undefined — compose segments manually as `children`.
-     */
-    options?: SegmentedControlOption[];
-    /**
-     * Selected segment's value, for controlled usage. Pair with `onValueChange`.
-     * @default undefined — uncontrolled, tracks its own selection internally.
-     */
-    value?: string;
-    /**
-     * Initially selected segment's value, for uncontrolled usage.
-     * @default undefined — nothing is selected, so the first enabled segment
-     * carries the tab stop and the indicator publishes no geometry.
-     */
-    defaultValue?: string;
-    /**
-     * Fires when the selection changes: from arrow keys, clicks, or form resets.
-     * Does not fire if the selected segment is clicked again. Receives the new
-     * value, previous value, and reason for the change.
-     * @default undefined — no-op if omitted.
-     */
-    onValueChange?: (detail: SegmentedControlValueChangeDetail) => void;
-    /**
-     * Layout axis for arrow-key navigation, exposed as `data-orientation` and `aria-orientation`.
-     * `'vertical'` also publishes `y` / `height` in CSS custom properties (only `x` / `width` for horizontal).
-     * @default 'horizontal'
-     */
-    orientation?: SegmentedControlOrientation;
-    /**
-     * Disables every segment, blocking selection and taking the whole control out
-     * of the tab order.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Marks the selection as committed and unchangeable. Segments remain focusable
-     * and arrow-navigable with `aria-readonly="true"`, but neither clicks nor focus changes the value.
-     * Unlike `disabled`, a read-only control stays in the tab order and answers the question posed.
-     * @default false
-     */
-    readOnly?: boolean;
-    /**
-     * Marks the control as invalid: emits `aria-invalid` and `data-invalid` for styling and announcement.
-     * Presentational only — use `required` or `setCustomValidity()` for errors the form enforces.
-     * @default false
-     */
-    invalid?: boolean;
-    /**
-     * Form field name for submission. When set, each segment renders a hidden native radio input
-     * carrying this name, so `formData.get(name)` returns the selection and `form.reset()` restores `defaultValue`.
-     * @default undefined — no inputs rendered, nothing submitted, validation passes.
-     */
-    name?: string;
-    /**
-     * Form id for a control rendered outside its `<form>` (e.g., in a portal).
-     * Forwarded to each segment's hidden radio input and used to listen for `form.reset()`.
-     * @default undefined — the strip uses its nearest ancestor `<form>`, if any.
-     */
-    form?: string;
-    /**
-     * Marks the strip required for native constraint validation: while nothing is
-     * selected it reports `valueMissing`, so the form does not submit. Only
-     * meaningful alongside `name`, which is what renders the control the
-     * constraint lives on.
-     * @default false
-     */
-    required?: boolean;
-    /**
-     * Whether focus movement selects the segment. When `false`, arrow keys move focus only;
-     * Space or Enter checks the focused segment (APG toolbar variant).
-     * @default true — focus selects (WAI-ARIA radio-group behavior).
-     */
-    selectOnFocus?: boolean;
-    /**
-     * Wraps arrow-key navigation from last segment back to first and vice versa.
-     * Unlike `RadioGroup.loop`, wrapping here changes the user's selection (focus selects).
-     * @default false — arrows stop at each end; Home/End still jump to them.
-     */
-    loop?: boolean;
-}
-/** One entry of {@link SegmentedControlProps.options} — a single segment. */
-export interface SegmentedControlOption {
-    /** Unique identifier compared against the strip's selected value. */
-    value: string;
-    /** Text rendered inside the derived `SegmentedControlItem`. */
-    label: React.ReactNode;
-    /**
-     * Prevents this segment from being selected. It keeps its place in the
-     * roving order — APG's radio pattern keeps disabled radios reachable — and
-     * carries `data-disabled`.
-     * @default false
-     */
-    disabled?: boolean;
-}
-/** Props for {@link SegmentedControlItem}, one segment of the strip. */
-export interface SegmentedControlItemProps extends PrimitivePropsWithRef<'button'> {
-    /** Unique identifier compared against the group's selected value. */
-    value: string;
-}
-/**
- * Props for {@link SegmentedControlIndicator}, the element that slides behind
- * the selected item. It reads the group's measured geometry from context and
- * publishes it as CSS custom properties, so the movement itself is one CSS
- * transition you write rather than any animation this library owns.
- */
-export interface SegmentedControlIndicatorProps extends PrimitivePropsWithRef<'div'> {
-}

package/dist/segmented-control/types.d.ts

@@ -1,172 +0,0 @@
-import type * as React from 'react';
-import type { FormValidityHandle } from '../utils/formControl.js';
-import type { PrimitivePropsWithRef } from '../utils/primitive.js';
-/**
- * What `SegmentedControl`'s forwarded ref carries: the root `<div>` it always
- * did, plus the three constraint-validation methods. Type your ref with
- * `React.useRef<SegmentedControlHandle>(null)`.
- */
-export type SegmentedControlHandle = HTMLDivElement & FormValidityHandle;
-/** Layout axis of a {@link SegmentedControl}. Unlike a roving-focus `Orientation` there is no `'both'`: a segmented control is a strip, and a strip has one axis. */
-export type SegmentedControlOrientation = 'horizontal' | 'vertical';
-/**
- * Why the selected segment changed: `'pointer'`, `'keyboard'`, or `'programmatic'`.
- * The spellings match `@skdx/shared/contracts/change-reason` identically.
- */
-export type SegmentedControlChangeReason = 'keyboard' | 'pointer' | 'programmatic';
-/**
- * Payload for `onValueChange`. Selection follows focus (APG radio pattern),
- * so arrow keys, clicks, and form resets all trigger the same event — use
- * `reason` to distinguish them. `previousValue` is provided because a
- * controlled component's old value is gone by the time the handler runs.
- */
-export interface SegmentedControlValueChangeDetail {
-    /** The segment that is now selected. */
-    value: string;
-    /** The value selected before this change, or `null` when nothing was. */
-    previousValue: string | null;
-    /**
-     * What drove the change: `'pointer'` for a click, `'keyboard'` for the focus
-     * an arrow key/Home/End moved, `'programmatic'` for a form reset.
-     */
-    reason: SegmentedControlChangeReason;
-}
-/** @internal Segment geometry published as CSS custom properties. */
-export interface SegmentedControlRect {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-}
-/** @internal Shared state distributed from {@link SegmentedControl} to its parts via context. Not part of the public API. */
-export interface SegmentedControlContextValue {
-    value: string | undefined;
-    orientation: SegmentedControlOrientation;
-    disabled: boolean;
-    /** Whether the strip displays a committed choice the user may not change. */
-    readOnly: boolean;
-    /** Fallback single tab stop when nothing is selected yet. */
-    firstEnabledValue: string | null;
-    /** The `name` every segment's hidden radio input carries; no name, no inputs. */
-    name?: string;
-    /** The strip's `form` id, forwarded to every segment's hidden radio input. */
-    form?: string;
-    /** Marks those hidden inputs required, so an empty strip is `valueMissing`. */
-    required: boolean;
-    /** Whether moving focus between segments also selects; `false` is APG's toolbar variant. */
-    selectOnFocus: boolean;
-    /** Selects `value` and reports it, tagged with what drove the selection. */
-    onValueChange: (value: string, reason: SegmentedControlChangeReason) => void;
-    /** The root element, so the indicator can measure the checked item against it. */
-    rootRef: React.RefObject<HTMLDivElement | null>;
-}
-/** Props for the {@link SegmentedControl} root. */
-export interface SegmentedControlProps extends PrimitivePropsWithRef<'div'> {
-    /**
-     * Segments the strip derives as `SegmentedControlItem`s (ignored when `children` is given).
-     * @default undefined — compose segments manually as `children`.
-     */
-    options?: SegmentedControlOption[];
-    /**
-     * Selected segment's value, for controlled usage. Pair with `onValueChange`.
-     * @default undefined — uncontrolled, tracks its own selection internally.
-     */
-    value?: string;
-    /**
-     * Initially selected segment's value, for uncontrolled usage.
-     * @default undefined — nothing is selected, so the first enabled segment
-     * carries the tab stop and the indicator publishes no geometry.
-     */
-    defaultValue?: string;
-    /**
-     * Fires when the selection changes: from arrow keys, clicks, or form resets.
-     * Does not fire if the selected segment is clicked again. Receives the new
-     * value, previous value, and reason for the change.
-     * @default undefined — no-op if omitted.
-     */
-    onValueChange?: (detail: SegmentedControlValueChangeDetail) => void;
-    /**
-     * Layout axis for arrow-key navigation, exposed as `data-orientation` and `aria-orientation`.
-     * `'vertical'` also publishes `y` / `height` in CSS custom properties (only `x` / `width` for horizontal).
-     * @default 'horizontal'
-     */
-    orientation?: SegmentedControlOrientation;
-    /**
-     * Disables every segment, blocking selection and taking the whole control out
-     * of the tab order.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Marks the selection as committed and unchangeable. Segments remain focusable
-     * and arrow-navigable with `aria-readonly="true"`, but neither clicks nor focus changes the value.
-     * Unlike `disabled`, a read-only control stays in the tab order and answers the question posed.
-     * @default false
-     */
-    readOnly?: boolean;
-    /**
-     * Marks the control as invalid: emits `aria-invalid` and `data-invalid` for styling and announcement.
-     * Presentational only — use `required` or `setCustomValidity()` for errors the form enforces.
-     * @default false
-     */
-    invalid?: boolean;
-    /**
-     * Form field name for submission. When set, each segment renders a hidden native radio input
-     * carrying this name, so `formData.get(name)` returns the selection and `form.reset()` restores `defaultValue`.
-     * @default undefined — no inputs rendered, nothing submitted, validation passes.
-     */
-    name?: string;
-    /**
-     * Form id for a control rendered outside its `<form>` (e.g., in a portal).
-     * Forwarded to each segment's hidden radio input and used to listen for `form.reset()`.
-     * @default undefined — the strip uses its nearest ancestor `<form>`, if any.
-     */
-    form?: string;
-    /**
-     * Marks the strip required for native constraint validation: while nothing is
-     * selected it reports `valueMissing`, so the form does not submit. Only
-     * meaningful alongside `name`, which is what renders the control the
-     * constraint lives on.
-     * @default false
-     */
-    required?: boolean;
-    /**
-     * Whether focus movement selects the segment. When `false`, arrow keys move focus only;
-     * Space or Enter checks the focused segment (APG toolbar variant).
-     * @default true — focus selects (WAI-ARIA radio-group behavior).
-     */
-    selectOnFocus?: boolean;
-    /**
-     * Wraps arrow-key navigation from last segment back to first and vice versa.
-     * Unlike `RadioGroup.loop`, wrapping here changes the user's selection (focus selects).
-     * @default false — arrows stop at each end; Home/End still jump to them.
-     */
-    loop?: boolean;
-}
-/** One entry of {@link SegmentedControlProps.options} — a single segment. */
-export interface SegmentedControlOption {
-    /** Unique identifier compared against the strip's selected value. */
-    value: string;
-    /** Text rendered inside the derived `SegmentedControlItem`. */
-    label: React.ReactNode;
-    /**
-     * Prevents this segment from being selected. It keeps its place in the
-     * roving order — APG's radio pattern keeps disabled radios reachable — and
-     * carries `data-disabled`.
-     * @default false
-     */
-    disabled?: boolean;
-}
-/** Props for {@link SegmentedControlItem}, one segment of the strip. */
-export interface SegmentedControlItemProps extends PrimitivePropsWithRef<'button'> {
-    /** Unique identifier compared against the group's selected value. */
-    value: string;
-}
-/**
- * Props for {@link SegmentedControlIndicator}, the element that slides behind
- * the selected item. It reads the group's measured geometry from context and
- * publishes it as CSS custom properties, so the movement itself is one CSS
- * transition you write rather than any animation this library owns.
- */
-export interface SegmentedControlIndicatorProps extends PrimitivePropsWithRef<'div'> {
-}

package/dist/separator/Separator.cjs

@@ -1 +0,0 @@
-"use strict";var f=Object.create;var p=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var c=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var P=(r,o)=>{for(var t in o)p(r,t,{get:o[t],enumerable:!0})},i=(r,o,t,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of S(o))!y.call(r,e)&&e!==t&&p(r,e,{get:()=>o[e],enumerable:!(a=h(o,e))||a.enumerable});return r};var R=(r,o,t)=>(t=r!=null?f(c(r)):{},i(o||!r||!r.__esModule?p(t,"default",{value:r,enumerable:!0}):t,r)),g=r=>i(p({},"__esModule",{value:!0}),r);var x={};P(x,{Separator:()=>l});module.exports=g(x);var s=R(require("react"),1),m=require("../utils/part.cjs"),n=require("../utils/primitive.cjs"),d=require("react/jsx-runtime"),l=s.forwardRef(({orientation:r="horizontal",decorative:o,children:t,...a},e)=>(0,d.jsx)(n.Primitive.hr,{"data-orientation":r,...o?{role:"none"}:{role:"separator","aria-orientation":r==="vertical"?r:void 0},...a,...(0,m.skdxPart)("separator","root",a.className),...a.asChild?{children:t}:null,ref:e}));l.displayName="Separator";0&&(module.exports={Separator});

package/dist/separator/Separator.d.cts

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import type { SeparatorProps } from './types.cjs';
-/**
- * Divider, renders `<hr>` with `role="separator"`. Set `decorative` for
- * `role="none"` (removed from a11y tree). Void element; `children` dropped
- * except under `asChild`.
- *
- * @example
- * ```tsx
- * <div>
- *   <p>Section one</p>
- *   <Separator />
- *   <p>Section two</p>
- * </div>
- * ```
- */
-export declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorProps, "ref"> & React.RefAttributes<HTMLHRElement>>;

package/dist/separator/Separator.d.ts

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import type { SeparatorProps } from './types.js';
-/**
- * Divider, renders `<hr>` with `role="separator"`. Set `decorative` for
- * `role="none"` (removed from a11y tree). Void element; `children` dropped
- * except under `asChild`.
- *
- * @example
- * ```tsx
- * <div>
- *   <p>Section one</p>
- *   <Separator />
- *   <p>Section two</p>
- * </div>
- * ```
- */
-export declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorProps, "ref"> & React.RefAttributes<HTMLHRElement>>;

package/dist/separator/Separator.js

@@ -1 +0,0 @@
-import*as t from"react";import{skdxPart as i}from"../utils/part.js";import{Primitive as s}from"../utils/primitive.js";import{jsx as n}from"react/jsx-runtime";var m=t.forwardRef(({orientation:r="horizontal",decorative:e,children:a,...o},p)=>n(s.hr,{"data-orientation":r,...e?{role:"none"}:{role:"separator","aria-orientation":r==="vertical"?r:void 0},...o,...i("separator","root",o.className),...o.asChild?{children:a}:null,ref:p}));m.displayName="Separator";export{m as Separator};

package/dist/separator/index.d.cts

@@ -1,2 +0,0 @@
-export * from './Separator.cjs';
-export type { SeparatorProps } from './types.cjs';

package/dist/separator/index.d.ts

@@ -1,2 +0,0 @@
-export * from './Separator.js';
-export type { SeparatorProps } from './types.js';

package/dist/separator/types.d.cts

@@ -1,14 +0,0 @@
-import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
-/** Props for the {@link Separator} root. */
-export interface SeparatorProps extends PrimitivePropsWithRef<'hr'> {
-    /**
-     * Layout axis. Exposed as `data-orientation` and `aria-orientation` when not `decorative` (vertical only; horizontal is ARIA default).
-     * @default 'horizontal'
-     */
-    orientation?: 'horizontal' | 'vertical';
-    /**
-     * When true, the separator is purely visual and removed from the a11y tree.
-     * @default false
-     */
-    decorative?: boolean;
-}

package/dist/separator/types.d.ts

@@ -1,14 +0,0 @@
-import type { PrimitivePropsWithRef } from '../utils/primitive.js';
-/** Props for the {@link Separator} root. */
-export interface SeparatorProps extends PrimitivePropsWithRef<'hr'> {
-    /**
-     * Layout axis. Exposed as `data-orientation` and `aria-orientation` when not `decorative` (vertical only; horizontal is ARIA default).
-     * @default 'horizontal'
-     */
-    orientation?: 'horizontal' | 'vertical';
-    /**
-     * When true, the separator is purely visual and removed from the a11y tree.
-     * @default false
-     */
-    decorative?: boolean;
-}

package/dist/skip-link/SkipLink.cjs

@@ -1 +0,0 @@
-"use strict";var y=Object.create;var a=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var P=(e,t)=>{for(var i in t)a(e,i,{get:t[i],enumerable:!0})},d=(e,t,i,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of R(t))!T.call(e,s)&&s!==i&&a(e,s,{get:()=>t[s],enumerable:!(r=w(t,s))||r.enumerable});return e};var g=(e,t,i)=>(i=e!=null?y(v(e)):{},d(t||!e||!e.__esModule?a(i,"default",{value:e,enumerable:!0}):i,e)),x=e=>d(a({},"__esModule",{value:!0}),e);var D={};P(D,{SkipLink:()=>S});module.exports=x(D);var o=g(require("react"),1),u=require("../utils/composeRefs.cjs"),c=require("../utils/is-dev-mode.cjs"),h=require("../utils/part.cjs"),n=require("../utils/primitive.cjs"),k=require("../utils/tabbable.cjs"),b=require("react/jsx-runtime"),A={position:"absolute",width:"1px",height:"1px",overflow:"hidden",clipPath:"inset(50%)",whiteSpace:"nowrap"},N={position:"absolute"};function C(e){let t=document.getElementById(e);if(!t){(0,c.isDevMode)()&&console.warn(`[skdx] SkipLink: no element with id "${e}" was found, so the bypass did nothing. The hash still changed and the page may still have scrolled, which is why this failure is invisible without this warning. Give the page's main landmark id="${e}".`);return}t.hasAttribute("tabindex")||(t.setAttribute("tabindex","-1"),t.addEventListener("blur",()=>t.removeAttribute("tabindex"),{once:!0})),t.focus()}function B(e){let t=Array.from(document.querySelectorAll(k.TABBABLE_SELECTOR)).find(i=>i!==e&&!e.contains(i)&&(e.compareDocumentPosition(i)&Node.DOCUMENT_POSITION_PRECEDING)!==0);t&&(0,c.isDevMode)()&&console.warn(`[skdx] SkipLink: a focusable <${t.tagName.toLowerCase()}> precedes this skip link in the document, so it is not the first tab stop and does not bypass anything. Render the SkipLink as early as possible in <body>.`)}var S=o.forwardRef(({targetId:e,onClick:t,onFocus:i,onBlur:r,style:s,...l},L)=>{let[f,m]=o.useState(!1),p=o.useRef(null),E=(0,u.useComposedRefs)(L,p);return o.useEffect(()=>{p.current&&B(p.current)},[]),(0,b.jsx)(n.Primitive.a,{href:`#${e}`,"data-state":f?"visible":"hidden",onClick:(0,n.composeEventHandlers)(t,()=>C(e)),onFocus:(0,n.composeEventHandlers)(i,()=>m(!0)),onBlur:(0,n.composeEventHandlers)(r,()=>m(!1)),style:{...f?N:A,...s},...l,...(0,h.skdxPart)("skip-link","root",l.className),ref:E})});S.displayName="SkipLink";0&&(module.exports={SkipLink});

package/dist/skip-link/SkipLink.d.cts

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import type { SkipLinkProps } from './types.cjs';
-/**
- * The bypass-block link (WCAG 2.4.1): render as first focusable element on page
- * so keyboard or screen-reader user can Tab once and jump past repeated navigation.
- * Clipped out of sight until focused, revealed while focused (`data-state="hidden" | "visible"`).
- * On activation, programmatically focuses `targetId` rather than only moving URL hash.
- *
- * @example
- * ```tsx
- * <>
- *   <SkipLink targetId="main-content">Skip to main content</SkipLink>
- *   <nav>…</nav>
- *   <main id="main-content">…</main>
- * </>
- * ```
- */
-export declare const SkipLink: React.ForwardRefExoticComponent<Omit<SkipLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;

package/dist/skip-link/SkipLink.d.ts

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import type { SkipLinkProps } from './types.js';
-/**
- * The bypass-block link (WCAG 2.4.1): render as first focusable element on page
- * so keyboard or screen-reader user can Tab once and jump past repeated navigation.
- * Clipped out of sight until focused, revealed while focused (`data-state="hidden" | "visible"`).
- * On activation, programmatically focuses `targetId` rather than only moving URL hash.
- *
- * @example
- * ```tsx
- * <>
- *   <SkipLink targetId="main-content">Skip to main content</SkipLink>
- *   <nav>…</nav>
- *   <main id="main-content">…</main>
- * </>
- * ```
- */
-export declare const SkipLink: React.ForwardRefExoticComponent<Omit<SkipLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;

package/dist/skip-link/SkipLink.js

@@ -1 +0,0 @@
-import*as i from"react";import{useComposedRefs as u}from"../utils/composeRefs.js";import{isDevMode as c}from"../utils/is-dev-mode.js";import{skdxPart as h}from"../utils/part.js";import{composeEventHandlers as n,Primitive as k}from"../utils/primitive.js";import{TABBABLE_SELECTOR as S}from"../utils/tabbable.js";import{jsx as R}from"react/jsx-runtime";var b={position:"absolute",width:"1px",height:"1px",overflow:"hidden",clipPath:"inset(50%)",whiteSpace:"nowrap"},L={position:"absolute"};function E(t){let e=document.getElementById(t);if(!e){c()&&console.warn(`[skdx] SkipLink: no element with id "${t}" was found, so the bypass did nothing. The hash still changed and the page may still have scrolled, which is why this failure is invisible without this warning. Give the page's main landmark id="${t}".`);return}e.hasAttribute("tabindex")||(e.setAttribute("tabindex","-1"),e.addEventListener("blur",()=>e.removeAttribute("tabindex"),{once:!0})),e.focus()}function y(t){let e=Array.from(document.querySelectorAll(S)).find(o=>o!==t&&!t.contains(o)&&(t.compareDocumentPosition(o)&Node.DOCUMENT_POSITION_PRECEDING)!==0);e&&c()&&console.warn(`[skdx] SkipLink: a focusable <${e.tagName.toLowerCase()}> precedes this skip link in the document, so it is not the first tab stop and does not bypass anything. Render the SkipLink as early as possible in <body>.`)}var w=i.forwardRef(({targetId:t,onClick:e,onFocus:o,onBlur:l,style:f,...r},m)=>{let[a,p]=i.useState(!1),s=i.useRef(null),d=u(m,s);return i.useEffect(()=>{s.current&&y(s.current)},[]),R(k.a,{href:`#${t}`,"data-state":a?"visible":"hidden",onClick:n(e,()=>E(t)),onFocus:n(o,()=>p(!0)),onBlur:n(l,()=>p(!1)),style:{...a?L:b,...f},...r,...h("skip-link","root",r.className),ref:d})});w.displayName="SkipLink";export{w as SkipLink};

package/dist/skip-link/index.d.cts

@@ -1,2 +0,0 @@
-export * from './SkipLink.cjs';
-export type { SkipLinkProps } from './types.cjs';

package/dist/skip-link/index.d.ts

@@ -1,2 +0,0 @@
-export * from './SkipLink.js';
-export type { SkipLinkProps } from './types.js';

package/dist/skip-link/types.d.cts

@@ -1,10 +0,0 @@
-import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
-/** Props for the {@link SkipLink} root. */
-export interface SkipLinkProps extends Omit<PrimitivePropsWithRef<'a'>, 'href'> {
-    /**
-     * The `id` of the element to jump to — usually the page's main landmark.
-     * Rendered as `href="#{targetId}"` and resolved at click time, so the target
-     * does not have to exist when the link mounts.
-     */
-    targetId: string;
-}

package/dist/skip-link/types.d.ts

@@ -1,10 +0,0 @@
-import type { PrimitivePropsWithRef } from '../utils/primitive.js';
-/** Props for the {@link SkipLink} root. */
-export interface SkipLinkProps extends Omit<PrimitivePropsWithRef<'a'>, 'href'> {
-    /**
-     * The `id` of the element to jump to — usually the page's main landmark.
-     * Rendered as `href="#{targetId}"` and resolved at click time, so the target
-     * does not have to exist when the link mounts.
-     */
-    targetId: string;
-}

package/dist/steps/Steps.cjs

@@ -1 +0,0 @@
-"use strict";var it=Object.create;var R=Object.defineProperty;var pt=Object.getOwnPropertyDescriptor;var lt=Object.getOwnPropertyNames;var mt=Object.getPrototypeOf,dt=Object.prototype.hasOwnProperty;var ct=(t,e)=>{for(var s in e)R(t,s,{get:e[s],enumerable:!0})},D=(t,e,s,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of lt(e))!dt.call(t,r)&&r!==s&&R(t,r,{get:()=>e[r],enumerable:!(a=pt(e,r))||a.enumerable});return t};var A=(t,e,s)=>(s=t!=null?it(mt(t)):{},D(e||!t||!t.__esModule?R(s,"default",{value:t,enumerable:!0}):s,t)),ut=t=>D(R({},"__esModule",{value:!0}),t);var St={};ct(St,{Steps:()=>_,StepsItem:()=>v,StepsProvider:()=>Z,StepsTrigger:()=>P,canActivateStep:()=>$,stepStatus:()=>b,useStepsContext:()=>g});module.exports=ut(St);var i=A(require("react"),1),J=require("../utils/composeRefs.cjs"),K=require("../utils/createContext.cjs"),Q=require("../utils/is-dev-mode.cjs"),U=require("../utils/part.cjs"),X=require("../utils/primitive.cjs"),Y=require("../utils/useControllableState.cjs");var S=A(require("react"),1),O=require("../utils/part.cjs"),G=require("../utils/primitive.cjs"),z=require("../utils/visuallyHidden.cjs");var y=require("react/jsx-runtime"),v=S.forwardRef(({value:t,completed:e=!1,disabled:s=!1,error:a=!1,children:r,...n},c)=>{let m=g("StepsItem"),p=b({completed:e,disabled:s,error:a},m.value===t),{registerItem:u,unregisterItem:x}=m;return S.useLayoutEffect(()=>{u({value:t,completed:e,disabled:s})},[u,t,e,s]),S.useLayoutEffect(()=>()=>x(t),[x,t]),(0,y.jsxs)(G.Primitive.li,{"data-state":p,"data-orientation":m.orientation,"data-disabled":s?"":void 0,"data-value":t,"aria-current":p==="current"?"step":void 0,...n,...(0,O.skdxPart)("steps","item",n.className),ref:c,children:[r,(0,y.jsx)(z.VisuallyHidden,{"data-state-text":p,children:m.statusLabel(p)})]})});v.displayName="StepsItem";var B=A(require("react"),1),W=require("../utils/part.cjs"),I=require("../utils/primitive.cjs");var q=require("react/jsx-runtime"),P=B.forwardRef(({value:t,...e},s)=>{let a=g("StepsTrigger"),r=a.items.find(p=>p.value===t),n=r?.disabled??!1,c=b({completed:r?.completed??!1,disabled:n},a.value===t),m=!n&&!a.canActivate(t);return(0,q.jsx)(I.Primitive.button,{type:"button","data-state":c,"data-orientation":a.orientation,"data-disabled":n?"":void 0,"data-value":t,disabled:n,"aria-disabled":m||void 0,...e,...(0,W.skdxPart)("steps","trigger",e.className),ref:s,onClick:(0,I.composeEventHandlers)(e.onClick,p=>{if(m){p.preventDefault();return}a.activate(t)})})});P.displayName="StepsTrigger";var l=require("react/jsx-runtime"),F=({steps:t=[],current:e})=>(0,l.jsx)(l.Fragment,{children:t.map((s,a)=>{let r=String(a);return(0,l.jsxs)(v,{value:r,completed:e!==void 0&&a<e,children:[(0,l.jsxs)(P,{value:r,children:[(0,l.jsx)("span",{className:"skdx-steps__indicator","aria-hidden":"true",children:a+1}),(0,l.jsx)("span",{className:"skdx-steps__title",children:s.label})]}),s.description===void 0?null:(0,l.jsx)("span",{className:"skdx-steps__description",children:s.description}),a===t.length-1?null:(0,l.jsx)("span",{className:"skdx-steps__separator","aria-hidden":"true"})]},r)})});var C=require("react/jsx-runtime"),[Z,g]=(0,K.createSafeContext)("Steps"),ft="[skdx] Steps: the root <ol> has no accessible name. Give it an aria-label or an aria-labelledby pointing at a visible heading.";function b(t,e){return e?"current":t.error?"error":t.completed?"completed":t.disabled?"disabled":"incomplete"}function $(t,e,s,a){if(t.length===0)return a==="non-linear"||e===s;let r=t.find(n=>n.value===e);return!r||r.disabled?!1:a==="non-linear"||r.completed||r.value===s?!0:t.find(n=>!n.completed)?.value===e}var _=i.forwardRef(({value:t,defaultValue:e,onValueChange:s,orientation:a="horizontal",navigationMode:r="linear",completedLabel:n="Completed",currentLabel:c="Current step",incompleteLabel:m="Not completed",disabledLabel:p="Disabled",errorLabel:u="Error",items:x,current:k,children:j,...h},tt)=>{let[N,H]=(0,Y.useControllableState)({prop:t??(k===void 0?void 0:String(k)),defaultProp:e,onChange:s}),[T,L]=i.useState([]),M=i.useRef(null),et=(0,J.useComposedRefs)(tt,M);i.useEffect(()=>{let o=M.current;o&&!o.getAttribute("aria-label")&&!o.getAttribute("aria-labelledby")&&(0,Q.isDevMode)()&&console.warn(ft)},[]);let st=i.useCallback(o=>{L(d=>{let f=d.findIndex(nt=>nt.value===o.value);if(f===-1)return[...d,o];let w=d[f];if(w.completed===o.completed&&w.disabled===o.disabled)return d;let V=d.slice();return V[f]=o,V})},[]),rt=i.useCallback(o=>{L(d=>d.filter(f=>f.value!==o))},[]),E=i.useCallback(o=>$(T,o,N,r),[T,N,r]),at=i.useCallback(o=>{E(o)&&H(o)},[E,H]),ot=i.useCallback(o=>({completed:n,current:c,error:u,disabled:p,incomplete:m})[o],[n,c,u,p,m]);return(0,C.jsx)(Z,{value:N,orientation:a,navigationMode:r,statusLabel:ot,items:T,registerItem:st,unregisterItem:rt,canActivate:E,activate:at,children:(0,C.jsx)(X.Primitive.ol,{role:"list","data-orientation":a,...h,...(0,U.skdxPart)("steps","root",h.className),ref:et,children:j??(0,C.jsx)(F,{steps:x,current:k})})})});_.displayName="Steps";0&&(module.exports={Steps,StepsItem,StepsProvider,StepsTrigger,canActivateStep,stepStatus,useStepsContext});

package/dist/steps/Steps.d.cts

@@ -1,42 +0,0 @@
-import * as React from 'react';
-import type { StepsContextValue, StepsItemState, StepsNavigationMode, StepsProps, StepStatus } from './types.cjs';
-export declare const StepsProvider: {
-    (props: StepsContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useStepsContext: (consumerName: string) => StepsContextValue;
-/**
- * @internal Derives step status once, so every part agrees.
- * Precedence: `current` > `error` > `completed` > `disabled` > `incomplete`.
- */
-export declare function stepStatus(item: {
-    completed?: boolean;
-    disabled?: boolean;
-    error?: boolean;
-}, current: boolean): StepStatus;
-/**
- * @internal Linear-mode enforcement. Step is reachable if completed, current, or frontier (first incomplete).
- * Disabled steps never activate but do not block the frontier.
- */
-export declare function canActivateStep(items: StepsItemState[], value: string, currentValue: string | undefined, navigationMode: StepsNavigationMode): boolean;
-/**
- * Step sequence root: renders `<ol>` and owns current step, handing it via context.
- * Controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
- * Without `children`, derives anatomy from `items` (one `StepsItem` per entry).
- *
- * @example
- * ```tsx
- * <Steps
- *   aria-label="Checkout progress"
- *   current={1}
- *   onValueChange={(next) => setCurrent(Number(next))}
- *   items={[
- *     { label: 'Cart' },
- *     { label: 'Shipping', description: 'Where it goes.' },
- *     { label: 'Payment' },
- *   ]}
- * />
- * ```
- */
-export declare const Steps: React.ForwardRefExoticComponent<Omit<StepsProps, "ref"> & React.RefAttributes<HTMLOListElement>>;

package/dist/steps/Steps.d.ts

@@ -1,42 +0,0 @@
-import * as React from 'react';
-import type { StepsContextValue, StepsItemState, StepsNavigationMode, StepsProps, StepStatus } from './types.js';
-export declare const StepsProvider: {
-    (props: StepsContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useStepsContext: (consumerName: string) => StepsContextValue;
-/**
- * @internal Derives step status once, so every part agrees.
- * Precedence: `current` > `error` > `completed` > `disabled` > `incomplete`.
- */
-export declare function stepStatus(item: {
-    completed?: boolean;
-    disabled?: boolean;
-    error?: boolean;
-}, current: boolean): StepStatus;
-/**
- * @internal Linear-mode enforcement. Step is reachable if completed, current, or frontier (first incomplete).
- * Disabled steps never activate but do not block the frontier.
- */
-export declare function canActivateStep(items: StepsItemState[], value: string, currentValue: string | undefined, navigationMode: StepsNavigationMode): boolean;
-/**
- * Step sequence root: renders `<ol>` and owns current step, handing it via context.
- * Controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
- * Without `children`, derives anatomy from `items` (one `StepsItem` per entry).
- *
- * @example
- * ```tsx
- * <Steps
- *   aria-label="Checkout progress"
- *   current={1}
- *   onValueChange={(next) => setCurrent(Number(next))}
- *   items={[
- *     { label: 'Cart' },
- *     { label: 'Shipping', description: 'Where it goes.' },
- *     { label: 'Payment' },
- *   ]}
- * />
- * ```
- */
-export declare const Steps: React.ForwardRefExoticComponent<Omit<StepsProps, "ref"> & React.RefAttributes<HTMLOListElement>>;

package/dist/steps/Steps.js

@@ -1 +0,0 @@
-import*as i from"react";import{useComposedRefs as tt}from"../utils/composeRefs.js";import{createSafeContext as et}from"../utils/createContext.js";import{isDevMode as st}from"../utils/is-dev-mode.js";import{skdxPart as rt}from"../utils/part.js";import{Primitive as at}from"../utils/primitive.js";import{useControllableState as ot}from"../utils/useControllableState.js";import*as f from"react";import{skdxPart as F}from"../utils/part.js";import{Primitive as J}from"../utils/primitive.js";import{VisuallyHidden as K}from"../utils/visuallyHidden.js";import{jsx as Q,jsxs as U}from"react/jsx-runtime";var P=f.forwardRef(({value:t,completed:e=!1,disabled:o=!1,error:s=!1,children:a,...n},d)=>{let l=b("StepsItem"),p=x({completed:e,disabled:o,error:s},l.value===t),{registerItem:c,unregisterItem:g}=l;return f.useLayoutEffect(()=>{c({value:t,completed:e,disabled:o})},[c,t,e,o]),f.useLayoutEffect(()=>()=>g(t),[g,t]),U(J.li,{"data-state":p,"data-orientation":l.orientation,"data-disabled":o?"":void 0,"data-value":t,"aria-current":p==="current"?"step":void 0,...n,...F("steps","item",n.className),ref:d,children:[a,Q(K,{"data-state-text":p,children:l.statusLabel(p)})]})});P.displayName="StepsItem";import*as H from"react";import{skdxPart as X}from"../utils/part.js";import{composeEventHandlers as Y,Primitive as Z}from"../utils/primitive.js";import{jsx as $}from"react/jsx-runtime";var C=H.forwardRef(({value:t,...e},o)=>{let s=b("StepsTrigger"),a=s.items.find(p=>p.value===t),n=a?.disabled??!1,d=x({completed:a?.completed??!1,disabled:n},s.value===t),l=!n&&!s.canActivate(t);return $(Z.button,{type:"button","data-state":d,"data-orientation":s.orientation,"data-disabled":n?"":void 0,"data-value":t,disabled:n,"aria-disabled":l||void 0,...e,...X("steps","trigger",e.className),ref:o,onClick:Y(e.onClick,p=>{if(l){p.preventDefault();return}s.activate(t)})})});C.displayName="StepsTrigger";import{Fragment as j,jsx as S,jsxs as L}from"react/jsx-runtime";var M=({steps:t=[],current:e})=>S(j,{children:t.map((o,s)=>{let a=String(s);return L(P,{value:a,completed:e!==void 0&&s<e,children:[L(C,{value:a,children:[S("span",{className:"skdx-steps__indicator","aria-hidden":"true",children:s+1}),S("span",{className:"skdx-steps__title",children:o.label})]}),o.description===void 0?null:S("span",{className:"skdx-steps__description",children:o.description}),s===t.length-1?null:S("span",{className:"skdx-steps__separator","aria-hidden":"true"})]},a)})});import{jsx as k}from"react/jsx-runtime";var[nt,b]=et("Steps"),it="[skdx] Steps: the root <ol> has no accessible name. Give it an aria-label or an aria-labelledby pointing at a visible heading.";function x(t,e){return e?"current":t.error?"error":t.completed?"completed":t.disabled?"disabled":"incomplete"}function pt(t,e,o,s){if(t.length===0)return s==="non-linear"||e===o;let a=t.find(n=>n.value===e);return!a||a.disabled?!1:s==="non-linear"||a.completed||a.value===o?!0:t.find(n=>!n.completed)?.value===e}var w=i.forwardRef(({value:t,defaultValue:e,onValueChange:o,orientation:s="horizontal",navigationMode:a="linear",completedLabel:n="Completed",currentLabel:d="Current step",incompleteLabel:l="Not completed",disabledLabel:p="Disabled",errorLabel:c="Error",items:g,current:R,children:V,...N},D)=>{let[v,T]=ot({prop:t??(R===void 0?void 0:String(R)),defaultProp:e,onChange:o}),[y,E]=i.useState([]),A=i.useRef(null),O=tt(D,A);i.useEffect(()=>{let r=A.current;r&&!r.getAttribute("aria-label")&&!r.getAttribute("aria-labelledby")&&st()&&console.warn(it)},[]);let G=i.useCallback(r=>{E(m=>{let u=m.findIndex(q=>q.value===r.value);if(u===-1)return[...m,r];let _=m[u];if(_.completed===r.completed&&_.disabled===r.disabled)return m;let h=m.slice();return h[u]=r,h})},[]),z=i.useCallback(r=>{E(m=>m.filter(u=>u.value!==r))},[]),I=i.useCallback(r=>pt(y,r,v,a),[y,v,a]),B=i.useCallback(r=>{I(r)&&T(r)},[I,T]),W=i.useCallback(r=>({completed:n,current:d,error:c,disabled:p,incomplete:l})[r],[n,d,c,p,l]);return k(nt,{value:v,orientation:s,navigationMode:a,statusLabel:W,items:y,registerItem:G,unregisterItem:z,canActivate:I,activate:B,children:k(at.ol,{role:"list","data-orientation":s,...N,...rt("steps","root",N.className),ref:O,children:V??k(M,{steps:g,current:R})})})});w.displayName="Steps";export{w as Steps,P as StepsItem,nt as StepsProvider,C as StepsTrigger,pt as canActivateStep,x as stepStatus,b as useStepsContext};

package/dist/steps/StepsAnatomy.d.cts

@@ -1,13 +0,0 @@
-import type { StepsStep } from './types.cjs';
-/**
- * The anatomy a {@link Steps} draws from `items`: one `StepsItem` per entry
- * with its `StepsTrigger`, marking everything before `current` as completed.
- * Step value is its index as a string. The separator is inside the item to
- * remain a valid `<ol>` child.
- *
- * @internal
- */
-export declare const StepsAnatomy: ({ steps, current, }: {
-    steps?: StepsStep[];
-    current?: number;
-}) => import("react").JSX.Element;