@moduix/react 2.5.1 → 2.6.0

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

@@ -3,51 +3,34 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Combobox } from "@ark-ui/react/combobox";
 import { Dialog, useDialog, useDialogContext } from "@ark-ui/react/dialog";
 import { ark } from "@ark-ui/react/factory";
+import { isHotKey } from "@zag-js/hotkeys";
 import { clsx } from "clsx";
 import { forwardRef, useEffect } from "react";
-import { CheckIcon } from "../../internal/icons/ui/index.js";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
+import { CheckIcon, CloseIcon } from "../../internal/icons/ui/index.js";
 import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
-import { CloseButton } from "../close-button/index.js";
+import CloseButton_module from "../close-button/CloseButton.module.js";
 import { Kbd } from "../kbd/index.js";
 import { ScrollArea } from "../scroll-area/index.js";
 import CommandPalette_module from "./CommandPalette.module.js";
 const DEFAULT_CLEAR_TRIGGER_LABEL = 'Clear search';
 const DEFAULT_SEARCH_INPUT_LABEL = 'Search commands';
-function isShortcutMatch(event, shortcut) {
-    const parts = shortcut.toLowerCase().split('+').map((part)=>part.trim()).filter(Boolean);
-    const [modifier, key] = parts;
-    if (!modifier || !key || 2 !== parts.length || event.shiftKey) return false;
-    const eventKey = event.key.toLowerCase();
-    const eventCode = event.code.startsWith('Key') || event.code.startsWith('Digit') ? event.code.slice(event.code.startsWith('Key') ? 3 : 5).toLowerCase() : event.code.toLowerCase();
-    if (eventKey !== key && eventCode !== key) return false;
-    if ('mod' === modifier) return (event.metaKey || event.ctrlKey) && !event.altKey;
-    if ('ctrl' === modifier || 'control' === modifier) return event.ctrlKey && !event.metaKey && !event.altKey;
-    if ('meta' === modifier || 'cmd' === modifier || 'command' === modifier) return event.metaKey && !event.ctrlKey && !event.altKey;
-    if ('alt' === modifier || 'option' === modifier) return event.altKey && !event.metaKey && !event.ctrlKey;
-    return false;
-}
-function isEditableTarget(target) {
-    if (!(target instanceof Element)) return false;
-    return null !== target.closest('input, textarea, select, [contenteditable], [contenteditable="true"]');
-}
-function CommandPaletteRoot({ shortcut = false, shortcutTarget, lazyMount = true, unmountOnExit = true, immediate, onExitComplete, portalled, present, portalRef, skipAnimationOnMount, children, ...props }) {
+function CommandPaletteRoot({ shortcut = false, lazyMount = true, unmountOnExit = true, immediate, onExitComplete, portalled, present, portalRef, skipAnimationOnMount, children, ...props }) {
     const dialog = useDialog(props);
     useEffect(()=>{
-        if (!shortcut || null === shortcutTarget) return;
-        const target = shortcutTarget ?? document;
+        if (!shortcut) return;
         const handleKeyDown = (event)=>{
-            if (event.defaultPrevented || event.repeat || event.isComposing || !isShortcutMatch(event, shortcut) || !dialog.open && isEditableTarget(event.target)) return;
+            if (event.defaultPrevented || event.repeat || event.isComposing || !isHotKey(shortcut, event, {
+                enableOnContentEditable: dialog.open,
+                enableOnFormTags: dialog.open
+            })) return;
             event.preventDefault();
             dialog.setOpen(!dialog.open);
         };
-        const eventListener = handleKeyDown;
-        target.addEventListener('keydown', eventListener);
-        return ()=>target.removeEventListener('keydown', eventListener);
+        document.addEventListener('keydown', handleKeyDown);
+        return ()=>document.removeEventListener('keydown', handleKeyDown);
     }, [
         dialog,
-        shortcut,
-        shortcutTarget
+        shortcut
     ]);
     return /*#__PURE__*/ jsx(OverlayPortalProvider, {
         portalled: portalled,
@@ -80,7 +63,7 @@ const CommandPalette_CommandPaletteTrigger = /*#__PURE__*/ forwardRef(function({
         ref: ref,
         asChild: asChild,
         "data-slot": "command-palette-trigger",
-        className: clsx(!asChild && CommandPalette_module.trigger, normalizeClassName(className)),
+        className: clsx(!asChild && CommandPalette_module.trigger, className),
         ...props
     });
 });
@@ -89,7 +72,7 @@ const CommandPalette_CommandPaletteBackdrop = /*#__PURE__*/ forwardRef(function(
         children: /*#__PURE__*/ jsx(Dialog.Backdrop, {
             ref: ref,
             "data-slot": "command-palette-backdrop",
-            className: clsx(CommandPalette_module.backdrop, normalizeClassName(className)),
+            className: clsx(CommandPalette_module.backdrop, className),
             ...props
         })
     });
@@ -99,7 +82,7 @@ const CommandPalette_CommandPalettePositioner = /*#__PURE__*/ forwardRef(functio
         children: /*#__PURE__*/ jsx(Dialog.Positioner, {
             ref: ref,
             "data-slot": "command-palette-positioner",
-            className: clsx(CommandPalette_module.positioner, normalizeClassName(className)),
+            className: clsx(CommandPalette_module.positioner, className),
             ...props
         })
     });
@@ -108,7 +91,7 @@ const CommandPalette_CommandPaletteContent = /*#__PURE__*/ forwardRef(function({
     return /*#__PURE__*/ jsx(Dialog.Content, {
         ref: ref,
         "data-slot": "command-palette-content",
-        className: clsx(CommandPalette_module.content, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.content, className),
         ...props
     });
 });
@@ -132,7 +115,7 @@ const CommandPalette_CommandPaletteTitle = /*#__PURE__*/ forwardRef(function({ c
     return /*#__PURE__*/ jsx(Dialog.Title, {
         ref: ref,
         "data-slot": "command-palette-title",
-        className: clsx(CommandPalette_module.title, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.title, className),
         ...props
     });
 });
@@ -140,7 +123,7 @@ const CommandPalette_CommandPaletteDescription = /*#__PURE__*/ forwardRef(functi
     return /*#__PURE__*/ jsx(Dialog.Description, {
         ref: ref,
         "data-slot": "command-palette-description",
-        className: clsx(CommandPalette_module.description, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.description, className),
         ...props
     });
 });
@@ -148,7 +131,7 @@ const CommandPalette_CommandPaletteHeader = /*#__PURE__*/ forwardRef(function({
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
         "data-slot": "command-palette-header",
-        className: clsx(CommandPalette_module.header, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.header, className),
         ...props
     });
 });
@@ -156,7 +139,7 @@ const CommandPalette_CommandPaletteBody = /*#__PURE__*/ forwardRef(function({ cl
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
         "data-slot": "command-palette-body",
-        className: clsx(CommandPalette_module.body, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.body, className),
         ...props
     });
 });
@@ -169,7 +152,7 @@ const CommandPalette_CommandPaletteCombobox = /*#__PURE__*/ forwardRef(function(
     return /*#__PURE__*/ jsx(Combobox.Root, {
         ref: ref,
         "data-slot": "command-palette-combobox",
-        className: clsx(CommandPalette_module.combobox, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.combobox, className),
         open: open,
         inputBehavior: inputBehavior,
         selectionBehavior: selectionBehavior,
@@ -183,7 +166,7 @@ const CommandPalette_CommandPaletteControl = /*#__PURE__*/ forwardRef(function({
     return /*#__PURE__*/ jsx(Combobox.Control, {
         ref: ref,
         "data-slot": "command-palette-control",
-        className: clsx(CommandPalette_module.control, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.control, className),
         ...props
     });
 });
@@ -191,13 +174,12 @@ const CommandPalette_CommandPaletteInput = /*#__PURE__*/ forwardRef(function({ c
     return /*#__PURE__*/ jsx(Combobox.Input, {
         ref: ref,
         "data-slot": "command-palette-input",
-        className: clsx(CommandPalette_module.input, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.input, className),
         ...props
     });
 });
-const CommandPalette_CommandPaletteSearch = /*#__PURE__*/ forwardRef(function({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, clearTriggerProps, controlProps, ...props }, ref) {
+const CommandPalette_CommandPaletteSearch = /*#__PURE__*/ forwardRef(function({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }, ref) {
     return /*#__PURE__*/ jsxs(CommandPalette_CommandPaletteControl, {
-        ...controlProps,
         children: [
             /*#__PURE__*/ jsx(CommandPalette_CommandPaletteInput, {
                 ref: ref,
@@ -205,50 +187,41 @@ const CommandPalette_CommandPaletteSearch = /*#__PURE__*/ forwardRef(function({
                 "aria-labelledby": ariaLabelledBy,
                 ...props
             }),
-            /*#__PURE__*/ jsx(CommandPalette_CommandPaletteClearTrigger, {
-                ...clearTriggerProps
-            })
+            /*#__PURE__*/ jsx(CommandPalette_CommandPaletteClearTrigger, {})
         ]
     });
 });
-const CommandPalette_CommandPaletteClearTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, children, disabled, onClick, onPointerDown, tabIndex, 'aria-controls': ariaControls, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }, ref) {
+const CommandPalette_CommandPaletteClearTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, children, onClick, onPointerDown, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }, ref) {
     return /*#__PURE__*/ jsx(Combobox.Context, {
-        children: (combobox)=>{
-            const inputProps = combobox.getInputProps();
-            const isInvalid = true === inputProps['aria-invalid'] || 'true' === inputProps['aria-invalid'];
-            return /*#__PURE__*/ jsx(CloseButton.Root, {
+        children: (combobox)=>/*#__PURE__*/ jsx(Combobox.ClearTrigger, {
                 ref: ref,
                 asChild: asChild,
                 ...props,
-                disabled: disabled ?? combobox.disabled,
-                "data-scope": "combobox",
-                "data-part": "clear-trigger",
                 "data-slot": "command-palette-clear-trigger",
-                "data-invalid": isInvalid ? '' : void 0,
                 hidden: 0 === combobox.inputValue.length,
-                tabIndex: tabIndex ?? -1,
-                "aria-controls": ariaControls ?? inputProps.id,
                 "aria-label": ariaLabel ?? (asChild || null != children || null != ariaLabelledBy ? void 0 : DEFAULT_CLEAR_TRIGGER_LABEL),
                 "aria-labelledby": ariaLabelledBy,
-                className: clsx(CommandPalette_module.clearTrigger, normalizeClassName(className)),
+                className: clsx(CloseButton_module.root, CommandPalette_module.clearTrigger, className),
+                onClick: (event)=>{
+                    onClick?.(event);
+                    if (!event.defaultPrevented) {
+                        event.preventDefault();
+                        combobox.setInputValue('');
+                    }
+                },
                 onPointerDown: (event)=>{
                     onPointerDown?.(event);
                     if (0 === event.button) event.preventDefault();
                 },
-                onClick: (event)=>{
-                    onClick?.(event);
-                    if (!event.defaultPrevented) combobox.setInputValue('');
-                },
-                children: children
-            });
-        }
+                children: children ?? /*#__PURE__*/ jsx(CloseIcon, {})
+            })
     });
 });
 const CommandPalette_CommandPaletteList = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(Combobox.Content, {
         ref: ref,
         "data-slot": "command-palette-list",
-        className: clsx(CommandPalette_module.list, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.list, className),
         ...props,
         children: /*#__PURE__*/ jsx(ScrollArea, {
             "data-slot": "command-palette-scroll-area",
@@ -269,7 +242,7 @@ const CommandPalette_CommandPaletteEmpty = /*#__PURE__*/ forwardRef(function({ c
     return /*#__PURE__*/ jsx(Combobox.Empty, {
         ref: ref,
         "data-slot": "command-palette-empty",
-        className: clsx(CommandPalette_module.empty, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.empty, className),
         ...props
     });
 });
@@ -277,7 +250,7 @@ const CommandPalette_CommandPaletteItemGroup = /*#__PURE__*/ forwardRef(function
     return /*#__PURE__*/ jsx(Combobox.ItemGroup, {
         ref: ref,
         "data-slot": "command-palette-item-group",
-        className: clsx(CommandPalette_module.itemGroup, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.itemGroup, className),
         ...props
     });
 });
@@ -285,7 +258,7 @@ const CommandPalette_CommandPaletteItemGroupLabel = /*#__PURE__*/ forwardRef(fun
     return /*#__PURE__*/ jsx(Combobox.ItemGroupLabel, {
         ref: ref,
         "data-slot": "command-palette-item-group-label",
-        className: clsx(CommandPalette_module.itemGroupLabel, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.itemGroupLabel, className),
         ...props
     });
 });
@@ -293,7 +266,7 @@ const CommandPalette_CommandPaletteItem = /*#__PURE__*/ forwardRef(function({ cl
     return /*#__PURE__*/ jsx(Combobox.Item, {
         ref: ref,
         "data-slot": "command-palette-item",
-        className: clsx(CommandPalette_module.item, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.item, className),
         ...props
     });
 });
@@ -301,7 +274,7 @@ const CommandPalette_CommandPaletteItemText = /*#__PURE__*/ forwardRef(function(
     return /*#__PURE__*/ jsx(Combobox.ItemText, {
         ref: ref,
         "data-slot": "command-palette-item-text",
-        className: clsx(CommandPalette_module.itemText, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.itemText, className),
         ...props
     });
 });
@@ -309,7 +282,7 @@ const CommandPalette_CommandPaletteItemIndicator = /*#__PURE__*/ forwardRef(func
     return /*#__PURE__*/ jsx(Combobox.ItemIndicator, {
         ref: ref,
         "data-slot": "command-palette-item-indicator",
-        className: clsx(CommandPalette_module.itemIndicator, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.itemIndicator, className),
         ...props,
         children: children ?? /*#__PURE__*/ jsx(CheckIcon, {})
     });
@@ -318,7 +291,7 @@ const CommandPalette_CommandPaletteItemIcon = /*#__PURE__*/ forwardRef(function(
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
         "data-slot": "command-palette-item-icon",
-        className: clsx(CommandPalette_module.itemIcon, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.itemIcon, className),
         ...props
     });
 });
@@ -326,7 +299,7 @@ const CommandPalette_CommandPaletteItemLabel = /*#__PURE__*/ forwardRef(function
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
         "data-slot": "command-palette-item-label",
-        className: clsx(CommandPalette_module.itemLabel, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.itemLabel, className),
         ...props
     });
 });
@@ -334,7 +307,7 @@ const CommandPalette_CommandPaletteItemDescription = /*#__PURE__*/ forwardRef(fu
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
         "data-slot": "command-palette-item-description",
-        className: clsx(CommandPalette_module.itemDescription, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.itemDescription, className),
         ...props
     });
 });
@@ -342,7 +315,7 @@ const CommandPalette_CommandPaletteItemMeta = /*#__PURE__*/ forwardRef(function(
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
         "data-slot": "command-palette-item-meta",
-        className: clsx(CommandPalette_module.itemMeta, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.itemMeta, className),
         ...props
     });
 });
@@ -351,7 +324,7 @@ const CommandPalette_CommandPaletteSeparator = /*#__PURE__*/ forwardRef(function
         ref: ref,
         role: "separator",
         "data-slot": "command-palette-separator",
-        className: clsx(CommandPalette_module.separator, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.separator, className),
         ...props
     });
 });
