@moduix/react 2.2.4 → 2.3.0

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

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,