@moduix/react 2.5.1 → 2.6.0

package/dist/components/tooltip/Tooltip.js

@@ -3,7 +3,6 @@ import { jsx } from "react/jsx-runtime";
 import { Tooltip, useTooltip, useTooltipContext } from "@ark-ui/react/tooltip";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
 import Tooltip_module from "./Tooltip.module.js";
 function TooltipRoot({ lazyMount = true, portalled, portalRef, unmountOnExit = true, ...props }) {
@@ -33,7 +32,7 @@ const Tooltip_TooltipTrigger = /*#__PURE__*/ forwardRef(function({ asChild, clas
         ref: ref,
         "data-slot": "tooltip-trigger",
         asChild: asChild,
-        className: clsx(!asChild && Tooltip_module.trigger, normalizeClassName(className)),
+        className: clsx(!asChild && Tooltip_module.trigger, className),
         ...props
     });
 });
@@ -44,7 +43,7 @@ const Tooltip_TooltipDisabledTrigger = /*#__PURE__*/ forwardRef(function({ class
             ref: ref,
             "data-slot": "tooltip-disabled-trigger",
             tabIndex: tabIndex,
-            className: clsx(Tooltip_module.disabledTrigger, normalizeClassName(className)),
+            className: clsx(Tooltip_module.disabledTrigger, className),
             ...props
         })
     });
