@moduix/react 2.5.1 → 2.7.0

package/dist/components/tabs/Tabs_module.css

@@ -19,7 +19,6 @@
     z-index: 0;
     align-items: stretch;
     gap: var(--moduix-tabs-list-gap, var(--moduix-spacing-1));
-    width: -moz-fit-content;
     width: fit-content;
     max-width: 100%;
     padding: var(--moduix-tabs-list-padding-y, var(--moduix-tabs-list-padding, var(--moduix-spacing-1)))
@@ -42,7 +41,7 @@
     flex-direction: column;
   }
 
-  @media (max-width: 30rem) {
+  @media (width <= 30rem) {
     .list-HWuixw[data-orientation="vertical"] {
       inline-size: min(var(--moduix-tabs-vertical-list-width, 12rem), 40%);
       min-inline-size: 0;
@@ -121,6 +120,8 @@
   }
 
   .indicator-Eq3gMQ {
+    --transition-duration: var(--moduix-tabs-indicator-transition-duration, var(--moduix-duration-normal));
+    --transition-timing-function: var(--moduix-tabs-indicator-transition-timing-function, var(--moduix-ease-in-out));
     z-index: 0;
     top: 50%;
     left: var(--left, 0);
@@ -129,23 +130,17 @@
     border-radius: var(--moduix-tabs-indicator-radius, var(--moduix-radius-md));
     background-color: var(--moduix-tabs-indicator-bg, var(--moduix-color-background));
     box-shadow: var(--moduix-tabs-indicator-shadow, var(--moduix-shadow-sm));
-    transition: width var(--moduix-tabs-indicator-transition, var(--moduix-transition-default)),
-      height var(--moduix-tabs-indicator-transition, var(--moduix-transition-default)),
-      top var(--moduix-tabs-indicator-transition, var(--moduix-transition-default)),
-      left var(--moduix-tabs-indicator-transition, var(--moduix-transition-default));
     position: absolute;
     translate: 0 -50%;
   }
 
   .root-r9cKMR[data-variant="line"]:not([data-orientation="vertical"]) .indicator-Eq3gMQ {
+    --transition-duration: var(--moduix-tabs-line-indicator-transition-duration, var(--moduix-duration-normal));
+    --transition-timing-function: var(--moduix-tabs-line-indicator-transition-timing-function, var(--moduix-ease-in-out));
     height: var(--moduix-tabs-line-indicator-size, var(--moduix-spacing-0-5));
     border-radius: var(--moduix-tabs-line-indicator-radius, var(--moduix-radius-full));
     background-color: var(--moduix-tabs-line-indicator-bg, var(--moduix-tabs-tab-color-active, var(--moduix-color-foreground)));
     box-shadow: none;
-    transition: width var(--moduix-tabs-line-indicator-transition, var(--moduix-transition-default)),
-        height var(--moduix-tabs-line-indicator-transition, var(--moduix-transition-default)),
-        top var(--moduix-tabs-line-indicator-transition, var(--moduix-transition-default)),
-        left var(--moduix-tabs-line-indicator-transition, var(--moduix-transition-default));
     top: auto;
     bottom: 0;
     translate: none;

package/dist/components/tag/Tag.js

@@ -2,7 +2,6 @@ import { jsx } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import { CloseButton } from "../close-button/index.js";
 import Tag_module from "./Tag.module.js";
 const DEFAULT_CLOSE_LABEL = 'Remove tag';
@@ -15,7 +14,7 @@ const Tag_TagRoot = /*#__PURE__*/ forwardRef(function({ className, size = 'md',
         "data-slot": "tag-root",
         "data-size": size,
         "data-variant": variant,
-        className: clsx(Tag_module.root, normalizeClassName(className))
+        className: clsx(Tag_module.root, className)
     });
 });
 const Tag_TagLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
@@ -25,7 +24,7 @@ const Tag_TagLabel = /*#__PURE__*/ forwardRef(function({ className, ...props },
         "data-scope": "tag",
         "data-part": "label",
         "data-slot": "tag-label",
-        className: clsx(Tag_module.label, normalizeClassName(className))
+        className: clsx(Tag_module.label, className)
     });
 });
 const Tag_TagStartElement = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
