@pathscale/ui 1.1.56 → 1.1.58

package/dist/components/floating-dock/FloatingDock.js

@@ -2,7 +2,8 @@ import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web
 import "./FloatingDock.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div class=floating-dock__icon>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<button type=button class="appearance-none bg-transparent border-0 p-0 cursor-pointer">'), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<a>"), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div class=floating-dock__bg>"), _tmpl$6 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div role=toolbar aria-label=Actions>"), _tmpl$7 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><button type=button class=floating-dock__mobile-toggle>"), _tmpl$8 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button type=button class=floating-dock__mobile-toggle>"), _tmpl$9 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div class=floating-dock__mobile-item>"), _tmpl$0 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<a class=floating-dock__item>"), _tmpl$1 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div class=floating-dock__item>"), _tmpl$10 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg xmlns=http://www.w3.org/2000/svg class="h-5 w-5"viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M4 6h16"></path><path d="M4 12h16"></path><path d="M4 18h16">'), _tmpl$11 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div class=floating-dock>");
+import * as __WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__ from "./FloatingDock.classes.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button type=button>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<a>"), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div role=toolbar aria-label=Actions>"), _tmpl$6 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><button type=button>"), _tmpl$7 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg xmlns=http://www.w3.org/2000/svg><path d="M4 6h16"></path><path d="M4 12h16"></path><path d="M4 18h16">');
 const prefersReducedMotion = "undefined" != typeof window && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 function createSpring(initial, opts = {}) {
     const mass = opts.mass ?? 1;
@@ -107,6 +108,16 @@ const DockItem = (props)=>{
         _el$.addEventListener("mouseenter", handleMouseEnter);
         var _ref$ = wrapRef;
         "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : wrapRef = _el$;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.item, cfg.itemClass)
+            }), {
+            get style () {
+                return {
+                    width: `${cfg.baseSize}px`,
+                    height: `${cfg.baseSize}px`
+                };
+            }
+        }), false, true);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
             get when () {
                 return hovered();
@@ -115,20 +126,18 @@ const DockItem = (props)=>{
                 return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Portal, {
                     get children () {
                         var _el$2 = _tmpl$();
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.tooltip, cfg.tooltipClass)
+                            }), {
+                            get style () {
+                                return {
+                                    top: tooltipStyle().top,
+                                    left: tooltipStyle().left,
+                                    transform: TOOLTIP_TRANSFORM[cfg.tooltipDir]
+                                };
+                            }
+                        }), false, true);
                         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>props.item.title);
-                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-                            var _v$ = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("floating-dock__tooltip", cfg.tooltipClass), _v$2 = tooltipStyle().top, _v$3 = tooltipStyle().left, _v$4 = TOOLTIP_TRANSFORM[cfg.tooltipDir];
-                            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, _p$.e = _v$);
-                            _v$2 !== _p$.t && (null != (_p$.t = _v$2) ? _el$2.style.setProperty("top", _v$2) : _el$2.style.removeProperty("top"));
-                            _v$3 !== _p$.a && (null != (_p$.a = _v$3) ? _el$2.style.setProperty("left", _v$3) : _el$2.style.removeProperty("left"));
-                            _v$4 !== _p$.o && (null != (_p$.o = _v$4) ? _el$2.style.setProperty("transform", _v$4) : _el$2.style.removeProperty("transform"));
-                            return _p$;
-                        }, {
-                            e: void 0,
-                            t: void 0,
-                            a: void 0,
-                            o: void 0
-                        });
                         return _el$2;
                     }
                 });
@@ -136,18 +145,10 @@ const DockItem = (props)=>{
         }), _el$3);
         var _ref$2 = iconRef;
         "function" == typeof _ref$2 ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$2, _el$3) : iconRef = _el$3;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: __WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.icon
+            })), false, true);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>props.item.icon);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-            var _v$5 = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("floating-dock__item", cfg.itemClass), _v$6 = `${cfg.baseSize}px`, _v$7 = `${cfg.baseSize}px`;
-            _v$5 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, _p$.e = _v$5);
-            _v$6 !== _p$.t && (null != (_p$.t = _v$6) ? _el$.style.setProperty("width", _v$6) : _el$.style.removeProperty("width"));
-            _v$7 !== _p$.a && (null != (_p$.a = _v$7) ? _el$.style.setProperty("height", _v$7) : _el$.style.removeProperty("height"));
-            return _p$;
-        }, {
-            e: void 0,
-            t: void 0,
-            a: void 0
-        });
         return _el$;
     })();
     return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
