@pathscale/ui 1.1.55 → 1.1.56

package/dist/components/loading/index.js

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

package/dist/components/mask/Mask.d.ts

@@ -0,0 +1,15 @@
+import "./mask.css";
+import { type JSX, type Component } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type MaskProps = JSX.ImgHTMLAttributes<HTMLImageElement> & IComponentBaseProps & {
+    variant?: "squircle" | "heart" | "hexagon" | "hexagon-2" | "decagon" | "pentagon" | "diamond" | "square" | "circle" | "star" | "star-2" | "triangle" | "triangle-2" | "triangle-3" | "triangle-4" | "half-1" | "half-2";
+    class?: string;
+    className?: string;
+    style?: JSX.CSSProperties;
+};
+export declare function maskClassName({ className, variant, }?: Pick<MaskProps, "className" | "variant">): string;
+type MaskComponent = Component<MaskProps> & {
+    className: typeof maskClassName;
+};
+declare const Mask: MaskComponent;
+export default Mask;

package/dist/components/mask/Mask.js

@@ -0,0 +1,62 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./mask.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";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<img>");
+function maskClassName({ className, variant } = {}) {
+    return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("mask", className, (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+        "mask-squircle": "squircle" === variant,
+        "mask-heart": "heart" === variant,
+        "mask-hexagon": "hexagon" === variant,
+        "mask-hexagon-2": "hexagon-2" === variant,
+        "mask-decagon": "decagon" === variant,
+        "mask-pentagon": "pentagon" === variant,
+        "mask-diamond": "diamond" === variant,
+        "mask-square": "square" === variant,
+        "mask-circle": "circle" === variant,
+        "mask-star": "star" === variant,
+        "mask-star-2": "star-2" === variant,
+        "mask-triangle": "triangle" === variant,
+        "mask-triangle-2": "triangle-2" === variant,
+        "mask-triangle-3": "triangle-3" === variant,
+        "mask-triangle-4": "triangle-4" === variant,
+        "mask-half-1": "half-1" === variant,
+        "mask-half-2": "half-2" === variant
+    }));
+}
+const Mask_Mask = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "src",
+        "variant",
+        "dataTheme",
+        "class",
+        "className",
+        "style"
+    ]);
+    const classes = ()=>maskClassName({
+            className: local.class ?? local.className,
+            variant: local.variant
+        });
+    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 src () {
+                return local.src;
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get ["class"] () {
+                return classes();
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, false);
+        return _el$;
+    })();
+};
+Mask_Mask.className = maskClassName;
+const Mask = Mask_Mask;
+export { Mask as default, maskClassName };

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

@@ -0,0 +1,3 @@
+import Mask from "./Mask";
+export type { MaskProps } from "./Mask";
+export default Mask;

package/dist/components/mask/index.js

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

package/dist/components/mask/mask.css

