solid-tiny-ui 0.4.0 → 0.6.0

package/dist/_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/root-provider/global.jsx

@@ -1,5 +1,5 @@
 //#region __viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/root-provider/global.scss__viteSafe__
-var global_default = ":root{--tiny-fs-xs:12px;--tiny-fs-sm:14px;--tiny-fs-md:16px;--tiny-fs-lg:20px;--tiny-fs-xl:28px;--tiny-fs-2xl:36px;--tiny-fs-3xl:48px;--tiny-fs-4xl:64px;--tiny-lh-tight:1.3;--tiny-lh-base:1.6;--tiny-lh-relaxed:1.86;--tiny-space-xs:4px;--tiny-space-sm:6px;--tiny-space-md:8px;--tiny-space-lg:12px;--tiny-space-xl:18px;--tiny-space-2xl:24px;--tiny-space-3xl:36px;--tiny-radius-sm:4px;--tiny-radius-md:6px;--tiny-radius-lg:8px;--tiny-radius-xl:12px;--tiny-radius-round:9999px;--tiny-shadow-1:0 1px 2px -2px #00000029,0 3px 6px 0 #0000001f,0 5px 12px 4px #00000017;--tiny-shadow-2:0 3px 6px -4px #0000001f,0 6px 16px 0 #00000014,0 9px 28px 8px #0000000d;--tiny-shadow-3:0 6px 16px -8px #00000014,0 9px 28px 0 #0000000d,0 12px 48px 16px #00000008}:root,.light{--tiny-c-text:#000000d9;--tiny-c-text-heading:#000000e6;--tiny-c-text-label:#000000a6;--tiny-c-text-description:#00000073;--tiny-c-text-disabled:#00000040;--tiny-c-white:#fff;--tiny-c-black:#09090b;--tiny-c-link:#115ea3;--tiny-c-info:#0078d4;--tiny-c-danger:#fa3131;--tiny-c-success:#2bcd33;--tiny-c-warning:#f57c00;--tiny-c-border:#d1d5db;--tiny-c-neutral-0:#fff;--tiny-c-neutral-1:#f7f7f7;--tiny-c-neutral-2:#eee;--tiny-c-neutral-3:#e4e4e4;--tiny-c-neutral-4:#d1d1d1;--tiny-c-neutral-5:#b8b8b8;--tiny-c-neutral-6:#9a9a9a;--tiny-c-neutral-7:#6f6f6f;--tiny-c-neutral-8:#4a4a4a;--tiny-c-neutral-9:#2b2b2b}.dark{--tiny-c-text:#ffffffd9;--tiny-c-text-heading:#ffffffe6;--tiny-c-text-label:#ffffffa6;--tiny-c-text-description:#ffffff73;--tiny-c-text-disabled:#ffffff40;--tiny-c-link:#479ef5;--tiny-c-info:#2fa5e0;--tiny-c-danger:#df3c31;--tiny-c-success:#2ea832;--tiny-c-warning:#e08f17;--tiny-c-border:#3a3f47;--tiny-c-neutral-0:#121212;--tiny-c-neutral-1:#1a1a1a;--tiny-c-neutral-2:#222;--tiny-c-neutral-3:#2c2c2c;--tiny-c-neutral-4:#3a3a3a;--tiny-c-neutral-5:#555;--tiny-c-neutral-6:#7a7a7a;--tiny-c-neutral-7:#a0a0a0;--tiny-c-neutral-8:#c8c8c8;--tiny-c-neutral-9:#e6e6e6}input::-ms-reveal{display:none}:focus{outline:none}*,:before,:after{box-sizing:border-box;border-color:var(--tiny-c-border);border-style:solid;border-width:0}html,:host{color:var(--tiny-c-text);font-variation-settings:normal;font-feature-settings:normal;font-variant-numeric:tabular-nums;tab-size:4;text-size-adjust:100%;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:14px;line-height:1.5}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-variation-settings:normal;font-feature-settings:normal;font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-collapse:collapse;border-color:inherit}button,input,optgroup,select,textarea{font-variation-settings:inherit;font-family:inherit;font-size:100%;font-weight:inherit;font-feature-settings:inherit;line-height:inherit;color:inherit;background:0 0;border:none;outline:none;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{appearance:auto;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{font:inherit;appearance:auto}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{margin:0;padding:0;list-style:none}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}";
+var global_default = ":root{--tiny-fs-xs:12px;--tiny-fs-sm:14px;--tiny-fs-md:16px;--tiny-fs-lg:20px;--tiny-fs-xl:28px;--tiny-fs-2xl:36px;--tiny-fs-3xl:48px;--tiny-fs-4xl:64px;--tiny-lh-tight:1.3;--tiny-lh-base:1.6;--tiny-lh-relaxed:1.86;--tiny-space-xs:4px;--tiny-space-sm:6px;--tiny-space-md:8px;--tiny-space-lg:12px;--tiny-space-xl:18px;--tiny-space-2xl:24px;--tiny-space-3xl:36px;--tiny-radius-sm:4px;--tiny-radius-md:6px;--tiny-radius-lg:8px;--tiny-radius-xl:12px;--tiny-radius-round:9999px;--tiny-shadow-1:0 1px 2px -2px #00000029,0 3px 6px 0 #0000001f,0 5px 12px 4px #00000017;--tiny-shadow-2:0 3px 6px -4px #0000001f,0 6px 16px 0 #00000014,0 9px 28px 8px #0000000d;--tiny-shadow-3:0 6px 16px -8px #00000014,0 9px 28px 0 #0000000d,0 12px 48px 16px #00000008;--tiny-c-border:rgb(var(--tiny-rgb-neutral-5)/.5);--tiny-c-text:rgb(var(--tiny-rgb-neutral-9)/.9);--tiny-c-text-heading:rgb(var(--tiny-rgb-neutral-9));--tiny-c-text-label:rgb(var(--tiny-rgb-neutral-9)/.7);--tiny-c-text-description:rgb(var(--tiny-rgb-neutral-9)/.5);--tiny-c-text-disabled:rgb(var(--tiny-rgb-neutral-9)/.3);--tiny-c-white:#fff;--tiny-c-black:#000}input::-ms-reveal{display:none}input[type=number]::-webkit-inner-spin-button{appearance:none;margin:0}input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}input[type=number]{appearance:textfield}:focus{outline:none}*,:before,:after{box-sizing:border-box;border-color:var(--tiny-c-border);border-style:solid;border-width:0}html,:host{color:var(--tiny-c-text);font-variation-settings:normal;font-feature-settings:normal;font-variant-numeric:tabular-nums;tab-size:4;text-size-adjust:100%;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:14px;line-height:1.5}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-variation-settings:normal;font-feature-settings:normal;font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-collapse:collapse;border-color:inherit}button,input,optgroup,select,textarea{font-variation-settings:inherit;font-family:inherit;font-size:100%;font-weight:inherit;font-feature-settings:inherit;line-height:inherit;color:inherit;background:0 0;border:none;outline:none;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{appearance:auto;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{font:inherit;appearance:auto}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{margin:0;padding:0;list-style:none}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}";
 
 //#endregion
 export { global_default as default };