@@ -35,7 +34,7 @@ const Tag_TagStartElement = /*#__PURE__*/ forwardRef(function({ className, ...pr
         "data-scope": "tag",
         "data-part": "start-element",
         "data-slot": "tag-start-element",
-        className: clsx(Tag_module.startElement, normalizeClassName(className))
+        className: clsx(Tag_module.startElement, className)
     });
 });
 const Tag_TagEndElement = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
@@ -45,7 +44,7 @@ const Tag_TagEndElement = /*#__PURE__*/ forwardRef(function({ className, ...prop
         "data-scope": "tag",
         "data-part": "end-element",
         "data-slot": "tag-end-element",
-        className: clsx(Tag_module.endElement, normalizeClassName(className))
+        className: clsx(Tag_module.endElement, className)
     });
 });
 const Tag_TagCloseTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }, ref) {
@@ -58,7 +57,7 @@ const Tag_TagCloseTrigger = /*#__PURE__*/ forwardRef(function({ asChild, classNa
         "data-slot": "tag-close-trigger",
         "aria-label": ariaLabel ?? (asChild || null != children || null != ariaLabelledBy ? void 0 : DEFAULT_CLOSE_LABEL),
         "aria-labelledby": ariaLabelledBy,
-        className: clsx(Tag_module.closeTrigger, normalizeClassName(className)),
+        className: clsx(Tag_module.closeTrigger, className),
         children: children
     });
 });

package/dist/components/tag/Tag_module.css

@@ -7,7 +7,6 @@
       var(--moduix-tag-border-color, var(--moduix-tag-default-border-color, transparent));
     border-radius: var(--moduix-tag-radius, var(--moduix-radius-full));
     background-color: var(--moduix-tag-bg, var(--moduix-tag-default-bg, var(--moduix-color-primary)));
-    width: -moz-fit-content;
     width: fit-content;
     min-width: 0;
     max-width: 100%;
@@ -91,13 +90,12 @@
     --moduix-close-button-icon-size: var(--moduix-tag-close-trigger-icon-size, var(--moduix-spacing-2-5));
     --moduix-close-button-bg: var(--moduix-tag-close-trigger-bg, transparent);
     --moduix-close-button-bg-hover: var(--moduix-tag-close-trigger-bg-hover, color-mix(in oklab, currentColor 12%, transparent));
-    --moduix-close-button-color: inherit;
-    --moduix-close-button-color-hover: inherit;
+    --moduix-close-button-color: currentColor;
+    --moduix-close-button-color-hover: currentColor;
     --moduix-close-button-disabled-opacity: var(--moduix-tag-disabled-opacity, var(--moduix-opacity-disabled));
     --moduix-close-button-focus-ring-width: var(--moduix-tag-close-trigger-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)));
     --moduix-close-button-focus-ring-color: var(--moduix-tag-close-trigger-focus-ring-color, var(--moduix-color-ring));
     --moduix-close-button-focus-ring-offset: var(--moduix-tag-close-trigger-focus-ring-offset, 0);
-    --moduix-close-button-transition: var(--moduix-tag-transition, var(--moduix-transition-default));
   }
 }
 

package/dist/components/tags-input/TagsInput.d.ts

@@ -1,20 +1,20 @@
 import { TagsInput as TagsInputPrimitive, useTagsInput, useTagsInputContext, useTagsInputItemContext } from '@ark-ui/react/tags-input';
-import type { ReactNode } from 'react';
 declare function TagsInputItems(): import("react").JSX.Element;
 declare const TagsInput: import("react").ForwardRefExoticComponent<Omit<TagsInputPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
     Root: import("react").ForwardRefExoticComponent<Omit<TagsInputPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     RootProvider: import("react").ForwardRefExoticComponent<Omit<TagsInputPrimitive.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    HiddenInput: import("react").ForwardRefExoticComponent<TagsInputPrimitive.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;
     Label: import("react").ForwardRefExoticComponent<Omit<TagsInputPrimitive.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
     Control: import("react").ForwardRefExoticComponent<Omit<TagsInputPrimitive.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Item: import("react").ForwardRefExoticComponent<Omit<TagsInputPrimitive.ItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-    ItemContext: (props: TagsInputPrimitive.ItemContextProps) => ReactNode;
