@diwauhris/ui 1.0.0

package/lib/index19.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index19.cjs","names":[],"sources":["../src/ui-library/gallery/select/Select.tsx"],"sourcesContent":["/**\n * Select — Design System Component\n *\n * A single-value selection control. Wraps the native <select> element\n * with design-system styling. Accessible by default — keyboard and\n * screen-reader behavior is inherited from the browser.\n *\n * A custom dropdown (non-native) is NOT used here because:\n *   - Native <select> provides full keyboard/AT support at zero cost.\n *   - Custom dropdowns require significant ARIA authoring to match\n *     native behavior, and frequently regress in edge cases.\n *   - For searchable/multi-select use cases, use Combobox (Phase 3).\n *\n * The label is NOT included. The consuming feature pairs a <label>.\n */\n\nimport { ChevronDown } from 'lucide-react';\nimport {\n  type FieldStatus,\n  FIELD_STATUS_RING_DIRECT,\n  FIELD_HELPER_COLOR,\n} from '../shared/fieldStatus';\n\nexport type SelectStatus = FieldStatus;\n\nexport interface SelectOption {\n  value: string;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface SelectGroup {\n  group: string;\n  options: SelectOption[];\n}\n\nexport type SelectItem = SelectOption | SelectGroup;\n\nexport interface SelectProps extends Omit<React.ComponentProps<'select'>, 'children'> {\n  /** Flat options or grouped options */\n  items: SelectItem[];\n  /** Placeholder option shown when no value is selected */\n  placeholder?: string;\n  status?: SelectStatus;\n  helper?: string;\n}\n\n// ── Helpers ───────────────────────────────────────────────────────────────────\n\nfunction isGroup(item: SelectItem): item is SelectGroup {\n  return 'group' in item;\n}\n\n// ── Style maps ────────────────────────────────────────────────────────────────\n// STATUS_CLASS and HELPER_CLASS use FIELD_STATUS_RING_DIRECT / FIELD_HELPER_COLOR\n// from shared/fieldStatus — same semantic mapping as Input and Textarea.\n\n// ── Component ─────────────────────────────────────────────────────────────────\n\nexport function Select({\n  items,\n  placeholder,\n  status = 'default',\n  helper,\n  disabled,\n  className = '',\n  ...props\n}: SelectProps) {\n  return (\n    <div className=\"w-full\">\n      <div className=\"relative\">\n        <select\n          disabled={disabled}\n          className={[\n            'w-full appearance-none rounded-md border bg-white py-2.5 pl-4 pr-10 text-sm font-medium text-slate-900 outline-none transition',\n            FIELD_STATUS_RING_DIRECT[status],\n            disabled ? 'cursor-not-allowed bg-slate-50 opacity-60' : 'cursor-pointer',\n            className,\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          {...props}\n        >\n          {placeholder && (\n            <option value=\"\" disabled>\n              {placeholder}\n            </option>\n          )}\n\n          {items.map((item) =>\n            isGroup(item) ? (\n              <optgroup key={item.group} label={item.group}>\n                {item.options.map((opt) => (\n                  <option key={opt.value} value={opt.value} disabled={opt.disabled}>\n                    {opt.label}\n                  </option>\n                ))}\n              </optgroup>\n            ) : (\n              <option key={item.value} value={item.value} disabled={item.disabled}>\n                {item.label}\n              </option>\n            ),\n          )}\n        </select>\n\n        {/* Custom caret — purely decorative */}\n        <span\n          className=\"pointer-events-none absolute right-3.5 top-1/2 -translate-y-1/2 text-slate-400\"\n          aria-hidden=\"true\"\n        >\n          <ChevronDown size={14} />\n        </span>\n      </div>\n\n      {helper && (\n        <p className={`mt-1.5 text-xs font-medium ${FIELD_HELPER_COLOR[status]}`}>{helper}</p>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAiDA,SAAS,QAAQ,MAAuC;CACtD,OAAO,WAAW;AACpB;AAQA,SAAgB,OAAO,EACrB,OACA,aACA,SAAS,WACT,QACA,UACA,YAAY,IACZ,GAAG,SACW;CACd,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,UAAD;IACY;IACV,WAAW;KACT;KACA,oBAAA,yBAAyB;KACzB,WAAW,8CAA8C;KACzD;IACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;IACX,GAAI;IAVN,UAAA,CAYG,eACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;KAAQ,OAAM;KAAG,UAAA;KACd,UAAA;IACK,CAAA,GAGT,MAAM,KAAK,SACV,QAAQ,IAAI,IACV,iBAAA,GAAA,kBAAA,IAAA,CAAC,YAAD;KAA2B,OAAO,KAAK;KACpC,UAAA,KAAK,QAAQ,KAAK,QACjB,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;MAAwB,OAAO,IAAI;MAAO,UAAU,IAAI;MACrD,UAAA,IAAI;KACC,GAFK,IAAI,KAET,CACT;IACO,GANK,KAAK,KAMV,IAEV,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;KAAyB,OAAO,KAAK;KAAO,UAAU,KAAK;KACxD,UAAA,KAAK;IACA,GAFK,KAAK,KAEV,CAEZ,CACM;GAGR,CAAA,GAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IACE,WAAU;IACV,eAAY;IAEZ,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAA,aAAD,EAAa,MAAM,GAAK,CAAA;GACpB,CAAA,CACH;EAEJ,CAAA,GAAA,UACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;GAAG,WAAW,8BAA8B,oBAAA,mBAAmB;GAAY,UAAA;EAAU,CAAA,CAEpF;;AAET"}

package/lib/index19.mjs

@@ -0,0 +1,67 @@
+import { FIELD_HELPER_COLOR, FIELD_STATUS_RING_DIRECT } from "./index16.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+//#region src/ui-library/gallery/select/Select.tsx
+/**
+* Select — Design System Component
+*
+* A single-value selection control. Wraps the native <select> element
+* with design-system styling. Accessible by default — keyboard and
+* screen-reader behavior is inherited from the browser.
+*
+* A custom dropdown (non-native) is NOT used here because:
+*   - Native <select> provides full keyboard/AT support at zero cost.
+*   - Custom dropdowns require significant ARIA authoring to match
+*     native behavior, and frequently regress in edge cases.
+*   - For searchable/multi-select use cases, use Combobox (Phase 3).
+*
+* The label is NOT included. The consuming feature pairs a <label>.
+*/
+function isGroup(item) {
+	return "group" in item;
+}
+function Select({ items, placeholder, status = "default", helper, disabled, className = "", ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "w-full",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative",
+			children: [/* @__PURE__ */ jsxs("select", {
+				disabled,
+				className: [
+					"w-full appearance-none rounded-md border bg-white py-2.5 pl-4 pr-10 text-sm font-medium text-slate-900 outline-none transition",
+					FIELD_STATUS_RING_DIRECT[status],
+					disabled ? "cursor-not-allowed bg-slate-50 opacity-60" : "cursor-pointer",
+					className
+				].filter(Boolean).join(" "),
+				...props,
+				children: [placeholder && /* @__PURE__ */ jsx("option", {
+					value: "",
+					disabled: true,
+					children: placeholder
+				}), items.map((item) => isGroup(item) ? /* @__PURE__ */ jsx("optgroup", {
+					label: item.group,
+					children: item.options.map((opt) => /* @__PURE__ */ jsx("option", {
+						value: opt.value,
+						disabled: opt.disabled,
+						children: opt.label
+					}, opt.value))
+				}, item.group) : /* @__PURE__ */ jsx("option", {
+					value: item.value,
+					disabled: item.disabled,
+					children: item.label
+				}, item.value))]
+			}), /* @__PURE__ */ jsx("span", {
+				className: "pointer-events-none absolute right-3.5 top-1/2 -translate-y-1/2 text-slate-400",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx(ChevronDown, { size: 14 })
+			})]
+		}), helper && /* @__PURE__ */ jsx("p", {
+			className: `mt-1.5 text-xs font-medium ${FIELD_HELPER_COLOR[status]}`,
+			children: helper
+		})]
+	});
+}
+//#endregion
+export { Select };
+
+//# sourceMappingURL=index19.mjs.map

