@viax.io/uxm 4.36.0

package/dist/ui/checkbox/checkbox-preview.cjs

@@ -0,0 +1,144 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var checkbox_preview_exports = {};
+__export(checkbox_preview_exports, {
+  CheckboxPreview: () => CheckboxPreview
+});
+module.exports = __toCommonJS(checkbox_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ui = require("../../ui/index.cjs");
+var import_ui2 = require("../../ui/index.cjs");
+function ShowcaseRow({
+  checked,
+  state,
+  styles,
+  label
+}) {
+  const isHover = state === "hover";
+  const isFocus = state === "focus";
+  const isDisabled = state === "disabled";
+  const bg = isHover ? checked ? styles.hoverCheckedBg : styles.hoverUncheckedBg : checked ? styles.checkedBg : styles.uncheckedBg;
+  const border = isHover ? checked ? styles.hoverCheckedBorder : styles.hoverUncheckedBorder : checked ? styles.checkedBorder : styles.uncheckedBorder;
+  const glyph = isHover ? styles.hoverCheckGlyphColor : styles.checkGlyphColor;
+  const ring = styles.focusRing;
+  const size = styles.size ?? 20;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: styles.gap,
+        fontSize: 14,
+        color: "var(--color-text)",
+        opacity: isDisabled ? styles.disabledOpacity ?? 0.4 : 1,
+        cursor: isDisabled ? "not-allowed" : "pointer"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            "aria-hidden": "true",
+            style: {
+              width: size,
+              height: size,
+              borderRadius: styles.borderRadius,
+              border: `1.5px solid ${border}`,
+              backgroundColor: bg,
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0,
+              transition: "all 0.15s",
+              ...isFocus ? { outline: `2px solid ${ring}`, outlineOffset: 2 } : {}
+            },
+            children: checked && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_ui2.Icon,
+              {
+                glyph: "check",
+                size: size * 0.6,
+                strokeWidth: 3,
+                style: { color: glyph }
+              }
+            )
+          }
+        ),
+        label
+      ]
+    }
+  );
+}
+function CheckboxPreview({ styles, variants }) {
+  const state = variants.state ?? "default";
+  const cssVars = {
+    "--uxm-checkbox-size": styles.size != null ? `${styles.size}px` : void 0,
+    "--uxm-checkbox-border-radius": styles.borderRadius != null ? `${styles.borderRadius}px` : void 0,
+    "--uxm-checkbox-gap": styles.gap != null ? `${styles.gap}px` : void 0,
+    "--uxm-checkbox-unchecked-bg": styles.uncheckedBg,
+    "--uxm-checkbox-unchecked-border": styles.uncheckedBorder,
+    "--uxm-checkbox-checked-bg": styles.checkedBg,
+    "--uxm-checkbox-checked-border": styles.checkedBorder,
+    "--uxm-checkbox-check-glyph-color": styles.checkGlyphColor,
+    "--uxm-checkbox-hover-unchecked-bg": styles.hoverUncheckedBg,
+    "--uxm-checkbox-hover-unchecked-border": styles.hoverUncheckedBorder,
+    "--uxm-checkbox-hover-checked-bg": styles.hoverCheckedBg,
+    "--uxm-checkbox-hover-checked-border": styles.hoverCheckedBorder,
+    "--uxm-checkbox-hover-check-glyph-color": styles.hoverCheckGlyphColor,
+    "--uxm-checkbox-focus-ring": styles.focusRing,
+    "--uxm-checkbox-disabled-opacity": styles.disabledOpacity != null ? String(styles.disabledOpacity) : void 0,
+    "--uxm-checkbox-error-color": styles.errorColor,
+    "--uxm-checkbox-error-message-size": styles.errorMessageSize != null ? `${styles.errorMessageSize}px` : void 0
+  };
+  const sectionLabel = {
+    fontSize: 11,
+    color: "var(--color-text-muted)",
+    marginBottom: 12,
+    letterSpacing: 0.5,
+    textTransform: "uppercase"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 32, ...cssVars }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: sectionLabel, children: [
+        state,
+        " state"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ShowcaseRow, { checked: false, state, styles, label: "Unchecked" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ShowcaseRow, { checked: true, state, styles, label: "Checked" })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { borderTop: "1px solid var(--color-border)", paddingTop: 16 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: sectionLabel, children: "Interactive" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_ui.Checkbox,
+        {
+          disabled: state === "disabled",
+          error: state === "error" ? "Please accept the terms to continue" : void 0,
+          children: "Click, hover, or Tab-focus this checkbox"
+        },
+        state
+      )
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CheckboxPreview
+});
+//# sourceMappingURL=checkbox-preview.cjs.map

