@sharedex/ui 0.9.0 → 0.10.0

package/dist/forms/chips.js

@@ -0,0 +1,140 @@
+// The structural sheet of ChipGroup: a `<fieldset>` of filter chips, each a label round its real checkbox (or radio),
+// which lies over the whole chip at opacity 0 and takes the click, the keys and the focus. A chip that is on opens a
+// column for its check before the words. Positioning only; the look is styles/form.css. Pure string. See ./CLAUDE.md.
+import { LAYER_ORDER } from "../backgrounds/runtime/rootCss.js";
+const CONTROL = "[data-sx-chip-control]";
+const ON = `:has(${CONTROL}:checked)`;
+// High contrast: the real checkbox comes back at the chip's start; the drawn check and the layers step aside.
+export const CHIPS_CSS = `${LAYER_ORDER}
+@layer components {
+  :where([data-sx-chips]) {
+    --sx-form-dir: 1;
+    --sx-chips-gap: 0.5rem;
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+  :where([data-sx-chips]:dir(rtl)) {
+    --sx-form-dir: -1;
+  }
+  :where([data-sx-chips-legend]) {
+    padding: 0;
+    margin-block-end: 0.5rem;
+  }
+  :where([data-sx-chips-description]) {
+    margin: 0 0 0.5rem;
+  }
+  :where([data-sx-chips-options]) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--sx-chips-gap);
+  }
+  :where([data-sx-chip-option]) {
+    position: relative;
+    isolation: isolate;
+    display: inline-grid;
+    grid-template-columns: minmax(0, 0fr) auto;
+    align-items: center;
+    min-block-size: 2rem;
+    box-sizing: border-box;
+    padding-inline: 0.75rem;
+    border-radius: 999px;
+    line-height: 1.25;
+    cursor: pointer;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+  :where([data-sx-chip-option]${ON}) {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+  :where([data-sx-chip-check]) {
+    display: flex;
+    align-items: center;
+    min-inline-size: 0;
+    overflow: hidden;
+  }
+  :where([data-sx-chip-check] > svg) {
+    flex: none;
+    inline-size: 1em;
+    block-size: 1em;
+    margin-inline-end: 0.375rem;
+    overflow: visible;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  :where([data-sx-chip-check] path) {
+    stroke-dasharray: 1 2;
+    stroke-dashoffset: 1.01;
+  }
+  :where([data-sx-chip-option]${ON} [data-sx-chip-check] path) {
+    stroke-dashoffset: 0;
+  }
+  :where(${CONTROL}) {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    inline-size: 100%;
+    block-size: 100%;
+    margin: 0;
+    border-radius: inherit;
+    opacity: 0;
+    cursor: inherit;
+    appearance: none;
+  }
+  :where([data-sx-chip-option]:has(${CONTROL}:focus-visible)) {
+    outline: 2px solid var(--color-sx-primary, currentColor);
+    outline-offset: 2px;
+  }
+  :where([data-sx-chip-option]:has(${CONTROL}:disabled)) {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+  :where([data-sx-chips] [data-sx-chip-layer]) {
+    position: absolute;
+    z-index: -1;
+    pointer-events: none;
+  }
+  :where([data-sx-chips-message]) {
+    display: grid;
+    grid-template-rows: 0fr;
+  }
+  :where([data-sx-chips-message]:has([data-sx-chips-says])) {
+    grid-template-rows: 1fr;
+  }
+  :where([data-sx-chips-error]) {
+    min-block-size: 0;
+    margin: 0;
+    overflow: hidden;
+  }
+  :where([data-sx-chips-says]) {
+    display: block;
+    padding-block-start: 0.375rem;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :where([data-sx-chips] [data-sx-chip-layer]:not([data-sx-chip-keep])) {
+      display: none;
+    }
+  }
+  @media (forced-colors: active) {
+    :where([data-sx-chip-option]) {
+      grid-template-columns: auto auto;
+      column-gap: 0.375rem;
+      border: 1px solid ButtonText;
+    }
+    :where(${CONTROL}) {
+      position: static;
+      grid-area: 1 / 1;
+      inline-size: 1em;
+      block-size: 1em;
+      opacity: 1;
+      appearance: auto;
+    }
+    :where([data-sx-chip-check], [data-sx-chips] [data-sx-chip-layer]) {
+      display: none;
+    }
+  }
+}`;