package/lib/index19.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index19.mjs","names":[],"sources":["../src/ui-library/gallery/select/Select.tsx"],"sourcesContent":["/**\n * Select — Design System Component\n *\n * A single-value selection control. Wraps the native <select> element\n * with design-system styling. Accessible by default — keyboard and\n * screen-reader behavior is inherited from the browser.\n *\n * A custom dropdown (non-native) is NOT used here because:\n *   - Native <select> provides full keyboard/AT support at zero cost.\n *   - Custom dropdowns require significant ARIA authoring to match\n *     native behavior, and frequently regress in edge cases.\n *   - For searchable/multi-select use cases, use Combobox (Phase 3).\n *\n * The label is NOT included. The consuming feature pairs a <label>.\n */\n\nimport { ChevronDown } from 'lucide-react';\nimport {\n  type FieldStatus,\n  FIELD_STATUS_RING_DIRECT,\n  FIELD_HELPER_COLOR,\n} from '../shared/fieldStatus';\n\nexport type SelectStatus = FieldStatus;\n\nexport interface SelectOption {\n  value: string;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface SelectGroup {\n  group: string;\n  options: SelectOption[];\n}\n\nexport type SelectItem = SelectOption | SelectGroup;\n\nexport interface SelectProps extends Omit<React.ComponentProps<'select'>, 'children'> {\n  /** Flat options or grouped options */\n  items: SelectItem[];\n  /** Placeholder option shown when no value is selected */\n  placeholder?: string;\n  status?: SelectStatus;\n  helper?: string;\n}\n\n// ── Helpers ───────────────────────────────────────────────────────────────────\n\nfunction isGroup(item: SelectItem): item is SelectGroup {\n  return 'group' in item;\n}\n\n// ── Style maps ────────────────────────────────────────────────────────────────\n// STATUS_CLASS and HELPER_CLASS use FIELD_STATUS_RING_DIRECT / FIELD_HELPER_COLOR\n// from shared/fieldStatus — same semantic mapping as Input and Textarea.\n\n// ── Component ─────────────────────────────────────────────────────────────────\n\nexport function Select({\n  items,\n  placeholder,\n  status = 'default',\n  helper,\n  disabled,\n  className = '',\n  ...props\n}: SelectProps) {\n  return (\n    <div className=\"w-full\">\n      <div className=\"relative\">\n        <select\n          disabled={disabled}\n          className={[\n            'w-full appearance-none rounded-md border bg-white py-2.5 pl-4 pr-10 text-sm font-medium text-slate-900 outline-none transition',\n            FIELD_STATUS_RING_DIRECT[status],\n            disabled ? 'cursor-not-allowed bg-slate-50 opacity-60' : 'cursor-pointer',\n            className,\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          {...props}\n        >\n          {placeholder && (\n            <option value=\"\" disabled>\n              {placeholder}\n            </option>\n          )}\n\n          {items.map((item) =>\n            isGroup(item) ? (\n              <optgroup key={item.group} label={item.group}>\n                {item.options.map((opt) => (\n                  <option key={opt.value} value={opt.value} disabled={opt.disabled}>\n                    {opt.label}\n                  </option>\n                ))}\n              </optgroup>\n            ) : (\n              <option key={item.value} value={item.value} disabled={item.disabled}>\n                {item.label}\n              </option>\n            ),\n          )}\n        </select>\n\n        {/* Custom caret — purely decorative */}\n        <span\n          className=\"pointer-events-none absolute right-3.5 top-1/2 -translate-y-1/2 text-slate-400\"\n          aria-hidden=\"true\"\n        >\n          <ChevronDown size={14} />\n        </span>\n      </div>\n\n      {helper && (\n        <p className={`mt-1.5 text-xs font-medium ${FIELD_HELPER_COLOR[status]}`}>{helper}</p>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAiDA,SAAS,QAAQ,MAAuC;CACtD,OAAO,WAAW;AACpB;AAQA,SAAgB,OAAO,EACrB,OACA,aACA,SAAS,WACT,QACA,UACA,YAAY,IACZ,GAAG,SACW;CACd,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,qBAAC,UAAD;IACY;IACV,WAAW;KACT;KACA,yBAAyB;KACzB,WAAW,8CAA8C;KACzD;IACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;IACX,GAAI;IAVN,UAAA,CAYG,eACC,oBAAC,UAAD;KAAQ,OAAM;KAAG,UAAA;KACd,UAAA;IACK,CAAA,GAGT,MAAM,KAAK,SACV,QAAQ,IAAI,IACV,oBAAC,YAAD;KAA2B,OAAO,KAAK;KACpC,UAAA,KAAK,QAAQ,KAAK,QACjB,oBAAC,UAAD;MAAwB,OAAO,IAAI;MAAO,UAAU,IAAI;MACrD,UAAA,IAAI;KACC,GAFK,IAAI,KAET,CACT;IACO,GANK,KAAK,KAMV,IAEV,oBAAC,UAAD;KAAyB,OAAO,KAAK;KAAO,UAAU,KAAK;KACxD,UAAA,KAAK;IACA,GAFK,KAAK,KAEV,CAEZ,CACM;GAGR,CAAA,GAAA,oBAAC,QAAD;IACE,WAAU;IACV,eAAY;IAEZ,UAAA,oBAAC,aAAD,EAAa,MAAM,GAAK,CAAA;GACpB,CAAA,CACH;EAEJ,CAAA,GAAA,UACC,oBAAC,KAAD;GAAG,WAAW,8BAA8B,mBAAmB;GAAY,UAAA;EAAU,CAAA,CAEpF;;AAET"}

package/lib/index2.cjs

@@ -0,0 +1,33 @@
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule || !__hasOwnProp.call(mod, "default") ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
+exports.__exportAll = __exportAll;
+exports.__toESM = __toESM;

package/lib/index2.mjs

@@ -0,0 +1,13 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+export { __exportAll };

package/lib/index20.cjs

@@ -0,0 +1,79 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let lucide_react = require("lucide-react");
+//#region src/ui-library/gallery/checkbox/Checkbox.tsx
+/**
+* Checkbox — Design System Component
+*
+* A binary or indeterminate selection control with an optional label.
+* The label is composed inline here because the checkbox + label unit
+* is so consistently used together that separating them adds no value.
+*
+* States: unchecked | checked | indeterminate | disabled | error
+*/
+function Checkbox({ label, description, indeterminate = false, error = false, helper, disabled, checked, id: externalId, className = "", ...props }) {
+	const generatedId = (0, react.useId)();
+	const id = externalId ?? generatedId;
+	const attachIndeterminate = (el) => {
+		if (el) el.indeterminate = indeterminate;
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: `flex flex-col gap-1 ${className}`,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+			htmlFor: id,
+			className: `group inline-flex cursor-pointer items-start gap-2.5 ${disabled ? "cursor-not-allowed opacity-60" : ""}`,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "relative mt-0.5 shrink-0",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						ref: attachIndeterminate,
+						id,
+						type: "checkbox",
+						checked,
+						disabled,
+						"aria-invalid": error || void 0,
+						className: "peer sr-only",
+						...props
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						"aria-hidden": "true",
+						className: [
+							"h-[18px] w-[18px] rounded border-2 transition-all duration-100",
+							"peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1",
+							error ? "border-rose-400 peer-checked:bg-rose-500 peer-checked:border-rose-500 peer-focus-visible:ring-rose-200" : "border-slate-300 peer-checked:bg-brand-blue peer-checked:border-brand-blue peer-focus-visible:ring-brand-blue/30",
+							indeterminate && !error && "bg-brand-blue border-brand-blue",
+							indeterminate && error && "bg-rose-500 border-rose-500"
+						].filter(Boolean).join(" ")
+					}),
+					indeterminate ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Minus, {
+						size: 11,
+						strokeWidth: 3,
+						"aria-hidden": "true",
+						className: "pointer-events-none absolute inset-0 m-auto text-white"
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, {
+						size: 11,
+						strokeWidth: 3,
+						"aria-hidden": "true",
+						className: "pointer-events-none absolute inset-0 m-auto text-white opacity-0 peer-checked:opacity-100 transition-opacity duration-100"
+					})
+				]
+			}), (label || description) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "min-w-0",
+				children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "block text-sm font-semibold text-slate-800",
+					children: label
+				}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "block text-xs font-medium text-slate-400 leading-relaxed",
+					children: description
+				})]
+			})]
+		}), helper && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: `pl-7 text-xs font-medium ${error ? "text-rose-500" : "text-slate-400"}`,
+			children: helper
+		})]
+	});
+}
+//#endregion
+exports.Checkbox = Checkbox;
+
+//# sourceMappingURL=index20.cjs.map

