@namroodinc/liquid-editorial 0.0.0-stage → 0.1.0

package/dist/components/Select/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["forwardRef","useState","useRef","useId","useCallback","Icon","Popover","require_Icon","require_components_Popover_index","react","react_jsx_runtime","cx","parts","Select","rest","internal","setInternal","defaultValue","current","value","isOpen","setOpen","activeIndex","setActiveIndex","rootRef","triggerRef","listRef","listId","effectiveDisabled","isDisabled","disabled","isVisible","selected","options","option","enabled","commit","next","onValueChange","index","onPointerDown","target","event","step","order","o","delta","handleKeyDown","pick","node","ref","isInvalid","size","className","onClick","open","onKeyDown","placeholder"],"sources":["../../../src/components/Select/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ButtonHTMLAttributes,\n} from \"react\";\nimport { Icon } from \"../Icon\";\nimport { Popover } from \"../Popover\";\nimport type { FieldSize } from \"../Field\";\nimport \"../Field/style.css\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nexport interface SelectOption {\n  value: string;\n  label: string;\n  /** Secondary line under the label. */\n  description?: string;\n  isDisabled?: boolean;\n}\n\nexport interface SelectProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"value\" | \"defaultValue\" | \"onChange\"> {\n  options: SelectOption[];\n  /** Controlled value. Leave undefined to let the select hold its own. */\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  placeholder?: string;\n  size?: FieldSize;\n  isDisabled?: boolean;\n  isInvalid?: boolean;\n}\n\n/**\n * One value out of a known list. Wears the field skin, opens a listbox: arrows\n * walk the options, Enter commits, Escape closes without changing anything.\n */\nexport const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select(\n  {\n    options,\n    value,\n    defaultValue,\n    onValueChange,\n    placeholder = \"Select an option\",\n    size = \"md\",\n    isDisabled = false,\n    isInvalid = false,\n    className,\n    disabled,\n    onClick,\n    onKeyDown,\n    ...rest\n  },\n  ref,\n) {\n  const [internal, setInternal] = useState(defaultValue ?? \"\");\n  const current = value ?? internal;\n  const [isOpen, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(0);\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  const triggerRef = useRef<HTMLButtonElement | null>(null);\n  const listRef = useRef<HTMLDivElement | null>(null);\n  const listId = useId();\n  const effectiveDisabled = isDisabled || disabled;\n  const isVisible = isOpen && !effectiveDisabled;\n\n  const selected = options.find((option) => option.value === current);\n  const enabled = options.filter((option) => !option.isDisabled);\n\n  const commit = useCallback(\n    (next: string) => {\n      if (value === undefined) setInternal(next);\n      onValueChange?.(next);\n      setOpen(false);\n    },\n    [onValueChange, value],\n  );\n\n  useEffect(() => {\n    if (!isVisible) return;\n    const index = options.findIndex((option) => option.value === current && !option.isDisabled);\n    setActiveIndex(index < 0 ? options.indexOf(enabled[0]!) : index);\n    const onPointerDown = (event: MouseEvent) => {\n      const target = event.target as Node;\n      if (!rootRef.current?.contains(target) && !listRef.current?.contains(target)) setOpen(false);\n    };\n    document.addEventListener(\"mousedown\", onPointerDown);\n    return () => document.removeEventListener(\"mousedown\", onPointerDown);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isVisible]);\n\n  useEffect(() => {\n    if (!isVisible) return;\n    const activeOption = listRef.current?.querySelectorAll<HTMLElement>(\"[role='option']\")[activeIndex];\n    activeOption?.scrollIntoView({ block: \"nearest\" });\n  }, [activeIndex, isVisible]);\n\n  const step = (delta: number) => {\n    const order = options.map((option, index) => ({ option, index })).filter((o) => !o.option.isDisabled);\n    if (order.length === 0) return;\n    const at = order.findIndex((o) => o.index === activeIndex);\n    const next = order[(at + delta + order.length) % order.length]!;\n    setActiveIndex(next.index);\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (effectiveDisabled) return;\n    if (event.key === \"Escape\") {\n      setOpen(false);\n      triggerRef.current?.focus();\n      return;\n    }\n    if (!isVisible && (event.key === \"ArrowDown\" || event.key === \"ArrowUp\" || event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      setOpen(true);\n      return;\n    }\n    if (!isVisible) return;\n    if (event.key === \"Tab\") {\n      setOpen(false);\n      return;\n    }\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n      event.preventDefault();\n      step(event.key === \"ArrowDown\" ? 1 : -1);\n    } else if (event.key === \"Home\" || event.key === \"End\") {\n      event.preventDefault();\n      const pick = event.key === \"Home\" ? enabled[0] : enabled[enabled.length - 1];\n      if (pick) setActiveIndex(options.indexOf(pick));\n    } else if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      const option = options[activeIndex];\n      if (option && !option.isDisabled) commit(option.value);\n    }\n  };\n\n  return (\n    <div className=\"ds-select-root\" ref={rootRef}>\n      <button\n        ref={(node) => {\n          triggerRef.current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        type=\"button\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        aria-expanded={isVisible}\n        aria-controls={isVisible ? listId : undefined}\n        aria-activedescendant={isVisible && options[activeIndex] && !options[activeIndex].isDisabled ? `${listId}-option-${activeIndex}` : undefined}\n        aria-invalid={isInvalid || undefined}\n        disabled={effectiveDisabled}\n        data-size={size}\n        data-placeholder={selected ? undefined : \"\"}\n        className={cx(\"ds-field-skin\", \"ds-select\", className)}\n        onClick={(event) => {\n          onClick?.(event);\n          if (!event.defaultPrevented) setOpen((open) => !open);\n        }}\n        onKeyDown={(event) => {\n          onKeyDown?.(event);\n          if (!event.defaultPrevented) handleKeyDown(event);\n        }}\n        {...rest}\n      >\n        <span className=\"ds-select__value\">{selected ? selected.label : placeholder}</span>\n        <Icon name=\"chevron-down\" size={16} className=\"ds-select__chevron\" />\n      </button>\n      <Popover\n        anchorRef={triggerRef}\n        isOpen={isVisible}\n        matchAnchorWidth\n        panelRef={listRef}\n        id={listId}\n        role=\"listbox\"\n        aria-label={rest[\"aria-label\"] ?? placeholder}\n        className=\"ds-surface-raised ds-select__menu\"\n      >\n        <div onKeyDown={handleKeyDown}>\n          {options.map((option, index) => (\n            <div\n              key={option.value}\n              id={`${listId}-option-${index}`}\n              role=\"option\"\n              aria-selected={option.value === current}\n              aria-disabled={option.isDisabled || undefined}\n              data-active={index === activeIndex || undefined}\n              className=\"ds-select__option\"\n              onMouseEnter={() => !option.isDisabled && setActiveIndex(index)}\n              onClick={() => {\n                if (!option.isDisabled) {\n                  commit(option.value);\n                  triggerRef.current?.focus();\n                }\n              }}\n            >\n              <span className=\"ds-select__option-body\">\n                <span className=\"ds-select__option-label\">{option.label}</span>\n                {option.description && (\n                  <span className=\"ds-select__option-description\">{option.description}</span>\n                )}\n              </span>\n              {option.value === current && <Icon name=\"check\" size={16} />}\n            </div>\n          ))}\n        </div>\n      </Popover>\n    </div>\n  );\n});\n"],"mappings":"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"}