package/dist/forms/choice.d.ts

@@ -0,0 +1 @@
+export declare const CHOICE_BASE_CSS = "@layer theme, base, components, utilities;\n@layer components {\n  :where([data-sx-choice], [data-sx-group]) {\n    --sx-form-dir: 1;\n  }\n  :where([data-sx-choice]:dir(rtl), [data-sx-group]:dir(rtl)) {\n    --sx-form-dir: -1;\n  }\n  :where([data-sx-choice]) {\n    --sx-choice-size: 1.25em;\n    --sx-choice-gap: 0.625rem;\n    position: relative;\n    min-inline-size: 0;\n  }\n  :where([data-sx-choice-row]) {\n    position: relative;\n    isolation: isolate;\n    display: grid;\n    grid-template-columns: var(--sx-choice-size) minmax(0, 1fr);\n    column-gap: var(--sx-choice-gap);\n    align-items: start;\n    min-block-size: 1.5rem;\n    line-height: 1.5;\n    cursor: pointer;\n  }\n  :where([data-sx-choice-row] > :is([data-sx-choice-box], [data-sx-choice-control])) {\n    grid-area: 1 / 1;\n  }\n  :where([data-sx-choice-box], [data-sx-choice-control]) {\n    inline-size: var(--sx-choice-size);\n    block-size: var(--sx-choice-size);\n    margin: calc((1.5em - var(--sx-choice-size)) / 2) 0 0;\n    box-sizing: border-box;\n  }\n  :where([data-sx-choice-box]) {\n    position: relative;\n    display: grid;\n    place-items: center;\n    pointer-events: none;\n  }\n  :where([data-sx-choice-control]) {\n    position: relative;\n    z-index: 1;\n    padding: 0;\n    opacity: 0;\n    cursor: inherit;\n    accent-color: var(--color-sx-primary, auto);\n  }\n  :where([data-sx-choice-text]) {\n    grid-area: 1 / 2;\n    position: relative;\n    min-inline-size: 0;\n  }\n  :where([data-sx-choice-description]) {\n    grid-area: 2 / 2;\n    margin: 0;\n  }\n  :where([data-sx-choice]:has([data-sx-choice-control]:focus-visible) [data-sx-choice-box]) {\n    outline: 2px solid var(--color-sx-primary, currentColor);\n    outline-offset: 2px;\n  }\n  :where([data-sx-choice-mark]) {\n    position: absolute;\n    inset: 0;\n    inline-size: 100%;\n    block-size: 100%;\n    overflow: visible;\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 3;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n  }\n  :where([data-sx-mark]) {\n    stroke-dasharray: 1 2;\n    stroke-dashoffset: 1.01;\n    transform-box: fill-box;\n    transform-origin: center;\n  }\n  :where([data-sx-choice]:has([data-sx-choice-control]:checked):not(:is(:has([data-sx-choice-control]:indeterminate), [data-sx-mixed])) [data-sx-mark=\"tick\"], [data-sx-choice]:is(:has([data-sx-choice-control]:indeterminate), [data-sx-mixed]) [data-sx-mark=\"dash\"]) {\n    stroke-dashoffset: 0;\n  }\n  :where([data-sx-mark=\"dot\"]) {\n    inline-size: 50%;\n    block-size: 50%;\n    border-radius: 50%;\n    background: currentColor;\n    scale: 0;\n  }\n  :where([data-sx-choice]:has([data-sx-choice-control]:checked) [data-sx-mark=\"dot\"]) {\n    scale: 1;\n  }\n  :where(:is([data-sx-choice], [data-sx-group]) [data-sx-choice-layer]) {\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    pointer-events: none;\n  }\n  :where([data-sx-choice-row] > [data-sx-choice-slot=\"halo\"]) {\n    inset: auto;\n    inset-block-start: calc((1.5em - var(--sx-choice-size)) / 2 - var(--sx-choice-size) / 2);\n    inset-inline-start: calc(var(--sx-choice-size) / -2);\n    z-index: -1;\n    inline-size: calc(var(--sx-choice-size) * 2);\n    block-size: calc(var(--sx-choice-size) * 2);\n    border-radius: 50%;\n  }\n  :where([data-sx-choice-row] > [data-sx-choice-slot=\"row\"]) {\n    z-index: -1;\n  }\n  :where(:is([data-sx-choice], [data-sx-group]) [data-sx-choice-layer] > svg) {\n    position: absolute;\n    inset: 0;\n    display: block;\n    inline-size: 100%;\n    block-size: 100%;\n    overflow: visible;\n  }\n  :where([data-sx-choice-sr]) {\n    position: absolute;\n    inline-size: 1px;\n    block-size: 1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n  }\n  :where([data-sx-choice-message]) {\n    display: grid;\n    grid-template-rows: 0fr;\n  }\n  :where([data-sx-choice] > [data-sx-choice-message]) {\n    padding-inline-start: calc(var(--sx-choice-size) + var(--sx-choice-gap));\n  }\n  :where([data-sx-choice-message]:has(> [data-sx-choice-error]:not(:empty))) {\n    grid-template-rows: 1fr;\n  }\n  :where([data-sx-choice-error]) {\n    min-block-size: 0;\n    margin: 0;\n    overflow: hidden;\n  }\n  :where([data-sx-choice-says]) {\n    display: block;\n    padding-block-start: 0.375rem;\n  }\n  :where([data-sx-native] [data-sx-choice-box]) {\n    display: none;\n  }\n  :where([data-sx-native] [data-sx-choice-control]) {\n    opacity: 1;\n  }\n  :where([data-sx-group]) {\n    min-inline-size: 0;\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n  :where([data-sx-group-legend]) {\n    padding: 0;\n    margin-block-end: 0.5rem;\n  }\n  :where([data-sx-group-description]) {\n    margin: -0.25rem 0 0.5rem;\n  }\n  :where([data-sx-group-options]) {\n    position: relative;\n    isolation: isolate;\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n  }\n  :where([data-sx-orientation=\"horizontal\"] > [data-sx-group-options]) {\n    flex-direction: row;\n    flex-wrap: wrap;\n    gap: 0.5rem 1.25rem;\n  }\n  :where([data-sx-group-options] > [data-sx-choice-layer]) {\n    z-index: -1;\n  }\n  :where([data-sx-group-count]) {\n    margin: 0.5rem 0 0;\n  }\n  :where([data-sx-group] > [data-sx-choice-message]) {\n    padding-inline-start: 0;\n  }\n  @media (forced-colors: active) {\n    :where([data-sx-choice-box], :is([data-sx-choice], [data-sx-group]) [data-sx-choice-layer]) {\n      display: none;\n    }\n    :where([data-sx-choice-control]) {\n      opacity: 1;\n    }\n  }\n  @media (prefers-reduced-motion: reduce) {\n    :where(:is([data-sx-choice], [data-sx-group]) [data-sx-choice-layer]:not([data-sx-choice-keep])) {\n      display: none;\n    }\n  }\n}";