package/lib/index20.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index20.cjs","names":[],"sources":["../src/ui-library/gallery/checkbox/Checkbox.tsx"],"sourcesContent":["/**\n * Checkbox — Design System Component\n *\n * A binary or indeterminate selection control with an optional label.\n * The label is composed inline here because the checkbox + label unit\n * is so consistently used together that separating them adds no value.\n *\n * States: unchecked | checked | indeterminate | disabled | error\n */\n\nimport { Check, Minus } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { useId } from 'react';\n\nexport interface CheckboxProps\n  extends Omit<React.ComponentProps<'input'>, 'type' | 'size'> {\n  /** Visible label next to the checkbox */\n  label?: ReactNode;\n  /** Description line below the label */\n  description?: string;\n  /** Indeterminate state (partial selection) */\n  indeterminate?: boolean;\n  /** Visual error state */\n  error?: boolean;\n  /** Error message shown below */\n  helper?: string;\n}\n\nexport function Checkbox({\n  label,\n  description,\n  indeterminate = false,\n  error = false,\n  helper,\n  disabled,\n  checked,\n  id: externalId,\n  className = '',\n  ...props\n}: CheckboxProps) {\n  const generatedId = useId();\n  const id = externalId ?? generatedId;\n\n  // Attach indeterminate via callback ref — it's not a valid HTML attribute\n  const attachIndeterminate = (el: HTMLInputElement | null) => {\n    if (el) el.indeterminate = indeterminate;\n  };\n\n  return (\n    <div className={`flex flex-col gap-1 ${className}`}>\n      <label\n        htmlFor={id}\n        className={`group inline-flex cursor-pointer items-start gap-2.5 ${disabled ? 'cursor-not-allowed opacity-60' : ''}`}\n      >\n        {/* Custom checkbox visual */}\n        <div className=\"relative mt-0.5 shrink-0\">\n          <input\n            ref={attachIndeterminate}\n            id={id}\n            type=\"checkbox\"\n            checked={checked}\n            disabled={disabled}\n            aria-invalid={error || undefined}\n            className=\"peer sr-only\"\n            {...props}\n          />\n          {/* Box background — direct sibling of peer input */}\n          <div\n            aria-hidden=\"true\"\n            className={[\n              'h-[18px] w-[18px] rounded border-2 transition-all duration-100',\n              'peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1',\n              error\n                ? 'border-rose-400 peer-checked:bg-rose-500 peer-checked:border-rose-500 peer-focus-visible:ring-rose-200'\n                : 'border-slate-300 peer-checked:bg-brand-blue peer-checked:border-brand-blue peer-focus-visible:ring-brand-blue/30',\n              indeterminate && !error && 'bg-brand-blue border-brand-blue',\n              indeterminate && error  && 'bg-rose-500 border-rose-500',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n          />\n          {/* Icon — direct sibling of peer input, positioned over the box */}\n          {indeterminate ? (\n            <Minus\n              size={11}\n              strokeWidth={3}\n              aria-hidden=\"true\"\n              className=\"pointer-events-none absolute inset-0 m-auto text-white\"\n            />\n          ) : (\n            <Check\n              size={11}\n              strokeWidth={3}\n              aria-hidden=\"true\"\n              className=\"pointer-events-none absolute inset-0 m-auto text-white opacity-0 peer-checked:opacity-100 transition-opacity duration-100\"\n            />\n          )}\n        </div>\n\n        {/* Label + description */}\n        {(label || description) && (\n          <div className=\"min-w-0\">\n            {label && (\n              <span className=\"block text-sm font-semibold text-slate-800\">\n                {label}\n              </span>\n            )}\n            {description && (\n              <span className=\"block text-xs font-medium text-slate-400 leading-relaxed\">\n                {description}\n              </span>\n            )}\n          </div>\n        )}\n      </label>\n\n      {helper && (\n        <p className={`pl-7 text-xs font-medium ${error ? 'text-rose-500' : 'text-slate-400'}`}>\n          {helper}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AA4BA,SAAgB,SAAS,EACvB,OACA,aACA,gBAAgB,OAChB,QAAQ,OACR,QACA,UACA,SACA,IAAI,YACJ,YAAY,IACZ,GAAG,SACa;CAChB,MAAM,eAAA,GAAc,MAAA,MAAA,CAAM;CAC1B,MAAM,KAAK,cAAc;CAGzB,MAAM,uBAAuB,OAAgC;EAC3D,IAAI,IAAI,GAAG,gBAAgB;CAC7B;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAW,uBAAuB;EAAvC,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,SAAD;GACE,SAAS;GACT,WAAW,wDAAwD,WAAW,kCAAkC;GAFlH,UAAA,CAKE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;MACE,KAAK;MACD;MACJ,MAAK;MACI;MACC;MACV,gBAAc,SAAS,KAAA;MACvB,WAAU;MACV,GAAI;KACL,CAAA;KAED,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;MACE,eAAY;MACZ,WAAW;OACT;OACA;OACA,QACI,2GACA;OACJ,iBAAiB,CAAC,SAAS;OAC3B,iBAAiB,SAAU;MAC7B,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;KACZ,CAAA;KAEA,gBACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAA,OAAD;MACE,MAAM;MACN,aAAa;MACb,eAAY;MACZ,WAAU;KACX,CAAA,IAED,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAA,OAAD;MACE,MAAM;MACN,aAAa;MACb,eAAY;MACZ,WAAU;KACX,CAAA;IAEA;GAGH,CAAA,IAAA,SAAS,gBACT,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,SACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;KAAM,WAAU;KACb,UAAA;IACG,CAAA,GAEP,eACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;KAAM,WAAU;KACb,UAAA;IACG,CAAA,CAEL;GAEF,CAAA,CAAA;EAEN,CAAA,GAAA,UACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;GAAG,WAAW,4BAA4B,QAAQ,kBAAkB;GACjE,UAAA;EACA,CAAA,CAEF;;AAET"}

package/lib/index20.mjs

@@ -0,0 +1,79 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { Check, Minus } from "lucide-react";
+//#region src/ui-library/gallery/checkbox/Checkbox.tsx
+/**
+* Checkbox — Design System Component
+*
+* A binary or indeterminate selection control with an optional label.
+* The label is composed inline here because the checkbox + label unit
+* is so consistently used together that separating them adds no value.
+*
+* States: unchecked | checked | indeterminate | disabled | error
+*/
+function Checkbox({ label, description, indeterminate = false, error = false, helper, disabled, checked, id: externalId, className = "", ...props }) {
+	const generatedId = useId();
+	const id = externalId ?? generatedId;
+	const attachIndeterminate = (el) => {
+		if (el) el.indeterminate = indeterminate;
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: `flex flex-col gap-1 ${className}`,
+		children: [/* @__PURE__ */ jsxs("label", {
+			htmlFor: id,
+			className: `group inline-flex cursor-pointer items-start gap-2.5 ${disabled ? "cursor-not-allowed opacity-60" : ""}`,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "relative mt-0.5 shrink-0",
+				children: [
+					/* @__PURE__ */ jsx("input", {
+						ref: attachIndeterminate,
+						id,
+						type: "checkbox",
+						checked,
+						disabled,
+						"aria-invalid": error || void 0,
+						className: "peer sr-only",
+						...props
+					}),
+					/* @__PURE__ */ jsx("div", {
+						"aria-hidden": "true",
+						className: [
+							"h-[18px] w-[18px] rounded border-2 transition-all duration-100",
+							"peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1",
+							error ? "border-rose-400 peer-checked:bg-rose-500 peer-checked:border-rose-500 peer-focus-visible:ring-rose-200" : "border-slate-300 peer-checked:bg-brand-blue peer-checked:border-brand-blue peer-focus-visible:ring-brand-blue/30",
+							indeterminate && !error && "bg-brand-blue border-brand-blue",
+							indeterminate && error && "bg-rose-500 border-rose-500"
+						].filter(Boolean).join(" ")
+					}),
+					indeterminate ? /* @__PURE__ */ jsx(Minus, {
+						size: 11,
+						strokeWidth: 3,
+						"aria-hidden": "true",
+						className: "pointer-events-none absolute inset-0 m-auto text-white"
+					}) : /* @__PURE__ */ jsx(Check, {
+						size: 11,
+						strokeWidth: 3,
+						"aria-hidden": "true",
+						className: "pointer-events-none absolute inset-0 m-auto text-white opacity-0 peer-checked:opacity-100 transition-opacity duration-100"
+					})
+				]
+			}), (label || description) && /* @__PURE__ */ jsxs("div", {
+				className: "min-w-0",
+				children: [label && /* @__PURE__ */ jsx("span", {
+					className: "block text-sm font-semibold text-slate-800",
+					children: label
+				}), description && /* @__PURE__ */ jsx("span", {
+					className: "block text-xs font-medium text-slate-400 leading-relaxed",
+					children: description
+				})]
+			})]
+		}), helper && /* @__PURE__ */ jsx("p", {
+			className: `pl-7 text-xs font-medium ${error ? "text-rose-500" : "text-slate-400"}`,
+			children: helper
+		})]
+	});
+}
+//#endregion
+export { Checkbox };
+
+//# sourceMappingURL=index20.mjs.map