+    ItemContext: (props: TagsInputPrimitive.ItemContextProps) => import("react").ReactNode;
     ItemPreview: import("react").ForwardRefExoticComponent<Omit<TagsInputPrimitive.ItemPreviewProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     ItemText: import("react").ForwardRefExoticComponent<Omit<TagsInputPrimitive.ItemTextProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
     ItemDeleteTrigger: import("react").ForwardRefExoticComponent<Omit<TagsInputPrimitive.ItemDeleteTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
     ItemInput: import("react").ForwardRefExoticComponent<Omit<TagsInputPrimitive.ItemInputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
     Input: import("react").ForwardRefExoticComponent<Omit<TagsInputPrimitive.InputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
     ClearTrigger: import("react").ForwardRefExoticComponent<Omit<TagsInputPrimitive.ClearTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-    Context: (props: TagsInputPrimitive.ContextProps) => ReactNode;
+    Context: (props: TagsInputPrimitive.ContextProps) => import("react").ReactNode;
     Items: typeof TagsInputItems;
 };
 export { TagsInput, useTagsInput, useTagsInputContext, useTagsInputItemContext };

package/dist/components/tags-input/TagsInput.js

@@ -1,117 +1,103 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useFieldContext } from "@ark-ui/react/field";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { TagsInput, useTagsInput, useTagsInputContext, useTagsInputItemContext } from "@ark-ui/react/tags-input";
 import { clsx } from "clsx";
-import { Children, cloneElement, forwardRef, useEffect, useRef } from "react";
+import { forwardRef } from "react";
 import { CloseIcon } from "../../internal/icons/ui/index.js";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import { CloseButton } from "../close-button/index.js";
 import TagsInput_module from "./TagsInput.module.js";
-const TagsInput_TagsInputRoot = /*#__PURE__*/ forwardRef(function({ asChild, children, className, ...props }, ref) {
+const TagsInput_TagsInputRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(TagsInput.Root, {
         ref: ref,
-        asChild: asChild,
-        "data-slot": "tags-input-root",
-        className: clsx(TagsInput_module.root, normalizeClassName(className)),
+        className: clsx(TagsInput_module.root, className),
         ...props,
-        children: withHiddenInput(children, asChild)
+        "data-slot": "tags-input-root"
     });
 });