package/dist/forms/choice.js

@@ -0,0 +1,208 @@
+// The structural sheet of checkboxes and radios, and of the groups that hold them: the drawn box with the real input
+// on top of it at opacity 0, the mark, the option's words and help, the layers' slots, the error row, the group's
+// frame. Positioning only, no colours of its own (the look is styles/form.css). Pure string. See ./CLAUDE.md.
+// Its layer rules key on a choice's own root: a Range and the pickers render the same layer spans, and a checkbox on the
+// same page must not pin, round or hide theirs.
+import { LAYER_ORDER } from "../backgrounds/runtime/rootCss.js";
+const CONTROL = "[data-sx-choice-control]";
+const ON = `:has(${CONTROL}:checked)`;
+const MIXED = `:is(:has(${CONTROL}:indeterminate), [data-sx-mixed])`;
+export const CHOICE_BASE_CSS = `${LAYER_ORDER}
+@layer components {
+  :where([data-sx-choice], [data-sx-group]) {
+    --sx-form-dir: 1;
+  }
+  :where([data-sx-choice]:dir(rtl), [data-sx-group]:dir(rtl)) {
+    --sx-form-dir: -1;
+  }
+  :where([data-sx-choice]) {
+    --sx-choice-size: 1.25em;
+    --sx-choice-gap: 0.625rem;
+    position: relative;
+    min-inline-size: 0;
+  }
+  :where([data-sx-choice-row]) {
+    position: relative;
+    isolation: isolate;
+    display: grid;
+    grid-template-columns: var(--sx-choice-size) minmax(0, 1fr);
+    column-gap: var(--sx-choice-gap);
+    align-items: start;
+    min-block-size: 1.5rem;
+    line-height: 1.5;
+    cursor: pointer;
+  }
+  :where([data-sx-choice-row] > :is([data-sx-choice-box], ${CONTROL})) {
+    grid-area: 1 / 1;
+  }
+  :where([data-sx-choice-box], ${CONTROL}) {
+    inline-size: var(--sx-choice-size);
+    block-size: var(--sx-choice-size);
+    margin: calc((1.5em - var(--sx-choice-size)) / 2) 0 0;
+    box-sizing: border-box;
+  }
+  :where([data-sx-choice-box]) {
+    position: relative;
+    display: grid;
+    place-items: center;
+    pointer-events: none;
+  }
+  :where(${CONTROL}) {
+    position: relative;
+    z-index: 1;
+    padding: 0;
+    opacity: 0;
+    cursor: inherit;
+    accent-color: var(--color-sx-primary, auto);
+  }
+  :where([data-sx-choice-text]) {
+    grid-area: 1 / 2;
+    position: relative;
+    min-inline-size: 0;
+  }
+  :where([data-sx-choice-description]) {
+    grid-area: 2 / 2;
+    margin: 0;
+  }
+  :where([data-sx-choice]${`:has(${CONTROL}:focus-visible)`} [data-sx-choice-box]) {
+    outline: 2px solid var(--color-sx-primary, currentColor);
+    outline-offset: 2px;
+  }
+  :where([data-sx-choice-mark]) {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: visible;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 3;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  :where([data-sx-mark]) {
+    stroke-dasharray: 1 2;
+    stroke-dashoffset: 1.01;
+    transform-box: fill-box;
+    transform-origin: center;
+  }
+  :where([data-sx-choice]${ON}:not(${MIXED}) [data-sx-mark="tick"], [data-sx-choice]${MIXED} [data-sx-mark="dash"]) {
+    stroke-dashoffset: 0;
+  }
+  :where([data-sx-mark="dot"]) {
+    inline-size: 50%;
+    block-size: 50%;
+    border-radius: 50%;
+    background: currentColor;
+    scale: 0;
+  }
+  :where([data-sx-choice]${ON} [data-sx-mark="dot"]) {
+    scale: 1;
+  }
+  :where(:is([data-sx-choice], [data-sx-group]) [data-sx-choice-layer]) {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+  }
+  :where([data-sx-choice-row] > [data-sx-choice-slot="halo"]) {
+    inset: auto;
+    inset-block-start: calc((1.5em - var(--sx-choice-size)) / 2 - var(--sx-choice-size) / 2);
+    inset-inline-start: calc(var(--sx-choice-size) / -2);
+    z-index: -1;
+    inline-size: calc(var(--sx-choice-size) * 2);
+    block-size: calc(var(--sx-choice-size) * 2);
+    border-radius: 50%;
+  }
+  :where([data-sx-choice-row] > [data-sx-choice-slot="row"]) {
+    z-index: -1;
+  }
+  :where(:is([data-sx-choice], [data-sx-group]) [data-sx-choice-layer] > svg) {
+    position: absolute;
+    inset: 0;
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: visible;
+  }
+  :where([data-sx-choice-sr]) {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  :where([data-sx-choice-message]) {
+    display: grid;
+    grid-template-rows: 0fr;
+  }
+  :where([data-sx-choice] > [data-sx-choice-message]) {
+    padding-inline-start: calc(var(--sx-choice-size) + var(--sx-choice-gap));
+  }
+  :where([data-sx-choice-message]:has(> [data-sx-choice-error]:not(:empty))) {
+    grid-template-rows: 1fr;
+  }
+  :where([data-sx-choice-error]) {
+    min-block-size: 0;
+    margin: 0;
+    overflow: hidden;
+  }
+  :where([data-sx-choice-says]) {
+    display: block;
+    padding-block-start: 0.375rem;
+  }
+  :where([data-sx-native] [data-sx-choice-box]) {
+    display: none;
+  }
+  :where([data-sx-native] ${CONTROL}) {
+    opacity: 1;
+  }
+  :where([data-sx-group]) {
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+  :where([data-sx-group-legend]) {
+    padding: 0;
+    margin-block-end: 0.5rem;
+  }
+  :where([data-sx-group-description]) {
+    margin: -0.25rem 0 0.5rem;
+  }
+  :where([data-sx-group-options]) {
+    position: relative;
+    isolation: isolate;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  :where([data-sx-orientation="horizontal"] > [data-sx-group-options]) {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 0.5rem 1.25rem;
+  }
+  :where([data-sx-group-options] > [data-sx-choice-layer]) {
+    z-index: -1;
+  }
+  :where([data-sx-group-count]) {
+    margin: 0.5rem 0 0;
+  }
+  :where([data-sx-group] > [data-sx-choice-message]) {
+    padding-inline-start: 0;
+  }
+  @media (forced-colors: active) {
+    :where([data-sx-choice-box], :is([data-sx-choice], [data-sx-group]) [data-sx-choice-layer]) {
+      display: none;
+    }
+    :where(${CONTROL}) {
+      opacity: 1;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :where(:is([data-sx-choice], [data-sx-group]) [data-sx-choice-layer]:not([data-sx-choice-keep])) {
+      display: none;
+    }
+  }
+}`;

