@moduix/react-tailwind 1.0.0

package/dist/components/listbox/Listbox.js

@@ -0,0 +1,179 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
+import { Listbox, useListbox, useListboxContext, useListboxItemContext } from "@ark-ui/react/listbox";
+import { forwardRef } from "react";
+import { cn } from "../../internal/cn.js";
+import { CheckIcon, SearchIcon } from "../../internal/icons/ui/index.js";
+import { CloseButton } from "../close-button/index.js";
+const Listbox_ListboxRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Listbox.Root, {
+        ref: ref,
+        "data-slot": "listbox-root",
+        className: cn('box-border flex w-64 max-w-full min-w-0 flex-col gap-3 text-foreground data-disabled:opacity-50', className),
+        ...props
+    });
+});
+const Listbox_ListboxRootProvider = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Listbox.RootProvider, {
+        ref: ref,
+        "data-slot": "listbox-root-provider",
+        className: cn('box-border flex w-64 max-w-full min-w-0 flex-col gap-3 text-foreground data-disabled:opacity-50', className),
+        ...props
+    });
+});
+const Listbox_ListboxLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Listbox.Label, {
+        ref: ref,
+        "data-slot": "listbox-label",
+        className: cn('text-sm leading-5 font-medium text-foreground select-none', className),
+        ...props
+    });
+});
+const Listbox_ListboxInput = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Listbox.Input, {
+        ref: ref,
+        "data-slot": "listbox-input",
+        className: 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', className),
+        ...props
+    });
+});
+function ListboxFilter({ className, children, ...props }) {
+    return /*#__PURE__*/ jsxs("div", {
+        "data-slot": "listbox-filter",
+        className: cn('group/listbox-filter peer/listbox-filter relative box-border w-full', className),
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(SearchIcon, {
+                "data-slot": "listbox-filter-icon",
+                className: "pointer-events-none absolute start-3 top-1/2 z-1 size-4 -translate-y-1/2 text-muted-foreground"
+            }),
+            children
+        ]
+    });
+}
+const Listbox_ListboxClearTrigger = /*#__PURE__*/ forwardRef(function({ 'aria-label': ariaLabel = 'Clear search', className, children, type = 'button', ...props }, ref) {
+    return /*#__PURE__*/ jsx(CloseButton.Root, {
+        ref: ref,
+        "data-slot": "listbox-clear-trigger",
+        type: type,
+        "aria-label": ariaLabel,
+        className: 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', className),
+        ...props,
+        children: children
+    });
+});
+const Listbox_ListboxContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Listbox.Content, {
+        ref: ref,
+        "data-slot": "listbox-content",
+        className: 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', className),
+        ...props
+    });
+});
+const Listbox_ListboxEmpty = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Listbox.Empty, {
+        ref: ref,
+        "data-slot": "listbox-empty",
+        className: cn('px-3 py-1 text-center text-sm leading-5 text-muted-foreground', className),
+        ...props
+    });
+});
+const Listbox_ListboxItemGroup = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Listbox.ItemGroup, {
+        ref: ref,
+        "data-slot": "listbox-item-group",
+        className: cn('flex flex-col [&+&]:mt-2', className),
+        ...props
+    });
+});
+const Listbox_ListboxItemGroupLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Listbox.ItemGroupLabel, {
+        ref: ref,
+        "data-slot": "listbox-item-group-label",
+        className: cn('px-2 py-1 text-xs leading-4 font-normal text-muted-foreground select-none', className),
+        ...props
+    });
+});
+const Listbox_ListboxItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Listbox.Item, {
+        ref: ref,
+        "data-slot": "listbox-item",
+        className: 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', className),
+        ...props
+    });
+});
+const Listbox_ListboxItemText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Listbox.ItemText, {
+        ref: ref,
+        "data-slot": "listbox-item-text",
+        className: cn('min-w-0 overflow-hidden text-ellipsis whitespace-nowrap', className),
+        ...props
+    });
+});
+const Listbox_ListboxItemIndicator = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Listbox.ItemIndicator, {
+        ref: ref,
+        "data-slot": "listbox-item-indicator",
+        className: cn('inline-flex size-4 shrink-0 items-center justify-center data-[state=unchecked]:invisible [&>svg]:size-3', className),
+        ...props,
+        children: children ?? /*#__PURE__*/ jsx(CheckIcon, {})
+    });
+});
+const Listbox_ListboxValueText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Listbox.ValueText, {
+        ref: ref,
+        "data-slot": "listbox-value-text",
+        className: cn('text-sm leading-5 text-muted-foreground', className),
+        ...props
+    });
+});
+const Listbox_ListboxItemTextContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.span, {
+        ref: ref,
+        "data-slot": "listbox-item-text-content",
+        className: cn('inline-flex max-w-full min-w-0 items-center gap-2 align-top', className),
+        ...props
+    });
+});
+const Listbox_ListboxItemTextIcon = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.span, {
+        ref: ref,
+        "data-slot": "listbox-item-text-icon",
+        className: cn('inline-flex size-4 shrink-0 items-center justify-center', className),
+        ...props
+    });
+});
+const Listbox_ListboxItemTextLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.span, {
+        ref: ref,
+        "data-slot": "listbox-item-text-label",
+        className: cn('min-w-0 overflow-hidden text-ellipsis whitespace-nowrap', className),
+        ...props
+    });
+});
+const Listbox_Listbox = Object.assign(Listbox_ListboxRoot, {
+    Root: Listbox_ListboxRoot,
+    RootProvider: Listbox_ListboxRootProvider,
+    Label: Listbox_ListboxLabel,
+    Input: Listbox_ListboxInput,
+    Filter: ListboxFilter,
+    ClearTrigger: Listbox_ListboxClearTrigger,
+    Content: Listbox_ListboxContent,
+    Empty: Listbox_ListboxEmpty,
+    ItemGroup: Listbox_ListboxItemGroup,
+    ItemGroupLabel: Listbox_ListboxItemGroupLabel,
+    Item: Listbox_ListboxItem,
+    ItemText: Listbox_ListboxItemText,
+    ItemIndicator: Listbox_ListboxItemIndicator,
+    ValueText: Listbox_ListboxValueText,
+    Context: Listbox.Context,
+    ItemContext: Listbox.ItemContext,
+    ItemTextContent: Listbox_ListboxItemTextContent,
+    ItemTextIcon: Listbox_ListboxItemTextIcon,
+    ItemTextLabel: Listbox_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/marquee/Marquee.d.ts

@@ -0,0 +1,12 @@
+import { Marquee as MarqueePrimitive, useMarqueeContext } from '@ark-ui/react/marquee';
+declare const Marquee: import("react").ForwardRefExoticComponent<Omit<MarqueePrimitive.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    Root: import("react").ForwardRefExoticComponent<Omit<MarqueePrimitive.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    RootProvider: import("react").ForwardRefExoticComponent<Omit<MarqueePrimitive.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Context: (props: MarqueePrimitive.ContextProps) => import("react").ReactNode;
+    Viewport: import("react").ForwardRefExoticComponent<Omit<MarqueePrimitive.ViewportProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<Omit<MarqueePrimitive.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<Omit<MarqueePrimitive.ItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Edge: import("react").ForwardRefExoticComponent<Omit<MarqueePrimitive.EdgeProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+declare const useMarquee: (props?: import("@ark-ui/react/marquee").UseMarqueeProps) => import("@ark-ui/react/marquee").UseMarqueeReturn;
+export { Marquee, useMarquee, useMarqueeContext };

package/dist/components/marquee/Marquee.js

@@ -0,0 +1,93 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Marquee, useMarquee, useMarqueeContext } from "@ark-ui/react/marquee";
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+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'
+    }
+});
+const Marquee_MarqueeRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Marquee.Root, {
+        ref: ref,
+        "data-slot": "marquee-root",
+        className: cn(marqueeRootVariants({
+            orientation: 'top' === props.side || 'bottom' === props.side ? 'vertical' : 'horizontal'
+        }), className),
+        ...props
+    });
+});
+const Marquee_MarqueeRootProvider = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Marquee.RootProvider, {
+        ref: ref,
+        "data-slot": "marquee-root-provider",
+        className: cn(marqueeRootVariants({
+            orientation: props.value.orientation
+        }), className),
+        ...props
+    });
+});
+const Marquee_MarqueeViewport = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Marquee.Viewport, {
+        ref: ref,
+        "data-slot": "marquee-viewport",
+        className: cn('size-full', className),
+        ...props
+    });
+});
+const Marquee_MarqueeContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Marquee.Content, {
+        ref: ref,
+        "data-slot": "marquee-content",
+        className: 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', className),
+        ...props
+    });
+});
+const Marquee_MarqueeItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Marquee.Item, {
+        ref: ref,
+        "data-slot": "marquee-item",
+        className: cn('shrink-0', className),
+        ...props
+    });
+});
+const Marquee_MarqueeEdge = /*#__PURE__*/ forwardRef(function({ className, side, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Marquee.Edge, {
+        ref: ref,
+        "data-slot": "marquee-edge",
+        side: side,
+        className: cn(marqueeEdgeVariants({
+            side
+        }), className),
+        ...props
+    });
+});
+const Marquee_Marquee = Object.assign(Marquee_MarqueeRoot, {
+    Root: Marquee_MarqueeRoot,
+    RootProvider: Marquee_MarqueeRootProvider,
+    Context: Marquee.Context,
+    Viewport: Marquee_MarqueeViewport,
+    Content: Marquee_MarqueeContent,
+    Item: Marquee_MarqueeItem,
+    Edge: Marquee_MarqueeEdge
+});
+const Marquee_useMarquee = useMarquee;
+export { Marquee_Marquee as Marquee, Marquee_useMarquee as 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/menu/Menu.d.ts

@@ -0,0 +1,51 @@
+import { Menu as MenuPrimitive, useMenu, useMenuContext, useMenuItemContext } from '@ark-ui/react/menu';
+import type { ComponentProps } from 'react';
+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({ lazyMount, portalled, portalRef, unmountOnExit, ...props }: MenuRootProps): import("react").JSX.Element;
+declare function MenuRootProvider({ lazyMount, portalled, portalRef, unmountOnExit, ...props }: MenuRootProviderProps): import("react").JSX.Element;
+declare function MenuTriggerIcon({ className, children, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
+declare function MenuTriggerItemIcon({ className, children, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
+declare const Menu: typeof MenuRoot & {
+    Root: typeof MenuRoot;
+    RootProvider: typeof MenuRootProvider;
+    Context: (props: MenuPrimitive.ContextProps) => import("react").ReactNode;
+    Trigger: import("react").ForwardRefExoticComponent<Omit<MenuPrimitive.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    TriggerIcon: typeof MenuTriggerIcon;
+    Indicator: import("react").ForwardRefExoticComponent<Omit<MenuPrimitive.IndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ContextTrigger: import("react").ForwardRefExoticComponent<Omit<MenuPrimitive.ContextTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Positioner: import("react").ForwardRefExoticComponent<Omit<MenuPrimitive.PositionerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<Omit<MenuPrimitive.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Viewport: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+    Arrow: import("react").ForwardRefExoticComponent<Omit<MenuPrimitive.ArrowProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ArrowTip: import("react").ForwardRefExoticComponent<Omit<MenuPrimitive.ArrowTipProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<Omit<MenuItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    TriggerItem: import("react").ForwardRefExoticComponent<Omit<MenuPrimitive.TriggerItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    TriggerItemIcon: typeof MenuTriggerItemIcon;
+    Separator: import("react").ForwardRefExoticComponent<Omit<MenuPrimitive.SeparatorProps & import("react").RefAttributes<HTMLHRElement>, "ref"> & import("react").RefAttributes<HTMLHRElement>>;
+    ItemGroup: import("react").ForwardRefExoticComponent<Omit<MenuPrimitive.ItemGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ItemGroupLabel: import("react").ForwardRefExoticComponent<Omit<MenuPrimitive.ItemGroupLabelProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    RadioItemGroup: import("react").ForwardRefExoticComponent<Omit<MenuPrimitive.RadioItemGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    RadioItem: import("react").ForwardRefExoticComponent<Omit<MenuRadioItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    CheckboxItem: import("react").ForwardRefExoticComponent<Omit<MenuCheckboxItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ItemIndicator: import("react").ForwardRefExoticComponent<Omit<MenuPrimitive.ItemIndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ItemText: import("react").ForwardRefExoticComponent<Omit<MenuPrimitive.ItemTextProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ItemTextContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
+    ItemTextIcon: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
+    ItemTextLabel: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
+    ItemShortcut: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
+    ItemContext: (props: MenuPrimitive.ItemContextProps) => import("react").ReactNode;
+};
+export { Menu, useMenu, useMenuContext, useMenuItemContext };

package/dist/components/menu/Menu.js

@@ -0,0 +1,300 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
+import { Menu, useMenu, useMenuContext, useMenuItemContext } from "@ark-ui/react/menu";
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+import { cn } from "../../internal/cn.js";
+import { CheckIcon, ChevronDownIcon, ChevronRightIcon } from "../../internal/icons/ui/index.js";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
+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({ lazyMount = true, portalled, portalRef, unmountOnExit = true, ...props }) {
+    return /*#__PURE__*/ jsx(OverlayPortalProvider, {
+        portalled: portalled,
+        portalRef: portalRef,
+        children: /*#__PURE__*/ jsx(Menu.Root, {
+            lazyMount: lazyMount,
+            unmountOnExit: unmountOnExit,
+            ...props
+        })
+    });
+}
+function MenuRootProvider({ lazyMount = true, portalled, portalRef, unmountOnExit = true, ...props }) {
+    return /*#__PURE__*/ jsx(OverlayPortalProvider, {
+        portalled: portalled,
+        portalRef: portalRef,
+        children: /*#__PURE__*/ jsx(Menu.RootProvider, {
+            lazyMount: lazyMount,
+            unmountOnExit: unmountOnExit,
+            ...props
+        })
+    });
+}
+const Menu_MenuTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Menu.Trigger, {
+        ref: ref,
+        "data-slot": "menu-trigger",
+        asChild: asChild,
+        className: cn(!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 focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring active:bg-muted data-disabled:pointer-events-none data-disabled:opacity-50 data-[current]:data-[state=open]:bg-muted motion-reduce:transition-none [@media(hover:hover)]:hover:bg-muted', className),
+        ...props
+    });
+});
+function MenuTriggerIcon({ className, children, ...props }) {
+    return /*#__PURE__*/ jsx("span", {
+        "data-slot": "menu-trigger-icon",
+        className: cn('inline-flex size-4 shrink-0 items-center justify-center [&_svg]:size-full', className),
+        ...props,
+        children: children ?? /*#__PURE__*/ jsx(ChevronDownIcon, {})
+    });
+}
+const Menu_MenuIndicator = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Menu.Indicator, {
+        ref: ref,
+        "data-slot": "menu-indicator",
+        className: cn('inline-flex size-4 shrink-0 items-center justify-center [&_svg]:size-full', className),
+        ...props,
+        children: children ?? /*#__PURE__*/ jsx(ChevronDownIcon, {})
+    });
+});
+const Menu_MenuContextTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Menu.ContextTrigger, {
+        ref: ref,
+        "data-slot": "menu-context-trigger",
+        asChild: asChild,
+        className: cn(!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 focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring active:bg-muted data-disabled:pointer-events-none data-disabled:opacity-50 data-[current]:data-[state=open]:bg-muted motion-reduce:transition-none [@media(hover:hover)]:hover:bg-muted', className),
+        ...props
+    });
+});
+const Menu_MenuPositioner = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(OverlayPortal, {
+        children: /*#__PURE__*/ jsx(Menu.Positioner, {
+            ref: ref,
+            "data-slot": "menu-positioner",
+            className: cn('z-[var(--z-index)] w-[var(--positioner-width,auto)] max-w-[var(--available-width)] outline-0', className),
+            ...props
+        })
+    });
+});
+const Menu_MenuContent = /*#__PURE__*/ forwardRef(function({ asChild, className, children, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Menu.Content, {
+        ref: ref,
+        "data-slot": "menu-content",
+        asChild: asChild,
+        className: 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]', className),
+        ...props,
+        children: children
+    });
+});
+const Menu_MenuViewport = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
+        "data-scope": "menu",
+        "data-part": "viewport",
+        "data-slot": "menu-viewport",
+        className: cn('flex max-h-[min(24rem,var(--available-height,100dvh))] flex-col overflow-auto', className),
+        ...props
+    });
+});
+const Menu_MenuArrow = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Menu.Arrow, {
+        ref: ref,
+        "data-slot": "menu-arrow",
+        className: cn('[--arrow-background:var(--color-popover)]', className),
+        ...props,
+        children: children ?? /*#__PURE__*/ jsx(Menu_MenuArrowTip, {})
+    });
+});
+const Menu_MenuArrowTip = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Menu.ArrowTip, {
+        ref: ref,
+        "data-slot": "menu-arrow-tip",
+        className: cn('[border-block-start:1px_solid_var(--color-border)] [border-inline-start:1px_solid_var(--color-border)]', className),
+        ...props
+    });
+});
+const Menu_MenuItem = /*#__PURE__*/ forwardRef(function({ className, tone = 'default', ...props }, ref) {
+    return /*#__PURE__*/ jsx(Menu.Item, {
+        ref: ref,
+        "data-slot": "menu-item",
+        "data-tone": tone,
+        className: cn(menuItemStyles({
+            layout: 'item',
+            tone
+        }), className),
+        ...props
+    });
+});
+const Menu_MenuTriggerItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Menu.TriggerItem, {
+        ref: ref,
+        "data-slot": "menu-trigger-item",
+        className: cn(menuItemStyles({
+            layout: 'triggerItem'
+        }), className),
+        ...props
+    });
+});
+function MenuTriggerItemIcon({ className, children, ...props }) {
+    return /*#__PURE__*/ jsx("span", {
+        "data-slot": "menu-trigger-item-icon",
+        className: cn('inline-flex size-3.5 shrink-0 rtl:-scale-x-100 [&_svg]:size-full', className),
+        ...props,
+        children: children ?? /*#__PURE__*/ jsx(ChevronRightIcon, {})
+    });
+}
+const Menu_MenuSeparator = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Menu.Separator, {
+        ref: ref,
+        "data-slot": "menu-separator",
+        className: cn('mx-3 my-1.5 h-px border-0 bg-border', className),
+        ...props
+    });
+});
+const Menu_MenuItemGroup = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Menu.ItemGroup, {
+        ref: ref,
+        "data-slot": "menu-item-group",
+        className: cn('grid', className),
+        ...props
+    });
+});
+const Menu_MenuItemGroupLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Menu.ItemGroupLabel, {
+        ref: ref,
+        "data-slot": "menu-item-group-label",
+        className: cn('cursor-default px-2.5 py-1 text-xs font-normal text-muted-foreground select-none', className),
+        ...props
+    });
+});
+const Menu_MenuRadioItemGroup = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Menu.RadioItemGroup, {
+        ref: ref,
+        "data-slot": "menu-radio-item-group",
+        className: cn('grid', className),
+        ...props
+    });
+});
+const Menu_MenuRadioItem = /*#__PURE__*/ forwardRef(function({ className, indicator = 'start', ...props }, ref) {
+    return /*#__PURE__*/ jsx(Menu.RadioItem, {
+        ref: ref,
+        "data-slot": "menu-radio-item",
+        "data-indicator-position": indicator,
+        className: cn(menuItemStyles({
+            layout: 'indicatorItem',
+            indicator
+        }), className),
+        ...props
+    });
+});
+const Menu_MenuCheckboxItem = /*#__PURE__*/ forwardRef(function({ className, indicator = 'start', ...props }, ref) {
+    return /*#__PURE__*/ jsx(Menu.CheckboxItem, {
+        ref: ref,
+        "data-slot": "menu-checkbox-item",
+        "data-indicator-position": indicator,
+        className: cn(menuItemStyles({
+            layout: 'indicatorItem',
+            indicator
+        }), className),
+        ...props
+    });
+});
+const Menu_MenuItemIndicator = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Menu.ItemIndicator, {
+        ref: ref,
+        "data-slot": "menu-item-indicator",
+        className: cn('inline-flex size-3 items-center justify-center rounded-xs [&_svg]:size-full', className),
+        ...props,
+        children: children ?? /*#__PURE__*/ jsx(CheckIcon, {})
+    });
+});
+const Menu_MenuItemText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Menu.ItemText, {
+        ref: ref,
+        "data-slot": "menu-item-text",
+        className: cn('min-w-0 overflow-hidden', className),
+        ...props
+    });
+});
+const Menu_MenuItemTextContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.span, {
+        ref: ref,
+        "data-slot": "menu-item-text-content",
+        className: cn('inline-flex max-w-full min-w-0 items-center gap-2 align-top', className),
+        ...props
+    });
+});
+const Menu_MenuItemTextIcon = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.span, {
+        ref: ref,
+        "data-slot": "menu-item-text-icon",
+        className: cn('inline-flex size-4 shrink-0 items-center justify-center [&_svg]:size-full', className),
+        ...props
+    });
+});
+const Menu_MenuItemTextLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.span, {
+        ref: ref,
+        "data-slot": "menu-item-text-label",
+        className: cn('min-w-0 overflow-hidden text-ellipsis whitespace-nowrap', className),
+        ...props
+    });
+});
+const Menu_MenuItemShortcut = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.span, {
+        ref: ref,
+        "data-slot": "menu-item-shortcut",
+        className: cn('ms-auto ps-4 text-xs whitespace-nowrap text-muted-foreground', className),
+        ...props
+    });
+});
+const Menu_Menu = Object.assign(MenuRoot, {
+    Root: MenuRoot,
+    RootProvider: MenuRootProvider,
+    Context: Menu.Context,
+    Trigger: Menu_MenuTrigger,
+    TriggerIcon: MenuTriggerIcon,
+    Indicator: Menu_MenuIndicator,
+    ContextTrigger: Menu_MenuContextTrigger,
+    Positioner: Menu_MenuPositioner,
+    Content: Menu_MenuContent,
+    Viewport: Menu_MenuViewport,
+    Arrow: Menu_MenuArrow,
+    ArrowTip: Menu_MenuArrowTip,
+    Item: Menu_MenuItem,
+    TriggerItem: Menu_MenuTriggerItem,
+    TriggerItemIcon: MenuTriggerItemIcon,
+    Separator: Menu_MenuSeparator,
+    ItemGroup: Menu_MenuItemGroup,
+    ItemGroupLabel: Menu_MenuItemGroupLabel,
+    RadioItemGroup: Menu_MenuRadioItemGroup,
+    RadioItem: Menu_MenuRadioItem,
+    CheckboxItem: Menu_MenuCheckboxItem,
+    ItemIndicator: Menu_MenuItemIndicator,
+    ItemText: Menu_MenuItemText,
+    ItemTextContent: Menu_MenuItemTextContent,
+    ItemTextIcon: Menu_MenuItemTextIcon,
+    ItemTextLabel: Menu_MenuItemTextLabel,
+    ItemShortcut: Menu_MenuItemShortcut,
+    ItemContext: Menu.ItemContext
+});
+export { Menu_Menu as Menu, useMenu, useMenuContext, useMenuItemContext };