solid-tiny-ui 0.5.0 → 0.6.0

package/dist/components/toaster/one-toaster.js

@@ -0,0 +1,146 @@
+import { context } from "./context.js";
+import { ToasterIcon } from "./icon.js";
+import { addEventListener, createComponent, effect, insert, memo, setAttribute, setStyleProperty, template, use } from "solid-js/web";
+import { Show, children, createSignal, onMount } from "solid-js";
+import { callMaybeCallableChild, createPresence, createWatch, dataIf } from "solid-tiny-utils";
+
+//#region src/components/toaster/one-toaster.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div style=width:100%;position:absolute>`), _tmpl$2 = /* @__PURE__ */ template(`<div class=tiny-toast__icon>`), _tmpl$3 = /* @__PURE__ */ template(`<div class=tiny-toast-wrapper role=presentation><div class=tiny-toast><div class=tiny-toast__content>`);
+function HiddenAutoDismiss(props) {
+	let ref;
+	onMount(() => {
+		ref.offsetHeight;
+		createWatch(() => [props.duration, props.pause], ([duration, pause], prevInput) => {
+			if (prevInput) {
+				const [prevDuration] = prevInput;
+				if (duration !== prevDuration) ref.style.width = "100%";
+			}
+			const percent = ref.offsetWidth / ref.parentElement.offsetWidth;
+			if (percent === 0 && duration > 0) {
+				props.onEnd();
+				return;
+			}
+			if (pause) {
+				ref.style.width = `${percent * 100}%`;
+				ref.style.transition = "none";
+			} else {
+				ref.style.width = "0";
+				ref.style.transition = `width ${duration * percent}ms linear`;
+			}
+		});
+	});
+	return (() => {
+		var _el$ = _tmpl$();
+		var _ref$ = ref;
+		typeof _ref$ === "function" ? use(_ref$, _el$) : ref = _el$;
+		addEventListener(_el$, "transitionend", props.onEnd);
+		return _el$;
+	})();
+}
+function getElRealHeight(el) {
+	const prevAnimationName = el.style.animationName;
+	el.style.animationName = "none";
+	const height = el.offsetHeight;
+	el.style.animationName = prevAnimationName;
+	return height;
+}
+function OneToaster(props) {
+	const [state, actions] = context.useContext();
+	const [show, setShow] = createSignal(true);
+	const [height, setHeight] = createSignal(0);
+	const presence = createPresence(show, {
+		enterDuration: 400,
+		exitDuration: 350,
+		initialEnter: true
+	});
+	createWatch(presence.isMounted, (shouldMount) => {
+		if (!shouldMount) actions.removeToast(props.id);
+	});
+	createWatch(() => state.dismissSignal[props.id], (signal) => {
+		if (signal) setShow(false);
+	});
+	let ref;
+	onMount(() => {
+		createWatch(presence.phase, (phase) => {
+			if (["pre-enter", "exiting"].includes(phase)) setHeight(getElRealHeight(ref));
+		});
+	});
+	const icon = children(() => callMaybeCallableChild(props.icon, {
+		id: props.id,
+		type: props.type,
+		duration: props.duration,
+		position: props.position
+	}));
+	return createComponent(Show, {
+		get when() {
+			return presence.isMounted();
+		},
+		get children() {
+			var _el$2 = _tmpl$3(), _el$3 = _el$2.firstChild, _el$5 = _el$3.firstChild;
+			var _ref$2 = ref;
+			typeof _ref$2 === "function" ? use(_ref$2, _el$2) : ref = _el$2;
+			_el$2.addEventListener("mouseleave", () => {
+				actions.setState("pauseRemoval", false);
+			});
+			_el$2.addEventListener("mouseenter", () => {
+				actions.setState("pauseRemoval", true);
+			});
+			insert(_el$3, createComponent(Show, {
+				get when() {
+					return icon() || [
+						"info",
+						"success",
+						"warning",
+						"error",
+						"loading"
+					].includes(props.type);
+				},
+				get children() {
+					var _el$4 = _tmpl$2();
+					insert(_el$4, () => icon() || createComponent(ToasterIcon, { get type() {
+						return props.type;
+					} }));
+					return _el$4;
+				}
+			}), _el$5);
+			insert(_el$5, () => callMaybeCallableChild(props.message, {
+				id: props.id,
+				type: props.type,
+				duration: props.duration,
+				position: props.position
+			}));
+			insert(_el$2, createComponent(HiddenAutoDismiss, {
+				get duration() {
+					return props.duration;
+				},
+				onEnd: () => {
+					setShow(false);
+				},
+				get pause() {
+					return state.pauseRemoval;
+				}
+			}), null);
+			effect((_p$) => {
+				var _v$ = dataIf(["entering", "pre-enter"].includes(presence.phase())), _v$2 = dataIf(["exiting"].includes(presence.phase())), _v$3 = presence.phase(), _v$4 = `${height()}px`, _v$5 = props.type, _v$6 = props.position.startsWith("top") ? "-20%" : "20%";
+				_v$ !== _p$.e && setAttribute(_el$2, "data-entering", _p$.e = _v$);
+				_v$2 !== _p$.t && setAttribute(_el$2, "data-exiting", _p$.t = _v$2);
+				_v$3 !== _p$.a && setAttribute(_el$2, "data-presence-phase", _p$.a = _v$3);
+				_v$4 !== _p$.o && setStyleProperty(_el$2, "--height", _p$.o = _v$4);
+				_v$5 !== _p$.i && setAttribute(_el$3, "data-type", _p$.i = _v$5);
+				_v$6 !== _p$.n && setStyleProperty(_el$3, "--from-y", _p$.n = _v$6);
+				return _p$;
+			}, {
+				e: void 0,
+				t: void 0,
+				a: void 0,
+				o: void 0,
+				i: void 0,
+				n: void 0
+			});
+			return _el$2;
+		}
+	});
+}
+
+//#endregion
+export { OneToaster };

