@pathscale/ui 0.1.1 → 1.2.1

package/dist/components/menu/menu.css

@@ -0,0 +1,364 @@
+@layer components {
+  .menu {
+      display: flex;
+      width: fit-content;
+      flex-direction: column;
+      flex-wrap: wrap;
+      padding: calc(0.25rem * 2);
+      --menu-active-fg: var(--color-neutral-content);
+      --menu-active-bg: var(--color-neutral);
+      font-size: 0.875rem;
+    }
+
+  .menu :where(li ul) {
+      position: relative;
+      margin-inline-start: calc(0.25rem * 4);
+      padding-inline-start: calc(0.25rem * 2);
+      white-space: nowrap;
+    }
+
+  .menu :where(li ul):before {
+      position: absolute;
+      inset-inline-start: calc(0.25rem * 0);
+      top: calc(0.25rem * 3);
+      bottom: calc(0.25rem * 3);
+      background-color: var(--color-base-content);
+      opacity: 10%;
+      width: var(--border);
+      content: "";
+    }
+
+  .menu :where(li > .menu-dropdown:not(.menu-dropdown-show)) {
+      display: none;
+    }
+
+  .menu :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)),
+    .menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
+      display: grid;
+      grid-auto-flow: column;
+      align-content: flex-start;
+      align-items: center;
+      gap: calc(0.25rem * 2);
+      border-radius: var(--radius-field);
+      padding-inline: calc(0.25rem * 3);
+      padding-block: calc(0.25rem * 1.5);
+      text-align: start;
+      transition-property: color, background-color, box-shadow;
+      transition-duration: 0.2s;
+      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+      grid-auto-columns: minmax(auto, max-content) auto max-content;
+      text-wrap: balance;
+      user-select: none;
+    }
+
+  .menu :where(li > details > summary) {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+
+  @media (forced-colors: active) {
+    .menu :where(li > details > summary) {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+    }
+
+  .menu :where(li > details > summary)::-webkit-details-marker {
+      display: none;
+    }
+
+  .menu :where(li > details > summary):after,
+    .menu :where(li > .menu-dropdown-toggle):after {
+      justify-self: flex-end;
+      display: block;
+      height: 0.375rem;
+      width: 0.375rem;
+      rotate: -135deg;
+      translate: 0 -1px;
+      transition-property: rotate, translate;
+      transition-duration: 0.2s;
+      content: "";
+      transform-origin: 50% 50%;
+      box-shadow: 2px 2px inset;
+      pointer-events: none;
+    }
+
+  .menu details {
+      overflow: hidden;
+      interpolate-size: allow-keywords;
+    }
+
+  .menu details::details-content {
+      block-size: 0;
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .menu details::details-content {
+      transition-behavior: allow-discrete;
+      transition-property: block-size, content-visibility;
+      transition-duration: 0.2s;
+      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    }
+    }
+
+  .menu details[open]::details-content {
+      block-size: auto;
+    }
+
+  .menu :where(li > details[open] > summary):after,
+    .menu :where(li > .menu-dropdown-toggle.menu-dropdown-show):after {
+      rotate: 45deg;
+      translate: 0 1px;
+    }
+
+  .menu :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title), li:not(.menu-title, .disabled) > details > summary:not(.menu-title) ):not(.menu-active, :active, .btn).menu-focus,
+    .menu :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title), li:not(.menu-title, .disabled) > details > summary:not(.menu-title) ):not(.menu-active, :active, .btn):focus-visible {
+      cursor: pointer;
+      background-color: var(--color-base-content);
+      color: var(--color-base-content);
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .menu :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title), li:not(.menu-title, .disabled) > details > summary:not(.menu-title) ):not(.menu-active, :active, .btn).menu-focus,
+    .menu :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title), li:not(.menu-title, .disabled) > details > summary:not(.menu-title) ):not(.menu-active, :active, .btn):focus-visible {
+      background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
+    }
+    }
+
+  @media (forced-colors: active) {
+    .menu :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title), li:not(.menu-title, .disabled) > details > summary:not(.menu-title) ):not(.menu-active, :active, .btn).menu-focus,
+    .menu :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title), li:not(.menu-title, .disabled) > details > summary:not(.menu-title) ):not(.menu-active, :active, .btn):focus-visible {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+    }
+
+  .menu :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title):not(.menu-active, :active, .btn):hover, li:not(.menu-title, .disabled) > details > summary:not(.menu-title):not(.menu-active, :active, .btn):hover ) {
+      cursor: pointer;
+      background-color: var(--color-base-content);
+      --tw-outline-style: none;
+      outline-style: none;
+      box-shadow: 0 1px oklch(0% 0 0 / 0.01) inset, 0 -1px oklch(100% 0 0 / 0.01) inset;
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .menu :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title):not(.menu-active, :active, .btn):hover, li:not(.menu-title, .disabled) > details > summary:not(.menu-title):not(.menu-active, :active, .btn):hover ) {
+      background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
+    }
+    }
+
+  @media (forced-colors: active) {
+    .menu :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title):not(.menu-active, :active, .btn):hover, li:not(.menu-title, .disabled) > details > summary:not(.menu-title):not(.menu-active, :active, .btn):hover ) {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+    }
+
+  .menu :where(li:empty) {
+      background-color: var(--color-base-content);
+      opacity: 10%;
+      margin: 0.5rem 1rem;
+      height: 1px;
+    }
+
+  .menu :where(li) {
+      position: relative;
+      display: flex;
+      flex-shrink: 0;
+      flex-direction: column;
+      flex-wrap: wrap;
+      align-items: stretch;
+    }
+
+  .menu :where(li) .badge {
+      justify-self: flex-end;
+    }
+
+  .menu :where(li) > *:not(ul, .menu-title, details, .btn):active,
+    .menu :where(li) > *:not(ul, .menu-title, details, .btn).menu-active,
+    .menu :where(li) > details > summary:active {
+      --tw-outline-style: none;
+      outline-style: none;
+      color: var(--menu-active-fg);
+      background-color: var(--menu-active-bg);
+      background-size: auto, calc(var(--noise) * 100%);
+      background-image: none, var(--fx-noise);
+    }
+
+  @media (forced-colors: active) {
+    .menu :where(li) > *:not(ul, .menu-title, details, .btn):active,
+    .menu :where(li) > *:not(ul, .menu-title, details, .btn).menu-active,
+    .menu :where(li) > details > summary:active {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+    }
+
+  .menu :where(li) > *:not(ul, .menu-title, details, .btn):active:not(.menu :where(li) > *:not(ul, .menu-title, details, .btn):active:active),
+    .menu :where(li) > *:not(ul, .menu-title, details, .btn).menu-active:not(.menu :where(li) > *:not(ul, .menu-title, details, .btn).menu-active:active),
+    .menu :where(li) > details > summary:active:not(.menu :where(li) > details > summary:active:active) {
+      box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--menu-active-bg);
+    }
+
+  .menu :where(li).menu-disabled {
+      pointer-events: none;
+      color: var(--color-base-content);
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .menu :where(li).menu-disabled {
+      color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
+    }
+    }
+
+  .menu .dropdown:focus-within .menu-dropdown-toggle:after {
+      rotate: 45deg;
+      translate: 0 1px;
+    }
+
+  .menu .dropdown-content {
+      margin-top: calc(0.25rem * 2);
+      padding: calc(0.25rem * 2);
+    }
+
+  .menu .dropdown-content:before {
+      display: none;
+    }
+
+  .menu-horizontal {
+      display: inline-flex;
+      flex-direction: row;
+    }
+
+  .menu-horizontal > li:not(.menu-title) > details > ul {
+      position: absolute;
+      margin-inline-start: calc(0.25rem * 0);
+      margin-top: calc(0.25rem * 4);
+      transform-origin: top;
+      border-radius: var(--radius-box);
+      background-color: var(--color-base-100);
+      padding-block: calc(0.25rem * 2);
+      padding-inline-end: calc(0.25rem * 2);
+      opacity: 0%;
+      scale: 95%;
+      box-shadow: 0 1px 3px 0 oklch(0% 0 0/0.1), 0 1px 2px -1px oklch(0% 0 0/0.1);
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    @starting-style {
+    .menu-horizontal > li:not(.menu-title) > details > ul {
+      scale: 95%;
+      opacity: 0;
+    }
+    }
+    }
+
+  .menu-horizontal > li:not(.menu-title) > details[open] > ul {
+      opacity: 100%;
+      scale: 100%;
+    }
+
+  .menu-horizontal > li > details > ul:before {
+      --tw-content: none;
+      content: var(--tw-content);
+    }
+
+  .menu-vertical {
+      display: inline-flex;
+      flex-direction: column;
+    }
+
+  .menu-vertical > li:not(.menu-title) > details > ul {
+      position: relative;
+      margin-inline-start: calc(0.25rem * 4);
+      margin-top: calc(0.25rem * 0);
+      padding-block: calc(0.25rem * 0);
+      padding-inline-end: calc(0.25rem * 0);
+      background-color: revert-layer;
+      border-radius: revert-layer;
+      animation: revert-layer;
+      transition: revert-layer;
+      box-shadow: revert-layer;
+    }
+
+  .menu-lg :where(li:not(.menu-title) > *:not(ul, details, .menu-title)),
+    .menu-lg :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
+      border-radius: var(--radius-field);
+      padding-inline: calc(0.25rem * 4);
+      padding-block: calc(0.25rem * 1.5);
+      font-size: 1.125rem;
+    }
+
+  .menu-lg .menu-title {
+      padding-inline: calc(0.25rem * 6);
+      padding-block: calc(0.25rem * 3);
+    }
+
+  .menu-md :where(li:not(.menu-title) > *:not(ul, details, .menu-title)),
+    .menu-md :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
+      border-radius: var(--radius-field);
+      padding-inline: calc(0.25rem * 3);
+      padding-block: calc(0.25rem * 1.5);
+      font-size: 0.875rem;
+    }
+
+  .menu-md .menu-title {
+      padding-inline: calc(0.25rem * 3);
+      padding-block: calc(0.25rem * 2);
+    }
+
+  .menu-sm :where(li:not(.menu-title) > *:not(ul, details, .menu-title)),
+    .menu-sm :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
+      border-radius: var(--radius-field);
+      padding-inline: calc(0.25rem * 2.5);
+      padding-block: calc(0.25rem * 1);
+      font-size: 0.75rem;
+    }
+
+  .menu-sm .menu-title {
+      padding-inline: calc(0.25rem * 3);
+      padding-block: calc(0.25rem * 2);
+    }
+
+  .menu-xl :where(li:not(.menu-title) > *:not(ul, details, .menu-title)),
+    .menu-xl :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
+      border-radius: var(--radius-field);
+      padding-inline: calc(0.25rem * 5);
+      padding-block: calc(0.25rem * 1.5);
+      font-size: 1.375rem;
+    }
+
+  .menu-xl .menu-title {
+      padding-inline: calc(0.25rem * 6);
+      padding-block: calc(0.25rem * 3);
+    }
+
+  .menu-xs :where(li:not(.menu-title) > *:not(ul, details, .menu-title)),
+    .menu-xs :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
+      border-radius: var(--radius-field);
+      padding-inline: calc(0.25rem * 2);
+      padding-block: calc(0.25rem * 1);
+      font-size: 0.6875rem;
+    }
+
+  .menu-xs .menu-title {
+      padding-inline: calc(0.25rem * 2);
+      padding-block: calc(0.25rem * 1);
+    }
+
+  .menu-title {
+      padding-inline: calc(0.25rem * 3);
+      padding-block: calc(0.25rem * 2);
+      color: var(--color-base-content);
+      font-size: 0.875rem;
+      font-weight: 600;
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .menu-title {
+      color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
+    }
+    }
+}