@@ -164,9 +165,9 @@ const DockItem = (props)=>{
                     var _el$5 = _tmpl$4();
                     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, inner);
                     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-                        var _v$8 = props.item.href, _v$9 = props.item.title;
-                        _v$8 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$5, "href", _p$.e = _v$8);
-                        _v$9 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$5, "aria-label", _p$.t = _v$9);
+                        var _v$ = props.item.href, _v$2 = props.item.title;
+                        _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$5, "href", _p$.e = _v$);
+                        _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$5, "aria-label", _p$.t = _v$2);
                         return _p$;
                     }, {
                         e: void 0,
@@ -179,8 +180,14 @@ const DockItem = (props)=>{
         get children () {
             var _el$4 = _tmpl$3();
             _el$4.$$click = handleClick;
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+                get ["aria-label"] () {
+                    return props.item.title;
+                }
+            }, ()=>({
+                    class: __WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.buttonReset
+                })), false, true);
             (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, inner);
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$4, "aria-label", props.item.title));
             return _el$4;
         }
     });
@@ -292,7 +299,7 @@ const FloatingDockDesktop = (props)=>{
         stopLoop();
     });
     return (()=>{
-        var _el$6 = _tmpl$6();
+        var _el$6 = _tmpl$5();
         _el$6.addEventListener("mouseleave", ()=>{
             setMousePos(1 / 0);
             startLoop();
@@ -302,14 +309,32 @@ const FloatingDockDesktop = (props)=>{
             startLoop();
         };
         _el$6.addEventListener("mouseenter", captureAnchors);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.bar, isH() ? __WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.barOrientation.horizontal : __WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.barOrientation.vertical, props.class)
+            }), {
+            get style () {
+                return {
+                    gap: `${cfg.gap}px`,
+                    padding: props.showContainer ? isH() ? "0.5rem 1rem" : "1rem 0.5rem" : void 0,
+                    ...isH() ? {
+                        height: `${cfg.baseSize + 16}px`
+                    } : {
+                        width: `${cfg.baseSize + 16}px`
+                    }
+                };
+            }
+        }), false, true);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
             get when () {
                 return props.showContainer;
             },
             get children () {
-                var _el$7 = _tmpl$5();
+                var _el$7 = _tmpl$();
                 var _ref$3 = bgRef;
                 "function" == typeof _ref$3 ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$3, _el$7) : bgRef = _el$7;
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                        class: __WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.bg
+                    })), false, false);
                 return _el$7;
             }
         }), null);
@@ -334,32 +359,9 @@ const FloatingDockDesktop = (props)=>{
                 });
             }
         }), null);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-            var _v$0 = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("floating-dock__bar", isH() ? "floating-dock__bar--horizontal" : "floating-dock__bar--vertical", props.class), _v$1 = {
-                gap: `${cfg.gap}px`,
-                padding: props.showContainer ? isH() ? "0.5rem 1rem" : "1rem 0.5rem" : void 0,
-                ...isH() ? {
-                    height: `${cfg.baseSize + 16}px`
-                } : {
-                    width: `${cfg.baseSize + 16}px`
-                }
-            };
-            _v$0 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$6, _p$.e = _v$0);
-            _p$.t = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$6, _v$1, _p$.t);
-            return _p$;
-        }, {
-            e: void 0,
-            t: void 0
-        });
         return _el$6;
     })();
 };
-const MOBILE_POPUP_CLASS = {
-    top: "floating-dock__mobile-popup--top",
-    bottom: "floating-dock__mobile-popup--bottom",
-    left: "floating-dock__mobile-popup--left",
-    right: "floating-dock__mobile-popup--right"
-};
 const FloatingDockMobile = (props)=>{
     const [open, setOpen] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
     const handleItemClick = (item, e)=>{
@@ -370,19 +372,34 @@ const FloatingDockMobile = (props)=>{
         setOpen(false);
     };
     return (()=>{
-        var _el$8 = _tmpl$7(), _el$0 = _el$8.firstChild;
+        var _el$8 = _tmpl$6(), _el$0 = _el$8.firstChild;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$8, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.mobile, props.class)
+            })), false, true);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$8, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
             get when () {
                 return open();
             },
             get children () {
                 var _el$9 = _tmpl$();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$9, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                        class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.mobilePopup, __WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.mobilePopupDirection[props.popupDirection])
