@fairgarden/design 0.1.0-0.canary.0

package/forms/checkbox/Checkbox.js

@@ -0,0 +1,91 @@
+'use client';
+import * as React from 'react';
+import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
+import { cva } from 'class-variance-authority';
+import { primaryScaleVariants, secondaryScaleVariants, } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './checkbox.module.css';
+/*
+ * Checkbox (§10.7).
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: checkbox.module.css; CVA function `checkbox`.
+ * - Axes: `kind` → standard | card | ledger (box plus label; the option
+ *   card; box at the end of a leader row) [D155]; `primary`, `secondary` →
+ *   scales module classes.
+ * - Compound variants: none.
+ * - Defaults: kind standard (or the enclosing CheckboxGroup's kind); color
+ *   axes none [D133].
+ * - Color fallback: inherits the scope; its secondary drives the
+ *   --role-select aliases and never switches to the danger scale (§10.1).
+ * - States: data-checked / data-indeterminate → --role-select fill,
+ *   --role-select-mark ✓ or bar, --border-size-2-25 --role-select-edge box edge,
+ *   card edge --border-size-2 --role-select-edge (read through :has());
+ *   :hover (not disabled or read-only) [D181] → unchecked box fill
+ *   --role-soft-hover (--primary3 where soft fills apply), checked box fill
+ *   --role-select-hover, the edge unchanged; label the bare-text underline;
+ *   unchecked card edge --role-rule → --primary12 [D140];
+ *   :focus-visible on the box → ring; data-disabled → dotted edge, fill
+ *   dropped, mark --role-muted; data-readonly → rest roles, no hover;
+ *   data-invalid → no change (the group message carries it).
+ * - Parts: base (the row, a <label>), box (Checkbox.Root), indicator, mark,
+ *   check, bar, label, description, thumb, title, value, leader, leaderLine,
+ *   and edge / edgeLine (the disabled dotted edge, drawn in SVG).
+ * - Scope: none.
+ * - Container: none of its own; the option card's value drops under its
+ *   title below 360 px of the enclosing `checkbox-group` container, with an
+ *   --xs-n-below viewport fallback [D163].
+ */
+export const checkbox = cva(styles.base, {
+    variants: {
+        kind: {
+            standard: styles.standard,
+            card: styles.card,
+            ledger: styles.ledger,
+        },
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        kind: 'standard',
+    },
+});
+/**
+ * The kind a CheckboxGroup passes to the checkboxes inside it. A
+ * checkbox's own `kind` prop wins.
+ */
+export const CheckboxKindContext = React.createContext(undefined);
+CheckboxKindContext.displayName = 'CheckboxKindContext';
+function DisabledEdge() {
+    return (React.createElement("svg", { className: styles.edge, "aria-hidden": "true", focusable: "false" },
+        React.createElement("rect", { className: styles.edgeLine, width: "100%", height: "100%" })));
+}
+/**
+ * A Base UI Checkbox inside its own label row, so the whole row is the hit
+ * target. The ✓ and the indeterminate bar are drawn at --border-size-2
+ * with round caps; checked is a --role-select fill, the mark and a 3 px
+ * edge, never fill alone [D15]. Use it for independent yes/no choices or
+ * inside a CheckboxGroup; an instant setting is a Switch.
+ */
+export function Checkbox(props) {
+    const { kind, primary, secondary, className, children, description, thumb, valueLabel, ...rest } = props;
+    const scope = useScopeAttributes();
+    const groupKind = React.useContext(CheckboxKindContext);
+    const resolvedKind = kind ?? groupKind ?? 'standard';
+    return (React.createElement("label", { ...scope, className: checkbox({ kind: resolvedKind, primary, secondary, className }) },
+        React.createElement(BaseCheckbox.Root, { ...rest, className: styles.box },
+            React.createElement(BaseCheckbox.Indicator, { className: styles.indicator },
+                React.createElement("svg", { className: styles.mark, viewBox: "0 0 20 20", "aria-hidden": "true", focusable: "false" },
+                    React.createElement("path", { className: styles.check, d: "M5.5 10.5l3 3 6-7" }),
+                    React.createElement("path", { className: styles.bar, d: "M6 10h8" }))),
+            React.createElement(DisabledEdge, null)),
+        resolvedKind === 'card' && thumb != null ? (React.createElement("span", { className: styles.thumb }, thumb)) : null,
+        children == null ? null : (React.createElement("span", { className: resolvedKind === 'card' ? styles.title : styles.label }, children)),
+        resolvedKind === 'ledger' ? (React.createElement("svg", { className: styles.leader, "aria-hidden": "true", focusable: "false" },
+            React.createElement("line", { className: styles.leaderLine, x1: "0", y1: "75%", x2: "100%", y2: "75%" }))) : null,
+        resolvedKind !== 'standard' && valueLabel != null ? (React.createElement("span", { className: styles.value }, valueLabel)) : null,
+        description == null ? null : (React.createElement("span", { className: styles.description }, description)),
+        resolvedKind === 'card' ? React.createElement(DisabledEdge, null) : null));
+}
+//# sourceMappingURL=Checkbox.js.map