package/dist/components/Select/index.d.cts

@@ -0,0 +1,26 @@
+import { type ButtonHTMLAttributes } from "react";
+import type { FieldSize } from "../Field/index.cjs";
+export interface SelectOption {
+    value: string;
+    label: string;
+    /** Secondary line under the label. */
+    description?: string;
+    isDisabled?: boolean;
+}
+export interface SelectProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "value" | "defaultValue" | "onChange"> {
+    options: SelectOption[];
+    /** Controlled value. Leave undefined to let the select hold its own. */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    placeholder?: string;
+    size?: FieldSize;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+}
+/**
+ * One value out of a known list. Wears the field skin, opens a listbox: arrows
+ * walk the options, Enter commits, Escape closes without changing anything.
+ */
+export declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=index.d.cts.map

package/dist/components/Select/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,oBAAoB,EAC1B,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,oBAAoB,CAAC;AAC5B,OAAO,aAAa,CAAC;AAMrB,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC;IAC5F,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM,2GA4KjB,CAAC"}

package/dist/components/Select/index.d.ts

@@ -0,0 +1,26 @@
+import { type ButtonHTMLAttributes } from "react";
+import type { FieldSize } from "../Field/index.js";
+export interface SelectOption {
+    value: string;
+    label: string;
+    /** Secondary line under the label. */
+    description?: string;
+    isDisabled?: boolean;
+}
+export interface SelectProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "value" | "defaultValue" | "onChange"> {
+    options: SelectOption[];
+    /** Controlled value. Leave undefined to let the select hold its own. */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    placeholder?: string;
+    size?: FieldSize;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+}
+/**
+ * One value out of a known list. Wears the field skin, opens a listbox: arrows
+ * walk the options, Enter commits, Escape closes without changing anything.
+ */
+export declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Select/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,oBAAoB,EAC1B,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,oBAAoB,CAAC;AAC5B,OAAO,aAAa,CAAC;AAMrB,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC;IAC5F,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM,2GA4KjB,CAAC"}

package/dist/components/Select/index.js

