@skdx/react 0.26.0

package/dist/select/types.d.ts

@@ -0,0 +1,258 @@
+import type * as React from 'react';
+import type { FormValidityHandle } from '../utils/formControl.js';
+import type { PopperContentProps } from '../utils/popper.js';
+import type { PortalProps } from '../utils/portal.js';
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+import type { InteractOutsideEvent } from '../utils/useDismiss.js';
+/**
+ * One entry of the {@link SelectProps.items} collection: everything the root
+ * needs to know about an option *before* that option has ever been rendered.
+ */
+export interface SelectItemDescriptor {
+    /** Identifier committed to the root's value when this option is chosen. */
+    value: string;
+    /**
+     * Text shown by `SelectValue` and matched by trigger typeahead. A mounted
+     * `SelectItemText` overrides it.
+     * @default undefined — falls back to `value`.
+     */
+    label?: string;
+    /**
+     * Excludes this option from trigger typeahead. The rendered `SelectItem`'s
+     * own `disabled` is what excludes it from selection.
+     * @default false
+     */
+    disabled?: boolean;
+}
+/** @internal Shared state distributed from {@link Select} to its parts via context. Not part of the public API. */
+export interface SelectContextValue {
+    triggerRef: React.RefObject<HTMLButtonElement | null>;
+    contentRef: React.RefObject<HTMLDivElement | null>;
+    contentId: string;
+    /** Whether more than one option can be selected. */
+    multiple: boolean;
+    /** Every selected value, normalised to an array whether or not `multiple`. */
+    selectedValues: string[];
+    /** Whether one option value is currently selected. */
+    isSelected: (value: string) => boolean;
+    /** Commits an option: replaces the selection, or toggles it within it when `multiple`. */
+    selectItem: (value: string) => void;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    disabled: boolean;
+    required: boolean;
+    invalid: boolean;
+    name?: string;
+    registerOptionLabel: (value: string, label: string) => void;
+    /** Label for a value: a registered `SelectItemText` wins, then `items`, then the value itself. */
+    getOptionLabel: (value: string) => string;
+    /** Every option the root knows about without opening the listbox — the trigger-typeahead pool. */
+    collection: SelectItemDescriptor[];
+}
+/** Props for the {@link Select} root. */
+export interface SelectProps {
+    /**
+     * The trigger, portal, and content parts, distributed selection/open state via context.
+     * @default undefined
+     */
+    children?: React.ReactNode;
+    /**
+     * Selected option's value, for controlled usage — a `string[]` when
+     * `multiple`, a `string` otherwise. Pair with `onValueChange`.
+     * @default undefined — uncontrolled, tracks its own selected value internally.
+     */
+    value?: string | string[];
+    /**
+     * Initially selected option's value, for uncontrolled usage. Same shape as
+     * `value`: a `string[]` when `multiple`.
+     * @default undefined — no option selected until the user picks one.
+     */
+    defaultValue?: string | string[];
+    /**
+     * Fires with the new value whenever the selected option changes, controlled
+     * or not — the whole `string[]` when `multiple`, not the toggled option.
+     * @default undefined — no-op if omitted.
+     */
+    onValueChange?: (value: string | string[]) => void;
+    /**
+     * Allows more than one option to be selected: `value` becomes a `string[]`,
+     * the listbox gets `aria-multiselectable`, choosing an option toggles it
+     * instead of replacing the selection, and the listbox stays open so several
+     * options can be picked in one pass.
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * The full option collection, declared up front.
+     *
+     * Options otherwise register their label only when `SelectContent` mounts,
+     * and `SelectContent` unmounts while closed — so before the listbox has
+     * ever been opened the root knows no labels at all, which leaves
+     * `SelectValue` rendering a raw `defaultValue` and leaves the closed trigger
+     * with nothing to run typeahead against. `items` closes both gaps from
+     * first paint. It renders nothing; mounted `SelectItem`s stay the source of
+     * truth for anything it doesn't cover.
+     * @default undefined — the root only knows options that have been rendered.
+     */
+    items?: SelectItemDescriptor[];
+    /**
+     * Whether the listbox popup is open, for controlled usage. Pair with `onOpenChange`.
+     * @default undefined — uncontrolled, tracks its own open state internally.
+     */
+    open?: boolean;
+    /**
+     * Initial open state, for uncontrolled usage.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Fires with the new open state whenever it changes, 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
+     * `SelectContent`'s enter or exit animation ends, or as soon as the listbox has
+     * settled when it 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;
+    /**
+     * Disables the trigger and prevents opening the listbox.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Marks the underlying hidden `<select>` as required for form validation.
+     * Only meaningful when `name` is also set.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Marks the select as invalid, exposed as `aria-invalid`/`data-invalid` on
+     * the `SelectTrigger`.
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * When set, renders a visually-hidden native `<select>` in sync with the value, so the select participates in native form submission and validation.
+     * @default undefined — no hidden input rendered.
+     */
+    name?: string;
+}
+/** Props for {@link SelectTrigger}, the button that opens the listbox and displays the current value. */
+export interface SelectTriggerProps extends PrimitivePropsWithRef<'button'> {
+}
+/** Props for {@link SelectValue}, which renders the selected option's label (or a placeholder) inside the trigger. */
+export interface SelectValueProps extends PrimitivePropsWithRef<'span'> {
+    /**
+     * Content shown when no value is selected.
+     * @default undefined — renders nothing when no value is selected.
+     */
+    placeholder?: React.ReactNode;
+}
+/** Props for {@link SelectIcon}, a decorative indicator inside the trigger (defaults to `▾`). */
+export interface SelectIconProps extends PrimitivePropsWithRef<'span'> {
+}
+/** Props for {@link SelectPortal}, which teleports its content to `document.body` while the listbox is open. */
+export interface SelectPortalProps extends PortalProps {
+    /**
+     * Render (and mount `SelectContent`) even while closed, instead of
+     * unmounting. Useful for animation libraries that need the outgoing
+     * content present in the DOM during an exit transition.
+     * @default false
+     */
+    forceMount?: boolean;
+}
+/**
+ * Props for {@link SelectContent}, the listbox popup. Extends
+ * {@link PopperContentProps} (`side`, `align`, `sideOffset`, `alignOffset`,
+ * `avoidCollisions`, `collisionPadding`) for floating-ui positioning relative
+ * to the trigger — note `SelectContent` defaults `side` to `'bottom'`,
+ * `align` to `'start'`, and `sideOffset` to `4`, instead of the popper base
+ * defaults (`'bottom'` / `'center'` / `0`).
+ */
+export interface SelectContentProps extends PopperContentProps {
+    /**
+     * Keep this listbox mounted even while closed, instead of unmounting it.
+     * @default false
+     */
+    forceMount?: boolean;
+    /**
+     * Fires on Escape while open. `preventDefault()` keeps the listbox open.
+     * @default undefined — no-op if omitted.
+     */
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    /**
+     * Fires on a pointer-down outside the listbox and trigger. `preventDefault()` keeps it open.
+     * @default undefined — no-op if omitted.
+     */
+    onPointerDownOutside?: (event: PointerEvent) => void;
+    /**
+     * Fires when focus moves outside the listbox and trigger, carrying a
+     * cancelable stand-in for the uncancelable `focusin`. `preventDefault()`
+     * keeps the listbox open.
+     * @default undefined — no-op if omitted.
+     */
+    onFocusOutside?: (event: CustomEvent<FocusEvent>) => void;
+    /**
+     * Fires for *either* kind of outside interaction, immediately before the
+     * specific handler and with the same event — so one `preventDefault()`
+     * vetoes both paths.
+     * @default undefined — no-op if omitted.
+     */
+    onInteractOutside?: (event: InteractOutsideEvent) => void;
+}
+/** Props for {@link SelectViewport}, the scrollable container for `SelectItem`s inside `SelectContent`. */
+export interface SelectViewportProps extends PrimitivePropsWithRef<'div'> {
+}
+/** @internal Shared state distributed from {@link SelectItem} to its text/indicator via context. Not part of the public API. */
+export interface SelectItemContextValue {
+    value: string;
+    selected: boolean;
+    registerText: (text: string) => void;
+}
+/** Props for a single {@link SelectItem} option within `SelectContent`. */
+export interface SelectItemProps extends PrimitivePropsWithRef<'div'> {
+    /** Unique identifier committed to the select root's value when this option is chosen. */
+    value: string;
+    /**
+     * Excludes this option from selection and keyboard/typeahead navigation.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Text used for the trigger label; defaults to the item's text content.
+     * @default undefined — falls back to the item's rendered text content.
+     */
+    textValue?: string;
+}
+/** Props for {@link SelectItemText}, the label content of a {@link SelectItem}, whose text is captured for `SelectValue`. */
+export interface SelectItemTextProps extends PrimitivePropsWithRef<'span'> {
+}
+/** Props for {@link SelectItemIndicator}, shown inside a {@link SelectItem} when it's the selected option. */
+export interface SelectItemIndicatorProps extends PrimitivePropsWithRef<'span'> {
+    /**
+     * Keep this indicator mounted even while its item isn't selected, instead
+     * of rendering nothing.
+     * @default false
+     */
+    forceMount?: boolean;
+}
+/** Props for {@link SelectGroup}, a labeled group of related `SelectItem`s. */
+export interface SelectGroupProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Props for {@link SelectLabel}, a heading for a {@link SelectGroup}. */
+export interface SelectLabelProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Props for {@link SelectSeparator}, a visual divider between items or groups. */
+export interface SelectSeparatorProps extends PrimitivePropsWithRef<'div'> {
+}
+/**
+ * What {@link Select}'s forwarded ref carries. The root renders no DOM of its
+ * own besides its mirrored inputs, so the ref is these two
+ * constraint-validation methods and nothing else —
+ * `React.useRef<SelectHandle>(null)`.
+ */
+export type SelectHandle = FormValidityHandle;