package/dist/components/toaster/one-toaster.jsx

@@ -0,0 +1,104 @@
+import { context } from "./context.jsx";
+import { ToasterIcon } from "./icon.jsx";
+import { Show, children, createSignal, onMount } from "solid-js";
+import { callMaybeCallableChild, createPresence, createWatch, dataIf } from "solid-tiny-utils";
+
+//#region src/components/toaster/one-toaster.tsx
+function HiddenAutoDismiss(props) {
+	let ref;
+	onMount(() => {
+		ref.offsetHeight;
+		createWatch(() => [props.duration, props.pause], ([duration, pause], prevInput) => {
+			if (prevInput) {
+				const [prevDuration] = prevInput;
+				if (duration !== prevDuration) ref.style.width = "100%";
+			}
+			const percent = ref.offsetWidth / ref.parentElement.offsetWidth;
+			if (percent === 0 && duration > 0) {
+				props.onEnd();
+				return;
+			}
+			if (pause) {
+				ref.style.width = `${percent * 100}%`;
+				ref.style.transition = "none";
+			} else {
+				ref.style.width = "0";
+				ref.style.transition = `width ${duration * percent}ms linear`;
+			}
+		});
+	});
+	return <div onTransitionEnd={props.onEnd} ref={ref} style={{
+		width: "100%",
+		position: "absolute"
+	}} />;
+}
+function getElRealHeight(el) {
+	const prevAnimationName = el.style.animationName;
+	el.style.animationName = "none";
+	const height = el.offsetHeight;
+	el.style.animationName = prevAnimationName;
+	return height;
+}
+function OneToaster(props) {
+	const [state, actions] = context.useContext();
+	const [show, setShow] = createSignal(true);
+	const [height, setHeight] = createSignal(0);
+	const presence = createPresence(show, {
+		enterDuration: 400,
+		exitDuration: 350,
+		initialEnter: true
+	});
+	createWatch(presence.isMounted, (shouldMount) => {
+		if (!shouldMount) actions.removeToast(props.id);
+	});
+	createWatch(() => state.dismissSignal[props.id], (signal) => {
+		if (signal) setShow(false);
+	});
+	let ref;
+	onMount(() => {
+		createWatch(presence.phase, (phase) => {
+			if (["pre-enter", "exiting"].includes(phase)) setHeight(getElRealHeight(ref));
+		});
+	});
+	const icon = children(() => callMaybeCallableChild(props.icon, {
+		id: props.id,
+		type: props.type,
+		duration: props.duration,
+		position: props.position
+	}));
+	return <Show when={presence.isMounted()}>
+      <div class="tiny-toast-wrapper" data-entering={dataIf(["entering", "pre-enter"].includes(presence.phase()))} data-exiting={dataIf(["exiting"].includes(presence.phase()))} data-presence-phase={presence.phase()} onMouseEnter={() => {
+		actions.setState("pauseRemoval", true);
+	}} onMouseLeave={() => {
+		actions.setState("pauseRemoval", false);
+	}} ref={ref} role="presentation" style={{ "--height": `${height()}px` }}>
+        <div class="tiny-toast" data-type={props.type} style={{ "--from-y": props.position.startsWith("top") ? "-20%" : "20%" }}>
+          <Show when={icon() || [
+		"info",
+		"success",
+		"warning",
+		"error",
+		"loading"
+	].includes(props.type)}>
+            <div class="tiny-toast__icon">
+              {icon() || <ToasterIcon type={props.type} />}
+            </div>
+          </Show>
+          <div class="tiny-toast__content">
+            {callMaybeCallableChild(props.message, {
+		id: props.id,
+		type: props.type,
+		duration: props.duration,
+		position: props.position
+	})}
+          </div>
+        </div>
+        <HiddenAutoDismiss duration={props.duration} onEnd={() => {
+		setShow(false);
+	}} pause={state.pauseRemoval} />
+      </div>
+    </Show>;
+}
+
+//#endregion
+export { OneToaster };

