@skdx/react 0.26.0

package/dist/carousel/types.d.ts

@@ -0,0 +1,110 @@
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+/** Shape returned by the exported `useCarouselContext` hook; distributed from {@link Carousel} to its parts via context. */
+export interface CarouselContextValue {
+    value: number;
+    setValue: (index: number) => void;
+    orientation: 'horizontal' | 'vertical';
+    loop: boolean;
+    itemIds: string[];
+    registerItem: (id: string) => void;
+    unregisterItem: (id: string) => void;
+    /** How many slides are visible at once. */
+    slidesPerPage: number;
+    /** How many slides one Previous/Next step (or Arrow keypress) moves. */
+    slidesPerMove: number;
+    /** Highest index the carousel can rest at — `max(0, count - slidesPerPage)`, so the last page stays full. */
+    maxIndex: number;
+    /** Moves to `index`, clamped into `[0, maxIndex]`. Ignores out-of-range values rather than throwing. */
+    scrollToIndex: (index: number) => void;
+    /** Steps forward by `slidesPerMove`, wrapping to the start when `loop` is set. The one stepping rule Next and the arrow keys share. */
+    next: () => void;
+    /** Steps back by `slidesPerMove`, wrapping to the last page when `loop` is set. */
+    previous: () => void;
+    /**
+     * Whether autoplay is switched on. This is the user's setting, not the live
+     * timer state — hover/focus/page-hidden suspend the timer without flipping it.
+     */
+    playing: boolean;
+    /** Starts or stops autoplay — what `CarouselPlayPause` calls. */
+    setPlaying: (playing: boolean) => void;
+}
+/** Props for the {@link Carousel} root. */
+export interface CarouselProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Index of the active slide, for controlled usage. Pair with `onValueChange`.
+     * @default undefined — uncontrolled, tracks its own active slide internally.
+     */
+    value?: number;
+    /**
+     * Initial active slide index, for uncontrolled usage.
+     * @default 0
+     */
+    defaultValue?: number;
+    /**
+     * Fires with the new active index whenever the slide changes, controlled or not.
+     * @default undefined — no-op if omitted.
+     */
+    onValueChange?: (index: number) => void;
+    /**
+     * Layout axis, exposed as `data-orientation` and used to pick Arrow
+     * Left/Right vs Arrow Up/Down for keyboard navigation.
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Whether stepping past the last slide (via keyboard or `CarouselNext`)
+     * wraps to the first, and vice versa for `CarouselPrevious`. When `false`,
+     * `CarouselPrevious`/`CarouselNext` disable themselves at the ends.
+     * @default false
+     */
+    loop?: boolean;
+    /**
+     * How many slides are visible at once. Slides from `value` up to
+     * `value + slidesPerPage - 1` are active; the rest stay `hidden`. Values
+     * below 1 are treated as 1.
+     * @default 1
+     */
+    slidesPerPage?: number;
+    /**
+     * How many slides one Previous/Next step (or Arrow keypress) advances by.
+     * Set it equal to `slidesPerPage` for page-at-a-time paging.
+     * @default 1
+     */
+    slidesPerMove?: number;
+    /**
+     * Gap between slides, published as the `--skdx-carousel-spacing` custom
+     * property on the root so your CSS can consume it (`gap: var(--skdx-carousel-spacing)`).
+     * A number is treated as pixels; a string is used verbatim.
+     * @default undefined — the property is not set, and your CSS decides.
+     */
+    spacing?: number | string;
+    /**
+     * Advances the carousel on a timer. Off by default, per WCAG 2.2.2: moving
+     * content that starts automatically needs a way to pause it, which
+     * `CarouselPlayPause` provides. Autoplay never starts under
+     * `prefers-reduced-motion: reduce`, and pauses while the pointer is over the
+     * root, while focus is inside it, and while the page is hidden.
+     * @default false
+     */
+    autoplay?: boolean;
+    /**
+     * Milliseconds to wait between automatic slide advances.
+     * @default 5000
+     */
+    autoplayInterval?: number;
+}
+/** Props for {@link CarouselContent}, the wrapper around the slide `CarouselItem`s. */
+export interface CarouselContentProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Props for a single {@link CarouselItem} slide. */
+export interface CarouselItemProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Props for {@link CarouselPrevious}, the button that steps to the previous slide. */
+export interface CarouselPreviousProps extends PrimitivePropsWithRef<'button'> {
+}
+/** Props for {@link CarouselNext}, the button that steps to the next slide. */
+export interface CarouselNextProps extends PrimitivePropsWithRef<'button'> {
+}
+/** Props for {@link CarouselPlayPause}, the autoplay pause/resume control. */
+export interface CarouselPlayPauseProps extends PrimitivePropsWithRef<'button'> {
+}

package/dist/checkbox/Checkbox.cjs

