@moduix/react 1.1.1 → 2.0.0

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))));
     }
   }
 
@@ -121,7 +124,7 @@
     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);
@@ -172,21 +175,42 @@
     }
   }
 
-  .a48aUa_trigger, .a48aUa_clearTrigger {
+  .a48aUa_trigger {
     width: var(--date-picker-action-size, 1.5rem);
     height: var(--date-picker-action-size, 1.5rem);
-    position: absolute;
     top: 50%;
-    transform: translateY(-50%);
-  }
-
-  .a48aUa_trigger {
     right: var(--date-picker-trigger-offset-right, .5rem);
+    position: absolute;
+    transform: translateY(-50%);
   }
 
   .a48aUa_clearTrigger {
+    --close-button-size: var(--date-picker-action-size, 1.5rem);
+    --close-button-icon-size: var(--date-picker-icon-size, 1rem);
+    --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%;
     right: calc(var(--date-picker-trigger-offset-right, .5rem) + var(--date-picker-action-size, 1.5rem) +
         var(--date-picker-action-gap, .125rem));
+    position: absolute;
+    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 +239,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;
     }
   }

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

package/dist/components/dialog/Dialog.css

@@ -115,11 +115,15 @@
     }
 
     &[data-state="open"] {
-      animation: _9AixhG_dialog-content-in var(--dialog-transition, var(--transition-default));
+      animation: _9AixhG_dialog-content-in
+        var(--dialog-transition, var(--popup-motion-duration, var(--duration-normal))
+            var(--popup-motion-easing, var(--ease-in-out)));
     }
 
     &[data-state="closed"] {
-      animation: _9AixhG_dialog-content-out var(--dialog-transition, var(--transition-default));
+      animation: _9AixhG_dialog-content-out
+        var(--dialog-transition, var(--popup-motion-duration, var(--duration-normal))
+            var(--popup-motion-easing, var(--ease-in-out)));
     }
   }
 
@@ -203,19 +207,19 @@
 
   @keyframes _9AixhG_dialog-content-in {
     from {
-      opacity: var(--dialog-content-starting-opacity, 0);
-      translate: var(--dialog-content-starting-translate-x, 0)
-        var(--dialog-content-starting-translate-y, 0);
-      scale: var(--dialog-content-starting-scale, var(--scale-popup));
+      opacity: var(--dialog-content-starting-opacity, var(--popup-motion-starting-opacity, 0));
+      translate: var(--dialog-content-starting-translate-x, var(--popup-motion-starting-translate-x, 0))
+        var(--dialog-content-starting-translate-y, var(--popup-motion-starting-translate-y, 0));
+      scale: var(--dialog-content-starting-scale, var(--popup-motion-starting-scale, var(--scale-popup)));
     }
   }
 
   @keyframes _9AixhG_dialog-content-out {
     to {
-      opacity: var(--dialog-content-ending-opacity, 0);
-      translate: var(--dialog-content-ending-translate-x, 0)
-        var(--dialog-content-ending-translate-y, 0);
-      scale: var(--dialog-content-ending-scale, var(--scale-popup));
+      opacity: var(--dialog-content-ending-opacity, var(--popup-motion-ending-opacity, 0));
+      translate: var(--dialog-content-ending-translate-x, var(--popup-motion-ending-translate-x, 0))
+        var(--dialog-content-ending-translate-y, var(--popup-motion-ending-translate-y, 0));
+      scale: var(--dialog-content-ending-scale, var(--popup-motion-ending-scale, var(--scale-popup)));
     }
   }
 }

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

@@ -1,6 +1,6 @@
 import { OverlayPortalProps } from "../../lib/moduix/overlayPortal.js";
 import { ComponentProps } from "react";
-import { Dialog } from "@ark-ui/react/dialog";
+import { Dialog, useDialog as useDialog$1, useDialogContext as useDialogContext$1 } from "@ark-ui/react/dialog";
 
 //#region src/components/dialog/Dialog.d.ts
 type DialogRootProps = ComponentProps<typeof Dialog.Root> & OverlayPortalProps;