package/dist/components/modal/Modal.d.ts

@@ -1,3 +1,4 @@
+import "./modal.css";
 import { type JSX } from "solid-js";
 import type { IComponentBaseProps, ComponentSize } from "../types";
 import ModalActions from "./ModalActions";

package/dist/components/modal/Modal.js

@@ -0,0 +1,125 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./modal.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__ModalActions_js_be09c8ad__ from "./ModalActions.js";
+import * as __WEBPACK_EXTERNAL_MODULE__ModalBody_js_8b9d3ad6__ from "./ModalBody.js";
+import * as __WEBPACK_EXTERNAL_MODULE__ModalHeader_js_d57ffdf5__ from "./ModalHeader.js";
+import * as __WEBPACK_EXTERNAL_MODULE__ModalLegacy_js_990bc965__ from "./ModalLegacy.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<dialog><div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<form method=dialog class=modal-backdrop data-modal-backdrop=true><button type=submit class=sr-only>Close");
+const MODAL_BACKDROP_SELECTOR = "[data-modal-backdrop='true']";
+function Modal(props) {
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "open",
+        "position",
+        "responsive",
+        "backdrop",
+        "ariaHidden",
+        "dataTheme",
+        "class",
+        "className",
+        "onClose",
+        "tabindex",
+        "tabIndex",
+        "closeOnEsc",
+        "closeOnOutsideClick",
+        "size"
+    ]);
+    const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
+    let dialogRef;
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        if (!dialogRef) return;
+        if (local.open && !dialogRef.open) dialogRef.showModal();
+        else if (!local.open && dialogRef.open) dialogRef.close();
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        if (!dialogRef) return;
+        const handleClose = ()=>{
+            local.onClose?.();
+        };
+        const handleCancel = (event)=>{
+            if (false === local.closeOnEsc) event.preventDefault();
+            else local.onClose?.();
+        };
+        const handleClick = (event)=>{
+            if (false === local.closeOnOutsideClick) return;
+            const target = event.target;
+            if (!dialogRef) return;
+            if (target === dialogRef || target.closest(MODAL_BACKDROP_SELECTOR)) local.onClose?.();
+        };
+        dialogRef.addEventListener("close", handleClose);
+        dialogRef.addEventListener("cancel", handleCancel);
+        dialogRef.addEventListener("click", handleClick);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+            dialogRef?.removeEventListener("close", handleClose);
+            dialogRef?.removeEventListener("cancel", handleCancel);
+            dialogRef?.removeEventListener("click", handleClick);
+        });
+    });
+    const containerClasses = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("modal", (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])({
+            "modal-open": local.open,
+            "modal-end": "end" === local.position,
+            "modal-start": "start" === local.position,
+            "modal-top": "top" === local.position,
+            "modal-middle": "middle" === local.position,
+            "modal-bottom": "bottom" === local.position,
+            "modal-bottom modal-responsive-middle": local.responsive
+        })));
+    const bodyClasses = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("modal-box", local.class, local.className, (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])({
+            "max-w-none w-11/12 max-w-7xl": "xl" === local.size,
+            "max-w-none w-11/12 max-w-4xl": "lg" === local.size,
+            "max-w-none w-11/12 max-w-2xl": "md" === local.size,
+            "max-w-none w-80": "sm" === local.size,
+            "max-w-none w-64": "xs" === local.size,
+            "max-w-none w-full h-full": "full" === local.size
+        })));
+    return (()=>{
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((el)=>{
+            dialogRef = el;
+            if ("function" == typeof others.ref) others.ref(el);
+        }, _el$);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            "aria-label": "Modal",
+            get ["aria-hidden"] () {
+                return local.ariaHidden ?? !local.open;
+            },
+            get ["aria-modal"] () {
+                return local.open;
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get ["class"] () {
+                return containerClasses();
+            },
+            get tabIndex () {
+                return local.tabIndex ?? local.tabindex;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, resolvedChildren);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (()=>{
+            var _c$ = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.backdrop);
+            return ()=>_c$() && _tmpl$2();
+        })(), null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$ = local.dataTheme, _v$2 = bodyClasses();
+            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "data-theme", _p$.e = _v$);
+            _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, _p$.t = _v$2);
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0
+        });
+        return _el$;
+    })();
+}
+const modal_Modal = Object.assign(Modal, {
+    Header: __WEBPACK_EXTERNAL_MODULE__ModalHeader_js_d57ffdf5__["default"],
+    Body: __WEBPACK_EXTERNAL_MODULE__ModalBody_js_8b9d3ad6__["default"],
+    Actions: __WEBPACK_EXTERNAL_MODULE__ModalActions_js_be09c8ad__["default"],
+    Legacy: __WEBPACK_EXTERNAL_MODULE__ModalLegacy_js_990bc965__["default"]
+});
+export { Modal, modal_Modal as default };

