@moduix/react 1.1.1 → 2.1.0

package/dist/components/listbox/Listbox.css

@@ -25,20 +25,20 @@
   .SHhhXW_input {
     box-sizing: border-box;
     width: 100%;
-    min-height: var(--listbox-input-height, var(--size-lg));
+    min-height: var(--listbox-input-height, var(--size-md));
     border: var(--listbox-input-border-width, var(--listbox-border-width, var(--border-width-sm)))
       solid var(--listbox-input-border-color, var(--listbox-border-color, var(--color-border)));
     border-radius: var(--listbox-input-radius, var(--listbox-radius, var(--radius-md)));
-    padding: var(--listbox-input-padding-y, var(--spacing-2))
+    padding: var(--listbox-input-padding-y, var(--spacing-1))
       var(--listbox-input-padding-x, var(--spacing-3));
     background-color: var(--listbox-input-bg, var(--color-background));
     color: var(--listbox-input-color, var(--listbox-color, var(--color-foreground)));
     font: inherit;
     font-size: var(--listbox-input-font-size, var(--text-md));
     line-height: var(--listbox-input-line-height, var(--line-height-text-md));
-    outline: var(--listbox-input-focus-ring-width, var(--listbox-focus-ring-width, var(--border-width-sm)))
+    outline: var(--listbox-input-focus-ring-width, var(--listbox-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))))
       solid transparent;
-    outline-offset: calc(var(--listbox-input-focus-ring-width, var(--listbox-focus-ring-width, var(--border-width-sm))) *
+    outline-offset: calc(var(--listbox-input-focus-ring-width, var(--listbox-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))) *
         -1);
     transition: border-color var(--listbox-transition, var(--transition-default)),
       outline-color var(--listbox-transition, var(--transition-default)),
@@ -50,7 +50,6 @@
     }
 
     &:focus-visible {
-      border-color: var(--listbox-input-focus-ring-color, var(--listbox-focus-ring-color, var(--color-ring)));
       outline-color: var(--listbox-input-focus-ring-color, var(--listbox-focus-ring-color, var(--color-ring)));
     }
 
@@ -60,6 +59,67 @@
     }
   }
 
