@simplysm/solid 13.0.0-beta.6 → 13.0.2

package/dist/components/feedback/loading/LoadingContainer.js

@@ -1,39 +1,36 @@
+import { template as _$template } from "solid-js/web";
+import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
+import { spread as _$spread } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+var _tmpl$ = /* @__PURE__ */ _$template(`<div>`), _tmpl$2 = /* @__PURE__ */ _$template(`<div><div style="animation:sd-busy-bar-before 2s infinite ease-in"></div><div style="animation:sd-busy-bar-after 2s infinite ease-out">`), _tmpl$3 = /* @__PURE__ */ _$template(`<div><pre class=m-0>`), _tmpl$4 = /* @__PURE__ */ _$template(`<div><div>`);
 import { splitProps, createEffect, onCleanup, Show, useContext } from "solid-js";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
-import { LoadingContext } from "./LoadingContext";
-import { createMountTransition } from "../../../hooks/createMountTransition";
+import { LoadingContext } from "./LoadingContext.js";
+import { createMountTransition } from "../../../hooks/createMountTransition.js";
 import "./LoadingContainer.css";
 const baseClass = clsx("relative", "size-full", "min-h-[70px] min-w-[70px]", "overflow-auto");
-const screenBaseClass = clsx(
-  "absolute bottom-0 left-0 right-0 top-0",
-  "z-busy",
-  "bg-white/70 dark:bg-base-900/70",
-  "transition-opacity duration-150"
-);
-const spinnerClass = clsx(
-  "size-8",
-  "border-[6px] border-base-200 border-b-primary-500",
-  "dark:border-base-700 dark:border-b-primary-400",
-  "rounded-full",
-  "animate-spin",
-  "shadow-md",
-  "mx-auto mt-5"
-);
+const screenBaseClass = clsx("absolute bottom-0 left-0 right-0 top-0", "z-busy", "bg-white/70 dark:bg-base-900/70", "transition-opacity duration-150");
+const spinnerClass = clsx("size-8", "border-[6px] border-base-200 border-b-primary-500", "dark:border-base-700 dark:border-b-primary-400", "rounded-full", "animate-spin", "shadow-md", "mx-auto mt-5");
 const messageClass = clsx("w-full", "text-center font-bold", "text-base-700 dark:text-base-200");
 const progressTrackClass = clsx("absolute left-0 top-0", "h-1 w-full", "bg-white dark:bg-base-800");
