@moduix/react 2.2.4 → 2.3.0

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,8 @@
   .root-HI0WAX {
     box-sizing: border-box;
     overscroll-behavior-inline: contain;
+    scrollbar-width: none;
+    --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%;
@@ -15,6 +17,10 @@
     overflow-x: auto;
   }
 
+  .root-HI0WAX::-webkit-scrollbar {
+    display: none;
+  }
+
   .root-HI0WAX[data-orientation="vertical"] {
     flex-direction: column;
     align-items: stretch;
@@ -26,20 +32,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)),

package/dist/components/tour/Tour_module.css

@@ -23,9 +23,10 @@
   }
 
   .positioner-Zk89xT {
-    --moduix-tour-positioner-z-index: calc(var(--moduix-tour-z-index, var(--moduix-z-modal)) + var(--tour-layer, 0) +
+    --tour-z-index: var(--moduix-tour-z-index, var(--moduix-z-modal));
+    --_tour-positioner-z-index: calc(var(--moduix-tour-z-index, var(--moduix-z-modal)) + var(--tour-layer, 0) +
         var(--layer-index, 0));
-    z-index: var(--z-index, var(--moduix-tour-positioner-z-index));
+    z-index: var(--z-index, var(--_tour-positioner-z-index));
     max-width: var(--available-width);
     max-height: var(--available-height);
     outline: 0;
@@ -192,11 +193,11 @@
   }
 
   .progressText-Jm6Fx2 {
-    margin-top: var(--moduix-tour-progress-text-margin-top, var(--moduix-spacing-2));
     color: var(--moduix-tour-progress-text-color, var(--moduix-color-muted-foreground));
     font-size: var(--moduix-tour-progress-text-font-size, var(--moduix-text-xs));
     line-height: var(--moduix-tour-progress-text-line-height, var(--moduix-line-height-text-xs));
     order: 1;
+    margin-block-start: var(--moduix-tour-progress-text-margin-top, var(--moduix-spacing-2));
   }
 
   .body-w5DEFg {
@@ -263,9 +264,9 @@
   .control-pLhhBF {
     justify-content: flex-end;
     gap: var(--moduix-tour-control-gap, var(--moduix-spacing-2));
-    margin-top: var(--moduix-tour-control-margin-top, var(--moduix-spacing-3));
     flex-wrap: wrap;
     order: 2;
+    margin-block-start: var(--moduix-tour-control-margin-top, var(--moduix-spacing-3));
     display: flex;
   }
 
@@ -324,6 +325,17 @@
     opacity: var(--moduix-tour-disabled-opacity, var(--moduix-opacity-disabled));
   }
 
+  @media (prefers-reduced-motion: reduce) {
+    .backdrop-okc1Ik[data-state], .content-ZY9BS9[data-state] {
+      animation-duration: 1ms;
+      animation-delay: 0s;
+    }
+
+    .actionTrigger-LsjeVS {
+      transition: none;
+    }
+  }
+
   @keyframes tour-backdrop-in-rR_UM_ {
     from {
       opacity: var(--moduix-tour-backdrop-starting-opacity, 0);

package/dist/components/tree-view/TreeView.d.ts

@@ -1,4 +1,4 @@
-import { TreeView as TreeViewPrimitive, createFileTreeCollection, createTreeCollection, type TreeNode, type TreeViewLoadChildrenDetails, type TreeViewNodeProps as TreeViewPrimitiveNodeProps, type TreeViewNodeProviderProps, type TreeViewNodeState, useTreeView, useTreeViewContext, useTreeViewNodeContext } from '@ark-ui/react/tree-view';
+import { TreeView as TreeViewPrimitive, createFileTreeCollection, createTreeCollection, type TreeNode, type TreeViewLoadChildrenDetails, type TreeViewNodeProviderProps, type TreeViewNodeState, useTreeView, useTreeViewContext, useTreeViewNodeContext } from '@ark-ui/react/tree-view';
 import type { ComponentProps, ReactNode } from 'react';
 declare function TreeViewNodeCheckboxIndicator({ className, children, indeterminate, ...props }: ComponentProps<typeof TreeViewPrimitive.NodeCheckboxIndicator>): import("react").JSX.Element;
 type TreeViewNodeRenderProps<T extends TreeNode> = {
@@ -35,4 +35,4 @@ declare const TreeView: TreeViewPrimitive.RootComponent & {
     NodeCheckboxIndicator: typeof TreeViewNodeCheckboxIndicator;
     NodeRenameInput: import("react").ForwardRefExoticComponent<Omit<TreeViewPrimitive.NodeRenameInputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 };
-export { TreeView, createFileTreeCollection, createTreeCollection, useTreeView, useTreeViewContext, useTreeViewNodeContext, type TreeViewLoadChildrenDetails, type TreeViewNodeRenderProps, type TreeViewNodeState, type TreeViewPrimitiveNodeProps as TreeViewNodeProps, type TreeViewNodeProviderProps, };
+export { TreeView, createFileTreeCollection, createTreeCollection, useTreeView, useTreeViewContext, useTreeViewNodeContext, type TreeViewLoadChildrenDetails, type TreeViewNodeProps, type TreeViewNodeRenderProps, type TreeViewNodeState, type TreeViewNodeProviderProps, };

package/dist/components/tree-view/TreeView_module.css

@@ -74,7 +74,7 @@
     display: flex;
   }
 
-  :is(.branchControl-ositpp, .item-D7JZg4):hover {
+  :is(.branchControl-ositpp, .item-D7JZg4):not([data-disabled]):hover {
     background-color: var(--moduix-tree-view-item-hover-bg, var(--moduix-color-accent));
     color: var(--moduix-tree-view-item-hover-color, var(--moduix-color-accent-foreground));
   }

package/dist/styles/reset.css

@@ -1,3 +1,36 @@
+/*!
+ * moduix reset.css
+ *
+ * Portions of this file are derived from:
+ * - @unocss/reset tailwind-v4.css
+ *   Copyright (c) 2021-PRESENT Anthony Fu <https://github.com/antfu>
+ *   https://github.com/unocss/unocss/blob/main/packages-presets/reset/tailwind-v4.css
+ * - Tailwind CSS Preflight
+ *   Copyright (c) Tailwind Labs, Inc.
+ *   https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/preflight.css
+ *
+ * Modifications Copyright (c) 2026 Blinks44
+ *
+ * MIT License
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
 @layer moduix.reset {
   *, :after, :before {
     box-sizing: border-box;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moduix/react",
-  "version": "2.2.4",
+  "version": "2.3.0",
   "description": "React implementation of the moduix component system, built on Ark UI primitives.",
   "keywords": [
     "accessible",
@@ -91,6 +91,10 @@
       "types": "./dist/components/carousel/index.d.ts",
       "import": "./dist/components/carousel/index.js"
     },
+    "./chart": {
+      "types": "./dist/components/chart/index.d.ts",
+      "import": "./dist/components/chart/index.js"
+    },
     "./checkbox": {
       "types": "./dist/components/checkbox/index.d.ts",
       "import": "./dist/components/checkbox/index.js"
@@ -393,15 +397,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "build": "rslib",
-    "build:storybook": "storybook build",
-    "dev": "rslib --watch --no-clean",
-    "storybook": "storybook dev -p 6006 --no-open",
-    "test": "rstest run",
-    "test:watch": "rstest --watch",
-    "tsc:check": "tsc --noEmit"
-  },
   "dependencies": {
     "@unpic/core": "^1.0.3",
     "@unpic/react": "^1.0.2",
@@ -414,27 +409,44 @@
     "@rsbuild/core": "~2.1.4",
     "@rsbuild/plugin-react": "^2.1.0",
     "@rslib/core": "^0.23.2",
-    "@rstest/adapter-rslib": "^0.10.6",
-    "@rstest/core": "^0.10.6",
-    "@storybook/addon-docs": "10.5.3",
-    "@storybook/react": "10.5.3",
+    "@rstest/adapter-rslib": "^0.11.6",
+    "@rstest/core": "^0.11.6",
+    "@storybook/addon-docs": "^10.5.3",
+    "@storybook/react": "^10.5.3",
+    "@tanstack/charts": "^0.14.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "^24.13.2",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "happy-dom": "^20.10.6",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
-    "storybook": "10.5.3",
+    "storybook": "^10.5.3",
     "storybook-addon-rslib": "^3.3.4",
     "storybook-react-rsbuild": "^3.3.4",
     "typescript": "~6.0.3"
   },
   "peerDependencies": {
     "@ark-ui/react": "^5.37.2",
+    "@tanstack/charts": "^0.14.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
+  },
+  "peerDependenciesMeta": {
+    "@tanstack/charts": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "rslib",
+    "build:storybook": "storybook build",
+    "dev": "rslib --watch --no-clean",
+    "storybook": "storybook dev -p 6006 --no-open",
+    "test": "rstest run",
+    "test:watch": "rstest --watch",
+    "tsc:check": "tsc --noEmit"
   }
 }