package/lib/index20.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index20.mjs","names":[],"sources":["../src/ui-library/gallery/checkbox/Checkbox.tsx"],"sourcesContent":["/**\n * Checkbox — Design System Component\n *\n * A binary or indeterminate selection control with an optional label.\n * The label is composed inline here because the checkbox + label unit\n * is so consistently used together that separating them adds no value.\n *\n * States: unchecked | checked | indeterminate | disabled | error\n */\n\nimport { Check, Minus } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { useId } from 'react';\n\nexport interface CheckboxProps\n  extends Omit<React.ComponentProps<'input'>, 'type' | 'size'> {\n  /** Visible label next to the checkbox */\n  label?: ReactNode;\n  /** Description line below the label */\n  description?: string;\n  /** Indeterminate state (partial selection) */\n  indeterminate?: boolean;\n  /** Visual error state */\n  error?: boolean;\n  /** Error message shown below */\n  helper?: string;\n}\n\nexport function Checkbox({\n  label,\n  description,\n  indeterminate = false,\n  error = false,\n  helper,\n  disabled,\n  checked,\n  id: externalId,\n  className = '',\n  ...props\n}: CheckboxProps) {\n  const generatedId = useId();\n  const id = externalId ?? generatedId;\n\n  // Attach indeterminate via callback ref — it's not a valid HTML attribute\n  const attachIndeterminate = (el: HTMLInputElement | null) => {\n    if (el) el.indeterminate = indeterminate;\n  };\n\n  return (\n    <div className={`flex flex-col gap-1 ${className}`}>\n      <label\n        htmlFor={id}\n        className={`group inline-flex cursor-pointer items-start gap-2.5 ${disabled ? 'cursor-not-allowed opacity-60' : ''}`}\n      >\n        {/* Custom checkbox visual */}\n        <div className=\"relative mt-0.5 shrink-0\">\n          <input\n            ref={attachIndeterminate}\n            id={id}\n            type=\"checkbox\"\n            checked={checked}\n            disabled={disabled}\n            aria-invalid={error || undefined}\n            className=\"peer sr-only\"\n            {...props}\n          />\n          {/* Box background — direct sibling of peer input */}\n          <div\n            aria-hidden=\"true\"\n            className={[\n              'h-[18px] w-[18px] rounded border-2 transition-all duration-100',\n              'peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1',\n              error\n                ? 'border-rose-400 peer-checked:bg-rose-500 peer-checked:border-rose-500 peer-focus-visible:ring-rose-200'\n                : 'border-slate-300 peer-checked:bg-brand-blue peer-checked:border-brand-blue peer-focus-visible:ring-brand-blue/30',\n              indeterminate && !error && 'bg-brand-blue border-brand-blue',\n              indeterminate && error  && 'bg-rose-500 border-rose-500',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n          />\n          {/* Icon — direct sibling of peer input, positioned over the box */}\n          {indeterminate ? (\n            <Minus\n              size={11}\n              strokeWidth={3}\n              aria-hidden=\"true\"\n              className=\"pointer-events-none absolute inset-0 m-auto text-white\"\n            />\n          ) : (\n            <Check\n              size={11}\n              strokeWidth={3}\n              aria-hidden=\"true\"\n              className=\"pointer-events-none absolute inset-0 m-auto text-white opacity-0 peer-checked:opacity-100 transition-opacity duration-100\"\n            />\n          )}\n        </div>\n\n        {/* Label + description */}\n        {(label || description) && (\n          <div className=\"min-w-0\">\n            {label && (\n              <span className=\"block text-sm font-semibold text-slate-800\">\n                {label}\n              </span>\n            )}\n            {description && (\n              <span className=\"block text-xs font-medium text-slate-400 leading-relaxed\">\n                {description}\n              </span>\n            )}\n          </div>\n        )}\n      </label>\n\n      {helper && (\n        <p className={`pl-7 text-xs font-medium ${error ? 'text-rose-500' : 'text-slate-400'}`}>\n          {helper}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AA4BA,SAAgB,SAAS,EACvB,OACA,aACA,gBAAgB,OAChB,QAAQ,OACR,QACA,UACA,SACA,IAAI,YACJ,YAAY,IACZ,GAAG,SACa;CAChB,MAAM,cAAc,MAAM;CAC1B,MAAM,KAAK,cAAc;CAGzB,MAAM,uBAAuB,OAAgC;EAC3D,IAAI,IAAI,GAAG,gBAAgB;CAC7B;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW,uBAAuB;EAAvC,UAAA,CACE,qBAAC,SAAD;GACE,SAAS;GACT,WAAW,wDAAwD,WAAW,kCAAkC;GAFlH,UAAA,CAKE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,oBAAC,SAAD;MACE,KAAK;MACD;MACJ,MAAK;MACI;MACC;MACV,gBAAc,SAAS,KAAA;MACvB,WAAU;MACV,GAAI;KACL,CAAA;KAED,oBAAC,OAAD;MACE,eAAY;MACZ,WAAW;OACT;OACA;OACA,QACI,2GACA;OACJ,iBAAiB,CAAC,SAAS;OAC3B,iBAAiB,SAAU;MAC7B,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;KACZ,CAAA;KAEA,gBACC,oBAAC,OAAD;MACE,MAAM;MACN,aAAa;MACb,eAAY;MACZ,WAAU;KACX,CAAA,IAED,oBAAC,OAAD;MACE,MAAM;MACN,aAAa;MACb,eAAY;MACZ,WAAU;KACX,CAAA;IAEA;GAGH,CAAA,IAAA,SAAS,gBACT,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,SACC,oBAAC,QAAD;KAAM,WAAU;KACb,UAAA;IACG,CAAA,GAEP,eACC,oBAAC,QAAD;KAAM,WAAU;KACb,UAAA;IACG,CAAA,CAEL;GAEF,CAAA,CAAA;EAEN,CAAA,GAAA,UACC,oBAAC,KAAD;GAAG,WAAW,4BAA4B,QAAQ,kBAAkB;GACjE,UAAA;EACA,CAAA,CAEF;;AAET"}

package/lib/index21.cjs

@@ -0,0 +1,105 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+//#region src/ui-library/gallery/radio-group/RadioGroup.tsx
+/**
+* RadioGroup — Design System Component
+*
+* Accessible radio button group using native <input type="radio"> for
+* correct browser behavior: keyboard navigation, form participation,
+* focus management, and screen-reader announcements all come for free.
+*
+* Composition:
+*   <RadioGroup name="plan" defaultValue="monthly" aria-label="Billing period">
+*     <RadioItem value="monthly" label="Monthly" />
+*     <RadioItem value="annual"  label="Annual"  description="Save 20%" />
+*     <RadioItem value="custom"  label="Custom"  disabled />
+*   </RadioGroup>
+*
+* Layout: pass orientation="horizontal" for an inline row.
+*/
+var RadioGroupContext = (0, react.createContext)(null);
+function useRadioGroupContext() {
+	const ctx = (0, react.useContext)(RadioGroupContext);
+	if (!ctx) throw new Error("RadioItem must be used inside RadioGroup");
+	return ctx;
+}
+function RadioGroup({ name: externalName, defaultValue = "", value: controlledValue, onValueChange, disabled = false, required = false, orientation = "vertical", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, children, className = "" }) {
+	const generatedName = (0, react.useId)();
+	const name = externalName ?? generatedName;
+	const isControlled = controlledValue !== void 0;
+	const [uncontrolled, setUncontrolled] = (0, react.useState)(defaultValue);
+	const activeValue = isControlled ? controlledValue : uncontrolled;
+	const select = (val) => {
+		if (!isControlled) setUncontrolled(val);
+		onValueChange?.(val);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RadioGroupContext.Provider, {
+		value: {
+			name,
+			activeValue,
+			select,
+			disabled,
+			required
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			role: "radiogroup",
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledby,
+			"aria-required": required || void 0,
+			"aria-disabled": disabled || void 0,
+			className: [orientation === "horizontal" ? "flex flex-wrap gap-4" : "flex flex-col gap-3", className].filter(Boolean).join(" "),
+			children
+		})
+	});
+}
+function RadioItem({ value, label, description, disabled: itemDisabled = false, className = "" }) {
+	const { name, activeValue, select, disabled: groupDisabled, required } = useRadioGroupContext();
+	const id = (0, react.useId)();
+	const isDisabled = groupDisabled || itemDisabled;
+	const isChecked = activeValue === value;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+		className: [
+			"group flex cursor-pointer items-start gap-3",
+			isDisabled ? "cursor-not-allowed opacity-50" : "",
+			className
+		].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				type: "radio",
+				id,
+				name,
+				value,
+				checked: isChecked,
+				disabled: isDisabled,
+				required,
+				onChange: () => !isDisabled && select(value),
+				className: "peer sr-only"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: [
+					"relative mt-0.5 flex h-[18px] w-[18px] shrink-0 items-center justify-center",
+					"rounded-full border-2 transition-all duration-100",
+					"peer-focus-visible:ring-2 peer-focus-visible:ring-brand-blue/30 peer-focus-visible:ring-offset-1",
+					isChecked ? "border-brand-blue bg-brand-blue" : "border-slate-300 bg-white group-hover:border-brand-blue"
+				].filter(Boolean).join(" "),
+				"aria-hidden": "true",
+				children: isChecked && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-2 w-2 rounded-full bg-white" })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "min-w-0",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "block text-sm font-semibold text-slate-800",
+					children: label
+				}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "block text-xs font-medium text-slate-400 leading-relaxed mt-0.5",
+					children: description
+				})]
+			})
+		]
+	});
+}
+//#endregion
+exports.RadioGroup = RadioGroup;
+exports.RadioItem = RadioItem;
+
+//# sourceMappingURL=index21.cjs.map

