@skdx/react 0.26.0

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

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

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

@@ -0,0 +1,81 @@
+import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+/** @internal Shared state distributed from {@link CheckboxCard} to its parts via context. Not part of the public API. */
+export interface CheckboxCardContextValue {
+    checked: boolean;
+    disabled: boolean;
+    required: boolean;
+    invalid: boolean;
+    name: string | undefined;
+    value: string;
+    labelId: string;
+    descriptionId: string;
+    /** Whether a `CheckboxCardLabel` is mounted, so the control only points `aria-labelledby` at an id that exists. */
+    hasLabel: boolean;
+    /** Whether a `CheckboxCardDescription` is mounted, so the control only points `aria-describedby` at an id that exists. */
+    hasDescription: boolean;
+    setHasLabel: (present: boolean) => void;
+    setHasDescription: (present: boolean) => void;
+    onCheckedChange: (checked: boolean) => void;
+}
+/** Props for the {@link CheckboxCard} root, the `<label>` whose whole surface is the hit target. */
+export interface CheckboxCardProps extends Omit<PrimitivePropsWithRef<'label'>, 'defaultChecked'> {
+    /**
+     * Checked state, for controlled usage. Pair with `onCheckedChange`.
+     * @default undefined — uncontrolled, tracks its own checked state internally.
+     */
+    checked?: boolean;
+    /**
+     * Initial checked state, for uncontrolled usage, seeding the first render.
+     * @default false — the card starts unselected.
+     */
+    defaultChecked?: boolean;
+    /**
+     * Fires with the new checked state whenever it changes, controlled or not.
+     * @default undefined — no-op if omitted.
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * Name put on the underlying native `<input type="checkbox">` for form
+     * submission. Unlike `Checkbox`, the input always exists here (it is what
+     * makes the card clickable), so omitting `name` only means the value is not
+     * submitted.
+     * @default undefined — the control is unnamed and contributes nothing to form data.
+     */
+    name?: string;
+    /**
+     * Value submitted with the control when checked.
+     * @default 'on' — the same default the HTML checkbox itself uses.
+     */
+    value?: string;
+    /**
+     * Marks the control required for native form validation, so an unchecked
+     * card blocks submission with `valueMissing`.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Disables the control, so neither the card surface nor the keyboard can
+     * change it and it leaves the tab order. Also emitted as `data-disabled` on
+     * the root.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Marks the card invalid, exposed as `aria-invalid` on the control and
+     * `data-invalid` on the root so the card can paint an error state.
+     * @default false
+     */
+    invalid?: boolean;
+}
+/** Props for the {@link CheckboxCardControl}, the real (visually hidden, still focusable) checkbox input. */
+export interface CheckboxCardControlProps extends Omit<PrimitivePropsWithRef<'input'>, 'checked' | 'defaultChecked' | 'type' | 'value'> {
+}
+/** Props for the {@link CheckboxCardIndicator}, the decorative check mark or box drawn on the card. */
+export interface CheckboxCardIndicatorProps extends PrimitivePropsWithRef<'span'> {
+}
+/** Props for the {@link CheckboxCardLabel}, the card's title line. */
+export interface CheckboxCardLabelProps extends PrimitivePropsWithRef<'span'> {
+}
+/** Props for the {@link CheckboxCardDescription}, the supporting copy under the title. */
+export interface CheckboxCardDescriptionProps extends PrimitivePropsWithRef<'span'> {
+}

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

