@puzzle-ui/ui 0.0.0-stage → 0.2.0

package/dist/components/forms/checkbox/checkbox.css

@@ -0,0 +1,146 @@
+.puzzle-checkbox {
+  align-items: center;
+  gap: var(--puzzle-space-3, .5rem);
+  width: fit-content;
+  color: var(--puzzle-color-text);
+  font-family: var(--puzzle-font-family-body, inherit);
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  display: inline-flex;
+}
+
+.puzzle-checkbox__control {
+  width: var(--puzzle-checkbox-size, 1.125rem);
+  height: var(--puzzle-checkbox-size, 1.125rem);
+  margin-top: var(--puzzle-checkbox-offset, .125rem);
+  flex: none;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+  position: relative;
+}
+
+.puzzle-checkbox__control input {
+  z-index: 1;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  cursor: inherit;
+  margin: 0;
+  position: absolute;
+  inset: 0;
+}
+
+.puzzle-checkbox__indicator {
+  box-sizing: border-box;
+  border: 1.5px solid var(--puzzle-color-border);
+  border-radius: var(--puzzle-radius-sm, .25rem);
+  width: 100%;
+  height: 100%;
+  color: var(--puzzle-color-primary-foreground);
+  background: var(--puzzle-color-surface);
+  transition: background-color var(--puzzle-duration-fast, .15s) var(--puzzle-easing-standard, ease),
+        border-color var(--puzzle-duration-fast, .15s) var(--puzzle-easing-standard, ease),
+        box-shadow var(--puzzle-duration-fast, .15s) var(--puzzle-easing-standard, ease);
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.puzzle-checkbox__indicator svg {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: .125rem;
+  display: block;
+}
+
+.puzzle-checkbox__control input:checked + .puzzle-checkbox__indicator, .puzzle-checkbox__control input:indeterminate + .puzzle-checkbox__indicator {
+  background: var(--puzzle-color-primary);
+  border-color: var(--puzzle-color-primary);
+  stroke: var(--puzzle-color-primary);
+}
+
+.puzzle-checkbox .puzzle-checkbox__check, .puzzle-checkbox .puzzle-checkbox__mixed {
+  transform-origin: center;
+  transform: scale(.8);
+}
+
+.puzzle-checkbox--checked .puzzle-checkbox__check {
+  fill: currentColor;
+  display: block;
+}
+
+.puzzle-checkbox--checked .puzzle-checkbox__mixed, .puzzle-checkbox--indeterminate .puzzle-checkbox__indicator .puzzle-checkbox__check {
+  display: none;
+}
+
+.puzzle-checkbox--indeterminate .puzzle-checkbox__indicator .puzzle-checkbox__mixed {
+  fill: currentColor;
+  display: block;
+}
+
+.puzzle-checkbox:hover:not([data-disabled]) .puzzle-checkbox__indicator {
+  border-color: var(--puzzle-color-primary);
+}
+
+.puzzle-checkbox__control input:focus-visible + .puzzle-checkbox__indicator {
+  outline: 2px solid var(--puzzle-color-ring);
+  outline-offset: 2px;
+}
+
+.puzzle-checkbox--disabled {
+  opacity: .55;
+  cursor: not-allowed;
+}
+
+.puzzle-checkbox--disabled .puzzle-checkbox__indicator {
+  background: var(--puzzle-color-surface-sunken);
+}
+
+.puzzle-checkbox__content {
+  gap: var(--puzzle-space-1, .25rem);
+  flex-direction: column;
+  min-width: 0;
+  display: flex;
+}
+
+.puzzle-checkbox__label {
+  color: var(--puzzle-color-text);
+  font-size: var(--puzzle-font-size-sm, .875rem);
+  font-weight: var(--puzzle-font-weight-medium, 500);
+  line-height: var(--puzzle-font-line-height-normal, 1.5);
+}
+
+.puzzle-checkbox__description {
+  color: var(--puzzle-color-text-muted);
+  font-size: var(--puzzle-font-size-xs, .75rem);
+  line-height: var(--puzzle-font-line-height-normal, 1.5);
+}
+
+.puzzle-checkbox__required {
+  color: var(--puzzle-color-danger);
+  margin-left: .2em;
+}
+
+.puzzle-checkbox--sm {
+  --puzzle-checkbox-size: .875rem;
+  --puzzle-checkbox-offset: .125rem;
+}
+
+.puzzle-checkbox--md {
+  --puzzle-checkbox-size: 1.125rem;
+  --puzzle-checkbox-offset: .125rem;
+}
+
+.puzzle-checkbox--lg {
+  --puzzle-checkbox-size: 1.375rem;
+  --puzzle-checkbox-offset: .0625rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .puzzle-checkbox__indicator {
+    transition: none;
+  }
+}

package/dist/components/forms/checkbox/index.cjs

@@ -0,0 +1,80 @@
+"use client";
+;/* empty css               */
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/forms/checkbox/index.tsx
+const Checkbox = ({ label, children, description, size = "md", indeterminate = false, className, style, id, ref, disabled = false, required = false, "aria-describedby": ariaDescribedBy, ...inputProps }) => {
+	const checkboxLabel = label ?? children;
+	const generatedId = (0, react.useId)();
+	const descriptionId = description != null ? `${id ?? generatedId}-description` : void 0;
+	const describedBy = [ariaDescribedBy, descriptionId].filter(Boolean).join(" ") || void 0;
+	const setInputRef = (0, react.useCallback)((node) => {
+		if (node) node.indeterminate = indeterminate;
+		if (typeof ref === "function") return ref(node);
+		if (ref) ref.current = node;
+	}, [indeterminate, ref]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+		className: (0, _puzzle_ui_core.cn)("puzzle-checkbox", `puzzle-checkbox--${size}`, (inputProps.checked ?? inputProps.defaultChecked) && "puzzle-checkbox--checked", indeterminate && "puzzle-checkbox--indeterminate", disabled && "puzzle-checkbox--disabled", className),
+		style,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "puzzle-checkbox__control",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				...inputProps,
+				ref: setInputRef,
+				id,
+				type: "checkbox",
+				disabled,
+				required,
+				"aria-describedby": describedBy
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+				className: "puzzle-checkbox__indicator",
+				viewBox: "0 0 18 18",
+				"aria-hidden": "true",
+				focusable: "false",
+				fill: "none",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+						fill: "currentColor",
+						x: "0",
+						y: "0",
+						width: "18",
+						height: "18",
+						rx: "2"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+						className: "puzzle-checkbox__check",
+						d: "M2.75 9.25 7 13.5 15.25 4.75",
+						strokeWidth: "3",
+						strokeLinecap: "round",
+						strokeLinejoin: "round"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+						className: "puzzle-checkbox__mixed",
+						d: "M4.25 9h9.5",
+						strokeWidth: "3",
+						strokeLinecap: "round",
+						strokeLinejoin: "round"
+					})
+				]
+			})]
+		}), (checkboxLabel != null || description != null) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "puzzle-checkbox__content",
+			children: [checkboxLabel != null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "puzzle-checkbox__label",
+				children: [checkboxLabel, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "puzzle-checkbox__required",
+					"aria-hidden": "true",
+					children: "*"
+				})]
+			}), description != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				id: descriptionId,
+				className: "puzzle-checkbox__description",
+				children: description
+			})]
+		})]
+	});
+};
+exports.Checkbox = Checkbox;
+
+//# sourceMappingURL=index.cjs.map