package/lib/index21.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index21.cjs","names":[],"sources":["../src/ui-library/gallery/radio-group/RadioGroup.tsx"],"sourcesContent":["/**\n * RadioGroup — Design System Component\n *\n * Accessible radio button group using native <input type=\"radio\"> for\n * correct browser behavior: keyboard navigation, form participation,\n * focus management, and screen-reader announcements all come for free.\n *\n * Composition:\n *   <RadioGroup name=\"plan\" defaultValue=\"monthly\" aria-label=\"Billing period\">\n *     <RadioItem value=\"monthly\" label=\"Monthly\" />\n *     <RadioItem value=\"annual\"  label=\"Annual\"  description=\"Save 20%\" />\n *     <RadioItem value=\"custom\"  label=\"Custom\"  disabled />\n *   </RadioGroup>\n *\n * Layout: pass orientation=\"horizontal\" for an inline row.\n */\n\nimport { createContext, useContext, useId, useState, type ReactNode } from 'react';\n\n// ── Context ───────────────────────────────────────────────────────────────────\n\ninterface RadioGroupContextValue {\n  name: string;\n  activeValue: string;\n  select: (value: string) => void;\n  disabled: boolean;\n  required: boolean;\n}\n\nconst RadioGroupContext = createContext<RadioGroupContextValue | null>(null);\n\nfunction useRadioGroupContext() {\n  const ctx = useContext(RadioGroupContext);\n  if (!ctx) throw new Error('RadioItem must be used inside RadioGroup');\n  return ctx;\n}\n\n// ── RadioGroup ────────────────────────────────────────────────────────────────\n\nexport interface RadioGroupProps {\n  /** HTML name attribute shared by all radio inputs in the group */\n  name?: string;\n  /** Uncontrolled: initial selected value */\n  defaultValue?: string;\n  /** Controlled: current selected value */\n  value?: string;\n  /** Controlled: called on selection change */\n  onValueChange?: (value: string) => void;\n  /** Disables all radio items */\n  disabled?: boolean;\n  /** Marks the group as required */\n  required?: boolean;\n  /** 'vertical' (default) or 'horizontal' */\n  orientation?: 'vertical' | 'horizontal';\n  /** Accessible label for the group */\n  'aria-label'?: string;\n  /** ID of an external <label> or heading */\n  'aria-labelledby'?: string;\n  children: ReactNode;\n  className?: string;\n}\n\nexport function RadioGroup({\n  name: externalName,\n  defaultValue = '',\n  value: controlledValue,\n  onValueChange,\n  disabled = false,\n  required = false,\n  orientation = 'vertical',\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  children,\n  className = '',\n}: RadioGroupProps) {\n  const generatedName = useId();\n  const name = externalName ?? generatedName;\n\n  const isControlled = controlledValue !== undefined;\n  const [uncontrolled, setUncontrolled] = useState(defaultValue);\n  const activeValue = isControlled ? controlledValue : uncontrolled;\n\n  const select = (val: string) => {\n    if (!isControlled) setUncontrolled(val);\n    onValueChange?.(val);\n  };\n\n  return (\n    <RadioGroupContext.Provider value={{ name, activeValue, select, disabled, required }}>\n      <div\n        role=\"radiogroup\"\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        aria-required={required || undefined}\n        aria-disabled={disabled || undefined}\n        className={[\n          orientation === 'horizontal' ? 'flex flex-wrap gap-4' : 'flex flex-col gap-3',\n          className,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n      >\n        {children}\n      </div>\n    </RadioGroupContext.Provider>\n  );\n}\n\n// ── RadioItem ─────────────────────────────────────────────────────────────────\n\nexport interface RadioItemProps {\n  value: string;\n  label: ReactNode;\n  /** Optional description line below the label */\n  description?: string;\n  disabled?: boolean;\n  className?: string;\n}\n\nexport function RadioItem({\n  value,\n  label,\n  description,\n  disabled: itemDisabled = false,\n  className = '',\n}: RadioItemProps) {\n  const { name, activeValue, select, disabled: groupDisabled, required } = useRadioGroupContext();\n  const id = useId();\n  const isDisabled = groupDisabled || itemDisabled;\n  const isChecked  = activeValue === value;\n\n  return (\n    <label\n      className={[\n        'group flex cursor-pointer items-start gap-3',\n        isDisabled ? 'cursor-not-allowed opacity-50' : '',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {/* Native radio input — visually hidden, but fully keyboard and AT accessible */}\n      <input\n        type=\"radio\"\n        id={id}\n        name={name}\n        value={value}\n        checked={isChecked}\n        disabled={isDisabled}\n        required={required}\n        onChange={() => !isDisabled && select(value)}\n        className=\"peer sr-only\"\n      />\n\n      {/* Custom radio visual */}\n      <div\n        className={[\n          'relative mt-0.5 flex h-[18px] w-[18px] shrink-0 items-center justify-center',\n          'rounded-full border-2 transition-all duration-100',\n          'peer-focus-visible:ring-2 peer-focus-visible:ring-brand-blue/30 peer-focus-visible:ring-offset-1',\n          isChecked\n            ? 'border-brand-blue bg-brand-blue'\n            : 'border-slate-300 bg-white group-hover:border-brand-blue',\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        aria-hidden=\"true\"\n      >\n        {isChecked && (\n          <span className=\"h-2 w-2 rounded-full bg-white\" />\n        )}\n      </div>\n\n      {/* Label + description */}\n      <div className=\"min-w-0\">\n        <span className=\"block text-sm font-semibold text-slate-800\">{label}</span>\n        {description && (\n          <span className=\"block text-xs font-medium text-slate-400 leading-relaxed mt-0.5\">\n            {description}\n          </span>\n        )}\n      </div>\n    </label>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA6BA,IAAM,qBAAA,GAAoB,MAAA,cAAA,CAA6C,IAAI;AAE3E,SAAS,uBAAuB;CAC9B,MAAM,OAAA,GAAM,MAAA,WAAA,CAAW,iBAAiB;CACxC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,0CAA0C;CACpE,OAAO;AACT;AA2BA,SAAgB,WAAW,EACzB,MAAM,cACN,eAAe,IACf,OAAO,iBACP,eACA,WAAW,OACX,WAAW,OACX,cAAc,YACd,cAAc,WACd,mBAAmB,gBACnB,UACA,YAAY,MACM;CAClB,MAAM,iBAAA,GAAgB,MAAA,MAAA,CAAM;CAC5B,MAAM,OAAO,gBAAgB;CAE7B,MAAM,eAAe,oBAAoB,KAAA;CACzC,MAAM,CAAC,cAAc,oBAAA,GAAmB,MAAA,SAAA,CAAS,YAAY;CAC7D,MAAM,cAAc,eAAe,kBAAkB;CAErD,MAAM,UAAU,QAAgB;EAC9B,IAAI,CAAC,cAAc,gBAAgB,GAAG;EACtC,gBAAgB,GAAG;CACrB;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,kBAAkB,UAAnB;EAA4B,OAAO;GAAE;GAAM;GAAa;GAAQ;GAAU;EAAS;EACjF,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GACE,MAAK;GACL,cAAY;GACZ,mBAAiB;GACjB,iBAAe,YAAY,KAAA;GAC3B,iBAAe,YAAY,KAAA;GAC3B,WAAW,CACT,gBAAgB,eAAe,yBAAyB,uBACxD,SACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;GAEV;EACE,CAAA;CACqB,CAAA;AAEhC;AAaA,SAAgB,UAAU,EACxB,OACA,OACA,aACA,UAAU,eAAe,OACzB,YAAY,MACK;CACjB,MAAM,EAAE,MAAM,aAAa,QAAQ,UAAU,eAAe,aAAa,qBAAqB;CAC9F,MAAM,MAAA,GAAK,MAAA,MAAA,CAAM;CACjB,MAAM,aAAa,iBAAiB;CACpC,MAAM,YAAa,gBAAgB;CAEnC,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,SAAD;EACE,WAAW;GACT;GACA,aAAa,kCAAkC;GAC/C;EACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EAPb,UAAA;GAUE,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;IACE,MAAK;IACD;IACE;IACC;IACP,SAAS;IACT,UAAU;IACA;IACV,gBAAgB,CAAC,cAAc,OAAO,KAAK;IAC3C,WAAU;GACX,CAAA;GAGD,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IACE,WAAW;KACT;KACA;KACA;KACA,YACI,oCACA;IACN,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;IACX,eAAY;IAEX,UAAA,aACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAM,WAAU,gCAAiC,CAAA;GAEhD,CAAA;GAGL,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;KAAM,WAAU;KAA8C,UAAA;IAAY,CAAA,GACzE,eACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;KAAM,WAAU;KACb,UAAA;IACG,CAAA,CAEL;;EACA;;AAEX"}

