@simplysm/solid 13.0.75 → 13.0.77

package/dist/components/feedback/busy/BusyContainer.js

@@ -1,30 +1,28 @@
 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 { className as _$className } 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";
+var _tmpl$ = /* @__PURE__ */ _$template(`<div class="mx-auto mt-5 size-8 animate-spin rounded-full border-[6px] border-base-200 border-b-primary-500 shadow-md dark:border-base-700 dark:border-b-primary-400">`), _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 class="h-1 w-full origin-left bg-primary-500 transition-transform duration-100 ease-in dark:bg-primary-400">`), _tmpl$5 = /* @__PURE__ */ _$template(`<div><div>`), _tmpl$6 = /* @__PURE__ */ _$template(`<div>`);
+import { splitProps, createEffect, onCleanup, Show } from "solid-js";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
-import { BusyContext } from "./BusyContext.js";
+import { bg, text } from "../../../styles/base.styles.js";
+import { useBusy } from "./BusyProvider.js";
 import { createMountTransition } from "../../../hooks/createMountTransition.js";
-import "./BusyContainer.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 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 barIndicatorClass = clsx("absolute left-0 top-0", "h-1 w-full", "bg-white dark:bg-base-800");
+import "./BusyContainer.animate.css";
 const BusyContainer = (props) => {
   const [local, rest] = splitProps(props, ["busy", "ready", "variant", "message", "progressPercent", "class", "children"]);
-  const busyCtx = useContext(BusyContext);
+  let busyCtx;
+  try {
+    busyCtx = useBusy();
+  } catch {
+  }
   const currVariant = () => local.variant ?? (busyCtx == null ? void 0 : busyCtx.variant()) ?? "spinner";
   const {
     mounted,
@@ -52,18 +50,18 @@ const BusyContainer = (props) => {
       capture: true
     }));
   });
-  const screenClass = () => clsx(screenBaseClass, animating() ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0");
+  const screenClass = () => clsx("absolute inset-0 z-busy bg-white/70 transition-opacity duration-150 dark:bg-base-900/70", 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 (() => {
-    var _el$ = _tmpl$();
+    var _el$ = _tmpl$6();
     var _ref$ = containerRef;
     typeof _ref$ === "function" ? _$use(_ref$, _el$) : containerRef = _el$;
     _$spread(_el$, _$mergeProps({
       get ["class"]() {
-        return twMerge(baseClass, local.class);
+        return twMerge("relative size-full min-h-[70px] min-w-[70px] overflow-auto", local.class);
       }
     }, rest), false, true);
     _$insert(_el$, _$createComponent(Show, {
@@ -71,16 +69,14 @@ const BusyContainer = (props) => {
         return mounted();
       },
       get children() {
-        var _el$2 = _tmpl$4(), _el$3 = _el$2.firstChild;
+        var _el$2 = _tmpl$5(), _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;
+            return _tmpl$();
           }
         }), null);
         _$insert(_el$3, _$createComponent(Show, {
@@ -89,15 +85,16 @@ const BusyContainer = (props) => {
           },
           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);
+              var _v$ = clsx("absolute left-0 top-0 h-1 w-full", bg.surface), _v$2 = clsx("absolute left-0 top-0 h-1 w-full origin-left", "bg-primary-500 dark:bg-primary-400"), _v$3 = clsx("absolute left-0 top-0 h-1 w-full origin-left", bg.surface);
+              _v$ !== _p$.e && _$className(_el$5, _p$.e = _v$);
+              _v$2 !== _p$.t && _$className(_el$6, _p$.t = _v$2);
+              _v$3 !== _p$.a && _$className(_el$7, _p$.a = _v$3);
               return _p$;
             }, {
               e: void 0,
-              t: void 0
+              t: void 0,
+              a: void 0
             });
             return _el$5;
           }
@@ -108,8 +105,8 @@ const BusyContainer = (props) => {
           },
           get children() {
             var _el$8 = _tmpl$3(), _el$9 = _el$8.firstChild;
-            _$className(_el$8, messageClass);
             _$insert(_el$9, () => local.message);
+            _$effect(() => _$className(_el$8, clsx("w-full text-center font-bold", text.default)));
             return _el$8;
           }
         }), null);
@@ -119,16 +116,22 @@ const BusyContainer = (props) => {
           },
           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})`));
