@moduix/solid-tailwind 1.0.0

package/dist/components/listbox/Listbox.jsx

@@ -0,0 +1,147 @@
+import { ark } from "@ark-ui/solid/factory";
+import { Listbox, useListbox, useListboxContext, useListboxItemContext } from "@ark-ui/solid/listbox";
+import { children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+import { CheckIcon, SearchIcon } from "../../internal/icons/ui/Icons.jsx";
+import { CloseButton } from "../close-button/index.jsx";
+const Listbox_ListboxRoot = function(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Listbox.Root data-slot="listbox-root" class={cn('box-border flex w-64 max-w-full min-w-0 flex-col gap-3 text-foreground data-disabled:opacity-50', local.class)} {...others}/>;
+};
+const Listbox_ListboxRootProvider = function(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Listbox.RootProvider data-slot="listbox-root-provider" class={cn('box-border flex w-64 max-w-full min-w-0 flex-col gap-3 text-foreground data-disabled:opacity-50', local.class)} {...others}/>;
+};
+function ListboxLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Listbox.Label data-slot="listbox-label" class={cn('text-sm leading-5 font-medium text-foreground select-none', local.class)} {...others}/>;
+}
+function ListboxInput(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Listbox.Input data-slot="listbox-input" class={cn('m-0 box-border min-h-control-md w-full rounded-md border border-border bg-background px-3 py-1 text-md leading-6 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,opacity] duration-200 ease-in-out group-has-[[data-slot=listbox-filter-icon]]/listbox-filter:ps-9 group-has-[[data-slot=listbox-filter-icon]]/listbox-filter:pe-10 group-has-[+_[data-slot=listbox-content]]/listbox-filter:rounded-b-none group-has-[+_[data-slot=listbox-content]]/listbox-filter:border-b-0 placeholder:text-muted-foreground focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none', local.class)} {...others}/>;
+}
+function ListboxFilter(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    return <div data-slot="listbox-filter" class={cn('group/listbox-filter peer/listbox-filter relative box-border w-full', local.class)} {...others}>
+      <SearchIcon data-slot="listbox-filter-icon" class="pointer-events-none absolute start-3 top-1/2 z-1 size-4 -translate-y-1/2 text-muted-foreground"/>
+      {local.children}
+    </div>;
+}
+function ListboxClearTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'children',
+        'class',
+        'type'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <CloseButton.Root data-slot="listbox-clear-trigger" class={cn('absolute end-3 top-1/2 size-control-xs -translate-y-1/2 rounded-sm bg-transparent text-muted-foreground [&>svg]:size-4 [@media(hover:hover)]:hover:bg-muted [@media(hover:hover)]:hover:text-foreground', local.class)} type={local.type ?? 'button'} aria-label={local['aria-label'] ?? 'Clear search'} {...others}>
+      {resolvedChildren()}
+    </CloseButton.Root>;
+}
+function ListboxContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Listbox.Content data-slot="listbox-content" class={cn('box-border flex max-h-56 min-h-0 scroll-py-1 [scrollbar-gutter:stable] flex-col overflow-x-hidden overflow-y-auto overscroll-contain rounded-md border border-border bg-background py-1 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color] duration-200 ease-in-out peer-data-[slot=listbox-filter]/listbox-filter:-mt-3 peer-data-[slot=listbox-filter]/listbox-filter:rounded-t-none focus-visible:outline-ring data-[layout=grid]:grid data-[layout=grid]:grid-cols-[repeat(var(--column-count),minmax(0,1fr))] data-[layout=grid]:gap-1 data-[layout=grid]:p-2 data-[orientation=horizontal]:not-data-[layout=grid]:max-h-none data-[orientation=horizontal]:not-data-[layout=grid]:flex-row data-[orientation=horizontal]:not-data-[layout=grid]:gap-2 data-[orientation=horizontal]:not-data-[layout=grid]:overflow-x-auto data-[orientation=horizontal]:not-data-[layout=grid]:overflow-y-hidden data-[orientation=horizontal]:not-data-[layout=grid]:px-1 motion-reduce:transition-none', local.class)} {...others}/>;
+}
+function ListboxEmpty(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Listbox.Empty data-slot="listbox-empty" class={cn('px-3 py-1 text-center text-sm leading-5 text-muted-foreground', local.class)} {...others}/>;
+}
+function ListboxItemGroup(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Listbox.ItemGroup data-slot="listbox-item-group" class={cn('flex flex-col [&+&]:mt-2', local.class)} {...others}/>;
+}
+function ListboxItemGroupLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Listbox.ItemGroupLabel data-slot="listbox-item-group-label" class={cn('px-2 py-1 text-xs leading-4 font-normal text-muted-foreground select-none', local.class)} {...others}/>;
+}
+function ListboxItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Listbox.Item data-slot="listbox-item" class={cn('relative mx-1 box-border grid min-h-control-sm w-[calc(100%-0.5rem)] cursor-pointer grid-cols-[minmax(0,1fr)_1rem] items-center gap-2 rounded-sm bg-transparent px-3 py-1 text-sm leading-5 text-foreground outline-0 transition-[background-color,color] duration-200 ease-in-out select-none data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:text-muted-foreground data-disabled:opacity-50 data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[layout=grid]:mx-0 data-[layout=grid]:w-full data-[layout=grid]:min-w-0 data-[layout=grid]:grid-cols-1 data-[layout=grid]:justify-items-center data-[layout=grid]:text-center data-[layout=grid]:data-selected:bg-muted data-[layout=grid]:data-selected:text-foreground data-[orientation=horizontal]:not-data-[layout=grid]:w-44 data-[orientation=horizontal]:not-data-[layout=grid]:min-w-44 data-[orientation=horizontal]:not-data-[layout=grid]:items-start motion-reduce:transition-none [@media(hover:hover)]:[&:not([data-disabled]):hover]:bg-accent [@media(hover:hover)]:[&:not([data-disabled]):hover]:text-accent-foreground', local.class)} {...others}/>;
+}
+function ListboxItemText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Listbox.ItemText data-slot="listbox-item-text" class={cn('min-w-0 overflow-hidden text-ellipsis whitespace-nowrap', local.class)} {...others}/>;
+}
+function ListboxItemIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <Listbox.ItemIndicator data-slot="listbox-item-indicator" class={cn('inline-flex size-4 shrink-0 items-center justify-center data-[state=unchecked]:invisible [&>svg]:size-3', local.class)} {...others}>
+      {resolvedChildren() ?? <CheckIcon/>}
+    </Listbox.ItemIndicator>;
+}
+function ListboxValueText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Listbox.ValueText data-slot="listbox-value-text" class={cn('text-sm leading-5 text-muted-foreground', local.class)} {...others}/>;
+}
+function ListboxItemTextContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.span data-slot="listbox-item-text-content" class={cn('inline-flex max-w-full min-w-0 items-center gap-2 align-top', local.class)} {...others}/>;
+}
+function ListboxItemTextIcon(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.span data-slot="listbox-item-text-icon" class={cn('inline-flex size-4 shrink-0 items-center justify-center', local.class)} {...others}/>;
+}
+function ListboxItemTextLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.span data-slot="listbox-item-text-label" class={cn('min-w-0 overflow-hidden text-ellipsis whitespace-nowrap', local.class)} {...others}/>;
+}
+const Listbox_Listbox = Object.assign(Listbox_ListboxRoot, {
+    Root: Listbox_ListboxRoot,
+    RootProvider: Listbox_ListboxRootProvider,
+    Label: ListboxLabel,
+    Input: ListboxInput,
+    Filter: ListboxFilter,
+    ClearTrigger: ListboxClearTrigger,
+    Content: ListboxContent,
+    Empty: ListboxEmpty,
+    ItemGroup: ListboxItemGroup,
+    ItemGroupLabel: ListboxItemGroupLabel,
+    Item: ListboxItem,
+    ItemText: ListboxItemText,
+    ItemIndicator: ListboxItemIndicator,
+    ValueText: ListboxValueText,
+    Context: Listbox.Context,
+    ItemContext: Listbox.ItemContext,
+    ItemTextContent: ListboxItemTextContent,
+    ItemTextIcon: ListboxItemTextIcon,
+    ItemTextLabel: ListboxItemTextLabel,
+    useListbox: useListbox,
+    useListboxContext: useListboxContext,
+    useListboxItemContext: useListboxItemContext
+});
+export { Listbox_Listbox as Listbox, useListbox, useListboxContext, useListboxItemContext };

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