+                    })), false, true);
                 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$9, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
                     get each () {
                         return props.items;
                     },
                     children: (item, idx)=>(()=>{
-                            var _el$1 = _tmpl$9();
+                            var _el$1 = _tmpl$();
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$1, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                                    class: __WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.mobileItem
+                                }), {
+                                get style () {
+                                    return {
+                                        "animation-delay": `${(props.items.length - 1 - idx()) * 0.05}s`
+                                    };
+                                }
+                            }), false, true);
                             (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$1, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
                                 get when () {
                                     return item.onClick;
@@ -394,85 +411,99 @@ const FloatingDockMobile = (props)=>{
                                         },
                                         get fallback () {
                                             return (()=>{
-                                                var _el$12 = _tmpl$1();
+                                                var _el$12 = _tmpl$();
+                                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$12, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                                                        class: __WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.item
+                                                    }), {
+                                                    get style () {
+                                                        return {
+                                                            width: `${props.cfg.baseSize}px`,
+                                                            height: `${props.cfg.baseSize}px`
+                                                        };
+                                                    },
+                                                    get title () {
+                                                        return item.title;
+                                                    }
+                                                }), false, true);
                                                 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$12, ()=>item.icon);
-                                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-                                                    var _v$20 = `${props.cfg.baseSize}px`, _v$21 = `${props.cfg.baseSize}px`, _v$22 = item.title;
-                                                    _v$20 !== _p$.e && (null != (_p$.e = _v$20) ? _el$12.style.setProperty("width", _v$20) : _el$12.style.removeProperty("width"));
-                                                    _v$21 !== _p$.t && (null != (_p$.t = _v$21) ? _el$12.style.setProperty("height", _v$21) : _el$12.style.removeProperty("height"));
-                                                    _v$22 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$12, "title", _p$.a = _v$22);
-                                                    return _p$;
-                                                }, {
-                                                    e: void 0,
-                                                    t: void 0,
-                                                    a: void 0
-                                                });
                                                 return _el$12;
                                             })();
                                         },
                                         get children () {
-                                            var _el$11 = _tmpl$0();
+                                            var _el$11 = _tmpl$4();
+                                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$11, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+                                                get href () {
+                                                    return item.href;
+                                                }
+                                            }, ()=>({
+                                                    class: __WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.item
+                                                }), {
+                                                get style () {
+                                                    return {
+                                                        width: `${props.cfg.baseSize}px`,
+                                                        height: `${props.cfg.baseSize}px`
+                                                    };
+                                                },
+                                                get title () {
+                                                    return item.title;
+                                                }
+                                            }), false, true);
                                             (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$11, ()=>item.icon);
-                                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-                                                var _v$16 = item.href, _v$17 = `${props.cfg.baseSize}px`, _v$18 = `${props.cfg.baseSize}px`, _v$19 = item.title;
-                                                _v$16 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$11, "href", _p$.e = _v$16);
-                                                _v$17 !== _p$.t && (null != (_p$.t = _v$17) ? _el$11.style.setProperty("width", _v$17) : _el$11.style.removeProperty("width"));
-                                                _v$18 !== _p$.a && (null != (_p$.a = _v$18) ? _el$11.style.setProperty("height", _v$18) : _el$11.style.removeProperty("height"));
-                                                _v$19 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$11, "title", _p$.o = _v$19);
-                                                return _p$;
-                                            }, {
-                                                e: void 0,
-                                                t: void 0,
-                                                a: void 0,
-                                                o: void 0
-                                            });
                                             return _el$11;
                                         }
                                     });
                                 },
                                 get children () {
-                                    var _el$10 = _tmpl$8();
+                                    var _el$10 = _tmpl$3();
                                     _el$10.$$click = (e)=>handleItemClick(item, e);
+                                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$10, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                                            class: __WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.mobileToggle
+                                        }), {
+                                        get style () {
+                                            return {
+                                                width: `${props.cfg.baseSize}px`,
+                                                height: `${props.cfg.baseSize}px`
+                                            };
+                                        },
+                                        get title () {
+                                            return item.title;
+                                        }
+                                    }), false, true);
                                     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$10, ()=>item.icon);
