@pathscale/ui 1.1.56 → 1.1.58

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

@@ -0,0 +1,90 @@
+export declare const CLASSES: {
+    readonly Root: {
+        readonly base: "drawer";
+        readonly state: {
+            readonly open: "drawer--open";
+            readonly entering: "drawer--entering";
+            readonly exiting: "drawer--exiting";
+            readonly closed: "drawer--closed";
+        };
+    };
+    readonly Trigger: {
+        readonly base: "drawer__trigger";
+    };
+    readonly Backdrop: {
+        readonly base: "drawer__backdrop";
+        readonly variant: {
+            readonly opaque: "drawer__backdrop--opaque";
+            readonly blur: "drawer__backdrop--blur";
+            readonly transparent: "drawer__backdrop--transparent";
+        };
+        readonly state: {
+            readonly entering: "drawer__backdrop--entering";
+            readonly exiting: "drawer__backdrop--exiting";
+        };
+    };
+    readonly Content: {
+        readonly base: "drawer__content";
+        readonly placement: {
+            readonly top: "drawer__content--top";
+            readonly bottom: "drawer__content--bottom";
+            readonly left: "drawer__content--left";
+            readonly right: "drawer__content--right";
+        };
+        readonly scroll: {
+            readonly inside: "drawer__content--scroll-inside";
+            readonly outside: "drawer__content--scroll-outside";
+        };
+        readonly state: {
+            readonly entering: "drawer__content--entering";
+            readonly exiting: "drawer__content--exiting";
+        };
+    };
+    readonly Dialog: {
+        readonly base: "drawer__dialog";
+        readonly axis: {
+            readonly side: "drawer__dialog--axis-side";
+            readonly edge: "drawer__dialog--axis-edge";
+        };
+        readonly size: {
+            readonly side: {
+                readonly sm: "drawer__dialog--side-sm";
+                readonly md: "drawer__dialog--side-md";
+                readonly lg: "drawer__dialog--side-lg";
+                readonly full: "drawer__dialog--side-full";
+            };
+            readonly edge: {
+                readonly sm: "drawer__dialog--edge-sm";
+                readonly md: "drawer__dialog--edge-md";
+                readonly lg: "drawer__dialog--edge-lg";
+                readonly full: "drawer__dialog--edge-full";
+            };
+        };
+        readonly state: {
+            readonly entering: "drawer__dialog--entering";
+            readonly exiting: "drawer__dialog--exiting";
+        };
+    };
+    readonly Header: {
+        readonly base: "drawer__header";
+    };
+    readonly Heading: {
+        readonly base: "drawer__heading";
+    };
+    readonly Body: {
+        readonly base: "drawer__body";
+    };
+    readonly Footer: {
+        readonly base: "drawer__footer";
+    };
+    readonly Handle: {
+        readonly base: "drawer__handle";
+        readonly bar: "drawer__handle-bar";
+    };
+    readonly CloseTrigger: {
+        readonly base: "drawer__close-trigger";
+        readonly icon: "drawer__close-icon";
+        readonly iconStart: "drawer__close-icon--start";
+        readonly iconEnd: "drawer__close-icon--end";
+    };
+};

package/dist/components/drawer/Drawer.classes.js

@@ -0,0 +1,91 @@
+const CLASSES = {
+    Root: {
+        base: "drawer",
+        state: {
+            open: "drawer--open",
+            entering: "drawer--entering",
+            exiting: "drawer--exiting",
+            closed: "drawer--closed"
+        }
+    },
+    Trigger: {
+        base: "drawer__trigger"
+    },
+    Backdrop: {
+        base: "drawer__backdrop",
+        variant: {
+            opaque: "drawer__backdrop--opaque",
+            blur: "drawer__backdrop--blur",
+            transparent: "drawer__backdrop--transparent"
+        },
+        state: {
+            entering: "drawer__backdrop--entering",
+            exiting: "drawer__backdrop--exiting"
+        }
+    },
+    Content: {
+        base: "drawer__content",
+        placement: {
+            top: "drawer__content--top",
+            bottom: "drawer__content--bottom",
+            left: "drawer__content--left",
+            right: "drawer__content--right"
+        },
+        scroll: {
+            inside: "drawer__content--scroll-inside",
+            outside: "drawer__content--scroll-outside"
+        },
+        state: {
+            entering: "drawer__content--entering",
+            exiting: "drawer__content--exiting"
+        }
+    },
+    Dialog: {
+        base: "drawer__dialog",
+        axis: {
+            side: "drawer__dialog--axis-side",
+            edge: "drawer__dialog--axis-edge"
+        },
+        size: {
+            side: {
+                sm: "drawer__dialog--side-sm",
+                md: "drawer__dialog--side-md",
+                lg: "drawer__dialog--side-lg",
+                full: "drawer__dialog--side-full"
+            },
+            edge: {
+                sm: "drawer__dialog--edge-sm",
+                md: "drawer__dialog--edge-md",
+                lg: "drawer__dialog--edge-lg",
+                full: "drawer__dialog--edge-full"
+            }
+        },
+        state: {
+            entering: "drawer__dialog--entering",
+            exiting: "drawer__dialog--exiting"
+        }
+    },
+    Header: {
+        base: "drawer__header"
+    },
+    Heading: {
+        base: "drawer__heading"
+    },
+    Body: {
+        base: "drawer__body"
+    },
+    Footer: {
+        base: "drawer__footer"
+    },
+    Handle: {
+        base: "drawer__handle",
+        bar: "drawer__handle-bar"
+    },
+    CloseTrigger: {
+        base: "drawer__close-trigger",
+        icon: "drawer__close-icon",
+        iconStart: "drawer__close-icon--start",
+        iconEnd: "drawer__close-icon--end"
+    }
+};
+export { CLASSES };

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