-const progressBarClass = clsx(
-  "h-1 w-full",
-  "bg-primary-500 dark:bg-primary-400",
-  "transition-transform duration-100 ease-in",
-  "origin-left"
-);
+const progressBarClass = clsx("h-1 w-full", "bg-primary-500 dark:bg-primary-400", "transition-transform duration-100 ease-in", "origin-left");
 const barIndicatorClass = clsx("absolute left-0 top-0", "h-1 w-full", "bg-white dark:bg-base-800");
 const LoadingContainer = (props) => {
   const [local, rest] = splitProps(props, ["busy", "variant", "message", "progressPercent", "class", "children"]);
   const loadingCtx = useContext(LoadingContext);
   const currVariant = () => local.variant ?? (loadingCtx == null ? void 0 : loadingCtx.variant()) ?? "spinner";
-  const { mounted, animating, unmount } = createMountTransition(() => !!local.busy);
+  const {
+    mounted,
+    animating,
+    unmount
+  } = createMountTransition(() => !!local.busy);
   const handleTransitionEnd = (e) => {
     if (e.propertyName !== "opacity") return;
     if (!local.busy) {
@@ -48,34 +45,101 @@ const LoadingContainer = (props) => {
         e.stopPropagation();
       }
     };
-    containerRef.addEventListener("keydown", handleKeyDownCapture, { capture: true });
-    onCleanup(() => containerRef.removeEventListener("keydown", handleKeyDownCapture, { capture: true }));
+    containerRef.addEventListener("keydown", handleKeyDownCapture, {
+      capture: true
+    });
+    onCleanup(() => containerRef.removeEventListener("keydown", handleKeyDownCapture, {
+      capture: true
+    }));
   });
   const screenClass = () => clsx(screenBaseClass, animating() ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0");
   const rectClass = () => {
     if (currVariant() !== "spinner") return "";
-    return clsx(
-      "transition-transform duration-100",
-      animating() ? "translate-y-0 ease-out" : "-translate-y-full ease-in"
-    );
+    return clsx("transition-transform duration-100", animating() ? "translate-y-0 ease-out" : "-translate-y-full ease-in");
   };
-  return /* @__PURE__ */ React.createElement("div", { ref: containerRef, class: twMerge(baseClass, local.class), ...rest }, /* @__PURE__ */ React.createElement(Show, { when: mounted() }, /* @__PURE__ */ React.createElement("div", { class: screenClass(), onTransitionEnd: handleTransitionEnd }, /* @__PURE__ */ React.createElement("div", { class: rectClass() }, /* @__PURE__ */ React.createElement(Show, { when: currVariant() === "spinner" }, /* @__PURE__ */ React.createElement("div", { class: spinnerClass })), /* @__PURE__ */ React.createElement(Show, { when: currVariant() === "bar" && local.busy }, /* @__PURE__ */ React.createElement("div", { class: barIndicatorClass }, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      class: clsx("absolute left-0 top-0 h-1 w-full origin-left", "bg-primary-500 dark:bg-primary-400"),
-      style: {
-        animation: "sd-busy-bar-before 2s infinite ease-in"
+  return (() => {
+    var _el$ = _tmpl$();
+    var _ref$ = containerRef;
+    typeof _ref$ === "function" ? _$use(_ref$, _el$) : containerRef = _el$;
+    _$spread(_el$, _$mergeProps({
+      get ["class"]() {
+        return twMerge(baseClass, local.class);
       }
-    }
-  ), /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      class: clsx("absolute left-0 top-0 h-1 w-full origin-left", "bg-white dark:bg-base-800"),
-      style: {
-        animation: "sd-busy-bar-after 2s infinite ease-out"
+    }, rest), false, true);
+    _$insert(_el$, _$createComponent(Show, {
+      get when() {
+        return mounted();
+      },
+      get children() {
+        var _el$2 = _tmpl$4(), _el$3 = _el$2.firstChild;
+        _el$2.addEventListener("transitionend", handleTransitionEnd);
+        _$insert(_el$3, _$createComponent(Show, {
+          get when() {
+            return currVariant() === "spinner";
+          },
+          get children() {
+            var _el$4 = _tmpl$();
+            _$className(_el$4, spinnerClass);
+            return _el$4;
+          }
+        }), null);
+        _$insert(_el$3, _$createComponent(Show, {
+          get when() {
+            return _$memo(() => currVariant() === "bar")() && local.busy;
+          },
+          get children() {
+            var _el$5 = _tmpl$2(), _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling;
+            _$className(_el$5, barIndicatorClass);
+            _$effect((_p$) => {
+              var _v$ = clsx("absolute left-0 top-0 h-1 w-full origin-left", "bg-primary-500 dark:bg-primary-400"), _v$2 = clsx("absolute left-0 top-0 h-1 w-full origin-left", "bg-white dark:bg-base-800");
+              _v$ !== _p$.e && _$className(_el$6, _p$.e = _v$);
+              _v$2 !== _p$.t && _$className(_el$7, _p$.t = _v$2);
+              return _p$;
+            }, {
+              e: void 0,
+              t: void 0
+            });
+            return _el$5;
+          }
+        }), null);
+        _$insert(_el$3, _$createComponent(Show, {
+          get when() {
+            return local.message;
+          },
+          get children() {
+            var _el$8 = _tmpl$3(), _el$9 = _el$8.firstChild;
+            _$className(_el$8, messageClass);
+            _$insert(_el$9, () => local.message);
+            return _el$8;
+          }
+        }), null);
+        _$insert(_el$2, _$createComponent(Show, {
+          get when() {
+            return local.progressPercent != null;
+          },
+          get children() {
+            var _el$0 = _tmpl$4(), _el$1 = _el$0.firstChild;
+            _$className(_el$0, progressTrackClass);
+            _$className(_el$1, progressBarClass);
+            _$effect((_$p) => _$setStyleProperty(_el$1, "transform", `scaleX(${(local.progressPercent ?? 0) / 100})`));
+            return _el$0;
+          }
+        }), null);
+        _$effect((_p$) => {
+          var _v$3 = screenClass(), _v$4 = rectClass();
+          _v$3 !== _p$.e && _$className(_el$2, _p$.e = _v$3);
+          _v$4 !== _p$.t && _$className(_el$3, _p$.t = _v$4);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        return _el$2;
       }
-    }
-  ))), /* @__PURE__ */ React.createElement(Show, { when: local.message }, /* @__PURE__ */ React.createElement("div", { class: messageClass }, /* @__PURE__ */ React.createElement("pre", { class: "m-0" }, local.message)))), /* @__PURE__ */ React.createElement(Show, { when: local.progressPercent != null }, /* @__PURE__ */ React.createElement("div", { class: progressTrackClass }, /* @__PURE__ */ React.createElement("div", { class: progressBarClass, style: { transform: `scaleX(${(local.progressPercent ?? 0) / 100})` } }))))), local.children);
+    }), null);
+    _$insert(_el$, () => local.children, null);
+    return _el$;
+  })();
 };
 export {
   LoadingContainer

package/dist/components/feedback/loading/LoadingContainer.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/feedback/loading/LoadingContainer.tsx"],
-  "sourcesContent": ["import { type ParentComponent, type JSX, splitProps, createEffect, onCleanup, Show, useContext } from \"solid-js\";\nimport clsx from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\nimport { LoadingContext, type LoadingVariant } from \"./LoadingContext\";\nimport { createMountTransition } from \"../../../hooks/createMountTransition\";\nimport \"./LoadingContainer.css\";\n\nexport interface LoadingContainerProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"children\"> {\n  busy?: boolean;\n  variant?: LoadingVariant;\n  message?: string;\n  progressPercent?: number;\n  children?: JSX.Element;\n}\n\nconst baseClass = clsx(\"relative\", \"size-full\", \"min-h-[70px] min-w-[70px]\", \"overflow-auto\");\n\n// eslint-disable-next-line tailwindcss/enforces-shorthand -- inset\uC740 Chrome 87+\uC5D0\uC11C\uB9CC \uC9C0\uC6D0\nconst screenBaseClass = clsx(\n  \"absolute bottom-0 left-0 right-0 top-0\",\n  \"z-busy\",\n  \"bg-white/70 dark:bg-base-900/70\",\n  \"transition-opacity duration-150\",\n);\n\nconst spinnerClass = clsx(\n  \"size-8\",\n  \"border-[6px] border-base-200 border-b-primary-500\",\n  \"dark:border-base-700 dark:border-b-primary-400\",\n  \"rounded-full\",\n  \"animate-spin\",\n  \"shadow-md\",\n  \"mx-auto mt-5\",\n);\n\nconst messageClass = clsx(\"w-full\", \"text-center font-bold\", \"text-base-700 dark:text-base-200\");\n\nconst progressTrackClass = clsx(\"absolute left-0 top-0\", \"h-1 w-full\", \"bg-white dark:bg-base-800\");\n\nconst progressBarClass = clsx(\n  \"h-1 w-full\",\n  \"bg-primary-500 dark:bg-primary-400\",\n  \"transition-transform duration-100 ease-in\",\n  \"origin-left\",\n);\n\nconst barIndicatorClass = clsx(\"absolute left-0 top-0\", \"h-1 w-full\", \"bg-white dark:bg-base-800\");\n\nexport const LoadingContainer: ParentComponent<LoadingContainerProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"busy\", \"variant\", \"message\", \"progressPercent\", \"class\", \"children\"]);\n\n  const loadingCtx = useContext(LoadingContext);\n  const currVariant = (): LoadingVariant => local.variant ?? loadingCtx?.variant() ?? \"spinner\";\n\n  // \uC560\uB2C8\uBA54\uC774\uC158 \uC0C1\uD0DC (mount transition)\n  const { mounted, animating, unmount } = createMountTransition(() => !!local.busy);\n\n  const handleTransitionEnd = (e: TransitionEvent) => {\n    if (e.propertyName !== \"opacity\") return;\n    if (!local.busy) {\n      unmount();\n    }\n  };\n\n  // \uD0A4\uBCF4\uB4DC \uC785\uB825 \uCC28\uB2E8 (\uCEA1\uCC98 \uB2E8\uACC4)\n  let containerRef!: HTMLDivElement;\n\n  createEffect(() => {\n    const handleKeyDownCapture = (e: KeyboardEvent) => {\n      if (local.busy) {\n        e.preventDefault();\n        e.stopPropagation();\n      }\n    };\n\n    containerRef.addEventListener(\"keydown\", handleKeyDownCapture, { capture: true });\n    onCleanup(() => containerRef.removeEventListener(\"keydown\", handleKeyDownCapture, { capture: true }));\n  });\n\n  const screenClass = () =>\n    clsx(screenBaseClass, animating() ? \"pointer-events-auto opacity-100\" : \"pointer-events-none opacity-0\");\n\n  // spinner: \uC2AC\uB77C\uC774\uB4DC \uB2E4\uC6B4 \uC560\uB2C8\uBA54\uC774\uC158\n  const rectClass = () => {\n    if (currVariant() !== \"spinner\") return \"\";\n    return clsx(\n      \"transition-transform duration-100\",\n      animating() ? \"translate-y-0 ease-out\" : \"-translate-y-full ease-in\",\n    );\n  };\n\n  return (\n    <div ref={containerRef} class={twMerge(baseClass, local.class)} {...rest}>\n      <Show when={mounted()}>\n        <div class={screenClass()} onTransitionEnd={handleTransitionEnd}>\n          <div class={rectClass()}>\n            <Show when={currVariant() === \"spinner\"}>\n              <div class={spinnerClass} />\n            </Show>\n            <Show when={currVariant() === \"bar\" && local.busy}>\n              <div class={barIndicatorClass}>\n                <div\n                  class={clsx(\"absolute left-0 top-0 h-1 w-full origin-left\", \"bg-primary-500 dark:bg-primary-400\")}\n                  style={{\n                    animation: \"sd-busy-bar-before 2s infinite ease-in\",\n                  }}\n                />\n                <div\n                  class={clsx(\"absolute left-0 top-0 h-1 w-full origin-left\", \"bg-white dark:bg-base-800\")}\n                  style={{\n                    animation: \"sd-busy-bar-after 2s infinite ease-out\",\n                  }}\n                />\n              </div>\n            </Show>\n            <Show when={local.message}>\n              <div class={messageClass}>\n                <pre class=\"m-0\">{local.message}</pre>\n              </div>\n            </Show>\n          </div>\n          <Show when={local.progressPercent != null}>\n            <div class={progressTrackClass}>\n              <div class={progressBarClass} style={{ transform: `scaleX(${(local.progressPercent ?? 0) / 100})` }} />\n            </div>\n          </Show>\n        </div>\n      </Show>\n      {local.children}\n    </div>\n  );\n};\n"],
-  "mappings": "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",
-  "names": []
+  "mappings": "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",
+  "names": ["splitProps", "createEffect", "onCleanup", "Show", "useContext", "clsx", "twMerge", "LoadingContext", "createMountTransition", "baseClass", "screenBaseClass", "spinnerClass", "messageClass", "progressTrackClass", "progressBarClass", "barIndicatorClass", "LoadingContainer", "props", "local", "rest", "loadingCtx", "currVariant", "variant", "mounted", "animating", "unmount", "busy", "handleTransitionEnd", "e", "propertyName", "containerRef", "handleKeyDownCapture", "preventDefault", "stopPropagation", "addEventListener", "capture", "removeEventListener", "screenClass", "rectClass", "_el$", "_tmpl$", "_ref$", "_$use", "_$spread", "_$mergeProps", "class", "_$insert", "_$createComponent", "when", "children", "_el$2", "_tmpl$4", "_el$3", "firstChild", "_el$4", "_$className", "_$memo", "_el$5", "_tmpl$2", "_el$6", "_el$7", "nextSibling", "_$effect", "_p$", "_v$", "_v$2", "t", "undefined", "message", "_el$8", "_tmpl$3", "_el$9", "progressPercent", "_el$0", "_el$1", "_$p", "_$setStyleProperty", "_v$3", "_v$4"]
 }