@@ -0,0 +1 @@
+export { Listbox, useListbox, useListboxContext, useListboxItemContext } from './Listbox.js';

package/dist/components/listbox/index.js

@@ -0,0 +1 @@
+export { Listbox, useListbox, useListboxContext, useListboxItemContext } from "./Listbox.js";

package/dist/components/listbox/index.jsx

@@ -0,0 +1 @@
+export { Listbox, useListbox, useListboxContext, useListboxItemContext } from "./Listbox.jsx";

package/dist/components/marquee/Marquee.d.ts

@@ -0,0 +1,18 @@
+import { Marquee as MarqueePrimitive, useMarquee, useMarqueeContext } from '@ark-ui/solid/marquee';
+import type { ComponentProps } from 'solid-js';
+declare function MarqueeRoot(props: ComponentProps<typeof MarqueePrimitive.Root>): import("solid-js").JSX.Element;
+declare function MarqueeRootProvider(props: ComponentProps<typeof MarqueePrimitive.RootProvider>): import("solid-js").JSX.Element;
+declare function MarqueeViewport(props: ComponentProps<typeof MarqueePrimitive.Viewport>): import("solid-js").JSX.Element;
+declare function MarqueeContent(props: ComponentProps<typeof MarqueePrimitive.Content>): import("solid-js").JSX.Element;
+declare function MarqueeItem(props: ComponentProps<typeof MarqueePrimitive.Item>): import("solid-js").JSX.Element;
+declare function MarqueeEdge(props: ComponentProps<typeof MarqueePrimitive.Edge>): import("solid-js").JSX.Element;
+declare const Marquee: typeof MarqueeRoot & {
+    Root: typeof MarqueeRoot;
+    RootProvider: typeof MarqueeRootProvider;
+    Context: (props: MarqueePrimitive.ContextProps) => import("solid-js").JSX.Element;
+    Viewport: typeof MarqueeViewport;
+    Content: typeof MarqueeContent;
+    Item: typeof MarqueeItem;
+    Edge: typeof MarqueeEdge;
+};
+export { Marquee, useMarquee, useMarqueeContext };