package/lib/index21.mjs

@@ -0,0 +1,104 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useId, useState } from "react";
+//#region src/ui-library/gallery/radio-group/RadioGroup.tsx
+/**
+* RadioGroup — Design System Component
+*
+* Accessible radio button group using native <input type="radio"> for
+* correct browser behavior: keyboard navigation, form participation,
+* focus management, and screen-reader announcements all come for free.
+*
+* Composition:
+*   <RadioGroup name="plan" defaultValue="monthly" aria-label="Billing period">
+*     <RadioItem value="monthly" label="Monthly" />
+*     <RadioItem value="annual"  label="Annual"  description="Save 20%" />
+*     <RadioItem value="custom"  label="Custom"  disabled />
+*   </RadioGroup>
+*
+* Layout: pass orientation="horizontal" for an inline row.
+*/
+var RadioGroupContext = createContext(null);
+function useRadioGroupContext() {
+	const ctx = useContext(RadioGroupContext);
+	if (!ctx) throw new Error("RadioItem must be used inside RadioGroup");
+	return ctx;
+}
+function RadioGroup({ name: externalName, defaultValue = "", value: controlledValue, onValueChange, disabled = false, required = false, orientation = "vertical", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, children, className = "" }) {
+	const generatedName = useId();
+	const name = externalName ?? generatedName;
+	const isControlled = controlledValue !== void 0;
+	const [uncontrolled, setUncontrolled] = useState(defaultValue);
+	const activeValue = isControlled ? controlledValue : uncontrolled;
+	const select = (val) => {
+		if (!isControlled) setUncontrolled(val);
+		onValueChange?.(val);
+	};
+	return /* @__PURE__ */ jsx(RadioGroupContext.Provider, {
+		value: {
+			name,
+			activeValue,
+			select,
+			disabled,
+			required
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			role: "radiogroup",
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledby,
+			"aria-required": required || void 0,
+			"aria-disabled": disabled || void 0,
+			className: [orientation === "horizontal" ? "flex flex-wrap gap-4" : "flex flex-col gap-3", className].filter(Boolean).join(" "),
+			children
+		})
+	});
+}
+function RadioItem({ value, label, description, disabled: itemDisabled = false, className = "" }) {
+	const { name, activeValue, select, disabled: groupDisabled, required } = useRadioGroupContext();
+	const id = useId();
+	const isDisabled = groupDisabled || itemDisabled;
+	const isChecked = activeValue === value;
+	return /* @__PURE__ */ jsxs("label", {
+		className: [
+			"group flex cursor-pointer items-start gap-3",
+			isDisabled ? "cursor-not-allowed opacity-50" : "",
+			className
+		].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				type: "radio",
+				id,
+				name,
+				value,
+				checked: isChecked,
+				disabled: isDisabled,
+				required,
+				onChange: () => !isDisabled && select(value),
+				className: "peer sr-only"
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: [
+					"relative mt-0.5 flex h-[18px] w-[18px] shrink-0 items-center justify-center",
+					"rounded-full border-2 transition-all duration-100",
+					"peer-focus-visible:ring-2 peer-focus-visible:ring-brand-blue/30 peer-focus-visible:ring-offset-1",
+					isChecked ? "border-brand-blue bg-brand-blue" : "border-slate-300 bg-white group-hover:border-brand-blue"
+				].filter(Boolean).join(" "),
+				"aria-hidden": "true",
+				children: isChecked && /* @__PURE__ */ jsx("span", { className: "h-2 w-2 rounded-full bg-white" })
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "min-w-0",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "block text-sm font-semibold text-slate-800",
+					children: label
+				}), description && /* @__PURE__ */ jsx("span", {
+					className: "block text-xs font-medium text-slate-400 leading-relaxed mt-0.5",
+					children: description
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { RadioGroup, RadioItem };
+
+//# sourceMappingURL=index21.mjs.map

package/lib/index21.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index21.mjs","names":[],"sources":["../src/ui-library/gallery/radio-group/RadioGroup.tsx"],"sourcesContent":["/**\n * RadioGroup — Design System Component\n *\n * Accessible radio button group using native <input type=\"radio\"> for\n * correct browser behavior: keyboard navigation, form participation,\n * focus management, and screen-reader announcements all come for free.\n *\n * Composition:\n *   <RadioGroup name=\"plan\" defaultValue=\"monthly\" aria-label=\"Billing period\">\n *     <RadioItem value=\"monthly\" label=\"Monthly\" />\n *     <RadioItem value=\"annual\"  label=\"Annual\"  description=\"Save 20%\" />\n *     <RadioItem value=\"custom\"  label=\"Custom\"  disabled />\n *   </RadioGroup>\n *\n * Layout: pass orientation=\"horizontal\" for an inline row.\n */\n\nimport { createContext, useContext, useId, useState, type ReactNode } from 'react';\n\n// ── Context ───────────────────────────────────────────────────────────────────\n\ninterface RadioGroupContextValue {\n  name: string;\n  activeValue: string;\n  select: (value: string) => void;\n  disabled: boolean;\n  required: boolean;\n}\n\nconst RadioGroupContext = createContext<RadioGroupContextValue | null>(null);\n\nfunction useRadioGroupContext() {\n  const ctx = useContext(RadioGroupContext);\n  if (!ctx) throw new Error('RadioItem must be used inside RadioGroup');\n  return ctx;\n}\n\n// ── RadioGroup ────────────────────────────────────────────────────────────────\n\nexport interface RadioGroupProps {\n  /** HTML name attribute shared by all radio inputs in the group */\n  name?: string;\n  /** Uncontrolled: initial selected value */\n  defaultValue?: string;\n  /** Controlled: current selected value */\n  value?: string;\n  /** Controlled: called on selection change */\n  onValueChange?: (value: string) => void;\n  /** Disables all radio items */\n  disabled?: boolean;\n  /** Marks the group as required */\n  required?: boolean;\n  /** 'vertical' (default) or 'horizontal' */\n  orientation?: 'vertical' | 'horizontal';\n  /** Accessible label for the group */\n  'aria-label'?: string;\n  /** ID of an external <label> or heading */\n  'aria-labelledby'?: string;\n  children: ReactNode;\n  className?: string;\n}\n\nexport function RadioGroup({\n  name: externalName,\n  defaultValue = '',\n  value: controlledValue,\n  onValueChange,\n  disabled = false,\n  required = false,\n  orientation = 'vertical',\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  children,\n  className = '',\n}: RadioGroupProps) {\n  const generatedName = useId();\n  const name = externalName ?? generatedName;\n\n  const isControlled = controlledValue !== undefined;\n  const [uncontrolled, setUncontrolled] = useState(defaultValue);\n  const activeValue = isControlled ? controlledValue : uncontrolled;\n\n  const select = (val: string) => {\n    if (!isControlled) setUncontrolled(val);\n    onValueChange?.(val);\n  };\n\n  return (\n    <RadioGroupContext.Provider value={{ name, activeValue, select, disabled, required }}>\n      <div\n        role=\"radiogroup\"\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        aria-required={required || undefined}\n        aria-disabled={disabled || undefined}\n        className={[\n          orientation === 'horizontal' ? 'flex flex-wrap gap-4' : 'flex flex-col gap-3',\n          className,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n      >\n        {children}\n      </div>\n    </RadioGroupContext.Provider>\n  );\n}\n\n// ── RadioItem ─────────────────────────────────────────────────────────────────\n\nexport interface RadioItemProps {\n  value: string;\n  label: ReactNode;\n  /** Optional description line below the label */\n  description?: string;\n  disabled?: boolean;\n  className?: string;\n}\n\nexport function RadioItem({\n  value,\n  label,\n  description,\n  disabled: itemDisabled = false,\n  className = '',\n}: RadioItemProps) {\n  const { name, activeValue, select, disabled: groupDisabled, required } = useRadioGroupContext();\n  const id = useId();\n  const isDisabled = groupDisabled || itemDisabled;\n  const isChecked  = activeValue === value;\n\n  return (\n    <label\n      className={[\n        'group flex cursor-pointer items-start gap-3',\n        isDisabled ? 'cursor-not-allowed opacity-50' : '',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {/* Native radio input — visually hidden, but fully keyboard and AT accessible */}\n      <input\n        type=\"radio\"\n        id={id}\n        name={name}\n        value={value}\n        checked={isChecked}\n        disabled={isDisabled}\n        required={required}\n        onChange={() => !isDisabled && select(value)}\n        className=\"peer sr-only\"\n      />\n\n      {/* Custom radio visual */}\n      <div\n        className={[\n          'relative mt-0.5 flex h-[18px] w-[18px] shrink-0 items-center justify-center',\n          'rounded-full border-2 transition-all duration-100',\n          'peer-focus-visible:ring-2 peer-focus-visible:ring-brand-blue/30 peer-focus-visible:ring-offset-1',\n          isChecked\n            ? 'border-brand-blue bg-brand-blue'\n            : 'border-slate-300 bg-white group-hover:border-brand-blue',\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        aria-hidden=\"true\"\n      >\n        {isChecked && (\n          <span className=\"h-2 w-2 rounded-full bg-white\" />\n        )}\n      </div>\n\n      {/* Label + description */}\n      <div className=\"min-w-0\">\n        <span className=\"block text-sm font-semibold text-slate-800\">{label}</span>\n        {description && (\n          <span className=\"block text-xs font-medium text-slate-400 leading-relaxed mt-0.5\">\n            {description}\n          </span>\n        )}\n      </div>\n    </label>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA6BA,IAAM,oBAAoB,cAA6C,IAAI;AAE3E,SAAS,uBAAuB;CAC9B,MAAM,MAAM,WAAW,iBAAiB;CACxC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,0CAA0C;CACpE,OAAO;AACT;AA2BA,SAAgB,WAAW,EACzB,MAAM,cACN,eAAe,IACf,OAAO,iBACP,eACA,WAAW,OACX,WAAW,OACX,cAAc,YACd,cAAc,WACd,mBAAmB,gBACnB,UACA,YAAY,MACM;CAClB,MAAM,gBAAgB,MAAM;CAC5B,MAAM,OAAO,gBAAgB;CAE7B,MAAM,eAAe,oBAAoB,KAAA;CACzC,MAAM,CAAC,cAAc,mBAAmB,SAAS,YAAY;CAC7D,MAAM,cAAc,eAAe,kBAAkB;CAErD,MAAM,UAAU,QAAgB;EAC9B,IAAI,CAAC,cAAc,gBAAgB,GAAG;EACtC,gBAAgB,GAAG;CACrB;CAEA,OACE,oBAAC,kBAAkB,UAAnB;EAA4B,OAAO;GAAE;GAAM;GAAa;GAAQ;GAAU;EAAS;EACjF,UAAA,oBAAC,OAAD;GACE,MAAK;GACL,cAAY;GACZ,mBAAiB;GACjB,iBAAe,YAAY,KAAA;GAC3B,iBAAe,YAAY,KAAA;GAC3B,WAAW,CACT,gBAAgB,eAAe,yBAAyB,uBACxD,SACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;GAEV;EACE,CAAA;CACqB,CAAA;AAEhC;AAaA,SAAgB,UAAU,EACxB,OACA,OACA,aACA,UAAU,eAAe,OACzB,YAAY,MACK;CACjB,MAAM,EAAE,MAAM,aAAa,QAAQ,UAAU,eAAe,aAAa,qBAAqB;CAC9F,MAAM,KAAK,MAAM;CACjB,MAAM,aAAa,iBAAiB;CACpC,MAAM,YAAa,gBAAgB;CAEnC,OACE,qBAAC,SAAD;EACE,WAAW;GACT;GACA,aAAa,kCAAkC;GAC/C;EACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EAPb,UAAA;GAUE,oBAAC,SAAD;IACE,MAAK;IACD;IACE;IACC;IACP,SAAS;IACT,UAAU;IACA;IACV,gBAAgB,CAAC,cAAc,OAAO,KAAK;IAC3C,WAAU;GACX,CAAA;GAGD,oBAAC,OAAD;IACE,WAAW;KACT;KACA;KACA;KACA,YACI,oCACA;IACN,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;IACX,eAAY;IAEX,UAAA,aACC,oBAAC,QAAD,EAAM,WAAU,gCAAiC,CAAA;GAEhD,CAAA;GAGL,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,QAAD;KAAM,WAAU;KAA8C,UAAA;IAAY,CAAA,GACzE,eACC,oBAAC,QAAD;KAAM,WAAU;KACb,UAAA;IACG,CAAA,CAEL;;EACA;;AAEX"}

package/lib/index22.cjs

@@ -0,0 +1,50 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+//#region src/ui-library/gallery/switch/Switch.tsx
+function Switch({ checked, onChange, label, description, disabled = false, loading = false, id: externalId }) {
+	const generatedId = (0, react.useId)();
+	const id = externalId ?? generatedId;
+	const labelId = label ? `${id}-label` : void 0;
+	const isInteractive = !disabled && !loading;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-start gap-3",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			id,
+			type: "button",
+			role: "switch",
+			"aria-checked": checked,
+			"aria-labelledby": labelId,
+			"aria-disabled": !isInteractive || void 0,
+			disabled: !isInteractive,
+			onClick: () => isInteractive && onChange(!checked),
+			className: [
+				"relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200",
+				"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30 focus-visible:ring-offset-1",
+				checked ? "bg-brand-blue" : "bg-slate-200",
+				!isInteractive ? "cursor-not-allowed opacity-60" : "cursor-pointer"
+			].filter(Boolean).join(" "),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				"aria-hidden": "true",
+				className: ["inline-block h-5 w-5 rounded-full bg-white shadow-sm ring-0 transition-transform duration-200", checked ? "translate-x-5" : "translate-x-0"].filter(Boolean).join(" "),
+				children: loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "flex h-full w-full items-center justify-center",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-2.5 w-2.5 animate-spin rounded-full border-2 border-slate-300 border-t-brand-blue" })
+				})
+			})
+		}), (label || description) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "min-w-0 pt-0.5",
+			children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				id: labelId,
+				className: `block text-sm font-semibold ${disabled ? "text-slate-400" : "text-slate-800"}`,
+				children: label
+			}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "block text-xs font-medium leading-relaxed text-slate-400",
+				children: description
+			})]
+		})]
+	});
+}
+//#endregion
+exports.Switch = Switch;
+
+//# sourceMappingURL=index22.cjs.map