@moduix/react 2.2.4 → 2.3.0

package/dist/components/heading/Heading.js

@@ -17,13 +17,13 @@ const Heading_HeadingRoot = /*#__PURE__*/ forwardRef(function({ as, asChild, siz
     return /*#__PURE__*/ jsx(Element, {
         ref: ref,
         asChild: asChild,
+        ...props,
         "data-scope": "heading",
         "data-part": "root",
         "data-slot": "heading-root",
         "data-size": size,
         "data-weight": weight,
-        className: clsx(Heading_module.root, normalizeClassName(className)),
-        ...props
+        className: clsx(Heading_module.root, normalizeClassName(className))
     });
 });
 const Heading = Object.assign(Heading_HeadingRoot, {

package/dist/components/highlight/Highlight.js

@@ -6,10 +6,10 @@ import Highlight_module from "./Highlight.module.js";
 function HighlightRoot({ className, ...props }) {
     return /*#__PURE__*/ jsx(Highlight, {
         className: clsx(Highlight_module.root, normalizeClassName(className)),
+        ...props,
         "data-scope": "highlight",
         "data-part": "root",
-        "data-slot": "highlight-root",
-        ...props
+        "data-slot": "highlight-root"
     });
 }
 const Highlight_Highlight = Object.assign(HighlightRoot, {

package/dist/components/hover-card/HoverCard.js

@@ -11,7 +11,6 @@ function HoverCardRoot({ lazyMount = true, portalled, portalRef, unmountOnExit =
         portalled: portalled,
         portalRef: portalRef,
         children: /*#__PURE__*/ jsx(HoverCard.Root, {
-            "data-slot": "hover-card-root",
             lazyMount: lazyMount,
             unmountOnExit: unmountOnExit,
             ...props
@@ -23,7 +22,6 @@ function HoverCardRootProvider({ lazyMount = true, portalled, portalRef, unmount
         portalled: portalled,
         portalRef: portalRef,
         children: /*#__PURE__*/ jsx(HoverCard.RootProvider, {
-            "data-slot": "hover-card-root-provider",
             lazyMount: lazyMount,
             unmountOnExit: unmountOnExit,
             ...props

package/dist/components/hover-card/HoverCard_module.css

@@ -1,14 +1,14 @@
 @layer moduix.components {
   .trigger-lDTCiV {
-    --moduix-hover-card-trigger-current-color: var(--moduix-hover-card-trigger-color, var(--moduix-color-primary));
+    --_hover-card-trigger-current-color: var(--moduix-hover-card-trigger-color, var(--moduix-color-primary));
     align-items: center;
     gap: var(--moduix-hover-card-trigger-gap, var(--moduix-spacing-1));
-    color: var(--moduix-hover-card-trigger-current-color);
+    color: var(--_hover-card-trigger-current-color);
     font: inherit;
     text-decoration-line: underline;
     text-decoration-thickness: var(--moduix-hover-card-trigger-decoration-thickness, 1px);
-    -webkit-text-decoration-color: var(--moduix-hover-card-trigger-decoration-color, color-mix(in oklab, var(--moduix-hover-card-trigger-current-color), transparent 40%));
-    text-decoration-color: var(--moduix-hover-card-trigger-decoration-color, color-mix(in oklab, var(--moduix-hover-card-trigger-current-color), transparent 40%));
+    -webkit-text-decoration-color: var(--moduix-hover-card-trigger-decoration-color, color-mix(in oklab, var(--_hover-card-trigger-current-color), transparent 40%));
+    text-decoration-color: var(--moduix-hover-card-trigger-decoration-color, color-mix(in oklab, var(--_hover-card-trigger-current-color), transparent 40%));
     text-underline-offset: var(--moduix-hover-card-trigger-underline-offset, 2px);
     cursor: pointer;
     transition: color var(--moduix-hover-card-transition, var(--moduix-duration-fast)),
@@ -19,14 +19,14 @@
 
   @media (hover: hover) {
     .trigger-lDTCiV:hover {
-      -webkit-text-decoration-color: var(--moduix-hover-card-trigger-decoration-color-hover, var(--moduix-hover-card-trigger-current-color));
-      text-decoration-color: var(--moduix-hover-card-trigger-decoration-color-hover, var(--moduix-hover-card-trigger-current-color));
+      -webkit-text-decoration-color: var(--moduix-hover-card-trigger-decoration-color-hover, var(--_hover-card-trigger-current-color));
+      text-decoration-color: var(--moduix-hover-card-trigger-decoration-color-hover, var(--_hover-card-trigger-current-color));
     }
   }
 
   .trigger-lDTCiV[data-state="open"] {
-    -webkit-text-decoration-color: var(--moduix-hover-card-trigger-decoration-color-open, var(--moduix-hover-card-trigger-current-color));
-    text-decoration-color: var(--moduix-hover-card-trigger-decoration-color-open, var(--moduix-hover-card-trigger-current-color));
+    -webkit-text-decoration-color: var(--moduix-hover-card-trigger-decoration-color-open, var(--_hover-card-trigger-current-color));
+    text-decoration-color: var(--moduix-hover-card-trigger-decoration-color-open, var(--_hover-card-trigger-current-color));
   }
 
   .trigger-lDTCiV:focus-visible {
@@ -56,6 +56,7 @@
     min-width: min(var(--moduix-hover-card-min-width, 14rem), var(--available-width));
     max-width: min(var(--moduix-hover-card-max-width, 24rem), var(--available-width));
     max-height: min(var(--moduix-hover-card-max-height, 24rem), var(--available-height, 100dvh));
+    overflow-wrap: anywhere;
     padding: var(--moduix-hover-card-padding-y, var(--moduix-spacing-2))
       var(--moduix-hover-card-padding-x, var(--moduix-spacing-2));
     border-radius: var(--moduix-hover-card-radius, var(--moduix-radius-lg));
@@ -96,6 +97,16 @@
       var(--moduix-hover-card-arrow-stroke-color, var(--moduix-hover-card-border-color, var(--moduix-color-border)));
   }
 
+  @media (prefers-reduced-motion: reduce) {
+    .trigger-lDTCiV {
+      transition: none;
+    }
+
+    .content-Su6EOr {
+      animation: none;
+    }
+  }
+
   @keyframes hover-card-enter-Yx8tti {
     from {
       opacity: var(--moduix-hover-card-content-starting-opacity, var(--moduix-popup-motion-starting-opacity, 0));

package/dist/components/image/Image.d.ts

@@ -1,6 +1,10 @@
 import type { ImageProps as UnpicImageProps } from '@unpic/react';
-declare const Image: import("react").ForwardRefExoticComponent<UnpicImageProps & import("react").RefAttributes<HTMLImageElement>> & {
-    Root: import("react").ForwardRefExoticComponent<UnpicImageProps & import("react").RefAttributes<HTMLImageElement>>;
+import { type CSSProperties } from 'react';
+type ImageProps = UnpicImageProps & {
+    style?: CSSProperties;
+};
+declare const Image: import("react").ForwardRefExoticComponent<ImageProps & import("react").RefAttributes<HTMLImageElement>> & {
+    Root: import("react").ForwardRefExoticComponent<ImageProps & import("react").RefAttributes<HTMLImageElement>>;
     Source: import("react").ForwardRefExoticComponent<import("@unpic/core").UnpicSourceProps & import("react").RefAttributes<HTMLSourceElement>>;
 };
 export { Image };

package/dist/components/image/Image.js

@@ -4,10 +4,11 @@ import { clsx } from "clsx";
 import { forwardRef } from "react";
 import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import Image_module from "./Image.module.js";
-const Image_ImageRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+const Image_ImageRoot = /*#__PURE__*/ forwardRef(function({ className, fetchPriority, fetchpriority, ...props }, ref) {
     return /*#__PURE__*/ jsx(Image, {
         ref: ref,
         ...props,
+        fetchpriority: fetchPriority ?? fetchpriority,
         "data-slot": "image-root",
         className: clsx(Image_module.root, normalizeClassName(className))
     });

package/dist/components/image-cropper/ImageCropper_module.css

@@ -153,7 +153,6 @@
 
   .handle-qbAAS1[data-position="nw"], .handle-qbAAS1[data-position="ne"], .handle-qbAAS1[data-position="se"], .handle-qbAAS1[data-position="sw"] {
     z-index: 2;
-    background-color: #fff;
   }
 
   .handle-qbAAS1[data-disabled] {

package/dist/components/input/Input_module.css

@@ -1,7 +1,7 @@
 @layer moduix.components {
   .root-cSSoZX {
     box-sizing: border-box;
-    width: var(--moduix-input-width, var(--moduix-input-default-width, 100%));
+    width: var(--moduix-input-width, var(--_input-default-width, 100%));
     max-width: var(--moduix-input-max-width, none);
     min-height: var(--moduix-input-height, var(--moduix-input-height-md, var(--moduix-size-md)));
     border: var(--moduix-input-border-width, var(--moduix-border-width-sm))
@@ -50,7 +50,7 @@
   }
 
   .root-cSSoZX[data-html-size] {
-    --moduix-input-default-width: auto;
+    --_input-default-width: auto;
   }
 
   .root-cSSoZX:focus-visible {

package/dist/components/input-group/InputGroup.js

@@ -13,12 +13,12 @@ const InputGroup_InputGroupRoot = /*#__PURE__*/ forwardRef(function({ children,
         value: size,
         children: /*#__PURE__*/ jsx(ark.div, {
             ref: ref,
+            ...props,
             "data-scope": "input-group",
             "data-part": "root",
             "data-slot": "input-group-root",
             "data-size": size,
             className: clsx(InputGroup_module.root, normalizeClassName(className)),
-            ...props,
             children: children
         })
     });
@@ -35,33 +35,33 @@ const InputGroup_InputGroupInput = /*#__PURE__*/ forwardRef(function({ className
 const InputGroup_InputGroupAddon = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
+        ...props,
         "data-scope": "input-group",
         "data-part": "addon",
         "data-slot": "input-group-addon",
-        className: clsx(InputGroup_module.addon, normalizeClassName(className)),
-        ...props
+        className: clsx(InputGroup_module.addon, normalizeClassName(className))
     });
 });
 const InputGroup_InputGroupText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
+        ...props,
         "data-scope": "input-group",
         "data-part": "text",
         "data-slot": "input-group-text",
-        className: clsx(InputGroup_module.text, normalizeClassName(className)),
-        ...props
+        className: clsx(InputGroup_module.text, normalizeClassName(className))
     });
 });
 const InputGroup_InputGroupButton = /*#__PURE__*/ forwardRef(function({ className, variant = 'ghost', size, type = 'button', ...props }, ref) {
     const groupSize = useContext(InputGroupSizeContext);
     return /*#__PURE__*/ jsx(Button, {
         ref: ref,
+        ...props,
         "data-slot": "input-group-button",
         className: clsx(InputGroup_module.button, normalizeClassName(className)),
         variant: variant,
         size: size ?? groupSize,
-        type: type,
-        ...props
+        type: type
     });
 });
 const InputGroup = Object.assign(InputGroup_InputGroupRoot, {

package/dist/components/kbd/Kbd.js

@@ -17,6 +17,7 @@ const Kbd_KbdRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, r
 const Kbd_KbdGroupPart = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
+        role: "group",
         "data-scope": "kbd",
         "data-part": "group",
         "data-slot": "kbd-group",

package/dist/components/lightbox/Lightbox.d.ts

@@ -20,10 +20,7 @@ type LightboxBindProps = {
 declare function LightboxRoot({ lazyMount, portalled, portalRef, unmountOnExit, ...props }: LightboxRootProps): import("react").JSX.Element;
 declare function LightboxRootProvider({ lazyMount, portalled, portalRef, unmountOnExit, ...props }: LightboxRootProviderProps): import("react").JSX.Element;
 declare const LightboxImage: import("react").ForwardRefExoticComponent<Omit<LightboxImageProps, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
-declare const LightboxGallery: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-declare function LightboxHeader({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-declare function LightboxBody({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-declare function LightboxFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+declare const LightboxGallery: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
 declare function LightboxBind({ onImageSelect, selector, rootRef, rootSelector }: LightboxBindProps): null;
 declare const Lightbox: typeof LightboxRoot & {
     Root: typeof LightboxRoot;
@@ -36,11 +33,11 @@ declare const Lightbox: typeof LightboxRoot & {
     Description: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DescriptionProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     CloseTrigger: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
     CloseIcon: import("react").ForwardRefExoticComponent<Omit<Omit<DialogPrimitive.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "asChild">, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-    Header: typeof LightboxHeader;
-    Body: typeof LightboxBody;
-    Footer: typeof LightboxFooter;
+    Header: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+    Body: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+    Footer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
     Image: import("react").ForwardRefExoticComponent<Omit<LightboxImageProps, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
-    Gallery: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Gallery: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
     Bind: typeof LightboxBind;
     useLightbox: (props?: import("@ark-ui/react/dialog").UseDialogProps) => import("@ark-ui/react/dialog").UseDialogReturn;
     useLightboxContext: () => import("@ark-ui/react/dialog").UseDialogContext;

package/dist/components/lightbox/Lightbox.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { Dialog, useDialog, useDialogContext } from "@ark-ui/react/dialog";
+import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef, useEffect } from "react";
 import { normalizeClassName } from "../../internal/normalizeClassName.js";
@@ -140,34 +141,37 @@ const Lightbox_LightboxImage = /*#__PURE__*/ forwardRef(function({ className, cl
     });
 });
 const Lightbox_LightboxGallery = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
-    return /*#__PURE__*/ jsx("div", {
+    return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
         "data-slot": "lightbox-gallery",
         className: clsx(Lightbox_module.gallery, normalizeClassName(className)),
         ...props
     });
 });
-function LightboxHeader({ className, ...props }) {
-    return /*#__PURE__*/ jsx("div", {
+const Lightbox_LightboxHeader = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
         "data-slot": "lightbox-header",
-        className: clsx(Lightbox_module.header, className),
+        className: clsx(Lightbox_module.header, normalizeClassName(className)),
         ...props
     });
-}
-function LightboxBody({ className, ...props }) {
-    return /*#__PURE__*/ jsx("div", {
+});
+const Lightbox_LightboxBody = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
         "data-slot": "lightbox-body",
-        className: clsx(Lightbox_module.body, className),
+        className: clsx(Lightbox_module.body, normalizeClassName(className)),
         ...props
     });
-}
-function LightboxFooter({ className, ...props }) {
-    return /*#__PURE__*/ jsx("div", {
+});
+const Lightbox_LightboxFooter = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
         "data-slot": "lightbox-footer",
-        className: clsx(Lightbox_module.footer, className),
+        className: clsx(Lightbox_module.footer, normalizeClassName(className)),
         ...props
     });
-}
+});
 function LightboxBind({ onImageSelect, selector, rootRef, rootSelector }) {
     const { setOpen } = useDialogContext();
     useEffect(()=>{
@@ -218,9 +222,9 @@ const Lightbox = Object.assign(LightboxRoot, {
     Description: Lightbox_LightboxDescription,
     CloseTrigger: Lightbox_LightboxCloseTrigger,
     CloseIcon: Lightbox_LightboxCloseIcon,
-    Header: LightboxHeader,
-    Body: LightboxBody,
-    Footer: LightboxFooter,
+    Header: Lightbox_LightboxHeader,
+    Body: Lightbox_LightboxBody,
+    Footer: Lightbox_LightboxFooter,
     Image: Lightbox_LightboxImage,
     Gallery: Lightbox_LightboxGallery,
     Bind: LightboxBind,

package/dist/components/lightbox/Lightbox_module.css

@@ -251,5 +251,12 @@
       scale: var(--moduix-lightbox-content-ending-scale, var(--moduix-popup-motion-ending-scale, .82));
     }
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .backdrop-nZRWDl[data-state], .content-N4c6Zm[data-state] {
+      animation-duration: 1ms;
+      animation-delay: 0s;
+    }
+  }
 }
 

package/dist/components/list/List_module.css

@@ -5,6 +5,7 @@
     --_list-gap: var(--moduix-list-gap, var(--moduix-list-gap-sm, var(--moduix-spacing-2)));
     --_list-line-height: var(--moduix-list-line-height, var(--moduix-list-line-height-md, var(--moduix-line-height-text-md)));
     box-sizing: border-box;
+    gap: var(--_list-gap);
     color: var(--_list-color);
     font-family: var(--moduix-list-font-family, inherit);
     font-size: var(--_list-font-size);
@@ -12,9 +13,11 @@
     line-height: var(--_list-line-height);
     letter-spacing: var(--moduix-list-letter-spacing, 0);
     overflow-wrap: break-word;
+    flex-direction: column;
     margin: 0;
     padding: 0;
     list-style-position: outside;
+    display: flex;
   }
 
   .root-PNnfB8[data-scope="list"][data-part="root"][data-gap="xs"] {
@@ -41,10 +44,6 @@
     --_list-gap: var(--moduix-list-gap, var(--moduix-list-gap-2xl, var(--moduix-spacing-6)));
   }
 
-  .root-PNnfB8[data-scope="list"][data-part="root"] > li + li {
-    margin-block-start: var(--_list-gap);
-  }
-
   .root-PNnfB8[data-scope="list"][data-part="root"] > li::marker {
     color: var(--moduix-list-marker-color, currentColor);
     font-weight: var(--moduix-list-marker-font-weight, inherit);

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

@@ -1,9 +1,6 @@
 import { Listbox as ListboxPrimitive, useListbox, useListboxContext, useListboxItemContext } from '@ark-ui/react/listbox';
 import type { ComponentProps } from 'react';
 declare function ListboxFilter({ className, children, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-declare function ListboxItemTextContent({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
-declare function ListboxItemTextIcon({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
-declare function ListboxItemTextLabel({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
 declare const Listbox: ListboxPrimitive.RootComponent & {
     Root: ListboxPrimitive.RootComponent;
     RootProvider: ListboxPrimitive.RootProviderComponent;
@@ -21,9 +18,9 @@ declare const Listbox: ListboxPrimitive.RootComponent & {
     ValueText: import("react").ForwardRefExoticComponent<Omit<ListboxPrimitive.ValueTextProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
     Context: <T extends unknown>(props: ListboxPrimitive.ContextProps<T>) => import("react").ReactNode;
     ItemContext: (props: ListboxPrimitive.ItemContextProps) => import("react").ReactNode;
-    ItemTextContent: typeof ListboxItemTextContent;
-    ItemTextIcon: typeof ListboxItemTextIcon;
-    ItemTextLabel: typeof ListboxItemTextLabel;
+    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>>;
     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;

package/dist/components/listbox/Listbox.js

@@ -135,27 +135,30 @@ const Listbox_ListboxValueText = /*#__PURE__*/ forwardRef(function({ className,
         ...props
     });
 });
-function ListboxItemTextContent({ className, ...props }) {
-    return /*#__PURE__*/ jsx("span", {
+const Listbox_ListboxItemTextContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.span, {
+        ref: ref,
         "data-slot": "listbox-item-text-content",
         className: clsx(Listbox_module.itemTextContent, normalizeClassName(className)),
         ...props
     });
-}
-function ListboxItemTextIcon({ className, ...props }) {
-    return /*#__PURE__*/ jsx("span", {
+});
+const Listbox_ListboxItemTextIcon = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.span, {
+        ref: ref,
         "data-slot": "listbox-item-text-icon",
         className: clsx(Listbox_module.itemTextIcon, normalizeClassName(className)),
         ...props
     });
-}
-function ListboxItemTextLabel({ className, ...props }) {
-    return /*#__PURE__*/ jsx("span", {
+});
+const Listbox_ListboxItemTextLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.span, {
+        ref: ref,
         "data-slot": "listbox-item-text-label",
         className: clsx(Listbox_module.itemTextLabel, normalizeClassName(className)),
         ...props
     });
-}
+});
 const Listbox_Listbox = Object.assign(Listbox_ListboxRoot, {
     Root: Listbox_ListboxRoot,
     RootProvider: Listbox_ListboxRootProvider,
@@ -173,9 +176,9 @@ const Listbox_Listbox = Object.assign(Listbox_ListboxRoot, {
     ValueText: Listbox_ListboxValueText,
     Context: Listbox.Context,
     ItemContext: Listbox.ItemContext,
-    ItemTextContent: ListboxItemTextContent,
-    ItemTextIcon: ListboxItemTextIcon,
-    ItemTextLabel: ListboxItemTextLabel,
+    ItemTextContent: Listbox_ListboxItemTextContent,
+    ItemTextIcon: Listbox_ListboxItemTextIcon,
+    ItemTextLabel: Listbox_ListboxItemTextLabel,
     useListbox: useListbox,
     useListboxContext: useListboxContext,
     useListboxItemContext: useListboxItemContext

package/dist/components/listbox/Listbox_module.css

@@ -74,9 +74,9 @@
   }
 
   .filter-GcwWjv + .content-bWizSr {
-    margin-top: calc(-1 * var(--moduix-listbox-root-gap, var(--moduix-spacing-3)));
     border-top-left-radius: 0;
     border-top-right-radius: 0;
+    margin-block-start: calc(-1 * var(--moduix-listbox-root-gap, var(--moduix-spacing-3)));
   }
 
   .filterIcon-sysxT1 {
@@ -176,7 +176,7 @@
   }
 
   .itemGroup-R3S9Z9 + .itemGroup-R3S9Z9 {
-    margin-top: var(--moduix-listbox-item-group-gap, var(--moduix-spacing-2));
+    margin-block-start: var(--moduix-listbox-item-group-gap, var(--moduix-spacing-2));
   }
 
   .itemGroupLabel-t4Kb1i {

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

@@ -18,10 +18,6 @@ declare function MenuRoot({ lazyMount, portalled, portalRef, unmountOnExit, ...p
 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 function MenuItemTextContent({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
-declare function MenuItemTextIcon({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
-declare function MenuItemTextLabel({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
-declare function MenuItemShortcut({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
 declare const Menu: typeof MenuRoot & {
     Root: typeof MenuRoot;
     RootProvider: typeof MenuRootProvider;
@@ -45,10 +41,10 @@ declare const Menu: typeof MenuRoot & {
     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: typeof MenuItemTextContent;
-    ItemTextIcon: typeof MenuItemTextIcon;
-    ItemTextLabel: typeof MenuItemTextLabel;
-    ItemShortcut: typeof MenuItemShortcut;
+    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

@@ -1,5 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
 import { Menu, useMenu, useMenuContext, useMenuItemContext } from "@ark-ui/react/menu";
 import { clsx } from "clsx";
 import { Children, forwardRef, isValidElement } from "react";
@@ -219,34 +220,38 @@ const Menu_MenuItemText = /*#__PURE__*/ forwardRef(function({ className, ...prop
         ...props
     });
 });
-function MenuItemTextContent({ className, ...props }) {
-    return /*#__PURE__*/ jsx("span", {
+const Menu_MenuItemTextContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.span, {
+        ref: ref,
         "data-slot": "menu-item-text-content",
-        className: clsx(Menu_module.itemTextContent, className),
+        className: clsx(Menu_module.itemTextContent, normalizeClassName(className)),
         ...props
     });
-}
-function MenuItemTextIcon({ className, ...props }) {
-    return /*#__PURE__*/ jsx("span", {
+});
+const Menu_MenuItemTextIcon = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.span, {
+        ref: ref,
         "data-slot": "menu-item-text-icon",
-        className: clsx(Menu_module.itemTextIcon, className),
+        className: clsx(Menu_module.itemTextIcon, normalizeClassName(className)),
         ...props
     });
-}
-function MenuItemTextLabel({ className, ...props }) {
-    return /*#__PURE__*/ jsx("span", {
+});
+const Menu_MenuItemTextLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.span, {
+        ref: ref,
         "data-slot": "menu-item-text-label",
-        className: clsx(Menu_module.itemTextLabel, className),
+        className: clsx(Menu_module.itemTextLabel, normalizeClassName(className)),
         ...props
     });
-}
-function MenuItemShortcut({ className, ...props }) {
-    return /*#__PURE__*/ jsx("span", {
+});
+const Menu_MenuItemShortcut = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.span, {
+        ref: ref,
         "data-slot": "menu-item-shortcut",
-        className: clsx(Menu_module.itemShortcut, className),
+        className: clsx(Menu_module.itemShortcut, normalizeClassName(className)),
         ...props
     });
-}
+});
 const Menu_Menu = Object.assign(MenuRoot, {
     Root: MenuRoot,
     RootProvider: MenuRootProvider,
@@ -270,10 +275,10 @@ const Menu_Menu = Object.assign(MenuRoot, {
     CheckboxItem: Menu_MenuCheckboxItem,
     ItemIndicator: Menu_MenuItemIndicator,
     ItemText: Menu_MenuItemText,
-    ItemTextContent: MenuItemTextContent,
-    ItemTextIcon: MenuItemTextIcon,
-    ItemTextLabel: MenuItemTextLabel,
-    ItemShortcut: MenuItemShortcut,
+    ItemTextContent: Menu_MenuItemTextContent,
+    ItemTextIcon: Menu_MenuItemTextIcon,
+    ItemTextLabel: Menu_MenuItemTextLabel,
+    ItemShortcut: Menu_MenuItemShortcut,
     ItemContext: Menu.ItemContext
 });
 export { Menu_Menu as Menu, useMenu, useMenuContext, useMenuItemContext };

package/dist/components/menu/Menu_module.css

@@ -355,6 +355,16 @@
     border: 0;
   }
 
+  @media (prefers-reduced-motion: reduce) {
+    .trigger-GnJcCa, .contextTrigger-jyrQRV {
+      transition: none;
+    }
+
+    .content-yFF7GN[data-state] {
+      animation: none;
+    }
+  }
+
   @keyframes menuContentIn-XDpUnW {
     from {
       opacity: var(--moduix-menu-popup-starting-opacity, var(--moduix-popup-motion-starting-opacity, 0));

package/dist/components/native-select/NativeSelect_module.css

@@ -32,7 +32,7 @@
       opacity var(--moduix-select-transition, var(--moduix-transition-default));
     margin: 0;
     padding-inline-start: var(--moduix-select-trigger-padding-x-start, var(--moduix-spacing-3));
-    padding-inline-end: calc(var(--moduix-select-action-offset-right, var(--moduix-spacing-1)) +
+    padding-inline-end: calc(var(--moduix-select-action-offset-right, var(--moduix-spacing-2)) +
         var(--moduix-select-action-size, var(--moduix-spacing-6)) +
         var(--moduix-select-trigger-padding-x-start, var(--moduix-spacing-3)));
   }

package/dist/components/pagination/Pagination.js

@@ -97,9 +97,9 @@ function PaginationItems() {
         children: (pagination)=>pagination.pages.map((page, index)=>'page' === page.type ? /*#__PURE__*/ jsx(Pagination_PaginationItem, {
                     ...page,
                     children: page.value
-                }, index) : /*#__PURE__*/ jsx(Pagination_PaginationEllipsis, {
+                }, page.value) : /*#__PURE__*/ jsx(Pagination_PaginationEllipsis, {
                     index: index
-                }, index))
+                }, `ellipsis-${index}`))
     });
 }
 const Pagination_Pagination = Object.assign(Pagination_PaginationRoot, {