@@ -0,0 +1,129 @@
+import { t as e } from "../../chunks/Icon-CGY1FNXT.js";
+/* empty css                          */
+import { Popover as t } from "../Popover/index.js";
+import { forwardRef as n, useCallback as r, useEffect as i, useId as a, useRef as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/Select/index.tsx
+function u(...e) {
+	return e.filter(Boolean).join(" ");
+}
+var d = n(function({ options: n, value: d, defaultValue: f, onValueChange: p, placeholder: m = "Select an option", size: h = "md", isDisabled: g = !1, isInvalid: _ = !1, className: v, disabled: y, onClick: b, onKeyDown: x, ...S }, C) {
+	let [w, T] = s(f ?? ""), E = d ?? w, [D, O] = s(!1), [k, A] = s(0), j = o(null), M = o(null), N = o(null), P = a(), F = g || y, I = D && !F, L = n.find((e) => e.value === E), R = n.filter((e) => !e.isDisabled), z = r((e) => {
+		d === void 0 && T(e), p?.(e), O(!1);
+	}, [p, d]);
+	i(() => {
+		if (!I) return;
+		let e = n.findIndex((e) => e.value === E && !e.isDisabled);
+		A(e < 0 ? n.indexOf(R[0]) : e);
+		let t = (e) => {
+			let t = e.target;
+			!j.current?.contains(t) && !N.current?.contains(t) && O(!1);
+		};
+		return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
+	}, [I]), i(() => {
+		I && (N.current?.querySelectorAll("[role='option']")[k])?.scrollIntoView({ block: "nearest" });
+	}, [k, I]);
+	let B = (e) => {
+		let t = n.map((e, t) => ({
+			option: e,
+			index: t
+		})).filter((e) => !e.option.isDisabled);
+		if (t.length === 0) return;
+		let r = t[(t.findIndex((e) => e.index === k) + e + t.length) % t.length];
+		A(r.index);
+	}, V = (e) => {
+		if (!F) {
+			if (e.key === "Escape") O(!1), M.current?.focus();
+			else if (!I && (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter" || e.key === " ")) e.preventDefault(), O(!0);
+			else if (I) {
+				if (e.key === "Tab") O(!1);
+				else if (e.key === "ArrowDown" || e.key === "ArrowUp") e.preventDefault(), B(e.key === "ArrowDown" ? 1 : -1);
+				else if (e.key === "Home" || e.key === "End") {
+					e.preventDefault();
+					let t = e.key === "Home" ? R[0] : R[R.length - 1];
+					t && A(n.indexOf(t));
+				} else if (e.key === "Enter" || e.key === " ") {
+					e.preventDefault();
+					let t = n[k];
+					t && !t.isDisabled && z(t.value);
+				}
+			}
+		}
+	};
+	return /* @__PURE__ */ l("div", {
+		className: "ds-select-root",
+		ref: j,
+		children: [/* @__PURE__ */ l("button", {
+			ref: (e) => {
+				M.current = e, typeof C == "function" ? C(e) : C && (C.current = e);
+			},
+			type: "button",
+			role: "combobox",
+			"aria-haspopup": "listbox",
+			"aria-expanded": I,
+			"aria-controls": I ? P : void 0,
+			"aria-activedescendant": I && n[k] && !n[k].isDisabled ? `${P}-option-${k}` : void 0,
+			"aria-invalid": _ || void 0,
+			disabled: F,
+			"data-size": h,
+			"data-placeholder": L ? void 0 : "",
+			className: u("ds-field-skin", "ds-select", v),
+			onClick: (e) => {
+				b?.(e), e.defaultPrevented || O((e) => !e);
+			},
+			onKeyDown: (e) => {
+				x?.(e), e.defaultPrevented || V(e);
+			},
+			...S,
+			children: [/* @__PURE__ */ c("span", {
+				className: "ds-select__value",
+				children: L ? L.label : m
+			}), /* @__PURE__ */ c(e, {
+				name: "chevron-down",
+				size: 16,
+				className: "ds-select__chevron"
+			})]
+		}), /* @__PURE__ */ c(t, {
+			anchorRef: M,
+			isOpen: I,
+			matchAnchorWidth: !0,
+			panelRef: N,
+			id: P,
+			role: "listbox",
+			"aria-label": S["aria-label"] ?? m,
+			className: "ds-surface-raised ds-select__menu",
+			children: /* @__PURE__ */ c("div", {
+				onKeyDown: V,
+				children: n.map((t, n) => /* @__PURE__ */ l("div", {
+					id: `${P}-option-${n}`,
+					role: "option",
+					"aria-selected": t.value === E,
+					"aria-disabled": t.isDisabled || void 0,
+					"data-active": n === k || void 0,
+					className: "ds-select__option",
+					onMouseEnter: () => !t.isDisabled && A(n),
+					onClick: () => {
+						t.isDisabled || (z(t.value), M.current?.focus());
+					},
+					children: [/* @__PURE__ */ l("span", {
+						className: "ds-select__option-body",
+						children: [/* @__PURE__ */ c("span", {
+							className: "ds-select__option-label",
+							children: t.label
+						}), t.description && /* @__PURE__ */ c("span", {
+							className: "ds-select__option-description",
+							children: t.description
+						})]
+					}), t.value === E && /* @__PURE__ */ c(e, {
+						name: "check",
+						size: 16
+					})]
+				}, t.value))
+			})
+		})]
+	});
+});
+//#endregion
+export { d as Select };
+
+//# sourceMappingURL=index.js.map

package/dist/components/Select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Icon","cx","parts","Select","forwardRef","rest","internal","setInternal","useState","defaultValue","current","value","isOpen","setOpen","activeIndex","setActiveIndex","rootRef","useRef","triggerRef","listRef","listId","useId","effectiveDisabled","isDisabled","disabled","isVisible","selected","options","option","enabled","commit","useCallback","next","onValueChange","useEffect","index","onPointerDown","target","event","step","order","o","delta","handleKeyDown","pick","node","ref","isInvalid","size","className","onClick","open","onKeyDown","placeholder","Popover"],"sources":["../../../src/components/Select/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ButtonHTMLAttributes,\n} from \"react\";\nimport { Icon } from \"../Icon\";\nimport { Popover } from \"../Popover\";\nimport type { FieldSize } from \"../Field\";\nimport \"../Field/style.css\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nexport interface SelectOption {\n  value: string;\n  label: string;\n  /** Secondary line under the label. */\n  description?: string;\n  isDisabled?: boolean;\n}\n\nexport interface SelectProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"value\" | \"defaultValue\" | \"onChange\"> {\n  options: SelectOption[];\n  /** Controlled value. Leave undefined to let the select hold its own. */\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  placeholder?: string;\n  size?: FieldSize;\n  isDisabled?: boolean;\n  isInvalid?: boolean;\n}\n\n/**\n * One value out of a known list. Wears the field skin, opens a listbox: arrows\n * walk the options, Enter commits, Escape closes without changing anything.\n */\nexport const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select(\n  {\n    options,\n    value,\n    defaultValue,\n    onValueChange,\n    placeholder = \"Select an option\",\n    size = \"md\",\n    isDisabled = false,\n    isInvalid = false,\n    className,\n    disabled,\n    onClick,\n    onKeyDown,\n    ...rest\n  },\n  ref,\n) {\n  const [internal, setInternal] = useState(defaultValue ?? \"\");\n  const current = value ?? internal;\n  const [isOpen, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(0);\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  const triggerRef = useRef<HTMLButtonElement | null>(null);\n  const listRef = useRef<HTMLDivElement | null>(null);\n  const listId = useId();\n  const effectiveDisabled = isDisabled || disabled;\n  const isVisible = isOpen && !effectiveDisabled;\n\n  const selected = options.find((option) => option.value === current);\n  const enabled = options.filter((option) => !option.isDisabled);\n\n  const commit = useCallback(\n    (next: string) => {\n      if (value === undefined) setInternal(next);\n      onValueChange?.(next);\n      setOpen(false);\n    },\n    [onValueChange, value],\n  );\n\n  useEffect(() => {\n    if (!isVisible) return;\n    const index = options.findIndex((option) => option.value === current && !option.isDisabled);\n    setActiveIndex(index < 0 ? options.indexOf(enabled[0]!) : index);\n    const onPointerDown = (event: MouseEvent) => {\n      const target = event.target as Node;\n      if (!rootRef.current?.contains(target) && !listRef.current?.contains(target)) setOpen(false);\n    };\n    document.addEventListener(\"mousedown\", onPointerDown);\n    return () => document.removeEventListener(\"mousedown\", onPointerDown);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isVisible]);\n\n  useEffect(() => {\n    if (!isVisible) return;\n    const activeOption = listRef.current?.querySelectorAll<HTMLElement>(\"[role='option']\")[activeIndex];\n    activeOption?.scrollIntoView({ block: \"nearest\" });\n  }, [activeIndex, isVisible]);\n\n  const step = (delta: number) => {\n    const order = options.map((option, index) => ({ option, index })).filter((o) => !o.option.isDisabled);\n    if (order.length === 0) return;\n    const at = order.findIndex((o) => o.index === activeIndex);\n    const next = order[(at + delta + order.length) % order.length]!;\n    setActiveIndex(next.index);\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (effectiveDisabled) return;\n    if (event.key === \"Escape\") {\n      setOpen(false);\n      triggerRef.current?.focus();\n      return;\n    }\n    if (!isVisible && (event.key === \"ArrowDown\" || event.key === \"ArrowUp\" || event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      setOpen(true);\n      return;\n    }\n    if (!isVisible) return;\n    if (event.key === \"Tab\") {\n      setOpen(false);\n      return;\n    }\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n      event.preventDefault();\n      step(event.key === \"ArrowDown\" ? 1 : -1);\n    } else if (event.key === \"Home\" || event.key === \"End\") {\n      event.preventDefault();\n      const pick = event.key === \"Home\" ? enabled[0] : enabled[enabled.length - 1];\n      if (pick) setActiveIndex(options.indexOf(pick));\n    } else if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      const option = options[activeIndex];\n      if (option && !option.isDisabled) commit(option.value);\n    }\n  };\n\n  return (\n    <div className=\"ds-select-root\" ref={rootRef}>\n      <button\n        ref={(node) => {\n          triggerRef.current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        type=\"button\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        aria-expanded={isVisible}\n        aria-controls={isVisible ? listId : undefined}\n        aria-activedescendant={isVisible && options[activeIndex] && !options[activeIndex].isDisabled ? `${listId}-option-${activeIndex}` : undefined}\n        aria-invalid={isInvalid || undefined}\n        disabled={effectiveDisabled}\n        data-size={size}\n        data-placeholder={selected ? undefined : \"\"}\n        className={cx(\"ds-field-skin\", \"ds-select\", className)}\n        onClick={(event) => {\n          onClick?.(event);\n          if (!event.defaultPrevented) setOpen((open) => !open);\n        }}\n        onKeyDown={(event) => {\n          onKeyDown?.(event);\n          if (!event.defaultPrevented) handleKeyDown(event);\n        }}\n        {...rest}\n      >\n        <span className=\"ds-select__value\">{selected ? selected.label : placeholder}</span>\n        <Icon name=\"chevron-down\" size={16} className=\"ds-select__chevron\" />\n      </button>\n      <Popover\n        anchorRef={triggerRef}\n        isOpen={isVisible}\n        matchAnchorWidth\n        panelRef={listRef}\n        id={listId}\n        role=\"listbox\"\n        aria-label={rest[\"aria-label\"] ?? placeholder}\n        className=\"ds-surface-raised ds-select__menu\"\n      >\n        <div onKeyDown={handleKeyDown}>\n          {options.map((option, index) => (\n            <div\n              key={option.value}\n              id={`${listId}-option-${index}`}\n              role=\"option\"\n              aria-selected={option.value === current}\n              aria-disabled={option.isDisabled || undefined}\n              data-active={index === activeIndex || undefined}\n              className=\"ds-select__option\"\n              onMouseEnter={() => !option.isDisabled && setActiveIndex(index)}\n              onClick={() => {\n                if (!option.isDisabled) {\n                  commit(option.value);\n                  triggerRef.current?.focus();\n                }\n              }}\n            >\n              <span className=\"ds-select__option-body\">\n                <span className=\"ds-select__option-label\">{option.label}</span>\n                {option.description && (\n                  <span className=\"ds-select__option-description\">{option.description}</span>\n                )}\n              </span>\n              {option.value === current && <Icon name=\"check\" size={16} />}\n            </div>\n          ))}\n        </div>\n      </Popover>\n    </div>\n  );\n});\n"],"mappings":"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"}

