@moduix/react 2.2.4 → 2.2.5

package/dist/components/switch/Switch.js

@@ -53,9 +53,7 @@ const Switch_SwitchLabel = /*#__PURE__*/ forwardRef(function({ className, ...pro
     });
 });
 function withHiddenInput(children, asChild) {
-    const hiddenInput = /*#__PURE__*/ jsx(Switch.HiddenInput, {
-        "data-slot": "switch-hidden-input"
-    });
+    const hiddenInput = /*#__PURE__*/ jsx(SwitchHiddenInput, {});
     if (!asChild) return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             children,
@@ -65,6 +63,14 @@ function withHiddenInput(children, asChild) {
     const child = Children.only(children);
     return /*#__PURE__*/ cloneElement(child, {}, child.props.children, hiddenInput);
 }
+function SwitchHiddenInput() {
+    const switchApi = useSwitchContext();
+    const readOnly = void 0 !== switchApi.getRootProps()['data-readonly'];
+    return /*#__PURE__*/ jsx(Switch.HiddenInput, {
+        "aria-readonly": readOnly || void 0,
+        "data-slot": "switch-hidden-input"
+    });
+}
 const Switch_Switch = Object.assign(Switch_SwitchRoot, {
     Root: Switch_SwitchRoot,
     RootProvider: Switch_SwitchRootProvider,

package/dist/components/switch/Switch_module.css

@@ -19,9 +19,9 @@
 
   .control-_x56fO {
     box-sizing: border-box;
-    width: var(--moduix-switch-width, 3rem);
-    height: var(--moduix-switch-height, var(--moduix-size-xs));
-    --moduix-switch-thumb-translate-default: calc(var(--moduix-switch-width, 3rem) - var(--moduix-switch-thumb-size, var(--moduix-spacing-5)) -
+    width: var(--_switch-width, 3rem);
+    height: var(--_switch-height, var(--moduix-size-xs));
+    --_switch-thumb-translate-default: calc(var(--_switch-width, 3rem) - var(--_switch-thumb-size, var(--moduix-spacing-5)) -
         (var(--moduix-switch-padding, var(--moduix-spacing-0-5)) * 2) -
         (var(--moduix-switch-border-width, var(--moduix-border-width-sm)) * 2));
     border: var(--moduix-switch-border-width, var(--moduix-border-width-sm)) solid
@@ -48,7 +48,7 @@
   }
 
   .control-_x56fO[data-invalid] {
-    border-color: var(--moduix-color-destructive);
+    border-color: var(--moduix-switch-border-color-invalid, var(--moduix-color-destructive));
   }
 
   .control-_x56fO[data-focus-visible] {
@@ -68,38 +68,38 @@
   }
 
   .root-BQV0g7[data-size="xs"] .control-_x56fO {
-    --moduix-switch-width: var(--moduix-switch-width-xs, 1.75rem);
-    --moduix-switch-height: var(--moduix-switch-height-xs, 1rem);
-    --moduix-switch-thumb-size: var(--moduix-switch-thumb-size-xs, var(--moduix-spacing-3));
+    --_switch-width: var(--moduix-switch-width-xs, 1.75rem);
+    --_switch-height: var(--moduix-switch-height-xs, 1rem);
+    --_switch-thumb-size: var(--moduix-switch-thumb-size-xs, var(--moduix-spacing-3));
   }
 
   .root-BQV0g7[data-size="sm"] .control-_x56fO {
-    --moduix-switch-width: var(--moduix-switch-width-sm, 2.25rem);
-    --moduix-switch-height: var(--moduix-switch-height-sm, 1.25rem);
-    --moduix-switch-thumb-size: var(--moduix-switch-thumb-size-sm, var(--moduix-spacing-4));
+    --_switch-width: var(--moduix-switch-width-sm, 2.25rem);
+    --_switch-height: var(--moduix-switch-height-sm, 1.25rem);
+    --_switch-thumb-size: var(--moduix-switch-thumb-size-sm, var(--moduix-spacing-4));
   }
 
   .root-BQV0g7[data-size="md"] .control-_x56fO {
-    --moduix-switch-width: var(--moduix-switch-width-md, 2.75rem);
-    --moduix-switch-height: var(--moduix-switch-height-md, var(--moduix-size-xs));
-    --moduix-switch-thumb-size: var(--moduix-switch-thumb-size-md, var(--moduix-spacing-5));
+    --_switch-width: var(--moduix-switch-width-md, 2.75rem);
+    --_switch-height: var(--moduix-switch-height-md, var(--moduix-size-xs));
+    --_switch-thumb-size: var(--moduix-switch-thumb-size-md, var(--moduix-spacing-5));
   }
 
   .root-BQV0g7[data-size="lg"] .control-_x56fO {
-    --moduix-switch-width: var(--moduix-switch-width-lg, 3.25rem);
-    --moduix-switch-height: var(--moduix-switch-height-lg, 1.75rem);
-    --moduix-switch-thumb-size: var(--moduix-switch-thumb-size-lg, var(--moduix-size-xs));
+    --_switch-width: var(--moduix-switch-width-lg, 3.25rem);
+    --_switch-height: var(--moduix-switch-height-lg, 1.75rem);
+    --_switch-thumb-size: var(--moduix-switch-thumb-size-lg, var(--moduix-size-xs));
   }
 
   .root-BQV0g7[data-size="xl"] .control-_x56fO {
-    --moduix-switch-width: var(--moduix-switch-width-xl, 3.75rem);
-    --moduix-switch-height: var(--moduix-switch-height-xl, var(--moduix-size-sm));
-    --moduix-switch-thumb-size: var(--moduix-switch-thumb-size-xl, var(--moduix-spacing-7));
+    --_switch-width: var(--moduix-switch-width-xl, 3.75rem);
+    --_switch-height: var(--moduix-switch-height-xl, var(--moduix-size-sm));
+    --_switch-thumb-size: var(--moduix-switch-thumb-size-xl, var(--moduix-spacing-7));
   }
 
   .thumb-AkEGnM {
-    width: var(--moduix-switch-thumb-size, var(--moduix-spacing-5));
-    height: var(--moduix-switch-thumb-size, var(--moduix-spacing-5));
+    width: var(--_switch-thumb-size, var(--moduix-spacing-5));
+    height: var(--_switch-thumb-size, var(--moduix-spacing-5));
     border: var(--moduix-switch-thumb-border-width, 0) solid
       var(--moduix-switch-thumb-border-color, transparent);
     border-radius: var(--moduix-switch-thumb-radius, var(--moduix-radius-full));
@@ -119,17 +119,18 @@
   .thumb-AkEGnM[data-state="checked"] {
     background-color: var(--moduix-switch-thumb-bg-checked, var(--moduix-switch-thumb-bg, var(--moduix-color-primary-foreground)));
     color: var(--moduix-switch-thumb-color-checked, var(--moduix-switch-thumb-color, var(--moduix-color-primary)));
-    transform: translateX(var(--moduix-switch-thumb-translate, var(--moduix-switch-thumb-translate-default)));
+    transform: translateX(var(--moduix-switch-thumb-translate, var(--_switch-thumb-translate-default)));
   }
 
   .thumb-AkEGnM > svg {
     width: var(--moduix-switch-thumb-icon-size, 65%);
     height: var(--moduix-switch-thumb-icon-size, 65%);
     flex-shrink: 0;
+    display: block;
   }
 
   .root-BQV0g7:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) .thumb-AkEGnM[data-state="checked"] {
-    transform: translateX(calc(var(--moduix-switch-thumb-translate, var(--moduix-switch-thumb-translate-default)) * -1));
+    transform: translateX(calc(var(--moduix-switch-thumb-translate, var(--_switch-thumb-translate-default)) * -1));
   }
 
   .label-OFdult {
@@ -140,5 +141,11 @@
     -webkit-user-select: none;
     user-select: none;
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .control-_x56fO, .thumb-AkEGnM {
+      transition: none;
+    }
+  }
 }
 

package/dist/components/table/Table_module.css

@@ -15,9 +15,9 @@
   }
 
   .root-iUez_7 {
-    --moduix-table-cell-padding-x-default: var(--moduix-table-cell-padding-x, var(--moduix-spacing-4));
-    --moduix-table-cell-padding-y-default: var(--moduix-table-cell-padding-y, var(--moduix-spacing-3));
-    --moduix-table-empty-padding-y-default: calc(var(--moduix-table-cell-padding-y-default) * 2);
+    --_table-cell-padding-x-default: var(--moduix-table-cell-padding-x, var(--moduix-spacing-4));
+    --_table-cell-padding-y-default: var(--moduix-table-cell-padding-y, var(--moduix-spacing-3));
+    --_table-empty-padding-y-default: calc(var(--_table-cell-padding-y-default) * 2);
     box-sizing: border-box;
     border-collapse: collapse;
     border-spacing: 0;
@@ -31,15 +31,15 @@
   }
 
   .root-iUez_7[data-size="sm"] {
-    --moduix-table-cell-padding-x-default: var(--moduix-table-cell-padding-x, var(--moduix-spacing-3));
-    --moduix-table-cell-padding-y-default: var(--moduix-table-cell-padding-y, var(--moduix-spacing-2));
+    --_table-cell-padding-x-default: var(--moduix-table-cell-padding-x, var(--moduix-spacing-3));
+    --_table-cell-padding-y-default: var(--moduix-table-cell-padding-y, var(--moduix-spacing-2));
     font-size: var(--moduix-table-font-size-sm, var(--moduix-text-xs));
     line-height: var(--moduix-table-line-height-sm, var(--moduix-line-height-text-xs));
   }
 
   .root-iUez_7[data-size="lg"] {
-    --moduix-table-cell-padding-x-default: var(--moduix-table-cell-padding-x, var(--moduix-spacing-5));
-    --moduix-table-cell-padding-y-default: var(--moduix-table-cell-padding-y, var(--moduix-spacing-4));
+    --_table-cell-padding-x-default: var(--moduix-table-cell-padding-x, var(--moduix-spacing-5));
+    --_table-cell-padding-y-default: var(--moduix-table-cell-padding-y, var(--moduix-spacing-4));
     font-size: var(--moduix-table-font-size-lg, var(--moduix-text-md));
     line-height: var(--moduix-table-line-height-lg, var(--moduix-line-height-text-md));
   }
@@ -54,7 +54,7 @@
     color: var(--moduix-table-caption-color, var(--moduix-color-muted-foreground));
     font-size: var(--moduix-table-caption-font-size, var(--moduix-text-sm));
     line-height: var(--moduix-table-caption-line-height, var(--moduix-line-height-text-sm));
-    padding-inline: var(--moduix-table-caption-padding-x, var(--moduix-table-cell-padding-x-default));
+    padding-inline: var(--moduix-table-caption-padding-x, var(--_table-cell-padding-x-default));
     text-align: left;
     text-wrap: pretty;
   }
@@ -88,6 +88,10 @@
     background-color: var(--moduix-table-row-bg-hover, var(--moduix-color-muted));
   }
 
