@moduix/solid-tailwind 1.0.0

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

@@ -0,0 +1,296 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { ark } from "@ark-ui/solid/factory";
+import { TreeView, createFileTreeCollection, createTreeCollection, useTreeView, useTreeViewContext, useTreeViewNodeContext } from "@ark-ui/solid/tree-view";
+import { children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+import { CheckIcon, ChevronRightIcon, IndeterminateIcon } from "../../internal/icons/ui/Icons.js";
+const TreeView_TreeViewRoot = function(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return createComponent(TreeView.Root, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "tree-view-root",
+        get ["class"] () {
+            return cn('box-border flex w-80 max-w-full min-w-0 flex-col gap-2 text-foreground data-disabled:opacity-50', local.class);
+        }
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+};
+const TreeView_TreeViewRootProvider = function(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return createComponent(TreeView.RootProvider, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "tree-view-root-provider",
+        get ["class"] () {
+            return cn('box-border flex w-80 max-w-full min-w-0 flex-col gap-2 text-foreground data-disabled:opacity-50', local.class);
+        }
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+};
+function TreeViewLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(TreeView.Label, mergeProps({
+        "data-slot": "tree-view-label",
+        get ["class"] () {
+            return cn('text-sm leading-5 font-medium text-foreground select-none', local.class);
+        }
+    }, others));
+}
+function TreeViewTree(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(TreeView.Tree, mergeProps({
+        "data-slot": "tree-view-tree",
+        get ["class"] () {
+            return cn('flex min-w-0 flex-col gap-1 text-sm leading-5 text-foreground', local.class);
+        }
+    }, others));
+}
+function TreeViewBranch(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(TreeView.Branch, mergeProps({
+        "data-slot": "tree-view-branch",
+        get ["class"] () {
+            return cn('relative flex min-w-0 flex-col gap-1', local.class);
+        }
+    }, others));
+}
+function TreeViewBranchControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(TreeView.BranchControl, mergeProps({
+        "data-slot": "tree-view-branch-control",
+        get ["class"] () {
+            return cn("relative z-0 box-border flex min-h-8 w-full min-w-0 cursor-pointer items-center gap-2 rounded-sm bg-transparent py-1 ps-[calc(0.5rem+((var(--depth,1)-1)*1rem))] pe-2 text-start text-foreground no-underline transition-[color,opacity] duration-200 ease-in-out outline-none select-none [font:inherit] before:pointer-events-none before:absolute before:inset-y-0 before:start-[calc(0.5rem+((var(--depth,1)-1)*1rem))] before:end-0 before:-z-1 before:rounded-sm before:bg-transparent before:ring-1 before:ring-transparent before:transition-[background-color,box-shadow] before:duration-200 before:ease-in-out before:content-[''] before:ring-inset focus-visible:before:ring-ring data-disabled:cursor-default data-disabled:text-muted-foreground data-disabled:opacity-50 data-focus:before:ring-ring data-selected:text-accent-foreground data-selected:before:bg-accent motion-reduce:before:transition-none [@media(hover:hover)]:[&:not([data-disabled]):hover]:text-accent-foreground [@media(hover:hover)]:[&:not([data-disabled]):hover]:before:bg-accent", local.class);
+        }
+    }, others));
+}
+function TreeViewBranchTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(TreeView.BranchTrigger, mergeProps({
+        "data-slot": "tree-view-branch-trigger",
+        get ["class"] () {
+            return cn('inline-flex size-4 shrink-0 items-center justify-center transition-transform duration-200 ease-in-out data-[state=open]:rotate-90 motion-reduce:transition-none [&_svg]:size-3.5', local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? createComponent(ChevronRightIcon, {});
+        }
+    }));
+}
+function TreeViewBranchIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(TreeView.BranchIndicator, mergeProps({
+        "data-slot": "tree-view-branch-indicator",
+        get ["class"] () {
+            return cn('inline-flex size-4 shrink-0 items-center justify-center transition-transform duration-200 ease-in-out data-[state=open]:rotate-90 motion-reduce:transition-none [&_svg]:size-3.5', local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? createComponent(ChevronRightIcon, {});
+        }
+    }));
+}
+function TreeViewBranchText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(TreeView.BranchText, mergeProps({
+        "data-slot": "tree-view-branch-text",
+        get ["class"] () {
+            return cn('inline-flex min-w-0 flex-1 items-center gap-2 overflow-hidden text-ellipsis whitespace-nowrap [&_svg]:size-4 [&_svg]:shrink-0', local.class);
+        }
+    }, others));
+}
+function TreeViewBranchContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(TreeView.BranchContent, mergeProps({
+        "data-slot": "tree-view-branch-content",
+        get ["class"] () {
+            return cn('relative flex min-w-0 flex-col gap-1 overflow-hidden data-[state=closed]:animate-[moduix-collapsible-content-closed_150ms_ease-out] data-[state=open]:animate-[moduix-collapsible-content-open_150ms_ease-out] motion-reduce:animate-none', local.class);
+        }
+    }, others));
+}
+function TreeViewBranchIndentGuide(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(TreeView.BranchIndentGuide, mergeProps({
+        "data-slot": "tree-view-branch-indent-guide",
+        get ["class"] () {
+            return cn('pointer-events-none absolute inset-y-0 start-[calc(1rem+((var(--depth,1)-1)*1rem))] z-1 w-px bg-border', local.class);
+        }
+    }, others));
+}
+function TreeViewItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(TreeView.Item, mergeProps({
+        "data-slot": "tree-view-item",
+        get ["class"] () {
+            return cn("relative z-0 box-border flex min-h-8 w-full min-w-0 cursor-pointer items-center gap-2 rounded-sm bg-transparent py-1 ps-[calc(1rem+((var(--depth,1)-1)*1rem))] pe-2 text-start text-foreground no-underline transition-[color,opacity] duration-200 ease-in-out outline-none select-none [font:inherit] before:pointer-events-none before:absolute before:inset-y-0 before:start-[calc(0.5rem+((var(--depth,1)-1)*1rem))] before:end-0 before:-z-1 before:rounded-sm before:bg-transparent before:ring-1 before:ring-transparent before:transition-[background-color,box-shadow] before:duration-200 before:ease-in-out before:content-[''] before:ring-inset focus-visible:before:ring-ring data-disabled:cursor-default data-disabled:text-muted-foreground data-disabled:opacity-50 data-focus:before:ring-ring data-selected:text-accent-foreground data-selected:before:bg-accent motion-reduce:before:transition-none [@media(hover:hover)]:[&:not([data-disabled]):hover]:text-accent-foreground [@media(hover:hover)]:[&:not([data-disabled]):hover]:before:bg-accent", local.class);
+        }
+    }, others));
+}
+function TreeViewItemText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(TreeView.ItemText, mergeProps({
+        "data-slot": "tree-view-item-text",
+        get ["class"] () {
+            return cn('inline-flex min-w-0 flex-1 items-center gap-2 overflow-hidden text-ellipsis whitespace-nowrap [&_svg]:size-4 [&_svg]:shrink-0', local.class);
+        }
+    }, others));
+}
+function TreeViewItemIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(TreeView.ItemIndicator, mergeProps({
+        "data-slot": "tree-view-item-indicator",
+        get ["class"] () {
+            return cn('inline-flex size-4 shrink-0 items-center justify-center [&_svg]:size-3.5', local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? createComponent(CheckIcon, {});
+        }
+    }));
+}
+function TreeViewNodeCheckbox(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(TreeView.NodeCheckbox, mergeProps({
+        "data-slot": "tree-view-node-checkbox",
+        get ["class"] () {
+            return cn('inline-flex size-4 shrink-0 items-center justify-center rounded-xs border border-border bg-background text-primary-foreground outline-1 outline-offset-1 outline-transparent transition-[background-color,border-color,outline-color] duration-200 ease-in-out focus-visible:outline-ring data-disabled:cursor-default data-disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary motion-reduce:transition-none [&_svg]:size-3', local.class);
+        }
+    }, others));
+}
+function TreeViewNodeCheckboxIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'fallback',
+        'indeterminate'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(ark.span, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "tree-view-node-checkbox-indicator",
+        get ["class"] () {
+            return cn('inline-flex items-center justify-center', local.class);
+        }
+    }, others, {
+        get children () {
+            return createComponent(TreeView.NodeCheckboxIndicator, {
+                get fallback () {
+                    return local.fallback;
+                },
+                get indeterminate () {
+                    return local.indeterminate ?? createComponent(IndeterminateIcon, {});
+                },
+                get children () {
+                    return resolvedChildren() ?? createComponent(CheckIcon, {});
+                }
+            });
+        }
+    }));
+}
+function TreeViewNodeRenameInput(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(TreeView.NodeRenameInput, mergeProps({
+        "data-slot": "tree-view-node-rename-input",
+        get ["class"] () {
+            return cn('box-border min-w-0 flex-1 rounded-xs border border-ring bg-background px-1 py-0 text-foreground outline-1 -outline-offset-1 outline-transparent [font:inherit] focus-visible:outline-ring', local.class);
+        }
+    }, others));
+}
+const TreeViewNodeProvider = TreeView.NodeProvider;
+function TreeViewNodeContent(props) {
+    return props.children({
+        indexPath: props.indexPath,
+        node: props.node,
+        state: useTreeViewNodeContext()
+    });
+}
+function TreeViewNode(props) {
+    return createComponent(TreeViewNodeProvider, {
+        get node () {
+            return props.node;
+        },
+        get indexPath () {
+            return props.indexPath;
+        },
+        get children () {
+            return createComponent(TreeViewNodeContent, props);
+        }
+    });
+}
+const TreeView_TreeView = Object.assign(TreeView_TreeViewRoot, {
+    Root: TreeView_TreeViewRoot,
+    RootProvider: TreeView_TreeViewRootProvider,
+    Context: TreeView.Context,
+    NodeContext: TreeView.NodeContext,
+    Label: TreeViewLabel,
+    Tree: TreeViewTree,
+    Node: TreeViewNode,
+    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
+});
+export { TreeView_TreeView as TreeView, createFileTreeCollection, createTreeCollection, useTreeView, useTreeViewContext, useTreeViewNodeContext };

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