@@ -0,0 +1 @@
+"use strict";var V=Object.create;var f=Object.defineProperty;var q=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var G=(e,t)=>{for(var o in t)f(e,o,{get:t[o],enumerable:!0})},b=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of F(t))!A.call(e,n)&&n!==o&&f(e,n,{get:()=>t[n],enumerable:!(r=q(t,n))||r.enumerable});return e};var R=(e,t,o)=>(o=e!=null?V(z(e)):{},b(t||!e||!e.__esModule?f(o,"default",{value:e,enumerable:!0}):o,e)),J=e=>b(f({},"__esModule",{value:!0}),e);var Q={};G(Q,{Checkbox:()=>w,CheckboxIndicator:()=>k,CheckboxProvider:()=>H,getState:()=>p,useCheckboxContext:()=>u});module.exports=J(Q);var c=R(require("react"),1),y=require("../utils/composeRefs.cjs"),P=require("../utils/createContext.cjs"),I=require("../utils/formControl.cjs"),S=require("../utils/hiddenInput.cjs"),v=require("../utils/part.cjs"),i=require("../utils/primitive.cjs"),E=require("../utils/useControllableState.cjs"),d=require("react/jsx-runtime");function O(e){let t=c.useRef(null);return c.useEffect(()=>{t.current&&(t.current.indeterminate=e==="indeterminate")},[e]),t}var[H,u]=(0,P.createSafeContext)("Checkbox");function p(e){return e==="indeterminate"?"indeterminate":e?"checked":"unchecked"}var w=c.forwardRef(({checked:e,defaultChecked:t=!1,onCheckedChange:o,required:r,name:n,value:g="on",disabled:s=!1,invalid:l=!1,...m},D)=>{let[a=!1,x]=(0,E.useControllableState)({prop:e,defaultProp:t,onChange:o}),B=O(a),h=c.useRef(null),K=(0,y.useComposedRefs)(D,h);return(0,I.useFormReset)(h,()=>x(t)),(0,d.jsxs)(H,{checked:a,disabled:s,children:[(0,d.jsx)(i.Primitive.button,{type:"button",role:"checkbox","aria-checked":a==="indeterminate"?"mixed":a,"aria-required":r||void 0,"aria-invalid":l?!0:void 0,"data-state":p(a),"data-disabled":s?"":void 0,"data-invalid":l?"":void 0,disabled:s,...m,...(0,v.skdxPart)("checkbox","root",m.className),ref:K,onClick:(0,i.composeEventHandlers)(m.onClick,()=>{x(a==="indeterminate"?!0:!a)}),onKeyDown:(0,i.composeEventHandlers)(m.onKeyDown,C=>{C.key==="Enter"&&C.preventDefault()})}),n&&(0,d.jsx)(S.HiddenInput,{ref:B,type:"checkbox",name:n,value:g,checked:a==="indeterminate"?!1:a,required:r,disabled:s})]})});w.displayName="Checkbox";var L=R(require("react"),1),M=require("../utils/part.cjs"),N=require("../utils/primitive.cjs");var T=require("react/jsx-runtime"),k=L.forwardRef(({forceMount:e,...t},o)=>{let r=u("CheckboxIndicator");return e||r.checked!==!1?(0,T.jsx)(N.Primitive.span,{"data-state":p(r.checked),"data-disabled":r.disabled?"":void 0,...t,...(0,M.skdxPart)("checkbox","indicator",t.className),ref:o}):null});k.displayName="CheckboxIndicator";0&&(module.exports={Checkbox,CheckboxIndicator,CheckboxProvider,getState,useCheckboxContext});

