@pathscale/ui 2.1.0 → 2.2.0

package/dist/components/dialog/Dialog.recipe.js

@@ -0,0 +1,178 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    Root: {
+        base: "dialog",
+        flag: {
+            open: "dialog--open"
+        }
+    },
+    Trigger: {
+        base: "dialog__trigger"
+    },
+    Backdrop: {
+        base: "dialog__backdrop",
+        variant: {
+            transparent: "dialog__backdrop--transparent",
+            opaque: "dialog__backdrop--opaque",
+            blur: "dialog__backdrop--blur"
+        },
+        state: {
+            entering: "dialog__backdrop--entering",
+            exiting: "dialog__backdrop--exiting"
+        }
+    },
+    Container: {
+        base: "dialog__container",
+        placement: {
+            auto: "dialog__container--auto",
+            top: "dialog__container--top",
+            center: "dialog__container--center",
+            bottom: "dialog__container--bottom"
+        },
+        scroll: {
+            inside: "dialog__container--scroll-inside",
+            outside: "dialog__container--scroll-outside"
+        },
+        size: {
+            cover: "dialog__container--size-cover",
+            full: "dialog__container--size-full"
+        },
+        state: {
+            entering: "dialog__container--entering",
+            exiting: "dialog__container--exiting"
+        }
+    },
+    Content: {
+        base: "dialog__content",
+        scroll: {
+            inside: "dialog__content--scroll-inside",
+            outside: "dialog__content--scroll-outside"
+        },
+        size: {
+            xs: "dialog__content--xs",
+            sm: "dialog__content--sm",
+            md: "dialog__content--md",
+            lg: "dialog__content--lg",
+            cover: "dialog__content--cover",
+            full: "dialog__content--full"
+        },
+        state: {
+            entering: "dialog__content--entering",
+            exiting: "dialog__content--exiting"
+        }
+    },
+    Header: {
+        base: "dialog__header"
+    },
+    Heading: {
+        base: "dialog__heading"
+    },
+    Icon: {
+        base: "dialog__icon"
+    },
+    Body: {
+        base: "dialog__body",
+        scroll: {
+            inside: "dialog__body--scroll-inside",
+            outside: "dialog__body--scroll-outside"
+        }
+    },
+    Footer: {
+        base: "dialog__footer"
+    },
+    CloseTrigger: {
+        base: "dialog__close-trigger",
+        icon: "dialog__close-trigger-icon"
+    }
+};
+const componentRecipe = recipe({
+    component: "dialog",
+    slots: {
+        "dialog-backdrop": {},
+        "dialog-body": {},
+        "dialog-close-trigger": {},
+        "dialog-close-trigger-icon": {},
+        "dialog-container": {},
+        "dialog-content": {},
+        "dialog-footer": {},
+        "dialog-header": {},
+        "dialog-heading": {},
+        "dialog-icon": {},
+        "dialog-root": {},
+        "dialog-trigger": {},
+        root: {}
+    },
+    _layouts: {
+        slots: {
+            "dialog-backdrop": {
+                base: "",
+                axes: {}
+            },
+            "dialog-body": {
+                base: "",
+                axes: {}
+            },
+            "dialog-close-trigger": {
+                base: "",
+                axes: {}
+            },
+            "dialog-close-trigger-icon": {
+                base: "",
+                axes: {}
+            },
+            "dialog-container": {
+                base: "",
+                axes: {}
+            },
+            "dialog-content": {
+                base: "",
+                axes: {}
+            },
+            "dialog-footer": {
+                base: "",
+                axes: {}
+            },
+            "dialog-header": {
+                base: "",
+                axes: {}
+            },
+            "dialog-heading": {
+                base: "",
+                axes: {}
+            },
+            "dialog-icon": {
+                base: "",
+                axes: {}
+            },
+            "dialog-root": {
+                base: "",
+                axes: {}
+            },
+            "dialog-trigger": {
+                base: "",
+                axes: {}
+            },
+            root: {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            "dialog-backdrop": 0,
+            "dialog-body": 1,
+            "dialog-close-trigger": 2,
+            "dialog-close-trigger-icon": 3,
+            "dialog-container": 4,
+            "dialog-content": 5,
+            "dialog-footer": 6,
+            "dialog-header": 7,
+            "dialog-heading": 8,
+            "dialog-icon": 9,
+            "dialog-root": 10,
+            "dialog-trigger": 11,
+            root: 12
+        }
+    }
+});
+export { CLASSES, componentRecipe };

package/dist/components/dialog/index.d.ts

@@ -0,0 +1 @@
+export { default, DialogRoot, DialogTrigger, DialogBackdrop, DialogContent, DialogHeader, DialogHeading, DialogIcon, DialogBody, DialogFooter, DialogCloseTrigger, type DialogProps, type DialogPanelProps, type DialogPlacement, type DialogSize, type DialogBackdropVariant, type DialogScrollBehavior, type DialogRootProps, type DialogTriggerProps, type DialogBackdropProps, type DialogContentProps, type DialogHeaderProps, type DialogHeadingProps, type DialogIconProps, type DialogBodyProps, type DialogFooterProps, type DialogCloseTriggerProps, } from "./Dialog.generated";

package/dist/components/dialog/index.js

@@ -0,0 +1 @@
+export { DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogHeading, DialogIcon, DialogRoot, DialogTrigger, default } from "./Dialog.generated.js";

package/dist/components/{floating-dock/FloatingDock.css → dock/Dock.css}

@@ -2,25 +2,25 @@
   /* -------------------------------------------------------------------------------------------------
    * Dock container
    * -----------------------------------------------------------------------------------------------*/
-  .floating-dock {
+  .dock {
     position: relative;
     display: inline-flex;
     align-items: flex-end;
     overflow: visible;
   }
 
-  .floating-dock__bar {
+  .dock__bar {
     position: relative;
     display: flex;
     align-items: flex-end;
     overflow: visible;
   }
 
-  .floating-dock__bar--horizontal {
+  .dock__bar--horizontal {
     flex-direction: row;
   }
 
-  .floating-dock__bar--vertical {
+  .dock__bar--vertical {
     flex-direction: column;
     align-items: center;
   }
@@ -29,7 +29,7 @@
    * 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 {
+  .dock__bg {
     position: absolute;
     inset: 0;
     z-index: -1;
@@ -46,12 +46,12 @@
   /* -------------------------------------------------------------------------------------------------
    * Item wrapper — original look: rounded pill, semi-opaque, hover bumps opacity.
    * -----------------------------------------------------------------------------------------------*/
-  .floating-dock__item {
+  .dock__item {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill, 9999px);
     background-color: transparent;
     opacity: 0.8;
     transform-origin: bottom center;
@@ -59,15 +59,15 @@
     transition: opacity 150ms ease;
   }
 
-  .floating-dock__item:hover {
+  .dock__item:hover {
     opacity: 1;
   }
 
-  .floating-dock__item:active {
+  .dock__item:active {
     opacity: 0.6;
   }
 
-  .floating-dock__button-reset {
+  .dock__button-reset {
     appearance: none;
     border: 0;
     background: transparent;
@@ -78,7 +78,7 @@
   /* -------------------------------------------------------------------------------------------------
    * Icon container
    * -----------------------------------------------------------------------------------------------*/
-  .floating-dock__icon {
+  .dock__icon {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -89,14 +89,14 @@
   /* -------------------------------------------------------------------------------------------------
    * Tooltip
    * -----------------------------------------------------------------------------------------------*/
-  .floating-dock__tooltip {
+  .dock__tooltip {
     position: fixed;
     z-index: 9999;
     width: fit-content;
     pointer-events: none;
     white-space: pre;
     border-radius: var(--radius-field, 0.375rem);
-    border: 1px solid var(--color-base-300);
+    border: var(--border, 1px) solid var(--color-base-300);
     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%);
@@ -104,10 +104,10 @@
     padding: 0.125rem 0.5rem;
     font-size: 0.75rem;
     opacity: 0;
-    animation: floating-dock-fade-in 150ms ease forwards;
+    animation: dock-fade-in 150ms ease forwards;
   }
 
-  @keyframes floating-dock-fade-in {
+  @keyframes dock-fade-in {
     to {
       opacity: 1;
     }
@@ -116,57 +116,57 @@
   /* -------------------------------------------------------------------------------------------------
    * Mobile
    * -----------------------------------------------------------------------------------------------*/
-  .floating-dock__mobile {
+  .dock__mobile {
     position: relative;
     display: block;
   }
 
-  .floating-dock__mobile-toggle {
+  .dock__mobile-toggle {
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill, 9999px);
     background-color: var(--color-base-200);
     border: none;
     padding: 0;
     cursor: pointer;
   }
 
-  .floating-dock__mobile-popup {
+  .dock__mobile-popup {
     position: absolute;
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
   }
 
-  .floating-dock__mobile-popup--top {
+  .dock__mobile-popup--top {
     inset: auto 0 100% 0;
     margin-bottom: 0.5rem;
   }
 
-  .floating-dock__mobile-popup--bottom {
+  .dock__mobile-popup--bottom {
     inset: 100% 0 auto 0;
     margin-top: 0.5rem;
   }
 
-  .floating-dock__mobile-popup--left {
+  .dock__mobile-popup--left {
     right: 100%;
     top: 0;
     margin-right: 0.5rem;
   }
 
-  .floating-dock__mobile-popup--right {
+  .dock__mobile-popup--right {
     left: 100%;
     top: 0;
     margin-left: 0.5rem;
   }
 
-  .floating-dock__mobile-item {
+  .dock__mobile-item {
     opacity: 0;
-    animation: floating-dock-fade-in 200ms ease forwards;
+    animation: dock-fade-in 200ms ease forwards;
   }
 
-  .floating-dock__menu-icon {
+  .dock__menu-icon {
     width: 1.25rem;
     height: 1.25rem;
     color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
@@ -174,8 +174,8 @@
 
   /* a11y */
   @media (prefers-reduced-transparency: reduce) {
-    .floating-dock__bg,
-    .floating-dock__tooltip {
+    .dock__bg,
+    .dock__tooltip {
       backdrop-filter: none;
       -webkit-backdrop-filter: none;
       background-color: var(--color-base-100);
@@ -186,22 +186,22 @@
    * Responsive: hide desktop on small, mobile on large
    * -----------------------------------------------------------------------------------------------*/
   @media (max-width: 767px) {
-    .floating-dock__bar {
+    .dock__bar {
       display: none;
     }
 
     /* mobileMode="dock": show the full bar on mobile instead of burger */
-    .floating-dock__bar--mobile-dock {
+    .dock__bar--mobile-dock {
       display: flex;
     }
   }
 
   @media (min-width: 768px) {
-    .floating-dock__mobile {
+    .dock__mobile {
       display: none;
     }
 
-    .floating-dock__bar--mobile-dock {
+    .dock__bar--mobile-dock {
       display: none;
     }
   }

package/dist/components/{floating-dock/FloatingDock.generated.d.ts → dock/Dock.generated.d.ts}

@@ -1,19 +1,19 @@
 import type { Component as __LayoutComponent } from "solid-js";
-import "./FloatingDock.css";
+import "./Dock.css";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type FloatingDockItem = {
+import type { UIBaseProps } from "../vocabulary";
+export type DockItem = {
     title: string;
     icon: JSX.Element;
     href?: string;
     onClick?: (e: MouseEvent) => void;
 };
-export type FloatingDockDirection = "top" | "bottom" | "left" | "right";
-export type FloatingDockProps = {
-    items: FloatingDockItem[];
+export type DockDirection = "top" | "bottom" | "left" | "right";
+export type DockProps = {
+    items: DockItem[];
     orientation?: "horizontal" | "vertical";
-    tooltipDirection?: FloatingDockDirection;
-    mobilePopupDirection?: FloatingDockDirection;
+    tooltipDirection?: DockDirection;
+    mobilePopupDirection?: DockDirection;
     /** How to render on mobile: "burger" shows a toggle popup, "dock" shows the full dock bar. @default "burger" */
     mobileMode?: "burger" | "dock";
     gap?: number;
@@ -35,6 +35,6 @@ export type FloatingDockProps = {
     springMass?: number;
     springStiffness?: number;
     springDamping?: number;
-} & IComponentBaseProps;
-declare const FloatingDock: __LayoutComponent<FloatingDockProps>;
-export default FloatingDock;
+} & UIBaseProps;
+declare const Dock: __LayoutComponent<DockProps>;
+export default Dock;

package/dist/components/{floating-dock/FloatingDock.generated.js → dock/Dock.generated.js}

@@ -1,9 +1,9 @@
 import { Portal, createComponent, delegateEvents, effect, insert, mergeProps, setAttribute, spread, template, use } from "solid-js/web";
 import { defineComponent } from "solid-layouts/application-boundary";
-import "./FloatingDock.css";
+import "./Dock.css";
 import { For, Show, createSignal, onCleanup, onMount, splitProps } from "solid-js";
 import { twMerge } from "tailwind-merge";
-import { CLASSES, componentRecipe } from "./FloatingDock.recipe.js";
+import { CLASSES, componentRecipe } from "./Dock.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<div><div>"), _tmpl$3 = /*#__PURE__*/ template("<button type=button>"), _tmpl$4 = /*#__PURE__*/ template("<a>"), _tmpl$5 = /*#__PURE__*/ template("<div role=toolbar aria-label=Actions>"), _tmpl$6 = /*#__PURE__*/ template("<div><button type=button>"), _tmpl$7 = /*#__PURE__*/ 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 = "u" > typeof window && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 function createSpring(initial, opts = {}) {
@@ -198,7 +198,7 @@ const DockItem = defineComponent({
     layout: __solidLayoutDockItem,
     embedded: true
 });
-const __solidLayoutFloatingDockDesktop = (_stable, p)=>{
+const __solidLayoutDockDesktop = (_stable, p)=>{
     const [mousePos, setMousePos] = createSignal(1 / 0);
     const isH = ()=>"horizontal" === p.cfg.orientation;
     const cfg = p.cfg;
@@ -368,12 +368,12 @@ const __solidLayoutFloatingDockDesktop = (_stable, p)=>{
         return _el$6;
     })();
 };
-const FloatingDockDesktop = defineComponent({
+const DockDesktop = defineComponent({
     recipe: componentRecipe,
-    layout: __solidLayoutFloatingDockDesktop,
+    layout: __solidLayoutDockDesktop,
     embedded: true
 });
-const __solidLayoutFloatingDockMobile = (_stable, p)=>{
+const __solidLayoutDockMobile = (_stable, p)=>{
     const [open, setOpen] = createSignal(false);
     const handleItemClick = (item, e)=>{
         if (item.onClick) {
@@ -518,12 +518,12 @@ const __solidLayoutFloatingDockMobile = (_stable, p)=>{
         return _el$8;
     })();
 };
-const FloatingDockMobile = defineComponent({
+const DockMobile = defineComponent({
     recipe: componentRecipe,
-    layout: __solidLayoutFloatingDockMobile,
+    layout: __solidLayoutDockMobile,
     embedded: true
 });
-const __solidLayoutFloatingDock = (_stable, p)=>{
+const __solidLayoutDock = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "items",
         "orientation",
@@ -550,7 +550,6 @@ const __solidLayoutFloatingDock = (_stable, p)=>{
         "springStiffness",
         "springDamping",
         "class",
-        "className",
         "dataTheme",
         "style"
     ]);
@@ -590,12 +589,12 @@ const __solidLayoutFloatingDock = (_stable, p)=>{
                 return false !== local.showDesktop;
             },
             get children () {
-                return createComponent(FloatingDockDesktop, mergeProps({
+                return createComponent(DockDesktop, mergeProps({
                     get items () {
                         return local.items;
                     }
                 }, ()=>({
-                        class: twMerge(local.class, local.className, local.desktopClass)
+                        class: twMerge(local.class, local.desktopClass)
                     }), {
                     get cfg () {
                         return cfg();
@@ -616,7 +615,7 @@ const __solidLayoutFloatingDock = (_stable, p)=>{
                         return "dock" !== local.mobileMode;
                     },
                     get fallback () {
-                        return createComponent(FloatingDockDesktop, mergeProps({
+                        return createComponent(DockDesktop, mergeProps({
                             get items () {
                                 return local.items;
                             }
@@ -632,7 +631,7 @@ const __solidLayoutFloatingDock = (_stable, p)=>{
                         }));
                     },
                     get children () {
-                        return createComponent(FloatingDockMobile, mergeProps({
+                        return createComponent(DockMobile, mergeProps({
                             get items () {
                                 return local.items;
                             }
@@ -656,14 +655,14 @@ const __solidLayoutFloatingDock = (_stable, p)=>{
         return _el$14;
     })();
 };
-const FloatingDock = defineComponent({
+const Dock = defineComponent({
     recipe: componentRecipe,
-    layout: __solidLayoutFloatingDock,
+    layout: __solidLayoutDock,
     embedded: true
 });
-const FloatingDock_generated = FloatingDock;
+const Dock_generated = Dock;
 delegateEvents([
     "click",
     "mousemove"
 ]);
-export default FloatingDock_generated;
+export default Dock_generated;

package/dist/components/dock/Dock.recipe.d.ts

@@ -0,0 +1,31 @@
+export declare const CLASSES: {
+    readonly base: "dock";
+    readonly bar: "dock__bar";
+    readonly barOrientation: {
+        readonly horizontal: "dock__bar--horizontal";
+        readonly vertical: "dock__bar--vertical";
+    };
+    readonly barMobileDock: "dock__bar--mobile-dock";
+    readonly bg: "dock__bg";
+    readonly item: "dock__item";
+    readonly icon: "dock__icon";
+    readonly tooltip: "dock__tooltip";
+    readonly mobile: "dock__mobile";
+    readonly mobileToggle: "dock__mobile-toggle";
+    readonly mobilePopup: "dock__mobile-popup";
+    readonly mobilePopupDirection: {
+        readonly top: "dock__mobile-popup--top";
+        readonly bottom: "dock__mobile-popup--bottom";
+        readonly left: "dock__mobile-popup--left";
+        readonly right: "dock__mobile-popup--right";
+    };
+    readonly mobileItem: "dock__mobile-item";
+    readonly buttonReset: "dock__button-reset";
+    readonly menuIcon: "dock__menu-icon";
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "dock";
+    readonly slots: {
+        readonly root: {};
+    };
+}>;

package/dist/components/dock/Dock.recipe.js

@@ -0,0 +1,45 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    base: "dock",
+    bar: "dock__bar",
+    barOrientation: {
+        horizontal: "dock__bar--horizontal",
+        vertical: "dock__bar--vertical"
+    },
+    barMobileDock: "dock__bar--mobile-dock",
+    bg: "dock__bg",
+    item: "dock__item",
+    icon: "dock__icon",
+    tooltip: "dock__tooltip",
+    mobile: "dock__mobile",
+    mobileToggle: "dock__mobile-toggle",
+    mobilePopup: "dock__mobile-popup",
+    mobilePopupDirection: {
+        top: "dock__mobile-popup--top",
+        bottom: "dock__mobile-popup--bottom",
+        left: "dock__mobile-popup--left",
+        right: "dock__mobile-popup--right"
+    },
+    mobileItem: "dock__mobile-item",
+    buttonReset: "dock__button-reset",
+    menuIcon: "dock__menu-icon"
+};
+const componentRecipe = recipe({
+    component: "dock",
+    slots: {
+        root: {}
+    },
+    _layouts: {
+        slots: {
+            root: {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            root: 0
+        }
+    }
+});
+export { CLASSES, componentRecipe };

package/dist/components/dock/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Dock.generated";
+export type { DockProps, DockItem, DockDirection, } from "./Dock.generated";

package/dist/components/dock/index.js

@@ -0,0 +1 @@
+export { default } from "./Dock.generated.js";

package/dist/components/drawer/Drawer.a11y.d.ts

@@ -5,7 +5,7 @@ export type DrawerScrollBehavior = "inside" | "outside";
 export type DrawerAnimState = "entering" | "open" | "exiting" | "closed";
 export type DrawerCloseReason = "escape" | "backdrop" | "trigger" | "api";
 export declare const isSidePlacement: (placement: DrawerPlacement) => placement is "left" | "right";
-export declare const isVisibleState: (state: DrawerAnimState) => state is "open" | "entering";
+export declare const isVisibleState: (state: DrawerAnimState) => state is "entering" | "open";
 export declare const getFocusable: (container: HTMLElement) => HTMLElement[];
 export declare const focusFirst: (container: HTMLElement) => void;
 export declare const trapFocus: (event: KeyboardEvent, container: HTMLElement) => void;