-                                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-                                        var _v$13 = `${props.cfg.baseSize}px`, _v$14 = `${props.cfg.baseSize}px`, _v$15 = item.title;
-                                        _v$13 !== _p$.e && (null != (_p$.e = _v$13) ? _el$10.style.setProperty("width", _v$13) : _el$10.style.removeProperty("width"));
-                                        _v$14 !== _p$.t && (null != (_p$.t = _v$14) ? _el$10.style.setProperty("height", _v$14) : _el$10.style.removeProperty("height"));
-                                        _v$15 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$10, "title", _p$.a = _v$15);
-                                        return _p$;
-                                    }, {
-                                        e: void 0,
-                                        t: void 0,
-                                        a: void 0
-                                    });
                                     return _el$10;
                                 }
                             }));
-                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_$p)=>(_$p = `${(props.items.length - 1 - idx()) * 0.05}s`, _el$1.style.setProperty("animation-delay", _$p)));
                             return _el$1;
                         })()
                 }));
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$9, (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("floating-dock__mobile-popup", MOBILE_POPUP_CLASS[props.popupDirection])));
                 return _el$9;
             }
         }), _el$0);
         _el$0.$$click = ()=>setOpen(!open());
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$0, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: __WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.mobileToggle
+            }), {
+            get style () {
+                return {
+                    width: `${props.cfg.baseSize}px`,
+                    height: `${props.cfg.baseSize}px`
+                };
+            }
+        }), false, true);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$0, ()=>props.toggleIcon ?? (()=>{
-                var _el$13 = _tmpl$10();
-                _el$13.style.setProperty("color", "color-mix(in oklab, var(--color-base-content) 60%, transparent)");
+                var _el$13 = _tmpl$7();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$13, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                        class: __WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.menuIcon
+                    }), {
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    "stroke-width": "2",
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round"
+                }), true, true);
                 return _el$13;
             })());
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-            var _v$10 = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("floating-dock__mobile", props.class), _v$11 = `${props.cfg.baseSize}px`, _v$12 = `${props.cfg.baseSize}px`;
-            _v$10 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$8, _p$.e = _v$10);
-            _v$11 !== _p$.t && (null != (_p$.t = _v$11) ? _el$0.style.setProperty("width", _v$11) : _el$0.style.removeProperty("width"));
-            _v$12 !== _p$.a && (null != (_p$.a = _v$12) ? _el$0.style.setProperty("height", _v$12) : _el$0.style.removeProperty("height"));
-            return _p$;
-        }, {
-            e: void 0,
-            t: void 0,
-            a: void 0
-        });
         return _el$8;
     })();
 };
@@ -513,7 +544,7 @@ const FloatingDock = (rawProps)=>{
             iconSize: local.iconSize ?? 20,
             hoverIconSize: local.hoverIconSize ?? 20,
             magnifyRange: local.magnifyRange ?? 110,
-            magnify: false !== local.magnify,
+            magnify: true === local.magnify,
             nudge: local.nudge ?? 20,
             gap: local.gap ?? 8,
             tooltipDir: local.tooltipDirection ?? "top",
@@ -527,8 +558,10 @@ const FloatingDock = (rawProps)=>{
             }
         });
     return (()=>{
-        var _el$14 = _tmpl$11();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$14, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+        var _el$14 = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$14, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: __WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.base
+            }), {
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -541,20 +574,20 @@ const FloatingDock = (rawProps)=>{
                 return false !== local.showDesktop;
             },
             get children () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(FloatingDockDesktop, {
+                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(FloatingDockDesktop, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
                     get items () {
                         return local.items;
-                    },
-                    get ["class"] () {
-                        return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(local.class, local.className, local.desktopClass);
-                    },
+                    }
+                }, ()=>({
+                        class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(local.class, local.className, local.desktopClass)
+                    }), {
                     get cfg () {
                         return cfg();
                     },
                     get showContainer () {
                         return false !== local.showContainer;
                     }
-                });
+                }));
             }
         }), null);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$14, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
