@moduix/react 1.1.1 → 2.1.0

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

@@ -1,24 +1,28 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import DateInput_module_default from "./DateInput.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { forwardRef } from "react";
-import { DateInput } from "@ark-ui/react/date-input";
+import { Children, cloneElement, forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { DateInput, useDateInput, useDateInputContext } from "@ark-ui/react/date-input";
 //#region src/components/date-input/DateInput.tsx
-const DateInputRoot = forwardRef(function DateInputRoot({ className, ...props }, ref) {
+const DateInputRoot = forwardRef(function DateInputRoot({ asChild, children, className, names, ...props }, ref) {
 	return /* @__PURE__ */ jsx(DateInput.Root, {
 		ref,
 		"data-slot": "date-input-root",
 		className: clsx(DateInput_module_default.root, normalizeClassName(className)),
-		...props
+		asChild,
+		...props,
+		children: withHiddenInputs(children, asChild, names)
 	});
 });
-const DateInputRootProvider = forwardRef(function DateInputRootProvider({ className, ...props }, ref) {
+const DateInputRootProvider = forwardRef(function DateInputRootProvider({ asChild, children, className, names, ...props }, ref) {
 	return /* @__PURE__ */ jsx(DateInput.RootProvider, {
 		ref,
 		"data-slot": "date-input-root-provider",
 		className: clsx(DateInput_module_default.root, normalizeClassName(className)),
-		...props
+		asChild,
+		...props,
+		children: withHiddenInputs(children, asChild, names)
 	});
 });
 const DateInputLabel = forwardRef(function DateInputLabel({ className, ...props }, ref) {
@@ -53,13 +57,28 @@ const DateInputSegment = forwardRef(function DateInputSegment({ className, ...pr
 		...props
 	});
 });
-const DateInputHiddenInput = forwardRef(function DateInputHiddenInput(props, ref) {
-	return /* @__PURE__ */ jsx(DateInput.HiddenInput, {
+const DateInputSegments = forwardRef(function DateInputSegments(props, ref) {
+	return /* @__PURE__ */ jsx(DateInputSegmentGroup, {
 		ref,
-		"data-slot": "date-input-hidden-input",
-		...props
+		...props,
+		children: /* @__PURE__ */ jsx(DateInput.SegmentContext, { children: (segment) => /* @__PURE__ */ jsx(DateInputSegment, { segment }) })
 	});
 });
+function withHiddenInputs(children, asChild, names) {
+	const hiddenInputs = /* @__PURE__ */ jsx(DateInputFormInputs, { names });
+	if (!asChild) return /* @__PURE__ */ jsxs(Fragment$1, { children: [children, hiddenInputs] });
+	const child = Children.only(children);
+	return cloneElement(child, {}, child.props.children, hiddenInputs);
+}
+function DateInputFormInputs({ names }) {
+	const dateInput = useDateInputContext();
+	const inputCount = Math.max(dateInput.displayValues.length, names?.length ?? 0, 1);
+	return /* @__PURE__ */ jsx(Fragment$1, { children: Array.from({ length: inputCount }, (_, index) => /* @__PURE__ */ jsx(DateInput.HiddenInput, {
+		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",
@@ -76,8 +95,10 @@ const DateInput$1 = Object.assign(DateInputRoot, {
 	Control: DateInputControl,
 	SegmentGroup: DateInputSegmentGroup,
 	Segment: DateInputSegment,
-	HiddenInput: DateInputHiddenInput,
-	Separator: DateInputSeparator
+	Segments: DateInputSegments,
+	Separator: DateInputSeparator,
+	Context: DateInput.Context,
+	SegmentContext: DateInput.SegmentContext
 });
 //#endregion
-export { DateInput$1 as DateInput };
+export { DateInput$1 as DateInput, useDateInput, useDateInputContext };

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

@@ -1,2 +1,2 @@
-import { DateInput } from "./DateInput.js";
-export { DateInput };
+import { DateInput, DateInputDateValue, useDateInput, useDateInputContext } from "./DateInput.js";
+export { DateInput, type DateInputDateValue, useDateInput, useDateInputContext };

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

@@ -1,8 +1,10 @@
 @layer ui.components {
   @keyframes a48aUa_date-picker-content-open {
     from {
-      opacity: var(--date-picker-content-closed-opacity, 0);
-      transform: scale(var(--date-picker-content-closed-scale, var(--scale-popup)));
+      opacity: var(--date-picker-content-closed-opacity, var(--popup-motion-starting-opacity, 0));
+      translate: var(--popup-motion-starting-translate-x, 0)
+        var(--popup-motion-starting-translate-y, 0);
+      transform: scale(var(--date-picker-content-closed-scale, var(--popup-motion-starting-scale, var(--scale-popup))));
     }
 
     to {
@@ -18,8 +20,9 @@
     }
 
     to {
-      opacity: var(--date-picker-content-closed-opacity, 0);
-      transform: scale(var(--date-picker-content-closed-scale, var(--scale-popup)));
+      opacity: var(--date-picker-content-closed-opacity, var(--popup-motion-ending-opacity, 0));
+      translate: var(--popup-motion-ending-translate-x, 0) var(--popup-motion-ending-translate-y, 0);
+      transform: scale(var(--date-picker-content-closed-scale, var(--popup-motion-ending-scale, var(--scale-popup))));
     }
   }
 
@@ -62,20 +65,22 @@
     box-sizing: border-box;
     width: 100%;
     min-width: min(var(--date-picker-input-min-width, 7.5rem), 100%);
-    height: var(--date-picker-control-height, var(--size-lg));
+    height: var(--date-picker-control-height, var(--size-md));
     border: var(--date-picker-border-width, var(--border-width-sm)) solid
       var(--date-picker-border-color, var(--color-border));
     border-radius: var(--date-picker-radius, var(--radius-md));
-    padding-block: var(--date-picker-input-padding-y, .5rem);
-    padding-inline: var(--date-picker-input-padding-x-start, .875rem)
+    padding-block: var(--date-picker-input-padding-y, var(--spacing-1));
+    padding-inline: var(--date-picker-input-padding-x-start, var(--spacing-3-5))
       var(--date-picker-input-padding-x-end, 4.25rem);
     background-color: var(--date-picker-bg, var(--color-background));
     color: inherit;
     font: inherit;
     font-size: var(--date-picker-font-size, var(--text-md));
     line-height: var(--date-picker-line-height, var(--line-height-text-md));
-    outline: var(--date-picker-focus-ring-width, var(--border-width-sm)) solid transparent;
-    outline-offset: calc(var(--date-picker-focus-ring-width, var(--border-width-sm)) * -1);
+    outline: var(--date-picker-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+      solid transparent;
+    outline-offset: calc(var(--date-picker-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))) *
+        -1);
     transition: background-color var(--date-picker-transition, var(--transition-default)),
       border-color var(--date-picker-transition, var(--transition-default)),
       color var(--date-picker-transition, var(--transition-default)),
@@ -102,32 +107,25 @@
     &:is([disabled], [data-disabled], [readonly], [data-readonly]) {
       cursor: default;
     }
-
-    .a48aUa_control:not([data-disabled], [data-readonly]) & {
-      @media (hover: hover) {
-        &:hover {
-          background-color: var(--date-picker-bg-hover, var(--color-accent));
-        }
-      }
-    }
   }
 
   .a48aUa_control:has(.a48aUa_input + .a48aUa_input) .a48aUa_input {
     min-width: min(var(--date-picker-range-input-min-width, 7.5rem), 100%);
-    padding-inline-end: var(--date-picker-input-padding-x-start, .875rem);
+    padding-inline-end: var(--date-picker-input-padding-x-start, var(--spacing-3-5));
   }
 
   .a48aUa_control:has(.a48aUa_input + .a48aUa_input) .a48aUa_input:last-of-type {
     padding-inline-end: var(--date-picker-input-padding-x-end, 4.25rem);
   }
 
-  .a48aUa_trigger, .a48aUa_navTrigger, .a48aUa_viewTrigger, .a48aUa_clearTrigger, .a48aUa_presetTrigger {
+  .a48aUa_trigger, .a48aUa_navTrigger, .a48aUa_viewTrigger, .a48aUa_presetTrigger {
     box-sizing: border-box;
     border-radius: var(--date-picker-action-radius, var(--radius-sm));
     background: var(--date-picker-action-bg, transparent);
     color: var(--date-picker-icon-color, var(--color-muted-foreground));
     font: inherit;
-    outline: var(--date-picker-action-focus-ring-width, var(--border-width-sm)) solid transparent;
+    outline: var(--date-picker-action-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+      solid transparent;
     outline-offset: var(--date-picker-action-focus-ring-offset, 0);
     cursor: pointer;
     transition: background-color var(--date-picker-transition, var(--transition-default)),
@@ -144,8 +142,8 @@
     display: inline-flex;
 
     & > svg {
-      width: var(--date-picker-icon-size, 1rem);
-      height: var(--date-picker-icon-size, 1rem);
+      width: var(--date-picker-icon-size, var(--spacing-4));
+      height: var(--date-picker-icon-size, var(--spacing-4));
       display: block;
     }
 
@@ -172,21 +170,43 @@
     }
   }
 
-  .a48aUa_trigger, .a48aUa_clearTrigger {
-    width: var(--date-picker-action-size, 1.5rem);
-    height: var(--date-picker-action-size, 1.5rem);
-    position: absolute;
+  .a48aUa_trigger {
+    width: var(--date-picker-action-size, var(--size-xs));
+    height: var(--date-picker-action-size, var(--size-xs));
     top: 50%;
+    position: absolute;
+    inset-inline-end: var(--date-picker-trigger-offset-right, var(--spacing-2));
     transform: translateY(-50%);
   }
 
-  .a48aUa_trigger {
-    right: var(--date-picker-trigger-offset-right, .5rem);
-  }
-
   .a48aUa_clearTrigger {
-    right: calc(var(--date-picker-trigger-offset-right, .5rem) + var(--date-picker-action-size, 1.5rem) +
-        var(--date-picker-action-gap, .125rem));
+    --close-button-size: var(--date-picker-action-size, var(--size-xs));
+    --close-button-icon-size: var(--date-picker-icon-size, var(--spacing-4));
+    --close-button-radius: var(--date-picker-action-radius, var(--radius-sm));
+    --close-button-bg: var(--date-picker-action-bg, transparent);
+    --close-button-bg-hover: var(--date-picker-action-bg-hover, var(--color-muted));
+    --close-button-color: var(--date-picker-icon-color, var(--color-muted-foreground));
+    --close-button-color-hover: var(--date-picker-action-color-hover, var(--color-foreground));
+    --close-button-disabled-opacity: var(--date-picker-disabled-opacity, var(--opacity-disabled));
+    --close-button-focus-ring-width: var(--date-picker-action-focus-ring-width, var(--border-width-sm));
+    --close-button-focus-ring-color: var(--date-picker-focus-ring-color, var(--color-ring));
+    --close-button-focus-ring-offset: var(--date-picker-action-focus-ring-offset, 0);
+    --close-button-transition: var(--date-picker-transition, var(--transition-default));
+    top: 50%;
+    position: absolute;
+    inset-inline-end: calc(var(--date-picker-trigger-offset-right, var(--spacing-2)) +
+        var(--date-picker-action-size, var(--size-xs)) +
+        var(--date-picker-action-gap, var(--spacing-0-5)));
+    transform: translateY(-50%);
+
+    &[data-focus] {
+      outline: var(--close-button-focus-ring-width) solid var(--close-button-focus-ring-color);
+      outline-offset: var(--close-button-focus-ring-offset);
+    }
+
+    &[hidden] {
+      display: none;
+    }
   }
 
   .a48aUa_positioner {
@@ -215,11 +235,15 @@
     overflow: auto;
 
     &[data-state="open"] {
-      animation: a48aUa_date-picker-content-open var(--date-picker-transition, var(--transition-default));
+      animation: a48aUa_date-picker-content-open
+        var(--date-picker-transition, var(--popup-motion-duration, var(--duration-normal))
+            var(--popup-motion-easing, var(--ease-in-out)));
     }
 
     &[data-state="closed"] {
-      animation: a48aUa_date-picker-content-closed var(--date-picker-transition, var(--transition-default));
+      animation: a48aUa_date-picker-content-closed
+        var(--date-picker-transition, var(--popup-motion-duration, var(--duration-normal))
+            var(--popup-motion-easing, var(--ease-in-out)));
       pointer-events: none;
     }
   }
@@ -244,13 +268,13 @@
   }
 
   .a48aUa_navTrigger {
-    width: var(--date-picker-nav-trigger-size, 2rem);
-    height: var(--date-picker-nav-trigger-size, 2rem);
+    width: var(--date-picker-nav-trigger-size, var(--size-sm));
+    height: var(--date-picker-nav-trigger-size, var(--size-sm));
   }
 
   .a48aUa_viewTrigger {
     min-width: 0;
-    min-height: var(--date-picker-view-trigger-height, 2rem);
+    min-height: var(--date-picker-view-trigger-height, var(--size-sm));
     gap: var(--date-picker-view-trigger-gap, var(--spacing-2));
     padding-inline: var(--date-picker-view-trigger-padding-x, var(--spacing-2));
     color: var(--date-picker-view-trigger-color, var(--color-foreground));
@@ -270,12 +294,12 @@
   .a48aUa_table {
     border-collapse: separate;
     width: 100%;
-    border-spacing: var(--date-picker-table-cell-gap, .125rem);
+    border-spacing: var(--date-picker-table-cell-gap, var(--spacing-0-5));
     table-layout: fixed;
   }
 
   .a48aUa_tableHeader, .a48aUa_weekNumberCell {
-    width: var(--date-picker-table-cell-size, 2.25rem);
+    width: var(--date-picker-table-cell-size, var(--size-sm));
     height: var(--date-picker-table-header-height, 1.75rem);
     color: var(--date-picker-table-header-color, var(--color-muted-foreground));
     font-size: var(--date-picker-table-header-font-size, var(--text-xs));
@@ -285,8 +309,8 @@
   }
 
   .a48aUa_tableCell {
-    width: var(--date-picker-table-cell-size, 2.25rem);
-    height: var(--date-picker-table-cell-size, 2.25rem);
+    width: var(--date-picker-table-cell-size, var(--size-sm));
+    height: var(--date-picker-table-cell-size, var(--size-sm));
     text-align: center;
     padding: 0;
   }
@@ -299,8 +323,8 @@
   .a48aUa_tableCellTrigger {
     box-sizing: border-box;
     width: 100%;
-    min-width: var(--date-picker-table-cell-size, 2.25rem);
-    height: var(--date-picker-table-cell-size, 2.25rem);
+    min-width: var(--date-picker-table-cell-size, var(--size-sm));
+    height: var(--date-picker-table-cell-size, var(--size-sm));
     border: var(--date-picker-table-cell-border-width, 0) solid
       var(--date-picker-table-cell-border-color, transparent);
     border-radius: var(--date-picker-table-cell-radius, var(--radius-sm));
@@ -309,9 +333,10 @@
     font: inherit;
     font-size: var(--date-picker-table-cell-font-size, var(--text-sm));
     line-height: var(--date-picker-table-cell-line-height, var(--line-height-text-sm));
-    outline: var(--date-picker-table-cell-focus-ring-width, var(--border-width-sm)) solid
-      transparent;
-    outline-offset: calc(var(--date-picker-table-cell-focus-ring-width, var(--border-width-sm)) * -1);
+    outline: var(--date-picker-table-cell-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+      solid transparent;
+    outline-offset: calc(var(--date-picker-table-cell-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))) *
+        -1);
     cursor: pointer;
     transition: background-color var(--date-picker-transition, var(--transition-default)),
       border-color var(--date-picker-transition, var(--transition-default)),
@@ -365,19 +390,21 @@
     box-sizing: border-box;
     width: 100%;
     min-width: 0;
-    min-height: var(--date-picker-select-height, 2rem);
+    min-height: var(--date-picker-select-height, var(--size-sm));
     border: var(--date-picker-select-border-width, var(--border-width-sm)) solid
       var(--date-picker-select-border-color, var(--color-border));
     border-radius: var(--date-picker-select-radius, var(--radius-sm));
-    padding-block: var(--date-picker-select-padding-y, .25rem);
+    padding-block: var(--date-picker-select-padding-y, var(--spacing-1));
     padding-inline: var(--date-picker-select-padding-x, var(--spacing-2));
     background-color: var(--date-picker-select-bg, var(--color-background));
     color: var(--date-picker-select-color, var(--color-foreground));
     font: inherit;
     font-size: var(--date-picker-select-font-size, var(--text-sm));
     line-height: var(--date-picker-select-line-height, var(--line-height-text-sm));
-    outline: var(--date-picker-select-focus-ring-width, var(--border-width-sm)) solid transparent;
-    outline-offset: calc(var(--date-picker-select-focus-ring-width, var(--border-width-sm)) * -1);
+    outline: var(--date-picker-select-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+      solid transparent;
+    outline-offset: calc(var(--date-picker-select-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))) *
+        -1);
     cursor: pointer;
     transition: background-color var(--date-picker-transition, var(--transition-default)),
       border-color var(--date-picker-transition, var(--transition-default)),
@@ -388,16 +415,10 @@
       border-color: var(--date-picker-focus-ring-color, var(--color-ring));
       outline-color: var(--date-picker-focus-ring-color, var(--color-ring));
     }
-
-    @media (hover: hover) {
-      &:hover {
-        background-color: var(--date-picker-select-bg-hover, var(--color-accent));
-      }
-    }
   }
 
   .a48aUa_presetTrigger {
-    min-height: var(--date-picker-preset-trigger-height, 2rem);
+    min-height: var(--date-picker-preset-trigger-height, var(--size-sm));
     padding-inline: var(--date-picker-preset-trigger-padding-x, var(--spacing-2));
     background-color: var(--date-picker-preset-trigger-bg, var(--color-muted));
     color: var(--date-picker-preset-trigger-color, var(--color-foreground));

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

@@ -1,15 +1,42 @@
 import { OverlayPortalProps } from "../../lib/moduix/overlayPortal.js";
 import { ComponentProps } from "react";
-import { DatePicker } from "@ark-ui/react/date-picker";
+import { DatePicker, UseDatePickerReturn, useDatePicker, useDatePickerContext } from "@ark-ui/react/date-picker";
 
 //#region src/components/date-picker/DatePicker.d.ts
 type DatePickerRootProps = ComponentProps<typeof DatePicker.Root> & OverlayPortalProps;
 type DatePickerRootProviderProps = ComponentProps<typeof DatePicker.RootProvider> & OverlayPortalProps;
+type DatePickerFieldProps = ComponentProps<typeof DatePicker.Control> & {
+  clearLabel?: string;
+  clearTriggerProps?: ComponentProps<typeof DatePicker.ClearTrigger>;
+  inputProps?: ComponentProps<typeof DatePicker.Input>;
+  placeholder?: ComponentProps<typeof DatePicker.Input>['placeholder'];
+  triggerLabel?: string;
+  triggerProps?: ComponentProps<typeof DatePicker.Trigger>;
+};
+type DatePickerRangeFieldProps = ComponentProps<typeof DatePicker.Control> & {
+  clearLabel?: string;
+  clearTriggerProps?: ComponentProps<typeof DatePicker.ClearTrigger>;
+  endInputProps?: ComponentProps<typeof DatePicker.Input>;
+  endPlaceholder?: ComponentProps<typeof DatePicker.Input>['placeholder'];
+  startInputProps?: ComponentProps<typeof DatePicker.Input>;
+  startPlaceholder?: ComponentProps<typeof DatePicker.Input>['placeholder'];
+  triggerLabel?: string;
+  triggerProps?: ComponentProps<typeof DatePicker.Trigger>;
+};
+type DatePickerOffset = ReturnType<UseDatePickerReturn['getOffset']>;
+type DatePickerDayTableProps = ComponentProps<typeof DatePicker.Table> & {
+  offset?: DatePickerOffset;
+  showHeader?: boolean;
+  showWeekNumbers?: boolean;
+};
 declare const DatePicker$1: import("react").ForwardRefExoticComponent<Omit<DatePickerRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
   Root: import("react").ForwardRefExoticComponent<Omit<DatePickerRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   RootProvider: import("react").ForwardRefExoticComponent<Omit<DatePickerRootProviderProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Context: (props: DatePicker.ContextProps) => import("react").ReactNode;
   Label: import("react").ForwardRefExoticComponent<Omit<DatePicker.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
   Control: import("react").ForwardRefExoticComponent<Omit<DatePicker.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Field: import("react").ForwardRefExoticComponent<Omit<DatePickerFieldProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  RangeField: import("react").ForwardRefExoticComponent<Omit<DatePickerRangeFieldProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Input: import("react").ForwardRefExoticComponent<Omit<DatePicker.InputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
   Trigger: import("react").ForwardRefExoticComponent<Omit<DatePicker.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   ClearTrigger: import("react").ForwardRefExoticComponent<Omit<DatePicker.ClearTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
@@ -29,6 +56,7 @@ declare const DatePicker$1: import("react").ForwardRefExoticComponent<Omit<DateP
   TableHeader: import("react").ForwardRefExoticComponent<Omit<DatePicker.TableHeaderProps & import("react").RefAttributes<HTMLTableCellElement>, "ref"> & import("react").RefAttributes<HTMLTableCellElement>>;
   TableCell: import("react").ForwardRefExoticComponent<Omit<DatePicker.TableCellProps & import("react").RefAttributes<HTMLTableCellElement>, "ref"> & import("react").RefAttributes<HTMLTableCellElement>>;
   TableCellTrigger: import("react").ForwardRefExoticComponent<Omit<DatePicker.TableCellTriggerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  DayTable: import("react").ForwardRefExoticComponent<Omit<DatePickerDayTableProps, "ref"> & import("react").RefAttributes<HTMLTableElement>>;
   WeekNumberHeaderCell: import("react").ForwardRefExoticComponent<Omit<DatePicker.WeekNumberHeaderCellProps & import("react").RefAttributes<HTMLTableCellElement>, "ref"> & import("react").RefAttributes<HTMLTableCellElement>>;
   WeekNumberCell: import("react").ForwardRefExoticComponent<Omit<DatePicker.WeekNumberCellProps & import("react").RefAttributes<HTMLTableCellElement>, "ref"> & import("react").RefAttributes<HTMLTableCellElement>>;
   MonthSelect: import("react").ForwardRefExoticComponent<Omit<DatePicker.MonthSelectProps & import("react").RefAttributes<HTMLSelectElement>, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;
@@ -36,4 +64,4 @@ declare const DatePicker$1: import("react").ForwardRefExoticComponent<Omit<DateP
   PresetTrigger: import("react").ForwardRefExoticComponent<Omit<DatePicker.PresetTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 };
 //#endregion
-export { DatePicker$1 as DatePicker, type DatePickerRootProps, type DatePickerRootProviderProps };
+export { DatePicker$1 as DatePicker, type DatePickerDayTableProps, type DatePickerFieldProps, type DatePickerRangeFieldProps, type DatePickerRootProps, type DatePickerRootProviderProps, useDatePicker, useDatePickerContext };

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

@@ -1,11 +1,12 @@
-import { CalendarIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CloseIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { CalendarIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "../../lib/moduix/icons/ui/Icons.js";
+import { CloseButton } from "../close-button/CloseButton.js";
 import { OverlayPortal, OverlayPortalProvider } from "../../lib/moduix/overlayPortal.js";
 import DatePicker_module_default from "./DatePicker.module.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { DatePicker } from "@ark-ui/react/date-picker";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { DatePicker, useDatePicker, useDatePickerContext } from "@ark-ui/react/date-picker";
 //#region src/components/date-picker/DatePicker.tsx
 const DatePickerRoot = forwardRef(function DatePickerRoot({ className, portalled, portalRef, ...props }, ref) {
 	return /* @__PURE__ */ jsx(OverlayPortalProvider, {
@@ -47,6 +48,52 @@ const DatePickerControl = forwardRef(function DatePickerControl({ className, ...
 		...props
 	});
 });
+const DatePickerField = forwardRef(function DatePickerField({ clearLabel = "Clear date", clearTriggerProps, inputProps, placeholder = "Select date", triggerLabel = "Open calendar", triggerProps, ...props }, ref) {
+	return /* @__PURE__ */ jsxs(DatePickerControl, {
+		ref,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(DatePickerInput, {
+				placeholder,
+				...inputProps
+			}),
+			/* @__PURE__ */ jsx(DatePickerClearTrigger, {
+				"aria-label": clearLabel,
+				...clearTriggerProps
+			}),
+			/* @__PURE__ */ jsx(DatePickerTrigger, {
+				"aria-label": triggerLabel,
+				...triggerProps
+			})
+		]
+	});
+});
+const DatePickerRangeField = forwardRef(function DatePickerRangeField({ clearLabel = "Clear date", clearTriggerProps, endInputProps, endPlaceholder = "End date", startInputProps, startPlaceholder = "Start date", triggerLabel = "Open calendar", triggerProps, ...props }, ref) {
+	return /* @__PURE__ */ jsxs(DatePickerControl, {
+		ref,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(DatePickerInput, {
+				index: 0,
+				placeholder: startPlaceholder,
+				...startInputProps
+			}),
+			/* @__PURE__ */ jsx(DatePickerInput, {
+				index: 1,
+				placeholder: endPlaceholder,
+				...endInputProps
+			}),
+			/* @__PURE__ */ jsx(DatePickerClearTrigger, {
+				"aria-label": clearLabel,
+				...clearTriggerProps
+			}),
+			/* @__PURE__ */ jsx(DatePickerTrigger, {
+				"aria-label": triggerLabel,
+				...triggerProps
+			})
+		]
+	});
+});
 const DatePickerInput = forwardRef(function DatePickerInput({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(DatePicker.Input, {
 		ref,
@@ -65,14 +112,29 @@ const DatePickerTrigger = forwardRef(function DatePickerTrigger({ asChild, class
 		children: children ?? /* @__PURE__ */ jsx(CalendarIcon, {})
 	});
 });
-const DatePickerClearTrigger = forwardRef(function DatePickerClearTrigger({ asChild, className, children, ...props }, ref) {
+const DatePickerClearTrigger = forwardRef(function DatePickerClearTrigger({ asChild, className, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }, ref) {
+	const triggerClassName = clsx(DatePicker_module_default.clearTrigger, normalizeClassName(className));
+	if (asChild) return /* @__PURE__ */ jsx(DatePicker.ClearTrigger, {
+		ref,
+		asChild: true,
+		"data-slot": "date-picker-clear-trigger",
+		className: triggerClassName,
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		...props,
+		children
+	});
 	return /* @__PURE__ */ jsx(DatePicker.ClearTrigger, {
 		ref,
+		asChild: true,
 		"data-slot": "date-picker-clear-trigger",
-		asChild,
-		className: clsx(!asChild && DatePicker_module_default.trigger, DatePicker_module_default.clearTrigger, normalizeClassName(className)),
+		className: triggerClassName,
 		...props,
-		children: children ?? /* @__PURE__ */ jsx(CloseIcon, {})
+		children: /* @__PURE__ */ jsx(CloseButton.Root, {
+			"aria-label": ariaLabel ?? (ariaLabelledBy == null ? "Clear date" : void 0),
+			"aria-labelledby": ariaLabelledBy,
+			children
+		})
 	});
 });
 const DatePickerPositioner = forwardRef(function DatePickerPositioner({ className, ...props }, ref) {
@@ -142,7 +204,7 @@ const DatePickerViewTrigger = forwardRef(function DatePickerViewTrigger({ asChil
 		asChild,
 		className: clsx(!asChild && DatePicker_module_default.viewTrigger, normalizeClassName(className)),
 		...props,
-		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DatePickerRangeText, {}), /* @__PURE__ */ jsx(ChevronDownIcon, {})] })
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DatePickerRangeText, {}), /* @__PURE__ */ jsx(ChevronDownIcon, {})] })
 	});
 });
 const DatePickerTable = forwardRef(function DatePickerTable({ className, ...props }, ref) {
@@ -217,6 +279,25 @@ const DatePickerTableCellTrigger = forwardRef(function DatePickerTableCellTrigge
 		...props
 	});
 });
+const DatePickerDayTable = forwardRef(function DatePickerDayTable({ offset, showHeader = true, showWeekNumbers = false, ...props }, ref) {
+	return /* @__PURE__ */ jsx(DatePicker.Context, { children: (datePicker) => /* @__PURE__ */ jsxs(Fragment$1, { children: [showHeader ? /* @__PURE__ */ jsxs(DatePickerViewControl, { children: [
+		/* @__PURE__ */ jsx(DatePickerPrevTrigger, {}),
+		/* @__PURE__ */ jsx(DatePickerViewTrigger, {}),
+		/* @__PURE__ */ jsx(DatePickerNextTrigger, {})
+	] }) : null, /* @__PURE__ */ jsxs(DatePickerTable, {
+		ref,
+		...props,
+		children: [/* @__PURE__ */ jsx(DatePickerTableHead, { children: /* @__PURE__ */ jsxs(DatePickerTableRow, { children: [showWeekNumbers ? /* @__PURE__ */ jsx(DatePickerWeekNumberHeaderCell, {}) : null, datePicker.weekDays.map((weekDay) => /* @__PURE__ */ jsx(DatePickerTableHeader, { children: weekDay.short }, weekDay.value.toString()))] }) }), /* @__PURE__ */ jsx(DatePickerTableBody, { children: (offset?.weeks ?? datePicker.weeks).map((week, weekIndex) => /* @__PURE__ */ jsxs(DatePickerTableRow, { children: [showWeekNumbers ? /* @__PURE__ */ jsx(DatePickerWeekNumberCell, {
+			week,
+			weekIndex,
+			children: datePicker.getWeekNumber(week)
+		}) : null, week.map((day) => /* @__PURE__ */ jsx(DatePickerTableCell, {
+			value: day,
+			visibleRange: offset?.visibleRange,
+			children: /* @__PURE__ */ jsx(DatePickerTableCellTrigger, { children: day.day })
+		}, day.toString()))] }, week[0]?.toString())) })]
+	})] }) });
+});
 const DatePickerMonthSelect = forwardRef(function DatePickerMonthSelect({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(DatePicker.MonthSelect, {
 		ref,
@@ -253,8 +334,11 @@ const DatePickerValueText = forwardRef(function DatePickerValueText({ className,
 const DatePicker$1 = Object.assign(DatePickerRoot, {
 	Root: DatePickerRoot,
 	RootProvider: DatePickerRootProvider,
+	Context: DatePicker.Context,
 	Label: DatePickerLabel,
 	Control: DatePickerControl,
+	Field: DatePickerField,
+	RangeField: DatePickerRangeField,
 	Input: DatePickerInput,
 	Trigger: DatePickerTrigger,
 	ClearTrigger: DatePickerClearTrigger,
@@ -274,6 +358,7 @@ const DatePicker$1 = Object.assign(DatePickerRoot, {
 	TableHeader: DatePickerTableHeader,
 	TableCell: DatePickerTableCell,
 	TableCellTrigger: DatePickerTableCellTrigger,
+	DayTable: DatePickerDayTable,
 	WeekNumberHeaderCell: DatePickerWeekNumberHeaderCell,
 	WeekNumberCell: DatePickerWeekNumberCell,
 	MonthSelect: DatePickerMonthSelect,
@@ -281,4 +366,4 @@ const DatePicker$1 = Object.assign(DatePickerRoot, {
 	PresetTrigger: DatePickerPresetTrigger
 });
 //#endregion
-export { DatePicker$1 as DatePicker };
+export { DatePicker$1 as DatePicker, useDatePicker, useDatePickerContext };

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

@@ -1,2 +1,2 @@
-import { DatePicker, DatePickerRootProps, DatePickerRootProviderProps } from "./DatePicker.js";
-export { DatePicker, type DatePickerRootProps, type DatePickerRootProviderProps };
+import { DatePicker, DatePickerDayTableProps, DatePickerFieldProps, DatePickerRangeFieldProps, DatePickerRootProps, DatePickerRootProviderProps, useDatePicker, useDatePickerContext } from "./DatePicker.js";
+export { DatePicker, type DatePickerDayTableProps, type DatePickerFieldProps, type DatePickerRangeFieldProps, type DatePickerRootProps, type DatePickerRootProviderProps, useDatePicker, useDatePickerContext };