@moduix/solid-tailwind 1.0.0

package/dist/components/menu/Menu.js

@@ -0,0 +1,476 @@
+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 { cva } from "class-variance-authority";
+import { children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+import { CheckIcon, ChevronDownIcon, ChevronRightIcon } from "../../internal/icons/ui/index.js";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
+var _tmpl$ = /*#__PURE__*/ template("<span data-slot=menu-trigger-icon>"), _tmpl$2 = /*#__PURE__*/ template("<span data-slot=menu-trigger-item-icon>");
+const menuItemStyles = cva("relative z-0 min-h-control-sm cursor-default rounded-sm bg-transparent text-sm text-inherit no-underline outline-0 select-none before:absolute before:inset-x-1 before:inset-y-0 before:-z-1 before:rounded-sm before:bg-transparent before:content-[''] data-disabled:pointer-events-none data-disabled:text-muted-foreground data-highlighted:text-accent-foreground data-highlighted:before:bg-accent data-[state=open]:before:bg-accent", {
+    variants: {
+        layout: {
+            item: 'flex items-center gap-2 px-3 py-1',
+            triggerItem: 'flex items-center justify-between gap-3 px-3 py-1',
+            indicatorItem: 'grid items-center gap-2 py-1 ps-2.5 pe-3'
+        },
+        tone: {
+            default: '',
+            destructive: 'text-destructive data-highlighted:text-destructive data-highlighted:before:bg-[color-mix(in_oklab,var(--color-destructive)_12%,transparent)]'
+        },
+        indicator: {
+            start: "grid-cols-[0.75rem_minmax(0,1fr)] [&>[data-slot='menu-item-indicator']]:col-start-1 [&>[data-slot='menu-item-text']]:col-start-2",
+            end: "grid-cols-[minmax(0,1fr)_0.75rem] [&>[data-slot='menu-item-indicator']]:col-start-2 [&>[data-slot='menu-item-indicator']]:justify-self-end [&>[data-slot='menu-item-text']]:col-start-1",
+            none: "grid-cols-[minmax(0,1fr)] ps-3 [&>[data-slot='menu-item-indicator']]:hidden [&>[data-slot='menu-item-text']]:col-start-1"
+        }
+    },
+    defaultVariants: {
+        tone: 'default'
+    }
+});
+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 cn(!local.asChild && 'inline-flex min-h-control-md cursor-pointer items-center justify-center gap-2 rounded-md border border-border bg-background px-4 py-1 text-sm font-medium text-foreground outline-0 transition-colors duration-200 ease-in-out select-none active:bg-muted data-disabled:pointer-events-none data-disabled:opacity-50 data-[current]:data-[state=open]:bg-muted motion-reduce:transition-none [&:focus[data-focus-visible]]:outline-1 [&:focus[data-focus-visible]]:-outline-offset-1 [&:focus[data-focus-visible]]:outline-ring [@media(hover:hover)]:hover:bg-muted', 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 cn('inline-flex size-4 shrink-0 items-center justify-center [&_svg]:size-full', local.class);
+            }
+        }, others), false, true);
+        insert(_el$, ()=>resolvedChildren() ?? createComponent(ChevronDownIcon, {}));
+        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 cn('inline-flex size-4 shrink-0 items-center justify-center [&_svg]:size-full', local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? createComponent(ChevronDownIcon, {});
+        }
+    }));
+}
+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 cn(!local.asChild && 'inline-flex min-h-control-md cursor-pointer items-center justify-center gap-2 rounded-md border border-border bg-background px-4 py-1 text-sm font-medium text-foreground outline-0 transition-colors duration-200 ease-in-out select-none active:bg-muted data-disabled:pointer-events-none data-disabled:opacity-50 data-[current]:data-[state=open]:bg-muted motion-reduce:transition-none [&:focus[data-focus-visible]]:outline-1 [&:focus[data-focus-visible]]:-outline-offset-1 [&:focus[data-focus-visible]]:outline-ring [@media(hover:hover)]:hover:bg-muted', 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 cn('z-[var(--z-index)] w-[var(--positioner-width,auto)] max-w-[var(--available-width)] outline-0', 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 cn('relative z-[calc(var(--moduix-z-popup)+var(--layer-index,0))] flex max-w-[min(20rem,var(--available-width,100vw))] min-w-[min(max(var(--reference-width,0px),12rem),var(--available-width,100vw))] origin-[var(--transform-origin)] flex-col overflow-visible rounded-md bg-popover py-1 text-popover-foreground shadow-lg outline-1 outline-border [--arrow-background:var(--color-popover)] [--arrow-size:0.625rem] data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]', 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 cn('flex max-h-[min(24rem,var(--available-height,100dvh))] flex-col overflow-auto', 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 cn('[--arrow-background:var(--color-popover)]', 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 cn('[border-block-start:1px_solid_var(--color-border)] [border-inline-start:1px_solid_var(--color-border)]', 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 cn(menuItemStyles({
+                layout: 'item',
+                tone: local.tone
+            }), local.class);
+        }
+    }, others));
+}
+function MenuTriggerItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Menu.TriggerItem, mergeProps({
+        "data-slot": "menu-trigger-item",
+        get ["class"] () {
+            return cn(menuItemStyles({
+                layout: 'triggerItem'
+            }), local.class);
+        }
+    }, others));
+}
+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 cn('inline-flex size-3.5 shrink-0 rtl:-scale-x-100 [&_svg]:size-full', local.class);
+            }
+        }, others), false, true);
+        insert(_el$2, ()=>resolvedChildren() ?? createComponent(ChevronRightIcon, {}));
+        return _el$2;
+    })();
+}
+function MenuSeparator(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Menu.Separator, mergeProps({
+        "data-slot": "menu-separator",
+        get ["class"] () {
+            return cn('mx-3 my-1.5 h-px border-0 bg-border', 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 cn('grid', 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 cn('cursor-default px-2.5 py-1 text-xs font-normal text-muted-foreground select-none', 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 cn('grid', 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 cn(menuItemStyles({
+                layout: 'indicatorItem',
+                indicator: local.indicator ?? 'start'
+            }), 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 cn(menuItemStyles({
+                layout: 'indicatorItem',
+                indicator: local.indicator ?? 'start'
+            }), 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 cn('inline-flex size-3 items-center justify-center rounded-xs [&_svg]:size-full', local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? createComponent(CheckIcon, {});
+        }
+    }));
+}
+function MenuItemText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Menu.ItemText, mergeProps({
+        "data-slot": "menu-item-text",
+        get ["class"] () {
+            return cn('min-w-0 overflow-hidden', 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 cn('inline-flex max-w-full min-w-0 items-center gap-2 align-top', 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 cn('inline-flex size-4 shrink-0 items-center justify-center [&_svg]:size-full', 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 cn('min-w-0 overflow-hidden text-ellipsis whitespace-nowrap', 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 cn('ms-auto ps-4 text-xs whitespace-nowrap text-muted-foreground', 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 };