@pathscale/ui 0.0.162 → 0.0.163

package/dist/components/divider/Divider.styles.js

@@ -0,0 +1,71 @@
+import * as __WEBPACK_EXTERNAL_MODULE__lib_style_index_js_d7884cc7__ from "../../lib/style/index.js";
+const dividerStyles = (0, __WEBPACK_EXTERNAL_MODULE__lib_style_index_js_d7884cc7__.cva)("flex items-center whitespace-nowrap relative", {
+    variants: {
+        horizontal: {
+            true: "flex-col h-auto w-4 mx-4 my-0 min-h-16",
+            false: "flex-row h-4 w-auto mx-0 my-4"
+        },
+        color: {
+            default: "before:bg-base-content/30 after:bg-base-content/30",
+            neutral: "before:bg-neutral after:bg-neutral",
+            primary: "before:bg-primary after:bg-primary",
+            secondary: "before:bg-secondary after:bg-secondary",
+            accent: "before:bg-accent after:bg-accent",
+            success: "before:bg-success after:bg-success",
+            warning: "before:bg-warning after:bg-warning",
+            info: "before:bg-info after:bg-info",
+            error: "before:bg-error after:bg-error"
+        },
+        position: {
+            center: "",
+            start: "before:hidden",
+            end: "after:hidden"
+        }
+    },
+    compoundVariants: [
+        {
+            horizontal: false,
+            class: "before:content-[''] before:flex-1 before:h-0.5 after:content-[''] after:flex-1 after:h-0.5"
+        },
+        {
+            horizontal: false,
+            position: "center",
+            class: "[&:not(:empty)]:before:mr-4 [&:not(:empty)]:after:ml-4"
+        },
+        {
+            horizontal: false,
+            position: "start",
+            class: "[&:not(:empty)]:after:ml-4"
+        },
+        {
+            horizontal: false,
+            position: "end",
+            class: "[&:not(:empty)]:before:mr-4"
+        },
+        {
+            horizontal: true,
+            class: "before:content-[''] before:flex-1 before:w-0.5 before:h-auto after:content-[''] after:flex-1 after:w-0.5 after:h-auto"
+        },
+        {
+            horizontal: true,
+            position: "center",
+            class: "[&:not(:empty)]:before:mb-4 [&:not(:empty)]:after:mt-4"
+        },
+        {
+            horizontal: true,
+            position: "start",
+            class: "[&:not(:empty)]:after:mt-4"
+        },
+        {
+            horizontal: true,
+            position: "end",
+            class: "[&:not(:empty)]:before:mb-4"
+        }
+    ],
+    defaultVariants: {
+        horizontal: false,
+        color: "default",
+        position: "center"
+    }
+});
+export { dividerStyles };

package/dist/components/divider/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Divider_js_079b7198__ from "./Divider.js";
+const divider = __WEBPACK_EXTERNAL_MODULE__Divider_js_079b7198__["default"];
+export { divider as default };

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

@@ -1,3 +1,4 @@
+import "./dock.css";
 import type { JSX } from "solid-js";
 import type { IComponentBaseProps, ComponentSize } from "../types";
 import { type DockItemProps as ItemProps } from "./DockItem";

package/dist/components/dock/Dock.js

@@ -0,0 +1,40 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./dock.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__DockItem_js_2cb78296__ from "./DockItem.js";
+import * as __WEBPACK_EXTERNAL_MODULE__DockLabel_js_3671a1fc__ from "./DockLabel.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const Dock_Dock = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "size",
+        "dataTheme",
+        "class",
+        "className",
+        "children"
+    ]);
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("dock", (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])({
+        "dock-lg": "lg" === local.size,
+        "dock-md": "md" === local.size,
+        "dock-sm": "sm" === local.size,
+        "dock-xs": "xs" === local.size
+    }), 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, {
+            role: "navigation",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            class: classes
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+        return _el$;
+    })();
+};
+const Dock = Object.assign(Dock_Dock, {
+    Item: __WEBPACK_EXTERNAL_MODULE__DockItem_js_2cb78296__["default"],
+    Label: __WEBPACK_EXTERNAL_MODULE__DockLabel_js_3671a1fc__["default"]
+});
+export { Dock as default };

package/dist/components/dock/DockItem.js

