@logicplanes/kaeso-ui 0.1.0

package/dist/chunks/checkbox-BgRdbfCE.js

@@ -0,0 +1,124 @@
+"use client";
+import { l as e } from "./styles-Btvg2DCf.js";
+import { t } from "./cn-CidVUKMm.js";
+import { t as n } from "./labelled-D5udSPUI.js";
+import { forwardRef as r, useId as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Checkbox as s } from "@base-ui/react/checkbox";
+import { CheckboxGroup as c } from "@base-ui/react/checkbox-group";
+//#region src/components/checkbox/checkbox.tsx
+var l = /* @__PURE__ */ e({
+	Checkbox: () => h,
+	CheckboxBox: () => f,
+	CheckboxGroup: () => g,
+	KAESO_CHECKBOX_DEFAULT_VARIANTS: () => d,
+	KAESO_CHECKBOX_VARIANTS: () => u
+}), u = { size: { md: { classes: "size-18 rounded-checkbox" } } }, d = { size: "md" }, f = /* @__PURE__ */ r(function({ checked: e, defaultChecked: n, onCheckedChange: r, indeterminate: i, disabled: c, readOnly: l, required: d, invalid: f, name: p, value: m, id: h, className: g, parent: _, "aria-label": v, "aria-describedby": y, "aria-labelledby": b, "data-force": x }, S) {
+	return /* @__PURE__ */ a(s.Root, {
+		ref: S,
+		...e === void 0 ? {} : { checked: e },
+		...n === void 0 ? {} : { defaultChecked: n },
+		...r ? { onCheckedChange: (e) => r(e) } : {},
+		...i === void 0 ? {} : { indeterminate: i },
+		...c === void 0 ? {} : { disabled: c },
+		...l === void 0 ? {} : { readOnly: l },
+		...d === void 0 ? {} : { required: d },
+		...p ? { name: p } : {},
+		...m ? { value: m } : {},
+		...h ? { id: h } : {},
+		..._ ? { parent: _ } : {},
+		...v ? { "aria-label": v } : {},
+		...y ? { "aria-describedby": y } : {},
+		...b ? { "aria-labelledby": b } : {},
+		...f ? { "aria-invalid": !0 } : {},
+		...x ? { "data-force": x } : {},
+		className: t("group/cb relative -m-3 inline-flex size-24 shrink-0 cursor-pointer items-center justify-center rounded-checkbox outline-none tap-target disabled:cursor-not-allowed", g),
+		children: /* @__PURE__ */ a("span", {
+			"aria-hidden": !0,
+			className: t("flex items-center justify-center bg-raised shadow-selector outline-2 outline-offset-2 outline-transparent transition-control", u.size.md.classes, f ? "group-focus-visible/cb:outline-focus" : "group-hover/cb:shadow-selector-hover group-focus-visible/cb:outline-focus", "group-checked/cb:bg-ink group-checked/cb:shadow-none group-indeterminate/cb:bg-ink group-indeterminate/cb:shadow-none", "group-invalid/cb:ring-invalid", "group-disabled/cb:bg-fill-1 group-disabled/cb:shadow-none group-disabled/cb:group-checked/cb:bg-fill-3"),
+			children: /* @__PURE__ */ a(s.Indicator, {
+				keepMounted: !0,
+				className: "flex items-center justify-center text-on-ink group-data-disabled/cb:text-fg-disabled",
+				children: /* @__PURE__ */ o("svg", {
+					viewBox: "0 0 12 12",
+					className: "size-12",
+					fill: "none",
+					"aria-hidden": !0,
+					children: [/* @__PURE__ */ a("path", {
+						d: "M2.5 6.25 4.9 8.5 9.5 3.75",
+						stroke: "currentColor",
+						strokeWidth: "1.75",
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						pathLength: 1,
+						className: "check-draw hidden group-data-checked/cb:block"
+					}), /* @__PURE__ */ a("path", {
+						d: "M3 6h6",
+						stroke: "currentColor",
+						strokeWidth: "1.75",
+						strokeLinecap: "round",
+						className: "hidden group-data-indeterminate/cb:block"
+					})]
+				})
+			})
+		})
+	});
+});
+process.env.NODE_ENV !== "production" && (f.displayName = "Checkbox.Box");
+var p = /* @__PURE__ */ r(function({ label: e, description: r, id: s, className: c, ...l }, u) {
+	let d = i(), p = s ?? `k-cb-${d}`;
+	if (!e) return /* @__PURE__ */ a(f, {
+		ref: u,
+		id: p,
+		className: c,
+		...l
+	});
+	let m = n(p, e, r, l);
+	return /* @__PURE__ */ o("label", {
+		htmlFor: p,
+		className: t("group/row inline-flex min-h-32 cursor-pointer items-start gap-10 py-6 select-none", l.disabled && "cursor-not-allowed", c),
+		children: [/* @__PURE__ */ a("span", {
+			className: "flex h-20 items-center",
+			children: /* @__PURE__ */ a(f, {
+				ref: u,
+				id: p,
+				...l,
+				...m.aria
+			})
+		}), /* @__PURE__ */ o("span", {
+			className: "flex flex-col",
+			children: [/* @__PURE__ */ a("span", {
+				id: m.labelId,
+				className: t("text-body text-fg", l.disabled && "text-fg-disabled"),
+				children: e
+			}), r && /* @__PURE__ */ a("span", {
+				id: m.descriptionId,
+				className: "text-small text-fg-secondary",
+				children: r
+			})]
+		})]
+	});
+});
+process.env.NODE_ENV !== "production" && (p.displayName = "Checkbox");
+var m = /* @__PURE__ */ r(function({ value: e, defaultValue: n, onValueChange: r, allValues: i, disabled: o, className: s, children: l, ...u }, d) {
+	return /* @__PURE__ */ a(c, {
+		ref: d,
+		...e === void 0 ? {} : { value: e },
+		...n === void 0 ? {} : { defaultValue: n },
+		...r ? { onValueChange: (e) => r(e) } : {},
+		...i ? { allValues: i } : {},
+		...o === void 0 ? {} : { disabled: o },
+		className: t("flex flex-col", s),
+		...u,
+		children: l
+	});
+});
+process.env.NODE_ENV !== "production" && (m.displayName = "CheckboxGroup");
+var h = /* @__PURE__ */ Object.assign(p, {
+	Box: f,
+	Group: m
+}), g = m;
+//#endregion
+export { u as a, d as i, f as n, l as o, g as r, h as t };
+
+//# sourceMappingURL=checkbox-BgRdbfCE.js.map