package/dist/components/Select/style.css

@@ -0,0 +1,88 @@
+@layer components {
+  .ds-select-root {
+    position: relative;
+    inline-size: 100%;
+  }
+
+  .ds-select {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-2);
+    padding: 0 10px;
+    text-align: start;
+    cursor: pointer;
+  }
+
+  .ds-select[data-size="sm"] {
+    block-size: var(--field-height-sm);
+    font-size: var(--field-font-size-sm);
+  }
+
+  .ds-select[data-size="md"] {
+    block-size: var(--field-height-md);
+    font-size: var(--field-font-size-md);
+  }
+
+  .ds-select[data-size="lg"] {
+    block-size: var(--field-height-lg);
+    font-size: var(--field-font-size-md);
+  }
+
+  .ds-select[data-placeholder] .ds-select__value {
+    color: var(--color-text-muted);
+  }
+
+  .ds-select__value {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .ds-select__chevron {
+    flex: none;
+    color: var(--color-text-muted);
+  }
+
+  .ds-select__menu {
+    max-block-size: min(var(--menu-max-height), var(--popover-max-block-size, 100vh));
+    padding: var(--space-1);
+  }
+
+  .ds-select__option {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-2) var(--space-3);
+    border-radius: var(--radius-sm);
+    color: var(--color-text);
+    font-size: var(--font-size-sm);
+    cursor: pointer;
+  }
+
+  .ds-select__option[data-active] {
+    background: var(--field-hover);
+  }
+
+  .ds-select__option[aria-selected="true"] {
+    font-weight: var(--font-weight-semibold);
+  }
+
+  .ds-select__option[aria-disabled="true"] {
+    opacity: 45%;
+    cursor: not-allowed;
+  }
+
+  .ds-select__option-body {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-inline-size: 0;
+    flex: 1;
+  }
+
+  .ds-select__option-description {
+    color: var(--color-text-muted);
+    font-size: var(--font-size-xs);
+  }
+}