@@ -0,0 +1,89 @@
+@layer components {
+  .mask {
+      display: inline-block;
+      vertical-align: middle;
+      mask-size: contain;
+      mask-repeat: no-repeat;
+      mask-position: center;
+    }
+
+  .mask-circle {
+      mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle fill='black' cx='100' cy='100' r='100' fill-rule='evenodd'/%3e%3c/svg%3e");
+    }
+
+  .mask-decagon {
+      mask-image: url("data:image/svg+xml,%3csvg width='192' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 0 58.779 19.098 36.327 50v61.804l-36.327 50L96 200l-58.779-19.098-36.327-50V69.098l36.327-50z' fill-rule='evenodd'/%3e%3c/svg%3e");
+    }
+
+  .mask-diamond {
+      mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m100 0 100 100-100 100L0 100z' fill-rule='evenodd'/%3e%3c/svg%3e");
+    }
+
+  .mask-heart {
+      mask-image: url("data:image/svg+xml,%3csvg width='200' height='185' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 184.606a15.384 15.384 0 0 1-8.653-2.678C53.565 156.28 37.205 138.695 28.182 127.7 8.952 104.264-.254 80.202.005 54.146.308 24.287 24.264 0 53.406 0c21.192 0 35.869 11.937 44.416 21.879a2.884 2.884 0 0 0 4.356 0C110.725 11.927 125.402 0 146.594 0c29.142 0 53.098 24.287 53.4 54.151.26 26.061-8.956 50.122-28.176 73.554-9.023 10.994-25.383 28.58-63.165 54.228a15.384 15.384 0 0 1-8.653 2.673Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e");
+    }
+
+  .mask-hexagon {
+      mask-image: url("data:image/svg+xml,%3csvg width='182' height='201' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M.3 65.486c0-9.196 6.687-20.063 14.211-25.078l61.86-35.946c8.36-5.016 20.899-5.016 29.258 0l61.86 35.946c8.36 5.015 14.211 15.882 14.211 25.078v71.055c0 9.196-6.687 20.063-14.211 25.079l-61.86 35.945c-8.36 4.18-20.899 4.18-29.258 0L14.51 161.62C6.151 157.44.3 145.737.3 136.54V65.486Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e");
+    }
+
+  .mask-hexagon-2 {
+      mask-image: url("data:image/svg+xml,%3csvg width='200' height='182' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M64.786 181.4c-9.196 0-20.063-6.687-25.079-14.21L3.762 105.33c-5.016-8.36-5.016-20.9 0-29.259l35.945-61.86C44.723 5.851 55.59 0 64.786 0h71.055c9.196 0 20.063 6.688 25.079 14.211l35.945 61.86c4.18 8.36 4.18 20.899 0 29.258l-35.945 61.86c-4.18 8.36-15.883 14.211-25.079 14.211H64.786Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e");
+    }
+
+  .mask-pentagon {
+      mask-image: url("data:image/svg+xml,%3csvg width='192' height='181' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 0 95.106 69.098-36.327 111.804H37.22L.894 69.098z' fill-rule='evenodd'/%3e%3c/svg%3e");
+    }
+
+  .mask-squircle {
+      mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 0C20 0 0 20 0 100s20 100 100 100 100-20 100-100S180 0 100 0Z'/%3e%3c/svg%3e");
+    }
+
+  .mask-star {
+      mask-image: url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z' fill-rule='evenodd'/%3e%3c/svg%3e");
+    }
+
+  .mask-star-2 {
+      mask-image: url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 153.044-58.779 26.243 7.02-63.513L.894 68.481l63.117-13.01L96 0l31.989 55.472 63.117 13.01-43.347 47.292 7.02 63.513z' fill-rule='evenodd'/%3e%3c/svg%3e");
+    }
+
+  .mask-triangle {
+      mask-image: url("data:image/svg+xml,%3csvg width='174' height='149' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m87 148.476-86.603.185L43.86 74.423 87 0l43.14 74.423 43.463 74.238z' fill-rule='evenodd'/%3e%3c/svg%3e");
+    }
+
+  .mask-triangle-2 {
+      mask-image: url("data:image/svg+xml,%3csvg width='174' height='150' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m87 .738 86.603-.184-43.463 74.238L87 149.214 43.86 74.792.397.554z' fill-rule='evenodd'/%3e%3c/svg%3e");
+    }
+
+  .mask-triangle-3 {
+      mask-image: url("data:image/svg+xml,%3csvg width='150' height='174' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m149.369 87.107.185 86.603-74.239-43.463L.893 87.107l74.422-43.14L149.554.505z' fill-rule='evenodd'/%3e%3c/svg%3e");
+    }
+
+  .mask-triangle-4 {
+      mask-image: url("data:image/svg+xml,%3csvg width='150' height='174' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M.631 87.107.446.505l74.239 43.462 74.422 43.14-74.422 43.14L.446 173.71z' fill-rule='evenodd'/%3e%3c/svg%3e");
+    }
+
+  .mask-circle {
+      --tw-mask-radial-shape: circle;
+    }
+
+  .mask-half-1 {
+      mask-size: 200%;
+      mask-position: left;
+      mask-position: left;
+    }
+
+  .mask-half-1:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+      mask-position: right;
+    }
+
+  .mask-half-2 {
+      mask-size: 200%;
+      mask-position: right;
+      mask-position: right;
+    }
+
+  .mask-half-2:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+      mask-position: left;
+    }
+}

package/dist/components/menu/Menu.d.ts

