@moduix/react 1.1.0 → 2.0.0

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/DatePicker.module.js

@@ -1,29 +1,29 @@
 import './DatePicker.css';
 //#region src/components/date-picker/DatePicker.module.css
 var DatePicker_module_default = {
-	"clearTrigger": "Nbvdda_clearTrigger",
-	"content": "Nbvdda_content",
-	"control": "Nbvdda_control",
-	"date-picker-content-closed": "Nbvdda_date-picker-content-closed",
-	"date-picker-content-open": "Nbvdda_date-picker-content-open",
-	"input": "Nbvdda_input",
-	"label": "Nbvdda_label",
-	"navTrigger": "Nbvdda_navTrigger",
-	"positioner": "Nbvdda_positioner",
-	"presetTrigger": "Nbvdda_presetTrigger",
-	"rangeText": "Nbvdda_rangeText",
-	"root": "Nbvdda_root",
-	"select": "Nbvdda_select",
-	"table": "Nbvdda_table",
-	"tableCell": "Nbvdda_tableCell",
-	"tableCellTrigger": "Nbvdda_tableCellTrigger",
-	"tableHeader": "Nbvdda_tableHeader",
-	"trigger": "Nbvdda_trigger",
-	"valueText": "Nbvdda_valueText",
-	"view": "Nbvdda_view",
-	"viewControl": "Nbvdda_viewControl",
-	"viewTrigger": "Nbvdda_viewTrigger",
-	"weekNumberCell": "Nbvdda_weekNumberCell"
+	"clearTrigger": "a48aUa_clearTrigger",
+	"content": "a48aUa_content",
+	"control": "a48aUa_control",
+	"date-picker-content-closed": "a48aUa_date-picker-content-closed",
+	"date-picker-content-open": "a48aUa_date-picker-content-open",
+	"input": "a48aUa_input",
+	"label": "a48aUa_label",
+	"navTrigger": "a48aUa_navTrigger",
+	"positioner": "a48aUa_positioner",
+	"presetTrigger": "a48aUa_presetTrigger",
+	"rangeText": "a48aUa_rangeText",
+	"root": "a48aUa_root",
+	"select": "a48aUa_select",
+	"table": "a48aUa_table",
+	"tableCell": "a48aUa_tableCell",
+	"tableCellTrigger": "a48aUa_tableCellTrigger",
+	"tableHeader": "a48aUa_tableHeader",
+	"trigger": "a48aUa_trigger",
+	"valueText": "a48aUa_valueText",
+	"view": "a48aUa_view",
+	"viewControl": "a48aUa_viewControl",
+	"viewTrigger": "a48aUa_viewTrigger",
+	"weekNumberCell": "a48aUa_weekNumberCell"
 };
 //#endregion
 export { DatePicker_module_default as default };

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

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .gV-U6q_trigger, .gV-U6q_closeTrigger {
+  ._9AixhG_trigger, ._9AixhG_closeTrigger {
     box-sizing: border-box;
     min-height: var(--dialog-control-height, var(--size-lg));
     padding: var(--dialog-control-padding-y, .5rem) var(--dialog-control-padding-x, .875rem);
@@ -40,7 +40,7 @@
     }
   }
 
-  .gV-U6q_backdrop {
+  ._9AixhG_backdrop {
     z-index: calc(var(--z-backdrop) + var(--layer-index, 0));
     background-color: var(--dialog-backdrop-bg, var(--backdrop-bg, var(--color-overlay)));
     min-height: 100dvh;
@@ -49,15 +49,15 @@
     inset: 0;
 
     &[data-state="open"] {
-      animation: gV-U6q_dialog-backdrop-in var(--dialog-backdrop-transition, var(--transition-default));
+      animation: _9AixhG_dialog-backdrop-in var(--dialog-backdrop-transition, var(--transition-default));
     }
 
     &[data-state="closed"] {
-      animation: gV-U6q_dialog-backdrop-out var(--dialog-backdrop-transition, var(--transition-default));
+      animation: _9AixhG_dialog-backdrop-out var(--dialog-backdrop-transition, var(--transition-default));
     }
   }
 
-  .gV-U6q_positioner {
+  ._9AixhG_positioner {
     box-sizing: border-box;
     z-index: calc(var(--z-modal) + var(--layer-index, 0));
     overscroll-behavior: contain;
@@ -70,7 +70,7 @@
     overflow-y: auto;
   }
 
-  .gV-U6q_content {
+  ._9AixhG_content {
     box-sizing: border-box;
     width: min(var(--dialog-width, 28rem),
       var(--dialog-max-width, calc(100vw - var(--spacing-8, 2rem))));
@@ -115,15 +115,19 @@
     }
 
     &[data-state="open"] {
-      animation: gV-U6q_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: gV-U6q_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)));
     }
   }
 