package/dist/components/alert/alert.d.ts

@@ -0,0 +1,25 @@
+import { ClassNames, Styles } from "../../utils/types.js";
+import { JSX } from "solid-js";
+
+//#region src/components/alert/alert.d.ts
+type AlertStatus = "success" | "error" | "warning" | "info";
+type AlertVariant = "subtle" | "solid" | "outline";
+interface AlertState {
+  status: AlertStatus;
+  variant: AlertVariant;
+}
+declare function Alert(props: {
+  status?: AlertStatus;
+  variant?: AlertVariant;
+  title?: JSX.Element;
+  description?: JSX.Element;
+  children?: JSX.Element;
+  icon?: JSX.Element;
+  showIcon?: boolean;
+  showClose?: boolean;
+  onClose?: () => void;
+  classNames?: ClassNames<"root" | "icon" | "content" | "title" | "description" | "close", AlertState>;
+  styles?: Styles<"root" | "icon" | "content" | "title" | "description" | "close", AlertState>;
+}): JSX.Element;
+//#endregion
+export { Alert, AlertState, AlertStatus, AlertVariant };

package/dist/components/alert/alert.js

@@ -0,0 +1,186 @@
+import alert_default from "../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/alert/alert.js";
+import { IconCheckboxCircleLine } from "../../icons/checkbox-circle-line.js";
+import { CloseLine } from "../../icons/close-line.js";
+import { IconErrorWarningLine } from "../../icons/error-warning-line.js";
+import { InformationLine } from "../../icons/information-line.js";
+import "../../icons/index.js";
+import { createClassStyles } from "../../utils/index.js";
+import { addEventListener, className, createComponent, delegateEvents, effect, insert, memo, setAttribute, style, template } from "solid-js/web";
+import { Match, Show, Switch, children, createMemo } from "solid-js";
+import { combineClass, mountStyle } from "solid-tiny-utils";
+
+//#region src/components/alert/alert.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div>`), _tmpl$2 = /* @__PURE__ */ template(`<button aria-label="Close alert"type=button>`), _tmpl$3 = /* @__PURE__ */ template(`<div role=alert>`);
+function AlertIcon(props) {
+	return createComponent(Switch, { get children() {
+		return [
+			createComponent(Match, {
+				get when() {
+					return props.status === "info";
+				},
+				get children() {
+					return createComponent(InformationLine, { size: "20px" });
+				}
+			}),
+			createComponent(Match, {
+				get when() {
+					return props.status === "success";
+				},
+				get children() {
+					return createComponent(IconCheckboxCircleLine, { size: "20px" });
+				}
+			}),
+			createComponent(Match, {
+				get when() {
+					return props.status === "error" || props.status === "warning";
+				},
+				get children() {
+					return createComponent(IconErrorWarningLine, { size: "20px" });
+				}
+			})
+		];
+	} });
+}
+function Alert(props) {
+	mountStyle(alert_default, "tiny-alert");
+	const status = () => props.status ?? "info";
+	const variant = () => props.variant ?? "subtle";
+	const showIcon = () => props.showIcon ?? true;
+	const [classes, styles] = createClassStyles(() => props.classNames, () => props.styles, () => ({
+		status: status(),
+		variant: variant()
+	}));
+	const resolvedIcon = children(() => props.icon);
+	const resolvedTitle = children(() => props.title);
+	const resolvedDescription = children(() => props.description);
+	const resolvedChildren = children(() => props.children);
+	const hasContent = createMemo(() => {
+		return resolvedTitle() || resolvedDescription() || resolvedChildren();
+	});
+	return (() => {
+		var _el$ = _tmpl$3();
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return showIcon();
+			},
+			get children() {
+				var _el$2 = _tmpl$();
+				insert(_el$2, () => resolvedIcon() || createComponent(AlertIcon, { get status() {
+					return status();
+				} }));
+				effect((_p$) => {
+					var _v$ = combineClass("tiny-alert__icon", classes().icon), _v$2 = styles().icon;
+					_v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+					_p$.t = style(_el$2, _v$2, _p$.t);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0
+				});
+				return _el$2;
+			}
+		}), null);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return hasContent();
+			},
+			get children() {
+				var _el$3 = _tmpl$();
+				insert(_el$3, createComponent(Show, {
+					get when() {
+						return resolvedTitle();
+					},
+					get children() {
+						var _el$4 = _tmpl$();
+						insert(_el$4, resolvedTitle);
+						effect((_p$) => {
+							var _v$3 = combineClass("tiny-alert__title", classes().title), _v$4 = styles().title;
+							_v$3 !== _p$.e && className(_el$4, _p$.e = _v$3);
+							_p$.t = style(_el$4, _v$4, _p$.t);
+							return _p$;
+						}, {
+							e: void 0,
+							t: void 0
+						});
+						return _el$4;
+					}
+				}), null);
+				insert(_el$3, createComponent(Show, {
+					get when() {
+						return resolvedDescription();
+					},
+					get children() {
+						var _el$5 = _tmpl$();
+						insert(_el$5, resolvedDescription);
+						effect((_p$) => {
+							var _v$5 = combineClass("tiny-alert__description", classes().description), _v$6 = styles().description;
+							_v$5 !== _p$.e && className(_el$5, _p$.e = _v$5);
+							_p$.t = style(_el$5, _v$6, _p$.t);
+							return _p$;
+						}, {
+							e: void 0,
+							t: void 0
+						});
+						return _el$5;
+					}
+				}), null);
+				insert(_el$3, createComponent(Show, {
+					get when() {
+						return resolvedChildren();
+					},
+					get children() {
+						return resolvedChildren();
+					}
+				}), null);
+				effect((_p$) => {
+					var _v$7 = combineClass("tiny-alert__content", classes().content), _v$8 = styles().content;
+					_v$7 !== _p$.e && className(_el$3, _p$.e = _v$7);
+					_p$.t = style(_el$3, _v$8, _p$.t);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0
+				});
+				return _el$3;
+			}
+		}), null);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return props.showClose;
+			},
+			get children() {
+				var _el$6 = _tmpl$2();
+				addEventListener(_el$6, "click", props.onClose, true);
+				insert(_el$6, createComponent(CloseLine, { size: "16px" }));
+				effect((_p$) => {
+					var _v$9 = combineClass("tiny-alert__close", classes().close), _v$0 = styles().close;
+					_v$9 !== _p$.e && className(_el$6, _p$.e = _v$9);
+					_p$.t = style(_el$6, _v$0, _p$.t);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0
+				});
+				return _el$6;
+			}
+		}), null);
+		effect((_p$) => {
+			var _v$1 = combineClass("tiny-alert", classes().root), _v$10 = status(), _v$11 = variant(), _v$12 = styles().root;
+			_v$1 !== _p$.e && className(_el$, _p$.e = _v$1);
+			_v$10 !== _p$.t && setAttribute(_el$, "data-status", _p$.t = _v$10);
+			_v$11 !== _p$.a && setAttribute(_el$, "data-variant", _p$.a = _v$11);
+			_p$.o = style(_el$, _v$12, _p$.o);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0
+		});
+		return _el$;
+	})();
+}
+delegateEvents(["click"]);
+
+//#endregion
+export { Alert };