@@ -1,34 +1,22 @@
-import "./Menu.css";
-import { type Component, type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-import { type MenuSelectionMode } from "./context";
-import MenuItem, { MenuItemIndicator, MenuItemRoot } from "./MenuItem";
-import MenuSection, { MenuSectionRoot } from "./MenuSection";
-export type MenuRootProps<T = unknown> = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & IComponentBaseProps & {
-    children?: JSX.Element | ((item: T) => JSX.Element);
-    items?: readonly T[];
-    renderEmptyState?: () => JSX.Element;
-    selectionMode?: MenuSelectionMode;
-    selectedKeys?: Iterable<string | number>;
-    defaultSelectedKeys?: Iterable<string | number>;
-    disabledKeys?: Iterable<string | number>;
-    disallowEmptySelection?: boolean;
-    onSelectionChange?: (keys: Set<string>) => void;
-    onAction?: (key: string) => void;
-    isDisabled?: boolean;
-    disabled?: boolean;
+import "./menu.css";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps, ComponentSize } from "../types";
+import type { MenuTitleProps } from "./MenuTitle";
+import type { MenuItemProps } from "./MenuItem";
+import type { MenuDropdownProps } from "./MenuDropdown";
+import type { MenuDetailsProps } from "./MenuDetails";
+export type { MenuTitleProps, MenuItemProps, MenuDropdownProps, MenuDetailsProps, };
+export type MenuProps = JSX.HTMLAttributes<HTMLUListElement> & IComponentBaseProps & {
+    vertical?: boolean;
+    horizontal?: boolean;
+    responsive?: boolean;
+    size?: ComponentSize;
 };
-declare const MenuRoot: Component<MenuRootProps>;
-declare const Menu: Component<MenuRootProps<unknown>> & {
-    Root: Component<MenuRootProps<unknown>>;
-    Item: import("solid-js").ParentComponent<import("./MenuItem").MenuItemRootProps> & {
-        Root: import("solid-js").ParentComponent<import("./MenuItem").MenuItemRootProps>;
-        Indicator: Component<import("./MenuItem").MenuItemIndicatorProps>;
-        SubmenuIndicator: Component<import("./MenuItem").MenuItemSubmenuIndicatorProps>;
-    };
-    ItemIndicator: Component<import("./MenuItem").MenuItemIndicatorProps>;
-    Section: Component<import("./MenuSection").MenuSectionRootProps>;
+declare const _default: ((props: MenuProps) => JSX.Element) & {
+    Title: import("solid-js").Component<MenuTitleProps>;
+    Item: import("solid-js").Component<MenuItemProps>;
+    Dropdown: import("solid-js").Component<MenuDropdownProps>;
+    Details: import("solid-js").Component<MenuDetailsProps>;
+    Menu: (props: MenuProps) => JSX.Element;
 };
-export default Menu;
-export { Menu, MenuRoot, MenuItem, MenuItemRoot, MenuItemIndicator, MenuSection, MenuSectionRoot };
-export type { MenuRootProps as MenuProps, MenuSelectionMode };
+export default _default;

package/dist/components/menu/Menu.js

@@ -1,226 +1,51 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
-import "./Menu.css";
+import "./menu.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__Menu_classes_js_2247f1e5__ from "./Menu.classes.js";
-import * as __WEBPACK_EXTERNAL_MODULE__context_js_80e2871f__ from "./context.js";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE__MenuTitle_js_3c427b91__ from "./MenuTitle.js";
 import * as __WEBPACK_EXTERNAL_MODULE__MenuItem_js_0945051f__ from "./MenuItem.js";
-import * as __WEBPACK_EXTERNAL_MODULE__MenuSection_js_5f9fc1a1__ from "./MenuSection.js";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
-const normalizeKeys = (keys)=>{
-    if (!keys) return new Set();
-    return new Set(Array.from(keys, (key)=>String(key)));
-};
-const sortItemsByDomOrder = (items)=>[
-        ...items
-    ].sort((a, b)=>{
-        if (a.ref === b.ref) return 0;
-        const relation = a.ref.compareDocumentPosition(b.ref);
-        if (relation & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
-        if (relation & Node.DOCUMENT_POSITION_PRECEDING) return 1;
-        return 0;
-    });
-const invokeEventHandler = (handler, event)=>{
-    if ("function" == typeof handler) return void handler(event);
-    if (Array.isArray(handler) && "function" == typeof handler[0]) handler[0](handler[1], event);
-};
-const MenuRoot = (props)=>{
+import * as __WEBPACK_EXTERNAL_MODULE__MenuDropdown_js_63ede5ac__ from "./MenuDropdown.js";
+import * as __WEBPACK_EXTERNAL_MODULE__MenuDetails_js_c50ded87__ from "./MenuDetails.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<ul role=menu>");
+const Menu = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
-        "children",
+        "responsive",
+        "horizontal",
+        "vertical",
+        "size",
         "class",
         "className",
-        "dataTheme",
-        "style",
-        "items",
-        "renderEmptyState",
-        "selectionMode",
-        "selectedKeys",
-        "defaultSelectedKeys",
-        "disabledKeys",
-        "disallowEmptySelection",
-        "onSelectionChange",
-        "onAction",
-        "isDisabled",
-        "disabled",
-        "role",
-        "onKeyDown"
+        "dataTheme"
     ]);
-    const [internalSelectedKeys, setInternalSelectedKeys] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(normalizeKeys(local.defaultSelectedKeys));
-    const [focusedKey, setFocusedKey] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)();
-    const [registeredItems, setRegisteredItems] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)([]);
-    const selectionMode = ()=>local.selectionMode ?? "none";
-    const isControlled = ()=>void 0 !== local.selectedKeys;
-    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled);
-    const selectedKeys = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>isControlled() ? normalizeKeys(local.selectedKeys) : internalSelectedKeys());
-    const disabledKeys = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>normalizeKeys(local.disabledKeys));
-    const getEnabledItems = ()=>registeredItems().filter((item)=>!item.disabled && !disabledKeys().has(item.key) && !isDisabled());
-    const focusItem = (item)=>{
-        if (!item) return;
-        setFocusedKey(item.key);
-        item.ref.focus();
-    };
-    const focusBoundary = (target)=>{
-        const enabledItems = getEnabledItems();
-        if (!enabledItems.length) return;
-        if ("selected" === target) {
-            const selectedItem = enabledItems.find((item)=>selectedKeys().has(item.key));
-            focusItem(selectedItem ?? enabledItems[0]);
-            return;
-        }
-        focusItem("first" === target ? enabledItems[0] : enabledItems[enabledItems.length - 1]);
-    };
-    const focusNext = (direction)=>{
-        const enabledItems = getEnabledItems();
-        if (!enabledItems.length) return;
-        const activeElement = document.activeElement;
-        let currentIndex = enabledItems.findIndex((item)=>item.ref === activeElement);
-        if (currentIndex < 0 && focusedKey()) currentIndex = enabledItems.findIndex((item)=>item.key === focusedKey());
-        if (currentIndex < 0) return void focusBoundary(1 === direction ? "first" : "last");
-        const nextIndex = (currentIndex + direction + enabledItems.length) % enabledItems.length;
-        focusItem(enabledItems[nextIndex]);
-    };
-    const updateSelection = (nextKeys)=>{
-        if (!isControlled()) setInternalSelectedKeys(nextKeys);
-        local.onSelectionChange?.(nextKeys);
-    };
-    const activateKey = (key, event)=>{
-        if (event.defaultPrevented || isDisabled()) return;
-        if (disabledKeys().has(key)) return;
-        if ("none" === selectionMode()) return void local.onAction?.(key);
-        const current = selectedKeys();
-        if ("single" === selectionMode()) {
-            if (!(1 === current.size && current.has(key))) updateSelection(new Set([
-                key
-            ]));
-            local.onAction?.(key);
-            return;
-        }
-        const next = new Set(current);
-        if (next.has(key)) {
-            if (local.disallowEmptySelection && 1 === next.size) return void local.onAction?.(key);
-            next.delete(key);
-        } else next.add(key);
-        updateSelection(next);
-        local.onAction?.(key);
-    };
-    const registerItem = (item)=>{
-        setRegisteredItems((current)=>sortItemsByDomOrder([
-                ...current.filter((entry)=>entry.key !== item.key),
-                item
-            ]));
-    };
-    const unregisterItem = (key)=>{
-        setRegisteredItems((current)=>current.filter((item)=>item.key !== key));
-        if (focusedKey() === key) setFocusedKey(void 0);
-    };
-    const isItemDisabled = (key, localDisabled)=>Boolean(localDisabled) || disabledKeys().has(key) || isDisabled();
-    const getItemTabIndex = (key, localDisabled)=>{
-        if (isItemDisabled(key, localDisabled)) return -1;
-        if (focusedKey() === key) return 0;
-        if (!focusedKey()) {
-            const enabledItems = getEnabledItems();
-            if (!enabledItems.length) return -1;
-            return enabledItems[0]?.key === key ? 0 : -1;
-        }
-        return -1;
-    };
-    const handleKeyDown = (event)=>{
-        invokeEventHandler(local.onKeyDown, event);
-        if (event.defaultPrevented) return;
-        if (event.target !== event.currentTarget) return;
-        if ("ArrowDown" === event.key || "ArrowRight" === event.key) {
-            event.preventDefault();
-            focusNext(1);
-        }
-        if ("ArrowUp" === event.key || "ArrowLeft" === event.key) {
-            event.preventDefault();
-            focusNext(-1);
-        }
-        if ("Home" === event.key) {
-            event.preventDefault();
-            focusBoundary("first");
-        }
-        if ("End" === event.key) {
-            event.preventDefault();
-            focusBoundary("last");
-        }
-    };
-    const renderChildren = ()=>{
-        const isItemRenderer = "function" == typeof local.children && local.children.length > 0;
-        const resolvedStaticChildren = "function" == typeof local.children ? isItemRenderer ? null : local.children() : local.children ?? null;
-        if (local.items) {
-            if (0 === local.items.length) return local.renderEmptyState?.() ?? null;
-            if (isItemRenderer) {
-                const renderItem = local.children;
-                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
-                    get each () {
-                        return local.items;
-                    },
-                    children: (item)=>renderItem(item)
-                });
+    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("menu", local.class, local.className, (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+            "menu-responsive": local.responsive,
+            "menu-xl": "xl" === local.size,
+            "menu-lg": "lg" === local.size,
+            "menu-md": "md" === local.size,
+            "menu-sm": "sm" === local.size,
+            "menu-xs": "xs" === local.size,
+            "menu-vertical": local.vertical,
+            "menu-horizontal": local.horizontal
+        }));
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get ["class"] () {
+                return classes();
             }
