@moduix/solid-tailwind 1.0.0

package/dist/components/menu/Menu.jsx

@@ -0,0 +1,277 @@
+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.jsx";
+import { CheckIcon, ChevronDownIcon, ChevronRightIcon } from "../../internal/icons/ui/index.jsx";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.jsx";
+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 <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
+      <Menu.Root lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others}>
+        {local.children}
+      </Menu.Root>
+    </OverlayPortalProvider>;
+}
+function MenuRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
+      <Menu.RootProvider lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others}>
+        {local.children}
+      </Menu.RootProvider>
+    </OverlayPortalProvider>;
+}
+function MenuTrigger(props) {
+    const focusVisible = useFocusVisible();
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <Menu.Trigger asChild={local.asChild} data-slot="menu-trigger" data-focus-visible={focusVisible() ? '' : void 0} class={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 <span data-slot="menu-trigger-icon" class={cn('inline-flex size-4 shrink-0 items-center justify-center [&_svg]:size-full', local.class)} {...others}>
+      {resolvedChildren() ?? <ChevronDownIcon/>}
+    </span>;
+}
+function MenuIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <Menu.Indicator data-slot="menu-indicator" class={cn('inline-flex size-4 shrink-0 items-center justify-center [&_svg]:size-full', local.class)} {...others}>
+      {resolvedChildren() ?? <ChevronDownIcon/>}
+    </Menu.Indicator>;
+}
+function MenuContextTrigger(props) {
+    const focusVisible = useFocusVisible();
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <Menu.ContextTrigger asChild={local.asChild} data-slot="menu-context-trigger" data-focus-visible={focusVisible() ? '' : void 0} class={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 <OverlayPortal>
+      <Menu.Positioner data-slot="menu-positioner" class={cn('z-[var(--z-index)] w-[var(--positioner-width,auto)] max-w-[var(--available-width)] outline-0', local.class)} {...others}/>
+    </OverlayPortal>;
+}
+function MenuContent(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return <Menu.Content asChild={local.asChild} data-slot="menu-content" class={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}>
+      {local.children}
+    </Menu.Content>;
+}
+function MenuViewport(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <ark.div asChild={local.asChild} data-scope="menu" data-part="viewport" data-slot="menu-viewport" class={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 <Menu.Arrow data-slot="menu-arrow" class={cn('[--arrow-background:var(--color-popover)]', local.class)} {...others}>
+      {resolvedChildren() ?? <MenuArrowTip/>}
+    </Menu.Arrow>;
+}
+function MenuArrowTip(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Menu.ArrowTip data-slot="menu-arrow-tip" class={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 <Menu.Item data-slot="menu-item" data-tone={local.tone ?? 'default'} class={cn(menuItemStyles({
+        layout: 'item',
+        tone: local.tone
+    }), local.class)} {...others}/>;
+}
+function MenuTriggerItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Menu.TriggerItem data-slot="menu-trigger-item" class={cn(menuItemStyles({
+        layout: 'triggerItem'
+    }), local.class)} {...others}/>;
+}
+function MenuTriggerItemIcon(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <span data-slot="menu-trigger-item-icon" class={cn('inline-flex size-3.5 shrink-0 rtl:-scale-x-100 [&_svg]:size-full', local.class)} {...others}>
+      {resolvedChildren() ?? <ChevronRightIcon/>}
+    </span>;
+}
+function MenuSeparator(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Menu.Separator data-slot="menu-separator" class={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 <Menu.ItemGroup data-slot="menu-item-group" class={cn('grid', local.class)} {...others}/>;
+}
+function MenuItemGroupLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Menu.ItemGroupLabel data-slot="menu-item-group-label" class={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 <Menu.RadioItemGroup data-slot="menu-radio-item-group" class={cn('grid', local.class)} {...others}/>;
+}
+function MenuRadioItem(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'indicator'
+    ]);
+    return <Menu.RadioItem data-slot="menu-radio-item" data-indicator-position={local.indicator ?? 'start'} class={cn(menuItemStyles({
+        layout: 'indicatorItem',
+        indicator: local.indicator ?? 'start'
+    }), local.class)} {...others}/>;
+}
+function MenuCheckboxItem(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'indicator'
+    ]);
+    return <Menu.CheckboxItem data-slot="menu-checkbox-item" data-indicator-position={local.indicator ?? 'start'} class={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 <Menu.ItemIndicator data-slot="menu-item-indicator" class={cn('inline-flex size-3 items-center justify-center rounded-xs [&_svg]:size-full', local.class)} {...others}>
+      {resolvedChildren() ?? <CheckIcon/>}
+    </Menu.ItemIndicator>;
+}
+function MenuItemText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Menu.ItemText data-slot="menu-item-text" class={cn('min-w-0 overflow-hidden', local.class)} {...others}/>;
+}
+function MenuItemTextContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.span data-slot="menu-item-text-content" class={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 <ark.span data-slot="menu-item-text-icon" class={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 <ark.span data-slot="menu-item-text-label" class={cn('min-w-0 overflow-hidden text-ellipsis whitespace-nowrap', local.class)} {...others}/>;
+}
+function MenuItemShortcut(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.span data-slot="menu-item-shortcut" class={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 };

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

@@ -0,0 +1 @@
+export * from './Menu.js';

package/dist/components/menu/index.js

@@ -0,0 +1 @@
+export * from "./Menu.js";

package/dist/components/menu/index.jsx

@@ -0,0 +1 @@
+export * from "./Menu.jsx";

package/dist/components/native-select/NativeSelect.d.ts

@@ -0,0 +1,11 @@
+import type { FieldSelectProps } from '@ark-ui/solid/field';
+import type { JSX } from 'solid-js';
+type NativeSelectRootProps = FieldSelectProps & {
+    controlProps?: JSX.HTMLAttributes<HTMLSpanElement>;
+    defaultValue?: FieldSelectProps['value'];
+};
+declare function NativeSelectRoot(props: NativeSelectRootProps): JSX.Element;
+declare const NativeSelect: typeof NativeSelectRoot & {
+    Root: typeof NativeSelectRoot;
+};
+export { NativeSelect };

package/dist/components/native-select/NativeSelect.js

@@ -0,0 +1,49 @@
+import { className, createComponent, effect, insert, mergeProps, spread, template } from "solid-js/web";
+import { Field } from "@ark-ui/solid/field";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+import { ChevronDownIcon } from "../../internal/icons/ui/Icons.js";
+var _tmpl$ = /*#__PURE__*/ template("<span><span aria-hidden=true data-scope=native-select data-part=indicator data-slot=native-select-indicator>");
+const NativeFieldSelect = Field.Select;
+function NativeSelectRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'controlProps',
+        'defaultValue'
+    ]);
+    const isList = ()=>props.multiple || void 0 !== props.size && Number(props.size) > 1;
+    return (()=>{
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+        spread(_el$, mergeProps(()=>local.controlProps, {
+            "data-scope": "native-select",
+            "data-part": "control",
+            "data-slot": "native-select-control",
+            get ["class"] () {
+                return cn('relative inline-grid w-fit max-w-full min-w-0', local.controlProps?.class);
+            }
+        }), false, true);
+        insert(_el$, createComponent(NativeFieldSelect, mergeProps({
+            get asChild () {
+                return local.asChild;
+            }
+        }, others, {
+            "data-scope": "field",
+            "data-part": "select",
+            "data-slot": "native-select-root",
+            get ["class"] () {
+                return cn('peer/native-select box-border h-control-md w-56 max-w-full min-w-0 cursor-pointer appearance-none rounded-md border border-border bg-background ps-3 pe-11 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,outline-color,opacity] duration-200 ease-in-out [font:inherit] focus-visible:border-ring focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:outline-destructive aria-invalid:focus-visible:outline-destructive data-disabled:pointer-events-none data-disabled:opacity-50 data-invalid:border-destructive data-invalid:outline-destructive data-invalid:focus-visible:outline-destructive motion-reduce:transition-none forced-colors:appearance-auto forced-colors:pe-3', isList() && 'h-auto appearance-auto px-3 py-2', local.class);
+            },
+            get ["prop:defaultValue"] () {
+                return local.defaultValue;
+            }
+        })), _el$2);
+        insert(_el$2, createComponent(ChevronDownIcon, {}));
+        effect(()=>className(_el$2, cn('pointer-events-none absolute end-2 top-1/2 inline-flex size-6 -translate-y-1/2 items-center justify-center rounded-sm bg-transparent leading-none text-muted-foreground transition-[background-color,color,opacity] duration-200 ease-in-out peer-disabled/native-select:opacity-50 peer-data-disabled/native-select:opacity-50 motion-reduce:transition-none forced-colors:hidden [&>svg]:block [&>svg]:size-4 [@media(hover:hover)]:peer-[:not([disabled]):not([data-disabled]):hover]/native-select:bg-muted [@media(hover:hover)]:peer-[:not([disabled]):not([data-disabled]):hover]/native-select:text-foreground', isList() && 'hidden')));
+        return _el$;
+    })();
+}
+const NativeSelect = Object.assign(NativeSelectRoot, {
+    Root: NativeSelectRoot
+});
+export { NativeSelect };