@@ -0,0 +1,173 @@
+import { ark } from "@ark-ui/solid/factory";
+import { TreeView, createFileTreeCollection, createTreeCollection, useTreeView, useTreeViewContext, useTreeViewNodeContext } from "@ark-ui/solid/tree-view";
+import { children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+import { CheckIcon, ChevronRightIcon, IndeterminateIcon } from "../../internal/icons/ui/Icons.jsx";
+const TreeView_TreeViewRoot = function(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return <TreeView.Root asChild={local.asChild} data-slot="tree-view-root" class={cn('box-border flex w-80 max-w-full min-w-0 flex-col gap-2 text-foreground data-disabled:opacity-50', local.class)} {...others}>
+      {local.children}
+    </TreeView.Root>;
+};
+const TreeView_TreeViewRootProvider = function(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return <TreeView.RootProvider asChild={local.asChild} data-slot="tree-view-root-provider" class={cn('box-border flex w-80 max-w-full min-w-0 flex-col gap-2 text-foreground data-disabled:opacity-50', local.class)} {...others}>
+      {local.children}
+    </TreeView.RootProvider>;
+};
+function TreeViewLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <TreeView.Label data-slot="tree-view-label" class={cn('text-sm leading-5 font-medium text-foreground select-none', local.class)} {...others}/>;
+}
+function TreeViewTree(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <TreeView.Tree data-slot="tree-view-tree" class={cn('flex min-w-0 flex-col gap-1 text-sm leading-5 text-foreground', local.class)} {...others}/>;
+}
+function TreeViewBranch(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <TreeView.Branch data-slot="tree-view-branch" class={cn('relative flex min-w-0 flex-col gap-1', local.class)} {...others}/>;
+}
+function TreeViewBranchControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <TreeView.BranchControl data-slot="tree-view-branch-control" class={cn("relative z-0 box-border flex min-h-8 w-full min-w-0 cursor-pointer items-center gap-2 rounded-sm bg-transparent py-1 ps-[calc(0.5rem+((var(--depth,1)-1)*1rem))] pe-2 text-start text-foreground no-underline transition-[color,opacity] duration-200 ease-in-out outline-none select-none [font:inherit] before:pointer-events-none before:absolute before:inset-y-0 before:start-[calc(0.5rem+((var(--depth,1)-1)*1rem))] before:end-0 before:-z-1 before:rounded-sm before:bg-transparent before:ring-1 before:ring-transparent before:transition-[background-color,box-shadow] before:duration-200 before:ease-in-out before:content-[''] before:ring-inset focus-visible:before:ring-ring data-disabled:cursor-default data-disabled:text-muted-foreground data-disabled:opacity-50 data-focus:before:ring-ring data-selected:text-accent-foreground data-selected:before:bg-accent motion-reduce:before:transition-none [@media(hover:hover)]:[&:not([data-disabled]):hover]:text-accent-foreground [@media(hover:hover)]:[&:not([data-disabled]):hover]:before:bg-accent", local.class)} {...others}/>;
+}
+function TreeViewBranchTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <TreeView.BranchTrigger data-slot="tree-view-branch-trigger" class={cn('inline-flex size-4 shrink-0 items-center justify-center transition-transform duration-200 ease-in-out data-[state=open]:rotate-90 motion-reduce:transition-none [&_svg]:size-3.5', local.class)} {...others}>
+      {resolvedChildren() ?? <ChevronRightIcon/>}
+    </TreeView.BranchTrigger>;
+}
+function TreeViewBranchIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <TreeView.BranchIndicator data-slot="tree-view-branch-indicator" class={cn('inline-flex size-4 shrink-0 items-center justify-center transition-transform duration-200 ease-in-out data-[state=open]:rotate-90 motion-reduce:transition-none [&_svg]:size-3.5', local.class)} {...others}>
+      {resolvedChildren() ?? <ChevronRightIcon/>}
+    </TreeView.BranchIndicator>;
+}
+function TreeViewBranchText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <TreeView.BranchText data-slot="tree-view-branch-text" class={cn('inline-flex min-w-0 flex-1 items-center gap-2 overflow-hidden text-ellipsis whitespace-nowrap [&_svg]:size-4 [&_svg]:shrink-0', local.class)} {...others}/>;
+}
+function TreeViewBranchContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <TreeView.BranchContent data-slot="tree-view-branch-content" class={cn('relative flex min-w-0 flex-col gap-1 overflow-hidden data-[state=closed]:animate-[moduix-collapsible-content-closed_150ms_ease-out] data-[state=open]:animate-[moduix-collapsible-content-open_150ms_ease-out] motion-reduce:animate-none', local.class)} {...others}/>;
+}
+function TreeViewBranchIndentGuide(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <TreeView.BranchIndentGuide data-slot="tree-view-branch-indent-guide" class={cn('pointer-events-none absolute inset-y-0 start-[calc(1rem+((var(--depth,1)-1)*1rem))] z-1 w-px bg-border', local.class)} {...others}/>;
+}
+function TreeViewItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <TreeView.Item data-slot="tree-view-item" class={cn("relative z-0 box-border flex min-h-8 w-full min-w-0 cursor-pointer items-center gap-2 rounded-sm bg-transparent py-1 ps-[calc(1rem+((var(--depth,1)-1)*1rem))] pe-2 text-start text-foreground no-underline transition-[color,opacity] duration-200 ease-in-out outline-none select-none [font:inherit] before:pointer-events-none before:absolute before:inset-y-0 before:start-[calc(0.5rem+((var(--depth,1)-1)*1rem))] before:end-0 before:-z-1 before:rounded-sm before:bg-transparent before:ring-1 before:ring-transparent before:transition-[background-color,box-shadow] before:duration-200 before:ease-in-out before:content-[''] before:ring-inset focus-visible:before:ring-ring data-disabled:cursor-default data-disabled:text-muted-foreground data-disabled:opacity-50 data-focus:before:ring-ring data-selected:text-accent-foreground data-selected:before:bg-accent motion-reduce:before:transition-none [@media(hover:hover)]:[&:not([data-disabled]):hover]:text-accent-foreground [@media(hover:hover)]:[&:not([data-disabled]):hover]:before:bg-accent", local.class)} {...others}/>;
+}
+function TreeViewItemText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <TreeView.ItemText data-slot="tree-view-item-text" class={cn('inline-flex min-w-0 flex-1 items-center gap-2 overflow-hidden text-ellipsis whitespace-nowrap [&_svg]:size-4 [&_svg]:shrink-0', local.class)} {...others}/>;
+}
+function TreeViewItemIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <TreeView.ItemIndicator data-slot="tree-view-item-indicator" class={cn('inline-flex size-4 shrink-0 items-center justify-center [&_svg]:size-3.5', local.class)} {...others}>
+      {resolvedChildren() ?? <CheckIcon/>}
+    </TreeView.ItemIndicator>;
+}
+function TreeViewNodeCheckbox(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <TreeView.NodeCheckbox data-slot="tree-view-node-checkbox" class={cn('inline-flex size-4 shrink-0 items-center justify-center rounded-xs border border-border bg-background text-primary-foreground outline-1 outline-offset-1 outline-transparent transition-[background-color,border-color,outline-color] duration-200 ease-in-out focus-visible:outline-ring data-disabled:cursor-default data-disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary motion-reduce:transition-none [&_svg]:size-3', local.class)} {...others}/>;
+}
+function TreeViewNodeCheckboxIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'fallback',
+        'indeterminate'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <ark.span asChild={local.asChild} data-slot="tree-view-node-checkbox-indicator" class={cn('inline-flex items-center justify-center', local.class)} {...others}>
+      <TreeView.NodeCheckboxIndicator fallback={local.fallback} indeterminate={local.indeterminate ?? <IndeterminateIcon/>}>
+        {resolvedChildren() ?? <CheckIcon/>}
+      </TreeView.NodeCheckboxIndicator>
+    </ark.span>;
+}
+function TreeViewNodeRenameInput(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <TreeView.NodeRenameInput data-slot="tree-view-node-rename-input" class={cn('box-border min-w-0 flex-1 rounded-xs border border-ring bg-background px-1 py-0 text-foreground outline-1 -outline-offset-1 outline-transparent [font:inherit] focus-visible:outline-ring', local.class)} {...others}/>;
+}
+const TreeViewNodeProvider = TreeView.NodeProvider;
+function TreeViewNodeContent(props) {
+    return props.children({
+        indexPath: props.indexPath,
+        node: props.node,
+        state: useTreeViewNodeContext()
+    });
+}
+function TreeViewNode(props) {
+    return <TreeViewNodeProvider node={props.node} indexPath={props.indexPath}>
+      <TreeViewNodeContent {...props}/>
+    </TreeViewNodeProvider>;
+}
+const TreeView_TreeView = Object.assign(TreeView_TreeViewRoot, {
+    Root: TreeView_TreeViewRoot,
+    RootProvider: TreeView_TreeViewRootProvider,
+    Context: TreeView.Context,
+    NodeContext: TreeView.NodeContext,
+    Label: TreeViewLabel,
+    Tree: TreeViewTree,
+    Node: TreeViewNode,
+    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
+});
+export { TreeView_TreeView as TreeView, createFileTreeCollection, createTreeCollection, useTreeView, useTreeViewContext, useTreeViewNodeContext };

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

