@moduix/solid 1.0.0

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

@@ -0,0 +1,74 @@
+import type { HTMLArkProps } from '@ark-ui/solid/factory';
+import { Menu as MenuPrimitive, useMenu, useMenuContext, useMenuItemContext } from '@ark-ui/solid/menu';
+import type { ComponentProps } from 'solid-js';
+import { type OverlayPortalProps } from '../../internal/overlayPortal.js';
+type MenuIndicatorPosition = 'start' | 'end' | 'none';
+type MenuItemTone = 'default' | 'destructive';
+type MenuItemProps = ComponentProps<typeof MenuPrimitive.Item> & {
+    tone?: MenuItemTone;
+};
+type MenuCheckboxItemProps = ComponentProps<typeof MenuPrimitive.CheckboxItem> & {
+    indicator?: MenuIndicatorPosition;
+};
+type MenuRadioItemProps = ComponentProps<typeof MenuPrimitive.RadioItem> & {
+    indicator?: MenuIndicatorPosition;
+};
+type MenuRootProps = ComponentProps<typeof MenuPrimitive.Root> & OverlayPortalProps;
+type MenuRootProviderProps = ComponentProps<typeof MenuPrimitive.RootProvider> & OverlayPortalProps;
+declare function MenuRoot(props: MenuRootProps): import("solid-js").JSX.Element;
+declare function MenuRootProvider(props: MenuRootProviderProps): import("solid-js").JSX.Element;
+declare function MenuTrigger(props: ComponentProps<typeof MenuPrimitive.Trigger>): import("solid-js").JSX.Element;
+declare function MenuTriggerIcon(props: ComponentProps<'span'>): import("solid-js").JSX.Element;
+declare function MenuIndicator(props: ComponentProps<typeof MenuPrimitive.Indicator>): import("solid-js").JSX.Element;
+declare function MenuContextTrigger(props: ComponentProps<typeof MenuPrimitive.ContextTrigger>): import("solid-js").JSX.Element;
+declare function MenuPositioner(props: ComponentProps<typeof MenuPrimitive.Positioner>): import("solid-js").JSX.Element;
+declare function MenuContent(props: ComponentProps<typeof MenuPrimitive.Content>): import("solid-js").JSX.Element;
+declare function MenuViewport(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare function MenuArrow(props: ComponentProps<typeof MenuPrimitive.Arrow>): import("solid-js").JSX.Element;
+declare function MenuArrowTip(props: ComponentProps<typeof MenuPrimitive.ArrowTip>): import("solid-js").JSX.Element;
+declare function MenuItem(props: MenuItemProps): import("solid-js").JSX.Element;
+declare function MenuTriggerItem(props: ComponentProps<typeof MenuPrimitive.TriggerItem>): import("solid-js").JSX.Element;
+declare function MenuTriggerItemIcon(props: ComponentProps<'span'>): import("solid-js").JSX.Element;
+declare function MenuSeparator(props: ComponentProps<typeof MenuPrimitive.Separator>): import("solid-js").JSX.Element;
+declare function MenuItemGroup(props: ComponentProps<typeof MenuPrimitive.ItemGroup>): import("solid-js").JSX.Element;
+declare function MenuItemGroupLabel(props: ComponentProps<typeof MenuPrimitive.ItemGroupLabel>): import("solid-js").JSX.Element;
+declare function MenuRadioItemGroup(props: ComponentProps<typeof MenuPrimitive.RadioItemGroup>): import("solid-js").JSX.Element;
+declare function MenuRadioItem(props: MenuRadioItemProps): import("solid-js").JSX.Element;
+declare function MenuCheckboxItem(props: MenuCheckboxItemProps): import("solid-js").JSX.Element;
+declare function MenuItemIndicator(props: ComponentProps<typeof MenuPrimitive.ItemIndicator>): import("solid-js").JSX.Element;
+declare function MenuItemText(props: ComponentProps<typeof MenuPrimitive.ItemText>): import("solid-js").JSX.Element;
+declare function MenuItemTextContent(props: HTMLArkProps<'span'>): import("solid-js").JSX.Element;
+declare function MenuItemTextIcon(props: HTMLArkProps<'span'>): import("solid-js").JSX.Element;
+declare function MenuItemTextLabel(props: HTMLArkProps<'span'>): import("solid-js").JSX.Element;
+declare function MenuItemShortcut(props: HTMLArkProps<'span'>): import("solid-js").JSX.Element;
+declare const Menu: typeof MenuRoot & {
+    Root: typeof MenuRoot;
+    RootProvider: typeof MenuRootProvider;
+    Context: (props: MenuPrimitive.ContextProps) => import("solid-js").JSX.Element;
+    Trigger: typeof MenuTrigger;
+    TriggerIcon: typeof MenuTriggerIcon;
+    Indicator: typeof MenuIndicator;
+    ContextTrigger: typeof MenuContextTrigger;
+    Positioner: typeof MenuPositioner;
+    Content: typeof MenuContent;
+    Viewport: typeof MenuViewport;
+    Arrow: typeof MenuArrow;
+    ArrowTip: typeof MenuArrowTip;
+    Item: typeof MenuItem;
+    TriggerItem: typeof MenuTriggerItem;
+    TriggerItemIcon: typeof MenuTriggerItemIcon;
+    Separator: typeof MenuSeparator;
+    ItemGroup: typeof MenuItemGroup;
+    ItemGroupLabel: typeof MenuItemGroupLabel;
+    RadioItemGroup: typeof MenuRadioItemGroup;
+    RadioItem: typeof MenuRadioItem;
+    CheckboxItem: typeof MenuCheckboxItem;
+    ItemIndicator: typeof MenuItemIndicator;
+    ItemText: typeof MenuItemText;
+    ItemTextContent: typeof MenuItemTextContent;
+    ItemTextIcon: typeof MenuItemTextIcon;
+    ItemTextLabel: typeof MenuItemTextLabel;
+    ItemShortcut: typeof MenuItemShortcut;
+    ItemContext: (props: MenuPrimitive.ItemContextProps) => import("solid-js").JSX.Element;
+};
+export { Menu, useMenu, useMenuContext, useMenuItemContext };

package/dist/components/menu/Menu.js

@@ -0,0 +1,465 @@
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+import { useFocusVisible } from "@ark-ui/solid";
+import { ark } from "@ark-ui/solid/factory";
+import { Menu, useMenu, useMenuContext, useMenuItemContext } from "@ark-ui/solid/menu";
+import { clsx } from "clsx";
+import { children, splitProps } from "solid-js";
+import { CheckIcon, ChevronDownIcon, ChevronRightIcon } from "../../internal/icons/ui/Icons.js";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
+import Menu_module from "./Menu.module.js";
+var _tmpl$ = /*#__PURE__*/ template("<span data-slot=menu-trigger-icon>"), _tmpl$2 = /*#__PURE__*/ template("<span data-slot=menu-trigger-item-icon>");
+function MenuRoot(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return createComponent(OverlayPortalProvider, {
+        get portalled () {
+            return local.portalled;
+        },
+        get portalRef () {
+            return local.portalRef;
+        },
+        get children () {
+            return createComponent(Menu.Root, mergeProps({
+                get lazyMount () {
+                    return local.lazyMount ?? true;
+                },
+                get unmountOnExit () {
+                    return local.unmountOnExit ?? true;
+                }
+            }, others, {
+                get children () {
+                    return local.children;
+                }
+            }));
+        }
+    });
+}
+function MenuRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return createComponent(OverlayPortalProvider, {
+        get portalled () {
+            return local.portalled;
+        },
+        get portalRef () {
+            return local.portalRef;
+        },
+        get children () {
+            return createComponent(Menu.RootProvider, mergeProps({
+                get lazyMount () {
+                    return local.lazyMount ?? true;
+                },
+                get unmountOnExit () {
+                    return local.unmountOnExit ?? true;
+                }
+            }, others, {
+                get children () {
+                    return local.children;
+                }
+            }));
+        }
+    });
+}
+function MenuTrigger(props) {
+    const focusVisible = useFocusVisible();
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(Menu.Trigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "menu-trigger",
+        get ["data-focus-visible"] () {
+            return focusVisible() ? '' : void 0;
+        },
+        get ["class"] () {
+            return clsx(!local.asChild && Menu_module.trigger, local.class);
+        }
+    }, others));
+}
+function MenuTriggerIcon(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return (()=>{
+        var _el$ = _tmpl$();
+        spread(_el$, mergeProps({
+            get ["class"] () {
+                return clsx(Menu_module.triggerIcon, local.class);
+            }
+        }, others), false, true);
+        insert(_el$, ()=>resolvedChildren() ?? createComponent(ChevronDownIcon, {
+                get ["class"] () {
+                    return Menu_module.iconSvg;
+                }
+            }));
+        return _el$;
+    })();
+}
+function MenuIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Menu.Indicator, mergeProps({
+        "data-slot": "menu-indicator",
+        get ["class"] () {
+            return clsx(Menu_module.indicator, local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? createComponent(ChevronDownIcon, {
+                get ["class"] () {
+                    return Menu_module.iconSvg;
+                }
+            });
+        }
+    }));
+}
+function MenuContextTrigger(props) {
+    const focusVisible = useFocusVisible();
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(Menu.ContextTrigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "menu-context-trigger",
+        get ["data-focus-visible"] () {
+            return focusVisible() ? '' : void 0;
+        },
+        get ["class"] () {
+            return clsx(!local.asChild && Menu_module.contextTrigger, local.class);
+        }
+    }, others));
+}
+function MenuPositioner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(OverlayPortal, {
+        get children () {
+            return createComponent(Menu.Positioner, mergeProps({
+                "data-slot": "menu-positioner",
+                get ["class"] () {
+                    return clsx(Menu_module.positioner, local.class);
+                }
+            }, others));
+        }
+    });
+}
+function MenuContent(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return createComponent(Menu.Content, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "menu-content",
+        get ["class"] () {
+            return clsx(Menu_module.content, local.class);
+        }
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+}
+function MenuViewport(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-scope": "menu",
+        "data-part": "viewport",
+        "data-slot": "menu-viewport",
+        get ["class"] () {
+            return clsx(Menu_module.viewport, local.class);
+        }
+    }, others));
+}
+function MenuArrow(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Menu.Arrow, mergeProps({
+        "data-slot": "menu-arrow",
+        get ["class"] () {
+            return clsx(Menu_module.arrow, local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? createComponent(MenuArrowTip, {});
+        }
+    }));
+}
+function MenuArrowTip(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Menu.ArrowTip, mergeProps({
+        "data-slot": "menu-arrow-tip",
+        get ["class"] () {
+            return clsx(Menu_module.arrowTip, local.class);
+        }
+    }, others));
+}
+function MenuItem(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'tone'
+    ]);
+    return createComponent(Menu.Item, mergeProps({
+        "data-slot": "menu-item",
+        get ["data-tone"] () {
+            return local.tone ?? 'default';
+        },
+        get ["class"] () {
+            return clsx(Menu_module.item, local.class);
+        }
+    }, others));
+}
+function MenuTriggerItem(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    return createComponent(Menu.TriggerItem, mergeProps({
+        "data-slot": "menu-trigger-item",
+        get ["class"] () {
+            return clsx(Menu_module.triggerItem, local.class);
+        }
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+}
+function MenuTriggerItemIcon(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return (()=>{
+        var _el$2 = _tmpl$2();
+        spread(_el$2, mergeProps({
+            get ["class"] () {
+                return clsx(Menu_module.triggerItemIcon, local.class);
+            }
+        }, others), false, true);
+        insert(_el$2, ()=>resolvedChildren() ?? createComponent(ChevronRightIcon, {
+                get ["class"] () {
+                    return Menu_module.iconSvg;
+                }
+            }));
+        return _el$2;
+    })();
+}
+function MenuSeparator(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Menu.Separator, mergeProps({
+        "data-slot": "menu-separator",
+        get ["class"] () {
+            return clsx(Menu_module.separator, local.class);
+        }
+    }, others));
+}
+function MenuItemGroup(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Menu.ItemGroup, mergeProps({
+        "data-slot": "menu-item-group",
+        get ["class"] () {
+            return clsx(Menu_module.itemGroup, local.class);
+        }
+    }, others));
+}
+function MenuItemGroupLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Menu.ItemGroupLabel, mergeProps({
+        "data-slot": "menu-item-group-label",
+        get ["class"] () {
+            return clsx(Menu_module.itemGroupLabel, local.class);
+        }
+    }, others));
+}
+function MenuRadioItemGroup(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Menu.RadioItemGroup, mergeProps({
+        "data-slot": "menu-radio-item-group",
+        get ["class"] () {
+            return clsx(Menu_module.radioItemGroup, local.class);
+        }
+    }, others));
+}
+function MenuRadioItem(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'indicator'
+    ]);
+    return createComponent(Menu.RadioItem, mergeProps({
+        "data-slot": "menu-radio-item",
+        get ["data-indicator-position"] () {
+            return local.indicator ?? 'start';
+        },
+        get ["class"] () {
+            return clsx(Menu_module.radioItem, local.class);
+        }
+    }, others));
+}
+function MenuCheckboxItem(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'indicator'
+    ]);
+    return createComponent(Menu.CheckboxItem, mergeProps({
+        "data-slot": "menu-checkbox-item",
+        get ["data-indicator-position"] () {
+            return local.indicator ?? 'start';
+        },
+        get ["class"] () {
+            return clsx(Menu_module.checkboxItem, local.class);
+        }
+    }, others));
+}
+function MenuItemIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Menu.ItemIndicator, mergeProps({
+        "data-slot": "menu-item-indicator",
+        get ["class"] () {
+            return clsx(Menu_module.itemIndicator, local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? createComponent(CheckIcon, {
+                get ["class"] () {
+                    return Menu_module.itemIndicatorIcon;
+                }
+            });
+        }
+    }));
+}
+function MenuItemText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Menu.ItemText, mergeProps({
+        "data-slot": "menu-item-text",
+        get ["class"] () {
+            return clsx(Menu_module.itemText, local.class);
+        }
+    }, others));
+}
+function MenuItemTextContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.span, mergeProps({
+        "data-slot": "menu-item-text-content",
+        get ["class"] () {
+            return clsx(Menu_module.itemTextContent, local.class);
+        }
+    }, others));
+}
+function MenuItemTextIcon(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.span, mergeProps({
+        "data-slot": "menu-item-text-icon",
+        get ["class"] () {
+            return clsx(Menu_module.itemTextIcon, local.class);
+        }
+    }, others));
+}
+function MenuItemTextLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.span, mergeProps({
+        "data-slot": "menu-item-text-label",
+        get ["class"] () {
+            return clsx(Menu_module.itemTextLabel, local.class);
+        }
+    }, others));
+}
+function MenuItemShortcut(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.span, mergeProps({
+        "data-slot": "menu-item-shortcut",
+        get ["class"] () {
+            return clsx(Menu_module.itemShortcut, local.class);
+        }
+    }, others));
+}
+const Menu_Menu = Object.assign(MenuRoot, {
+    Root: MenuRoot,
+    RootProvider: MenuRootProvider,
+    Context: Menu.Context,
+    Trigger: MenuTrigger,
+    TriggerIcon: MenuTriggerIcon,
+    Indicator: MenuIndicator,
+    ContextTrigger: MenuContextTrigger,
+    Positioner: MenuPositioner,
+    Content: MenuContent,
+    Viewport: MenuViewport,
+    Arrow: MenuArrow,
+    ArrowTip: MenuArrowTip,
+    Item: MenuItem,
+    TriggerItem: MenuTriggerItem,
+    TriggerItemIcon: MenuTriggerItemIcon,
+    Separator: MenuSeparator,
+    ItemGroup: MenuItemGroup,
+    ItemGroupLabel: MenuItemGroupLabel,
+    RadioItemGroup: MenuRadioItemGroup,
+    RadioItem: MenuRadioItem,
+    CheckboxItem: MenuCheckboxItem,
+    ItemIndicator: MenuItemIndicator,
+    ItemText: MenuItemText,
+    ItemTextContent: MenuItemTextContent,
+    ItemTextIcon: MenuItemTextIcon,
+    ItemTextLabel: MenuItemTextLabel,
+    ItemShortcut: MenuItemShortcut,
+    ItemContext: Menu.ItemContext
+});
+export { Menu_Menu as Menu, useMenu, useMenuContext, useMenuItemContext };