package/dist/components/toaster/provider.d.ts

@@ -0,0 +1,11 @@
+import { ToastPosition } from "./type.js";
+import { JSX } from "solid-js/jsx-runtime";
+
+//#region src/components/toaster/provider.d.ts
+declare function TinyToasterProvider(props: {
+  children: JSX.Element;
+  defaultDuration?: number;
+  defaultPosition?: ToastPosition;
+}): JSX.Element;
+//#endregion
+export { TinyToasterProvider };

package/dist/components/toaster/provider.js

@@ -0,0 +1,64 @@
+import toaster_default from "../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/toaster/toaster.js";
+import { context } from "./context.js";
+import { ToasterLocator } from "./locator.js";
+import { OneToaster } from "./one-toaster.js";
+import { For, Portal, createComponent, effect, insert, memo, setStyleProperty, template } from "solid-js/web";
+import { mountStyle } from "solid-tiny-utils";
+
+//#region src/components/toaster/provider.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div style=position:fixed;pointer-events:none>`);
+function ToasterContainer(props) {
+	return (() => {
+		var _el$ = _tmpl$();
+		insert(_el$, () => props.children);
+		effect((_p$) => {
+			var _v$ = props.zIndex ?? 9999, _v$2 = props.padding ? `${props.padding}px` : "16px";
+			_v$ !== _p$.e && setStyleProperty(_el$, "z-index", _p$.e = _v$);
+			_v$2 !== _p$.t && setStyleProperty(_el$, "inset", _p$.t = _v$2);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0
+		});
+		return _el$;
+	})();
+}
+function TinyToasterProvider(props) {
+	mountStyle(toaster_default, "tiny-toaster");
+	const Context = context.initial({
+		defaultDuration: () => props.defaultDuration,
+		defaultPosition: () => props.defaultPosition
+	});
+	const [, actions] = Context.value;
+	const positions = [
+		"top-left",
+		"top-center",
+		"top-right",
+		"bottom-left",
+		"bottom-center",
+		"bottom-right"
+	];
+	return createComponent(Context.Provider, { get children() {
+		return [createComponent(Portal, { get children() {
+			return createComponent(ToasterContainer, { get children() {
+				return createComponent(For, {
+					each: positions,
+					children: (pos) => createComponent(ToasterLocator, {
+						position: pos,
+						get children() {
+							return createComponent(For, {
+								get each() {
+									return actions.getToastsByPosition(pos);
+								},
+								children: (toast) => createComponent(OneToaster, toast)
+							});
+						}
+					})
+				});
+			} });
+		} }), memo(() => props.children)];
+	} });
+}
+
+//#endregion
+export { TinyToasterProvider };

package/dist/components/toaster/provider.jsx