@@ -0,0 +1 @@
+export { TreeView, createFileTreeCollection, createTreeCollection, useTreeView, useTreeViewContext, useTreeViewNodeContext, type TreeViewLoadChildrenDetails, type TreeViewNodeProps, type TreeViewNodeRenderProps, type TreeViewNodeState, type TreeViewNodeProviderProps, } from './TreeView.js';

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

@@ -0,0 +1 @@
+export { TreeView, createFileTreeCollection, createTreeCollection, useTreeView, useTreeViewContext, useTreeViewNodeContext } from "./TreeView.js";

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

@@ -0,0 +1 @@
+export { TreeView, createFileTreeCollection, createTreeCollection, useTreeView, useTreeViewContext, useTreeViewNodeContext } from "./TreeView.jsx";

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

@@ -0,0 +1,15 @@
+import type { HTMLArkProps } from '@ark-ui/solid/factory';
+type TypesetDataProps = {
+    'data-scope'?: string;
+    'data-part'?: string;
+    'data-slot'?: string;
+};
+type TypesetRootProps = HTMLArkProps<'div'> & TypesetDataProps;
+declare function TypesetRoot(props: TypesetRootProps): import("solid-js").JSX.Element;
+type TypesetScrollProps = HTMLArkProps<'div'> & TypesetDataProps;
+declare function TypesetScroll(props: TypesetScrollProps): import("solid-js").JSX.Element;
+declare const Typeset: typeof TypesetRoot & {
+    Root: typeof TypesetRoot;
+    Scroll: typeof TypesetScroll;
+};
+export { Typeset };

