@moduix/react 2.2.4 → 2.2.5

package/dist/components/drawer/Drawer.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { Drawer, useDrawer, useDrawerContext, useDrawerStackContext } from "@ark-ui/react/drawer";
+import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
 import { normalizeClassName } from "../../internal/normalizeClassName.js";
@@ -147,27 +148,30 @@ const Drawer_DrawerIndentBackground = /*#__PURE__*/ forwardRef(function({ classN
         ...props
     });
 });
-function DrawerHeader({ className, ...props }) {
-    return /*#__PURE__*/ jsx("div", {
+const Drawer_DrawerHeader = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
         "data-slot": "drawer-header",
-        className: clsx(Drawer_module.header, className),
+        className: clsx(Drawer_module.header, normalizeClassName(className)),
         ...props
     });
-}
-function DrawerBody({ className, ...props }) {
-    return /*#__PURE__*/ jsx("div", {
+});
+const Drawer_DrawerBody = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
         "data-slot": "drawer-body",
-        className: clsx(Drawer_module.body, className),
+        className: clsx(Drawer_module.body, normalizeClassName(className)),
         ...props
     });
-}
-function DrawerFooter({ className, ...props }) {
-    return /*#__PURE__*/ jsx("div", {
+});
+const Drawer_DrawerFooter = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
         "data-slot": "drawer-footer",
-        className: clsx(Drawer_module.footer, className),
+        className: clsx(Drawer_module.footer, normalizeClassName(className)),
         ...props
     });
-}
+});
 const Drawer_Drawer = Object.assign(DrawerRoot, {
     Root: DrawerRoot,
     RootProvider: DrawerRootProvider,
@@ -186,8 +190,8 @@ const Drawer_Drawer = Object.assign(DrawerRoot, {
     SwipeArea: Drawer_DrawerSwipeArea,
     Indent: Drawer_DrawerIndent,
     IndentBackground: Drawer_DrawerIndentBackground,
-    Header: DrawerHeader,
-    Body: DrawerBody,
-    Footer: DrawerFooter
+    Header: Drawer_DrawerHeader,
+    Body: Drawer_DrawerBody,
+    Footer: Drawer_DrawerFooter
 });
 export { Drawer_Drawer as Drawer, useDrawer, useDrawerContext, useDrawerStackContext };

package/dist/components/drawer/Drawer_module.css

@@ -118,7 +118,7 @@
   }
 
   .content-ijyEx0 {
-    --moduix-drawer-bleed: var(--moduix-drawer-bleed-size, var(--moduix-size-xl));
+    --_drawer-bleed: var(--moduix-drawer-bleed-size, var(--moduix-size-xl));
     --drawer-island-translate-distance: 0px;
     box-sizing: border-box;
     width: min(var(--moduix-drawer-width, 100%), 100vw);
@@ -152,7 +152,7 @@
 
   .content-ijyEx0:after {
     inset-inline: 0;
-    height: var(--moduix-drawer-bleed);
+    height: var(--_drawer-bleed);
     background-color: inherit;
     content: "";
     pointer-events: none;
@@ -212,7 +212,7 @@
   :is(.content-ijyEx0[data-swipe-direction="left"], .content-ijyEx0[data-swipe-direction="right"]):after {
     inset-block: 0;
     inset-inline: auto;
-    width: var(--moduix-drawer-bleed);
+    width: var(--_drawer-bleed);
     height: auto;
     top: 0;
   }
@@ -386,14 +386,14 @@
 
   .body-isYwKt {
     min-height: 0;
-    margin-top: var(--moduix-drawer-body-margin-top, var(--moduix-spacing-4));
+    margin-block-start: var(--moduix-drawer-body-margin-top, var(--moduix-spacing-4));
     overflow-y: auto;
   }
 
   .footer-_cSbP3 {
     justify-content: flex-end;
     gap: var(--moduix-drawer-footer-gap, var(--moduix-spacing-2));
-    margin-top: var(--moduix-drawer-footer-margin-top, var(--moduix-spacing-6));
+    margin-block-start: var(--moduix-drawer-footer-margin-top, var(--moduix-spacing-6));
     display: flex;
   }
 
@@ -514,7 +514,7 @@
   @keyframes drawer-content-out-up-BCRbr_ {
     to {
       transform: translate3d(0,
-        calc(-100% - var(--drawer-island-translate-distance) - var(--moduix-drawer-bleed)),
+        calc(-100% - var(--drawer-island-translate-distance) - var(--_drawer-bleed)),
         0);
     }
   }
@@ -542,5 +542,16 @@
       transform: translate3d(calc(100% + var(--drawer-island-translate-distance)), 0, 0);
     }
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .backdrop-butaHQ[data-state], .content-ijyEx0[data-state] {
+      animation-duration: 1ms;
+      animation-delay: 0s;
+    }
+
+    .backdrop-butaHQ, .content-ijyEx0, .indent-r1DrXk, .indentBackground-AXVSP_ {
+      transition-duration: 1ms;
+    }
+  }
 }
 

