@pathscale/ui 1.1.38 → 1.1.40

package/dist/components/flex/Flex.js

@@ -1,74 +1,15 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./Flex.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
 import * as __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__ from "../utils.js";
-const directionMap = {
-    row: "flex-row",
-    col: "flex-col",
-    "row-reverse": "flex-row-reverse",
-    "col-reverse": "flex-col-reverse"
-};
-const justifyMap = {
-    start: "justify-start",
-    center: "justify-center",
-    end: "justify-end",
-    between: "justify-between",
-    around: "justify-around",
-    evenly: "justify-evenly"
-};
-const alignMap = {
-    start: "items-start",
-    center: "items-center",
-    end: "items-end",
-    stretch: "items-stretch",
-    baseline: "items-baseline"
-};
-const wrapMap = {
-    wrap: "flex-wrap",
-    nowrap: "flex-nowrap",
-    "wrap-reverse": "flex-wrap-reverse"
-};
-const gapMap = {
-    none: "gap-0",
-    sm: "gap-2",
-    md: "gap-4",
-    lg: "gap-6",
-    xl: "gap-8"
-};
-const gapXMap = {
-    none: "gap-x-0",
-    sm: "gap-x-2",
-    md: "gap-x-4",
-    lg: "gap-x-6",
-    xl: "gap-x-8"
-};
-const gapYMap = {
-    none: "gap-y-0",
-    sm: "gap-y-2",
-    md: "gap-y-4",
-    lg: "gap-y-6",
-    xl: "gap-y-8"
-};
-const growMap = {
-    true: "flex-grow",
-    false: "flex-grow-0"
-};
-const shrinkMap = {
-    true: "flex-shrink",
-    false: "flex-shrink-0"
-};
-const basisMap = {
-    none: "basis-0",
-    sm: "basis-8",
-    md: "basis-16",
-    lg: "basis-24",
-    xl: "basis-32"
-};
-const Flex = (props)=>{
+import * as __WEBPACK_EXTERNAL_MODULE__Flex_classes_js_9b9809e9__ from "./Flex.classes.js";
+const Flex_Flex = (props)=>{
     const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "as",
         "class",
+        "className",
         "children",
         "direction",
         "justify",
@@ -83,7 +24,7 @@ const Flex = (props)=>{
     ]);
     const tag = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>local.as || "div");
     const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
-    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)((0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])("flex", (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.direction, directionMap), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.justify, justifyMap), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.align, alignMap), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.wrap, wrapMap), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.gap, gapMap), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.gapX, gapXMap), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.gapY, gapYMap), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.grow, growMap), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.shrink, shrinkMap), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.basis, basisMap), local.class)));
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)((0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__Flex_classes_js_9b9809e9__.CLASSES.base, (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.direction, __WEBPACK_EXTERNAL_MODULE__Flex_classes_js_9b9809e9__.CLASSES.direction), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.justify, __WEBPACK_EXTERNAL_MODULE__Flex_classes_js_9b9809e9__.CLASSES.justify), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.align, __WEBPACK_EXTERNAL_MODULE__Flex_classes_js_9b9809e9__.CLASSES.align), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.wrap, __WEBPACK_EXTERNAL_MODULE__Flex_classes_js_9b9809e9__.CLASSES.wrap), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.gap, __WEBPACK_EXTERNAL_MODULE__Flex_classes_js_9b9809e9__.CLASSES.gap), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.gapX, __WEBPACK_EXTERNAL_MODULE__Flex_classes_js_9b9809e9__.CLASSES.gapX), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.gapY, __WEBPACK_EXTERNAL_MODULE__Flex_classes_js_9b9809e9__.CLASSES.gapY), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.grow, __WEBPACK_EXTERNAL_MODULE__Flex_classes_js_9b9809e9__.CLASSES.grow), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.shrink, __WEBPACK_EXTERNAL_MODULE__Flex_classes_js_9b9809e9__.CLASSES.shrink), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.basis, __WEBPACK_EXTERNAL_MODULE__Flex_classes_js_9b9809e9__.CLASSES.basis), local.class, local.className)));
     return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Dynamic, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
         get component () {
             return tag();
@@ -97,5 +38,5 @@ const Flex = (props)=>{
         }
     }));
 };