package/dist/ui/checkbox/checkbox-preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/checkbox/checkbox-preview.tsx"],"sourcesContent":["import { type CSSProperties } from 'react';\n\nimport type { PreviewProps } from '@/previews/types';\nimport { Checkbox } from '@/ui';\nimport { Icon } from '@/ui';\n\ntype Styles = PreviewProps['styles'];\n\nfunction ShowcaseRow({\n  checked,\n  state,\n  styles,\n  label,\n}: {\n  checked: boolean;\n  state: string;\n  styles: Styles;\n  label: string;\n}) {\n  // Static showcase always paints the selected forced state, regardless of\n  // pointer interaction — that's the whole point of the showcase (one row\n  // per checked/unchecked mode so designers see all four cells at a glance).\n  // Inline JSX (not the real <Checkbox>) is used here so each forced state\n  // can override the box visuals directly; the interactive instance below\n  // is where production CSS rules exercise.\n  const isHover = state === 'hover';\n  const isFocus = state === 'focus';\n  const isDisabled = state === 'disabled';\n\n  const bg = isHover\n    ? (checked ? styles.hoverCheckedBg : styles.hoverUncheckedBg)\n    : (checked ? styles.checkedBg : styles.uncheckedBg);\n  const border = isHover\n    ? (checked ? styles.hoverCheckedBorder : styles.hoverUncheckedBorder)\n    : (checked ? styles.checkedBorder : styles.uncheckedBorder);\n  const glyph = isHover ? styles.hoverCheckGlyphColor : styles.checkGlyphColor;\n  const ring = styles.focusRing;\n  const size = (styles.size as number) ?? 20;\n\n  return (\n    <div\n      style={{\n        display: 'flex',\n        alignItems: 'center',\n        gap: styles.gap as number,\n        fontSize: 14,\n        color: 'var(--color-text)',\n        opacity: isDisabled ? ((styles.disabledOpacity as number) ?? 0.4) : 1,\n        cursor: isDisabled ? 'not-allowed' : 'pointer',\n      }}\n    >\n      <span\n        aria-hidden=\"true\"\n        style={{\n          width: size,\n          height: size,\n          borderRadius: styles.borderRadius as number,\n          border: `1.5px solid ${border as string}`,\n          backgroundColor: bg as string,\n          display: 'inline-flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          flexShrink: 0,\n          transition: 'all 0.15s',\n          ...(isFocus\n            ? { outline: `2px solid ${ring as string}`, outlineOffset: 2 }\n            : {}),\n        }}\n      >\n        {checked && (\n          <Icon\n            glyph=\"check\"\n            size={size * 0.6}\n            strokeWidth={3}\n            style={{ color: glyph as string }}\n          />\n        )}\n      </span>\n      {label}\n    </div>\n  );\n}\n\nexport function CheckboxPreview({ styles, variants }: PreviewProps) {\n  const state = (variants.state as string) ?? 'default';\n\n  // Project every registry knob as a `--uxm-checkbox-*` custom property on\n  // the wrapper. The interactive <Checkbox> below renders the real component\n  // whose styles.css rules read these vars — so live editor changes paint\n  // immediately, and the production :hover / :focus-visible rules exercise\n  // exactly as they would in prod.\n  const cssVars: Record<string, string | undefined> = {\n    '--uxm-checkbox-size': styles.size != null ? `${styles.size}px` : undefined,\n    '--uxm-checkbox-border-radius': styles.borderRadius != null ? `${styles.borderRadius}px` : undefined,\n    '--uxm-checkbox-gap': styles.gap != null ? `${styles.gap}px` : undefined,\n    '--uxm-checkbox-unchecked-bg': styles.uncheckedBg as string | undefined,\n    '--uxm-checkbox-unchecked-border': styles.uncheckedBorder as string | undefined,\n    '--uxm-checkbox-checked-bg': styles.checkedBg as string | undefined,\n    '--uxm-checkbox-checked-border': styles.checkedBorder as string | undefined,\n    '--uxm-checkbox-check-glyph-color': styles.checkGlyphColor as string | undefined,\n    '--uxm-checkbox-hover-unchecked-bg': styles.hoverUncheckedBg as string | undefined,\n    '--uxm-checkbox-hover-unchecked-border': styles.hoverUncheckedBorder as string | undefined,\n    '--uxm-checkbox-hover-checked-bg': styles.hoverCheckedBg as string | undefined,\n    '--uxm-checkbox-hover-checked-border': styles.hoverCheckedBorder as string | undefined,\n    '--uxm-checkbox-hover-check-glyph-color': styles.hoverCheckGlyphColor as string | undefined,\n    '--uxm-checkbox-focus-ring': styles.focusRing as string | undefined,\n    '--uxm-checkbox-disabled-opacity':\n      styles.disabledOpacity != null ? String(styles.disabledOpacity) : undefined,\n    '--uxm-checkbox-error-color': styles.errorColor as string | undefined,\n    '--uxm-checkbox-error-message-size':\n      styles.errorMessageSize != null ? `${styles.errorMessageSize}px` : undefined,\n  };\n\n  const sectionLabel = {\n    fontSize: 11,\n    color: 'var(--color-text-muted)',\n    marginBottom: 12,\n    letterSpacing: 0.5,\n    textTransform: 'uppercase' as const,\n  };\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, ...cssVars } as CSSProperties}>\n      <div>\n        <div style={sectionLabel}>{state} state</div>\n        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>\n          <ShowcaseRow checked={false} state={state} styles={styles} label=\"Unchecked\" />\n          <ShowcaseRow checked={true} state={state} styles={styles} label=\"Checked\" />\n        </div>\n      </div>\n\n      {/* Interactive instance — uncontrolled so the browser owns the\n          checked state. React (and the canvas's event-capture re-renders)\n          can't fight the DOM here, so click/space-key toggle reliably in\n          both directions. State knobs still apply via the projected\n          `--uxm-checkbox-*` vars on the wrapper above. The forced `key`\n          on the disabled-state branch lets the input reset when\n          designers flip into and out of disabled. */}\n      <div style={{ borderTop: '1px solid var(--color-border)', paddingTop: 16 }}>\n        <div style={sectionLabel}>Interactive</div>\n        <Checkbox\n          key={state}\n          disabled={state === 'disabled'}\n          error={state === 'error' ? 'Please accept the terms to continue' : undefined}\n        >\n          Click, hover, or Tab-focus this checkbox\n        </Checkbox>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":["import_ui"]}

package/dist/ui/checkbox/checkbox-preview.d.ts

@@ -0,0 +1,3 @@
+import type { PreviewProps } from '../../previews/types.js';
+export declare function CheckboxPreview({ styles, variants }: PreviewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=checkbox-preview.d.ts.map

package/dist/ui/checkbox/checkbox-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-preview.d.ts","sourceRoot":"","sources":["../../../src/ui/checkbox/checkbox-preview.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAiFrD,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,YAAY,2CAmEjE"}

package/dist/ui/checkbox/checkbox-preview.js

@@ -0,0 +1,120 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Checkbox } from "../../ui/index.js";
+import { Icon } from "../../ui/index.js";
+function ShowcaseRow({
+  checked,
+  state,
+  styles,
+  label
+}) {
+  const isHover = state === "hover";
+  const isFocus = state === "focus";
+  const isDisabled = state === "disabled";
+  const bg = isHover ? checked ? styles.hoverCheckedBg : styles.hoverUncheckedBg : checked ? styles.checkedBg : styles.uncheckedBg;
+  const border = isHover ? checked ? styles.hoverCheckedBorder : styles.hoverUncheckedBorder : checked ? styles.checkedBorder : styles.uncheckedBorder;
+  const glyph = isHover ? styles.hoverCheckGlyphColor : styles.checkGlyphColor;
+  const ring = styles.focusRing;
+  const size = styles.size ?? 20;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: styles.gap,
+        fontSize: 14,
+        color: "var(--color-text)",
+        opacity: isDisabled ? styles.disabledOpacity ?? 0.4 : 1,
+        cursor: isDisabled ? "not-allowed" : "pointer"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            style: {
+              width: size,
+              height: size,
+              borderRadius: styles.borderRadius,
+              border: `1.5px solid ${border}`,
+              backgroundColor: bg,
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0,
+              transition: "all 0.15s",
+              ...isFocus ? { outline: `2px solid ${ring}`, outlineOffset: 2 } : {}
+            },
+            children: checked && /* @__PURE__ */ jsx(
+              Icon,
+              {
+                glyph: "check",
+                size: size * 0.6,
+                strokeWidth: 3,
+                style: { color: glyph }
+              }
+            )
+          }
+        ),
+        label
+      ]
+    }
+  );
+}
+function CheckboxPreview({ styles, variants }) {
+  const state = variants.state ?? "default";
+  const cssVars = {
+    "--uxm-checkbox-size": styles.size != null ? `${styles.size}px` : void 0,
+    "--uxm-checkbox-border-radius": styles.borderRadius != null ? `${styles.borderRadius}px` : void 0,
+    "--uxm-checkbox-gap": styles.gap != null ? `${styles.gap}px` : void 0,
+    "--uxm-checkbox-unchecked-bg": styles.uncheckedBg,
+    "--uxm-checkbox-unchecked-border": styles.uncheckedBorder,
+    "--uxm-checkbox-checked-bg": styles.checkedBg,
+    "--uxm-checkbox-checked-border": styles.checkedBorder,
+    "--uxm-checkbox-check-glyph-color": styles.checkGlyphColor,
+    "--uxm-checkbox-hover-unchecked-bg": styles.hoverUncheckedBg,
+    "--uxm-checkbox-hover-unchecked-border": styles.hoverUncheckedBorder,
+    "--uxm-checkbox-hover-checked-bg": styles.hoverCheckedBg,
+    "--uxm-checkbox-hover-checked-border": styles.hoverCheckedBorder,
+    "--uxm-checkbox-hover-check-glyph-color": styles.hoverCheckGlyphColor,
+    "--uxm-checkbox-focus-ring": styles.focusRing,
+    "--uxm-checkbox-disabled-opacity": styles.disabledOpacity != null ? String(styles.disabledOpacity) : void 0,
+    "--uxm-checkbox-error-color": styles.errorColor,
+    "--uxm-checkbox-error-message-size": styles.errorMessageSize != null ? `${styles.errorMessageSize}px` : void 0
+  };
+  const sectionLabel = {
+    fontSize: 11,
+    color: "var(--color-text-muted)",
+    marginBottom: 12,
+    letterSpacing: 0.5,
+    textTransform: "uppercase"
+  };
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 32, ...cssVars }, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { style: sectionLabel, children: [
+        state,
+        " state"
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+        /* @__PURE__ */ jsx(ShowcaseRow, { checked: false, state, styles, label: "Unchecked" }),
+        /* @__PURE__ */ jsx(ShowcaseRow, { checked: true, state, styles, label: "Checked" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { borderTop: "1px solid var(--color-border)", paddingTop: 16 }, children: [
+      /* @__PURE__ */ jsx("div", { style: sectionLabel, children: "Interactive" }),
+      /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          disabled: state === "disabled",
+          error: state === "error" ? "Please accept the terms to continue" : void 0,
+          children: "Click, hover, or Tab-focus this checkbox"
+        },
+        state
+      )
+    ] })
+  ] });
+}
+export {
+  CheckboxPreview
+};
+//# sourceMappingURL=checkbox-preview.js.map