package/dist/checkbox/Checkbox.d.cts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import type { CheckboxContextValue, CheckboxProps, CheckedState } from './types.cjs';
+export declare const CheckboxProvider: {
+    (props: CheckboxContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useCheckboxContext: (consumerName: string) => CheckboxContextValue;
+/** @internal Maps a {@link CheckedState} to the `data-state` string (`'checked'` / `'unchecked'` / `'indeterminate'`). */
+export declare function getState(checked: CheckedState): "indeterminate" | "checked" | "unchecked";
+/**
+ * A tri-state checkbox button. Renders `role="checkbox"` with `aria-checked`
+ * (`'mixed'` when indeterminate), `data-state` (`'checked'` / `'unchecked'` /
+ * `'indeterminate'`), `data-disabled`, and `aria-invalid`/`data-invalid` when
+ * `invalid` is set. Toggles between checked and unchecked on click or Space
+ * (Enter is suppressed, matching native checkbox behavior); clicking while
+ * indeterminate moves to checked. When `name` is set, also renders a
+ * visually-hidden native `<input type="checkbox">` so the value participates
+ * in real form submission.
+ *
+ * @example
+ * ```tsx
+ * <Checkbox defaultChecked name="terms">
+ *   <CheckboxIndicator>✓</CheckboxIndicator>
+ * </Checkbox>
+ * ```
+ */
+export declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/checkbox/Checkbox.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import type { CheckboxContextValue, CheckboxProps, CheckedState } from './types.js';
+export declare const CheckboxProvider: {
+    (props: CheckboxContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useCheckboxContext: (consumerName: string) => CheckboxContextValue;
+/** @internal Maps a {@link CheckedState} to the `data-state` string (`'checked'` / `'unchecked'` / `'indeterminate'`). */
+export declare function getState(checked: CheckedState): "indeterminate" | "checked" | "unchecked";
+/**
+ * A tri-state checkbox button. Renders `role="checkbox"` with `aria-checked`
+ * (`'mixed'` when indeterminate), `data-state` (`'checked'` / `'unchecked'` /
+ * `'indeterminate'`), `data-disabled`, and `aria-invalid`/`data-invalid` when
+ * `invalid` is set. Toggles between checked and unchecked on click or Space
+ * (Enter is suppressed, matching native checkbox behavior); clicking while
+ * indeterminate moves to checked. When `name` is set, also renders a
+ * visually-hidden native `<input type="checkbox">` so the value participates
+ * in real form submission.
+ *
+ * @example
+ * ```tsx
+ * <Checkbox defaultChecked name="terms">
+ *   <CheckboxIndicator>✓</CheckboxIndicator>
+ * </Checkbox>
+ * ```
+ */
+export declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/checkbox/Checkbox.js

@@ -0,0 +1 @@
+import*as r from"react";import{useComposedRefs as I}from"../utils/composeRefs.js";import{createSafeContext as S}from"../utils/createContext.js";import{useFormReset as v}from"../utils/formControl.js";import{HiddenInput as E}from"../utils/hiddenInput.js";import{skdxPart as H}from"../utils/part.js";import{composeEventHandlers as k,Primitive as w}from"../utils/primitive.js";import{useControllableState as L}from"../utils/useControllableState.js";import{jsx as l,jsxs as g}from"react/jsx-runtime";function M(e){let t=r.useRef(null);return r.useEffect(()=>{t.current&&(t.current.indeterminate=e==="indeterminate")},[e]),t}var[N,x]=S("Checkbox");function s(e){return e==="indeterminate"?"indeterminate":e?"checked":"unchecked"}var T=r.forwardRef(({checked:e,defaultChecked:t=!1,onCheckedChange:i,required:n,name:d,value:b="on",disabled:a=!1,invalid:m=!1,...c},R)=>{let[o=!1,f]=L({prop:e,defaultProp:t,onChange:i}),y=M(o),p=r.useRef(null),P=I(R,p);return v(p,()=>f(t)),g(N,{checked:o,disabled:a,children:[l(w.button,{type:"button",role:"checkbox","aria-checked":o==="indeterminate"?"mixed":o,"aria-required":n||void 0,"aria-invalid":m?!0:void 0,"data-state":s(o),"data-disabled":a?"":void 0,"data-invalid":m?"":void 0,disabled:a,...c,...H("checkbox","root",c.className),ref:P,onClick:k(c.onClick,()=>{f(o==="indeterminate"?!0:!o)}),onKeyDown:k(c.onKeyDown,u=>{u.key==="Enter"&&u.preventDefault()})}),d&&l(E,{ref:y,type:"checkbox",name:d,value:b,checked:o==="indeterminate"?!1:o,required:n,disabled:a})]})});T.displayName="Checkbox";import*as h from"react";import{skdxPart as D}from"../utils/part.js";import{Primitive as B}from"../utils/primitive.js";import{jsx as K}from"react/jsx-runtime";var C=h.forwardRef(({forceMount:e,...t},i)=>{let n=x("CheckboxIndicator");return e||n.checked!==!1?K(B.span,{"data-state":s(n.checked),"data-disabled":n.disabled?"":void 0,...t,...D("checkbox","indicator",t.className),ref:i}):null});C.displayName="CheckboxIndicator";export{T as Checkbox,C as CheckboxIndicator,N as CheckboxProvider,s as getState,x as useCheckboxContext};

package/dist/checkbox/CheckboxIndicator.d.cts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { CheckboxIndicatorProps } from './types.cjs';
+/**
+ * The visual mark (e.g. a check or dash icon) shown inside a {@link Checkbox}.
+ * Renders `<span data-state data-disabled>` mirroring the parent checkbox's
+ * state. Unmounts when unchecked unless `forceMount` is set.
+ *
+ * @example
+ * ```tsx
+ * <Checkbox defaultChecked>
+ *   <CheckboxIndicator>✓</CheckboxIndicator>
+ * </Checkbox>
+ * ```
+ */
+export declare const CheckboxIndicator: React.ForwardRefExoticComponent<Omit<CheckboxIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/checkbox/CheckboxIndicator.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { CheckboxIndicatorProps } from './types.js';
+/**
+ * The visual mark (e.g. a check or dash icon) shown inside a {@link Checkbox}.
+ * Renders `<span data-state data-disabled>` mirroring the parent checkbox's
+ * state. Unmounts when unchecked unless `forceMount` is set.
+ *
+ * @example
+ * ```tsx
+ * <Checkbox defaultChecked>
+ *   <CheckboxIndicator>✓</CheckboxIndicator>
+ * </Checkbox>
+ * ```
+ */
+export declare const CheckboxIndicator: React.ForwardRefExoticComponent<Omit<CheckboxIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/checkbox/index.d.cts

@@ -0,0 +1,3 @@
+export * from './Checkbox.cjs';
+export { CheckboxIndicator } from './CheckboxIndicator.cjs';
+export type { CheckboxProps, CheckboxIndicatorProps, CheckedState } from './types.cjs';

package/dist/checkbox/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Checkbox.js';
+export { CheckboxIndicator } from './CheckboxIndicator.js';
+export type { CheckboxProps, CheckboxIndicatorProps, CheckedState } from './types.js';

package/dist/checkbox/types.d.cts

@@ -0,0 +1,54 @@
+import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+/** A checkbox's tri-state value: checked, unchecked, or indeterminate (partially checked). */
+export type CheckedState = boolean | 'indeterminate';
+/** @internal Shared state distributed from {@link Checkbox} to its {@link CheckboxIndicator} via context. Not part of the public API. */
+export interface CheckboxContextValue {
+    checked: CheckedState;
+    disabled: boolean;
+}
+/** Props for the {@link Checkbox} root. */
+export interface CheckboxProps extends Omit<PrimitivePropsWithRef<'button'>, 'defaultChecked'> {
+    /**
+     * Checked state, for controlled usage. Pair with `onCheckedChange`.
+     * @default undefined — uncontrolled, tracks its own checked state internally.
+     */
+    checked?: CheckedState;
+    /**
+     * Initial checked state, for uncontrolled usage.
+     * @default false
+     */
+    defaultChecked?: CheckedState;
+    /**
+     * Fires with the new checked state whenever it changes, controlled or not.
+     * @default undefined — no-op if omitted.
+     */
+    onCheckedChange?: (checked: CheckedState) => void;
+    /**
+     * Marks the underlying hidden input as required for native form validation.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Name for native form participation via a hidden input. Omitted: no hidden input is rendered.
+     * @default undefined — no hidden input rendered.
+     */
+    name?: string;
+    /**
+     * Value submitted with the hidden input when checked.
+     * @default 'on'
+     */
+    value?: string;
+    /**
+     * Marks the checkbox as invalid, exposed as `aria-invalid`/`data-invalid`.
+     * @default false
+     */
+    invalid?: boolean;
+}
+/** Props for the {@link CheckboxIndicator}, the visual mark shown when checked or indeterminate. */
+export interface CheckboxIndicatorProps extends PrimitivePropsWithRef<'span'> {
+    /**
+     * Keep mounted regardless of state (for exit animations).
+     * @default false
+     */
+    forceMount?: boolean;
+}

package/dist/checkbox/types.d.ts

@@ -0,0 +1,54 @@
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+/** A checkbox's tri-state value: checked, unchecked, or indeterminate (partially checked). */
+export type CheckedState = boolean | 'indeterminate';
+/** @internal Shared state distributed from {@link Checkbox} to its {@link CheckboxIndicator} via context. Not part of the public API. */
+export interface CheckboxContextValue {
+    checked: CheckedState;
+    disabled: boolean;
+}
+/** Props for the {@link Checkbox} root. */
+export interface CheckboxProps extends Omit<PrimitivePropsWithRef<'button'>, 'defaultChecked'> {
+    /**
+     * Checked state, for controlled usage. Pair with `onCheckedChange`.
+     * @default undefined — uncontrolled, tracks its own checked state internally.
+     */
+    checked?: CheckedState;
+    /**
+     * Initial checked state, for uncontrolled usage.
+     * @default false
+     */
+    defaultChecked?: CheckedState;
+    /**
+     * Fires with the new checked state whenever it changes, controlled or not.
+     * @default undefined — no-op if omitted.
+     */
+    onCheckedChange?: (checked: CheckedState) => void;
+    /**
+     * Marks the underlying hidden input as required for native form validation.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Name for native form participation via a hidden input. Omitted: no hidden input is rendered.
+     * @default undefined — no hidden input rendered.
+     */
+    name?: string;
+    /**
+     * Value submitted with the hidden input when checked.
+     * @default 'on'
+     */
+    value?: string;
+    /**
+     * Marks the checkbox as invalid, exposed as `aria-invalid`/`data-invalid`.
+     * @default false
+     */
+    invalid?: boolean;
+}
+/** Props for the {@link CheckboxIndicator}, the visual mark shown when checked or indeterminate. */
+export interface CheckboxIndicatorProps extends PrimitivePropsWithRef<'span'> {
+    /**
+     * Keep mounted regardless of state (for exit animations).
+     * @default false
+     */
+    forceMount?: boolean;
+}

package/dist/checkbox-card/CheckboxCard.cjs

@@ -0,0 +1 @@
+"use strict";var j=Object.create;var l=Object.defineProperty;var ee=Object.getOwnPropertyDescriptor;var oe=Object.getOwnPropertyNames;var re=Object.getPrototypeOf,ae=Object.prototype.hasOwnProperty;var te=(o,r)=>{for(var e in r)l(o,e,{get:r[e],enumerable:!0})},H=(o,r,e,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let d of oe(r))!ae.call(o,d)&&d!==e&&l(o,d,{get:()=>r[d],enumerable:!(a=ee(r,d))||a.enumerable});return o};var n=(o,r,e)=>(e=o!=null?j(re(o)):{},H(r||!o||!o.__esModule?l(e,"default",{value:o,enumerable:!0}):e,o)),ce=o=>H(l({},"__esModule",{value:!0}),o);var de={};te(de,{CheckboxCard:()=>w,CheckboxCardControl:()=>x,CheckboxCardDescription:()=>P,CheckboxCardIndicator:()=>k,CheckboxCardLabel:()=>u,CheckboxCardProvider:()=>S,useCheckboxCardContext:()=>c});module.exports=ce(de);var t=n(require("react"),1),I=require("../utils/createContext.cjs"),N=require("../utils/part.cjs"),s=require("../utils/primitive.cjs"),E=require("../utils/useControllableState.cjs"),h=require("react/jsx-runtime"),[S,c]=(0,I.createSafeContext)("CheckboxCard"),w=t.forwardRef(({checked:o,defaultChecked:r=!1,onCheckedChange:e,name:a,value:d="on",required:O=!1,disabled:R=!1,invalid:y=!1,...i},Q)=>{let[L=!1,U]=(0,E.useControllableState)({prop:o,defaultProp:r,onChange:e}),v=t.useId(),[W,X]=t.useState(!1),[Y,Z]=t.useState(!1),[_,D]=t.useState(!1),C=t.useRef(!1);return(0,h.jsx)(S,{checked:L,disabled:R,required:O,invalid:y,name:a,value:d,labelId:`${v}-label`,descriptionId:`${v}-description`,hasLabel:W,hasDescription:Y,setHasLabel:X,setHasDescription:Z,onCheckedChange:U,children:(0,h.jsx)(s.Primitive.label,{"data-state":L?"checked":"unchecked","data-disabled":R?"":void 0,"data-invalid":y?"":void 0,"data-focus-visible":_?"":void 0,...i,...(0,N.skdxPart)("checkbox-card","root",i.className),ref:Q,onPointerDown:(0,s.composeEventHandlers)(i.onPointerDown,()=>{C.current=!0}),onFocus:(0,s.composeEventHandlers)(i.onFocus,()=>{D(!C.current),C.current=!1}),onBlur:(0,s.composeEventHandlers)(i.onBlur,()=>{D(!1),C.current=!1})})})});w.displayName="CheckboxCard";var g=n(require("react"),1),T=require("../utils/part.cjs"),b=require("../utils/primitive.cjs"),V=require("../utils/visuallyHidden.cjs");var m=require("react/jsx-runtime"),x=g.forwardRef((o,r)=>{let e=c("CheckboxCardControl");return(0,m.jsx)(V.VisuallyHidden,{asChild:!0,children:(0,m.jsx)(b.Primitive.input,{type:"checkbox",name:e.name,value:e.value,checked:e.checked,required:e.required,disabled:e.disabled,"aria-invalid":e.invalid?!0:void 0,"aria-labelledby":e.hasLabel?e.labelId:void 0,"aria-describedby":e.hasDescription?e.descriptionId:void 0,"data-state":e.checked?"checked":"unchecked",...o,...(0,T.skdxPart)("checkbox-card","control",o.className),ref:r,onChange:(0,b.composeEventHandlers)(o.onChange,a=>{e.onCheckedChange(a.currentTarget.checked)})})})});x.displayName="CheckboxCardControl";var M=n(require("react"),1),q=require("../utils/part.cjs"),F=require("../utils/primitive.cjs");var B=require("react/jsx-runtime"),k=M.forwardRef((o,r)=>{let e=c("CheckboxCardIndicator");return(0,B.jsx)(F.Primitive.span,{"aria-hidden":!0,"data-state":e.checked?"checked":"unchecked","data-disabled":e.disabled?"":void 0,...o,...(0,q.skdxPart)("checkbox-card","indicator",o.className),ref:r})});k.displayName="CheckboxCardIndicator";var p=n(require("react"),1),$=require("../utils/part.cjs"),z=require("../utils/primitive.cjs");var A=require("react/jsx-runtime"),u=p.forwardRef((o,r)=>{let e=c("CheckboxCardLabel"),{setHasLabel:a}=e;return p.useEffect(()=>(a(!0),()=>a(!1)),[a]),(0,A.jsx)(z.Primitive.span,{id:e.labelId,"data-disabled":e.disabled?"":void 0,...o,...(0,$.skdxPart)("checkbox-card","label",o.className),ref:r})});u.displayName="CheckboxCardLabel";var f=n(require("react"),1),G=require("../utils/part.cjs"),J=require("../utils/primitive.cjs");var K=require("react/jsx-runtime"),P=f.forwardRef((o,r)=>{let e=c("CheckboxCardDescription"),{setHasDescription:a}=e;return f.useEffect(()=>(a(!0),()=>a(!1)),[a]),(0,K.jsx)(J.Primitive.span,{id:e.descriptionId,"data-disabled":e.disabled?"":void 0,...o,...(0,G.skdxPart)("checkbox-card","description",o.className),ref:r})});P.displayName="CheckboxCardDescription";0&&(module.exports={CheckboxCard,CheckboxCardControl,CheckboxCardDescription,CheckboxCardIndicator,CheckboxCardLabel,CheckboxCardProvider,useCheckboxCardContext});

package/dist/checkbox-card/CheckboxCard.d.cts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import type { CheckboxCardContextValue, CheckboxCardProps } from './types.cjs';
+export declare const CheckboxCardProvider: {
+    (props: CheckboxCardContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useCheckboxCardContext: (consumerName: string) => CheckboxCardContextValue;
+/**
+ * Root of a selectable card backed by a checkbox: a `<label>` wrapping a real,
+ * visually hidden `<input type="checkbox">` ({@link CheckboxCardControl}), so
+ * the **entire card surface** is the hit target with no click handler, no
+ * `onKeyDown` and no `role` of its own — native label activation does it.
+ *
+ * Emits `data-state="checked" | "unchecked"`, `data-disabled`, `data-invalid`
+ * and `data-focus-visible` on the root, which is the whole styling contract:
+ * the card paints its selected, disabled, error and keyboard-focus rings from
+ * the input's state without the input ever being visible.
+ *
+ * Works controlled (`checked` + `onCheckedChange`) or uncontrolled
+ * (`defaultChecked`), and participates in native form submission when `name`
+ * is set.
+ *
+ * **Nothing interactive may be nested inside the card.** The root is a
+ * `<label>`, so a link or button in there is both an HTML content-model
+ * violation and a real usability bug — clicking the inner control would also
+ * toggle the card. Put actions beside the card, never inside it.
+ *
+ * @example
+ * ```tsx
+ * <CheckboxCard defaultChecked name="addons" value="backups">
+ *   <CheckboxCardControl />
+ *   <CheckboxCardIndicator />
+ *   <CheckboxCardLabel>Automated backups</CheckboxCardLabel>
+ *   <CheckboxCardDescription>Nightly snapshots, kept for 30 days.</CheckboxCardDescription>
+ * </CheckboxCard>
+ * ```
+ */
+export declare const CheckboxCard: React.ForwardRefExoticComponent<Omit<CheckboxCardProps, "ref"> & React.RefAttributes<HTMLLabelElement>>;

package/dist/checkbox-card/CheckboxCard.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import type { CheckboxCardContextValue, CheckboxCardProps } from './types.js';
+export declare const CheckboxCardProvider: {
+    (props: CheckboxCardContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useCheckboxCardContext: (consumerName: string) => CheckboxCardContextValue;
+/**
+ * Root of a selectable card backed by a checkbox: a `<label>` wrapping a real,
+ * visually hidden `<input type="checkbox">` ({@link CheckboxCardControl}), so
+ * the **entire card surface** is the hit target with no click handler, no
+ * `onKeyDown` and no `role` of its own — native label activation does it.
+ *
+ * Emits `data-state="checked" | "unchecked"`, `data-disabled`, `data-invalid`
+ * and `data-focus-visible` on the root, which is the whole styling contract:
+ * the card paints its selected, disabled, error and keyboard-focus rings from
+ * the input's state without the input ever being visible.
+ *
+ * Works controlled (`checked` + `onCheckedChange`) or uncontrolled
+ * (`defaultChecked`), and participates in native form submission when `name`
+ * is set.
+ *
+ * **Nothing interactive may be nested inside the card.** The root is a
+ * `<label>`, so a link or button in there is both an HTML content-model
+ * violation and a real usability bug — clicking the inner control would also
+ * toggle the card. Put actions beside the card, never inside it.
+ *
+ * @example
+ * ```tsx
+ * <CheckboxCard defaultChecked name="addons" value="backups">
+ *   <CheckboxCardControl />
+ *   <CheckboxCardIndicator />
+ *   <CheckboxCardLabel>Automated backups</CheckboxCardLabel>
+ *   <CheckboxCardDescription>Nightly snapshots, kept for 30 days.</CheckboxCardDescription>
+ * </CheckboxCard>
+ * ```
+ */
+export declare const CheckboxCard: React.ForwardRefExoticComponent<Omit<CheckboxCardProps, "ref"> & React.RefAttributes<HTMLLabelElement>>;

package/dist/checkbox-card/CheckboxCard.js

@@ -0,0 +1 @@
+import*as a from"react";import{createSafeContext as T}from"../utils/createContext.js";import{skdxPart as V}from"../utils/part.js";import{composeEventHandlers as C,Primitive as M}from"../utils/primitive.js";import{useControllableState as q}from"../utils/useControllableState.js";import{jsx as m}from"react/jsx-runtime";var[F,c]=T("CheckboxCard"),B=a.forwardRef(({checked:o,defaultChecked:t=!1,onCheckedChange:e,name:r,value:v="on",required:D=!1,disabled:l=!1,invalid:b=!1,...d},H)=>{let[p=!1,I]=q({prop:o,defaultProp:t,onChange:e}),f=a.useId(),[N,E]=a.useState(!1),[S,w]=a.useState(!1),[g,h]=a.useState(!1),s=a.useRef(!1);return m(F,{checked:p,disabled:l,required:D,invalid:b,name:r,value:v,labelId:`${f}-label`,descriptionId:`${f}-description`,hasLabel:N,hasDescription:S,setHasLabel:E,setHasDescription:w,onCheckedChange:I,children:m(M.label,{"data-state":p?"checked":"unchecked","data-disabled":l?"":void 0,"data-invalid":b?"":void 0,"data-focus-visible":g?"":void 0,...d,...V("checkbox-card","root",d.className),ref:H,onPointerDown:C(d.onPointerDown,()=>{s.current=!0}),onFocus:C(d.onFocus,()=>{h(!s.current),s.current=!1}),onBlur:C(d.onBlur,()=>{h(!1),s.current=!1})})})});B.displayName="CheckboxCard";import*as k from"react";import{skdxPart as $}from"../utils/part.js";import{composeEventHandlers as z,Primitive as A}from"../utils/primitive.js";import{VisuallyHidden as G}from"../utils/visuallyHidden.js";import{jsx as x}from"react/jsx-runtime";var u=k.forwardRef((o,t)=>{let e=c("CheckboxCardControl");return x(G,{asChild:!0,children:x(A.input,{type:"checkbox",name:e.name,value:e.value,checked:e.checked,required:e.required,disabled:e.disabled,"aria-invalid":e.invalid?!0:void 0,"aria-labelledby":e.hasLabel?e.labelId:void 0,"aria-describedby":e.hasDescription?e.descriptionId:void 0,"data-state":e.checked?"checked":"unchecked",...o,...$("checkbox-card","control",o.className),ref:t,onChange:z(o.onChange,r=>{e.onCheckedChange(r.currentTarget.checked)})})})});u.displayName="CheckboxCardControl";import*as P from"react";import{skdxPart as J}from"../utils/part.js";import{Primitive as K}from"../utils/primitive.js";import{jsx as O}from"react/jsx-runtime";var R=P.forwardRef((o,t)=>{let e=c("CheckboxCardIndicator");return O(K.span,{"aria-hidden":!0,"data-state":e.checked?"checked":"unchecked","data-disabled":e.disabled?"":void 0,...o,...J("checkbox-card","indicator",o.className),ref:t})});R.displayName="CheckboxCardIndicator";import*as i from"react";import{skdxPart as Q}from"../utils/part.js";import{Primitive as U}from"../utils/primitive.js";import{jsx as W}from"react/jsx-runtime";var y=i.forwardRef((o,t)=>{let e=c("CheckboxCardLabel"),{setHasLabel:r}=e;return i.useEffect(()=>(r(!0),()=>r(!1)),[r]),W(U.span,{id:e.labelId,"data-disabled":e.disabled?"":void 0,...o,...Q("checkbox-card","label",o.className),ref:t})});y.displayName="CheckboxCardLabel";import*as n from"react";import{skdxPart as X}from"../utils/part.js";import{Primitive as Y}from"../utils/primitive.js";import{jsx as Z}from"react/jsx-runtime";var L=n.forwardRef((o,t)=>{let e=c("CheckboxCardDescription"),{setHasDescription:r}=e;return n.useEffect(()=>(r(!0),()=>r(!1)),[r]),Z(Y.span,{id:e.descriptionId,"data-disabled":e.disabled?"":void 0,...o,...X("checkbox-card","description",o.className),ref:t})});L.displayName="CheckboxCardDescription";export{B as CheckboxCard,u as CheckboxCardControl,L as CheckboxCardDescription,R as CheckboxCardIndicator,y as CheckboxCardLabel,F as CheckboxCardProvider,c as useCheckboxCardContext};

package/dist/checkbox-card/CheckboxCardControl.d.cts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import type { CheckboxCardControlProps } from './types.cjs';
+/**
+ * The real `<input type="checkbox">` behind a {@link CheckboxCard}. Rendered
+ * through {@link VisuallyHidden}, **not** `display: none` or `hidden` — a
+ * removed input is out of the accessibility tree and out of the tab order,
+ * which would leave the card unusable by keyboard and silent to a screen
+ * reader. Clipped to 1×1 it stays focusable, announceable and submittable.
+ *
+ * Takes `name`, `value`, `required`, `disabled` and the checked state from the
+ * card root, and wires `aria-labelledby`/`aria-describedby` to the
+ * {@link CheckboxCardLabel} / {@link CheckboxCardDescription} automatically —
+ * only when those parts are actually mounted, so the control never points at
+ * an id that does not exist.
+ *
+ * Exactly one of these belongs in a card, and it must be a descendant of the
+ * root `<label>` — that ancestry is what makes the whole card clickable.
+ *
+ * @example
+ * ```tsx
+ * <CheckboxCard name="addons" value="backups">
+ *   <CheckboxCardControl />
+ *   <CheckboxCardLabel>Automated backups</CheckboxCardLabel>
+ * </CheckboxCard>
+ * ```
+ */
+export declare const CheckboxCardControl: React.ForwardRefExoticComponent<Omit<CheckboxCardControlProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/checkbox-card/CheckboxCardControl.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import type { CheckboxCardControlProps } from './types.js';
+/**
+ * The real `<input type="checkbox">` behind a {@link CheckboxCard}. Rendered
+ * through {@link VisuallyHidden}, **not** `display: none` or `hidden` — a
+ * removed input is out of the accessibility tree and out of the tab order,
+ * which would leave the card unusable by keyboard and silent to a screen
+ * reader. Clipped to 1×1 it stays focusable, announceable and submittable.
+ *
+ * Takes `name`, `value`, `required`, `disabled` and the checked state from the
+ * card root, and wires `aria-labelledby`/`aria-describedby` to the
+ * {@link CheckboxCardLabel} / {@link CheckboxCardDescription} automatically —
+ * only when those parts are actually mounted, so the control never points at
+ * an id that does not exist.
+ *
+ * Exactly one of these belongs in a card, and it must be a descendant of the
+ * root `<label>` — that ancestry is what makes the whole card clickable.
+ *
+ * @example
+ * ```tsx
+ * <CheckboxCard name="addons" value="backups">
+ *   <CheckboxCardControl />
+ *   <CheckboxCardLabel>Automated backups</CheckboxCardLabel>
+ * </CheckboxCard>
+ * ```
+ */
+export declare const CheckboxCardControl: React.ForwardRefExoticComponent<Omit<CheckboxCardControlProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/checkbox-card/CheckboxCardDescription.d.cts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { CheckboxCardDescriptionProps } from './types.cjs';
+/**
+ * Supporting copy under a {@link CheckboxCardLabel} — price, quota, caveat.
+ * Registers itself with the card root on mount, which is what wires the
+ * control's `aria-describedby` here, so the description is announced after the
+ * name instead of being swallowed into it.
+ *
+ * Purely additive: leave it out and the control simply has no
+ * `aria-describedby`.
+ *
+ * @example
+ * ```tsx
+ * <CheckboxCard>
+ *   <CheckboxCardControl />
+ *   <CheckboxCardLabel>Automated backups</CheckboxCardLabel>
+ *   <CheckboxCardDescription>Nightly snapshots, kept for 30 days.</CheckboxCardDescription>
+ * </CheckboxCard>
+ * ```
+ */
+export declare const CheckboxCardDescription: React.ForwardRefExoticComponent<Omit<CheckboxCardDescriptionProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/checkbox-card/CheckboxCardDescription.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { CheckboxCardDescriptionProps } from './types.js';
+/**
+ * Supporting copy under a {@link CheckboxCardLabel} — price, quota, caveat.
+ * Registers itself with the card root on mount, which is what wires the
+ * control's `aria-describedby` here, so the description is announced after the
+ * name instead of being swallowed into it.
+ *
+ * Purely additive: leave it out and the control simply has no
+ * `aria-describedby`.
+ *
+ * @example
+ * ```tsx
+ * <CheckboxCard>
+ *   <CheckboxCardControl />
+ *   <CheckboxCardLabel>Automated backups</CheckboxCardLabel>
+ *   <CheckboxCardDescription>Nightly snapshots, kept for 30 days.</CheckboxCardDescription>
+ * </CheckboxCard>
+ * ```
+ */
+export declare const CheckboxCardDescription: React.ForwardRefExoticComponent<Omit<CheckboxCardDescriptionProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/checkbox-card/CheckboxCardIndicator.d.cts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import type { CheckboxCardIndicatorProps } from './types.cjs';
+/**
+ * The decorative check mark (or empty box) drawn on a {@link CheckboxCard}.
+ * Mirrors the card's `data-state` and `data-disabled`.
+ *
+ * Unlike `CheckboxIndicator` this stays mounted when unchecked, because on a
+ * card the indicator is the *box*, not just the tick — unmounting it would
+ * collapse the card's layout on every deselect. It is `aria-hidden`: the real
+ * `<input>` already announces the checked state, and a second copy would make
+ * a screen reader say it twice.
+ *
+ * @example
+ * ```tsx
+ * <CheckboxCard defaultChecked>
+ *   <CheckboxCardControl />
+ *   <CheckboxCardIndicator>✓</CheckboxCardIndicator>
+ *   <CheckboxCardLabel>Automated backups</CheckboxCardLabel>
+ * </CheckboxCard>
+ * ```
+ */
+export declare const CheckboxCardIndicator: React.ForwardRefExoticComponent<Omit<CheckboxCardIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/checkbox-card/CheckboxCardIndicator.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import type { CheckboxCardIndicatorProps } from './types.js';
+/**
+ * The decorative check mark (or empty box) drawn on a {@link CheckboxCard}.
+ * Mirrors the card's `data-state` and `data-disabled`.
+ *
+ * Unlike `CheckboxIndicator` this stays mounted when unchecked, because on a
+ * card the indicator is the *box*, not just the tick — unmounting it would
+ * collapse the card's layout on every deselect. It is `aria-hidden`: the real
+ * `<input>` already announces the checked state, and a second copy would make
+ * a screen reader say it twice.
+ *
+ * @example
+ * ```tsx
+ * <CheckboxCard defaultChecked>
+ *   <CheckboxCardControl />
+ *   <CheckboxCardIndicator>✓</CheckboxCardIndicator>
+ *   <CheckboxCardLabel>Automated backups</CheckboxCardLabel>
+ * </CheckboxCard>
+ * ```
+ */
+export declare const CheckboxCardIndicator: React.ForwardRefExoticComponent<Omit<CheckboxCardIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/checkbox-card/CheckboxCardLabel.d.cts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { CheckboxCardLabelProps } from './types.cjs';
+/**
+ * The card's title line, and the control's accessible name via
+ * `aria-labelledby`.
+ *
+ * Renders a `<span>`, not a `<label>`: the card root is already the label, and
+ * nesting a second one is invalid HTML. It registers itself with the root on
+ * mount so the control only points `aria-labelledby` here while this part
+ * exists — omit it and the control falls back to the native implicit label,
+ * naming itself from the card's whole text content (description included).
+ *
+ * @example
+ * ```tsx
+ * <CheckboxCard>
+ *   <CheckboxCardControl />
+ *   <CheckboxCardLabel>Automated backups</CheckboxCardLabel>
+ * </CheckboxCard>
+ * ```
+ */
+export declare const CheckboxCardLabel: React.ForwardRefExoticComponent<Omit<CheckboxCardLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/checkbox-card/CheckboxCardLabel.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { CheckboxCardLabelProps } from './types.js';
+/**
+ * The card's title line, and the control's accessible name via
+ * `aria-labelledby`.
+ *
+ * Renders a `<span>`, not a `<label>`: the card root is already the label, and
+ * nesting a second one is invalid HTML. It registers itself with the root on
+ * mount so the control only points `aria-labelledby` here while this part
+ * exists — omit it and the control falls back to the native implicit label,
+ * naming itself from the card's whole text content (description included).
+ *
+ * @example
+ * ```tsx
+ * <CheckboxCard>
+ *   <CheckboxCardControl />
+ *   <CheckboxCardLabel>Automated backups</CheckboxCardLabel>
+ * </CheckboxCard>
+ * ```
+ */
+export declare const CheckboxCardLabel: React.ForwardRefExoticComponent<Omit<CheckboxCardLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/checkbox-card/index.d.cts

@@ -0,0 +1,6 @@
+export * from './CheckboxCard.cjs';
+export { CheckboxCardControl } from './CheckboxCardControl.cjs';
+export { CheckboxCardIndicator } from './CheckboxCardIndicator.cjs';
+export { CheckboxCardLabel } from './CheckboxCardLabel.cjs';
+export { CheckboxCardDescription } from './CheckboxCardDescription.cjs';
+export type { CheckboxCardProps, CheckboxCardControlProps, CheckboxCardIndicatorProps, CheckboxCardLabelProps, CheckboxCardDescriptionProps, } from './types.cjs';