@adaptive-ds/solid-ui 0.13.0 → 0.14.0

package/dist/input/check/CheckSingle.js

@@ -1,135 +1,158 @@
-import { insert, createComponent, effect, setAttribute, className, template } from "solid-js/web";
-import { mdiCheckboxMarkedCircle, mdiCheckboxBlankCircleOutline } from "@mdi/js";
-import { For } from "solid-js";
+import { classMerge } from "../../utils/classMerge.js";
+import { classArr } from "../../utils/classArr.js";
 import { buttonVariant } from "../../interactive/button/buttonCva.js";
 import { ButtonIcon } from "../../interactive/button/ButtonIcon.js";
-import { classesGridCols3xl } from "../../static/container/classesGridCols.js";
-import { classArr } from "../../utils/classArr.js";
-import { classMerge } from "../../utils/classMerge.js";
-var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+import { classesGridCols3xl } from "../../static/grid/classesGridCols.js";
+import { classesTextMuted } from "../../classes/classesTextMuted.js";
+import { For, Show, splitProps } from "solid-js";
+import { className, createComponent, effect, insert, mergeProps as mergeProps$1, setAttribute, template } from "solid-js/web";
+import { mdiCheckboxBlankCircleOutline, mdiCheckboxMarkedCircle } from "@mdi/js";
+//#region ui/input/check/CheckSingle.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div>`), _tmpl$2 = /* @__PURE__ */ template(`<span class="flex flex-col items-start"><span>`), _tmpl$3 = /* @__PURE__ */ template(`<span>`);
 function CheckSingle(p) {
-  return (() => {
-    var _el$ = _tmpl$();
-    insert(_el$, createComponent(OptionList, {
-      get valueSignal() {
-        return p.valueSignal;
-      },
-      get getOptions() {
-        return p.getOptions;
-      },
-      get valueText() {
-        return p.valueText;
-      },
-      get variant() {
-        return p.variant;
-      },
-      get disallowDeselection() {
-        return p.disallowDeselection;
-      },
-      get optionClass() {
-        return p.optionClass;
-      },
-      get innerClass() {
-        return p.innerClass;
-      }
-    }));
-    effect((_p$) => {
-      var _v$ = p.id, _v$2 = classMerge(
-        "group border border-input",
-        "px-2 py-2",
-        "ring-offset-background",
-        "rounded-md",
-        "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
-        "flex flex-col justify-center gap-1",
-        // layout
-        p.class
-      );
-      _v$ !== _p$.e && setAttribute(_el$, "id", _p$.e = _v$);
-      _v$2 !== _p$.t && className(_el$, _p$.t = _v$2);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0
-    });
-    return _el$;
-  })();
+	const [local, others] = splitProps(p, ["class"]);
+	return (() => {
+		var _el$ = _tmpl$();
+		insert(_el$, createComponent(OptionList, mergeProps$1(others, {
+			get valueSignal() {
+				return p.valueSignal;
+			},
+			get getOptions() {
+				return p.getOptions;
+			},
+			get valueText() {
+				return p.valueText;
+			},
+			get valueTextClass() {
+				return p.valueTextClass;
+			},
+			get valueTextSubtitle() {
+				return p.valueTextSubtitle;
+			},
+			get valueTextSubtitleClass() {
+				return p.valueTextSubtitleClass;
+			},
+			get variant() {
+				return p.variant;
+			},
+			get disallowDeselection() {
+				return p.disallowDeselection;
+			},
+			get optionClass() {
+				return p.optionClass;
+			},
+			get innerClass() {
+				return p.innerClass;
+			}
+		})));
+		effect((_p$) => {
+			var _v$ = p.id, _v$2 = classMerge("group border border-input", "px-2 py-2", "ring-offset-background", "rounded-md", "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2", "flex flex-col justify-center gap-1", local.class);
+			_v$ !== _p$.e && setAttribute(_el$, "id", _p$.e = _v$);
+			_v$2 !== _p$.t && className(_el$, _p$.t = _v$2);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0
+		});
+		return _el$;
+	})();
 }
 function OptionList(p) {
-  return (() => {
-    var _el$2 = _tmpl$();
-    insert(_el$2, createComponent(For, {
-      get each() {
-        return p.getOptions();
-      },
-      children: (option) => createComponent(CheckOption, {
-        option,
-        get valueSignal() {
-          return p.valueSignal;
-        },
-        get valueText() {
-          return p.valueText;
-        },
-        get optionClass() {
-          return p.optionClass;
-        },
-        get variant() {
-          return p.variant;
-        },
-        get disallowDeselection() {
-          return p.disallowDeselection;
-        },
-        get disabled() {
-          return p.disabled;
-        }
-      })
-    }));
-    effect(() => className(_el$2, innerClass(p.getOptions().length, p.innerClass)));
-    return _el$2;
-  })();
+	return (() => {
+		var _el$2 = _tmpl$();
+		insert(_el$2, createComponent(For, {
+			get each() {
+				return p.getOptions();
+			},
+			children: (option) => createComponent(CheckOption, {
+				option,
+				get valueSignal() {
+					return p.valueSignal;
+				},
+				get valueText() {
+					return p.valueText;
+				},
+				get valueTextClass() {
+					return p.valueTextClass;
+				},
+				get valueTextSubtitle() {
+					return p.valueTextSubtitle;
+				},
+				get valueTextSubtitleClass() {
+					return p.valueTextSubtitleClass;
+				},
+				get optionClass() {
+					return p.optionClass;
+				},
+				get variant() {
+					return p.variant;
+				},
+				get disallowDeselection() {
+					return p.disallowDeselection;
+				},
+				get disabled() {
+					return p.disabled;
+				}
+			})
+		}));
+		effect(() => className(_el$2, innerClass(p.getOptions().length, p.innerClass)));
+		return _el$2;
+	})();
 }
