@adaptive-ds/solid-ui 0.13.1 → 0.14.0

package/dist/interactive/button/ButtonIconOnly.js

@@ -1,71 +1,68 @@
-import { spread, mergeProps, insert, memo, createComponent, template } from "solid-js/web";
-import { splitProps } from "solid-js";
-import { classesDisabledDirectly } from "../../classes/classesDisabledDirectly.js";
+import { isLoading } from "../../utils/MayHaveIsLoading.js";
+import { isDisabled } from "../../utils/MayHaveDisabledAccessor.js";
+import { classesButtonClickAnimation } from "./classesButtonClickAnimation.js";
 import { buttonCvaIconOnly } from "./buttonCva.js";
+import "../../classes/classesDisabledDirectly.js";
 import { buttonIconCva } from "./buttonIconCva.js";
-import { classesButtonClickAnimation } from "./classesButtonClickAnimation.js";
 import { Icon } from "../../static/icon/Icon.js";
-import { isDisabled } from "../../utils/MayHaveDisabledAccessor.js";
-import { isLoading } from "../../utils/MayHaveIsLoading.js";
+import { splitProps } from "solid-js";
+import { createComponent, insert, memo, mergeProps as mergeProps$1, spread, template } from "solid-js/web";
+//#region ui/interactive/button/ButtonIconOnly.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<button>`);
-const ButtonIconOnly = (p) => {
-  const [s, rest] = splitProps(p, [
-    // button
-    "variant",
-    "size",
-    "class",
-    // state
-    "isLoading",
-    // icons
-    "title",
-    "icon",
-    "iconRight",
-    "iconClass",
-    // default
-    "type",
-    "disabled",
-    "children"
-  ]);
-  return (() => {
-    var _el$ = _tmpl$();
-    spread(_el$, mergeProps({
-      get ["class"]() {
-        return buttonCvaIconOnly(s.variant, isLoading(p), isDisabled(p), classesButtonClickAnimation, s.class);
-      },
-      get title() {
-        return s.title;
-      },
-      get type() {
-        return s.type ?? "button";
-      }
-    }, rest), false, true);
-    insert(_el$, (() => {
-      var _c$ = memo(() => !!!s.iconRight);
-      return () => _c$() && createComponent(Icon, {
-        get path() {
-          return s.icon;
-        },
-        get ["class"]() {
-          return buttonIconCva(s.variant, s.children && "mr-2", s.isLoading && "animate-spin-faster", s.disabled && classesDisabledDirectly, s.iconClass);
-        }
-      });
-    })(), null);
-    insert(_el$, () => s.children, null);
-    insert(_el$, (() => {
-      var _c$2 = memo(() => !!s.iconRight);
-      return () => _c$2() && createComponent(Icon, {
-        get path() {
-          return s.icon;
-        },
-        get ["class"]() {
-          return buttonIconCva(s.variant, s.iconClass);
-        }
-      });
-    })(), null);
-    return _el$;
-  })();
-};
-export {
-  ButtonIconOnly
+var ButtonIconOnly = (p) => {
+	const [s, rest] = splitProps(p, [
+		"variant",
+		"size",
+		"class",
+		"isLoading",
+		"title",
+		"icon",
+		"iconRight",
+		"iconClass",
+		"type",
+		"disabled",
+		"children"
+	]);
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps$1({
+			get ["class"]() {
+				return buttonCvaIconOnly(s.variant, isLoading(p), isDisabled(p), classesButtonClickAnimation, s.class);
+			},
+			get title() {
+				return s.title;
+			},
+			get type() {
+				return s.type ?? "button";
+			}
+		}, rest), false, true);
+		insert(_el$, (() => {
+			var _c$ = memo(() => !!!s.iconRight);
+			return () => _c$() && createComponent(Icon, {
+				get path() {
+					return s.icon;
+				},
+				get ["class"]() {
+					return buttonIconCva(s.variant, s.children && "mr-2", s.isLoading && "animate-spin-faster", s.disabled && "cursor-not-allowed opacity-70", s.iconClass);
+				}
+			});
+		})(), null);
+		insert(_el$, () => s.children, null);
+		insert(_el$, (() => {
+			var _c$2 = memo(() => !!s.iconRight);
+			return () => _c$2() && createComponent(Icon, {
+				get path() {
+					return s.icon;
+				},
+				get ["class"]() {
+					return buttonIconCva(s.variant, s.iconClass);
+				}
+			});
+		})(), null);
+		return _el$;
+	})();
 };
-//# sourceMappingURL=ButtonIconOnly.js.map
+//#endregion
+export { ButtonIconOnly };
+
+//# sourceMappingURL=ButtonIconOnly.js.map