package/dist/components/SelectionCard/index.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../Grid/index.cjs");let t=require("react"),n=require("react/jsx-runtime");function r({kind:e,title:t,description:r,children:i,className:a,inputProps:o,inputRef:s}){return(0,n.jsxs)(`label`,{className:[`ds-selection-card`,a].filter(Boolean).join(` `),children:[(0,n.jsx)(`input`,{ref:s,type:e,"data-kind":e,className:`ds-selection-card__control`,...o}),(0,n.jsxs)(`span`,{className:`ds-selection-card__text`,children:[(0,n.jsx)(`span`,{className:`ds-selection-card__title`,children:t}),r&&(0,n.jsx)(`span`,{className:`ds-selection-card__description`,children:r}),i&&(0,n.jsx)(`span`,{className:`ds-selection-card__extra`,children:i})]})]})}var i=(0,t.forwardRef)(function({title:e,description:t,children:i,className:a,...o},s){return(0,n.jsx)(r,{kind:`checkbox`,title:e,description:t,className:a,inputProps:o,inputRef:s,children:i})}),a=(0,t.forwardRef)(function({title:e,description:t,children:i,className:a,...o},s){return(0,n.jsx)(r,{kind:`radio`,title:e,description:t,className:a,inputProps:o,inputRef:s,children:i})});function o({label:t,columns:r=2,children:i}){return(0,n.jsxs)(`fieldset`,{className:`ds-selection-card-group`,children:[(0,n.jsx)(`legend`,{className:`ds-selection-card-group__label`,children:t}),(0,n.jsx)(e.Grid,{columns:r,gap:`sm`,className:`ds-selection-card-group__grid`,children:i})]})}exports.CheckboxCard=i,exports.RadioCard=a,exports.SelectionCardGroup=o;
+//# sourceMappingURL=index.cjs.map