-function innerClass(optionAmount, innerClass2) {
-  if (innerClass2) return innerClass2;
-  if (optionAmount <= 0) return "";
-  const base = "gap-x-2 gap-y-1";
-  if (optionAmount === 1) return classArr("grid grid-cols-1", base);
-  if (optionAmount === 2) return classArr("grid grid-cols-2", base);
-  return classArr(classesGridCols3xl, base);
+function innerClass(optionAmount, innerClass) {
+	if (innerClass) return innerClass;
+	if (optionAmount <= 0) return "";
+	const base = "gap-x-2 gap-y-1";
+	if (optionAmount === 1) return classArr("grid grid-cols-1", base);
+	if (optionAmount === 2) return classArr("grid grid-cols-2", base);
+	return classArr(classesGridCols3xl, base);
 }
 function CheckOption(p) {
-  const label = () => p.valueText ? p.valueText(p.option) : p.option;
-  const isSelected = () => p.valueSignal.get() === p.option;
-  return createComponent(ButtonIcon, {
-    role: "option",
-    get ["aria-selected"]() {
-      return isSelected();
-    },
-    get icon() {
-      return isSelected() ? mdiCheckboxMarkedCircle : mdiCheckboxBlankCircleOutline;
-    },
-    onClick: () => toggleOption(p, p.disallowDeselection),
-    get variant() {
-      return p.variant ?? buttonVariant.filled;
-    },
-    get ["class"]() {
-      return classMerge("justify-start text-left", p.optionClass);
-    },
-    get disabled() {
-      return p.disabled;
-    },
-    get children() {
-      return label();
-    }
-  });
+	const label = () => p.valueText ? p.valueText(p.option) : p.option;
+	const subtitle = () => p.valueTextSubtitle ? p.valueTextSubtitle(p.option) : void 0;
+	const isSelected = () => p.valueSignal.get() === p.option;
+	return createComponent(ButtonIcon, {
+		role: "option",
+		get ["aria-selected"]() {
+			return isSelected();
+		},
+		get icon() {
+			return isSelected() ? mdiCheckboxMarkedCircle : mdiCheckboxBlankCircleOutline;
+		},
+		onClick: () => toggleOption(p, p.disallowDeselection),
+		get variant() {
+			return p.variant ?? buttonVariant.filled;
+		},
+		get ["class"]() {
+			return classMerge("justify-start text-left", p.optionClass);
+		},
+		get disabled() {
+			return p.disabled;
+		},
+		get children() {
+			var _el$3 = _tmpl$2(), _el$4 = _el$3.firstChild;
+			insert(_el$4, label);
+			insert(_el$3, createComponent(Show, {
+				get when() {
+					return subtitle();
+				},
+				children: (subtitle) => (() => {
+					var _el$5 = _tmpl$3();
+					insert(_el$5, subtitle);
+					effect(() => className(_el$5, classMerge(classesTextMuted, p.valueTextSubtitleClass)));
+					return _el$5;
+				})()
+			}), null);
+			effect(() => className(_el$4, p.valueTextClass));
+			return _el$3;
+		}
+	});
 }
 function toggleOption(p, disallowDeselection) {
-  const isSelected = p.valueSignal.get() === p.option;
-  if (isSelected && !disallowDeselection) {
-    p.valueSignal.set("");
-  } else {
-    p.valueSignal.set(p.option);
-  }
+	if (p.valueSignal.get() === p.option && !disallowDeselection) p.valueSignal.set("");
+	else p.valueSignal.set(p.option);
 }
-export {
-  CheckSingle
-};
-//# sourceMappingURL=CheckSingle.js.map
+//#endregion
+export { CheckSingle };
+
+//# sourceMappingURL=CheckSingle.js.map

package/dist/input/check/CheckSingle.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckSingle.js","sources":["../../../lib/input/check/CheckSingle.tsx"],"sourcesContent":["import { mdiCheckboxBlankCircleOutline, mdiCheckboxMarkedCircle } from \"@mdi/js\"\nimport { For } from \"solid-js\"\nimport { buttonVariant } from \"~ui/interactive/button/buttonCva\"\nimport { ButtonIcon } from \"~ui/interactive/button/ButtonIcon\"\nimport { classesGridCols3xl } from \"~ui/static/container/classesGridCols\"\nimport { classArr } from \"~ui/utils/classArr\"\nimport { classMerge } from \"~ui/utils/classMerge\"\nimport type { SignalObject } from \"~ui/utils/createSignalObject\"\nimport type { MayHaveButtonVariant } from \"~ui/utils/MayHaveButtonVariant\"\nimport type { MayHaveClass } from \"~ui/utils/MayHaveClass\"\nimport type { MayHaveDisabled } from \"~ui/utils/MayHaveDisabled\"\nimport type { MayHaveId } from \"~ui/utils/MayHaveId\"\nimport type { MayHaveInnerClass } from \"~ui/utils/MayHaveInnerClass\"\n\nexport interface CheckSingleProps<T extends string>\n  extends MayHaveId,\n    MayHaveButtonVariant,\n    MayHaveClass,\n    MayHaveInnerClass,\n    MayHaveDisabled {\n  // state\n  valueSignal: SignalObject<T>\n  getOptions: () => T[]\n  valueText?: (value: T) => string\n  // behavior\n  disallowDeselection?: boolean\n  // styling\n  optionClass?: string\n}\n\nexport function CheckSingle<T extends string = string>(p: CheckSingleProps<T>) {\n  return (\n    <div\n      id={p.id}\n      class={classMerge(\n        \"group border border-input\",\n        \"px-2 py-2\",\n        \"ring-offset-background\",\n        \"rounded-md\",\n        \"focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2\",\n        \"flex flex-col justify-center gap-1\", // layout\n        p.class,\n      )}\n    >\n      <OptionList\n        valueSignal={p.valueSignal}\n        getOptions={p.getOptions}\n        valueText={p.valueText}\n        variant={p.variant}\n        disallowDeselection={p.disallowDeselection}\n        optionClass={p.optionClass}\n        innerClass={p.innerClass}\n      />\n    </div>\n  )\n}\n\ninterface OptionListProps<T extends string> extends MayHaveButtonVariant, MayHaveDisabled, MayHaveInnerClass {\n  valueSignal: SignalObject<T>\n  getOptions: () => T[]\n  valueText?: (value: T) => string\n\n  disallowDeselection?: boolean\n  optionClass?: string\n}\n\nfunction OptionList<T extends string>(p: OptionListProps<T>) {\n  return (\n    <div class={innerClass(p.getOptions().length, p.innerClass)}>\n      <For each={p.getOptions()}>\n        {(option) => (\n          <CheckOption\n            option={option}\n            valueSignal={p.valueSignal}\n            valueText={p.valueText}\n            optionClass={p.optionClass}\n            variant={p.variant}\n            disallowDeselection={p.disallowDeselection}\n            disabled={p.disabled}\n          />\n        )}\n      </For>\n    </div>\n  )\n}\n\nfunction innerClass(optionAmount: number, innerClass?: string): string {\n  if (innerClass) return innerClass\n  if (optionAmount <= 0) return \"\"\n  const base = \"gap-x-2 gap-y-1\"\n  if (optionAmount === 1) return classArr(\"grid grid-cols-1\", base)\n  if (optionAmount === 2) return classArr(\"grid grid-cols-2\", base)\n  return classArr(classesGridCols3xl, base)\n}\n\ninterface CheckOptionProps<T extends string> extends MayHaveButtonVariant, MayHaveDisabled {\n  option: T\n  valueSignal: SignalObject<T>\n  valueText?: (value: T) => string\n  disallowDeselection?: boolean\n  optionClass?: string\n}\n\nfunction CheckOption<T extends string>(p: CheckOptionProps<T>) {\n  const label = () => (p.valueText ? p.valueText(p.option) : p.option)\n  const isSelected = () => p.valueSignal.get() === p.option\n\n  return (\n    <ButtonIcon\n      role=\"option\"\n      aria-selected={isSelected()}\n      icon={isSelected() ? mdiCheckboxMarkedCircle : mdiCheckboxBlankCircleOutline}\n      // iconRight={isSelected() ? mdiCheckboxMarkedCircle : mdiCheckboxBlankCircleOutline}\n      onClick={() => toggleOption(p, p.disallowDeselection)}\n      variant={p.variant ?? buttonVariant.filled}\n      class={classMerge(\"justify-start text-left\", p.optionClass)}\n      disabled={p.disabled}\n    >\n      {label()}\n    </ButtonIcon>\n  )\n}\n\nfunction toggleOption<T extends string>(p: CheckOptionProps<T>, disallowDeselection?: boolean) {\n  const isSelected = p.valueSignal.get() === p.option\n  if (isSelected && !disallowDeselection) {\n    p.valueSignal.set(\"\" as T)\n  } else {\n    p.valueSignal.set(p.option)\n  }\n}\n"],"names":["CheckSingle","p","_el$","_tmpl$","_$insert","_$createComponent","OptionList","valueSignal","getOptions","valueText","variant","disallowDeselection","optionClass","innerClass","_$effect","_p$","_v$","id","_v$2","classMerge","class","e","_$setAttribute","t","_$className","undefined","_el$2","For","each","children","option","CheckOption","disabled","length","optionAmount","base","classArr","classesGridCols3xl","label","isSelected","get","ButtonIcon","role","icon","mdiCheckboxMarkedCircle","mdiCheckboxBlankCircleOutline","onClick","toggleOption","buttonVariant","filled","set"],"mappings":"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"}
+{"version":3,"file":"CheckSingle.js","names":["classesTextMuted","buttonVariant","ButtonIcon","classesGridCols3xl","classArr","classMerge","SignalObject","MayHaveButtonVariant","MayHaveClass","MayHaveDisabled","MayHaveId","MayHaveInnerClass","mdiCheckboxBlankCircleOutline","mdiCheckboxMarkedCircle","For","Show","splitProps","CheckSingleProps","valueSignal","T","getOptions","valueText","value","valueTextClass","valueTextSubtitle","valueTextSubtitleClass","disallowDeselection","optionClass","CheckSingle","p","local","others","_el$","_tmpl$","_$insert","_$createComponent","OptionList","_$mergeProps","variant","innerClass","_$effect","_p$","_v$","id","_v$2","class","e","_$setAttribute","t","_$className","undefined","OptionListProps","_el$2","each","children","option","CheckOption","disabled","length","optionAmount","base","CheckOptionProps","label","subtitle","isSelected","get","role","aria-selected","icon","onClick","toggleOption","filled","_el$3","_tmpl$2","_el$4","firstChild","when","_el$5","_tmpl$3","set"],"sources":["../../../ui/input/check/CheckSingle.tsx"],"sourcesContent":["import { classesTextMuted } from \"#ui/classes/classesTextMuted.js\"\nimport { buttonVariant } from \"#ui/interactive/button/buttonCva.js\"\nimport { ButtonIcon } from \"#ui/interactive/button/ButtonIcon.jsx\"\nimport { classesGridCols3xl } from \"#ui/static/grid/classesGridCols.js\"\nimport { classArr } from \"#ui/utils/classArr.js\"\nimport { classMerge } from \"#ui/utils/classMerge.js\"\nimport type { SignalObject } from \"#ui/utils/createSignalObject.js\"\nimport type { MayHaveButtonVariant } from \"#ui/utils/MayHaveButtonVariant.js\"\nimport type { MayHaveClass } from \"#ui/utils/MayHaveClass.js\"\nimport type { MayHaveDisabled } from \"#ui/utils/MayHaveDisabled.js\"\nimport type { MayHaveId } from \"#ui/utils/MayHaveId.js\"\nimport type { MayHaveInnerClass } from \"#ui/utils/MayHaveInnerClass.js\"\nimport { mdiCheckboxBlankCircleOutline, mdiCheckboxMarkedCircle } from \"@mdi/js\"\nimport { For, Show, splitProps } from \"solid-js\"\n\nexport interface CheckSingleProps<T extends string>\n  extends MayHaveId, MayHaveButtonVariant, MayHaveClass, MayHaveInnerClass, MayHaveDisabled {\n  // state\n  valueSignal: SignalObject<T>\n  getOptions: () => T[]\n  valueText?: (value: T) => string\n  valueTextClass?: string\n  valueTextSubtitle?: (value: T) => string | undefined\n  valueTextSubtitleClass?: string\n  // behavior\n  disallowDeselection?: boolean\n  // styling\n  optionClass?: string\n}\n\nexport function CheckSingle<T extends string = string>(p: CheckSingleProps<T>) {\n  const [local, others] = splitProps(p, [\"class\"])\n  return (\n    <div\n      id={p.id}\n      class={classMerge(\n        \"group border border-input\",\n        \"px-2 py-2\",\n        \"ring-offset-background\",\n        \"rounded-md\",\n        \"focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2\",\n        \"flex flex-col justify-center gap-1\", // layout\n        local.class,\n      )}\n    >\n      <OptionList\n        {...others}\n        valueSignal={p.valueSignal}\n        getOptions={p.getOptions}\n        valueText={p.valueText}\n        valueTextClass={p.valueTextClass}\n        valueTextSubtitle={p.valueTextSubtitle}\n        valueTextSubtitleClass={p.valueTextSubtitleClass}\n        variant={p.variant}\n        disallowDeselection={p.disallowDeselection}\n        optionClass={p.optionClass}\n        innerClass={p.innerClass}\n      />\n    </div>\n  )\n}\n\ninterface OptionListProps<T extends string> extends MayHaveButtonVariant, MayHaveDisabled, MayHaveInnerClass {\n  valueSignal: SignalObject<T>\n  getOptions: () => T[]\n  valueText?: (value: T) => string\n  valueTextClass?: string\n  valueTextSubtitle?: (value: T) => string | undefined\n  valueTextSubtitleClass?: string\n  disallowDeselection?: boolean\n  optionClass?: string\n}\n\nfunction OptionList<T extends string>(p: OptionListProps<T>) {\n  return (\n    <div class={innerClass(p.getOptions().length, p.innerClass)}>\n      <For each={p.getOptions()}>\n        {(option) => (\n          <CheckOption\n            option={option}\n            valueSignal={p.valueSignal}\n            valueText={p.valueText}\n            valueTextClass={p.valueTextClass}\n            valueTextSubtitle={p.valueTextSubtitle}\n            valueTextSubtitleClass={p.valueTextSubtitleClass}\n            optionClass={p.optionClass}\n            variant={p.variant}\n            disallowDeselection={p.disallowDeselection}\n            disabled={p.disabled}\n          />\n        )}\n      </For>\n    </div>\n  )\n}\n\nfunction innerClass(optionAmount: number, innerClass?: string): string {\n  if (innerClass) return innerClass\n  if (optionAmount <= 0) return \"\"\n  const base = \"gap-x-2 gap-y-1\"\n  if (optionAmount === 1) return classArr(\"grid grid-cols-1\", base)\n  if (optionAmount === 2) return classArr(\"grid grid-cols-2\", base)\n  return classArr(classesGridCols3xl, base)\n}\n\ninterface CheckOptionProps<T extends string> extends MayHaveButtonVariant, MayHaveDisabled {\n  option: T\n  valueSignal: SignalObject<T>\n  valueText?: (value: T) => string\n  valueTextClass?: string\n  valueTextSubtitle?: (value: T) => string | undefined\n  valueTextSubtitleClass?: string\n  disallowDeselection?: boolean\n  optionClass?: string\n}\n\nfunction CheckOption<T extends string>(p: CheckOptionProps<T>) {\n  const label = () => (p.valueText ? p.valueText(p.option) : p.option)\n  const subtitle = () => (p.valueTextSubtitle ? p.valueTextSubtitle(p.option) : undefined)\n  const isSelected = () => p.valueSignal.get() === p.option\n\n  return (\n    <ButtonIcon\n      role=\"option\"\n      aria-selected={isSelected()}\n      icon={isSelected() ? mdiCheckboxMarkedCircle : mdiCheckboxBlankCircleOutline}\n      // iconRight={isSelected() ? mdiCheckboxMarkedCircle : mdiCheckboxBlankCircleOutline}\n      onClick={() => toggleOption(p, p.disallowDeselection)}\n      variant={p.variant ?? buttonVariant.filled}\n      class={classMerge(\"justify-start text-left\", p.optionClass)}\n      disabled={p.disabled}\n    >\n      <span class=\"flex flex-col items-start\">\n        <span class={p.valueTextClass}>{label()}</span>\n        <Show when={subtitle()}>\n          {(subtitle) => <span class={classMerge(classesTextMuted, p.valueTextSubtitleClass)}>{subtitle()}</span>}\n        </Show>\n      </span>\n    </ButtonIcon>\n  )\n}\n\nfunction toggleOption<T extends string>(p: CheckOptionProps<T>, disallowDeselection?: boolean) {\n  const isSelected = p.valueSignal.get() === p.option\n  if (isSelected && !disallowDeselection) {\n    p.valueSignal.set(\"\" as T)\n  } else {\n    p.valueSignal.set(p.option)\n  }\n}\n"],"mappings":"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"}