@@ -0,0 +1,51 @@
+import toaster_default from "../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/toaster/toaster.jsx";
+import { context } from "./context.jsx";
+import { ToasterLocator } from "./locator.jsx";
+import { OneToaster } from "./one-toaster.jsx";
+import { mountStyle } from "solid-tiny-utils";
+import { For, Portal } from "solid-js/web";
+
+//#region src/components/toaster/provider.tsx
+function ToasterContainer(props) {
+	return <div style={{
+		"z-index": props.zIndex ?? 9999,
+		position: "fixed",
+		inset: props.padding ? `${props.padding}px` : "16px",
+		"pointer-events": "none"
+	}}>
+      {props.children}
+    </div>;
+}
+function TinyToasterProvider(props) {
+	mountStyle(toaster_default, "tiny-toaster");
+	const Context = context.initial({
+		defaultDuration: () => props.defaultDuration,
+		defaultPosition: () => props.defaultPosition
+	});
+	const [, actions] = Context.value;
+	const positions = [
+		"top-left",
+		"top-center",
+		"top-right",
+		"bottom-left",
+		"bottom-center",
+		"bottom-right"
+	];
+	return <Context.Provider>
+      <Portal>
+        <ToasterContainer>
+          <For each={positions}>
+            {(pos) => <ToasterLocator position={pos}>
+                <For each={actions.getToastsByPosition(pos)}>
+                  {(toast) => <OneToaster {...toast} />}
+                </For>
+              </ToasterLocator>}
+          </For>
+        </ToasterContainer>
+      </Portal>
+      {props.children}
+    </Context.Provider>;
+}
+
+//#endregion
+export { TinyToasterProvider };

package/dist/components/toaster/type.d.ts

@@ -0,0 +1,15 @@
+import { MaybeCallableChild } from "solid-tiny-utils";
+
+//#region src/components/toaster/type.d.ts
+interface Toast {
+  id: string;
+  type: ToastType;
+  duration: number;
+  position: ToastPosition;
+  message: MaybeCallableChild<[Omit<Toast, "icon" | "message">]>;
+  icon: MaybeCallableChild<[Omit<Toast, "icon" | "message">]>;
+}
+type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+type ToastType = "success" | "error" | "warning" | "info" | "blank" | "loading";
+//#endregion
+export { Toast, ToastPosition, ToastType };

package/dist/components/toaster/use-toaster.d.ts

@@ -0,0 +1,48 @@
+import { Toast } from "./type.js";
+import { MaybeCallableChild } from "solid-tiny-utils";
+
+//#region src/components/toaster/use-toaster.d.ts
+declare function useToaster(): ((msg: MaybeCallableChild<[{
+  id: string;
+}]>, opt?: {
+  duration?: number;
+  position?: Toast["position"];
+  type?: Toast["type"];
+  icon?: Toast["icon"];
+}) => string) & {
+  blank: (msg: MaybeCallableChild<[{
+    id: string;
+  }]>, opt?: Omit<Partial<Omit<Toast, "message" | "id">>, "type"> | undefined) => string;
+  loading: (msg: MaybeCallableChild<[{
+    id: string;
+  }]>, opt?: Omit<Partial<Omit<Toast, "message" | "id">>, "type" | "duration"> | undefined) => string;
+  success: (msg: MaybeCallableChild<[{
+    id: string;
+  }]>, opt?: Omit<Partial<Omit<Toast, "message" | "id">>, "type"> | undefined) => string;
+  error: (msg: MaybeCallableChild<[{
+    id: string;
+  }]>, opt?: Omit<Partial<Omit<Toast, "message" | "id">>, "type"> | undefined) => string;
+  info: (msg: MaybeCallableChild<[{
+    id: string;
+  }]>, opt?: Omit<Partial<Omit<Toast, "message" | "id">>, "type"> | undefined) => string;
+  warning: (msg: MaybeCallableChild<[{
+    id: string;
+  }]>, opt?: Omit<Partial<Omit<Toast, "message" | "id">>, "type"> | undefined) => string;
+  promise: <T>(promise: Promise<T>, phase: {
+    loading: MaybeCallableChild<[{
+      id: string;
+    }]>;
+    success: MaybeCallableChild<[{
+      id: string;
+      data: T;
+    }]>;
+    error: MaybeCallableChild<[{
+      id: string;
+      error: unknown;
+    }]>;
+  }) => void;
+  dismiss: (id: string) => void;
+  update: (id: string, updatedProps: Partial<Toast>) => void;
+};
+//#endregion
+export { useToaster };

package/dist/components/toaster/use-toaster.js