package/dist/components/SelectionCard/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["forwardRef","Grid","require_components_Grid_index","react","react_jsx_runtime","CardBody","className","inputRef","kind","inputProps","title","description","children","CheckboxCard","rest","ref","RadioCard","SelectionCardGroup","label"],"sources":["../../../src/components/SelectionCard/index.tsx"],"sourcesContent":["import { forwardRef, type InputHTMLAttributes, type ReactNode } from \"react\";\nimport { Grid } from \"../Grid\";\nimport \"./style.css\";\n\ninterface SelectionCardBase {\n  /** The commitment, in the user's words. */\n  title: ReactNode;\n  /** One line on what picking this means. Takes nodes, so a chip or a link can sit inline. */\n  description?: ReactNode;\n  /** Extra content under the description — a price, a sample, a badge. */\n  children?: ReactNode;\n}\n\ntype NativeInput = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"type\" | \"size\" | \"children\" | \"title\"\n>;\n\nfunction CardBody({\n  kind,\n  title,\n  description,\n  children,\n  className,\n  inputProps,\n  inputRef,\n}: SelectionCardBase & {\n  kind: \"checkbox\" | \"radio\";\n  className?: string;\n  inputProps: NativeInput;\n  inputRef: React.Ref<HTMLInputElement>;\n}) {\n  return (\n    <label className={[\"ds-selection-card\", className].filter(Boolean).join(\" \")}>\n      <input\n        ref={inputRef}\n        type={kind}\n        data-kind={kind}\n        className=\"ds-selection-card__control\"\n        {...inputProps}\n      />\n      <span className=\"ds-selection-card__text\">\n        <span className=\"ds-selection-card__title\">{title}</span>\n        {description && <span className=\"ds-selection-card__description\">{description}</span>}\n        {children && <span className=\"ds-selection-card__extra\">{children}</span>}\n      </span>\n    </label>\n  );\n}\n\nexport interface CheckboxCardProps extends SelectionCardBase, NativeInput {}\n\n/**\n * A checkbox with room to explain itself. Same 20px box as the bare control —\n * the card is a bigger target, not a different decision.\n */\nexport const CheckboxCard = forwardRef<HTMLInputElement, CheckboxCardProps>(\n  function CheckboxCard({ title, description, children, className, ...rest }, ref) {\n    return (\n      <CardBody\n        kind=\"checkbox\"\n        title={title}\n        description={description}\n        className={className}\n        inputProps={rest}\n        inputRef={ref}\n      >\n        {children}\n      </CardBody>\n    );\n  },\n);\n\nexport interface RadioCardProps extends SelectionCardBase, NativeInput {}\n\n/** One of a set of mutually exclusive options, each with its own explanation. */\nexport const RadioCard = forwardRef<HTMLInputElement, RadioCardProps>(function RadioCard(\n  { title, description, children, className, ...rest },\n  ref,\n) {\n  return (\n    <CardBody\n      kind=\"radio\"\n      title={title}\n      description={description}\n      className={className}\n      inputProps={rest}\n      inputRef={ref}\n    >\n      {children}\n    </CardBody>\n  );\n});\n\nexport interface SelectionCardGroupProps {\n  /** Group label — the question the cards answer. */\n  label: string;\n  /** Cards per row at full width. Steps down inside a narrow container. */\n  columns?: 1 | 2 | 3;\n  children: ReactNode;\n}\n\n/** A grid of selection cards under one legend, spaced by the shared Grid. */\nexport function SelectionCardGroup({ label, columns = 2, children }: SelectionCardGroupProps) {\n  return (\n    <fieldset className=\"ds-selection-card-group\">\n      <legend className=\"ds-selection-card-group__label\">{label}</legend>\n      <Grid columns={columns} gap=\"sm\" className=\"ds-selection-card-group__grid\">\n        {children}\n      </Grid>\n    </fieldset>\n  );\n}\n"],"mappings":"A,8JAkBA,SAASK,EAAS,CAChB,OACA,QACA,cACA,WACA,YACA,aACA,YAMC,CACD,OACE,EAAAD,EAAA,KAAA,CAAC,QAAD,CAAO,UAAW,CAAC,oBAAqBE,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,EAA3E,SAAA,EACE,EAAAF,EAAA,IAAA,CAAC,QAAD,CACE,IAAKG,EACL,KAAMC,EACN,YAAWA,EACX,UAAU,6BACV,GAAIC,CACL,CAAA,GACD,EAAAL,EAAA,KAAA,CAAC,OAAD,CAAM,UAAU,0BAAhB,SAAA,EACE,EAAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,2BAA4B,SAAAM,CAAY,CAAA,EACvDC,IAAe,EAAAP,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,iCAAkC,SAAAO,CAAkB,CAAA,EACnFC,IAAY,EAAAR,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,2BAA4B,UAAe,CAAA,CACpE,CACD,CAAA,CAAA,C,EAEX,CAQA,IAAaS,GAAA,EAAeb,EAAAA,WAAAA,CAC1B,SAAsB,CAAE,QAAO,cAAa,WAAU,YAAW,GAAGc,GAAQ,EAAK,CAC/E,OACE,EAAAV,EAAA,IAAA,CAACC,EAAD,CACE,KAAK,WACE,QACM,cACF,YACX,WAAYS,EACZ,SAAUC,EAET,UACO,CAAA,CAEd,CACF,EAKaC,GAAA,EAAYhB,EAAAA,WAAAA,CAA6C,SACpE,CAAE,QAAO,cAAa,WAAU,YAAW,GAAGc,GAC9C,EACA,CACA,OACE,EAAAV,EAAA,IAAA,CAACC,EAAD,CACE,KAAK,QACE,QACM,cACF,YACX,WAAYS,EACZ,SAAUC,EAET,UACO,CAAA,CAEd,CAAC,EAWD,SAAgBE,EAAmB,CAAE,QAAO,UAAU,EAAG,YAAqC,CAC5F,OACE,EAAAb,EAAA,KAAA,CAAC,WAAD,CAAU,UAAU,0BAApB,SAAA,EACE,EAAAA,EAAA,IAAA,CAAC,SAAD,CAAQ,UAAU,iCAAkC,SAAAc,CAAc,CAAA,GAClE,EAAAd,EAAA,IAAA,CAACH,EAAAA,KAAD,CAAe,UAAS,IAAI,KAAK,UAAU,gCACxC,UACG,CAAA,CACE,C,EAEd,C"}

package/dist/components/SelectionCard/index.d.cts

