@lucasbernardosn/react-ui 0.0.0-stage → 0.2.0

package/dist/components/collections/tree-view/tree-collection.d.ts

@@ -0,0 +1,46 @@
+import { FilePathTreeNode, TreeCollection, TreeCollectionOptions, TreeNode } from "@zag-js/collection";
+//#region src/components/collections/tree-view/tree-collection.d.ts
+/**
+ * Cria a coleção de nós consumida pelo Tree View.
+ *
+ * A coleção é quem sabe navegar a hierarquia: extrai o valor e o rótulo de
+ * cada nó, percorre os filhos e devolve caminhos. Todos os métodos são
+ * imutáveis — inserir, remover ou mover devolve uma coleção nova, que é o que
+ * deve ser passado adiante.
+ *
+ * Mantenha-a estável entre renderizações; recriá-la a cada render descarta as
+ * referências dos nós.
+ *
+ * @example
+ * ```ts
+ * const collection = TreeView.createCollection<FileNode>({
+ *   nodeToValue: (node) => node.id,
+ *   nodeToString: (node) => node.name,
+ *   rootNode: {
+ *     id: 'ROOT',
+ *     name: '',
+ *     children: [{ id: 'src', name: 'src', children: [] }],
+ *   },
+ * });
+ * ```
+ */
+export declare const createTreeCollection: <T extends TreeNode>(options: TreeCollectionOptions<T>) => TreeCollection<T>;
+/**
+ * Cria uma coleção a partir de uma lista de caminhos de arquivo.
+ *
+ * Cada segmento separado por `/` vira um nível da árvore, e os segmentos
+ * repetidos entre caminhos são reaproveitados no mesmo nó. Atalho para exibir
+ * a saída de ferramentas que já entregam caminhos prontos.
+ *
+ * @example
+ * ```ts
+ * const collection = TreeView.createFileCollection([
+ *   'src/components/button.tsx',
+ *   'src/components/input.tsx',
+ *   'package.json',
+ * ]);
+ * ```
+ */
+export declare const createFileTreeCollection: (paths: string[]) => TreeCollection<FilePathTreeNode>;
+//#endregion
+//# sourceMappingURL=tree-collection.d.ts.map

package/dist/components/collections/tree-view/tree-collection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-collection.d.ts","names":[],"sources":["../../../../src/components/collections/tree-view/tree-collection.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;qBAgCa,uBAAwB,UAAU,UAC7C,SAAS,sBAAsB,OAC9B,eAAe;;;;;;;;;;;;;;;;;qBAkBL,2BACX,oBACC,eAAe"}

package/dist/components/collections/tree-view/tree-collection.js

@@ -0,0 +1,48 @@
+import { TreeCollection, filePathToTree } from "@zag-js/collection";
+//#region src/components/collections/tree-view/tree-collection.ts
+/**
+* Cria a coleção de nós consumida pelo Tree View.
+*
+* A coleção é quem sabe navegar a hierarquia: extrai o valor e o rótulo de
+* cada nó, percorre os filhos e devolve caminhos. Todos os métodos são
+* imutáveis — inserir, remover ou mover devolve uma coleção nova, que é o que
+* deve ser passado adiante.
+*
+* Mantenha-a estável entre renderizações; recriá-la a cada render descarta as
+* referências dos nós.
+*
+* @example
+* ```ts
+* const collection = TreeView.createCollection<FileNode>({
+*   nodeToValue: (node) => node.id,
+*   nodeToString: (node) => node.name,
+*   rootNode: {
+*     id: 'ROOT',
+*     name: '',
+*     children: [{ id: 'src', name: 'src', children: [] }],
+*   },
+* });
+* ```
+*/
+const createTreeCollection = (options) => new TreeCollection(options);
+/**
+* Cria uma coleção a partir de uma lista de caminhos de arquivo.
+*
+* Cada segmento separado por `/` vira um nível da árvore, e os segmentos
+* repetidos entre caminhos são reaproveitados no mesmo nó. Atalho para exibir
+* a saída de ferramentas que já entregam caminhos prontos.
+*
+* @example
+* ```ts
+* const collection = TreeView.createFileCollection([
+*   'src/components/button.tsx',
+*   'src/components/input.tsx',
+*   'package.json',
+* ]);
+* ```
+*/
+const createFileTreeCollection = (paths) => filePathToTree(paths);
+//#endregion
+export { createFileTreeCollection, createTreeCollection };
+
+//# sourceMappingURL=tree-collection.js.map

package/dist/components/collections/tree-view/tree-collection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-collection.js","names":[],"sources":["../../../../src/components/collections/tree-view/tree-collection.ts"],"sourcesContent":["import {\n  type FilePathTreeNode,\n  filePathToTree,\n  TreeCollection,\n  type TreeCollectionOptions,\n  type TreeNode,\n} from '@zag-js/collection';\n\n/**\n * Cria a coleção de nós consumida pelo Tree View.\n *\n * A coleção é quem sabe navegar a hierarquia: extrai o valor e o rótulo de\n * cada nó, percorre os filhos e devolve caminhos. Todos os métodos são\n * imutáveis — inserir, remover ou mover devolve uma coleção nova, que é o que\n * deve ser passado adiante.\n *\n * Mantenha-a estável entre renderizações; recriá-la a cada render descarta as\n * referências dos nós.\n *\n * @example\n * ```ts\n * const collection = TreeView.createCollection<FileNode>({\n *   nodeToValue: (node) => node.id,\n *   nodeToString: (node) => node.name,\n *   rootNode: {\n *     id: 'ROOT',\n *     name: '',\n *     children: [{ id: 'src', name: 'src', children: [] }],\n *   },\n * });\n * ```\n */\nexport const createTreeCollection = <T extends TreeNode>(\n  options: TreeCollectionOptions<T>,\n): TreeCollection<T> => new TreeCollection(options);\n\n/**\n * Cria uma coleção a partir de uma lista de caminhos de arquivo.\n *\n * Cada segmento separado por `/` vira um nível da árvore, e os segmentos\n * repetidos entre caminhos são reaproveitados no mesmo nó. Atalho para exibir\n * a saída de ferramentas que já entregam caminhos prontos.\n *\n * @example\n * ```ts\n * const collection = TreeView.createFileCollection([\n *   'src/components/button.tsx',\n *   'src/components/input.tsx',\n *   'package.json',\n * ]);\n * ```\n */\nexport const createFileTreeCollection = (\n  paths: string[],\n): TreeCollection<FilePathTreeNode> => filePathToTree(paths);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,MAAa,wBACX,YACsB,IAAI,eAAe,OAAO;;;;;;;;;;;;;;;;;AAkBlD,MAAa,4BACX,UACqC,eAAe,KAAK"}