@@ -0,0 +1,81 @@
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+/** @internal Shared state distributed from {@link CheckboxCard} to its parts via context. Not part of the public API. */
+export interface CheckboxCardContextValue {
+    checked: boolean;
+    disabled: boolean;
+    required: boolean;
+    invalid: boolean;
+    name: string | undefined;
+    value: string;
+    labelId: string;
+    descriptionId: string;
+    /** Whether a `CheckboxCardLabel` is mounted, so the control only points `aria-labelledby` at an id that exists. */
+    hasLabel: boolean;
+    /** Whether a `CheckboxCardDescription` is mounted, so the control only points `aria-describedby` at an id that exists. */
+    hasDescription: boolean;
+    setHasLabel: (present: boolean) => void;
+    setHasDescription: (present: boolean) => void;
+    onCheckedChange: (checked: boolean) => void;
+}
+/** Props for the {@link CheckboxCard} root, the `<label>` whose whole surface is the hit target. */
+export interface CheckboxCardProps extends Omit<PrimitivePropsWithRef<'label'>, 'defaultChecked'> {
+    /**
+     * Checked state, for controlled usage. Pair with `onCheckedChange`.
+     * @default undefined — uncontrolled, tracks its own checked state internally.
+     */
+    checked?: boolean;
+    /**
+     * Initial checked state, for uncontrolled usage, seeding the first render.
+     * @default false — the card starts unselected.
+     */
+    defaultChecked?: boolean;
+    /**
+     * Fires with the new checked state whenever it changes, controlled or not.
+     * @default undefined — no-op if omitted.
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * Name put on the underlying native `<input type="checkbox">` for form
+     * submission. Unlike `Checkbox`, the input always exists here (it is what
+     * makes the card clickable), so omitting `name` only means the value is not
+     * submitted.
+     * @default undefined — the control is unnamed and contributes nothing to form data.
+     */
+    name?: string;
+    /**
+     * Value submitted with the control when checked.
+     * @default 'on' — the same default the HTML checkbox itself uses.
+     */
+    value?: string;
+    /**
+     * Marks the control required for native form validation, so an unchecked
+     * card blocks submission with `valueMissing`.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Disables the control, so neither the card surface nor the keyboard can
+     * change it and it leaves the tab order. Also emitted as `data-disabled` on
+     * the root.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Marks the card invalid, exposed as `aria-invalid` on the control and
+     * `data-invalid` on the root so the card can paint an error state.
+     * @default false
+     */
+    invalid?: boolean;
+}
+/** Props for the {@link CheckboxCardControl}, the real (visually hidden, still focusable) checkbox input. */
+export interface CheckboxCardControlProps extends Omit<PrimitivePropsWithRef<'input'>, 'checked' | 'defaultChecked' | 'type' | 'value'> {
+}
+/** Props for the {@link CheckboxCardIndicator}, the decorative check mark or box drawn on the card. */
+export interface CheckboxCardIndicatorProps extends PrimitivePropsWithRef<'span'> {
+}
+/** Props for the {@link CheckboxCardLabel}, the card's title line. */
+export interface CheckboxCardLabelProps extends PrimitivePropsWithRef<'span'> {
+}
+/** Props for the {@link CheckboxCardDescription}, the supporting copy under the title. */
+export interface CheckboxCardDescriptionProps extends PrimitivePropsWithRef<'span'> {
+}

package/dist/checkbox-group/CheckboxGroup.cjs

@@ -0,0 +1 @@
+"use strict";var $=Object.create;var k=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var ee=Object.getPrototypeOf,oe=Object.prototype.hasOwnProperty;var te=(e,o)=>{for(var t in o)k(e,t,{get:o[t],enumerable:!0})},v=(e,o,t,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of j(o))!oe.call(e,r)&&r!==t&&k(e,r,{get:()=>o[r],enumerable:!(a=V(o,r))||a.enumerable});return e};var C=(e,o,t)=>(t=e!=null?$(ee(e)):{},v(o||!e||!e.__esModule?k(t,"default",{value:e,enumerable:!0}):t,e)),re=e=>v(k({},"__esModule",{value:!0}),e);var ce={};te(ce,{CheckboxGroup:()=>D,CheckboxGroupItem:()=>G,CheckboxGroupProvider:()=>L,CheckboxGroupSelectAll:()=>y,getSelectAllChecked:()=>B,useCheckboxGroupContext:()=>m});module.exports=re(ce);var s=C(require("react"),1),E=require("../utils/composeRefs.cjs"),w=require("../utils/createContext.cjs"),N=require("../utils/formControl.cjs"),M=require("../utils/part.cjs"),T=require("../utils/primitive.cjs"),H=require("../utils/useControllableState.cjs"),g=require("react/jsx-runtime"),[L,m]=(0,w.createSafeContext)("CheckboxGroup");function B(e,o){return e.length>0&&e.every(t=>o.includes(t))?!0:e.some(t=>o.includes(t))?"indeterminate":!1}var D=s.forwardRef(({value:e,defaultValue:o,onValueChange:t,name:a,required:r=!1,disabled:h=!1,invalid:n=!1,...p},f)=>{let[R=[],u]=(0,H.useControllableState)({prop:e,defaultProp:o??[],onChange:t}),[I,P]=s.useState([]),W=s.useCallback((c,l)=>{let i={value:c,disabled:l};return P(d=>[...d,i]),()=>P(d=>d.filter(_=>_!==i))},[]),b=s.useMemo(()=>I.filter(c=>!c.disabled).map(c=>c.value),[I]),A=B(b,R),X=s.useCallback((c,l)=>{u((i=[])=>l?i.includes(c)?i:[...i,c]:i.filter(d=>d!==c))},[u]),S=s.useRef(null),Y=(0,E.useComposedRefs)(f,S);(0,N.useFormReset)(S,()=>u(o??[]));let q=A===!0,Z=s.useCallback(()=>{u((c=[])=>q?c.filter(l=>!b.includes(l)):[...c,...b.filter(l=>!c.includes(l))])},[u,q,b]);return(0,g.jsx)(L,{name:a,value:R,disabled:h,required:r,selectAllChecked:A,toggleItem:X,toggleAll:Z,registerItem:W,children:(0,g.jsx)(T.Primitive.div,{role:"group","aria-invalid":n?!0:void 0,"data-disabled":h?"":void 0,"data-invalid":n?"":void 0,...p,...(0,M.skdxPart)("checkbox-group","root",p.className),ref:Y})})});D.displayName="CheckboxGroup";var x=C(require("react"),1),F=require("../checkbox/Checkbox.cjs"),O=require("../utils/part.cjs");var z=require("react/jsx-runtime"),G=x.forwardRef(({value:e,disabled:o,...t},a)=>{let r=m("CheckboxGroupItem"),h=r.value.includes(e),n=r.disabled||o||!1,{registerItem:p}=r;return x.useEffect(()=>p(e,n),[p,e,n]),(0,z.jsx)(F.Checkbox,{checked:h,onCheckedChange:f=>r.toggleItem(e,f===!0),disabled:n,name:r.name,value:e,"aria-required":r.required||void 0,"data-value":e,"data-skdx-checkbox-group-item":"",...t,...(0,O.skdxPart)("checkbox-group","item",t.className),ref:a})});G.displayName="CheckboxGroupItem";var J=C(require("react"),1),K=require("../checkbox/Checkbox.cjs"),Q=require("../utils/part.cjs");var U=require("react/jsx-runtime"),y=J.forwardRef(({disabled:e,...o},t)=>{let a=m("CheckboxGroupSelectAll");return(0,U.jsx)(K.Checkbox,{checked:a.selectAllChecked,onCheckedChange:()=>a.toggleAll(),disabled:a.disabled||e||!1,...o,...(0,Q.skdxPart)("checkbox-group","select-all",o.className),ref:t})});y.displayName="CheckboxGroupSelectAll";0&&(module.exports={CheckboxGroup,CheckboxGroupItem,CheckboxGroupProvider,CheckboxGroupSelectAll,getSelectAllChecked,useCheckboxGroupContext});