package/dist/components/forms/checkbox/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["useId","useCallback","cn"],"sources":["../../../../src/components/forms/checkbox/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useCallback,\n  useId,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\nimport { cn } from \"@puzzle-ui/core\";\nimport \"./checkbox.css\";\n\ntype CheckboxSize = \"sm\" | \"md\" | \"lg\";\n\ntype CheckboxProps = Omit<\n  ComponentPropsWithRef<\"input\">,\n  \"children\" | \"className\" | \"size\" | \"style\" | \"type\"\n> & {\n  /** Content displayed beside the checkbox. */\n  label?: ReactNode;\n  /** Alternative to `label` for JSX composition. `label` takes precedence. */\n  children?: ReactNode;\n  /** Optional supporting text displayed below the label. */\n  description?: ReactNode;\n  /** Visual size of the checkbox. Defaults to `md`. */\n  size?: CheckboxSize;\n  /** Shows the mixed state without changing the native checked value. */\n  indeterminate?: boolean;\n  /** Class applied to the root label. */\n  className?: string;\n  /** Inline styles applied to the root label. */\n  style?: CSSProperties;\n};\n\nconst Checkbox = ({\n  label,\n  children,\n  description,\n  size = \"md\",\n  indeterminate = false,\n  className,\n  style,\n  id,\n  ref,\n  disabled = false,\n  required = false,\n  \"aria-describedby\": ariaDescribedBy,\n  ...inputProps\n}: CheckboxProps) => {\n  const checkboxLabel = label ?? children;\n  const generatedId = useId();\n  const descriptionId =\n    description != null ? `${id ?? generatedId}-description` : undefined;\n  const describedBy =\n    [ariaDescribedBy, descriptionId].filter(Boolean).join(\" \") || undefined;\n\n  const setInputRef = useCallback(\n    (node: HTMLInputElement | null) => {\n      if (node) node.indeterminate = indeterminate;\n\n      if (typeof ref === \"function\") return ref(node);\n      if (ref) ref.current = node;\n    },\n    [indeterminate, ref],\n  );\n\n  return (\n    <label\n      className={cn(\n        \"puzzle-checkbox\",\n        `puzzle-checkbox--${size}`,\n        (inputProps.checked ?? inputProps.defaultChecked) &&\n          \"puzzle-checkbox--checked\",\n        indeterminate && \"puzzle-checkbox--indeterminate\",\n        disabled && \"puzzle-checkbox--disabled\",\n        className,\n      )}\n      style={style}\n    >\n      <span className=\"puzzle-checkbox__control\">\n        <input\n          {...inputProps}\n          ref={setInputRef}\n          id={id}\n          type=\"checkbox\"\n          disabled={disabled}\n          required={required}\n          aria-describedby={describedBy}\n        />\n        <svg\n          className=\"puzzle-checkbox__indicator\"\n          viewBox=\"0 0 18 18\"\n          aria-hidden=\"true\"\n          focusable=\"false\"\n          fill=\"none\"\n        >\n          <rect fill=\"currentColor\" x=\"0\" y=\"0\" width=\"18\" height=\"18\" rx=\"2\" />\n          <path\n            className=\"puzzle-checkbox__check\"\n            d=\"M2.75 9.25 7 13.5 15.25 4.75\"\n            strokeWidth=\"3\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n          <path\n            className=\"puzzle-checkbox__mixed\"\n            d=\"M4.25 9h9.5\"\n            strokeWidth=\"3\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      </span>\n\n      {(checkboxLabel != null || description != null) && (\n        <span className=\"puzzle-checkbox__content\">\n          {checkboxLabel != null && (\n            <span className=\"puzzle-checkbox__label\">\n              {checkboxLabel}\n              {required && (\n                <span className=\"puzzle-checkbox__required\" aria-hidden=\"true\">\n                  *\n                </span>\n              )}\n            </span>\n          )}\n          {description != null && (\n            <span id={descriptionId} className=\"puzzle-checkbox__description\">\n              {description}\n            </span>\n          )}\n        </span>\n      )}\n    </label>\n  );\n};\n\nexport { Checkbox, type CheckboxProps, type CheckboxSize };\n"],"mappings":";;;;;;AAkCA,MAAM,YAAY,EAChB,OACA,UACA,aACA,OAAO,MACP,gBAAgB,OAChB,WACA,OACA,IACA,KACA,WAAW,OACX,WAAW,OACX,oBAAoB,iBACpB,GAAG,iBACgB;CACnB,MAAM,gBAAgB,SAAS;CAC/B,MAAM,eAAA,GAAcA,MAAAA,MAAAA,CAAM;CAC1B,MAAM,gBACJ,eAAe,OAAO,GAAG,MAAM,YAAY,gBAAgB,KAAA;CAC7D,MAAM,cACJ,CAAC,iBAAiB,aAAa,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA;CAEhE,MAAM,eAAA,GAAcC,MAAAA,YAAAA,EACjB,SAAkC;EACjC,IAAI,MAAM,KAAK,gBAAgB;EAE/B,IAAI,OAAO,QAAQ,YAAY,OAAO,IAAI,IAAI;EAC9C,IAAI,KAAK,IAAI,UAAU;CACzB,GACA,CAAC,eAAe,GAAG,CACrB;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,SAAD;EACE,YAAA,GAAWC,gBAAAA,GAAAA,CACT,mBACA,oBAAoB,SACnB,WAAW,WAAW,WAAW,mBAChC,4BACF,iBAAiB,kCACjB,YAAY,6BACZ,SACF;EACO;EAVT,UAAA,CAYE,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;IACE,GAAI;IACJ,KAAK;IACD;IACJ,MAAK;IACK;IACA;IACV,oBAAkB;GACnB,CAAA,GACD,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IACE,WAAU;IACV,SAAQ;IACR,eAAY;IACZ,WAAU;IACV,MAAK;IALP,UAAA;KAOE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;MAAM,MAAK;MAAe,GAAE;MAAI,GAAE;MAAI,OAAM;MAAK,QAAO;MAAK,IAAG;KAAK,CAAA;KACrE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;MACE,WAAU;MACV,GAAE;MACF,aAAY;MACZ,eAAc;MACd,gBAAe;KAChB,CAAA;KACD,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;MACE,WAAU;MACV,GAAE;MACF,aAAY;MACZ,eAAc;MACd,gBAAe;KAChB,CAAA;IACE;GACD,CAAA,CAAA;EAEJ,CAAA,IAAA,iBAAiB,QAAQ,eAAe,SACxC,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CACG,iBAAiB,QAChB,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CACG,eACA,YACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;KAAM,WAAU;KAA4B,eAAY;KAAO,UAAA;IAEzD,CAAA,CAEJ;GAEP,CAAA,GAAA,eAAe,QACd,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,IAAI;IAAe,WAAU;IAChC,UAAA;GACG,CAAA,CAEJ;EAEH,CAAA,CAAA;;AAEX"}