-        }
-        return resolvedStaticChildren;
-    };
-    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__context_js_80e2871f__.MenuContext.Provider, {
-        value: {
-            selectionMode,
-            selectedKeys,
-            disabledKeys,
-            isDisabled,
-            focusedKey,
-            isSelected: (key)=>selectedKeys().has(key),
-            isItemDisabled,
-            getItemTabIndex,
-            registerItem,
-            unregisterItem,
-            activateKey,
-            setFocusedKey,
-            focusNext,
-            focusBoundary
-        },
-        get children () {
-            var _el$ = _tmpl$();
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-                get role () {
-                    return local.role ?? "menu";
-                },
-                get ["aria-disabled"] () {
-                    return isDisabled() ? "true" : void 0;
-                },
-                "data-slot": "menu",
-                get ["data-theme"] () {
-                    return local.dataTheme;
-                },
-                get ["data-selection-mode"] () {
-                    return selectionMode();
-                },
-                get ["data-disabled"] () {
-                    return isDisabled() ? "true" : "false";
-                }
-            }, ()=>({
-                    class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Menu_classes_js_2247f1e5__.CLASSES.Root.base, local.class, local.className)
-                }), {
-                get style () {
-                    return local.style;
-                },
-                onKeyDown: handleKeyDown
-            }), false, true);
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, renderChildren);
-            return _el$;
-        }
-    });
+        }, others), false, false);
+        return _el$;
+    })();
 };