package/dist/components/feedback/loading/LoadingContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingContext.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/loading/LoadingContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpE,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,KAAK,CAAC;AAE/C,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC;IAClC,IAAI,EAAE,CAAC,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CACpD;AAED,eAAO,MAAM,cAAc,6DAAuC,CAAC;AAEnE,wBAAgB,UAAU,IAAI,mBAAmB,CAMhD"}

package/dist/components/feedback/loading/LoadingContext.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/feedback/loading/LoadingContext.ts"],
-  "sourcesContent": ["import { createContext, useContext, type Accessor } from \"solid-js\";\n\nexport type LoadingVariant = \"spinner\" | \"bar\";\n\nexport interface LoadingContextValue {\n  variant: Accessor<LoadingVariant>;\n  show: (message?: string) => void;\n  hide: () => void;\n  setProgress: (percent: number | undefined) => void;\n}\n\nexport const LoadingContext = createContext<LoadingContextValue>();\n\nexport function useLoading(): LoadingContextValue {\n  const context = useContext(LoadingContext);\n  if (!context) {\n    throw new Error(\"useLoading\uC740 LoadingProvider \uB0B4\uBD80\uC5D0\uC11C\uB9CC \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4\");\n  }\n  return context;\n}\n"],
   "mappings": "AAAA,SAAS,eAAe,kBAAiC;AAWlD,MAAM,iBAAiB,cAAmC;AAE1D,SAAS,aAAkC;AAChD,QAAM,UAAU,WAAW,cAAc;AACzC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,oHAA8C;AAAA,EAChE;AACA,SAAO;AACT;",
   "names": []
 }