package/dist/components/empty/Empty_module.css

@@ -19,7 +19,7 @@
   .icon-LWbtAW {
     min-width: 0;
     padding: var(--moduix-empty-icon-padding, var(--moduix-spacing-3));
-    border-radius: var(--moduix-radius-full);
+    border-radius: var(--moduix-empty-icon-radius, var(--moduix-radius-full));
     background-color: var(--moduix-empty-icon-bg, var(--moduix-color-muted));
     color: var(--moduix-empty-icon-color, var(--moduix-color-muted-foreground));
     justify-content: center;
@@ -61,7 +61,7 @@
   }
 
   .description-_YR4BR > :first-child {
-    margin-top: 0;
+    margin-block-start: 0;
   }
 
   .description-_YR4BR > :last-child {

package/dist/components/field/Field_module.css

@@ -22,6 +22,7 @@
   .label-b5wNPe {
     align-items: center;
     gap: var(--moduix-field-label-gap, var(--moduix-spacing-2));
+    overflow-wrap: anywhere;
     color: var(--moduix-field-label-color, var(--moduix-color-foreground));
     font-size: var(--moduix-field-label-font-size, var(--moduix-text-sm));
     font-weight: var(--moduix-field-label-font-weight, var(--moduix-weight-medium));
@@ -30,6 +31,7 @@
   }
 
   .helperText-pAOAcE {
+    overflow-wrap: anywhere;
     color: var(--moduix-field-description-color, var(--moduix-color-muted-foreground));
     font-size: var(--moduix-field-description-font-size, var(--moduix-text-sm));
     line-height: var(--moduix-field-description-line-height, var(--moduix-line-height-text-sm));
@@ -85,8 +87,10 @@
   }
 
   .errorText-HCuYXk {
+    overflow-wrap: anywhere;
     color: var(--moduix-field-error-color, var(--moduix-color-destructive));
     font-size: var(--moduix-field-error-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-field-error-font-weight, var(--moduix-weight-medium));
     line-height: var(--moduix-field-error-line-height, var(--moduix-line-height-text-sm));
     margin: 0;
   }

package/dist/components/fieldset/Fieldset_module.css

@@ -27,6 +27,7 @@
   }
 
   .legend-tBpqK_ {
+    overflow-wrap: anywhere;
     max-inline-size: 100%;
     margin: var(--moduix-fieldset-legend-margin, 0);
     padding: var(--moduix-fieldset-legend-padding, 0 0 var(--moduix-spacing-3));
@@ -38,6 +39,7 @@
   }
 
   .helperText-slHAwI, .errorText-OdD9sO {
+    overflow-wrap: anywhere;
     font-size: var(--moduix-fieldset-message-font-size, var(--moduix-text-sm));
     line-height: var(--moduix-fieldset-message-line-height, var(--moduix-line-height-text-sm));
   }
@@ -48,6 +50,7 @@
 
   .errorText-OdD9sO {
     color: var(--moduix-fieldset-error-text-color, var(--moduix-color-destructive));
+    font-weight: var(--moduix-fieldset-error-text-font-weight, var(--moduix-weight-medium));
   }
 }
 