+  .root-iUez_7[data-interactive] .body-JqLHru .row-vTGkhP:not([data-empty]):focus-within {
+    background-color: var(--moduix-table-row-bg-focus, var(--moduix-table-row-bg-hover, var(--moduix-color-muted)));
+  }
+
   .root-iUez_7[data-show-column-border] :is(.columnHeader-MBpfL1, .cell-uGo0rz):not(:last-child) {
     border-inline-end: var(--moduix-table-column-border-width, var(--moduix-table-border-width, var(--moduix-border-width-sm)))
       solid
@@ -115,8 +119,8 @@
 
   .columnHeader-MBpfL1, .cell-uGo0rz {
     z-index: 0;
-    padding-block: var(--moduix-table-cell-padding-y-default);
-    padding-inline: var(--moduix-table-cell-padding-x-default);
+    padding-block: var(--_table-cell-padding-y-default);
+    padding-inline: var(--_table-cell-padding-x-default);
     vertical-align: middle;
     position: relative;
   }
@@ -157,7 +161,7 @@
   }
 
   .empty-dLhlhx {
-    padding-block: var(--moduix-table-empty-padding-y, var(--moduix-table-empty-padding-y-default));
+    padding-block: var(--moduix-table-empty-padding-y, var(--_table-empty-padding-y-default));
     color: var(--moduix-table-empty-color, var(--moduix-color-muted-foreground));
     text-align: center;
   }