package/dist/separator/Separator.cjs

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

package/dist/separator/Separator.d.cts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { SeparatorProps } from './types.cjs';
+/**
+ * Visual or semantic divider between content. Renders `role="separator"`
+ * with `aria-orientation` (vertical only) unless `decorative` is set, in
+ * which case it renders `role="none"` and is removed from the a11y tree.
+ * Always exposes `data-orientation` for styling.
+ *
+ * @example
+ * ```tsx
+ * <div>
+ *   <p>Section one</p>
+ *   <Separator />
+ *   <p>Section two</p>
+ * </div>
+ * ```
+ */
+export declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/separator/Separator.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { SeparatorProps } from './types.js';
+/**
+ * Visual or semantic divider between content. Renders `role="separator"`
+ * with `aria-orientation` (vertical only) unless `decorative` is set, in
+ * which case it renders `role="none"` and is removed from the a11y tree.
+ * Always exposes `data-orientation` for styling.
+ *
+ * @example
+ * ```tsx
+ * <div>
+ *   <p>Section one</p>
+ *   <Separator />
+ *   <p>Section two</p>
+ * </div>
+ * ```
+ */
+export declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/separator/Separator.js

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

package/dist/separator/index.d.cts

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

package/dist/separator/index.d.ts

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