+            _$effect((_p$) => {
+              var _v$4 = clsx("absolute left-0 top-0 h-1 w-full", bg.surface), _v$5 = `scaleX(${(local.progressPercent ?? 0) / 100})`;
+              _v$4 !== _p$.e && _$className(_el$0, _p$.e = _v$4);
+              _v$5 !== _p$.t && _$setStyleProperty(_el$1, "transform", _p$.t = _v$5);
+              return _p$;
+            }, {
+              e: void 0,
+              t: void 0
+            });
             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);
+          var _v$6 = screenClass(), _v$7 = rectClass();
+          _v$6 !== _p$.e && _$className(_el$2, _p$.e = _v$6);
+          _v$7 !== _p$.t && _$className(_el$3, _p$.t = _v$7);
           return _p$;
         }, {
           e: void 0,

package/dist/components/feedback/busy/BusyContainer.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/feedback/busy/BusyContainer.tsx"],
-  "mappings": "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",
-  "names": ["splitProps", "createEffect", "onCleanup", "Show", "useContext", "clsx", "twMerge", "BusyContext", "createMountTransition", "baseClass", "screenBaseClass", "spinnerClass", "messageClass", "progressTrackClass", "progressBarClass", "barIndicatorClass", "BusyContainer", "props", "local", "rest", "busyCtx", "currVariant", "variant", "mounted", "animating", "unmount", "ready", "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"]
+  "mappings": "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",
+  "names": ["splitProps", "createEffect", "onCleanup", "Show", "clsx", "twMerge", "bg", "text", "useBusy", "createMountTransition", "BusyContainer", "props", "local", "rest", "busyCtx", "currVariant", "variant", "mounted", "animating", "unmount", "ready", "busy", "handleTransitionEnd", "e", "propertyName", "containerRef", "handleKeyDownCapture", "preventDefault", "stopPropagation", "addEventListener", "capture", "removeEventListener", "screenClass", "rectClass", "_el$", "_tmpl$6", "_ref$", "_$use", "_$spread", "_$mergeProps", "class", "_$insert", "_$createComponent", "when", "children", "_el$2", "_tmpl$5", "_el$3", "firstChild", "_tmpl$", "_$memo", "_el$5", "_tmpl$2", "_el$6", "_el$7", "nextSibling", "_$effect", "_p$", "_v$", "surface", "_v$2", "_v$3", "_$className", "t", "a", "undefined", "message", "_el$8", "_tmpl$3", "_el$9", "default", "progressPercent", "_el$0", "_tmpl$4", "_el$1", "_v$4", "_v$5", "_$setStyleProperty", "_v$6", "_v$7"]
 }

package/dist/components/feedback/busy/BusyProvider.d.ts