-const TagsInput_TagsInputRootProvider = /*#__PURE__*/ forwardRef(function({ asChild, children, className, ...props }, ref) {
+const TagsInput_TagsInputRootProvider = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(TagsInput.RootProvider, {
         ref: ref,
-        asChild: asChild,
-        "data-slot": "tags-input-root-provider",
-        className: clsx(TagsInput_module.root, normalizeClassName(className)),
+        className: clsx(TagsInput_module.root, className),
         ...props,
-        children: withHiddenInput(children, asChild)
+        "data-slot": "tags-input-root-provider"
     });
 });
 const TagsInput_TagsInputLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(TagsInput.Label, {
         ref: ref,
-        "data-slot": "tags-input-label",
-        className: clsx(TagsInput_module.label, normalizeClassName(className)),
-        ...props
+        className: clsx(TagsInput_module.label, className),
+        ...props,
+        "data-slot": "tags-input-label"
     });
 });
 const TagsInput_TagsInputControl = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(TagsInput.Control, {
         ref: ref,
-        "data-slot": "tags-input-control",
-        className: clsx(TagsInput_module.control, normalizeClassName(className)),
-        ...props
+        className: clsx(TagsInput_module.control, className),
+        ...props,
+        "data-slot": "tags-input-control"
     });
 });
 const TagsInput_TagsInputItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(TagsInput.Item, {
         ref: ref,
-        "data-slot": "tags-input-item",
-        className: clsx(TagsInput_module.item, normalizeClassName(className)),
-        ...props
+        className: clsx(TagsInput_module.item, className),
+        ...props,
+        "data-slot": "tags-input-item"
     });
 });
 const TagsInput_TagsInputItemPreview = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(TagsInput.ItemPreview, {
         ref: ref,
-        "data-slot": "tags-input-item-preview",
-        className: clsx(TagsInput_module.itemPreview, normalizeClassName(className)),
-        ...props
+        className: clsx(TagsInput_module.itemPreview, className),
+        ...props,
+        "data-slot": "tags-input-item-preview"
     });
 });
 const TagsInput_TagsInputItemText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(TagsInput.ItemText, {
         ref: ref,
-        "data-slot": "tags-input-item-text",
-        className: clsx(TagsInput_module.itemText, normalizeClassName(className)),
-        ...props
+        className: clsx(TagsInput_module.itemText, className),
+        ...props,
+        "data-slot": "tags-input-item-text"
     });
 });
 const TagsInput_TagsInputItemDeleteTrigger = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(TagsInput.ItemDeleteTrigger, {
         ref: ref,
-        "data-slot": "tags-input-item-delete-trigger",
-        className: clsx(TagsInput_module.itemDeleteTrigger, normalizeClassName(className)),
+        className: clsx(TagsInput_module.itemDeleteTrigger, className),
         ...props,
+        "data-slot": "tags-input-item-delete-trigger",
         children: children ?? /*#__PURE__*/ jsx(CloseIcon, {})
     });
 });
 const TagsInput_TagsInputItemInput = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(TagsInput.ItemInput, {
         ref: ref,
-        "data-slot": "tags-input-item-input",
-        className: clsx(TagsInput_module.itemInput, normalizeClassName(className)),
-        ...props
+        className: clsx(TagsInput_module.itemInput, className),
+        ...props,
+        "data-slot": "tags-input-item-input"
     });
 });
 const TagsInput_TagsInputInput = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(TagsInput.Input, {
         ref: ref,
-        "data-slot": "tags-input-input",
-        className: clsx(TagsInput_module.input, normalizeClassName(className)),
-        ...props
+        className: clsx(TagsInput_module.input, className),
+        ...props,
+        "data-slot": "tags-input-input"
     });
 });
 const TagsInput_TagsInputClearTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }, ref) {
-    const triggerClassName = clsx(TagsInput_module.clearTrigger, normalizeClassName(className));
+    const triggerClassName = clsx(TagsInput_module.clearTrigger, className);
     const clearTriggerLabel = useTagsInputContext().getClearTriggerProps()['aria-label'];
-    if (asChild) return /*#__PURE__*/ jsx(TagsInput.ClearTrigger, {
-        ref: ref,
-        asChild: true,
-        "data-slot": "tags-input-clear-trigger",
-        className: triggerClassName,
-        "aria-label": ariaLabel,
-        "aria-labelledby": ariaLabelledBy,
-        ...props,
-        children: children
-    });
     return /*#__PURE__*/ jsx(TagsInput.ClearTrigger, {
         ref: ref,
         asChild: true,
-        "data-slot": "tags-input-clear-trigger",
         className: triggerClassName,
+        "aria-label": asChild ? ariaLabel : void 0,
+        "aria-labelledby": asChild ? ariaLabelledBy : void 0,
         ...props,
-        children: /*#__PURE__*/ jsx(CloseButton.Root, {
+        "data-slot": "tags-input-clear-trigger",
+        children: asChild ? children : /*#__PURE__*/ jsx(CloseButton.Root, {
             "aria-label": ariaLabel ?? clearTriggerLabel,
             "aria-labelledby": ariaLabelledBy,
             "data-part": "clear-trigger",
@@ -121,48 +107,7 @@ const TagsInput_TagsInputClearTrigger = /*#__PURE__*/ forwardRef(function({ asCh
         })
     });
 });
-function withHiddenInput(children, asChild) {
-    const hiddenInput = /*#__PURE__*/ jsx(TagsInputHiddenInput, {});
-    if (!asChild) return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            children,
-            hiddenInput
-        ]
-    });
-    const child = Children.only(children);
-    return /*#__PURE__*/ cloneElement(child, {}, child.props.children, hiddenInput);
-}
 const TagsInputContext = TagsInput.Context;
-function TagsInputHiddenInput() {
-    const field = useFieldContext();
-    const tagsInput = useTagsInputContext();
-    const inputRef = useRef(null);
-    const initialValue = useRef(tagsInput.value);
-    const initialInputValue = useRef(tagsInput.inputValue);
-    const { defaultValue: _, ...hiddenInputProps } = tagsInput.getHiddenInputProps();
-    useEffect(()=>{
-        const form = inputRef.current?.form;
-        if (!form) return;
-        const handleReset = ()=>{
-            queueMicrotask(()=>{
-                tagsInput.setValue(initialValue.current);
-                tagsInput.setInputValue(initialInputValue.current);
-            });
-        };
-        form.addEventListener('reset', handleReset);
-        return ()=>form.removeEventListener('reset', handleReset);
-    }, [
-        tagsInput
-    ]);
-    return /*#__PURE__*/ jsx("input", {
-        ...hiddenInputProps,
-        ref: inputRef,
-        value: tagsInput.valueAsString,
-        readOnly: true,
-        "aria-describedby": field?.ariaDescribedby,
-        "data-slot": "tags-input-hidden-input"
-    });
-}
 function TagsInputItems() {
     return /*#__PURE__*/ jsx(TagsInputContext, {
         children: (tagsInput)=>tagsInput.value.map((value, index)=>/*#__PURE__*/ jsxs(TagsInput_TagsInputItem, {
@@ -185,6 +130,7 @@ function TagsInputItems() {
 const TagsInput_TagsInput = Object.assign(TagsInput_TagsInputRoot, {
     Root: TagsInput_TagsInputRoot,
     RootProvider: TagsInput_TagsInputRootProvider,
+    HiddenInput: TagsInput.HiddenInput,
     Label: TagsInput_TagsInputLabel,
     Control: TagsInput_TagsInputControl,
     Item: TagsInput_TagsInputItem,

package/dist/components/tags-input/TagsInput_module.css

@@ -209,7 +209,6 @@
     --moduix-close-button-focus-ring-color: var(--moduix-tags-input-trigger-focus-ring-color, var(--moduix-color-ring));
     --moduix-close-button-focus-ring-width: var(--moduix-tags-input-trigger-focus-ring-width, var(--moduix-border-width-sm));
     --moduix-close-button-focus-ring-offset: var(--moduix-tags-input-trigger-focus-ring-offset, var(--moduix-focus-ring-offset));
-    --moduix-close-button-transition: var(--moduix-tags-input-transition, var(--moduix-transition-default));
     --moduix-close-button-disabled-opacity: var(--moduix-tags-input-disabled-opacity, var(--moduix-opacity-disabled));
     flex: none;
     align-self: center;

package/dist/components/text/Text.js

@@ -2,7 +2,6 @@ import { jsx } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import Text_module from "./Text.module.js";
 const Text_elements = {
     div: ark.div,
@@ -34,7 +33,7 @@ const Text_TextRoot = /*#__PURE__*/ forwardRef(function({ as, asChild, size, wei
         "data-align": align,
         "data-truncate": truncate ? '' : void 0,
         "data-line-clamp": void 0 === resolvedLineClamp ? void 0 : '',
-        className: clsx(Text_module.root, normalizeClassName(className)),
+        className: clsx(Text_module.root, className),
         style: lineClampStyle
     });
 });

package/dist/components/textarea/Textarea.js

@@ -2,7 +2,6 @@ import { jsx } from "react/jsx-runtime";
 import { Field } from "@ark-ui/react/field";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import Textarea_module from "./Textarea.module.js";
 const Textarea_Textarea = /*#__PURE__*/ forwardRef(function({ autoresize, className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Field.Textarea, {
@@ -12,7 +11,7 @@ const Textarea_Textarea = /*#__PURE__*/ forwardRef(function({ autoresize, classN
         "data-part": "textarea",
         "data-slot": "textarea-root",
         "data-autoresize": autoresize ? '' : void 0,
-        className: clsx(Textarea_module.root, normalizeClassName(className)),
+        className: clsx(Textarea_module.root, className),
         autoresize: autoresize
     });
 });

package/dist/components/timer/Timer.js

@@ -3,62 +3,61 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Timer, useTimer, useTimerContext } from "@ark-ui/react/timer";
 import { clsx } from "clsx";
 import { Fragment, forwardRef } from "react";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import Timer_module from "./Timer.module.js";
 const Timer_TimerRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Timer.Root, {
         ref: ref,
-        "data-slot": "timer-root",
-        className: clsx(Timer_module.root, normalizeClassName(className)),
-        ...props
+        className: clsx(Timer_module.root, className),
+        ...props,
+        "data-slot": "timer-root"
     });
 });
 const Timer_TimerRootProvider = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Timer.RootProvider, {
         ref: ref,
-        "data-slot": "timer-root-provider",
-        className: clsx(Timer_module.root, normalizeClassName(className)),
-        ...props
+        className: clsx(Timer_module.root, className),
+        ...props,
+        "data-slot": "timer-root-provider"
     });
 });
 const Timer_TimerArea = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Timer.Area, {
         ref: ref,
-        "data-slot": "timer-area",
-        className: clsx(Timer_module.area, normalizeClassName(className)),
-        ...props
+        className: clsx(Timer_module.area, className),
+        ...props,
+        "data-slot": "timer-area"
     });
 });
 const Timer_TimerItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Timer.Item, {
         ref: ref,
-        "data-slot": "timer-item",
-        className: clsx(Timer_module.item, normalizeClassName(className)),
-        ...props
+        className: clsx(Timer_module.item, className),
+        ...props,
+        "data-slot": "timer-item"
     });
 });
 const Timer_TimerSeparator = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Timer.Separator, {
         ref: ref,
-        "data-slot": "timer-separator",
-        className: clsx(Timer_module.separator, normalizeClassName(className)),
-        ...props
+        className: clsx(Timer_module.separator, className),
+        ...props,
+        "data-slot": "timer-separator"
     });
 });
 const Timer_TimerControl = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Timer.Control, {
         ref: ref,
-        "data-slot": "timer-control",
-        className: clsx(Timer_module.control, normalizeClassName(className)),
-        ...props
+        className: clsx(Timer_module.control, className),
+        ...props,
+        "data-slot": "timer-control"
     });
 });
 const Timer_TimerActionTrigger = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Timer.ActionTrigger, {
         ref: ref,
-        "data-slot": "timer-action-trigger",
-        className: clsx(Timer_module.actionTrigger, normalizeClassName(className)),
-        ...props
+        className: clsx(Timer_module.actionTrigger, className),
+        ...props,
+        "data-slot": "timer-action-trigger"
     });
 });
 const defaultTimerSegmentTypes = [

package/dist/components/toast/Toast.d.ts

@@ -1,6 +1,6 @@
 import { Toast as ToastPrimitive, Toaster as ToasterPrimitive, createToaster, useToastContext } from '@ark-ui/react/toast';
 import type { ComponentProps } from 'react';
-import type { OverlayPortalProps } from '../../internal/overlayPortal';
+import type { OverlayPortalProps } from '../../internal/overlayPortal.js';
 type ToasterProps = Omit<ComponentProps<typeof ToasterPrimitive>, 'children'> & OverlayPortalProps & {
     children?: ComponentProps<typeof ToasterPrimitive>['children'];
 };

package/dist/components/toast/Toast.js

@@ -4,7 +4,6 @@ import { Portal } from "@ark-ui/react/portal";
 import { Toast, Toaster as toast_Toaster, createToaster, useToastContext } from "@ark-ui/react/toast";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import { CloseButton } from "../close-button/index.js";
 import Toast_module from "./Toast.module.js";
 const DEFAULT_CLOSE_TRIGGER_LABEL = 'Close toast';
@@ -14,9 +13,9 @@ const Toast_Toaster = /*#__PURE__*/ forwardRef(function({ className, portalled =
         container: portalRef,
         children: /*#__PURE__*/ jsx(toast_Toaster, {
             ref: ref,
-            "data-slot": "toast-toaster",
-            className: clsx(Toast_module.toaster, normalizeClassName(className)),
+            className: clsx(Toast_module.toaster, className),
             ...props,
+            "data-slot": "toast-toaster",
             children: props.children ?? ((toast)=>/*#__PURE__*/ jsx(DefaultToast, {
                     toast: toast
                 }))
@@ -38,18 +37,18 @@ function DefaultToast({ toast }) {
 const Toast_ToastRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Toast.Root, {
         ref: ref,
-        "data-slot": "toast-root",
-        className: clsx(Toast_module.root, normalizeClassName(className)),
-        ...props
+        className: clsx(Toast_module.root, className),
+        ...props,
+        "data-slot": "toast-root"
     });
 });
 const Toast_ToastTitle = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     const toast = useToastContext();
     return /*#__PURE__*/ jsx(Toast.Title, {
         ref: ref,
-        "data-slot": "toast-title",
-        className: clsx(Toast_module.title, normalizeClassName(className)),
+        className: clsx(Toast_module.title, className),
         ...props,
+        "data-slot": "toast-title",
         children: void 0 === children ? toast.title : children
     });
 });
@@ -57,9 +56,9 @@ const Toast_ToastDescription = /*#__PURE__*/ forwardRef(function({ className, ch
     const toast = useToastContext();
     return /*#__PURE__*/ jsx(Toast.Description, {
         ref: ref,
-        "data-slot": "toast-description",
-        className: clsx(Toast_module.description, normalizeClassName(className)),
+        className: clsx(Toast_module.description, className),
         ...props,
+        "data-slot": "toast-description",
         children: void 0 === children ? toast.description : children
     });
 });
@@ -67,9 +66,9 @@ const Toast_ToastActionTrigger = /*#__PURE__*/ forwardRef(function({ asChild, cl
     return /*#__PURE__*/ jsx(Toast.ActionTrigger, {
         ref: ref,
         asChild: asChild,
-        "data-slot": "toast-action-trigger",
-        className: clsx(!asChild && Toast_module.actionTrigger, normalizeClassName(className)),
+        className: clsx(!asChild && Toast_module.actionTrigger, className),
         ...props,
+        "data-slot": "toast-action-trigger",
         children: children
     });
 });
@@ -77,20 +76,20 @@ const Toast_ToastCloseTrigger = /*#__PURE__*/ forwardRef(function({ asChild, cla
     if (asChild) return /*#__PURE__*/ jsx(Toast.CloseTrigger, {
         ref: ref,
         asChild: true,
-        "data-slot": "toast-close-trigger",
         "aria-label": ariaLabel,
-        className: normalizeClassName(className),
+        className: className,
         ...props,
+        "data-slot": "toast-close-trigger",
         children: children
     });
     return /*#__PURE__*/ jsx(Toast.CloseTrigger, {
         asChild: true,
         children: /*#__PURE__*/ jsx(CloseButton.Root, {
             ref: ref,
-            "data-slot": "toast-close-trigger",
             "aria-label": ariaLabel,
-            className: clsx(Toast_module.closeTrigger, normalizeClassName(className)),
+            className: clsx(Toast_module.closeTrigger, className),
             ...props,
+            "data-slot": "toast-close-trigger",
             children: children
         })
     });

package/dist/components/toast/Toast_module.css

@@ -144,13 +144,12 @@
     --moduix-close-button-focus-ring-color: var(--moduix-toast-focus-ring-color, var(--moduix-color-ring));
     --moduix-close-button-focus-ring-offset: var(--moduix-toast-close-focus-ring-offset, var(--moduix-focus-ring-offset));
     --moduix-close-button-focus-ring-width: var(--moduix-toast-close-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)));
-    --moduix-close-button-transition: var(--moduix-toast-close-transition, var(--moduix-transition-default));
     position: absolute;
     inset-block-start: var(--moduix-toast-close-offset-top, var(--moduix-spacing-2));
     inset-inline-end: var(--moduix-toast-close-offset-right, var(--moduix-spacing-2));
   }
 
-  @media (max-width: 40rem) {
+  @media (width <= 40rem) {
     .toaster-m5bxJd {
       width: 100%;
     }