@seekalfred/primitives 0.7.4 → 0.8.0

package/dist/checkbox/checkbox.js

@@ -1,8 +1,8 @@
 "use client";
-import { cn } from "../lib/cn.js";
-import { selectionLabelVariants, selectionRingVariants } from "../lib/selection-control.js";
+import { cn, cnAll } from "../lib/cn.js";
+import { selectionCardVariants, selectionLabelVariants, selectionRingVariants } from "../lib/selection-control.js";
 import { cva } from "class-variance-authority";
-import { forwardRef } from "react";
+import { forwardRef, useId } from "react";
 import { Checkbox } from "react-aria-components";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/checkbox/checkbox.tsx
@@ -42,7 +42,8 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 * legacy pair that styled one surface twice and silently drifted.
 */
 const checkboxVariants = cva([selectionLabelVariants()]);
-const checkboxBoxVariants = cva([
+/** The square, shared by both variants. Only the default one rings the box itself: a card shows focus on its own border. */
+const checkboxBox = [
 	"inline-flex size-4.5 shrink-0 items-center justify-center",
 	"rounded-checkbox border-(length:--border-width)",
 	"box-border",
@@ -50,37 +51,111 @@ const checkboxBoxVariants = cva([
 	"checkbox-box",
 	"group-data-[selected]:border-primary-strong",
 	"group-data-[indeterminate]:border-primary-strong",
-	"group-data-[hovered]:not-group-data-[selected]:not-group-data-[indeterminate]:border-muted-foreground",
-	selectionRingVariants()
-]);
-const Checkbox$1 = forwardRef(function Checkbox$2({ className, children, ...props }, ref) {
+	"group-data-[hovered]:not-group-data-[selected]:not-group-data-[indeterminate]:border-muted-foreground"
+];
+const checkboxBoxVariants = cva([...checkboxBox, selectionRingVariants()]);
+/** A card's checkbox sits beside the title, aligned to its first line. */
+const checkboxCardBoxVariants = cva([...checkboxBox, "mt-0.5"]);
+const checkboxCardVariants = selectionCardVariants;
+/** The box's fill and mark. One mark, always rendered: the state decides what it shows. */
+function CheckboxMark({ isSelected, isIndeterminate }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		"data-slot": "checkbox-fill",
+		className: "checkbox-fill"
+	}), /* @__PURE__ */ jsx("svg", {
+		"data-slot": "checkbox-mark",
+		"data-mark": isIndeterminate ? "indeterminate" : isSelected ? "check" : void 0,
+		viewBox: "0 0 18 18",
+		fill: "none",
+		className: "absolute -inset-px size-4.5 overflow-visible",
+		children: /* @__PURE__ */ jsx("path", {
+			className: "checkbox-mark",
+			pathLength: "1",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	})] });
+}
+const Checkbox$1 = forwardRef(function Checkbox(props, ref) {
+	return props.variant === "card" ? /* @__PURE__ */ jsx(CheckboxCard, {
+		...props,
+		ref
+	}) : /* @__PURE__ */ jsx(CheckboxDefault, {
+		...props,
+		ref
+	});
+});
+const CheckboxCard = forwardRef(function CheckboxCard({ className, children, description, icon, media, variant: _variant, ...props }, ref) {
+	const id = useId();
+	const titleId = `${id}-title`;
+	const descriptionId = `${id}-description`;
+	return /* @__PURE__ */ jsx(Checkbox, {
+		"aria-labelledby": children == null || props["aria-label"] != null ? void 0 : titleId,
+		"aria-describedby": description == null ? void 0 : descriptionId,
+		...props,
+		inputRef: ref,
+		"data-slot": "checkbox",
+		"data-variant": "card",
+		className: cn(cnAll(checkboxCardVariants(), media != null && "flex-col items-stretch"), className),
+		children: ({ isSelected, isIndeterminate }) => {
+			const row = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				icon == null ? null : /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					"data-slot": "checkbox-icon",
+					className: "mt-0.5 inline-flex shrink-0 text-text-secondary [&_svg]:size-4",
+					children: icon
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "flex min-w-0 flex-1 flex-col gap-1",
+					children: [children == null ? null : /* @__PURE__ */ jsx("span", {
+						id: titleId,
+						"data-slot": "checkbox-label",
+						className: "font-medium",
+						children
+					}), description == null ? null : /* @__PURE__ */ jsx("span", {
+						id: descriptionId,
+						"data-slot": "checkbox-description",
+						className: "text-text-secondary",
+						children: description
+					})]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					"data-slot": "checkbox-box",
+					className: checkboxCardBoxVariants(),
+					children: /* @__PURE__ */ jsx(CheckboxMark, {
+						isSelected,
+						isIndeterminate
+					})
+				})
+			] });
+			return media == null ? row : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+				"data-slot": "checkbox-media",
+				className: "block w-full min-w-0",
+				children: media
+			}), /* @__PURE__ */ jsx("span", {
+				className: "flex w-full items-start gap-3",
+				children: row
+			})] });
+		}
+	});
+});
+const CheckboxDefault = forwardRef(function CheckboxDefault({ className, children, variant: _variant, description: _description, icon: _icon, media: _media, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Checkbox, {
 		...props,
 		inputRef: ref,
 		"data-slot": "checkbox",
 		className: cn(checkboxVariants(), className),
-		children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", {
+		children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
 			"data-slot": "checkbox-box",
 			className: checkboxBoxVariants(),
-			children: [/* @__PURE__ */ jsx("span", {
-				"data-slot": "checkbox-fill",
-				className: "checkbox-fill"
-			}), /* @__PURE__ */ jsx("svg", {
-				"data-slot": "checkbox-mark",
-				"data-mark": isIndeterminate ? "indeterminate" : isSelected ? "check" : void 0,
-				viewBox: "0 0 18 18",
-				fill: "none",
-				className: "absolute -inset-px size-4.5 overflow-visible",
-				children: /* @__PURE__ */ jsx("path", {
-					className: "checkbox-mark",
-					pathLength: "1",
-					stroke: "currentColor",
-					strokeWidth: "2",
-					strokeLinecap: "round",
-					strokeLinejoin: "round"
-				})
-			})]
+			children: /* @__PURE__ */ jsx(CheckboxMark, {
+				isSelected,
+				isIndeterminate
+			})
 		}), children == null ? null : /* @__PURE__ */ jsx("span", {
 			"data-slot": "checkbox-label",
 			children
@@ -88,6 +163,6 @@ const Checkbox$1 = forwardRef(function Checkbox$2({ className, children, ...prop
 	});
 });
 //#endregion
-export { Checkbox$1 as Checkbox, checkboxBoxVariants, checkboxVariants };
+export { Checkbox$1 as Checkbox, checkboxBoxVariants, checkboxCardVariants, checkboxVariants };
 
 //# sourceMappingURL=checkbox.js.map

package/dist/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","names":["Checkbox","AriaCheckbox"],"sources":["../../src/checkbox/checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport {\n  Checkbox as AriaCheckbox,\n  type CheckboxProps as AriaCheckboxProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { selectionLabelVariants, selectionRingVariants } from \"../lib/selection-control.js\";\n\n/**\n * Checkbox, rebuilt on React Aria.\n *\n * THE CENSUS FOUND ZERO CALL SITES. It is ported anyway because forms and\n * table row selection are unbuildable without it, but that fact changes what\n * this is: with no usage to be faithful to and no call site to break, it is a\n * rewrite rather than a restyling. Four things the legacy component got\n * wrong are therefore simply fixed rather than carried:\n *\n * - **No accessible name.** It rendered a bare `<input type=\"checkbox\">` with\n *   no label, no `aria-label` and no `id`, so every use was an axe `label`\n *   violation. Here the label is `children`, and React Aria wraps the input\n *   in it.\n * - **The fill never showed.** `checked:bg-primary` on a native input with no\n *   `appearance-none` is painted over by the user-agent checkbox.\n * - **`border-primary` cannot be a boundary.** Brand orange is 2.44:1 on\n *   white, under even the 3:1 non-text floor (WCAG 1.4.11).\n * - **`focus-visible:ring-2` is a box-shadow**, which forced-colors discards,\n *   taking the only focus indication with it.\n *\n * React Aria renders a `<label>` around a visually-hidden real `<input>` and\n * NOTHING else -- there is no visual box in the box. Drawing one, and keeping\n * it in step with `data-selected` / `data-indeterminate`, is what this\n * component owns.\n *\n * Every string in the cva blocks below is a STATIC literal. Tailwind scans\n * source text, so a class assembled at runtime is invisible to it and would\n * simply never be emitted.\n */\n/**\n * The label geometry now lives in lib/selection-control.ts, shared with\n * Radio and Switch. Three controls with the same 24px target and the same\n * typography is the Rule of Three, and this migration has twice found a\n * legacy pair that styled one surface twice and silently drifted.\n */\nexport const checkboxVariants = cva([selectionLabelVariants()]);\n\nexport const checkboxBoxVariants = cva([\n  \"inline-flex size-4.5 shrink-0 items-center justify-center\",\n  \"rounded-checkbox border-(length:--border-width)\",\n\n  // box-border: the size is the whole square, border included.\n  \"box-border\",\n\n  \"bg-surface border-control-edge text-primary-foreground\",\n\n  // Border colour eases, the square presses to .95 and springs back (see checkbox-box).\n  \"checkbox-box\",\n\n  // The border takes the strong tone once chosen; the colour itself is the fill below.\n  \"group-data-[selected]:border-primary-strong\",\n  \"group-data-[indeterminate]:border-primary-strong\",\n  // Hover darkens an unchosen box's border.\n  \"group-data-[hovered]:not-group-data-[selected]:not-group-data-[indeterminate]:border-muted-foreground\",\n\n  selectionRingVariants(),\n]);\n\nexport interface CheckboxProps\n  extends Omit<AriaCheckboxProps, \"className\" | \"style\" | \"children\"> {\n  /**\n   * The label, and the control's accessible name.\n   *\n   * Omit it only for a genuinely label-less checkbox -- a table row selector\n   * -- and pass `aria-label` instead. A checkbox with neither has no\n   * accessible name, which is what every legacy call site would have been.\n   */\n  children?: ReactNode;\n  /** Extra classes for the label. Merged last, so they win conflicts. */\n  className?: string;\n}\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  { className, children, ...props },\n  ref,\n) {\n  return (\n    <AriaCheckbox\n      {...props}\n      // inputRef, not ref: AriaCheckbox's own ref targets the label it\n      // renders around a visually-hidden native input, and a label cannot\n      // be focused -- ref.current.focus() would silently no-op. inputRef is\n      // React Aria's own escape hatch to the real control.\n      inputRef={ref}\n      data-slot=\"checkbox\"\n      // `group` is load-bearing: React Aria puts data-selected,\n      // data-indeterminate and data-focus-visible on the LABEL, and CSS\n      // cannot look upward from the box to them.\n      className={cn(checkboxVariants(), className)}\n    >\n      {({ isSelected, isIndeterminate }) => (\n        <>\n          {/*\n            aria-hidden: the real <input> already carries the state. A\n            decorative box announced as well would say everything twice.\n          */}\n          <span aria-hidden=\"true\" data-slot=\"checkbox-box\" className={checkboxBoxVariants()}>\n            <span data-slot=\"checkbox-fill\" className=\"checkbox-fill\" />\n            {/*\n              One mark, always rendered: the state decides what it shows. Both\n              states can be true at once (a \"select all\" box that has been\n              partially cleared) and indeterminate wins, which the path's\n              `d` carries in CSS -- the same precedence the old two-glyph\n              branch pinned in JS.\n            */}\n            <svg\n              data-slot=\"checkbox-mark\"\n              data-mark={isIndeterminate ? \"indeterminate\" : isSelected ? \"check\" : undefined}\n              viewBox=\"0 0 18 18\"\n              fill=\"none\"\n              className=\"absolute -inset-px size-4.5 overflow-visible\"\n            >\n              <path\n                className=\"checkbox-mark\"\n                pathLength=\"1\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              />\n            </svg>\n          </span>\n          {children == null ? null : <span data-slot=\"checkbox-label\">{children}</span>}\n        </>\n      )}\n    </AriaCheckbox>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,MAAa,mBAAmB,IAAI,CAAC,uBAAuB,CAAC,CAAC;AAE9D,MAAa,sBAAsB,IAAI;CACrC;CACA;CAGA;CAEA;CAGA;CAGA;CACA;CAEA;CAEA,sBAAsB;AACxB,CAAC;AAgBD,MAAaA,aAAW,WAA4C,SAASA,WAC3E,EAAE,WAAW,UAAU,GAAG,SAC1B,KACA;CACA,OACE,oBAACC,UAAD;EACE,GAAI;EAKJ,UAAU;EACV,aAAU;EAIV,WAAW,GAAG,iBAAiB,GAAG,SAAS;EAEzC,WAAA,EAAE,YAAY,sBACd,qBAAA,YAAA,EAAA,UAAA,CAKE,qBAAC,QAAD;GAAM,eAAY;GAAO,aAAU;GAAe,WAAW,oBAAoB;GAAjF,UAAA,CACE,oBAAC,QAAD;IAAM,aAAU;IAAgB,WAAU;GAAiB,CAAA,GAQ3D,oBAAC,OAAD;IACE,aAAU;IACV,aAAW,kBAAkB,kBAAkB,aAAa,UAAU,KAAA;IACtE,SAAQ;IACR,MAAK;IACL,WAAU;IAEV,UAAA,oBAAC,QAAD;KACE,WAAU;KACV,YAAW;KACX,QAAO;KACP,aAAY;KACZ,eAAc;KACd,gBAAe;IAChB,CAAA;GACE,CAAA,CACD;EACL,CAAA,GAAA,YAAY,OAAO,OAAO,oBAAC,QAAD;GAAM,aAAU;GAAkB;EAAe,CAAA,CAC5E,EAAA,CAAA;CAEQ,CAAA;AAElB,CAAC"}
+{"version":3,"file":"checkbox.js","names":["Checkbox","AriaCheckbox"],"sources":["../../src/checkbox/checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, useId, type ReactNode } from \"react\";\nimport {\n  Checkbox as AriaCheckbox,\n  type CheckboxProps as AriaCheckboxProps,\n} from \"react-aria-components\";\n\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport {\n  selectionCardVariants,\n  selectionLabelVariants,\n  selectionRingVariants,\n} from \"../lib/selection-control.js\";\n\n/**\n * Checkbox, rebuilt on React Aria.\n *\n * THE CENSUS FOUND ZERO CALL SITES. It is ported anyway because forms and\n * table row selection are unbuildable without it, but that fact changes what\n * this is: with no usage to be faithful to and no call site to break, it is a\n * rewrite rather than a restyling. Four things the legacy component got\n * wrong are therefore simply fixed rather than carried:\n *\n * - **No accessible name.** It rendered a bare `<input type=\"checkbox\">` with\n *   no label, no `aria-label` and no `id`, so every use was an axe `label`\n *   violation. Here the label is `children`, and React Aria wraps the input\n *   in it.\n * - **The fill never showed.** `checked:bg-primary` on a native input with no\n *   `appearance-none` is painted over by the user-agent checkbox.\n * - **`border-primary` cannot be a boundary.** Brand orange is 2.44:1 on\n *   white, under even the 3:1 non-text floor (WCAG 1.4.11).\n * - **`focus-visible:ring-2` is a box-shadow**, which forced-colors discards,\n *   taking the only focus indication with it.\n *\n * React Aria renders a `<label>` around a visually-hidden real `<input>` and\n * NOTHING else -- there is no visual box in the box. Drawing one, and keeping\n * it in step with `data-selected` / `data-indeterminate`, is what this\n * component owns.\n *\n * Every string in the cva blocks below is a STATIC literal. Tailwind scans\n * source text, so a class assembled at runtime is invisible to it and would\n * simply never be emitted.\n */\n/**\n * The label geometry now lives in lib/selection-control.ts, shared with\n * Radio and Switch. Three controls with the same 24px target and the same\n * typography is the Rule of Three, and this migration has twice found a\n * legacy pair that styled one surface twice and silently drifted.\n */\nexport const checkboxVariants = cva([selectionLabelVariants()]);\n\n/** The square, shared by both variants. Only the default one rings the box itself: a card shows focus on its own border. */\nconst checkboxBox = [\n  \"inline-flex size-4.5 shrink-0 items-center justify-center\",\n  \"rounded-checkbox border-(length:--border-width)\",\n\n  // box-border: the size is the whole square, border included.\n  \"box-border\",\n\n  \"bg-surface border-control-edge text-primary-foreground\",\n\n  // Border colour eases, the square presses to .95 and springs back (see checkbox-box).\n  \"checkbox-box\",\n\n  // The border takes the strong tone once chosen; the colour itself is the fill below.\n  \"group-data-[selected]:border-primary-strong\",\n  \"group-data-[indeterminate]:border-primary-strong\",\n  // Hover darkens an unchosen box's border.\n  \"group-data-[hovered]:not-group-data-[selected]:not-group-data-[indeterminate]:border-muted-foreground\",\n];\n\nexport const checkboxBoxVariants = cva([...checkboxBox, selectionRingVariants()]);\n\n/** A card's checkbox sits beside the title, aligned to its first line. */\nconst checkboxCardBoxVariants = cva([...checkboxBox, \"mt-0.5\"]);\n\nexport const checkboxCardVariants = selectionCardVariants;\n\nexport interface CheckboxProps\n  extends Omit<AriaCheckboxProps, \"className\" | \"style\" | \"children\"> {\n  /**\n   * The label, and the control's accessible name.\n   *\n   * Omit it only for a genuinely label-less checkbox -- a table row selector\n   * -- and pass `aria-label` instead. A checkbox with neither has no\n   * accessible name, which is what every legacy call site would have been.\n   */\n  children?: ReactNode;\n  /**\n   * `card` draws the option as a selectable card: a bordered surface that is\n   * all hit target, with a `description`, an `icon` and `media`, and the box at\n   * its end. Selected shows a `primary-strong` edge AND the tick, so it never\n   * rests on colour alone. Focus is the card's own border turning dark, with no\n   * ring. The default variant renders exactly as before.\n   *\n   * @default \"default\"\n   */\n  variant?: \"default\" | \"card\";\n  /**\n   * A line under the title, read as the option's description\n   * (`aria-describedby`), not part of its name. Card variant only.\n   */\n  description?: ReactNode;\n  /** A decorative icon before the title. Card variant only; hidden from assistive tech. */\n  icon?: ReactNode;\n  /**\n   * Content above the title, edge to edge in the card: a thumbnail, a preview.\n   * Card variant only. Give an `<img>` its own `alt`, or `alt=\"\"` when the\n   * title says it all.\n   */\n  media?: ReactNode;\n  /** Extra classes for the label (the whole card in the card variant). Merged last, so they win conflicts. */\n  className?: string;\n}\n\n/** The box's fill and mark. One mark, always rendered: the state decides what it shows. */\nfunction CheckboxMark({ isSelected, isIndeterminate }: { isSelected: boolean; isIndeterminate: boolean }) {\n  return (\n    <>\n      <span data-slot=\"checkbox-fill\" className=\"checkbox-fill\" />\n      {/*\n        Both states can be true at once (a \"select all\" box that has been\n        partially cleared) and indeterminate wins, which the path's `d` carries\n        in CSS -- the same precedence the old two-glyph branch pinned in JS.\n      */}\n      <svg\n        data-slot=\"checkbox-mark\"\n        data-mark={isIndeterminate ? \"indeterminate\" : isSelected ? \"check\" : undefined}\n        viewBox=\"0 0 18 18\"\n        fill=\"none\"\n        className=\"absolute -inset-px size-4.5 overflow-visible\"\n      >\n        <path\n          className=\"checkbox-mark\"\n          pathLength=\"1\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n    </>\n  );\n}\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(props, ref) {\n  return props.variant === \"card\" ? <CheckboxCard {...props} ref={ref} /> : <CheckboxDefault {...props} ref={ref} />;\n});\n\nconst CheckboxCard = forwardRef<HTMLInputElement, CheckboxProps>(function CheckboxCard(\n  { className, children, description, icon, media, variant: _variant, ...props },\n  ref,\n) {\n  const id = useId();\n  const titleId = `${id}-title`;\n  const descriptionId = `${id}-description`;\n  return (\n    <AriaCheckbox\n      // The title alone names the option; the description describes it. Left to\n      // the wrapping <label>, the name would be title and description run\n      // together. A caller's own labelling wins, as on Radio.\n      aria-labelledby={children == null || props[\"aria-label\"] != null ? undefined : titleId}\n      aria-describedby={description == null ? undefined : descriptionId}\n      {...props}\n      inputRef={ref}\n      data-slot=\"checkbox\"\n      data-variant=\"card\"\n      className={cn(cnAll(checkboxCardVariants(), media != null && \"flex-col items-stretch\"), className)}\n    >\n      {({ isSelected, isIndeterminate }) => {\n        const row = (\n          <>\n            {icon == null ? null : (\n              <span\n                aria-hidden=\"true\"\n                data-slot=\"checkbox-icon\"\n                className=\"mt-0.5 inline-flex shrink-0 text-text-secondary [&_svg]:size-4\"\n              >\n                {icon}\n              </span>\n            )}\n            <span className=\"flex min-w-0 flex-1 flex-col gap-1\">\n              {children == null ? null : (\n                <span id={titleId} data-slot=\"checkbox-label\" className=\"font-medium\">\n                  {children}\n                </span>\n              )}\n              {description == null ? null : (\n                <span id={descriptionId} data-slot=\"checkbox-description\" className=\"text-text-secondary\">\n                  {description}\n                </span>\n              )}\n            </span>\n            <span aria-hidden=\"true\" data-slot=\"checkbox-box\" className={checkboxCardBoxVariants()}>\n              <CheckboxMark isSelected={isSelected} isIndeterminate={isIndeterminate} />\n            </span>\n          </>\n        );\n        return media == null ? (\n          row\n        ) : (\n          <>\n            <span data-slot=\"checkbox-media\" className=\"block w-full min-w-0\">\n              {media}\n            </span>\n            <span className=\"flex w-full items-start gap-3\">{row}</span>\n          </>\n        );\n      }}\n    </AriaCheckbox>\n  );\n});\n\nconst CheckboxDefault = forwardRef<HTMLInputElement, CheckboxProps>(function CheckboxDefault(\n  // description, icon and media belong to the card; pulled out so they never reach the DOM.\n  { className, children, variant: _variant, description: _description, icon: _icon, media: _media, ...props },\n  ref,\n) {\n  return (\n    <AriaCheckbox\n      {...props}\n      // inputRef, not ref: AriaCheckbox's own ref targets the label it\n      // renders around a visually-hidden native input, and a label cannot\n      // be focused -- ref.current.focus() would silently no-op. inputRef is\n      // React Aria's own escape hatch to the real control.\n      inputRef={ref}\n      data-slot=\"checkbox\"\n      // `group` is load-bearing: React Aria puts data-selected,\n      // data-indeterminate and data-focus-visible on the LABEL, and CSS\n      // cannot look upward from the box to them.\n      className={cn(checkboxVariants(), className)}\n    >\n      {({ isSelected, isIndeterminate }) => (\n        <>\n          {/*\n            aria-hidden: the real <input> already carries the state. A\n            decorative box announced as well would say everything twice.\n          */}\n          <span aria-hidden=\"true\" data-slot=\"checkbox-box\" className={checkboxBoxVariants()}>\n            <CheckboxMark isSelected={isSelected} isIndeterminate={isIndeterminate} />\n          </span>\n          {children == null ? null : <span data-slot=\"checkbox-label\">{children}</span>}\n        </>\n      )}\n    </AriaCheckbox>\n  );\n});\n"],"mappings":"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"}

package/dist/checkbox/index.d.ts

@@ -1,2 +1,2 @@
-import { Checkbox, CheckboxProps, checkboxBoxVariants, checkboxVariants } from "./checkbox.js";
-export { Checkbox, type CheckboxProps, checkboxBoxVariants, checkboxVariants };
+import { Checkbox, CheckboxProps, checkboxBoxVariants, checkboxCardVariants, checkboxVariants } from "./checkbox.js";
+export { Checkbox, type CheckboxProps, checkboxBoxVariants, checkboxCardVariants, checkboxVariants };

package/dist/checkbox/index.js

@@ -1,2 +1,2 @@
-import { Checkbox, checkboxBoxVariants, checkboxVariants } from "./checkbox.js";
-export { Checkbox, checkboxBoxVariants, checkboxVariants };
+import { Checkbox, checkboxBoxVariants, checkboxCardVariants, checkboxVariants } from "./checkbox.js";
+export { Checkbox, checkboxBoxVariants, checkboxCardVariants, checkboxVariants };

package/dist/code-block/code-block.d.ts

@@ -0,0 +1,45 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+//#region src/code-block/code-block.d.ts
+export declare const codeBlockVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export interface CodeBlockProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+  /** The code. It is what is shown (unless `children` is given) and what goes on the clipboard. */
+  value: string;
+  /** Show this instead of `value` (for highlighted markup). `value` is still what is copied. */
+  children?: ReactNode;
+  /**
+   * Break long lines instead of scrolling sideways. Off by default: a line of code
+   * scrolls, and the scroll area takes keyboard focus (only while it actually
+   * overflows) so it can be read.
+   *
+   * @default false
+   */
+  wrap?: boolean;
+  /** The visible label of the copy button. @default "Copy" */
+  copyLabel?: string;
+  /** The copy button's accessible name; keep `copyLabel` inside it. @default "Copy code" */
+  copyAriaLabel?: string;
+  /** Only the icon on the copy button. @default false */
+  iconOnly?: boolean;
+  /**
+   * Names the code group for assistive technology. It is a `group`, not a landmark,
+   * so several blocks on one page do not each add a region to the landmark list.
+   * Give each a distinct label when it helps ("Install command").
+   *
+   * @default "Code"
+   */
+  codeLabel?: string;
+  /** Called once the code has reached the clipboard. */
+  onCopied?: () => void;
+  /** Called when the clipboard refused the text. */
+  onCopyError?: (error: unknown) => void;
+}
+/**
+ * A snippet of code with a copy button, built on CopyButton (which owns the
+ * copy, its feedback and its live-region announcement).
+ *
+ * @example
+ * <CodeBlock value="npm install @seekalfred/primitives" onCopied={() => toast("Copied")} />
+ */
+export declare const CodeBlock: import("react").ForwardRefExoticComponent<CodeBlockProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+//# sourceMappingURL=code-block.d.ts.map

package/dist/code-block/code-block.js

@@ -0,0 +1,74 @@
+"use client";
+import { cn, cnAll } from "../lib/cn.js";
+import { CopyButton } from "../copy-button/copy-button.js";
+import { cva } from "class-variance-authority";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/code-block/code-block.tsx
+const codeBlockVariants = cva([
+	"flex items-start justify-between gap-2",
+	"rounded-control bg-muted px-3 py-2 box-border",
+	"font-sans text-foreground"
+]);
+/**
+* A snippet of code with a copy button, built on CopyButton (which owns the
+* copy, its feedback and its live-region announcement).
+*
+* @example
+* <CodeBlock value="npm install @seekalfred/primitives" onCopied={() => toast("Copied")} />
+*/
+const CodeBlock = forwardRef(function CodeBlock({ value, children, wrap = false, copyLabel = "Copy", copyAriaLabel = "Copy code", iconOnly = false, codeLabel = "Code", onCopied, onCopyError, className, ...props }, ref) {
+	const preRef = useRef(null);
+	const [scrolls, setScrolls] = useState(false);
+	useEffect(() => {
+		const pre = preRef.current;
+		if (wrap || !pre) {
+			setScrolls(false);
+			return;
+		}
+		const measure = () => setScrolls(pre.scrollWidth > pre.clientWidth);
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(measure);
+		observer.observe(pre);
+		if (pre.firstElementChild) observer.observe(pre.firstElementChild);
+		return () => observer.disconnect();
+	}, [
+		wrap,
+		value,
+		children
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		...props,
+		"data-slot": "code-block",
+		"data-wrap": wrap || void 0,
+		className: cn(codeBlockVariants(), className),
+		children: [/* @__PURE__ */ jsx("pre", {
+			ref: preRef,
+			"data-slot": "code-block-pre",
+			...wrap ? {} : {
+				role: "group",
+				"aria-label": codeLabel,
+				tabIndex: scrolls ? 0 : void 0
+			},
+			className: cnAll("m-0 min-w-0 flex-1 font-mono text-sm leading-(--leading-normal)", wrap ? "whitespace-pre-wrap break-all" : "overflow-x-auto outline-none focus-visible:outline-solid focus-visible:outline-(length:--focus-ring-width) focus-visible:outline-(--color-ring)"),
+			children: /* @__PURE__ */ jsx("code", {
+				"data-slot": "code-block-code",
+				children: children ?? value
+			})
+		}), /* @__PURE__ */ jsx(CopyButton, {
+			value,
+			variant: "plain",
+			iconOnly,
+			"aria-label": copyAriaLabel,
+			onCopied,
+			onError: onCopyError,
+			children: copyLabel
+		})]
+	});
+});
+//#endregion
+export { CodeBlock, codeBlockVariants };
+
+//# sourceMappingURL=code-block.js.map

package/dist/code-block/code-block.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block.js","names":[],"sources":["../../src/code-block/code-block.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, useEffect, useRef, useState, type ComponentPropsWithoutRef, type ReactNode } from \"react\";\n\nimport { CopyButton } from \"../copy-button/copy-button.js\";\nimport { cn, cnAll } from \"../lib/cn.js\";\n\nexport const codeBlockVariants = cva([\n  \"flex items-start justify-between gap-2\",\n  \"rounded-control bg-muted px-3 py-2 box-border\",\n  \"font-sans text-foreground\",\n]);\n\nexport interface CodeBlockProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  /** The code. It is what is shown (unless `children` is given) and what goes on the clipboard. */\n  value: string;\n  /** Show this instead of `value` (for highlighted markup). `value` is still what is copied. */\n  children?: ReactNode;\n  /**\n   * Break long lines instead of scrolling sideways. Off by default: a line of code\n   * scrolls, and the scroll area takes keyboard focus (only while it actually\n   * overflows) so it can be read.\n   *\n   * @default false\n   */\n  wrap?: boolean;\n  /** The visible label of the copy button. @default \"Copy\" */\n  copyLabel?: string;\n  /** The copy button's accessible name; keep `copyLabel` inside it. @default \"Copy code\" */\n  copyAriaLabel?: string;\n  /** Only the icon on the copy button. @default false */\n  iconOnly?: boolean;\n  /**\n   * Names the code group for assistive technology. It is a `group`, not a landmark,\n   * so several blocks on one page do not each add a region to the landmark list.\n   * Give each a distinct label when it helps (\"Install command\").\n   *\n   * @default \"Code\"\n   */\n  codeLabel?: string;\n  /** Called once the code has reached the clipboard. */\n  onCopied?: () => void;\n  /** Called when the clipboard refused the text. */\n  onCopyError?: (error: unknown) => void;\n}\n\n/**\n * A snippet of code with a copy button, built on CopyButton (which owns the\n * copy, its feedback and its live-region announcement).\n *\n * @example\n * <CodeBlock value=\"npm install @seekalfred/primitives\" onCopied={() => toast(\"Copied\")} />\n */\nexport const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(function CodeBlock(\n  {\n    value,\n    children,\n    wrap = false,\n    copyLabel = \"Copy\",\n    copyAriaLabel = \"Copy code\",\n    iconOnly = false,\n    codeLabel = \"Code\",\n    onCopied,\n    onCopyError,\n    className,\n    ...props\n  },\n  ref,\n) {\n  const preRef = useRef<HTMLPreElement>(null);\n  const [scrolls, setScrolls] = useState(false);\n\n  // A scroll area must be a tab stop (axe: scrollable-region-focusable) but a snippet\n  // that fits is not one, so a page of short snippets adds no empty tab stops.\n  useEffect(() => {\n    const pre = preRef.current;\n    if (wrap || !pre) {\n      setScrolls(false);\n      return;\n    }\n    const measure = () => setScrolls(pre.scrollWidth > pre.clientWidth);\n    measure();\n    if (typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(measure);\n    // The pre's own box changes with its container; the code's with its content.\n    observer.observe(pre);\n    if (pre.firstElementChild) observer.observe(pre.firstElementChild);\n    return () => observer.disconnect();\n  }, [wrap, value, children]);\n\n  return (\n    <div\n      ref={ref}\n      {...props}\n      data-slot=\"code-block\"\n      data-wrap={wrap || undefined}\n      className={cn(codeBlockVariants(), className)}\n    >\n      <pre\n        ref={preRef}\n        data-slot=\"code-block-pre\"\n        // Scrolling code must be reachable by keyboard; code that fits or wraps never needs to be.\n        {...(wrap ? {} : { role: \"group\", \"aria-label\": codeLabel, tabIndex: scrolls ? 0 : undefined })}\n        className={cnAll(\n          \"m-0 min-w-0 flex-1 font-mono text-sm leading-(--leading-normal)\",\n          wrap\n            ? \"whitespace-pre-wrap break-all\"\n            : \"overflow-x-auto outline-none focus-visible:outline-solid focus-visible:outline-(length:--focus-ring-width) focus-visible:outline-(--color-ring)\",\n        )}\n      >\n        <code data-slot=\"code-block-code\">{children ?? value}</code>\n      </pre>\n      <CopyButton\n        value={value}\n        variant=\"plain\"\n        iconOnly={iconOnly}\n        aria-label={copyAriaLabel}\n        onCopied={onCopied}\n        onError={onCopyError}\n      >\n        {copyLabel}\n      </CopyButton>\n    </div>\n  );\n});\n"],"mappings":";;;;;;;AAQA,MAAa,oBAAoB,IAAI;CACnC;CACA;CACA;AACF,CAAC;;;;;;;;AA0CD,MAAa,YAAY,WAA2C,SAAS,UAC3E,EACE,OACA,UACA,OAAO,OACP,YAAY,QACZ,gBAAgB,aAChB,WAAW,OACX,YAAY,QACZ,UACA,aACA,WACA,GAAG,SAEL,KACA;CACA,MAAM,SAAS,OAAuB,IAAI;CAC1C,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAI5C,gBAAgB;EACd,MAAM,MAAM,OAAO;EACnB,IAAI,QAAQ,CAAC,KAAK;GAChB,WAAW,KAAK;GAChB;EACF;EACA,MAAM,gBAAgB,WAAW,IAAI,cAAc,IAAI,WAAW;EAClE,QAAQ;EACR,IAAI,OAAO,mBAAmB,aAAa;EAC3C,MAAM,WAAW,IAAI,eAAe,OAAO;EAE3C,SAAS,QAAQ,GAAG;EACpB,IAAI,IAAI,mBAAmB,SAAS,QAAQ,IAAI,iBAAiB;EACjE,aAAa,SAAS,WAAW;CACnC,GAAG;EAAC;EAAM;EAAO;CAAQ,CAAC;CAE1B,OACE,qBAAC,OAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,aAAW,QAAQ,KAAA;EACnB,WAAW,GAAG,kBAAkB,GAAG,SAAS;EAL9C,UAAA,CAOE,oBAAC,OAAD;GACE,KAAK;GACL,aAAU;GAEV,GAAK,OAAO,CAAC,IAAI;IAAE,MAAM;IAAS,cAAc;IAAW,UAAU,UAAU,IAAI,KAAA;GAAU;GAC7F,WAAW,MACT,mEACA,OACI,kCACA,iJACN;GAEA,UAAA,oBAAC,QAAD;IAAM,aAAU;IAAmB,UAAA,YAAY;GAAY,CAAA;EACxD,CAAA,GACL,oBAAC,YAAD;GACS;GACP,SAAQ;GACE;GACV,cAAY;GACF;GACV,SAAS;GAER,UAAA;EACS,CAAA,CACT;;AAET,CAAC"}