+  .SHhhXW_filter {
+    box-sizing: border-box;
+    width: 100%;
+    position: relative;
+
+    &:has( + .SHhhXW_content) .SHhhXW_input {
+      border-bottom: 0;
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  .SHhhXW_filter + .SHhhXW_content {
+    margin-top: calc(-1 * var(--listbox-root-gap, var(--spacing-3)));
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  .SHhhXW_filterIcon {
+    z-index: 1;
+    top: 50%;
+    width: var(--listbox-filter-icon-size, var(--spacing-4));
+    height: var(--listbox-filter-icon-size, var(--spacing-4));
+    color: var(--listbox-filter-icon-color, var(--color-muted-foreground));
+    pointer-events: none;
+    position: absolute;
+    inset-inline-start: var(--listbox-filter-padding-x, var(--spacing-3));
+    transform: translateY(-50%);
+  }
+
+  .SHhhXW_filter .SHhhXW_input {
+    min-height: var(--listbox-filter-height, var(--listbox-input-height, var(--size-md)));
+    background-color: var(--listbox-bg, var(--color-background));
+    padding-inline-start: calc(var(--listbox-filter-padding-x, var(--spacing-3)) +
+        var(--listbox-filter-icon-size, var(--spacing-4)) +
+        var(--listbox-filter-input-padding-x, var(--spacing-2)));
+    padding-inline-end: calc(var(--listbox-filter-padding-x, var(--spacing-3)) +
+        var(--listbox-filter-action-size, var(--size-xs)) +
+        var(--listbox-filter-input-padding-x, var(--spacing-2)));
+
+    &:focus-visible {
+      outline-color: #0000;
+    }
+  }
+
+  .SHhhXW_clearTrigger {
+    z-index: 1;
+    top: 50%;
+    --close-button-size: var(--listbox-filter-action-size, var(--size-xs));
+    --close-button-radius: var(--listbox-filter-action-radius, var(--radius-sm));
+    --close-button-bg: var(--listbox-filter-action-bg, transparent);
+    --close-button-bg-hover: var(--listbox-filter-action-bg-hover, var(--color-muted));
+    --close-button-color: var(--listbox-filter-icon-color, var(--color-muted-foreground));
+    --close-button-color-hover: var(--listbox-filter-action-color-hover, var(--color-foreground));
+    --close-button-icon-size: var(--listbox-filter-icon-size, var(--spacing-4));
+    --close-button-transition: var(--listbox-transition, var(--transition-default));
+    position: absolute;
+    inset-inline-end: var(--listbox-filter-padding-x, var(--spacing-3));
+    transform: translateY(-50%);
+  }
+
   .SHhhXW_content {
     box-sizing: border-box;
     min-height: 0;
@@ -67,14 +127,15 @@
     border: var(--listbox-border-width, var(--border-width-sm)) solid
       var(--listbox-border-color, var(--color-border));
     border-radius: var(--listbox-radius, var(--radius-md));
-    padding-block: var(--listbox-content-padding-y, var(--spacing-1));
+    padding-block: var(--listbox-content-padding-y, var(--popup-list-padding-y, var(--spacing-1)));
     background-color: var(--listbox-bg, var(--color-background));
     color: var(--listbox-color, var(--color-foreground));
-    outline: var(--listbox-focus-ring-width, var(--border-width-sm)) solid transparent;
-    outline-offset: calc(var(--listbox-focus-ring-width, var(--border-width-sm)) * -1);
+    outline: var(--listbox-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+      solid transparent;
+    outline-offset: calc(var(--listbox-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))) * -1);
     overscroll-behavior: auto;
     scrollbar-gutter: stable;
-    scroll-padding-block: var(--listbox-content-padding-y, var(--spacing-1));
+    scroll-padding-block: var(--listbox-content-padding-y, var(--popup-list-padding-y, var(--spacing-1)));
     transition: border-color var(--listbox-transition, var(--transition-default)),
       outline-color var(--listbox-transition, var(--transition-default));
     flex-direction: column;
@@ -116,32 +177,32 @@
   }
 
   .SHhhXW_itemGroupLabel {
-    padding-block: var(--listbox-item-group-label-padding-y, var(--spacing-1));
+    padding-block: var(--listbox-item-group-label-padding-y, var(--popup-group-label-padding-y, var(--spacing-1)));
     padding-inline: var(--listbox-item-group-label-padding-x, var(--spacing-2));
-    color: var(--listbox-item-group-label-color, var(--color-muted-foreground));
-    font-size: var(--listbox-item-group-label-font-size, var(--text-xs));
-    font-weight: var(--listbox-item-group-label-font-weight, var(--weight-semibold));
-    line-height: var(--listbox-item-group-label-line-height, var(--line-height-text-xs));
+    color: var(--listbox-item-group-label-color, var(--popup-group-label-color, var(--color-muted-foreground)));
+    font-size: var(--listbox-item-group-label-font-size, var(--popup-group-label-font-size, var(--text-xs)));
+    font-weight: var(--listbox-item-group-label-font-weight, var(--popup-group-label-font-weight, var(--weight-regular)));
+    line-height: var(--listbox-item-group-label-line-height, var(--popup-group-label-line-height, var(--line-height-text-xs)));
     user-select: none;
   }
 
   .SHhhXW_item {
     box-sizing: border-box;
     width: calc(100% - var(--listbox-item-inset-x, var(--spacing-2)));
-    min-height: var(--listbox-item-min-height, 2rem);
-    grid-template-columns: minmax(0, 1fr) var(--listbox-item-indicator-size, 1rem);
+    min-height: var(--listbox-item-min-height, var(--popup-item-min-height, var(--size-sm)));
+    grid-template-columns: minmax(0, 1fr) var(--listbox-item-indicator-size, var(--spacing-4));
     align-items: center;
     gap: var(--listbox-item-gap, var(--spacing-2));
     margin-inline: calc(var(--listbox-item-inset-x, var(--spacing-2)) / 2);
     border: var(--listbox-item-border-width, 0) solid var(--listbox-item-border-color, transparent);
     border-radius: var(--listbox-item-radius, var(--radius-sm));
-    padding-block: var(--listbox-item-padding-y, var(--spacing-2));
-    padding-inline: var(--listbox-item-padding-x, var(--spacing-3));
+    padding-block: var(--listbox-item-padding-y, var(--popup-item-padding-y, var(--spacing-1)));
+    padding-inline: var(--listbox-item-padding-x, var(--popup-item-padding-x-start, var(--spacing-3)));
     background-color: var(--listbox-item-bg, transparent);
     color: var(--listbox-item-color, var(--listbox-color, var(--color-foreground)));
     font: inherit;
-    font-size: var(--listbox-item-font-size, var(--text-sm));
-    line-height: var(--listbox-item-line-height, var(--line-height-text-sm));
+    font-size: var(--listbox-item-font-size, var(--popup-item-font-size, var(--text-sm)));
+    line-height: var(--listbox-item-line-height, var(--popup-item-line-height, var(--line-height-text-sm)));
     user-select: none;
     cursor: pointer;
     transition: background-color var(--listbox-transition, var(--transition-default)),
@@ -203,8 +264,8 @@
   }
 
   .SHhhXW_itemIndicator {
-    width: var(--listbox-item-indicator-size, 1rem);
-    height: var(--listbox-item-indicator-size, 1rem);
+    width: var(--listbox-item-indicator-size, var(--spacing-4));
+    height: var(--listbox-item-indicator-size, var(--spacing-4));
     color: var(--listbox-item-indicator-color, currentColor);
     flex-shrink: 0;
     justify-content: center;
@@ -212,8 +273,8 @@
     display: inline-flex;
 
     & > svg {
-      width: var(--listbox-item-indicator-icon-size, .75rem);
-      height: var(--listbox-item-indicator-icon-size, .75rem);
+      width: var(--listbox-item-indicator-icon-size, var(--spacing-3));
+      height: var(--listbox-item-indicator-icon-size, var(--spacing-3));
     }
 
     &[data-state="unchecked"] {
@@ -237,8 +298,8 @@
   }
 
   .SHhhXW_itemTextIcon {
-    width: var(--listbox-item-text-icon-size, 1rem);
-    height: var(--listbox-item-text-icon-size, 1rem);
+    width: var(--listbox-item-text-icon-size, var(--spacing-4));
+    height: var(--listbox-item-text-icon-size, var(--spacing-4));
     color: var(--listbox-item-text-icon-color, currentColor);
     flex-shrink: 0;
     justify-content: center;

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

@@ -1,7 +1,12 @@
 import { ComponentProps } from "react";
-import { Listbox } from "@ark-ui/react/listbox";
+import { Listbox, useListbox, useListboxContext, useListboxItemContext } from "@ark-ui/react/listbox";
 
 //#region src/components/listbox/Listbox.d.ts
+declare function ListboxFilter({
+  className,
+  children,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
 declare function ListboxItemTextContent({
   className,
   ...props
@@ -19,6 +24,8 @@ declare const Listbox$1: Listbox.RootComponent & {
   RootProvider: Listbox.RootProviderComponent;
   Label: import("react").ForwardRefExoticComponent<Omit<Listbox.LabelProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
   Input: import("react").ForwardRefExoticComponent<Omit<Listbox.InputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+  Filter: typeof ListboxFilter;
+  ClearTrigger: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   Content: import("react").ForwardRefExoticComponent<Omit<Listbox.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Empty: import("react").ForwardRefExoticComponent<Omit<Listbox.EmptyProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   ItemGroup: import("react").ForwardRefExoticComponent<Omit<Listbox.ItemGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
@@ -27,9 +34,14 @@ declare const Listbox$1: Listbox.RootComponent & {
   ItemText: import("react").ForwardRefExoticComponent<Omit<Listbox.ItemTextProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   ItemIndicator: import("react").ForwardRefExoticComponent<Omit<Listbox.ItemIndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   ValueText: import("react").ForwardRefExoticComponent<Omit<Listbox.ValueTextProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+  Context: <T extends unknown>(props: Listbox.ContextProps<T>) => import("react").ReactNode;
+  ItemContext: (props: Listbox.ItemContextProps) => import("react").ReactNode;
   ItemTextContent: typeof ListboxItemTextContent;
   ItemTextIcon: typeof ListboxItemTextIcon;
   ItemTextLabel: typeof ListboxItemTextLabel;
+  useListbox: <T extends unknown>(props: import("@ark-ui/react/listbox").UseListboxProps<T>) => import("@ark-ui/react/listbox").UseListboxReturn<T>;
+  useListboxContext: () => import("@ark-ui/react/listbox").UseListboxContext<any>;
+  useListboxItemContext: () => import("@ark-ui/react/listbox").UseListboxItemContext;
 };
 //#endregion
-export { Listbox$1 as Listbox };
+export { Listbox$1 as Listbox, useListbox, useListboxContext, useListboxItemContext };

package/dist/components/listbox/Listbox.js

@@ -1,10 +1,12 @@
-import { CheckIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { CheckIcon, SearchIcon } from "../../lib/moduix/icons/ui/Icons.js";
+import { CloseButton } from "../close-button/CloseButton.js";
 import Listbox_module_default from "./Listbox.module.js";
-import { jsx } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { Listbox } from "@ark-ui/react/listbox";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Listbox, useListbox, useListboxContext, useListboxItemContext } from "@ark-ui/react/listbox";
 //#region src/components/listbox/Listbox.tsx
 const ListboxRoot = forwardRef(function ListboxRoot({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Listbox.Root, {
@@ -38,6 +40,33 @@ const ListboxInput = forwardRef(function ListboxInput({ className, ...props }, r
 		...props
 	});
 });
+function ListboxFilter({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "listbox-filter",
+		className: clsx(Listbox_module_default.filter, normalizeClassName(className)),
+		...props,
+		children: [/* @__PURE__ */ jsx(SearchIcon, {
+			"data-slot": "listbox-filter-icon",
+			className: Listbox_module_default.filterIcon
+		}), children]
+	});
+}
+const ListboxClearTrigger = forwardRef(function ListboxClearTrigger({ "aria-label": ariaLabel = "Clear search", className, children, type = "button", ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.button, {
+		ref,
+		asChild: true,
+		"data-slot": "listbox-clear-trigger",
+		type,
+		"aria-label": ariaLabel,
+		className: clsx(Listbox_module_default.clearTrigger, normalizeClassName(className)),
+		...props,
+		children: /* @__PURE__ */ jsx(CloseButton.Root, {
+			"aria-label": ariaLabel,
+			type,
+			children
+		})
+	});
+});
 const ListboxContent = forwardRef(function ListboxContent({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Listbox.Content, {
 		ref,
@@ -129,6 +158,8 @@ const Listbox$1 = Object.assign(ListboxRoot, {
 	RootProvider: ListboxRootProvider,
 	Label: ListboxLabel,
 	Input: ListboxInput,
+	Filter: ListboxFilter,
+	ClearTrigger: ListboxClearTrigger,
 	Content: ListboxContent,
 	Empty: ListboxEmpty,
 	ItemGroup: ListboxItemGroup,
@@ -137,9 +168,14 @@ const Listbox$1 = Object.assign(ListboxRoot, {
 	ItemText: ListboxItemText,
 	ItemIndicator: ListboxItemIndicator,
 	ValueText: ListboxValueText,
+	Context: Listbox.Context,
+	ItemContext: Listbox.ItemContext,
 	ItemTextContent: ListboxItemTextContent,
 	ItemTextIcon: ListboxItemTextIcon,
-	ItemTextLabel: ListboxItemTextLabel
+	ItemTextLabel: ListboxItemTextLabel,
+	useListbox,
+	useListboxContext,
+	useListboxItemContext
 });
 //#endregion
-export { Listbox$1 as Listbox };
+export { Listbox$1 as Listbox, useListbox, useListboxContext, useListboxItemContext };

package/dist/components/listbox/Listbox.module.js

@@ -1,8 +1,11 @@
 import './Listbox.css';
 //#region src/components/listbox/Listbox.module.css
 var Listbox_module_default = {
+	"clearTrigger": "SHhhXW_clearTrigger",
 	"content": "SHhhXW_content",
 	"empty": "SHhhXW_empty",
+	"filter": "SHhhXW_filter",
+	"filterIcon": "SHhhXW_filterIcon",
 	"input": "SHhhXW_input",
 	"item": "SHhhXW_item",
 	"itemGroup": "SHhhXW_itemGroup",

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

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

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

@@ -9,5 +9,6 @@ declare const Marquee$1: import("react").ForwardRefExoticComponent<Omit<Marquee.
   Item: import("react").ForwardRefExoticComponent<Omit<Marquee.ItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Edge: import("react").ForwardRefExoticComponent<Omit<Marquee.EdgeProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 };
+declare const useMarquee$1: (props?: import("@ark-ui/react/marquee").UseMarqueeProps) => import("@ark-ui/react/marquee").UseMarqueeReturn;
 //#endregion
-export { Marquee$1 as Marquee };
+export { Marquee$1 as Marquee, useMarquee$1 as useMarquee };

package/dist/components/marquee/Marquee.js

@@ -1,9 +1,9 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import Marquee_module_default from "./Marquee.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { Marquee } from "@ark-ui/react/marquee";
+import { jsx } from "react/jsx-runtime";
+import { Marquee, useMarquee } from "@ark-ui/react/marquee";
 //#region src/components/marquee/Marquee.tsx
 const MarqueeRoot = forwardRef(function MarqueeRoot({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Marquee.Root, {
@@ -61,5 +61,6 @@ const Marquee$1 = Object.assign(MarqueeRoot, {
 	Item: MarqueeItem,
 	Edge: MarqueeEdge
 });
+const useMarquee$1 = useMarquee;
 //#endregion
-export { Marquee$1 as Marquee };
+export { Marquee$1 as Marquee, useMarquee$1 as useMarquee };

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

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

package/dist/components/menu/Menu.css

@@ -3,17 +3,19 @@
     box-sizing: border-box;
     justify-content: center;
     align-items: center;
-    gap: var(--menu-trigger-gap, .5rem);
-    min-height: var(--menu-trigger-height, var(--size-lg));
-    padding: var(--menu-trigger-padding-y, .5rem) var(--menu-trigger-padding-x, .875rem);
+    gap: var(--menu-trigger-gap, var(--spacing-2));
+    min-height: var(--menu-trigger-height, var(--size-md));
+    padding: var(--menu-trigger-padding-y, var(--spacing-1))
+      var(--menu-trigger-padding-x, var(--spacing-4));
     border: var(--menu-trigger-border-width, var(--border-width-sm)) solid
       var(--menu-trigger-border-color, var(--color-border));
     border-radius: var(--menu-trigger-radius, var(--radius-md));
     background-color: var(--menu-trigger-bg, var(--color-background));
     color: var(--menu-trigger-color, var(--color-foreground));
     font: inherit;
-    font-size: var(--menu-trigger-font-size, var(--text-md));
-    line-height: var(--menu-trigger-line-height, var(--line-height-text-md));
+    font-size: var(--menu-trigger-font-size, var(--text-sm));
+    font-weight: var(--menu-trigger-font-weight, var(--weight-medium));
+    line-height: var(--menu-trigger-line-height, var(--line-height-text-sm));
     user-select: none;
     cursor: pointer;
     transition: background-color var(--menu-transition, var(--transition-default)),
@@ -53,8 +55,8 @@
 
   .AJ5G3W_triggerIcon, .AJ5G3W_indicator {
     box-sizing: border-box;
-    width: var(--menu-trigger-icon-size, 1rem);
-    height: var(--menu-trigger-icon-size, 1rem);
+    width: var(--menu-trigger-icon-size, var(--spacing-4));
+    height: var(--menu-trigger-icon-size, var(--spacing-4));
     color: var(--menu-trigger-icon-color, currentColor);
     flex-shrink: 0;
     justify-content: center;
@@ -62,7 +64,7 @@
     display: inline-flex;
   }
 
-  .AJ5G3W_iconSvg {
+  .AJ5G3W_iconSvg, .AJ5G3W_indicator > svg {
     width: 100%;
     height: 100%;
   }
@@ -75,14 +77,14 @@
   }
 
   .AJ5G3W_content {
-    --arrow-size: var(--menu-arrow-size, .625rem);
+    --arrow-size: var(--menu-arrow-size, var(--spacing-2-5));
     --arrow-background: var(--menu-popup-bg, var(--color-popover));
     box-sizing: border-box;
     min-width: min(max(var(--reference-width, 0px), var(--menu-popup-min-width, 12rem)),
       var(--available-width, 100vw));
     max-width: min(var(--menu-popup-max-width, 20rem), var(--available-width, 100vw));
     max-height: min(var(--menu-popup-max-height, 24rem), var(--available-height, 100dvh));
-    padding-block: var(--menu-popup-padding-y, .25rem);
+    padding-block: var(--menu-popup-padding-y, var(--popup-list-padding-y, var(--spacing-1)));
     border-radius: var(--menu-popup-radius, var(--radius-md));
     background-color: var(--menu-popup-bg, var(--color-popover));
     color: var(--menu-popup-color, var(--color-popover-foreground));
@@ -97,11 +99,15 @@
     overflow: auto;
 
     &[data-state="open"] {
-      animation: AJ5G3W_menuContentIn var(--menu-transition, var(--transition-default));
+      animation: AJ5G3W_menuContentIn
+        var(--menu-transition, var(--popup-motion-duration, var(--duration-normal))
+            var(--popup-motion-easing, var(--ease-in-out)));
     }
 
     &[data-state="closed"] {
-      animation: AJ5G3W_menuContentOut var(--menu-transition, var(--transition-default));
+      animation: AJ5G3W_menuContentOut
+        var(--menu-transition, var(--popup-motion-duration, var(--duration-normal))
+            var(--popup-motion-easing, var(--ease-in-out)));
     }
   }
 
@@ -119,7 +125,7 @@
 
   .AJ5G3W_item, .AJ5G3W_triggerItem, .AJ5G3W_radioItem, .AJ5G3W_checkboxItem {
     box-sizing: border-box;
-    min-height: var(--menu-item-height, var(--popup-item-min-height, 2rem));
+    min-height: var(--menu-item-height, var(--popup-item-min-height, var(--size-sm)));
     border-radius: var(--menu-item-radius, var(--radius-sm));
     background-color: var(--menu-item-bg, transparent);
     color: inherit;
@@ -179,9 +185,9 @@
   .AJ5G3W_item {
     align-items: center;
     gap: var(--menu-item-gap, var(--spacing-2));
-    padding-block: var(--menu-item-padding-y, var(--popup-item-padding-y, .5rem));
-    padding-inline: var(--menu-item-padding-x-start, var(--popup-item-padding-x-start, 1rem))
-      var(--menu-item-padding-x-end, var(--popup-item-padding-x-end, 1rem));
+    padding-block: var(--menu-item-padding-y, var(--popup-item-padding-y, var(--spacing-1)));
+    padding-inline: var(--menu-item-padding-x-start, var(--popup-item-padding-x-start, var(--spacing-3)))
+      var(--menu-item-padding-x-end, var(--popup-item-padding-x-end, var(--spacing-3)));
     display: flex;
   }
 
@@ -189,16 +195,16 @@
     justify-content: space-between;
     align-items: center;
     gap: var(--menu-trigger-item-gap, var(--spacing-3));
-    padding-block: var(--menu-item-padding-y, var(--popup-item-padding-y, .5rem));
-    padding-inline: var(--menu-item-padding-x-start, var(--popup-item-padding-x-start, 1rem))
-      var(--menu-trigger-item-padding-x-end, 1rem);
+    padding-block: var(--menu-item-padding-y, var(--popup-item-padding-y, var(--spacing-1)));
+    padding-inline: var(--menu-item-padding-x-start, var(--popup-item-padding-x-start, var(--spacing-3)))
+      var(--menu-trigger-item-padding-x-end, var(--spacing-3));
     display: flex;
   }
 
   .AJ5G3W_triggerItemIcon {
     box-sizing: border-box;
-    width: var(--menu-trigger-item-icon-size, .875rem);
-    height: var(--menu-trigger-item-icon-size, .875rem);
+    width: var(--menu-trigger-item-icon-size, var(--spacing-3-5));
+    height: var(--menu-trigger-item-icon-size, var(--spacing-3-5));
     color: currentColor;
     flex-shrink: 0;
     display: inline-flex;
@@ -210,11 +216,12 @@
   }
 
   .AJ5G3W_itemGroupLabel {
-    padding-block: var(--menu-group-label-padding-y, var(--popup-group-label-padding-y, .35rem));
-    padding-inline: var(--menu-group-label-padding-x-start, var(--popup-group-label-padding-x-start, .625rem))
-      var(--menu-group-label-padding-x-end, var(--popup-group-label-padding-x-end, .75rem));
-    color: var(--menu-group-label-color, var(--color-muted-foreground));
+    padding-block: var(--menu-group-label-padding-y, var(--popup-group-label-padding-y, var(--spacing-1)));
+    padding-inline: var(--menu-group-label-padding-x-start, var(--popup-group-label-padding-x-start, var(--spacing-2-5)))
+      var(--menu-group-label-padding-x-end, var(--popup-group-label-padding-x-end, var(--spacing-3)));
+    color: var(--menu-group-label-color, var(--popup-group-label-color, var(--color-muted-foreground)));
     font-size: var(--menu-group-label-font-size, var(--popup-group-label-font-size, var(--text-xs)));
+    font-weight: var(--menu-group-label-font-weight, var(--popup-group-label-font-weight, var(--weight-regular)));
     line-height: var(--menu-group-label-line-height, var(--popup-group-label-line-height, var(--line-height-text-xs)));
     user-select: none;
     cursor: default;
@@ -227,17 +234,17 @@
 
   .AJ5G3W_radioItem, .AJ5G3W_checkboxItem {
     align-items: center;
-    gap: var(--menu-check-gap, var(--popup-check-gap, .5rem));
-    grid-template-columns: var(--menu-check-indicator-size, var(--popup-check-indicator-size, .75rem))
+    gap: var(--menu-check-gap, var(--popup-check-gap, var(--spacing-2)));
+    grid-template-columns: var(--menu-check-indicator-size, var(--popup-check-indicator-size, var(--spacing-3)))
       minmax(0, 1fr);
-    padding-block: var(--menu-item-padding-y, var(--popup-item-padding-y, .5rem));
-    padding-inline: var(--menu-check-padding-x-start, var(--popup-check-padding-x-start, .625rem))
-      var(--menu-item-padding-x-end, var(--popup-item-padding-x-end, 1rem));
+    padding-block: var(--menu-item-padding-y, var(--popup-item-padding-y, var(--spacing-1)));
+    padding-inline: var(--menu-check-padding-x-start, var(--popup-check-padding-x-start, var(--spacing-2-5)))
+      var(--menu-item-padding-x-end, var(--popup-item-padding-x-end, var(--spacing-3)));
     display: grid;
 
     &[data-indicator-position="none"] {
       grid-template-columns: minmax(0, 1fr);
-      padding-inline-start: var(--menu-item-padding-x-start, var(--popup-item-padding-x-start, 1rem));
+      padding-inline-start: var(--menu-item-padding-x-start, var(--popup-item-padding-x-start, var(--spacing-3)));
 
       & > .AJ5G3W_itemIndicator {
         display: none;
@@ -250,7 +257,7 @@
 
     &[data-indicator-position="end"] {
       grid-template-columns: minmax(0, 1fr)
-        var(--menu-check-indicator-size, var(--popup-check-indicator-size, .75rem));
+        var(--menu-check-indicator-size, var(--popup-check-indicator-size, var(--spacing-3)));
 
       & > .AJ5G3W_itemText {
         grid-column-start: 1;
@@ -271,8 +278,8 @@
   }
 
   .AJ5G3W_itemIndicator {
-    width: var(--menu-check-indicator-size, var(--popup-check-indicator-size, .75rem));
-    height: var(--menu-check-indicator-size, var(--popup-check-indicator-size, .75rem));
+    width: var(--menu-check-indicator-size, var(--popup-check-indicator-size, var(--spacing-3)));
+    height: var(--menu-check-indicator-size, var(--popup-check-indicator-size, var(--spacing-3)));
     border: var(--menu-checkbox-indicator-border-width, 0) solid
       var(--menu-checkbox-indicator-border-color, currentColor);
     border-radius: var(--menu-checkbox-indicator-radius, var(--radius-xs));
@@ -308,8 +315,8 @@
   }
 
   .AJ5G3W_itemTextIcon {
-    width: var(--menu-item-text-icon-size, 1rem);
-    height: var(--menu-item-text-icon-size, 1rem);
+    width: var(--menu-item-text-icon-size, var(--spacing-4));
+    height: var(--menu-item-text-icon-size, var(--spacing-4));
     color: var(--menu-item-text-icon-color, currentColor);
     flex-shrink: 0;
     justify-content: center;
@@ -336,18 +343,19 @@
   .AJ5G3W_separator {
     box-sizing: border-box;
     height: var(--menu-separator-height, var(--border-width-sm));
-    margin-block: var(--menu-separator-margin-y, var(--popup-separator-margin-y, .375rem));
-    margin-inline: var(--menu-separator-margin-x-start, var(--popup-separator-margin-x-start, 1rem))
-      var(--menu-separator-margin-x-end, var(--popup-separator-margin-x-end, 1rem));
+    margin-block: var(--menu-separator-margin-y, var(--popup-separator-margin-y, var(--spacing-1-5)));
+    margin-inline: var(--menu-separator-margin-x-start, var(--popup-separator-margin-x-start, var(--spacing-3)))
+      var(--menu-separator-margin-x-end, var(--popup-separator-margin-x-end, var(--spacing-3)));
     background-color: var(--menu-separator-color, var(--color-border));
     border: 0;
   }
 
   @keyframes AJ5G3W_menuContentIn {
     from {
-      opacity: var(--menu-popup-starting-opacity, 0);
-      translate: var(--menu-popup-starting-translate-x, 0) var(--menu-popup-starting-translate-y, 0);
-      transform: scale(var(--menu-popup-starting-scale, var(--scale-popup)));
+      opacity: var(--menu-popup-starting-opacity, var(--popup-motion-starting-opacity, 0));
+      translate: var(--menu-popup-starting-translate-x, var(--popup-motion-starting-translate-x, 0))
+        var(--menu-popup-starting-translate-y, var(--popup-motion-starting-translate-y, 0));
+      transform: scale(var(--menu-popup-starting-scale, var(--popup-motion-starting-scale, var(--scale-popup))));
     }
 
     to {
@@ -363,9 +371,10 @@
     }
 
     to {
-      opacity: var(--menu-popup-ending-opacity, 0);
-      translate: var(--menu-popup-ending-translate-x, 0) var(--menu-popup-ending-translate-y, 0);
-      transform: scale(var(--menu-popup-ending-scale, var(--scale-popup)));
+      opacity: var(--menu-popup-ending-opacity, var(--popup-motion-ending-opacity, 0));
+      translate: var(--menu-popup-ending-translate-x, var(--popup-motion-ending-translate-x, 0))
+        var(--menu-popup-ending-translate-y, var(--popup-motion-ending-translate-y, 0));
+      transform: scale(var(--menu-popup-ending-scale, var(--popup-motion-ending-scale, var(--scale-popup))));
     }
   }
 }

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

@@ -1,6 +1,6 @@
 import { OverlayPortalProps } from "../../lib/moduix/overlayPortal.js";
 import { ComponentProps } from "react";
-import { Menu } from "@ark-ui/react/menu";
+import { Menu, useMenu } from "@ark-ui/react/menu";
 
 //#region src/components/menu/Menu.d.ts
 type MenuIndicatorPosition = 'start' | 'end' | 'none';
@@ -78,6 +78,7 @@ declare const Menu$1: typeof MenuRoot & {
   ItemTextIcon: typeof MenuItemTextIcon;
   ItemTextLabel: typeof MenuItemTextLabel;
   ItemShortcut: typeof MenuItemShortcut;
+  ItemContext: (props: Menu.ItemContextProps) => import("react").ReactNode;
 };
 //#endregion
-export { Menu$1 as Menu };
+export { Menu$1 as Menu, useMenu };

package/dist/components/menu/Menu.js

@@ -1,11 +1,11 @@
-import { CheckIcon, ChevronDownIcon, ChevronRightIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { CheckIcon, ChevronDownIcon, ChevronRightIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { OverlayPortal, OverlayPortalProvider } from "../../lib/moduix/overlayPortal.js";
 import Menu_module_default from "./Menu.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { Menu } from "@ark-ui/react/menu";
+import { jsx } from "react/jsx-runtime";
+import { Menu, useMenu } from "@ark-ui/react/menu";
 //#region src/components/menu/Menu.tsx
 function MenuRoot({ portalled, portalRef, ...props }) {
 	return /* @__PURE__ */ jsx(OverlayPortalProvider, {
@@ -234,7 +234,8 @@ const Menu$1 = Object.assign(MenuRoot, {
 	ItemTextContent: MenuItemTextContent,
 	ItemTextIcon: MenuItemTextIcon,
 	ItemTextLabel: MenuItemTextLabel,
-	ItemShortcut: MenuItemShortcut
+	ItemShortcut: MenuItemShortcut,
+	ItemContext: Menu.ItemContext
 });
 //#endregion
-export { Menu$1 as Menu };
+export { Menu$1 as Menu, useMenu };

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

@@ -1,2 +1,2 @@
-import { Menu } from "./Menu.js";
-export { Menu };
+import { Menu, useMenu } from "./Menu.js";
+export { Menu, useMenu };