@moduix/react 2.2.4 → 2.2.5

package/dist/components/close-button/CloseButton.js

@@ -5,8 +5,18 @@ import { forwardRef } from "react";
 import { CloseIcon } from "../../internal/icons/ui/index.js";
 import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import CloseButton_module from "./CloseButton.module.js";
-const CloseButton_CloseButtonRoot = /*#__PURE__*/ forwardRef(function({ asChild, className, children, disabled, onClick, type, 'aria-disabled': ariaDisabled, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'data-disabled': dataDisabled, 'data-part': dataPart, 'data-scope': dataScope, 'data-slot': dataSlot, ...props }, ref) {
+const CloseButton_CloseButtonRoot = /*#__PURE__*/ forwardRef(function({ asChild, className, children, disabled, onClick, onClickCapture, type, 'aria-disabled': ariaDisabled, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'data-disabled': dataDisabled, 'data-part': dataPart, 'data-scope': dataScope, 'data-slot': dataSlot, ...props }, ref) {
     const isDisabled = disabled || true === ariaDisabled || 'true' === ariaDisabled || void 0 !== dataDisabled;
+    const nativeDisabled = asChild ? void 0 : disabled;
+    const resolvedAriaDisabled = asChild && disabled ? true : ariaDisabled;
+    const handleClickCapture = (event)=>{
+        if (isDisabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        onClickCapture?.(event);
+    };
     const handleClick = (event)=>{
         if (isDisabled) {
             event.preventDefault();
@@ -20,15 +30,16 @@ const CloseButton_CloseButtonRoot = /*#__PURE__*/ forwardRef(function({ asChild,
         asChild: asChild,
         ...props,
         type: asChild ? type : type ?? 'button',
-        disabled: disabled,
+        disabled: nativeDisabled,
         "data-scope": dataScope ?? 'close-button',
         "data-part": dataPart ?? 'root',
         "data-slot": dataSlot ?? 'close-button-root',
         "data-disabled": dataDisabled ?? (isDisabled ? '' : void 0),
         className: clsx(CloseButton_module.root, normalizeClassName(className)),
-        "aria-disabled": ariaDisabled,
+        "aria-disabled": resolvedAriaDisabled,
         "aria-label": ariaLabel ?? (null == ariaLabelledBy ? 'Close' : void 0),
         "aria-labelledby": ariaLabelledBy,
+        onClickCapture: handleClickCapture,
         onClick: handleClick,
         children: children || /*#__PURE__*/ jsx(CloseIcon, {})
     });

package/dist/components/collapsible/Collapsible_module.css

@@ -145,5 +145,16 @@
     padding: var(--moduix-collapsible-body-padding, var(--moduix-spacing-2));
     display: grid;
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .trigger-o93fRO, .indicator-ll1vd8 {
+      transition: none;
+    }
+
+    .content-dHAw0w[data-state] {
+      animation-duration: 1ms;
+      animation-delay: 0s;
+    }
+  }
 }
 

package/dist/components/color-picker/ColorPicker.js

@@ -3,7 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ColorPicker, parseColor, useColorPicker, useColorPickerContext } from "@ark-ui/react/color-picker";
 import { clsx } from "clsx";
 import { Children, cloneElement, forwardRef } from "react";
-import { CheckIcon, PipetteIcon } from "../../internal/icons/ui/index.js";
+import { CheckIcon, ChevronDownIcon, PipetteIcon } from "../../internal/icons/ui/index.js";
 import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
 import ColorPicker_module from "./ColorPicker.module.js";
@@ -220,11 +220,21 @@ const ColorPicker_ColorPickerEyeDropperTrigger = /*#__PURE__*/ forwardRef(functi
     });
 });
 const ColorPicker_ColorPickerFormatSelect = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
-    return /*#__PURE__*/ jsx(ColorPicker.FormatSelect, {
-        ref: ref,
-        "data-slot": "color-picker-format-select",
-        className: clsx(ColorPicker_module.formatSelect, normalizeClassName(className)),
-        ...props
+    return /*#__PURE__*/ jsxs("span", {
+        className: ColorPicker_module.formatSelectControl,
+        children: [
+            /*#__PURE__*/ jsx(ColorPicker.FormatSelect, {
+                ref: ref,
+                "data-slot": "color-picker-format-select",
+                className: clsx(ColorPicker_module.formatSelect, normalizeClassName(className)),
+                ...props
+            }),
+            /*#__PURE__*/ jsx("span", {
+                "aria-hidden": "true",
+                className: ColorPicker_module.formatSelectIndicator,
+                children: /*#__PURE__*/ jsx(ChevronDownIcon, {})
+            })
+        ]
     });
 });
 const ColorPicker_ColorPickerFormatTrigger = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {

package/dist/components/color-picker/ColorPicker.module.js

@@ -20,6 +20,8 @@ const ColorPicker_module = {
     channelSliderValueText: "channelSliderValueText-ZFMCO7",
     channelInput: "channelInput-KxngYC",
     formatSelect: "formatSelect-jD2i0e",
+    formatSelectControl: "formatSelectControl-S40Hse",
+    formatSelectIndicator: "formatSelectIndicator-VJN6PV",
     eyeDropperTrigger: "eyeDropperTrigger-jF9YiQ",
     formatTrigger: "formatTrigger-pUu2zb",
     swatchGroup: "swatchGroup-c99XUr",

package/dist/components/color-picker/ColorPicker_module.css

@@ -93,7 +93,7 @@
     overflow: hidden;
   }
 
-  .trigger-o5tyg7:is(:focus-visible, [data-focus]) {
+  .trigger-o5tyg7:is(:focus-visible, [data-state="open"]) {
     border-color: var(--moduix-color-picker-focus-ring-color, var(--moduix-color-ring));
     outline-color: var(--moduix-color-picker-focus-ring-color, var(--moduix-color-ring));
   }
@@ -161,6 +161,13 @@
             var(--moduix-popup-motion-easing, var(--moduix-ease-in-out)));
   }
 
+  @media (prefers-reduced-motion: reduce) {
+    .content-z7zabu[data-state] {
+      animation-duration: 1ms;
+      animation-delay: 0s;
+    }
+  }
+
   .area-t8_R52 {
     box-sizing: border-box;
     width: 100%;
@@ -305,7 +312,6 @@
         -1);
     transition: border-color var(--moduix-color-picker-transition, var(--moduix-transition-default)),
       outline-color var(--moduix-color-picker-transition, var(--moduix-transition-default));
-    appearance: textfield;
     margin: 0;
   }
 
@@ -323,18 +329,19 @@
     opacity: var(--moduix-color-picker-disabled-opacity, var(--moduix-opacity-disabled));
   }
 