@@ -54,7 +53,7 @@ const Tooltip_TooltipPositioner = /*#__PURE__*/ forwardRef(function({ className,
         children: /*#__PURE__*/ jsx(Tooltip.Positioner, {
             ref: ref,
             "data-slot": "tooltip-positioner",
-            className: clsx(Tooltip_module.positioner, normalizeClassName(className)),
+            className: clsx(Tooltip_module.positioner, className),
             ...props
         })
     });
@@ -63,7 +62,7 @@ const Tooltip_TooltipContent = /*#__PURE__*/ forwardRef(function({ className, ..
     return /*#__PURE__*/ jsx(Tooltip.Content, {
         ref: ref,
         "data-slot": "tooltip-content",
-        className: clsx(Tooltip_module.content, normalizeClassName(className)),
+        className: clsx(Tooltip_module.content, className),
         ...props
     });
 });
@@ -79,7 +78,7 @@ const Tooltip_TooltipArrow = /*#__PURE__*/ forwardRef(function({ className, chil
     return /*#__PURE__*/ jsx(Tooltip.Arrow, {
         ref: ref,
         "data-slot": "tooltip-arrow",
-        className: clsx(Tooltip_module.arrow, normalizeClassName(className)),
+        className: clsx(Tooltip_module.arrow, className),
         ...props,
         children: children ?? /*#__PURE__*/ jsx(Tooltip_TooltipArrowTip, {})
     });
@@ -88,7 +87,7 @@ const Tooltip_TooltipArrowTip = /*#__PURE__*/ forwardRef(function({ className, .
     return /*#__PURE__*/ jsx(Tooltip.ArrowTip, {
         ref: ref,
         "data-slot": "tooltip-arrow-tip",
-        className: clsx(Tooltip_module.arrowTip, normalizeClassName(className)),
+        className: clsx(Tooltip_module.arrowTip, className),
         ...props
     });
 });

package/dist/components/tooltip/Tooltip_module.css

@@ -77,7 +77,7 @@
     border-radius: var(--moduix-tooltip-radius, var(--moduix-radius-md));
     background-color: var(--moduix-tooltip-bg, var(--moduix-color-popover));
     color: var(--moduix-tooltip-color, var(--moduix-color-popover-foreground));
-    box-shadow: var(--moduix-tooltip-shadow, var(--moduix-shadow-lg));
+    box-shadow: var(--moduix-tooltip-shadow, var(--moduix-shadow-md));
     font-size: var(--moduix-tooltip-font-size, var(--moduix-text-sm));
     line-height: var(--moduix-tooltip-line-height, var(--moduix-line-height-text-sm));
     text-align: center;

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

@@ -1,6 +1,6 @@
 import { Tour as TourPrimitive, useTour, useTourContext, waitForElement, waitForElementValue, waitForEvent, waitForPromise } from '@ark-ui/react/tour';
 import type { ComponentProps } from 'react';
-import { type OverlayPortalProps } from '../../internal/overlayPortal';
+import { type OverlayPortalProps } from '../../internal/overlayPortal.js';
 type TourRootProps = ComponentProps<typeof TourPrimitive.Root> & OverlayPortalProps;
 declare function TourRoot({ lazyMount, portalled, portalRef, unmountOnExit, ...props }: TourRootProps): import("react").JSX.Element;
 declare function TourActionList({ className }: {

package/dist/components/tour/Tour.js

@@ -4,7 +4,6 @@ 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";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
 import { CloseButton } from "../close-button/index.js";
 import Tour_module from "./Tour.module.js";
@@ -25,7 +24,7 @@ const Tour_TourBackdrop = /*#__PURE__*/ forwardRef(function({ className, ...prop
         children: /*#__PURE__*/ jsx(Tour.Backdrop, {
             ref: ref,
             "data-slot": "tour-backdrop",
-            className: clsx(Tour_module.backdrop, normalizeClassName(className)),
+            className: clsx(Tour_module.backdrop, className),
             ...props
         })
     });
@@ -35,7 +34,7 @@ const Tour_TourSpotlight = /*#__PURE__*/ forwardRef(function({ className, ...pro
         children: /*#__PURE__*/ jsx(Tour.Spotlight, {
             ref: ref,
             "data-slot": "tour-spotlight",
-            className: clsx(Tour_module.spotlight, normalizeClassName(className)),
+            className: clsx(Tour_module.spotlight, className),
             ...props
         })
     });
@@ -45,7 +44,7 @@ const Tour_TourPositioner = /*#__PURE__*/ forwardRef(function({ className, ...pr
         children: /*#__PURE__*/ jsx(Tour.Positioner, {
             ref: ref,
             "data-slot": "tour-positioner",
-            className: clsx(Tour_module.positioner, normalizeClassName(className)),
+            className: clsx(Tour_module.positioner, className),
             ...props
         })
     });
@@ -54,7 +53,7 @@ const Tour_TourContent = /*#__PURE__*/ forwardRef(function({ className, ...props
     return /*#__PURE__*/ jsx(Tour.Content, {
         ref: ref,
         "data-slot": "tour-content",
-        className: clsx(Tour_module.content, normalizeClassName(className)),
+        className: clsx(Tour_module.content, className),
         ...props
     });
 });
@@ -62,7 +61,7 @@ const Tour_TourArrow = /*#__PURE__*/ forwardRef(function({ className, children,
     return /*#__PURE__*/ jsx(Tour.Arrow, {
         ref: ref,
         "data-slot": "tour-arrow",
-        className: clsx(Tour_module.arrow, normalizeClassName(className)),
+        className: clsx(Tour_module.arrow, className),
         ...props,
         children: children ?? /*#__PURE__*/ jsx(Tour_TourArrowTip, {})
     });
@@ -71,7 +70,7 @@ const Tour_TourArrowTip = /*#__PURE__*/ forwardRef(function({ className, ...prop
     return /*#__PURE__*/ jsx(Tour.ArrowTip, {
         ref: ref,
         "data-slot": "tour-arrow-tip",
-        className: clsx(Tour_module.arrowTip, normalizeClassName(className)),
+        className: clsx(Tour_module.arrowTip, className),
         ...props
     });
 });
@@ -79,7 +78,7 @@ const Tour_TourTitle = /*#__PURE__*/ forwardRef(function({ className, ...props }
     return /*#__PURE__*/ jsx(Tour.Title, {
         ref: ref,
         "data-slot": "tour-title",
-        className: clsx(Tour_module.title, normalizeClassName(className)),
+        className: clsx(Tour_module.title, className),
         ...props
     });
 });
@@ -87,7 +86,7 @@ const Tour_TourDescription = /*#__PURE__*/ forwardRef(function({ className, ...p
     return /*#__PURE__*/ jsx(Tour.Description, {
         ref: ref,
         "data-slot": "tour-description",
-        className: clsx(Tour_module.description, normalizeClassName(className)),
+        className: clsx(Tour_module.description, className),
         ...props
     });
 });
@@ -95,7 +94,7 @@ const Tour_TourProgressText = /*#__PURE__*/ forwardRef(function({ className, ...
     return /*#__PURE__*/ jsx(Tour.ProgressText, {
         ref: ref,
         "data-slot": "tour-progress-text",
-        className: clsx(Tour_module.progressText, normalizeClassName(className)),
+        className: clsx(Tour_module.progressText, className),
         ...props
     });
 });
@@ -103,7 +102,7 @@ const Tour_TourBody = /*#__PURE__*/ forwardRef(function({ className, ...props },
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
         "data-slot": "tour-body",
-        className: clsx(Tour_module.body, normalizeClassName(className)),
+        className: clsx(Tour_module.body, className),
         ...props
     });
 });
@@ -112,7 +111,7 @@ const Tour_TourCloseTrigger = /*#__PURE__*/ forwardRef(function({ asChild, class
         ref: ref,
         asChild: asChild,
         "data-slot": "tour-close-trigger",
-        className: clsx(!asChild && Tour_module.closeTrigger, normalizeClassName(className)),
+        className: clsx(!asChild && Tour_module.closeTrigger, className),
         ...props
     });
 });
@@ -124,7 +123,7 @@ const Tour_TourCloseIcon = /*#__PURE__*/ forwardRef(function({ className, childr
             ref: ref,
             "data-slot": "tour-close-icon",
             "aria-label": ariaLabel,
-            className: clsx(Tour_module.closeIcon, normalizeClassName(className)),
+            className: clsx(Tour_module.closeIcon, className),
             children: children
         })
     });
@@ -133,7 +132,7 @@ const Tour_TourControl = /*#__PURE__*/ forwardRef(function({ className, ...props
     return /*#__PURE__*/ jsx(Tour.Control, {
         ref: ref,
         "data-slot": "tour-control",
-        className: clsx(Tour_module.control, normalizeClassName(className)),
+        className: clsx(Tour_module.control, className),
         ...props
     });
 });
@@ -142,7 +141,7 @@ const Tour_TourActionTrigger = /*#__PURE__*/ forwardRef(function({ asChild, clas
         ref: ref,
         asChild: asChild,
         "data-slot": "tour-action-trigger",
-        className: clsx(!asChild && Tour_module.actionTrigger, normalizeClassName(className)),
+        className: clsx(!asChild && Tour_module.actionTrigger, className),
         ...props
     });
 });

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

@@ -1,4 +1,4 @@
-import { TreeView as TreeViewPrimitive, createFileTreeCollection, createTreeCollection, type TreeNode, type TreeViewLoadChildrenDetails, 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, type TreeViewRootComponent, type TreeViewRootProviderComponent, 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> = {
@@ -12,9 +12,9 @@ type TreeViewNodeProps<T extends TreeNode> = {
     node: T;
 };
 declare function TreeViewNode<T extends TreeNode>({ children, indexPath, node }: TreeViewNodeProps<T>): import("react").JSX.Element;
-declare const TreeView: TreeViewPrimitive.RootComponent & {
-    Root: TreeViewPrimitive.RootComponent;
-    RootProvider: TreeViewPrimitive.RootProviderComponent;
+declare const TreeView: TreeViewRootComponent & {
+    Root: TreeViewRootComponent;
+    RootProvider: TreeViewRootProviderComponent;
     Context: <T extends unknown>(props: TreeViewPrimitive.ContextProps<T>) => ReactNode;
     NodeContext: (props: TreeViewPrimitive.NodeContextProps) => ReactNode;
     Label: import("react").ForwardRefExoticComponent<Omit<TreeViewPrimitive.LabelProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;

package/dist/components/tree-view/TreeView.js

@@ -4,13 +4,12 @@ import { TreeView, createFileTreeCollection, createTreeCollection, useTreeView,
 import { clsx } from "clsx";
 import { forwardRef } from "react";
 import { CheckIcon, ChevronRightIcon, IndeterminateIcon } from "../../internal/icons/ui/index.js";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import TreeView_module from "./TreeView.module.js";
 const TreeView_TreeViewRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(TreeView.Root, {
         ref: ref,
         "data-slot": "tree-view-root",
-        className: clsx(TreeView_module.root, normalizeClassName(className)),
+        className: clsx(TreeView_module.root, className),
         ...props
     });
 });
@@ -18,7 +17,7 @@ const TreeView_TreeViewRootProvider = /*#__PURE__*/ forwardRef(function({ classN
     return /*#__PURE__*/ jsx(TreeView.RootProvider, {
         ref: ref,
         "data-slot": "tree-view-root-provider",
-        className: clsx(TreeView_module.root, normalizeClassName(className)),
+        className: clsx(TreeView_module.root, className),
         ...props
     });
 });
@@ -26,7 +25,7 @@ const TreeView_TreeViewLabel = /*#__PURE__*/ forwardRef(function({ className, ..
     return /*#__PURE__*/ jsx(TreeView.Label, {
         ref: ref,
         "data-slot": "tree-view-label",
-        className: clsx(TreeView_module.label, normalizeClassName(className)),
+        className: clsx(TreeView_module.label, className),
         ...props
     });
 });
@@ -34,7 +33,7 @@ const TreeView_TreeViewTree = /*#__PURE__*/ forwardRef(function({ className, ...
     return /*#__PURE__*/ jsx(TreeView.Tree, {
         ref: ref,
         "data-slot": "tree-view-tree",
-        className: clsx(TreeView_module.tree, normalizeClassName(className)),
+        className: clsx(TreeView_module.tree, className),
         ...props
     });
 });
@@ -42,7 +41,7 @@ const TreeView_TreeViewBranch = /*#__PURE__*/ forwardRef(function({ className, .
     return /*#__PURE__*/ jsx(TreeView.Branch, {
         ref: ref,
         "data-slot": "tree-view-branch",
-        className: clsx(TreeView_module.branch, normalizeClassName(className)),
+        className: clsx(TreeView_module.branch, className),
         ...props
     });
 });
@@ -50,7 +49,7 @@ const TreeView_TreeViewBranchControl = /*#__PURE__*/ forwardRef(function({ class
     return /*#__PURE__*/ jsx(TreeView.BranchControl, {
         ref: ref,
         "data-slot": "tree-view-branch-control",
-        className: clsx(TreeView_module.branchControl, normalizeClassName(className)),
+        className: clsx(TreeView_module.branchControl, className),
         ...props
     });
 });
@@ -58,7 +57,7 @@ const TreeView_TreeViewBranchTrigger = /*#__PURE__*/ forwardRef(function({ class
     return /*#__PURE__*/ jsx(TreeView.BranchTrigger, {
         ref: ref,
         "data-slot": "tree-view-branch-trigger",
-        className: clsx(TreeView_module.branchTrigger, normalizeClassName(className)),
+        className: clsx(TreeView_module.branchTrigger, className),
         ...props,
         children: children ?? /*#__PURE__*/ jsx(ChevronRightIcon, {})
     });
@@ -67,7 +66,7 @@ const TreeView_TreeViewBranchIndicator = /*#__PURE__*/ forwardRef(function({ cla
     return /*#__PURE__*/ jsx(TreeView.BranchIndicator, {
         ref: ref,
         "data-slot": "tree-view-branch-indicator",
-        className: clsx(TreeView_module.branchIndicator, normalizeClassName(className)),
+        className: clsx(TreeView_module.branchIndicator, className),
         ...props,
         children: children ?? /*#__PURE__*/ jsx(ChevronRightIcon, {})
     });
@@ -76,7 +75,7 @@ const TreeView_TreeViewBranchText = /*#__PURE__*/ forwardRef(function({ classNam
     return /*#__PURE__*/ jsx(TreeView.BranchText, {
         ref: ref,
         "data-slot": "tree-view-branch-text",
-        className: clsx(TreeView_module.branchText, normalizeClassName(className)),
+        className: clsx(TreeView_module.branchText, className),
         ...props
     });
 });
@@ -84,7 +83,7 @@ const TreeView_TreeViewBranchContent = /*#__PURE__*/ forwardRef(function({ class
     return /*#__PURE__*/ jsx(TreeView.BranchContent, {
         ref: ref,
         "data-slot": "tree-view-branch-content",
-        className: clsx(TreeView_module.branchContent, normalizeClassName(className)),
+        className: clsx(TreeView_module.branchContent, className),
         ...props
     });
 });
@@ -92,7 +91,7 @@ const TreeView_TreeViewBranchIndentGuide = /*#__PURE__*/ forwardRef(function({ c
     return /*#__PURE__*/ jsx(TreeView.BranchIndentGuide, {
         ref: ref,
         "data-slot": "tree-view-branch-indent-guide",
-        className: clsx(TreeView_module.branchIndentGuide, normalizeClassName(className)),
+        className: clsx(TreeView_module.branchIndentGuide, className),
         ...props
     });
 });
@@ -100,7 +99,7 @@ const TreeView_TreeViewItem = /*#__PURE__*/ forwardRef(function({ className, ...
     return /*#__PURE__*/ jsx(TreeView.Item, {
         ref: ref,
         "data-slot": "tree-view-item",
-        className: clsx(TreeView_module.item, normalizeClassName(className)),
+        className: clsx(TreeView_module.item, className),
         ...props
     });
 });
@@ -108,7 +107,7 @@ const TreeView_TreeViewItemText = /*#__PURE__*/ forwardRef(function({ className,
     return /*#__PURE__*/ jsx(TreeView.ItemText, {
         ref: ref,
         "data-slot": "tree-view-item-text",
-        className: clsx(TreeView_module.itemText, normalizeClassName(className)),
+        className: clsx(TreeView_module.itemText, className),
         ...props
     });
 });
@@ -116,7 +115,7 @@ const TreeView_TreeViewItemIndicator = /*#__PURE__*/ forwardRef(function({ class
     return /*#__PURE__*/ jsx(TreeView.ItemIndicator, {
         ref: ref,
         "data-slot": "tree-view-item-indicator",
-        className: clsx(TreeView_module.itemIndicator, normalizeClassName(className)),
+        className: clsx(TreeView_module.itemIndicator, className),
         ...props,
         children: children ?? /*#__PURE__*/ jsx(CheckIcon, {})
     });
@@ -125,14 +124,14 @@ const TreeView_TreeViewNodeCheckbox = /*#__PURE__*/ forwardRef(function({ classN
     return /*#__PURE__*/ jsx(TreeView.NodeCheckbox, {
         ref: ref,
         "data-slot": "tree-view-node-checkbox",
-        className: clsx(TreeView_module.nodeCheckbox, normalizeClassName(className)),
+        className: clsx(TreeView_module.nodeCheckbox, className),
         ...props
     });
 });
 function TreeViewNodeCheckboxIndicator({ className, children, indeterminate, ...props }) {
     return /*#__PURE__*/ jsx(TreeView.NodeCheckboxIndicator, {
         "data-slot": "tree-view-node-checkbox-indicator",
-        className: clsx(TreeView_module.nodeCheckboxIndicator, normalizeClassName(className)),
+        className: clsx(TreeView_module.nodeCheckboxIndicator, className),
         indeterminate: indeterminate ?? /*#__PURE__*/ jsx(IndeterminateIcon, {}),
         ...props,
         children: children ?? /*#__PURE__*/ jsx(CheckIcon, {})
@@ -142,7 +141,7 @@ const TreeView_TreeViewNodeRenameInput = /*#__PURE__*/ forwardRef(function({ cla
     return /*#__PURE__*/ jsx(TreeView.NodeRenameInput, {
         ref: ref,
         "data-slot": "tree-view-node-rename-input",
-        className: clsx(TreeView_module.nodeRenameInput, normalizeClassName(className)),
+        className: clsx(TreeView_module.nodeRenameInput, className),
         ...props
     });
 });

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

@@ -42,6 +42,7 @@
   }
 
   .branchControl-ositpp, .item-D7JZg4 {
+    z-index: 0;
     box-sizing: border-box;
     width: 100%;
     min-width: 0;
@@ -52,48 +53,74 @@
       var(--moduix-tree-view-item-border-color, transparent);
     border-radius: var(--moduix-tree-view-item-radius, var(--moduix-radius-sm));
     padding-block: var(--moduix-tree-view-item-padding-y, var(--moduix-spacing-1));
-    background-color: var(--moduix-tree-view-item-bg, transparent);
     color: var(--moduix-tree-view-item-color, var(--moduix-tree-view-color, var(--moduix-color-foreground)));
     cursor: pointer;
     font: inherit;
-    outline: var(--moduix-tree-view-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
-      solid transparent;
-    outline-offset: calc(var(--moduix-tree-view-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))) *
-        -1);
     text-align: start;
-    transition: background-color var(--moduix-tree-view-transition, var(--moduix-transition-default)),
-      color var(--moduix-tree-view-transition, var(--moduix-transition-default)),
-      outline-color var(--moduix-tree-view-transition, var(--moduix-transition-default)),
+    transition: color var(--moduix-tree-view-transition, var(--moduix-transition-default)),
       opacity var(--moduix-tree-view-transition, var(--moduix-transition-default));
     -webkit-user-select: none;
     user-select: none;
+    outline: none;
     padding-inline-start: calc(var(--moduix-tree-view-item-padding-x, var(--moduix-spacing-2)) +
         ((var(--depth, 1) - 1) * var(--moduix-tree-view-indent, 1rem)));
     padding-inline-end: var(--moduix-tree-view-item-padding-x, var(--moduix-spacing-2));
     text-decoration: none;
     display: flex;
+    position: relative;
+  }
+
+  :is(.branchControl-ositpp, .item-D7JZg4):before {
+    z-index: -1;
+    border-radius: inherit;
+    background-color: var(--moduix-tree-view-item-bg, transparent);
+    content: "";
+    box-shadow: inset 0 0 0
+        var(--moduix-tree-view-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+        transparent;
+    pointer-events: none;
+    transition: background-color var(--moduix-tree-view-transition, var(--moduix-transition-default)),
+        box-shadow var(--moduix-tree-view-transition, var(--moduix-transition-default));
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: calc(var(--moduix-tree-view-item-padding-x, var(--moduix-spacing-2)) +
+          ((var(--depth, 1) - 1) * var(--moduix-tree-view-indent, 1rem)));
+    inset-inline-end: 0;
   }
 
   :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));
   }
 
-  :is(.branchControl-ositpp, .item-D7JZg4):focus-visible, :is(.branchControl-ositpp, .item-D7JZg4)[data-focus] {
-    outline-color: var(--moduix-tree-view-focus-ring-color, var(--moduix-color-ring));
+  :is(.branchControl-ositpp, .item-D7JZg4):not([data-disabled]):hover:before {
+    background-color: var(--moduix-tree-view-item-hover-bg, var(--moduix-color-accent));
+  }
+
+  :is(:is(.branchControl-ositpp, .item-D7JZg4):focus-visible, :is(.branchControl-ositpp, .item-D7JZg4)[data-focus]):before {
+    box-shadow: inset 0 0 0
+          var(--moduix-tree-view-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+          var(--moduix-tree-view-focus-ring-color, var(--moduix-color-ring));
   }
 
   :is(.branchControl-ositpp, .item-D7JZg4)[data-selected] {
-    background-color: var(--moduix-tree-view-item-selected-bg, var(--moduix-color-accent));
     color: var(--moduix-tree-view-item-selected-color, var(--moduix-color-accent-foreground));
   }
 
+  :is(.branchControl-ositpp, .item-D7JZg4)[data-selected]:before {
+    background-color: var(--moduix-tree-view-item-selected-bg, var(--moduix-color-accent));
+  }
+
   :is(.branchControl-ositpp, .item-D7JZg4)[data-disabled] {
     color: var(--moduix-tree-view-item-disabled-color, var(--moduix-color-muted-foreground));
     cursor: default;
     opacity: var(--moduix-tree-view-disabled-opacity, var(--moduix-opacity-disabled));
   }
 
+  .item-D7JZg4 {
+    padding-inline-start: calc(var(--moduix-tree-view-item-padding-x, var(--moduix-spacing-2)) + var(--moduix-spacing-1) +
+        var(--moduix-spacing-1) + ((var(--depth, 1) - 1) * var(--moduix-tree-view-indent, 1rem)));
+  }
+
   .branchTrigger-_j6AJ6, .branchIndicator-f3bjVW, .itemIndicator-jfNuks {
     width: var(--moduix-tree-view-indicator-size, var(--moduix-spacing-4));
     height: var(--moduix-tree-view-indicator-size, var(--moduix-spacing-4));

package/dist/components/typeset/Typeset.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 Typeset_module from "./Typeset.module.js";
 const Typeset_TypesetRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
@@ -11,7 +10,7 @@ const Typeset_TypesetRoot = /*#__PURE__*/ forwardRef(function({ className, ...pr
         "data-scope": "typeset",
         "data-part": "root",
         "data-slot": "typeset",
-        className: clsx(Typeset_module.root, normalizeClassName(className))
+        className: clsx(Typeset_module.root, className)
     });
 });
 const Typeset_TypesetScroll = /*#__PURE__*/ forwardRef(function({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className, role, tabIndex = 0, ...props }, ref) {
@@ -23,7 +22,7 @@ const Typeset_TypesetScroll = /*#__PURE__*/ forwardRef(function({ 'aria-label':
         "data-scope": "typeset",
         "data-part": "scroll",
         "data-slot": "typeset-scroll",
-        className: clsx(Typeset_module.scroll, normalizeClassName(className)),
+        className: clsx(Typeset_module.scroll, className),
         role: role ?? (ariaLabel || ariaLabelledBy ? 'region' : void 0),
         tabIndex: tabIndex
     });