solid-tiny-ui 0.5.0 → 0.6.0

package/dist/components/progress/line-progress.jsx

@@ -1,17 +1,17 @@
 import { createClassStyles, getGlobalToken } from "../../utils/index.jsx";
 import progress_default from "../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/progress/progress.jsx";
 import { createMemo } from "solid-js";
-import { combineClass, combineStyle, dataIf, mountStyle } from "solid-tiny-utils";
+import { clamp, combineClass, combineStyle, dataIf, mountStyle } from "solid-tiny-utils";
 
 //#region src/components/progress/line-progress.tsx
 function LineProgress(props) {
 	mountStyle(progress_default, "tiny-progress");
 	const normalizedPercent = createMemo(() => {
 		if (props.percent === void 0) return 45;
-		return Math.min(100, Math.max(0, props.percent));
+		return clamp(props.percent, 0, 100);
 	});
 	const background = createMemo(() => {
-		const color = props.fillColor || getGlobalToken("c-brand-5");
+		const color = props.fillColor || `rgb(${getGlobalToken("rgb-brand-5")})`;
 		if (props.indeterminate) return `linear-gradient(90deg, transparent, ${color} 30%, ${color} 65%, transparent)`;
 		return color;
 	});
@@ -27,12 +27,13 @@ function LineProgress(props) {
 		overflow: "hidden",
 		display: "flex",
 		"align-items": "center",
-		"border-radius": "3px"
+		"border-radius": "3px",
+		width: props.width || "100%"
 	}, styles().root)}>
       <div class={combineClass("tiny-progress-line-rail", classes().rail)} style={combineStyle({
 		height: "1px",
 		width: props.width || "100%",
-		background: props.railColor || getGlobalToken("c-neutral-3"),
+		background: props.railColor || `rgb(${getGlobalToken("rgb-neutral-3")})`,
 		overflow: "visible"
 	}, styles().rail)}>
         <div class={combineClass("tiny-progress-line-fill", classes().fill)} data-indeterminate={dataIf(props.indeterminate ?? false)} style={combineStyle({

package/dist/components/progress/loading-bar.d.ts

@@ -1,4 +1,4 @@
-import * as solid_js17 from "solid-js";
+import * as solid_js44 from "solid-js";
 
 //#region src/components/progress/loading-bar.d.ts
 
@@ -9,6 +9,6 @@ import * as solid_js17 from "solid-js";
  */
 declare function LoadingBar(props: {
   open: boolean;
-}): solid_js17.JSX.Element;
+}): solid_js44.JSX.Element;
 //#endregion
 export { LoadingBar };

package/dist/components/spin/spin-ring.d.ts

@@ -1,5 +1,5 @@
 import { ClassNames, Styles } from "../../utils/types.js";
-import * as solid_js19 from "solid-js";
+import * as solid_js46 from "solid-js";
 
 //#region src/components/spin/spin-ring.d.ts
 declare function SpinRing(props: {
@@ -16,6 +16,6 @@ declare function SpinRing(props: {
     color: string;
     strokeWidth: number;
   }>;
-}): solid_js19.JSX.Element;
+}): solid_js46.JSX.Element;
 //#endregion
 export { SpinRing };

package/dist/components/spin/spin-ring.js

