@moduix/react 1.1.0 → 2.0.0

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

@@ -1,43 +1,41 @@
 import './CommandPalette.css';
 //#region src/components/command-palette/CommandPalette.module.css
 var CommandPalette_module_default = {
-	"backdrop": "v74_Gq_backdrop",
-	"body": "v74_Gq_body",
-	"clearTrigger": "v74_Gq_clearTrigger",
-	"closeIcon": "v74_Gq_closeIcon",
-	"closeTrigger": "v74_Gq_closeTrigger",
-	"combobox": "v74_Gq_combobox",
-	"command-palette-backdrop-in": "v74_Gq_command-palette-backdrop-in",
-	"command-palette-backdrop-out": "v74_Gq_command-palette-backdrop-out",
-	"command-palette-content-in": "v74_Gq_command-palette-content-in",
-	"command-palette-content-out": "v74_Gq_command-palette-content-out",
-	"content": "v74_Gq_content",
-	"control": "v74_Gq_control",
-	"description": "v74_Gq_description",
-	"empty": "v74_Gq_empty",
-	"footer": "v74_Gq_footer",
-	"header": "v74_Gq_header",
-	"iconSvg": "v74_Gq_iconSvg",
-	"input": "v74_Gq_input",
-	"item": "v74_Gq_item",
-	"itemDescription": "v74_Gq_itemDescription",
-	"itemGroup": "v74_Gq_itemGroup",
-	"itemGroupLabel": "v74_Gq_itemGroupLabel",
-	"itemIcon": "v74_Gq_itemIcon",
-	"itemIndicator": "v74_Gq_itemIndicator",
-	"itemLabel": "v74_Gq_itemLabel",
-	"itemMeta": "v74_Gq_itemMeta",
-	"itemText": "v74_Gq_itemText",
-	"kbd": "v74_Gq_kbd",
-	"list": "v74_Gq_list",
-	"positioner": "v74_Gq_positioner",
-	"scrollArea": "v74_Gq_scrollArea",
-	"scrollbar": "v74_Gq_scrollbar",
-	"scrollContent": "v74_Gq_scrollContent",
-	"scrollViewport": "v74_Gq_scrollViewport",
-	"separator": "v74_Gq_separator",
-	"title": "v74_Gq_title",
-	"trigger": "v74_Gq_trigger"
+	"backdrop": "_4OfG0a_backdrop",
+	"body": "_4OfG0a_body",
+	"clearTrigger": "_4OfG0a_clearTrigger",
+	"combobox": "_4OfG0a_combobox",
+	"command-palette-backdrop-in": "_4OfG0a_command-palette-backdrop-in",
+	"command-palette-backdrop-out": "_4OfG0a_command-palette-backdrop-out",
+	"command-palette-content-in": "_4OfG0a_command-palette-content-in",
+	"command-palette-content-out": "_4OfG0a_command-palette-content-out",
+	"content": "_4OfG0a_content",
+	"control": "_4OfG0a_control",
+	"description": "_4OfG0a_description",
+	"empty": "_4OfG0a_empty",
+	"footer": "_4OfG0a_footer",
+	"header": "_4OfG0a_header",
+	"iconSvg": "_4OfG0a_iconSvg",
+	"input": "_4OfG0a_input",
+	"item": "_4OfG0a_item",
+	"itemDescription": "_4OfG0a_itemDescription",
+	"itemGroup": "_4OfG0a_itemGroup",
+	"itemGroupLabel": "_4OfG0a_itemGroupLabel",
+	"itemIcon": "_4OfG0a_itemIcon",
+	"itemIndicator": "_4OfG0a_itemIndicator",
+	"itemLabel": "_4OfG0a_itemLabel",
+	"itemMeta": "_4OfG0a_itemMeta",
+	"itemText": "_4OfG0a_itemText",
+	"kbd": "_4OfG0a_kbd",
+	"list": "_4OfG0a_list",
+	"positioner": "_4OfG0a_positioner",
+	"scrollArea": "_4OfG0a_scrollArea",
+	"scrollbar": "_4OfG0a_scrollbar",
+	"scrollContent": "_4OfG0a_scrollContent",
+	"scrollViewport": "_4OfG0a_scrollViewport",
+	"separator": "_4OfG0a_separator",
+	"title": "_4OfG0a_title",
+	"trigger": "_4OfG0a_trigger"
 };
 //#endregion
 export { CommandPalette_module_default as default };

