@skdx/react 0.27.0 → 0.29.0

package/dist/qr-code/encoder.d.ts

@@ -1,73 +0,0 @@
-/**
- * A compact QR Code encoder written from ISO/IEC 18004, deliberately narrow in
- * scope: **byte mode only** (UTF-8), versions 1–40, all four error-correction
- * levels. No Kanji/alphanumeric/numeric mode switching, no ECI, no Micro QR.
- *
- * Byte mode alone is not a limitation worth fixing: it encodes every string,
- * and the modes it omits only ever buy density for inputs that are entirely
- * digits or entirely uppercase-alphanumeric. Paying ~20% more modules on a URL
- * is cheaper than shipping a segment optimiser nobody reads.
- *
- * The whole module is pure and synchronous — no DOM, no canvas, no timers — so
- * it runs unchanged under SSR.
- *
- * @module
- */
-/** Error-correction level, in ascending order of redundancy: `L` ≈ 7%, `M` ≈ 15%, `Q` ≈ 25%, `H` ≈ 30%. */
-export type ErrorCorrectionLevel = 'L' | 'M' | 'Q' | 'H';
-export declare const MIN_VERSION = 1;
-export declare const MAX_VERSION = 40;
-/** Module count along one edge for `version`: `4 × version + 17`, so 21 at v1 and 177 at v40. */
-export declare function moduleCount(version: number): number;
-/** Total codewords (data + EC) a version holds, independent of level. */
-export declare function totalCodewords(version: number): number;
-/**
- * Bits available for the *data* segment (mode indicator, character count,
- * payload, padding) at this version and level — total codewords less every
- * error-correction codeword.
- */
-export declare function dataCapacityBits(version: number, level: ErrorCorrectionLevel): number;
-/**
- * Centre coordinates of the alignment patterns for `version`, ascending.
- * Empty at version 1, which has none.
- *
- * The spacing is even except for the first gap, which absorbs the remainder —
- * exactly the rule ISO/IEC 18004 Table E.1 tabulates, with version 32's
- * one-off step of 26 as the single exception the rule does not cover.
- */
-export declare function alignmentPatternPositions(version: number): number[];
-/**
- * Reed–Solomon generator polynomial of the given degree — the product
- * `(x − α^0)(x − α^1)…(x − α^(degree−1))` over GF(256).
- *
- * Returned **monic-implicit**: `degree` coefficients from x^(degree−1) down to
- * x^0, with the leading 1 omitted, which is the form the remainder loop wants.
- * Degree 7 is `[127, 122, 154, 164, 11, 68, 117]`.
- */
-export declare function reedSolomonGeneratorPoly(degree: number): Uint8Array;
-/**
- * The 15-bit format-information word for a level/mask pair: a BCH(15, 5)
- * codeword over the 5 data bits `level | mask`, XOR-masked with `0b101010000010010`
- * so that the all-zero data never produces an all-zero word.
- *
- * `formatInfoBits('L', 0)` is `0b111011111000100`.
- */
-export declare function formatInfoBits(level: ErrorCorrectionLevel, mask: number): number;
-/**
- * The 18-bit version-information word, a BCH(18, 6) codeword over the version
- * number. Only versions ≥ 7 carry one; smaller symbols are identified by their
- * size alone. Unmasked, unlike the format word.
- */
-export declare function versionInfoBits(version: number): number;
-/**
- * Encodes `value` as a QR Code matrix.
- *
- * @param value - The payload, encoded as UTF-8 bytes (byte mode).
- * @param level - Error-correction level. Use `'H'` whenever a logo covers the centre.
- * @param version - Force a symbol version 1–40. Omit to pick the smallest that fits.
- * @returns A square `boolean[][]` indexed `[row][column]`, `true` meaning a dark
- * module — or `null` when the payload exceeds capacity, or `version` is out of
- * range or too small. **Never throws**: over-capacity is an ordinary outcome for
- * a user-supplied string, not an exceptional one.
- */
-export declare function encodeQr(value: string, level: ErrorCorrectionLevel, version?: number): boolean[][] | null;

package/dist/segmented-control/SegmentedControl.cjs