-const flex_Flex = Flex;
-export { flex_Flex as default };
+const Flex = Flex_Flex;
+export { Flex as default };

package/dist/components/floating-dock/FloatingDock.classes.d.ts

@@ -0,0 +1,25 @@
+export declare const CLASSES: {
+    readonly base: "floating-dock";
+    readonly bar: "floating-dock__bar";
+    readonly barOrientation: {
+        readonly horizontal: "floating-dock__bar--horizontal";
+        readonly vertical: "floating-dock__bar--vertical";
+    };
+    readonly barMobileDock: "floating-dock__bar--mobile-dock";
+    readonly bg: "floating-dock__bg";
+    readonly item: "floating-dock__item";
+    readonly icon: "floating-dock__icon";
+    readonly tooltip: "floating-dock__tooltip";
+    readonly mobile: "floating-dock__mobile";
+    readonly mobileToggle: "floating-dock__mobile-toggle";
+    readonly mobilePopup: "floating-dock__mobile-popup";
+    readonly mobilePopupDirection: {
+        readonly top: "floating-dock__mobile-popup--top";
+        readonly bottom: "floating-dock__mobile-popup--bottom";
+        readonly left: "floating-dock__mobile-popup--left";
+        readonly right: "floating-dock__mobile-popup--right";
+    };
+    readonly mobileItem: "floating-dock__mobile-item";
+    readonly buttonReset: "floating-dock__button-reset";
+    readonly menuIcon: "floating-dock__menu-icon";
+};

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

@@ -0,0 +1,26 @@
+const CLASSES = {
+    base: "floating-dock",
+    bar: "floating-dock__bar",
+    barOrientation: {
+        horizontal: "floating-dock__bar--horizontal",
+        vertical: "floating-dock__bar--vertical"
+    },
+    barMobileDock: "floating-dock__bar--mobile-dock",
+    bg: "floating-dock__bg",
+    item: "floating-dock__item",
+    icon: "floating-dock__icon",
+    tooltip: "floating-dock__tooltip",
+    mobile: "floating-dock__mobile",
+    mobileToggle: "floating-dock__mobile-toggle",
+    mobilePopup: "floating-dock__mobile-popup",
+    mobilePopupDirection: {
+        top: "floating-dock__mobile-popup--top",
+        bottom: "floating-dock__mobile-popup--bottom",
+        left: "floating-dock__mobile-popup--left",
+        right: "floating-dock__mobile-popup--right"
+    },
+    mobileItem: "floating-dock__mobile-item",
+    buttonReset: "floating-dock__button-reset",
+    menuIcon: "floating-dock__menu-icon"
+};
+export { CLASSES };

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

@@ -64,6 +64,14 @@
     opacity: 0.6;
   }
 
+  .floating-dock__button-reset {
+    appearance: none;
+    border: 0;
+    background: transparent;
+    padding: 0;
+    cursor: pointer;
+  }
+
   /* -------------------------------------------------------------------------------------------------
    * Icon container
    * -----------------------------------------------------------------------------------------------*/
@@ -153,6 +161,12 @@
     animation: floating-dock-fade-in 200ms ease forwards;
   }
 
+  .floating-dock__menu-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
+  }
+
   /* -------------------------------------------------------------------------------------------------
    * Responsive: hide desktop on small, mobile on large
    * -----------------------------------------------------------------------------------------------*/

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 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">');
 const prefersReducedMotion = "undefined" != typeof window && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 function createSpring(initial, opts = {}) {
     const mass = opts.mass ?? 1;
@@ -117,7 +118,7 @@ const DockItem = (props)=>{
                         var _el$2 = _tmpl$();
                         (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];
+                            var _v$ = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.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"));
@@ -138,15 +139,17 @@ const DockItem = (props)=>{
         "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__.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`;
+            var _v$5 = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.item, cfg.itemClass), _v$6 = `${cfg.baseSize}px`, _v$7 = `${cfg.baseSize}px`, _v$8 = __WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.icon;
             _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"));
+            _v$8 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$3, _p$.o = _v$8);
             return _p$;
         }, {
             e: void 0,
             t: void 0,
-            a: void 0
+            a: void 0,
+            o: void 0
         });
         return _el$;
     })();