@@ -1,5 +1,29 @@
-import { type ParentComponent } from "solid-js";
-import { type BusyVariant } from "./BusyContext";
+import { type ParentComponent, type Accessor } from "solid-js";
+/**
+ * Busy overlay display type
+ * - `spinner`: Full-screen spinner
+ * - `bar`: Top progress bar
+ */
+export type BusyVariant = "spinner" | "bar";
+/**
+ * Busy overlay Context value
+ */
+export interface BusyContextValue {
+    /** Current display type */
+    variant: Accessor<BusyVariant>;
+    /** Show overlay (nestable calls, requires matching hide calls) */
+    show: (message?: string) => void;
+    /** Hide overlay (actually hides after all show calls have corresponding hide calls) */
+    hide: () => void;
+    /** Set progress bar progress (0-100, undefined for indeterminate) */
+    setProgress: (percent: number | undefined) => void;
+}
+/**
+ * Hook to access Busy overlay
+ *
+ * @throws Error if BusyProvider is not present
+ */
+export declare function useBusy(): BusyContextValue;
 /** BusyProvider configuration */
 export interface BusyProviderProps {
     /** Display style (default: `"spinner"`) */

package/dist/components/feedback/busy/BusyProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BusyProvider.d.ts","sourceRoot":"","sources":["..\\..\\..\\..\\src\\components\\feedback\\busy\\BusyProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,eAAe,EAAgB,MAAM,UAAU,CAAC;AAG9D,OAAO,EAAsC,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAKrF,iCAAiC;AACjC,MAAM,WAAW,iBAAiB;IAChC,2CAA2C;IAC3C,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,EAAE,eAAe,CAAC,iBAAiB,CA6C3D,CAAC"}
+{"version":3,"file":"BusyProvider.d.ts","sourceRoot":"","sources":["..\\..\\..\\..\\src\\components\\feedback\\busy\\BusyProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,eAAe,EAA2C,KAAK,QAAQ,EAAE,MAAM,UAAU,CAAC;AAIxG;;;;GAIG;AACH,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,KAAK,CAAC;AAE5C;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,2BAA2B;IAC3B,OAAO,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC;IAC/B,kEAAkE;IAClE,IAAI,EAAE,CAAC,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,uFAAuF;IACvF,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,qEAAqE;IACrE,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CACpD;AAKD;;;;GAIG;AACH,wBAAgB,OAAO,IAAI,gBAAgB,CAM1C;AAED,iCAAiC;AACjC,MAAM,WAAW,iBAAiB;IAChC,2CAA2C;IAC3C,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,EAAE,eAAe,CAAC,iBAAiB,CA6C3D,CAAC"}

package/dist/components/feedback/busy/BusyProvider.js

@@ -1,11 +1,16 @@
 import { createComponent as _$createComponent } from "solid-js/web";
 import { memo as _$memo } from "solid-js/web";
-import { createSignal } from "solid-js";
+import { createSignal, createContext, useContext } from "solid-js";
 import { Portal } from "solid-js/web";
-import clsx from "clsx";
-import { BusyContext } from "./BusyContext.js";
 import { BusyContainer } from "./BusyContainer.js";
-const overlayClass = clsx("fixed left-0 top-0", "h-screen w-screen", "overflow-hidden");
+const BusyCtx = createContext();
+function useBusy() {
+  const context = useContext(BusyCtx);
+  if (!context) {
+    throw new Error("useBusy can only be used inside BusyProvider");
+  }
+  return context;
+}
 const BusyProvider = (props) => {
   const [busyCount, setBusyCount] = createSignal(0);
   const [message, setMessage] = createSignal();
@@ -31,7 +36,7 @@ const BusyProvider = (props) => {
     hide,
     setProgress: (percent) => setProgress(percent)
   };
-  return _$createComponent(BusyContext.Provider, {
+  return _$createComponent(BusyCtx.Provider, {
     value: contextValue,
     get children() {
       return [_$memo(() => props.children), _$createComponent(Portal, {
@@ -49,7 +54,7 @@ const BusyProvider = (props) => {
             get progressPercent() {
               return progress();
             },
-            "class": overlayClass,
+            "class": "fixed left-0 top-0 h-screen w-screen overflow-hidden",
             get style() {
               return {
                 "pointer-events": busyCount() > 0 ? "auto" : "none"
@@ -62,6 +67,7 @@ const BusyProvider = (props) => {
   });
 };
 export {
-  BusyProvider
+  BusyProvider,
+  useBusy
 };
 //# sourceMappingURL=BusyProvider.js.map

package/dist/components/feedback/busy/BusyProvider.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/feedback/busy/BusyProvider.tsx"],
-  "mappings": ";;AAAA,SAA+BA,oBAAoB;AACnD,SAASC,cAAc;AACvB,OAAOC,UAAU;AACjB,SAASC,mBAA4D;AACrE,SAASC,qBAAqB;AAE9B,MAAMC,eAAeH,KAAK,sBAAsB,qBAAqB,iBAAiB;AAgB/E,MAAMI,eAAoDC,WAAU;AACzE,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,MAAmBP,MAAMO,WAAW;AAEpD,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,eAAiC;IACrCT;IACAC;IACAI;IACAN,aAAcW,aAAgCX,YAAYW,OAAO;EACnE;AAEA,SAAAC,kBACGtB,YAAYuB,UAAQ;IAACC,OAAOJ;IAAY,IAAAK,WAAA;AAAA,aAAA,CAAAC,OAAA,MACtCtB,MAAMqB,QAAQ,GAAAH,kBACdxB,QAAM;QAAA,IAAA2B,WAAA;AAAA,iBAAAH,kBACJrB,eAAa;YAAA,IACZ0B,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", "BusyContext", "BusyContainer", "overlayClass", "BusyProvider", "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"]
+  "mappings": ";;AAAA,SAA+BA,cAAcC,eAAeC,kBAAiC;AAC7F,SAASC,cAAc;AACvB,SAASC,qBAAqB;AAwB9B,MAAMC,UAAUJ,cAAgC;AAOzC,SAASK,UAA4B;AAC1C,QAAMC,UAAUL,WAAWG,OAAO;AAClC,MAAI,CAACE,SAAS;AACZ,UAAM,IAAIC,MAAM,8CAA8C;EAChE;AACA,SAAOD;AACT;AAgBO,MAAME,eAAoDC,WAAU;AACzE,QAAM,CAACC,WAAWC,YAAY,IAAIZ,aAAa,CAAC;AAChD,QAAM,CAACa,SAASC,UAAU,IAAId,aAAiC;AAC/D,QAAM,CAACe,UAAUC,WAAW,IAAIhB,aAAiC;AAEjE,QAAMiB,UAAUA,MAAmBP,MAAMO,WAAW;AAEpD,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,eAAiC;IACrCT;IACAC;IACAI;IACAN,aAAcW,aAAgCX,YAAYW,OAAO;EACnE;AAEA,SAAAC,kBACGvB,QAAQwB,UAAQ;IAACC,OAAOJ;IAAY,IAAAK,WAAA;AAAA,aAAA,CAAAC,OAAA,MAClCtB,MAAMqB,QAAQ,GAAAH,kBACdzB,QAAM;QAAA,IAAA4B,WAAA;AAAA,iBAAAH,kBACJxB,eAAa;YAAA,IACZ6B,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,SAAA;YAAA,IAE3BoB,QAAK;AAAA,qBAAE;gBAAE,kBAAkBxB,UAAU,IAAI,IAAI,SAAS;cAAO;YAAC;UAAA,CAAA;QAAA;MAAA,CAAA,CAAA;IAAA;EAAA,CAAA;AAKxE;",
+  "names": ["createSignal", "createContext", "useContext", "Portal", "BusyContainer", "BusyCtx", "useBusy", "context", "Error", "BusyProvider", "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

@@ -1 +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,SAiDhC,CAAC"}
+{"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;AAiBhD,eAAO,MAAM,kBAAkB,EAAE,SAoDhC,CAAC"}

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

@@ -1,31 +1,26 @@
 import { template as _$template } from "solid-js/web";
 import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { className as _$className } 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(`<pre>`), _tmpl$2 = /* @__PURE__ */ _$template(`<button type=button>`), _tmpl$3 = /* @__PURE__ */ _$template(`<div data-notification-banner role=alert><div><span class=font-bold></span></div><div><button type=button>`);
+var _tmpl$ = /* @__PURE__ */ _$template(`<pre class="overflow-auto opacity-90">`), _tmpl$2 = /* @__PURE__ */ _$template(`<button type=button class="rounded bg-white/20 px-3 py-1 hover:bg-white/30">`), _tmpl$3 = /* @__PURE__ */ _$template(`<div data-notification-banner role=alert><div><span class=font-bold></span></div><div><button type=button class="rounded p-1 hover:bg-white/20">`);
 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.js";
-import { useI18n } from "../../../providers/i18n/I18nContext.js";
+import { useNotification } from "./NotificationProvider.js";
+import { useI18n } from "../../../providers/i18n/I18nProvider.js";
 import { Icon } from "../../display/Icon.js";
-import { themeTokens } from "../../../styles/tokens.styles.js";
-const baseClass = clsx("fixed", "top-8", "right-4", "z-notification", "flex", "items-start", "gap-4", "px-3", "py-2", "text-white", "shadow-lg", "dark:shadow-black/30", "rounded-lg", "max-w-[calc(100vw-2rem)]");
+import { themeTokens } from "../../../styles/theme.styles.js";
+import { gap } from "../../../styles/control.styles.js";
 const themeClasses = {
   info: themeTokens.info.solid,
   success: themeTokens.success.solid,
   warning: themeTokens.warning.solid,
   danger: themeTokens.danger.solid
 };
-const contentClass = clsx("flex flex-col", "gap-0.5", "min-w-0");
-const messageClass = clsx("opacity-90", "overflow-auto");
-const actionsClass = clsx("flex items-center", "gap-2", "shrink-0");
-const actionButtonClass = clsx("rounded", "bg-white/20", "px-3 py-1", "hover:bg-white/30");
-const dismissButtonClass = clsx("rounded", "p-1", "hover:bg-white/20");
 const NotificationBanner = () => {
   const notification = useNotification();
   const i18n = useI18n();
@@ -44,7 +39,6 @@ const NotificationBanner = () => {
     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() {
@@ -52,12 +46,10 @@ const NotificationBanner = () => {
           },
           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;
@@ -65,27 +57,29 @@ const NotificationBanner = () => {
           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$3 = i18n.t("notification.close");
+          var _v$ = item().theme, _v$2 = clsx("fixed right-4 top-8 z-notification flex max-w-[calc(100vw-2rem)] items-start gap-4 rounded-lg px-3 py-2 text-white shadow-lg dark:shadow-black/30", themeClasses[item().theme]), _v$3 = clsx("flex flex-col", gap.sm, "min-w-0"), _v$4 = clsx("flex items-center", gap.xl, "shrink-0"), _v$5 = i18n.t("notification.close");
           _v$ !== _p$.e && _$setAttribute(_el$, "data-theme", _p$.e = _v$);
           _v$2 !== _p$.t && _$className(_el$, _p$.t = _v$2);
-          _v$3 !== _p$.a && _$setAttribute(_el$7, "aria-label", _p$.a = _v$3);
+          _v$3 !== _p$.a && _$className(_el$2, _p$.a = _v$3);
+          _v$4 !== _p$.o && _$className(_el$5, _p$.o = _v$4);
+          _v$5 !== _p$.i && _$setAttribute(_el$7, "aria-label", _p$.i = _v$5);
           return _p$;
         }, {
           e: void 0,
           t: void 0,
-          a: void 0
+          a: void 0,
+          o: void 0,
+          i: void 0
         });
         return _el$;
       }

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/feedback/notification/NotificationBanner.tsx"],
-  "mappings": "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",
-  "names": ["Show", "Portal", "clsx", "IconX", "useNotification", "useI18n", "Icon", "themeTokens", "baseClass", "themeClasses", "info", "solid", "success", "warning", "danger", "contentClass", "messageClass", "actionsClass", "actionButtonClass", "dismissButtonClass", "NotificationBanner", "notification", "i18n", "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", "_v$3", "t", "e", "_$setAttribute", "a", "undefined", "_$delegateEvents"]
+  "mappings": ";;;;;;;;AAAA,SAAyBA,YAAY;AACrC,SAASC,cAAc;AACvB,OAAOC,UAAU;AACjB,SAASC,aAAa;AACtB,SAASC,uBAAuB;AAChC,SAASC,eAAe;AACxB,SAASC,YAAY;AACrB,SAASC,mBAAmB;AAC5B,SAASC,WAAW;AAEpB,MAAMC,eAAuC;EAC3CC,MAAMH,YAAYG,KAAKC;EACvBC,SAASL,YAAYK,QAAQD;EAC7BE,SAASN,YAAYM,QAAQF;EAC7BG,QAAQP,YAAYO,OAAOH;AAC7B;AAEO,MAAMI,qBAAgCA,MAAM;AACjD,QAAMC,eAAeZ,gBAAgB;AACrC,QAAMa,OAAOZ,QAAQ;AAErB,QAAMa,gBAAgBA,MAAM;AAC1BF,iBAAaG,cAAc;EAC7B;AAEA,QAAMC,eAAeA,MAAM;;AACzB,UAAMC,SAASL,aAAaM,aAAa;AACzCD,2CAAQE,WAARF,mBAAgBG;EAClB;AAEA,SAAAC,kBACGzB,MAAI;IAAA,IAAC0B,OAAI;AAAA,aAAEV,aAAaM,aAAa;IAAC;IAAAK,UACnCC,UAAIH,kBACHxB,QAAM;MAAA,IAAA0B,WAAA;AAAA,YAAAE,OAAAC,QAAA,GAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAC,YAAAE,QAAAH,MAAAI,aAAAC,QAAAF,MAAAF;AAAAK,iBAAAJ,OAAA,MAWwBL,KAAK,EAAEU,KAAK;AAAAD,iBAAAN,OAAAN,kBACpCzB,MAAI;UAAA,IAAC0B,OAAI;AAAA,mBAAEE,KAAK,EAAEW;UAAO;UAAA,IAAAZ,WAAA;AAAA,gBAAAa,QAAAC,OAAA;AAAAJ,qBAAAG,OAAA,MACeZ,KAAK,EAAEW,OAAO;AAAA,mBAAAC;UAAA;QAAA,CAAA,GAAA,IAAA;AAAAH,iBAAAH,OAAAT,kBAItDzB,MAAI;UAAA,IAAC0B,OAAI;AAAA,mBAAEE,KAAK,EAAEL;UAAM;UAAA,IAAAI,WAAA;AAAA,gBAAAe,QAAAC,QAAA;AAAAD,kBAAAE,UACgExB;AAAYiB,qBAAAK,OAAA,MAChGd,KAAK,EAAEL,OAAQsB,KAAK;AAAA,mBAAAH;UAAA;QAAA,CAAA,GAAAN,KAAA;AAAAA,cAAAQ,UAOd1B;AAAamB,iBAAAD,OAAAX,kBAErBnB,MAAI;UAACwC,MAAM3C;UAAO4C,MAAI;QAAA,CAAA,CAAA;AAAAC,iBAAAC,SAAA;AAAA,cAAAC,MAzBftB,KAAK,EAAEuB,OAAKC,OAEjBlD,KACL,qJACAO,aAAamB,KAAK,EAAEuB,KAAK,CAC3B,GAACE,OAEWnD,KAAK,iBAAiBM,IAAI8C,IAAI,SAAS,GAACC,OAMxCrD,KAAK,qBAAqBM,IAAIgD,IAAI,UAAU,GAACC,OAQzCxC,KAAKyC,EAAE,oBAAoB;AAACR,kBAAAD,IAAAU,KAAAC,eAAA/B,MAAA,cAAAoB,IAAAU,IAAAT,GAAA;AAAAE,mBAAAH,IAAAS,KAAAG,YAAAhC,MAAAoB,IAAAS,IAAAN,IAAA;AAAAC,mBAAAJ,IAAAa,KAAAD,YAAA9B,OAAAkB,IAAAa,IAAAT,IAAA;AAAAE,mBAAAN,IAAAc,KAAAF,YAAA3B,OAAAe,IAAAc,IAAAR,IAAA;AAAAE,mBAAAR,IAAAe,KAAAJ,eAAAxB,OAAA,cAAAa,IAAAe,IAAAP,IAAA;AAAA,iBAAAR;QAAA,GAAA;UAAAU,GAAAM;UAAAP,GAAAO;UAAAH,GAAAG;UAAAF,GAAAE;UAAAD,GAAAC;QAAA,CAAA;AAAA,eAAApC;MAAA;IAAA,CAAA;EASjD,CAAA;AAGP;AAAEqC,iBAAA,CAAA,OAAA,CAAA;",
+  "names": ["Show", "Portal", "clsx", "IconX", "useNotification", "useI18n", "Icon", "themeTokens", "gap", "themeClasses", "info", "solid", "success", "warning", "danger", "NotificationBanner", "notification", "i18n", "handleDismiss", "dismissBanner", "handleAction", "latest", "latestUnread", "action", "onClick", "_$createComponent", "when", "children", "item", "_el$", "_tmpl$3", "_el$2", "firstChild", "_el$3", "_el$5", "nextSibling", "_el$7", "_$insert", "title", "message", "_el$4", "_tmpl$", "_el$6", "_tmpl$2", "$$click", "label", "icon", "size", "_$effect", "_p$", "_v$", "theme", "_v$2", "_v$3", "sm", "_v$4", "xl", "_v$5", "t", "e", "_$setAttribute", "_$className", "a", "o", "i", "undefined", "_$delegateEvents"]
 }

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

@@ -1 +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;AAWnE,MAAM,WAAW,qBAAqB;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAwCD,eAAO,MAAM,gBAAgB,EAAE,SAAS,CAAC,qBAAqB,CAgF7D,CAAC"}
+{"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;AAYnE,MAAM,WAAW,qBAAqB;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AASD,eAAO,MAAM,gBAAgB,EAAE,SAAS,CAAC,qBAAqB,CAiF7D,CAAC"}

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

@@ -1,36 +1,27 @@
 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 { className as _$className } 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 data-notification-badge aria-hidden=true>`), _tmpl$2 = /* @__PURE__ */ _$template(`<button type=button data-notification-bell aria-haspopup=true>`), _tmpl$3 = /* @__PURE__ */ _$template(`<button type=button data-notification-clear>`), _tmpl$4 = /* @__PURE__ */ _$template(`<div>`), _tmpl$5 = /* @__PURE__ */ _$template(`<div class="w-80 p-2"><div><span class=font-bold>`), _tmpl$6 = /* @__PURE__ */ _$template(`<pre>`), _tmpl$7 = /* @__PURE__ */ _$template(`<div><div class=font-medium></div><div>`);
+var _tmpl$ = /* @__PURE__ */ _$template(`<span data-notification-badge aria-hidden=true class="absolute right-0 top-0 flex size-5 items-center justify-center rounded-full bg-danger-500 px-1 text-xs font-bold text-white">`), _tmpl$2 = /* @__PURE__ */ _$template(`<button type=button data-notification-clear>`), _tmpl$3 = /* @__PURE__ */ _$template(`<div>`), _tmpl$4 = /* @__PURE__ */ _$template(`<div class="w-80 p-2"><div class="mb-2 flex items-center justify-between px-2"><span class=font-bold>`), _tmpl$5 = /* @__PURE__ */ _$template(`<pre>`), _tmpl$6 = /* @__PURE__ */ _$template(`<div><div class=font-medium></div><div>`);
 import { createSignal, For, Show } from "solid-js";
 import { IconBell } from "@tabler/icons-solidjs";
 import clsx from "clsx";
-import { twMerge } from "tailwind-merge";
-import { useNotification } from "./NotificationContext.js";
+import { useNotification } from "./NotificationProvider.js";
 import { Dropdown } from "../../disclosure/Dropdown.js";
 import { Icon } from "../../display/Icon.js";
 import { NotificationBanner } from "./NotificationBanner.js";
-import { iconButtonBase } from "../../../styles/patterns.styles.js";
-import { useI18n } from "../../../providers/i18n/I18nContext.js";
-const buttonClass = twMerge(iconButtonBase, "relative", "p-2", "rounded-full");
-const badgeClass = clsx("absolute", "top-0", "right-0", "flex", "items-center", "justify-center", "w-5", "h-5", "px-1", "text-xs", "font-bold", "text-white", "bg-danger-500", "rounded-full");
+import { text } from "../../../styles/base.styles.js";
+import { gap } from "../../../styles/control.styles.js";
+import { Button } from "../../form-control/Button.js";
+import { useI18n } from "../../../providers/i18n/I18nProvider.js";
 const themeStyles = {
   info: clsx("border-l-info-500", "bg-info-50", "dark:bg-info-900/10"),
   success: clsx("border-l-success-500", "bg-success-50", "dark:bg-success-900/10"),
   warning: clsx("border-l-warning-500", "bg-warning-50", "dark:bg-warning-900/10"),
   danger: clsx("border-l-danger-500", "bg-danger-50", "dark:bg-danger-900/10")
 };
-const dropdownHeaderClass = clsx("mb-2 flex items-center", "justify-between", "px-2");
-const clearButtonClass = clsx("text-sm", "text-base-500 hover:text-base-700", "dark:text-base-400 dark:hover:text-base-300");
-const emptyClass = clsx("py-8 text-center", "text-base-500 dark:text-base-400");
-const listClass = clsx("flex flex-col", "gap-2");
-const itemBaseClass = clsx("rounded-lg", "border-l-4", "p-2");
-const itemMessageClass = clsx("text-sm", "text-base-600 dark:text-base-400");
-const itemTimeClass = clsx("mt-1 text-xs", "text-base-400");
 const NotificationBell = (props) => {
   const notification = useNotification();
   const i18n = useI18n();
@@ -61,95 +52,102 @@ const NotificationBell = (props) => {
     get children() {
       return [_$createComponent(Dropdown.Trigger, {
         get children() {
-          var _el$ = _tmpl$2();
-          _$className(_el$, buttonClass);
-          _$insert(_el$, _$createComponent(Icon, {
-            icon: IconBell
-          }), null);
-          _$insert(_el$, _$createComponent(Show, {
-            get when() {
-              return notification.unreadCount() > 0;
+          return _$createComponent(Button, {
+            variant: "ghost",
+            size: "xs",
+            "data-notification-bell": true,
+            "class": "relative rounded-full p-2",
+            get ["aria-label"]() {
+              return i18n.t("notificationBell.unreadCount", {
+                count: String(notification.unreadCount())
+              });
+            },
+            "aria-haspopup": "true",
+            get ["aria-expanded"]() {
+              return open();
             },
             get children() {
-              var _el$2 = _tmpl$();
-              _$className(_el$2, badgeClass);
-              _$insert(_el$2, () => notification.unreadCount());
-              return _el$2;
+              return [_$createComponent(Icon, {
+                icon: IconBell
+              }), _$createComponent(Show, {
+                get when() {
+                  return notification.unreadCount() > 0;
+                },
+                get children() {
+                  var _el$ = _tmpl$();
+                  _$insert(_el$, () => notification.unreadCount());
+                  return _el$;
+                }
+              })];
             }
-          }), null);
-          _$effect((_p$) => {
-            var _v$ = i18n.t("notificationBell.unreadCount", {
-              count: String(notification.unreadCount())
-            }), _v$2 = open();
-            _v$ !== _p$.e && _$setAttribute(_el$, "aria-label", _p$.e = _v$);
-            _v$2 !== _p$.t && _$setAttribute(_el$, "aria-expanded", _p$.t = _v$2);
-            return _p$;
-          }, {
-            e: void 0,
-            t: void 0
           });
-          return _el$;
         }
       }), _$createComponent(Dropdown.Content, {
         get children() {
-          var _el$3 = _tmpl$5(), _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild;
-          _$className(_el$4, dropdownHeaderClass);
-          _$insert(_el$5, () => i18n.t("notificationBell.notifications"));
-          _$insert(_el$4, _$createComponent(Show, {
+          var _el$2 = _tmpl$4(), _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild;
+          _$insert(_el$4, () => i18n.t("notificationBell.notifications"));
+          _$insert(_el$3, _$createComponent(Show, {
             get when() {
               return notification.items().length > 0;
             },
             get children() {
-              var _el$6 = _tmpl$3();
-              _el$6.$$click = handleClear;
-              _$className(_el$6, clearButtonClass);
-              _$insert(_el$6, () => i18n.t("notificationBell.clearAll"));
-              return _el$6;
+              var _el$5 = _tmpl$2();
+              _el$5.$$click = handleClear;
+              _$insert(_el$5, () => i18n.t("notificationBell.clearAll"));
+              _$effect(() => _$className(_el$5, clsx("text-sm", text.muted, "hover:text-base-700 dark:hover:text-base-300")));
+              return _el$5;
             }
           }), null);
-          _$insert(_el$3, _$createComponent(Show, {
+          _$insert(_el$2, _$createComponent(Show, {
             get when() {
               return notification.items().length > 0;
             },
             get fallback() {
               return (() => {
-                var _el$8 = _tmpl$4();
-                _$className(_el$8, emptyClass);
-                _$insert(_el$8, () => i18n.t("notificationBell.noNotifications"));
-                return _el$8;
+                var _el$7 = _tmpl$3();
+                _$insert(_el$7, () => i18n.t("notificationBell.noNotifications"));
+                _$effect(() => _$className(_el$7, clsx("py-8 text-center", text.muted)));
+                return _el$7;
               })();
             },
             get children() {
-              var _el$7 = _tmpl$4();
-              _$className(_el$7, listClass);
-              _$insert(_el$7, _$createComponent(For, {
+              var _el$6 = _tmpl$3();
+              _$insert(_el$6, _$createComponent(For, {
                 get each() {
                   return [...notification.items()].reverse();
                 },
                 children: (item) => (() => {
-                  var _el$9 = _tmpl$7(), _el$0 = _el$9.firstChild, _el$10 = _el$0.nextSibling;
-                  _$insert(_el$0, () => item.title);
-                  _$insert(_el$9, _$createComponent(Show, {
+                  var _el$8 = _tmpl$6(), _el$9 = _el$8.firstChild, _el$1 = _el$9.nextSibling;
+                  _$insert(_el$9, () => item.title);
+                  _$insert(_el$8, _$createComponent(Show, {
                     get when() {
                       return item.message;
                     },
                     get children() {
-                      var _el$1 = _tmpl$6();
-                      _$className(_el$1, itemMessageClass);
-                      _$insert(_el$1, () => item.message);
-                      return _el$1;
+                      var _el$0 = _tmpl$5();
+                      _$insert(_el$0, () => item.message);
+                      _$effect(() => _$className(_el$0, clsx("text-sm", text.muted)));
+                      return _el$0;
                     }
-                  }), _el$10);
-                  _$className(_el$10, itemTimeClass);
-                  _$insert(_el$10, () => item.createdAt.toLocaleTimeString());
-                  _$effect(() => _$className(_el$9, clsx(itemBaseClass, themeStyles[item.theme])));
-                  return _el$9;
+                  }), _el$1);
+                  _$insert(_el$1, () => item.createdAt.toLocaleTimeString());
+                  _$effect((_p$) => {
+                    var _v$ = clsx("rounded-lg border-l-4 p-2", themeStyles[item.theme]), _v$2 = clsx("mt-1 text-xs", text.muted);
+                    _v$ !== _p$.e && _$className(_el$8, _p$.e = _v$);
+                    _v$2 !== _p$.t && _$className(_el$1, _p$.t = _v$2);
+                    return _p$;
+                  }, {
+                    e: void 0,
+                    t: void 0
+                  });
+                  return _el$8;
                 })()
               }));
-              return _el$7;
+              _$effect(() => _$className(_el$6, clsx("flex flex-col", gap.xl)));
+              return _el$6;
             }
           }), null);
-          return _el$3;
+          return _el$2;
         }
       })];
     }