package/dist/chunks/checkbox-BgRdbfCE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-BgRdbfCE.js","names":["BaseCheckbox","CheckboxGroup","BaseCheckboxGroup","Checkbox","__exportAll","labelled","checkbox_exports","Checkbox$1","CheckboxBox","CheckboxGroup$1","KAESO_CHECKBOX_DEFAULT_VARIANTS","KAESO_CHECKBOX_VARIANTS","ariaLabel","describedBy","labelledBy","force","Checkbox","checked","defaultChecked","onCheckedChange","c","indeterminate","disabled","readOnly","required","name","value","id","parent","invalid","cn","className","Root","props","auto","useId","boxId","label","named","description","Group","CheckboxGroup","defaultValue","onValueChange","v","allValues"],"sources":["../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import { forwardRef, useId, type ReactNode } from \"react\";\nimport { Checkbox as BaseCheckbox } from \"@base-ui/react/checkbox\";\nimport { CheckboxGroup as BaseCheckboxGroup } from \"@base-ui/react/checkbox-group\";\nimport { cn } from \"../../utils/cn.js\";\nimport { labelled } from \"../radio/labelled.js\";\n\nexport const KAESO_CHECKBOX_VARIANTS = {\n  size: {\n    md: { classes: \"size-18 rounded-checkbox\" },\n  },\n} as const;\nexport const KAESO_CHECKBOX_DEFAULT_VARIANTS = { size: \"md\" } as const;\n\nexport interface CheckboxProps {\n  checked?: boolean | undefined;\n  defaultChecked?: boolean | undefined;\n  onCheckedChange?: ((checked: boolean) => void) | undefined;\n  indeterminate?: boolean | undefined;\n  disabled?: boolean | undefined;\n  readOnly?: boolean | undefined;\n  required?: boolean | undefined;\n  invalid?: boolean | undefined;\n  name?: string | undefined;\n  value?: string | undefined;\n  label?: ReactNode | undefined;\n  description?: ReactNode | undefined;\n  id?: string | undefined;\n  \"aria-label\"?: string | undefined;\n  \"aria-describedby\"?: string | undefined;\n  \"aria-labelledby\"?: string | undefined;\n  className?: string | undefined;\n  \"data-force\"?: string | undefined;\n}\n\nexport const CheckboxBox = /* @__PURE__ */ forwardRef<HTMLButtonElement, CheckboxProps & { parent?: boolean | undefined }>(function CheckboxBox(\n  {\n    checked,\n    defaultChecked,\n    onCheckedChange,\n    indeterminate,\n    disabled,\n    readOnly,\n    required,\n    invalid,\n    name,\n    value,\n    id,\n    className,\n    parent,\n    \"aria-label\": ariaLabel,\n    \"aria-describedby\": describedBy,\n    \"aria-labelledby\": labelledBy,\n    \"data-force\": force,\n  },\n  ref,\n) {\n  return (\n    <BaseCheckbox.Root\n      ref={ref}\n      {...(checked !== undefined ? { checked } : {})}\n      {...(defaultChecked !== undefined ? { defaultChecked } : {})}\n      {...(onCheckedChange ? { onCheckedChange: (c: boolean) => onCheckedChange(c) } : {})}\n      {...(indeterminate !== undefined ? { indeterminate } : {})}\n      {...(disabled !== undefined ? { disabled } : {})}\n      {...(readOnly !== undefined ? { readOnly } : {})}\n      {...(required !== undefined ? { required } : {})}\n      {...(name ? { name } : {})}\n      {...(value ? { value } : {})}\n      {...(id ? { id } : {})}\n      {...(parent ? { parent } : {})}\n      {...(ariaLabel ? { \"aria-label\": ariaLabel } : {})}\n      {...(describedBy ? { \"aria-describedby\": describedBy } : {})}\n      {...(labelledBy ? { \"aria-labelledby\": labelledBy } : {})}\n      {...(invalid ? { \"aria-invalid\": true } : {})}\n      {...(force ? { \"data-force\": force } : {})}\n      className={cn(\n        \"group/cb relative -m-3 inline-flex size-24 shrink-0 cursor-pointer items-center justify-center rounded-checkbox outline-none tap-target disabled:cursor-not-allowed\",\n        className,\n      )}\n    >\n      <span\n        aria-hidden\n        className={cn(\n          \"flex items-center justify-center bg-raised shadow-selector outline-2 outline-offset-2 outline-transparent transition-control\",\n          KAESO_CHECKBOX_VARIANTS.size.md.classes,\n          invalid ? \"group-focus-visible/cb:outline-focus\" : \"group-hover/cb:shadow-selector-hover group-focus-visible/cb:outline-focus\",\n          \"group-checked/cb:bg-ink group-checked/cb:shadow-none group-indeterminate/cb:bg-ink group-indeterminate/cb:shadow-none\",\n          \"group-invalid/cb:ring-invalid\",\n          \"group-disabled/cb:bg-fill-1 group-disabled/cb:shadow-none group-disabled/cb:group-checked/cb:bg-fill-3\",\n        )}\n      >\n        <BaseCheckbox.Indicator keepMounted className=\"flex items-center justify-center text-on-ink group-data-disabled/cb:text-fg-disabled\">\n          <svg viewBox=\"0 0 12 12\" className=\"size-12\" fill=\"none\" aria-hidden>\n            <path\n              d=\"M2.5 6.25 4.9 8.5 9.5 3.75\"\n              stroke=\"currentColor\"\n              strokeWidth=\"1.75\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              pathLength={1}\n              className=\"check-draw hidden group-data-checked/cb:block\"\n            />\n            <path d=\"M3 6h6\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" className=\"hidden group-data-indeterminate/cb:block\" />\n          </svg>\n        </BaseCheckbox.Indicator>\n      </span>\n    </BaseCheckbox.Root>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") CheckboxBox.displayName = \"Checkbox.Box\";\n\nconst Root = /* @__PURE__ */ forwardRef<HTMLButtonElement, CheckboxProps>(function Checkbox({ label, description, id, className, ...props }, ref) {\n  const auto = useId();\n  const boxId = id ?? `k-cb-${auto}`;\n  if (!label) return <CheckboxBox ref={ref} id={boxId} className={className} {...props} />;\n  const named = labelled(boxId, label, description, props);\n  return (\n    <label\n      htmlFor={boxId}\n      className={cn(\"group/row inline-flex min-h-32 cursor-pointer items-start gap-10 py-6 select-none\", props.disabled && \"cursor-not-allowed\", className)}\n    >\n      <span className=\"flex h-20 items-center\">\n        <CheckboxBox ref={ref} id={boxId} {...props} {...named.aria} />\n      </span>\n      <span className=\"flex flex-col\">\n        <span id={named.labelId} className={cn(\"text-body text-fg\", props.disabled && \"text-fg-disabled\")}>\n          {label}\n        </span>\n        {description && (\n          <span id={named.descriptionId} className=\"text-small text-fg-secondary\">\n            {description}\n          </span>\n        )}\n      </span>\n    </label>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") Root.displayName = \"Checkbox\";\n\nexport interface CheckboxGroupProps {\n  value?: string[] | undefined;\n  defaultValue?: string[] | undefined;\n  onValueChange?: ((value: string[]) => void) | undefined;\n  allValues?: string[] | undefined;\n  disabled?: boolean | undefined;\n  \"aria-label\"?: string | undefined;\n  \"aria-labelledby\"?: string | undefined;\n  className?: string | undefined;\n  children: ReactNode;\n}\n\nconst Group = /* @__PURE__ */ forwardRef<HTMLDivElement, CheckboxGroupProps>(function CheckboxGroup(\n  { value, defaultValue, onValueChange, allValues, disabled, className, children, ...props },\n  ref,\n) {\n  return (\n    <BaseCheckboxGroup\n      ref={ref}\n      {...(value !== undefined ? { value } : {})}\n      {...(defaultValue !== undefined ? { defaultValue } : {})}\n      {...(onValueChange ? { onValueChange: (v: string[]) => onValueChange(v) } : {})}\n      {...(allValues ? { allValues } : {})}\n      {...(disabled !== undefined ? { disabled } : {})}\n      className={cn(\"flex flex-col\", className)}\n      {...props}\n    >\n      {children}\n    </BaseCheckboxGroup>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") Group.displayName = \"CheckboxGroup\";\n\nexport const Checkbox = /* @__PURE__ */ Object.assign(Root, { Box: CheckboxBox, Group });\nexport const CheckboxGroup = Group;\n"],"mappings":"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"}