@@ -0,0 +1,32 @@
+import { type InputHTMLAttributes, type ReactNode } from "react";
+interface SelectionCardBase {
+    /** The commitment, in the user's words. */
+    title: ReactNode;
+    /** One line on what picking this means. Takes nodes, so a chip or a link can sit inline. */
+    description?: ReactNode;
+    /** Extra content under the description — a price, a sample, a badge. */
+    children?: ReactNode;
+}
+type NativeInput = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "children" | "title">;
+export interface CheckboxCardProps extends SelectionCardBase, NativeInput {
+}
+/**
+ * A checkbox with room to explain itself. Same 20px box as the bare control —
+ * the card is a bigger target, not a different decision.
+ */
+export declare const CheckboxCard: import("react").ForwardRefExoticComponent<CheckboxCardProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface RadioCardProps extends SelectionCardBase, NativeInput {
+}
+/** One of a set of mutually exclusive options, each with its own explanation. */
+export declare const RadioCard: import("react").ForwardRefExoticComponent<RadioCardProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface SelectionCardGroupProps {
+    /** Group label — the question the cards answer. */
+    label: string;
+    /** Cards per row at full width. Steps down inside a narrow container. */
+    columns?: 1 | 2 | 3;
+    children: ReactNode;
+}
+/** A grid of selection cards under one legend, spaced by the shared Grid. */
+export declare function SelectionCardGroup({ label, columns, children }: SelectionCardGroupProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.cts.map

package/dist/components/SelectionCard/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/SelectionCard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,mBAAmB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7E,OAAO,aAAa,CAAC;AAErB,UAAU,iBAAiB;IACzB,2CAA2C;IAC3C,KAAK,EAAE,SAAS,CAAC;IACjB,4FAA4F;IAC5F,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,KAAK,WAAW,GAAG,IAAI,CACrB,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,CACvC,CAAC;AAkCF,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB,EAAE,WAAW;CAAG;AAE5E;;;GAGG;AACH,eAAO,MAAM,YAAY,gHAexB,CAAC;AAEF,MAAM,WAAW,cAAe,SAAQ,iBAAiB,EAAE,WAAW;CAAG;AAEzE,iFAAiF;AACjF,eAAO,MAAM,SAAS,6GAgBpB,CAAC;AAEH,MAAM,WAAW,uBAAuB;IACtC,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,6EAA6E;AAC7E,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,OAAW,EAAE,QAAQ,EAAE,EAAE,uBAAuB,+BAS3F"}

package/dist/components/SelectionCard/index.d.ts

@@ -0,0 +1,32 @@
+import { type InputHTMLAttributes, type ReactNode } from "react";
+interface SelectionCardBase {
+    /** The commitment, in the user's words. */
+    title: ReactNode;
+    /** One line on what picking this means. Takes nodes, so a chip or a link can sit inline. */
+    description?: ReactNode;
+    /** Extra content under the description — a price, a sample, a badge. */
+    children?: ReactNode;
+}
+type NativeInput = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "children" | "title">;
+export interface CheckboxCardProps extends SelectionCardBase, NativeInput {
+}
+/**
+ * A checkbox with room to explain itself. Same 20px box as the bare control —
+ * the card is a bigger target, not a different decision.
+ */
+export declare const CheckboxCard: import("react").ForwardRefExoticComponent<CheckboxCardProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface RadioCardProps extends SelectionCardBase, NativeInput {
+}
+/** One of a set of mutually exclusive options, each with its own explanation. */
+export declare const RadioCard: import("react").ForwardRefExoticComponent<RadioCardProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface SelectionCardGroupProps {
+    /** Group label — the question the cards answer. */
+    label: string;
+    /** Cards per row at full width. Steps down inside a narrow container. */
+    columns?: 1 | 2 | 3;
+    children: ReactNode;
+}
+/** A grid of selection cards under one legend, spaced by the shared Grid. */
+export declare function SelectionCardGroup({ label, columns, children }: SelectionCardGroupProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/SelectionCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionCard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,mBAAmB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7E,OAAO,aAAa,CAAC;AAErB,UAAU,iBAAiB;IACzB,2CAA2C;IAC3C,KAAK,EAAE,SAAS,CAAC;IACjB,4FAA4F;IAC5F,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,KAAK,WAAW,GAAG,IAAI,CACrB,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,CACvC,CAAC;AAkCF,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB,EAAE,WAAW;CAAG;AAE5E;;;GAGG;AACH,eAAO,MAAM,YAAY,gHAexB,CAAC;AAEF,MAAM,WAAW,cAAe,SAAQ,iBAAiB,EAAE,WAAW;CAAG;AAEzE,iFAAiF;AACjF,eAAO,MAAM,SAAS,6GAgBpB,CAAC;AAEH,MAAM,WAAW,uBAAuB;IACtC,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,6EAA6E;AAC7E,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,OAAW,EAAE,QAAQ,EAAE,EAAE,uBAAuB,+BAS3F"}

package/dist/components/SelectionCard/index.js

@@ -0,0 +1,71 @@
+import { Grid as e } from "../Grid/index.js";
+import { forwardRef as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/SelectionCard/index.tsx
+function i({ kind: e, title: t, description: i, children: a, className: o, inputProps: s, inputRef: c }) {
+	return /* @__PURE__ */ r("label", {
+		className: ["ds-selection-card", o].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ n("input", {
+			ref: c,
+			type: e,
+			"data-kind": e,
+			className: "ds-selection-card__control",
+			...s
+		}), /* @__PURE__ */ r("span", {
+			className: "ds-selection-card__text",
+			children: [
+				/* @__PURE__ */ n("span", {
+					className: "ds-selection-card__title",
+					children: t
+				}),
+				i && /* @__PURE__ */ n("span", {
+					className: "ds-selection-card__description",
+					children: i
+				}),
+				a && /* @__PURE__ */ n("span", {
+					className: "ds-selection-card__extra",
+					children: a
+				})
+			]
+		})]
+	});
+}
+var a = t(function({ title: e, description: t, children: r, className: a, ...o }, s) {
+	return /* @__PURE__ */ n(i, {
+		kind: "checkbox",
+		title: e,
+		description: t,
+		className: a,
+		inputProps: o,
+		inputRef: s,
+		children: r
+	});
+}), o = t(function({ title: e, description: t, children: r, className: a, ...o }, s) {
+	return /* @__PURE__ */ n(i, {
+		kind: "radio",
+		title: e,
+		description: t,
+		className: a,
+		inputProps: o,
+		inputRef: s,
+		children: r
+	});
+});
+function s({ label: t, columns: i = 2, children: a }) {
+	return /* @__PURE__ */ r("fieldset", {
+		className: "ds-selection-card-group",
+		children: [/* @__PURE__ */ n("legend", {
+			className: "ds-selection-card-group__label",
+			children: t
+		}), /* @__PURE__ */ n(e, {
+			columns: i,
+			gap: "sm",
+			className: "ds-selection-card-group__grid",
+			children: a
+		})]
+	});
+}
+//#endregion
+export { a as CheckboxCard, o as RadioCard, s as SelectionCardGroup };
+
+//# sourceMappingURL=index.js.map

package/dist/components/SelectionCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["CardBody","className","inputRef","kind","inputProps","title","description","children","CheckboxCard","forwardRef","rest","ref","RadioCard","SelectionCardGroup","label","Grid"],"sources":["../../../src/components/SelectionCard/index.tsx"],"sourcesContent":["import { forwardRef, type InputHTMLAttributes, type ReactNode } from \"react\";\nimport { Grid } from \"../Grid\";\nimport \"./style.css\";\n\ninterface SelectionCardBase {\n  /** The commitment, in the user's words. */\n  title: ReactNode;\n  /** One line on what picking this means. Takes nodes, so a chip or a link can sit inline. */\n  description?: ReactNode;\n  /** Extra content under the description — a price, a sample, a badge. */\n  children?: ReactNode;\n}\n\ntype NativeInput = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"type\" | \"size\" | \"children\" | \"title\"\n>;\n\nfunction CardBody({\n  kind,\n  title,\n  description,\n  children,\n  className,\n  inputProps,\n  inputRef,\n}: SelectionCardBase & {\n  kind: \"checkbox\" | \"radio\";\n  className?: string;\n  inputProps: NativeInput;\n  inputRef: React.Ref<HTMLInputElement>;\n}) {\n  return (\n    <label className={[\"ds-selection-card\", className].filter(Boolean).join(\" \")}>\n      <input\n        ref={inputRef}\n        type={kind}\n        data-kind={kind}\n        className=\"ds-selection-card__control\"\n        {...inputProps}\n      />\n      <span className=\"ds-selection-card__text\">\n        <span className=\"ds-selection-card__title\">{title}</span>\n        {description && <span className=\"ds-selection-card__description\">{description}</span>}\n        {children && <span className=\"ds-selection-card__extra\">{children}</span>}\n      </span>\n    </label>\n  );\n}\n\nexport interface CheckboxCardProps extends SelectionCardBase, NativeInput {}\n\n/**\n * A checkbox with room to explain itself. Same 20px box as the bare control —\n * the card is a bigger target, not a different decision.\n */\nexport const CheckboxCard = forwardRef<HTMLInputElement, CheckboxCardProps>(\n  function CheckboxCard({ title, description, children, className, ...rest }, ref) {\n    return (\n      <CardBody\n        kind=\"checkbox\"\n        title={title}\n        description={description}\n        className={className}\n        inputProps={rest}\n        inputRef={ref}\n      >\n        {children}\n      </CardBody>\n    );\n  },\n);\n\nexport interface RadioCardProps extends SelectionCardBase, NativeInput {}\n\n/** One of a set of mutually exclusive options, each with its own explanation. */\nexport const RadioCard = forwardRef<HTMLInputElement, RadioCardProps>(function RadioCard(\n  { title, description, children, className, ...rest },\n  ref,\n) {\n  return (\n    <CardBody\n      kind=\"radio\"\n      title={title}\n      description={description}\n      className={className}\n      inputProps={rest}\n      inputRef={ref}\n    >\n      {children}\n    </CardBody>\n  );\n});\n\nexport interface SelectionCardGroupProps {\n  /** Group label — the question the cards answer. */\n  label: string;\n  /** Cards per row at full width. Steps down inside a narrow container. */\n  columns?: 1 | 2 | 3;\n  children: ReactNode;\n}\n\n/** A grid of selection cards under one legend, spaced by the shared Grid. */\nexport function SelectionCardGroup({ label, columns = 2, children }: SelectionCardGroupProps) {\n  return (\n    <fieldset className=\"ds-selection-card-group\">\n      <legend className=\"ds-selection-card-group__label\">{label}</legend>\n      <Grid columns={columns} gap=\"sm\" className=\"ds-selection-card-group__grid\">\n        {children}\n      </Grid>\n    </fieldset>\n  );\n}\n"],"mappings":";;;;AAkBA,SAASA,EAAS,EAChB,SACA,UACA,gBACA,aACA,cACA,eACA,eAMC;CACD,OACE,kBAAC,SAAD;EAAO,WAAW,CAAC,qBAAqBC,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAA3E,UAAA,CACE,kBAAC,SAAD;GACE,KAAKC;GACL,MAAMC;GACN,aAAWA;GACX,WAAU;GACV,GAAIC;EACL,CAAA,GACD,kBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA;IACE,kBAAC,QAAD;KAAM,WAAU;KAA4B,UAAAC;IAAY,CAAA;IACvDC,KAAe,kBAAC,QAAD;KAAM,WAAU;KAAkC,UAAAA;IAAkB,CAAA;IACnFC,KAAY,kBAAC,QAAD;KAAM,WAAU;KAA4B;IAAe,CAAA;GACpE;EACD,CAAA,CAAA;;AAEX;AAQA,IAAaC,IAAeC,EAC1B,SAAsB,EAAE,UAAO,gBAAa,aAAU,cAAW,GAAGC,KAAQ,GAAK;CAC/E,OACE,kBAACV,GAAD;EACE,MAAK;EACE;EACM;EACF;EACX,YAAYU;EACZ,UAAUC;EAET;CACO,CAAA;AAEd,CACF,GAKaC,IAAYH,EAA6C,SACpE,EAAE,UAAO,gBAAa,aAAU,cAAW,GAAGC,KAC9C,GACA;CACA,OACE,kBAACV,GAAD;EACE,MAAK;EACE;EACM;EACF;EACX,YAAYU;EACZ,UAAUC;EAET;CACO,CAAA;AAEd,CAAC;AAWD,SAAgBE,EAAmB,EAAE,UAAO,aAAU,GAAG,eAAqC;CAC5F,OACE,kBAAC,YAAD;EAAU,WAAU;EAApB,UAAA,CACE,kBAAC,UAAD;GAAQ,WAAU;GAAkC,UAAAC;EAAc,CAAA,GAClE,kBAACC,GAAD;GAAe;GAAS,KAAI;GAAK,WAAU;GACxC;EACG,CAAA,CACE;;AAEd"}