package/dist/components/typeset/Typeset.js

@@ -0,0 +1,68 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { ark } from "@ark-ui/solid/factory";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+import Typeset_module from "./Typeset.module.js";
+function TypesetRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'data-scope',
+        'data-part',
+        'data-slot'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "typeset",
+        "data-part": "root",
+        "data-slot": "typeset",
+        get ["class"] () {
+            return cn(Typeset_module.root, local.class);
+        }
+    }));
+}
+function TypesetScroll(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'aria-labelledby',
+        'asChild',
+        'class',
+        'data-scope',
+        'data-part',
+        'data-slot',
+        'role',
+        'tabIndex'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        get ["aria-label"] () {
+            return local['aria-label'];
+        },
+        get ["aria-labelledby"] () {
+            return local['aria-labelledby'];
+        },
+        "data-scope": "typeset",
+        "data-part": "scroll",
+        "data-slot": "typeset-scroll",
+        get ["class"] () {
+            return cn(Typeset_module.scroll, local.class);
+        },
+        get role () {
+            return local.role ?? (local['aria-label'] || local['aria-labelledby'] ? 'region' : void 0);
+        },
+        get tabIndex () {
+            return local.tabIndex ?? 0;
+        }
+    }));
+}
+const Typeset = Object.assign(TypesetRoot, {
+    Root: TypesetRoot,
+    Scroll: TypesetScroll
+});
+export { Typeset };