package/dist/components/alert/alert.jsx

@@ -0,0 +1,73 @@
+import alert_default from "../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/alert/alert.jsx";
+import { IconCheckboxCircleLine } from "../../icons/checkbox-circle-line.jsx";
+import { CloseLine } from "../../icons/close-line.jsx";
+import { IconErrorWarningLine } from "../../icons/error-warning-line.jsx";
+import { InformationLine } from "../../icons/information-line.jsx";
+import "../../icons/index.jsx";
+import { createClassStyles } from "../../utils/index.jsx";
+import { Match, Show, Switch, children, createMemo } from "solid-js";
+import { combineClass, mountStyle } from "solid-tiny-utils";
+
+//#region src/components/alert/alert.tsx
+function AlertIcon(props) {
+	return <Switch>
+      <Match when={props.status === "info"}>
+        <InformationLine size="20px" />
+      </Match>
+      <Match when={props.status === "success"}>
+        <IconCheckboxCircleLine size="20px" />
+      </Match>
+      <Match when={props.status === "error" || props.status === "warning"}>
+        <IconErrorWarningLine size="20px" />
+      </Match>
+    </Switch>;
+}
+function Alert(props) {
+	mountStyle(alert_default, "tiny-alert");
+	const status = () => props.status ?? "info";
+	const variant = () => props.variant ?? "subtle";
+	const showIcon = () => props.showIcon ?? true;
+	const [classes, styles] = createClassStyles(() => props.classNames, () => props.styles, () => ({
+		status: status(),
+		variant: variant()
+	}));
+	const resolvedIcon = children(() => props.icon);
+	const resolvedTitle = children(() => props.title);
+	const resolvedDescription = children(() => props.description);
+	const resolvedChildren = children(() => props.children);
+	const hasContent = createMemo(() => {
+		return resolvedTitle() || resolvedDescription() || resolvedChildren();
+	});
+	return <div class={combineClass("tiny-alert", classes().root)} data-status={status()} data-variant={variant()} role="alert" style={styles().root}>
+      <Show when={showIcon()}>
+        <div class={combineClass("tiny-alert__icon", classes().icon)} style={styles().icon}>
+          {resolvedIcon() || <AlertIcon status={status()} />}
+        </div>
+      </Show>
+
+      <Show when={hasContent()}>
+        <div class={combineClass("tiny-alert__content", classes().content)} style={styles().content}>
+          <Show when={resolvedTitle()}>
+            <div class={combineClass("tiny-alert__title", classes().title)} style={styles().title}>
+              {resolvedTitle()}
+            </div>
+          </Show>
+          <Show when={resolvedDescription()}>
+            <div class={combineClass("tiny-alert__description", classes().description)} style={styles().description}>
+              {resolvedDescription()}
+            </div>
+          </Show>
+          <Show when={resolvedChildren()}>{resolvedChildren()}</Show>
+        </div>
+      </Show>
+
+      <Show when={props.showClose}>
+        <button aria-label="Close alert" class={combineClass("tiny-alert__close", classes().close)} onClick={props.onClose} style={styles().close} type="button">
+          <CloseLine size="16px" />
+        </button>
+      </Show>
+    </div>;
+}
+
+//#endregion
+export { Alert };