@@ -359,14 +332,14 @@ const CommandPalette_CommandPaletteFooter = /*#__PURE__*/ forwardRef(function({
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
         "data-slot": "command-palette-footer",
-        className: clsx(CommandPalette_module.footer, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.footer, className),
         ...props
     });
 });
 function CommandPaletteKbd({ className, ...props }) {
     return /*#__PURE__*/ jsx(Kbd.Root, {
         "data-slot": "command-palette-kbd",
-        className: clsx(CommandPalette_module.kbd, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.kbd, className),
         ...props
     });
 }

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

@@ -41,7 +41,6 @@
   .backdrop-Y8_IJU {
     z-index: calc(var(--moduix-z-backdrop) + var(--layer-index, 0));
     background-color: var(--moduix-command-palette-backdrop-bg, var(--moduix-backdrop-bg, var(--moduix-color-overlay)));
-    min-height: 100dvh;
     -webkit-backdrop-filter: var(--moduix-backdrop-filter, blur(var(--moduix-command-palette-backdrop-blur, 4px)));
     backdrop-filter: var(--moduix-backdrop-filter, blur(var(--moduix-command-palette-backdrop-blur, 4px)));
     position: fixed;
@@ -127,9 +126,9 @@
   }
 
   .clearTrigger-n6fuk6 {
-    --moduix-close-button-size: var(--moduix-command-palette-clear-size, var(--moduix-size-sm));
+    --moduix-close-button-size: var(--moduix-command-palette-clear-size, var(--moduix-spacing-6));
     --moduix-close-button-radius: var(--moduix-command-palette-clear-radius, var(--moduix-radius-md));
-    --moduix-close-button-icon-size: var(--moduix-command-palette-icon-size, var(--moduix-spacing-4));
+    --moduix-close-button-icon-size: var(--moduix-command-palette-icon-size, var(--moduix-spacing-3));
     --moduix-close-button-bg: transparent;
     --moduix-close-button-bg-hover: var(--moduix-command-palette-clear-bg-hover, var(--moduix-color-accent));
     --moduix-close-button-color: var(--moduix-command-palette-muted-color, var(--moduix-color-muted-foreground));
@@ -192,6 +191,7 @@
     background: none;
     border: 0;
     outline: 0;
+    flex: auto;
     margin: 0;
     padding: 0;
   }