package/dist/components/marquee/Marquee.js

@@ -0,0 +1,120 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { Marquee, useMarquee, useMarqueeContext } from "@ark-ui/solid/marquee";
+import { cva } from "class-variance-authority";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+const marqueeEdgeVariants = cva('pointer-events-none z-1', {
+    variants: {
+        side: {
+            start: 'w-1/5 bg-linear-to-r from-background to-transparent rtl:bg-linear-to-l',
+            end: 'w-1/5 bg-linear-to-l from-background to-transparent rtl:bg-linear-to-r',
+            top: 'h-1/5 bg-linear-to-b from-background to-transparent',
+            bottom: 'h-1/5 bg-linear-to-t from-background to-transparent'
+        }
+    }
+});
+const marqueeRootVariants = cva('group relative w-full overflow-hidden text-foreground', {
+    variants: {
+        orientation: {
+            horizontal: '',
+            vertical: 'h-60'
+        }
+    },
+    defaultVariants: {
+        orientation: 'horizontal'
+    }
+});
+function MarqueeRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'side'
+    ]);
+    return createComponent(Marquee.Root, mergeProps({
+        "data-slot": "marquee-root",
+        get side () {
+            return local.side;
+        },
+        get ["class"] () {
+            return cn(marqueeRootVariants({
+                orientation: 'top' === local.side || 'bottom' === local.side ? 'vertical' : 'horizontal'
+            }), local.class);
+        }
+    }, others));
+}
+function MarqueeRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'value'
+    ]);
+    return createComponent(Marquee.RootProvider, mergeProps({
+        "data-slot": "marquee-root-provider",
+        get value () {
+            return local.value;
+        },
+        get ["class"] () {
+            return cn(marqueeRootVariants({
+                orientation: local.value().orientation
+            }), local.class);
+        }
+    }, others));
+}
+function MarqueeViewport(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Marquee.Viewport, mergeProps({
+        "data-slot": "marquee-viewport",
+        get ["class"] () {
+            return cn('size-full', local.class);
+        }
+    }, others));
+}
+function MarqueeContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Marquee.Content, mergeProps({
+        "data-slot": "marquee-content",
+        get ["class"] () {
+            return cn('animate-moduix-marquee-x group-data-paused:[animation-play-state:paused] data-reverse:[animation-direction:reverse] data-[side=bottom]:animate-moduix-marquee-y data-[side=top]:animate-moduix-marquee-y motion-reduce:animate-none', local.class);
+        }
+    }, others));
+}
+function MarqueeItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Marquee.Item, mergeProps({
+        "data-slot": "marquee-item",
+        get ["class"] () {
+            return cn('shrink-0', local.class);
+        }
+    }, others));
+}
+function MarqueeEdge(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'side'
+    ]);
+    return createComponent(Marquee.Edge, mergeProps({
+        "data-slot": "marquee-edge",
+        get side () {
+            return local.side;
+        },
+        get ["class"] () {
+            return cn(marqueeEdgeVariants({
+                side: local.side
+            }), local.class);
+        }
+    }, others));
+}
+const Marquee_Marquee = Object.assign(MarqueeRoot, {
+    Root: MarqueeRoot,
+    RootProvider: MarqueeRootProvider,
+    Context: Marquee.Context,
+    Viewport: MarqueeViewport,
+    Content: MarqueeContent,
+    Item: MarqueeItem,
+    Edge: MarqueeEdge
+});
+export { Marquee_Marquee as Marquee, useMarquee, useMarqueeContext };