package/dist/components/forms/checkbox/index.d.cts

@@ -0,0 +1,20 @@
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+type CheckboxSize = "sm" | "md" | "lg";
+type CheckboxProps = Omit<ComponentPropsWithRef<"input">, "children" | "className" | "size" | "style" | "type"> & {
+  /** Content displayed beside the checkbox. */
+  label?: ReactNode;
+  /** Alternative to `label` for JSX composition. `label` takes precedence. */
+  children?: ReactNode;
+  /** Optional supporting text displayed below the label. */
+  description?: ReactNode;
+  /** Visual size of the checkbox. Defaults to `md`. */
+  size?: CheckboxSize;
+  /** Shows the mixed state without changing the native checked value. */
+  indeterminate?: boolean;
+  /** Class applied to the root label. */
+  className?: string;
+  /** Inline styles applied to the root label. */
+  style?: CSSProperties;
+};
+declare const Checkbox: ({ label, children, description, size, indeterminate, className, style, id, ref, disabled, required, "aria-describedby": ariaDescribedBy, ...inputProps }: CheckboxProps) => import("react").JSX.Element;
+export { Checkbox, type CheckboxProps, type CheckboxSize };

package/dist/components/forms/checkbox/index.d.ts

@@ -0,0 +1,20 @@
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+type CheckboxSize = "sm" | "md" | "lg";
+type CheckboxProps = Omit<ComponentPropsWithRef<"input">, "children" | "className" | "size" | "style" | "type"> & {
+  /** Content displayed beside the checkbox. */
+  label?: ReactNode;
+  /** Alternative to `label` for JSX composition. `label` takes precedence. */
+  children?: ReactNode;
+  /** Optional supporting text displayed below the label. */
+  description?: ReactNode;
+  /** Visual size of the checkbox. Defaults to `md`. */
+  size?: CheckboxSize;
+  /** Shows the mixed state without changing the native checked value. */
+  indeterminate?: boolean;
+  /** Class applied to the root label. */
+  className?: string;
+  /** Inline styles applied to the root label. */
+  style?: CSSProperties;
+};
+declare const Checkbox: ({ label, children, description, size, indeterminate, className, style, id, ref, disabled, required, "aria-describedby": ariaDescribedBy, ...inputProps }: CheckboxProps) => import("react").JSX.Element;
+export { Checkbox, type CheckboxProps, type CheckboxSize };