@@ -0,0 +1,45 @@
+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_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button>");
+const DockItem_DockItem = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "active",
+        "class",
+        "className",
+        "color",
+        "dataTheme",
+        "disabled"
+    ]);
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(local.class, local.className, (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])({
+        "text-neutral": "neutral" === local.color,
+        "text-primary": "primary" === local.color,
+        "text-secondary": "secondary" === local.color,
+        "text-accent": "accent" === local.color,
+        "text-info": "info" === local.color,
+        "text-success": "success" === local.color,
+        "text-warning": "warning" === local.color,
+        "text-error": "error" === local.color,
+        "border-t-2 rounded-none": local.active,
+        active: local.active,
+        disabled: local.disabled
+    }));
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get disabled () {
+                return local.disabled;
+            },
+            class: classes
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+        return _el$;
+    })();
+};
+const DockItem = DockItem_DockItem;
+export { DockItem as default };

package/dist/components/dock/DockLabel.js

@@ -0,0 +1,22 @@
+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";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>");
+const DockLabel = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className"
+    ]);
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("dock-label", 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, {
+            class: classes
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+        return _el$;
+    })();
+};
+const dock_DockLabel = DockLabel;
+export { dock_DockLabel as default };

package/dist/components/dock/dock.css

@@ -0,0 +1,147 @@
+@layer components {
+  .dock {
+      position: fixed;
+      right: calc(0.25rem * 0);
+      bottom: calc(0.25rem * 0);
+      left: calc(0.25rem * 0);
+      z-index: 1;
+      display: flex;
+      width: 100%;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-around;
+      background-color: var(--color-base-100);
+      padding: calc(0.25rem * 2);
+      color: currentcolor;
+      border-top: 0.5px solid var(--color-base-content);
+      height: 4rem;
+      height: calc(4rem + env(safe-area-inset-bottom));
+      padding-bottom: env(safe-area-inset-bottom);
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dock {
+      border-top: 0.5px solid color-mix(in oklab, var(--color-base-content) 5%, #0000);
+    }
+    }
+
+  .dock > * {
+      position: relative;
+      margin-bottom: calc(0.25rem * 2);
+      display: flex;
+      height: 100%;
+      max-width: calc(0.25rem * 32);
+      flex-shrink: 1;
+      flex-basis: 100%;
+      cursor: pointer;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 1px;
+      border-radius: var(--radius-box);
+      background-color: transparent;
+      transition: opacity 0.2s ease-out;
+    }
+
+  @media (hover: hover) {
+    .dock > *:hover {
+      opacity: 80%;
+    }
+    }
+
+  .dock > *[aria-disabled="true"],
+    .dock > *[aria-disabled="true"]:hover,
+    .dock > *[disabled],
+    .dock > *[disabled]:hover {
+      pointer-events: none;
+      color: var(--color-base-content);
+      opacity: 100%;
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dock > *[aria-disabled="true"],
+    .dock > *[aria-disabled="true"]:hover,
+    .dock > *[disabled],
+    .dock > *[disabled]:hover {
+      color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
+    }
+    }
+
+  .dock > * .dock-label {
+      font-size: 0.6875rem;
+    }
+
+  .dock > *:after {
+      content: "";
+      position: absolute;
+      height: calc(0.25rem * 1);
+      width: calc(0.25rem * 6);
+      border-radius: calc(infinity * 1px);
+      background-color: transparent;
+      bottom: 0.2rem;
+      border-top: 3px solid transparent;
+      transition: background-color 0.1s ease-out, text-color 0.1s ease-out, width 0.1s ease-out;
+    }
+
+  .dock-sm {
+      height: calc(0.25rem * 14);
+      height: 3.5rem;
+      height: calc(3.5rem + env(safe-area-inset-bottom));
+    }
+
+  .dock-sm .dock-active:after {
+      bottom: -0.1rem;
+    }
+
+  .dock-sm .dock-label {
+      font-size: 0.625rem;
+    }
+
+  .dock-lg {
+      height: 4.5rem;
+      height: calc(4.5rem + env(safe-area-inset-bottom));
+    }
+
+  .dock-lg .dock-active:after {
+      bottom: 0.4rem;
+    }
+
+  .dock-lg .dock-label {
+      font-size: 0.6875rem;
+    }
+
+  .dock-xl {
+      height: 5rem;
+      height: calc(5rem + env(safe-area-inset-bottom));
+    }
+
+  .dock-xl .dock-active:after {
+      bottom: 0.4rem;
+    }
+
+  .dock-xl .dock-label {
+      font-size: 0.75rem;
+    }
+
+  .dock-xs {
+      height: 3rem;
+      height: calc(3rem + env(safe-area-inset-bottom));
+    }
+
+  .dock-xs .dock-active:after {
+      bottom: -0.1rem;
+    }
+
+  .dock-xs .dock-label {
+      font-size: 0.625rem;
+    }
+
+  .dock-md {
+      height: 4rem;
+      height: calc(4rem + env(safe-area-inset-bottom));
+    }
+
+  .dock-md .dock-label {
+      font-size: 0.6875rem;
+    }
+}

package/dist/components/dock/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Dock_js_89995c14__ from "./Dock.js";
+const dock = __WEBPACK_EXTERNAL_MODULE__Dock_js_89995c14__["default"];
+export { dock as default };

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

@@ -1,3 +1,4 @@
+import "./drawer.css";
 import { type JSX, type ParentComponent } from "solid-js";
 import type { IComponentBaseProps } from "../types";
 export type DrawerProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "ref"> & IComponentBaseProps & {

package/dist/components/drawer/Drawer.js

@@ -0,0 +1,68 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./drawer.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";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><input type=checkbox readonly><div></div><div><label>");
+const Drawer_Drawer = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "side",
+        "open",
+        "end",
+        "dataTheme",
+        "class",
+        "className",
+        "toggleClassName",
+        "contentClassName",
+        "sideClassName",
+        "overlayClassName",
+        "onClickOverlay"
+    ]);
+    const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
+    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("drawer", local.class, local.className, (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])({
+            "drawer-end": local.end
+        }));
+    const toggleClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("drawer-toggle", local.toggleClassName);
+    const contentClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("drawer-content", local.contentClassName);
+    const sideClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("drawer-side", local.sideClassName);
+    const overlayClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("drawer-overlay", local.overlayClassName);
+    return (()=>{
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling, _el$5 = _el$4.firstChild;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+            get ["aria-expanded"] () {
+                return local.open;
+            }
+        }, others, {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get ["class"] () {
+                return classes();
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, resolvedChildren);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.addEventListener)(_el$5, "click", local.onClickOverlay, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>local.side, null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$ = toggleClasses(), _v$2 = contentClasses(), _v$3 = sideClasses(), _v$4 = overlayClasses();
+            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, _p$.e = _v$);
+            _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$3, _p$.t = _v$2);
+            _v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$4, _p$.a = _v$3);
+            _v$4 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$5, _p$.o = _v$4);
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0,
+            a: void 0,
+            o: void 0
+        });
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>_el$2.checked = local.open);
+        return _el$;
+    })();
+};
+const Drawer = Drawer_Drawer;
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "click"
+]);
+export { Drawer as default };