package/dist/input/check/Checkbox.d.ts

@@ -1,7 +1,7 @@
+import { MayHaveChildren } from '#ui/utils/MayHaveChildren.js';
+import { MayHaveClass } from '#ui/utils/MayHaveClass.js';
+import { MayHaveDisabled } from '#ui/utils/MayHaveDisabled.js';
 import { ComponentProps } from 'solid-js';
-import { MayHaveChildren } from '../../utils/MayHaveChildren';
-import { MayHaveClass } from '../../utils/MayHaveClass';
-import { MayHaveDisabled } from '../../utils/MayHaveDisabled';
 interface CheckboxProps extends MayHaveClass, MayHaveChildren, MayHaveDisabled, ComponentProps<"checkbox"> {
     id?: string;
     checked: boolean;

package/dist/input/check/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../lib/input/check/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,UAAU,CAAA;AAG1D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAChE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAGhE,UAAU,aAAc,SAAQ,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,cAAc,CAAC,UAAU,CAAC;IACxG,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;CACrC;AAED,wBAAgB,QAAQ,CAAC,CAAC,EAAE,aAAa,kCAwDxC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../ui/input/check/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAA;AACnE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAC7D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAA;AAGnE,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,UAAU,CAAA;AAE1D,UAAU,aAAc,SAAQ,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,cAAc,CAAC,UAAU,CAAC;IACxG,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;CACrC;AAED,wBAAgB,QAAQ,CAAC,CAAC,EAAE,aAAa,kCAwDxC"}

package/dist/input/check/Checkbox.js

@@ -1,89 +1,83 @@
-import { delegateEvents, spread, mergeProps, memo, insert, createComponent, effect, className, setAttribute, template } from "solid-js/web";
-import { mdiCheckboxMarked, mdiCheckboxBlankOutline } from "@mdi/js";
-import { splitProps } from "solid-js";
-import { classesDisabledDirectly } from "../../classes/classesDisabledDirectly.js";
-import { Icon } from "../../static/icon/Icon.js";
 import { classMerge } from "../../utils/classMerge.js";
+import "../../classes/classesDisabledDirectly.js";
+import { Icon } from "../../static/icon/Icon.js";
+import { splitProps } from "solid-js";
+import { className, createComponent, delegateEvents, effect, insert, memo, mergeProps as mergeProps$1, setAttribute, spread, template } from "solid-js/web";
+import { mdiCheckboxBlankOutline, mdiCheckboxMarked } from "@mdi/js";
+//#region ui/input/check/Checkbox.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div><input type=checkbox class="sr-only invisible"><div role=checkbox tabindex=0></div><label>`);
 function Checkbox(p) {
-  const [s, rest] = splitProps(p, ["id", "checked", "onChange", "disabled", "class", "children"]);
-  const handleToggle = () => {
-    if (s.disabled) return;
-    s.onChange(!s.checked);
-  };
-  return (() => {
-    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling;
-    _el$2.addEventListener("change", (e) => s.onChange(e.currentTarget.checked));
-    spread(_el$2, mergeProps({
-      get id() {
-        return s.id;
-      },
-      get checked() {
-        return s.checked;
-      },
-      get disabled() {
-        return s.disabled;
-      },
-      get ["aria-describedby"]() {
-        return memo(() => !!s.id)() ? `${s.id}-error` : void 0;
-      }
-    }, rest), false, false);
-    _el$3.$$keydown = (e) => {
-      if (e.key === " " || e.key === "Enter") {
-        e.preventDefault();
-        handleToggle();
-      }
-    };
-    _el$3.$$click = handleToggle;
-    insert(_el$3, createComponent(Icon, {
-      get path() {
-        return s.checked ? mdiCheckboxMarked : mdiCheckboxBlankOutline;
-      },
-      "class": "size-6 text-current"
-    }));
-    _el$4.$$click = (e) => {
-      e.preventDefault();
-      handleToggle();
-    };
-    insert(_el$4, () => s.children);
-    effect((_p$) => {
-      var _v$ = classMerge("flex items-start gap-1", s.class), _v$2 = classMerge(
-        "size-6",
-        // sizing + interaction
-        "cursor-pointer",
-        // cursor
-        "flex items-center justify-center",
-        // layout children
-        s.disabled && classesDisabledDirectly
-        // disabled state
-      ), _v$3 = s.checked, _v$4 = s.id ? `${s.id}-label` : void 0, _v$5 = s.id ? `${s.id}-label` : void 0, _v$6 = s.id, _v$7 = classMerge(
-        "cursor-pointer",
-        // interaction
-        s.disabled && classesDisabledDirectly
-        // disabled state
-      );
-      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-      _v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
-      _v$3 !== _p$.a && setAttribute(_el$3, "aria-checked", _p$.a = _v$3);
-      _v$4 !== _p$.o && setAttribute(_el$3, "aria-labelledby", _p$.o = _v$4);
-      _v$5 !== _p$.i && setAttribute(_el$4, "id", _p$.i = _v$5);
-      _v$6 !== _p$.n && setAttribute(_el$4, "for", _p$.n = _v$6);
-      _v$7 !== _p$.s && className(_el$4, _p$.s = _v$7);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0,
-      o: void 0,
-      i: void 0,
-      n: void 0,
-      s: void 0
-    });
-    return _el$;
-  })();
+	const [s, rest] = splitProps(p, [
+		"id",
+		"checked",
+		"onChange",
+		"disabled",
+		"class",
+		"children"
+	]);
+	const handleToggle = () => {
+		if (s.disabled) return;
+		s.onChange(!s.checked);
+	};
+	return (() => {
+		var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling;
+		_el$2.addEventListener("change", (e) => s.onChange(e.currentTarget.checked));
+		spread(_el$2, mergeProps$1({
+			get id() {
+				return s.id;
+			},
+			get checked() {
+				return s.checked;
+			},
+			get disabled() {
+				return s.disabled;
+			},
+			get ["aria-describedby"]() {
+				return memo(() => !!s.id)() ? `${s.id}-error` : void 0;
+			}
+		}, rest), false, false);
+		_el$3.$$keydown = (e) => {
+			if (e.key === " " || e.key === "Enter") {
+				e.preventDefault();
+				handleToggle();
+			}
+		};
+		_el$3.$$click = handleToggle;
+		insert(_el$3, createComponent(Icon, {
+			get path() {
+				return s.checked ? mdiCheckboxMarked : mdiCheckboxBlankOutline;
+			},
+			"class": "size-6 text-current"
+		}));
+		_el$4.$$click = (e) => {
+			e.preventDefault();
+			handleToggle();
+		};
+		insert(_el$4, () => s.children);
+		effect((_p$) => {
+			var _v$ = classMerge("flex items-start gap-1", s.class), _v$2 = classMerge("size-6", "cursor-pointer", "flex items-center justify-center", s.disabled && "cursor-not-allowed opacity-70"), _v$3 = s.checked, _v$4 = s.id ? `${s.id}-label` : void 0, _v$5 = s.id ? `${s.id}-label` : void 0, _v$6 = s.id, _v$7 = classMerge("cursor-pointer", s.disabled && "cursor-not-allowed opacity-70");
+			_v$ !== _p$.e && className(_el$, _p$.e = _v$);
+			_v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
+			_v$3 !== _p$.a && setAttribute(_el$3, "aria-checked", _p$.a = _v$3);
+			_v$4 !== _p$.o && setAttribute(_el$3, "aria-labelledby", _p$.o = _v$4);
+			_v$5 !== _p$.i && setAttribute(_el$4, "id", _p$.i = _v$5);
+			_v$6 !== _p$.n && setAttribute(_el$4, "for", _p$.n = _v$6);
+			_v$7 !== _p$.s && className(_el$4, _p$.s = _v$7);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0,
+			i: void 0,
+			n: void 0,
+			s: void 0
+		});
+		return _el$;
+	})();
 }
 delegateEvents(["click", "keydown"]);
-export {
-  Checkbox
-};
-//# sourceMappingURL=Checkbox.js.map
+//#endregion
+export { Checkbox };
+
+//# sourceMappingURL=Checkbox.js.map

package/dist/input/check/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../lib/input/check/Checkbox.tsx"],"sourcesContent":["import { mdiCheckboxBlankOutline, mdiCheckboxMarked } from \"@mdi/js\"\nimport { splitProps, type ComponentProps } from \"solid-js\"\nimport { classesDisabledDirectly } from \"~ui/classes/classesDisabledDirectly\"\nimport { Icon } from \"~ui/static/icon/Icon\"\nimport type { MayHaveChildren } from \"~ui/utils/MayHaveChildren\"\nimport type { MayHaveClass } from \"~ui/utils/MayHaveClass\"\nimport type { MayHaveDisabled } from \"~ui/utils/MayHaveDisabled\"\nimport { classMerge } from \"~ui/utils/classMerge\"\n\ninterface CheckboxProps extends MayHaveClass, MayHaveChildren, MayHaveDisabled, ComponentProps<\"checkbox\"> {\n  id?: string\n  checked: boolean\n  onChange: (checked: boolean) => void\n}\n\nexport function Checkbox(p: CheckboxProps) {\n  const [s, rest] = splitProps(p, [\"id\", \"checked\", \"onChange\", \"disabled\", \"class\", \"children\"])\n  const handleToggle = () => {\n    if (s.disabled) return\n    s.onChange(!s.checked)\n  }\n\n  return (\n    <div class={classMerge(\"flex items-start gap-1\", s.class)}>\n      <input\n        id={s.id}\n        type=\"checkbox\"\n        checked={s.checked}\n        onChange={(e) => s.onChange(e.currentTarget.checked)}\n        class=\"sr-only invisible\"\n        disabled={s.disabled}\n        aria-describedby={s.id ? `${s.id}-error` : undefined}\n        {...rest}\n      />\n      <div\n        onClick={handleToggle}\n        class={classMerge(\n          \"size-6\", // sizing + interaction\n          \"cursor-pointer\", // cursor\n          \"flex items-center justify-center\", // layout children\n          s.disabled && classesDisabledDirectly, // disabled state\n        )}\n        role=\"checkbox\"\n        aria-checked={s.checked}\n        aria-labelledby={s.id ? `${s.id}-label` : undefined}\n        tabindex={0}\n        onKeyDown={(e) => {\n          if (e.key === \" \" || e.key === \"Enter\") {\n            e.preventDefault()\n            handleToggle()\n          }\n        }}\n      >\n        <Icon path={s.checked ? mdiCheckboxMarked : mdiCheckboxBlankOutline} class=\"size-6 text-current\" />\n      </div>\n      <label\n        id={s.id ? `${s.id}-label` : undefined}\n        for={s.id}\n        class={classMerge(\n          \"cursor-pointer\", // interaction\n          s.disabled && classesDisabledDirectly, // disabled state\n        )}\n        onClick={(e) => {\n          e.preventDefault()\n          handleToggle()\n        }}\n      >\n        {s.children}\n      </label>\n    </div>\n  )\n}\n"],"names":["Checkbox","p","s","rest","splitProps","handleToggle","disabled","onChange","checked","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_el$4","addEventListener","e","currentTarget","_$spread","_$mergeProps","id","_$memo","undefined","$$keydown","key","preventDefault","$$click","_$insert","_$createComponent","Icon","path","mdiCheckboxMarked","mdiCheckboxBlankOutline","children","_$effect","_p$","_v$","classMerge","class","_v$2","classesDisabledDirectly","_v$3","_v$4","_v$5","_v$6","_v$7","_$className","t","a","_$setAttribute","o","i","n","_$delegateEvents"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","names":["classesDisabledDirectly","Icon","MayHaveChildren","MayHaveClass","MayHaveDisabled","classMerge","mdiCheckboxBlankOutline","mdiCheckboxMarked","splitProps","ComponentProps","CheckboxProps","id","checked","onChange","Checkbox","p","s","rest","handleToggle","disabled","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_el$4","addEventListener","e","currentTarget","_$spread","_$mergeProps","aria-describedby","_$memo","undefined","$$keydown","key","preventDefault","$$click","_$insert","_$createComponent","path","children","_$effect","_p$","_v$","class","_v$2","_v$3","_v$4","_v$5","_v$6","_v$7","_$className","t","a","_$setAttribute","o","i","n","_$delegateEvents"],"sources":["../../../ui/input/check/Checkbox.tsx"],"sourcesContent":["import { classesDisabledDirectly } from \"#ui/classes/classesDisabledDirectly.js\"\nimport { Icon } from \"#ui/static/icon/Icon.jsx\"\nimport type { MayHaveChildren } from \"#ui/utils/MayHaveChildren.js\"\nimport type { MayHaveClass } from \"#ui/utils/MayHaveClass.js\"\nimport type { MayHaveDisabled } from \"#ui/utils/MayHaveDisabled.js\"\nimport { classMerge } from \"#ui/utils/classMerge.js\"\nimport { mdiCheckboxBlankOutline, mdiCheckboxMarked } from \"@mdi/js\"\nimport { splitProps, type ComponentProps } from \"solid-js\"\n\ninterface CheckboxProps extends MayHaveClass, MayHaveChildren, MayHaveDisabled, ComponentProps<\"checkbox\"> {\n  id?: string\n  checked: boolean\n  onChange: (checked: boolean) => void\n}\n\nexport function Checkbox(p: CheckboxProps) {\n  const [s, rest] = splitProps(p, [\"id\", \"checked\", \"onChange\", \"disabled\", \"class\", \"children\"])\n  const handleToggle = () => {\n    if (s.disabled) return\n    s.onChange(!s.checked)\n  }\n\n  return (\n    <div class={classMerge(\"flex items-start gap-1\", s.class)}>\n      <input\n        id={s.id}\n        type=\"checkbox\"\n        checked={s.checked}\n        onChange={(e) => s.onChange(e.currentTarget.checked)}\n        class=\"sr-only invisible\"\n        disabled={s.disabled}\n        aria-describedby={s.id ? `${s.id}-error` : undefined}\n        {...rest}\n      />\n      <div\n        onClick={handleToggle}\n        class={classMerge(\n          \"size-6\", // sizing + interaction\n          \"cursor-pointer\", // cursor\n          \"flex items-center justify-center\", // layout children\n          s.disabled && classesDisabledDirectly, // disabled state\n        )}\n        role=\"checkbox\"\n        aria-checked={s.checked}\n        aria-labelledby={s.id ? `${s.id}-label` : undefined}\n        tabindex={0}\n        onKeyDown={(e) => {\n          if (e.key === \" \" || e.key === \"Enter\") {\n            e.preventDefault()\n            handleToggle()\n          }\n        }}\n      >\n        <Icon path={s.checked ? mdiCheckboxMarked : mdiCheckboxBlankOutline} class=\"size-6 text-current\" />\n      </div>\n      <label\n        id={s.id ? `${s.id}-label` : undefined}\n        for={s.id}\n        class={classMerge(\n          \"cursor-pointer\", // interaction\n          s.disabled && classesDisabledDirectly, // disabled state\n        )}\n        onClick={(e) => {\n          e.preventDefault()\n          handleToggle()\n        }}\n      >\n        {s.children}\n      </label>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAeA,SAAgBc,SAASC,GAAkB;CACzC,MAAM,CAACC,GAAGC,QAAQT,WAAWO,GAAG;EAAC;EAAM;EAAW;EAAY;EAAY;EAAS;EAAW,CAAC;CAC/F,MAAMG,qBAAqB;AACzB,MAAIF,EAAEG,SAAU;AAChBH,IAAEH,SAAS,CAACG,EAAEJ,QAAQ;;AAGxB,eAAA;EAAA,IAAAQ,OAAAC,QAAA,EAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAG,aAAAC,QAAAF,MAAAC;AAAAH,QAAAK,iBAAA,WAMiBC,MAAMZ,EAAEH,SAASe,EAAEC,cAAcjB,QAAQ,CAAA;AAAAkB,SAAAR,OAAAS,aAAA;GAAA,IAHpDpB,KAAE;AAAA,WAAEK,EAAEL;;GAAE,IAERC,UAAO;AAAA,WAAEI,EAAEJ;;GAAO,IAGlBO,WAAQ;AAAA,WAAEH,EAAEG;;GAAQ,KAAA,sBAAA;AAAA,WACFc,WAAA,CAAA,CAAAjB,EAAEL,GAAE,EAAA,GAAG,GAAGK,EAAEL,GAAE,UAAWuB,KAAAA;;GAAS,EAChDjB,KAAI,EAAA,OAAA,MAAA;AAAAO,QAAAW,aAcIP,MAAM;AAChB,OAAIA,EAAEQ,QAAQ,OAAOR,EAAEQ,QAAQ,SAAS;AACtCR,MAAES,gBAAgB;AAClBnB,kBAAc;;;AAEjBM,QAAAc,UAhBQpB;AAAYqB,SAAAf,OAAAgB,gBAkBpBvC,MAAI;GAAA,IAACwC,OAAI;AAAA,WAAEzB,EAAEJ,UAAUL,oBAAoBD;;GAAuB,SAAA;GAAA,CAAA,CAAA;AAAAoB,QAAAY,WASzDV,MAAM;AACdA,KAAES,gBAAgB;AAClBnB,iBAAc;;AACfqB,SAAAb,aAEAV,EAAE0B,SAAQ;AAAAC,UAAAC,QAAA;GAAA,IAAAC,MA5CHxC,WAAW,0BAA0BW,EAAE8B,MAAM,EAAAC,OAa9C1C,WACL,UACA,kBACA,oCACAW,EAAEG,YAAAA,gCACH,EAAA6B,OAEahC,EAAEJ,SAAOqC,OACNjC,EAAEL,KAAK,GAAGK,EAAEL,GAAE,UAAWuB,KAAAA,GAASgB,OAY/ClC,EAAEL,KAAK,GAAGK,EAAEL,GAAE,UAAWuB,KAAAA,GAASiB,OACjCnC,EAAEL,IAAEyC,OACF/C,WACL,kBACAW,EAAEG,YAAAA,gCACH;AAAA0B,WAAAD,IAAAhB,KAAAyB,UAAAjC,MAAAwB,IAAAhB,IAAAiB,IAAA;AAAAE,YAAAH,IAAAU,KAAAD,UAAA7B,OAAAoB,IAAAU,IAAAP,KAAA;AAAAC,YAAAJ,IAAAW,KAAAC,aAAAhC,OAAA,gBAAAoB,IAAAW,IAAAP,KAAA;AAAAC,YAAAL,IAAAa,KAAAD,aAAAhC,OAAA,mBAAAoB,IAAAa,IAAAR,KAAA;AAAAC,YAAAN,IAAAc,KAAAF,aAAA9B,OAAA,MAAAkB,IAAAc,IAAAR,KAAA;AAAAC,YAAAP,IAAAe,KAAAH,aAAA9B,OAAA,OAAAkB,IAAAe,IAAAR,KAAA;AAAAC,YAAAR,IAAA5B,KAAAqC,UAAA3B,OAAAkB,IAAA5B,IAAAoC,KAAA;AAAA,UAAAR;KAAA;GAAAhB,GAAAM,KAAAA;GAAAoB,GAAApB,KAAAA;GAAAqB,GAAArB,KAAAA;GAAAuB,GAAAvB,KAAAA;GAAAwB,GAAAxB,KAAAA;GAAAyB,GAAAzB,KAAAA;GAAAlB,GAAAkB,KAAAA;GAAA,CAAA;AAAA,SAAAd;KAAA;;AAURwC,eAAA,CAAA,SAAA,UAAA,CAAA"}

