import { Tree } from "@hashti/react";
// Or named subcomponents:
// Tree.Root, Tree.Item, Tree.Indicator, Tree.Content, Tree.Checkbox

<Tree aria-label="Project filesystem">
  <Tree.Item textValue="src">
    <Tree.Indicator />
    <Tree.Content>src</Tree.Content>
    <Tree.Item textValue="components">
      <Tree.Indicator />
      <Tree.Content>components</Tree.Content>
    </Tree.Item>
  </Tree.Item>
</Tree>

import { Tree, Icon } from "@hashti/react";

const fileHierarchy = [
  {
    id: "src",
    name: "src",
    type: "folder",
    children: [
      {
        id: "components",
        name: "components",
        type: "folder",
        children: [
          { id: "button.tsx", name: "button.tsx", type: "file" },
          { id: "toolbar.tsx", name: "toolbar.tsx", type: "file" },
          { id: "tree.tsx", name: "tree.tsx", type: "file" },
        ],
      },
      { id: "index.ts", name: "index.ts", type: "file" },
      { id: "styles.css", name: "styles.css", type: "file" },
    ],
  },
  { id: "package.json", name: "package.json", type: "file" },
  { id: "README.md", name: "README.md", type: "file" },
];

export function FileTreeExplorer() {
  return (
    <div className="max-w-md p-4 border border-[var(--divider)] rounded-lg">
      <h3 className="text-sm font-semibold mb-3">Project Directory</h3>
      <Tree aria-label="Filesystem Tree" items={fileHierarchy} showGuideLines size="md">
        {function renderItem(item: any) {
          const isFolder = item.type === "folder";
          return (
            <Tree.Item key={item.id} textValue={item.name}>
              <div className="flex items-center gap-2 py-1">
                {isFolder && <Tree.Indicator />}
                <Icon
                  name={isFolder ? "menu" : "edit"}
                  size={16}
                  className="text-[var(--text-muted)]"
                />
                <Tree.Content>{item.name}</Tree.Content>
              </div>
              {item.children && item.children.map(renderItem)}
            </Tree.Item>
          );
        }}
      </Tree>
    </div>
  );
}

import { useState } from "react";
import { Tree } from "@hashti/react";
import type { Selection } from "react-aria-components";

export function SelectableTreeExample() {
  const [selected, setSelected] = useState<Selection>(new Set(["button.tsx"]));

  return (
    <div className="max-w-md space-y-3">
      <Tree
        aria-label="Export file selection"
        selectionMode="multiple"
        selectedKeys={selected}
        onSelectionChange={setSelected}
      >
        <Tree.Item id="frontend" textValue="Frontend">
          <div className="flex items-center gap-2 py-1">
            <Tree.Indicator />
            <Tree.Checkbox />
            <Tree.Content>Frontend Applications</Tree.Content>
          </div>
          <Tree.Item id="docs" textValue="Documentation">
            <div className="flex items-center gap-2 py-1">
              <Tree.Indicator />
              <Tree.Checkbox />
              <Tree.Content>Astro Docs</Tree.Content>
            </div>
          </Tree.Item>
          <Tree.Item id="storybook" textValue="Storybook">
            <div className="flex items-center gap-2 py-1">
              <Tree.Indicator />
              <Tree.Checkbox />
              <Tree.Content>Storybook Workshop</Tree.Content>
            </div>
          </Tree.Item>
        </Tree.Item>
      </Tree>
    </div>
  );
}

<Tree showGuideLines={true} aria-label="Deeply nested tree">
  {/* Nested items */}
</Tree>