@@ -0,0 +1,72 @@
+import { context } from "./context.js";
+import { createUniqueId } from "solid-js";
+import { callMaybeCallableChild } from "solid-tiny-utils";
+
+//#region src/components/toaster/use-toaster.ts
+function createPreset(presets, toast) {
+	return (msg, opt) => {
+		return toast(msg, {
+			...presets,
+			...opt
+		});
+	};
+}
+function useToaster() {
+	const [state, actions] = context.useContext();
+	const toast = (msg, opt) => {
+		const id = `toast-${createUniqueId()}`;
+		actions.setState("toasts", (toasts) => [{
+			id,
+			type: opt?.type || "blank",
+			duration: opt?.duration ?? state.defaultDuration,
+			position: opt?.position || state.defaultPosition,
+			message: msg,
+			icon: opt?.icon ?? null
+		}, ...toasts]);
+		return id;
+	};
+	return Object.assign(toast, {
+		blank: createPreset({ type: "blank" }, toast),
+		loading: createPreset({
+			type: "loading",
+			duration: 0
+		}, toast),
+		success: createPreset({ type: "success" }, toast),
+		error: createPreset({ type: "error" }, toast),
+		info: createPreset({ type: "info" }, toast),
+		warning: createPreset({ type: "warning" }, toast),
+		promise: createPromiseToast(toast, actions.updateToast),
+		dismiss: actions.dismissToast,
+		update: actions.updateToast
+	});
+}
+function createPromiseToast(toast, update) {
+	return (promise, phase) => {
+		const id = toast((params) => callMaybeCallableChild(phase.loading, { ...params }), {
+			type: "loading",
+			duration: 0
+		});
+		promise.then((data) => {
+			update(id, {
+				type: "success",
+				duration: 5e3,
+				message: ({ id: id$1 }) => callMaybeCallableChild(phase.success, {
+					id: id$1,
+					data
+				})
+			});
+		}).catch((error) => {
+			update(id, {
+				type: "error",
+				duration: 5e3,
+				message: ({ id: id$1 }) => callMaybeCallableChild(phase.error, {
+					id: id$1,
+					error
+				})
+			});
+		});
+	};
+}
+
+//#endregion
+export { useToaster };

package/dist/components/toaster/use-toaster.jsx

@@ -0,0 +1,72 @@
+import { context } from "./context.jsx";
+import { createUniqueId } from "solid-js";
+import { callMaybeCallableChild } from "solid-tiny-utils";
+
+//#region src/components/toaster/use-toaster.ts
+function createPreset(presets, toast) {
+	return (msg, opt) => {
+		return toast(msg, {
+			...presets,
+			...opt
+		});
+	};
+}
+function useToaster() {
+	const [state, actions] = context.useContext();
+	const toast = (msg, opt) => {
+		const id = `toast-${createUniqueId()}`;
+		actions.setState("toasts", (toasts) => [{
+			id,
+			type: opt?.type || "blank",
+			duration: opt?.duration ?? state.defaultDuration,
+			position: opt?.position || state.defaultPosition,
+			message: msg,
+			icon: opt?.icon ?? null
+		}, ...toasts]);
+		return id;
+	};
+	return Object.assign(toast, {
+		blank: createPreset({ type: "blank" }, toast),
+		loading: createPreset({
+			type: "loading",
+			duration: 0
+		}, toast),
+		success: createPreset({ type: "success" }, toast),
+		error: createPreset({ type: "error" }, toast),
+		info: createPreset({ type: "info" }, toast),
+		warning: createPreset({ type: "warning" }, toast),
+		promise: createPromiseToast(toast, actions.updateToast),
+		dismiss: actions.dismissToast,
+		update: actions.updateToast
+	});
+}
+function createPromiseToast(toast, update) {
+	return (promise, phase) => {
+		const id = toast((params) => callMaybeCallableChild(phase.loading, { ...params }), {
+			type: "loading",
+			duration: 0
+		});
+		promise.then((data) => {
+			update(id, {
+				type: "success",
+				duration: 5e3,
+				message: ({ id: id$1 }) => callMaybeCallableChild(phase.success, {
+					id: id$1,
+					data
+				})
+			});
+		}).catch((error) => {
+			update(id, {
+				type: "error",
+				duration: 5e3,
+				message: ({ id: id$1 }) => callMaybeCallableChild(phase.error, {
+					id: id$1,
+					error
+				})
+			});
+		});
+	};
+}
+
+//#endregion
+export { useToaster };