package/dist/input/fieldset/Fieldset.d.ts

@@ -1,7 +1,7 @@
+import { MayHaveChildren } from '#ui/utils/MayHaveChildren.js';
+import { MayHaveSubtitle } from '#ui/utils/MayHaveSubtitle.js';
+import { MayHaveTitle } from '#ui/utils/MayHaveTitle.js';
 import { Component, JSXElement } from 'solid-js';
-import { MayHaveChildren } from '../../utils/MayHaveChildren';
-import { MayHaveSubtitle } from '../../utils/MayHaveSubtitle';
-import { MayHaveTitle } from '../../utils/MayHaveTitle';
 export interface FieldsetProps extends MayHaveChildren, MayHaveTitle, MayHaveSubtitle {
     class?: string;
     titleChildren?: JSXElement;

package/dist/input/fieldset/Fieldset.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Fieldset.d.ts","sourceRoot":"","sources":["../../../lib/input/fieldset/Fieldset.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAGrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAChE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAChE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AAG1D,MAAM,WAAW,aAAc,SAAQ,eAAe,EAAE,YAAY,EAAE,eAAe;IACnF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,UAAU,CAAA;CAC3B;AAED,eAAO,MAAM,QAAQ,EAAE,SAAS,CAAC,aAAa,CAS7C,CAAA"}
+{"version":3,"file":"Fieldset.d.ts","sourceRoot":"","sources":["../../../ui/input/fieldset/Fieldset.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAA;AACnE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAA;AACnE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAC7D,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAIrD,MAAM,WAAW,aAAc,SAAQ,eAAe,EAAE,YAAY,EAAE,eAAe;IACnF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,UAAU,CAAA;CAC3B;AAED,eAAO,MAAM,QAAQ,EAAE,SAAS,CAAC,aAAa,CAS7C,CAAA"}