@moduix/react 2.5.1 → 2.7.0

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

@@ -4,146 +4,145 @@ 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)),
-        ...props
+        className: clsx(TreeView_module.root, className),
+        ...props,
+        "data-slot": "tree-view-root"
     });
 });
 const TreeView_TreeViewRootProvider = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(TreeView.RootProvider, {
         ref: ref,
-        "data-slot": "tree-view-root-provider",
-        className: clsx(TreeView_module.root, normalizeClassName(className)),
-        ...props
+        className: clsx(TreeView_module.root, className),
+        ...props,
+        "data-slot": "tree-view-root-provider"
     });
 });
 const TreeView_TreeViewLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(TreeView.Label, {
         ref: ref,
-        "data-slot": "tree-view-label",
-        className: clsx(TreeView_module.label, normalizeClassName(className)),
-        ...props
+        className: clsx(TreeView_module.label, className),
+        ...props,
+        "data-slot": "tree-view-label"
     });
 });
 const TreeView_TreeViewTree = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(TreeView.Tree, {
         ref: ref,
-        "data-slot": "tree-view-tree",
-        className: clsx(TreeView_module.tree, normalizeClassName(className)),
-        ...props
+        className: clsx(TreeView_module.tree, className),
+        ...props,
+        "data-slot": "tree-view-tree"
     });
 });
 const TreeView_TreeViewBranch = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(TreeView.Branch, {
         ref: ref,
-        "data-slot": "tree-view-branch",
-        className: clsx(TreeView_module.branch, normalizeClassName(className)),
-        ...props
+        className: clsx(TreeView_module.branch, className),
+        ...props,
+        "data-slot": "tree-view-branch"
     });
 });
 const TreeView_TreeViewBranchControl = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(TreeView.BranchControl, {
         ref: ref,
-        "data-slot": "tree-view-branch-control",
-        className: clsx(TreeView_module.branchControl, normalizeClassName(className)),
-        ...props
+        className: clsx(TreeView_module.branchControl, className),
+        ...props,
+        "data-slot": "tree-view-branch-control"
     });
 });
 const TreeView_TreeViewBranchTrigger = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     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,
+        "data-slot": "tree-view-branch-trigger",
         children: children ?? /*#__PURE__*/ jsx(ChevronRightIcon, {})
     });
 });
 const TreeView_TreeViewBranchIndicator = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     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,
+        "data-slot": "tree-view-branch-indicator",
         children: children ?? /*#__PURE__*/ jsx(ChevronRightIcon, {})
     });
 });
 const TreeView_TreeViewBranchText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(TreeView.BranchText, {
         ref: ref,
-        "data-slot": "tree-view-branch-text",
-        className: clsx(TreeView_module.branchText, normalizeClassName(className)),
-        ...props
+        className: clsx(TreeView_module.branchText, className),
+        ...props,
+        "data-slot": "tree-view-branch-text"
     });
 });
 const TreeView_TreeViewBranchContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(TreeView.BranchContent, {
         ref: ref,
-        "data-slot": "tree-view-branch-content",
-        className: clsx(TreeView_module.branchContent, normalizeClassName(className)),
-        ...props
+        className: clsx(TreeView_module.branchContent, className),
+        ...props,
+        "data-slot": "tree-view-branch-content"
     });
 });
 const TreeView_TreeViewBranchIndentGuide = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(TreeView.BranchIndentGuide, {
         ref: ref,
-        "data-slot": "tree-view-branch-indent-guide",
-        className: clsx(TreeView_module.branchIndentGuide, normalizeClassName(className)),
-        ...props
+        className: clsx(TreeView_module.branchIndentGuide, className),
+        ...props,
+        "data-slot": "tree-view-branch-indent-guide"
     });
 });
 const TreeView_TreeViewItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(TreeView.Item, {
         ref: ref,
-        "data-slot": "tree-view-item",
-        className: clsx(TreeView_module.item, normalizeClassName(className)),
-        ...props
+        className: clsx(TreeView_module.item, className),
+        ...props,
+        "data-slot": "tree-view-item"
     });
 });
 const TreeView_TreeViewItemText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(TreeView.ItemText, {
         ref: ref,
-        "data-slot": "tree-view-item-text",
-        className: clsx(TreeView_module.itemText, normalizeClassName(className)),
-        ...props
+        className: clsx(TreeView_module.itemText, className),
+        ...props,
+        "data-slot": "tree-view-item-text"
     });
 });
 const TreeView_TreeViewItemIndicator = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     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,
+        "data-slot": "tree-view-item-indicator",
         children: children ?? /*#__PURE__*/ jsx(CheckIcon, {})
     });
 });
 const TreeView_TreeViewNodeCheckbox = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(TreeView.NodeCheckbox, {
         ref: ref,
-        "data-slot": "tree-view-node-checkbox",
-        className: clsx(TreeView_module.nodeCheckbox, normalizeClassName(className)),
-        ...props
+        className: clsx(TreeView_module.nodeCheckbox, className),
+        ...props,
+        "data-slot": "tree-view-node-checkbox"
     });
 });
 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,
+        "data-slot": "tree-view-node-checkbox-indicator",
         children: children ?? /*#__PURE__*/ jsx(CheckIcon, {})
     });
 }
 const TreeView_TreeViewNodeRenameInput = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(TreeView.NodeRenameInput, {
         ref: ref,
-        "data-slot": "tree-view-node-rename-input",
-        className: clsx(TreeView_module.nodeRenameInput, normalizeClassName(className)),
-        ...props
+        className: clsx(TreeView_module.nodeRenameInput, className),
+        ...props,
+        "data-slot": "tree-view-node-rename-input"
     });
 });
 const TreeViewNodeProvider = TreeView.NodeProvider;

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
     });