package/dist/components/forms/checkbox/index.js

@@ -0,0 +1,80 @@
+"use client";
+import "./checkbox.css";
+import { cn } from "@puzzle-ui/core";
+import { useCallback, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/forms/checkbox/index.tsx
+const Checkbox = ({ label, children, description, size = "md", indeterminate = false, className, style, id, ref, disabled = false, required = false, "aria-describedby": ariaDescribedBy, ...inputProps }) => {
+	const checkboxLabel = label ?? children;
+	const generatedId = useId();
+	const descriptionId = description != null ? `${id ?? generatedId}-description` : void 0;
+	const describedBy = [ariaDescribedBy, descriptionId].filter(Boolean).join(" ") || void 0;
+	const setInputRef = useCallback((node) => {
+		if (node) node.indeterminate = indeterminate;
+		if (typeof ref === "function") return ref(node);
+		if (ref) ref.current = node;
+	}, [indeterminate, ref]);
+	return /* @__PURE__ */ jsxs("label", {
+		className: cn("puzzle-checkbox", `puzzle-checkbox--${size}`, (inputProps.checked ?? inputProps.defaultChecked) && "puzzle-checkbox--checked", indeterminate && "puzzle-checkbox--indeterminate", disabled && "puzzle-checkbox--disabled", className),
+		style,
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "puzzle-checkbox__control",
+			children: [/* @__PURE__ */ jsx("input", {
+				...inputProps,
+				ref: setInputRef,
+				id,
+				type: "checkbox",
+				disabled,
+				required,
+				"aria-describedby": describedBy
+			}), /* @__PURE__ */ jsxs("svg", {
+				className: "puzzle-checkbox__indicator",
+				viewBox: "0 0 18 18",
+				"aria-hidden": "true",
+				focusable: "false",
+				fill: "none",
+				children: [
+					/* @__PURE__ */ jsx("rect", {
+						fill: "currentColor",
+						x: "0",
+						y: "0",
+						width: "18",
+						height: "18",
+						rx: "2"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						className: "puzzle-checkbox__check",
+						d: "M2.75 9.25 7 13.5 15.25 4.75",
+						strokeWidth: "3",
+						strokeLinecap: "round",
+						strokeLinejoin: "round"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						className: "puzzle-checkbox__mixed",
+						d: "M4.25 9h9.5",
+						strokeWidth: "3",
+						strokeLinecap: "round",
+						strokeLinejoin: "round"
+					})
+				]
+			})]
+		}), (checkboxLabel != null || description != null) && /* @__PURE__ */ jsxs("span", {
+			className: "puzzle-checkbox__content",
+			children: [checkboxLabel != null && /* @__PURE__ */ jsxs("span", {
+				className: "puzzle-checkbox__label",
+				children: [checkboxLabel, required && /* @__PURE__ */ jsx("span", {
+					className: "puzzle-checkbox__required",
+					"aria-hidden": "true",
+					children: "*"
+				})]
+			}), description != null && /* @__PURE__ */ jsx("span", {
+				id: descriptionId,
+				className: "puzzle-checkbox__description",
+				children: description
+			})]
+		})]
+	});
+};
+export { Checkbox };
+
+//# sourceMappingURL=index.js.map