-  :is(.channelInput-KxngYC, .formatSelect-jD2i0e)::-webkit-outer-spin-button {
-    appearance: none;
-    margin: 0;
+  .channelInput-KxngYC {
+    appearance: textfield;
+    flex: 1;
   }
 
-  :is(.channelInput-KxngYC, .formatSelect-jD2i0e)::-webkit-inner-spin-button {
+  .channelInput-KxngYC::-webkit-outer-spin-button {
     appearance: none;
     margin: 0;
   }
 
-  .channelInput-KxngYC {
-    flex: 1;
+  .channelInput-KxngYC::-webkit-inner-spin-button {
+    appearance: none;
+    margin: 0;
   }
 
   .channelInput-KxngYC[data-channel="alpha"] {
@@ -342,9 +349,77 @@
     flex: 0 0 var(--moduix-color-picker-alpha-input-width, 4rem);
   }
 
+  .formatSelectControl-S40Hse {
+    flex-shrink: 0;
+    width: -moz-fit-content;
+    width: fit-content;
+    min-width: 0;
+    max-width: 100%;
+    display: inline-grid;
+    position: relative;
+  }
+
   .formatSelect-jD2i0e {
-    cursor: pointer;
     width: auto;
+    appearance: none;
+    cursor: pointer;
+    text-transform: uppercase;
+    padding-inline-end: calc(var(--moduix-color-picker-input-padding-x, var(--moduix-spacing-3)) +
+        var(--moduix-color-picker-icon-size, var(--moduix-spacing-4)) + var(--moduix-spacing-1));
+  }
+
+  .formatSelect-jD2i0e:is([disabled], [data-disabled]) {
+    cursor: default;
+  }
+
+  @media (forced-colors: active) {
+    .formatSelect-jD2i0e {
+      appearance: auto;
+      padding-inline-end: var(--moduix-color-picker-input-padding-x, var(--moduix-spacing-3));
+    }
+  }
+
+  .formatSelectIndicator-VJN6PV {
+    top: 50%;
+    width: var(--moduix-color-picker-icon-size, var(--moduix-spacing-4));
+    height: var(--moduix-color-picker-icon-size, var(--moduix-spacing-4));
+    border-radius: var(--moduix-radius-sm);
+    background: var(--moduix-color-picker-action-bg, transparent);
+    color: var(--moduix-color-picker-action-color, var(--moduix-color-muted-foreground));
+    pointer-events: none;
+    transition: background-color var(--moduix-color-picker-transition, var(--moduix-transition-default)),
+      color var(--moduix-color-picker-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-color-picker-transition, var(--moduix-transition-default));
+    justify-content: center;
+    align-items: center;
+    line-height: 0;
+    display: inline-flex;
+    position: absolute;
+    inset-inline-end: var(--moduix-color-picker-input-padding-x, var(--moduix-spacing-3));
+    transform: translateY(-50%);
+  }
+
+  .formatSelectIndicator-VJN6PV > svg {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+
+  @media (forced-colors: active) {
+    .formatSelectIndicator-VJN6PV {
+      display: none;
+    }
+  }
+
+  @media (hover: hover) {
+    .formatSelect-jD2i0e:not(:is([disabled], [data-disabled])):hover + .formatSelectIndicator-VJN6PV {
+      background-color: var(--moduix-color-picker-action-bg-hover, var(--moduix-color-muted));
+      color: var(--moduix-color-picker-action-color-hover, var(--moduix-color-foreground));
+    }
+  }
+
+  .formatSelect-jD2i0e:is([disabled], [data-disabled]) + .formatSelectIndicator-VJN6PV {
+    opacity: var(--moduix-color-picker-disabled-opacity, var(--moduix-opacity-disabled));
   }
 
   .eyeDropperTrigger-jF9YiQ, .formatTrigger-pUu2zb {

package/dist/components/combobox/Combobox.d.ts

@@ -16,7 +16,7 @@ declare const Combobox: ComboboxPrimitive.RootComponent<OverlayPortalProps> & {
     Positioner: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.PositionerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Content: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Empty: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.EmptyProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-    Status: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Status: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
     List: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.ListProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     ItemGroup: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.ItemGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     ItemGroupLabel: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.ItemGroupLabelProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/combobox/Combobox.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Combobox, useCombobox, useComboboxContext, useComboboxItemContext } from "@ark-ui/react/combobox";
+import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
 import { CheckIcon, ChevronUpDownIcon } from "../../internal/icons/ui/index.js";
@@ -122,7 +123,7 @@ const Combobox_ComboboxEmpty = /*#__PURE__*/ forwardRef(function({ className, ..
     });
 });
 const Combobox_ComboboxStatus = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
-    return /*#__PURE__*/ jsx("div", {
+    return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
         "data-slot": "combobox-status",
         className: clsx(Combobox_module.status, normalizeClassName(className)),

package/dist/components/combobox/Combobox_module.css

@@ -254,7 +254,7 @@
   }
 
   .itemGroup-yxILwV + .itemGroup-yxILwV {
-    margin-top: var(--moduix-combobox-item-group-gap, var(--moduix-spacing-2));
+    margin-block-start: var(--moduix-combobox-item-group-gap, var(--moduix-spacing-2));
   }
 
   .itemGroupLabel-XrjPai {

package/dist/components/command-palette/CommandPalette.js

@@ -250,26 +250,18 @@ const CommandPalette_CommandPaletteList = /*#__PURE__*/ forwardRef(function({ cl
         "data-slot": "command-palette-list",
         className: clsx(CommandPalette_module.list, normalizeClassName(className)),
         ...props,
-        children: /*#__PURE__*/ jsxs(ScrollArea, {
+        children: /*#__PURE__*/ jsx(ScrollArea, {
             "data-slot": "command-palette-scroll-area",
             className: CommandPalette_module.scrollArea,
-            children: [
-                /*#__PURE__*/ jsx(ScrollArea.Viewport, {
-                    "data-slot": "command-palette-scroll-viewport",
-                    className: CommandPalette_module.scrollViewport,
-                    children: /*#__PURE__*/ jsx(ScrollArea.Content, {
-                        "data-slot": "command-palette-scroll-content",
-                        className: CommandPalette_module.scrollContent,
-                        children: children
-                    })
-                }),
-                /*#__PURE__*/ jsx(ScrollArea.Scrollbar, {
-                    "data-slot": "command-palette-scrollbar",
-                    className: CommandPalette_module.scrollbar,
-                    children: /*#__PURE__*/ jsx(ScrollArea.Thumb, {})
-                }),
-                /*#__PURE__*/ jsx(ScrollArea.Corner, {})
-            ]
+            children: /*#__PURE__*/ jsx(ScrollArea.Viewport, {
+                "data-slot": "command-palette-scroll-viewport",
+                className: CommandPalette_module.scrollViewport,
+                children: /*#__PURE__*/ jsx(ScrollArea.Content, {
+                    "data-slot": "command-palette-scroll-content",
+                    className: CommandPalette_module.scrollContent,
+                    children: children
+                })
+            })
         })
     });
 });

package/dist/components/command-palette/CommandPalette.module.js

@@ -25,7 +25,6 @@ const CommandPalette_module = {
     scrollArea: "scrollArea-ncZoUD",
     scrollViewport: "scrollViewport-Fh34Bl",
     scrollContent: "scrollContent-Xew5ld",
-    scrollbar: "scrollbar-hnOYgf",
     itemGroup: "itemGroup-glHNMl",
     itemGroupLabel: "itemGroupLabel-JWv82S",
     item: "item-UA3NPh",

package/dist/components/command-palette/CommandPalette_module.css

@@ -159,9 +159,9 @@
     align-items: center;
     gap: var(--moduix-command-palette-input-gap, var(--moduix-spacing-2));
     min-height: var(--moduix-command-palette-input-height, var(--moduix-size-md));
-    margin: var(--moduix-command-palette-control-margin-y, var(--moduix-spacing-2))
-      var(--moduix-command-palette-control-margin-x, var(--moduix-spacing-4))
-      var(--moduix-command-palette-control-margin-bottom, var(--moduix-spacing-2));
+    margin: var(--moduix-command-palette-control-margin-y, var(--moduix-spacing-3))
+      var(--moduix-command-palette-control-margin-x, var(--moduix-spacing-3))
+      var(--moduix-command-palette-control-margin-bottom, var(--moduix-command-palette-control-margin-y, 0));
     border: var(--moduix-command-palette-input-border-width, var(--moduix-border-width-sm)) solid
       var(--moduix-command-palette-input-border-color, var(--moduix-color-border));
     border-radius: var(--moduix-command-palette-input-radius, var(--moduix-radius-md));
@@ -228,14 +228,8 @@
 
   .scrollArea-ncZoUD {
     --moduix-scroll-area-radius: 0;
-    --moduix-scroll-area-scrollbar-margin: var(--moduix-command-palette-scrollbar-margin, var(--moduix-spacing-1));
-    --moduix-scroll-area-scrollbar-size: var(--moduix-command-palette-scrollbar-size, var(--moduix-spacing-1-5));
-    --moduix-scroll-area-thumb-bg: var(--moduix-command-palette-scrollbar-thumb-bg, var(--moduix-color-border));
-    --moduix-scroll-area-content-padding: var(--moduix-command-palette-list-padding-y, var(--moduix-spacing-2))
-      calc(var(--moduix-command-palette-list-padding-x, var(--moduix-spacing-2)) +
-          var(--moduix-scroll-area-scrollbar-size) + var(--moduix-scroll-area-scrollbar-margin))
-      var(--moduix-command-palette-list-padding-y, var(--moduix-spacing-2))
-      var(--moduix-command-palette-list-padding-x, var(--moduix-spacing-2));
+    --moduix-scroll-area-content-padding: var(--moduix-command-palette-list-padding-y, var(--moduix-spacing-3))
+      var(--moduix-command-palette-list-padding-x, var(--moduix-spacing-3));
     --moduix-scroll-area-height: auto;
     width: 100%;
     min-height: 0;
@@ -255,10 +249,6 @@
     padding: 0;
   }
 
-  .scrollbar-hnOYgf {
-    --moduix-scroll-area-scrollbar-bg: transparent;
-  }
-
   .itemGroup-glHNMl {
     gap: var(--moduix-command-palette-group-gap, var(--moduix-spacing-1));
     display: grid;

package/dist/components/container/Container_module.css

@@ -1,30 +1,30 @@
 @layer moduix.components {
   .root-U4_b43 {
-    --moduix-container-gutter: var(--moduix-container-gutter-md, clamp(var(--moduix-spacing-4), 4vw, var(--moduix-spacing-8)));
-    --moduix-container-max-width: var(--moduix-container-max-width-lg, 72rem);
+    --_container-gutter: var(--moduix-container-gutter-md, clamp(var(--moduix-spacing-4), 4vw, var(--moduix-spacing-8)));
+    --_container-max-width: var(--moduix-container-max-width-lg, 72rem);
     box-sizing: border-box;
     width: 100%;
-    max-width: calc(var(--moduix-container-max-width) + (var(--moduix-container-gutter) * 2));
+    max-width: calc(var(--_container-max-width) + (var(--_container-gutter) * 2));
     min-width: 0;
-    padding-inline: var(--moduix-container-gutter);
+    padding-inline: var(--_container-gutter);
     margin-inline: auto;
     display: block;
   }
 
   .root-U4_b43[data-size="xs"] {
-    --moduix-container-max-width: var(--moduix-container-max-width-xs, 40rem);
+    --_container-max-width: var(--moduix-container-max-width-xs, 40rem);
   }
 
   .root-U4_b43[data-size="sm"] {
-    --moduix-container-max-width: var(--moduix-container-max-width-sm, 48rem);
+    --_container-max-width: var(--moduix-container-max-width-sm, 48rem);
   }
 
   .root-U4_b43[data-size="md"] {
-    --moduix-container-max-width: var(--moduix-container-max-width-md, 64rem);
+    --_container-max-width: var(--moduix-container-max-width-md, 64rem);
   }
 
   .root-U4_b43[data-size="xl"] {
-    --moduix-container-max-width: var(--moduix-container-max-width-xl, 90rem);
+    --_container-max-width: var(--moduix-container-max-width-xl, 90rem);
   }
 
   .root-U4_b43[data-size="full"] {
@@ -32,15 +32,15 @@
   }
 
   .root-U4_b43[data-gutter="none"] {
-    --moduix-container-gutter: 0;
+    --_container-gutter: 0;
   }
 
   .root-U4_b43[data-gutter="sm"] {
-    --moduix-container-gutter: var(--moduix-container-gutter-sm, clamp(var(--moduix-spacing-3), 3vw, var(--moduix-spacing-6)));
+    --_container-gutter: var(--moduix-container-gutter-sm, clamp(var(--moduix-spacing-3), 3vw, var(--moduix-spacing-6)));
   }
 
   .root-U4_b43[data-gutter="lg"] {
-    --moduix-container-gutter: var(--moduix-container-gutter-lg, clamp(var(--moduix-spacing-6), 5vw, 3rem));
+    --_container-gutter: var(--moduix-container-gutter-lg, clamp(var(--moduix-spacing-6), 5vw, 3rem));
   }
 }
 

package/dist/components/date-picker/DatePicker.js

@@ -1,6 +1,8 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { DatePicker, useDatePicker, useDatePickerContext } from "@ark-ui/react/date-picker";
+import { useFieldContext } from "@ark-ui/react/field";
+import { useFieldsetContext } from "@ark-ui/react/fieldset";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
 import { CalendarIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "../../internal/icons/ui/index.js";
@@ -8,7 +10,9 @@ import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
 import { CloseButton } from "../close-button/index.js";
 import DatePicker_module from "./DatePicker.module.js";
-const DatePicker_DatePickerRoot = /*#__PURE__*/ forwardRef(function({ className, lazyMount = true, portalled, portalRef, unmountOnExit = true, ...props }, ref) {
+const DatePicker_DatePickerRoot = /*#__PURE__*/ forwardRef(function({ className, disabled, invalid, lazyMount = true, portalled, portalRef, readOnly, required, unmountOnExit = true, ...props }, ref) {
+    const field = useFieldContext();
+    const fieldset = useFieldsetContext();
     return /*#__PURE__*/ jsx(OverlayPortalProvider, {
         portalled: portalled,
         portalRef: portalRef,
@@ -16,7 +20,11 @@ const DatePicker_DatePickerRoot = /*#__PURE__*/ forwardRef(function({ className,
             ref: ref,
             "data-slot": "date-picker-root",
             className: clsx(DatePicker_module.root, normalizeClassName(className)),
+            disabled: disabled ?? field?.disabled ?? fieldset?.disabled,
+            invalid: invalid ?? field?.invalid ?? fieldset?.invalid,
             lazyMount: lazyMount,
+            readOnly: readOnly ?? field?.readOnly,
+            required: required ?? field?.required,
             unmountOnExit: unmountOnExit,
             ...props
         })
@@ -61,7 +69,8 @@ const DatePicker_DatePickerField = /*#__PURE__*/ forwardRef(function({ clearLabe
                 ...void 0 === placeholder ? {} : {
                     placeholder
                 },
-                ...inputProps
+                ...inputProps,
+                index: 0
             }),
             /*#__PURE__*/ jsx(DatePicker_DatePickerClearTrigger, {
                 ...void 0 === clearLabel ? {} : {
@@ -84,18 +93,18 @@ const DatePicker_DatePickerRangeField = /*#__PURE__*/ forwardRef(function({ clea
         ...props,
         children: [
             /*#__PURE__*/ jsx(DatePicker_DatePickerInput, {
-                index: 0,
                 ...void 0 === startPlaceholder ? {} : {
                     placeholder: startPlaceholder
                 },
-                ...startInputProps
+                ...startInputProps,
+                index: 0
             }),
             /*#__PURE__*/ jsx(DatePicker_DatePickerInput, {
-                index: 1,
                 ...void 0 === endPlaceholder ? {} : {
                     placeholder: endPlaceholder
                 },
-                ...endInputProps
+                ...endInputProps,
+                index: 1
             }),
             /*#__PURE__*/ jsx(DatePicker_DatePickerClearTrigger, {
                 ...void 0 === clearLabel ? {} : {

package/dist/components/dialog/Dialog.d.ts

@@ -5,9 +5,6 @@ type DialogRootProps = ComponentProps<typeof DialogPrimitive.Root> & OverlayPort
 type DialogRootProviderProps = ComponentProps<typeof DialogPrimitive.RootProvider> & OverlayPortalProps;
 declare function DialogRoot({ lazyMount, portalled, portalRef, unmountOnExit, ...props }: DialogRootProps): import("react").JSX.Element;
 declare function DialogRootProvider({ lazyMount, portalled, portalRef, unmountOnExit, ...props }: DialogRootProviderProps): import("react").JSX.Element;
-declare function DialogHeader({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-declare function DialogBody({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-declare function DialogFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
 declare const Dialog: typeof DialogRoot & {
     Root: typeof DialogRoot;
     RootProvider: typeof DialogRootProvider;
@@ -20,9 +17,9 @@ declare const Dialog: typeof DialogRoot & {
     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 DialogHeader;
-    Body: typeof DialogBody;
-    Footer: typeof DialogFooter;
+    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>>;
 };
 export { Dialog, useDialog, useDialogContext };
 export type { DialogRootProps, DialogRootProviderProps };

package/dist/components/dialog/Dialog.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 } from "react";
 import { normalizeClassName } from "../../internal/normalizeClassName.js";
@@ -105,27 +106,30 @@ const Dialog_DialogCloseIcon = /*#__PURE__*/ forwardRef(function({ className, ch
         })
     });
 });
-function DialogHeader({ className, ...props }) {
-    return /*#__PURE__*/ jsx("div", {
+const Dialog_DialogHeader = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
         "data-slot": "dialog-header",
-        className: clsx(Dialog_module.header, className),
+        className: clsx(Dialog_module.header, normalizeClassName(className)),
         ...props
     });
-}
-function DialogBody({ className, ...props }) {
-    return /*#__PURE__*/ jsx("div", {
+});
+const Dialog_DialogBody = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
         "data-slot": "dialog-body",
-        className: clsx(Dialog_module.body, className),
+        className: clsx(Dialog_module.body, normalizeClassName(className)),
         ...props
     });
-}
-function DialogFooter({ className, ...props }) {
-    return /*#__PURE__*/ jsx("div", {
+});
+const Dialog_DialogFooter = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
         "data-slot": "dialog-footer",
-        className: clsx(Dialog_module.footer, className),
+        className: clsx(Dialog_module.footer, normalizeClassName(className)),
         ...props
     });
-}
+});
 const Dialog_Dialog = Object.assign(DialogRoot, {
     Root: DialogRoot,
     RootProvider: DialogRootProvider,
@@ -138,8 +142,8 @@ const Dialog_Dialog = Object.assign(DialogRoot, {
     Description: Dialog_DialogDescription,
     CloseTrigger: Dialog_DialogCloseTrigger,
     CloseIcon: Dialog_DialogCloseIcon,
-    Header: DialogHeader,
-    Body: DialogBody,
-    Footer: DialogFooter
+    Header: Dialog_DialogHeader,
+    Body: Dialog_DialogBody,
+    Footer: Dialog_DialogFooter
 });
 export { Dialog_Dialog as Dialog, useDialog, useDialogContext };

package/dist/components/dialog/Dialog_module.css

@@ -180,7 +180,7 @@
   .footer-E1Avqe {
     justify-content: flex-end;
     gap: var(--moduix-dialog-footer-gap, var(--moduix-spacing-2));
-    margin-top: var(--moduix-dialog-footer-margin-top, var(--moduix-spacing-6));
+    margin-block-start: var(--moduix-dialog-footer-margin-top, var(--moduix-spacing-6));
     display: flex;
   }
 
@@ -232,5 +232,16 @@
       scale: var(--moduix-dialog-content-ending-scale, var(--moduix-popup-motion-ending-scale, var(--moduix-scale-popup)));
     }
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .backdrop-If26oI[data-state], .content-efn3VB[data-state] {
+      animation-duration: 1ms;
+      animation-delay: 0s;
+    }
+
+    .content-efn3VB {
+      transition: none;
+    }
+  }
 }
 

package/dist/components/drawer/Drawer.d.ts

@@ -8,9 +8,6 @@ type DrawerContentProps = ComponentProps<typeof DrawerPrimitive.Content> & {
 };
 declare function DrawerRoot({ lazyMount, portalled, portalRef, unmountOnExit, ...props }: DrawerRootProps): import("react").JSX.Element;
 declare function DrawerRootProvider({ lazyMount, portalled, portalRef, unmountOnExit, ...props }: DrawerRootProviderProps): import("react").JSX.Element;
-declare function DrawerHeader({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-declare function DrawerBody({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-declare function DrawerFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
 declare const Drawer: typeof DrawerRoot & {
     Root: typeof DrawerRoot;
     RootProvider: typeof DrawerRootProvider;
@@ -29,8 +26,8 @@ declare const Drawer: typeof DrawerRoot & {
     SwipeArea: import("react").ForwardRefExoticComponent<Omit<DrawerPrimitive.SwipeAreaProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Indent: import("react").ForwardRefExoticComponent<Omit<DrawerPrimitive.IndentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     IndentBackground: import("react").ForwardRefExoticComponent<Omit<DrawerPrimitive.IndentBackgroundProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-    Header: typeof DrawerHeader;
-    Body: typeof DrawerBody;
-    Footer: typeof DrawerFooter;
+    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>>;
 };
 export { Drawer, useDrawer, useDrawerContext, useDrawerStackContext };