package/dist/components/file-upload/FileUpload.js

@@ -118,7 +118,7 @@ function getFileTypeLabel(file) {
     return extension ? extension.toUpperCase() : file.type || 'FILE';
 }
 function isImageFile(file) {
-    return file.type.startsWith('image/') || /\.(avif|bmp|gif|jpe?g|png|svg|webp)$/i.test(file.name);
+    return file.type.startsWith('image/');
 }
 const FileUpload_FileUploadItemName = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(FileUpload.ItemName, {

package/dist/components/floating-panel/FloatingPanel.d.ts

@@ -6,7 +6,6 @@ type FloatingPanelRootProps = ComponentProps<typeof FloatingPanelPrimitive.Root>
 type FloatingPanelRootProviderProps = ComponentProps<typeof FloatingPanelPrimitive.RootProvider> & OverlayPortalProps;
 declare function FloatingPanelRoot({ closeOnEscape, lazyMount, persistRect, portalled, portalRef, unmountOnExit, ...props }: FloatingPanelRootProps): import("react").JSX.Element;
 declare function FloatingPanelRootProvider({ lazyMount, portalled, portalRef, unmountOnExit, ...props }: FloatingPanelRootProviderProps): import("react").JSX.Element;
-declare function FloatingPanelFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
 declare function FloatingPanelResizeTriggerGroup({ axes, }: {
     axes?: readonly FloatingPanelResizeTriggerAxis[];
 }): import("react").JSX.Element;
@@ -25,7 +24,7 @@ declare const FloatingPanel: typeof FloatingPanelRoot & {
     CloseTrigger: import("react").ForwardRefExoticComponent<Omit<FloatingPanelPrimitive.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
     CloseIcon: import("react").ForwardRefExoticComponent<Omit<Omit<FloatingPanelPrimitive.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "asChild">, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
     Body: import("react").ForwardRefExoticComponent<Omit<FloatingPanelPrimitive.BodyProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-    Footer: typeof FloatingPanelFooter;
+    Footer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
     ResizeTrigger: import("react").ForwardRefExoticComponent<Omit<FloatingPanelPrimitive.ResizeTriggerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     ResizeTriggerGroup: typeof FloatingPanelResizeTriggerGroup;
     DragIndicator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/floating-panel/FloatingPanel.js

@@ -1,5 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
 import { FloatingPanel, useFloatingPanel, useFloatingPanelContext } from "@ark-ui/react/floating-panel";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
@@ -150,15 +151,16 @@ const FloatingPanel_FloatingPanelBody = /*#__PURE__*/ forwardRef(function({ clas
         ...props
     });
 });
-function FloatingPanelFooter({ className, ...props }) {
+const FloatingPanel_FloatingPanelFooter = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     const { ['data-minimized']: dataMinimized } = useFloatingPanelContext().getContentProps();
-    return /*#__PURE__*/ jsx("div", {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
         ...props,
         "data-slot": "floating-panel-footer",
         "data-minimized": dataMinimized,
-        className: clsx(FloatingPanel_module.footer, className)
+        className: clsx(FloatingPanel_module.footer, normalizeClassName(className))
     });
-}
+});
 const FloatingPanel_FloatingPanelResizeTrigger = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(FloatingPanel.ResizeTrigger, {
         ref: ref,
@@ -199,7 +201,7 @@ const FloatingPanel_FloatingPanel = Object.assign(FloatingPanelRoot, {
     CloseTrigger: FloatingPanel_FloatingPanelCloseTrigger,
     CloseIcon: FloatingPanel_FloatingPanelCloseIcon,
     Body: FloatingPanel_FloatingPanelBody,
-    Footer: FloatingPanelFooter,
+    Footer: FloatingPanel_FloatingPanelFooter,
     ResizeTrigger: FloatingPanel_FloatingPanelResizeTrigger,
     ResizeTriggerGroup: FloatingPanelResizeTriggerGroup,
     DragIndicator: FloatingPanel_FloatingPanelDragIndicator,

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