package/dist/components/tabs/Tabs.js

@@ -16,12 +16,15 @@ const Tabs_TabsRoot = /*#__PURE__*/ forwardRef(function({ className, orientation
         ...props
     });
 });
-const Tabs_TabsRootProvider = /*#__PURE__*/ forwardRef(function({ className, variant = 'default', ...props }, ref) {
+const Tabs_TabsRootProvider = /*#__PURE__*/ forwardRef(function({ className, value, variant = 'default', ...props }, ref) {
+    const orientation = value.getRootProps()['data-orientation'];
+    const resolvedVariant = 'vertical' === orientation ? 'default' : variant;
     return /*#__PURE__*/ jsx(Tabs.RootProvider, {
         ref: ref,
         "data-slot": "tabs-root-provider",
-        "data-variant": variant,
+        "data-variant": resolvedVariant,
         className: clsx(Tabs_module.root, normalizeClassName(className)),
+        value: value,
         ...props
     });
 });

package/dist/components/tag/Tag_module.css

@@ -4,14 +4,14 @@
     align-items: center;
     gap: var(--moduix-tag-gap, var(--moduix-spacing-1-5));
     border: var(--moduix-tag-border-width, var(--moduix-border-width-sm)) solid
-      var(--moduix-tag-border-color, transparent);
+      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-color-primary));
+    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%;
-    color: var(--moduix-tag-color, var(--moduix-color-primary-foreground));
+    color: var(--moduix-tag-color, var(--moduix-tag-default-color, var(--moduix-color-primary-foreground)));
     font-size: var(--moduix-tag-font-size, var(--moduix-text-xs));
     font-weight: var(--moduix-tag-font-weight, var(--moduix-weight-medium));
     line-height: var(--moduix-tag-line-height, var(--moduix-line-height-text-xs));
