@windmorph/react 0.0.0-stage → 0.1.0

package/dist/components/carousel/carousel-styles.d.ts

@@ -0,0 +1,188 @@
+import { VariantProps } from "../../utils/tv.js";
+//#region src/components/carousel/carousel-styles.d.ts
+/** Variant definitions for {@link Carousel}. */
+export declare const carouselStyles: import("tailwind-variants").TVReturnType<{
+  orientation: {
+    horizontal: {
+      scroller: string;
+      item: string;
+    };
+    vertical: {
+      scroller: string;
+      item: string;
+    };
+  };
+  /** `single` stops at every item, `many` lets a fling cross several, `none` doesn't snap. */
+  snapping: {
+    single: {};
+    many: {};
+    none: {};
+  };
+  /** The mask is clipped by the keylines on every scroll frame; otherwise by CSS. */
+  masked: {
+    true: {
+      item: string;
+      mask: string;
+      hitArea: string;
+    };
+    false: {
+      mask: string;
+    };
+  };
+  /** Multi-aspect items keep their own width, between 9:16 and 16:9 of the height. */
+  aspect: {
+    true: {
+      item: string[];
+      mask: string;
+    };
+    false: {};
+  };
+  interactive: {
+    true: {
+      item: string;
+    };
+    false: {};
+  };
+  /** Full-bleed items fill the window edge to edge: no corners, focus ring inside. */
+  fullBleed: {
+    true: {
+      root: string;
+      item: string;
+    };
+    false: {
+      item: string;
+    };
+  };
+}, {
+  root: string[];
+  scroller: string[];
+  item: string;
+  mask: string[];
+  stateLayer: string;
+  hitArea: string;
+}, undefined, {
+  orientation: {
+    horizontal: {
+      scroller: string;
+      item: string;
+    };
+    vertical: {
+      scroller: string;
+      item: string;
+    };
+  };
+  /** `single` stops at every item, `many` lets a fling cross several, `none` doesn't snap. */
+  snapping: {
+    single: {};
+    many: {};
+    none: {};
+  };
+  /** The mask is clipped by the keylines on every scroll frame; otherwise by CSS. */
+  masked: {
+    true: {
+      item: string;
+      mask: string;
+      hitArea: string;
+    };
+    false: {
+      mask: string;
+    };
+  };
+  /** Multi-aspect items keep their own width, between 9:16 and 16:9 of the height. */
+  aspect: {
+    true: {
+      item: string[];
+      mask: string;
+    };
+    false: {};
+  };
+  interactive: {
+    true: {
+      item: string;
+    };
+    false: {};
+  };
+  /** Full-bleed items fill the window edge to edge: no corners, focus ring inside. */
+  fullBleed: {
+    true: {
+      root: string;
+      item: string;
+    };
+    false: {
+      item: string;
+    };
+  };
+}, {
+  root: string[];
+  scroller: string[];
+  item: string;
+  mask: string[];
+  stateLayer: string;
+  hitArea: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  orientation: {
+    horizontal: {
+      scroller: string;
+      item: string;
+    };
+    vertical: {
+      scroller: string;
+      item: string;
+    };
+  };
+  /** `single` stops at every item, `many` lets a fling cross several, `none` doesn't snap. */
+  snapping: {
+    single: {};
+    many: {};
+    none: {};
+  };
+  /** The mask is clipped by the keylines on every scroll frame; otherwise by CSS. */
+  masked: {
+    true: {
+      item: string;
+      mask: string;
+      hitArea: string;
+    };
+    false: {
+      mask: string;
+    };
+  };
+  /** Multi-aspect items keep their own width, between 9:16 and 16:9 of the height. */
+  aspect: {
+    true: {
+      item: string[];
+      mask: string;
+    };
+    false: {};
+  };
+  interactive: {
+    true: {
+      item: string;
+    };
+    false: {};
+  };
+  /** Full-bleed items fill the window edge to edge: no corners, focus ring inside. */
+  fullBleed: {
+    true: {
+      root: string;
+      item: string;
+    };
+    false: {
+      item: string;
+    };
+  };
+}, {
+  root: string[];
+  scroller: string[];
+  item: string;
+  mask: string[];
+  stateLayer: string;
+  hitArea: string;
+}>>;
+/**
+ * The variants of {@link carouselStyles}, for building on its styles. They are the recipe's keys, not
+ * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.
+ */
+export type CarouselStyleProps = VariantProps<typeof carouselStyles>;
+//#endregion
+//# sourceMappingURL=carousel-styles.d.ts.map

package/dist/components/carousel/carousel-styles.js