package/forms/checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/forms/checkbox/Checkbox.tsx"],"names":[],"mappings":"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"}

package/forms/checkbox/checkbox.module.css

@@ -0,0 +1,388 @@
+/*
+ * Checkbox (§10.7). CVA function `checkbox`. The root `base` is the row, a
+ * <label> wrapping Checkbox.Root (`box`), so the whole row is the hit
+ * target. The row shows the box's state by reading its Base UI attributes
+ * through :has(), as the option card does (§12.1); it writes no state of its
+ * own. Parts: base, box, indicator (`mark` holding the ✓ `check` and the
+ * indeterminate `bar`), label, description, thumb, title, value, leader
+ * (`leaderLine`), and `edge` / `edgeLine`, the SVG that draws the disabled
+ * `line-dotted-fine` edge as true dots [D36, D68].
+ *
+ * Colors are role variables only. Local custom properties carry dimensions:
+ *   --checkbox-edge         box edge width (2 → 3 px checked)
+ *   --checkbox-card-edge    option card edge width (1 → 2 px checked)
+ *   --checkbox-edge-radius  radius the disabled dotted edge follows
+ * Label case is authored, never set here, except the card's caps title.
+ */
+
+/* Composition sits in top-level rules, outside the layers: Lightning CSS
+ * (Next.js with Turbopack) rejects `composes` inside @layer or any nesting.
+ * The composed classes keep their own layers. */
+.base {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+.title {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.description {
+  composes: typeCaption typeMuted from '../../utils/type.module.css';
+}
+
+.edgeLine {
+  composes: lineDottedFine from '../../utils/line.module.css';
+}
+
+.leaderLine {
+  composes: lineDottedFine from '../../utils/line.module.css';
+}
+
+@layer base {
+  .base {
+    position: relative; /* holds Base UI's hidden input */
+    display: grid;
+    align-items: start;
+    align-content: center;
+    box-sizing: border-box;
+    min-block-size: var(--fgd-size-hit);
+    min-inline-size: 0;
+    color: var(--primary12);
+  }
+
+  /* The box: --size-px-4, --radius-1, a --border-size-2 --primary12 edge; aligned to the first line. */
+  .box {
+    --checkbox-edge: var(--border-size-2);
+    --checkbox-edge-radius: var(--radius-1);
+
+    grid-area: box;
+    position: relative;
+    display: block;
+    box-sizing: border-box;
+    inline-size: var(--size-px-4);
+    block-size: var(--size-px-4);
+    margin-block: calc((1lh - var(--size-px-4)) / 2) 0;
+    margin-inline: 0 var(--size-px-2-5);
+    border: var(--checkbox-edge) solid var(--primary12);
+    border-radius: var(--radius-1);
+    background: none;
+  }
+
+  /* The mark covers the box's border box, so its 20-unit grid is 1:1 with px. */
+  .indicator {
+    position: absolute;
+    inset: calc(var(--checkbox-edge) * -1);
+    display: block;
+    color: var(--role-select-mark);
+  }
+
+  /* ✓ or bar at --border-size-2 with round caps, in the mark's ink; never a knockout. */
+  .mark {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: visible;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: var(--border-size-2);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  /* The bare-text hover underline's color, weight and offset (§10.1) [D181]. */
+  .label {
+    grid-area: label;
+    color: var(--primary12);
+    text-decoration-color: var(--role-accent);
+    text-decoration-thickness: var(--border-size-2);
+    text-underline-offset: var(--size-px-1);
+  }
+
+  .description {
+    grid-area: description;
+    margin-block-start: var(--size-px-1);
+  }
+
+  .title {
+    grid-area: title;
+    color: var(--primary12);
+  }
+
+  .value {
+    grid-area: value;
+    color: var(--primary12);
+    font-variant-numeric: var(--fgd-numerals-data);
+  }
+
+  .thumb {
+    grid-area: thumb;
+    display: block;
+    inline-size: var(--fgd-size-thumb);
+    aspect-ratio: var(--ratio-square);
+    margin-inline-end: var(--size-px-2-5);
+    overflow: hidden;
+    overflow: clip;
+  }
+
+  .thumb > * {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+  }
+
+  /* The ledger leader: line-dotted-fine in --role-rule, sitting near the baseline. */
+  .leader {
+    grid-area: leader;
+    display: block;
+    inline-size: 100%;
+    block-size: var(--size-px-5);
+    block-size: 1lh;
+    overflow: visible;
+  }
+
+  .leaderLine {
+    stroke: var(--role-rule);
+  }
+
+  /* Disabled edge host: covers the border box once the solid edge is removed. */
+  .edge {
+    display: none;
+    position: absolute;
+    inset-block-start: calc(var(--fgd-dot-fine) / 2);
+    inset-inline-start: calc(var(--fgd-dot-fine) / 2);
+    inline-size: calc(100% - var(--fgd-dot-fine));
+    block-size: calc(100% - var(--fgd-dot-fine));
+    overflow: visible;
+    pointer-events: none;
+  }
+
+  .edgeLine {
+    fill: none;
+    stroke: var(--role-disabled-edge);
+    rx: calc(var(--checkbox-edge-radius) - var(--fgd-dot-fine) / 2);
+  }
+
+  @media (forced-colors: active) {
+    .edgeLine,
+    .leaderLine {
+      stroke: currentColor;
+    }
+  }
+
+  /* Hover transitions [D181]: --fgd-duration-quick, --ease-out-3. */
+  @media (prefers-reduced-motion: no-preference) {
+    .box,
+    .base,
+    .label {
+      transition-property: border-color, background-color, text-decoration-color;
+      transition-duration: var(--fgd-duration-quick);
+      transition-timing-function: var(--ease-out-3);
+    }
+  }
+}
+
+@layer variants {
+  /* Standard: box, then label and description; --size-px-2-5 gap. */
+  .standard {
+    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-areas:
+      'box label'
+      '. description';
+  }
+
+  /*
+   * The option card (§10.7 owns it; §12.2 cites it): a bordered row with a
+   * --border-size-1 --role-rule edge, --radius-2-25 and --size-px-3
+   * padding. The padding absorbs the edge step, so checking never moves
+   * the content.
+   */
+  .card {
+    --checkbox-card-edge: var(--border-size-1);
+    --checkbox-edge-radius: var(--radius-2-25);
+
+    grid-template-columns: auto auto minmax(0, 1fr) auto;
+    grid-template-areas:
+      'box thumb title value'
+      'box thumb description description';
+    align-items: center;
+    padding: calc(var(--size-px-3) + var(--border-size-1) - var(--checkbox-card-edge));
+    border: var(--checkbox-card-edge) solid var(--role-rule);
+    border-radius: var(--radius-2-25);
+  }
+
+  .card .box {
+    margin-block: 0;
+  }
+
+  .card .value {
+    justify-self: end;
+    margin-inline-start: var(--size-px-2-5);
+    text-align: end;
+  }
+
+  /* Below 360 px the value drops under the title: viewport fallback, then the group container (§5.10.2). */
+  @media (max-width: 359.98px) {
+    .card {
+      grid-template-columns: auto auto minmax(0, 1fr);
+      grid-template-areas:
+        'box thumb title'
+        'box thumb value'
+        'box thumb description';
+    }
+
+    .card .value {
+      justify-self: start;
+      margin-inline-start: 0;
+      text-align: start;
+    }
+  }
+
+  @container checkbox-group (width < 360px) {
+    .card {
+      grid-template-columns: auto auto minmax(0, 1fr);
+      grid-template-areas:
+        'box thumb title'
+        'box thumb value'
+        'box thumb description';
+    }
+
+    .card .value {
+      justify-self: start;
+      margin-inline-start: 0;
+      text-align: start;
+    }
+  }
+
+  /* Ledger: label, dotted leader, optional value, then the box. */
+  .ledger {
+    grid-template-columns: auto minmax(var(--size-px-5), 1fr) auto auto;
+    grid-template-areas:
+      'label leader value box'
+      'description description description .';
+  }
+
+  .ledger .box {
+    margin-inline: 0;
+  }
+
+  .ledger .leader {
+    margin-inline: var(--size-px-2);
+  }
+
+  .ledger .value {
+    margin-inline-end: var(--size-px-2);
+  }
+}
+
+@layer states {
+  /* Checked and indeterminate: --role-select fill, the mark, a --border-size-2-25 --role-select-edge (§10.1). */
+  .box[data-checked],
+  .box[data-indeterminate] {
+    --checkbox-edge: var(--border-size-2-25);
+
+    border-color: var(--role-select-edge);
+    background-color: var(--role-select);
+  }
+
+  .indicator[data-indeterminate] .check {
+    display: none;
+  }
+
+  .indicator:not([data-indeterminate]) .bar {
+    display: none;
+  }
+
+  /* The checked option card: --border-size-2 --role-select-edge (the one checked-card value). */
+  .card:has(.box[data-checked], .box[data-indeterminate]) {
+    --checkbox-card-edge: var(--border-size-2);
+
+    border-color: var(--role-select-edge);
+  }
+
+  /*
+   * Hover (not disabled, not read-only) [D181]. The box edge never changes,
+   * so hover cannot read as checked. An unchecked box takes the outline
+   * hover, a --primary3 fill (--role-soft-hover: none where soft fills
+   * drop); a checked or indeterminate box moves its fill to
+   * --role-select-hover, mark and edge unchanged. The label takes the
+   * bare-text underline.
+   */
+  .base:not(:has([data-disabled], [data-readonly])):hover .box[data-unchecked] {
+    background-color: var(--role-soft-hover);
+  }
+
+  .base:not(:has([data-disabled], [data-readonly])):hover .box:is([data-checked], [data-indeterminate]) {
+    background-color: var(--role-select-hover);
+  }
+
+  .base:not(:has([data-disabled], [data-readonly])):hover .label {
+    text-decoration-line: underline;
+  }
+
+  /* The unchecked card edge steps --role-rule → --primary12 at the same weight [D140]. */
+  .card:not(:has([data-disabled], [data-readonly], [data-checked], [data-indeterminate])):hover {
+    border-color: var(--primary12);
+  }
+
+  /* Focus: 2 px --primary12 ring at a 2 px offset outside the box, keyboard only [D45]. */
+  .box:focus-visible {
+    outline: var(--fgd-focus-width) solid var(--primary12);
+    outline-offset: var(--fgd-focus-offset);
+  }
+
+  /*
+   * Disabled: the solid edge gives way to the dotted edge in --role-rule
+   * (--primary12 on one-ink grounds [D85]); the fill drops and the mark
+   * turns --role-muted. Never dimmed [D16].
+   */
+  .box[data-disabled] {
+    --checkbox-edge: 0px;
+
+    border-style: none;
+    background: none;
+  }
+
+  .box[data-disabled] .indicator {
+    color: var(--role-muted);
+  }
+
+  .box[data-disabled] > .edge {
+    display: block;
+  }
+
+  .base:has(.box[data-disabled]) .label,
+  .base:has(.box[data-disabled]) .title,
+  .base:has(.box[data-disabled]) .value {
+    color: var(--role-muted);
+  }
+
+  .card:has(.box[data-disabled]) {
+    --checkbox-card-edge: 0px;
+
+    border-style: none;
+  }
+
+  .card:has(.box[data-disabled]) > .edge {
+    display: block;
+  }
+}
+
+@layer print {
+  @media print {
+    /* A 0.75 pt square; checked keeps its --border-size-2-25 step and a black mark (§10.7). */
+    .box {
+      --checkbox-edge: var(--border-size-1);
+    }
+
+    .box[data-checked],
+    .box[data-indeterminate] {
+      --checkbox-edge: var(--border-size-2-25);
+    }
+
+    /* Disabled controls do not print (§10.1). */
+    .base:has(.box[data-disabled]) {
+      display: none;
+    }
+  }
+}

package/forms/checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Checkbox';
+//# sourceMappingURL=index.d.ts.map

package/forms/checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/forms/checkbox/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA"}

package/forms/checkbox/index.js

@@ -0,0 +1,2 @@
+export * from './Checkbox';
+//# sourceMappingURL=index.js.map

package/forms/checkbox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/forms/checkbox/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA"}

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

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { CheckboxGroup as BaseCheckboxGroup } from '@base-ui/react/checkbox-group';
+import { type VariantProps } from 'class-variance-authority';
+export declare const checkboxGroup: (props?: ({
+    kind?: "standard" | "ledger" | "card" | null | undefined;
+    primary?: "ruby" | "brown" | "crimson" | "gold" | "gray" | "indigo" | "olive" | "pink" | "plum" | "purple" | "red" | "tomato" | "violet" | "bronze" | "iris" | "mauve" | "sage" | "sand" | "slate" | null | undefined;
+    secondary?: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "amber" | "bronze" | "grass" | "iris" | "jade" | "mauve" | "mint" | "sage" | "sand" | "sky" | "slate" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type CheckboxGroupVariants = VariantProps<typeof checkboxGroup>;
+/**
+ * Props for CheckboxGroup: Base UI CheckboxGroup props plus the kind and
+ * color axes. Label the group with a Fieldset legend or `aria-labelledby`.
+ */
+export type CheckboxGroupProps = BaseCheckboxGroup.Props & {
+    /**
+     * The build of the checkboxes inside, and so the group's layout:
+     * `standard` (default), `card` (option cards, `--size-px-5` apart) or
+     * `ledger` (leader rows). Each Checkbox takes it as its default kind.
+     */
+    kind?: CheckboxGroupVariants['kind'];
+    /** Primary Radix scale for every checkbox inside. Never defaulted [D133]. */
+    primary?: CheckboxGroupVariants['primary'];
+    /**
+     * Secondary Radix scale for every checkbox inside: the checked fill,
+     * mark and edge. Never defaulted, and never the danger scale.
+     */
+    secondary?: CheckboxGroupVariants['secondary'];
+};
+/**
+ * Shared state for a set of Checkboxes (Base UI Checkbox Group). A "select
+ * all" parent is a Checkbox with `parent`, and the group needs `allValues`
+ * and a controlled `value`. Put the group inside a Fieldset whose legend
+ * names the question; the group error message sits under the legend and
+ * never turns a box red (§10.7). The root is an inline-size container, so
+ * give it a width in shrink-to-fit layouts.
+ */
+export declare function CheckboxGroup(props: CheckboxGroupProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=CheckboxGroup.d.ts.map

package/forms/checkbox-group/CheckboxGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../src/forms/checkbox-group/CheckboxGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,aAAa,IAAI,iBAAiB,EAAE,MAAM,+BAA+B,CAAA;AAClF,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAkCjE,eAAO,MAAM,aAAa;;;;8EAcxB,CAAA;AAEF,KAAK,qBAAqB,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAA;AAE/D;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,KAAK,GAAG;IACzD;;;;OAIG;IACH,IAAI,CAAC,EAAE,qBAAqB,CAAC,MAAM,CAAC,CAAA;IACpC,6EAA6E;IAC7E,OAAO,CAAC,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAA;IAC1C;;;OAGG;IACH,SAAS,CAAC,EAAE,qBAAqB,CAAC,WAAW,CAAC,CAAA;CAC/C,CAAA;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBAiBtD"}

package/forms/checkbox-group/CheckboxGroup.js

@@ -0,0 +1,63 @@
+'use client';
+import * as React from 'react';
+import { CheckboxGroup as BaseCheckboxGroup } from '@base-ui/react/checkbox-group';
+import { cva } from 'class-variance-authority';
+import { CheckboxKindContext } from '../checkbox';
+import { resolveClassName } from '../../utils/className';
+import { primaryScaleVariants, secondaryScaleVariants, } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './checkbox-group.module.css';
+/*
+ * Checkbox Group (§10.7): group layout only.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: checkbox-group.module.css; CVA function `checkboxGroup`.
+ * - Axes: `kind` → standard | card | ledger (the layout for that build; it
+ *   is also passed to the checkboxes inside as their default kind);
+ *   `primary`, `secondary` → scales module classes, inherited by the
+ *   checkboxes.
+ * - Compound variants: none.
+ * - Defaults: kind standard; color axes none [D133].
+ * - Color fallback: inherits the scope.
+ * - States: data-disabled (Base UI) → carried by each checkbox's own
+ *   data-disabled; the group draws nothing.
+ * - Parts: base.
+ * - Scope: none.
+ * - Container: `base` is the inline-size container `checkbox-group`.
+ *   Baseline one column (option cards full width); from 480 px short
+ *   labels in 2 columns; from 768 px option cards 2-up when there are more
+ *   than 4; below 360 px the card value drops under its title (§5.10.2)
+ *   [D163].
+ */
+export const checkboxGroup = cva(styles.base, {
+    variants: {
+        kind: {
+            standard: styles.standard,
+            card: styles.card,
+            ledger: styles.ledger,
+        },
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        kind: 'standard',
+    },
+});
+/**
+ * Shared state for a set of Checkboxes (Base UI Checkbox Group). A "select
+ * all" parent is a Checkbox with `parent`, and the group needs `allValues`
+ * and a controlled `value`. Put the group inside a Fieldset whose legend
+ * names the question; the group error message sits under the legend and
+ * never turns a box red (§10.7). The root is an inline-size container, so
+ * give it a width in shrink-to-fit layouts.
+ */
+export function CheckboxGroup(props) {
+    const { kind, primary, secondary, className, children, ...rest } = props;
+    const scope = useScopeAttributes();
+    const variants = { kind, primary, secondary };
+    const resolvedClassName = resolveClassName(className, (extra) => checkboxGroup({ ...variants, className: extra }));
+    return (React.createElement(CheckboxKindContext.Provider, { value: kind ?? undefined },
+        React.createElement(BaseCheckboxGroup, { ...rest, ...scope, className: resolvedClassName }, children)));
+}
+//# sourceMappingURL=CheckboxGroup.js.map

package/forms/checkbox-group/CheckboxGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.js","sourceRoot":"","sources":["../../src/forms/checkbox-group/CheckboxGroup.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,aAAa,IAAI,iBAAiB,EAAE,MAAM,+BAA+B,CAAA;AAClF,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,OAAO,EACL,oBAAoB,EACpB,sBAAsB,GACvB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AAEtD,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAEhD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE;IAC5C,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,QAAQ,EAAE,MAAM,CAAC,QAAQ;YACzB,IAAI,EAAE,MAAM,CAAC,IAAI;YACjB,MAAM,EAAE,MAAM,CAAC,MAAM;SACtB;QACD,6EAA6E;QAC7E,OAAO,EAAE,oBAAoB;QAC7B,SAAS,EAAE,sBAAsB;KAClC;IACD,eAAe,EAAE;QACf,IAAI,EAAE,UAAU;KACjB;CACF,CAAC,CAAA;AAwBF;;;;;;;GAOG;AACH,MAAM,UAAU,aAAa,CAAC,KAAyB;IACrD,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IAExE,MAAM,KAAK,GAAG,kBAAkB,EAAE,CAAA;IAElC,MAAM,QAAQ,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,CAAA;IAC7C,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAC9D,aAAa,CAAC,EAAE,GAAG,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CACjD,CAAA;IAED,OAAO,CACL,oBAAC,mBAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,IAAI,SAAS;QACpD,oBAAC,iBAAiB,OAAK,IAAI,KAAM,KAAK,EAAE,SAAS,EAAE,iBAAiB,IACjE,QAAQ,CACS,CACS,CAChC,CAAA;AACH,CAAC"}

package/forms/checkbox-group/checkbox-group.module.css

@@ -0,0 +1,52 @@
+/*
+ * Checkbox Group (§10.7), group layout only. CVA function `checkboxGroup`.
+ * The root `base` is the inline-size container `checkbox-group` [D163]. A
+ * container cannot query itself, so the columns come from the rows' flex
+ * basis, which the container rules set; the group styles only that layout
+ * and never a checkbox's own parts. Baseline without container support:
+ * one column.
+ */
+
+@layer base {
+  .base {
+    container: checkbox-group / inline-size;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--size-px-2-5);
+    min-inline-size: 0;
+  }
+
+  .base > * {
+    flex: 1 1 100%;
+    min-inline-size: 0;
+  }
+}
+
+@layer variants {
+  .standard {
+    gap: var(--size-px-2-5);
+  }
+
+  /* Option cards sit --size-px-5 apart. */
+  .card {
+    gap: var(--size-px-5);
+  }
+
+  .ledger {
+    gap: var(--size-px-2-5);
+  }
+
+  /* From 480 px of group width, short labels run in 2 columns (§5.10.2). */
+  @container checkbox-group (width >= 480px) {
+    .standard > * {
+      flex: 0 1 calc((100% - var(--size-px-2-5)) / 2);
+    }
+  }
+
+  /* From 768 px, option cards go 2-up when there are more than 4. */
+  @container checkbox-group (width >= 768px) {
+    .card:has(> :nth-child(5)) > * {
+      flex: 0 1 calc((100% - var(--size-px-5)) / 2);
+    }
+  }
+}

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

@@ -0,0 +1,2 @@
+export * from './CheckboxGroup';
+//# sourceMappingURL=index.d.ts.map

package/forms/checkbox-group/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/forms/checkbox-group/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA"}

package/forms/checkbox-group/index.js

@@ -0,0 +1,2 @@
+export * from './CheckboxGroup';
+//# sourceMappingURL=index.js.map

package/forms/checkbox-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/forms/checkbox-group/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA"}