@@ -1 +0,0 @@
-"use strict";var _=Object.create;var h=Object.defineProperty;var G=Object.getOwnPropertyDescriptor;var J=Object.getOwnPropertyNames;var Q=Object.getPrototypeOf,U=Object.prototype.hasOwnProperty;var X=(e,n)=>{for(var o in n)h(e,o,{get:n[o],enumerable:!0})},L=(e,n,o,r)=>{if(n&&typeof n=="object"||typeof n=="function")for(let t of J(n))!U.call(e,t)&&t!==o&&h(e,t,{get:()=>n[t],enumerable:!(r=G(n,t))||r.enumerable});return e};var E=(e,n,o)=>(o=e!=null?_(Q(e)):{},L(n||!e||!e.__esModule?h(o,"default",{value:e,enumerable:!0}):o,e)),Y=e=>L(h({},"__esModule",{value:!0}),e);var j={};X(j,{SegmentedControl:()=>k,SegmentedControlIndicator:()=>I,SegmentedControlItem:()=>w});module.exports=Y(j);var i=E(require("react"),1),$=require("../utils/composeRefs.cjs"),D=require("../utils/createContext.cjs"),H=require("../utils/part.cjs"),v=require("../utils/primitive.cjs"),M=require("../utils/useControllableState.cjs"),N=require("../utils/useRovingFocus.cjs"),P=require("react/jsx-runtime"),x="[data-skdx-segmented-control-item]",[Z,y]=(0,D.createSafeContext)("SegmentedControl"),k=i.forwardRef(({value:e,defaultValue:n,onValueChange:o,orientation:r="horizontal",disabled:t=!1,...d},s)=>{let[a,m]=(0,M.useControllableState)({prop:e,defaultProp:n,onChange:o}),c=i.useRef(null),b=(0,$.useComposedRefs)(s,c),f=(0,N.useRovingFocus)({orientation:r,loop:!1,itemSelector:x}),[p,S]=i.useState(null);return i.useLayoutEffect(()=>{if(a!==void 0)return;let u=c.current?.querySelector(`${x}:not([disabled])`);S(u?.getAttribute("data-value")??null)},[a]),(0,P.jsx)(Z,{value:a,orientation:r,disabled:t,firstEnabledValue:p,onValueChange:m,rootRef:c,children:(0,P.jsx)(v.Primitive.div,{role:"radiogroup","aria-orientation":r,"aria-disabled":t||void 0,"data-orientation":r,"data-disabled":t?"":void 0,...d,...(0,H.skdxPart)("segmented-control","root",d.className),ref:b,onKeyDown:(0,v.composeEventHandlers)(d.onKeyDown,u=>{t||f(u)})})})});k.displayName="SegmentedControl";var l=E(require("react"),1),B=require("../utils/composeRefs.cjs"),K=require("../utils/part.cjs"),O=require("../utils/primitive.cjs");var F=require("react/jsx-runtime"),I=l.forwardRef((e,n)=>{let{value:o,orientation:r,rootRef:t}=y("SegmentedControlIndicator"),d=l.useRef(null),s=(0,B.useComposedRefs)(n,d),[a,m]=l.useState(null),c=l.useRef(null);l.useLayoutEffect(()=>{let f=t.current??d.current?.closest('[role="radiogroup"]');if(!f)return;let p=f.querySelector(`${x}[data-state="checked"]`);if(!p){c.current=null,m(null);return}let S=()=>{let R=p.getBoundingClientRect(),T=f.getBoundingClientRect(),C={x:R.left-T.left,y:R.top-T.top,width:R.width,height:R.height},V=`${C.x},${C.y},${C.width},${C.height}`;c.current!==V&&(c.current=V,m(C))};if(S(),typeof ResizeObserver>"u")return;let u=new ResizeObserver(S);return u.observe(f),u.observe(p),()=>u.disconnect()},[o,r,t]);let b=a?{"--skdx-segmented-control-x":`${a.x}px`,"--skdx-segmented-control-width":`${a.width}px`,...r==="vertical"&&{"--skdx-segmented-control-y":`${a.y}px`,"--skdx-segmented-control-height":`${a.height}px`}}:{};return(0,F.jsx)(O.Primitive.div,{"aria-hidden":"true","data-orientation":r,"data-state":a?"visible":"hidden",...e,...(0,K.skdxPart)("segmented-control","indicator",e.className),ref:s,style:{...b,...e.style}})});I.displayName="SegmentedControlIndicator";var z=E(require("react"),1),q=require("../utils/part.cjs"),g=require("../utils/primitive.cjs"),A=require("../utils/useRovingFocus.cjs");var W=require("react/jsx-runtime"),w=z.forwardRef(({value:e,disabled:n,...o},r)=>{let t=y("SegmentedControlItem"),d=t.value===e,s=t.disabled||n||!1,a=d||t.value===void 0&&t.firstEnabledValue===e;return(0,W.jsx)(g.Primitive.button,{type:"button",role:"radio","aria-checked":d,"aria-disabled":s||void 0,"data-skdx-segmented-control-item":"","data-state":d?"checked":"unchecked","data-disabled":s?"":void 0,"data-value":e,disabled:s,tabIndex:(0,A.rovingTabIndex)(t.value!==void 0||t.firstEnabledValue!==null,a,s),...o,...(0,q.skdxPart)("segmented-control","item",o.className),ref:r,onClick:(0,g.composeEventHandlers)(o.onClick,()=>{d||t.onValueChange(e)}),onFocus:(0,g.composeEventHandlers)(o.onFocus,()=>{d||t.onValueChange(e)}),onKeyDown:(0,g.composeEventHandlers)(o.onKeyDown,m=>{m.key==="Enter"&&m.preventDefault()})})});w.displayName="SegmentedControlItem";0&&(module.exports={SegmentedControl,SegmentedControlIndicator,SegmentedControlItem});

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

