@pathscale/ui 1.2.1 → 1.2.3

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,19 +24,18 @@ 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();
-        },
-        get ["class"] () {
-            return classes();
         }
-    }, rest, {
+    }, ()=>({
+            class: classes()
+        }), rest, {
         get children () {
             return resolvedChildren();
         }
     }));
 };
-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

@@ -26,14 +26,17 @@
   }
 
   /* -------------------------------------------------------------------------------------------------
-   * Background panel — stretches with magnified items
+   * Background panel — original soft-edge shape with a subtle glass treatment.
+   * Per customer feedback: keep the prior shape/borders, only add a glass feel.
    * -----------------------------------------------------------------------------------------------*/
   .floating-dock__bg {
     position: absolute;
     inset: 0;
     z-index: -1;
     border-radius: 1rem;
-    background-color: var(--color-base-100);
+    background-color: color-mix(in srgb, var(--color-base-100) 55%, transparent);
+    backdrop-filter: blur(12px) saturate(160%);
+    -webkit-backdrop-filter: blur(12px) saturate(160%);
     box-shadow:
       inset 0 1px 0 0 var(--color-base-300),
       0 1px 0 0 var(--color-base-100);
@@ -41,7 +44,7 @@
   }
 
   /* -------------------------------------------------------------------------------------------------
-   * Item wrapper
+   * Item wrapper — original look: rounded pill, semi-opaque, hover bumps opacity.
    * -----------------------------------------------------------------------------------------------*/
   .floating-dock__item {
     position: relative;
@@ -49,7 +52,7 @@
     align-items: center;
     justify-content: center;
     border-radius: 9999px;
-    background-color: var(--color-base-200);
+    background-color: transparent;
     opacity: 0.8;
     transform-origin: bottom center;
     will-change: transform;
@@ -64,6 +67,14 @@
     opacity: 0.6;
   }
 
+  .floating-dock__button-reset {
+    appearance: none;
+    border: 0;
+    background: transparent;
+    padding: 0;
+    cursor: pointer;
+  }
+
   /* -------------------------------------------------------------------------------------------------
    * Icon container
    * -----------------------------------------------------------------------------------------------*/
@@ -86,7 +97,9 @@
     white-space: pre;
     border-radius: var(--radius-field, 0.375rem);
     border: 1px solid var(--color-base-300);
-    background-color: var(--color-base-100);
+    background-color: color-mix(in srgb, var(--color-base-100) 75%, transparent);
+    backdrop-filter: blur(8px) saturate(160%);
+    -webkit-backdrop-filter: blur(8px) saturate(160%);
     color: var(--color-base-content);
     padding: 0.125rem 0.5rem;
     font-size: 0.75rem;
@@ -153,6 +166,22 @@
     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);
+  }
+
+  /* a11y */
+  @media (prefers-reduced-transparency: reduce) {
+    .floating-dock__bg,
+    .floating-dock__tooltip {
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+      background-color: var(--color-base-100);
+    }
+  }
+
   /* -------------------------------------------------------------------------------------------------
    * Responsive: hide desktop on small, mobile on large
    * -----------------------------------------------------------------------------------------------*/