@@ -296,16 +296,8 @@
   }
 
   .item-UA3NPh[data-highlighted] {
-    color: var(--moduix-command-palette-highlight-color, var(--moduix-color-foreground));
-  }
-
-  .item-UA3NPh[data-highlighted]:before {
-    content: "";
-    z-index: -1;
-    border-radius: inherit;
     background-color: var(--moduix-command-palette-highlight-bg, var(--moduix-color-accent));
-    position: absolute;
-    inset: 0;
+    color: var(--moduix-command-palette-highlight-color, var(--moduix-color-foreground));
   }
 
   .item-UA3NPh[data-state="checked"] {
@@ -330,18 +322,13 @@
     display: inline-flex;
   }
 
-  :is(.itemIcon-EO6ViN, .itemIndicator-nhPwW2) > svg {
-    width: var(--moduix-command-palette-item-icon-size, var(--moduix-spacing-4));
-    height: var(--moduix-command-palette-item-icon-size, var(--moduix-spacing-4));
-  }
-
   .itemIndicator-nhPwW2 {
     background-color: #0000;
     border-color: #0000;
     justify-self: end;
   }
 
-  .itemIndicator-nhPwW2 > svg {
+  .itemIcon-EO6ViN > svg, .itemIndicator-nhPwW2 > svg {
     width: var(--moduix-command-palette-item-icon-size, var(--moduix-spacing-4));
     height: var(--moduix-command-palette-item-icon-size, var(--moduix-spacing-4));
   }
@@ -446,5 +433,11 @@
       scale: var(--moduix-command-palette-content-ending-scale, var(--moduix-popup-motion-ending-scale, var(--moduix-scale-popup)));
     }
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .backdrop-Y8_IJU, .content-EVNfnh {
+      animation: none;
+    }
+  }
 }
 