@@ -10,7 +10,7 @@ function SpinRing(props) {
 	mountStyle(spin_ring_default, "tiny-spin-ring");
 	const real = mergeProps$1({
 		size: 32,
-		color: getGlobalToken("c-brand-5"),
+		color: `rgb(${getGlobalToken("rgb-brand-5")})`,
 		strokeWidth: 12
 	}, props);
 	const viewBoxSize = 100;

package/dist/components/spin/spin-ring.jsx

@@ -8,7 +8,7 @@ function SpinRing(props) {
 	mountStyle(spin_ring_default, "tiny-spin-ring");
 	const real = mergeProps({
 		size: 32,
-		color: getGlobalToken("c-brand-5"),
+		color: `rgb(${getGlobalToken("rgb-brand-5")})`,
 		strokeWidth: 12
 	}, props);
 	const viewBoxSize = 100;

package/dist/components/spin/spin.js

@@ -1,5 +1,6 @@
 import { makeClassNames, makeStyles } from "../../utils/index.js";
 import spin_default from "../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/spin/spin.js";
+import { getAnimationDurationMs } from "../../utils/duration.js";
 import { SpinRing } from "./spin-ring.js";
 import { className, createComponent, effect, insert, setAttribute, style, template, use } from "solid-js/web";
 import { Show, children, createMemo, createSignal, onCleanup } from "solid-js";
@@ -31,16 +32,16 @@ function Spin(props) {
 	});
 	const resolvedIndicator = children(() => props.indicator);
 	const [refLoader, setRefLoader] = createSignal();
-	const [show, state] = createPresence({
-		show: spinning,
-		element: refLoader
+	const presence = createPresence(spinning, {
+		enterDuration: () => getAnimationDurationMs(refLoader()),
+		exitDuration: () => getAnimationDurationMs(refLoader())
 	});
 	return (() => {
 		var _el$ = _tmpl$2(), _el$2 = _el$.firstChild;
 		insert(_el$2, () => props.children);
 		insert(_el$, createComponent(Show, {
 			get when() {
-				return show();
+				return presence.isMounted();
 			},
 			get children() {
 				var _el$3 = _tmpl$();
@@ -57,10 +58,10 @@ function Spin(props) {
 					}
 				}));
 				effect((_p$) => {
-					var _v$ = combineClass("tiny-spin__loader", classes().loader), _v$2 = dataIf(state() === "closing"), _v$3 = dataIf(state() === "opening"), _v$4 = styles().loader;
+					var _v$ = combineClass("tiny-spin__loader", classes().loader), _v$2 = dataIf(["entering", "pre-enter"].includes(presence.phase())), _v$3 = dataIf(["exiting"].includes(presence.phase())), _v$4 = styles().loader;
 					_v$ !== _p$.e && className(_el$3, _p$.e = _v$);
-					_v$2 !== _p$.t && setAttribute(_el$3, "data-closing", _p$.t = _v$2);
-					_v$3 !== _p$.a && setAttribute(_el$3, "data-opening", _p$.a = _v$3);
+					_v$2 !== _p$.t && setAttribute(_el$3, "data-entering", _p$.t = _v$2);
+					_v$3 !== _p$.a && setAttribute(_el$3, "data-exiting", _p$.a = _v$3);
 					_p$.o = style(_el$3, _v$4, _p$.o);
 					return _p$;
 				}, {

package/dist/components/spin/spin.jsx

@@ -1,5 +1,6 @@
 import { makeClassNames, makeStyles } from "../../utils/index.jsx";
 import spin_default from "../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/spin/spin.jsx";
+import { getAnimationDurationMs } from "../../utils/duration.jsx";
 import { SpinRing } from "./spin-ring.jsx";
 import { Show, children, createMemo, createSignal, onCleanup } from "solid-js";
 import { combineClass, createPresence, createWatch, dataIf, mountStyle } from "solid-tiny-utils";
@@ -29,16 +30,16 @@ function Spin(props) {
 	});
 	const resolvedIndicator = children(() => props.indicator);
 	const [refLoader, setRefLoader] = createSignal();
-	const [show, state] = createPresence({
-		show: spinning,
-		element: refLoader
+	const presence = createPresence(spinning, {
+		enterDuration: () => getAnimationDurationMs(refLoader()),
+		exitDuration: () => getAnimationDurationMs(refLoader())
 	});
 	return <div aria-busy={spinning()} class={combineClass("tiny-spin", classes().root)} data-spinning={dataIf(spinning())} style={styles().root}>
       <div class={combineClass("tiny-spin__content", classes().content)} style={styles().content}>
         {props.children}
       </div>
-      <Show when={show()}>
-        <div class={combineClass("tiny-spin__loader", classes().loader)} data-closing={dataIf(state() === "closing")} data-opening={dataIf(state() === "opening")} ref={setRefLoader} style={styles().loader}>
+      <Show when={presence.isMounted()}>
+        <div class={combineClass("tiny-spin__loader", classes().loader)} data-entering={dataIf(["entering", "pre-enter"].includes(presence.phase()))} data-exiting={dataIf(["exiting"].includes(presence.phase()))} ref={setRefLoader} style={styles().loader}>
           <Show fallback={<SpinRing />} when={resolvedIndicator()}>
             {resolvedIndicator()}
           </Show>

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

@@ -1,3 +1,4 @@
+import { ClassNames, Styles } from "../../utils/types.js";
 import { JSX } from "solid-js";
 
 //#region src/components/tabs/index.d.ts
@@ -17,6 +18,12 @@ interface TabsProps {
   items: TabItem[];
   activeKey: string;
   onChange?: (key: string) => void;
+  classNames?: ClassNames<"root" | "header" | "tab" | "content" | "item", {
+    activeKey: string;
+  }>;
+  styles?: Styles<"root" | "header" | "tab" | "content" | "item", {
+    activeKey: string;
+  }>;
 }
 declare function Tabs(props: TabsProps): JSX.Element;
 //#endregion

package/dist/components/tabs/index.js

@@ -1,15 +1,17 @@
+import { createClassStyles } from "../../utils/index.js";
 import { AnimatedGroup } from "../../primitives/animated-group/index.js";
 import tabs_default from "../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/tabs/tabs.js";
-import { createComponent, delegateEvents, effect, insert, memo, setAttribute, template } from "solid-js/web";
-import { For, createSignal } from "solid-js";
-import { dataIf, mountStyle } from "solid-tiny-utils";
+import { className, createComponent, delegateEvents, effect, insert, memo, setAttribute, style, template } from "solid-js/web";
+import { For as For$1, createSignal } from "solid-js";
+import { combineClass, combineStyle, dataIf, mountStyle } from "solid-tiny-utils";
 
 //#region src/components/tabs/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<div class=tiny-tabs><div class=tiny-tabs__header></div><div class=tiny-tabs__content>`), _tmpl$2 = /* @__PURE__ */ template(`<button class=tiny-tabs__tab type=button>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div><div></div><div>`), _tmpl$2 = /* @__PURE__ */ template(`<button type=button>`);
 function Tabs(props) {
 	mountStyle(tabs_default, "tiny-tabs");
 	const [dir, setDir] = createSignal(null);
 	const [prev, setPrev] = createSignal("");
+	const [classes, styles] = createClassStyles(() => props.classNames, () => props.styles, () => ({ activeKey: props.activeKey }));
 	return createComponent(AnimatedGroup, {
 		get activeKey() {
 			return props.activeKey;
@@ -20,7 +22,7 @@ function Tabs(props) {
 		children: (state, actions) => {
 			return (() => {
 				var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
-				insert(_el$2, createComponent(For, {
+				insert(_el$2, createComponent(For$1, {
 					get each() {
 						return props.items;
 					},
@@ -35,36 +37,62 @@ function Tabs(props) {
 						};
 						insert(_el$4, () => item.label ?? item.key);
 						effect((_p$) => {
-							var _v$ = dataIf(state.active === item.key), _v$2 = dir() || void 0, _v$3 = dataIf(prev() === item.key && state.active !== item.key);
-							_v$ !== _p$.e && setAttribute(_el$4, "data-active", _p$.e = _v$);
-							_v$2 !== _p$.t && setAttribute(_el$4, "data-dir", _p$.t = _v$2);
-							_v$3 !== _p$.a && setAttribute(_el$4, "data-prev", _p$.a = _v$3);
+							var _v$7 = combineClass("tiny-tabs__tab", classes().tab), _v$8 = dataIf(state.active === item.key), _v$9 = dir() || void 0, _v$0 = dataIf(prev() === item.key && state.active !== item.key), _v$1 = combineStyle({}, styles().tab);
+							_v$7 !== _p$.e && className(_el$4, _p$.e = _v$7);
+							_v$8 !== _p$.t && setAttribute(_el$4, "data-active", _p$.t = _v$8);
+							_v$9 !== _p$.a && setAttribute(_el$4, "data-dir", _p$.a = _v$9);
+							_v$0 !== _p$.o && setAttribute(_el$4, "data-prev", _p$.o = _v$0);
+							_p$.i = style(_el$4, _v$1, _p$.i);
 							return _p$;
 						}, {
 							e: void 0,
 							t: void 0,
-							a: void 0
+							a: void 0,
+							o: void 0,
+							i: void 0
 						});
 						return _el$4;
 					})()
 				}));
-				insert(_el$3, createComponent(For, {
+				insert(_el$3, createComponent(For$1, {
 					get each() {
 						return props.items;
 					},
 					children: (item) => createComponent(AnimatedGroup.Panel, {
-						"class": "tiny-tabs__item",
+						get ["class"]() {
+							return combineClass("tiny-tabs__item", classes().item);
+						},
 						get ["data-dir"]() {
 							return dir() || void 0;
 						},
 						get key() {
 							return item.key;
 						},
+						get style() {
+							return combineStyle({}, styles().item);
+						},
 						get children() {
 							return item.content;
 						}
 					})
 				}));
+				effect((_p$) => {
+					var _v$ = combineClass("tiny-tabs", classes().root), _v$2 = combineStyle({}, styles().root), _v$3 = combineClass("tiny-tabs__header", classes().header), _v$4 = combineStyle({}, styles().header), _v$5 = combineClass("tiny-tabs__content", classes().content), _v$6 = combineStyle({}, styles().content);
+					_v$ !== _p$.e && className(_el$, _p$.e = _v$);
+					_p$.t = style(_el$, _v$2, _p$.t);
+					_v$3 !== _p$.a && className(_el$2, _p$.a = _v$3);
+					_p$.o = style(_el$2, _v$4, _p$.o);
+					_v$5 !== _p$.i && className(_el$3, _p$.i = _v$5);
+					_p$.n = style(_el$3, _v$6, _p$.n);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0,
+					a: void 0,
+					o: void 0,
+					i: void 0,
+					n: void 0
+				});
 				return _el$;
 			})();
 		}

package/dist/components/tabs/index.jsx

@@ -1,32 +1,34 @@
+import { createClassStyles } from "../../utils/index.jsx";
 import { AnimatedGroup } from "../../primitives/animated-group/index.jsx";
 import tabs_default from "../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/tabs/tabs.jsx";
 import { For, createSignal } from "solid-js";
-import { dataIf, mountStyle } from "solid-tiny-utils";
+import { combineClass, combineStyle, dataIf, mountStyle } from "solid-tiny-utils";
 
 //#region src/components/tabs/index.tsx
 function Tabs(props) {
 	mountStyle(tabs_default, "tiny-tabs");
 	const [dir, setDir] = createSignal(null);
 	const [prev, setPrev] = createSignal("");
+	const [classes, styles] = createClassStyles(() => props.classNames, () => props.styles, () => ({ activeKey: props.activeKey }));
 	return <AnimatedGroup activeKey={props.activeKey} onChange={props.onChange}>
       {(state, actions) => {
-		return <div class="tiny-tabs">
-            <div class="tiny-tabs__header">
+		return <div class={combineClass("tiny-tabs", classes().root)} style={combineStyle({}, styles().root)}>
+            <div class={combineClass("tiny-tabs__header", classes().header)} style={combineStyle({}, styles().header)}>
               <For each={props.items}>
-                {(item) => <button class="tiny-tabs__tab" data-active={dataIf(state.active === item.key)} data-dir={dir() || void 0} data-prev={dataIf(prev() === item.key && state.active !== item.key)} onClick={() => {
+                {(item) => <button class={combineClass("tiny-tabs__tab", classes().tab)} data-active={dataIf(state.active === item.key)} data-dir={dir() || void 0} data-prev={dataIf(prev() === item.key && state.active !== item.key)} onClick={() => {
 			if (state.active === item.key) return;
 			const prevIndex = props.items.findIndex((i) => i.key === state.active);
 			setDir(props.items.findIndex((i) => i.key === item.key) > prevIndex ? "right" : "left");
 			setPrev(state.active);
 			actions.setState("active", item.key);
-		}} type="button">
+		}} style={combineStyle({}, styles().tab)} type="button">
                     {item.label ?? item.key}
                   </button>}
               </For>
             </div>
-            <div class="tiny-tabs__content">
+            <div class={combineClass("tiny-tabs__content", classes().content)} style={combineStyle({}, styles().content)}>
               <For each={props.items}>
-                {(item) => <AnimatedGroup.Panel class="tiny-tabs__item" data-dir={dir() || void 0} key={item.key}>
+                {(item) => <AnimatedGroup.Panel class={combineClass("tiny-tabs__item", classes().item)} data-dir={dir() || void 0} key={item.key} style={combineStyle({}, styles().item)}>
                     {item.content}
                   </AnimatedGroup.Panel>}
               </For>

package/dist/components/toaster/context.js

@@ -0,0 +1,31 @@
+import { createComponentState } from "solid-tiny-context";
+
+//#region src/components/toaster/context.ts
+const context = createComponentState({
+	state: () => ({
+		toasts: [],
+		dismissSignal: {},
+		pauseRemoval: false,
+		defaultDuration: 3e3,
+		defaultPosition: "top-center"
+	}),
+	methods: {
+		removeToast(id) {
+			this.actions.setState("toasts", (toasts) => toasts.filter((toast) => toast.id !== id));
+			this.actions.setState("dismissSignal", id, void 0);
+		},
+		getToastsByPosition(position) {
+			return this.state.toasts.filter((toast) => toast.position === position);
+		},
+		dismissToast(id) {
+			this.actions.setState("dismissSignal", id, true);
+		},
+		updateToast(id, updatedProps) {
+			const index = this.state.toasts.findIndex((toast) => toast.id === id);
+			if (index !== -1 && !this.state.dismissSignal[id]) this.actions.setState("toasts", index, updatedProps);
+		}
+	}
+});
+
+//#endregion
+export { context };

package/dist/components/toaster/context.jsx

@@ -0,0 +1,31 @@
+import { createComponentState } from "solid-tiny-context";
+
+//#region src/components/toaster/context.ts
+const context = createComponentState({
+	state: () => ({
+		toasts: [],
+		dismissSignal: {},
+		pauseRemoval: false,
+		defaultDuration: 3e3,
+		defaultPosition: "top-center"
+	}),
+	methods: {
+		removeToast(id) {
+			this.actions.setState("toasts", (toasts) => toasts.filter((toast) => toast.id !== id));
+			this.actions.setState("dismissSignal", id, void 0);
+		},
+		getToastsByPosition(position) {
+			return this.state.toasts.filter((toast) => toast.position === position);
+		},
+		dismissToast(id) {
+			this.actions.setState("dismissSignal", id, true);
+		},
+		updateToast(id, updatedProps) {
+			const index = this.state.toasts.findIndex((toast) => toast.id === id);
+			if (index !== -1 && !this.state.dismissSignal[id]) this.actions.setState("toasts", index, updatedProps);
+		}
+	}
+});
+
+//#endregion
+export { context };

package/dist/components/toaster/icon.js

@@ -0,0 +1,50 @@
+import { IconCheckboxCircleLine } from "../../icons/checkbox-circle-line.js";
+import { IconErrorWarningLine } from "../../icons/error-warning-line.js";
+import { InformationLine } from "../../icons/information-line.js";
+import { IconLoading } from "../../icons/loading.js";
+import "../../icons/index.js";
+import { createComponent, memo } from "solid-js/web";
+import { Match, Switch } from "solid-js";
+
+//#region src/components/toaster/icon.tsx
+function ToasterIcon(props) {
+	return createComponent(Switch, { get children() {
+		return [
+			createComponent(Match, {
+				get when() {
+					return props.type === "info";
+				},
+				get children() {
+					return createComponent(InformationLine, { size: "20px" });
+				}
+			}),
+			createComponent(Match, {
+				get when() {
+					return props.type === "success";
+				},
+				get children() {
+					return createComponent(IconCheckboxCircleLine, { size: "20px" });
+				}
+			}),
+			createComponent(Match, {
+				get when() {
+					return props.type === "error" || props.type === "warning";
+				},
+				get children() {
+					return createComponent(IconErrorWarningLine, { size: "20px" });
+				}
+			}),
+			createComponent(Match, {
+				get when() {
+					return props.type === "loading";
+				},
+				get children() {
+					return createComponent(IconLoading, { size: "20px" });
+				}
+			})
+		];
+	} });
+}
+
+//#endregion
+export { ToasterIcon };

package/dist/components/toaster/icon.jsx

@@ -0,0 +1,27 @@
+import { IconCheckboxCircleLine } from "../../icons/checkbox-circle-line.jsx";
+import { IconErrorWarningLine } from "../../icons/error-warning-line.jsx";
+import { InformationLine } from "../../icons/information-line.jsx";
+import { IconLoading } from "../../icons/loading.jsx";
+import "../../icons/index.jsx";
+import { Match, Switch } from "solid-js";
+
+//#region src/components/toaster/icon.tsx
+function ToasterIcon(props) {
+	return <Switch>
+      <Match when={props.type === "info"}>
+        <InformationLine size="20px" />
+      </Match>
+      <Match when={props.type === "success"}>
+        <IconCheckboxCircleLine size="20px" />
+      </Match>
+      <Match when={props.type === "error" || props.type === "warning"}>
+        <IconErrorWarningLine size="20px" />
+      </Match>
+      <Match when={props.type === "loading"}>
+        <IconLoading size="20px" />
+      </Match>
+    </Switch>;
+}
+
+//#endregion
+export { ToasterIcon };

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

@@ -0,0 +1,3 @@
+import { Toast, ToastPosition, ToastType } from "./type.js";
+import { TinyToasterProvider } from "./provider.js";
+import { useToaster } from "./use-toaster.js";

package/dist/components/toaster/index.js

@@ -0,0 +1,2 @@
+import { TinyToasterProvider } from "./provider.js";
+import { useToaster } from "./use-toaster.js";

package/dist/components/toaster/index.jsx

@@ -0,0 +1,2 @@
+import { TinyToasterProvider } from "./provider.jsx";
+import { useToaster } from "./use-toaster.jsx";

package/dist/components/toaster/locator.js

@@ -0,0 +1,67 @@
+import { Flex } from "../../layout/flex/index.js";
+import "../../layout/index.js";
+import { createComponent } from "solid-js/web";
+import { createMemo } from "solid-js";
+
+//#region src/components/toaster/locator.tsx
+function ToasterLocator(props) {
+	const inset = createMemo(() => {
+		switch (props.position) {
+			case "top-left": return {
+				top: "0",
+				left: "0"
+			};
+			case "top-center": return {
+				top: "0",
+				left: "50%",
+				transform: "translateX(-50%)"
+			};
+			case "top-right": return {
+				top: "0",
+				right: "0"
+			};
+			case "bottom-left": return {
+				bottom: "0",
+				left: "0"
+			};
+			case "bottom-center": return {
+				bottom: "0",
+				left: "50%",
+				transform: "translateX(-50%)"
+			};
+			case "bottom-right": return {
+				bottom: "0",
+				right: "0"
+			};
+			default: return {};
+		}
+	});
+	const alignItems = createMemo(() => {
+		const pos = props.position;
+		if (pos.includes("left")) return "flex-start";
+		if (pos.includes("center")) return "center";
+		if (pos.includes("right")) return "flex-end";
+	});
+	return createComponent(Flex, {
+		get align() {
+			return alignItems();
+		},
+		get reverse() {
+			return props.position.startsWith("bottom");
+		},
+		get style() {
+			return {
+				position: "absolute",
+				width: "fit-content",
+				...inset()
+			};
+		},
+		vertical: true,
+		get children() {
+			return props.children;
+		}
+	});
+}
+
+//#endregion
+export { ToasterLocator };

package/dist/components/toaster/locator.jsx

@@ -0,0 +1,54 @@
+import { Flex } from "../../layout/flex/index.jsx";
+import "../../layout/index.jsx";
+import { createMemo } from "solid-js";
+
+//#region src/components/toaster/locator.tsx
+function ToasterLocator(props) {
+	const inset = createMemo(() => {
+		switch (props.position) {
+			case "top-left": return {
+				top: "0",
+				left: "0"
+			};
+			case "top-center": return {
+				top: "0",
+				left: "50%",
+				transform: "translateX(-50%)"
+			};
+			case "top-right": return {
+				top: "0",
+				right: "0"
+			};
+			case "bottom-left": return {
+				bottom: "0",
+				left: "0"
+			};
+			case "bottom-center": return {
+				bottom: "0",
+				left: "50%",
+				transform: "translateX(-50%)"
+			};
+			case "bottom-right": return {
+				bottom: "0",
+				right: "0"
+			};
+			default: return {};
+		}
+	});
+	const alignItems = createMemo(() => {
+		const pos = props.position;
+		if (pos.includes("left")) return "flex-start";
+		if (pos.includes("center")) return "center";
+		if (pos.includes("right")) return "flex-end";
+	});
+	return <Flex align={alignItems()} reverse={props.position.startsWith("bottom")} style={{
+		position: "absolute",
+		width: "fit-content",
+		...inset()
+	}} vertical>
+      {props.children}
+    </Flex>;
+}
+
+//#endregion
+export { ToasterLocator };