package/dist/components/container/Container.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .C_WyAG_root {
+  .o47Mga_root {
     --container-gutter: var(--container-gutter-md, clamp(1rem, 4vw, 2rem));
     --container-max-width: var(--container-max-width-lg, 72rem);
     box-sizing: border-box;

package/dist/components/container/Container.js

@@ -1,9 +1,9 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import Container_module_default from "./Container.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/container/Container.tsx
 const ContainerRoot = forwardRef(function ContainerRoot({ size = "lg", gutter = "md", className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(ark.div, {

package/dist/components/container/Container.module.js

@@ -1,5 +1,5 @@
 import './Container.css';
 //#region src/components/container/Container.module.css
-var Container_module_default = { "root": "C_WyAG_root" };
+var Container_module_default = { "root": "o47Mga_root" };
 //#endregion
 export { Container_module_default as default };

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

@@ -1,8 +1,8 @@
 @layer ui.components {
-  .B0AkVa_root {
+  .X3ODua_root {
     align-items: flex-start;
     gap: var(--date-input-gap, var(--spacing-1));
-    width: var(--date-input-width, auto);
+    width: var(--date-input-width, 100%);
     max-width: var(--date-input-max-width, none);
     flex-direction: column;
     display: inline-flex;
@@ -12,14 +12,16 @@
     }
   }
 
-  .B0AkVa_label {
+  .X3ODua_label {
     color: var(--date-input-label-color, var(--color-foreground));
     font-size: var(--date-input-label-font-size, var(--text-sm));
     font-weight: var(--date-input-label-font-weight, var(--weight-medium));
     line-height: var(--date-input-label-line-height, var(--line-height-text-sm));
   }
 
-  .B0AkVa_control {
+  .X3ODua_control {
+    box-sizing: border-box;
+    width: var(--date-input-control-width, 100%);
     min-height: var(--date-input-control-height, var(--size-lg));
     border: var(--date-input-border-width, var(--border-width-sm))
       var(--date-input-border-style, solid) var(--date-input-border-color, var(--color-border));
@@ -53,14 +55,14 @@
     }
   }
 
-  .B0AkVa_segmentGroup {
+  .X3ODua_segmentGroup {
     align-items: center;
     gap: var(--date-input-segment-gap, var(--border-width-md));
     font-variant-numeric: tabular-nums;
     display: inline-flex;
   }
 
-  .B0AkVa_segment {
+  .X3ODua_segment {
     min-width: var(--date-input-segment-min-width, 2ch);
     border-radius: var(--date-input-segment-radius, var(--radius-sm));
     padding: var(--date-input-segment-padding-y, 0)
@@ -97,7 +99,7 @@
     }
   }
 
-  .B0AkVa_separator {
+  .X3ODua_separator {
     color: var(--date-input-separator-color, var(--color-muted-foreground));
     user-select: none;
   }

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

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

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

@@ -1,12 +1,12 @@
 import './DateInput.css';
 //#region src/components/date-input/DateInput.module.css
 var DateInput_module_default = {
-	"control": "B0AkVa_control",
-	"label": "B0AkVa_label",
-	"root": "B0AkVa_root",
-	"segment": "B0AkVa_segment",
-	"segmentGroup": "B0AkVa_segmentGroup",
-	"separator": "B0AkVa_separator"
+	"control": "X3ODua_control",
+	"label": "X3ODua_label",
+	"root": "X3ODua_root",
+	"segment": "X3ODua_segment",
+	"segmentGroup": "X3ODua_segmentGroup",
+	"separator": "X3ODua_separator"
 };
 //#endregion
 export { DateInput_module_default as default };

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 Nbvdda_date-picker-content-open {
+  @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 {
@@ -11,19 +13,20 @@
     }
   }
 
-  @keyframes Nbvdda_date-picker-content-closed {
+  @keyframes a48aUa_date-picker-content-closed {
     from {
       opacity: 1;
       transform: scale(1);
     }
 
     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))));
     }
   }
 
-  .Nbvdda_root {
+  .a48aUa_root {
     box-sizing: border-box;
     width: var(--date-picker-width, 18.75rem);
     max-width: var(--date-picker-max-width, 100%);
@@ -38,7 +41,7 @@
     }
   }
 
-  .Nbvdda_label {
+  .a48aUa_label {
     color: var(--date-picker-label-color, var(--date-picker-color, var(--color-foreground)));
     font-size: var(--date-picker-label-font-size, var(--text-sm));
     font-weight: var(--date-picker-label-font-weight, var(--weight-medium));
@@ -48,7 +51,7 @@
     display: inline-flex;
   }
 
-  .Nbvdda_control {
+  .a48aUa_control {
     align-items: center;
     gap: var(--date-picker-input-gap, var(--spacing-2));
     width: 100%;
@@ -58,7 +61,7 @@
     position: relative;
   }
 
-  .Nbvdda_input {
+  .a48aUa_input {
     box-sizing: border-box;
     width: 100%;
     min-width: min(var(--date-picker-input-min-width, 7.5rem), 100%);
@@ -89,12 +92,12 @@
       opacity: 1;
     }
 
-    &:focus, .Nbvdda_control[data-focus] & {
+    &:focus, .a48aUa_control[data-focus] & {
       border-color: var(--date-picker-focus-ring-color, var(--color-ring));
       outline-color: var(--date-picker-focus-ring-color, var(--color-ring));
     }
 
-    &:is([data-invalid], [aria-invalid="true"]), .Nbvdda_control[data-invalid] & {
+    &:is([data-invalid], [aria-invalid="true"]), .a48aUa_control[data-invalid] & {
       border-color: var(--date-picker-invalid-color, var(--color-destructive));
       outline-color: var(--date-picker-invalid-color, var(--color-destructive));
     }
@@ -103,7 +106,7 @@
       cursor: default;
     }
 
-    .Nbvdda_control:not([data-disabled], [data-readonly]) & {
+    .a48aUa_control:not([data-disabled], [data-readonly]) & {
       @media (hover: hover) {
         &:hover {
           background-color: var(--date-picker-bg-hover, var(--color-accent));
@@ -112,16 +115,16 @@
     }
   }
 
-  .Nbvdda_control:has(.Nbvdda_input + .Nbvdda_input) .Nbvdda_input {
+  .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);
   }
 
-  .Nbvdda_control:has(.Nbvdda_input + .Nbvdda_input) .Nbvdda_input:last-of-type {
+  .a48aUa_control:has(.a48aUa_input + .a48aUa_input) .a48aUa_input:last-of-type {
     padding-inline-end: var(--date-picker-input-padding-x-end, 4.25rem);
   }
 
-  .Nbvdda_trigger, .Nbvdda_navTrigger, .Nbvdda_viewTrigger, .Nbvdda_clearTrigger, .Nbvdda_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,29 +175,50 @@
     }
   }
 
-  .Nbvdda_trigger, .Nbvdda_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%);
-  }
-
-  .Nbvdda_trigger {
     right: var(--date-picker-trigger-offset-right, .5rem);
+    position: absolute;
+    transform: translateY(-50%);
   }
 
-  .Nbvdda_clearTrigger {
+  .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;
+    }
   }
 
-  .Nbvdda_positioner {
+  .a48aUa_positioner {
     z-index: var(--z-index);
     outline: 0;
   }
 
-  .Nbvdda_content {
+  .a48aUa_content {
     box-sizing: border-box;
     z-index: calc(var(--z-popup) + var(--layer-index, 0));
     width: min(var(--date-picker-content-width, 18.75rem), var(--available-width));
@@ -215,27 +239,31 @@
     overflow: auto;
 
     &[data-state="open"] {
-      animation: Nbvdda_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: Nbvdda_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;
     }
   }
 
-  .Nbvdda_root[data-inline] .Nbvdda_content {
+  .a48aUa_root[data-inline] .a48aUa_content {
     min-width: var(--date-picker-inline-content-min-width, 18rem);
     max-height: none;
     box-shadow: var(--date-picker-inline-content-shadow, none);
   }
 
-  .Nbvdda_view {
+  .a48aUa_view {
     gap: var(--date-picker-view-gap, var(--spacing-3));
     display: grid;
   }
 
-  .Nbvdda_viewControl {
+  .a48aUa_viewControl {
     justify-content: space-between;
     align-items: center;
     gap: var(--date-picker-view-control-gap, var(--spacing-2));
@@ -243,12 +271,12 @@
     display: flex;
   }
 
-  .Nbvdda_navTrigger {
+  .a48aUa_navTrigger {
     width: var(--date-picker-nav-trigger-size, 2rem);
     height: var(--date-picker-nav-trigger-size, 2rem);
   }
 
-  .Nbvdda_viewTrigger {
+  .a48aUa_viewTrigger {
     min-width: 0;
     min-height: var(--date-picker-view-trigger-height, 2rem);
     gap: var(--date-picker-view-trigger-gap, var(--spacing-2));
@@ -260,21 +288,21 @@
     flex: 1;
   }
 
-  .Nbvdda_rangeText, .Nbvdda_valueText {
+  .a48aUa_rangeText, .a48aUa_valueText {
     text-overflow: ellipsis;
     white-space: nowrap;
     min-width: 0;
     overflow: hidden;
   }
 
-  .Nbvdda_table {
+  .a48aUa_table {
     border-collapse: separate;
     width: 100%;
     border-spacing: var(--date-picker-table-cell-gap, .125rem);
     table-layout: fixed;
   }
 
-  .Nbvdda_tableHeader, .Nbvdda_weekNumberCell {
+  .a48aUa_tableHeader, .a48aUa_weekNumberCell {
     width: var(--date-picker-table-cell-size, 2.25rem);
     height: var(--date-picker-table-header-height, 1.75rem);
     color: var(--date-picker-table-header-color, var(--color-muted-foreground));
@@ -284,19 +312,19 @@
     text-align: center;
   }
 
-  .Nbvdda_tableCell {
+  .a48aUa_tableCell {
     width: var(--date-picker-table-cell-size, 2.25rem);
     height: var(--date-picker-table-cell-size, 2.25rem);
     text-align: center;
     padding: 0;
   }
 
-  .Nbvdda_weekNumberCell {
+  .a48aUa_weekNumberCell {
     color: var(--date-picker-week-number-color, var(--color-muted-foreground));
     font-variant-numeric: tabular-nums;
   }
 
-  .Nbvdda_tableCellTrigger {
+  .a48aUa_tableCellTrigger {
     box-sizing: border-box;
     width: 100%;
     min-width: var(--date-picker-table-cell-size, 2.25rem);
@@ -361,7 +389,7 @@
     }
   }
 
-  .Nbvdda_select {
+  .a48aUa_select {
     box-sizing: border-box;
     width: 100%;
     min-width: 0;
@@ -396,7 +424,7 @@
     }
   }
 
-  .Nbvdda_presetTrigger {
+  .a48aUa_presetTrigger {
     min-height: var(--date-picker-preset-trigger-height, 2rem);
     padding-inline: var(--date-picker-preset-trigger-padding-x, var(--spacing-2));
     background-color: var(--date-picker-preset-trigger-bg, var(--color-muted));