package/dist/forms/controls/CheckGroup.d.ts

@@ -0,0 +1,65 @@
+import { type ComponentPropsWithRef, type CSSProperties, type ReactNode } from "react";
+import type { FormEffect } from "../types.js";
+/** One checkbox of a group. */
+export interface CheckOption {
+    readonly value: string;
+    readonly label: ReactNode;
+    readonly description?: ReactNode;
+    readonly disabled?: boolean;
+}
+interface CheckGroupOwnProps {
+    /** The group's question: a real `<legend>`. */
+    readonly label?: ReactNode;
+    /** Help under the question, read with the group. */
+    readonly description?: ReactNode;
+    /** The error message. While set, every checkbox is `aria-invalid` and the group points at the message. */
+    readonly error?: ReactNode;
+    readonly invalid?: boolean;
+    readonly options: readonly CheckOption[];
+    /** The values that are on, when you hold them (with `onValueChange`). */
+    readonly value?: readonly string[];
+    /** The values on at first, when the browser holds them. */
+    readonly defaultValue?: readonly string[];
+    /** Called with the values that are on after each change. */
+    readonly onValueChange?: (values: string[]) => void;
+    /** A "select all" box above the options: on when all are, mixed when some are. Not submitted. */
+    readonly all?: boolean;
+    /** "3 selected" under the options, read out as it changes. */
+    readonly count?: boolean;
+    /** Shift-click a second checkbox to set every one between the two the same way. */
+    readonly shiftRange?: boolean;
+    /** Default `"vertical"`. */
+    readonly orientation?: "vertical" | "horizontal";
+    /** One effect or a list, worn by every checkbox. */
+    readonly effect?: FormEffect | readonly FormEffect[];
+    readonly native?: boolean;
+    readonly unstyled?: boolean;
+    /** The words, for your language. `{n}` is the number on. */
+    readonly labels?: {
+        readonly all?: string;
+        readonly count?: string;
+    };
+    /** Goes on the options' box. */
+    readonly className?: string;
+    /** Goes on the `<fieldset>`. */
+    readonly rootClassName?: string;
+    /** Goes on the `<legend>`. */
+    readonly labelClassName?: string;
+    readonly style?: CSSProperties;
+}
+/**
+ * Every other prop goes on each checkbox, `ref` included: `name`, `onChange`, `onBlur`, `required`, `disabled`, so
+ * `{...register("toppings")}` spreads onto all of them (React Hook Form collects them as a list).
+ */
+export type CheckGroupProps = CheckGroupOwnProps & Omit<ComponentPropsWithRef<"input">, keyof CheckGroupOwnProps | "type" | "checked" | "defaultChecked">;
+/**
+ * A group of checkboxes in a real `<fieldset>`. With `all`, a "select all" box leads them: on when every one is, mixed
+ * when some are, and a click sets them all. With `count`, "3 selected" follows them. With `shiftRange`, a shift-click
+ * sets a whole run at once. Each checkbox stays a real one with its name, so a plain form submit carries the values.
+ *
+ * ```tsx
+ * <CheckGroup label="Toppings" options={toppings} all count effect={checkDraw()} {...register("toppings")} />
+ * ```
+ */
+export declare function CheckGroup(props: CheckGroupProps): import("react").JSX.Element;
+export {};