@@ -164,9 +167,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$1 = props.item.href, _v$10 = props.item.title;
+                        _v$1 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$5, "href", _p$.e = _v$1);
+                        _v$10 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$5, "aria-label", _p$.t = _v$10);
                         return _p$;
                     }, {
                         e: void 0,
@@ -180,7 +183,15 @@ const DockItem = (props)=>{
             var _el$4 = _tmpl$3();
             _el$4.$$click = handleClick;
             (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));
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+                var _v$9 = props.item.title, _v$0 = __WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.buttonReset;
+                _v$9 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$4, "aria-label", _p$.e = _v$9);
+                _v$0 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$4, _p$.t = _v$0);
+                return _p$;
+            }, {
+                e: void 0,
+                t: void 0
+            });
             return _el$4;
         }
     });
@@ -292,7 +303,7 @@ const FloatingDockDesktop = (props)=>{
         stopLoop();
     });
     return (()=>{
-        var _el$6 = _tmpl$6();
+        var _el$6 = _tmpl$5();
         _el$6.addEventListener("mouseleave", ()=>{
             setMousePos(1 / 0);
             startLoop();
@@ -307,9 +318,10 @@ const FloatingDockDesktop = (props)=>{
                 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__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$7, __WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.bg));
                 return _el$7;
             }
         }), null);
@@ -335,7 +347,7 @@ 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 = {
+            var _v$11 = (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), _v$12 = {
                 gap: `${cfg.gap}px`,
                 padding: props.showContainer ? isH() ? "0.5rem 1rem" : "1rem 0.5rem" : void 0,
                 ...isH() ? {
@@ -344,8 +356,8 @@ const FloatingDockDesktop = (props)=>{
                     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);
+            _v$11 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$6, _p$.e = _v$11);
+            _p$.t = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$6, _v$12, _p$.t);
             return _p$;
         }, {
             e: void 0,
@@ -354,12 +366,6 @@ const FloatingDockDesktop = (props)=>{
         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,7 +376,7 @@ 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__.insert)(_el$8, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
             get when () {
                 return open();
@@ -382,7 +388,7 @@ const FloatingDockMobile = (props)=>{
                         return props.items;
                     },
                     children: (item, idx)=>(()=>{
-                            var _el$1 = _tmpl$9();
+                            var _el$1 = _tmpl$();
                             (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,84 +400,100 @@ const FloatingDockMobile = (props)=>{
                                         },
                                         get fallback () {
                                             return (()=>{
-                                                var _el$12 = _tmpl$1();
+                                                var _el$12 = _tmpl$();
                                                 (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);
+                                                    var _v$28 = __WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.item, _v$29 = `${props.cfg.baseSize}px`, _v$30 = `${props.cfg.baseSize}px`, _v$31 = item.title;
+                                                    _v$28 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$12, _p$.e = _v$28);
+                                                    _v$29 !== _p$.t && (null != (_p$.t = _v$29) ? _el$12.style.setProperty("width", _v$29) : _el$12.style.removeProperty("width"));
+                                                    _v$30 !== _p$.a && (null != (_p$.a = _v$30) ? _el$12.style.setProperty("height", _v$30) : _el$12.style.removeProperty("height"));
+                                                    _v$31 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$12, "title", _p$.o = _v$31);
                                                     return _p$;
                                                 }, {
                                                     e: void 0,
                                                     t: void 0,
-                                                    a: void 0
+                                                    a: void 0,
+                                                    o: 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__.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);
+                                                var _v$23 = item.href, _v$24 = __WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.item, _v$25 = `${props.cfg.baseSize}px`, _v$26 = `${props.cfg.baseSize}px`, _v$27 = item.title;
+                                                _v$23 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$11, "href", _p$.e = _v$23);
+                                                _v$24 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$11, _p$.t = _v$24);
+                                                _v$25 !== _p$.a && (null != (_p$.a = _v$25) ? _el$11.style.setProperty("width", _v$25) : _el$11.style.removeProperty("width"));
+                                                _v$26 !== _p$.o && (null != (_p$.o = _v$26) ? _el$11.style.setProperty("height", _v$26) : _el$11.style.removeProperty("height"));
+                                                _v$27 !== _p$.i && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$11, "title", _p$.i = _v$27);
                                                 return _p$;
                                             }, {
                                                 e: void 0,
                                                 t: void 0,
                                                 a: void 0,
-                                                o: void 0
+                                                o: void 0,
+                                                i: 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__.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);
+                                        var _v$17 = __WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.mobileToggle, _v$18 = `${props.cfg.baseSize}px`, _v$19 = `${props.cfg.baseSize}px`, _v$20 = item.title;
+                                        _v$17 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$10, _p$.e = _v$17);
+                                        _v$18 !== _p$.t && (null != (_p$.t = _v$18) ? _el$10.style.setProperty("width", _v$18) : _el$10.style.removeProperty("width"));
+                                        _v$19 !== _p$.a && (null != (_p$.a = _v$19) ? _el$10.style.setProperty("height", _v$19) : _el$10.style.removeProperty("height"));
+                                        _v$20 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$10, "title", _p$.o = _v$20);
                                         return _p$;
                                     }, {
                                         e: void 0,
                                         t: void 0,
-                                        a: void 0
+                                        a: void 0,
+                                        o: 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)));
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+                                var _v$21 = __WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.mobileItem, _v$22 = `${(props.items.length - 1 - idx()) * 0.05}s`;
+                                _v$21 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$1, _p$.e = _v$21);
+                                _v$22 !== _p$.t && (null != (_p$.t = _v$22) ? _el$1.style.setProperty("animation-delay", _v$22) : _el$1.style.removeProperty("animation-delay"));
+                                return _p$;
+                            }, {
+                                e: void 0,
+                                t: void 0
+                            });
                             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])));