package/dist/code-block/index.d.ts

@@ -0,0 +1,2 @@
+import { CodeBlock, CodeBlockProps, codeBlockVariants } from "./code-block.js";
+export { CodeBlock, type CodeBlockProps, codeBlockVariants };

package/dist/code-block/index.js

@@ -0,0 +1,2 @@
+import { CodeBlock, codeBlockVariants } from "./code-block.js";
+export { CodeBlock, codeBlockVariants };

package/dist/command-palette/command-palette.d.ts

@@ -0,0 +1,128 @@
+import { ReactNode } from "react";
+//#region src/command-palette/command-palette.d.ts
+/**
+ * CommandPalette: a modal search-and-run list opened with Cmd+K or Ctrl+K.
+ *
+ * Built on the existing Dialog (React Aria's modal: focus trap, focus return, Escape, scrim,
+ * entrance motion that already honours prefers-reduced-motion), Input and ShortcutKeys, so it adds
+ * only the combobox + listbox wiring.
+ *
+ * The pattern is the WAI-ARIA "combobox with listbox popup": DOM focus never leaves the input,
+ * and the highlighted option is named by `aria-activedescendant`. Options are not tabbable.
+ *
+ * Every string in the cva blocks is a STATIC literal (Tailwind scans source text).
+ */
+/** One entry in the palette. */
+export interface CommandPaletteItem {
+  /**
+   * Stable identity. Unique within `items`. A `recent` entry is a copy of an item, so it uses
+   * that item's `id` and `recent` need not be unique against `items`; only each list on its own.
+   */
+  id: string;
+  /** The text shown, and the main thing the query is matched against. */
+  label: string;
+  /** The heading it is listed under. Items without one share an unlabelled group. */
+  group?: string;
+  /** A decorative glyph before the label. Mark it `aria-hidden`; it is sized by the palette. */
+  icon?: ReactNode;
+  /** A key combination shown as key caps, such as `"mod+shift+p"`. A hint only: it binds nothing. */
+  shortcut?: string;
+  /** Plain text at the trailing edge, such as "Go to" or "Run". Shown when there is no `shortcut`. */
+  hint?: string;
+  /** Extra words that also match the query but are not shown. */
+  keywords?: readonly string[];
+  /** Listed but skipped by the arrow keys and ignored when pressed. @default false */
+  isDisabled?: boolean;
+}
+export declare const commandPaletteListVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const commandPaletteOptionVariants: (props?: ({} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface CommandPaletteShortcutOptions {
+  /**
+   * The chord. `mod` matches Command or Control on any platform, so the default opens on both
+   * Cmd+K and Ctrl+K. Other modifiers: `ctrl`, `meta`, `alt`, `shift`. Modifiers you do not name
+   * must not be held.
+   *
+   * The last part is the key. Supported: a letter (`k`), a digit (`1`, also with `shift`), `space`,
+   * and any other name equal to `KeyboardEvent.key` such as `escape`, `enter`, `/`. A letter is
+   * read from what the key types, so it follows Dvorak and similar layouts. On a non-Latin layout
+   * it falls back to the physical key.
+   * @default "mod+k"
+   */
+  shortcut?: string;
+  /** Turn the listener off. @default true */
+  enabled?: boolean;
+}
+type KeyLike = Pick<KeyboardEvent, "key" | "code" | "ctrlKey" | "metaKey" | "altKey" | "shiftKey">;
+/** True when a keydown is this chord. `mod` is either Command or Control (not both required). */
+export declare function matchesCommandPaletteShortcut(event: KeyLike, shortcut: string): boolean;
+/**
+ * Calls `onTrigger` when the chord is pressed anywhere in the document, and prevents the
+ * browser's own use of it (Ctrl+K focuses the address bar in some browsers).
+ *
+ * `CommandPalette` installs this itself, so use the hook only to open a palette from a
+ * different chord than the one the palette listens for, or to drive one you render conditionally.
+ */
+export declare function useCommandPaletteShortcut(onTrigger: () => void, { shortcut, enabled }?: CommandPaletteShortcutOptions): void;
+export interface CommandPaletteProps {
+  /** Everything that can be run or opened. */
+  items: readonly CommandPaletteItem[];
+  /**
+   * A group of recent or suggested items, listed first while the search box is empty. It
+   * disappears once the user types, when the search runs over `items` alone.
+   */
+  recent?: readonly CommandPaletteItem[];
+  /** Heading of the `recent` group. @default "Recent" */
+  recentLabel?: string;
+  /** Called with the chosen item, after the palette has asked to close. */
+  onSelect?: (item: CommandPaletteItem) => void;
+  /** Whether it is open. Pass with `onOpenChange` to control it. */
+  isOpen?: boolean;
+  /** Whether it starts open when uncontrolled. @default false */
+  defaultOpen?: boolean;
+  /** Called when it wants to open or close: the shortcut, Escape, the scrim, a selection. */
+  onOpenChange?: (isOpen: boolean) => void;
+  /**
+   * The chord that toggles it, installed on the document while the component is mounted.
+   * `false` removes the listener, for an app that binds it elsewhere (see
+   * `useCommandPaletteShortcut`). `mod` is Command or Control.
+   * @default "mod+k"
+   */
+  shortcut?: string | false;
+  /** The dialog's accessible name. A prop so it can be translated. @default "Search and commands" */
+  label?: string;
+  /** Accessible name of the search box. @default "Search" */
+  searchLabel?: string;
+  /** Placeholder of the search box. @default "Search pages and actions" */
+  placeholder?: string;
+  /** Replaces the default filter. Receives the item and the trimmed query; the query is never empty. */
+  filter?: (item: CommandPaletteItem, query: string) => boolean;
+  /** What to show when nothing matches. @default ``No matches for “query”.`` */
+  emptyMessage?: ReactNode | ((query: string) => ReactNode);
+  /** The polite result-count announcement. @default "1 result" / "n results" / "No results" */
+  resultsLabel?: (count: number) => string;
+  /**
+   * The strip of key hints under the list. `undefined` shows the default ("↑ ↓ to move",
+   * "Enter to open"); `null` removes it; anything else replaces it, which is how to translate it.
+   */
+  footer?: ReactNode;
+  /** Extra classes for the panel. Merged last. */
+  className?: string;
+}
+/**
+ * A command palette.
+ *
+ * @example
+ * const [open, setOpen] = useState(false);
+ * <CommandPalette
+ *   items={[
+ *     { id: "home", group: "Pages", label: "Home", hint: "Go to" },
+ *     { id: "theme", group: "Actions", label: "Switch theme", keywords: ["dark"], shortcut: "mod+shift+l" },
+ *   ]}
+ *   isOpen={open}
+ *   onOpenChange={setOpen}
+ *   onSelect={(item) => run(item.id)}
+ * />
+ */
+export declare function CommandPalette({ items, recent, recentLabel, onSelect, isOpen: isOpenProp, defaultOpen, onOpenChange, shortcut, label, searchLabel, placeholder, filter, emptyMessage, resultsLabel, footer, className }: CommandPaletteProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=command-palette.d.ts.map