package/dist/components/container/Container.js

@@ -2,7 +2,6 @@ import { jsx } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import Container_module from "./Container.module.js";
 const Container_ContainerRoot = /*#__PURE__*/ forwardRef(function({ size = 'lg', gutter = 'md', className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
@@ -13,7 +12,7 @@ const Container_ContainerRoot = /*#__PURE__*/ forwardRef(function({ size = 'lg',
         "data-slot": "container-root",
         "data-size": size,
         "data-gutter": gutter,
-        className: clsx(Container_module.root, normalizeClassName(className))
+        className: clsx(Container_module.root, className)
     });
 });
 const Container = Object.assign(Container_ContainerRoot, {

package/dist/components/date-input/DateInput.d.ts

@@ -1,19 +1,17 @@
 import { DateInput as DateInputPrimitive, type DateInputDateValue, useDateInput, useDateInputContext } from '@ark-ui/react/date-input';
-import type { ComponentProps, ReactNode } from 'react';
-type DateInputFormProps = {
-    names?: readonly [string, string];
-};
+import type { ComponentProps } from 'react';
 declare function DateInputSeparator({ className, 'aria-hidden': ariaHidden, role, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
-declare const DateInput: import("react").ForwardRefExoticComponent<Omit<DateInputPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement> & DateInputFormProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
-    Root: import("react").ForwardRefExoticComponent<Omit<DateInputPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement> & DateInputFormProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-    RootProvider: import("react").ForwardRefExoticComponent<Omit<DateInputPrimitive.RootProviderProps & import("react").RefAttributes<HTMLDivElement> & DateInputFormProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const DateInput: import("react").ForwardRefExoticComponent<Omit<DateInputPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    Root: import("react").ForwardRefExoticComponent<Omit<DateInputPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    RootProvider: import("react").ForwardRefExoticComponent<Omit<DateInputPrimitive.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    HiddenInput: import("react").ForwardRefExoticComponent<DateInputPrimitive.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;
     Label: import("react").ForwardRefExoticComponent<Omit<DateInputPrimitive.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
     Control: import("react").ForwardRefExoticComponent<Omit<DateInputPrimitive.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     SegmentGroup: import("react").ForwardRefExoticComponent<Omit<DateInputPrimitive.SegmentGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Segment: import("react").ForwardRefExoticComponent<Omit<DateInputPrimitive.SegmentProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-    Segments: import("react").ForwardRefExoticComponent<Omit<Omit<DateInputPrimitive.SegmentGroupProps & import("react").RefAttributes<HTMLDivElement>, "children" | "asChild">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Segments: import("react").ForwardRefExoticComponent<Omit<Omit<DateInputPrimitive.SegmentGroupProps & import("react").RefAttributes<HTMLDivElement>, "asChild" | "children">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Separator: typeof DateInputSeparator;
-    Context: (props: DateInputPrimitive.ContextProps) => ReactNode;
+    Context: (props: DateInputPrimitive.ContextProps) => import("react").ReactNode;
     SegmentContext: (props: DateInputPrimitive.SegmentContextProps) => import("react").JSX.Element[];
 };
 export { DateInput, type DateInputDateValue, useDateInput, useDateInputContext };

package/dist/components/date-input/DateInput.js

@@ -1,35 +1,30 @@
 "use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { DateInput, useDateInput, useDateInputContext } from "@ark-ui/react/date-input";
 import { clsx } from "clsx";
-import { Children, cloneElement, forwardRef } from "react";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
+import { forwardRef } from "react";
 import DateInput_module from "./DateInput.module.js";
-const DateInput_DateInputRoot = /*#__PURE__*/ forwardRef(function({ asChild, children, className, names, ...props }, ref) {
+const DateInput_DateInputRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(DateInput.Root, {
         ref: ref,
         "data-slot": "date-input-root",
-        className: clsx(DateInput_module.root, normalizeClassName(className)),
-        asChild: asChild,
-        ...props,
-        children: withHiddenInputs(children, asChild, names)
+        className: clsx(DateInput_module.root, className),
+        ...props
     });
 });
-const DateInput_DateInputRootProvider = /*#__PURE__*/ forwardRef(function({ asChild, children, className, names, ...props }, ref) {
+const DateInput_DateInputRootProvider = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(DateInput.RootProvider, {
         ref: ref,
         "data-slot": "date-input-root-provider",
-        className: clsx(DateInput_module.root, normalizeClassName(className)),
-        asChild: asChild,
-        ...props,
-        children: withHiddenInputs(children, asChild, names)
+        className: clsx(DateInput_module.root, className),
+        ...props
     });
 });
 const DateInput_DateInputLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(DateInput.Label, {
         ref: ref,
         "data-slot": "date-input-label",
-        className: clsx(DateInput_module.label, normalizeClassName(className)),
+        className: clsx(DateInput_module.label, className),
         ...props
     });
 });
@@ -37,7 +32,7 @@ const DateInput_DateInputControl = /*#__PURE__*/ forwardRef(function({ className
     return /*#__PURE__*/ jsx(DateInput.Control, {
         ref: ref,
         "data-slot": "date-input-control",
-        className: clsx(DateInput_module.control, normalizeClassName(className)),
+        className: clsx(DateInput_module.control, className),
         ...props
     });
 });
@@ -45,7 +40,7 @@ const DateInput_DateInputSegmentGroup = /*#__PURE__*/ forwardRef(function({ clas
     return /*#__PURE__*/ jsx(DateInput.SegmentGroup, {
         ref: ref,
         "data-slot": "date-input-segment-group",
-        className: clsx(DateInput_module.segmentGroup, normalizeClassName(className)),
+        className: clsx(DateInput_module.segmentGroup, className),
         ...props
     });
 });
@@ -53,7 +48,7 @@ const DateInput_DateInputSegment = /*#__PURE__*/ forwardRef(function({ className
     return /*#__PURE__*/ jsx(DateInput.Segment, {
         ref: ref,
         "data-slot": "date-input-segment",
-        className: clsx(DateInput_module.segment, normalizeClassName(className)),
+        className: clsx(DateInput_module.segment, className),
         ...props
     });
 });
@@ -68,44 +63,19 @@ const DateInput_DateInputSegments = /*#__PURE__*/ forwardRef(function(props, ref
         })
     });
 });
-function withHiddenInputs(children, asChild, names) {
-    const hiddenInputs = /*#__PURE__*/ jsx(DateInputFormInputs, {
-        names: names
-    });
-    if (!asChild) return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            children,
-            hiddenInputs
-        ]
-    });
-    const child = Children.only(children);
-    return /*#__PURE__*/ cloneElement(child, {}, child.props.children, hiddenInputs);
-}
-function DateInputFormInputs({ names }) {
-    const dateInput = useDateInputContext();
-    const inputCount = Math.max(dateInput.displayValues.length, 1);
-    return /*#__PURE__*/ jsx(Fragment, {
-        children: Array.from({
-            length: inputCount
-        }, (_, index)=>/*#__PURE__*/ jsx(DateInput.HiddenInput, {
-                index: index,
-                name: names?.[index],
-                "data-slot": "date-input-hidden-input"
-            }, index))
-    });
-}
 function DateInputSeparator({ className, 'aria-hidden': ariaHidden = true, role = 'presentation', ...props }) {
     return /*#__PURE__*/ jsx("span", {
         "data-slot": "date-input-separator",
         "aria-hidden": ariaHidden,
         role: role,
-        className: clsx(DateInput_module.separator, normalizeClassName(className)),
+        className: clsx(DateInput_module.separator, className),
         ...props
     });
 }
 const DateInput_DateInput = Object.assign(DateInput_DateInputRoot, {
     Root: DateInput_DateInputRoot,
     RootProvider: DateInput_DateInputRootProvider,
+    HiddenInput: DateInput.HiddenInput,
     Label: DateInput_DateInputLabel,
     Control: DateInput_DateInputControl,
     SegmentGroup: DateInput_DateInputSegmentGroup,

package/dist/components/date-input/DateInput_module.css

@@ -94,7 +94,6 @@
 
   .segment-AyTFWd[data-type="literal"] {
     min-width: auto;
-    box-shadow: none;
     color: var(--moduix-date-input-separator-color, var(--moduix-color-muted-foreground));
     pointer-events: none;
     background: none;

package/dist/components/date-picker/DatePicker.d.ts

@@ -1,7 +1,7 @@
 import { useDatePicker, useDatePickerContext, type UseDatePickerReturn } from '@ark-ui/react/date-picker';
 import { DatePicker as DatePickerPrimitive } from '@ark-ui/react/date-picker';
 import type { ComponentProps } from 'react';
-import { type OverlayPortalProps } from '../../internal/overlayPortal';
+import { type OverlayPortalProps } from '../../internal/overlayPortal.js';
 type DatePickerRootProps = ComponentProps<typeof DatePickerPrimitive.Root> & OverlayPortalProps;
 type DatePickerRootProviderProps = ComponentProps<typeof DatePickerPrimitive.RootProvider> & OverlayPortalProps;
 type DatePickerFieldProps = ComponentProps<typeof DatePickerPrimitive.Control> & {