@@ -1,46 +0,0 @@
-import * as React from 'react';
-import type { SegmentedControlContextValue, SegmentedControlProps } from './types.cjs';
-/** @internal Marks a segment for roving focus and for the indicator's measurement query. */
-export declare const ITEM_SELECTOR = "[data-skdx-segmented-control-item]";
-export declare const SegmentedControlProvider: {
-    (props: SegmentedControlContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useSegmentedControlContext: (consumerName: string) => SegmentedControlContextValue;
-/**
- * Root of a segmented control: a strip of mutually exclusive segments with a
- * movable indicator. Renders `role="radiogroup"` with `aria-orientation`,
- * `data-orientation` and `data-disabled`, owns the selected value via
- * `useControllableState`, and hands it to `SegmentedControlItem`s and the
- * `SegmentedControlIndicator` through context.
- *
- * It is a **radio group, not a toggle group**. Every segment is a
- * `role="radio"` with `aria-checked`, exactly one is a tab stop, and arrow keys
- * *move focus and select in the same keystroke* — the WAI-ARIA radio pattern,
- * where focus and selection are not separable. `ToggleGroup type="single"`
- * models pressed *buttons* (`aria-pressed`, every item tabbable via roving
- * focus but selection decoupled from focus) and is the right choice when a
- * segment is an action, e.g. a text-alignment strip. When the segments are
- * mutually exclusive *choices* — a view switcher, a plan picker, a date-range
- * selector — they are radios, and this is the component.
- *
- * Arrow keys **do not loop**: reaching the last segment and pressing again
- * stays put. A looping radio group is a trap for a screen-reader user, who
- * hears the first option again with nothing to say the strip ended — and here
- * looping would also silently re-select it. Home/End jump to the ends.
- *
- * Direction-aware: under `dir="rtl"` ArrowLeft moves to the *next* segment, via
- * `useDirection` inside `useRovingFocus`.
- *
- * @example
- * ```tsx
- * <SegmentedControl defaultValue="week" aria-label="Date range">
- *   <SegmentedControlIndicator />
- *   <SegmentedControlItem value="day">Day</SegmentedControlItem>
- *   <SegmentedControlItem value="week">Week</SegmentedControlItem>
- *   <SegmentedControlItem value="month">Month</SegmentedControlItem>
- * </SegmentedControl>
- * ```
- */
-export declare const SegmentedControl: React.ForwardRefExoticComponent<Omit<SegmentedControlProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,46 +0,0 @@
-import * as React from 'react';
-import type { SegmentedControlContextValue, SegmentedControlProps } from './types.js';
-/** @internal Marks a segment for roving focus and for the indicator's measurement query. */
-export declare const ITEM_SELECTOR = "[data-skdx-segmented-control-item]";
-export declare const SegmentedControlProvider: {
-    (props: SegmentedControlContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useSegmentedControlContext: (consumerName: string) => SegmentedControlContextValue;
-/**
- * Root of a segmented control: a strip of mutually exclusive segments with a
- * movable indicator. Renders `role="radiogroup"` with `aria-orientation`,
- * `data-orientation` and `data-disabled`, owns the selected value via
- * `useControllableState`, and hands it to `SegmentedControlItem`s and the
- * `SegmentedControlIndicator` through context.
- *
- * It is a **radio group, not a toggle group**. Every segment is a
- * `role="radio"` with `aria-checked`, exactly one is a tab stop, and arrow keys
- * *move focus and select in the same keystroke* — the WAI-ARIA radio pattern,
- * where focus and selection are not separable. `ToggleGroup type="single"`
- * models pressed *buttons* (`aria-pressed`, every item tabbable via roving
- * focus but selection decoupled from focus) and is the right choice when a
- * segment is an action, e.g. a text-alignment strip. When the segments are
- * mutually exclusive *choices* — a view switcher, a plan picker, a date-range
- * selector — they are radios, and this is the component.
- *
- * Arrow keys **do not loop**: reaching the last segment and pressing again
- * stays put. A looping radio group is a trap for a screen-reader user, who
- * hears the first option again with nothing to say the strip ended — and here
- * looping would also silently re-select it. Home/End jump to the ends.
- *
- * Direction-aware: under `dir="rtl"` ArrowLeft moves to the *next* segment, via
- * `useDirection` inside `useRovingFocus`.
- *
- * @example
- * ```tsx
- * <SegmentedControl defaultValue="week" aria-label="Date range">
- *   <SegmentedControlIndicator />
- *   <SegmentedControlItem value="day">Day</SegmentedControlItem>
- *   <SegmentedControlItem value="week">Week</SegmentedControlItem>
- *   <SegmentedControlItem value="month">Month</SegmentedControlItem>
- * </SegmentedControl>
- * ```
- */
-export declare const SegmentedControl: React.ForwardRefExoticComponent<Omit<SegmentedControlProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/segmented-control/SegmentedControl.js

@@ -1 +0,0 @@
-import*as s from"react";import{useComposedRefs as T}from"../utils/composeRefs.js";import{createSafeContext as V}from"../utils/createContext.js";import{skdxPart as L}from"../utils/part.js";import{composeEventHandlers as $,Primitive as D}from"../utils/primitive.js";import{useControllableState as H}from"../utils/useControllableState.js";import{useRovingFocus as M}from"../utils/useRovingFocus.js";import{jsx as E}from"react/jsx-runtime";var R="[data-skdx-segmented-control-item]",[N,h]=V("SegmentedControl"),P=s.forwardRef(({value:n,defaultValue:f,onValueChange:d,orientation:r="horizontal",disabled:e=!1,...t},l)=>{let[o,i]=H({prop:n,defaultProp:f,onChange:d}),m=s.useRef(null),x=T(l,m),u=M({orientation:r,loop:!1,itemSelector:R}),[g,C]=s.useState(null);return s.useLayoutEffect(()=>{if(o!==void 0)return;let c=m.current?.querySelector(`${R}:not([disabled])`);C(c?.getAttribute("data-value")??null)},[o]),E(N,{value:o,orientation:r,disabled:e,firstEnabledValue:g,onValueChange:i,rootRef:m,children:E(D.div,{role:"radiogroup","aria-orientation":r,"aria-disabled":e||void 0,"data-orientation":r,"data-disabled":e?"":void 0,...t,...L("segmented-control","root",t.className),ref:x,onKeyDown:$(t.onKeyDown,c=>{e||u(c)})})})});P.displayName="SegmentedControl";import*as a from"react";import{useComposedRefs as B}from"../utils/composeRefs.js";import{skdxPart as K}from"../utils/part.js";import{Primitive as O}from"../utils/primitive.js";import{jsx as F}from"react/jsx-runtime";var k=a.forwardRef((n,f)=>{let{value:d,orientation:r,rootRef:e}=h("SegmentedControlIndicator"),t=a.useRef(null),l=B(f,t),[o,i]=a.useState(null),m=a.useRef(null);a.useLayoutEffect(()=>{let u=e.current??t.current?.closest('[role="radiogroup"]');if(!u)return;let g=u.querySelector(`${R}[data-state="checked"]`);if(!g){m.current=null,i(null);return}let C=()=>{let S=g.getBoundingClientRect(),y=u.getBoundingClientRect(),p={x:S.left-y.left,y:S.top-y.top,width:S.width,height:S.height},b=`${p.x},${p.y},${p.width},${p.height}`;m.current!==b&&(m.current=b,i(p))};if(C(),typeof ResizeObserver>"u")return;let c=new ResizeObserver(C);return c.observe(u),c.observe(g),()=>c.disconnect()},[d,r,e]);let x=o?{"--skdx-segmented-control-x":`${o.x}px`,"--skdx-segmented-control-width":`${o.width}px`,...r==="vertical"&&{"--skdx-segmented-control-y":`${o.y}px`,"--skdx-segmented-control-height":`${o.height}px`}}:{};return F(O.div,{"aria-hidden":"true","data-orientation":r,"data-state":o?"visible":"hidden",...n,...K("segmented-control","indicator",n.className),ref:l,style:{...x,...n.style}})});k.displayName="SegmentedControlIndicator";import*as I from"react";import{skdxPart as z}from"../utils/part.js";import{composeEventHandlers as v,Primitive as q}from"../utils/primitive.js";import{rovingTabIndex as A}from"../utils/useRovingFocus.js";import{jsx as W}from"react/jsx-runtime";var w=I.forwardRef(({value:n,disabled:f,...d},r)=>{let e=h("SegmentedControlItem"),t=e.value===n,l=e.disabled||f||!1,o=t||e.value===void 0&&e.firstEnabledValue===n;return W(q.button,{type:"button",role:"radio","aria-checked":t,"aria-disabled":l||void 0,"data-skdx-segmented-control-item":"","data-state":t?"checked":"unchecked","data-disabled":l?"":void 0,"data-value":n,disabled:l,tabIndex:A(e.value!==void 0||e.firstEnabledValue!==null,o,l),...d,...z("segmented-control","item",d.className),ref:r,onClick:v(d.onClick,()=>{t||e.onValueChange(n)}),onFocus:v(d.onFocus,()=>{t||e.onValueChange(n)}),onKeyDown:v(d.onKeyDown,i=>{i.key==="Enter"&&i.preventDefault()})})});w.displayName="SegmentedControlItem";export{P as SegmentedControl,k as SegmentedControlIndicator,w as SegmentedControlItem};

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

@@ -1,47 +0,0 @@
-import * as React from 'react';
-import type { SegmentedControlIndicatorProps } from './types.cjs';
-/**
- * The sliding highlight behind the checked segment — the reason this family
- * exists as something other than a styled radio group.
- *
- * It measures the checked `SegmentedControlItem` against the root with a
- * `ResizeObserver` (watching both, so a re-flowed strip or a re-labelled
- * segment re-measures) and publishes the geometry as CSS custom properties on
- * its own element:
- *
- * - `--skdx-segmented-control-x` — offset from the root's left edge, in `px`
- * - `--skdx-segmented-control-width`
- * - `--skdx-segmented-control-y` / `--skdx-segmented-control-height` — added only
- *   when the root's `orientation` is `'vertical'`
- *
- * So the whole animation is one CSS rule and no consumer JavaScript:
- *
- * ```css
- * .my-indicator {
- *   position: absolute;
- *   inset-block: 0;
- *   width: var(--skdx-segmented-control-width);
- *   translate: var(--skdx-segmented-control-x) 0;
- *   transition: translate 150ms, width 150ms;
- * }
- * ```
- *
- * `x` is a *physical* offset from the root's left edge, not a logical one, so
- * `translate` is correct under `dir="rtl"` without a second rule.
- *
- * With nothing selected there is nothing to measure: the element renders with
- * `data-state="hidden"` and publishes **no** custom properties at all, rather
- * than a zero-width bar parked at the start — `width: var(--…, 0)` then lets
- * CSS decide what "not yet chosen" looks like. It redraws a state the items
- * already report, so it is `aria-hidden="true"`.
- *
- * @example
- * ```tsx
- * <SegmentedControl defaultValue="week" aria-label="Date range">
- *   <SegmentedControlIndicator className="my-indicator" />
- *   <SegmentedControlItem value="day">Day</SegmentedControlItem>
- *   <SegmentedControlItem value="week">Week</SegmentedControlItem>
- * </SegmentedControl>
- * ```
- */
-export declare const SegmentedControlIndicator: React.ForwardRefExoticComponent<Omit<SegmentedControlIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,47 +0,0 @@
-import * as React from 'react';
-import type { SegmentedControlIndicatorProps } from './types.js';
-/**
- * The sliding highlight behind the checked segment — the reason this family
- * exists as something other than a styled radio group.
- *
- * It measures the checked `SegmentedControlItem` against the root with a
- * `ResizeObserver` (watching both, so a re-flowed strip or a re-labelled
- * segment re-measures) and publishes the geometry as CSS custom properties on
- * its own element:
- *
- * - `--skdx-segmented-control-x` — offset from the root's left edge, in `px`
- * - `--skdx-segmented-control-width`
- * - `--skdx-segmented-control-y` / `--skdx-segmented-control-height` — added only
- *   when the root's `orientation` is `'vertical'`
- *
- * So the whole animation is one CSS rule and no consumer JavaScript:
- *
- * ```css
- * .my-indicator {
- *   position: absolute;
- *   inset-block: 0;
- *   width: var(--skdx-segmented-control-width);
- *   translate: var(--skdx-segmented-control-x) 0;
- *   transition: translate 150ms, width 150ms;
- * }
- * ```
- *
- * `x` is a *physical* offset from the root's left edge, not a logical one, so
- * `translate` is correct under `dir="rtl"` without a second rule.
- *
- * With nothing selected there is nothing to measure: the element renders with
- * `data-state="hidden"` and publishes **no** custom properties at all, rather
- * than a zero-width bar parked at the start — `width: var(--…, 0)` then lets
- * CSS decide what "not yet chosen" looks like. It redraws a state the items
- * already report, so it is `aria-hidden="true"`.
- *
- * @example
- * ```tsx
- * <SegmentedControl defaultValue="week" aria-label="Date range">
- *   <SegmentedControlIndicator className="my-indicator" />
- *   <SegmentedControlItem value="day">Day</SegmentedControlItem>
- *   <SegmentedControlItem value="week">Week</SegmentedControlItem>
- * </SegmentedControl>
- * ```
- */
-export declare const SegmentedControlIndicator: React.ForwardRefExoticComponent<Omit<SegmentedControlIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,21 +0,0 @@
-import * as React from 'react';
-import type { SegmentedControlItemProps } from './types.cjs';
-/**
- * One segment within a {@link SegmentedControl}. Renders `role="radio"` with
- * `aria-checked`, `aria-disabled`, `data-state` (`'checked'` / `'unchecked'`),
- * `data-disabled` and `data-value`. Selects on click **and on focus** — which is what makes
- * arrow-key navigation select as it moves, per the WAI-ARIA radio pattern.
- *
- * Only one segment is ever in the tab order: the checked one, or the first
- * enabled segment while nothing is checked. Enter is suppressed so it does not
- * fire a second, native click on top of the keyboard selection.
- *
- * @example
- * ```tsx
- * <SegmentedControl defaultValue="grid" aria-label="View">
- *   <SegmentedControlItem value="list">List</SegmentedControlItem>
- *   <SegmentedControlItem value="grid">Grid</SegmentedControlItem>
- * </SegmentedControl>
- * ```
- */
-export declare const SegmentedControlItem: React.ForwardRefExoticComponent<Omit<SegmentedControlItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -1,21 +0,0 @@
-import * as React from 'react';
-import type { SegmentedControlItemProps } from './types.js';
-/**
- * One segment within a {@link SegmentedControl}. Renders `role="radio"` with
- * `aria-checked`, `aria-disabled`, `data-state` (`'checked'` / `'unchecked'`),
- * `data-disabled` and `data-value`. Selects on click **and on focus** — which is what makes
- * arrow-key navigation select as it moves, per the WAI-ARIA radio pattern.
- *
- * Only one segment is ever in the tab order: the checked one, or the first
- * enabled segment while nothing is checked. Enter is suppressed so it does not
- * fire a second, native click on top of the keyboard selection.
- *
- * @example
- * ```tsx
- * <SegmentedControl defaultValue="grid" aria-label="View">
- *   <SegmentedControlItem value="list">List</SegmentedControlItem>
- *   <SegmentedControlItem value="grid">Grid</SegmentedControlItem>
- * </SegmentedControl>
- * ```
- */
-export declare const SegmentedControlItem: React.ForwardRefExoticComponent<Omit<SegmentedControlItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -1,4 +0,0 @@
-export { SegmentedControl } from './SegmentedControl.cjs';
-export { SegmentedControlIndicator } from './SegmentedControlIndicator.cjs';
-export { SegmentedControlItem } from './SegmentedControlItem.cjs';
-export type { SegmentedControlIndicatorProps, SegmentedControlItemProps, SegmentedControlOrientation, SegmentedControlProps, } from './types.cjs';

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

@@ -1,4 +0,0 @@
-export { SegmentedControl } from './SegmentedControl.js';
-export { SegmentedControlIndicator } from './SegmentedControlIndicator.js';
-export { SegmentedControlItem } from './SegmentedControlItem.js';
-export type { SegmentedControlIndicatorProps, SegmentedControlItemProps, SegmentedControlOrientation, SegmentedControlProps, } from './types.js';

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

@@ -1,73 +0,0 @@
-import type * as React from 'react';
-import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
-/** 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';
-/**
- * @internal Geometry of the checked segment, relative to the root's padding
- * box, published by {@link SegmentedControlIndicator} as CSS custom properties.
- * Not part of the public API.
- */
-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;
-    /** Fallback single tab stop when nothing is selected yet. */
-    firstEnabledValue: string | null;
-    onValueChange: (value: string) => 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'> {
-    /**
-     * 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 with the new value whenever the selected segment changes, controlled
-     * or not — including when an arrow key moves focus, since focus selects here.
-     * @default undefined — no-op if omitted.
-     */
-    onValueChange?: (value: string) => void;
-    /**
-     * Layout axis, exposed as `data-orientation` and `aria-orientation`, and the
-     * axis arrow keys navigate along. `'vertical'` also makes the indicator
-     * publish `--skdx-segmented-control-y` / `--skdx-segmented-control-height`.
-     * @default 'horizontal' — Left/Right navigate, and the indicator publishes
-     * only the x/width pair.
-     */
-    orientation?: SegmentedControlOrientation;
-    /**
-     * Disables every segment, blocking selection and taking the whole control out
-     * of the tab order.
-     * @default false
-     */
-    disabled?: boolean;
-}
-/** Props for a single {@link SegmentedControlItem}. */
-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,73 +0,0 @@
-import type * as React from 'react';
-import type { PrimitivePropsWithRef } from '../utils/primitive.js';
-/** 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';
-/**
- * @internal Geometry of the checked segment, relative to the root's padding
- * box, published by {@link SegmentedControlIndicator} as CSS custom properties.
- * Not part of the public API.
- */
-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;
-    /** Fallback single tab stop when nothing is selected yet. */
-    firstEnabledValue: string | null;
-    onValueChange: (value: string) => 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'> {
-    /**
-     * 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 with the new value whenever the selected segment changes, controlled
-     * or not — including when an arrow key moves focus, since focus selects here.
-     * @default undefined — no-op if omitted.
-     */
-    onValueChange?: (value: string) => void;
-    /**
-     * Layout axis, exposed as `data-orientation` and `aria-orientation`, and the
-     * axis arrow keys navigate along. `'vertical'` also makes the indicator
-     * publish `--skdx-segmented-control-y` / `--skdx-segmented-control-height`.
-     * @default 'horizontal' — Left/Right navigate, and the indicator publishes
-     * only the x/width pair.
-     */
-    orientation?: SegmentedControlOrientation;
-    /**
-     * Disables every segment, blocking selection and taking the whole control out
-     * of the tab order.
-     * @default false
-     */
-    disabled?: boolean;
-}
-/** Props for a single {@link SegmentedControlItem}. */
-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 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

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

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

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

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

@@ -1,16 +0,0 @@
-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/skip-link/SkipLink.cjs

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

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

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

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