-const Menu = Object.assign(MenuRoot, {
-    Root: MenuRoot,
+const menu_Menu = Object.assign(Menu, {
+    Title: __WEBPACK_EXTERNAL_MODULE__MenuTitle_js_3c427b91__["default"],
     Item: __WEBPACK_EXTERNAL_MODULE__MenuItem_js_0945051f__["default"],
-    ItemIndicator: __WEBPACK_EXTERNAL_MODULE__MenuItem_js_0945051f__.MenuItemIndicator,
-    Section: __WEBPACK_EXTERNAL_MODULE__MenuSection_js_5f9fc1a1__["default"]
+    Dropdown: __WEBPACK_EXTERNAL_MODULE__MenuDropdown_js_63ede5ac__["default"],
+    Details: __WEBPACK_EXTERNAL_MODULE__MenuDetails_js_c50ded87__["default"],
+    Menu: Menu
 });
-const menu_Menu = Menu;
-var __webpack_exports__MenuItem = __WEBPACK_EXTERNAL_MODULE__MenuItem_js_0945051f__["default"];
-var __webpack_exports__MenuItemIndicator = __WEBPACK_EXTERNAL_MODULE__MenuItem_js_0945051f__.MenuItemIndicator;
-var __webpack_exports__MenuItemRoot = __WEBPACK_EXTERNAL_MODULE__MenuItem_js_0945051f__.MenuItemRoot;
-var __webpack_exports__MenuSection = __WEBPACK_EXTERNAL_MODULE__MenuSection_js_5f9fc1a1__["default"];
-var __webpack_exports__MenuSectionRoot = __WEBPACK_EXTERNAL_MODULE__MenuSection_js_5f9fc1a1__.MenuSectionRoot;
-export { Menu, MenuRoot, menu_Menu as default, __webpack_exports__MenuItem as MenuItem, __webpack_exports__MenuItemIndicator as MenuItemIndicator, __webpack_exports__MenuItemRoot as MenuItemRoot, __webpack_exports__MenuSection as MenuSection, __webpack_exports__MenuSectionRoot as MenuSectionRoot };
+export { menu_Menu as default };

package/dist/components/menu/MenuDetails.d.ts

@@ -0,0 +1,8 @@
+import { type JSX, type Component } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type MenuDetailsProps = JSX.DetailsHtmlAttributes<HTMLDetailsElement> & IComponentBaseProps & {
+    label: JSX.Element;
+    open?: boolean;
+};
+declare const MenuDetails: Component<MenuDetailsProps>;
+export default MenuDetails;

package/dist/components/menu/MenuDetails.js

@@ -0,0 +1,37 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<details><summary></summary><ul>");
+const MenuDetails = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "label",
+        "open",
+        "class",
+        "className",
+        "style",
+        "children",
+        "dataTheme"
+    ]);
+    const classAttr = ()=>local.class ?? local.className;
+    return (()=>{
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get open () {
+                return local.open;
+            },
+            get ["class"] () {
+                return classAttr();
+            },
+            get style () {
+                return local.style;
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.label);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.children);
+        return _el$;
+    })();
+};
+const menu_MenuDetails = MenuDetails;
+export { menu_MenuDetails as default };