@@ -0,0 +1,116 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/carousel/carousel-styles.ts
+/** Variant definitions for {@link Carousel}. */
+const carouselStyles = tv({
+	slots: {
+		root: [
+			"flex min-h-0 min-w-0",
+			"[--m3-carousel-corner:var(--_md-comp-carousel-item-container-shape)]",
+			"[--m3-carousel-pressed-corner:var(--md-sys-shape-corner-large-increased)]"
+		],
+		scroller: [
+			"flex min-h-0 min-w-0 flex-1 outline-none [scrollbar-width:none]",
+			"data-dragging:cursor-grabbing data-dragging:[scroll-snap-type:none] data-dragging:select-none",
+			"[&::-webkit-scrollbar]:hidden"
+		],
+		item: "flex shrink-0 rounded-(--m3-carousel-corner)",
+		mask: [
+			"grid size-full overflow-hidden bg-surface [&>*]:[grid-area:1/1] [&>*]:size-full",
+			"[--m3-carousel-item-corner:var(--m3-carousel-corner)]",
+			"data-pressed:[--m3-carousel-item-corner:var(--m3-carousel-pressed-corner)]",
+			"[transition-property:--m3-carousel-item-corner]",
+			"[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration)]",
+			"[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing)]",
+			"motion-reduce:[transition-duration:0s]",
+			"data-disabled:opacity-38"
+		],
+		stateLayer: "pointer-events-none state-layer [--m3-state-layer-color:var(--md-sys-color-on-surface)]",
+		hitArea: "h-full w-full shrink-0 -me-[100%]"
+	},
+	variants: {
+		orientation: {
+			horizontal: {
+				scroller: "flex-row overflow-x-auto overflow-y-hidden overscroll-x-contain",
+				item: "h-full"
+			},
+			vertical: {
+				scroller: "flex-col overflow-x-hidden overflow-y-auto",
+				item: "w-full"
+			}
+		},
+		/** `single` stops at every item, `many` lets a fling cross several, `none` doesn't snap. */
+		snapping: {
+			single: {},
+			many: {},
+			none: {}
+		},
+		/** The mask is clipped by the keylines on every scroll frame; otherwise by CSS. */
+		masked: {
+			true: {
+				item: "pointer-events-none",
+				mask: "pointer-events-auto",
+				hitArea: "pointer-events-auto"
+			},
+			false: { mask: "[clip-path:inset(0_round_var(--m3-carousel-item-corner))]" }
+		},
+		/** Multi-aspect items keep their own width, between 9:16 and 16:9 of the height. */
+		aspect: {
+			true: {
+				item: ["w-max min-w-[calc(var(--m3-carousel-cross-size)*9/16)]", "max-w-[calc(var(--m3-carousel-cross-size)*16/9)]"],
+				mask: "[&>*]:h-full [&>*]:w-auto [&>*]:min-w-full [&>*]:max-w-full [&>*]:object-cover"
+			},
+			false: {}
+		},
+		interactive: {
+			true: { item: "cursor-pointer data-disabled:cursor-default" },
+			false: {}
+		},
+		/** Full-bleed items fill the window edge to edge: no corners, focus ring inside. */
+		fullBleed: {
+			true: {
+				root: "[--m3-carousel-corner:0px] [--m3-carousel-pressed-corner:0px]",
+				item: "focus-ring-inset"
+			},
+			false: { item: "focus-ring" }
+		}
+	},
+	compoundVariants: [
+		{
+			snapping: ["single", "many"],
+			orientation: "horizontal",
+			class: {
+				scroller: "snap-x snap-mandatory",
+				item: "snap-start"
+			}
+		},
+		{
+			snapping: ["single", "many"],
+			orientation: "vertical",
+			class: {
+				scroller: "snap-y snap-mandatory",
+				item: "snap-start"
+			}
+		},
+		{
+			snapping: "single",
+			class: { item: "snap-always" }
+		},
+		{
+			orientation: "vertical",
+			fullBleed: false,
+			class: { scroller: "overscroll-y-contain" }
+		}
+	],
+	defaultVariants: {
+		orientation: "horizontal",
+		snapping: "single",
+		masked: true,
+		aspect: false,
+		interactive: false,
+		fullBleed: false
+	}
+});
+//#endregion
+export { carouselStyles };
+
+//# sourceMappingURL=carousel-styles.js.map