@@ -43,4 +43,4 @@ declare const Dialog$1: typeof DialogRoot & {
   Footer: typeof DialogFooter;
 };
 //#endregion
-export { Dialog$1 as Dialog, type DialogRootProps, type DialogRootProviderProps };
+export { Dialog$1 as Dialog, type DialogRootProps, type DialogRootProviderProps, useDialog$1 as useDialog, useDialogContext$1 as useDialogContext };

package/dist/components/dialog/Dialog.js

@@ -2,10 +2,10 @@ import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import { CloseButton } from "../close-button/CloseButton.js";
 import { OverlayPortal, OverlayPortalProvider } from "../../lib/moduix/overlayPortal.js";
 import Dialog_module_default from "./Dialog.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { Dialog } from "@ark-ui/react/dialog";
+import { jsx } from "react/jsx-runtime";
+import { Dialog, useDialog as useDialog$1, useDialogContext as useDialogContext$1 } from "@ark-ui/react/dialog";
 //#region src/components/dialog/Dialog.tsx
 const DEFAULT_CLOSE_BUTTON_LABEL = "Close dialog";
 function DialogRoot({ portalled, portalRef, ...props }) {
@@ -130,4 +130,4 @@ const Dialog$1 = Object.assign(DialogRoot, {
 	Footer: DialogFooter
 });
 //#endregion
-export { Dialog$1 as Dialog };
+export { Dialog$1 as Dialog, useDialog$1 as useDialog, useDialogContext$1 as useDialogContext };

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

@@ -1,2 +1,2 @@
-import { Dialog, DialogRootProps, DialogRootProviderProps } from "./Dialog.js";
-export { Dialog, type DialogRootProps, type DialogRootProviderProps };
+import { Dialog, DialogRootProps, DialogRootProviderProps, useDialog, useDialogContext } from "./Dialog.js";
+export { Dialog, type DialogRootProps, type DialogRootProviderProps, useDialog, useDialogContext };

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

@@ -1,6 +1,6 @@
 import { OverlayPortalProps } from "../../lib/moduix/overlayPortal.js";
 import { ComponentProps } from "react";
-import { Drawer } from "@ark-ui/react/drawer";
+import { Drawer, useDrawer } from "@ark-ui/react/drawer";
 
 //#region src/components/drawer/Drawer.d.ts
 type DrawerRootProps = ComponentProps<typeof Drawer.Root> & OverlayPortalProps;
@@ -53,4 +53,4 @@ declare const Drawer$1: typeof DrawerRoot & {
   Footer: typeof DrawerFooter;
 };
 //#endregion
-export { Drawer$1 as Drawer };
+export { Drawer$1 as Drawer, useDrawer };

package/dist/components/drawer/Drawer.js

@@ -2,10 +2,10 @@ import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import { CloseButton } from "../close-button/CloseButton.js";
 import { OverlayPortal, OverlayPortalProvider } from "../../lib/moduix/overlayPortal.js";
 import Drawer_module_default from "./Drawer.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { Drawer } from "@ark-ui/react/drawer";
+import { jsx } from "react/jsx-runtime";
+import { Drawer, useDrawer } from "@ark-ui/react/drawer";
 //#region src/components/drawer/Drawer.tsx
 const DEFAULT_CLOSE_BUTTON_LABEL = "Close drawer";
 function DrawerRoot({ lazyMount = true, portalled, portalRef, unmountOnExit = true, ...props }) {
@@ -185,4 +185,4 @@ const Drawer$1 = Object.assign(DrawerRoot, {
 	Footer: DrawerFooter
 });
 //#endregion
-export { Drawer$1 as Drawer };
+export { Drawer$1 as Drawer, useDrawer };

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

@@ -1,2 +1,2 @@
-import { Drawer } from "./Drawer.js";
-export { Drawer };
+import { Drawer, useDrawer } from "./Drawer.js";
+export { Drawer, useDrawer };

package/dist/components/editable/Editable.d.ts

@@ -1,6 +1,11 @@
-import { Editable } from "@ark-ui/react/editable";
+import { ComponentProps } from "react";
+import { Editable, useEditable, useEditableContext } from "@ark-ui/react/editable";
 
 //#region src/components/editable/Editable.d.ts
+declare function EditableControls({
+  className,
+  ...props
+}: Omit<ComponentProps<typeof Editable.Control>, 'asChild' | 'children'>): import("react").JSX.Element;
 declare const Editable$1: import("react").ForwardRefExoticComponent<Omit<Editable.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
   Root: import("react").ForwardRefExoticComponent<Omit<Editable.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   RootProvider: import("react").ForwardRefExoticComponent<Omit<Editable.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
@@ -12,6 +17,8 @@ declare const Editable$1: import("react").ForwardRefExoticComponent<Omit<Editabl
   EditTrigger: import("react").ForwardRefExoticComponent<Omit<Editable.EditTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   SubmitTrigger: import("react").ForwardRefExoticComponent<Omit<Editable.SubmitTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   CancelTrigger: import("react").ForwardRefExoticComponent<Omit<Editable.CancelTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  Controls: typeof EditableControls;
+  Context: (props: Editable.ContextProps) => import("react").ReactNode;
 };
 //#endregion
-export { Editable$1 as Editable };
+export { Editable$1 as Editable, useEditable, useEditableContext };

package/dist/components/editable/Editable.js

@@ -1,10 +1,10 @@
-import { CheckIcon, CloseIcon, PencilIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { CheckIcon, CloseIcon, PencilIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import Editable_module_default from "./Editable.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { Editable } from "@ark-ui/react/editable";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Editable, useEditable, useEditableContext } from "@ark-ui/react/editable";
 //#region src/components/editable/Editable.tsx
 const EditableRoot = forwardRef(function EditableRoot({ activationMode = "dblclick", className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Editable.Root, {
@@ -90,6 +90,13 @@ const EditableCancelTrigger = forwardRef(function EditableCancelTrigger({ classN
 		children: children ?? /* @__PURE__ */ jsx(CloseIcon, {})
 	});
 });
+function EditableControls({ className, ...props }) {
+	return /* @__PURE__ */ jsx(EditableControl, {
+		className,
+		...props,
+		children: /* @__PURE__ */ jsx(Editable.Context, { children: (editable) => editable.editing ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(EditableSubmitTrigger, {}), /* @__PURE__ */ jsx(EditableCancelTrigger, {})] }) : /* @__PURE__ */ jsx(EditableEditTrigger, {}) })
+	});
+}
 const Editable$1 = Object.assign(EditableRoot, {
 	Root: EditableRoot,
 	RootProvider: EditableRootProvider,
@@ -100,7 +107,9 @@ const Editable$1 = Object.assign(EditableRoot, {
 	Control: EditableControl,
 	EditTrigger: EditableEditTrigger,
 	SubmitTrigger: EditableSubmitTrigger,
-	CancelTrigger: EditableCancelTrigger
+	CancelTrigger: EditableCancelTrigger,
+	Controls: EditableControls,
+	Context: Editable.Context
 });
 //#endregion
-export { Editable$1 as Editable };
+export { Editable$1 as Editable, useEditable, useEditableContext };

package/dist/components/editable/index.d.ts

@@ -1,2 +1,2 @@
-import { Editable } from "./Editable.js";
-export { Editable };
+import { Editable, useEditable, useEditableContext } from "./Editable.js";
+export { Editable, useEditable, useEditableContext };

package/dist/components/empty/Empty.js

@@ -1,9 +1,9 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import Empty_module_default from "./Empty.module.js";
-import { jsx } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/empty/Empty.tsx
 const EmptyRoot = forwardRef(function EmptyRoot({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(ark.div, {

package/dist/components/field/Field.css

@@ -92,10 +92,6 @@
     resize: vertical;
   }
 
-  .SVzJ0G_select {
-    appearance: none;
-  }
-
   .SVzJ0G_errorText {
     color: var(--field-error-color, var(--color-destructive));
     font-size: var(--field-error-font-size, var(--text-sm));

package/dist/components/field/Field.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps } from "react";
-import { Field } from "@ark-ui/react/field";
+import { Field, useField, useFieldContext } from "@ark-ui/react/field";
 
 //#region src/components/field/Field.d.ts
 type FieldItemProps = ComponentProps<'div'> & ComponentProps<typeof Field.Item>;
@@ -20,6 +20,7 @@ declare const Field$1: import("react").ForwardRefExoticComponent<Omit<Field.Root
   HelperText: import("react").ForwardRefExoticComponent<Omit<Field.HelperTextProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
   ErrorText: import("react").ForwardRefExoticComponent<Omit<Field.ErrorTextProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
   RequiredIndicator: import("react").ForwardRefExoticComponent<Omit<Field.RequiredIndicatorProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+  Context: (props: Field.ContextProps) => import("react").ReactNode;
 };
 //#endregion
-export { Field$1 as Field };
+export { Field$1 as Field, useField, useFieldContext };

package/dist/components/field/Field.js

@@ -1,9 +1,9 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import Field_module_default from "./Field.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { Field } from "@ark-ui/react/field";
+import { jsx } from "react/jsx-runtime";
+import { Field, useField, useFieldContext } from "@ark-ui/react/field";
 //#region src/components/field/Field.tsx
 const FieldRoot = forwardRef(function FieldRoot({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Field.Root, {
@@ -60,7 +60,7 @@ const FieldSelect = forwardRef(function FieldSelect({ className, ...props }, ref
 	return /* @__PURE__ */ jsx(Field.Select, {
 		ref,
 		"data-slot": "field-select",
-		className: clsx(Field_module_default.control, Field_module_default.select, normalizeClassName(className)),
+		className: clsx(Field_module_default.control, normalizeClassName(className)),
 		...props
 	});
 });
@@ -98,7 +98,8 @@ const Field$1 = Object.assign(FieldRoot, {
 	Select: FieldSelect,
 	HelperText: FieldHelperText,
 	ErrorText: FieldErrorText,
-	RequiredIndicator: FieldRequiredIndicator
+	RequiredIndicator: FieldRequiredIndicator,
+	Context: Field.Context
 });
 //#endregion
-export { Field$1 as Field };
+export { Field$1 as Field, useField, useFieldContext };

package/dist/components/field/Field.module.js

@@ -8,7 +8,6 @@ var Field_module_default = {
 	"label": "SVzJ0G_label",
 	"requiredIndicator": "SVzJ0G_requiredIndicator",
 	"root": "SVzJ0G_root",
-	"select": "SVzJ0G_select",
 	"textarea": "SVzJ0G_textarea"
 };
 //#endregion

package/dist/components/field/index.d.ts

@@ -1,2 +1,2 @@
-import { Field } from "./Field.js";
-export { Field };
+import { Field, useField, useFieldContext } from "./Field.js";
+export { Field, useField, useFieldContext };

package/dist/components/fieldset/Fieldset.d.ts

@@ -1,4 +1,4 @@
-import { Fieldset } from "@ark-ui/react/fieldset";
+import { Fieldset, useFieldset } from "@ark-ui/react/fieldset";
 
 //#region src/components/fieldset/Fieldset.d.ts
 declare const Fieldset$1: import("react").ForwardRefExoticComponent<Omit<Fieldset.RootProps & import("react").RefAttributes<HTMLFieldSetElement>, "ref"> & import("react").RefAttributes<HTMLFieldSetElement>> & {
@@ -9,4 +9,4 @@ declare const Fieldset$1: import("react").ForwardRefExoticComponent<Omit<Fieldse
   ErrorText: import("react").ForwardRefExoticComponent<Omit<Fieldset.ErrorTextProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 };
 //#endregion
-export { Fieldset$1 as Fieldset };
+export { Fieldset$1 as Fieldset, useFieldset };