package/dist/components/native-select/NativeSelect.jsx

@@ -0,0 +1,24 @@
+import { Field } from "@ark-ui/solid/field";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+import { ChevronDownIcon } from "../../internal/icons/ui/Icons.jsx";
+const NativeFieldSelect = Field.Select;
+function NativeSelectRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'controlProps',
+        'defaultValue'
+    ]);
+    const isList = ()=>props.multiple || void 0 !== props.size && Number(props.size) > 1;
+    return <span {...local.controlProps} data-scope="native-select" data-part="control" data-slot="native-select-control" class={cn('relative inline-grid w-fit max-w-full min-w-0', local.controlProps?.class)}>
+      <NativeFieldSelect asChild={local.asChild} {...others} data-scope="field" data-part="select" data-slot="native-select-root" class={cn('peer/native-select box-border h-control-md w-56 max-w-full min-w-0 cursor-pointer appearance-none rounded-md border border-border bg-background ps-3 pe-11 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,outline-color,opacity] duration-200 ease-in-out [font:inherit] focus-visible:border-ring focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:outline-destructive aria-invalid:focus-visible:outline-destructive data-disabled:pointer-events-none data-disabled:opacity-50 data-invalid:border-destructive data-invalid:outline-destructive data-invalid:focus-visible:outline-destructive motion-reduce:transition-none forced-colors:appearance-auto forced-colors:pe-3', isList() && 'h-auto appearance-auto px-3 py-2', local.class)} prop:defaultValue={local.defaultValue}/>
+      <span aria-hidden="true" data-scope="native-select" data-part="indicator" data-slot="native-select-indicator" class={cn('pointer-events-none absolute end-2 top-1/2 inline-flex size-6 -translate-y-1/2 items-center justify-center rounded-sm bg-transparent leading-none text-muted-foreground transition-[background-color,color,opacity] duration-200 ease-in-out peer-disabled/native-select:opacity-50 peer-data-disabled/native-select:opacity-50 motion-reduce:transition-none forced-colors:hidden [&>svg]:block [&>svg]:size-4 [@media(hover:hover)]:peer-[:not([disabled]):not([data-disabled]):hover]/native-select:bg-muted [@media(hover:hover)]:peer-[:not([disabled]):not([data-disabled]):hover]/native-select:text-foreground', isList() && 'hidden')}>
+        <ChevronDownIcon/>
+      </span>
+    </span>;
+}
+const NativeSelect = Object.assign(NativeSelectRoot, {
+    Root: NativeSelectRoot
+});
+export { NativeSelect };

