@pathscale/ui 1.1.53 → 1.1.54

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

@@ -1,90 +1,28 @@
 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";
-    };
+    readonly slot: {
+        readonly trigger: "drawer__trigger";
+        readonly backdrop: "drawer__backdrop";
+        readonly content: "drawer__content";
+        readonly dialog: "drawer__dialog";
+        readonly header: "drawer__header";
+        readonly heading: "drawer__heading";
+        readonly body: "drawer__body";
+        readonly footer: "drawer__footer";
+        readonly handle: "drawer__handle";
+        readonly closeTrigger: "drawer__close-trigger";
+        readonly closeIcon: "drawer__close-icon";
+    };
+    readonly backdrop: {
+        readonly opaque: "drawer__backdrop--opaque";
+        readonly blur: "drawer__backdrop--blur";
+        readonly transparent: "drawer__backdrop--transparent";
+    };
+    readonly placement: {
+        readonly top: "drawer__content--top";
+        readonly bottom: "drawer__content--bottom";
+        readonly left: "drawer__content--left";
+        readonly right: "drawer__content--right";
+    };
+    readonly closeIconStart: "drawer__close-icon--start";
+    readonly closeIconEnd: "drawer__close-icon--end";
 };

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

@@ -1,91 +1,29 @@
 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"
-    }
+    slot: {
+        trigger: "drawer__trigger",
+        backdrop: "drawer__backdrop",
+        content: "drawer__content",
+        dialog: "drawer__dialog",
+        header: "drawer__header",
+        heading: "drawer__heading",
+        body: "drawer__body",
+        footer: "drawer__footer",
+        handle: "drawer__handle",
+        closeTrigger: "drawer__close-trigger",
+        closeIcon: "drawer__close-icon"
+    },
+    backdrop: {
+        opaque: "drawer__backdrop--opaque",
+        blur: "drawer__backdrop--blur",
+        transparent: "drawer__backdrop--transparent"
+    },
+    placement: {
+        top: "drawer__content--top",
+        bottom: "drawer__content--bottom",
+        left: "drawer__content--left",
+        right: "drawer__content--right"
+    },
+    closeIconStart: "drawer__close-icon--start",
+    closeIconEnd: "drawer__close-icon--end"
 };
 export { CLASSES };

package/dist/components/drawer/Drawer.css

@@ -1,8 +1,4 @@
 @layer components {
-  .drawer {
-    position: relative;
-  }
-
   /* -------------------------------------------------------------------------------------------------
    * Trigger
    * -----------------------------------------------------------------------------------------------*/
@@ -38,15 +34,6 @@
     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;
   }
@@ -90,42 +77,6 @@
     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;
   }
@@ -166,57 +117,6 @@
     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);
   }
@@ -292,6 +192,7 @@
   .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,
@@ -300,7 +201,7 @@
     translate: 0 0;
   }
 
-  /* Entering/exiting slide transforms (legacy data-attrs support) */
+  /* Entering/exiting slide transforms */
   .drawer__content--left[data-entering="true"] .drawer__dialog,
   .drawer__content--left[data-exiting="true"] .drawer__dialog {
     translate: -100% 0;
@@ -384,7 +285,6 @@
     padding-bottom: 0.5rem;
   }
 
-  .drawer__handle-bar,
   .drawer__handle > [data-slot="drawer-handle-bar"] {
     height: 0.25rem;
     width: 2.25rem;

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

@@ -1,39 +1,25 @@
 import "./Drawer.css";
 import { type Component, type JSX, type ParentComponent } from "solid-js";
 import type { IComponentBaseProps } from "../types";
-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 & {
+export type DrawerPlacement = "top" | "bottom" | "left" | "right";
+export type DrawerBackdropVariant = "opaque" | "blur" | "transparent";
+export type DrawerRootProps = 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.ButtonHTMLAttributes<HTMLButtonElement>, "children"> & IComponentBaseProps & {
+export type DrawerTriggerProps = Omit<JSX.HTMLAttributes<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 & {
@@ -45,35 +31,29 @@ export type DrawerDialogProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "childr
     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.ButtonHTMLAttributes<HTMLButtonElement>, "children"> & IComponentBaseProps & {
+export type DrawerCloseTriggerProps = Omit<JSX.HTMLAttributes<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 DrawerContent: ParentComponent<DrawerContentProps>;
 declare const DrawerBackdrop: ParentComponent<DrawerBackdropProps>;
+declare const DrawerContent: ParentComponent<DrawerContentProps>;
 declare const DrawerDialog: ParentComponent<DrawerDialogProps>;
 declare const DrawerHeader: ParentComponent<DrawerHeaderProps>;
 declare const DrawerHeading: ParentComponent<DrawerHeadingProps>;
@@ -81,6 +61,9 @@ 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>;