@@ -0,0 +1,27 @@
+import type { DrawerAnimState, DrawerBackdropVariant, DrawerCloseReason, DrawerPlacement, DrawerScrollBehavior, DrawerSize } from "./Drawer.a11y";
+export type DrawerContextValue = {
+    isOpen: () => boolean;
+    setIsOpen: (next: boolean) => void;
+    requestClose: (reason: DrawerCloseReason) => void;
+    animState: () => DrawerAnimState;
+    placement: () => DrawerPlacement;
+    size: () => DrawerSize;
+    backdrop: () => DrawerBackdropVariant;
+    scrollBehavior: () => DrawerScrollBehavior;
+    isDismissable: () => boolean;
+    shouldCloseOnEsc: () => boolean;
+    shouldCloseOnBackdropClick: () => boolean;
+    trapFocus: () => boolean;
+    restoreFocus: () => boolean;
+    dialogRef: () => HTMLDivElement | undefined;
+    setDialogRef: (node: HTMLDivElement | undefined) => void;
+    labelledBy: () => string | undefined;
+    setLabelledBy: (id: string | undefined) => void;
+    describedBy: () => string | undefined;
+    setDescribedBy: (id: string | undefined) => void;
+    setPlacementOverride: (value: DrawerPlacement | undefined) => void;
+    setBackdropDismissableOverride: (value: boolean | undefined) => void;
+    setBackdropCloseOnClickOverride: (value: boolean | undefined) => void;
+};
+export declare const DrawerContext: import("solid-js").Context<DrawerContextValue | undefined>;
+export declare const useDrawerContext: () => DrawerContextValue;

package/dist/components/drawer/Drawer.context.js

@@ -0,0 +1,8 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+const DrawerContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
+const useDrawerContext = ()=>{
+    const ctx = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(DrawerContext);
+    if (!ctx) throw new Error("Drawer compound components must be used within <Drawer.Root>.");
+    return ctx;
+};
+export { DrawerContext, useDrawerContext };

package/dist/components/drawer/Drawer.css

@@ -1,4 +1,8 @@
 @layer components {
+  .drawer {
+    position: relative;
+  }
+
   /* -------------------------------------------------------------------------------------------------
    * Trigger
    * -----------------------------------------------------------------------------------------------*/
@@ -34,6 +38,15 @@
     transition: opacity 250ms cubic-bezier(0.32, 0.72, 0, 1);
   }
 
+  .drawer__backdrop--entering {
+    opacity: 0;
+  }
+
+  .drawer__backdrop--exiting {
+    opacity: 0;
+    transition-duration: 200ms;
+  }
+
   .drawer__backdrop[data-entering="true"] {
     opacity: 0;
   }
@@ -77,6 +90,42 @@
     height: 100dvh;
   }
 
+  .drawer__content--scroll-inside .drawer__dialog {
+    overflow: hidden;
+  }
+
+  .drawer__content--scroll-inside .drawer__body {
+    overflow-y: auto;
+  }
+
+  .drawer__content--scroll-outside {
+    overflow-y: auto;
+  }
+
+  .drawer__content--scroll-outside .drawer__dialog {
+    margin-block: auto;
+  }
+
+  .drawer__content--entering[data-placement="left"] .drawer__dialog,
+  .drawer__content--exiting[data-placement="left"] .drawer__dialog {
+    translate: -100% 0;
+  }
+
+  .drawer__content--entering[data-placement="right"] .drawer__dialog,
+  .drawer__content--exiting[data-placement="right"] .drawer__dialog {
+    translate: 100% 0;
+  }
+
+  .drawer__content--entering[data-placement="top"] .drawer__dialog,
+  .drawer__content--exiting[data-placement="top"] .drawer__dialog {
+    translate: 0 -100%;
+  }
+
+  .drawer__content--entering[data-placement="bottom"] .drawer__dialog,
+  .drawer__content--exiting[data-placement="bottom"] .drawer__dialog {
+    translate: 0 100%;
+  }
+
   .drawer__content--bottom {
     align-items: flex-end;
   }