package/dist/ui/checkbox/checkbox-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/checkbox/checkbox-preview.tsx"],"sourcesContent":["import { type CSSProperties } from 'react';\n\nimport type { PreviewProps } from '@/previews/types';\nimport { Checkbox } from '@/ui';\nimport { Icon } from '@/ui';\n\ntype Styles = PreviewProps['styles'];\n\nfunction ShowcaseRow({\n  checked,\n  state,\n  styles,\n  label,\n}: {\n  checked: boolean;\n  state: string;\n  styles: Styles;\n  label: string;\n}) {\n  // Static showcase always paints the selected forced state, regardless of\n  // pointer interaction — that's the whole point of the showcase (one row\n  // per checked/unchecked mode so designers see all four cells at a glance).\n  // Inline JSX (not the real <Checkbox>) is used here so each forced state\n  // can override the box visuals directly; the interactive instance below\n  // is where production CSS rules exercise.\n  const isHover = state === 'hover';\n  const isFocus = state === 'focus';\n  const isDisabled = state === 'disabled';\n\n  const bg = isHover\n    ? (checked ? styles.hoverCheckedBg : styles.hoverUncheckedBg)\n    : (checked ? styles.checkedBg : styles.uncheckedBg);\n  const border = isHover\n    ? (checked ? styles.hoverCheckedBorder : styles.hoverUncheckedBorder)\n    : (checked ? styles.checkedBorder : styles.uncheckedBorder);\n  const glyph = isHover ? styles.hoverCheckGlyphColor : styles.checkGlyphColor;\n  const ring = styles.focusRing;\n  const size = (styles.size as number) ?? 20;\n\n  return (\n    <div\n      style={{\n        display: 'flex',\n        alignItems: 'center',\n        gap: styles.gap as number,\n        fontSize: 14,\n        color: 'var(--color-text)',\n        opacity: isDisabled ? ((styles.disabledOpacity as number) ?? 0.4) : 1,\n        cursor: isDisabled ? 'not-allowed' : 'pointer',\n      }}\n    >\n      <span\n        aria-hidden=\"true\"\n        style={{\n          width: size,\n          height: size,\n          borderRadius: styles.borderRadius as number,\n          border: `1.5px solid ${border as string}`,\n          backgroundColor: bg as string,\n          display: 'inline-flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          flexShrink: 0,\n          transition: 'all 0.15s',\n          ...(isFocus\n            ? { outline: `2px solid ${ring as string}`, outlineOffset: 2 }\n            : {}),\n        }}\n      >\n        {checked && (\n          <Icon\n            glyph=\"check\"\n            size={size * 0.6}\n            strokeWidth={3}\n            style={{ color: glyph as string }}\n          />\n        )}\n      </span>\n      {label}\n    </div>\n  );\n}\n\nexport function CheckboxPreview({ styles, variants }: PreviewProps) {\n  const state = (variants.state as string) ?? 'default';\n\n  // Project every registry knob as a `--uxm-checkbox-*` custom property on\n  // the wrapper. The interactive <Checkbox> below renders the real component\n  // whose styles.css rules read these vars — so live editor changes paint\n  // immediately, and the production :hover / :focus-visible rules exercise\n  // exactly as they would in prod.\n  const cssVars: Record<string, string | undefined> = {\n    '--uxm-checkbox-size': styles.size != null ? `${styles.size}px` : undefined,\n    '--uxm-checkbox-border-radius': styles.borderRadius != null ? `${styles.borderRadius}px` : undefined,\n    '--uxm-checkbox-gap': styles.gap != null ? `${styles.gap}px` : undefined,\n    '--uxm-checkbox-unchecked-bg': styles.uncheckedBg as string | undefined,\n    '--uxm-checkbox-unchecked-border': styles.uncheckedBorder as string | undefined,\n    '--uxm-checkbox-checked-bg': styles.checkedBg as string | undefined,\n    '--uxm-checkbox-checked-border': styles.checkedBorder as string | undefined,\n    '--uxm-checkbox-check-glyph-color': styles.checkGlyphColor as string | undefined,\n    '--uxm-checkbox-hover-unchecked-bg': styles.hoverUncheckedBg as string | undefined,\n    '--uxm-checkbox-hover-unchecked-border': styles.hoverUncheckedBorder as string | undefined,\n    '--uxm-checkbox-hover-checked-bg': styles.hoverCheckedBg as string | undefined,\n    '--uxm-checkbox-hover-checked-border': styles.hoverCheckedBorder as string | undefined,\n    '--uxm-checkbox-hover-check-glyph-color': styles.hoverCheckGlyphColor as string | undefined,\n    '--uxm-checkbox-focus-ring': styles.focusRing as string | undefined,\n    '--uxm-checkbox-disabled-opacity':\n      styles.disabledOpacity != null ? String(styles.disabledOpacity) : undefined,\n    '--uxm-checkbox-error-color': styles.errorColor as string | undefined,\n    '--uxm-checkbox-error-message-size':\n      styles.errorMessageSize != null ? `${styles.errorMessageSize}px` : undefined,\n  };\n\n  const sectionLabel = {\n    fontSize: 11,\n    color: 'var(--color-text-muted)',\n    marginBottom: 12,\n    letterSpacing: 0.5,\n    textTransform: 'uppercase' as const,\n  };\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, ...cssVars } as CSSProperties}>\n      <div>\n        <div style={sectionLabel}>{state} state</div>\n        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>\n          <ShowcaseRow checked={false} state={state} styles={styles} label=\"Unchecked\" />\n          <ShowcaseRow checked={true} state={state} styles={styles} label=\"Checked\" />\n        </div>\n      </div>\n\n      {/* Interactive instance — uncontrolled so the browser owns the\n          checked state. React (and the canvas's event-capture re-renders)\n          can't fight the DOM here, so click/space-key toggle reliably in\n          both directions. State knobs still apply via the projected\n          `--uxm-checkbox-*` vars on the wrapper above. The forced `key`\n          on the disabled-state branch lets the input reset when\n          designers flip into and out of disabled. */}\n      <div style={{ borderTop: '1px solid var(--color-border)', paddingTop: 16 }}>\n        <div style={sectionLabel}>Interactive</div>\n        <Checkbox\n          key={state}\n          disabled={state === 'disabled'}\n          error={state === 'error' ? 'Please accept the terms to continue' : undefined}\n        >\n          Click, hover, or Tab-focus this checkbox\n        </Checkbox>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/ui/checkbox/checkbox.cjs

@@ -0,0 +1,82 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var checkbox_exports = {};
+__export(checkbox_exports, {
+  Checkbox: () => Checkbox
+});
+module.exports = __toCommonJS(checkbox_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_helpers = require("../../helpers/index.cjs");
+var import_field_error = require("../../ui/field-error/index.cjs");
+var import_icon = require("../../ui/icon/index.cjs");
+function Checkbox({
+  checked,
+  defaultChecked,
+  disabled,
+  onChange,
+  children,
+  className,
+  name,
+  value,
+  error,
+  ...rest
+}) {
+  const errorId = (0, import_react.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "label",
+      {
+        className: (0, import_helpers.cn)(
+          "uxm-checkbox",
+          disabled && "uxm-checkbox--disabled",
+          error && "uxm-checkbox--error",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "input",
+            {
+              ...rest,
+              type: "checkbox",
+              className: "uxm-checkbox__input",
+              checked,
+              defaultChecked,
+              disabled,
+              name,
+              value,
+              "aria-invalid": error ? true : void 0,
+              "aria-describedby": (0, import_helpers.mergeDescribedBy)(rest["aria-describedby"], error ? errorId : void 0),
+              onChange: (e) => onChange?.(e.target.checked, e)
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-checkbox__box", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { glyph: "check", strokeWidth: 3 }) }),
+          children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-checkbox__label", children })
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_field_error.FieldError, { id: errorId, className: "uxm-checkbox__error-message", children: error })
+  ] });
+}
+Checkbox.hasError = true;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Checkbox
+});
+//# sourceMappingURL=checkbox.cjs.map