+                (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)(__WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.mobilePopup, __WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.mobilePopupDirection[props.popupDirection])));
                 return _el$9;
             }
         }), _el$0);
         _el$0.$$click = ()=>setOpen(!open());
         (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__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$13, "class", __WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.menuIcon));
                 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"));
+            var _v$13 = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.mobile, props.class), _v$14 = __WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.mobileToggle, _v$15 = `${props.cfg.baseSize}px`, _v$16 = `${props.cfg.baseSize}px`;
+            _v$13 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$8, _p$.e = _v$13);
+            _v$14 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$0, _p$.t = _v$14);
+            _v$15 !== _p$.a && (null != (_p$.a = _v$15) ? _el$0.style.setProperty("width", _v$15) : _el$0.style.removeProperty("width"));
+            _v$16 !== _p$.o && (null != (_p$.o = _v$16) ? _el$0.style.setProperty("height", _v$16) : _el$0.style.removeProperty("height"));
             return _p$;
         }, {
             e: void 0,
             t: void 0,
-            a: void 0
+            a: void 0,
+            o: void 0
         });
         return _el$8;
     })();
@@ -527,8 +549,11 @@ const FloatingDock = (rawProps)=>{
             }
         });
     return (()=>{
-        var _el$14 = _tmpl$11();
+        var _el$14 = _tmpl$();
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$14, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+            get ["class"] () {
+                return __WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.base;
+            },
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -572,7 +597,7 @@ const FloatingDock = (rawProps)=>{
                                 return local.items;
                             },
                             get ["class"] () {
-                                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("floating-dock__bar--mobile-dock", local.mobileClass);
+                                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__FloatingDock_classes_js_f8a95c68__.CLASSES.barMobileDock, local.mobileClass);
                             },
                             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,11 +15,7 @@ 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, {

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,7 +10,7 @@ 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, {