package/dist/components/collections/tree-view/tree-view-branch-content.d.ts

@@ -0,0 +1,26 @@
+import { CollapsiblePanelProps } from "../../disclosure/collapsible/collapsible-panel.js";
+import { index_parts_d_exports } from "../../disclosure/collapsible/index.parts.js";
+import "../../disclosure/collapsible/index.js";
+import { MergeOverride } from "@lucasbernardosn/utils";
+import { useRender } from "@base-ui/react";
+//#region src/components/collections/tree-view/tree-view-branch-content.d.ts
+/**
+ * Props do conteúdo do branch.
+ *
+ * `className` e `style` aceitam apenas valores diretos, e não funções de
+ * estado; para estilizar por estado, use os atributos `data-open`,
+ * `data-closed` e `data-starting-style`.
+ */
+export type TreeViewBranchContentProps = MergeOverride<useRender.ComponentProps<'div'>, Pick<CollapsiblePanelProps, 'render' | 'keepMounted' | 'hiddenUntilFound' | 'orientation'>>;
+/**
+ * Conteúdo colapsável de um branch, onde os nós filhos são renderizados.
+ *
+ * A altura é animada ao abrir e ao fechar, e o que passa das bordas é
+ * recortado durante a transição.
+ */
+export declare const TreeViewBranchContent: {
+  (props: TreeViewBranchContentProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=tree-view-branch-content.d.ts.map

package/dist/components/collections/tree-view/tree-view-branch-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-branch-content.d.ts","names":["Collapsible","Collapsible.PanelProps"],"sources":["../../../../src/components/collections/tree-view/tree-view-branch-content.tsx"],"mappings":";;;;;;;;;;;;;YAeY,6BAA6B,cACvC,UAAU,uBACV,KACEC;;;;;;;qBAwBS;GAAgC,OAAA,6CAA0B,IAAA"}

package/dist/components/collections/tree-view/tree-view-branch-content.js

@@ -0,0 +1,34 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { CollapsiblePanel } from "../../disclosure/collapsible/collapsible-panel.js";
+import { useTreeViewContext } from "./use-tree-view-context.js";
+import { useTreeViewNodePropsContext } from "./use-tree-view-node-props-context.js";
+import { useTreeViewRenderStrategyContext } from "./use-tree-view-render-strategy-context.js";
+import { createSplitProps } from "@lucasbernardosn/utils";
+import { mergeProps } from "@base-ui/react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/collections/tree-view/tree-view-branch-content.tsx
+const splitVisibilityProps = createSplitProps();
+/**
+* Conteúdo colapsável de um branch, onde os nós filhos são renderizados.
+*
+* A altura é animada ao abrir e ao fechar, e o que passa das bordas é
+* recortado durante a transição.
+*/
+const TreeViewBranchContent = (props) => {
+	const { className, keepMounted, ...rest } = props;
+	const treeView = useTreeViewContext();
+	const nodeProps = useTreeViewNodePropsContext();
+	const { keepMounted: keepMountedFromContext } = useTreeViewRenderStrategyContext();
+	const [, zagProps] = splitVisibilityProps(treeView.getBranchContentProps(nodeProps), ["hidden", "data-state"]);
+	const baseProps = {
+		"data-component": "TreeView.BranchContent",
+		keepMounted: keepMounted ?? keepMountedFromContext,
+		className: mergeTwClassNames(["relative", "space-y-(--tree-view-vertical-spacing)"], className)
+	};
+	return /* @__PURE__ */ jsx(CollapsiblePanel, { ...mergeProps(baseProps, zagProps, rest) });
+};
+TreeViewBranchContent.displayName = "TreeView.BranchContent";
+//#endregion
+export { TreeViewBranchContent };
+
+//# sourceMappingURL=tree-view-branch-content.js.map

package/dist/components/collections/tree-view/tree-view-branch-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-branch-content.js","names":["Collapsible.Panel"],"sources":["../../../../src/components/collections/tree-view/tree-view-branch-content.tsx"],"sourcesContent":["import { mergeProps, type useRender } from '@base-ui/react';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport { Collapsible } from '#components/disclosure/collapsible';\nimport { mergeTwClassNames } from '#utils';\nimport { useTreeViewContext } from './use-tree-view-context';\nimport { useTreeViewNodePropsContext } from './use-tree-view-node-props-context';\nimport { useTreeViewRenderStrategyContext } from './use-tree-view-render-strategy-context';\n\n/**\n * Props do conteúdo do branch.\n *\n * `className` e `style` aceitam apenas valores diretos, e não funções de\n * estado; para estilizar por estado, use os atributos `data-open`,\n * `data-closed` e `data-starting-style`.\n */\nexport type TreeViewBranchContentProps = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  Pick<\n    Collapsible.PanelProps,\n    'render' | 'keepMounted' | 'hiddenUntilFound' | 'orientation'\n  >\n>;\n\n/**\n * Atributos de visibilidade destinados a um conteúdo renderizado como\n * elemento simples. Aqui quem controla exibição e animação é o painel\n * colapsável, então os dois são descartados para não disputar com\n * `data-open`, `data-closed` e `data-starting-style`.\n */\ntype VisibilityProps = {\n  hidden?: boolean | undefined;\n  'data-state'?: string | undefined;\n};\n\nconst splitVisibilityProps = createSplitProps<VisibilityProps>();\n\n/**\n * Conteúdo colapsável de um branch, onde os nós filhos são renderizados.\n *\n * A altura é animada ao abrir e ao fechar, e o que passa das bordas é\n * recortado durante a transição.\n */\nexport const TreeViewBranchContent = (props: TreeViewBranchContentProps) => {\n  const { className, keepMounted, ...rest } = props;\n\n  const treeView = useTreeViewContext();\n  const nodeProps = useTreeViewNodePropsContext();\n  const { keepMounted: keepMountedFromContext } =\n    useTreeViewRenderStrategyContext();\n\n  const [, zagProps] = splitVisibilityProps(\n    treeView.getBranchContentProps(nodeProps),\n    ['hidden', 'data-state'],\n  );\n\n  const baseProps = {\n    'data-component': 'TreeView.BranchContent',\n    // A prop local vence a estratégia declarada na raiz.\n    keepMounted: keepMounted ?? keepMountedFromContext,\n    className: mergeTwClassNames(\n      ['relative', 'space-y-(--tree-view-vertical-spacing)'],\n      className,\n    ),\n  };\n\n  return (\n    <Collapsible.Panel {...mergeProps<'div'>(baseProps, zagProps, rest)} />\n  );\n};\n\nTreeViewBranchContent.displayName = 'TreeView.BranchContent';\n"],"mappings":";;;;;;;;;AAkCA,MAAM,uBAAuB,iBAAkC;;;;;;;AAQ/D,MAAa,yBAAyB,UAAsC;CAC1E,MAAM,EAAE,WAAW,aAAa,GAAG,SAAS;CAE5C,MAAM,WAAW,mBAAmB;CACpC,MAAM,YAAY,4BAA4B;CAC9C,MAAM,EAAE,aAAa,2BACnB,iCAAiC;CAEnC,MAAM,GAAG,YAAY,qBACnB,SAAS,sBAAsB,SAAS,GACxC,CAAC,UAAU,YAAY,CACzB;CAEA,MAAM,YAAY;EAChB,kBAAkB;EAElB,aAAa,eAAe;EAC5B,WAAW,kBACT,CAAC,YAAY,wCAAwC,GACrD,SACF;CACF;CAEA,OACE,oBAACA,kBAAD,EAAmB,GAAI,WAAkB,WAAW,UAAU,IAAI,EAAI,CAAA;AAE1E;AAEA,sBAAsB,cAAc"}

package/dist/components/collections/tree-view/tree-view-branch-control.d.ts

@@ -0,0 +1,15 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/collections/tree-view/tree-view-branch-control.d.ts
+export type TreeViewBranchControlProps = useRender.ComponentProps<'div'>;
+/**
+ * Linha de um nó pai: o alvo que expande e colapsa o branch.
+ *
+ * Divide a mesma caixa do `TreeView.Item`, e por padrão o clique nela também
+ * seleciona o nó — comportamento que a raiz controla por `expandOnClick`.
+ */
+export declare const TreeViewBranchControl: {
+  (props: TreeViewBranchControlProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=tree-view-branch-control.d.ts.map

package/dist/components/collections/tree-view/tree-view-branch-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-branch-control.d.ts","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-branch-control.tsx"],"mappings":";;YAOY,6BAA6B,UAAU;;;;;;;qBAQtC;GAAgC,OAAA,6CAA0B,+CAAA"}

package/dist/components/collections/tree-view/tree-view-branch-control.js

@@ -0,0 +1,37 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { useTreeViewContext } from "./use-tree-view-context.js";
+import { useTreeViewNodePropsContext } from "./use-tree-view-node-props-context.js";
+import { useTreeViewVariantsContext } from "./use-tree-view-variants-context.js";
+import { treeViewNodeVariants } from "./tree-view-node-variants.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/collections/tree-view/tree-view-branch-control.tsx
+/**
+* Linha de um nó pai: o alvo que expande e colapsa o branch.
+*
+* Divide a mesma caixa do `TreeView.Item`, e por padrão o clique nela também
+* seleciona o nó — comportamento que a raiz controla por `expandOnClick`.
+*/
+const TreeViewBranchControl = (props) => {
+	const { render, className, ...rest } = props;
+	const treeView = useTreeViewContext();
+	const nodeProps = useTreeViewNodePropsContext();
+	const { variant, colorScheme } = useTreeViewVariantsContext();
+	const zagProps = treeView.getBranchControlProps(nodeProps);
+	const baseProps = {
+		"data-component": "TreeView.BranchControl",
+		className: mergeTwClassNames(treeViewNodeVariants({
+			colorScheme,
+			variant
+		}), className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, zagProps, rest)
+	});
+};
+TreeViewBranchControl.displayName = "TreeView.BranchControl";
+//#endregion
+export { TreeViewBranchControl };
+
+//# sourceMappingURL=tree-view-branch-control.js.map

package/dist/components/collections/tree-view/tree-view-branch-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-branch-control.js","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-branch-control.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\nimport { treeViewNodeVariants } from './tree-view-node-variants';\nimport { useTreeViewContext } from './use-tree-view-context';\nimport { useTreeViewNodePropsContext } from './use-tree-view-node-props-context';\nimport { useTreeViewVariantsContext } from './use-tree-view-variants-context';\n\nexport type TreeViewBranchControlProps = useRender.ComponentProps<'div'>;\n\n/**\n * Linha de um nó pai: o alvo que expande e colapsa o branch.\n *\n * Divide a mesma caixa do `TreeView.Item`, e por padrão o clique nela também\n * seleciona o nó — comportamento que a raiz controla por `expandOnClick`.\n */\nexport const TreeViewBranchControl = (props: TreeViewBranchControlProps) => {\n  const { render, className, ...rest } = props;\n\n  const treeView = useTreeViewContext();\n  const nodeProps = useTreeViewNodePropsContext();\n  const { variant, colorScheme } = useTreeViewVariantsContext();\n\n  const zagProps = treeView.getBranchControlProps(nodeProps);\n\n  const baseProps = {\n    'data-component': 'TreeView.BranchControl',\n    className: mergeTwClassNames(\n      treeViewNodeVariants({ colorScheme, variant }),\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, zagProps, rest),\n  });\n};\n\nTreeViewBranchControl.displayName = 'TreeView.BranchControl';\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAa,yBAAyB,UAAsC;CAC1E,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,WAAW,mBAAmB;CACpC,MAAM,YAAY,4BAA4B;CAC9C,MAAM,EAAE,SAAS,gBAAgB,2BAA2B;CAE5D,MAAM,WAAW,SAAS,sBAAsB,SAAS;CAEzD,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT,qBAAqB;GAAE;GAAa;EAAQ,CAAC,GAC7C,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,UAAU,IAAI;CAC7C,CAAC;AACH;AAEA,sBAAsB,cAAc"}

package/dist/components/collections/tree-view/tree-view-branch-indent-guide.d.ts

@@ -0,0 +1,16 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/collections/tree-view/tree-view-branch-indent-guide.d.ts
+export type TreeViewBranchIndentGuideProps = useRender.ComponentProps<'div'>;
+/**
+ * Linha vertical que liga visualmente os filhos de um branch.
+ *
+ * Fica no centro do indicador do branch pai, na mesma coluna dos ícones dos
+ * filhos. Passe-a ao `TreeView.NodeRenderer` pela prop `indentGuide` para que
+ * ela apareça em todos os níveis.
+ */
+export declare const TreeViewBranchIndentGuide: {
+  (props: TreeViewBranchIndentGuideProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=tree-view-branch-indent-guide.d.ts.map

package/dist/components/collections/tree-view/tree-view-branch-indent-guide.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-branch-indent-guide.d.ts","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-branch-indent-guide.tsx"],"mappings":";;YAKY,iCAAiC,UAAU;;;;;;;;qBAS1C;GACJ,OAAA,iDAA8B,+CAAA"}

package/dist/components/collections/tree-view/tree-view-branch-indent-guide.js

@@ -0,0 +1,41 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { useTreeViewContext } from "./use-tree-view-context.js";
+import { useTreeViewNodePropsContext } from "./use-tree-view-node-props-context.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/collections/tree-view/tree-view-branch-indent-guide.tsx
+/**
+* Linha vertical que liga visualmente os filhos de um branch.
+*
+* Fica no centro do indicador do branch pai, na mesma coluna dos ícones dos
+* filhos. Passe-a ao `TreeView.NodeRenderer` pela prop `indentGuide` para que
+* ela apareça em todos os níveis.
+*/
+const TreeViewBranchIndentGuide = (props) => {
+	const { render, className, ...rest } = props;
+	const treeView = useTreeViewContext();
+	const nodeProps = useTreeViewNodePropsContext();
+	const zagProps = treeView.getBranchIndentGuideProps(nodeProps);
+	const baseProps = {
+		"data-component": "TreeView.BranchIndentGuide",
+		className: mergeTwClassNames([
+			"[--tree-view-depth:calc(var(--depth)-1)]",
+			"[--tree-view-offset:calc(var(--tree-view-padding-inline)+var(--tree-view-indentation)*var(--tree-view-depth))]",
+			"absolute",
+			"z-1",
+			"inset-s-[calc(var(--tree-view-offset)+var(--tree-view-icon-size)*0.5)]",
+			"h-full",
+			"w-px",
+			"bg-gray-6"
+		], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, zagProps, rest)
+	});
+};
+TreeViewBranchIndentGuide.displayName = "TreeView.BranchIndentGuide";
+//#endregion
+export { TreeViewBranchIndentGuide };
+
+//# sourceMappingURL=tree-view-branch-indent-guide.js.map

package/dist/components/collections/tree-view/tree-view-branch-indent-guide.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-branch-indent-guide.js","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-branch-indent-guide.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\nimport { useTreeViewContext } from './use-tree-view-context';\nimport { useTreeViewNodePropsContext } from './use-tree-view-node-props-context';\n\nexport type TreeViewBranchIndentGuideProps = useRender.ComponentProps<'div'>;\n\n/**\n * Linha vertical que liga visualmente os filhos de um branch.\n *\n * Fica no centro do indicador do branch pai, na mesma coluna dos ícones dos\n * filhos. Passe-a ao `TreeView.NodeRenderer` pela prop `indentGuide` para que\n * ela apareça em todos os níveis.\n */\nexport const TreeViewBranchIndentGuide = (\n  props: TreeViewBranchIndentGuideProps,\n) => {\n  const { render, className, ...rest } = props;\n\n  const treeView = useTreeViewContext();\n  const nodeProps = useTreeViewNodePropsContext();\n\n  const zagProps = treeView.getBranchIndentGuideProps(nodeProps);\n\n  const baseProps = {\n    'data-component': 'TreeView.BranchIndentGuide',\n    className: mergeTwClassNames(\n      [\n        // Mesmo recuo das linhas de nó, mais meio ícone: é o que põe a guia no\n        // centro do indicador em vez de na borda da linha.\n        '[--tree-view-depth:calc(var(--depth)-1)]',\n        '[--tree-view-offset:calc(var(--tree-view-padding-inline)+var(--tree-view-indentation)*var(--tree-view-depth))]',\n\n        'absolute',\n        'z-1',\n        'inset-s-[calc(var(--tree-view-offset)+var(--tree-view-icon-size)*0.5)]',\n\n        'h-full',\n        'w-px',\n\n        'bg-gray-6',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, zagProps, rest),\n  });\n};\n\nTreeViewBranchIndentGuide.displayName = 'TreeView.BranchIndentGuide';\n"],"mappings":";;;;;;;;;;;;AAcA,MAAa,6BACX,UACG;CACH,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,WAAW,mBAAmB;CACpC,MAAM,YAAY,4BAA4B;CAE9C,MAAM,WAAW,SAAS,0BAA0B,SAAS;CAE7D,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GAGE;GACA;GAEA;GACA;GACA;GAEA;GACA;GAEA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,UAAU,IAAI;CAC7C,CAAC;AACH;AAEA,0BAA0B,cAAc"}

package/dist/components/collections/tree-view/tree-view-branch-indicator.d.ts

@@ -0,0 +1,15 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/collections/tree-view/tree-view-branch-indicator.d.ts
+export type TreeViewBranchIndicatorProps = useRender.ComponentProps<'div'>;
+/**
+ * Seta que mostra se um branch está aberto ou fechado.
+ *
+ * Gira 90° na abertura e acompanha a cor do texto da linha, que muda quando o
+ * nó é selecionado. Traz um caret para a direita; `children` troca o ícone.
+ */
+export declare const TreeViewBranchIndicator: {
+  (props: TreeViewBranchIndicatorProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=tree-view-branch-indicator.d.ts.map

package/dist/components/collections/tree-view/tree-view-branch-indicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-branch-indicator.d.ts","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-branch-indicator.tsx"],"mappings":";;YAOY,+BAA+B,UAAU;;;;;;;qBAQxC;GACJ,OAAA,+CAA4B,+CAAA"}

package/dist/components/collections/tree-view/tree-view-branch-indicator.js

@@ -0,0 +1,48 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { Icon } from "../../display/icon/icon.js";
+import { useTreeViewContext } from "./use-tree-view-context.js";
+import { useTreeViewNodePropsContext } from "./use-tree-view-node-props-context.js";
+import { mergeProps, useRender } from "@base-ui/react";
+import { jsx } from "react/jsx-runtime";
+import { CaretRightIcon } from "@phosphor-icons/react";
+//#region src/components/collections/tree-view/tree-view-branch-indicator.tsx
+/**
+* Seta que mostra se um branch está aberto ou fechado.
+*
+* Gira 90° na abertura e acompanha a cor do texto da linha, que muda quando o
+* nó é selecionado. Traz um caret para a direita; `children` troca o ícone.
+*/
+const TreeViewBranchIndicator = (props) => {
+	const { render, className, children = /* @__PURE__ */ jsx(Icon, { render: /* @__PURE__ */ jsx(CaretRightIcon, {}) }), ...rest } = props;
+	const treeView = useTreeViewContext();
+	const nodeProps = useTreeViewNodePropsContext();
+	const zagProps = treeView.getBranchIndicatorProps(nodeProps);
+	const baseProps = {
+		"data-component": "TreeView.BranchIndicator",
+		className: mergeTwClassNames([
+			"inline-flex",
+			"items-center",
+			"justify-center",
+			"shrink-0",
+			"text-current",
+			"origin-center",
+			"data-[state=open]:rotate-90",
+			"not-motion-reduced:transition-transform",
+			"not-motion-reduced:duration-150",
+			"not-motion-reduced:ease-move"
+		], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, zagProps, {
+			...rest,
+			children
+		})
+	});
+};
+TreeViewBranchIndicator.displayName = "TreeView.BranchIndicator";
+//#endregion
+export { TreeViewBranchIndicator };
+
+//# sourceMappingURL=tree-view-branch-indicator.js.map

package/dist/components/collections/tree-view/tree-view-branch-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-branch-indicator.js","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-branch-indicator.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { CaretRightIcon } from '@phosphor-icons/react';\nimport { Icon } from '#components/display/icon';\nimport { mergeTwClassNames } from '#utils';\nimport { useTreeViewContext } from './use-tree-view-context';\nimport { useTreeViewNodePropsContext } from './use-tree-view-node-props-context';\n\nexport type TreeViewBranchIndicatorProps = useRender.ComponentProps<'div'>;\n\n/**\n * Seta que mostra se um branch está aberto ou fechado.\n *\n * Gira 90° na abertura e acompanha a cor do texto da linha, que muda quando o\n * nó é selecionado. Traz um caret para a direita; `children` troca o ícone.\n */\nexport const TreeViewBranchIndicator = (\n  props: TreeViewBranchIndicatorProps,\n) => {\n  const {\n    render,\n    className,\n    children = <Icon render={<CaretRightIcon />} />,\n    ...rest\n  } = props;\n\n  const treeView = useTreeViewContext();\n  const nodeProps = useTreeViewNodePropsContext();\n\n  const zagProps = treeView.getBranchIndicatorProps(nodeProps);\n\n  const baseProps = {\n    'data-component': 'TreeView.BranchIndicator',\n    className: mergeTwClassNames(\n      [\n        'inline-flex',\n        'items-center',\n        'justify-center',\n        'shrink-0',\n\n        'text-current',\n\n        'origin-center',\n        'data-[state=open]:rotate-90',\n\n        'not-motion-reduced:transition-transform',\n        'not-motion-reduced:duration-150',\n        'not-motion-reduced:ease-move',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, zagProps, { ...rest, children }),\n  });\n};\n\nTreeViewBranchIndicator.displayName = 'TreeView.BranchIndicator';\n"],"mappings":";;;;;;;;;;;;;;AAeA,MAAa,2BACX,UACG;CACH,MAAM,EACJ,QACA,WACA,WAAW,oBAAC,MAAD,EAAM,QAAQ,oBAAC,gBAAD,CAAiB,CAAA,EAAI,CAAA,GAC9C,GAAG,SACD;CAEJ,MAAM,WAAW,mBAAmB;CACpC,MAAM,YAAY,4BAA4B;CAE9C,MAAM,WAAW,SAAS,wBAAwB,SAAS;CAE3D,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GACA;GAEA;GAEA;GACA;GAEA;GACA;GACA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,UAAU;GAAE,GAAG;GAAM;EAAS,CAAC;CAC9D,CAAC;AACH;AAEA,wBAAwB,cAAc"}

package/dist/components/collections/tree-view/tree-view-branch-text.d.ts

@@ -0,0 +1,15 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/collections/tree-view/tree-view-branch-text.d.ts
+export type TreeViewBranchTextProps = useRender.ComponentProps<'span'>;
+/**
+ * Rótulo de um nó pai.
+ *
+ * Ocupa o espaço livre da linha, então o que vier depois dele encosta na
+ * borda oposta, e trunca quando o texto não cabe.
+ */
+export declare const TreeViewBranchText: {
+  (props: TreeViewBranchTextProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=tree-view-branch-text.d.ts.map

package/dist/components/collections/tree-view/tree-view-branch-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-branch-text.d.ts","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-branch-text.tsx"],"mappings":";;YAMY,0BAA0B,UAAU;;;;;;;qBAQnC;GAA6B,OAAA,0CAAuB,+CAAA"}

package/dist/components/collections/tree-view/tree-view-branch-text.js

@@ -0,0 +1,32 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { useTreeViewContext } from "./use-tree-view-context.js";
+import { useTreeViewNodePropsContext } from "./use-tree-view-node-props-context.js";
+import { treeViewTextClassNames } from "./tree-view-text-class-names.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/collections/tree-view/tree-view-branch-text.tsx
+/**
+* Rótulo de um nó pai.
+*
+* Ocupa o espaço livre da linha, então o que vier depois dele encosta na
+* borda oposta, e trunca quando o texto não cabe.
+*/
+const TreeViewBranchText = (props) => {
+	const { render, className, ...rest } = props;
+	const treeView = useTreeViewContext();
+	const nodeProps = useTreeViewNodePropsContext();
+	const zagProps = treeView.getBranchTextProps(nodeProps);
+	const baseProps = {
+		"data-component": "TreeView.BranchText",
+		className: mergeTwClassNames(treeViewTextClassNames, className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "span",
+		props: mergeProps(baseProps, zagProps, rest)
+	});
+};
+TreeViewBranchText.displayName = "TreeView.BranchText";
+//#endregion
+export { TreeViewBranchText };
+
+//# sourceMappingURL=tree-view-branch-text.js.map

package/dist/components/collections/tree-view/tree-view-branch-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-branch-text.js","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-branch-text.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\nimport { treeViewTextClassNames } from './tree-view-text-class-names';\nimport { useTreeViewContext } from './use-tree-view-context';\nimport { useTreeViewNodePropsContext } from './use-tree-view-node-props-context';\n\nexport type TreeViewBranchTextProps = useRender.ComponentProps<'span'>;\n\n/**\n * Rótulo de um nó pai.\n *\n * Ocupa o espaço livre da linha, então o que vier depois dele encosta na\n * borda oposta, e trunca quando o texto não cabe.\n */\nexport const TreeViewBranchText = (props: TreeViewBranchTextProps) => {\n  const { render, className, ...rest } = props;\n\n  const treeView = useTreeViewContext();\n  const nodeProps = useTreeViewNodePropsContext();\n\n  const zagProps = treeView.getBranchTextProps(nodeProps);\n\n  const baseProps = {\n    'data-component': 'TreeView.BranchText',\n    className: mergeTwClassNames(treeViewTextClassNames, className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'span',\n    props: mergeProps(baseProps, zagProps, rest),\n  });\n};\n\nTreeViewBranchText.displayName = 'TreeView.BranchText';\n"],"mappings":";;;;;;;;;;;;AAcA,MAAa,sBAAsB,UAAmC;CACpE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,WAAW,mBAAmB;CACpC,MAAM,YAAY,4BAA4B;CAE9C,MAAM,WAAW,SAAS,mBAAmB,SAAS;CAEtD,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,wBAAwB,SAAS;CAChE;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,UAAU,IAAI;CAC7C,CAAC;AACH;AAEA,mBAAmB,cAAc"}

package/dist/components/collections/tree-view/tree-view-branch-trigger.d.ts

@@ -0,0 +1,16 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/collections/tree-view/tree-view-branch-trigger.d.ts
+export type TreeViewBranchTriggerProps = useRender.ComponentProps<'div'>;
+/**
+ * Alvo restrito para expandir e colapsar um branch.
+ *
+ * Use quando o clique na linha inteira não deve alternar o branch — por
+ * exemplo quando o nó pai também é selecionável e as duas ações precisam
+ * ficar separadas.
+ */
+export declare const TreeViewBranchTrigger: {
+  (props: TreeViewBranchTriggerProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=tree-view-branch-trigger.d.ts.map

package/dist/components/collections/tree-view/tree-view-branch-trigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-branch-trigger.d.ts","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-branch-trigger.tsx"],"mappings":";;YAKY,6BAA6B,UAAU;;;;;;;;qBAStC;GAAgC,OAAA,6CAA0B,+CAAA"}

package/dist/components/collections/tree-view/tree-view-branch-trigger.js

@@ -0,0 +1,39 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { useTreeViewContext } from "./use-tree-view-context.js";
+import { useTreeViewNodePropsContext } from "./use-tree-view-node-props-context.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/collections/tree-view/tree-view-branch-trigger.tsx
+/**
+* Alvo restrito para expandir e colapsar um branch.
+*
+* Use quando o clique na linha inteira não deve alternar o branch — por
+* exemplo quando o nó pai também é selecionável e as duas ações precisam
+* ficar separadas.
+*/
+const TreeViewBranchTrigger = (props) => {
+	const { render, className, ...rest } = props;
+	const treeView = useTreeViewContext();
+	const nodeProps = useTreeViewNodePropsContext();
+	const zagProps = treeView.getBranchTriggerProps(nodeProps);
+	const baseProps = {
+		"data-component": "TreeView.BranchTrigger",
+		className: mergeTwClassNames([
+			"inline-flex",
+			"items-center",
+			"justify-center",
+			"shrink-0",
+			"cursor-pointer",
+			"data-disabled:cursor-not-allowed"
+		], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, zagProps, rest)
+	});
+};
+TreeViewBranchTrigger.displayName = "TreeView.BranchTrigger";
+//#endregion
+export { TreeViewBranchTrigger };
+
+//# sourceMappingURL=tree-view-branch-trigger.js.map

package/dist/components/collections/tree-view/tree-view-branch-trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-branch-trigger.js","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-branch-trigger.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\nimport { useTreeViewContext } from './use-tree-view-context';\nimport { useTreeViewNodePropsContext } from './use-tree-view-node-props-context';\n\nexport type TreeViewBranchTriggerProps = useRender.ComponentProps<'div'>;\n\n/**\n * Alvo restrito para expandir e colapsar um branch.\n *\n * Use quando o clique na linha inteira não deve alternar o branch — por\n * exemplo quando o nó pai também é selecionável e as duas ações precisam\n * ficar separadas.\n */\nexport const TreeViewBranchTrigger = (props: TreeViewBranchTriggerProps) => {\n  const { render, className, ...rest } = props;\n\n  const treeView = useTreeViewContext();\n  const nodeProps = useTreeViewNodePropsContext();\n\n  const zagProps = treeView.getBranchTriggerProps(nodeProps);\n\n  const baseProps = {\n    'data-component': 'TreeView.BranchTrigger',\n    className: mergeTwClassNames(\n      [\n        'inline-flex',\n        'items-center',\n        'justify-center',\n        'shrink-0',\n\n        'cursor-pointer',\n        'data-disabled:cursor-not-allowed',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, zagProps, rest),\n  });\n};\n\nTreeViewBranchTrigger.displayName = 'TreeView.BranchTrigger';\n"],"mappings":";;;;;;;;;;;;AAcA,MAAa,yBAAyB,UAAsC;CAC1E,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,WAAW,mBAAmB;CACpC,MAAM,YAAY,4BAA4B;CAE9C,MAAM,WAAW,SAAS,sBAAsB,SAAS;CAEzD,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GACA;GAEA;GACA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,UAAU,IAAI;CAC7C,CAAC;AACH;AAEA,sBAAsB,cAAc"}

package/dist/components/collections/tree-view/tree-view-branch.d.ts

@@ -0,0 +1,29 @@
+import { CollapsibleRootProps } from "../../disclosure/collapsible/collapsible-root.js";
+import { index_parts_d_exports } from "../../disclosure/collapsible/index.parts.js";
+import "../../disclosure/collapsible/index.js";
+import { MergeOverride } from "@lucasbernardosn/utils";
+import { useRender } from "@base-ui/react";
+//#region src/components/collections/tree-view/tree-view-branch.d.ts
+/**
+ * Props do branch.
+ *
+ * A expansão acompanha o estado do nó na árvore, então as props que abririam
+ * ou fechariam o branch por fora (`open`, `defaultOpen`, `onOpenChange`) não
+ * ficam disponíveis. `className` e `style` aceitam apenas valores diretos, e
+ * não funções de estado; para estilizar por estado, use os atributos
+ * `data-open` e `data-closed`.
+ */
+export type TreeViewBranchProps = MergeOverride<useRender.ComponentProps<'div'>, Pick<CollapsibleRootProps, 'render' | 'disabled'>>;
+/**
+ * Envoltório de um nó pai: agrupa a linha do branch e o conteúdo que aparece
+ * quando ele é expandido.
+ *
+ * É o elemento que carrega a semântica do nó na árvore — profundidade, estado
+ * de expansão e posição entre os irmãos.
+ */
+export declare const TreeViewBranch: {
+  (props: TreeViewBranchProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=tree-view-branch.d.ts.map

package/dist/components/collections/tree-view/tree-view-branch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-branch.d.ts","names":["Collapsible","Collapsible.RootProps"],"sources":["../../../../src/components/collections/tree-view/tree-view-branch.tsx"],"mappings":";;;;;;;;;;;;;;;YAiBY,sBAAsB,cAChC,UAAU,uBACV,KAAKC;;;;;;;;qBAUM;GAAyB,OAAA,sCAAmB,IAAA"}

package/dist/components/collections/tree-view/tree-view-branch.js

@@ -0,0 +1,35 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { CollapsibleRoot } from "../../disclosure/collapsible/collapsible-root.js";
+import { useTreeViewContext } from "./use-tree-view-context.js";
+import { useTreeViewNodeContext } from "./use-tree-view-node-context.js";
+import { useTreeViewNodePropsContext } from "./use-tree-view-node-props-context.js";
+import { mergeProps } from "@base-ui/react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/collections/tree-view/tree-view-branch.tsx
+/**
+* Envoltório de um nó pai: agrupa a linha do branch e o conteúdo que aparece
+* quando ele é expandido.
+*
+* É o elemento que carrega a semântica do nó na árvore — profundidade, estado
+* de expansão e posição entre os irmãos.
+*/
+const TreeViewBranch = (props) => {
+	const { className, ...rest } = props;
+	const treeView = useTreeViewContext();
+	const nodeProps = useTreeViewNodePropsContext();
+	const nodeState = useTreeViewNodeContext();
+	const zagProps = treeView.getBranchProps(nodeProps);
+	const baseProps = {
+		"data-component": "TreeView.Branch",
+		className: mergeTwClassNames(["relative", "space-y-(--tree-view-vertical-spacing)"], className)
+	};
+	return /* @__PURE__ */ jsx(CollapsibleRoot, {
+		open: nodeState.expanded,
+		...mergeProps(baseProps, zagProps, rest)
+	});
+};
+TreeViewBranch.displayName = "TreeView.Branch";
+//#endregion
+export { TreeViewBranch };
+
+//# sourceMappingURL=tree-view-branch.js.map

package/dist/components/collections/tree-view/tree-view-branch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-branch.js","names":["Collapsible.Root"],"sources":["../../../../src/components/collections/tree-view/tree-view-branch.tsx"],"sourcesContent":["import { mergeProps, type useRender } from '@base-ui/react';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { Collapsible } from '#components/disclosure/collapsible';\nimport { mergeTwClassNames } from '#utils';\nimport { useTreeViewContext } from './use-tree-view-context';\nimport { useTreeViewNodeContext } from './use-tree-view-node-context';\nimport { useTreeViewNodePropsContext } from './use-tree-view-node-props-context';\n\n/**\n * Props do branch.\n *\n * A expansão acompanha o estado do nó na árvore, então as props que abririam\n * ou fechariam o branch por fora (`open`, `defaultOpen`, `onOpenChange`) não\n * ficam disponíveis. `className` e `style` aceitam apenas valores diretos, e\n * não funções de estado; para estilizar por estado, use os atributos\n * `data-open` e `data-closed`.\n */\nexport type TreeViewBranchProps = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  Pick<Collapsible.RootProps, 'render' | 'disabled'>\n>;\n\n/**\n * Envoltório de um nó pai: agrupa a linha do branch e o conteúdo que aparece\n * quando ele é expandido.\n *\n * É o elemento que carrega a semântica do nó na árvore — profundidade, estado\n * de expansão e posição entre os irmãos.\n */\nexport const TreeViewBranch = (props: TreeViewBranchProps) => {\n  const { className, ...rest } = props;\n\n  const treeView = useTreeViewContext();\n  const nodeProps = useTreeViewNodePropsContext();\n  const nodeState = useTreeViewNodeContext();\n\n  const zagProps = treeView.getBranchProps(nodeProps);\n\n  const baseProps = {\n    'data-component': 'TreeView.Branch',\n    className: mergeTwClassNames(\n      ['relative', 'space-y-(--tree-view-vertical-spacing)'],\n      className,\n    ),\n  };\n\n  return (\n    <Collapsible.Root\n      open={nodeState.expanded}\n      {...mergeProps<'div'>(baseProps, zagProps, rest)}\n    />\n  );\n};\n\nTreeViewBranch.displayName = 'TreeView.Branch';\n"],"mappings":";;;;;;;;;;;;;;;AA6BA,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,MAAM,WAAW,mBAAmB;CACpC,MAAM,YAAY,4BAA4B;CAC9C,MAAM,YAAY,uBAAuB;CAEzC,MAAM,WAAW,SAAS,eAAe,SAAS;CAElD,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT,CAAC,YAAY,wCAAwC,GACrD,SACF;CACF;CAEA,OACE,oBAACA,iBAAD;EACE,MAAM,UAAU;EAChB,GAAI,WAAkB,WAAW,UAAU,IAAI;CAChD,CAAA;AAEL;AAEA,eAAe,cAAc"}

package/dist/components/collections/tree-view/tree-view-context.d.ts

@@ -0,0 +1,26 @@
+import { UseTreeViewReturn } from "./use-tree-view.js";
+import React from "react";
+import { TreeNode } from "@zag-js/collection";
+//#region src/components/collections/tree-view/tree-view-context.d.ts
+export type TreeViewContextProps<T extends TreeNode> = {
+  children: (context: UseTreeViewReturn<T>) => React.ReactNode;
+};
+/**
+ * Expõe a API do Tree View como render prop.
+ *
+ * Atalho para acessar o estado inline, sem criar um componente filho só para
+ * chamar `useTreeViewContext`.
+ *
+ * @example
+ * ```tsx
+ * <TreeView.Context>
+ *   {(tree) => <output>{tree.selectedValue.join(', ')}</output>}
+ * </TreeView.Context>
+ * ```
+ */
+export declare const TreeViewContext: {
+  <T extends unknown>(props: TreeViewContextProps<T>): React.ReactNode;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=tree-view-context.d.ts.map