@@ -567,29 +600,29 @@ const FloatingDock = (rawProps)=>{
                         return "dock" !== local.mobileMode;
                     },
                     get fallback () {
-                        return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(FloatingDockDesktop, {
+                        return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(FloatingDockDesktop, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
                             get items () {
                                 return local.items;
-                            },
-                            get ["class"] () {
-                                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("floating-dock__bar--mobile-dock", local.mobileClass);
-                            },
+                            }
+                        }, ()=>({
+                                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.barMobileDock, local.mobileClass)
+                            }), {
                             get cfg () {
                                 return cfg();
                             },
                             get showContainer () {
                                 return false !== local.showContainer;
                             }
-                        });
+                        }));
                     },
                     get children () {
-                        return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(FloatingDockMobile, {
+                        return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(FloatingDockMobile, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
                             get items () {
                                 return local.items;
-                            },
-                            get ["class"] () {
-                                return local.mobileClass;
-                            },
+                            }
+                        }, ()=>({
+                                class: local.mobileClass
+                            }), {
                             get toggleIcon () {
                                 return local.mobileToggleIcon;
                             },
@@ -599,7 +632,7 @@ const FloatingDock = (rawProps)=>{
                             get cfg () {
                                 return cfg();
                             }
-                        });
+                        }));
                     }
                 });
             }

package/dist/components/footer/Footer.classes.d.ts

@@ -0,0 +1,9 @@
+export declare const CLASSES: {
+    readonly base: "footer";
+    readonly title: "footer__title";
+    readonly flag: {
+        readonly center: "footer--center";
+        readonly horizontal: "footer--horizontal";
+        readonly vertical: "footer--vertical";
+    };
+};

package/dist/components/footer/Footer.classes.js

@@ -0,0 +1,10 @@
+const CLASSES = {
+    base: "footer",
+    title: "footer__title",
+    flag: {
+        center: "footer--center",
+        horizontal: "footer--horizontal",
+        vertical: "footer--vertical"
+    }
+};
+export { CLASSES };

package/dist/components/footer/Footer.js

@@ -2,8 +2,8 @@ import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web
 import "./footer.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
-import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
 import * as __WEBPACK_EXTERNAL_MODULE__FooterTitle_js_92d7fa24__ from "./FooterTitle.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Footer_classes_js_eeb1cf63__ from "./Footer.classes.js";
 var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<footer>");
 const Footer = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -15,21 +15,16 @@ const Footer = (props)=>{
         "horizontal",
         "vertical"
     ]);
-    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("footer", local.class, local.className, (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])({
-            "footer-center": local.center,
-            "footer-horizontal": local.horizontal,
-            "footer-vertical": local.vertical
-        }));
+    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Footer_classes_js_eeb1cf63__.CLASSES.base, local.center && __WEBPACK_EXTERNAL_MODULE__Footer_classes_js_eeb1cf63__.CLASSES.flag.center, local.horizontal && __WEBPACK_EXTERNAL_MODULE__Footer_classes_js_eeb1cf63__.CLASSES.flag.horizontal, local.vertical && __WEBPACK_EXTERNAL_MODULE__Footer_classes_js_eeb1cf63__.CLASSES.flag.vertical, local.class, local.className);
     return (()=>{
         var _el$ = _tmpl$();
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
             get ["data-theme"] () {
                 return local.dataTheme;
-            },
-            get ["class"] () {
-                return classes();
             }
-        }), false, true);
+        }, ()=>({
+                class: classes()
+            })), false, true);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
         return _el$;
     })();

package/dist/components/footer/FooterTitle.js

@@ -1,6 +1,7 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__Footer_classes_js_eeb1cf63__ from "./Footer.classes.js";
 var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<h6>");
 const FooterTitle = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -9,17 +10,16 @@ const FooterTitle = (props)=>{
         "className",
         "dataTheme"
     ]);
-    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("footer-title", local.class, local.className);
+    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Footer_classes_js_eeb1cf63__.CLASSES.title, local.class, local.className);
     return (()=>{
         var _el$ = _tmpl$();
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
             get ["data-theme"] () {
                 return local.dataTheme;
-            },
-            get ["class"] () {
-                return classes();
             }
-        }), false, true);
+        }, ()=>({
+                class: classes()
+            })), false, true);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
         return _el$;
     })();