package/dist/components/modal/ModalActions.js

@@ -0,0 +1,14 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+function ModalActions(props) {
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(props, {
+            get ["class"] () {
+                return props.class;
+            }
+        }), false, false);
+        return _el$;
+    })();
+}
+export { ModalActions as default };

package/dist/components/modal/ModalBody.js

@@ -0,0 +1,14 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+function ModalBody(props) {
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(props, {
+            get ["class"] () {
+                return props.class;
+            }
+        }), false, false);
+        return _el$;
+    })();
+}
+export { ModalBody as default };

package/dist/components/modal/ModalHeader.js

@@ -0,0 +1,15 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+function ModalHeader(props) {
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(props, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("w-full mb-8 text-xl", props.class);
+            }
+        }), false, false);
+        return _el$;
+    })();
+}
+export { ModalHeader as default };

package/dist/components/modal/ModalLegacy.js

@@ -0,0 +1,36 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div aria-label=Modal><div>");
+function ModalLegacy(props) {
+    const { children, open, responsive, onClickBackdrop, dataTheme, class: classProp, className, ...rest } = props;
+    const containerClasses = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("modal", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+        "modal-open": open,
+        "modal-bottom modal-responsive-middle": responsive
+    }));
+    const bodyClasses = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("modal-box", classProp, className);
+    return (()=>{
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+        _el$.$$click = (e)=>{
+            e.stopPropagation();
+            if (e.target === e.currentTarget) {
+                e.stopPropagation();
+                onClickBackdrop?.();
+            }
+        };
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-hidden", !open);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-modal", open);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "data-theme", dataTheme);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, containerClasses);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(rest, {
+            "data-theme": dataTheme,
+            class: bodyClasses
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, children);
+        return _el$;
+    })();
+}
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "click"
+]);
+export { ModalLegacy as default };

package/dist/components/modal/index.js

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