Tree

<script lang="ts">
  import { Tree } from 'sv5ui';
  import type { TreeItem } from 'sv5ui';

  const files: TreeItem[] = [
    {
      label: 'src',
      defaultExpanded: true,
      children: [
        {
          label: 'lib',
          children: [
            { label: 'index.ts', icon: 'lucide:file-code' },
            { label: 'utils.ts', icon: 'lucide:file-code' }
          ]
        },
        { label: 'app.css', icon: 'lucide:file-type' }
      ]
    },
    { label: 'package.json', icon: 'lucide:file-json' },
    { label: 'README.md', icon: 'lucide:file-text' }
  ];
</script>

<Tree items={files} />

<!-- Keys are resolved in this order:
     getKey(item, indexPath) -> item.value -> item[labelKey] -> index path

     Duplicate labels are common in a tree ("index.ts" in two folders),
     so give colliding nodes an explicit value, or pass getKey. -->

<Tree
  items={files}
  getKey={(item, indexPath) => item.path ?? indexPath}
/>

<!-- Or per node -->
const files: TreeItem[] = [
  { label: 'src', value: 'src', children: [
    { label: 'index.ts', value: 'src/index.ts' }
  ] },
  { label: 'tests', value: 'tests', children: [
    { label: 'index.ts', value: 'tests/index.ts' }
  ] }
];

<script lang="ts">
  let selected = $state<string[]>(['src/index.ts']);
</script>

<!-- multiple turns value into a string[] and sets
     aria-multiselectable on the root -->
<Tree items={files} multiple bind:value={selected} />

<!-- selectionBehavior="replace" makes each click the only
     selection, even with multiple enabled -->
<Tree items={files} multiple selectionBehavior="replace" />

<!-- propagateSelect: selecting a parent selects every
     selectable descendant. Partially selected parents
     report indeterminate (a dash instead of a check). -->
<Tree items={files} multiple propagateSelect bind:value={selected} />

<!-- bubbleSelect: a parent joins the selection automatically
     once all of its selectable children are selected, and
     leaves it as soon as one is deselected. -->
<Tree items={files} multiple propagateSelect bubbleSelect bind:value={selected} />

<script lang="ts">
  // Uncontrolled: nodes marked defaultExpanded start open
  const files: TreeItem[] = [
    { label: 'src', defaultExpanded: true, children: [...] }
  ];

  // Controlled: bind:expanded takes over completely.
  // Passing expanded (even []) ignores every defaultExpanded.
  let expanded = $state<string[]>(['src']);
</script>

<Tree
  items={files}
  bind:expanded
  onExpandedChange={(keys) => console.log(keys)}
/>

<script lang="ts">
  import { Tree, Button } from 'sv5ui';
  import type { TreeApi } from 'sv5ui';

  let api = $state<TreeApi>();
</script>

<div class="flex gap-2">
  <Button label="Expand all" onclick={() => api?.expandAll()} />
  <Button label="Collapse all" onclick={() => api?.collapseAll()} />
  <Button label="Clear" onclick={() => api?.clearSelection()} />
</div>

<Tree bind:api items={files} multiple />

<!-- api also exposes: expand, collapse, toggle, select, deselect,
     focus, isExpanded, isSelected, and the readonly
     expanded / selected values. -->

<!-- Parent nodes without an explicit item.icon fall back to the
     folder icons. Leaves fall back to nothing. -->
<Tree
  items={files}
  expandedIcon="lucide:folder-open"
  collapsedIcon="lucide:folder"
  trailingIcon="lucide:chevron-down"
/>

<!-- Per node overrides win over the tree-level defaults -->
const items: TreeItem[] = [
  { label: 'Components', icon: 'lucide:box', children: [...] },
  { label: 'Settings', icon: 'lucide:settings', trailingIcon: 'lucide:plus' }
];

<!-- A disabled node cannot be selected, expanded, or reached
     by keyboard. Its children stay unreachable too, and
     propagateSelect skips them. -->
const items: TreeItem[] = [
  { label: 'Public', children: [{ label: 'index.html' }] },
  { label: 'Private', disabled: true, children: [{ label: 'secrets.env' }] }
];

<Tree {items} />

<!-- Disable the whole tree -->
<Tree {items} disabled />

<Tree
  items={files}
  onValueChange={(value) => console.log('selection', value)}
  onExpandedChange={(keys) => console.log('expanded', keys)}
/>

<!-- Or per node -->
const items: TreeItem[] = [
  {
    label: 'src',
    onToggle: (expanded) => console.log('src expanded:', expanded),
    onSelect: (selected) => console.log('src selected:', selected)
  }
];

<!-- itemTrailing replaces the default chevron slot content.
     Every item snippet receives the same TreeSlotProps. -->
<Tree items={files} multiple>
  {#snippet itemTrailing({ item, hasChildren, expanded, selected })}
    {#if item.count}
      <Badge label={String(item.count)} size="sm" variant="soft" />
    {/if}
    {#if hasChildren}
      <Icon name="lucide:chevron-down" class="transition-transform {expanded ? 'rotate-180' : ''}" />
    {/if}
  {/snippet}
</Tree>

<!-- item replaces the whole row (leading icon, label and trailing).
     Children still render below it. -->
<Tree items={files}>
  {#snippet item({ item, level, selected, select, toggle })}
    <button onclick={select} ondblclick={toggle}>
      {'-'.repeat(level)} {item.label}
    </button>
  {/snippet}
</Tree>

<Tree items={files} color="success" size="lg" />

<!-- Slot classes -->
<Tree
  items={files}
  ui={{ link: 'font-mono', linkLeadingIcon: 'text-primary' }}
/>

<!-- Per node slot overrides -->
const items: TreeItem[] = [
  { label: 'Deprecated', ui: { link: 'line-through opacity-60' } }
];