package/dist/forms/controls/CheckGroup.js

@@ -0,0 +1,99 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { CHOICE_BASE_CSS } from "../choice.js";
+import { fieldDescribedBy, fieldIds } from "../ids.js";
+import { Checkbox } from "./Checkbox.js";
+import { EffectSheets } from "./choiceParts.js";
+import { filled } from "./shared.js";
+/** The options' checkboxes, the "select all" box left out (it carries `data-sx-all` on its input). */
+const OPTION = "[data-sx-group-options] [data-sx-choice-control]:not([data-sx-all])";
+/**
+ * A group of checkboxes in a real `<fieldset>`. With `all`, a "select all" box leads them: on when every one is, mixed
+ * when some are, and a click sets them all. With `count`, "3 selected" follows them. With `shiftRange`, a shift-click
+ * sets a whole run at once. Each checkbox stays a real one with its name, so a plain form submit carries the values.
+ *
+ * ```tsx
+ * <CheckGroup label="Toppings" options={toppings} all count effect={checkDraw()} {...register("toppings")} />
+ * ```
+ */
+export function CheckGroup(props) {
+    const { label, description, error, invalid, options, value, defaultValue, onValueChange, all, count, shiftRange, orientation = "vertical", effect, native, unstyled, labels, className, rootClassName, labelClassName, style, id: ownId, ...rest } = props;
+    const auto = useId().replace(/[^\w-]/g, "");
+    const idBase = ownId ?? `sx-checks${auto}`;
+    const ids = fieldIds(idBase);
+    const hasError = filled(error);
+    const isInvalid = hasError || invalid === true;
+    const describedBy = fieldDescribedBy(ids, { error: hasError, description: filled(description), own: rest["aria-describedby"] });
+    const { "aria-describedby": _own, onChange: ownChange, ...shared } = rest;
+    const controlled = value !== undefined;
+    const root = useRef(null);
+    const inputs = () => [...(root.current?.querySelectorAll(OPTION) ?? [])];
+    // the values that are on: yours when you hold them, else read from the checkboxes themselves (React Hook Form's
+    // register leaves them to the browser), after every change, every render and a form reset
+    const [picked, setPicked] = useState(() => defaultValue ?? []);
+    const on = controlled ? value : picked;
+    const read = () => {
+        if (controlled)
+            return;
+        const next = inputs().filter((i) => i.checked).map((i) => i.value);
+        setPicked((now) => (now.length === next.length && now.every((v, i) => v === next[i]) ? now : next));
+    };
+    useEffect(read);
+    useEffect(() => {
+        const form = root.current?.form;
+        if (!form)
+            return;
+        const later = () => setTimeout(read);
+        form.addEventListener("reset", later);
+        return () => form.removeEventListener("reset", later);
+    }, [controlled]); // eslint-disable-line react-hooks/exhaustive-deps
+    const values = options.map((o) => o.value);
+    const total = values.length;
+    const n = on.filter((v) => values.includes(v)).length;
+    const words = { all: "Select all", count: "{n} selected", ...labels };
+    const changed = (e) => {
+        ownChange?.(e);
+        if (controlled) {
+            const v = e.target.value;
+            onValueChange?.(e.target.checked ? [...value.filter((x) => x !== v), v] : value.filter((x) => x !== v));
+        }
+        else {
+            read();
+            onValueChange?.(inputs().filter((i) => i.checked).map((i) => i.value));
+        }
+    };
+    // Set a run of checkboxes the way the user would: a click on each, so its change event reaches React Hook Form.
+    // Values you hold are set in one go instead.
+    const setAll = (targets, to) => {
+        if (controlled) {
+            const touched = targets.map((t) => t.value);
+            const rest = value.filter((v) => !touched.includes(v));
+            onValueChange?.(to ? [...rest, ...touched] : rest);
+            return;
+        }
+        for (const input of targets)
+            if (input.checked !== to && !input.disabled)
+                input.click();
+    };
+    const last = useRef(null);
+    const ranging = useRef(false);
+    const onClick = (e) => {
+        const input = e.target.closest?.("input");
+        const list = inputs();
+        const at = input ? list.indexOf(input) : -1;
+        if (at === -1 || ranging.current)
+            return;
+        if (shiftRange && e.shiftKey && last.current !== null && last.current !== at) {
+            const [from, to] = [Math.min(last.current, at), Math.max(last.current, at)];
+            ranging.current = true;
+            setAll(list.slice(from, to + 1).filter((_, i) => from + i !== at), input.checked);
+            ranging.current = false;
+        }
+        last.current = at;
+    };
+    const optionIds = options.map((_, i) => `${idBase}-${i}`);
+    return (_jsxs(_Fragment, { children: [_jsx(EffectSheets, { name: "form-choice", base: CHOICE_BASE_CSS, effects: [] }), _jsxs("fieldset", { ref: root, id: idBase, "data-sx-checks": "", "data-sx-group": "check", "data-sx-styled": unstyled ? undefined : "", "data-sx-orientation": orientation, "aria-describedby": describedBy, className: rootClassName, style: style, children: [filled(label) ? (_jsx("legend", { "data-sx-group-legend": "", className: labelClassName, children: label })) : null, filled(description) ? (_jsx("p", { "data-sx-group-description": "", id: ids.description, children: description })) : null, _jsxs("div", { "data-sx-group-options": "", className: className, onClick: onClick, 
+                        // a shift-click would select the words between the two: keep the selection, the click still goes through
+                        onMouseDown: shiftRange ? (e) => e.shiftKey && e.preventDefault() : undefined, children: [all ? (_jsx(Checkbox, { "data-sx-all": "", label: words.all, checked: total > 0 && n === total, indeterminate: n > 0 && n < total, onChange: (e) => setAll(inputs(), e.target.checked), "aria-controls": optionIds.join(" "), effect: effect, native: native, unstyled: unstyled })) : null, options.map((o, i) => (_jsx(Checkbox, { ...shared, id: optionIds[i], value: o.value, label: o.label, description: o.description, disabled: o.disabled || shared.disabled, ...(controlled ? { checked: value.includes(o.value) } : { defaultChecked: defaultValue?.includes(o.value) }), onChange: changed, "aria-invalid": isInvalid || undefined, effect: effect, native: native, unstyled: unstyled, style: { "--sx-choice-i": i } }, o.value)))] }), count ? (_jsx("p", { "data-sx-group-count": "", role: "status", children: words.count.replace("{n}", String(n)) })) : null, _jsx("div", { "data-sx-choice-message": "", children: _jsx("p", { "data-sx-choice-error": "", id: ids.error, role: "alert", children: hasError ? (_jsx("span", { "data-sx-choice-says": "", children: error }, typeof error === "string" ? error : undefined)) : null }) })] })] }));
+}