package/dist/components/marquee/Marquee.jsx

@@ -0,0 +1,80 @@
+import { Marquee, useMarquee, useMarqueeContext } from "@ark-ui/solid/marquee";
+import { cva } from "class-variance-authority";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+const marqueeEdgeVariants = cva('pointer-events-none z-1', {
+    variants: {
+        side: {
+            start: 'w-1/5 bg-linear-to-r from-background to-transparent rtl:bg-linear-to-l',
+            end: 'w-1/5 bg-linear-to-l from-background to-transparent rtl:bg-linear-to-r',
+            top: 'h-1/5 bg-linear-to-b from-background to-transparent',
+            bottom: 'h-1/5 bg-linear-to-t from-background to-transparent'
+        }
+    }
+});
+const marqueeRootVariants = cva('group relative w-full overflow-hidden text-foreground', {
+    variants: {
+        orientation: {
+            horizontal: '',
+            vertical: 'h-60'
+        }
+    },
+    defaultVariants: {
+        orientation: 'horizontal'
+    }
+});
+function MarqueeRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'side'
+    ]);
+    return <Marquee.Root data-slot="marquee-root" side={local.side} class={cn(marqueeRootVariants({
+        orientation: 'top' === local.side || 'bottom' === local.side ? 'vertical' : 'horizontal'
+    }), local.class)} {...others}/>;
+}
+function MarqueeRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'value'
+    ]);
+    return <Marquee.RootProvider data-slot="marquee-root-provider" value={local.value} class={cn(marqueeRootVariants({
+        orientation: local.value().orientation
+    }), local.class)} {...others}/>;
+}
+function MarqueeViewport(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Marquee.Viewport data-slot="marquee-viewport" class={cn('size-full', local.class)} {...others}/>;
+}
+function MarqueeContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Marquee.Content data-slot="marquee-content" class={cn('animate-moduix-marquee-x group-data-paused:[animation-play-state:paused] data-reverse:[animation-direction:reverse] data-[side=bottom]:animate-moduix-marquee-y data-[side=top]:animate-moduix-marquee-y motion-reduce:animate-none', local.class)} {...others}/>;
+}
+function MarqueeItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Marquee.Item data-slot="marquee-item" class={cn('shrink-0', local.class)} {...others}/>;
+}
+function MarqueeEdge(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'side'
+    ]);
+    return <Marquee.Edge data-slot="marquee-edge" side={local.side} class={cn(marqueeEdgeVariants({
+        side: local.side
+    }), local.class)} {...others}/>;
+}
+const Marquee_Marquee = Object.assign(MarqueeRoot, {
+    Root: MarqueeRoot,
+    RootProvider: MarqueeRootProvider,
+    Context: Marquee.Context,
+    Viewport: MarqueeViewport,
+    Content: MarqueeContent,
+    Item: MarqueeItem,
+    Edge: MarqueeEdge
+});
+export { Marquee_Marquee as Marquee, useMarquee, useMarqueeContext };

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

@@ -0,0 +1 @@
+export { Marquee, useMarquee, useMarqueeContext } from './Marquee.js';

package/dist/components/marquee/index.js

@@ -0,0 +1 @@
+export { Marquee, useMarquee, useMarqueeContext } from "./Marquee.js";

package/dist/components/marquee/index.jsx

@@ -0,0 +1 @@
+export { Marquee, useMarquee, useMarqueeContext } from "./Marquee.jsx";

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 };