package/dist/components/forms/checkbox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/forms/checkbox/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useCallback,\n  useId,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\nimport { cn } from \"@puzzle-ui/core\";\nimport \"./checkbox.css\";\n\ntype CheckboxSize = \"sm\" | \"md\" | \"lg\";\n\ntype CheckboxProps = Omit<\n  ComponentPropsWithRef<\"input\">,\n  \"children\" | \"className\" | \"size\" | \"style\" | \"type\"\n> & {\n  /** Content displayed beside the checkbox. */\n  label?: ReactNode;\n  /** Alternative to `label` for JSX composition. `label` takes precedence. */\n  children?: ReactNode;\n  /** Optional supporting text displayed below the label. */\n  description?: ReactNode;\n  /** Visual size of the checkbox. Defaults to `md`. */\n  size?: CheckboxSize;\n  /** Shows the mixed state without changing the native checked value. */\n  indeterminate?: boolean;\n  /** Class applied to the root label. */\n  className?: string;\n  /** Inline styles applied to the root label. */\n  style?: CSSProperties;\n};\n\nconst Checkbox = ({\n  label,\n  children,\n  description,\n  size = \"md\",\n  indeterminate = false,\n  className,\n  style,\n  id,\n  ref,\n  disabled = false,\n  required = false,\n  \"aria-describedby\": ariaDescribedBy,\n  ...inputProps\n}: CheckboxProps) => {\n  const checkboxLabel = label ?? children;\n  const generatedId = useId();\n  const descriptionId =\n    description != null ? `${id ?? generatedId}-description` : undefined;\n  const describedBy =\n    [ariaDescribedBy, descriptionId].filter(Boolean).join(\" \") || undefined;\n\n  const setInputRef = useCallback(\n    (node: HTMLInputElement | null) => {\n      if (node) node.indeterminate = indeterminate;\n\n      if (typeof ref === \"function\") return ref(node);\n      if (ref) ref.current = node;\n    },\n    [indeterminate, ref],\n  );\n\n  return (\n    <label\n      className={cn(\n        \"puzzle-checkbox\",\n        `puzzle-checkbox--${size}`,\n        (inputProps.checked ?? inputProps.defaultChecked) &&\n          \"puzzle-checkbox--checked\",\n        indeterminate && \"puzzle-checkbox--indeterminate\",\n        disabled && \"puzzle-checkbox--disabled\",\n        className,\n      )}\n      style={style}\n    >\n      <span className=\"puzzle-checkbox__control\">\n        <input\n          {...inputProps}\n          ref={setInputRef}\n          id={id}\n          type=\"checkbox\"\n          disabled={disabled}\n          required={required}\n          aria-describedby={describedBy}\n        />\n        <svg\n          className=\"puzzle-checkbox__indicator\"\n          viewBox=\"0 0 18 18\"\n          aria-hidden=\"true\"\n          focusable=\"false\"\n          fill=\"none\"\n        >\n          <rect fill=\"currentColor\" x=\"0\" y=\"0\" width=\"18\" height=\"18\" rx=\"2\" />\n          <path\n            className=\"puzzle-checkbox__check\"\n            d=\"M2.75 9.25 7 13.5 15.25 4.75\"\n            strokeWidth=\"3\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n          <path\n            className=\"puzzle-checkbox__mixed\"\n            d=\"M4.25 9h9.5\"\n            strokeWidth=\"3\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      </span>\n\n      {(checkboxLabel != null || description != null) && (\n        <span className=\"puzzle-checkbox__content\">\n          {checkboxLabel != null && (\n            <span className=\"puzzle-checkbox__label\">\n              {checkboxLabel}\n              {required && (\n                <span className=\"puzzle-checkbox__required\" aria-hidden=\"true\">\n                  *\n                </span>\n              )}\n            </span>\n          )}\n          {description != null && (\n            <span id={descriptionId} className=\"puzzle-checkbox__description\">\n              {description}\n            </span>\n          )}\n        </span>\n      )}\n    </label>\n  );\n};\n\nexport { Checkbox, type CheckboxProps, type CheckboxSize };\n"],"mappings":";;;;;;AAkCA,MAAM,YAAY,EAChB,OACA,UACA,aACA,OAAO,MACP,gBAAgB,OAChB,WACA,OACA,IACA,KACA,WAAW,OACX,WAAW,OACX,oBAAoB,iBACpB,GAAG,iBACgB;CACnB,MAAM,gBAAgB,SAAS;CAC/B,MAAM,cAAc,MAAM;CAC1B,MAAM,gBACJ,eAAe,OAAO,GAAG,MAAM,YAAY,gBAAgB,KAAA;CAC7D,MAAM,cACJ,CAAC,iBAAiB,aAAa,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA;CAEhE,MAAM,cAAc,aACjB,SAAkC;EACjC,IAAI,MAAM,KAAK,gBAAgB;EAE/B,IAAI,OAAO,QAAQ,YAAY,OAAO,IAAI,IAAI;EAC9C,IAAI,KAAK,IAAI,UAAU;CACzB,GACA,CAAC,eAAe,GAAG,CACrB;CAEA,OACE,qBAAC,SAAD;EACE,WAAW,GACT,mBACA,oBAAoB,SACnB,WAAW,WAAW,WAAW,mBAChC,4BACF,iBAAiB,kCACjB,YAAY,6BACZ,SACF;EACO;EAVT,UAAA,CAYE,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CACE,oBAAC,SAAD;IACE,GAAI;IACJ,KAAK;IACD;IACJ,MAAK;IACK;IACA;IACV,oBAAkB;GACnB,CAAA,GACD,qBAAC,OAAD;IACE,WAAU;IACV,SAAQ;IACR,eAAY;IACZ,WAAU;IACV,MAAK;IALP,UAAA;KAOE,oBAAC,QAAD;MAAM,MAAK;MAAe,GAAE;MAAI,GAAE;MAAI,OAAM;MAAK,QAAO;MAAK,IAAG;KAAK,CAAA;KACrE,oBAAC,QAAD;MACE,WAAU;MACV,GAAE;MACF,aAAY;MACZ,eAAc;MACd,gBAAe;KAChB,CAAA;KACD,oBAAC,QAAD;MACE,WAAU;MACV,GAAE;MACF,aAAY;MACZ,eAAc;MACd,gBAAe;KAChB,CAAA;IACE;GACD,CAAA,CAAA;EAEJ,CAAA,IAAA,iBAAiB,QAAQ,eAAe,SACxC,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CACG,iBAAiB,QAChB,qBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CACG,eACA,YACC,oBAAC,QAAD;KAAM,WAAU;KAA4B,eAAY;KAAO,UAAA;IAEzD,CAAA,CAEJ;GAEP,CAAA,GAAA,eAAe,QACd,oBAAC,QAAD;IAAM,IAAI;IAAe,WAAU;IAChC,UAAA;GACG,CAAA,CAEJ;EAEH,CAAA,CAAA;;AAEX"}