package/dist/forms/controls/Checkbox.d.ts

@@ -0,0 +1,43 @@
+import { type ComponentPropsWithRef, type CSSProperties, type ReactNode } from "react";
+import type { FormEffect } from "../types.js";
+interface CheckboxOwnProps {
+    /** The words beside the box. The whole row is the label, so a click on the words toggles it too. */
+    readonly label?: ReactNode;
+    /** Help under the words, read as the checkbox's description. */
+    readonly description?: ReactNode;
+    /** The error message. While set, the checkbox is `aria-invalid` and screen readers read the message. */
+    readonly error?: ReactNode;
+    /** Invalid with no message of its own. */
+    readonly invalid?: boolean;
+    /** Neither on nor off: some of the things it stands for are on (a "select all" box). The browser's own property. */
+    readonly indeterminate?: boolean;
+    /** One effect or a list; they stack. */
+    readonly effect?: FormEffect | readonly FormEffect[];
+    /** The browser's own checkbox, coloured with `accent-color`, instead of the drawn box. Effects don't apply. */
+    readonly native?: boolean;
+    /** Drop the default look. */
+    readonly unstyled?: boolean;
+    /** Goes on the drawn box. */
+    readonly className?: string;
+    /** Goes on the outer element. */
+    readonly rootClassName?: string;
+    /** Goes on the words. */
+    readonly labelClassName?: string;
+    /** Goes on the outer element, beside the effects' variables. */
+    readonly style?: CSSProperties;
+}
+/**
+ * Every other prop goes on the real checkbox, `ref` included: `name`, `value`, `checked` / `defaultChecked`,
+ * `onChange`, `required`, `disabled`, so `{...register("terms")}` spreads straight onto it.
+ */
+export type CheckboxProps = CheckboxOwnProps & Omit<ComponentPropsWithRef<"input">, keyof CheckboxOwnProps | "type">;
+/**
+ * A checkbox that wears any number of effects. The real checkbox sits on top of the drawn box at opacity 0, the same
+ * size: it takes the click, the keyboard and the focus, and the effects read its state from CSS.
+ *
+ * ```tsx
+ * <Checkbox label="I agree to the terms" effect={[checkDraw(), checkPop()]} {...register("terms")} />
+ * ```
+ */
+export declare function Checkbox(props: CheckboxProps): import("react").JSX.Element;
+export {};