package/dist/components/carousel/carousel-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel-styles.js","names":[],"sources":["../../../src/components/carousel/carousel-styles.ts"],"sourcesContent":["import { tv, type VariantProps } from '../../utils/tv';\n\n/*\n * Values follow the M3 Expressive carousel spec (2026-10-13) and Compose Material 3\n * (carousel/Carousel.kt, Keylines.kt, Strategy.kt):\n *\n * - Multi-browse and hero: 16px leading and trailing padding, 8px top and bottom, 8px\n *   between items. Uncontained (and multi-aspect): 16px leading padding only. Full-screen:\n *   no padding, 16px between items and no corners. Small items are 40–56px.\n * - Snapping: hero and full-screen move one item at a time (`scroll-snap-stop: always`);\n *   multi-browse flings across many items and then snaps; uncontained and multi-aspect\n *   scroll freely unless `snap=\"item\"`.\n * - Uncontained (and multi-aspect) items keep one size and flow past the end edge; only\n *   multi-browse and hero items follow keylines.\n * - Each item's mask is filled with `surface`, the spec's container colour, so transparent\n *   or still-loading content never shows what's behind the carousel.\n * - Items are masked with 28px (extra-large) corners, as Compose's samples do with\n *   `maskClip(MaterialTheme.shapes.extraLarge)`; the component token\n *   `--md-comp-carousel-item-container-shape` (`carousel-tokens.ts`) sets them. A\n *   pressed item's corners tighten to `--m3-carousel-pressed-corner` (20px, large-increased)\n *   on the fast spatial spring, the spec's \"changes the shape slightly\".\n *\n * The carousel scrolls natively. Items keep their natural slots (the large item size), and\n * a library-owned mask layer inside each is translated and clipped to its keyline on every\n * scroll frame, so the root is never transformed. The state layer is a library-owned\n * element sharing the mask's grid cell, painted over the item (nothing is positioned).\n * Under the mask, a press area follows it, widened to 48px for a small item (40–56px):\n * M3's touch target, taken from the 8px spacing, so neighbours never overlap.\n * Every class is written out in full.\n */\n\n/** Variant definitions for {@link Carousel}. */\nexport const carouselStyles = tv({\n  slots: {\n    root: [\n      'flex min-h-0 min-w-0',\n      '[--m3-carousel-corner:var(--_md-comp-carousel-item-container-shape)]',\n      '[--m3-carousel-pressed-corner:var(--md-sys-shape-corner-large-increased)]',\n    ],\n    scroller: [\n      'flex min-h-0 min-w-0 flex-1 outline-none [scrollbar-width:none]',\n      'data-dragging:cursor-grabbing data-dragging:[scroll-snap-type:none] data-dragging:select-none',\n      '[&::-webkit-scrollbar]:hidden',\n    ],\n    item: 'flex shrink-0 rounded-(--m3-carousel-corner)',\n    mask: [\n      'grid size-full overflow-hidden bg-surface [&>*]:[grid-area:1/1] [&>*]:size-full',\n      '[--m3-carousel-item-corner:var(--m3-carousel-corner)]',\n      'data-pressed:[--m3-carousel-item-corner:var(--m3-carousel-pressed-corner)]',\n      '[transition-property:--m3-carousel-item-corner]',\n      '[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration)]',\n      '[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing)]',\n      'motion-reduce:[transition-duration:0s]',\n      'data-disabled:opacity-38',\n    ],\n    stateLayer:\n      'pointer-events-none state-layer [--m3-state-layer-color:var(--md-sys-color-on-surface)]',\n    // The item's press area, laid under the mask in the same place (a negative end margin,\n    // so nothing is positioned).\n    hitArea: 'h-full w-full shrink-0 -me-[100%]',\n  },\n  variants: {\n    orientation: {\n      // Overscroll is contained on the carousel's own axis only, so a swipe across it\n      // (a vertical swipe on a horizontal carousel) still scrolls the page (2026-10-15).\n      horizontal: {\n        scroller: 'flex-row overflow-x-auto overflow-y-hidden overscroll-x-contain',\n        item: 'h-full',\n      },\n      vertical: { scroller: 'flex-col overflow-x-hidden overflow-y-auto', item: 'w-full' },\n    },\n    /** `single` stops at every item, `many` lets a fling cross several, `none` doesn't snap. */\n    snapping: { single: {}, many: {}, none: {} },\n    /** The mask is clipped by the keylines on every scroll frame; otherwise by CSS. */\n    masked: {\n      // Only the mask and the press area under it take presses, not the rest of the slot, so\n      // a press between items never lands on an item whose slot reaches there.\n      true: {\n        item: 'pointer-events-none',\n        mask: 'pointer-events-auto',\n        hitArea: 'pointer-events-auto',\n      },\n      false: { mask: '[clip-path:inset(0_round_var(--m3-carousel-item-corner))]' },\n    },\n    /** Multi-aspect items keep their own width, between 9:16 and 16:9 of the height. */\n    aspect: {\n      true: {\n        item: [\n          'w-max min-w-[calc(var(--m3-carousel-cross-size)*9/16)]',\n          'max-w-[calc(var(--m3-carousel-cross-size)*16/9)]',\n        ],\n        mask: '[&>*]:h-full [&>*]:w-auto [&>*]:min-w-full [&>*]:max-w-full [&>*]:object-cover',\n      },\n      false: {},\n    },\n    interactive: { true: { item: 'cursor-pointer data-disabled:cursor-default' }, false: {} },\n    /** Full-bleed items fill the window edge to edge: no corners, focus ring inside. */\n    fullBleed: {\n      true: {\n        root: '[--m3-carousel-corner:0px] [--m3-carousel-pressed-corner:0px]',\n        item: 'focus-ring-inset',\n      },\n      false: { item: 'focus-ring' },\n    },\n  },\n  compoundVariants: [\n    {\n      snapping: ['single', 'many'],\n      orientation: 'horizontal',\n      class: { scroller: 'snap-x snap-mandatory', item: 'snap-start' },\n    },\n    {\n      snapping: ['single', 'many'],\n      orientation: 'vertical',\n      class: { scroller: 'snap-y snap-mandatory', item: 'snap-start' },\n    },\n    { snapping: 'single', class: { item: 'snap-always' } },\n    // A full-screen vertical carousel fills the window, so past its last item a swipe goes\n    // on to the page instead of trapping it.\n    { orientation: 'vertical', fullBleed: false, class: { scroller: 'overscroll-y-contain' } },\n  ],\n  defaultVariants: {\n    orientation: 'horizontal',\n    snapping: 'single',\n    masked: true,\n    aspect: false,\n    interactive: false,\n    fullBleed: false,\n  },\n});\n\n/**\n * The variants of {@link carouselStyles}, for building on its styles. They are the recipe's keys, not\n * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.\n */\nexport type CarouselStyleProps = VariantProps<typeof carouselStyles>;\n"],"mappings":";;;AAgCA,MAAa,iBAAiB,GAAG;CAC/B,OAAO;EACL,MAAM;GACJ;GACA;GACA;EACF;EACA,UAAU;GACR;GACA;GACA;EACF;EACA,MAAM;EACN,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EACA,YACE;EAGF,SAAS;CACX;CACA,UAAU;EACR,aAAa;GAGX,YAAY;IACV,UAAU;IACV,MAAM;GACR;GACA,UAAU;IAAE,UAAU;IAA8C,MAAM;GAAS;EACrF;;EAEA,UAAU;GAAE,QAAQ,CAAC;GAAG,MAAM,CAAC;GAAG,MAAM,CAAC;EAAE;;EAE3C,QAAQ;GAGN,MAAM;IACJ,MAAM;IACN,MAAM;IACN,SAAS;GACX;GACA,OAAO,EAAE,MAAM,4DAA4D;EAC7E;;EAEA,QAAQ;GACN,MAAM;IACJ,MAAM,CACJ,0DACA,kDACF;IACA,MAAM;GACR;GACA,OAAO,CAAC;EACV;EACA,aAAa;GAAE,MAAM,EAAE,MAAM,8CAA8C;GAAG,OAAO,CAAC;EAAE;;EAExF,WAAW;GACT,MAAM;IACJ,MAAM;IACN,MAAM;GACR;GACA,OAAO,EAAE,MAAM,aAAa;EAC9B;CACF;CACA,kBAAkB;EAChB;GACE,UAAU,CAAC,UAAU,MAAM;GAC3B,aAAa;GACb,OAAO;IAAE,UAAU;IAAyB,MAAM;GAAa;EACjE;EACA;GACE,UAAU,CAAC,UAAU,MAAM;GAC3B,aAAa;GACb,OAAO;IAAE,UAAU;IAAyB,MAAM;GAAa;EACjE;EACA;GAAE,UAAU;GAAU,OAAO,EAAE,MAAM,cAAc;EAAE;EAGrD;GAAE,aAAa;GAAY,WAAW;GAAO,OAAO,EAAE,UAAU,uBAAuB;EAAE;CAC3F;CACA,iBAAiB;EACf,aAAa;EACb,UAAU;EACV,QAAQ;EACR,QAAQ;EACR,aAAa;EACb,WAAW;CACb;AACF,CAAC"}

package/dist/components/carousel/carousel-tokens.d.ts

@@ -0,0 +1,7 @@
+import { ComponentTokenSet } from "../../tokens/component.js";
+import "../../index.js";
+//#region src/components/carousel/carousel-tokens.d.ts
+/** The tokens of {@link Carousel}. */
+export declare const carouselTokenSet: ComponentTokenSet<"item-container-shape">;
+//#endregion
+//# sourceMappingURL=carousel-tokens.d.ts.map

package/dist/components/carousel/carousel-tokens.js

@@ -0,0 +1,18 @@
+import { corner, defineComponentTokens } from "../../tokens/component.js";
+//#region src/components/carousel/carousel-tokens.ts
+/** The tokens of {@link Carousel}. */
+const carouselTokenSet = defineComponentTokens({
+	name: "md-comp-carousel",
+	tokens: { "item-container-shape": {
+		value: corner("extra-large"),
+		description: "Each item's corners (not the full-screen variant's, which are square).",
+		paints: {
+			property: "border-top-left-radius",
+			slot: "item"
+		}
+	} }
+});
+//#endregion
+export { carouselTokenSet };
+
+//# sourceMappingURL=carousel-tokens.js.map

package/dist/components/carousel/carousel-tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel-tokens.js","names":[],"sources":["../../../src/components/carousel/carousel-tokens.ts"],"sourcesContent":["import { corner, defineComponentTokens } from '../../tokens/component';\n\n/*\n * The carousel's component token, M3's `md.comp.carousel-item.container.shape` (checked\n * against m3.material.io's token tables, 2026-10-14): the corners each item is masked with,\n * 28px (extra-large) as Compose's samples mask them. The root carries\n * `data-tokens=\"md-comp-carousel\"` and `data-variant`; the internal `--m3-carousel-corner`\n * takes the token, so the registered `--m3-carousel-item-corner` still animates a pressed\n * item's corners. The pressed corners and the full-screen variant's square items stay fixed.\n */\n\n/** The tokens of {@link Carousel}. */\nexport const carouselTokenSet = defineComponentTokens({\n  name: 'md-comp-carousel',\n  tokens: {\n    'item-container-shape': {\n      value: corner('extra-large'),\n      description: \"Each item's corners (not the full-screen variant's, which are square).\",\n      paints: { property: 'border-top-left-radius', slot: 'item' },\n    },\n  },\n});\n"],"mappings":";;;AAYA,MAAa,mBAAmB,sBAAsB;CACpD,MAAM;CACN,QAAQ,EACN,wBAAwB;EACtB,OAAO,OAAO,aAAa;EAC3B,aAAa;EACb,QAAQ;GAAE,UAAU;GAA0B,MAAM;EAAO;CAC7D,EACF;AACF,CAAC"}

package/dist/components/checkbox/Checkbox.d.ts

@@ -0,0 +1,78 @@
+import { Density } from "../../tokens/density.js";
+import { WrapperRootDOMProps } from "../../utils/root-props.js";
+import { SelectionControlClassNames } from "../../primitives/SelectionControl.js";
+import { AriaAttributes, CSSProperties, ReactNode, Ref } from "react";
+import { AriaCheckboxProps } from "react-aria";
+//#region src/components/checkbox/Checkbox.d.ts
+export interface CheckboxClassNames extends SelectionControlClassNames {
+  /** The 18px box that draws the check mark or dash. */
+  box?: string;
+  /** The check or dash drawn in the box (an `<svg>` stroked with `currentColor`). */
+  icon?: string;
+}
+/** React Aria names with an `is` prefix; we use the shorter HTML-style names. */
+type RenamedAriaProps = 'isSelected' | 'defaultSelected' | 'onChange' | 'isIndeterminate' | 'isDisabled' | 'isReadOnly' | 'isRequired' | 'isInvalid' | 'children' | 'validationState' | 'excludeFromTabOrder';
+interface CheckboxOwnProps extends Omit<AriaCheckboxProps, RenamedAriaProps>, Omit<WrapperRootDOMProps<HTMLLabelElement>, keyof AriaCheckboxProps>, Pick<AriaAttributes, 'aria-expanded' | 'aria-required' | 'aria-invalid' | 'aria-readonly'> {
+  /** Controlled checked state. */
+  checked?: boolean;
+  /** Initial checked state when uncontrolled. */
+  defaultChecked?: boolean;
+  /** Called when the user checks or unchecks the checkbox. */
+  onCheckedChange?: (checked: boolean) => void;
+  /**
+   * Shows a dash, announced as mixed: some, but not all, of a group is checked. The checked
+   * state underneath doesn't change. @default false
+   */
+  indeterminate?: boolean;
+  /** Turns the checkbox off: it can't be changed or focused. @default false */
+  disabled?: boolean;
+  /** The checkbox can be focused but not changed. @default false */
+  readOnly?: boolean;
+  /**
+   * The checkbox must be checked (`aria-required`; with `validationBehavior="native"`, the
+   * form can't submit until it is). @default false
+   */
+  required?: boolean;
+  /** Shows the error state. @default false */
+  invalid?: boolean;
+  /**
+   * Web density, `0` to `-3`: each step takes 4px off the round state layer (40px at 0, 28px
+   * at -3); the box stays 18px and the touch target 48px. Left out, the checkbox takes the
+   * density of the nearest `ThemeProvider` or `ThemeScope`. M3 asks for density to be the
+   * reader's choice rather than a default, so prefer setting it there, from a setting.
+   * @default 0
+   */
+  density?: Density;
+  /** Classes for the root `<label>`, merged with `classNames.root`; consumer classes win. */
+  className?: string;
+  /** Classes for each part, by slot. `classNames.root` is merged with `className`. */
+  classNames?: CheckboxClassNames;
+  /** Inline styles for the root `<label>`. */
+  style?: CSSProperties;
+  /** The root `<label>`. Use `inputRef` for the checkbox input. */
+  ref?: Ref<HTMLLabelElement>;
+  /** Ref to the visually hidden checkbox `<input>`. */
+  inputRef?: Ref<HTMLInputElement>;
+}
+/** A visible label, or an accessible name for a checkbox without one. */
+type CheckboxLabel = {
+  children: ReactNode;
+} | {
+  children?: undefined;
+  'aria-label': string;
+} | {
+  children?: undefined;
+  'aria-labelledby': string;
+};
+export type CheckboxProps = CheckboxOwnProps & CheckboxLabel;
+/**
+ * M3 checkbox: checked, unchecked and indeterminate, with error and disabled states, a
+ * drawn check mark, a 40px state layer and a 48px touch target. A visually hidden native
+ * checkbox (React Aria `useCheckbox`) keeps forms, labels and assistive tech working.
+ *
+ * @example
+ * <Checkbox defaultChecked name="terms" required>I accept the terms</Checkbox>
+ */
+export declare function Checkbox({ checked, defaultChecked, onCheckedChange, indeterminate, disabled, readOnly, required, invalid, density, className, classNames, style, ref, inputRef, children, ...otherProps }: CheckboxProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=Checkbox.d.ts.map

package/dist/components/checkbox/Checkbox.js

@@ -0,0 +1,77 @@
+"use client";
+import { densityAttribute } from "../../tokens/density.js";
+import { useRippleHold } from "../../primitives/use-m3-interaction.js";
+import { mergeDataTokens } from "../../utils/merge-data-tokens.js";
+import { pickWidgetAria, splitRootProps } from "../../utils/root-props.js";
+import { SelectionControl } from "../../primitives/SelectionControl.js";
+import { checkboxStyles } from "./checkbox-styles.js";
+import { CheckboxBox } from "./checkbox-box.js";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps, useCheckbox, useFocusRing, useHover, useObjectRef } from "react-aria";
+import { useToggleState } from "react-stately";
+//#region src/components/checkbox/Checkbox.tsx
+/**
+* M3 checkbox: checked, unchecked and indeterminate, with error and disabled states, a
+* drawn check mark, a 40px state layer and a 48px touch target. A visually hidden native
+* checkbox (React Aria `useCheckbox`) keeps forms, labels and assistive tech working.
+*
+* @example
+* <Checkbox defaultChecked name="terms" required>I accept the terms</Checkbox>
+*/
+function Checkbox({ checked, defaultChecked, onCheckedChange, indeterminate = false, disabled = false, readOnly, required, invalid, density, className, classNames, style, ref, inputRef, children, ...otherProps }) {
+	const { root: rootData, rest: ariaProps } = splitRootProps(otherProps, { wrapper: true });
+	const domInputRef = useObjectRef(inputRef);
+	const options = {
+		...ariaProps,
+		children,
+		isSelected: checked,
+		defaultSelected: defaultChecked,
+		onChange: onCheckedChange,
+		isIndeterminate: indeterminate,
+		isDisabled: disabled,
+		isReadOnly: readOnly,
+		isRequired: required,
+		isInvalid: invalid
+	};
+	const state = useToggleState(options);
+	const { inputProps, labelProps, isSelected, isPressed, isInvalid } = useCheckbox(options, state, domInputRef);
+	const { focusProps, isFocusVisible } = useFocusRing();
+	const { hoverProps, isHovered } = useHover({ isDisabled: disabled });
+	const rippling = useRippleHold(isPressed && !disabled);
+	const styles = checkboxStyles();
+	return /* @__PURE__ */ jsx(SelectionControl, {
+		ref,
+		rootProps: mergeProps(labelProps, hoverProps),
+		inputProps: mergeProps(pickWidgetAria(ariaProps), inputProps, focusProps),
+		inputRef: domInputRef,
+		rootData: {
+			...rootData,
+			...densityAttribute(density),
+			"data-tokens": mergeDataTokens("md-comp-checkbox", rootData)
+		},
+		state: {
+			"data-checked": isSelected && !indeterminate || void 0,
+			"data-indeterminate": indeterminate || void 0,
+			"data-invalid": isInvalid || void 0,
+			"data-disabled": disabled || void 0,
+			"data-hovered": isHovered && !disabled || void 0,
+			"data-pressed": isPressed && !disabled || void 0,
+			"data-rippling": rippling || void 0,
+			"data-focus-visible": isFocusVisible || void 0
+		},
+		styles,
+		className,
+		classNames,
+		style,
+		indicator: /* @__PURE__ */ jsx(CheckboxBox, {
+			styles,
+			className: classNames?.box,
+			iconClassName: classNames?.icon
+		}),
+		children
+	});
+}
+//#endregion
+export { Checkbox };
+
+//# sourceMappingURL=Checkbox.js.map

package/dist/components/checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport type { AriaAttributes, CSSProperties, ReactNode, Ref } from 'react';\nimport {\n  mergeProps,\n  useCheckbox,\n  useFocusRing,\n  useHover,\n  useObjectRef,\n  type AriaCheckboxProps,\n} from 'react-aria';\nimport { useToggleState } from 'react-stately';\nimport {\n  SelectionControl,\n  type SelectionControlClassNames,\n} from '../../primitives/SelectionControl';\nimport { densityAttribute, type Density } from '../../tokens/density';\nimport { mergeDataTokens } from '../../utils/merge-data-tokens';\nimport { pickWidgetAria, splitRootProps, type WrapperRootDOMProps } from '../../utils/root-props';\nimport { checkboxStyles } from './checkbox-styles';\nimport { useRippleHold } from '../../primitives/use-m3-interaction';\nimport { CheckboxBox } from './checkbox-box';\n\nexport interface CheckboxClassNames extends SelectionControlClassNames {\n  /** The 18px box that draws the check mark or dash. */\n  box?: string;\n  /** The check or dash drawn in the box (an `<svg>` stroked with `currentColor`). */\n  icon?: string;\n}\n\n/** React Aria names with an `is` prefix; we use the shorter HTML-style names. */\ntype RenamedAriaProps =\n  | 'isSelected'\n  | 'defaultSelected'\n  | 'onChange'\n  | 'isIndeterminate'\n  | 'isDisabled'\n  | 'isReadOnly'\n  | 'isRequired'\n  | 'isInvalid'\n  | 'children'\n  // Left out: the deprecated `validationState` (`invalid` replaces it) and React Aria's\n  // `excludeFromTabOrder` (`tabIndex={-1}` covers the rare case).\n  | 'validationState'\n  | 'excludeFromTabOrder';\n\ninterface CheckboxOwnProps\n  extends\n    Omit<AriaCheckboxProps, RenamedAriaProps>,\n    Omit<WrapperRootDOMProps<HTMLLabelElement>, keyof AriaCheckboxProps>,\n    // The input's own state attributes go to it, with React Aria's `aria-controls`.\n    Pick<AriaAttributes, 'aria-expanded' | 'aria-required' | 'aria-invalid' | 'aria-readonly'> {\n  /** Controlled checked state. */\n  checked?: boolean;\n  /** Initial checked state when uncontrolled. */\n  defaultChecked?: boolean;\n  /** Called when the user checks or unchecks the checkbox. */\n  onCheckedChange?: (checked: boolean) => void;\n  /**\n   * Shows a dash, announced as mixed: some, but not all, of a group is checked. The checked\n   * state underneath doesn't change. @default false\n   */\n  indeterminate?: boolean;\n  /** Turns the checkbox off: it can't be changed or focused. @default false */\n  disabled?: boolean;\n  /** The checkbox can be focused but not changed. @default false */\n  readOnly?: boolean;\n  /**\n   * The checkbox must be checked (`aria-required`; with `validationBehavior=\"native\"`, the\n   * form can't submit until it is). @default false\n   */\n  required?: boolean;\n  /** Shows the error state. @default false */\n  invalid?: boolean;\n  /**\n   * Web density, `0` to `-3`: each step takes 4px off the round state layer (40px at 0, 28px\n   * at -3); the box stays 18px and the touch target 48px. Left out, the checkbox takes the\n   * density of the nearest `ThemeProvider` or `ThemeScope`. M3 asks for density to be the\n   * reader's choice rather than a default, so prefer setting it there, from a setting.\n   * @default 0\n   */\n  density?: Density;\n  /** Classes for the root `<label>`, merged with `classNames.root`; consumer classes win. */\n  className?: string;\n  /** Classes for each part, by slot. `classNames.root` is merged with `className`. */\n  classNames?: CheckboxClassNames;\n  /** Inline styles for the root `<label>`. */\n  style?: CSSProperties;\n  /** The root `<label>`. Use `inputRef` for the checkbox input. */\n  ref?: Ref<HTMLLabelElement>;\n  /** Ref to the visually hidden checkbox `<input>`. */\n  inputRef?: Ref<HTMLInputElement>;\n}\n\n/** A visible label, or an accessible name for a checkbox without one. */\ntype CheckboxLabel =\n  | { children: ReactNode }\n  | { children?: undefined; 'aria-label': string }\n  | { children?: undefined; 'aria-labelledby': string };\n\nexport type CheckboxProps = CheckboxOwnProps & CheckboxLabel;\n\n/**\n * M3 checkbox: checked, unchecked and indeterminate, with error and disabled states, a\n * drawn check mark, a 40px state layer and a 48px touch target. A visually hidden native\n * checkbox (React Aria `useCheckbox`) keeps forms, labels and assistive tech working.\n *\n * @example\n * <Checkbox defaultChecked name=\"terms\" required>I accept the terms</Checkbox>\n */\nexport function Checkbox({\n  checked,\n  defaultChecked,\n  onCheckedChange,\n  indeterminate = false,\n  disabled = false,\n  readOnly,\n  required,\n  invalid,\n  density,\n  className,\n  classNames,\n  style,\n  ref,\n  inputRef,\n  children,\n  ...otherProps\n}: CheckboxProps) {\n  // DOM attributes for the whole control go on the root; the rest goes to the input via React Aria.\n  const { root: rootData, rest: ariaProps } = splitRootProps(otherProps, { wrapper: true });\n  const domInputRef = useObjectRef(inputRef);\n  const options: AriaCheckboxProps = {\n    ...ariaProps,\n    children,\n    isSelected: checked,\n    defaultSelected: defaultChecked,\n    onChange: onCheckedChange,\n    isIndeterminate: indeterminate,\n    isDisabled: disabled,\n    isReadOnly: readOnly,\n    isRequired: required,\n    isInvalid: invalid,\n  };\n  const state = useToggleState(options);\n  const { inputProps, labelProps, isSelected, isPressed, isInvalid } = useCheckbox(\n    options,\n    state,\n    domInputRef,\n  );\n  const { focusProps, isFocusVisible } = useFocusRing();\n  const { hoverProps, isHovered } = useHover({ isDisabled: disabled });\n\n  const rippling = useRippleHold(isPressed && !disabled);\n  const styles = checkboxStyles();\n\n  return (\n    <SelectionControl\n      ref={ref}\n      rootProps={mergeProps(labelProps, hoverProps)}\n      inputProps={mergeProps(pickWidgetAria(ariaProps), inputProps, focusProps)}\n      inputRef={domInputRef}\n      // The box resolves the component tokens itself (list items draw it too); the root\n      // is marked as well, so the tokens sit on the element that carries the state.\n      rootData={{\n        ...rootData,\n        ...densityAttribute(density),\n        'data-tokens': mergeDataTokens('md-comp-checkbox', rootData),\n      }}\n      state={{\n        'data-checked': (isSelected && !indeterminate) || undefined,\n        'data-indeterminate': indeterminate || undefined,\n        'data-invalid': isInvalid || undefined,\n        'data-disabled': disabled || undefined,\n        'data-hovered': (isHovered && !disabled) || undefined,\n        'data-pressed': (isPressed && !disabled) || undefined,\n        'data-rippling': rippling || undefined,\n        'data-focus-visible': isFocusVisible || undefined,\n      }}\n      styles={styles}\n      className={className}\n      classNames={classNames}\n      style={style}\n      indicator={\n        <CheckboxBox styles={styles} className={classNames?.box} iconClassName={classNames?.icon} />\n      }\n    >\n      {children}\n    </SelectionControl>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA8GA,SAAgB,SAAS,EACvB,SACA,gBACA,iBACA,gBAAgB,OAChB,WAAW,OACX,UACA,UACA,SACA,SACA,WACA,YACA,OACA,KACA,UACA,UACA,GAAG,cACa;CAEhB,MAAM,EAAE,MAAM,UAAU,MAAM,cAAc,eAAe,YAAY,EAAE,SAAS,KAAK,CAAC;CACxF,MAAM,cAAc,aAAa,QAAQ;CACzC,MAAM,UAA6B;EACjC,GAAG;EACH;EACA,YAAY;EACZ,iBAAiB;EACjB,UAAU;EACV,iBAAiB;EACjB,YAAY;EACZ,YAAY;EACZ,YAAY;EACZ,WAAW;CACb;CACA,MAAM,QAAQ,eAAe,OAAO;CACpC,MAAM,EAAE,YAAY,YAAY,YAAY,WAAW,cAAc,YACnE,SACA,OACA,WACF;CACA,MAAM,EAAE,YAAY,mBAAmB,aAAa;CACpD,MAAM,EAAE,YAAY,cAAc,SAAS,EAAE,YAAY,SAAS,CAAC;CAEnE,MAAM,WAAW,cAAc,aAAa,CAAC,QAAQ;CACrD,MAAM,SAAS,eAAe;CAE9B,OACE,oBAAC,kBAAD;EACO;EACL,WAAW,WAAW,YAAY,UAAU;EAC5C,YAAY,WAAW,eAAe,SAAS,GAAG,YAAY,UAAU;EACxE,UAAU;EAGV,UAAU;GACR,GAAG;GACH,GAAG,iBAAiB,OAAO;GAC3B,eAAe,gBAAgB,oBAAoB,QAAQ;EAC7D;EACA,OAAO;GACL,gBAAiB,cAAc,CAAC,iBAAkB,KAAA;GAClD,sBAAsB,iBAAiB,KAAA;GACvC,gBAAgB,aAAa,KAAA;GAC7B,iBAAiB,YAAY,KAAA;GAC7B,gBAAiB,aAAa,CAAC,YAAa,KAAA;GAC5C,gBAAiB,aAAa,CAAC,YAAa,KAAA;GAC5C,iBAAiB,YAAY,KAAA;GAC7B,sBAAsB,kBAAkB,KAAA;EAC1C;EACQ;EACG;EACC;EACL;EACP,WACE,oBAAC,aAAD;GAAqB;GAAQ,WAAW,YAAY;GAAK,eAAe,YAAY;EAAO,CAAA;EAG5F;CACe,CAAA;AAEtB"}

package/dist/components/checkbox/checkbox-box.js

@@ -0,0 +1,34 @@
+import { cn } from "../../utils/cn.js";
+import { checkboxStyles } from "./checkbox-styles.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/checkbox/checkbox-box.tsx
+/**
+* The drawn box and its check or dash, styled from a `group/control` ancestor's state
+* attributes. Shared with list items that are checkboxes, so it carries the checkbox's
+* component tokens (`checkbox-tokens.ts`) itself.
+*/
+function CheckboxBox({ styles = checkboxStyles(), className, iconClassName }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		"data-tokens": "md-comp-checkbox",
+		"data-slot": "box",
+		className: styles.box({ class: className }),
+		children: /* @__PURE__ */ jsxs("svg", {
+			viewBox: "0 0 18 18",
+			className: styles.icon({ class: iconClassName }),
+			children: [/* @__PURE__ */ jsx("path", {
+				d: "M4.5 9 7.2 11.7 13.5 5.4",
+				pathLength: 1,
+				className: cn(styles.mark(), styles.check())
+			}), /* @__PURE__ */ jsx("path", {
+				d: "M4.5 9H13.5",
+				pathLength: 1,
+				className: cn(styles.mark(), styles.dash())
+			})]
+		})
+	});
+}
+//#endregion
+export { CheckboxBox };
+
+//# sourceMappingURL=checkbox-box.js.map

package/dist/components/checkbox/checkbox-box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-box.js","names":[],"sources":["../../../src/components/checkbox/checkbox-box.tsx"],"sourcesContent":["import { cn } from '../../utils/cn';\nimport { checkboxStyles } from './checkbox-styles';\n\n/**\n * The drawn box and its check or dash, styled from a `group/control` ancestor's state\n * attributes. Shared with list items that are checkboxes, so it carries the checkbox's\n * component tokens (`checkbox-tokens.ts`) itself.\n */\nexport function CheckboxBox({\n  styles = checkboxStyles(),\n  className,\n  iconClassName,\n}: {\n  styles?: ReturnType<typeof checkboxStyles>;\n  className?: string | undefined;\n  iconClassName?: string | undefined;\n}) {\n  return (\n    <span\n      aria-hidden=\"true\"\n      data-tokens=\"md-comp-checkbox\"\n      data-slot=\"box\"\n      className={styles.box({ class: className })}\n    >\n      <svg viewBox=\"0 0 18 18\" className={styles.icon({ class: iconClassName })}>\n        <path\n          d=\"M4.5 9 7.2 11.7 13.5 5.4\"\n          pathLength={1}\n          className={cn(styles.mark(), styles.check())}\n        />\n        <path d=\"M4.5 9H13.5\" pathLength={1} className={cn(styles.mark(), styles.dash())} />\n      </svg>\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;AAQA,SAAgB,YAAY,EAC1B,SAAS,eAAe,GACxB,WACA,iBAKC;CACD,OACE,oBAAC,QAAD;EACE,eAAY;EACZ,eAAY;EACZ,aAAU;EACV,WAAW,OAAO,IAAI,EAAE,OAAO,UAAU,CAAC;EAE1C,UAAA,qBAAC,OAAD;GAAK,SAAQ;GAAY,WAAW,OAAO,KAAK,EAAE,OAAO,cAAc,CAAC;GAAxE,UAAA,CACE,oBAAC,QAAD;IACE,GAAE;IACF,YAAY;IACZ,WAAW,GAAG,OAAO,KAAK,GAAG,OAAO,MAAM,CAAC;GAC5C,CAAA,GACD,oBAAC,QAAD;IAAM,GAAE;IAAc,YAAY;IAAG,WAAW,GAAG,OAAO,KAAK,GAAG,OAAO,KAAK,CAAC;GAAI,CAAA,CAChF;;CACD,CAAA;AAEV"}

package/dist/components/checkbox/checkbox-styles.d.ts

@@ -0,0 +1,100 @@
+import { VariantProps } from "../../utils/tv.js";
+//#region src/components/checkbox/checkbox-styles.d.ts
+/** Variant definitions for {@link Checkbox}. */
+export declare const checkboxStyles: import("tailwind-variants").TVReturnType<{
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      icon?: import("tailwind-variants").ClassValue;
+      mark?: import("tailwind-variants").ClassValue;
+      check?: import("tailwind-variants").ClassValue;
+      box?: import("tailwind-variants").ClassValue;
+      dash?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {
+  kind: {
+    circle: import("tailwind-variants").ClassValue | {
+      icon?: import("tailwind-variants").ClassValue;
+      mark?: import("tailwind-variants").ClassValue;
+      check?: import("tailwind-variants").ClassValue;
+      box?: import("tailwind-variants").ClassValue;
+      dash?: import("tailwind-variants").ClassValue;
+    };
+    track: import("tailwind-variants").ClassValue | {
+      icon?: import("tailwind-variants").ClassValue;
+      mark?: import("tailwind-variants").ClassValue;
+      check?: import("tailwind-variants").ClassValue;
+      box?: import("tailwind-variants").ClassValue;
+      dash?: import("tailwind-variants").ClassValue;
+    };
+  };
+}, {
+  box: string[];
+  icon: string;
+  mark: string[];
+  check: string[];
+  dash: string[];
+}, undefined, {
+  kind: {
+    circle: {
+      control: string[];
+    };
+    track: {
+      control: string;
+      label: string;
+    };
+  };
+}, {
+  root: string[];
+  control: string;
+  label: string;
+}, import("tailwind-variants").TVReturnType<{
+  kind: {
+    circle: {
+      control: string[];
+    };
+    track: {
+      control: string;
+      label: string;
+    };
+  };
+}, {
+  root: string[];
+  control: string;
+  label: string;
+}, undefined, {
+  kind: {
+    circle: {
+      control: string[];
+    };
+    track: {
+      control: string;
+      label: string;
+    };
+  };
+}, {
+  root: string[];
+  control: string;
+  label: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  kind: {
+    circle: {
+      control: string[];
+    };
+    track: {
+      control: string;
+      label: string;
+    };
+  };
+}, {
+  root: string[];
+  control: string;
+  label: string;
+}>>>;
+/**
+ * The variants of {@link checkboxStyles}, for building on its styles. They are the recipe's keys, not
+ * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.
+ */
+export type CheckboxStyleProps = VariantProps<typeof checkboxStyles>;
+//#endregion
+//# sourceMappingURL=checkbox-styles.d.ts.map