@@ -117,6 +166,57 @@
     transition: translate var(--drawer-enter-duration) var(--drawer-ease);
   }
 
+  .drawer__dialog--axis-side {
+    height: 100%;
+    border-radius: 0;
+  }
+
+  .drawer__dialog--axis-edge {
+    width: 100%;
+  }
+
+  .drawer__dialog--side-sm {
+    width: 18rem;
+    max-width: 85vw;
+  }
+
+  .drawer__dialog--side-md {
+    width: 20rem;
+    max-width: 85vw;
+  }
+
+  .drawer__dialog--side-lg {
+    width: 24rem;
+    max-width: 90vw;
+  }
+
+  .drawer__dialog--side-full {
+    width: 100vw;
+    max-width: 100vw;
+  }
+
+  .drawer__dialog--edge-sm {
+    max-height: min(40vh, 24rem);
+  }
+
+  .drawer__dialog--edge-md {
+    max-height: min(60vh, 36rem);
+  }
+
+  .drawer__dialog--edge-lg {
+    max-height: 85vh;
+  }
+
+  .drawer__dialog--edge-full {
+    max-height: 100vh;
+    border-radius: 0;
+  }
+
+  .drawer__dialog--entering,
+  .drawer__dialog--exiting {
+    transition-duration: var(--drawer-exit-duration);
+  }
+
   [data-exiting="true"] .drawer__dialog {
     transition-duration: var(--drawer-exit-duration);
   }
@@ -150,6 +250,48 @@
     }
   }
 