package/dist/components/native-select/index.d.ts

@@ -0,0 +1 @@
+export { NativeSelect } from './NativeSelect.js';

package/dist/components/native-select/index.js

@@ -0,0 +1 @@
+export { NativeSelect } from "./NativeSelect.js";

package/dist/components/native-select/index.jsx

@@ -0,0 +1 @@
+export { NativeSelect } from "./NativeSelect.jsx";

package/dist/components/navigation-menu/NavigationMenu.d.ts

@@ -0,0 +1,31 @@
+import { NavigationMenu as NavigationMenuPrimitive, useNavigationMenu, useNavigationMenuContext } from '@ark-ui/solid/navigation-menu';
+import type { ComponentProps } from 'solid-js';
+declare function NavigationMenuRoot(props: ComponentProps<typeof NavigationMenuPrimitive.Root>): import("solid-js").JSX.Element;
+declare function NavigationMenuRootProvider(props: ComponentProps<typeof NavigationMenuPrimitive.RootProvider>): import("solid-js").JSX.Element;
+declare function NavigationMenuList(props: ComponentProps<typeof NavigationMenuPrimitive.List>): import("solid-js").JSX.Element;
+declare function NavigationMenuItem(props: ComponentProps<typeof NavigationMenuPrimitive.Item>): import("solid-js").JSX.Element;
+declare function NavigationMenuTrigger(props: ComponentProps<typeof NavigationMenuPrimitive.Trigger>): import("solid-js").JSX.Element;
+declare function NavigationMenuContent(props: ComponentProps<typeof NavigationMenuPrimitive.Content>): import("solid-js").JSX.Element;
+declare function NavigationMenuLink(props: ComponentProps<typeof NavigationMenuPrimitive.Link>): import("solid-js").JSX.Element;
+declare function NavigationMenuIndicator(props: ComponentProps<typeof NavigationMenuPrimitive.Indicator>): import("solid-js").JSX.Element;
+declare function NavigationMenuItemIndicator(props: ComponentProps<typeof NavigationMenuPrimitive.ItemIndicator>): import("solid-js").JSX.Element;
+declare function NavigationMenuArrow(props: ComponentProps<typeof NavigationMenuPrimitive.Arrow>): import("solid-js").JSX.Element;
+declare function NavigationMenuViewportPositioner(props: ComponentProps<typeof NavigationMenuPrimitive.ViewportPositioner>): import("solid-js").JSX.Element;
+declare function NavigationMenuViewport(props: ComponentProps<typeof NavigationMenuPrimitive.Viewport>): import("solid-js").JSX.Element;
+declare const NavigationMenu: typeof NavigationMenuRoot & {
+    Root: typeof NavigationMenuRoot;
+    RootProvider: typeof NavigationMenuRootProvider;
+    Context: (props: NavigationMenuPrimitive.ContextProps) => import("solid-js").JSX.Element;
+    List: typeof NavigationMenuList;
+    Item: typeof NavigationMenuItem;
+    Trigger: typeof NavigationMenuTrigger;
+    Content: typeof NavigationMenuContent;
+    Link: typeof NavigationMenuLink;
+    Indicator: typeof NavigationMenuIndicator;
+    ItemIndicator: typeof NavigationMenuItemIndicator;
+    Arrow: typeof NavigationMenuArrow;
+    ViewportPositioner: typeof NavigationMenuViewportPositioner;
+    Viewport: typeof NavigationMenuViewport;
+};
+export { useNavigationMenu, useNavigationMenuContext };
+export { NavigationMenu };