package/dist/components/typeset/Typeset.jsx

@@ -0,0 +1,33 @@
+import { ark } from "@ark-ui/solid/factory";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+import Typeset_module from "./Typeset.module.jsx";
+function TypesetRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'data-scope',
+        'data-part',
+        'data-slot'
+    ]);
+    return <ark.div asChild={local.asChild} {...others} data-scope="typeset" data-part="root" data-slot="typeset" class={cn(Typeset_module.root, local.class)}/>;
+}
+function TypesetScroll(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'aria-labelledby',
+        'asChild',
+        'class',
+        'data-scope',
+        'data-part',
+        'data-slot',
+        'role',
+        'tabIndex'
+    ]);
+    return <ark.div asChild={local.asChild} {...others} aria-label={local['aria-label']} aria-labelledby={local['aria-labelledby']} data-scope="typeset" data-part="scroll" data-slot="typeset-scroll" class={cn(Typeset_module.scroll, local.class)} role={local.role ?? (local['aria-label'] || local['aria-labelledby'] ? 'region' : void 0)} tabIndex={local.tabIndex ?? 0}/>;
+}
+const Typeset = Object.assign(TypesetRoot, {
+    Root: TypesetRoot,
+    Scroll: TypesetScroll
+});
+export { Typeset };

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

@@ -0,0 +1,6 @@
+import "./Typeset_module.css";
+const Typeset_module = {
+    root: "root-DaHOOi",
+    scroll: "scroll-ZsvXUQ"
+};
+export default Typeset_module;

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

@@ -0,0 +1,6 @@
+import "./Typeset_module.css";
+const Typeset_module = {
+    root: "root-DaHOOi",
+    scroll: "scroll-ZsvXUQ"
+};
+export default Typeset_module;