package/dist/checkbox-group/CheckboxGroup.d.cts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import type { CheckedState } from '../checkbox/types.cjs';
+import type { CheckboxGroupContextValue, CheckboxGroupProps } from './types.cjs';
+export declare const CheckboxGroupProvider: {
+    (props: CheckboxGroupContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useCheckboxGroupContext: (consumerName: string) => CheckboxGroupContextValue;
+/**
+ * The select-all parent's tri-state, derived from the *enabled* items only:
+ * a disabled item can neither be checked nor cleared by the parent, so
+ * counting it would leave the parent permanently indeterminate. An empty
+ * group reads as unchecked rather than "all of nothing is checked".
+ *
+ * @internal
+ */
+export declare function getSelectAllChecked(enabledValues: string[], value: string[]): CheckedState;
+/**
+ * A multi-selection group of checkboxes owning one `string[]` value. Renders
+ * `role="group"` with `data-disabled`, and `aria-invalid`/`data-invalid`
+ * when `invalid` is set — the role a {@link Fieldset} discovers as its
+ * control, which is how the group gets its `<legend>` name and its error
+ * wiring. `required` rides on the items instead (see below).
+ *
+ * Unlike `RadioGroup` there is no roving tabindex: every
+ * {@link CheckboxGroupItem} is its own tab stop, as native checkboxes are.
+ * Items and {@link CheckboxGroupSelectAll} are `Checkbox`es, so all the
+ * tri-state, keyboard and hidden-input behavior comes from there.
+ *
+ * @example
+ * ```tsx
+ * <Fieldset>
+ *   <FieldLabel>Notifications</FieldLabel>
+ *   <CheckboxGroup name="notify" defaultValue={['email']}>
+ *     <CheckboxGroupSelectAll>All</CheckboxGroupSelectAll>
+ *     <CheckboxGroupItem value="email">Email</CheckboxGroupItem>
+ *     <CheckboxGroupItem value="sms">SMS</CheckboxGroupItem>
+ *   </CheckboxGroup>
+ * </Fieldset>
+ * ```
+ */
+export declare const CheckboxGroup: React.ForwardRefExoticComponent<Omit<CheckboxGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/checkbox-group/CheckboxGroup.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import type { CheckedState } from '../checkbox/types.js';
+import type { CheckboxGroupContextValue, CheckboxGroupProps } from './types.js';
+export declare const CheckboxGroupProvider: {
+    (props: CheckboxGroupContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useCheckboxGroupContext: (consumerName: string) => CheckboxGroupContextValue;
+/**
+ * The select-all parent's tri-state, derived from the *enabled* items only:
+ * a disabled item can neither be checked nor cleared by the parent, so
+ * counting it would leave the parent permanently indeterminate. An empty
+ * group reads as unchecked rather than "all of nothing is checked".
+ *
+ * @internal
+ */
+export declare function getSelectAllChecked(enabledValues: string[], value: string[]): CheckedState;
+/**
+ * A multi-selection group of checkboxes owning one `string[]` value. Renders
+ * `role="group"` with `data-disabled`, and `aria-invalid`/`data-invalid`
+ * when `invalid` is set — the role a {@link Fieldset} discovers as its
+ * control, which is how the group gets its `<legend>` name and its error
+ * wiring. `required` rides on the items instead (see below).
+ *
+ * Unlike `RadioGroup` there is no roving tabindex: every
+ * {@link CheckboxGroupItem} is its own tab stop, as native checkboxes are.
+ * Items and {@link CheckboxGroupSelectAll} are `Checkbox`es, so all the
+ * tri-state, keyboard and hidden-input behavior comes from there.
+ *
+ * @example
+ * ```tsx
+ * <Fieldset>
+ *   <FieldLabel>Notifications</FieldLabel>
+ *   <CheckboxGroup name="notify" defaultValue={['email']}>
+ *     <CheckboxGroupSelectAll>All</CheckboxGroupSelectAll>
+ *     <CheckboxGroupItem value="email">Email</CheckboxGroupItem>
+ *     <CheckboxGroupItem value="sms">SMS</CheckboxGroupItem>
+ *   </CheckboxGroup>
+ * </Fieldset>
+ * ```
+ */
+export declare const CheckboxGroup: React.ForwardRefExoticComponent<Omit<CheckboxGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/checkbox-group/CheckboxGroup.js

@@ -0,0 +1 @@
+import*as t from"react";import{useComposedRefs as M}from"../utils/composeRefs.js";import{createSafeContext as T}from"../utils/createContext.js";import{useFormReset as H}from"../utils/formControl.js";import{skdxPart as L}from"../utils/part.js";import{Primitive as B}from"../utils/primitive.js";import{useControllableState as D}from"../utils/useControllableState.js";import{jsx as I}from"react/jsx-runtime";var[F,b]=T("CheckboxGroup");function O(e,r){return e.length>0&&e.every(c=>r.includes(c))?!0:e.some(c=>r.includes(c))?"indeterminate":!1}var z=t.forwardRef(({value:e,defaultValue:r,onValueChange:c,name:a,required:s=!1,disabled:m=!1,invalid:n=!1,...p},x)=>{let[f=[],u]=D({prop:e,defaultProp:r??[],onChange:c}),[C,g]=t.useState([]),q=t.useCallback((o,l)=>{let i={value:o,disabled:l};return g(d=>[...d,i]),()=>g(d=>d.filter(N=>N!==i))},[]),h=t.useMemo(()=>C.filter(o=>!o.disabled).map(o=>o.value),[C]),G=O(h,f),v=t.useCallback((o,l)=>{u((i=[])=>l?i.includes(o)?i:[...i,o]:i.filter(d=>d!==o))},[u]),y=t.useRef(null),E=M(x,y);H(y,()=>u(r??[]));let R=G===!0,w=t.useCallback(()=>{u((o=[])=>R?o.filter(l=>!h.includes(l)):[...o,...h.filter(l=>!o.includes(l))])},[u,R,h]);return I(F,{name:a,value:f,disabled:m,required:s,selectAllChecked:G,toggleItem:v,toggleAll:w,registerItem:q,children:I(B.div,{role:"group","aria-invalid":n?!0:void 0,"data-disabled":m?"":void 0,"data-invalid":n?"":void 0,...p,...L("checkbox-group","root",p.className),ref:E})})});z.displayName="CheckboxGroup";import*as k from"react";import{Checkbox as J}from"../checkbox/Checkbox.js";import{skdxPart as K}from"../utils/part.js";import{jsx as Q}from"react/jsx-runtime";var P=k.forwardRef(({value:e,disabled:r,...c},a)=>{let s=b("CheckboxGroupItem"),m=s.value.includes(e),n=s.disabled||r||!1,{registerItem:p}=s;return k.useEffect(()=>p(e,n),[p,e,n]),Q(J,{checked:m,onCheckedChange:x=>s.toggleItem(e,x===!0),disabled:n,name:s.name,value:e,"aria-required":s.required||void 0,"data-value":e,"data-skdx-checkbox-group-item":"",...c,...K("checkbox-group","item",c.className),ref:a})});P.displayName="CheckboxGroupItem";import*as A from"react";import{Checkbox as U}from"../checkbox/Checkbox.js";import{skdxPart as W}from"../utils/part.js";import{jsx as X}from"react/jsx-runtime";var S=A.forwardRef(({disabled:e,...r},c)=>{let a=b("CheckboxGroupSelectAll");return X(U,{checked:a.selectAllChecked,onCheckedChange:()=>a.toggleAll(),disabled:a.disabled||e||!1,...r,...W("checkbox-group","select-all",r.className),ref:c})});S.displayName="CheckboxGroupSelectAll";export{z as CheckboxGroup,P as CheckboxGroupItem,F as CheckboxGroupProvider,S as CheckboxGroupSelectAll,O as getSelectAllChecked,b as useCheckboxGroupContext};

package/dist/checkbox-group/CheckboxGroupItem.d.cts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { CheckboxGroupItemProps } from './types.cjs';
+/**
+ * One checkbox in a {@link CheckboxGroup}. It *is* a {@link Checkbox} — the
+ * role, `aria-checked`, `data-state`, the Space/Enter handling and the
+ * hidden `<input type="checkbox">` all come from there — with `checked`
+ * driven by whether its `value` is in the group's value, and `name` taken
+ * from the group so every checked item submits under the same key.
+ *
+ * @example
+ * ```tsx
+ * <CheckboxGroupItem value="email">
+ *   <CheckboxIndicator>✓</CheckboxIndicator>
+ *   Email
+ * </CheckboxGroupItem>
+ * ```
+ */
+export declare const CheckboxGroupItem: React.ForwardRefExoticComponent<Omit<CheckboxGroupItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/checkbox-group/CheckboxGroupItem.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { CheckboxGroupItemProps } from './types.js';
+/**
+ * One checkbox in a {@link CheckboxGroup}. It *is* a {@link Checkbox} — the
+ * role, `aria-checked`, `data-state`, the Space/Enter handling and the
+ * hidden `<input type="checkbox">` all come from there — with `checked`
+ * driven by whether its `value` is in the group's value, and `name` taken
+ * from the group so every checked item submits under the same key.
+ *
+ * @example
+ * ```tsx
+ * <CheckboxGroupItem value="email">
+ *   <CheckboxIndicator>✓</CheckboxIndicator>
+ *   Email
+ * </CheckboxGroupItem>
+ * ```
+ */
+export declare const CheckboxGroupItem: React.ForwardRefExoticComponent<Omit<CheckboxGroupItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/checkbox-group/CheckboxGroupSelectAll.d.cts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import type { CheckboxGroupSelectAllProps } from './types.cjs';
+/**
+ * The tri-state "select all" parent of a {@link CheckboxGroup}: checked when
+ * every enabled item is checked, `aria-checked="mixed"` when only some are,
+ * unchecked when none are. Clicking it checks every enabled item, or clears
+ * them when they are already all checked.
+ *
+ * It lives *inside* the group — it needs the same item registry the items
+ * feed, and inside the group is also where a screen reader announces it as
+ * part of the set. It carries no `value` and no `name`, so it renders no
+ * hidden input and is never submitted.
+ *
+ * @example
+ * ```tsx
+ * <CheckboxGroupSelectAll>
+ *   <CheckboxIndicator>✓</CheckboxIndicator>
+ *   Select all
+ * </CheckboxGroupSelectAll>
+ * ```
+ */
+export declare const CheckboxGroupSelectAll: React.ForwardRefExoticComponent<Omit<CheckboxGroupSelectAllProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/checkbox-group/CheckboxGroupSelectAll.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import type { CheckboxGroupSelectAllProps } from './types.js';
+/**
+ * The tri-state "select all" parent of a {@link CheckboxGroup}: checked when
+ * every enabled item is checked, `aria-checked="mixed"` when only some are,
+ * unchecked when none are. Clicking it checks every enabled item, or clears
+ * them when they are already all checked.
+ *
+ * It lives *inside* the group — it needs the same item registry the items
+ * feed, and inside the group is also where a screen reader announces it as
+ * part of the set. It carries no `value` and no `name`, so it renders no
+ * hidden input and is never submitted.
+ *
+ * @example
+ * ```tsx
+ * <CheckboxGroupSelectAll>
+ *   <CheckboxIndicator>✓</CheckboxIndicator>
+ *   Select all
+ * </CheckboxGroupSelectAll>
+ * ```
+ */
+export declare const CheckboxGroupSelectAll: React.ForwardRefExoticComponent<Omit<CheckboxGroupSelectAllProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,4 @@
+export * from './CheckboxGroup.cjs';
+export { CheckboxGroupItem } from './CheckboxGroupItem.cjs';
+export { CheckboxGroupSelectAll } from './CheckboxGroupSelectAll.cjs';
+export type { CheckboxGroupProps, CheckboxGroupItemProps, CheckboxGroupSelectAllProps } from './types.cjs';

package/dist/checkbox-group/index.d.ts

@@ -0,0 +1,4 @@
+export * from './CheckboxGroup.js';
+export { CheckboxGroupItem } from './CheckboxGroupItem.js';
+export { CheckboxGroupSelectAll } from './CheckboxGroupSelectAll.js';
+export type { CheckboxGroupProps, CheckboxGroupItemProps, CheckboxGroupSelectAllProps } from './types.js';

package/dist/checkbox-group/types.d.cts

@@ -0,0 +1,88 @@
+import type { CheckboxProps, CheckedState } from '../checkbox/types.cjs';
+import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+/** @internal One registered {@link CheckboxGroupItem}, as the root sees it. Not part of the public API. */
+export interface CheckboxGroupItemEntry {
+    value: string;
+    disabled: boolean;
+}
+/** @internal Shared state distributed from {@link CheckboxGroup} to its parts via context. Not part of the public API. */
+export interface CheckboxGroupContextValue {
+    name?: string;
+    value: string[];
+    disabled: boolean;
+    /** Group-level `required`, carried by each item as `aria-required`. */
+    required: boolean;
+    /** Tri-state of the select-all parent, derived from the enabled items. */
+    selectAllChecked: CheckedState;
+    /** Adds or removes one item's value. */
+    toggleItem: (value: string, checked: boolean) => void;
+    /** Checks every enabled item, or clears them all when they already are. */
+    toggleAll: () => void;
+    /** Registers an item for the whole duration of its mount; returns its unregister. */
+    registerItem: (value: string, disabled: boolean) => () => void;
+}
+/** Props for the {@link CheckboxGroup} root. */
+export interface CheckboxGroupProps extends Omit<PrimitivePropsWithRef<'div'>, 'defaultValue'> {
+    /**
+     * Checked item values, for controlled usage. Pair with `onValueChange`.
+     * @default undefined — uncontrolled, tracks its own value internally.
+     */
+    value?: string[];
+    /**
+     * Initially checked item values, for uncontrolled usage.
+     * @default [] — nothing checked.
+     */
+    defaultValue?: string[];
+    /**
+     * Fires with the new value array whenever the selection changes, controlled or not.
+     * @default undefined — no-op if omitted.
+     */
+    onValueChange?: (value: string[]) => void;
+    /**
+     * Name for native form participation: each item renders a hidden input
+     * under this name, so `formData.getAll(name)` returns every checked value.
+     * @default undefined — no hidden inputs rendered.
+     */
+    name?: string;
+    /**
+     * Marks the group as required — at least one item must be checked. Exposed
+     * as `aria-required` on every {@link CheckboxGroupItem}, *not* on the
+     * `role="group"` root: `aria-required` is not a global ARIA attribute and
+     * `role="group"` does not support it. The items' hidden inputs stay
+     * un-required — marking them would demand every box — so the "at least
+     * one" rule itself is a `Fieldset` validator's job.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Disables every item in the group, and the select-all parent.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Marks the group as invalid, exposed as `aria-invalid`/`data-invalid` on
+     * the `role="group"` root.
+     * @default false
+     */
+    invalid?: boolean;
+}
+/** Props for a single {@link CheckboxGroupItem}. The group owns `checked` and `name`, so neither is accepted. */
+export interface CheckboxGroupItemProps extends Omit<CheckboxProps, 'checked' | 'defaultChecked' | 'name' | 'onCheckedChange'> {
+    /** Unique identifier added to or removed from the group's `value`. */
+    value: string;
+    /**
+     * Disables this item alone, and excludes it from select-all: it is neither
+     * counted when deriving the parent's state nor changed when the parent is
+     * toggled.
+     * @default false
+     */
+    disabled?: boolean;
+}
+/** Props for the {@link CheckboxGroupSelectAll} tri-state parent. Its state is entirely derived, so it takes no value. */
+export interface CheckboxGroupSelectAllProps extends Omit<CheckboxProps, 'checked' | 'defaultChecked' | 'name' | 'value' | 'onCheckedChange'> {
+    /**
+     * Disables the parent alone; the group-level `disabled` also disables it.
+     * @default false
+     */
+    disabled?: boolean;
+}

package/dist/checkbox-group/types.d.ts

@@ -0,0 +1,88 @@
+import type { CheckboxProps, CheckedState } from '../checkbox/types.js';
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+/** @internal One registered {@link CheckboxGroupItem}, as the root sees it. Not part of the public API. */
+export interface CheckboxGroupItemEntry {
+    value: string;
+    disabled: boolean;
+}
+/** @internal Shared state distributed from {@link CheckboxGroup} to its parts via context. Not part of the public API. */
+export interface CheckboxGroupContextValue {
+    name?: string;
+    value: string[];
+    disabled: boolean;
+    /** Group-level `required`, carried by each item as `aria-required`. */
+    required: boolean;
+    /** Tri-state of the select-all parent, derived from the enabled items. */
+    selectAllChecked: CheckedState;
+    /** Adds or removes one item's value. */
+    toggleItem: (value: string, checked: boolean) => void;
+    /** Checks every enabled item, or clears them all when they already are. */
+    toggleAll: () => void;
+    /** Registers an item for the whole duration of its mount; returns its unregister. */
+    registerItem: (value: string, disabled: boolean) => () => void;
+}
+/** Props for the {@link CheckboxGroup} root. */
+export interface CheckboxGroupProps extends Omit<PrimitivePropsWithRef<'div'>, 'defaultValue'> {
+    /**
+     * Checked item values, for controlled usage. Pair with `onValueChange`.
+     * @default undefined — uncontrolled, tracks its own value internally.
+     */
+    value?: string[];
+    /**
+     * Initially checked item values, for uncontrolled usage.
+     * @default [] — nothing checked.
+     */
+    defaultValue?: string[];
+    /**
+     * Fires with the new value array whenever the selection changes, controlled or not.
+     * @default undefined — no-op if omitted.
+     */
+    onValueChange?: (value: string[]) => void;
+    /**
+     * Name for native form participation: each item renders a hidden input
+     * under this name, so `formData.getAll(name)` returns every checked value.
+     * @default undefined — no hidden inputs rendered.
+     */
+    name?: string;
+    /**
+     * Marks the group as required — at least one item must be checked. Exposed
+     * as `aria-required` on every {@link CheckboxGroupItem}, *not* on the
+     * `role="group"` root: `aria-required` is not a global ARIA attribute and
+     * `role="group"` does not support it. The items' hidden inputs stay
+     * un-required — marking them would demand every box — so the "at least
+     * one" rule itself is a `Fieldset` validator's job.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Disables every item in the group, and the select-all parent.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Marks the group as invalid, exposed as `aria-invalid`/`data-invalid` on
+     * the `role="group"` root.
+     * @default false
+     */
+    invalid?: boolean;
+}
+/** Props for a single {@link CheckboxGroupItem}. The group owns `checked` and `name`, so neither is accepted. */
+export interface CheckboxGroupItemProps extends Omit<CheckboxProps, 'checked' | 'defaultChecked' | 'name' | 'onCheckedChange'> {
+    /** Unique identifier added to or removed from the group's `value`. */
+    value: string;
+    /**
+     * Disables this item alone, and excludes it from select-all: it is neither
+     * counted when deriving the parent's state nor changed when the parent is
+     * toggled.
+     * @default false
+     */
+    disabled?: boolean;
+}
+/** Props for the {@link CheckboxGroupSelectAll} tri-state parent. Its state is entirely derived, so it takes no value. */
+export interface CheckboxGroupSelectAllProps extends Omit<CheckboxProps, 'checked' | 'defaultChecked' | 'name' | 'value' | 'onCheckedChange'> {
+    /**
+     * Disables the parent alone; the group-level `disabled` also disables it.
+     * @default false
+     */
+    disabled?: boolean;
+}

package/dist/clipboard/Clipboard.cjs

@@ -0,0 +1 @@
+"use strict";var J=Object.create;var n=Object.defineProperty;var K=Object.getOwnPropertyDescriptor;var Q=Object.getOwnPropertyNames;var U=Object.getPrototypeOf,X=Object.prototype.hasOwnProperty;var Y=(e,t)=>{for(var o in t)n(e,o,{get:t[o],enumerable:!0})},w=(e,t,o,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of Q(t))!X.call(e,r)&&r!==o&&n(e,r,{get:()=>t[r],enumerable:!(a=K(t,r))||a.enumerable});return e};var p=(e,t,o)=>(o=e!=null?J(U(e)):{},w(t||!e||!e.__esModule?n(o,"default",{value:e,enumerable:!0}):o,e)),Z=e=>w(n({},"__esModule",{value:!0}),e);var j={};Y(j,{Clipboard:()=>H,ClipboardIndicator:()=>C,ClipboardInput:()=>y,ClipboardProvider:()=>N,ClipboardTrigger:()=>x,useClipboardContext:()=>d});module.exports=Z(j);var i=p(require("react"),1),R=require("../utils/createContext.cjs"),I=require("../utils/liveAnnouncer.cjs"),E=require("../utils/part.cjs"),k=require("../utils/primitive.cjs"),f=require("../utils/useCallbackRef.cjs"),b=require("react/jsx-runtime"),[N,d]=(0,R.createSafeContext)("Clipboard");function _(e){let t=document.activeElement,o=document.createElement("textarea");o.value=e,o.setAttribute("readonly",""),o.style.cssText="position:fixed;top:0;left:-9999px;opacity:0;",document.body.appendChild(o);try{if(o.select(),typeof document.execCommand!="function"||!document.execCommand("copy"))throw new Error('[skandadx] `document.execCommand("copy")` is unavailable or was rejected.')}finally{o.remove(),t?.focus()}}async function $(e){if(navigator.clipboard?.writeText)try{await navigator.clipboard.writeText(e);return}catch{}_(e)}var H=i.forwardRef(({value:e,timeout:t=2e3,onCopy:o,onCopyError:a,disabled:r=!1,copiedLabel:c="Copied to clipboard",...h},G)=>{let[g,v]=i.useState(!1),m=i.useRef(void 0),P=(0,f.useCallbackRef)(o),T=(0,f.useCallbackRef)(a);i.useEffect(()=>()=>clearTimeout(m.current),[]);let W=i.useCallback(()=>{r||$(e).then(()=>{v(!0),c&&(0,I.announce)(c),P(e),clearTimeout(m.current),t!==null&&(m.current=setTimeout(()=>v(!1),t))},z=>T(z))},[r,e,t,c,P,T]);return(0,b.jsx)(N,{value:e,copied:g,disabled:r,copy:W,children:(0,b.jsx)(k.Primitive.div,{"data-state":g?"copied":"idle","data-disabled":r?"":void 0,...h,...(0,E.skdxPart)("clipboard","root",h.className),ref:G})})});H.displayName="Clipboard";var M=p(require("react"),1),S=require("../utils/part.cjs"),F=require("../utils/presence.cjs"),L=require("../utils/primitive.cjs");var u=require("react/jsx-runtime"),C=M.forwardRef(({match:e="copied",...t},o)=>{let r=d("ClipboardIndicator").copied?"copied":"idle";return(0,u.jsx)(F.Presence,{present:r===e,children:(0,u.jsx)(L.Primitive.span,{"data-state":r,...t,...(0,S.skdxPart)("clipboard","indicator",t.className),ref:o})})});C.displayName="ClipboardIndicator";var O=p(require("react"),1),A=require("../utils/part.cjs"),s=require("../utils/primitive.cjs");var V=require("react/jsx-runtime"),y=O.forwardRef((e,t)=>{let o=d("ClipboardInput");return(0,V.jsx)(s.Primitive.input,{type:"text","data-state":o.copied?"copied":"idle","data-disabled":o.disabled?"":void 0,"aria-disabled":o.disabled||void 0,...e,value:o.value,readOnly:!0,...(0,A.skdxPart)("clipboard","input",e.className),ref:t,onFocus:(0,s.composeEventHandlers)(e.onFocus,a=>a.currentTarget.select())})});y.displayName="ClipboardInput";var q=p(require("react"),1),B=require("../utils/part.cjs"),l=require("../utils/primitive.cjs");var D=require("react/jsx-runtime"),x=q.forwardRef(({disabled:e,...t},o)=>{let a=d("ClipboardTrigger"),r=a.disabled||e||!1;return(0,D.jsx)(l.Primitive.button,{type:"button","data-state":a.copied?"copied":"idle","data-disabled":r?"":void 0,disabled:r,...t,...(0,B.skdxPart)("clipboard","trigger",t.className),ref:o,onClick:(0,l.composeEventHandlers)(t.onClick,()=>a.copy())})});x.displayName="ClipboardTrigger";0&&(module.exports={Clipboard,ClipboardIndicator,ClipboardInput,ClipboardProvider,ClipboardTrigger,useClipboardContext});

package/dist/clipboard/Clipboard.d.cts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import type { ClipboardContextValue, ClipboardProps } from './types.cjs';
+export declare const ClipboardProvider: {
+    (props: ClipboardContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useClipboardContext: (consumerName: string) => ClipboardContextValue;
+/**
+ * Root of a copy-to-clipboard widget: owns the text to copy and the transient
+ * `copied` state, and hands both down to `ClipboardTrigger`,
+ * `ClipboardIndicator` and `ClipboardInput` via context. Renders a `<div>`
+ * with `data-state="copied" | "idle"` and `data-disabled`.
+ *
+ * A successful copy flips `data-state` to `"copied"`, calls `onCopy`, and
+ * announces politely through the shared live region — a checkmark that swaps
+ * in silently is invisible to a screen-reader user, who otherwise has no way
+ * to know the button did anything. The state falls back to `"idle"` after
+ * `timeout` ms; a second copy restarts that timer rather than inheriting the
+ * remainder of the first one, and unmounting cancels it.
+ *
+ * Copying goes through `navigator.clipboard.writeText` where available and
+ * through a hidden-textarea + `execCommand` fallback where it is not (or where
+ * it rejects), so a page on plain HTTP still copies. Failures surface through
+ * `onCopyError` only: nothing is thrown into render, nothing is swallowed.
+ *
+ * @example
+ * ```tsx
+ * <Clipboard value="npm i @skdx/react">
+ *   <ClipboardInput />
+ *   <ClipboardTrigger>
+ *     <ClipboardIndicator match="idle">Copy</ClipboardIndicator>
+ *     <ClipboardIndicator>Copied!</ClipboardIndicator>
+ *   </ClipboardTrigger>
+ * </Clipboard>
+ * ```
+ */
+export declare const Clipboard: React.ForwardRefExoticComponent<Omit<ClipboardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/clipboard/Clipboard.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import type { ClipboardContextValue, ClipboardProps } from './types.js';
+export declare const ClipboardProvider: {
+    (props: ClipboardContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useClipboardContext: (consumerName: string) => ClipboardContextValue;
+/**
+ * Root of a copy-to-clipboard widget: owns the text to copy and the transient
+ * `copied` state, and hands both down to `ClipboardTrigger`,
+ * `ClipboardIndicator` and `ClipboardInput` via context. Renders a `<div>`
+ * with `data-state="copied" | "idle"` and `data-disabled`.
+ *
+ * A successful copy flips `data-state` to `"copied"`, calls `onCopy`, and
+ * announces politely through the shared live region — a checkmark that swaps
+ * in silently is invisible to a screen-reader user, who otherwise has no way
+ * to know the button did anything. The state falls back to `"idle"` after
+ * `timeout` ms; a second copy restarts that timer rather than inheriting the
+ * remainder of the first one, and unmounting cancels it.
+ *
+ * Copying goes through `navigator.clipboard.writeText` where available and
+ * through a hidden-textarea + `execCommand` fallback where it is not (or where
+ * it rejects), so a page on plain HTTP still copies. Failures surface through
+ * `onCopyError` only: nothing is thrown into render, nothing is swallowed.
+ *
+ * @example
+ * ```tsx
+ * <Clipboard value="npm i @skdx/react">
+ *   <ClipboardInput />
+ *   <ClipboardTrigger>
+ *     <ClipboardIndicator match="idle">Copy</ClipboardIndicator>
+ *     <ClipboardIndicator>Copied!</ClipboardIndicator>
+ *   </ClipboardTrigger>
+ * </Clipboard>
+ * ```
+ */
+export declare const Clipboard: React.ForwardRefExoticComponent<Omit<ClipboardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;