package/dist/separator/types.d.cts

@@ -0,0 +1,16 @@
+import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+/** Props for the {@link Separator} root. */
+export interface SeparatorProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Layout axis, exposed as `data-orientation` and, when not `decorative`,
+     * also as `aria-orientation` (vertical only — horizontal is the ARIA
+     * default and is omitted).
+     * @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

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

package/dist/skeleton/Skeleton.cjs

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

package/dist/skeleton/Skeleton.d.cts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { SkeletonProps } from './types.cjs';
+/**
+ * Loading placeholder block. Renders a `<div>` with `aria-hidden="true"` and
+ * `data-skdx-skeleton` — purely visual, hidden from assistive tech so screen
+ * readers don't announce placeholder content as if it were real. Shape/size
+ * and shimmer animation are brand-layer concerns applied via `className`.
+ *
+ * @example
+ * ```tsx
+ * <Skeleton style={{ width: 200, height: 20 }} />
+ * ```
+ */
+export declare const Skeleton: React.ForwardRefExoticComponent<Omit<SkeletonProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/skeleton/Skeleton.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { SkeletonProps } from './types.js';
+/**
+ * Loading placeholder block. Renders a `<div>` with `aria-hidden="true"` and
+ * `data-skdx-skeleton` — purely visual, hidden from assistive tech so screen
+ * readers don't announce placeholder content as if it were real. Shape/size
+ * and shimmer animation are brand-layer concerns applied via `className`.
+ *
+ * @example
+ * ```tsx
+ * <Skeleton style={{ width: 200, height: 20 }} />
+ * ```
+ */
+export declare const Skeleton: React.ForwardRefExoticComponent<Omit<SkeletonProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/skeleton/Skeleton.js

@@ -0,0 +1 @@
+import*as o from"react";import{skdxPart as r}from"../utils/part.js";import{Primitive as m}from"../utils/primitive.js";import{jsx as a}from"react/jsx-runtime";var p=o.forwardRef((e,t)=>a(m.div,{"aria-hidden":"true","data-skdx-skeleton":"",...e,...r("skeleton","root",e.className),ref:t}));p.displayName="Skeleton";export{p as Skeleton};

package/dist/skeleton/index.d.cts

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

package/dist/skeleton/index.d.ts

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

package/dist/skeleton/types.d.cts

@@ -0,0 +1,4 @@
+import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+/** Props for the {@link Skeleton} root. */
+export interface SkeletonProps extends PrimitivePropsWithRef<'div'> {
+}