package/dist/components/alert/index.d.ts

@@ -0,0 +1 @@
+import { Alert, AlertState, AlertStatus, AlertVariant } from "./alert.js";

package/dist/components/alert/index.js

@@ -0,0 +1 @@
+import { Alert } from "./alert.js";

package/dist/components/alert/index.jsx

@@ -0,0 +1 @@
+import { Alert } from "./alert.jsx";

package/dist/components/buttons/basic-button/basic-button.d.ts

@@ -2,8 +2,8 @@ import { ClassNames, Styles } from "../../../utils/types.js";
 import { JSX } from "solid-js";
 
 //#region src/components/buttons/basic-button/basic-button.d.ts
-type ButtonVariants = "solid" | "link" | "text" | "outline";
-type ButtonColors = "primary" | "secondary" | "link" | "success" | "danger" | "warning" | "info";
+type ButtonVariants = "solid" | "link" | "text" | "outline" | "subtle";
+type ButtonColors = "primary" | "neutral" | "success" | "danger" | "warning" | "info";
 interface ButtonState {
   variant: ButtonVariants;
   color: ButtonColors;

package/dist/components/buttons/basic-button/basic-button.js

@@ -1,16 +1,16 @@
+import { extraAriasAndDatasets, makeClassNames, makeStyles } from "../../../utils/index.js";
 import basic_button_default from "../../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/buttons/basic-button/basic-button.js";
-import { extraAriasAndDatasets, makeClassNames, makeStyles, mergeClassNames } from "../../../utils/index.js";
-import { className, createComponent, effect, insert, mergeProps, spread, style, template } from "solid-js/web";
+import { className, createComponent, effect, insert, memo, mergeProps, spread, style, template } from "solid-js/web";
 import { Show, children, createMemo, mergeProps as mergeProps$1 } from "solid-js";
-import { dataIf, mountStyle } from "solid-tiny-utils";
+import { combineClass, dataIf, mountStyle } from "solid-tiny-utils";
 
 //#region src/components/buttons/basic-button/basic-button.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<div>`), _tmpl$2 = /* @__PURE__ */ template(`<button><div>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div>`), _tmpl$2 = /* @__PURE__ */ template(`<button>`);
 const Button = (props) => {
 	mountStyle(basic_button_default, "tiny-btn");
 	const real = mergeProps$1({
 		variant: "solid",
-		color: "primary",
+		color: "neutral",
 		size: "medium",
 		iconPlacement: "start",
 		type: "button"
@@ -37,13 +37,13 @@ const Button = (props) => {
 	const resolvedIcon = children(() => real.icon);
 	const iconOnly = createMemo(() => !resolvedChild());
 	return (() => {
-		var _el$ = _tmpl$2(), _el$2 = _el$.firstChild;
+		var _el$ = _tmpl$2();
 		spread(_el$, mergeProps(() => extraAriasAndDatasets(real), {
 			get ["class"]() {
-				return mergeClassNames(["tiny-btn", classNames().root]);
+				return combineClass("tiny-btn", classNames().root);
 			},
 			get ["data-color"]() {
-				return real.color;
+				return memo(() => !!real.disabled)() ? void 0 : real.color;
 			},
 			get ["data-disabled"]() {
 				return dataIf(real.disabled ?? false);
@@ -81,18 +81,18 @@ const Button = (props) => {
 				return resolvedIcon();
 			},
 			get children() {
-				var _el$3 = _tmpl$();
-				insert(_el$3, resolvedIcon);
+				var _el$2 = _tmpl$();
+				insert(_el$2, resolvedIcon);
 				effect((_p$) => {
-					var _v$ = mergeClassNames(["tiny-btn__icon", classNames().icon]), _v$2 = styles().icon;
-					_v$ !== _p$.e && className(_el$3, _p$.e = _v$);
-					_p$.t = style(_el$3, _v$2, _p$.t);
+					var _v$ = combineClass("tiny-btn__icon", classNames().icon), _v$2 = styles().icon;
+					_v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+					_p$.t = style(_el$2, _v$2, _p$.t);
 					return _p$;
 				}, {
 					e: void 0,
 					t: void 0
 				});
-				return _el$3;
+				return _el$2;
 			}
 		}), null);
 		insert(_el$, createComponent(Show, {
@@ -100,30 +100,21 @@ const Button = (props) => {
 				return resolvedChild();
 			},
 			get children() {
-				var _el$4 = _tmpl$();
-				insert(_el$4, resolvedChild);
+				var _el$3 = _tmpl$();
+				insert(_el$3, resolvedChild);
 				effect((_p$) => {
-					var _v$3 = mergeClassNames(["tiny-btn__content", classNames().content]), _v$4 = styles().content;
-					_v$3 !== _p$.e && className(_el$4, _p$.e = _v$3);
-					_p$.t = style(_el$4, _v$4, _p$.t);
+					var _v$3 = combineClass("tiny-btn__content", classNames().content), _v$4 = styles().content;
+					_v$3 !== _p$.e && className(_el$3, _p$.e = _v$3);
+					_p$.t = style(_el$3, _v$4, _p$.t);
 					return _p$;
 				}, {
 					e: void 0,
 					t: void 0
 				});
-				return _el$4;
+				return _el$3;
 			}
 		}), null);
 		insert(_el$, () => real.slot?.root, null);
-		effect((_p$) => {
-			var _v$5 = mergeClassNames(["tiny-btn__bg", classNames().bg]), _v$6 = styles().bg;
-			_v$5 !== _p$.e && className(_el$2, _p$.e = _v$5);
-			_p$.t = style(_el$2, _v$6, _p$.t);
-			return _p$;
-		}, {
-			e: void 0,
-			t: void 0
-		});
 		return _el$;
 	})();
 };

package/dist/components/buttons/basic-button/basic-button.jsx

@@ -1,14 +1,14 @@
+import { extraAriasAndDatasets, makeClassNames, makeStyles } from "../../../utils/index.jsx";
 import basic_button_default from "../../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/buttons/basic-button/basic-button.jsx";
-import { extraAriasAndDatasets, makeClassNames, makeStyles, mergeClassNames } from "../../../utils/index.jsx";
 import { Show, children, createMemo, mergeProps } from "solid-js";
-import { dataIf, mountStyle } from "solid-tiny-utils";
+import { combineClass, dataIf, mountStyle } from "solid-tiny-utils";
 
 //#region src/components/buttons/basic-button/basic-button.tsx
 const Button = (props) => {
 	mountStyle(basic_button_default, "tiny-btn");
 	const real = mergeProps({
 		variant: "solid",
-		color: "primary",
+		color: "neutral",
 		size: "medium",
 		iconPlacement: "start",
 		type: "button"
@@ -34,15 +34,14 @@ const Button = (props) => {
 	const resolvedChild = children(() => real.children);
 	const resolvedIcon = children(() => real.icon);
 	const iconOnly = createMemo(() => !resolvedChild());
-	return <button {...extraAriasAndDatasets(real)} class={mergeClassNames(["tiny-btn", classNames().root])} data-color={real.color} data-disabled={dataIf(real.disabled ?? false)} data-icon-only={dataIf(iconOnly())} data-icon-placement={real.iconPlacement} data-rounded={dataIf(real.rounded ?? false)} data-size={real.size} data-variant={real.variant} disabled={real.disabled} onClick={real.onClick} style={styles().root} type={real.type}>
-      <div class={mergeClassNames(["tiny-btn__bg", classNames().bg])} style={styles().bg} />
+	return <button {...extraAriasAndDatasets(real)} class={combineClass("tiny-btn", classNames().root)} data-color={real.disabled ? void 0 : real.color} data-disabled={dataIf(real.disabled ?? false)} data-icon-only={dataIf(iconOnly())} data-icon-placement={real.iconPlacement} data-rounded={dataIf(real.rounded ?? false)} data-size={real.size} data-variant={real.variant} disabled={real.disabled} onClick={real.onClick} style={styles().root} type={real.type}>
       <Show when={resolvedIcon()}>
-        <div class={mergeClassNames(["tiny-btn__icon", classNames().icon])} style={styles().icon}>
+        <div class={combineClass("tiny-btn__icon", classNames().icon)} style={styles().icon}>
           {resolvedIcon()}
         </div>
       </Show>
       <Show when={resolvedChild()}>
-        <div class={mergeClassNames(["tiny-btn__content", classNames().content])} style={styles().content}>
+        <div class={combineClass("tiny-btn__content", classNames().content)} style={styles().content}>
           {resolvedChild()}
         </div>
       </Show>

package/dist/components/buttons/state-button/state-button.d.ts

@@ -1,6 +1,6 @@
 import { ButtonProps } from "../basic-button/basic-button.js";
 import "../basic-button/index.js";
-import * as solid_js20 from "solid-js";
+import * as solid_js49 from "solid-js";
 import { MaybePromise } from "solid-tiny-utils";
 
 //#region src/components/buttons/state-button/state-button.d.ts
@@ -9,6 +9,6 @@ type StateButtonProps = {
   disabled?: boolean | string;
   onClick?: (e: MouseEvent) => MaybePromise<void>;
 } & Omit<ButtonProps, "disabled" | "onClick" | "slot">;
-declare function StateButton(props: StateButtonProps): solid_js20.JSX.Element;
+declare function StateButton(props: StateButtonProps): solid_js49.JSX.Element;
 //#endregion
 export { StateButton, StateButtonProps };

package/dist/components/buttons/state-button/state-button.js

@@ -7,7 +7,7 @@ import { Tooltip } from "../../tooltip/tooltip.js";
 import "../../tooltip/index.js";
 import { createComponent, effect, insert, memo, mergeProps, setAttribute, template } from "solid-js/web";
 import { createMemo, createSignal, splitProps } from "solid-js";
-import { dataIf, mountStyle } from "solid-tiny-utils";
+import { dataIf, isString, mountStyle } from "solid-tiny-utils";
 
 //#region src/components/buttons/state-button/state-button.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div class=tiny-state-btn>`), _tmpl$2 = /* @__PURE__ */ template(`<div class=tiny-state-btn__loader>`);
@@ -40,7 +40,7 @@ function StateButton(props) {
 			return memo(() => typeof local.disabled === "string")() ? local.disabled : "";
 		},
 		get disabled() {
-			return !local.disabled || typeof local.disabled !== "string";
+			return !(local.disabled && isString(local.disabled));
 		},
 		get children() {
 			var _el$ = _tmpl$();

package/dist/components/buttons/state-button/state-button.jsx

@@ -6,7 +6,7 @@ import "../../spin/index.jsx";
 import { Tooltip } from "../../tooltip/tooltip.jsx";
 import "../../tooltip/index.jsx";
 import { createMemo, createSignal, splitProps } from "solid-js";
-import { dataIf, mountStyle } from "solid-tiny-utils";
+import { dataIf, isString, mountStyle } from "solid-tiny-utils";
 
 //#region src/components/buttons/state-button/state-button.tsx
 function StateButton(props) {
@@ -33,7 +33,7 @@ function StateButton(props) {
 	const loading = createMemo(() => {
 		return local.loading || isHandling();
 	});
-	return <Tooltip content={typeof local.disabled === "string" ? local.disabled : ""} disabled={!local.disabled || typeof local.disabled !== "string"}>
+	return <Tooltip content={typeof local.disabled === "string" ? local.disabled : ""} disabled={!(local.disabled && isString(local.disabled))}>
       <div class="tiny-state-btn" data-loading={dataIf(loading())}>
         <Button {...others} disabled={!!local.disabled} onClick={handleClick} slot={{ root: <div class="tiny-state-btn__loader">
                 <SpinRing color="currentColor" size={18} />

package/dist/components/drawer/helpers.d.ts

@@ -0,0 +1,25 @@
+import { Flex } from "../../layout/flex/index.js";
+import "../../layout/index.js";
+import { JSX } from "solid-js/jsx-runtime";
+
+//#region src/components/drawer/helpers.d.ts
+declare function Root(props: Parameters<typeof Flex>[0]): JSX.Element;
+declare function Header(props: {
+  title: string;
+  closable?: boolean;
+}): JSX.Element;
+declare function Body(props: {
+  children: JSX.Element;
+}): JSX.Element;
+declare function Footer(props: Parameters<typeof Flex>[0]): JSX.Element;
+declare function Close(props: {
+  children: JSX.Element;
+}): JSX.Element;
+declare const DrawerHelper: typeof Root & {
+  Header: typeof Header;
+  Body: typeof Body;
+  Footer: typeof Footer;
+  Close: typeof Close;
+};
+//#endregion
+export { DrawerHelper };

package/dist/components/drawer/helpers.js

@@ -0,0 +1,104 @@
+import { CloseLine } from "../../icons/close-line.js";
+import { ModalCore } from "../../primitives/modal/index.js";
+import drawer_helper_default from "../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/drawer/drawer-helper.js";
+import { Flex } from "../../layout/flex/index.js";
+import "../../layout/index.js";
+import "../../primitives/index.js";
+import { createComponent, insert, memo, mergeProps, template } from "solid-js/web";
+import { Show, onMount, splitProps } from "solid-js";
+import { combineClass, combineStyle, makeEventListener, mountStyle } from "solid-tiny-utils";
+import { Ref } from "@solid-primitives/refs";
+
+//#region src/components/drawer/helpers.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<button class=tiny-drawer__header-close type=button>`), _tmpl$2 = /* @__PURE__ */ template(`<div class=tiny-drawer__header>`), _tmpl$3 = /* @__PURE__ */ template(`<div class=tiny-drawer__body>`);
+function Root(props) {
+	mountStyle(drawer_helper_default, "tiny-drawer-helper");
+	const [local, others] = splitProps(props, ["class", "style"]);
+	return createComponent(Flex, mergeProps({ vertical: true }, others, {
+		get ["class"]() {
+			return combineClass("tiny-drawer-helper", local.class);
+		},
+		get style() {
+			return combineStyle({ height: "100%" }, local.style);
+		}
+	}));
+}
+function Header(props) {
+	return (() => {
+		var _el$ = _tmpl$2();
+		insert(_el$, () => props.title, null);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return props.closable;
+			},
+			get children() {
+				return createComponent(Close, { get children() {
+					var _el$2 = _tmpl$();
+					insert(_el$2, createComponent(CloseLine, {}));
+					return _el$2;
+				} });
+			}
+		}), null);
+		return _el$;
+	})();
+}
+function Body(props) {
+	return (() => {
+		var _el$3 = _tmpl$3();
+		insert(_el$3, () => props.children);
+		return _el$3;
+	})();
+}
+function Footer(props) {
+	const [local, others] = splitProps(props, [
+		"gap",
+		"justify",
+		"align",
+		"class",
+		"style"
+	]);
+	return createComponent(Flex, mergeProps(others, {
+		get align() {
+			return local.align ?? "center";
+		},
+		get ["class"]() {
+			return combineClass("tiny-drawer__footer", local.class);
+		},
+		get gap() {
+			return local.gap ?? "sm";
+		},
+		get justify() {
+			return local.justify ?? "flex-end";
+		},
+		get style() {
+			return combineStyle({}, local.style);
+		}
+	}));
+}
+function Close(props) {
+	const [, actions] = ModalCore.useContext();
+	let ref;
+	onMount(() => {
+		makeEventListener(ref, "click", () => {
+			actions.setState("open", false);
+		});
+	});
+	return createComponent(Ref, {
+		ref(r$) {
+			var _ref$ = ref;
+			typeof _ref$ === "function" ? _ref$(r$) : ref = r$;
+		},
+		get children() {
+			return props.children;
+		}
+	});
+}
+const DrawerHelper = Object.assign(Root, {
+	Header,
+	Body,
+	Footer,
+	Close
+});
+
+//#endregion
+export { DrawerHelper };