package/dist/components/tooltip/tooltip.d.ts

@@ -1,3 +1,4 @@
+import { ClassNames, Styles } from "../../utils/types.js";
 import { JSX } from "solid-js";
 
 //#region src/components/tooltip/tooltip.d.ts
@@ -6,6 +7,12 @@ interface TooltipProps {
   content: string;
   children: JSX.Element;
   disabled?: boolean;
+  classNames?: ClassNames<"content", {
+    disabled: boolean;
+  }>;
+  styles?: Styles<"content", {
+    disabled: boolean;
+  }>;
 }
 declare function Tooltip(props: TooltipProps): JSX.Element;
 //#endregion

package/dist/components/tooltip/tooltip.js

@@ -1,11 +1,13 @@
+import { createClassStyles } from "../../utils/index.js";
 import tooltip_default from "../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/tooltip/tooltip.js";
 import { FloatingUiCore } from "../../primitives/floating/index.js";
 import { createComponent, memo } from "solid-js/web";
-import { mountStyle } from "solid-tiny-utils";
+import { combineClass, combineStyle, mountStyle } from "solid-tiny-utils";
 
 //#region src/components/tooltip/tooltip.tsx
 function Tooltip(props) {
 	mountStyle(tooltip_default, "tiny-tooltip");
+	const [classes, styles] = createClassStyles(() => props.classNames, () => props.styles, () => ({ disabled: props.disabled ?? false }));
 	return createComponent(FloatingUiCore, {
 		get disabled() {
 			return props.disabled;
@@ -18,7 +20,12 @@ function Tooltip(props) {
 			return [createComponent(FloatingUiCore.Trigger, { get children() {
 				return props.children;
 			} }), createComponent(FloatingUiCore.Content, {
-				"class": "tiny-tooltip__content",
+				get ["class"]() {
+					return combineClass("tiny-tooltip__content", classes().content);
+				},
+				get style() {
+					return combineStyle({}, styles().content);
+				},
 				get children() {
 					return props.content;
 				}

package/dist/components/tooltip/tooltip.jsx

@@ -1,13 +1,15 @@
+import { createClassStyles } from "../../utils/index.jsx";
 import tooltip_default from "../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/tooltip/tooltip.jsx";
 import { FloatingUiCore } from "../../primitives/floating/index.jsx";
-import { mountStyle } from "solid-tiny-utils";
+import { combineClass, combineStyle, mountStyle } from "solid-tiny-utils";
 
 //#region src/components/tooltip/tooltip.tsx
 function Tooltip(props) {
 	mountStyle(tooltip_default, "tiny-tooltip");
+	const [classes, styles] = createClassStyles(() => props.classNames, () => props.styles, () => ({ disabled: props.disabled ?? false }));
 	return <FloatingUiCore disabled={props.disabled} placement={props.placement ?? "top"} trigger="hover">
       <FloatingUiCore.Trigger>{props.children}</FloatingUiCore.Trigger>
-      <FloatingUiCore.Content class="tiny-tooltip__content">
+      <FloatingUiCore.Content class={combineClass("tiny-tooltip__content", classes().content)} style={combineStyle({}, styles().content)}>
         {props.content}
       </FloatingUiCore.Content>
     </FloatingUiCore>;

package/dist/components/visually-hidden/index.js

@@ -1,16 +1,18 @@
 import visually_hidden_default from "../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/visually-hidden/visually-hidden.js";
-import { insert, template } from "solid-js/web";
-import { mountStyle } from "solid-tiny-utils";
+import { Dynamic, createComponent, memo, mergeProps } from "solid-js/web";
+import { combineClass, mountStyle } from "solid-tiny-utils";
 
 //#region src/components/visually-hidden/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<span class=tiny-visually-hidden>`);
 function VisuallyHidden(props) {
 	mountStyle(visually_hidden_default, "tiny-visually-hidden");
-	return (() => {
-		var _el$ = _tmpl$();
-		insert(_el$, () => props.children);
-		return _el$;
-	})();
+	return createComponent(Dynamic, mergeProps(props, {
+		get ["class"]() {
+			return combineClass("tiny-visually-hidden", props.class);
+		},
+		get component() {
+			return props.as ?? "span";
+		}
+	}));
 }
 
 //#endregion