@moduix/react 1.1.0 → 2.0.0

package/dist/components/number-input/NumberInput.module.js

@@ -1,14 +1,14 @@
 import './NumberInput.css';
 //#region src/components/number-input/NumberInput.module.css
 var NumberInput_module_default = {
-	"control": "_99y8lW_control",
-	"decrementTrigger": "_99y8lW_decrementTrigger",
-	"incrementTrigger": "_99y8lW_incrementTrigger",
-	"input": "_99y8lW_input",
-	"label": "_99y8lW_label",
-	"root": "_99y8lW_root",
-	"scrubber": "_99y8lW_scrubber",
-	"valueText": "_99y8lW_valueText"
+	"control": "ZjEX8G_control",
+	"decrementTrigger": "ZjEX8G_decrementTrigger",
+	"incrementTrigger": "ZjEX8G_incrementTrigger",
+	"input": "ZjEX8G_input",
+	"label": "ZjEX8G_label",
+	"root": "ZjEX8G_root",
+	"scrubber": "ZjEX8G_scrubber",
+	"valueText": "ZjEX8G_valueText"
 };
 //#endregion
 export { NumberInput_module_default as default };

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

@@ -1,2 +1,2 @@
-import { NumberInput } from "./NumberInput.js";
-export { NumberInput };
+import { NumberInput, useNumberInput, useNumberInputContext } from "./NumberInput.js";
+export { NumberInput, useNumberInput, useNumberInputContext };

package/dist/components/pagination/Pagination.css