package/dist/ui/checkbox/checkbox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/checkbox/checkbox.tsx"],"sourcesContent":["import { useId } from 'react';\n\nimport { cn, mergeDescribedBy } from '@/helpers';\nimport { FieldError } from '@/ui/field-error';\nimport { Icon } from '@/ui/icon';\n\nimport type { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';\n\nexport interface CheckboxProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'checked' | 'defaultChecked' | 'onChange' | 'type' | 'value'> {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  disabled?: boolean;\n  onChange?: (checked: boolean, e: ChangeEvent<HTMLInputElement>) => void;\n  children?: ReactNode;\n  className?: string;\n  name?: string;\n  value?: string;\n  /**\n   * When set to a non-empty string, marks the control invalid: `aria-invalid`\n   * lands on the `<input>` and the message renders below in the error color.\n   * Per the input family's small-control convention the box AND the label\n   * both stay neutral (the box is too small to read as an error, and a red\n   * label would compete with the message) — the message is the sole signal.\n   * The `.uxm-checkbox--error` class still rides on the root as a state hook.\n   * Omit (or pass an empty string) for the normal state.\n   */\n  error?: string;\n}\n\nexport function Checkbox({\n  checked,\n  defaultChecked,\n  disabled,\n  onChange,\n  children,\n  className,\n  name,\n  value,\n  error,\n  ...rest\n}: CheckboxProps) {\n  const errorId = useId();\n  return (\n    <>\n      <label\n        className={cn(\n          'uxm-checkbox',\n          disabled && 'uxm-checkbox--disabled',\n          error && 'uxm-checkbox--error',\n          className,\n        )}\n      >\n        <input\n          {...rest}\n          type=\"checkbox\"\n          className=\"uxm-checkbox__input\"\n          checked={checked}\n          defaultChecked={defaultChecked}\n          disabled={disabled}\n          name={name}\n          value={value}\n          aria-invalid={error ? true : undefined}\n          aria-describedby={mergeDescribedBy(rest['aria-describedby'], error ? errorId : undefined)}\n          onChange={(e) => onChange?.(e.target.checked, e)}\n        />\n        <span className=\"uxm-checkbox__box\" aria-hidden=\"true\">\n          {/* CSS rule `.uxm-checkbox__box > svg { width/height: 70% }`\n              sizes the icon responsively to the box; the `size` prop on\n              Icon is overridden by that CSS, so we don't pass one. */}\n          <Icon glyph=\"check\" strokeWidth={3} />\n        </span>\n        {children && <span className=\"uxm-checkbox__label\">{children}</span>}\n      </label>\n      {error && (\n        <FieldError id={errorId} className=\"uxm-checkbox__error-message\">\n          {error}\n        </FieldError>\n      )}\n    </>\n  );\n}\n// Static marker so FormField only forwards its `error` prop into children that\n// accept one (avoids React unknown-prop warnings on non-input children).\nCheckbox.hasError = true;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA4CI;AA5CJ,mBAAsB;AAEtB,qBAAqC;AACrC,yBAA2B;AAC3B,kBAAqB;AA0Bd,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,cAAU,oBAAM;AACtB,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,YAAY;AAAA,UACZ,SAAS;AAAA,UACT;AAAA,QACF;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,MAAK;AAAA,cACL,WAAU;AAAA,cACV;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,gBAAc,QAAQ,OAAO;AAAA,cAC7B,wBAAkB,iCAAiB,KAAK,kBAAkB,GAAG,QAAQ,UAAU,MAAS;AAAA,cACxF,UAAU,CAAC,MAAM,WAAW,EAAE,OAAO,SAAS,CAAC;AAAA;AAAA,UACjD;AAAA,UACA,4CAAC,UAAK,WAAU,qBAAoB,eAAY,QAI9C,sDAAC,oBAAK,OAAM,SAAQ,aAAa,GAAG,GACtC;AAAA,UACC,YAAY,4CAAC,UAAK,WAAU,uBAAuB,UAAS;AAAA;AAAA;AAAA,IAC/D;AAAA,IACC,SACC,4CAAC,iCAAW,IAAI,SAAS,WAAU,+BAChC,iBACH;AAAA,KAEJ;AAEJ;AAGA,SAAS,WAAW;","names":[]}

package/dist/ui/checkbox/checkbox.css

@@ -0,0 +1,108 @@
+@charset "UTF-8";
+/* ── checkbox ── */
+/* Checkbox / Radio / ToggleSwitch share a label-row layout but each
+   owns its own gap var so editor saves on one don't bleed into others.
+   The checked-state styles read `--uxm-{id}-check-color` (checkbox)
+   and `--uxm-radio-group-active-color` (radio) so saves propagate
+   from the editor's knobs into the inner __box / __circle / __dot.
+   Per-state hover/focus/disabled read `--uxm-checkbox-{state}-*` vars, each
+   falling back to the REGISTRY's default for that state (registry/inputs.ts),
+   not to the resting value — see the hover block below. Only the label-row
+   layout and the visually-hidden `__input` are shared across the three; each
+   owns its `--disabled` rule in its own file. */
+.uxm-checkbox {
+  align-items: center;
+  color: var(--color-text);
+  cursor: pointer;
+  display: inline-flex;
+  font-size: calc(14px * var(--type-scale, 1));
+  gap: var(--uxm-checkbox-gap, 10px);
+}
+
+/* Disabled — checkbox only. This file used to declare the `--disabled` rule for
+   all three controls, which doesn't survive the cascade: `styles.css` imports
+   checkbox.css FIRST, so `.uxm-radio { cursor: pointer }` in radio-group.css
+   (equal specificity, later) beat the `not-allowed` declared here, and the
+   toggle's own rule beat the opacity declared here. Each control now owns its
+   `--disabled` rule in its own file; only the order-independent bits (the
+   label row, the visually-hidden `__input`) stay shared. 0.4 is the registry
+   default for all three (registry/inputs.ts). */
+.uxm-checkbox--disabled {
+  cursor: not-allowed;
+  opacity: var(--uxm-checkbox-disabled-opacity, 0.4);
+}
+
+.uxm-checkbox__input,
+.uxm-toggle-switch__input,
+.uxm-radio__input {
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  width: 1px;
+}
+
+.uxm-checkbox__box {
+  align-items: center;
+  background-color: transparent;
+  border: 1.5px solid var(--uxm-checkbox-border-color, var(--color-border));
+  border-radius: var(--uxm-checkbox-border-radius, 4px);
+  display: inline-flex;
+  flex-shrink: 0;
+  height: var(--uxm-checkbox-size, 20px);
+  justify-content: center;
+  transition: all 0.15s;
+  width: var(--uxm-checkbox-size, 20px);
+}
+.uxm-checkbox__box > svg {
+  color: var(--color-text-inverse);
+  height: 70%;
+  opacity: 0;
+  width: 70%;
+}
+.uxm-checkbox:not(.uxm-checkbox--disabled):hover .uxm-checkbox__input:not(:checked) + .uxm-checkbox__box {
+  /* Hover — each fallback is the registry's hover default: the unchecked box
+     signals through its BORDER (`--color-text-strong`) and stays unfilled, the
+     checked box deepens to `--color-accent-bold`, and the glyph holds
+     `--color-text-inverse` so it keeps reading on the darker fill. The two
+     fallbacks that do equal their resting value (unchecked bg, glyph colour)
+     match the registry on purpose — those rules exist as override hooks, not
+     as a look. Repeating a resting colour where the registry declares a
+     DIFFERENT hover default is the bug: it compiles to a live `:hover` rule
+     that paints nothing, and the studio can't reveal it because it projects
+     its knob defaults as inline vars. Gated on `:not(--disabled)` so a
+     disabled checkbox stays visually inert. */
+  background-color: var(--uxm-checkbox-hover-unchecked-bg, transparent);
+  border-color: var(--uxm-checkbox-hover-unchecked-border, var(--color-text-strong));
+}
+.uxm-checkbox:not(.uxm-checkbox--disabled):hover .uxm-checkbox__input:checked + .uxm-checkbox__box {
+  background-color: var(--uxm-checkbox-hover-checked-bg, var(--color-accent-bold));
+  border-color: var(--uxm-checkbox-hover-checked-border, var(--color-accent-bold));
+}
+.uxm-checkbox:not(.uxm-checkbox--disabled):hover .uxm-checkbox__input:checked + .uxm-checkbox__box > svg {
+  color: var(--uxm-checkbox-hover-check-glyph-color, var(--color-text-inverse));
+}
+.uxm-checkbox__input:focus-visible + .uxm-checkbox__box {
+  outline: 2px solid var(--uxm-checkbox-focus-ring, var(--color-accent));
+  outline-offset: 2px;
+}
+.uxm-checkbox__input:checked + .uxm-checkbox__box {
+  background-color: var(--uxm-checkbox-check-color, var(--color-accent));
+  border-color: var(--uxm-checkbox-check-color, var(--color-accent));
+}
+.uxm-checkbox__input:checked + .uxm-checkbox__box > svg {
+  opacity: 1;
+}
+
+/* Small-control error message — the control + label stay neutral (too small to
+   read as an error; a red label would compete). The message below is the sole
+   signal, reading the errorColor / errorMessageSize knobs the registry exposes
+   (kebab → `--uxm-checkbox-error-color` / `-error-message-size`). The
+   `.uxm-checkbox--error` class rides the root as a state hook + aria-invalid
+   companion, even though it paints nothing itself. */
+.uxm-checkbox__error-message {
+  display: block;
+  margin-top: 4px;
+  font-size: calc(var(--uxm-checkbox-error-message-size, 12px) * var(--type-scale, 1));
+  color: var(--uxm-checkbox-error-color, var(--color-danger-text));
+}

package/dist/ui/checkbox/checkbox.d.ts

@@ -0,0 +1,26 @@
+import type { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'checked' | 'defaultChecked' | 'onChange' | 'type' | 'value'> {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    onChange?: (checked: boolean, e: ChangeEvent<HTMLInputElement>) => void;
+    children?: ReactNode;
+    className?: string;
+    name?: string;
+    value?: string;
+    /**
+     * When set to a non-empty string, marks the control invalid: `aria-invalid`
+     * lands on the `<input>` and the message renders below in the error color.
+     * Per the input family's small-control convention the box AND the label
+     * both stay neutral (the box is too small to read as an error, and a red
+     * label would compete with the message) — the message is the sole signal.
+     * The `.uxm-checkbox--error` class still rides on the root as a state hook.
+     * Omit (or pass an empty string) for the normal state.
+     */
+    error?: string;
+}
+export declare function Checkbox({ checked, defaultChecked, disabled, onChange, children, className, name, value, error, ...rest }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Checkbox {
+    var hasError: boolean;
+}
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/ui/checkbox/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/ui/checkbox/checkbox.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzE,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,SAAS,GAAG,gBAAgB,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;IACjH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACxE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;OAQG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,KAAK,EACL,KAAK,EACL,GAAG,IAAI,EACR,EAAE,aAAa,2CAwCf;yBAnDe,QAAQ"}

package/dist/ui/checkbox/checkbox.js

@@ -0,0 +1,58 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cn, mergeDescribedBy } from "../../helpers/index.js";
+import { FieldError } from "../../ui/field-error/index.js";
+import { Icon } from "../../ui/icon/index.js";
+function Checkbox({
+  checked,
+  defaultChecked,
+  disabled,
+  onChange,
+  children,
+  className,
+  name,
+  value,
+  error,
+  ...rest
+}) {
+  const errorId = useId();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: cn(
+          "uxm-checkbox",
+          disabled && "uxm-checkbox--disabled",
+          error && "uxm-checkbox--error",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...rest,
+              type: "checkbox",
+              className: "uxm-checkbox__input",
+              checked,
+              defaultChecked,
+              disabled,
+              name,
+              value,
+              "aria-invalid": error ? true : void 0,
+              "aria-describedby": mergeDescribedBy(rest["aria-describedby"], error ? errorId : void 0),
+              onChange: (e) => onChange?.(e.target.checked, e)
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "uxm-checkbox__box", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, { glyph: "check", strokeWidth: 3 }) }),
+          children && /* @__PURE__ */ jsx("span", { className: "uxm-checkbox__label", children })
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsx(FieldError, { id: errorId, className: "uxm-checkbox__error-message", children: error })
+  ] });
+}
+Checkbox.hasError = true;
+export {
+  Checkbox
+};
+//# sourceMappingURL=checkbox.js.map