+  /* -------------------------------------------------------------------------------------------------
+   * Dialog — semantic prop: custom size (width / maxWidth)
+   * -----------------------------------------------------------------------------------------------*/
+  .drawer__dialog--custom-size {
+    width: var(--drawer-dialog-width, 20rem);
+    max-width: var(--drawer-dialog-max-width, 85vw);
+  }
+
+  @media (min-width: 640px) {
+    .drawer__dialog--custom-size {
+      width: var(--drawer-dialog-width, 24rem);
+    }
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Dialog — semantic prop: custom padding
+   * -----------------------------------------------------------------------------------------------*/
+  .drawer__dialog--custom-padding {
+    padding: var(--drawer-dialog-padding);
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Dialog — semantic prop: side (border indicator, parametric width & color)
+   * -----------------------------------------------------------------------------------------------*/
+  .drawer__dialog--side-left {
+    border-right-width: var(--drawer-dialog-border-width, 1px);
+    border-right-style: solid;
+    border-right-color: var(--drawer-dialog-border-color, color-mix(in oklab, var(--color-base-content) 10%, transparent));
+  }
+
+  .drawer__dialog--side-right {
+    border-left-width: var(--drawer-dialog-border-width, 1px);
+    border-left-style: solid;
+    border-left-color: var(--drawer-dialog-border-color, color-mix(in oklab, var(--color-base-content) 10%, transparent));
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Dialog — semantic prop: bg (any CSS color via custom property)
+   * -----------------------------------------------------------------------------------------------*/
+  .drawer__dialog--custom-bg {
+    background-color: var(--drawer-dialog-bg, var(--color-base-100));
+  }
   /* Slide transitions — open state */
   .drawer__content--left .drawer__dialog,
   .drawer__content--right .drawer__dialog,
@@ -158,7 +300,7 @@
     translate: 0 0;
   }
 
-  /* Entering/exiting slide transforms */
+  /* Entering/exiting slide transforms (legacy data-attrs support) */
   .drawer__content--left[data-entering="true"] .drawer__dialog,
   .drawer__content--left[data-exiting="true"] .drawer__dialog {
     translate: -100% 0;
@@ -242,6 +384,7 @@
     padding-bottom: 0.5rem;
   }
 
+  .drawer__handle-bar,
   .drawer__handle > [data-slot="drawer-handle-bar"] {
     height: 0.25rem;
     width: 2.25rem;
@@ -280,6 +423,21 @@
     outline-offset: 2px;
   }
 
+  .drawer__close-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1rem;
+    height: 1rem;
+    pointer-events: none;
+  }
+
+  .drawer__close-icon > * {
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+
   /* -------------------------------------------------------------------------------------------------
    * Element spacing
    * -----------------------------------------------------------------------------------------------*/

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

@@ -1,49 +1,79 @@
 import "./Drawer.css";
 import { type Component, type JSX, type ParentComponent } from "solid-js";
 import type { IComponentBaseProps } from "../types";
-export type DrawerPlacement = "top" | "bottom" | "left" | "right";
-export type DrawerBackdropVariant = "opaque" | "blur" | "transparent";
-export type DrawerRootProps = IComponentBaseProps & {
+import { type DrawerBackdropVariant, type DrawerPlacement, type DrawerScrollBehavior, type DrawerSize } from "./Drawer.a11y";
+export type { DrawerPlacement, DrawerSize, DrawerBackdropVariant, DrawerScrollBehavior, } from "./Drawer.a11y";
+export type DrawerRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
     children: JSX.Element;
     isOpen?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (isOpen: boolean) => void;
+    placement?: DrawerPlacement;
+    size?: DrawerSize;
+    backdrop?: DrawerBackdropVariant;
+    scrollBehavior?: DrawerScrollBehavior;
+    isDismissable?: boolean;
+    shouldCloseOnEsc?: boolean;
+    shouldCloseOnBackdropClick?: boolean;
+    trapFocus?: boolean;
+    restoreFocus?: boolean;
 };
-export type DrawerTriggerProps = Omit<JSX.HTMLAttributes<HTMLButtonElement>, "children"> & IComponentBaseProps & {
+export type DrawerTriggerProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "children"> & IComponentBaseProps & {
     children: JSX.Element;
 };
 export type DrawerBackdropProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
     children: JSX.Element;
     variant?: DrawerBackdropVariant;
+    /** @deprecated Configure dismissability at Drawer.Root `isDismissable` */
     isDismissable?: boolean;
+    /** @deprecated Configure backdrop closing at Drawer.Root `shouldCloseOnBackdropClick` */
+    shouldCloseOnBackdropClick?: boolean;
 };
 export type DrawerContentProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
     children: JSX.Element;
+    /** @deprecated Configure placement at Drawer.Root `placement` */
     placement?: DrawerPlacement;
+    scrollBehavior?: DrawerScrollBehavior;
 };
+export type DrawerDialogSide = "left" | "right";
 export type DrawerDialogProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
     children: JSX.Element;
+    side?: DrawerDialogSide;
+    width?: string;
+    maxWidth?: string;
+    bg?: string;
+    padding?: string;
+    borderWidth?: string;
+    borderColor?: string;
+    size?: DrawerSize;
 };
 export type DrawerHeaderProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
     children: JSX.Element;
 };
 export type DrawerHeadingProps = Omit<JSX.HTMLAttributes<HTMLHeadingElement>, "children"> & IComponentBaseProps & {
     children: JSX.Element;
+    id?: string;
 };
 export type DrawerBodyProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
     children: JSX.Element;
+    id?: string;
 };
 export type DrawerFooterProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
     children: JSX.Element;
 };
 export type DrawerHandleProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
-export type DrawerCloseTriggerProps = Omit<JSX.HTMLAttributes<HTMLButtonElement>, "children"> & IComponentBaseProps & {
+export type DrawerCloseTriggerProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "children"> & IComponentBaseProps & {
     children?: JSX.Element;
+    startIcon?: JSX.Element;
+    endIcon?: JSX.Element;
+};
+export type DrawerCloseProps = {
+    children: JSX.Element;
 };
 declare const DrawerRoot: ParentComponent<DrawerRootProps>;
 declare const DrawerTrigger: Component<DrawerTriggerProps>;
-declare const DrawerBackdrop: ParentComponent<DrawerBackdropProps>;
 declare const DrawerContent: ParentComponent<DrawerContentProps>;
+declare const DrawerBackdrop: ParentComponent<DrawerBackdropProps>;
 declare const DrawerDialog: ParentComponent<DrawerDialogProps>;
 declare const DrawerHeader: ParentComponent<DrawerHeaderProps>;
 declare const DrawerHeading: ParentComponent<DrawerHeadingProps>;
@@ -51,9 +81,6 @@ declare const DrawerBody: ParentComponent<DrawerBodyProps>;
 declare const DrawerFooter: ParentComponent<DrawerFooterProps>;
 declare const DrawerHandle: Component<DrawerHandleProps>;
 declare const DrawerCloseTrigger: Component<DrawerCloseTriggerProps>;
-export type DrawerCloseProps = {
-    children: JSX.Element;
-};
 declare const DrawerClose: ParentComponent<DrawerCloseProps>;
 declare const Drawer: ParentComponent<DrawerRootProps> & {
     Root: ParentComponent<DrawerRootProps>;