package/dist/components/drawer/drawer.css

@@ -0,0 +1,184 @@
+@layer components {
+  .drawer-side {
+      pointer-events: none;
+      visibility: hidden;
+      position: fixed;
+      inset-inline-start: calc(0.25rem * 0);
+      top: calc(0.25rem * 0);
+      z-index: 10;
+      grid-column-start: 1;
+      grid-row-start: 1;
+      display: grid;
+      width: 100%;
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+      grid-template-rows: repeat(1, minmax(0, 1fr));
+      align-items: flex-start;
+      justify-items: start;
+      overscroll-behavior: contain;
+      background-color: transparent;
+      opacity: 0%;
+      transition: opacity 0.2s ease-out 0.1s allow-discrete, visibility 0.3s ease-out 0.1s allow-discrete;
+      height: 100vh;
+      height: 100dvh;
+    }
+
+  :where(.drawer-side) {
+      overflow-x: hidden;
+      overflow-y: hidden;
+    }
+
+  .drawer-side > .drawer-overlay {
+      position: sticky;
+      top: calc(0.25rem * 0);
+      cursor: pointer;
+      place-self: stretch;
+      background-color: oklch(0% 0 0 / 40%);
+    }
+
+  .drawer-side > * {
+      grid-column-start: 1;
+      grid-row-start: 1;
+    }
+
+  .drawer-side > :not(.drawer-overlay) {
+      will-change: transform;
+      transition: translate 0.3s ease-out, width 0.2s ease-out;
+      translate: -100%;
+    }
+
+  [dir="rtl"] .drawer-side > :not(.drawer-overlay) {
+      translate: 100%;
+    }
+
+  .drawer-open > .drawer-toggle:checked ~ .drawer-side {
+      scrollbar-color: revert-layer;
+    }
+
+  :root:has(.drawer-open > .drawer-toggle:checked) {
+      --page-overflow: revert-layer;
+      --page-scroll-gutter: revert-layer;
+      --page-scroll-bg: revert-layer;
+      --page-scroll-transition: revert-layer;
+      --page-has-backdrop: revert-layer;
+      animation: revert-layer;
+      animation-timeline: revert-layer;
+    }
+
+  .drawer-open > .drawer-side {
+      overflow-y: auto;
+    }
+
+  .drawer-open > .drawer-toggle {
+      display: none;
+    }
+
+  .drawer-open > .drawer-toggle ~ .drawer-side {
+      pointer-events: auto;
+      visibility: visible;
+      position: sticky;
+      display: block;
+      width: auto;
+      overscroll-behavior: auto;
+      opacity: 100%;
+    }
+
+  .drawer-open > .drawer-toggle ~ .drawer-side > .drawer-overlay {
+      cursor: default;
+      background-color: transparent;
+    }
+
+  .drawer-open > .drawer-toggle:checked ~ .drawer-side {
+      pointer-events: auto;
+      visibility: visible;
+    }
+
+  .drawer-open > .drawer-toggle ~ .drawer-side > :not(.drawer-overlay) {
+      translate: 0%;
+    }
+
+  [dir="rtl"] .drawer-open > .drawer-toggle ~ .drawer-side > :not(.drawer-overlay) {
+      translate: 0%;
+    }
+
+  .drawer-toggle {
+      position: fixed;
+      height: calc(0.25rem * 0);
+      width: calc(0.25rem * 0);
+      appearance: none;
+      opacity: 0%;
+    }
+
+  :where(.drawer-toggle:checked ~ .drawer-side) {
+      scrollbar-color: currentColor oklch(0 0 0 / calc(var(--page-has-backdrop, 0) * 0.4));
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.drawer-toggle:checked ~ .drawer-side) {
+      scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) oklch(0 0 0 / calc(var(--page-has-backdrop, 0) * 0.4));
+    }
+    }
+
+  :where(:root:has(.drawer-toggle:checked)) {
+      --page-has-backdrop: 1;
+      --page-overflow: hidden;
+      --page-scroll-bg: var(--page-scroll-bg-on);
+      --page-scroll-gutter: stable;
+      --page-scroll-transition: var(--page-scroll-transition-on);
+      animation: set-page-has-scroll forwards;
+      animation-timeline: scroll();
+    }
+
+  :where(.drawer-toggle:checked ~ .drawer-side) {
+      pointer-events: auto;
+      visibility: visible;
+      overflow-y: auto;
+      opacity: 100%;
+    }
+
+  :where(.drawer-toggle:checked ~ .drawer-side) > :not(.drawer-overlay) {
+      translate: 0%;
+    }
+
+  .drawer-toggle:focus-visible ~ .drawer-content label.drawer-button {
+      outline: 2px solid;
+      outline-offset: 2px;
+    }
+
+  .drawer {
+      position: relative;
+      display: grid;
+      width: 100%;
+      grid-auto-columns: max-content auto;
+    }
+
+  .drawer-content {
+      grid-column-start: 2;
+      grid-row-start: 1;
+      min-width: calc(0.25rem * 0);
+    }
+
+  .drawer-end {
+      grid-auto-columns: auto max-content;
+    }
+
+  .drawer-end > .drawer-toggle ~ .drawer-content {
+      grid-column-start: 1;
+    }
+
+  .drawer-end > .drawer-toggle ~ .drawer-side {
+      grid-column-start: 2;
+      justify-items: end;
+    }
+
+  .drawer-end > .drawer-toggle ~ .drawer-side > :not(.drawer-overlay) {
+      translate: 100%;
+    }
+
+  [dir="rtl"] .drawer-end > .drawer-toggle ~ .drawer-side > :not(.drawer-overlay) {
+      translate: -100%;
+    }
+
+  .drawer-end > .drawer-toggle:checked ~ .drawer-side > :not(.drawer-overlay) {
+      translate: 0%;
+    }
+}