package/dist/forms/controls/Checkbox.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef } from "react";
+import { CHOICE_BASE_CSS } from "../choice.js";
+import { fieldDescribedBy, fieldIds } from "../ids.js";
+import { checkChoice } from "./choiceChecks.js";
+import { ChoiceItem, EffectSheets, usePrograms } from "./choiceParts.js";
+import { effectList, filled, withUid } from "./shared.js";
+/**
+ * A checkbox that wears any number of effects. The real checkbox sits on top of the drawn box at opacity 0, the same
+ * size: it takes the click, the keyboard and the focus, and the effects read its state from CSS.
+ *
+ * ```tsx
+ * <Checkbox label="I agree to the terms" effect={[checkDraw(), checkPop()]} {...register("terms")} />
+ * ```
+ */
+export function Checkbox(props) {
+    const { label, description, error, invalid, indeterminate, effect, native, unstyled, className, rootClassName, labelClassName, style, id: ownId, ...rest } = props;
+    const effects = native ? [] : effectList(effect);
+    const auto = useId();
+    const id = ownId ?? `sx-check${auto.replace(/[^\w-]/g, "")}`;
+    const uid = `sx${auto.replace(/[^\w-]/g, "")}`;
+    const ids = fieldIds(id);
+    const hasError = filled(error);
+    const ownInvalid = rest["aria-invalid"];
+    const isInvalid = hasError || invalid === true || ownInvalid === true || ownInvalid === "true";
+    const describedBy = fieldDescribedBy(ids, { error: hasError, description: filled(description), own: rest["aria-describedby"] });
+    if (process.env.NODE_ENV !== "production") {
+        checkChoice({
+            control: "checkbox",
+            effects,
+            labelled: filled(label) || !!rest["aria-label"] || !!rest["aria-labelledby"],
+            nativeWithEffects: !!native && !!effect && effectList(effect).length > 0,
+            invalidWithoutWords: invalid === true && !hasError,
+        });
+    }
+    const root = useRef(null);
+    // `indeterminate` is a property, not an attribute: set it once the input exists. Until then (the server's HTML),
+    // `data-sx-mixed` shows the dash; it goes as soon as the property is set, so a click that clears the property isn't
+    // undone by a stale attribute.
+    useEffect(() => {
+        const el = root.current;
+        const input = el?.querySelector("[data-sx-choice-control]");
+        if (!el || !input)
+            return;
+        input.indeterminate = indeterminate === true;
+        el.removeAttribute("data-sx-mixed");
+    }, [indeterminate]);
+    usePrograms(root, effects);
+    const vars = { ...withUid(Object.assign({}, ...effects.map((e) => e.vars)), uid), ...style };
+    return (_jsxs(_Fragment, { children: [_jsx(EffectSheets, { name: "form-choice", base: CHOICE_BASE_CSS, effects: effects }), _jsx(ChoiceItem, { kind: "checkbox", effects: effects, uid: uid, label: label, description: description, descriptionId: ids.description, boxClassName: className, labelClassName: labelClassName, root: {
+                    ref: root,
+                    "data-sx-choice": effects.map((e) => e.id).join(" "),
+                    "data-sx-kind": "checkbox",
+                    "data-sx-styled": unstyled ? undefined : "",
+                    "data-sx-native": native ? "" : undefined,
+                    "data-sx-mixed": indeterminate ? "" : undefined,
+                    className: rootClassName,
+                    style: vars,
+                }, control: {
+                    ...rest,
+                    id,
+                    type: "checkbox",
+                    "aria-invalid": isInvalid || undefined,
+                    "aria-describedby": describedBy,
+                }, children: _jsx("div", { "data-sx-choice-message": "", children: _jsx("p", { "data-sx-choice-error": "", id: ids.error, role: "alert", children: hasError ? (_jsx("span", { "data-sx-choice-says": "", children: error }, typeof error === "string" ? error : undefined)) : null }) }) })] }));
+}