package/dist/components/menu/MenuDropdown.d.ts

@@ -0,0 +1,12 @@
+import { type JSX, type Component } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type MenuDropdownProps = JSX.HTMLAttributes<HTMLSpanElement> & IComponentBaseProps & {
+    label: JSX.Element;
+    open?: boolean;
+    class?: string;
+    className?: string;
+    style?: JSX.CSSProperties;
+    children?: JSX.Element;
+};
+declare const MenuDropdown: Component<MenuDropdownProps>;
+export default MenuDropdown;

package/dist/components/menu/MenuDropdown.js

@@ -0,0 +1,48 @@
+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";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<ul>");
+const MenuDropdown_MenuDropdown = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "label",
+        "open",
+        "class",
+        "className",
+        "style",
+        "children",
+        "dataTheme"
+    ]);
+    const spanClasses = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("menu-dropdown-toggle", local.class, local.className, (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+            "menu-dropdown-show": local.open
+        })));
+    const ulClasses = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)("menu-dropdown", {
+            "menu-dropdown-show": local.open
+        }));
+    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 ["class"] () {
+                    return spanClasses();
+                },
+                get style () {
+                    return local.style;
+                },
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                }
+            }), false, true);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.label);
+            return _el$;
+        })(),
+        (()=>{
+            var _el$2 = _tmpl$2();
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.children);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, ulClasses()));
+            return _el$2;
+        })()
+    ];
+};
+const MenuDropdown = MenuDropdown_MenuDropdown;
+export { MenuDropdown as default };