@moduix/react 2.1.0 → 2.2.4

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

@@ -0,0 +1,283 @@
+@layer moduix.components {
+  .root-2ZXoMk {
+    box-sizing: border-box;
+    width: var(--moduix-tree-view-width, 20rem);
+    max-width: var(--moduix-tree-view-max-width, 100%);
+    gap: var(--moduix-tree-view-root-gap, var(--moduix-spacing-2));
+    min-width: 0;
+    color: var(--moduix-tree-view-color, var(--moduix-color-foreground));
+    flex-direction: column;
+    display: flex;
+  }
+
+  .root-2ZXoMk[data-disabled] {
+    opacity: var(--moduix-tree-view-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
+  .label-kaE2OW {
+    color: var(--moduix-tree-view-label-color, var(--moduix-tree-view-color, var(--moduix-color-foreground)));
+    font-size: var(--moduix-tree-view-label-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-tree-view-label-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-tree-view-label-line-height, var(--moduix-line-height-text-sm));
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .tree-V7hDwy {
+    gap: var(--moduix-tree-view-row-gap, var(--moduix-spacing-1));
+    min-width: 0;
+    color: var(--moduix-tree-view-color, var(--moduix-color-foreground));
+    font-size: var(--moduix-tree-view-item-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-tree-view-item-line-height, var(--moduix-line-height-text-sm));
+    flex-direction: column;
+    display: flex;
+  }
+
+  .branch-HVLvxc {
+    gap: var(--moduix-tree-view-row-gap, var(--moduix-spacing-1));
+    flex-direction: column;
+    min-width: 0;
+    display: flex;
+    position: relative;
+  }
+
+  .branchControl-ositpp, .item-D7JZg4 {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    min-height: var(--moduix-tree-view-item-min-height, var(--moduix-size-sm));
+    align-items: center;
+    gap: var(--moduix-tree-view-item-gap, var(--moduix-spacing-2));
+    border: var(--moduix-tree-view-item-border-width, 0) solid
+      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)),
+      opacity var(--moduix-tree-view-transition, var(--moduix-transition-default));
+    -webkit-user-select: none;
+    user-select: 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;
+  }
+
+  :is(.branchControl-ositpp, .item-D7JZg4):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)[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-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));
+  }
+
+  .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));
+    flex: 0 0 var(--moduix-tree-view-indicator-size, var(--moduix-spacing-4));
+    color: var(--moduix-tree-view-indicator-color, currentColor);
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  :is(.branchTrigger-_j6AJ6, .branchIndicator-f3bjVW, .itemIndicator-jfNuks) svg {
+    width: var(--moduix-tree-view-indicator-icon-size, var(--moduix-spacing-3-5));
+    height: var(--moduix-tree-view-indicator-icon-size, var(--moduix-spacing-3-5));
+  }
+
+  .branchTrigger-_j6AJ6, .branchIndicator-f3bjVW {
+    transition: transform var(--moduix-tree-view-transition, var(--moduix-transition-default));
+  }
+
+  :is(.branchTrigger-_j6AJ6, .branchIndicator-f3bjVW)[data-state="open"] {
+    transform: rotate(90deg);
+  }
+
+  .branchText-u4kwmk, .itemText-L68sCp {
+    align-items: center;
+    gap: var(--moduix-tree-view-item-text-gap, var(--moduix-spacing-2));
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    min-width: 0;
+    display: inline-flex;
+    overflow: hidden;
+  }
+
+  :is(.branchText-u4kwmk, .itemText-L68sCp) svg {
+    width: var(--moduix-tree-view-node-icon-size, var(--moduix-spacing-4));
+    height: var(--moduix-tree-view-node-icon-size, var(--moduix-spacing-4));
+    flex: 0 0 var(--moduix-tree-view-node-icon-size, var(--moduix-spacing-4));
+  }
+
+  .branchContent-WSjq4T {
+    gap: var(--moduix-tree-view-row-gap, var(--moduix-spacing-1));
+    flex-direction: column;
+    min-width: 0;
+    display: flex;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .branchContent-WSjq4T[data-state="open"] {
+    animation: tree-view-slide-down-sZeOA1 var(--moduix-tree-view-content-transition-duration, .15s) ease-out,
+        tree-view-fade-in-HIbSvG var(--moduix-tree-view-content-transition-duration, .15s) ease-out;
+  }
+
+  .branchContent-WSjq4T[data-state="closed"] {
+    animation: tree-view-slide-up-TuO_3N var(--moduix-tree-view-content-transition-duration, .15s) ease-out,
+        tree-view-fade-out-VVyj_v var(--moduix-tree-view-content-transition-duration, .15s) ease-out;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .branchContent-WSjq4T {
+      animation: none;
+    }
+  }
+
+  .branchIndentGuide-wtrLKH {
+    z-index: 1;
+    width: var(--moduix-tree-view-indent-guide-width, var(--moduix-border-width-sm));
+    background-color: var(--moduix-tree-view-indent-guide-color, var(--moduix-color-border));
+    pointer-events: none;
+    top: 0;
+    bottom: 0;
+    position: absolute;
+    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)) +
+        (var(--moduix-tree-view-indicator-size, var(--moduix-spacing-4)) / 2));
+  }
+
+  .nodeCheckbox-BfAbe5 {
+    box-sizing: border-box;
+    width: var(--moduix-tree-view-checkbox-size, var(--moduix-spacing-4));
+    height: var(--moduix-tree-view-checkbox-size, var(--moduix-spacing-4));
+    flex: 0 0 var(--moduix-tree-view-checkbox-size, var(--moduix-spacing-4));
+    border: var(--moduix-tree-view-checkbox-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-tree-view-checkbox-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-tree-view-checkbox-radius, var(--moduix-radius-xs));
+    background-color: var(--moduix-tree-view-checkbox-bg, var(--moduix-color-background));
+    color: var(--moduix-tree-view-checkbox-color, var(--moduix-color-primary-foreground));
+    outline: var(--moduix-tree-view-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+      solid transparent;
+    outline-offset: var(--moduix-tree-view-checkbox-focus-ring-offset, var(--moduix-border-width-sm));
+    transition: background-color var(--moduix-tree-view-transition, var(--moduix-transition-default)),
+      border-color var(--moduix-tree-view-transition, var(--moduix-transition-default)),
+      outline-color var(--moduix-tree-view-transition, var(--moduix-transition-default));
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .nodeCheckbox-BfAbe5[data-state="checked"], .nodeCheckbox-BfAbe5[data-state="indeterminate"] {
+    border-color: var(--moduix-tree-view-checkbox-checked-bg, var(--moduix-color-primary));
+    background-color: var(--moduix-tree-view-checkbox-checked-bg, var(--moduix-color-primary));
+  }
+
+  .nodeCheckbox-BfAbe5:focus-visible {
+    outline-color: var(--moduix-tree-view-focus-ring-color, var(--moduix-color-ring));
+  }
+
+  .nodeCheckbox-BfAbe5[data-disabled] {
+    cursor: default;
+    opacity: var(--moduix-tree-view-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
+  .nodeCheckbox-BfAbe5 svg {
+    width: var(--moduix-tree-view-checkbox-icon-size, var(--moduix-spacing-3));
+    height: var(--moduix-tree-view-checkbox-icon-size, var(--moduix-spacing-3));
+  }
+
+  .nodeCheckboxIndicator-wzryi5 {
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .nodeRenameInput-TruWxA {
+    box-sizing: border-box;
+    border: var(--moduix-tree-view-rename-input-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-tree-view-rename-input-border-color, var(--moduix-color-ring));
+    border-radius: var(--moduix-tree-view-rename-input-radius, var(--moduix-radius-xs));
+    min-width: 0;
+    padding-block: var(--moduix-tree-view-rename-input-padding-y, 0);
+    padding-inline: var(--moduix-tree-view-rename-input-padding-x, var(--moduix-spacing-1));
+    background-color: var(--moduix-tree-view-rename-input-bg, var(--moduix-color-background));
+    color: var(--moduix-tree-view-rename-input-color, var(--moduix-color-foreground));
+    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);
+    flex: 1;
+  }
+
+  .nodeRenameInput-TruWxA:focus-visible {
+    outline-color: var(--moduix-tree-view-focus-ring-color, var(--moduix-color-ring));
+  }
+
+  @keyframes tree-view-slide-down-sZeOA1 {
+    from {
+      height: 0;
+    }
+
+    to {
+      height: var(--height);
+    }
+  }
+
+  @keyframes tree-view-slide-up-TuO_3N {
+    from {
+      height: var(--height);
+    }
+
+    to {
+      height: 0;
+    }
+  }
+
+  @keyframes tree-view-fade-in-HIbSvG {
+    from {
+      opacity: .01;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes tree-view-fade-out-VVyj_v {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: .01;
+    }
+  }
+}
+

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

@@ -1,2 +1 @@
-import { TreeView, TreeViewLoadChildrenDetails, TreeViewNodeProviderProps, createFileTreeCollection, createTreeCollection, useTreeView, useTreeViewNodeContext } from "./TreeView.js";
-export { TreeView, type TreeViewLoadChildrenDetails, type TreeViewNodeProviderProps, createFileTreeCollection, createTreeCollection, useTreeView, useTreeViewNodeContext };
+export * from './TreeView.js';

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

@@ -0,0 +1 @@
+export * from "./TreeView.js";

package/dist/components/typeset/Typeset.d.ts

@@ -1,7 +1,5 @@
-//#region src/components/typeset/Typeset.d.ts
-declare const Typeset: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>> & {
-  Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
-  Scroll: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const Typeset: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>> & {
+    Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>>;
+    Scroll: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>>;
 };
-//#endregion
-export { Typeset };
+export { Typeset };

package/dist/components/typeset/Typeset.js

@@ -1,33 +1,35 @@
-import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
-import Typeset_module_default from "./Typeset.module.js";
+import { jsx } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
-//#region src/components/typeset/Typeset.tsx
-const TypesetRoot = forwardRef(function TypesetRoot({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(ark.div, {
-		ref,
-		"data-scope": "typeset",
-		"data-part": "root",
-		"data-slot": "typeset",
-		className: clsx(Typeset_module_default.root, normalizeClassName(className)),
-		...props
-	});
+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, {
+        ref: ref,
+        ...props,
+        "data-scope": "typeset",
+        "data-part": "root",
+        "data-slot": "typeset",
+        className: clsx(Typeset_module.root, normalizeClassName(className))
+    });
 });
-const TypesetScroll = forwardRef(function TypesetScroll({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(ark.div, {
-		ref,
-		"data-scope": "typeset",
-		"data-part": "scroll",
-		"data-slot": "typeset-scroll",
-		className: clsx(Typeset_module_default.scroll, normalizeClassName(className)),
-		...props
-	});
+const Typeset_TypesetScroll = /*#__PURE__*/ forwardRef(function({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className, role, tabIndex = 0, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
+        ...props,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "data-scope": "typeset",
+        "data-part": "scroll",
+        "data-slot": "typeset-scroll",
+        className: clsx(Typeset_module.scroll, normalizeClassName(className)),
+        role: role ?? (ariaLabel || ariaLabelledBy ? 'region' : void 0),
+        tabIndex: tabIndex
+    });
 });
-const Typeset = Object.assign(TypesetRoot, {
-	Root: TypesetRoot,
-	Scroll: TypesetScroll
+const Typeset = Object.assign(Typeset_TypesetRoot, {
+    Root: Typeset_TypesetRoot,
+    Scroll: Typeset_TypesetScroll
 });
-//#endregion
 export { Typeset };

package/dist/components/typeset/Typeset.module.js

@@ -1,8 +1,6 @@
-import './Typeset.css';
-//#region src/components/typeset/Typeset.module.css
-var Typeset_module_default = {
-	"root": "_3-ErqG_root",
-	"scroll": "_3-ErqG_scroll"
+import "./Typeset_module.css";
+const Typeset_module = {
+    root: "root-DaHOOi",
+    scroll: "scroll-ZsvXUQ"
 };
-//#endregion
-export { Typeset_module_default as default };
+export default Typeset_module;