package/dist/components/drawer/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Drawer_js_d34b0417__ from "./Drawer.js";
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Drawer_js_d34b0417__["default"];
+export { __webpack_exports__default as default };

package/dist/components/dropdown/Dropdown.d.ts

@@ -1,6 +1,8 @@
+import "./dropdown.css";
 import { type JSX } from "solid-js";
 import type { IComponentBaseProps } from "../types";
-import { type DropdownContextType } from "./dropdownContext";
+export { DropdownContext, classesFn } from "./dropdownContext";
+export type { DropdownContextType } from "./dropdownContext";
 export type DropdownProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps & {
     item?: JSX.Element;
     horizontal?: "left" | "right";
@@ -16,8 +18,6 @@ export type DropdownProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseP
     "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog";
     "aria-labelledby"?: string;
 };
-export declare const classesFn: ({ className, horizontal, vertical, end, hover, open, }: Pick<DropdownProps, "className" | "horizontal" | "vertical" | "end" | "hover" | "open">) => string;
-export declare const DropdownContext: import("solid-js").Context<DropdownContextType | undefined>;
 declare const _default: ((props: DropdownProps) => JSX.Element) & {
     Details: ((props: import("./DropdownDetails").DetailsProps) => JSX.Element) & {
         Toggle: (props: import("./DropdownToggle").SummaryProps) => JSX.Element;