package/dist/components/feedback/loading/LoadingProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/loading/LoadingProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,eAAe,EAAgB,MAAM,UAAU,CAAC;AAG9D,OAAO,EAA4C,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAKjG,MAAM,WAAW,oBAAoB;IACnC,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B;AAED,eAAO,MAAM,eAAe,EAAE,eAAe,CAAC,oBAAoB,CA6CjE,CAAC"}

package/dist/components/feedback/loading/LoadingProvider.js

@@ -1,8 +1,10 @@
+import { createComponent as _$createComponent } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
 import { createSignal } from "solid-js";
 import { Portal } from "solid-js/web";
 import clsx from "clsx";
-import { LoadingContext } from "./LoadingContext";
-import { LoadingContainer } from "./LoadingContainer";
+import { LoadingContext } from "./LoadingContext.js";
+import { LoadingContainer } from "./LoadingContainer.js";
 const overlayClass = clsx("fixed left-0 top-0", "h-screen w-screen", "overflow-hidden");
 const LoadingProvider = (props) => {
   const [busyCount, setBusyCount] = createSignal(0);
@@ -29,17 +31,35 @@ const LoadingProvider = (props) => {
     hide,
     setProgress: (percent) => setProgress(percent)
   };
-  return /* @__PURE__ */ React.createElement(LoadingContext.Provider, { value: contextValue }, props.children, /* @__PURE__ */ React.createElement(Portal, null, /* @__PURE__ */ React.createElement(
-    LoadingContainer,
-    {
-      busy: busyCount() > 0,
-      variant: variant(),
-      message: message(),
-      progressPercent: progress(),
-      class: overlayClass,
-      style: { "pointer-events": busyCount() > 0 ? "auto" : "none" }
+  return _$createComponent(LoadingContext.Provider, {
+    value: contextValue,
+    get children() {
+      return [_$memo(() => props.children), _$createComponent(Portal, {
+        get children() {
+          return _$createComponent(LoadingContainer, {
+            get busy() {
+              return busyCount() > 0;
+            },
+            get variant() {
+              return variant();
+            },
+            get message() {
+              return message();
+            },
+            get progressPercent() {
+              return progress();
+            },
+            "class": overlayClass,
+            get style() {
+              return {
+                "pointer-events": busyCount() > 0 ? "auto" : "none"
+              };
+            }
+          });
+        }
+      })];
     }
-  )));
+  });
 };
 export {
   LoadingProvider

package/dist/components/feedback/loading/LoadingProvider.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/feedback/loading/LoadingProvider.tsx"],
-  "sourcesContent": ["import { type ParentComponent, createSignal } from \"solid-js\";\nimport { Portal } from \"solid-js/web\";\nimport clsx from \"clsx\";\nimport { LoadingContext, type LoadingContextValue, type LoadingVariant } from \"./LoadingContext\";\nimport { LoadingContainer } from \"./LoadingContainer\";\n\nconst overlayClass = clsx(\"fixed left-0 top-0\", \"h-screen w-screen\", \"overflow-hidden\");\n\nexport interface LoadingProviderProps {\n  variant?: LoadingVariant;\n}\n\nexport const LoadingProvider: ParentComponent<LoadingProviderProps> = (props) => {\n  const [busyCount, setBusyCount] = createSignal(0);\n  const [message, setMessage] = createSignal<string | undefined>();\n  const [progress, setProgress] = createSignal<number | undefined>();\n\n  const variant = (): LoadingVariant => props.variant ?? \"spinner\";\n\n  const show = (msg?: string): void => {\n    setBusyCount((c) => c + 1);\n    if (msg !== undefined) {\n      setMessage(msg);\n    }\n  };\n\n  const hide = (): void => {\n    const newCount = Math.max(0, busyCount() - 1);\n    setBusyCount(newCount);\n    if (newCount <= 0) {\n      setMessage(undefined);\n      setProgress(undefined);\n    }\n  };\n\n  const contextValue: LoadingContextValue = {\n    variant,\n    show,\n    hide,\n    setProgress: (percent: number | undefined) => setProgress(percent),\n  };\n\n  return (\n    <LoadingContext.Provider value={contextValue}>\n      {props.children}\n      <Portal>\n        <LoadingContainer\n          busy={busyCount() > 0}\n          variant={variant()}\n          message={message()}\n          progressPercent={progress()}\n          class={overlayClass}\n          style={{ \"pointer-events\": busyCount() > 0 ? \"auto\" : \"none\" }}\n        />\n      </Portal>\n    </LoadingContext.Provider>\n  );\n};\n"],
-  "mappings": "AAAA,SAA+B,oBAAoB;AACnD,SAAS,cAAc;AACvB,OAAO,UAAU;AACjB,SAAS,sBAAqE;AAC9E,SAAS,wBAAwB;AAEjC,MAAM,eAAe,KAAK,sBAAsB,qBAAqB,iBAAiB;AAM/E,MAAM,kBAAyD,CAAC,UAAU;AAC/E,QAAM,CAAC,WAAW,YAAY,IAAI,aAAa,CAAC;AAChD,QAAM,CAAC,SAAS,UAAU,IAAI,aAAiC;AAC/D,QAAM,CAAC,UAAU,WAAW,IAAI,aAAiC;AAEjE,QAAM,UAAU,MAAsB,MAAM,WAAW;AAEvD,QAAM,OAAO,CAAC,QAAuB;AACnC,iBAAa,CAAC,MAAM,IAAI,CAAC;AACzB,QAAI,QAAQ,QAAW;AACrB,iBAAW,GAAG;AAAA,IAChB;AAAA,EACF;AAEA,QAAM,OAAO,MAAY;AACvB,UAAM,WAAW,KAAK,IAAI,GAAG,UAAU,IAAI,CAAC;AAC5C,iBAAa,QAAQ;AACrB,QAAI,YAAY,GAAG;AACjB,iBAAW,MAAS;AACpB,kBAAY,MAAS;AAAA,IACvB;AAAA,EACF;AAEA,QAAM,eAAoC;AAAA,IACxC;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,CAAC,YAAgC,YAAY,OAAO;AAAA,EACnE;AAEA,SACE,oCAAC,eAAe,UAAf,EAAwB,OAAO,gBAC7B,MAAM,UACP,oCAAC,cACC;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,UAAU,IAAI;AAAA,MACpB,SAAS,QAAQ;AAAA,MACjB,SAAS,QAAQ;AAAA,MACjB,iBAAiB,SAAS;AAAA,MAC1B,OAAO;AAAA,MACP,OAAO,EAAE,kBAAkB,UAAU,IAAI,IAAI,SAAS,OAAO;AAAA;AAAA,EAC/D,CACF,CACF;AAEJ;",
-  "names": []
+  "mappings": ";;AAAA,SAA+BA,oBAAoB;AACnD,SAASC,cAAc;AACvB,OAAOC,UAAU;AACjB,SAASC,sBAAqE;AAC9E,SAASC,wBAAwB;AAEjC,MAAMC,eAAeH,KAAK,sBAAsB,qBAAqB,iBAAiB;AAM/E,MAAMI,kBAA0DC,WAAU;AAC/E,QAAM,CAACC,WAAWC,YAAY,IAAIT,aAAa,CAAC;AAChD,QAAM,CAACU,SAASC,UAAU,IAAIX,aAAiC;AAC/D,QAAM,CAACY,UAAUC,WAAW,IAAIb,aAAiC;AAEjE,QAAMc,UAAUA,MAAsBP,MAAMO,WAAW;AAEvD,QAAMC,OAAQC,SAAuB;AACnCP,iBAAcQ,OAAMA,IAAI,CAAC;AACzB,QAAID,QAAQE,QAAW;AACrBP,iBAAWK,GAAG;IAChB;EACF;AAEA,QAAMG,OAAOA,MAAY;AACvB,UAAMC,WAAWC,KAAKC,IAAI,GAAGd,UAAU,IAAI,CAAC;AAC5CC,iBAAaW,QAAQ;AACrB,QAAIA,YAAY,GAAG;AACjBT,iBAAWO,MAAS;AACpBL,kBAAYK,MAAS;IACvB;EACF;AAEA,QAAMK,eAAoC;IACxCT;IACAC;IACAI;IACAN,aAAcW,aAAgCX,YAAYW,OAAO;EACnE;AAEA,SAAAC,kBACGtB,eAAeuB,UAAQ;IAACC,OAAOJ;IAAY,IAAAK,WAAA;AAAA,aAAA,CAAAC,OAAA,MACzCtB,MAAMqB,QAAQ,GAAAH,kBACdxB,QAAM;QAAA,IAAA2B,WAAA;AAAA,iBAAAH,kBACJrB,kBAAgB;YAAA,IACf0B,OAAI;AAAA,qBAAEtB,UAAU,IAAI;YAAC;YAAA,IACrBM,UAAO;AAAA,qBAAEA,QAAQ;YAAC;YAAA,IAClBJ,UAAO;AAAA,qBAAEA,QAAQ;YAAC;YAAA,IAClBqB,kBAAe;AAAA,qBAAEnB,SAAS;YAAC;YAAA,SACpBP;YAAY,IACnB2B,QAAK;AAAA,qBAAE;gBAAE,kBAAkBxB,UAAU,IAAI,IAAI,SAAS;cAAO;YAAC;UAAA,CAAA;QAAA;MAAA,CAAA,CAAA;IAAA;EAAA,CAAA;AAKxE;",
+  "names": ["createSignal", "Portal", "clsx", "LoadingContext", "LoadingContainer", "overlayClass", "LoadingProvider", "props", "busyCount", "setBusyCount", "message", "setMessage", "progress", "setProgress", "variant", "show", "msg", "c", "undefined", "hide", "newCount", "Math", "max", "contextValue", "percent", "_$createComponent", "Provider", "value", "children", "_$memo", "busy", "progressPercent", "style"]
 }

package/dist/components/feedback/notification/NotificationBanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationBanner.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/notification/NotificationBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAQ,MAAM,UAAU,CAAC;AAuChD,eAAO,MAAM,kBAAkB,EAAE,SA2ChC,CAAC"}

package/dist/components/feedback/notification/NotificationBanner.js

@@ -1,27 +1,19 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+var _tmpl$ = /* @__PURE__ */ _$template(`<span>`), _tmpl$2 = /* @__PURE__ */ _$template(`<button type=button>`), _tmpl$3 = /* @__PURE__ */ _$template(`<div data-notification-banner role=alert><div><span class=font-semibold></span></div><div><button type=button aria-label="\uC54C\uB9BC \uB2EB\uAE30">`);
 import { Show } from "solid-js";
 import { Portal } from "solid-js/web";
 import clsx from "clsx";
 import { IconX } from "@tabler/icons-solidjs";
-import { useNotification } from "./NotificationContext";
-import { Icon } from "../../display/Icon";
-import { themeTokens } from "../../../styles/tokens.styles";
-const baseClass = clsx(
-  "fixed",
-  "top-4",
-  "right-4",
-  "z-50",
-  "flex",
-  "items-center",
-  "justify-between",
-  "gap-4",
-  "px-3",
-  "py-2",
-  "text-white",
-  "shadow-lg",
-  "dark:shadow-black/30",
-  "rounded-lg",
-  "max-w-sm"
-);
+import { useNotification } from "./NotificationContext.js";
+import { Icon } from "../../display/Icon.js";
+import { themeTokens } from "../../../styles/tokens.styles.js";
+const baseClass = clsx("fixed", "top-4", "right-4", "z-50", "flex", "items-center", "justify-between", "gap-4", "px-3", "py-2", "text-white", "shadow-lg", "dark:shadow-black/30", "rounded-lg", "max-w-sm");
 const themeClasses = {
   info: themeTokens.info.solid,
   success: themeTokens.success.solid,
@@ -43,18 +35,60 @@ const NotificationBanner = () => {
     const latest = notification.latestUnread();
     (_a = latest == null ? void 0 : latest.action) == null ? void 0 : _a.onClick();
   };
-  return /* @__PURE__ */ React.createElement(Show, { when: notification.latestUnread() }, (item) => /* @__PURE__ */ React.createElement(Portal, null, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      "data-notification-banner": true,
-      "data-theme": item().theme,
-      role: "alert",
-      class: clsx(baseClass, themeClasses[item().theme])
+  return _$createComponent(Show, {
+    get when() {
+      return notification.latestUnread();
     },
-    /* @__PURE__ */ React.createElement("div", { class: contentClass }, /* @__PURE__ */ React.createElement("span", { class: "font-semibold" }, item().title), /* @__PURE__ */ React.createElement(Show, { when: item().message }, /* @__PURE__ */ React.createElement("span", { class: messageClass }, item().message))),
-    /* @__PURE__ */ React.createElement("div", { class: actionsClass }, /* @__PURE__ */ React.createElement(Show, { when: item().action }, /* @__PURE__ */ React.createElement("button", { type: "button", class: actionButtonClass, onClick: handleAction }, item().action.label)), /* @__PURE__ */ React.createElement("button", { type: "button", "aria-label": "\uC54C\uB9BC \uB2EB\uAE30", class: dismissButtonClass, onClick: handleDismiss }, /* @__PURE__ */ React.createElement(Icon, { icon: IconX, size: "1.25em" })))
-  )));
+    children: (item) => _$createComponent(Portal, {
+      get children() {
+        var _el$ = _tmpl$3(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$5 = _el$2.nextSibling, _el$7 = _el$5.firstChild;
+        _$className(_el$2, contentClass);
+        _$insert(_el$3, () => item().title);
+        _$insert(_el$2, _$createComponent(Show, {
+          get when() {
+            return item().message;
+          },
+          get children() {
+            var _el$4 = _tmpl$();
+            _$className(_el$4, messageClass);
+            _$insert(_el$4, () => item().message);
+            return _el$4;
+          }
+        }), null);
+        _$className(_el$5, actionsClass);
+        _$insert(_el$5, _$createComponent(Show, {
+          get when() {
+            return item().action;
+          },
+          get children() {
+            var _el$6 = _tmpl$2();
+            _el$6.$$click = handleAction;
+            _$className(_el$6, actionButtonClass);
+            _$insert(_el$6, () => item().action.label);
+            return _el$6;
+          }
+        }), _el$7);
+        _el$7.$$click = handleDismiss;
+        _$className(_el$7, dismissButtonClass);
+        _$insert(_el$7, _$createComponent(Icon, {
+          icon: IconX,
+          size: "1.25em"
+        }));
+        _$effect((_p$) => {
+          var _v$ = item().theme, _v$2 = clsx(baseClass, themeClasses[item().theme]);
+          _v$ !== _p$.e && _$setAttribute(_el$, "data-theme", _p$.e = _v$);
+          _v$2 !== _p$.t && _$className(_el$, _p$.t = _v$2);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        return _el$;
+      }
+    })
+  });
 };
+_$delegateEvents(["click"]);
 export {
   NotificationBanner
 };

package/dist/components/feedback/notification/NotificationBanner.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/feedback/notification/NotificationBanner.tsx"],
-  "sourcesContent": ["import { type Component, Show } from \"solid-js\";\nimport { Portal } from \"solid-js/web\";\nimport clsx from \"clsx\";\nimport { IconX } from \"@tabler/icons-solidjs\";\nimport { useNotification } from \"./NotificationContext\";\nimport { Icon } from \"../../display/Icon\";\nimport { themeTokens } from \"../../../styles/tokens.styles\";\n\nconst baseClass = clsx(\n  \"fixed\",\n  \"top-4\",\n  \"right-4\",\n  \"z-50\",\n  \"flex\",\n  \"items-center\",\n  \"justify-between\",\n  \"gap-4\",\n  \"px-3\",\n  \"py-2\",\n  \"text-white\",\n  \"shadow-lg\",\n  \"dark:shadow-black/30\",\n  \"rounded-lg\",\n  \"max-w-sm\",\n);\n\nconst themeClasses: Record<string, string> = {\n  info: themeTokens.info.solid,\n  success: themeTokens.success.solid,\n  warning: themeTokens.warning.solid,\n  danger: themeTokens.danger.solid,\n};\n\nconst contentClass = clsx(\"flex flex-col\", \"gap-0.5\");\nconst messageClass = clsx(\"text-sm\", \"opacity-90\");\nconst actionsClass = clsx(\"flex items-center\", \"gap-2\");\nconst actionButtonClass = clsx(\"rounded\", \"bg-white/20\", \"px-3 py-1\", \"text-sm\", \"hover:bg-white/30\");\nconst dismissButtonClass = clsx(\"rounded\", \"p-1\", \"hover:bg-white/20\");\n\nexport const NotificationBanner: Component = () => {\n  const notification = useNotification();\n\n  const handleDismiss = () => {\n    notification.dismissBanner();\n  };\n\n  const handleAction = () => {\n    const latest = notification.latestUnread();\n    latest?.action?.onClick();\n  };\n\n  return (\n    <Show when={notification.latestUnread()}>\n      {(item) => (\n        <Portal>\n          <div\n            data-notification-banner\n            data-theme={item().theme}\n            role=\"alert\"\n            class={clsx(baseClass, themeClasses[item().theme])}\n          >\n            <div class={contentClass}>\n              <span class=\"font-semibold\">{item().title}</span>\n              <Show when={item().message}>\n                <span class={messageClass}>{item().message}</span>\n              </Show>\n            </div>\n            <div class={actionsClass}>\n              <Show when={item().action}>\n                <button type=\"button\" class={actionButtonClass} onClick={handleAction}>\n                  {item().action!.label}\n                </button>\n              </Show>\n              <button type=\"button\" aria-label=\"\uC54C\uB9BC \uB2EB\uAE30\" class={dismissButtonClass} onClick={handleDismiss}>\n                <Icon icon={IconX} size=\"1.25em\" />\n              </button>\n            </div>\n          </div>\n        </Portal>\n      )}\n    </Show>\n  );\n};\n"],
-  "mappings": "AAAA,SAAyB,YAAY;AACrC,SAAS,cAAc;AACvB,OAAO,UAAU;AACjB,SAAS,aAAa;AACtB,SAAS,uBAAuB;AAChC,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAE5B,MAAM,YAAY;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,eAAuC;AAAA,EAC3C,MAAM,YAAY,KAAK;AAAA,EACvB,SAAS,YAAY,QAAQ;AAAA,EAC7B,SAAS,YAAY,QAAQ;AAAA,EAC7B,QAAQ,YAAY,OAAO;AAC7B;AAEA,MAAM,eAAe,KAAK,iBAAiB,SAAS;AACpD,MAAM,eAAe,KAAK,WAAW,YAAY;AACjD,MAAM,eAAe,KAAK,qBAAqB,OAAO;AACtD,MAAM,oBAAoB,KAAK,WAAW,eAAe,aAAa,WAAW,mBAAmB;AACpG,MAAM,qBAAqB,KAAK,WAAW,OAAO,mBAAmB;AAE9D,MAAM,qBAAgC,MAAM;AACjD,QAAM,eAAe,gBAAgB;AAErC,QAAM,gBAAgB,MAAM;AAC1B,iBAAa,cAAc;AAAA,EAC7B;AAEA,QAAM,eAAe,MAAM;AA9C7B;AA+CI,UAAM,SAAS,aAAa,aAAa;AACzC,2CAAQ,WAAR,mBAAgB;AAAA,EAClB;AAEA,SACE,oCAAC,QAAK,MAAM,aAAa,aAAa,KACnC,CAAC,SACA,oCAAC,cACC;AAAA,IAAC;AAAA;AAAA,MACC,4BAAwB;AAAA,MACxB,cAAY,KAAK,EAAE;AAAA,MACnB,MAAK;AAAA,MACL,OAAO,KAAK,WAAW,aAAa,KAAK,EAAE,KAAK,CAAC;AAAA;AAAA,IAEjD,oCAAC,SAAI,OAAO,gBACV,oCAAC,UAAK,OAAM,mBAAiB,KAAK,EAAE,KAAM,GAC1C,oCAAC,QAAK,MAAM,KAAK,EAAE,WACjB,oCAAC,UAAK,OAAO,gBAAe,KAAK,EAAE,OAAQ,CAC7C,CACF;AAAA,IACA,oCAAC,SAAI,OAAO,gBACV,oCAAC,QAAK,MAAM,KAAK,EAAE,UACjB,oCAAC,YAAO,MAAK,UAAS,OAAO,mBAAmB,SAAS,gBACtD,KAAK,EAAE,OAAQ,KAClB,CACF,GACA,oCAAC,YAAO,MAAK,UAAS,cAAW,6BAAQ,OAAO,oBAAoB,SAAS,iBAC3E,oCAAC,QAAK,MAAM,OAAO,MAAK,UAAS,CACnC,CACF;AAAA,EACF,CACF,CAEJ;AAEJ;",
-  "names": []
+  "mappings": ";;;;;;;;AAAA,SAAyBA,YAAY;AACrC,SAASC,cAAc;AACvB,OAAOC,UAAU;AACjB,SAASC,aAAa;AACtB,SAASC,uBAAuB;AAChC,SAASC,YAAY;AACrB,SAASC,mBAAmB;AAE5B,MAAMC,YAAYL,KAChB,SACA,SACA,WACA,QACA,QACA,gBACA,mBACA,SACA,QACA,QACA,cACA,aACA,wBACA,cACA,UACF;AAEA,MAAMM,eAAuC;EAC3CC,MAAMH,YAAYG,KAAKC;EACvBC,SAASL,YAAYK,QAAQD;EAC7BE,SAASN,YAAYM,QAAQF;EAC7BG,QAAQP,YAAYO,OAAOH;AAC7B;AAEA,MAAMI,eAAeZ,KAAK,iBAAiB,SAAS;AACpD,MAAMa,eAAeb,KAAK,WAAW,YAAY;AACjD,MAAMc,eAAed,KAAK,qBAAqB,OAAO;AACtD,MAAMe,oBAAoBf,KAAK,WAAW,eAAe,aAAa,WAAW,mBAAmB;AACpG,MAAMgB,qBAAqBhB,KAAK,WAAW,OAAO,mBAAmB;AAE9D,MAAMiB,qBAAgCA,MAAM;AACjD,QAAMC,eAAehB,gBAAgB;AAErC,QAAMiB,gBAAgBA,MAAM;AAC1BD,iBAAaE,cAAc;EAC7B;AAEA,QAAMC,eAAeA,MAAM;;AACzB,UAAMC,SAASJ,aAAaK,aAAa;AACzCD,2CAAQE,WAARF,mBAAgBG;EAClB;AAEA,SAAAC,kBACG5B,MAAI;IAAA,IAAC6B,OAAI;AAAA,aAAET,aAAaK,aAAa;IAAC;IAAAK,UACnCC,UAAIH,kBACH3B,QAAM;MAAA,IAAA6B,WAAA;AAAA,YAAAE,OAAAC,QAAA,GAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAC,YAAAE,QAAAH,MAAAI,aAAAC,QAAAF,MAAAF;AAAAK,oBAAAN,OAOSpB,YAAY;AAAA2B,iBAAAL,OAAA,MACOL,KAAK,EAAEW,KAAK;AAAAD,iBAAAP,OAAAN,kBACxC5B,MAAI;UAAA,IAAC6B,OAAI;AAAA,mBAAEE,KAAK,EAAEY;UAAO;UAAA,IAAAb,WAAA;AAAA,gBAAAc,QAAAC,OAAA;AAAAL,wBAAAI,OACX7B,YAAY;AAAA0B,qBAAAG,OAAA,MAAGb,KAAK,EAAEY,OAAO;AAAA,mBAAAC;UAAA;QAAA,CAAA,GAAA,IAAA;AAAAJ,oBAAAH,OAGlCrB,YAAY;AAAAyB,iBAAAJ,OAAAT,kBACrB5B,MAAI;UAAA,IAAC6B,OAAI;AAAA,mBAAEE,KAAK,EAAEL;UAAM;UAAA,IAAAI,WAAA;AAAA,gBAAAgB,QAAAC,QAAA;AAAAD,kBAAAE,UACkCzB;AAAYiB,wBAAAM,OAAxC7B,iBAAiB;AAAAwB,qBAAAK,OAAA,MAC3Cf,KAAK,EAAEL,OAAQuB,KAAK;AAAA,mBAAAH;UAAA;QAAA,CAAA,GAAAP,KAAA;AAAAA,cAAAS,UAGoD3B;AAAamB,oBAAAD,OAA1CrB,kBAAkB;AAAAuB,iBAAAF,OAAAX,kBAC/DvB,MAAI;UAAC6C,MAAM/C;UAAOgD,MAAI;QAAA,CAAA,CAAA;AAAAC,iBAAAC,SAAA;AAAA,cAAAC,MAjBfvB,KAAK,EAAEwB,OAAKC,OAEjBtD,KAAKK,WAAWC,aAAauB,KAAK,EAAEwB,KAAK,CAAC;AAACD,kBAAAD,IAAAI,KAAAC,eAAA1B,MAAA,cAAAqB,IAAAI,IAAAH,GAAA;AAAAE,mBAAAH,IAAAM,KAAAnB,YAAAR,MAAAqB,IAAAM,IAAAH,IAAA;AAAA,iBAAAH;QAAA,GAAA;UAAAI,GAAAG;UAAAD,GAAAC;QAAA,CAAA;AAAA,eAAA5B;MAAA;IAAA,CAAA;EAoBvD,CAAA;AAGP;AAAE6B,iBAAA,CAAA,OAAA,CAAA;",
+  "names": ["Show", "Portal", "clsx", "IconX", "useNotification", "Icon", "themeTokens", "baseClass", "themeClasses", "info", "solid", "success", "warning", "danger", "contentClass", "messageClass", "actionsClass", "actionButtonClass", "dismissButtonClass", "NotificationBanner", "notification", "handleDismiss", "dismissBanner", "handleAction", "latest", "latestUnread", "action", "onClick", "_$createComponent", "when", "children", "item", "_el$", "_tmpl$3", "_el$2", "firstChild", "_el$3", "_el$5", "nextSibling", "_el$7", "_$className", "_$insert", "title", "message", "_el$4", "_tmpl$", "_el$6", "_tmpl$2", "$$click", "label", "icon", "size", "_$effect", "_p$", "_v$", "theme", "_v$2", "e", "_$setAttribute", "t", "undefined", "_$delegateEvents"]
 }

package/dist/components/feedback/notification/NotificationBell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationBell.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/notification/NotificationBell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAA2B,MAAM,UAAU,CAAC;AAQnE,MAAM,WAAW,qBAAqB;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAkDD,eAAO,MAAM,gBAAgB,EAAE,SAAS,CAAC,qBAAqB,CAuE7D,CAAC"}