-  .gV-U6q_header {
+  ._9AixhG_header {
     align-items: start;
     gap: var(--dialog-header-gap, var(--spacing-1));
     grid-template-columns: minmax(0, 1fr) auto;
@@ -143,7 +147,7 @@
     }
   }
 
-  .gV-U6q_title {
+  ._9AixhG_title {
     color: var(--dialog-title-color, var(--dialog-color, var(--color-popover-foreground)));
     font-size: var(--dialog-title-font-size, var(--text-lg));
     font-weight: var(--dialog-title-font-weight, var(--weight-semibold));
@@ -151,28 +155,28 @@
     margin: 0;
   }
 
-  .gV-U6q_description, .gV-U6q_body {
+  ._9AixhG_description, ._9AixhG_body {
     color: var(--dialog-description-color, var(--dialog-muted-color, var(--color-muted-foreground)));
     font-size: var(--dialog-description-font-size, var(--text-md));
     line-height: var(--dialog-description-line-height, var(--line-height-text-md));
   }
 
-  .gV-U6q_description {
+  ._9AixhG_description {
     margin: 0;
   }
 
-  .gV-U6q_body {
+  ._9AixhG_body {
     margin: var(--dialog-content-margin, var(--spacing-4) 0 0);
   }
 
-  .gV-U6q_footer {
+  ._9AixhG_footer {
     justify-content: flex-end;
     gap: var(--dialog-footer-gap, var(--spacing-2));
     margin-top: var(--dialog-footer-margin-top, var(--spacing-6));
     display: flex;
   }
 
-  .gV-U6q_closeIcon {
+  ._9AixhG_closeIcon {
     --close-button-size: var(--dialog-close-icon-size, 1.75rem);
     --close-button-radius: var(--dialog-close-icon-radius, var(--radius-md));
     --close-button-color: var(--dialog-close-icon-color, var(--dialog-muted-color, var(--color-muted-foreground)));
@@ -187,35 +191,35 @@
     inset-inline-end: var(--dialog-close-icon-inset-inline-end, var(--spacing-4));
   }
 
-  @keyframes gV-U6q_dialog-backdrop-in {
+  @keyframes _9AixhG_dialog-backdrop-in {
     from {
       opacity: var(--dialog-backdrop-starting-opacity, 0);
       backdrop-filter: var(--dialog-backdrop-starting-blur, none);
     }
   }
 
-  @keyframes gV-U6q_dialog-backdrop-out {
+  @keyframes _9AixhG_dialog-backdrop-out {
     to {
       opacity: var(--dialog-backdrop-ending-opacity, 0);
       backdrop-filter: var(--dialog-backdrop-ending-blur, none);
     }
   }
 
-  @keyframes gV-U6q_dialog-content-in {
+  @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 gV-U6q_dialog-content-out {
+  @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/Dialog.module.js

@@ -1,21 +1,21 @@
 import './Dialog.css';
 //#region src/components/dialog/Dialog.module.css
 var Dialog_module_default = {
-	"backdrop": "gV-U6q_backdrop",
-	"body": "gV-U6q_body",
-	"closeIcon": "gV-U6q_closeIcon",
-	"closeTrigger": "gV-U6q_closeTrigger",
-	"content": "gV-U6q_content",
-	"description": "gV-U6q_description",
-	"dialog-backdrop-in": "gV-U6q_dialog-backdrop-in",
-	"dialog-backdrop-out": "gV-U6q_dialog-backdrop-out",
-	"dialog-content-in": "gV-U6q_dialog-content-in",
-	"dialog-content-out": "gV-U6q_dialog-content-out",
-	"footer": "gV-U6q_footer",
-	"header": "gV-U6q_header",
-	"positioner": "gV-U6q_positioner",
-	"title": "gV-U6q_title",
-	"trigger": "gV-U6q_trigger"
+	"backdrop": "_9AixhG_backdrop",
+	"body": "_9AixhG_body",
+	"closeIcon": "_9AixhG_closeIcon",
+	"closeTrigger": "_9AixhG_closeTrigger",
+	"content": "_9AixhG_content",
+	"description": "_9AixhG_description",
+	"dialog-backdrop-in": "_9AixhG_dialog-backdrop-in",
+	"dialog-backdrop-out": "_9AixhG_dialog-backdrop-out",
+	"dialog-content-in": "_9AixhG_dialog-content-in",
+	"dialog-content-out": "_9AixhG_dialog-content-out",
+	"footer": "_9AixhG_footer",
+	"header": "_9AixhG_header",
+	"positioner": "_9AixhG_positioner",
+	"title": "_9AixhG_title",
+	"trigger": "_9AixhG_trigger"
 };
 //#endregion
 export { Dialog_module_default as default };

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