package/dist/ui/checkbox/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/checkbox/checkbox.tsx"],"sourcesContent":["import { useId } from 'react';\n\nimport { cn, mergeDescribedBy } from '@/helpers';\nimport { FieldError } from '@/ui/field-error';\nimport { Icon } from '@/ui/icon';\n\nimport type { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';\n\nexport interface CheckboxProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'checked' | 'defaultChecked' | 'onChange' | 'type' | 'value'> {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  disabled?: boolean;\n  onChange?: (checked: boolean, e: ChangeEvent<HTMLInputElement>) => void;\n  children?: ReactNode;\n  className?: string;\n  name?: string;\n  value?: string;\n  /**\n   * When set to a non-empty string, marks the control invalid: `aria-invalid`\n   * lands on the `<input>` and the message renders below in the error color.\n   * Per the input family's small-control convention the box AND the label\n   * both stay neutral (the box is too small to read as an error, and a red\n   * label would compete with the message) — the message is the sole signal.\n   * The `.uxm-checkbox--error` class still rides on the root as a state hook.\n   * Omit (or pass an empty string) for the normal state.\n   */\n  error?: string;\n}\n\nexport function Checkbox({\n  checked,\n  defaultChecked,\n  disabled,\n  onChange,\n  children,\n  className,\n  name,\n  value,\n  error,\n  ...rest\n}: CheckboxProps) {\n  const errorId = useId();\n  return (\n    <>\n      <label\n        className={cn(\n          'uxm-checkbox',\n          disabled && 'uxm-checkbox--disabled',\n          error && 'uxm-checkbox--error',\n          className,\n        )}\n      >\n        <input\n          {...rest}\n          type=\"checkbox\"\n          className=\"uxm-checkbox__input\"\n          checked={checked}\n          defaultChecked={defaultChecked}\n          disabled={disabled}\n          name={name}\n          value={value}\n          aria-invalid={error ? true : undefined}\n          aria-describedby={mergeDescribedBy(rest['aria-describedby'], error ? errorId : undefined)}\n          onChange={(e) => onChange?.(e.target.checked, e)}\n        />\n        <span className=\"uxm-checkbox__box\" aria-hidden=\"true\">\n          {/* CSS rule `.uxm-checkbox__box > svg { width/height: 70% }`\n              sizes the icon responsively to the box; the `size` prop on\n              Icon is overridden by that CSS, so we don't pass one. */}\n          <Icon glyph=\"check\" strokeWidth={3} />\n        </span>\n        {children && <span className=\"uxm-checkbox__label\">{children}</span>}\n      </label>\n      {error && (\n        <FieldError id={errorId} className=\"uxm-checkbox__error-message\">\n          {error}\n        </FieldError>\n      )}\n    </>\n  );\n}\n// Static marker so FormField only forwards its `error` prop into children that\n// accept one (avoids React unknown-prop warnings on non-input children).\nCheckbox.hasError = true;\n"],"mappings":"AA4CI,mBASI,KARF,YADF;AA5CJ,SAAS,aAAa;AAEtB,SAAS,IAAI,wBAAwB;AACrC,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AA0Bd,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,UAAU,MAAM;AACtB,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,YAAY;AAAA,UACZ,SAAS;AAAA,UACT;AAAA,QACF;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,MAAK;AAAA,cACL,WAAU;AAAA,cACV;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,gBAAc,QAAQ,OAAO;AAAA,cAC7B,oBAAkB,iBAAiB,KAAK,kBAAkB,GAAG,QAAQ,UAAU,MAAS;AAAA,cACxF,UAAU,CAAC,MAAM,WAAW,EAAE,OAAO,SAAS,CAAC;AAAA;AAAA,UACjD;AAAA,UACA,oBAAC,UAAK,WAAU,qBAAoB,eAAY,QAI9C,8BAAC,QAAK,OAAM,SAAQ,aAAa,GAAG,GACtC;AAAA,UACC,YAAY,oBAAC,UAAK,WAAU,uBAAuB,UAAS;AAAA;AAAA;AAAA,IAC/D;AAAA,IACC,SACC,oBAAC,cAAW,IAAI,SAAS,WAAU,+BAChC,iBACH;AAAA,KAEJ;AAEJ;AAGA,SAAS,WAAW;","names":[]}

package/dist/ui/checkbox/index.cjs

@@ -0,0 +1,23 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var checkbox_exports = {};
+module.exports = __toCommonJS(checkbox_exports);
+__reExport(checkbox_exports, require("./checkbox.cjs"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./checkbox.cjs")
+});
+//# sourceMappingURL=index.cjs.map

package/dist/ui/checkbox/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/checkbox/index.ts"],"sourcesContent":["export * from './checkbox';\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,6BAAc,uBAAd;","names":[]}

package/dist/ui/checkbox/index.d.ts

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