package/dist/skeleton/types.d.ts

@@ -0,0 +1,4 @@
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+/** Props for the {@link Skeleton} root. */
+export interface SkeletonProps extends PrimitivePropsWithRef<'div'> {
+}

package/dist/skip-link/SkipLink.cjs

@@ -0,0 +1 @@
+"use strict";var S=Object.create;var s=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var E=(e,t)=>{for(var i in t)s(e,i,{get:t[i],enumerable:!0})},f=(e,t,i,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of L(t))!x.call(e,o)&&o!==i&&s(e,o,{get:()=>t[o],enumerable:!(n=b(t,o))||n.enumerable});return e};var v=(e,t,i)=>(i=e!=null?S(h(e)):{},f(t||!e||!e.__esModule?s(i,"default",{value:e,enumerable:!0}):i,e)),y=e=>f(s({},"__esModule",{value:!0}),e);var T={};E(T,{SkipLink:()=>m});module.exports=y(T);var p=v(require("react"),1),d=require("../utils/part.cjs"),r=require("../utils/primitive.cjs"),u=require("react/jsx-runtime"),P={position:"absolute",width:"1px",height:"1px",overflow:"hidden",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap"},R={position:"absolute",top:"0",left:"0",zIndex:999};function w(e){e&&(e.hasAttribute("tabindex")||(e.setAttribute("tabindex","-1"),e.addEventListener("blur",()=>e.removeAttribute("tabindex"),{once:!0})),e.focus())}var m=p.forwardRef(({targetId:e,onClick:t,onFocus:i,onBlur:n,style:o,...a},k)=>{let[l,c]=p.useState(!1);return(0,u.jsx)(r.Primitive.a,{href:`#${e}`,"data-state":l?"visible":"hidden",onClick:(0,r.composeEventHandlers)(t,()=>w(document.getElementById(e))),onFocus:(0,r.composeEventHandlers)(i,()=>c(!0)),onBlur:(0,r.composeEventHandlers)(n,()=>c(!1)),style:{...l?R:P,...o},...a,...(0,d.skdxPart)("skip-link","root",a.className),ref:k})});m.displayName="SkipLink";0&&(module.exports={SkipLink});

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { SkipLinkProps } from './types.cjs';
+/**
+ * The bypass-block link (WCAG 2.4.1): render it as the first focusable element
+ * on the page so a keyboard or screen-reader user can Tab once and jump
+ * straight past repeated navigation. It is clipped out of sight until focused
+ * and revealed while focused (`data-state="hidden" | "visible"`), and on
+ * activation it programmatically focuses `targetId` rather than only moving
+ * the 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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { SkipLinkProps } from './types.js';
+/**
+ * The bypass-block link (WCAG 2.4.1): render it as the first focusable element
+ * on the page so a keyboard or screen-reader user can Tab once and jump
+ * straight past repeated navigation. It is clipped out of sight until focused
+ * and revealed while focused (`data-state="hidden" | "visible"`), and on
+ * activation it programmatically focuses `targetId` rather than only moving
+ * the 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

@@ -0,0 +1 @@
+import*as t from"react";import{skdxPart as f}from"../utils/part.js";import{composeEventHandlers as i,Primitive as d}from"../utils/primitive.js";import{jsx as b}from"react/jsx-runtime";var m={position:"absolute",width:"1px",height:"1px",overflow:"hidden",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap"},u={position:"absolute",top:"0",left:"0",zIndex:999};function k(e){e&&(e.hasAttribute("tabindex")||(e.setAttribute("tabindex","-1"),e.addEventListener("blur",()=>e.removeAttribute("tabindex"),{once:!0})),e.focus())}var S=t.forwardRef(({targetId:e,onClick:s,onFocus:p,onBlur:a,style:l,...o},c)=>{let[r,n]=t.useState(!1);return b(d.a,{href:`#${e}`,"data-state":r?"visible":"hidden",onClick:i(s,()=>k(document.getElementById(e))),onFocus:i(p,()=>n(!0)),onBlur:i(a,()=>n(!1)),style:{...r?u:m,...l},...o,...f("skip-link","root",o.className),ref:c})});S.displayName="SkipLink";export{S as SkipLink};

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

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

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

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

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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,10 @@
+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/slider/Slider.cjs

@@ -0,0 +1 @@
+"use strict";var pe=Object.create;var v=Object.defineProperty;var fe=Object.getOwnPropertyDescriptor;var Se=Object.getOwnPropertyNames;var Re=Object.getPrototypeOf,be=Object.prototype.hasOwnProperty;var Pe=(t,r)=>{for(var o in r)v(t,o,{get:r[o],enumerable:!0})},Y=(t,r,o,e)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of Se(r))!be.call(t,a)&&a!==o&&v(t,a,{get:()=>r[a],enumerable:!(e=fe(r,a))||e.enumerable});return t};var N=(t,r,o)=>(o=t!=null?pe(Re(t)):{},Y(r||!t||!t.__esModule?v(o,"default",{value:t,enumerable:!0}):o,t)),he=t=>Y(v({},"__esModule",{value:!0}),t);var ge={};Pe(ge,{Slider:()=>Z,SliderProvider:()=>W,SliderRange:()=>B,SliderThumb:()=>F,SliderTrack:()=>z,useSliderContext:()=>x});module.exports=he(ge);var c=N(require("react"),1),q=require("../utils/clamp.cjs"),O=require("../utils/composeRefs.cjs"),_=require("../utils/createContext.cjs"),G=require("../utils/formControl.cjs"),J=require("../utils/part.cjs"),E=require("../utils/primitive.cjs"),Q=require("../utils/useControllableState.cjs"),K=require("react/jsx-runtime"),[W,x]=(0,_.createSafeContext)("Slider");function xe(t,r,o){let e=Math.round((t-r)/o),a=r+e*o,S=(String(o).split(".")[1]??"").length;return Number(a.toFixed(S))}var Z=c.forwardRef((t,r)=>{let{value:o,defaultValue:e=[0],onValueChange:a,onValueCommit:S,min:i=0,max:d=100,step:R=1,disabled:l=!1,orientation:u="horizontal",name:H,...b}=t,[p=[],m]=(0,Q.useControllableState)({prop:o,defaultProp:e,onChange:a}),P=c.useRef(p);P.current=p;let g=c.useRef(null),[L,k]=c.useState(null),y=(0,O.useComposedRefs)(r,g,k);(0,G.useFormReset)(g,()=>m(e));let A=c.useRef(0),$=c.useCallback((n,s)=>{let M=xe(s,i,R);m((f=[])=>{let D=n>0?f[n-1]??i:i,U=n<f.length-1?f[n+1]??d:d,V=(0,q.clamp)(M,Math.max(D,i),Math.min(U,d));if(f[n]===V)return f;let w=[...f];return w[n]=V,w})},[i,d,R,m]),X=c.useCallback(n=>{let s=g.current?.getBoundingClientRect();if(!s)return null;let M=u==="horizontal"?(n.clientX-s.left)/s.width:1-(n.clientY-s.top)/s.height;return i+M*(d-i)},[u,i,d]),me=n=>{if(l)return;let s=X(n);if(s==null)return;let M=P.current,f=0,D=1/0;M.forEach((U,V)=>{let w=Math.abs(U-s);w<D&&(D=w,f=V)}),A.current=f,n.target.setPointerCapture?.(n.pointerId),$(f,s)},ue=n=>{if(l||!n.target.hasPointerCapture?.(n.pointerId))return;let s=X(n);s!=null&&$(A.current,s)},ce=n=>{n.target.hasPointerCapture?.(n.pointerId)&&(n.target.releasePointerCapture(n.pointerId),S?.(P.current))};return(0,K.jsx)(W,{values:p,min:i,max:d,disabled:l,orientation:u,thumbIndexRef:A,rootNode:L,updateValue:$,step:R,name:H,children:(0,K.jsx)(E.Primitive.span,{"data-orientation":u,"data-disabled":l?"":void 0,...b,...(0,J.skdxPart)("slider","root",b.className),ref:y,onPointerDown:(0,E.composeEventHandlers)(b.onPointerDown,me),onPointerMove:(0,E.composeEventHandlers)(b.onPointerMove,ue),onPointerUp:(0,E.composeEventHandlers)(b.onPointerUp,ce),style:{touchAction:"none",...b.style}})})});Z.displayName="Slider";var j=N(require("react"),1),ee=require("../utils/part.cjs"),te=require("../utils/primitive.cjs");var re=require("react/jsx-runtime"),z=j.forwardRef((t,r)=>{let o=x("SliderTrack");return(0,re.jsx)(te.Primitive.span,{"data-orientation":o.orientation,"data-disabled":o.disabled?"":void 0,...t,...(0,ee.skdxPart)("slider","track",t.className),ref:r})});z.displayName="SliderTrack";var oe=N(require("react"),1),ne=require("../utils/part.cjs"),ae=require("../utils/primitive.cjs");var ie=require("react/jsx-runtime"),B=oe.forwardRef((t,r)=>{let o=x("SliderRange"),{values:e,min:a,max:S,orientation:i}=o,d=e.map(u=>(u-a)/(S-a)*100),R=e.length>1?Math.min(...d):0,l=100-Math.max(...d,0);return(0,ie.jsx)(ae.Primitive.span,{"data-orientation":i,"data-disabled":o.disabled?"":void 0,...t,...(0,ne.skdxPart)("slider","range",t.className),ref:r,style:{...i==="horizontal"?{left:`${R}%`,right:`${l}%`}:{bottom:`${R}%`,top:`${l}%`},...t.style}})});B.displayName="SliderRange";var h=N(require("react"),1),le=require("../utils/composeRefs.cjs"),I=require("../utils/direction.cjs"),se=require("../utils/hiddenInput.cjs"),de=require("../utils/part.cjs"),C=require("../utils/primitive.cjs");var T=require("react/jsx-runtime"),Te='[role="slider"]',F=h.forwardRef(({index:t,...r},o)=>{let e=x("SliderThumb"),a=(0,I.useDirection)(),S=h.useRef(null),i=(0,le.useComposedRefs)(o,S),[d,R]=h.useState(0);h.useLayoutEffect(()=>{if(t!==void 0||!e.rootNode)return;let m=Array.from(e.rootNode.querySelectorAll(Te)).findIndex(P=>P===S.current);m!==-1&&m!==d&&R(m)});let l=t??d,u=e.values[l]??e.min,H=(u-e.min)/(e.max-e.min)*100,b=p=>{if(e.disabled)return;let{step:m,min:P,max:g}=e,L=Math.max((g-P)/10,m),k={ArrowRight:m,ArrowUp:m,ArrowLeft:-m,ArrowDown:-m,PageUp:L,PageDown:-L},y=(0,I.directionalKey)(p.key,p.currentTarget,a);y in k?(p.preventDefault(),e.updateValue(l,u+k[y])):y==="Home"?(p.preventDefault(),e.updateValue(l,P)):y==="End"&&(p.preventDefault(),e.updateValue(l,g))};return(0,T.jsxs)(T.Fragment,{children:[(0,T.jsx)(C.Primitive.span,{role:"slider","aria-valuemin":e.min,"aria-valuemax":e.max,"aria-valuenow":u,"aria-orientation":e.orientation,"aria-disabled":e.disabled||void 0,"data-orientation":e.orientation,"data-disabled":e.disabled?"":void 0,tabIndex:e.disabled?void 0:0,...r,...(0,de.skdxPart)("slider","thumb",r.className),ref:i,onKeyDown:(0,C.composeEventHandlers)(r.onKeyDown,b),onPointerDown:(0,C.composeEventHandlers)(r.onPointerDown,()=>{e.thumbIndexRef.current=l}),style:{position:"absolute",...e.orientation==="horizontal"?{left:`${H}%`,transform:"translateX(-50%)"}:{bottom:`${H}%`,transform:"translateY(50%)"},...r.style}}),e.name&&(0,T.jsx)(se.HiddenInput,{type:"number",name:e.values.length>1?`${e.name}[${l}]`:e.name,value:u,disabled:e.disabled})]})});F.displayName="SliderThumb";0&&(module.exports={Slider,SliderProvider,SliderRange,SliderThumb,SliderTrack,useSliderContext});

package/dist/slider/Slider.d.cts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import type { SliderContextValue, SliderProps } from './types.cjs';
+export declare const SliderProvider: {
+    (props: SliderContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useSliderContext: (consumerName: string) => SliderContextValue;
+/**
+ * Multi-thumb slider. `value` is always an array; pass a single-element
+ * array for a simple slider, two elements for a range slider. Renders a
+ * `<span data-orientation data-disabled>` container with `touchAction: 'none'`.
+ * Clicking or dragging anywhere in the track moves the thumb closest to the
+ * pointer; `onValueCommit` fires once, on pointer up. Works controlled
+ * (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
+ *
+ * @example
+ * ```tsx
+ * <Slider defaultValue={[25, 75]} min={0} max={100} step={1}>
+ *   <SliderTrack>
+ *     <SliderRange />
+ *   </SliderTrack>
+ *   <SliderThumb index={0} aria-label="Minimum" />
+ *   <SliderThumb index={1} aria-label="Maximum" />
+ * </Slider>
+ * ```
+ */
+export declare const Slider: React.ForwardRefExoticComponent<Omit<SliderProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/slider/Slider.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import type { SliderContextValue, SliderProps } from './types.js';
+export declare const SliderProvider: {
+    (props: SliderContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useSliderContext: (consumerName: string) => SliderContextValue;
+/**
+ * Multi-thumb slider. `value` is always an array; pass a single-element
+ * array for a simple slider, two elements for a range slider. Renders a
+ * `<span data-orientation data-disabled>` container with `touchAction: 'none'`.
+ * Clicking or dragging anywhere in the track moves the thumb closest to the
+ * pointer; `onValueCommit` fires once, on pointer up. Works controlled
+ * (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
+ *
+ * @example
+ * ```tsx
+ * <Slider defaultValue={[25, 75]} min={0} max={100} step={1}>
+ *   <SliderTrack>
+ *     <SliderRange />
+ *   </SliderTrack>
+ *   <SliderThumb index={0} aria-label="Minimum" />
+ *   <SliderThumb index={1} aria-label="Maximum" />
+ * </Slider>
+ * ```
+ */
+export declare const Slider: React.ForwardRefExoticComponent<Omit<SliderProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/slider/Slider.js

@@ -0,0 +1 @@
+import*as u from"react";import{clamp as O}from"../utils/clamp.js";import{useComposedRefs as _}from"../utils/composeRefs.js";import{createSafeContext as G}from"../utils/createContext.js";import{useFormReset as J}from"../utils/formControl.js";import{skdxPart as Q}from"../utils/part.js";import{composeEventHandlers as v,Primitive as W}from"../utils/primitive.js";import{useControllableState as Z}from"../utils/useControllableState.js";import{jsx as I}from"react/jsx-runtime";var[j,g]=G("Slider");function ee(i,r,l){let e=Math.round((i-r)/l),f=r+e*l,S=(String(l).split(".")[1]??"").length;return Number(f.toFixed(S))}var te=u.forwardRef((i,r)=>{let{value:l,defaultValue:e=[0],onValueChange:f,onValueCommit:S,min:o=0,max:s=100,step:R=1,disabled:n=!1,orientation:m="horizontal",name:M,...b}=i,[c=[],d]=Z({prop:l,defaultProp:e,onChange:f}),P=u.useRef(c);P.current=c;let x=u.useRef(null),[w,C]=u.useState(null),T=_(r,x,C);J(x,()=>d(e));let k=u.useRef(0),D=u.useCallback((t,a)=>{let y=ee(a,o,R);d((p=[])=>{let H=t>0?p[t-1]??o:o,V=t<p.length-1?p[t+1]??s:s,L=O(y,Math.max(H,o),Math.min(V,s));if(p[t]===L)return p;let E=[...p];return E[t]=L,E})},[o,s,R,d]),N=u.useCallback(t=>{let a=x.current?.getBoundingClientRect();if(!a)return null;let y=m==="horizontal"?(t.clientX-a.left)/a.width:1-(t.clientY-a.top)/a.height;return o+y*(s-o)},[m,o,s]),X=t=>{if(n)return;let a=N(t);if(a==null)return;let y=P.current,p=0,H=1/0;y.forEach((V,L)=>{let E=Math.abs(V-a);E<H&&(H=E,p=L)}),k.current=p,t.target.setPointerCapture?.(t.pointerId),D(p,a)},Y=t=>{if(n||!t.target.hasPointerCapture?.(t.pointerId))return;let a=N(t);a!=null&&D(k.current,a)},q=t=>{t.target.hasPointerCapture?.(t.pointerId)&&(t.target.releasePointerCapture(t.pointerId),S?.(P.current))};return I(j,{values:c,min:o,max:s,disabled:n,orientation:m,thumbIndexRef:k,rootNode:w,updateValue:D,step:R,name:M,children:I(W.span,{"data-orientation":m,"data-disabled":n?"":void 0,...b,...Q("slider","root",b.className),ref:T,onPointerDown:v(b.onPointerDown,X),onPointerMove:v(b.onPointerMove,Y),onPointerUp:v(b.onPointerUp,q),style:{touchAction:"none",...b.style}})})});te.displayName="Slider";import*as A from"react";import{skdxPart as re}from"../utils/part.js";import{Primitive as oe}from"../utils/primitive.js";import{jsx as ne}from"react/jsx-runtime";var $=A.forwardRef((i,r)=>{let l=g("SliderTrack");return ne(oe.span,{"data-orientation":l.orientation,"data-disabled":l.disabled?"":void 0,...i,...re("slider","track",i.className),ref:r})});$.displayName="SliderTrack";import*as U from"react";import{skdxPart as ae}from"../utils/part.js";import{Primitive as ie}from"../utils/primitive.js";import{jsx as le}from"react/jsx-runtime";var K=U.forwardRef((i,r)=>{let l=g("SliderRange"),{values:e,min:f,max:S,orientation:o}=l,s=e.map(m=>(m-f)/(S-f)*100),R=e.length>1?Math.min(...s):0,n=100-Math.max(...s,0);return le(ie.span,{"data-orientation":o,"data-disabled":l.disabled?"":void 0,...i,...ae("slider","range",i.className),ref:r,style:{...o==="horizontal"?{left:`${R}%`,right:`${n}%`}:{bottom:`${R}%`,top:`${n}%`},...i.style}})});K.displayName="SliderRange";import*as h from"react";import{useComposedRefs as se}from"../utils/composeRefs.js";import{directionalKey as de,useDirection as me}from"../utils/direction.js";import{HiddenInput as ue}from"../utils/hiddenInput.js";import{skdxPart as ce}from"../utils/part.js";import{composeEventHandlers as z,Primitive as pe}from"../utils/primitive.js";import{Fragment as Se,jsx as B,jsxs as Re}from"react/jsx-runtime";var fe='[role="slider"]',F=h.forwardRef(({index:i,...r},l)=>{let e=g("SliderThumb"),f=me(),S=h.useRef(null),o=se(l,S),[s,R]=h.useState(0);h.useLayoutEffect(()=>{if(i!==void 0||!e.rootNode)return;let d=Array.from(e.rootNode.querySelectorAll(fe)).findIndex(P=>P===S.current);d!==-1&&d!==s&&R(d)});let n=i??s,m=e.values[n]??e.min,M=(m-e.min)/(e.max-e.min)*100,b=c=>{if(e.disabled)return;let{step:d,min:P,max:x}=e,w=Math.max((x-P)/10,d),C={ArrowRight:d,ArrowUp:d,ArrowLeft:-d,ArrowDown:-d,PageUp:w,PageDown:-w},T=de(c.key,c.currentTarget,f);T in C?(c.preventDefault(),e.updateValue(n,m+C[T])):T==="Home"?(c.preventDefault(),e.updateValue(n,P)):T==="End"&&(c.preventDefault(),e.updateValue(n,x))};return Re(Se,{children:[B(pe.span,{role:"slider","aria-valuemin":e.min,"aria-valuemax":e.max,"aria-valuenow":m,"aria-orientation":e.orientation,"aria-disabled":e.disabled||void 0,"data-orientation":e.orientation,"data-disabled":e.disabled?"":void 0,tabIndex:e.disabled?void 0:0,...r,...ce("slider","thumb",r.className),ref:o,onKeyDown:z(r.onKeyDown,b),onPointerDown:z(r.onPointerDown,()=>{e.thumbIndexRef.current=n}),style:{position:"absolute",...e.orientation==="horizontal"?{left:`${M}%`,transform:"translateX(-50%)"}:{bottom:`${M}%`,transform:"translateY(50%)"},...r.style}}),e.name&&B(ue,{type:"number",name:e.values.length>1?`${e.name}[${n}]`:e.name,value:m,disabled:e.disabled})]})});F.displayName="SliderThumb";export{te as Slider,j as SliderProvider,K as SliderRange,F as SliderThumb,$ as SliderTrack,g as useSliderContext};

package/dist/slider/SliderRange.d.cts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { SliderRangeProps } from './types.cjs';
+/**
+ * The filled portion of the track, spanning from the lowest to the highest
+ * selected value (or from the start of the track to the single value, for a
+ * one-thumb slider). Renders `<span data-orientation data-disabled>`
+ * positioned with `left`/`right` (horizontal) or `bottom`/`top` (vertical)
+ * percentages computed from the current values.
+ *
+ * @example
+ * ```tsx
+ * <SliderTrack>
+ *   <SliderRange />
+ * </SliderTrack>
+ * ```
+ */
+export declare const SliderRange: React.ForwardRefExoticComponent<Omit<SliderRangeProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/slider/SliderRange.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { SliderRangeProps } from './types.js';
+/**
+ * The filled portion of the track, spanning from the lowest to the highest
+ * selected value (or from the start of the track to the single value, for a
+ * one-thumb slider). Renders `<span data-orientation data-disabled>`
+ * positioned with `left`/`right` (horizontal) or `bottom`/`top` (vertical)
+ * percentages computed from the current values.
+ *
+ * @example
+ * ```tsx
+ * <SliderTrack>
+ *   <SliderRange />
+ * </SliderTrack>
+ * ```
+ */
+export declare const SliderRange: React.ForwardRefExoticComponent<Omit<SliderRangeProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;