50: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"] 51: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"] 52:T8789,"use client" import * as React from "react" import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible" import { mergeProps } from "@base-ui/react/merge-props" import { useRender } from "@base-ui/react/use-render" import { IconChevronRight } from "@tabler/icons-react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "cn" import { Checkbox } from "@/components/ui/checkbox" const treeVariants = cva( "relative flex w-full min-w-0 flex-col text-sm text-foreground [--tree-chevron:--spacing(4)] [--tree-indent:calc(var(--tree-chevron)+var(--tree-gap))]", { variants: { variant: { default: "", lines: "", connectors: "", }, size: { default: "[--tree-gap:--spacing(1.5)] [--tree-row-height:--spacing(8)] [--tree-row-px:--spacing(2)] pointer-coarse:[--tree-row-height:--spacing(10)]", sm: "[--tree-gap:--spacing(1)] [--tree-row-height:--spacing(7)] [--tree-row-px:--spacing(1.5)] pointer-coarse:[--tree-row-height:--spacing(9)]", }, }, defaultVariants: { variant: "default", size: "default", }, } ) const treeItemVariants = cva( "relative flex min-w-0 flex-col [&:has(>[data-slot=tree-group])>[data-slot=tree-item-label]>[data-slot=tree-item-indicator]>svg]:visible", { variants: { variant: { default: "", lines: "", connectors: "in-data-[slot=tree-group-inner]:before:pointer-events-none in-data-[slot=tree-group-inner]:before:absolute in-data-[slot=tree-group-inner]:before:inset-y-0 in-data-[slot=tree-group-inner]:before:start-[calc(var(--tree-row-px)+var(--tree-chevron)/2-var(--tree-indent))] in-data-[slot=tree-group-inner]:before:border-s in-data-[slot=tree-group-inner]:before:border-border in-data-[slot=tree-group-inner]:after:pointer-events-none in-data-[slot=tree-group-inner]:after:absolute in-data-[slot=tree-group-inner]:after:start-[calc(var(--tree-row-px)+var(--tree-chevron)/2-var(--tree-indent))] in-data-[slot=tree-group-inner]:after:top-0 in-data-[slot=tree-group-inner]:after:h-[calc(var(--tree-row-height)/2)] in-data-[slot=tree-group-inner]:after:w-[calc(var(--tree-indent)-var(--tree-chevron)/2+var(--tree-chevron)+var(--tree-gap)-var(--spacing))] in-data-[slot=tree-group-inner]:after:rounded-es-sm in-data-[slot=tree-group-inner]:after:border-s in-data-[slot=tree-group-inner]:after:border-b in-data-[slot=tree-group-inner]:after:border-border in-data-[slot=tree-group-inner]:last:before:hidden in-data-[slot=tree-group-inner]:has-[>[data-slot=tree-group]]:after:w-[calc(var(--tree-indent)-var(--tree-chevron)/2+var(--spacing)*0.5)]", }, }, defaultVariants: { variant: "default", }, } ) const treeGroupVariants = cva( "relative flex min-w-0 flex-col ps-(--tree-indent)", { variants: { variant: { default: "", lines: "before:pointer-events-none before:absolute before:inset-y-0 before:start-[calc(var(--tree-row-px)+var(--tree-chevron)/2)] before:border-s before:border-border before:transition-[border-color] before:duration-150 has-[>[data-slot=tree-item]>[data-slot=tree-item-label]:focus-visible]:before:border-muted-foreground/60 has-[>[data-slot=tree-item]>[data-slot=tree-item-label][data-selected]]:before:border-muted-foreground/60", connectors: "", }, }, defaultVariants: { variant: "default", }, } ) type TreeVariant = NonNullable["variant"]> type TreeSize = NonNullable["size"]> type TreeSelectionMode = "none" | "single" | "multiple" type TreeCheckState = "checked" | "unchecked" | "mixed" type TreeNode = { parent: string | null disabled: boolean onExpandedChange: (expanded: boolean) => void } type TreeRegistry = ReturnType function createTreeRegistry() { const nodes = new Map() const listeners = new Set<() => void>() let version = 0 const emit = () => { version += 1 for (const listener of listeners) { listener() } } return { nodes, register(value: string, node: TreeNode) { nodes.set(value, node) emit() return () => { if (nodes.get(value) === node) { nodes.delete(value) emit() } } }, subscribe(listener: () => void) { listeners.add(listener) return () => { listeners.delete(listener) } }, getVersion: () => version, } } function getChildren(nodes: Map) { const children = new Map() for (const [value, node] of nodes) { const parent = node.parent !== null && nodes.has(node.parent) ? node.parent : null const list = children.get(parent) if (list) { list.push(value) } else { children.set(parent, [value]) } } return children } function getCheckStates( children: Map, checked: Set ) { const states = new Map() const visit = (value: string, inherited: boolean): TreeCheckState => { states.set(value, "unchecked") const self = inherited || checked.has(value) const kids = children.get(value) let state: TreeCheckState = self ? "checked" : "unchecked" if (kids?.length) { let all = true let none = true for (const kid of kids) { const kidState = visit(kid, self) if (kidState !== "checked") { all = false } if (kidState !== "unchecked") { none = false } } state = all ? "checked" : none ? "unchecked" : "mixed" } states.set(value, state) return state } for (const root of children.get(null) ?? []) { visit(root, false) } return states } function toggleChecked( value: string, nodes: Map, children: Map, states: Map ) { const isLeaf = (item: string) => !children.get(item)?.length const leaves: string[] = [] const collect = (item: string) => { if (nodes.get(item)?.disabled) { return } if (isLeaf(item)) { leaves.push(item) } for (const kid of children.get(item) ?? []) { collect(kid) } } collect(value) if (leaves.length === 0) { return null } const target = leaves.some((leaf) => states.get(leaf) !== "checked") const next = new Set() for (const [item, state] of states) { if (state === "checked" && isLeaf(item)) { next.add(item) } } for (const leaf of leaves) { if (target) { next.add(leaf) } else { next.delete(leaf) } } const result: string[] = [] for (const [item, state] of getCheckStates(children, next)) { if (state === "checked") { result.push(item) } } return result } type ClassName = string | ((state: State) => string | undefined) | undefined function mergeClassName(base: string, className: ClassName) { return typeof className === "function" ? (state: State) => cn(base, className(state)) : cn(base, className) } function useLatest(value: T) { const ref = React.useRef(value) React.useLayoutEffect(() => { ref.current = value }) return ref } function useControllableValues( value: string[] | undefined, defaultValue: string[] | undefined, onChange: ((values: string[]) => void) | undefined ) { const [internal, setInternal] = React.useState( () => defaultValue ?? [] ) const controlled = value !== undefined const current = controlled ? value : internal const latest = React.useRef(current) const onChangeRef = useLatest(onChange) React.useLayoutEffect(() => { latest.current = current }, [current]) const set = React.useCallback( (update: (previous: string[]) => string[]) => { const previous = latest.current const next = update(previous) if ( next.length === previous.length && next.every((item, index) => item === previous[index]) ) { return } latest.current = next if (!controlled) { setInternal(next) } onChangeRef.current?.(next) }, [controlled, onChangeRef] ) return [current, set, latest] as const } type TreeContextValue = { variant: TreeVariant size: TreeSize selectionMode: TreeSelectionMode checkboxes: boolean disabled: boolean hiddenUntilFound: boolean expanded: Set selected: Set checkStates: Map activeValue: string | null registry: TreeRegistry setExpanded: (value: string, expanded: boolean) => void activate: ( value: string, options: { range?: boolean; toggle?: boolean; expand?: boolean } ) => void toggleExpanded: (value: string) => void toggleCheck: (value: string) => void setActiveValue: (value: string) => void } const TreeContext = React.createContext(null) function useTreeContext(part: string) { const context = React.useContext(TreeContext) if (!context) { throw new Error(`${part} must be used within .`) } return context } type TreeItemContextValue = { value: string depth: number disabled: boolean expanded: boolean hasGroup: boolean groupId: string registerGroup: () => () => void } const TreeItemContext = React.createContext(null) function useTreeItemContext(part: string) { const context = React.useContext(TreeItemContext) if (!context) { throw new Error(`${part} must be used within .`) } return context } const rowSelector = '[data-slot="tree-item-label"]' function ownsRow(root: HTMLElement, row: Element) { return row.closest('[data-slot="tree"]') === root } function isRowVisible(root: HTMLElement, row: HTMLElement) { let item = row.parentElement?.parentElement?.closest( '[data-slot="tree-item"]' ) while (item && root.contains(item)) { if (!item.hasAttribute("data-open")) { return false } item = item.parentElement?.closest('[data-slot="tree-item"]') } return true } function getRows(root: HTMLElement) { return Array.from(root.querySelectorAll(rowSelector)).filter( (row) => ownsRow(root, row) && row.getAttribute("aria-disabled") !== "true" && isRowVisible(root, row) ) } function getRowValue(row: HTMLElement) { return row.dataset.value ?? "" } function getRowGroup(row: HTMLElement) { return row.parentElement?.querySelector( ':scope > [data-slot="tree-group"]' ) } function getRowText(row: HTMLElement) { return ( row.querySelector('[data-slot="tree-item-text"]')?.textContent ?? row.textContent ?? "" ) .trim() .toLowerCase() } function isRtl(root: HTMLElement) { return ( root.closest("[dir]")?.getAttribute("dir") === "rtl" || getComputedStyle(root).direction === "rtl" ) } function focusRow(row: HTMLElement | undefined) { if (!row) { return false } row.focus() row.scrollIntoView?.({ block: "nearest" }) return true } type TreeProps = useRender.ComponentProps<"div"> & { variant?: TreeVariant size?: TreeSize selectionMode?: TreeSelectionMode selectedValues?: string[] defaultSelectedValues?: string[] onSelectedValuesChange?: (values: string[]) => void expandedValues?: string[] defaultExpandedValues?: string[] onExpandedValuesChange?: (values: string[]) => void checkboxes?: boolean checkedValues?: string[] defaultCheckedValues?: string[] onCheckedValuesChange?: (values: string[]) => void disabled?: boolean hiddenUntilFound?: boolean } function Tree({ className, render, variant = "default", size = "default", selectionMode = "single", selectedValues, defaultSelectedValues, onSelectedValuesChange, expandedValues, defaultExpandedValues, onExpandedValuesChange, checkboxes = false, checkedValues, defaultCheckedValues, onCheckedValuesChange, disabled = false, hiddenUntilFound = true, onKeyDown, ref, ...props }: TreeProps) { const resolvedVariant = variant ?? "default" const resolvedSize = size ?? "default" const [registry] = React.useState(createTreeRegistry) const version = React.useSyncExternalStore( registry.subscribe, registry.getVersion, registry.getVersion ) const rootRef = React.useRef(null) const anchorRef = React.useRef(null) const typeaheadRef = React.useRef({ buffer: "", timer: 0 }) const [activeValue, setActiveValue] = React.useState(null) const [expandedList, setExpandedList, latestExpanded] = useControllableValues( expandedValues, defaultExpandedValues, onExpandedValuesChange ) const [selectedList, setSelectedList] = useControllableValues( selectedValues, defaultSelectedValues, onSelectedValuesChange ) const [checkedList, setCheckedList] = useControllableValues( checkedValues, defaultCheckedValues, onCheckedValuesChange ) const expanded = React.useMemo(() => new Set(expandedList), [expandedList]) const selected = React.useMemo(() => new Set(selectedList), [selectedList]) const children = React.useMemo( () => getChildren(registry.nodes), [registry, version] ) const checkStates = React.useMemo( () => getCheckStates(children, new Set(checkedList)), [children, checkedList] ) const latest = useLatest({ children, checkStates, selectionMode, disabled }) const commitExpanded = React.useCallback( (update: (previous: string[]) => string[]) => { const before = new Set(latestExpanded.current) setExpandedList(update) const after = new Set(latestExpanded.current) for (const value of new Set([...before, ...after])) { if (before.has(value) !== after.has(value)) { registry.nodes.get(value)?.onExpandedChange(after.has(value)) } } }, [latestExpanded, registry, setExpandedList] ) const setExpanded = React.useCallback( (value: string, open: boolean) => { commitExpanded((previous) => open ? previous.includes(value) ? previous : [...previous, value] : previous.filter((item) => item !== value) ) }, [commitExpanded] ) const toggleExpanded = React.useCallback( (value: string) => { setExpanded(value, !latestExpanded.current.includes(value)) }, [latestExpanded, setExpanded] ) const selectRange = React.useCallback( (to: string) => { const root = rootRef.current const from = anchorRef.current ?? to if (!root) { return } const values = getRows(root).map(getRowValue) const start = values.indexOf(from) const end = values.indexOf(to) if (start === -1 || end === -1) { setSelectedList(() => [to]) return } setSelectedList(() => values.slice(Math.min(start, end), Math.max(start, end) + 1) ) }, [setSelectedList] ) const activate = React.useCallback( (value, { range = false, toggle = false, expand = true }) => { const { selectionMode: mode } = latest.current if (mode === "single") { anchorRef.current = value setSelectedList(() => [value]) } else if (mode === "multiple") { if (range) { selectRange(value) } else if (toggle) { anchorRef.current = value setSelectedList((previous) => previous.includes(value) ? previous.filter((item) => item !== value) : [...previous, value] ) } else { anchorRef.current = value setSelectedList(() => [value]) } } if (expand && !range && !toggle) { const root = rootRef.current const row = root ? getRows(root).find((item) => getRowValue(item) === value) : undefined if (row && getRowGroup(row)) { toggleExpanded(value) } } }, [latest, selectRange, setSelectedList, toggleExpanded] ) const toggleCheck = React.useCallback( (value: string) => { const { children: kids, checkStates: states } = latest.current const next = toggleChecked(value, registry.nodes, kids, states) if (next) { setCheckedList(() => next) } }, [latest, registry, setCheckedList] ) React.useLayoutEffect(() => { const root = rootRef.current if (!root) { return } const rows = getRows(root) if (rows.length === 0) { return } if (rows.some((row) => getRowValue(row) === activeValue)) { return } let fallback: HTMLElement | undefined let parent = activeValue !== null ? (registry.nodes.get(activeValue)?.parent ?? null) : null while (parent !== null && !fallback) { const value = parent fallback = rows.find((row) => getRowValue(row) === value) parent = registry.nodes.get(value)?.parent ?? null } fallback ??= rows.find( (row) => row.hasAttribute("data-selected") || row.hasAttribute("data-checked") ) ?? rows[0] const focused = root.ownerDocument.activeElement if ( focused instanceof HTMLElement && focused.matches(rowSelector) && ownsRow(root, focused) && !rows.includes(focused) ) { fallback.focus({ preventScroll: true }) } setActiveValue(getRowValue(fallback)) }, [activeValue, expanded, registry, version, disabled]) React.useEffect(() => { const typeahead = typeaheadRef.current return () => window.clearTimeout(typeahead.timer) }, []) const handleKeyDown = (event: React.KeyboardEvent) => { const root = event.currentTarget const row = event.target as HTMLElement if ( !row.matches?.(rowSelector) || !ownsRow(root, row) || row.getAttribute("aria-disabled") === "true" ) { return } const rtl = isRtl(root) const key = event.key === "ArrowRight" ? rtl ? "ArrowLeft" : "ArrowRight" : event.key === "ArrowLeft" ? rtl ? "ArrowRight" : "ArrowLeft" : event.key const value = getRowValue(row) const rows = getRows(root) const index = rows.indexOf(row) const group = getRowGroup(row) const isExpanded = latestExpanded.current.includes(value) const modifier = event.altKey || event.ctrlKey || event.metaKey const { selectionMode: mode } = latest.current const multiple = mode === "multiple" && !checkboxes const move = (target: HTMLElement | undefined) => { event.preventDefault() if (!target) { return } focusRow(target) if (event.shiftKey && multiple) { anchorRef.current ??= value selectRange(getRowValue(target)) } } switch (key) { case "ArrowDown": if (!modifier) { move(rows[index + 1]) } return case "ArrowUp": if (!modifier) { move(rows[index - 1]) } return case "Home": if (!event.altKey && !event.metaKey) { move(rows[0]) } return case "End": if (!event.altKey && !event.metaKey) { move(rows[rows.length - 1]) } return case "ArrowRight": { if (modifier || event.shiftKey || !group) { return } event.preventDefault() if (!isExpanded) { setExpanded(value, true) return } const next = rows[index + 1] if (next && group.contains(next)) { focusRow(next) } return } case "ArrowLeft": { if (modifier || event.shiftKey) { return } event.preventDefault() if (group && isExpanded) { setExpanded(value, false) return } const parentRow = row.parentElement?.parentElement ?.closest('[data-slot="tree-item"]') ?.querySelector(`:scope > ${rowSelector}`) if (parentRow && ownsRow(root, parentRow)) { focusRow(parentRow) } return } case "Enter": if (modifier || event.shiftKey || row.tagName === "A") { return } event.preventDefault() if (checkboxes) { toggleCheck(value) } else { activate(value, {}) } return case " ": if (modifier) { return } event.preventDefault() if (checkboxes) { toggleCheck(value) } else if (mode === "multiple") { activate(value, { toggle: !event.shiftKey, range: event.shiftKey, expand: false, }) } else if (mode === "single") { activate(value, { expand: false }) } else if (group) { toggleExpanded(value) } return case "*": { event.preventDefault() const parentItem = row.parentElement?.parentElement const siblings = rows.filter( (item) => item.parentElement?.parentElement === parentItem ) commitExpanded((previous) => { const next = new Set(previous) for (const sibling of siblings) { if (getRowGroup(sibling)) { next.add(getRowValue(sibling)) } } return [...next] }) return } default: break } if ( multiple && (event.ctrlKey || event.metaKey) && !event.altKey && event.key.toLowerCase() === "a" ) { event.preventDefault() setSelectedList(() => rows.map(getRowValue)) return } if (event.key.length === 1 && !modifier && event.key !== " ") { const typeahead = typeaheadRef.current window.clearTimeout(typeahead.timer) typeahead.buffer += event.key.toLowerCase() typeahead.timer = window.setTimeout(() => { typeahead.buffer = "" }, 500) const buffer = typeahead.buffer const repeated = buffer.split("").every((char) => char === buffer[0]) const search = repeated ? buffer[0] : buffer const ordered = [ ...rows.slice(index + (repeated || buffer.length === 1 ? 1 : 0)), ...rows.slice(0, index + (repeated || buffer.length === 1 ? 1 : 0)), ] const match = ordered.find((item) => getRowText(item).startsWith(search)) if (match) { event.preventDefault() focusRow(match) } } } const setRootRef = React.useCallback( (node: HTMLElement | null) => { rootRef.current = node if (typeof ref === "function") { ref(node as HTMLDivElement) } else if (ref) { ref.current = node as HTMLDivElement } }, [ref] ) const context = React.useMemo( () => ({ variant: resolvedVariant, size: resolvedSize, selectionMode, checkboxes, disabled, hiddenUntilFound, expanded, selected, checkStates, activeValue, registry, setExpanded, activate, toggleExpanded, toggleCheck, setActiveValue, }), [ resolvedVariant, resolvedSize, selectionMode, checkboxes, disabled, hiddenUntilFound, expanded, selected, checkStates, activeValue, registry, setExpanded, activate, toggleExpanded, toggleCheck, ] ) const element = useRender({ defaultTagName: "div", render, ref: setRootRef, props: mergeProps<"div">( { role: "tree", "aria-multiselectable": selectionMode === "multiple" && !checkboxes ? true : undefined, "aria-disabled": disabled || undefined, className: cn( treeVariants({ variant: resolvedVariant, size: resolvedSize }), className ), onKeyDown: (event: React.KeyboardEvent) => { onKeyDown?.(event) if (!event.defaultPrevented) { handleKeyDown(event) } }, }, props, { "data-slot": "tree", "data-variant": resolvedVariant, "data-size": resolvedSize, } as Record ), }) return {element} } type TreeItemProps = Omit< CollapsiblePrimitive.Root.Props, "open" | "defaultOpen" | "onOpenChange" > & { value: string onExpandedChange?: (expanded: boolean) => void } function TreeItem({ value, disabled: disabledProp = false, onExpandedChange, className, ...props }: TreeItemProps) { const tree = useTreeContext("TreeItem") const parent = React.useContext(TreeItemContext) const disabled = tree.disabled || (parent?.disabled ?? false) || disabledProp const expanded = tree.expanded.has(value) const depth = parent ? parent.depth + 1 : 1 const parentValue = parent?.value ?? null const groupId = React.useId() const [hasGroup, setHasGroup] = React.useState(false) const onExpandedChangeRef = useLatest(onExpandedChange) const { registry, setExpanded } = tree React.useLayoutEffect( () => registry.register(value, { parent: parentValue, disabled, onExpandedChange: (open) => onExpandedChangeRef.current?.(open), }), [registry, value, parentValue, disabled, onExpandedChangeRef] ) const registerGroup = React.useCallback(() => { setHasGroup(true) return () => setHasGroup(false) }, []) const context = React.useMemo( () => ({ value, depth, disabled, expanded, hasGroup, groupId, registerGroup, }), [value, depth, disabled, expanded, hasGroup, groupId, registerGroup] ) return ( { if (!disabled) { setExpanded(value, open) } }} disabled={disabled} className={mergeClassName( treeItemVariants({ variant: tree.variant }), className )} {...props} /> ) } type TreeItemLabelState = { expanded: boolean selected: boolean disabled: boolean checked: TreeCheckState } type TreeItemLabelProps = Omit< useRender.ComponentProps<"div", TreeItemLabelState>, "className" > & { className?: string icon?: React.ReactNode expandedIcon?: React.ReactNode meta?: React.ReactNode } function TreeItemLabel({ className, children, icon, expandedIcon, meta, render, onClick, onFocus, ...props }: TreeItemLabelProps) { const tree = useTreeContext("TreeItemLabel") const item = useTreeItemContext("TreeItemLabel") const { value, depth, disabled, expanded, hasGroup, groupId } = item const selectable = tree.selectionMode !== "none" && !tree.checkboxes const selected = selectable && tree.selected.has(value) const checked = tree.checkStates.get(value) ?? "unchecked" const active = tree.activeValue === value && !disabled ? 0 : (-1 as const) const state: TreeItemLabelState = { expanded: hasGroup && expanded, selected, disabled, checked, } return useRender({ defaultTagName: "div", render, state, props: mergeProps<"div">( { role: "treeitem", tabIndex: active, "aria-level": depth, "aria-expanded": hasGroup ? expanded : undefined, "aria-owns": hasGroup ? groupId : undefined, "aria-selected": selectable ? selected : undefined, "aria-checked": tree.checkboxes ? checked === "mixed" ? "mixed" : checked === "checked" : undefined, "aria-disabled": disabled || undefined, className: cn( "group/tree-item-label relative flex h-(--tree-row-height) min-w-0 shrink-0 cursor-default items-center gap-(--tree-gap) rounded-md px-(--tree-row-px) text-start text-foreground no-underline transition-[background-color,color,box-shadow] duration-150 outline-none select-none [-webkit-tap-highlight-color:transparent] hover:bg-muted/60 focus-visible:z-10 focus-visible:ring-3 focus-visible:ring-focus-ring focus-visible:outline-hidden focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring focus-visible:outline-solid focus-visible:ring-inset data-[selected]:bg-muted data-[selected]:hover:bg-muted forced-colors:data-[selected]:outline-2 forced-colors:data-[selected]:-outline-offset-2 forced-colors:data-[selected]:outline-solid data-disabled:pointer-events-none data-disabled:opacity-50", className ), onFocus: (event: React.FocusEvent) => { onFocus?.(event) if (event.target === event.currentTarget) { tree.setActiveValue(value) } }, onClick: (event: React.MouseEvent) => { onClick?.(event) if (event.defaultPrevented || disabled) { return } const indicator = (event.target as Element).closest?.( '[data-slot="tree-item-indicator"]' ) if (indicator && event.currentTarget.contains(indicator)) { if (hasGroup) { tree.toggleExpanded(value) } return } if (tree.checkboxes) { tree.toggleCheck(value) return } const pointerType = (event.nativeEvent as PointerEvent).pointerType tree.activate(value, { range: event.shiftKey, toggle: event.metaKey || event.ctrlKey || (pointerType === "touch" && tree.selectionMode === "multiple"), }) }, children: ( <> {tree.checkboxes ? ( ) : null} {icon ? ( ) : null} {children} {meta != null && meta !== false ? ( {meta} ) : null} ), }, props, { "data-slot": "tree-item-label", "data-value": value, "data-expanded": state.expanded ? "" : undefined, "data-selected": selected ? "" : undefined, "data-checked": checked === "checked" ? "" : undefined, "data-indeterminate": checked === "mixed" ? "" : undefined, "data-disabled": disabled ? "" : undefined, } as Record ), }) } function TreeGroup({ className, children, ...props }: Omit< CollapsiblePrimitive.Panel.Props, "className" | "hiddenUntilFound" | "keepMounted" > & { className?: string }) { const tree = useTreeContext("TreeGroup") const { registerGroup, groupId } = useTreeItemContext("TreeGroup") React.useLayoutEffect(() => registerGroup(), [registerGroup]) return (

{children}

) } export { Tree, TreeItem, TreeItemLabel, TreeGroup, treeVariants } export type { TreeProps, TreeItemProps, TreeItemLabelProps, TreeCheckState, TreeSelectionMode, } 4f:["$","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","@base-ui/react@^1.8.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-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":"@base-ui/react@^1.8.0"}]]}]}],["$","li","@tabler/icons-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tabler%2Ficons-react","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":"@tabler/icons-react"}]]}]}],["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","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":"class-variance-authority"}]]}]}],["$","li","cn",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cn","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":"cn"}]]}]}]]}],["$","$L50",null,{"namespace":"@hextaui","registryDependencies":["https://hextaui.com/r/theme.json","https://hextaui.com/r/checkbox.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/ui/tree.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]