@@ -1,12 +1,12 @@
 @layer ui.components {
-  ._9uLVTW_root {
+  .djsvna_root {
     align-items: center;
     gap: var(--pagination-gap, var(--spacing-1));
     color: var(--pagination-color, var(--color-foreground));
     display: inline-flex;
   }
 
-  ._9uLVTW_item, ._9uLVTW_trigger, ._9uLVTW_ellipsis {
+  .djsvna_item, .djsvna_trigger, .djsvna_ellipsis {
     box-sizing: border-box;
     min-width: var(--pagination-item-size, var(--size-lg));
     height: var(--pagination-item-size, var(--size-lg));
@@ -20,7 +20,7 @@
     display: inline-flex;
   }
 
-  ._9uLVTW_item, ._9uLVTW_trigger {
+  .djsvna_item, .djsvna_trigger {
     cursor: pointer;
     gap: var(--pagination-trigger-gap, var(--spacing-2));
     border: var(--pagination-item-border-width, var(--border-width-sm)) solid
@@ -61,7 +61,7 @@
     }
   }
 
-  ._9uLVTW_item[data-selected] {
+  .djsvna_item[data-selected] {
     border-color: var(--pagination-item-border-color-selected, var(--color-foreground));
     background-color: var(--pagination-item-bg-selected, var(--color-foreground));
     color: var(--pagination-item-color-selected, var(--color-background));
@@ -73,21 +73,21 @@
     }
   }
 
-  ._9uLVTW_trigger {
+  .djsvna_trigger {
     padding-inline: max(var(--pagination-item-padding-inline, .75rem), var(--spacing-3));
   }
 
-  ._9uLVTW_iconTrigger {
+  .djsvna_iconTrigger {
     width: var(--pagination-item-size, var(--size-lg));
     padding-inline: 0;
   }
 
-  ._9uLVTW_ellipsis {
+  .djsvna_ellipsis {
     color: var(--pagination-ellipsis-color, var(--color-muted-foreground));
     user-select: none;
   }
 
-  ._9uLVTW_edgeIcon {
+  .djsvna_edgeIcon {
     justify-content: center;
     align-items: center;
     display: inline-flex;

package/dist/components/pagination/Pagination.d.ts

@@ -1,6 +1,7 @@
 import { Pagination } from "@ark-ui/react/pagination";
 
 //#region src/components/pagination/Pagination.d.ts
+declare function PaginationItems(): import("react").JSX.Element;
 declare const Pagination$1: import("react").ForwardRefExoticComponent<Omit<Pagination.RootProps & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>> & {
   Root: import("react").ForwardRefExoticComponent<Omit<Pagination.RootProps & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
   RootProvider: import("react").ForwardRefExoticComponent<Omit<Pagination.RootProviderProps & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
@@ -11,6 +12,9 @@ declare const Pagination$1: import("react").ForwardRefExoticComponent<Omit<Pagin
   FirstTrigger: import("react").ForwardRefExoticComponent<Omit<Pagination.FirstTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   LastTrigger: import("react").ForwardRefExoticComponent<Omit<Pagination.LastTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   Context: (props: Pagination.ContextProps) => import("react").ReactNode;
+  Items: typeof PaginationItems;
+  usePagination: (props?: import("@ark-ui/react/pagination").UsePaginationProps) => import("@ark-ui/react/pagination").UsePaginationReturn;
+  usePaginationContext: () => import("@ark-ui/react/pagination").UsePaginationContext;
 };
 //#endregion
 export { Pagination$1 as Pagination };

package/dist/components/pagination/Pagination.js

@@ -1,10 +1,10 @@
-import { ChevronLeftIcon, ChevronRightIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { ChevronLeftIcon, ChevronRightIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import Pagination_module_default from "./Pagination.module.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { Pagination } from "@ark-ui/react/pagination";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Pagination, usePagination, usePaginationContext } from "@ark-ui/react/pagination";
 //#region src/components/pagination/Pagination.tsx
 const PaginationRoot = forwardRef(function PaginationRoot({ "aria-label": ariaLabel = "Pagination", className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Pagination.Root, {
@@ -86,6 +86,12 @@ const PaginationLastTrigger = forwardRef(function PaginationLastTrigger({ classN
 	});
 });
 const PaginationContext = Pagination.Context;
+function PaginationItems() {
+	return /* @__PURE__ */ jsx(PaginationContext, { children: (pagination) => pagination.pages.map((page, index) => page.type === "page" ? /* @__PURE__ */ jsx(PaginationItem, {
+		...page,
+		children: page.value
+	}, index) : /* @__PURE__ */ jsx(PaginationEllipsis, { index }, index)) });
+}
 const Pagination$1 = Object.assign(PaginationRoot, {
 	Root: PaginationRoot,
 	RootProvider: PaginationRootProvider,
@@ -95,7 +101,10 @@ const Pagination$1 = Object.assign(PaginationRoot, {
 	NextTrigger: PaginationNextTrigger,
 	FirstTrigger: PaginationFirstTrigger,
 	LastTrigger: PaginationLastTrigger,
-	Context: PaginationContext
+	Context: PaginationContext,
+	Items: PaginationItems,
+	usePagination,
+	usePaginationContext
 });
 //#endregion
 export { Pagination$1 as Pagination };

package/dist/components/pagination/Pagination.module.js

@@ -1,12 +1,12 @@
 import './Pagination.css';
 //#region src/components/pagination/Pagination.module.css
 var Pagination_module_default = {
-	"edgeIcon": "_9uLVTW_edgeIcon",
-	"ellipsis": "_9uLVTW_ellipsis",
-	"iconTrigger": "_9uLVTW_iconTrigger",
-	"item": "_9uLVTW_item",
-	"root": "_9uLVTW_root",
-	"trigger": "_9uLVTW_trigger"
+	"edgeIcon": "djsvna_edgeIcon",
+	"ellipsis": "djsvna_ellipsis",
+	"iconTrigger": "djsvna_iconTrigger",
+	"item": "djsvna_item",
+	"root": "djsvna_root",
+	"trigger": "djsvna_trigger"
 };
 //#endregion
 export { Pagination_module_default as default };

package/dist/components/password-input/PasswordInput.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .Tb1TUq_root {
+  ._8wEG0G_root {
     box-sizing: border-box;
     gap: var(--password-input-gap, var(--field-gap, var(--spacing-1)));
     width: var(--password-input-width, 100%);
@@ -13,7 +13,7 @@
     }
   }
 
-  .Tb1TUq_label {
+  ._8wEG0G_label {
     align-items: center;
     gap: var(--password-input-label-gap, var(--field-label-gap, var(--spacing-1)));
     color: var(--password-input-label-color, var(--field-label-color, var(--color-foreground)));
@@ -27,7 +27,7 @@
     }
   }
 
-  .Tb1TUq_control {
+  ._8wEG0G_control {
     box-sizing: border-box;
     width: 100%;
     min-height: var(--password-input-height, var(--input-height, var(--input-height-md, var(--size-lg))));
@@ -68,7 +68,7 @@
     }
   }
 
-  .Tb1TUq_input {
+  ._8wEG0G_input {
     box-sizing: border-box;
     min-width: 0;
     min-height: 0;
@@ -100,7 +100,7 @@
     }
   }
 
-  .Tb1TUq_visibilityTrigger {
+  ._8wEG0G_visibilityTrigger {
     width: var(--password-input-trigger-size, var(--button-size-sm, var(--size-sm)));
     min-width: var(--password-input-trigger-size, var(--button-size-sm, var(--size-sm)));
     height: var(--password-input-trigger-size, var(--button-size-sm, var(--size-sm)));
@@ -134,7 +134,7 @@
     }
   }
 
-  .Tb1TUq_indicator {
+  ._8wEG0G_indicator {
     padding: var(--password-input-trigger-visual-padding, var(--spacing-1));
     border-radius: var(--password-input-trigger-radius, var(--radius-sm));
     transition: background-color var(--input-transition, var(--transition-default)),
@@ -149,7 +149,7 @@
     }
   }
 
-  .Tb1TUq_visibilityTrigger:hover .Tb1TUq_indicator, .Tb1TUq_visibilityTrigger:focus-visible .Tb1TUq_indicator {
+  ._8wEG0G_visibilityTrigger:hover ._8wEG0G_indicator, ._8wEG0G_visibilityTrigger:focus-visible ._8wEG0G_indicator {
     background: var(--password-input-trigger-hover-bg, var(--color-muted));
   }
 }

package/dist/components/password-input/PasswordInput.d.ts

@@ -1,11 +1,15 @@
+import { ComponentProps } from "react";
 import { PasswordInput, usePasswordInput } from "@ark-ui/react/password-input";
 
 //#region src/components/password-input/PasswordInput.d.ts
+declare const PasswordInputControl: import("react").ForwardRefExoticComponent<Omit<PasswordInput.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type PasswordInputFieldProps = Omit<ComponentProps<typeof PasswordInputControl>, 'asChild' | 'children'>;
 declare const PasswordInput$1: import("react").ForwardRefExoticComponent<Omit<PasswordInput.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
   Root: import("react").ForwardRefExoticComponent<Omit<PasswordInput.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   RootProvider: import("react").ForwardRefExoticComponent<Omit<PasswordInput.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Label: import("react").ForwardRefExoticComponent<Omit<PasswordInput.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
   Control: import("react").ForwardRefExoticComponent<Omit<PasswordInput.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Field: import("react").ForwardRefExoticComponent<Omit<PasswordInputFieldProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Input: import("react").ForwardRefExoticComponent<Omit<PasswordInput.InputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
   VisibilityTrigger: import("react").ForwardRefExoticComponent<Omit<PasswordInput.VisibilityTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   Indicator: import("react").ForwardRefExoticComponent<Omit<PasswordInput.IndicatorProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/password-input/PasswordInput.js

@@ -1,9 +1,9 @@
-import { EyeClosedIcon, EyeIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { EyeClosedIcon, EyeIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import PasswordInput_module_default from "./PasswordInput.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { PasswordInput, usePasswordInput } from "@ark-ui/react/password-input";
 //#region src/components/password-input/PasswordInput.tsx
 const PasswordInputRoot = forwardRef(function PasswordInputRoot({ className, ...props }, ref) {
@@ -64,11 +64,19 @@ const PasswordInputIndicator = forwardRef(function PasswordInputIndicator({ clas
 		children: children ?? /* @__PURE__ */ jsx(EyeIcon, {})
 	});
 });
+const PasswordInputField = forwardRef(function PasswordInputField(props, ref) {
+	return /* @__PURE__ */ jsxs(PasswordInputControl, {
+		ref,
+		...props,
+		children: [/* @__PURE__ */ jsx(PasswordInputInput, {}), /* @__PURE__ */ jsx(PasswordInputVisibilityTrigger, { children: /* @__PURE__ */ jsx(PasswordInputIndicator, {}) })]
+	});
+});
 const PasswordInput$1 = Object.assign(PasswordInputRoot, {
 	Root: PasswordInputRoot,
 	RootProvider: PasswordInputRootProvider,
 	Label: PasswordInputLabel,
 	Control: PasswordInputControl,
+	Field: PasswordInputField,
 	Input: PasswordInputInput,
 	VisibilityTrigger: PasswordInputVisibilityTrigger,
 	Indicator: PasswordInputIndicator

package/dist/components/password-input/PasswordInput.module.js

@@ -1,12 +1,12 @@
 import './PasswordInput.css';
 //#region src/components/password-input/PasswordInput.module.css
 var PasswordInput_module_default = {
-	"control": "Tb1TUq_control",
-	"indicator": "Tb1TUq_indicator",
-	"input": "Tb1TUq_input",
-	"label": "Tb1TUq_label",
-	"root": "Tb1TUq_root",
-	"visibilityTrigger": "Tb1TUq_visibilityTrigger"
+	"control": "_8wEG0G_control",
+	"indicator": "_8wEG0G_indicator",
+	"input": "_8wEG0G_input",
+	"label": "_8wEG0G_label",
+	"root": "_8wEG0G_root",
+	"visibilityTrigger": "_8wEG0G_visibilityTrigger"
 };
 //#endregion
 export { PasswordInput_module_default as default };

package/dist/components/pin-input/PinInput.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .WDSDQW_root {
+  .d_HHPW_root {
     align-items: flex-start;
     gap: var(--pin-input-root-gap, var(--spacing-2));
     width: var(--pin-input-width, auto);
@@ -12,20 +12,20 @@
     }
   }
 
-  .WDSDQW_label {
+  .d_HHPW_label {
     color: var(--pin-input-label-color, var(--color-foreground));
     font-size: var(--pin-input-label-font-size, var(--text-sm));
     font-weight: var(--pin-input-label-font-weight, var(--weight-medium));
     line-height: var(--pin-input-label-line-height, var(--line-height-text-sm));
   }
 
-  .WDSDQW_control {
+  .d_HHPW_control {
     align-items: center;
     gap: var(--pin-input-gap, var(--spacing-2));
     display: inline-flex;
   }
 
-  .WDSDQW_input {
+  .d_HHPW_input {
     box-sizing: border-box;
     width: var(--pin-input-input-width, var(--pin-input-input-size, 2.5rem));
     height: var(--pin-input-input-height, var(--pin-input-input-size, 2.5rem));
@@ -76,7 +76,7 @@
     }
   }
 
-  .WDSDQW_separator {
+  .d_HHPW_separator {
     width: var(--pin-input-separator-width, var(--pin-input-separator-size, 1rem));
     height: var(--pin-input-separator-height, var(--pin-input-separator-size, 1rem));
     color: var(--pin-input-separator-color, var(--color-muted-foreground));

package/dist/components/pin-input/PinInput.d.ts

@@ -2,6 +2,11 @@ import { ComponentProps } from "react";
 import { PinInput, UsePinInputProps } from "@ark-ui/react/pin-input";
 
 //#region src/components/pin-input/PinInput.d.ts
+declare function PinInputInputs({
+  className
+}: {
+  className?: string;
+}): import("react").JSX.Element[];
 declare function PinInputSeparator({
   className,
   'aria-hidden': ariaHidden,
@@ -16,7 +21,7 @@ declare const PinInput$1: import("react").ForwardRefExoticComponent<Omit<PinInpu
   Label: import("react").ForwardRefExoticComponent<Omit<PinInput.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
   Control: import("react").ForwardRefExoticComponent<Omit<PinInput.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Input: import("react").ForwardRefExoticComponent<Omit<PinInput.InputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
-  HiddenInput: import("react").ForwardRefExoticComponent<Omit<PinInput.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+  Inputs: typeof PinInputInputs;
   Separator: typeof PinInputSeparator;
 };
 //#endregion

package/dist/components/pin-input/PinInput.js

@@ -1,28 +1,31 @@
-import { SeparatorMarkIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { SeparatorMarkIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import PinInput_module_default from "./PinInput.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { forwardRef } from "react";
-import { PinInput, usePinInput } from "@ark-ui/react/pin-input";
+import { Children, cloneElement, forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { PinInput, usePinInput, usePinInputContext } from "@ark-ui/react/pin-input";
 //#region src/components/pin-input/PinInput.tsx
-const PinInputRoot = forwardRef(function PinInputRoot({ children, className, count, placeholder = "", ...props }, ref) {
+const PinInputRoot = forwardRef(function PinInputRoot({ asChild, children, className, count, placeholder = "", ...props }, ref) {
 	return /* @__PURE__ */ jsx(PinInput.Root, {
 		ref,
+		asChild,
 		"data-slot": "pin-input-root",
 		className: clsx(PinInput_module_default.root, normalizeClassName(className)),
 		count,
 		placeholder,
 		...props,
-		children
+		children: withHiddenInput(children, asChild)
 	});
 });
-const PinInputRootProvider = forwardRef(function PinInputRootProvider({ className, ...props }, ref) {
+const PinInputRootProvider = forwardRef(function PinInputRootProvider({ asChild, children, className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(PinInput.RootProvider, {
 		ref,
+		asChild,
 		"data-slot": "pin-input-root-provider",
 		className: clsx(PinInput_module_default.root, normalizeClassName(className)),
-		...props
+		...props,
+		children: withHiddenInput(children, asChild)
 	});
 });
 const PinInputLabel = forwardRef(function PinInputLabel({ className, ...props }, ref) {
@@ -49,13 +52,19 @@ const PinInputInput = forwardRef(function PinInputInput({ className, ...props },
 		...props
 	});
 });
-const PinInputHiddenInput = forwardRef(function PinInputHiddenInput(props, ref) {
-	return /* @__PURE__ */ jsx(PinInput.HiddenInput, {
-		ref,
-		"data-slot": "pin-input-hidden-input",
-		...props
-	});
-});
+function PinInputInputs({ className }) {
+	const { items } = usePinInputContext();
+	return items.map((index) => /* @__PURE__ */ jsx(PinInputInput, {
+		index,
+		className
+	}, index));
+}
+function withHiddenInput(children, asChild) {
+	const hiddenInput = /* @__PURE__ */ jsx(PinInput.HiddenInput, { "data-slot": "pin-input-hidden-input" });
+	if (!asChild) return /* @__PURE__ */ jsxs(Fragment$1, { children: [children, hiddenInput] });
+	const child = Children.only(children);
+	return cloneElement(child, {}, child.props.children, hiddenInput);
+}
 function PinInputSeparator({ className, "aria-hidden": ariaHidden = true, role = "presentation", children, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "pin-input-separator",
@@ -78,7 +87,7 @@ const PinInput$1 = Object.assign(PinInputRoot, {
 	Label: PinInputLabel,
 	Control: PinInputControl,
 	Input: PinInputInput,
-	HiddenInput: PinInputHiddenInput,
+	Inputs: PinInputInputs,
 	Separator: PinInputSeparator
 });
 //#endregion

package/dist/components/pin-input/PinInput.module.js

@@ -1,11 +1,11 @@
 import './PinInput.css';
 //#region src/components/pin-input/PinInput.module.css
 var PinInput_module_default = {
-	"control": "WDSDQW_control",
-	"input": "WDSDQW_input",
-	"label": "WDSDQW_label",
-	"root": "WDSDQW_root",
-	"separator": "WDSDQW_separator"
+	"control": "d_HHPW_control",
+	"input": "d_HHPW_input",
+	"label": "d_HHPW_label",
+	"root": "d_HHPW_root",
+	"separator": "d_HHPW_separator"
 };
 //#endregion
 export { PinInput_module_default as default };

package/dist/components/popover/Popover.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .xEBSjq_trigger, .xEBSjq_closeTrigger {
+  .Qww_tG_trigger, .Qww_tG_closeTrigger {
     box-sizing: border-box;
     min-height: var(--popover-control-height, var(--size-lg));
     padding: var(--popover-control-padding-y, .5rem) var(--popover-control-padding-x, .875rem);
@@ -45,13 +45,13 @@
     }
   }
 
-  .xEBSjq_positioner {
+  .Qww_tG_positioner {
     z-index: var(--z-index, var(--z-popup));
     max-width: var(--available-width);
     outline: 0;
   }
 
-  .xEBSjq_content {
+  .Qww_tG_content {
     --popover-close-icon-size-effective: var(--popover-close-icon-size, 1.75rem);
     --popover-close-icon-offset-effective: var(--popover-close-icon-offset, var(--spacing-3));
     --popover-header-padding-inline-end-effective: var(--popover-header-padding-inline-end, calc(var(--popover-close-icon-size-effective) + var(--popover-close-icon-offset-effective)));
@@ -75,27 +75,37 @@
     overflow: visible;
 
     &[data-state="open"] {
-      animation: xEBSjq_popover-enter var(--popover-transition, var(--duration-fast)) both;
+      animation: Qww_tG_popover-enter
+        var(--popover-transition, var(--popup-motion-duration, var(--duration-fast)) var(--popup-motion-easing, ease))
+        both;
     }
 
     &[data-state="closed"] {
-      animation: xEBSjq_popover-exit var(--popover-transition, var(--duration-fast)) both;
+      animation: Qww_tG_popover-exit
+        var(--popover-transition, var(--popup-motion-duration, var(--duration-fast)) var(--popup-motion-easing, ease))
+        both;
+    }
+
+    &:has(.Qww_tG_closeIcon) {
+      & .Qww_tG_header {
+        padding-inline-end: var(--popover-header-padding-inline-end-effective);
+      }
     }
   }
 
-  .xEBSjq_arrow {
+  .Qww_tG_arrow {
     --arrow-size: var(--popover-arrow-size, .625rem);
     --arrow-background: var(--popover-bg, var(--color-popover));
   }
 
-  .xEBSjq_arrowTip {
+  .Qww_tG_arrowTip {
     border-top: var(--popover-border-width, var(--border-width-sm)) solid
       var(--popover-arrow-stroke-color, var(--popover-border-color, var(--color-border)));
     border-left: var(--popover-border-width, var(--border-width-sm)) solid
       var(--popover-arrow-stroke-color, var(--popover-border-color, var(--color-border)));
   }
 
-  .xEBSjq_title {
+  .Qww_tG_title {
     color: var(--popover-title-color, var(--popover-color, var(--color-popover-foreground)));
     font-size: var(--popover-title-font-size, var(--text-md));
     font-weight: var(--popover-title-font-weight, var(--weight-semibold));
@@ -103,14 +113,14 @@
     margin: 0;
   }
 
-  .xEBSjq_description {
+  .Qww_tG_description {
     margin: var(--popover-description-margin, 0);
     color: var(--popover-description-color, var(--color-muted-foreground));
     font-size: var(--popover-description-font-size, var(--text-sm));
     line-height: var(--popover-description-line-height, var(--line-height-text-sm));
   }
 
-  .xEBSjq_closeIcon {
+  .Qww_tG_closeIcon {
     --close-button-size: var(--popover-close-icon-size-effective);
     --close-button-radius: var(--popover-close-icon-radius, var(--radius-sm));
     --close-button-icon-size: var(--popover-close-icon-glyph-size, .875rem);
@@ -124,17 +134,16 @@
     inset-inline-end: var(--popover-close-icon-offset-effective);
   }
 
-  .xEBSjq_header {
+  .Qww_tG_header {
     gap: var(--popover-header-gap, var(--spacing-1));
-    padding-inline-end: var(--popover-header-padding-inline-end-effective);
     display: grid;
   }
 
-  .xEBSjq_body {
+  .Qww_tG_body {
     margin: var(--popover-body-margin, 0);
   }
 
-  .xEBSjq_footer {
+  .Qww_tG_footer {
     align-items: center;
     justify-content: var(--popover-footer-justify, flex-end);
     gap: var(--popover-footer-gap, var(--spacing-2));
@@ -142,21 +151,21 @@
     display: flex;
   }
 
-  @keyframes xEBSjq_popover-enter {
+  @keyframes Qww_tG_popover-enter {
     from {
-      opacity: var(--popover-content-starting-opacity, 0);
-      translate: var(--popover-content-starting-translate-x, 0)
-        var(--popover-content-starting-translate-y, 0);
-      scale: var(--popover-content-starting-scale, var(--scale-popup));
+      opacity: var(--popover-content-starting-opacity, var(--popup-motion-starting-opacity, 0));
+      translate: var(--popover-content-starting-translate-x, var(--popup-motion-starting-translate-x, 0))
+        var(--popover-content-starting-translate-y, var(--popup-motion-starting-translate-y, 0));
+      scale: var(--popover-content-starting-scale, var(--popup-motion-starting-scale, var(--scale-popup)));
     }
   }
 
-  @keyframes xEBSjq_popover-exit {
+  @keyframes Qww_tG_popover-exit {
     to {
-      opacity: var(--popover-content-ending-opacity, 0);
-      translate: var(--popover-content-ending-translate-x, 0)
-        var(--popover-content-ending-translate-y, 0);
-      scale: var(--popover-content-ending-scale, var(--scale-popup));
+      opacity: var(--popover-content-ending-opacity, var(--popup-motion-ending-opacity, 0));
+      translate: var(--popover-content-ending-translate-x, var(--popup-motion-ending-translate-x, 0))
+        var(--popover-content-ending-translate-y, var(--popup-motion-ending-translate-y, 0));
+      scale: var(--popover-content-ending-scale, var(--popup-motion-ending-scale, var(--scale-popup)));
     }
   }
 }

package/dist/components/popover/Popover.js

@@ -2,9 +2,9 @@ import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import { CloseButton } from "../close-button/CloseButton.js";
 import { OverlayPortal, OverlayPortalProvider } from "../../lib/moduix/overlayPortal.js";
 import Popover_module_default from "./Popover.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
 import { Popover, usePopover } from "@ark-ui/react/popover";
 //#region src/components/popover/Popover.tsx
 const DEFAULT_CLOSE_BUTTON_LABEL = "Close popover";

package/dist/components/popover/Popover.module.js

@@ -1,20 +1,20 @@
 import './Popover.css';
 //#region src/components/popover/Popover.module.css
 var Popover_module_default = {
-	"arrow": "xEBSjq_arrow",
-	"arrowTip": "xEBSjq_arrowTip",
-	"body": "xEBSjq_body",
-	"closeIcon": "xEBSjq_closeIcon",
-	"closeTrigger": "xEBSjq_closeTrigger",
-	"content": "xEBSjq_content",
-	"description": "xEBSjq_description",
-	"footer": "xEBSjq_footer",
-	"header": "xEBSjq_header",
-	"popover-enter": "xEBSjq_popover-enter",
-	"popover-exit": "xEBSjq_popover-exit",
-	"positioner": "xEBSjq_positioner",
-	"title": "xEBSjq_title",
-	"trigger": "xEBSjq_trigger"
+	"arrow": "Qww_tG_arrow",
+	"arrowTip": "Qww_tG_arrowTip",
+	"body": "Qww_tG_body",
+	"closeIcon": "Qww_tG_closeIcon",
+	"closeTrigger": "Qww_tG_closeTrigger",
+	"content": "Qww_tG_content",
+	"description": "Qww_tG_description",
+	"footer": "Qww_tG_footer",
+	"header": "Qww_tG_header",
+	"popover-enter": "Qww_tG_popover-enter",
+	"popover-exit": "Qww_tG_popover-exit",
+	"positioner": "Qww_tG_positioner",
+	"title": "Qww_tG_title",
+	"trigger": "Qww_tG_trigger"
 };
 //#endregion
 export { Popover_module_default as default };