@@ -41,24 +41,27 @@
   }
 
   .root-R1cDd9[data-variant="secondary"] {
-    background-color: var(--moduix-tag-bg, var(--moduix-color-secondary));
-    border-color: var(--moduix-tag-border-color, transparent);
-    color: var(--moduix-tag-color, var(--moduix-color-secondary-foreground));
+    background-color: var(--moduix-tag-bg, var(--moduix-tag-secondary-bg, var(--moduix-color-secondary)));
+    border-color: var(--moduix-tag-border-color, var(--moduix-tag-secondary-border-color, transparent));
+    color: var(--moduix-tag-color, var(--moduix-tag-secondary-color, var(--moduix-color-secondary-foreground)));
   }
 
-  .root-R1cDd9[data-variant="outline"], .root-R1cDd9[data-variant="ghost"] {
-    background-color: var(--moduix-tag-bg, transparent);
-    color: var(--moduix-tag-color, var(--moduix-color-foreground));
+  .root-R1cDd9[data-variant="outline"] {
+    background-color: var(--moduix-tag-bg, var(--moduix-tag-outline-bg, transparent));
+    border-color: var(--moduix-tag-border-color, var(--moduix-tag-outline-border-color, var(--moduix-color-border)));
+    color: var(--moduix-tag-color, var(--moduix-tag-outline-color, var(--moduix-color-foreground)));
   }
 
-  .root-R1cDd9[data-variant="outline"] {
-    border-color: var(--moduix-tag-border-color, var(--moduix-color-border));
+  .root-R1cDd9[data-variant="ghost"] {
+    background-color: var(--moduix-tag-bg, var(--moduix-tag-ghost-bg, transparent));
+    border-color: var(--moduix-tag-border-color, var(--moduix-tag-ghost-border-color, transparent));
+    color: var(--moduix-tag-color, var(--moduix-tag-ghost-color, var(--moduix-color-foreground)));
   }
 
   .root-R1cDd9[data-variant="destructive"] {
-    background-color: var(--moduix-tag-bg, var(--moduix-color-destructive));
-    border-color: var(--moduix-tag-border-color, transparent);
-    color: var(--moduix-tag-color, var(--moduix-color-destructive-foreground));
+    background-color: var(--moduix-tag-bg, var(--moduix-tag-destructive-bg, var(--moduix-color-destructive)));
+    border-color: var(--moduix-tag-border-color, var(--moduix-tag-destructive-border-color, transparent));
+    color: var(--moduix-tag-color, var(--moduix-tag-destructive-color, var(--moduix-color-destructive-foreground)));
   }
 
   .label-kWF4Re {

package/dist/components/text/Text.js

@@ -19,7 +19,7 @@ const Text_TextRoot = /*#__PURE__*/ forwardRef(function({ as, asChild, size, wei
     const resolvedLineClamp = Number.isInteger(lineClamp) && (lineClamp ?? 0) > 0 ? lineClamp : void 0;
     const lineClampStyle = void 0 === resolvedLineClamp ? style : {
         ...style,
-        '--moduix-text-line-clamp': resolvedLineClamp
+        '--_text-line-clamp': resolvedLineClamp
     };
     return /*#__PURE__*/ jsx(Element, {
         ref: ref,

package/dist/components/text/Text_module.css

@@ -90,8 +90,9 @@
   }
 
   .root-lOp5q5[data-line-clamp] {
+    --_text-line-clamp: initial;
     white-space: normal;
-    -webkit-line-clamp: var(--moduix-text-line-clamp);
+    -webkit-line-clamp: var(--moduix-text-line-clamp, var(--_text-line-clamp));
     -webkit-box-orient: vertical;
     display: -webkit-box;
     overflow: hidden;

package/dist/components/timer/Timer.d.ts

@@ -1,11 +1,9 @@
 import { Timer as TimerPrimitive, useTimer, useTimerContext } from '@ark-ui/react/timer';
 import type { ComponentProps, ReactNode } from 'react';
-type TimerSegmentsProps = {
-    className?: string;
+type TimerSegmentsProps = Omit<ComponentProps<typeof TimerPrimitive.Area>, 'asChild' | 'children'> & {
     separator?: ReactNode;
     types?: ComponentProps<typeof TimerPrimitive.Item>['type'][];
 };
-declare function TimerSegments({ className, separator, types, }: TimerSegmentsProps): import("react").JSX.Element;
 declare const Timer: import("react").ForwardRefExoticComponent<Omit<TimerPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
     Root: import("react").ForwardRefExoticComponent<Omit<TimerPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     RootProvider: import("react").ForwardRefExoticComponent<Omit<TimerPrimitive.RootProviderBaseProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
@@ -15,6 +13,6 @@ declare const Timer: import("react").ForwardRefExoticComponent<Omit<TimerPrimiti
     Control: import("react").ForwardRefExoticComponent<Omit<TimerPrimitive.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     ActionTrigger: import("react").ForwardRefExoticComponent<Omit<TimerPrimitive.ActionTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
     Context: (props: TimerPrimitive.ContextProps) => ReactNode;
-    Segments: typeof TimerSegments;
+    Segments: import("react").ForwardRefExoticComponent<Omit<TimerSegmentsProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 };
 export { Timer, type TimerSegmentsProps, useTimer, useTimerContext };

package/dist/components/timer/Timer.js

@@ -66,9 +66,10 @@ const defaultTimerSegmentTypes = [
     'minutes',
     'seconds'
 ];
-function TimerSegments({ className, separator = ':', types = defaultTimerSegmentTypes }) {
+const Timer_TimerSegments = /*#__PURE__*/ forwardRef(function({ separator = ':', types = defaultTimerSegmentTypes, ...props }, ref) {
     return /*#__PURE__*/ jsx(Timer_TimerArea, {
-        className: className,
+        ref: ref,
+        ...props,
         children: types.map((type, index)=>/*#__PURE__*/ jsxs(Fragment, {
                 children: [
                     /*#__PURE__*/ jsx(Timer_TimerItem, {
@@ -80,7 +81,7 @@ function TimerSegments({ className, separator = ':', types = defaultTimerSegment
                 ]
             }, `${type}-${index}`))
     });
-}
+});
 const Timer_Timer = Object.assign(Timer_TimerRoot, {
     Root: Timer_TimerRoot,
     RootProvider: Timer_TimerRootProvider,
@@ -90,6 +91,6 @@ const Timer_Timer = Object.assign(Timer_TimerRoot, {
     Control: Timer_TimerControl,
     ActionTrigger: Timer_TimerActionTrigger,
     Context: Timer.Context,
-    Segments: TimerSegments
+    Segments: Timer_TimerSegments
 });
 export { Timer_Timer as Timer, useTimer, useTimerContext };

package/dist/components/toast/Toast_module.css

@@ -4,11 +4,14 @@
   }
 
   .root-p_jC2T {
-    --moduix-toast-trigger-bg-default: transparent;
-    --moduix-toast-trigger-bg-hover-default: var(--moduix-color-accent);
-    --moduix-toast-trigger-border-color-default: var(--moduix-color-border);
-    --moduix-toast-trigger-color-default: var(--moduix-color-foreground);
-    --moduix-toast-trigger-focus-ring-color-default: var(--moduix-color-ring);
+    --_toast-trigger-bg-default: transparent;
+    --_toast-trigger-bg-hover-default: var(--moduix-color-accent);
+    --_toast-trigger-border-color-default: var(--moduix-color-border);
+    --_toast-trigger-color-default: var(--moduix-color-foreground);
+    --_toast-trigger-focus-ring-color-default: var(--moduix-color-ring);
+    --_toast-bg-default: var(--moduix-toast-info-bg, var(--moduix-color-card));
+    --_toast-border-color-default: var(--moduix-toast-info-border-color, var(--moduix-color-border));
+    --_toast-color-default: var(--moduix-toast-info-color, var(--moduix-color-card-foreground));
     box-sizing: border-box;
     width: var(--moduix-toast-width, 20rem);
     max-width: calc(100vw - (var(--moduix-toast-viewport-inset, var(--moduix-spacing-4)) * 2));
@@ -16,10 +19,11 @@
     align-items: start;
     gap: var(--moduix-toast-content-gap, var(--moduix-spacing-1));
     border: var(--moduix-toast-border-width, var(--moduix-border-width-sm)) solid
-      var(--moduix-toast-border-color, var(--moduix-toast-border-color-default, var(--moduix-color-border)));
+      var(--moduix-toast-border-color, var(--_toast-border-color-default, var(--moduix-color-border)));
     border-radius: var(--moduix-toast-radius, var(--moduix-radius-lg));
-    background-color: var(--moduix-toast-bg, var(--moduix-toast-bg-default, var(--moduix-color-popover)));
-    color: var(--moduix-toast-color, var(--moduix-toast-color-default, var(--moduix-color-popover-foreground)));
+    background-color: var(--moduix-toast-bg, var(--_toast-bg-default, var(--moduix-color-popover)));
+    min-width: 0;
+    color: var(--moduix-toast-color, var(--_toast-color-default, var(--moduix-color-popover-foreground)));
     box-shadow: var(--moduix-toast-shadow, var(--moduix-shadow-lg));
     padding: var(--moduix-toast-padding, var(--moduix-spacing-4));
     pointer-events: auto;
@@ -49,53 +53,42 @@
   }
 
   .root-p_jC2T[data-type="success"] {
-    --moduix-toast-bg-default: color-mix(in oklab,
-        var(--moduix-color-success) 10%,
-        var(--moduix-color-background));
-    --moduix-toast-border-color-default: color-mix(in oklab,
-        var(--moduix-color-success) 34%,
-        transparent);
-    --moduix-toast-color-default: var(--moduix-color-foreground);
-    --moduix-toast-description-color-default: var(--moduix-color-muted-foreground);
+    --_toast-bg-default: var(--moduix-toast-success-bg, color-mix(in oklab, var(--moduix-color-success) 10%, var(--moduix-color-background)));
+    --_toast-border-color-default: var(--moduix-toast-success-border-color, color-mix(in oklab, var(--moduix-color-success) 34%, transparent));
+    --_toast-color-default: var(--moduix-toast-success-color, var(--moduix-color-foreground));
   }
 
   .root-p_jC2T[data-type="warning"] {
-    --moduix-toast-bg-default: color-mix(in oklab,
-        var(--moduix-color-warning) 13%,
-        var(--moduix-color-background));
-    --moduix-toast-border-color-default: color-mix(in oklab,
-        var(--moduix-color-warning) 38%,
-        transparent);
-    --moduix-toast-color-default: var(--moduix-color-foreground);
-    --moduix-toast-description-color-default: var(--moduix-color-muted-foreground);
+    --_toast-bg-default: var(--moduix-toast-warning-bg, color-mix(in oklab, var(--moduix-color-warning) 13%, var(--moduix-color-background)));
+    --_toast-border-color-default: var(--moduix-toast-warning-border-color, color-mix(in oklab, var(--moduix-color-warning) 38%, transparent));
+    --_toast-color-default: var(--moduix-toast-warning-color, var(--moduix-color-foreground));
   }
 
-  .root-p_jC2T[data-type="destructive"], .root-p_jC2T[data-type="error"] {
-    --moduix-toast-bg-default: color-mix(in oklab,
-        var(--moduix-color-destructive) 9%,
-        var(--moduix-color-background));
-    --moduix-toast-border-color-default: color-mix(in oklab,
-        var(--moduix-color-destructive) 35%,
-        transparent);
-    --moduix-toast-color-default: var(--moduix-color-foreground);
-    --moduix-toast-description-color-default: var(--moduix-color-muted-foreground);
+  .root-p_jC2T[data-type="error"] {
+    --_toast-bg-default: var(--moduix-toast-error-bg, color-mix(in oklab, var(--moduix-color-destructive) 9%, var(--moduix-color-background)));
+    --_toast-border-color-default: var(--moduix-toast-error-border-color, color-mix(in oklab, var(--moduix-color-destructive) 35%, transparent));
+    --_toast-color-default: var(--moduix-toast-error-color, var(--moduix-color-foreground));
   }
 
   .title-MTy3zi {
     align-items: center;
     gap: var(--moduix-toast-title-gap, var(--moduix-spacing-2));
+    min-width: 0;
     color: inherit;
     font-size: var(--moduix-toast-title-font-size, var(--moduix-text-sm));
     font-weight: var(--moduix-toast-title-font-weight, var(--moduix-weight-semibold));
     line-height: var(--moduix-toast-title-line-height, var(--moduix-line-height-text-sm));
+    overflow-wrap: anywhere;
     margin: 0;
     display: flex;
   }
 
   .description-AIx4K_ {
-    color: var(--moduix-toast-description-color, var(--moduix-toast-description-color-default, var(--moduix-color-muted-foreground)));
+    min-width: 0;
+    color: var(--moduix-toast-description-color, var(--moduix-color-muted-foreground));
     font-size: var(--moduix-toast-description-font-size, var(--moduix-text-sm));
     line-height: var(--moduix-toast-description-line-height, var(--moduix-line-height-text-sm));
+    overflow-wrap: anywhere;
     margin: 0;
   }
 
@@ -104,14 +97,14 @@
     align-items: center;
     gap: var(--moduix-toast-action-gap, var(--moduix-spacing-2));
     width: max-content;
+    min-width: 0;
+    max-width: 100%;
     min-height: var(--moduix-toast-action-min-height, var(--moduix-size-xs));
-    margin-top: var(--moduix-toast-action-margin-top, var(--moduix-spacing-2));
     border: var(--moduix-toast-action-border-width, var(--moduix-toast-border-width, var(--moduix-border-width-sm)))
-      solid
-      var(--moduix-toast-action-border-color, var(--moduix-toast-trigger-border-color-default));
+      solid var(--moduix-toast-action-border-color, var(--_toast-trigger-border-color-default));
     border-radius: var(--moduix-toast-action-radius, var(--moduix-radius-sm));
-    background: var(--moduix-toast-action-bg, var(--moduix-toast-trigger-bg-default));
-    color: var(--moduix-toast-action-color, var(--moduix-toast-trigger-color-default));
+    background: var(--moduix-toast-action-bg, var(--_toast-trigger-bg-default));
+    color: var(--moduix-toast-action-color, var(--_toast-trigger-color-default));
     padding: var(--moduix-toast-action-padding-y, var(--moduix-spacing-1))
       var(--moduix-toast-action-padding-x, var(--moduix-spacing-2));
     font: inherit;
@@ -119,23 +112,24 @@
     font-weight: var(--moduix-toast-action-font-weight, var(--moduix-weight-medium));
     line-height: var(--moduix-toast-action-line-height, var(--moduix-line-height-text-xs));
     cursor: pointer;
+    text-align: start;
     -webkit-user-select: none;
     user-select: none;
-    white-space: nowrap;
+    overflow-wrap: anywhere;
     transition: background var(--moduix-transition-fast),
       border-color var(--moduix-transition-fast),
       color var(--moduix-transition-fast);
+    margin-block-start: var(--moduix-toast-action-margin-top, var(--moduix-spacing-2));
     display: inline-flex;
   }
 
   .actionTrigger-ftU5e1:hover {
-    background: var(--moduix-toast-action-bg-hover, var(--moduix-toast-trigger-bg-hover-default));
+    background: var(--moduix-toast-action-bg-hover, var(--_toast-trigger-bg-hover-default));
   }
 
   .actionTrigger-ftU5e1:focus-visible {
     outline: var(--moduix-toast-focus-ring-width, var(--moduix-toast-action-border-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))))
-        solid
-        var(--moduix-toast-focus-ring-color, var(--moduix-toast-trigger-focus-ring-color-default));
+        solid var(--moduix-toast-focus-ring-color, var(--_toast-trigger-focus-ring-color-default));
     outline-offset: var(--moduix-toast-focus-ring-offset, 0);
   }
 

package/dist/components/toggle-group/ToggleGroup.d.ts

@@ -1,7 +1,6 @@
 import { ToggleGroup as ToggleGroupPrimitive, useToggleGroup, useToggleGroupContext } from '@ark-ui/react/toggle-group';
 import type { ComponentProps } from 'react';
-type ToggleVariant = 'default' | 'outline' | 'ghost';
-type ToggleSize = 'xs' | 'sm' | 'md' | 'lg' | 'icon-sm' | 'icon-md' | 'icon-lg';
+import type { ToggleSize, ToggleVariant } from '../toggle/Toggle';
 type ToggleGroupRootProps = ComponentProps<typeof ToggleGroupPrimitive.Root> & {
     variant?: ToggleVariant;
     size?: ToggleSize;

package/dist/components/toggle-group/ToggleGroup_module.css

@@ -2,6 +2,7 @@
   .root-HI0WAX {
     box-sizing: border-box;
     overscroll-behavior-inline: contain;
+    --moduix-toggle-color: var(--moduix-toggle-group-color, var(--moduix-color-foreground));
     align-items: center;
     gap: var(--moduix-toggle-group-gap, var(--moduix-border-width-sm));
     max-inline-size: 100%;
@@ -26,20 +27,17 @@
   }
 
   .root-HI0WAX[data-variant="ghost"] {
-    --moduix-toggle-group-bg: var(--moduix-toggle-group-ghost-bg, transparent);
-    --moduix-toggle-group-border-color: var(--moduix-toggle-group-ghost-border-color, transparent);
-    --moduix-toggle-group-padding: var(--moduix-toggle-group-ghost-padding, 0);
+    padding: var(--moduix-toggle-group-padding, var(--moduix-toggle-group-ghost-padding, 0));
+    border-color: var(--moduix-toggle-group-border-color, var(--moduix-toggle-group-ghost-border-color, transparent));
+    background-color: var(--moduix-toggle-group-bg, var(--moduix-toggle-group-ghost-bg, transparent));
   }
 
   .root-HI0WAX[data-variant="outline"] {
-    --moduix-toggle-group-bg: var(--moduix-toggle-group-outline-bg, var(--moduix-color-background));
+    background-color: var(--moduix-toggle-group-bg, var(--moduix-toggle-group-outline-bg, var(--moduix-color-background)));
   }
 
   .item-RRrFoz {
     border-radius: var(--moduix-toggle-group-item-radius, var(--moduix-radius-md));
-    --moduix-toggle-default-color: var(--moduix-toggle-group-color, var(--moduix-color-foreground));
-    --moduix-toggle-ghost-color: var(--moduix-toggle-group-color, var(--moduix-color-foreground));
-    --moduix-toggle-outline-color: var(--moduix-toggle-group-color, var(--moduix-color-foreground));
     flex: none;
   }
 }

package/dist/components/tooltip/Tooltip_module.css

@@ -84,7 +84,7 @@
     overflow-wrap: anywhere;
     transform-origin: var(--transform-origin);
     position: relative;
-    overflow: auto;
+    overflow: visible;
   }
 
   .content-Ca8mTU[data-state="open"] {
@@ -115,6 +115,16 @@
       var(--moduix-tooltip-arrow-stroke-color, var(--moduix-tooltip-border-color, var(--moduix-color-border)));
   }
 
+  @media (prefers-reduced-motion: reduce) {
+    .trigger-Q4UfW0 {
+      transition: none;
+    }
+
+    .content-Ca8mTU[data-state] {
+      animation: none;
+    }
+  }
+
   @keyframes tooltip-content-in-QxxE9U {
     from {
       opacity: var(--moduix-tooltip-popup-starting-opacity, var(--moduix-popup-motion-starting-opacity, 0));

package/dist/components/tour/Tour.d.ts

@@ -18,7 +18,7 @@ declare const Tour: typeof TourRoot & {
     Title: import("react").ForwardRefExoticComponent<Omit<TourPrimitive.TitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
     Description: import("react").ForwardRefExoticComponent<Omit<TourPrimitive.DescriptionProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     ProgressText: import("react").ForwardRefExoticComponent<Omit<TourPrimitive.ProgressTextProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-    Body: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Body: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
     CloseTrigger: import("react").ForwardRefExoticComponent<Omit<TourPrimitive.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
     CloseIcon: import("react").ForwardRefExoticComponent<Omit<Omit<TourPrimitive.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "asChild">, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
     Control: import("react").ForwardRefExoticComponent<Omit<TourPrimitive.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/tour/Tour.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
 import { Tour, useTour, useTourContext, waitForElement, waitForElementValue, waitForEvent, waitForPromise } from "@ark-ui/react/tour";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
@@ -99,7 +100,7 @@ const Tour_TourProgressText = /*#__PURE__*/ forwardRef(function({ className, ...
     });
 });
 const Tour_TourBody = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
-    return /*#__PURE__*/ jsx("div", {
+    return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
         "data-slot": "tour-body",
         className: clsx(Tour_module.body, normalizeClassName(className)),