package/dist/interactive/button/ButtonIconOnly.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonIconOnly.js","sources":["../../../lib/interactive/button/ButtonIconOnly.tsx"],"sourcesContent":["import { type Component, type ComponentProps, splitProps } from \"solid-js\"\nimport { classesDisabledDirectly } from \"~ui/classes/classesDisabledDirectly\"\nimport { buttonCvaIconOnly, type ButtonCvaProps } from \"~ui/interactive/button/buttonCva\"\nimport { buttonIconCva } from \"~ui/interactive/button/buttonIconCva\"\nimport { classesButtonClickAnimation } from \"~ui/interactive/button/classesButtonClickAnimation\"\nimport { Icon } from \"~ui/static/icon/Icon\"\nimport type { HasIcon } from \"~ui/utils/HasIcon\"\nimport type { HasTitle } from \"~ui/utils/HasTitle\"\nimport type { MayHaveChildren } from \"~ui/utils/MayHaveChildren\"\nimport { isDisabled } from \"~ui/utils/MayHaveDisabledAccessor\"\nimport { isLoading, type MayHaveIsLoading } from \"~ui/utils/MayHaveIsLoading\"\n\nexport interface ButtonIconOnlyProps\n  extends Omit<ComponentProps<\"button\">, \"title\">,\n    ButtonCvaProps,\n    HasTitle,\n    HasIcon,\n    MayHaveIsLoading,\n    MayHaveChildren {\n  iconRight?: boolean\n}\n\nexport const ButtonIconOnly: Component<ButtonIconOnlyProps> = (p) => {\n  const [s, rest] = splitProps(p, [\n    // button\n    \"variant\",\n    \"size\",\n    \"class\",\n    // state\n    \"isLoading\",\n    // icons\n    \"title\",\n    \"icon\",\n    \"iconRight\",\n    \"iconClass\",\n    // default\n    \"type\",\n    \"disabled\",\n    \"children\",\n  ])\n  return (\n    <button\n      class={buttonCvaIconOnly(s.variant, isLoading(p), isDisabled(p), classesButtonClickAnimation, s.class)}\n      title={s.title}\n      type={s.type ?? \"button\"}\n      {...rest}\n    >\n      {!s.iconRight && (\n        <Icon\n          path={s.icon}\n          class={buttonIconCva(\n            s.variant,\n            s.children && \"mr-2\",\n            s.isLoading && \"animate-spin-faster\",\n            s.disabled && classesDisabledDirectly,\n            s.iconClass,\n          )}\n        />\n      )}\n      {s.children}\n      {s.iconRight && <Icon path={s.icon} class={buttonIconCva(s.variant, s.iconClass)} />}\n    </button>\n  )\n}\n"],"names":["ButtonIconOnly","p","s","rest","splitProps","_el$","_tmpl$","_$spread","_$mergeProps","buttonCvaIconOnly","variant","isLoading","isDisabled","classesButtonClickAnimation","class","title","type","_$insert","_c$","_$memo","iconRight","_$createComponent","Icon","path","icon","buttonIconCva","children","disabled","classesDisabledDirectly","iconClass","_c$2"],"mappings":";;;;;;;;;;AAsBO,MAAMA,iBAAkDC,CAAAA,MAAM;AACnE,QAAM,CAACC,GAAGC,IAAI,IAAIC,WAAWH,GAAG;AAAA;AAAA,IAE9B;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AACD,UAAA,MAAA;AAAA,QAAAI,OAAAC,OAAAA;AAAAC,WAAAF,MAAAG,WAAA;AAAA,MAAA,KAAA,OAAA,IAAA;AAAA,eAEWC,kBAAkBP,EAAEQ,SAASC,UAAUV,CAAC,GAAGW,WAAWX,CAAC,GAAGY,6BAA6BX,EAAEY,KAAK;AAAA,MAAC;AAAA,MAAA,IACtGC,QAAK;AAAA,eAAEb,EAAEa;AAAAA,MAAK;AAAA,MAAA,IACdC,OAAI;AAAA,eAAEd,EAAEc,QAAQ;AAAA,MAAQ;AAAA,IAAA,GACpBb,IAAI,GAAA,OAAA,IAAA;AAAAc,WAAAZ,OAAA,MAAA;AAAA,UAAAa,MAAAC,aAEP,CAACjB,EAAEkB,SAAS;AAAA,aAAA,MAAZF,IAAAA,KAAAG,gBACEC,MAAI;AAAA,QAAA,IACHC,OAAI;AAAA,iBAAErB,EAAEsB;AAAAA,QAAI;AAAA,QAAA,KAAA,OAAA,IAAA;AAAA,iBACLC,cACLvB,EAAEQ,SACFR,EAAEwB,YAAY,QACdxB,EAAES,aAAa,uBACfT,EAAEyB,YAAYC,yBACd1B,EAAE2B,SACJ;AAAA,QAAC;AAAA,MAAA,CAAA;AAAA,IAEJ,GAAA,GAAA,IAAA;AAAAZ,WAAAZ,MAAA,MACAH,EAAEwB,UAAQ,IAAA;AAAAT,WAAAZ,OAAA,MAAA;AAAA,UAAAyB,OAAAX,KAAA,MAAA,CAAA,CACVjB,EAAEkB,SAAS;AAAA,aAAA,MAAXU,KAAAA,KAAAT,gBAAgBC,MAAI;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAErB,EAAEsB;AAAAA,QAAI;AAAA,QAAA,KAAA,OAAA,IAAA;AAAA,iBAASC,cAAcvB,EAAEQ,SAASR,EAAE2B,SAAS;AAAA,QAAC;AAAA,MAAA,CAAA;AAAA,IAAI,GAAA,GAAA,IAAA;AAAA,WAAAxB;AAAAA,EAAA,GAAA;AAG1F;"}
+{"version":3,"file":"ButtonIconOnly.js","names":["classesDisabledDirectly","buttonCvaIconOnly","ButtonCvaProps","buttonIconCva","classesButtonClickAnimation","Icon","HasIcon","HasTitle","MayHaveChildren","isDisabled","isLoading","MayHaveIsLoading","Component","ComponentProps","splitProps","ButtonIconOnlyProps","Omit","iconRight","ButtonIconOnly","p","s","rest","_el$","_tmpl$","_$spread","_$mergeProps","class","variant","title","type","_$insert","_c$","_$memo","_$createComponent","path","icon","children","disabled","iconClass","_c$2"],"sources":["../../../ui/interactive/button/ButtonIconOnly.tsx"],"sourcesContent":["import { classesDisabledDirectly } from \"#ui/classes/classesDisabledDirectly.js\"\nimport { buttonCvaIconOnly, type ButtonCvaProps } from \"#ui/interactive/button/buttonCva.js\"\nimport { buttonIconCva } from \"#ui/interactive/button/buttonIconCva.js\"\nimport { classesButtonClickAnimation } from \"#ui/interactive/button/classesButtonClickAnimation.js\"\nimport { Icon } from \"#ui/static/icon/Icon.jsx\"\nimport type { HasIcon } from \"#ui/utils/HasIcon.js\"\nimport type { HasTitle } from \"#ui/utils/HasTitle.js\"\nimport type { MayHaveChildren } from \"#ui/utils/MayHaveChildren.js\"\nimport { isDisabled } from \"#ui/utils/MayHaveDisabledAccessor.js\"\nimport { isLoading, type MayHaveIsLoading } from \"#ui/utils/MayHaveIsLoading.js\"\nimport { type Component, type ComponentProps, splitProps } from \"solid-js\"\n\nexport interface ButtonIconOnlyProps\n  extends Omit<ComponentProps<\"button\">, \"title\">,\n    ButtonCvaProps,\n    HasTitle,\n    HasIcon,\n    MayHaveIsLoading,\n    MayHaveChildren {\n  iconRight?: boolean\n}\n\nexport const ButtonIconOnly: Component<ButtonIconOnlyProps> = (p) => {\n  const [s, rest] = splitProps(p, [\n    // button\n    \"variant\",\n    \"size\",\n    \"class\",\n    // state\n    \"isLoading\",\n    // icons\n    \"title\",\n    \"icon\",\n    \"iconRight\",\n    \"iconClass\",\n    // default\n    \"type\",\n    \"disabled\",\n    \"children\",\n  ])\n  return (\n    <button\n      class={buttonCvaIconOnly(s.variant, isLoading(p), isDisabled(p), classesButtonClickAnimation, s.class)}\n      title={s.title}\n      type={s.type ?? \"button\"}\n      {...rest}\n    >\n      {!s.iconRight && (\n        <Icon\n          path={s.icon}\n          class={buttonIconCva(\n            s.variant,\n            s.children && \"mr-2\",\n            s.isLoading && \"animate-spin-faster\",\n            s.disabled && classesDisabledDirectly,\n            s.iconClass,\n          )}\n        />\n      )}\n      {s.children}\n      {s.iconRight && <Icon path={s.icon} class={buttonIconCva(s.variant, s.iconClass)} />}\n    </button>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAsBA,IAAakB,kBAAkDC,MAAM;CACnE,MAAM,CAACC,GAAGC,QAAQP,WAAWK,GAAG;EAE9B;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EACD,CAAC;AACF,eAAA;EAAA,IAAAG,OAAAC,QAAA;AAAAC,SAAAF,MAAAG,aAAA;GAAA,KAAA,WAAA;AAAA,WAEWxB,kBAAkBmB,EAAEO,SAASjB,UAAUS,EAAE,EAAEV,WAAWU,EAAE,EAAEf,6BAA6BgB,EAAEM,MAAM;;GAAA,IACtGE,QAAK;AAAA,WAAER,EAAEQ;;GAAK,IACdC,OAAI;AAAA,WAAET,EAAES,QAAQ;;GAAQ,EACpBR,KAAI,EAAA,OAAA,KAAA;AAAAS,SAAAR,aAAA;GAAA,IAAAS,MAAAC,WAAA,CAAA,CAEP,CAACZ,EAAEH,UAAS;AAAA,gBAAZc,KAAA,IAAAE,gBACE5B,MAAI;IAAA,IACH6B,OAAI;AAAA,YAAEd,EAAEe;;IAAI,KAAA,WAAA;AAAA,YACLhC,cACLiB,EAAEO,SACFP,EAAEgB,YAAY,QACdhB,EAAEV,aAAa,uBACfU,EAAEiB,YAAAA,iCACFjB,EAAEkB,UACH;;IAAA,CAEJ;MAAA,EAAA,KAAA;AAAAR,SAAAR,YACAF,EAAEgB,UAAQ,KAAA;AAAAN,SAAAR,aAAA;GAAA,IAAAiB,OAAAP,WAAA,CAAA,CACVZ,EAAEH,UAAS;AAAA,gBAAXsB,MAAA,IAAAN,gBAAgB5B,MAAI;IAAA,IAAC6B,OAAI;AAAA,YAAEd,EAAEe;;IAAI,KAAA,WAAA;AAAA,YAAShC,cAAciB,EAAEO,SAASP,EAAEkB,UAAU;;IAAA,CAAI;MAAA,EAAA,KAAA;AAAA,SAAAhB;KAAA"}

package/dist/interactive/button/buttonCva.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buttonCva.d.ts","sourceRoot":"","sources":["../../../lib/interactive/button/buttonCva.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,aAAa,CAAA;AACtD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;CAqBhB,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,UAAU,CAAA;AAChD,eAAO,MAAM,UAAU;;;;;;CAMb,CAAA;AAEV,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB,CAAA;AA6HD,wBAAgB,UAAU,CAAC,OAAO,EAAE,aAAa,EAAE,GAAG,aAAa,EAAE,CAAC,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,IAAI,GAAG,CAAC,CAAC,EAAE,UAE/G;AAED,wBAAgB,UAAU,CACxB,OAAO,GAAE,aAAmC,EAC5C,IAAI,GAAE,UAAU,GAAG,IAAkB,EACrC,GAAG,aAAa,EAAE,CAAC,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,IAAI,GAAG,CAAC,CAAC,EAAE,UAK9D;AAWD,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,aAAa,YAAsB,EAC5C,SAAS,EAAE,OAAO,GAAG,SAAS,EAC9B,UAAU,EAAE,OAAO,GAAG,SAAS,EAC/B,GAAG,aAAa,EAAE,CAAC,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,IAAI,GAAG,CAAC,CAAC,EAAE,UAW9D"}
+{"version":3,"file":"buttonCva.d.ts","sourceRoot":"","sources":["../../../ui/interactive/button/buttonCva.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,aAAa,CAAA;AACtD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;CAqBhB,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,UAAU,CAAA;AAChD,eAAO,MAAM,UAAU;;;;;;CAMb,CAAA;AAEV,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB,CAAA;AA6HD,wBAAgB,UAAU,CAAC,OAAO,EAAE,aAAa,EAAE,GAAG,aAAa,EAAE,CAAC,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,IAAI,GAAG,CAAC,CAAC,EAAE,UAE/G;AAED,wBAAgB,UAAU,CACxB,OAAO,GAAE,aAAmC,EAC5C,IAAI,GAAE,UAAU,GAAG,IAAkB,EACrC,GAAG,aAAa,EAAE,CAAC,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,IAAI,GAAG,CAAC,CAAC,EAAE,UAK9D;AAWD,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,aAAa,YAAsB,EAC5C,SAAS,EAAE,OAAO,GAAG,SAAS,EAC9B,UAAU,EAAE,OAAO,GAAG,SAAS,EAC/B,GAAG,aAAa,EAAE,CAAC,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,IAAI,GAAG,CAAC,CAAC,EAAE,UAW9D"}

package/dist/interactive/button/buttonCva.js

@@ -1,247 +1,76 @@
-import { classesButtonClickAnimation } from "./classesButtonClickAnimation.js";
-import { classesButtonDisabled } from "./classesButtonDisabled.js";
-import { classArr } from "../../utils/classArr.js";
 import { classMerge } from "../../utils/classMerge.js";
-const buttonVariant = {
-  none: "none",
-  // transparent bg
-  outline: "outline",
-  ghost: "ghost",
-  link: "link",
-  // filled black/white/gray
-  filled: "filled",
-  subtle: "subtle",
-  contrast: "contrast",
-  // filled colors
-  filledYellow: "filledYellow",
-  filledAmber: "filledAmber",
-  filledOrange: "filledOrange",
-  filledRed: "filledRed",
-  filledGreen: "filledGreen",
-  filledSky: "filledSky",
-  filledBlue: "filledBlue",
-  filledIndigo: "filledIndigo",
-  // outlined colors
-  outlineRed: "outlineRed"
+import { classArr } from "../../utils/classArr.js";
+import { classesButtonClickAnimation } from "./classesButtonClickAnimation.js";
+import "./classesButtonDisabled.js";
+//#region ui/interactive/button/buttonCva.ts
+var buttonVariant = {
+	none: "none",
+	outline: "outline",
+	ghost: "ghost",
+	link: "link",
+	filled: "filled",
+	subtle: "subtle",
+	contrast: "contrast",
+	filledYellow: "filledYellow",
+	filledAmber: "filledAmber",
+	filledOrange: "filledOrange",
+	filledRed: "filledRed",
+	filledGreen: "filledGreen",
+	filledSky: "filledSky",
+	filledBlue: "filledBlue",
+	filledIndigo: "filledIndigo",
+	outlineRed: "outlineRed"
 };
-const buttonSize = {
-  none: "none",
-  minimal: "minimal",
-  sm: "sm",
-  default: "default",
-  lg: "lg"
+var buttonSize = {
+	none: "none",
+	minimal: "minimal",
+	sm: "sm",
+	default: "default",
+	lg: "lg"
 };
-const baseClasses = classArr(
-  "inline-flex",
-  // layout
-  "font-medium",
-  // text
-  "items-center justify-center",
-  // layout children
-  "rounded-md ring-offset-background",
-  // rounded, rings
-  "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-  // focus
-  "transition-colors",
-  // animation
-  "group",
-  "cursor-pointer"
-);
-const variantClasses = {
-  //
-  // transparent bg
-  //
-  none: "",
-  outline: classArr(
-    "bg-transparent dark:bg-transparent",
-    "dark:text-slate-100",
-    // text
-    "hover:bg-slate-100",
-    // bg hover
-    "border border-slate-200 dark:border-slate-700 dark:hover:bg-slate-900"
-    // border
-  ),
-  ghost: classArr(
-    "dark:text-slate-100 dark:hover:text-slate-100",
-    // text
-    "bg-transparent dark:bg-transparent",
-    // bg
-    "data-[state=open]:bg-transparent dark:data-[state=open]:bg-transparent",
-    // bg data
-    "hover:bg-slate-100 dark:hover:bg-slate-800"
-    // bg hover
-  ),
-  link: classArr(
-    "text-slate-900 dark:text-slate-100",
-    // text
-    "underline-offset-4 hover:underline ",
-    // underline
-    "bg-transparent dark:bg-transparent",
-    // bg
-    "hover:bg-transparent dark:hover:bg-transparent"
-    // bg hover
-  ),
-  //
-  // filled grayscale
-  //
-  filled: classArr(
-    "dark:text-slate-100",
-    // text
-    "bg-white dark:bg-black",
-    // bg
-    "hover:bg-slate-50 dark:hover:bg-slate-900"
-    // bg hover
-  ),
-  subtle: classArr(
-    "text-slate-900 dark:text-slate-100",
-    // text
-    "bg-slate-100 dark:bg-slate-700",
-    // bg
-    "hover:bg-slate-200 dark:hover:bg-slate-600"
-    // bg hover
-  ),
-  contrast: classArr(
-    "text-white dark:text-slate-900 dark:hover:text-slate-900",
-    // text
-    "bg-slate-900 dark:bg-slate-50",
-    // bg
-    "hover:bg-slate-700 dark:hover:bg-slate-300"
-    // bg hover
-  ),
-  //
-  // filled colors
-  //
-  filledYellow: classArr(
-    "text-white",
-    // text
-    "bg-yellow-500 dark:bg-yellow-800 ",
-    // bg
-    "hover:bg-yellow-700 dark:hover:bg-yellow-600",
-    // bg hover
-    "focus:ring-yellow-400 dark:focus:ring-yellow-400"
-    // focus
-  ),
-  filledAmber: classArr(
-    "text-white",
-    // text
-    "bg-amber-500 dark:bg-amber-800 ",
-    // bg
-    "hover:bg-amber-700 dark:hover:bg-amber-600",
-    // bg hover
-    "focus:ring-amber-400 dark:focus:ring-amber-400"
-    // focus
-  ),
-  filledOrange: classArr(
-    "text-white",
-    // text
-    "bg-orange-500 dark:bg-orange-800 ",
-    // bg
-    "hover:bg-orange-700 dark:hover:bg-orange-600",
-    // bg hover
-    "focus:ring-orange-400 dark:focus:ring-orange-400"
-    // focus
-  ),
-  filledRed: classArr(
-    "text-white",
-    // text
-    "bg-red-500 dark:bg-red-700",
-    // bg
-    "hover:bg-red-600 dark:hover:bg-red-600",
-    // bg hover
-    "focus:ring-red-400 dark:focus:ring-red-400"
-    // focus
-  ),
-  filledGreen: classArr(
-    "text-white",
-    // text
-    "bg-green-500 hover:bg-green-700 dark:hover:bg-green-700",
-    // bg
-    "focus:ring-green-400 dark:focus:ring-green-400"
-    // focus
-  ),
-  filledSky: classArr(
-    "text-white",
-    // text
-    "bg-sky-500 hover:bg-sky-700 dark:hover:bg-sky-700",
-    // bg
-    "focus:ring-sky-400 dark:focus:ring-sky-400"
-    // focus
-  ),
-  filledIndigo: classArr(
-    "text-white",
-    // text
-    "bg-indigo-500 dark:bg-indigo-800 ",
-    // bg
-    "hover:bg-indigo-700 dark:hover:bg-indigo-600",
-    // bg hover
-    "focus:ring-indigo-400 dark:focus:ring-indigo-400"
-    // focus
-  ),
-  filledBlue: classArr(
-    "text-white",
-    // text
-    "bg-blue-500 dark:bg-blue-800 ",
-    // bg
-    "hover:bg-blue-700 dark:hover:bg-blue-600",
-    // bg hover
-    "focus:ring-blue-400 dark:focus:ring-blue-400"
-    // focus
-  ),
-  //
-  // outline toast colors
-  //
-  outlineRed: classArr(
-    "text-red-500 dark:text-red-500",
-    // text
-    "border border-red-200 dark:border-red-700",
-    // border
-    "bg-transparent",
-    // bg
-    "hover:bg-red-100 dark:hover:bg-red-950",
-    // bg hover
-    "focus:ring-red-400 dark:focus:ring-red-400"
-    // focus
-  )
+var baseClasses = classArr("inline-flex", "font-medium", "items-center justify-center", "rounded-md ring-offset-background", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "transition-colors", "group", "cursor-pointer");
+var variantClasses = {
+	none: "",
+	outline: classArr("bg-transparent dark:bg-transparent", "dark:text-slate-100", "hover:bg-slate-100", "border border-slate-200 dark:border-slate-700 dark:hover:bg-slate-900"),
+	ghost: classArr("dark:text-slate-100 dark:hover:text-slate-100", "bg-transparent dark:bg-transparent", "data-[state=open]:bg-transparent dark:data-[state=open]:bg-transparent", "hover:bg-slate-100 dark:hover:bg-slate-800"),
+	link: classArr("text-slate-900 dark:text-slate-100", "underline-offset-4 hover:underline ", "bg-transparent dark:bg-transparent", "hover:bg-transparent dark:hover:bg-transparent"),
+	filled: classArr("dark:text-slate-100", "bg-white dark:bg-black", "hover:bg-slate-50 dark:hover:bg-slate-900"),
+	subtle: classArr("text-slate-900 dark:text-slate-100", "bg-slate-100 dark:bg-slate-700", "hover:bg-slate-200 dark:hover:bg-slate-600"),
+	contrast: classArr("text-white dark:text-slate-900 dark:hover:text-slate-900", "bg-slate-900 dark:bg-slate-50", "hover:bg-slate-700 dark:hover:bg-slate-300"),
+	filledYellow: classArr("text-white", "bg-yellow-500 dark:bg-yellow-800 ", "hover:bg-yellow-700 dark:hover:bg-yellow-600", "focus:ring-yellow-400 dark:focus:ring-yellow-400"),
+	filledAmber: classArr("text-white", "bg-amber-500 dark:bg-amber-800 ", "hover:bg-amber-700 dark:hover:bg-amber-600", "focus:ring-amber-400 dark:focus:ring-amber-400"),
+	filledOrange: classArr("text-white", "bg-orange-500 dark:bg-orange-800 ", "hover:bg-orange-700 dark:hover:bg-orange-600", "focus:ring-orange-400 dark:focus:ring-orange-400"),
+	filledRed: classArr("text-white", "bg-red-500 dark:bg-red-700", "hover:bg-red-600 dark:hover:bg-red-600", "focus:ring-red-400 dark:focus:ring-red-400"),
+	filledGreen: classArr("text-white", "bg-green-500 hover:bg-green-700 dark:hover:bg-green-700", "focus:ring-green-400 dark:focus:ring-green-400"),
+	filledSky: classArr("text-white", "bg-sky-500 hover:bg-sky-700 dark:hover:bg-sky-700", "focus:ring-sky-400 dark:focus:ring-sky-400"),
+	filledIndigo: classArr("text-white", "bg-indigo-500 dark:bg-indigo-800 ", "hover:bg-indigo-700 dark:hover:bg-indigo-600", "focus:ring-indigo-400 dark:focus:ring-indigo-400"),
+	filledBlue: classArr("text-white", "bg-blue-500 dark:bg-blue-800 ", "hover:bg-blue-700 dark:hover:bg-blue-600", "focus:ring-blue-400 dark:focus:ring-blue-400"),
+	outlineRed: classArr("text-red-500 dark:text-red-500", "border border-red-200 dark:border-red-700", "bg-transparent", "hover:bg-red-100 dark:hover:bg-red-950", "focus:ring-red-400 dark:focus:ring-red-400")
 };
-const sizeClasses = {
-  none: "",
-  minimal: "rounded-none",
-  sm: "px-3",
-  default: "py-2 px-3",
-  lg: "px-8 py-4 text-lg"
+var sizeClasses = {
+	none: "",
+	minimal: "rounded-none",
+	sm: "px-3",
+	default: "py-2 px-3",
+	lg: "px-8 py-4 text-lg"
 };
-const defaultSize = buttonSize.default;
+var defaultSize = buttonSize.default;
 function buttonCva1(variant, ...customClasses) {
-  return buttonCva2(variant, null, ...customClasses);
+	return buttonCva2(variant, null, ...customClasses);
 }
 function buttonCva2(variant = buttonVariant.ghost, size = defaultSize, ...customClasses) {
-  const v = variant;
-  const s = size ?? defaultSize;
-  return classMerge(baseClasses, variantClasses[v], sizeClasses[s], combinedClasses(v, s), customClasses);
+	const v = variant;
+	const s = size ?? defaultSize;
+	return classMerge(baseClasses, variantClasses[v], sizeClasses[s], combinedClasses(v, s), customClasses);
 }
 function combinedClasses(variant, size) {
-  const variantGroup1 = variant === buttonVariant.outline || variant === buttonVariant.filledYellow || variant === buttonVariant.outlineRed;
-  if (variantGroup1 && size === buttonSize.lg) {
-    return "border-2";
-  }
-  return null;
+	if ((variant === buttonVariant.outline || variant === buttonVariant.filledYellow || variant === buttonVariant.outlineRed) && size === buttonSize.lg) return "border-2";
+	return null;
 }
 function buttonCvaIconOnly(variant = buttonVariant.ghost, isLoading, isDisabled, ...customClasses) {
-  const classes = buttonCva2(
-    variant,
-    buttonSize.none,
-    classesButtonClickAnimation,
-    "rounded-full p-2.5",
-    (isDisabled || isLoading) && classesButtonDisabled,
-    ...customClasses
-  );
-  return classes;
+	return buttonCva2(variant, buttonSize.none, classesButtonClickAnimation, "rounded-full p-2.5", (isDisabled || isLoading) && "cursor-not-allowed opacity-70", ...customClasses);
 }
-export {
-  buttonCva1,
-  buttonCva2,
-  buttonCvaIconOnly,
-  buttonSize,
-  buttonVariant
-};
-//# sourceMappingURL=buttonCva.js.map
+//#endregion
+export { buttonCva1, buttonCva2, buttonCvaIconOnly, buttonSize, buttonVariant };
+
+//# sourceMappingURL=buttonCva.js.map

package/dist/interactive/button/buttonCva.js.map

@@ -1 +1 @@
-{"version":3,"file":"buttonCva.js","sources":["../../../lib/interactive/button/buttonCva.ts"],"sourcesContent":["import { classesButtonClickAnimation } from \"~ui/interactive/button/classesButtonClickAnimation\"\nimport { classesButtonDisabled } from \"~ui/interactive/button/classesButtonDisabled\"\nimport { classArr } from \"~ui/utils/classArr\"\nimport { classMerge } from \"~ui/utils/classMerge\"\n\nexport type ButtonVariant = keyof typeof buttonVariant\nexport const buttonVariant = {\n  none: \"none\",\n  // transparent bg\n  outline: \"outline\",\n  ghost: \"ghost\",\n  link: \"link\",\n  // filled black/white/gray\n  filled: \"filled\",\n  subtle: \"subtle\",\n  contrast: \"contrast\",\n  // filled colors\n  filledYellow: \"filledYellow\",\n  filledAmber: \"filledAmber\",\n  filledOrange: \"filledOrange\",\n  filledRed: \"filledRed\",\n  filledGreen: \"filledGreen\",\n  filledSky: \"filledSky\",\n  filledBlue: \"filledBlue\",\n  filledIndigo: \"filledIndigo\",\n  // outlined colors\n  outlineRed: \"outlineRed\",\n} as const\n\nexport type ButtonSize = keyof typeof buttonSize\nexport const buttonSize = {\n  none: \"none\",\n  minimal: \"minimal\",\n  sm: \"sm\",\n  default: \"default\",\n  lg: \"lg\",\n} as const\n\nexport type ButtonCvaProps = {\n  variant?: ButtonVariant\n  size?: ButtonSize\n}\n\nconst baseClasses = classArr(\n  \"inline-flex\", // layout\n  \"font-medium\", // text\n  \"items-center justify-center\", // layout children\n  \"rounded-md ring-offset-background\", // rounded, rings\n  \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\", // focus\n  \"transition-colors\", // animation\n  \"group\",\n  \"cursor-pointer\",\n)\n\nconst variantClasses = {\n  //\n  // transparent bg\n  //\n  none: \"\",\n  outline: classArr(\n    \"bg-transparent dark:bg-transparent\",\n    \"dark:text-slate-100\", // text\n    \"hover:bg-slate-100\", // bg hover\n    \"border border-slate-200 dark:border-slate-700 dark:hover:bg-slate-900\", // border\n  ),\n  ghost: classArr(\n    \"dark:text-slate-100 dark:hover:text-slate-100\", // text\n    \"bg-transparent dark:bg-transparent\", // bg\n    \"data-[state=open]:bg-transparent dark:data-[state=open]:bg-transparent\", // bg data\n    \"hover:bg-slate-100 dark:hover:bg-slate-800\", // bg hover\n  ),\n  link: classArr(\n    \"text-slate-900 dark:text-slate-100\", // text\n    \"underline-offset-4 hover:underline \", // underline\n    \"bg-transparent dark:bg-transparent\", // bg\n    \"hover:bg-transparent dark:hover:bg-transparent\", // bg hover\n  ),\n  //\n  // filled grayscale\n  //\n  filled: classArr(\n    \"dark:text-slate-100\", // text\n    \"bg-white dark:bg-black\", // bg\n    \"hover:bg-slate-50 dark:hover:bg-slate-900\", // bg hover\n  ),\n  subtle: classArr(\n    \"text-slate-900 dark:text-slate-100\", // text\n    \"bg-slate-100 dark:bg-slate-700\", // bg\n    \"hover:bg-slate-200 dark:hover:bg-slate-600\", // bg hover\n  ),\n  contrast: classArr(\n    \"text-white dark:text-slate-900 dark:hover:text-slate-900\", // text\n    \"bg-slate-900 dark:bg-slate-50\", // bg\n    \"hover:bg-slate-700 dark:hover:bg-slate-300\", // bg hover\n  ),\n  //\n  // filled colors\n  //\n  filledYellow: classArr(\n    \"text-white\", // text\n    \"bg-yellow-500 dark:bg-yellow-800 \", // bg\n    \"hover:bg-yellow-700 dark:hover:bg-yellow-600\", // bg hover\n    \"focus:ring-yellow-400 dark:focus:ring-yellow-400\", // focus\n  ),\n  filledAmber: classArr(\n    \"text-white\", // text\n    \"bg-amber-500 dark:bg-amber-800 \", // bg\n    \"hover:bg-amber-700 dark:hover:bg-amber-600\", // bg hover\n    \"focus:ring-amber-400 dark:focus:ring-amber-400\", // focus\n  ),\n  filledOrange: classArr(\n    \"text-white\", // text\n    \"bg-orange-500 dark:bg-orange-800 \", // bg\n    \"hover:bg-orange-700 dark:hover:bg-orange-600\", // bg hover\n    \"focus:ring-orange-400 dark:focus:ring-orange-400\", // focus\n  ),\n  filledRed: classArr(\n    \"text-white\", // text\n    \"bg-red-500 dark:bg-red-700\", // bg\n    \"hover:bg-red-600 dark:hover:bg-red-600\", // bg hover\n    \"focus:ring-red-400 dark:focus:ring-red-400\", // focus\n  ),\n  filledGreen: classArr(\n    \"text-white\", // text\n    \"bg-green-500 hover:bg-green-700 dark:hover:bg-green-700\", // bg\n    \"focus:ring-green-400 dark:focus:ring-green-400\", // focus\n  ),\n  filledSky: classArr(\n    \"text-white\", // text\n    \"bg-sky-500 hover:bg-sky-700 dark:hover:bg-sky-700\", // bg\n    \"focus:ring-sky-400 dark:focus:ring-sky-400\", // focus\n  ),\n  filledIndigo: classArr(\n    \"text-white\", // text\n    \"bg-indigo-500 dark:bg-indigo-800 \", // bg\n    \"hover:bg-indigo-700 dark:hover:bg-indigo-600\", // bg hover\n    \"focus:ring-indigo-400 dark:focus:ring-indigo-400\", // focus\n  ),\n  filledBlue: classArr(\n    \"text-white\", // text\n    \"bg-blue-500 dark:bg-blue-800 \", // bg\n    \"hover:bg-blue-700 dark:hover:bg-blue-600\", // bg hover\n    \"focus:ring-blue-400 dark:focus:ring-blue-400\", // focus\n  ),\n  //\n  // outline toast colors\n  //\n  outlineRed: classArr(\n    \"text-red-500 dark:text-red-500\", // text\n    \"border border-red-200 dark:border-red-700\", // border\n    \"bg-transparent\", // bg\n    \"hover:bg-red-100 dark:hover:bg-red-950\", // bg hover\n    \"focus:ring-red-400 dark:focus:ring-red-400\", // focus\n  ),\n} as const satisfies Record<ButtonVariant, string>\n\nconst sizeClasses = {\n  none: \"\",\n  minimal: \"rounded-none\",\n  sm: \"px-3\",\n  default: \"py-2 px-3\",\n  lg: \"px-8 py-4 text-lg\",\n} as const satisfies Record<ButtonSize, string>\n\nconst defaultSize = buttonSize.default\n\nexport function buttonCva1(variant: ButtonVariant, ...customClasses: (string | boolean | undefined | null | 0)[]) {\n  return buttonCva2(variant, null, ...customClasses)\n}\n\nexport function buttonCva2(\n  variant: ButtonVariant = buttonVariant.ghost,\n  size: ButtonSize | null = defaultSize,\n  ...customClasses: (string | boolean | undefined | null | 0)[]\n) {\n  const v = variant\n  const s = size ?? defaultSize\n  return classMerge(baseClasses, variantClasses[v], sizeClasses[s], combinedClasses(v, s), customClasses)\n}\n\nfunction combinedClasses(variant: ButtonVariant, size: ButtonSize) {\n  const variantGroup1 =\n    variant === buttonVariant.outline || variant === buttonVariant.filledYellow || variant === buttonVariant.outlineRed\n  if (variantGroup1 && size === buttonSize.lg) {\n    return \"border-2\"\n  }\n  return null\n}\n\nexport function buttonCvaIconOnly(\n  variant: ButtonVariant = buttonVariant.ghost,\n  isLoading: boolean | undefined,\n  isDisabled: boolean | undefined,\n  ...customClasses: (string | boolean | undefined | null | 0)[]\n) {\n  const classes = buttonCva2(\n    variant,\n    buttonSize.none,\n    classesButtonClickAnimation,\n    \"rounded-full p-2.5\",\n    (isDisabled || isLoading) && classesButtonDisabled,\n    ...customClasses,\n  )\n  return classes\n}\n"],"names":[],"mappings":";;;;AAMO,MAAM,gBAAgB;AAAA,EAC3B,MAAM;AAAA;AAAA,EAEN,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AAAA;AAAA,EAEN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,UAAU;AAAA;AAAA,EAEV,cAAc;AAAA,EACd,aAAa;AAAA,EACb,cAAc;AAAA,EACd,WAAW;AAAA,EACX,aAAa;AAAA,EACb,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,cAAc;AAAA;AAAA,EAEd,YAAY;AACd;AAGO,MAAM,aAAa;AAAA,EACxB,MAAM;AAAA,EACN,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,IAAI;AACN;AAOA,MAAM,cAAc;AAAA,EAClB;AAAA;AAAA,EACA;AAAA;AAAA,EACA;AAAA;AAAA,EACA;AAAA;AAAA,EACA;AAAA;AAAA,EACA;AAAA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA,EAIrB,MAAM;AAAA,EACN,SAAS;AAAA,IACP;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA,IACL;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,EAAA;AAAA,EAEF,MAAM;AAAA,IACJ;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EAKF,QAAQ;AAAA,IACN;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,EAAA;AAAA,EAEF,QAAQ;AAAA,IACN;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,EAAA;AAAA,EAEF,UAAU;AAAA,IACR;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EAKF,cAAc;AAAA,IACZ;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,EAAA;AAAA,EAEF,aAAa;AAAA,IACX;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,EAAA;AAAA,EAEF,cAAc;AAAA,IACZ;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,EAAA;AAAA,EAEF,WAAW;AAAA,IACT;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,EAAA;AAAA,EAEF,aAAa;AAAA,IACX;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,EAAA;AAAA,EAEF,WAAW;AAAA,IACT;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,EAAA;AAAA,EAEF,cAAc;AAAA,IACZ;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,EAAA;AAAA,EAEF,YAAY;AAAA,IACV;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EAKF,YAAY;AAAA,IACV;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,EAAA;AAEJ;AAEA,MAAM,cAAc;AAAA,EAClB,MAAM;AAAA,EACN,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,IAAI;AACN;AAEA,MAAM,cAAc,WAAW;AAExB,SAAS,WAAW,YAA2B,eAA4D;AAChH,SAAO,WAAW,SAAS,MAAM,GAAG,aAAa;AACnD;AAEO,SAAS,WACd,UAAyB,cAAc,OACvC,OAA0B,gBACvB,eACH;AACA,QAAM,IAAI;AACV,QAAM,IAAI,QAAQ;AAClB,SAAO,WAAW,aAAa,eAAe,CAAC,GAAG,YAAY,CAAC,GAAG,gBAAgB,GAAG,CAAC,GAAG,aAAa;AACxG;AAEA,SAAS,gBAAgB,SAAwB,MAAkB;AACjE,QAAM,gBACJ,YAAY,cAAc,WAAW,YAAY,cAAc,gBAAgB,YAAY,cAAc;AAC3G,MAAI,iBAAiB,SAAS,WAAW,IAAI;AAC3C,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAEO,SAAS,kBACd,UAAyB,cAAc,OACvC,WACA,eACG,eACH;AACA,QAAM,UAAU;AAAA,IACd;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,KACC,cAAc,cAAc;AAAA,IAC7B,GAAG;AAAA,EAAA;AAEL,SAAO;AACT;"}
+{"version":3,"file":"buttonCva.js","names":[],"sources":["../../../ui/interactive/button/buttonCva.ts"],"sourcesContent":["import { classesButtonClickAnimation } from \"#ui/interactive/button/classesButtonClickAnimation.js\"\nimport { classesButtonDisabled } from \"#ui/interactive/button/classesButtonDisabled.js\"\nimport { classArr } from \"#ui/utils/classArr.js\"\nimport { classMerge } from \"#ui/utils/classMerge.js\"\n\nexport type ButtonVariant = keyof typeof buttonVariant\nexport const buttonVariant = {\n  none: \"none\",\n  // transparent bg\n  outline: \"outline\",\n  ghost: \"ghost\",\n  link: \"link\",\n  // filled black/white/gray\n  filled: \"filled\",\n  subtle: \"subtle\",\n  contrast: \"contrast\",\n  // filled colors\n  filledYellow: \"filledYellow\",\n  filledAmber: \"filledAmber\",\n  filledOrange: \"filledOrange\",\n  filledRed: \"filledRed\",\n  filledGreen: \"filledGreen\",\n  filledSky: \"filledSky\",\n  filledBlue: \"filledBlue\",\n  filledIndigo: \"filledIndigo\",\n  // outlined colors\n  outlineRed: \"outlineRed\",\n} as const\n\nexport type ButtonSize = keyof typeof buttonSize\nexport const buttonSize = {\n  none: \"none\",\n  minimal: \"minimal\",\n  sm: \"sm\",\n  default: \"default\",\n  lg: \"lg\",\n} as const\n\nexport type ButtonCvaProps = {\n  variant?: ButtonVariant\n  size?: ButtonSize\n}\n\nconst baseClasses = classArr(\n  \"inline-flex\", // layout\n  \"font-medium\", // text\n  \"items-center justify-center\", // layout children\n  \"rounded-md ring-offset-background\", // rounded, rings\n  \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\", // focus\n  \"transition-colors\", // animation\n  \"group\",\n  \"cursor-pointer\",\n)\n\nconst variantClasses = {\n  //\n  // transparent bg\n  //\n  none: \"\",\n  outline: classArr(\n    \"bg-transparent dark:bg-transparent\",\n    \"dark:text-slate-100\", // text\n    \"hover:bg-slate-100\", // bg hover\n    \"border border-slate-200 dark:border-slate-700 dark:hover:bg-slate-900\", // border\n  ),\n  ghost: classArr(\n    \"dark:text-slate-100 dark:hover:text-slate-100\", // text\n    \"bg-transparent dark:bg-transparent\", // bg\n    \"data-[state=open]:bg-transparent dark:data-[state=open]:bg-transparent\", // bg data\n    \"hover:bg-slate-100 dark:hover:bg-slate-800\", // bg hover\n  ),\n  link: classArr(\n    \"text-slate-900 dark:text-slate-100\", // text\n    \"underline-offset-4 hover:underline \", // underline\n    \"bg-transparent dark:bg-transparent\", // bg\n    \"hover:bg-transparent dark:hover:bg-transparent\", // bg hover\n  ),\n  //\n  // filled grayscale\n  //\n  filled: classArr(\n    \"dark:text-slate-100\", // text\n    \"bg-white dark:bg-black\", // bg\n    \"hover:bg-slate-50 dark:hover:bg-slate-900\", // bg hover\n  ),\n  subtle: classArr(\n    \"text-slate-900 dark:text-slate-100\", // text\n    \"bg-slate-100 dark:bg-slate-700\", // bg\n    \"hover:bg-slate-200 dark:hover:bg-slate-600\", // bg hover\n  ),\n  contrast: classArr(\n    \"text-white dark:text-slate-900 dark:hover:text-slate-900\", // text\n    \"bg-slate-900 dark:bg-slate-50\", // bg\n    \"hover:bg-slate-700 dark:hover:bg-slate-300\", // bg hover\n  ),\n  //\n  // filled colors\n  //\n  filledYellow: classArr(\n    \"text-white\", // text\n    \"bg-yellow-500 dark:bg-yellow-800 \", // bg\n    \"hover:bg-yellow-700 dark:hover:bg-yellow-600\", // bg hover\n    \"focus:ring-yellow-400 dark:focus:ring-yellow-400\", // focus\n  ),\n  filledAmber: classArr(\n    \"text-white\", // text\n    \"bg-amber-500 dark:bg-amber-800 \", // bg\n    \"hover:bg-amber-700 dark:hover:bg-amber-600\", // bg hover\n    \"focus:ring-amber-400 dark:focus:ring-amber-400\", // focus\n  ),\n  filledOrange: classArr(\n    \"text-white\", // text\n    \"bg-orange-500 dark:bg-orange-800 \", // bg\n    \"hover:bg-orange-700 dark:hover:bg-orange-600\", // bg hover\n    \"focus:ring-orange-400 dark:focus:ring-orange-400\", // focus\n  ),\n  filledRed: classArr(\n    \"text-white\", // text\n    \"bg-red-500 dark:bg-red-700\", // bg\n    \"hover:bg-red-600 dark:hover:bg-red-600\", // bg hover\n    \"focus:ring-red-400 dark:focus:ring-red-400\", // focus\n  ),\n  filledGreen: classArr(\n    \"text-white\", // text\n    \"bg-green-500 hover:bg-green-700 dark:hover:bg-green-700\", // bg\n    \"focus:ring-green-400 dark:focus:ring-green-400\", // focus\n  ),\n  filledSky: classArr(\n    \"text-white\", // text\n    \"bg-sky-500 hover:bg-sky-700 dark:hover:bg-sky-700\", // bg\n    \"focus:ring-sky-400 dark:focus:ring-sky-400\", // focus\n  ),\n  filledIndigo: classArr(\n    \"text-white\", // text\n    \"bg-indigo-500 dark:bg-indigo-800 \", // bg\n    \"hover:bg-indigo-700 dark:hover:bg-indigo-600\", // bg hover\n    \"focus:ring-indigo-400 dark:focus:ring-indigo-400\", // focus\n  ),\n  filledBlue: classArr(\n    \"text-white\", // text\n    \"bg-blue-500 dark:bg-blue-800 \", // bg\n    \"hover:bg-blue-700 dark:hover:bg-blue-600\", // bg hover\n    \"focus:ring-blue-400 dark:focus:ring-blue-400\", // focus\n  ),\n  //\n  // outline toast colors\n  //\n  outlineRed: classArr(\n    \"text-red-500 dark:text-red-500\", // text\n    \"border border-red-200 dark:border-red-700\", // border\n    \"bg-transparent\", // bg\n    \"hover:bg-red-100 dark:hover:bg-red-950\", // bg hover\n    \"focus:ring-red-400 dark:focus:ring-red-400\", // focus\n  ),\n} as const satisfies Record<ButtonVariant, string>\n\nconst sizeClasses = {\n  none: \"\",\n  minimal: \"rounded-none\",\n  sm: \"px-3\",\n  default: \"py-2 px-3\",\n  lg: \"px-8 py-4 text-lg\",\n} as const satisfies Record<ButtonSize, string>\n\nconst defaultSize = buttonSize.default\n\nexport function buttonCva1(variant: ButtonVariant, ...customClasses: (string | boolean | undefined | null | 0)[]) {\n  return buttonCva2(variant, null, ...customClasses)\n}\n\nexport function buttonCva2(\n  variant: ButtonVariant = buttonVariant.ghost,\n  size: ButtonSize | null = defaultSize,\n  ...customClasses: (string | boolean | undefined | null | 0)[]\n) {\n  const v = variant\n  const s = size ?? defaultSize\n  return classMerge(baseClasses, variantClasses[v], sizeClasses[s], combinedClasses(v, s), customClasses)\n}\n\nfunction combinedClasses(variant: ButtonVariant, size: ButtonSize) {\n  const variantGroup1 =\n    variant === buttonVariant.outline || variant === buttonVariant.filledYellow || variant === buttonVariant.outlineRed\n  if (variantGroup1 && size === buttonSize.lg) {\n    return \"border-2\"\n  }\n  return null\n}\n\nexport function buttonCvaIconOnly(\n  variant: ButtonVariant = buttonVariant.ghost,\n  isLoading: boolean | undefined,\n  isDisabled: boolean | undefined,\n  ...customClasses: (string | boolean | undefined | null | 0)[]\n) {\n  const classes = buttonCva2(\n    variant,\n    buttonSize.none,\n    classesButtonClickAnimation,\n    \"rounded-full p-2.5\",\n    (isDisabled || isLoading) && classesButtonDisabled,\n    ...customClasses,\n  )\n  return classes\n}\n"],"mappings":";;;;;AAMA,IAAa,gBAAgB;CAC3B,MAAM;CAEN,SAAS;CACT,OAAO;CACP,MAAM;CAEN,QAAQ;CACR,QAAQ;CACR,UAAU;CAEV,cAAc;CACd,aAAa;CACb,cAAc;CACd,WAAW;CACX,aAAa;CACb,WAAW;CACX,YAAY;CACZ,cAAc;CAEd,YAAY;CACb;AAGD,IAAa,aAAa;CACxB,MAAM;CACN,SAAS;CACT,IAAI;CACJ,SAAS;CACT,IAAI;CACL;AAOD,IAAM,cAAc,SAClB,eACA,eACA,+BACA,qCACA,yGACA,qBACA,SACA,iBACD;AAED,IAAM,iBAAiB;CAIrB,MAAM;CACN,SAAS,SACP,sCACA,uBACA,sBACA,wEACD;CACD,OAAO,SACL,iDACA,sCACA,0EACA,6CACD;CACD,MAAM,SACJ,sCACA,uCACA,sCACA,iDACD;CAID,QAAQ,SACN,uBACA,0BACA,4CACD;CACD,QAAQ,SACN,sCACA,kCACA,6CACD;CACD,UAAU,SACR,4DACA,iCACA,6CACD;CAID,cAAc,SACZ,cACA,qCACA,gDACA,mDACD;CACD,aAAa,SACX,cACA,mCACA,8CACA,iDACD;CACD,cAAc,SACZ,cACA,qCACA,gDACA,mDACD;CACD,WAAW,SACT,cACA,8BACA,0CACA,6CACD;CACD,aAAa,SACX,cACA,2DACA,iDACD;CACD,WAAW,SACT,cACA,qDACA,6CACD;CACD,cAAc,SACZ,cACA,qCACA,gDACA,mDACD;CACD,YAAY,SACV,cACA,iCACA,4CACA,+CACD;CAID,YAAY,SACV,kCACA,6CACA,kBACA,0CACA,6CACD;CACF;AAED,IAAM,cAAc;CAClB,MAAM;CACN,SAAS;CACT,IAAI;CACJ,SAAS;CACT,IAAI;CACL;AAED,IAAM,cAAc,WAAW;AAE/B,SAAgB,WAAW,SAAwB,GAAG,eAA4D;AAChH,QAAO,WAAW,SAAS,MAAM,GAAG,cAAc;;AAGpD,SAAgB,WACd,UAAyB,cAAc,OACvC,OAA0B,aAC1B,GAAG,eACH;CACA,MAAM,IAAI;CACV,MAAM,IAAI,QAAQ;AAClB,QAAO,WAAW,aAAa,eAAe,IAAI,YAAY,IAAI,gBAAgB,GAAG,EAAE,EAAE,cAAc;;AAGzG,SAAS,gBAAgB,SAAwB,MAAkB;AAGjE,MADE,YAAY,cAAc,WAAW,YAAY,cAAc,gBAAgB,YAAY,cAAc,eACtF,SAAS,WAAW,GACvC,QAAO;AAET,QAAO;;AAGT,SAAgB,kBACd,UAAyB,cAAc,OACvC,WACA,YACA,GAAG,eACH;AASA,QARgB,WACd,SACA,WAAW,MACX,6BACA,uBACC,cAAc,cAAA,iCACf,GAAG,cACJ"}

package/dist/interactive/button/buttonIconCva.d.ts

@@ -1,3 +1,3 @@
-import { ButtonVariant } from './buttonCva';
+import { ButtonVariant } from '#ui/interactive/button/buttonCva.js';
 export declare function buttonIconCva(variant?: ButtonVariant, ...customClasses: (string | boolean | undefined | null | 0 | 0n)[]): string;
 //# sourceMappingURL=buttonIconCva.d.ts.map

package/dist/interactive/button/buttonIconCva.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buttonIconCva.d.ts","sourceRoot":"","sources":["../../../lib/interactive/button/buttonIconCva.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,aAAa,EAAE,MAAM,kCAAkC,CAAA;AAgDpF,wBAAgB,aAAa,CAC3B,OAAO,GAAE,aAAmC,EAC5C,GAAG,aAAa,EAAE,CAAC,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,CAAC,EAAE,UAGnE"}
+{"version":3,"file":"buttonIconCva.d.ts","sourceRoot":"","sources":["../../../ui/interactive/button/buttonIconCva.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,aAAa,EAAE,MAAM,qCAAqC,CAAA;AAgDvF,wBAAgB,aAAa,CAC3B,OAAO,GAAE,aAAmC,EAC5C,GAAG,aAAa,EAAE,CAAC,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,CAAC,EAAE,UAGnE"}