4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T268c,'use client'; import { TreeView as TreeViewPrimitive, createFileTreeCollection, createTreeCollection, type TreeNode, type TreeViewLoadChildrenDetails, type TreeViewNodeProviderProps, type TreeViewNodeState, type TreeViewRootComponent, type TreeViewRootProps, type TreeViewRootProviderComponent, type TreeViewRootProviderProps, useTreeView, useTreeViewContext, useTreeViewNodeContext, } from '@ark-ui/react/tree-view'; import { clsx } from 'clsx'; import type { ComponentProps, ComponentRef, ForwardedRef, ReactNode } from 'react'; import { forwardRef } from 'react'; import { CheckIcon, ChevronRightIcon, IndeterminateIcon } from '@/lib/moduix/icons/ui'; import styles from './TreeView.module.css'; const TreeViewRoot = forwardRef(function TreeViewRoot( { className, ...props }: TreeViewRootProps, ref: ForwardedRef, ) { return ( ); }) as TreeViewRootComponent; const TreeViewRootProvider = forwardRef(function TreeViewRootProvider( { className, ...props }: TreeViewRootProviderProps, ref: ForwardedRef, ) { return ( ); }) as TreeViewRootProviderComponent; const TreeViewLabel = forwardRef< ComponentRef, ComponentProps >(function TreeViewLabel({ className, ...props }, ref) { return ( ); }); const TreeViewTree = forwardRef< ComponentRef, ComponentProps >(function TreeViewTree({ className, ...props }, ref) { return ( ); }); const TreeViewBranch = forwardRef< ComponentRef, ComponentProps >(function TreeViewBranch({ className, ...props }, ref) { return ( ); }); const TreeViewBranchControl = forwardRef< ComponentRef, ComponentProps >(function TreeViewBranchControl({ className, ...props }, ref) { return ( ); }); const TreeViewBranchTrigger = forwardRef< ComponentRef, ComponentProps >(function TreeViewBranchTrigger({ className, children, ...props }, ref) { return ( {children ?? } ); }); const TreeViewBranchIndicator = forwardRef< ComponentRef, ComponentProps >(function TreeViewBranchIndicator({ className, children, ...props }, ref) { return ( {children ?? } ); }); const TreeViewBranchText = forwardRef< ComponentRef, ComponentProps >(function TreeViewBranchText({ className, ...props }, ref) { return ( ); }); const TreeViewBranchContent = forwardRef< ComponentRef, ComponentProps >(function TreeViewBranchContent({ className, ...props }, ref) { return ( ); }); const TreeViewBranchIndentGuide = forwardRef< ComponentRef, ComponentProps >(function TreeViewBranchIndentGuide({ className, ...props }, ref) { return ( ); }); const TreeViewItem = forwardRef< ComponentRef, ComponentProps >(function TreeViewItem({ className, ...props }, ref) { return ( ); }); const TreeViewItemText = forwardRef< ComponentRef, ComponentProps >(function TreeViewItemText({ className, ...props }, ref) { return ( ); }); const TreeViewItemIndicator = forwardRef< ComponentRef, ComponentProps >(function TreeViewItemIndicator({ className, children, ...props }, ref) { return ( {children ?? } ); }); const TreeViewNodeCheckbox = forwardRef< ComponentRef, ComponentProps >(function TreeViewNodeCheckbox({ className, ...props }, ref) { return ( ); }); function TreeViewNodeCheckboxIndicator({ className, children, indeterminate, fallback, ...props }: ComponentProps) { return ( } > {children ?? } ); } const TreeViewNodeRenameInput = forwardRef< ComponentRef, ComponentProps >(function TreeViewNodeRenameInput({ className, ...props }, ref) { return ( ); }); const TreeViewNodeProvider = TreeViewPrimitive.NodeProvider; type TreeViewNodeRenderProps = { indexPath: number[]; node: T; state: TreeViewNodeState; }; type TreeViewNodeProps = { children: (props: TreeViewNodeRenderProps) => ReactNode; indexPath: number[]; node: T; }; function TreeViewNodeContent({ children, indexPath, node, }: TreeViewNodeProps) { return children({ indexPath, node, state: useTreeViewNodeContext() }); } function TreeViewNode({ children, indexPath, node }: TreeViewNodeProps) { return ( {children} ); } const TreeView = Object.assign(TreeViewRoot, { Root: TreeViewRoot, RootProvider: TreeViewRootProvider, Context: TreeViewPrimitive.Context, NodeContext: TreeViewPrimitive.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, createFileTreeCollection, createTreeCollection, useTreeView, useTreeViewContext, useTreeViewNodeContext, type TreeViewLoadChildrenDetails, type TreeViewNodeProps, type TreeViewNodeRenderProps, type TreeViewNodeState, type TreeViewNodeProviderProps, };52:T2d5c,@layer moduix.components { .root { box-sizing: border-box; display: flex; width: var(--moduix-tree-view-width, 20rem); max-width: var(--moduix-tree-view-max-width, 100%); min-width: 0; flex-direction: column; gap: var(--moduix-tree-view-root-gap, var(--moduix-spacing-2)); color: var(--moduix-tree-view-color, var(--moduix-color-foreground)); &[data-disabled] { opacity: var(--moduix-tree-view-disabled-opacity, var(--moduix-opacity-disabled)); } } .label { 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)); user-select: none; } .tree { display: flex; min-width: 0; flex-direction: column; gap: var(--moduix-tree-view-row-gap, var(--moduix-spacing-1)); 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)); } .branch { position: relative; min-width: 0; display: flex; flex-direction: column; gap: var(--moduix-tree-view-row-gap, var(--moduix-spacing-1)); } .branchControl, .item { position: relative; z-index: 0; box-sizing: border-box; display: flex; 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)); outline: none; padding-block: var(--moduix-tree-view-item-padding-y, var(--moduix-spacing-1)); padding-inline-end: var(--moduix-tree-view-item-padding-x, var(--moduix-spacing-2)); 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)) ); color: var( --moduix-tree-view-item-color, var(--moduix-tree-view-color, var(--moduix-color-foreground)) ); cursor: pointer; font: inherit; text-align: start; text-decoration: none; transition: color var(--moduix-tree-view-transition, var(--moduix-transition-default)), opacity var(--moduix-tree-view-transition, var(--moduix-transition-default)); user-select: none; &::before { position: absolute; z-index: -1; inset-block: 0; inset-inline-end: 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)) ); 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)); } @media (hover: hover) { &:not([data-disabled]):hover { color: var(--moduix-tree-view-item-hover-color, var(--moduix-color-accent-foreground)); &::before { background-color: var(--moduix-tree-view-item-hover-bg, var(--moduix-color-accent)); } } } &:focus-visible, &[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)); } } &[data-selected] { color: var(--moduix-tree-view-item-selected-color, var(--moduix-color-accent-foreground)); &::before { background-color: var(--moduix-tree-view-item-selected-bg, var(--moduix-color-accent)); } } &[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 { 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, .branchIndicator, .itemIndicator { display: inline-flex; 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)); align-items: center; justify-content: center; color: var(--moduix-tree-view-indicator-color, currentColor); & 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, .branchIndicator { transition: transform var(--moduix-tree-view-transition, var(--moduix-transition-default)); &[data-state='open'] { transform: rotate(90deg); } } .branchText, .itemText { display: inline-flex; min-width: 0; flex: 1; align-items: center; gap: var(--moduix-tree-view-item-text-gap, var(--moduix-spacing-2)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; & 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 { position: relative; display: flex; min-width: 0; flex-direction: column; gap: var(--moduix-tree-view-row-gap, var(--moduix-spacing-1)); overflow: hidden; &[data-state='open'] { animation: tree-view-slide-down var(--moduix-tree-view-content-transition-duration, 150ms) ease-out, tree-view-fade-in var(--moduix-tree-view-content-transition-duration, 150ms) ease-out; } &[data-state='closed'] { animation: tree-view-slide-up var(--moduix-tree-view-content-transition-duration, 150ms) ease-out, tree-view-fade-out var(--moduix-tree-view-content-transition-duration, 150ms) ease-out; } @media (prefers-reduced-motion: reduce) { animation: none; } } .branchIndentGuide { position: absolute; z-index: 1; top: 0; bottom: 0; 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; 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 { box-sizing: border-box; display: inline-flex; 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)); align-items: center; justify-content: center; 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)); &[data-state='checked'], &[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)); } &:focus-visible { outline-color: var(--moduix-tree-view-focus-ring-color, var(--moduix-color-ring)); } &[data-disabled] { cursor: default; opacity: var(--moduix-tree-view-disabled-opacity, var(--moduix-opacity-disabled)); } & 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 { display: inline-flex; align-items: center; justify-content: center; } .nodeRenameInput { box-sizing: border-box; min-width: 0; flex: 1; 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)); 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 ); &:focus-visible { outline-color: var(--moduix-tree-view-focus-ring-color, var(--moduix-color-ring)); } } @keyframes tree-view-slide-down { from { height: 0; } to { height: var(--height); } } @keyframes tree-view-slide-up { from { height: var(--height); } to { height: 0; } } @keyframes tree-view-fade-in { from { opacity: 0.01; } to { opacity: 1; } } @keyframes tree-view-fade-out { from { opacity: 1; } to { opacity: 0.01; } } }4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@ark-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40ark-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@ark-ui/react"}]]}]}],["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}]]}],["$","$L4f",null,{"namespace":"@moduix-react","registryDependencies":["@moduix-react/foundation","@moduix-react/icons"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/components/tree-view/TreeView.tsx","content":"$51","type":"registry:component","target":"@components/ui/tree-view/TreeView.tsx"},{"path":"src/components/tree-view/TreeView.module.css","content":"$52","type":"registry:file","target":"@components/ui/tree-view/TreeView.module.css"},{"path":"src/components/tree-view/index.ts","content":"export * from './TreeView.js';","type":"registry:component","target":"@components/ui/tree-view/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]