package/dist/components/navigation-menu/NavigationMenu.js

@@ -0,0 +1,156 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { NavigationMenu, useNavigationMenu, useNavigationMenuContext } from "@ark-ui/solid/navigation-menu";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+function NavigationMenuRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(NavigationMenu.Root, mergeProps({
+        "data-slot": "navigation-menu-root",
+        get ["class"] () {
+            return cn('group/navigation-menu relative box-border flex w-fit max-w-full min-w-0 justify-center text-foreground', local.class);
+        }
+    }, others));
+}
+function NavigationMenuRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(NavigationMenu.RootProvider, mergeProps({
+        "data-slot": "navigation-menu-root-provider",
+        get ["class"] () {
+            return cn('group/navigation-menu relative box-border flex w-fit max-w-full min-w-0 justify-center text-foreground', local.class);
+        }
+    }, others));
+}
+function NavigationMenuList(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(NavigationMenu.List, mergeProps({
+        "data-slot": "navigation-menu-list",
+        get ["class"] () {
+            return cn('group/navigation-menu-list relative m-0 box-border flex max-w-full list-none items-center gap-1 p-0 data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch [&>[data-slot=navigation-menu-indicator]]:top-auto [&>[data-slot=navigation-menu-indicator]]:-bottom-2.5 [&>[data-slot=navigation-menu-indicator]]:z-[61]', local.class);
+        }
+    }, others));
+}
+function NavigationMenuItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(NavigationMenu.Item, mergeProps({
+        "data-slot": "navigation-menu-item",
+        get ["class"] () {
+            return cn('relative group-has-[>[data-slot=navigation-menu-indicator]]/navigation-menu-list:static group-has-[>[data-slot=navigation-menu-viewport-positioner]>[data-slot=navigation-menu-viewport]]/navigation-menu:static', local.class);
+        }
+    }, others));
+}
+function NavigationMenuTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(NavigationMenu.Trigger, mergeProps({
+        "data-slot": "navigation-menu-trigger",
+        get asChild () {
+            return local.asChild;
+        },
+        get ["class"] () {
+            return cn(!local.asChild && 'box-border inline-flex min-h-control-md items-center justify-center gap-2 rounded-md bg-transparent px-3 py-1 text-sm leading-5 font-medium whitespace-nowrap text-inherit no-underline outline-0 transition-[background-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:outline-offset-0 focus-visible:outline-ring disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 data-[state=open]:bg-muted motion-reduce:transition-none [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:transition-[rotate] [&>svg]:duration-200 [&>svg]:ease-in-out data-[state=open]:[&>svg]:rotate-180 [@media(hover:hover)]:[&:not(:disabled):not([data-disabled])]:hover:bg-muted', local.class);
+        }
+    }, others));
+}
+function NavigationMenuContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(NavigationMenu.Content, mergeProps({
+        "data-slot": "navigation-menu-content",
+        get ["class"] () {
+            return cn('group/navigation-menu-content absolute start-0 top-[calc(100%+0.5rem)] z-60 box-border flex max-h-[min(24rem,calc(100dvh-1.5rem))] w-max max-w-[min(20rem,calc(100vw-1.5rem))] min-w-[min(max(var(--trigger-width,0px),12rem),calc(100vw-1.5rem))] origin-top-left flex-col overflow-auto overscroll-contain rounded-md bg-popover py-1 text-popover-foreground shadow-lg outline-1 outline-border data-[state=closed]:pointer-events-none data-[state=closed]:animate-moduix-menu-closed group-has-[>[data-slot=navigation-menu-indicator]]/navigation-menu-list:data-[state=closed]:animate-none data-[state=open]:animate-moduix-menu-open motion-reduce:animate-none rtl:origin-top-right [&_[data-slot=navigation-menu-link]]:mx-1 [&_[data-slot=navigation-menu-link]]:justify-start [&_[data-slot=navigation-menu-link]]:rounded-sm [&_[data-slot=navigation-menu-link]]:px-2', local.class);
+        }
+    }, others));
+}
+function NavigationMenuLink(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(NavigationMenu.Link, mergeProps({
+        "data-slot": "navigation-menu-link",
+        get ["class"] () {
+            return cn('box-border inline-flex min-h-control-md items-center justify-center gap-2 rounded-md bg-transparent px-3 py-1 text-sm leading-5 font-medium whitespace-nowrap text-inherit no-underline outline-0 transition-[background-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:outline-offset-0 focus-visible:outline-ring disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 data-current:bg-transparent data-current:text-primary data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:transition-[rotate] [&>svg]:duration-200 [&>svg]:ease-in-out [@media(hover:hover)]:[&:not(:disabled):not([data-disabled])]:hover:bg-muted', local.class);
+        }
+    }, others));
+}
+function NavigationMenuIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(NavigationMenu.Indicator, mergeProps({
+        "data-slot": "navigation-menu-indicator",
+        get ["class"] () {
+            return cn('pointer-events-none absolute start-0 -top-2.5 flex h-2.5 w-[var(--trigger-width,0px)] [translate:var(--trigger-x,0px)_0] justify-center transition-[translate,inline-size] duration-200 ease-in-out data-[state=closed]:opacity-0 data-[state=open]:opacity-100 motion-reduce:transition-none', local.class);
+        }
+    }, others));
+}
+function NavigationMenuItemIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(NavigationMenu.ItemIndicator, mergeProps({
+        "data-slot": "navigation-menu-item-indicator",
+        get ["class"] () {
+            return cn('absolute inset-x-2 bottom-0 h-0.5 rounded-full bg-current', local.class);
+        }
+    }, others));
+}
+function NavigationMenuArrow(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(NavigationMenu.Arrow, mergeProps({
+        "data-slot": "navigation-menu-arrow",
+        get ["class"] () {
+            return cn('relative top-1 size-2.5 rotate-45 border-s border-t border-border bg-popover', local.class);
+        }
+    }, others));
+}
+function NavigationMenuViewportPositioner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(NavigationMenu.ViewportPositioner, mergeProps({
+        "data-slot": "navigation-menu-viewport-positioner",
+        get ["class"] () {
+            return cn('absolute start-0 top-full z-60 flex [translate:var(--viewport-x,0px)_0] data-[orientation=vertical]:start-full data-[orientation=vertical]:top-[var(--viewport-y,0px)] data-[orientation=vertical]:[translate:0_0] data-[orientation=vertical]:[&>[data-slot=navigation-menu-viewport]]:ms-2 data-[orientation=vertical]:[&>[data-slot=navigation-menu-viewport]]:mt-0', local.class);
+        }
+    }, others));
+}
+function NavigationMenuViewport(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(NavigationMenu.Viewport, mergeProps({
+        "data-slot": "navigation-menu-viewport",
+        get ["class"] () {
+            return cn('relative mt-2.5 box-border h-[var(--viewport-height)] max-h-[min(32rem,calc(100dvh-1.5rem))] w-[var(--viewport-width)] max-w-[min(40rem,calc(100vw-1.5rem))] origin-top overflow-hidden rounded-md bg-popover text-popover-foreground shadow-lg outline-1 outline-border transition-[inline-size,block-size] duration-200 ease-in-out data-[state=closed]:pointer-events-none data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:animate-none motion-reduce:transition-none [&_[data-slot=navigation-menu-content]]:absolute [&_[data-slot=navigation-menu-content]]:top-0 [&_[data-slot=navigation-menu-content]]:right-auto [&_[data-slot=navigation-menu-content]]:bottom-auto [&_[data-slot=navigation-menu-content]]:left-0 [&_[data-slot=navigation-menu-content]]:m-0 [&_[data-slot=navigation-menu-content]]:max-h-none [&_[data-slot=navigation-menu-content]]:origin-center [&_[data-slot=navigation-menu-content]]:overflow-visible [&_[data-slot=navigation-menu-content]]:rounded-none [&_[data-slot=navigation-menu-content]]:bg-transparent [&_[data-slot=navigation-menu-content]]:shadow-none [&_[data-slot=navigation-menu-content]]:outline-0 [&_[data-slot=navigation-menu-content]]:will-change-[translate,opacity] [&_[data-slot=navigation-menu-content][data-motion=from-end][data-state=open]]:animate-moduix-navigation-menu-content-from-end [&_[data-slot=navigation-menu-content][data-motion=from-start][data-state=open]]:animate-moduix-navigation-menu-content-from-start [&_[data-slot=navigation-menu-content][data-motion=to-end][data-state=closed]]:animate-moduix-navigation-menu-content-to-end [&_[data-slot=navigation-menu-content][data-motion=to-start][data-state=closed]]:animate-moduix-navigation-menu-content-to-start [&_[data-slot=navigation-menu-content][data-state]]:animate-none', local.class);
+        }
+    }, others));
+}
+const NavigationMenu_NavigationMenu = Object.assign(NavigationMenuRoot, {
+    Root: NavigationMenuRoot,
+    RootProvider: NavigationMenuRootProvider,
+    Context: NavigationMenu.Context,
+    List: NavigationMenuList,
+    Item: NavigationMenuItem,
+    Trigger: NavigationMenuTrigger,
+    Content: NavigationMenuContent,
+    Link: NavigationMenuLink,
+    Indicator: NavigationMenuIndicator,
+    ItemIndicator: NavigationMenuItemIndicator,
+    Arrow: NavigationMenuArrow,
+    ViewportPositioner: NavigationMenuViewportPositioner,
+    Viewport: NavigationMenuViewport
+});
+export { NavigationMenu_NavigationMenu as NavigationMenu, useNavigationMenu, useNavigationMenuContext };