@moduix/react 1.1.0

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

@@ -0,0 +1,261 @@
+@layer ui.components {
+  .A1SkAG_root {
+    box-sizing: border-box;
+    width: var(--tree-view-width, 20rem);
+    max-width: var(--tree-view-max-width, 100%);
+    gap: var(--tree-view-root-gap, var(--spacing-2));
+    min-width: 0;
+    color: var(--tree-view-color, var(--color-foreground));
+    flex-direction: column;
+    display: flex;
+
+    &[data-disabled] {
+      opacity: var(--tree-view-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+
+  .A1SkAG_label {
+    color: var(--tree-view-label-color, var(--tree-view-color, var(--color-foreground)));
+    font-size: var(--tree-view-label-font-size, var(--text-sm));
+    font-weight: var(--tree-view-label-font-weight, var(--weight-medium));
+    line-height: var(--tree-view-label-line-height, var(--line-height-text-sm));
+    user-select: none;
+  }
+
+  .A1SkAG_tree {
+    min-width: 0;
+    color: var(--tree-view-color, var(--color-foreground));
+    font-size: var(--tree-view-item-font-size, var(--text-sm));
+    line-height: var(--tree-view-item-line-height, var(--line-height-text-sm));
+    flex-direction: column;
+    display: flex;
+  }
+
+  .A1SkAG_branch {
+    min-width: 0;
+    position: relative;
+  }
+
+  .A1SkAG_branchControl, .A1SkAG_item {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    min-height: var(--tree-view-item-min-height, 2rem);
+    align-items: center;
+    gap: var(--tree-view-item-gap, var(--spacing-2));
+    border: var(--tree-view-item-border-width, 0) solid
+      var(--tree-view-item-border-color, transparent);
+    border-radius: var(--tree-view-item-radius, var(--radius-sm));
+    padding-block: var(--tree-view-item-padding-y, var(--spacing-1));
+    background-color: var(--tree-view-item-bg, transparent);
+    color: var(--tree-view-item-color, var(--tree-view-color, var(--color-foreground)));
+    cursor: pointer;
+    font: inherit;
+    outline: var(--tree-view-focus-ring-width, var(--border-width-sm)) solid transparent;
+    outline-offset: calc(var(--tree-view-focus-ring-width, var(--border-width-sm)) * -1);
+    text-align: start;
+    transition: background-color var(--tree-view-transition, var(--transition-default)),
+      color var(--tree-view-transition, var(--transition-default)),
+      outline-color var(--tree-view-transition, var(--transition-default)),
+      opacity var(--tree-view-transition, var(--transition-default));
+    user-select: none;
+    padding-inline-start: calc(var(--tree-view-item-padding-x, var(--spacing-2)) +
+        ((var(--depth, 1) - 1) * var(--tree-view-indent, 1rem)));
+    padding-inline-end: var(--tree-view-item-padding-x, var(--spacing-2));
+    text-decoration: none;
+    display: flex;
+
+    &:hover {
+      background-color: var(--tree-view-item-hover-bg, var(--color-accent));
+      color: var(--tree-view-item-hover-color, var(--color-accent-foreground));
+    }
+
+    &:focus-visible, &[data-focus] {
+      outline-color: var(--tree-view-focus-ring-color, var(--color-ring));
+    }
+
+    &[data-selected] {
+      background-color: var(--tree-view-item-selected-bg, var(--color-accent));
+      color: var(--tree-view-item-selected-color, var(--color-accent-foreground));
+    }
+
+    &[data-disabled] {
+      color: var(--tree-view-item-disabled-color, var(--color-muted-foreground));
+      cursor: default;
+      opacity: var(--tree-view-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+
+  .A1SkAG_branchTrigger, .A1SkAG_branchIndicator, .A1SkAG_itemIndicator {
+    width: var(--tree-view-indicator-size, 1rem);
+    height: var(--tree-view-indicator-size, 1rem);
+    flex: 0 0 var(--tree-view-indicator-size, 1rem);
+    color: var(--tree-view-indicator-color, currentColor);
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+
+    & svg {
+      width: var(--tree-view-indicator-icon-size, .875rem);
+      height: var(--tree-view-indicator-icon-size, .875rem);
+    }
+  }
+
+  .A1SkAG_branchTrigger, .A1SkAG_branchIndicator {
+    transition: transform var(--tree-view-transition, var(--transition-default));
+
+    &[data-state="open"] {
+      transform: rotate(90deg);
+    }
+  }
+
+  .A1SkAG_branchText, .A1SkAG_itemText {
+    align-items: center;
+    gap: var(--tree-view-item-text-gap, var(--spacing-2));
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    min-width: 0;
+    display: inline-flex;
+    overflow: hidden;
+
+    & svg {
+      width: var(--tree-view-node-icon-size, 1rem);
+      height: var(--tree-view-node-icon-size, 1rem);
+      flex: 0 0 var(--tree-view-node-icon-size, 1rem);
+    }
+  }
+
+  .A1SkAG_branchContent {
+    min-width: 0;
+    position: relative;
+    overflow: hidden;
+
+    &[data-state="open"] {
+      animation: A1SkAG_tree-view-slide-down var(--tree-view-content-transition-duration, .15s) ease-out,
+        A1SkAG_tree-view-fade-in var(--tree-view-content-transition-duration, .15s) ease-out;
+    }
+
+    &[data-state="closed"] {
+      animation: A1SkAG_tree-view-slide-up var(--tree-view-content-transition-duration, .15s) ease-out,
+        A1SkAG_tree-view-fade-out var(--tree-view-content-transition-duration, .15s) ease-out;
+    }
+  }
+
+  .A1SkAG_branchIndentGuide {
+    z-index: 1;
+    width: var(--tree-view-indent-guide-width, var(--border-width-sm));
+    background-color: var(--tree-view-indent-guide-color, var(--color-border));
+    top: 0;
+    bottom: 0;
+    position: absolute;
+    inset-inline-start: calc(var(--tree-view-item-padding-x, var(--spacing-2)) +
+        (((var(--depth, 1) - 1) * var(--tree-view-indent, 1rem))) +
+        (var(--tree-view-indicator-size, 1rem) / 2));
+  }
+
+  .A1SkAG_nodeCheckbox {
+    box-sizing: border-box;
+    width: var(--tree-view-checkbox-size, 1rem);
+    height: var(--tree-view-checkbox-size, 1rem);
+    flex: 0 0 var(--tree-view-checkbox-size, 1rem);
+    border: var(--tree-view-checkbox-border-width, var(--border-width-sm)) solid
+      var(--tree-view-checkbox-border-color, var(--color-border));
+    border-radius: var(--tree-view-checkbox-radius, var(--radius-xs));
+    background-color: var(--tree-view-checkbox-bg, var(--color-background));
+    color: var(--tree-view-checkbox-color, var(--color-primary-foreground));
+    outline: var(--tree-view-focus-ring-width, var(--border-width-sm)) solid transparent;
+    outline-offset: var(--tree-view-checkbox-focus-ring-offset, var(--border-width-sm));
+    transition: background-color var(--tree-view-transition, var(--transition-default)),
+      border-color var(--tree-view-transition, var(--transition-default)),
+      outline-color var(--tree-view-transition, var(--transition-default));
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+
+    &[data-state="checked"], &[data-state="indeterminate"] {
+      border-color: var(--tree-view-checkbox-checked-bg, var(--color-primary));
+      background-color: var(--tree-view-checkbox-checked-bg, var(--color-primary));
+    }
+
+    &:focus-visible {
+      outline-color: var(--tree-view-focus-ring-color, var(--color-ring));
+    }
+
+    &[data-disabled] {
+      cursor: default;
+      opacity: var(--tree-view-disabled-opacity, var(--opacity-disabled));
+    }
+
+    & svg {
+      width: var(--tree-view-checkbox-icon-size, .75rem);
+      height: var(--tree-view-checkbox-icon-size, .75rem);
+    }
+  }
+
+  .A1SkAG_nodeCheckboxIndicator {
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .A1SkAG_nodeRenameInput {
+    box-sizing: border-box;
+    border: var(--tree-view-rename-input-border-width, var(--border-width-sm)) solid
+      var(--tree-view-rename-input-border-color, var(--color-ring));
+    border-radius: var(--tree-view-rename-input-radius, var(--radius-xs));
+    min-width: 0;
+    padding-block: var(--tree-view-rename-input-padding-y, 0);
+    padding-inline: var(--tree-view-rename-input-padding-x, var(--spacing-1));
+    background-color: var(--tree-view-rename-input-bg, var(--color-background));
+    color: var(--tree-view-rename-input-color, var(--color-foreground));
+    font: inherit;
+    outline: var(--tree-view-focus-ring-width, var(--border-width-sm)) solid transparent;
+    outline-offset: calc(var(--tree-view-focus-ring-width, var(--border-width-sm)) * -1);
+    flex: 1;
+
+    &:focus-visible {
+      outline-color: var(--tree-view-focus-ring-color, var(--color-ring));
+    }
+  }
+
+  @keyframes A1SkAG_tree-view-slide-down {
+    from {
+      height: 0;
+    }
+
+    to {
+      height: var(--height);
+    }
+  }
+
+  @keyframes A1SkAG_tree-view-slide-up {
+    from {
+      height: var(--height);
+    }
+
+    to {
+      height: 0;
+    }
+  }
+
+  @keyframes A1SkAG_tree-view-fade-in {
+    from {
+      opacity: .01;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes A1SkAG_tree-view-fade-out {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: .01;
+    }
+  }
+}

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

@@ -0,0 +1,32 @@
+import { ComponentProps } from "react";
+import { TreeView, createFileTreeCollection, createTreeCollection } from "@ark-ui/react/tree-view";
+
+//#region src/components/tree-view/TreeView.d.ts
+declare function TreeViewNodeCheckboxIndicator({
+  className,
+  children,
+  indeterminate,
+  ...props
+}: ComponentProps<typeof TreeView.NodeCheckboxIndicator>): import("react").JSX.Element;
+declare const TreeView$1: TreeView.RootComponent & {
+  Root: TreeView.RootComponent;
+  RootProvider: TreeView.RootProviderComponent;
+  Label: import("react").ForwardRefExoticComponent<Omit<TreeView.LabelProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+  Tree: import("react").ForwardRefExoticComponent<Omit<TreeView.TreeProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  NodeProvider: typeof TreeView.NodeProvider;
+  Branch: import("react").ForwardRefExoticComponent<Omit<TreeView.BranchProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  BranchControl: import("react").ForwardRefExoticComponent<Omit<TreeView.BranchControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  BranchTrigger: import("react").ForwardRefExoticComponent<Omit<TreeView.BranchTriggerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  BranchIndicator: import("react").ForwardRefExoticComponent<Omit<TreeView.BranchIndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  BranchText: import("react").ForwardRefExoticComponent<Omit<TreeView.BranchTextProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+  BranchContent: import("react").ForwardRefExoticComponent<Omit<TreeView.BranchContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  BranchIndentGuide: import("react").ForwardRefExoticComponent<Omit<TreeView.BranchIndentGuideProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Item: import("react").ForwardRefExoticComponent<Omit<TreeView.ItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  ItemText: import("react").ForwardRefExoticComponent<Omit<TreeView.ItemTextProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+  ItemIndicator: import("react").ForwardRefExoticComponent<Omit<TreeView.ItemIndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  NodeCheckbox: import("react").ForwardRefExoticComponent<Omit<TreeView.NodeCheckboxProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+  NodeCheckboxIndicator: typeof TreeViewNodeCheckboxIndicator;
+  NodeRenameInput: import("react").ForwardRefExoticComponent<Omit<TreeView.NodeRenameInputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+};
+//#endregion
+export { TreeView$1 as TreeView, createFileTreeCollection, createTreeCollection };

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

@@ -0,0 +1,171 @@
+import { CheckIcon, ChevronRightIcon, IndeterminateIcon } from "../../lib/moduix/icons/ui/Icons.js";
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import TreeView_module_default from "./TreeView.module.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { TreeView, createFileTreeCollection, createTreeCollection } from "@ark-ui/react/tree-view";
+//#region src/components/tree-view/TreeView.tsx
+const TreeViewRoot = forwardRef(function TreeViewRoot({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(TreeView.Root, {
+		ref,
+		"data-slot": "tree-view-root",
+		className: clsx(TreeView_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const TreeViewRootProvider = forwardRef(function TreeViewRootProvider({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(TreeView.RootProvider, {
+		ref,
+		"data-slot": "tree-view-root-provider",
+		className: clsx(TreeView_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const TreeViewLabel = forwardRef(function TreeViewLabel({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(TreeView.Label, {
+		ref,
+		"data-slot": "tree-view-label",
+		className: clsx(TreeView_module_default.label, normalizeClassName(className)),
+		...props
+	});
+});
+const TreeViewTree = forwardRef(function TreeViewTree({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(TreeView.Tree, {
+		ref,
+		"data-slot": "tree-view-tree",
+		className: clsx(TreeView_module_default.tree, normalizeClassName(className)),
+		...props
+	});
+});
+const TreeViewBranch = forwardRef(function TreeViewBranch({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(TreeView.Branch, {
+		ref,
+		"data-slot": "tree-view-branch",
+		className: clsx(TreeView_module_default.branch, normalizeClassName(className)),
+		...props
+	});
+});
+const TreeViewBranchControl = forwardRef(function TreeViewBranchControl({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(TreeView.BranchControl, {
+		ref,
+		"data-slot": "tree-view-branch-control",
+		className: clsx(TreeView_module_default.branchControl, normalizeClassName(className)),
+		...props
+	});
+});
+const TreeViewBranchTrigger = forwardRef(function TreeViewBranchTrigger({ className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx(TreeView.BranchTrigger, {
+		ref,
+		"data-slot": "tree-view-branch-trigger",
+		className: clsx(TreeView_module_default.branchTrigger, normalizeClassName(className)),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, {})
+	});
+});
+const TreeViewBranchIndicator = forwardRef(function TreeViewBranchIndicator({ className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx(TreeView.BranchIndicator, {
+		ref,
+		"data-slot": "tree-view-branch-indicator",
+		className: clsx(TreeView_module_default.branchIndicator, normalizeClassName(className)),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, {})
+	});
+});
+const TreeViewBranchText = forwardRef(function TreeViewBranchText({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(TreeView.BranchText, {
+		ref,
+		"data-slot": "tree-view-branch-text",
+		className: clsx(TreeView_module_default.branchText, normalizeClassName(className)),
+		...props
+	});
+});
+const TreeViewBranchContent = forwardRef(function TreeViewBranchContent({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(TreeView.BranchContent, {
+		ref,
+		"data-slot": "tree-view-branch-content",
+		className: clsx(TreeView_module_default.branchContent, normalizeClassName(className)),
+		...props
+	});
+});
+const TreeViewBranchIndentGuide = forwardRef(function TreeViewBranchIndentGuide({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(TreeView.BranchIndentGuide, {
+		ref,
+		"data-slot": "tree-view-branch-indent-guide",
+		className: clsx(TreeView_module_default.branchIndentGuide, normalizeClassName(className)),
+		...props
+	});
+});
+const TreeViewItem = forwardRef(function TreeViewItem({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(TreeView.Item, {
+		ref,
+		"data-slot": "tree-view-item",
+		className: clsx(TreeView_module_default.item, normalizeClassName(className)),
+		...props
+	});
+});
+const TreeViewItemText = forwardRef(function TreeViewItemText({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(TreeView.ItemText, {
+		ref,
+		"data-slot": "tree-view-item-text",
+		className: clsx(TreeView_module_default.itemText, normalizeClassName(className)),
+		...props
+	});
+});
+const TreeViewItemIndicator = forwardRef(function TreeViewItemIndicator({ className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx(TreeView.ItemIndicator, {
+		ref,
+		"data-slot": "tree-view-item-indicator",
+		className: clsx(TreeView_module_default.itemIndicator, normalizeClassName(className)),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(CheckIcon, {})
+	});
+});
+const TreeViewNodeCheckbox = forwardRef(function TreeViewNodeCheckbox({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(TreeView.NodeCheckbox, {
+		ref,
+		"data-slot": "tree-view-node-checkbox",
+		className: clsx(TreeView_module_default.nodeCheckbox, normalizeClassName(className)),
+		...props
+	});
+});
+function TreeViewNodeCheckboxIndicator({ className, children, indeterminate, ...props }) {
+	return /* @__PURE__ */ jsx(TreeView.NodeCheckboxIndicator, {
+		"data-slot": "tree-view-node-checkbox-indicator",
+		className: clsx(TreeView_module_default.nodeCheckboxIndicator, normalizeClassName(className)),
+		indeterminate: indeterminate ?? /* @__PURE__ */ jsx(IndeterminateIcon, {}),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(CheckIcon, {})
+	});
+}
+const TreeViewNodeRenameInput = forwardRef(function TreeViewNodeRenameInput({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(TreeView.NodeRenameInput, {
+		ref,
+		"data-slot": "tree-view-node-rename-input",
+		className: clsx(TreeView_module_default.nodeRenameInput, normalizeClassName(className)),
+		...props
+	});
+});
+const TreeViewNodeProvider = TreeView.NodeProvider;
+const TreeView$1 = Object.assign(TreeViewRoot, {
+	Root: TreeViewRoot,
+	RootProvider: TreeViewRootProvider,
+	Label: TreeViewLabel,
+	Tree: TreeViewTree,
+	NodeProvider: TreeViewNodeProvider,
+	Branch: TreeViewBranch,
+	BranchControl: TreeViewBranchControl,
+	BranchTrigger: TreeViewBranchTrigger,
+	BranchIndicator: TreeViewBranchIndicator,
+	BranchText: TreeViewBranchText,
+	BranchContent: TreeViewBranchContent,
+	BranchIndentGuide: TreeViewBranchIndentGuide,
+	Item: TreeViewItem,
+	ItemText: TreeViewItemText,
+	ItemIndicator: TreeViewItemIndicator,
+	NodeCheckbox: TreeViewNodeCheckbox,
+	NodeCheckboxIndicator: TreeViewNodeCheckboxIndicator,
+	NodeRenameInput: TreeViewNodeRenameInput
+});
+//#endregion
+export { TreeView$1 as TreeView, createFileTreeCollection, createTreeCollection };

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

@@ -0,0 +1,26 @@
+import './TreeView.css';
+//#region src/components/tree-view/TreeView.module.css
+var TreeView_module_default = {
+	"branch": "A1SkAG_branch",
+	"branchContent": "A1SkAG_branchContent",
+	"branchControl": "A1SkAG_branchControl",
+	"branchIndentGuide": "A1SkAG_branchIndentGuide",
+	"branchIndicator": "A1SkAG_branchIndicator",
+	"branchText": "A1SkAG_branchText",
+	"branchTrigger": "A1SkAG_branchTrigger",
+	"item": "A1SkAG_item",
+	"itemIndicator": "A1SkAG_itemIndicator",
+	"itemText": "A1SkAG_itemText",
+	"label": "A1SkAG_label",
+	"nodeCheckbox": "A1SkAG_nodeCheckbox",
+	"nodeCheckboxIndicator": "A1SkAG_nodeCheckboxIndicator",
+	"nodeRenameInput": "A1SkAG_nodeRenameInput",
+	"root": "A1SkAG_root",
+	"tree": "A1SkAG_tree",
+	"tree-view-fade-in": "A1SkAG_tree-view-fade-in",
+	"tree-view-fade-out": "A1SkAG_tree-view-fade-out",
+	"tree-view-slide-down": "A1SkAG_tree-view-slide-down",
+	"tree-view-slide-up": "A1SkAG_tree-view-slide-up"
+};
+//#endregion
+export { TreeView_module_default as default };

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

@@ -0,0 +1,2 @@
+import { TreeView, createFileTreeCollection, createTreeCollection } from "./TreeView.js";
+export { TreeView, createFileTreeCollection, createTreeCollection };

package/dist/index.d.ts

@@ -0,0 +1,83 @@
+import { CalendarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpDownIcon, ChevronUpIcon, CloseIcon, CopyIcon, EyeClosedIcon, EyeIcon, FileIcon, FlipHorizontalIcon, FolderIcon, FolderOpenIcon, GripIcon, IndeterminateIcon, MaximizeIcon, MinusIcon, PauseIcon, PencilIcon, PipetteIcon, PlayIcon, PlusIcon, PopupArrowIcon, RatingStarIcon, RestartIcon, RotateCcwIcon, RotateCwIcon, ScrubCursorIcon, SeparatorMarkIcon, TrashIcon, UploadIcon, ZoomInIcon, ZoomOutIcon } from "./lib/moduix/icons/ui/Icons.js";
+import { AspectRatio } from "./components/aspect-ratio/AspectRatio.js";
+import { Accordion } from "./components/accordion/Accordion.js";
+import { AngleSlider } from "./components/angle-slider/AngleSlider.js";
+import { Alert } from "./components/alert/Alert.js";
+import { Avatar } from "./components/avatar/Avatar.js";
+import { Badge } from "./components/badge/Badge.js";
+import { Bleed } from "./components/bleed/Bleed.js";
+import { Breadcrumbs } from "./components/breadcrumbs/Breadcrumbs.js";
+import { Button } from "./components/button/Button.js";
+import { Card } from "./components/card/Card.js";
+import { Checkbox } from "./components/checkbox/Checkbox.js";
+import { Clipboard } from "./components/clipboard/Clipboard.js";
+import { CloseButton } from "./components/close-button/CloseButton.js";
+import { Collapsible } from "./components/collapsible/Collapsible.js";
+import { ColorPicker, parseColor } from "./components/color-picker/ColorPicker.js";
+import { Combobox } from "./components/combobox/Combobox.js";
+import { Kbd } from "./components/kbd/Kbd.js";
+import { CommandPalette } from "./components/command-palette/CommandPalette.js";
+import { Container } from "./components/container/Container.js";
+import { DateInput } from "./components/date-input/DateInput.js";
+import { DatePicker, DatePickerRootProps, DatePickerRootProviderProps } from "./components/date-picker/DatePicker.js";
+import { Dialog, DialogRootProps, DialogRootProviderProps } from "./components/dialog/Dialog.js";
+import { Drawer } from "./components/drawer/Drawer.js";
+import { Editable } from "./components/editable/Editable.js";
+import { Empty } from "./components/empty/Empty.js";
+import { Field } from "./components/field/Field.js";
+import { FileUpload } from "./components/file-upload/FileUpload.js";
+import { Fieldset } from "./components/fieldset/Fieldset.js";
+import { FloatingPanel, resizeTriggerAxes } from "./components/floating-panel/FloatingPanel.js";
+import { Heading } from "./components/heading/Heading.js";
+import { Highlight } from "./components/highlight/Highlight.js";
+import { ImageCropper } from "./components/image-cropper/ImageCropper.js";
+import { Input } from "./components/input/Input.js";
+import { InputGroup } from "./components/input-group/InputGroup.js";
+import { Lightbox, LightboxBind, LightboxBindProps, LightboxGallery, LightboxImage, LightboxImageSelectDetails } from "./components/lightbox/Lightbox.js";
+import { List } from "./components/list/List.js";
+import { Listbox } from "./components/listbox/Listbox.js";
+import { Marquee } from "./components/marquee/Marquee.js";
+import { Menu } from "./components/menu/Menu.js";
+import { NativeSelect } from "./components/native-select/NativeSelect.js";
+import { NumberInput } from "./components/number-input/NumberInput.js";
+import { PinInput, usePinInput } from "./components/pin-input/PinInput.js";
+import { Pagination } from "./components/pagination/Pagination.js";
+import { PasswordInput, usePasswordInput } from "./components/password-input/PasswordInput.js";
+import { Popover, usePopover } from "./components/popover/Popover.js";
+import { HoverCard } from "./components/hover-card/HoverCard.js";
+import { ProgressCircular } from "./components/progress-circular/ProgressCircular.js";
+import { ProgressLinear } from "./components/progress-linear/ProgressLinear.js";
+import { QrCode } from "./components/qr-code/QrCode.js";
+import { RadioGroup, RadioGroupItemControlProps, RadioGroupItemControlSize } from "./components/radio-group/RadioGroup.js";
+import { RatingGroup, RatingGroupItemIndicatorProps, RatingGroupRootProps, RatingGroupRootProviderProps, RatingGroupSize } from "./components/rating-group/RatingGroup.js";
+import { ModuixScrollAreaRootProps, ModuixScrollAreaRootProviderProps, ScrollArea } from "./components/scroll-area/ScrollArea.js";
+import { Separator } from "./components/separator/Separator.js";
+import { SegmentGroup } from "./components/segment-group/SegmentGroup.js";
+import { Select } from "./components/select/Select.js";
+import { SignaturePad, useSignaturePad } from "./components/signature-pad/SignaturePad.js";
+import { SimpleGrid } from "./components/simple-grid/SimpleGrid.js";
+import { Slider } from "./components/slider/Slider.js";
+import { Splitter } from "./components/splitter/Splitter.js";
+import { Sidebar, useSidebar } from "./components/sidebar/Sidebar.js";
+import { Carousel } from "./components/carousel/Carousel.js";
+import { Skeleton } from "./components/skeleton/Skeleton.js";
+import { Spinner } from "./components/spinner/Spinner.js";
+import { SplitButton } from "./components/split-button/SplitButton.js";
+import { Stack } from "./components/stack/Stack.js";
+import { Steps } from "./components/steps/Steps.js";
+import { Switch, SwitchRootProps, SwitchRootProviderProps, SwitchSize } from "./components/switch/Switch.js";
+import { Tag } from "./components/tag/Tag.js";
+import { TagsInput } from "./components/tags-input/TagsInput.js";
+import { Table } from "./components/table/Table.js";
+import { Tabs } from "./components/tabs/Tabs.js";
+import { Text } from "./components/text/Text.js";
+import { Textarea } from "./components/textarea/Textarea.js";
+import { Timer } from "./components/timer/Timer.js";
+import { Toast, Toaster, createToaster } from "./components/toast/Toast.js";
+import { Tooltip } from "./components/tooltip/Tooltip.js";
+import { Tour, useTour, waitForElement, waitForElementValue, waitForEvent, waitForPromise } from "./components/tour/Tour.js";
+import { TreeView, createFileTreeCollection, createTreeCollection } from "./components/tree-view/TreeView.js";
+import { Toggle } from "./components/toggle/Toggle.js";
+import { ToggleGroup } from "./components/toggle-group/ToggleGroup.js";
+import { Portal } from "@ark-ui/react/portal";
+export { Accordion, Alert, AngleSlider, AspectRatio, Avatar, Badge, Bleed, Breadcrumbs, Button, CalendarIcon, Card, Carousel, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpDownIcon, ChevronUpIcon, Clipboard, CloseButton, CloseIcon, Collapsible, ColorPicker, Combobox, CommandPalette, Container, CopyIcon, DateInput, DatePicker, type DatePickerRootProps, type DatePickerRootProviderProps, Dialog, type DialogRootProps, type DialogRootProviderProps, Drawer, Editable, Empty, EyeClosedIcon, EyeIcon, Field, Fieldset, FileIcon, FileUpload, FlipHorizontalIcon, FloatingPanel, FolderIcon, FolderOpenIcon, GripIcon, Heading, Highlight, HoverCard, ImageCropper, IndeterminateIcon, Input, InputGroup, Kbd, Lightbox, LightboxBind, type LightboxBindProps, LightboxGallery, LightboxImage, type LightboxImageSelectDetails, List, Listbox, Marquee, MaximizeIcon, Menu, MinusIcon, type ModuixScrollAreaRootProps, type ModuixScrollAreaRootProviderProps, NativeSelect, NumberInput, Pagination, PasswordInput, PauseIcon, PencilIcon, PinInput, PipetteIcon, PlayIcon, PlusIcon, Popover, PopupArrowIcon, Portal, ProgressCircular, ProgressLinear, QrCode, RadioGroup, type RadioGroupItemControlProps, type RadioGroupItemControlSize, RatingGroup, type RatingGroupItemIndicatorProps, type RatingGroupRootProps, type RatingGroupRootProviderProps, type RatingGroupSize, RatingStarIcon, RestartIcon, RotateCcwIcon, RotateCwIcon, ScrollArea, ScrubCursorIcon, SegmentGroup, Select, Separator, SeparatorMarkIcon, Sidebar, SignaturePad, SimpleGrid, Skeleton, Slider, Spinner, SplitButton, Splitter, Stack, Steps, Switch, type SwitchRootProps, type SwitchRootProviderProps, type SwitchSize, Table, Tabs, Tag, TagsInput, Text, Textarea, Timer, Toast, Toaster, Toggle, ToggleGroup, Tooltip, Tour, TrashIcon, TreeView, UploadIcon, ZoomInIcon, ZoomOutIcon, createFileTreeCollection, createToaster, createTreeCollection, parseColor, resizeTriggerAxes, usePasswordInput, usePinInput, usePopover, useSidebar, useSignaturePad, useTour, waitForElement, waitForElementValue, waitForEvent, waitForPromise };