@lucasbernardosn/react-ui 0.0.0-stage → 0.1.0

package/dist/components/collections/tree-view/tree-view-node-rename-input.d.ts

@@ -0,0 +1,28 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/collections/tree-view/tree-view-node-rename-input.d.ts
+export type TreeViewNodeRenameInputProps = useRender.ComponentProps<'input'>;
+/**
+ * Campo de edição do rótulo de um nó, visível apenas enquanto ele está sendo
+ * renomeado.
+ *
+ * `Enter` e a perda de foco confirmam, `Escape` cancela. A renomeação começa
+ * com `F2` sobre o nó e só é permitida quando a raiz recebe `canRename`.
+ *
+ * Fica ao lado do `TreeView.ItemText` ou do `TreeView.BranchText`, sempre
+ * montado: a árvore preenche e foca o campo ao começar, e o rótulo se esconde
+ * enquanto a linha tem `data-renaming`.
+ *
+ * @example
+ * ```tsx
+ * <TreeView.Item>
+ *   <TreeView.ItemText>{node.name}</TreeView.ItemText>
+ *   <TreeView.NodeRenameInput />
+ * </TreeView.Item>
+ * ```
+ */
+export declare const TreeViewNodeRenameInput: {
+  (props: TreeViewNodeRenameInputProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=tree-view-node-rename-input.d.ts.map

package/dist/components/collections/tree-view/tree-view-node-rename-input.d.ts.map

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

package/dist/components/collections/tree-view/tree-view-node-rename-input.js

@@ -0,0 +1,57 @@
+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-node-rename-input.tsx
+/**
+* Campo de edição do rótulo de um nó, visível apenas enquanto ele está sendo
+* renomeado.
+*
+* `Enter` e a perda de foco confirmam, `Escape` cancela. A renomeação começa
+* com `F2` sobre o nó e só é permitida quando a raiz recebe `canRename`.
+*
+* Fica ao lado do `TreeView.ItemText` ou do `TreeView.BranchText`, sempre
+* montado: a árvore preenche e foca o campo ao começar, e o rótulo se esconde
+* enquanto a linha tem `data-renaming`.
+*
+* @example
+* ```tsx
+* <TreeView.Item>
+*   <TreeView.ItemText>{node.name}</TreeView.ItemText>
+*   <TreeView.NodeRenameInput />
+* </TreeView.Item>
+* ```
+*/
+const TreeViewNodeRenameInput = (props) => {
+	const { render, className, ...rest } = props;
+	const treeView = useTreeViewContext();
+	const nodeProps = useTreeViewNodePropsContext();
+	const zagProps = treeView.getNodeRenameInputProps(nodeProps);
+	const baseProps = {
+		"data-component": "TreeView.NodeRenameInput",
+		className: mergeTwClassNames([
+			"[--focus-ring-width:2px]",
+			"flex-1",
+			"min-w-0",
+			"px-1",
+			"border",
+			"border-gray-7",
+			"rounded-sm",
+			"bg-gray-1",
+			"text-gray-12",
+			"outline-none",
+			"focus-ring-inside",
+			"ring-gray-8"
+		], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "input",
+		props: mergeProps(baseProps, zagProps, rest)
+	});
+};
+TreeViewNodeRenameInput.displayName = "TreeView.NodeRenameInput";
+//#endregion
+export { TreeViewNodeRenameInput };
+
+//# sourceMappingURL=tree-view-node-rename-input.js.map

package/dist/components/collections/tree-view/tree-view-node-rename-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-node-rename-input.js","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-node-rename-input.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 TreeViewNodeRenameInputProps = useRender.ComponentProps<'input'>;\n\n/**\n * Campo de edição do rótulo de um nó, visível apenas enquanto ele está sendo\n * renomeado.\n *\n * `Enter` e a perda de foco confirmam, `Escape` cancela. A renomeação começa\n * com `F2` sobre o nó e só é permitida quando a raiz recebe `canRename`.\n *\n * Fica ao lado do `TreeView.ItemText` ou do `TreeView.BranchText`, sempre\n * montado: a árvore preenche e foca o campo ao começar, e o rótulo se esconde\n * enquanto a linha tem `data-renaming`.\n *\n * @example\n * ```tsx\n * <TreeView.Item>\n *   <TreeView.ItemText>{node.name}</TreeView.ItemText>\n *   <TreeView.NodeRenameInput />\n * </TreeView.Item>\n * ```\n */\nexport const TreeViewNodeRenameInput = (\n  props: TreeViewNodeRenameInputProps,\n) => {\n  const { render, className, ...rest } = props;\n\n  const treeView = useTreeViewContext();\n  const nodeProps = useTreeViewNodePropsContext();\n\n  const zagProps = treeView.getNodeRenameInputProps(nodeProps);\n\n  const baseProps = {\n    'data-component': 'TreeView.NodeRenameInput',\n    className: mergeTwClassNames(\n      [\n        '[--focus-ring-width:2px]',\n\n        'flex-1',\n        'min-w-0',\n\n        'px-1',\n\n        'border',\n        'border-gray-7',\n        'rounded-sm',\n\n        'bg-gray-1',\n\n        // A tipografia vem da linha pelo `font: inherit` do preflight. A cor é\n        // fixa: herdada, ficaria clara sobre o fundo do campo na linha\n        // selecionada do `solid`.\n        'text-gray-12',\n\n        'outline-none',\n        'focus-ring-inside',\n        'ring-gray-8',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'input',\n    props: mergeProps(baseProps, zagProps, rest),\n  });\n};\n\nTreeViewNodeRenameInput.displayName = 'TreeView.NodeRenameInput';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAa,2BACX,UACG;CACH,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,WAAW,mBAAmB;CACpC,MAAM,YAAY,4BAA4B;CAE9C,MAAM,WAAW,SAAS,wBAAwB,SAAS;CAE3D,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GAEA;GACA;GAEA;GAEA;GACA;GACA;GAEA;GAKA;GAEA;GACA;GACA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,UAAU,IAAI;CAC7C,CAAC;AACH;AAEA,wBAAwB,cAAc"}

package/dist/components/collections/tree-view/tree-view-node-variants.d.ts

@@ -0,0 +1,15 @@
+//#region src/components/collections/tree-view/tree-view-node-variants.d.ts
+/**
+ * Compartilhado pelas duas linhas interativas do Tree View: `TreeView.Item` (nó folha) e
+ * `TreeView.BranchControl` (nó pai). As duas têm a mesma caixa — indentação, padding, hover,
+ * foco e seleção — e só diferem no conteúdo.
+ *
+ * A cor só declara `--tree-view-selected-*` e `--tree-view-solid-*`, e a `variant` decide qual
+ * par pinta a linha selecionada.
+ */
+export declare const treeViewNodeVariants: (props?: ({
+  variant?: "subtle" | "solid" | null | undefined;
+  colorScheme?: "gray" | "brand" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=tree-view-node-variants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-node-variants.d.ts","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-node-variants.ts"],"mappings":";;;;;;;;;qBAWa,uBAAoB;;;6CAuFhC"}

package/dist/components/collections/tree-view/tree-view-node-variants.js

@@ -0,0 +1,69 @@
+import { treeViewDefaultVariants } from "./use-tree-view-variants-context.js";
+import { cva } from "class-variance-authority";
+//#region src/components/collections/tree-view/tree-view-node-variants.ts
+/**
+* Compartilhado pelas duas linhas interativas do Tree View: `TreeView.Item` (nó folha) e
+* `TreeView.BranchControl` (nó pai). As duas têm a mesma caixa — indentação, padding, hover,
+* foco e seleção — e só diferem no conteúdo.
+*
+* A cor só declara `--tree-view-selected-*` e `--tree-view-solid-*`, e a `variant` decide qual
+* par pinta a linha selecionada.
+*/
+const treeViewNodeVariants = cva([
+	"[--tree-view-depth:calc(var(--depth)-1)]",
+	"[--tree-view-offset:calc(var(--tree-view-padding-inline)+var(--tree-view-indentation)*var(--tree-view-depth))]",
+	"[--focus-ring-width:2px]",
+	"[--focus-ring-offset:-2px]",
+	"flex",
+	"items-center",
+	"gap-(--tree-view-item-gap)",
+	"relative",
+	"w-full",
+	"ps-(--tree-view-offset)",
+	"pe-(--tree-view-padding-inline)",
+	"py-(--tree-view-padding-block)",
+	"border-none",
+	"rounded-md",
+	"corner-squircle",
+	"bg-transparent",
+	"text-gray-12",
+	"text-start",
+	"select-none",
+	"cursor-pointer",
+	"not-data-selected:not-data-disabled:hover:bg-gray-3",
+	"focus-ring-inside",
+	"ring-current",
+	"data-disabled:opacity-50",
+	"data-disabled:cursor-not-allowed"
+], {
+	variants: {
+		variant: {
+			subtle: ["data-selected:bg-(--tree-view-selected-bg)", "data-selected:text-(--tree-view-selected-fg)"],
+			solid: ["data-selected:bg-(--tree-view-solid-bg)", "data-selected:text-(--tree-view-solid-fg)"]
+		},
+		colorScheme: {
+			gray: [
+				"[--tree-view-selected-bg:var(--color-gray-4)]",
+				"[--tree-view-selected-fg:var(--color-gray-12)]",
+				"[--tree-view-solid-bg:var(--color-black)]",
+				"dark:[--tree-view-solid-bg:var(--color-white)]",
+				"[--tree-view-solid-fg:var(--color-white)]",
+				"dark:[--tree-view-solid-fg:var(--color-black)]"
+			],
+			brand: [
+				"[--tree-view-selected-bg:var(--color-brand-4)]",
+				"[--tree-view-selected-fg:var(--color-brand-12)]",
+				"[--tree-view-solid-bg:var(--color-brand-9)]",
+				"[--tree-view-solid-fg:var(--color-white)]"
+			]
+		}
+	},
+	defaultVariants: {
+		colorScheme: treeViewDefaultVariants.colorScheme,
+		variant: treeViewDefaultVariants.variant
+	}
+});
+//#endregion
+export { treeViewNodeVariants };
+
+//# sourceMappingURL=tree-view-node-variants.js.map

package/dist/components/collections/tree-view/tree-view-node-variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-node-variants.js","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-node-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { treeViewDefaultVariants } from './use-tree-view-variants-context';\n\n/**\n * Compartilhado pelas duas linhas interativas do Tree View: `TreeView.Item` (nó folha) e\n * `TreeView.BranchControl` (nó pai). As duas têm a mesma caixa — indentação, padding, hover,\n * foco e seleção — e só diferem no conteúdo.\n *\n * A cor só declara `--tree-view-selected-*` e `--tree-view-solid-*`, e a `variant` decide qual\n * par pinta a linha selecionada.\n */\nexport const treeViewNodeVariants = cva(\n  [\n    // `--depth` é a profundidade do nó, publicada como variável inline na\n    // própria linha e contada a partir de 1.\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    '[--focus-ring-width:2px]',\n    // Offset negativo porque o conteúdo de um branch recorta o que passa das\n    // suas bordas para animar a altura: com offset zero o anel é desenhado\n    // exatamente na borda da linha e some nos nós aninhados.\n    '[--focus-ring-offset:-2px]',\n\n    'flex',\n    'items-center',\n    'gap-(--tree-view-item-gap)',\n\n    'relative',\n\n    'w-full',\n\n    'ps-(--tree-view-offset)', // Recuo proporcional à profundidade do nó\n    'pe-(--tree-view-padding-inline)',\n    'py-(--tree-view-padding-block)',\n\n    'border-none',\n    'rounded-md',\n    'corner-squircle',\n\n    'bg-transparent',\n\n    'text-gray-12',\n    'text-start',\n\n    'select-none',\n    'cursor-pointer',\n\n    // O fundo só muda no hover de uma linha ainda não selecionada: navegar\n    // pelo teclado marca a linha apenas com o anel, sem parecer selecionada\n    // antes da confirmação, e uma linha selecionada mantém a cor exata do\n    // esquema.\n    'not-data-selected:not-data-disabled:hover:bg-gray-3',\n\n    'focus-ring-inside',\n    // O anel herda a cor do texto, que já é obrigado a contrastar com o fundo\n    // em qualquer variante e esquema — inclusive no `solid`, de fundo saturado.\n    'ring-current',\n\n    'data-disabled:opacity-50',\n    'data-disabled:cursor-not-allowed',\n  ],\n  {\n    variants: {\n      variant: {\n        subtle: [\n          'data-selected:bg-(--tree-view-selected-bg)',\n          'data-selected:text-(--tree-view-selected-fg)',\n        ],\n        solid: [\n          'data-selected:bg-(--tree-view-solid-bg)',\n          'data-selected:text-(--tree-view-solid-fg)',\n        ],\n      },\n      colorScheme: {\n        gray: [\n          '[--tree-view-selected-bg:var(--color-gray-4)]',\n          '[--tree-view-selected-fg:var(--color-gray-12)]',\n\n          '[--tree-view-solid-bg:var(--color-black)]',\n          'dark:[--tree-view-solid-bg:var(--color-white)]',\n          '[--tree-view-solid-fg:var(--color-white)]',\n          'dark:[--tree-view-solid-fg:var(--color-black)]',\n        ],\n        brand: [\n          '[--tree-view-selected-bg:var(--color-brand-4)]',\n          '[--tree-view-selected-fg:var(--color-brand-12)]',\n\n          '[--tree-view-solid-bg:var(--color-brand-9)]',\n          '[--tree-view-solid-fg:var(--color-white)]',\n        ],\n      },\n    },\n    defaultVariants: {\n      colorScheme: treeViewDefaultVariants.colorScheme,\n      variant: treeViewDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;;;;;;;;;;AAWA,MAAa,uBAAuB,IAClC;CAGE;CACA;CAEA;CAIA;CAEA;CACA;CACA;CAEA;CAEA;CAEA;CACA;CACA;CAEA;CACA;CACA;CAEA;CAEA;CACA;CAEA;CACA;CAMA;CAEA;CAGA;CAEA;CACA;AACF,GACA;CACE,UAAU;EACR,SAAS;GACP,QAAQ,CACN,8CACA,8CACF;GACA,OAAO,CACL,2CACA,2CACF;EACF;EACA,aAAa;GACX,MAAM;IACJ;IACA;IAEA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IAEA;IACA;GACF;EACF;CACF;CACA,iBAAiB;EACf,aAAa,wBAAwB;EACrC,SAAS,wBAAwB;CACnC;AACF,CACF"}

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

@@ -0,0 +1,54 @@
+import { TreeViewBranchProps } from "./tree-view-branch.js";
+import { TreeViewBranchContentProps } from "./tree-view-branch-content.js";
+import React from "react";
+import { NodeState, TreeNode } from "@zag-js/tree-view";
+//#region src/components/collections/tree-view/tree-view-node.d.ts
+/**
+ * Argumentos entregues ao `renderNode` para cada nó da árvore.
+ */
+export type TreeViewNodeRendererArgs<TTreeNode = TreeNode> = {
+  /** Nó da coleção sendo renderizado. */
+  node: TTreeNode;
+  /** Caminho de índices da raiz até o nó. */
+  indexPath: number[];
+  /** Estado calculado do nó: expansão, seleção, profundidade, marcação. */
+  nodeState: NodeState;
+};
+export type TreeViewNodeRendererProps<TTreeNode = TreeNode> = {
+  /**
+   * Renderiza uma linha da árvore.
+   *
+   * Recebe tanto folhas quanto branches — use `nodeState.isBranch` para
+   * decidir entre `TreeView.Item` e `TreeView.BranchControl`. O envoltório
+   * `TreeView.Branch` e o `TreeView.BranchContent` dos branches já são criados
+   * pelo próprio `NodeRenderer`.
+   */
+  renderNode: (props: TreeViewNodeRendererArgs<TTreeNode>) => React.ReactNode;
+  /**
+   * Elemento renderizado como primeiro filho de cada `BranchContent`,
+   * normalmente um `TreeView.BranchIndentGuide`.
+   */
+  indentGuide?: React.ReactElement | undefined;
+  /**
+   * Props repassadas a cada `TreeView.Branch`.
+   */
+  branchProps?: TreeViewBranchProps | undefined;
+  /**
+   * Props repassadas a cada `TreeView.BranchContent`.
+   */
+  branchContentProps?: TreeViewBranchContentProps | undefined;
+};
+/**
+ * Percorre a coleção e renderiza a árvore inteira, cuidando da recursão, dos
+ * `NodeProvider` e dos envoltórios de branch.
+ *
+ * Use quando todas as linhas seguirem o mesmo formato. Para layouts que
+ * precisam de controle total sobre a recursão — virtualização, por exemplo —
+ * monte os nós à mão com `TreeView.NodeProvider`.
+ */
+export declare const TreeViewNodeRenderer: {
+  <TTreeNode extends unknown = any>(props: TreeViewNodeRendererProps<TTreeNode>): React.ReactNode;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=tree-view-node.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-node.d.ts","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-node.tsx"],"mappings":";;;;;;;;YAcY,yBAAyB,YAAY;;EAE/C,MAAM;;EAEN;;EAEA,WAAW;;YAGD,0BAA0B,YAAY;;;;;;;;;EAShD,aAAa,OAAO,yBAAyB,eAAe,MAAM;;;;;EAKlE,cAAc,MAAM;;;;EAIpB,cAAc;;;;EAId,qBAAqB;;;;;;;;;;qBAWV;GAAwB,iCAAS,OACrC,0BAA0B,aAChC,MAAM"}

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

@@ -0,0 +1,47 @@
+import { useTreeViewContext } from "./use-tree-view-context.js";
+import { TreeViewBranch } from "./tree-view-branch.js";
+import { TreeViewBranchContent } from "./tree-view-branch-content.js";
+import { TreeViewNodeContext } from "./tree-view-node-context.js";
+import { TreeViewNodeProvider } from "./tree-view-node-provider.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/collections/tree-view/tree-view-node.tsx
+/**
+* Percorre a coleção e renderiza a árvore inteira, cuidando da recursão, dos
+* `NodeProvider` e dos envoltórios de branch.
+*
+* Use quando todas as linhas seguirem o mesmo formato. Para layouts que
+* precisam de controle total sobre a recursão — virtualização, por exemplo —
+* monte os nós à mão com `TreeView.NodeProvider`.
+*/
+const TreeViewNodeRenderer = (props) => {
+	const { renderNode, indentGuide, branchProps, branchContentProps } = props;
+	const treeView = useTreeViewContext();
+	const renderTreeNode = (node, indexPath) => /* @__PURE__ */ jsx(TreeViewNodeProvider, {
+		node,
+		indexPath,
+		children: /* @__PURE__ */ jsx(TreeViewNodeContext, { children: (nodeState) => {
+			if (!nodeState.isBranch) return renderNode({
+				node,
+				indexPath,
+				nodeState
+			});
+			return /* @__PURE__ */ jsxs(TreeViewBranch, {
+				...branchProps,
+				children: [renderNode({
+					node,
+					indexPath,
+					nodeState
+				}), /* @__PURE__ */ jsxs(TreeViewBranchContent, {
+					...branchContentProps,
+					children: [indentGuide, treeView.collection.getNodeChildren(node).map((child, index) => renderTreeNode(child, [...indexPath, index]))]
+				})]
+			});
+		} })
+	}, treeView.collection.getNodeValue(node));
+	return treeView.collection.getNodeChildren(treeView.collection.rootNode).map((node, index) => renderTreeNode(node, [index]));
+};
+TreeViewNodeRenderer.displayName = "TreeView.NodeRenderer";
+//#endregion
+export { TreeViewNodeRenderer };
+
+//# sourceMappingURL=tree-view-node.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-node.js","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-node.tsx"],"sourcesContent":["import type { NodeState, TreeNode } from '@zag-js/tree-view';\nimport type React from 'react';\nimport { TreeViewBranch, type TreeViewBranchProps } from './tree-view-branch';\nimport {\n  TreeViewBranchContent,\n  type TreeViewBranchContentProps,\n} from './tree-view-branch-content';\nimport { TreeViewNodeContext } from './tree-view-node-context';\nimport { TreeViewNodeProvider } from './tree-view-node-provider';\nimport { useTreeViewContext } from './use-tree-view-context';\n\n/**\n * Argumentos entregues ao `renderNode` para cada nó da árvore.\n */\nexport type TreeViewNodeRendererArgs<TTreeNode = TreeNode> = {\n  /** Nó da coleção sendo renderizado. */\n  node: TTreeNode;\n  /** Caminho de índices da raiz até o nó. */\n  indexPath: number[];\n  /** Estado calculado do nó: expansão, seleção, profundidade, marcação. */\n  nodeState: NodeState;\n};\n\nexport type TreeViewNodeRendererProps<TTreeNode = TreeNode> = {\n  /**\n   * Renderiza uma linha da árvore.\n   *\n   * Recebe tanto folhas quanto branches — use `nodeState.isBranch` para\n   * decidir entre `TreeView.Item` e `TreeView.BranchControl`. O envoltório\n   * `TreeView.Branch` e o `TreeView.BranchContent` dos branches já são criados\n   * pelo próprio `NodeRenderer`.\n   */\n  renderNode: (props: TreeViewNodeRendererArgs<TTreeNode>) => React.ReactNode;\n  /**\n   * Elemento renderizado como primeiro filho de cada `BranchContent`,\n   * normalmente um `TreeView.BranchIndentGuide`.\n   */\n  indentGuide?: React.ReactElement | undefined;\n  /**\n   * Props repassadas a cada `TreeView.Branch`.\n   */\n  branchProps?: TreeViewBranchProps | undefined;\n  /**\n   * Props repassadas a cada `TreeView.BranchContent`.\n   */\n  branchContentProps?: TreeViewBranchContentProps | undefined;\n};\n\n/**\n * Percorre a coleção e renderiza a árvore inteira, cuidando da recursão, dos\n * `NodeProvider` e dos envoltórios de branch.\n *\n * Use quando todas as linhas seguirem o mesmo formato. Para layouts que\n * precisam de controle total sobre a recursão — virtualização, por exemplo —\n * monte os nós à mão com `TreeView.NodeProvider`.\n */\nexport const TreeViewNodeRenderer = <TTreeNode extends TreeNode = TreeNode>(\n  props: TreeViewNodeRendererProps<TTreeNode>,\n): React.ReactNode => {\n  const { renderNode, indentGuide, branchProps, branchContentProps } = props;\n\n  const treeView = useTreeViewContext();\n\n  const renderTreeNode = (node: TTreeNode, indexPath: number[]) => (\n    // O valor do nó é a identidade estável da coleção. Usar o caminho de\n    // índices quebraria a reconciliação ao inserir ou remover irmãos.\n    <TreeViewNodeProvider\n      key={treeView.collection.getNodeValue(node)}\n      node={node}\n      indexPath={indexPath}\n    >\n      <TreeViewNodeContext>\n        {(nodeState) => {\n          if (!nodeState.isBranch) {\n            return renderNode({ node, indexPath, nodeState });\n          }\n\n          return (\n            <TreeViewBranch {...branchProps}>\n              {renderNode({ node, indexPath, nodeState })}\n\n              <TreeViewBranchContent {...branchContentProps}>\n                {indentGuide}\n\n                {treeView.collection\n                  .getNodeChildren(node)\n                  .map((child, index) =>\n                    renderTreeNode(child as TTreeNode, [...indexPath, index]),\n                  )}\n              </TreeViewBranchContent>\n            </TreeViewBranch>\n          );\n        }}\n      </TreeViewNodeContext>\n    </TreeViewNodeProvider>\n  );\n\n  return treeView.collection\n    .getNodeChildren(treeView.collection.rootNode)\n    .map((node, index) => renderTreeNode(node as TTreeNode, [index]));\n};\n\nTreeViewNodeRenderer.displayName = 'TreeView.NodeRenderer';\n"],"mappings":";;;;;;;;;;;;;;;AAwDA,MAAa,wBACX,UACoB;CACpB,MAAM,EAAE,YAAY,aAAa,aAAa,uBAAuB;CAErE,MAAM,WAAW,mBAAmB;CAEpC,MAAM,kBAAkB,MAAiB,cAGvC,oBAAC,sBAAD;EAEQ;EACK;EAEX,UAAA,oBAAC,qBAAD,EAAA,WACI,cAAc;GACd,IAAI,CAAC,UAAU,UACb,OAAO,WAAW;IAAE;IAAM;IAAW;GAAU,CAAC;GAGlD,OACE,qBAAC,gBAAD;IAAgB,GAAI;IAApB,UAAA,CACG,WAAW;KAAE;KAAM;KAAW;IAAU,CAAC,GAE1C,qBAAC,uBAAD;KAAuB,GAAI;KAA3B,UAAA,CACG,aAEA,SAAS,WACP,gBAAgB,IAAI,CAAC,CACrB,KAAK,OAAO,UACX,eAAe,OAAoB,CAAC,GAAG,WAAW,KAAK,CAAC,CAC1D,CACmB;IACT,CAAA,CAAA;;EAEpB,EACmB,CAAA;CACD,GA3Bf,SAAS,WAAW,aAAa,IAAI,CA2BtB;CAGxB,OAAO,SAAS,WACb,gBAAgB,SAAS,WAAW,QAAQ,CAAC,CAC7C,KAAK,MAAM,UAAU,eAAe,MAAmB,CAAC,KAAK,CAAC,CAAC;AACpE;AAEA,qBAAqB,cAAc"}

package/dist/components/collections/tree-view/tree-view-root-provider.d.ts

@@ -0,0 +1,46 @@
+import { UseTreeViewReturn } from "./use-tree-view.js";
+import { TreeViewRenderStrategyContextValue } from "./use-tree-view-render-strategy-context.js";
+import { TreeViewVariants } from "./use-tree-view-variants-context.js";
+import { MergeOverride } from "@lucasbernardosn/utils";
+import { useRender } from "@base-ui/react";
+import { TreeNode } from "@zag-js/collection";
+//#region src/components/collections/tree-view/tree-view-root-provider.d.ts
+type RootProviderProps<T extends TreeNode> = {
+  /**
+   * Instância do Tree View criada com o hook `useTreeView`.
+   */
+  value: UseTreeViewReturn<T>;
+};
+/**
+ * Props do `TreeView.RootProvider`: a instância da árvore, as opções de
+ * estilo e as props do elemento renderizado.
+ */
+export type TreeViewRootProviderProps<T extends TreeNode> = MergeOverride<useRender.ComponentProps<'div'>, RootProviderProps<T> & TreeViewVariants & TreeViewRenderStrategyContextValue>;
+/**
+ * Raiz do Tree View alimentada por uma árvore criada fora dela.
+ *
+ * Recebe em `value` o retorno de `useTreeView`, o que permite ler o estado e
+ * comandar a árvore de componentes irmãos — botões de expandir tudo,
+ * contadores de seleção, virtualização.
+ *
+ * @example
+ * ```tsx
+ * const treeView = useTreeView({ collection });
+ *
+ * return (
+ *   <>
+ *     <button onClick={() => treeView.expand()}>Expandir tudo</button>
+ *
+ *     <TreeView.RootProvider value={treeView}>
+ *       <TreeView.Tree>…</TreeView.Tree>
+ *     </TreeView.RootProvider>
+ *   </>
+ * );
+ * ```
+ */
+export declare const TreeViewRootProvider: {
+  <T extends unknown>(props: TreeViewRootProviderProps<T>): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=tree-view-root-provider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-root-provider.d.ts","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-root-provider.tsx"],"mappings":";;;;;;;KAeK,kBAAkB,UAAU;;;;EAI/B,OAAO,kBAAkB;;;;;;YAOf,0BAA0B,UAAU,YAAY,cAC1D,UAAU,uBACV,kBAAkB,KAAK,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;qBA2B/B;GAAwB,mBAAC,OAC7B,0BAA0B,qBAAE,IAAA"}

package/dist/components/collections/tree-view/tree-view-root-provider.js

@@ -0,0 +1,68 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { TreeViewContextProvider } from "./use-tree-view-context.js";
+import { TreeViewRenderStrategyContextProvider } from "./use-tree-view-render-strategy-context.js";
+import { TreeViewVariantsContextProvider } from "./use-tree-view-variants-context.js";
+import { createSplitProps } from "@lucasbernardosn/utils";
+import { mergeProps, useRender } from "@base-ui/react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/collections/tree-view/tree-view-root-provider.tsx
+const splitVariantProps = createSplitProps();
+/**
+* Raiz do Tree View alimentada por uma árvore criada fora dela.
+*
+* Recebe em `value` o retorno de `useTreeView`, o que permite ler o estado e
+* comandar a árvore de componentes irmãos — botões de expandir tudo,
+* contadores de seleção, virtualização.
+*
+* @example
+* ```tsx
+* const treeView = useTreeView({ collection });
+*
+* return (
+*   <>
+*     <button onClick={() => treeView.expand()}>Expandir tudo</button>
+*
+*     <TreeView.RootProvider value={treeView}>
+*       <TreeView.Tree>…</TreeView.Tree>
+*     </TreeView.RootProvider>
+*   </>
+* );
+* ```
+*/
+const TreeViewRootProvider = (props) => {
+	const [variantProps, withoutVariantProps] = splitVariantProps(props, [
+		"colorScheme",
+		"size",
+		"variant"
+	]);
+	const { value: treeView, render, className, keepMounted = false, ...rest } = withoutVariantProps;
+	const zagProps = treeView.getRootProps();
+	const baseProps = {
+		"data-component": "TreeView.RootProvider",
+		className: mergeTwClassNames([
+			"flex",
+			"flex-col",
+			"gap-2",
+			"w-full"
+		], className)
+	};
+	return /* @__PURE__ */ jsx(TreeViewContextProvider, {
+		value: treeView,
+		children: /* @__PURE__ */ jsx(TreeViewVariantsContextProvider, {
+			value: variantProps,
+			children: /* @__PURE__ */ jsx(TreeViewRenderStrategyContextProvider, {
+				value: { keepMounted },
+				children: useRender({
+					render,
+					defaultTagName: "div",
+					props: mergeProps(baseProps, zagProps, rest)
+				})
+			})
+		})
+	});
+};
+TreeViewRootProvider.displayName = "TreeView.RootProvider";
+//#endregion
+export { TreeViewRootProvider };
+
+//# sourceMappingURL=tree-view-root-provider.js.map

package/dist/components/collections/tree-view/tree-view-root-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-root-provider.js","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-root-provider.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport type { TreeNode } from '@zag-js/collection';\nimport { mergeTwClassNames } from '#utils';\nimport type { UseTreeViewReturn } from './use-tree-view';\nimport { TreeViewContextProvider } from './use-tree-view-context';\nimport {\n  TreeViewRenderStrategyContextProvider,\n  type TreeViewRenderStrategyContextValue,\n} from './use-tree-view-render-strategy-context';\nimport {\n  type TreeViewVariants,\n  TreeViewVariantsContextProvider,\n} from './use-tree-view-variants-context';\n\ntype RootProviderProps<T extends TreeNode> = {\n  /**\n   * Instância do Tree View criada com o hook `useTreeView`.\n   */\n  value: UseTreeViewReturn<T>;\n};\n\n/**\n * Props do `TreeView.RootProvider`: a instância da árvore, as opções de\n * estilo e as props do elemento renderizado.\n */\nexport type TreeViewRootProviderProps<T extends TreeNode> = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  RootProviderProps<T> & TreeViewVariants & TreeViewRenderStrategyContextValue\n>;\n\nconst splitVariantProps = createSplitProps<TreeViewVariants>();\n\n/**\n * Raiz do Tree View alimentada por uma árvore criada fora dela.\n *\n * Recebe em `value` o retorno de `useTreeView`, o que permite ler o estado e\n * comandar a árvore de componentes irmãos — botões de expandir tudo,\n * contadores de seleção, virtualização.\n *\n * @example\n * ```tsx\n * const treeView = useTreeView({ collection });\n *\n * return (\n *   <>\n *     <button onClick={() => treeView.expand()}>Expandir tudo</button>\n *\n *     <TreeView.RootProvider value={treeView}>\n *       <TreeView.Tree>…</TreeView.Tree>\n *     </TreeView.RootProvider>\n *   </>\n * );\n * ```\n */\nexport const TreeViewRootProvider = <T extends TreeNode>(\n  props: TreeViewRootProviderProps<T>,\n) => {\n  const [variantProps, withoutVariantProps] = splitVariantProps(props, [\n    'colorScheme',\n    'size',\n    'variant',\n  ]);\n\n  const {\n    value: treeView,\n    render,\n    className,\n    keepMounted = false,\n    ...rest\n  } = withoutVariantProps;\n\n  const zagProps = treeView.getRootProps();\n\n  const baseProps = {\n    'data-component': 'TreeView.RootProvider',\n    className: mergeTwClassNames(\n      ['flex', 'flex-col', 'gap-2', 'w-full'],\n      className,\n    ),\n  };\n\n  return (\n    <TreeViewContextProvider value={treeView}>\n      <TreeViewVariantsContextProvider value={variantProps}>\n        <TreeViewRenderStrategyContextProvider value={{ keepMounted }}>\n          {useRender({\n            render,\n            defaultTagName: 'div',\n            props: mergeProps(baseProps, zagProps, rest),\n          })}\n        </TreeViewRenderStrategyContextProvider>\n      </TreeViewVariantsContextProvider>\n    </TreeViewContextProvider>\n  );\n};\n\nTreeViewRootProvider.displayName = 'TreeView.RootProvider';\n"],"mappings":";;;;;;;;AA+BA,MAAM,oBAAoB,iBAAmC;;;;;;;;;;;;;;;;;;;;;;;AAwB7D,MAAa,wBACX,UACG;CACH,MAAM,CAAC,cAAc,uBAAuB,kBAAkB,OAAO;EACnE;EACA;EACA;CACF,CAAC;CAED,MAAM,EACJ,OAAO,UACP,QACA,WACA,cAAc,OACd,GAAG,SACD;CAEJ,MAAM,WAAW,SAAS,aAAa;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GAAC;GAAQ;GAAY;GAAS;EAAQ,GACtC,SACF;CACF;CAEA,OACE,oBAAC,yBAAD;EAAyB,OAAO;EAC9B,UAAA,oBAAC,iCAAD;GAAiC,OAAO;GACtC,UAAA,oBAAC,uCAAD;IAAuC,OAAO,EAAE,YAAY;IACzD,UAAA,UAAU;KACT;KACA,gBAAgB;KAChB,OAAO,WAAW,WAAW,UAAU,IAAI;IAC7C,CAAC;GACoC,CAAA;EACR,CAAA;CACV,CAAA;AAE7B;AAEA,qBAAqB,cAAc"}

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

@@ -0,0 +1,50 @@
+import { UseTreeViewProps } from "./use-tree-view.js";
+import { TreeViewRenderStrategyContextValue } from "./use-tree-view-render-strategy-context.js";
+import { TreeViewVariants } from "./use-tree-view-variants-context.js";
+import { MergeOverride } from "@lucasbernardosn/utils";
+import { useRender } from "@base-ui/react";
+import { TreeNode } from "@zag-js/collection";
+//#region src/components/collections/tree-view/tree-view-root.d.ts
+/**
+ * Props do `TreeView.Root`: as opções da árvore, as opções de estilo e as
+ * props do elemento renderizado.
+ */
+export type TreeViewRootProps<T extends TreeNode> = MergeOverride<useRender.ComponentProps<'div'>, UseTreeViewProps<T> & TreeViewVariants & TreeViewRenderStrategyContextValue>;
+/**
+ * Raiz do Tree View.
+ *
+ * Cria a árvore a partir da `collection` e disponibiliza estado, opções de
+ * estilo e estratégia de renderização para todas as partes aninhadas.
+ *
+ * Use o `TreeView.RootProvider` no lugar deste componente quando a árvore
+ * precisar ser lida ou comandada de fora da própria subárvore.
+ *
+ * @example
+ * ```tsx
+ * <TreeView.Root collection={collection} size="sm" colorScheme="brand">
+ *   <TreeView.Label>Arquivos</TreeView.Label>
+ *
+ *   <TreeView.Tree>
+ *     <TreeView.NodeRenderer<FileNode>
+ *       renderNode={({ node, nodeState }) =>
+ *         nodeState.isBranch ? (
+ *           <TreeView.BranchControl>
+ *             <TreeView.BranchText>{node.name}</TreeView.BranchText>
+ *           </TreeView.BranchControl>
+ *         ) : (
+ *           <TreeView.Item>
+ *             <TreeView.ItemText>{node.name}</TreeView.ItemText>
+ *           </TreeView.Item>
+ *         )
+ *       }
+ *     />
+ *   </TreeView.Tree>
+ * </TreeView.Root>
+ * ```
+ */
+export declare const TreeViewRoot: {
+  <T extends unknown>(props: TreeViewRootProps<T>): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=tree-view-root.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-root.d.ts","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-root.tsx"],"mappings":";;;;;;;;;;;YAoBY,kBAAkB,UAAU,YAAY,cAClD,UAAU,uBACV,iBAAiB,KAAK,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAqC9B;GAAgB,mBAAC,OACrB,kBAAkB,qBAAE,IAAA"}

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

@@ -0,0 +1,83 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { TreeViewContextProvider } from "./use-tree-view-context.js";
+import { TreeViewRenderStrategyContextProvider } from "./use-tree-view-render-strategy-context.js";
+import { TreeViewVariantsContextProvider } from "./use-tree-view-variants-context.js";
+import { useTreeView } from "./use-tree-view.js";
+import { createSplitProps } from "@lucasbernardosn/utils";
+import { mergeProps, useRender } from "@base-ui/react";
+import { jsx } from "react/jsx-runtime";
+import * as ZagTreeView from "@zag-js/tree-view";
+//#region src/components/collections/tree-view/tree-view-root.tsx
+const splitVariantProps = createSplitProps();
+/**
+* Raiz do Tree View.
+*
+* Cria a árvore a partir da `collection` e disponibiliza estado, opções de
+* estilo e estratégia de renderização para todas as partes aninhadas.
+*
+* Use o `TreeView.RootProvider` no lugar deste componente quando a árvore
+* precisar ser lida ou comandada de fora da própria subárvore.
+*
+* @example
+* ```tsx
+* <TreeView.Root collection={collection} size="sm" colorScheme="brand">
+*   <TreeView.Label>Arquivos</TreeView.Label>
+*
+*   <TreeView.Tree>
+*     <TreeView.NodeRenderer<FileNode>
+*       renderNode={({ node, nodeState }) =>
+*         nodeState.isBranch ? (
+*           <TreeView.BranchControl>
+*             <TreeView.BranchText>{node.name}</TreeView.BranchText>
+*           </TreeView.BranchControl>
+*         ) : (
+*           <TreeView.Item>
+*             <TreeView.ItemText>{node.name}</TreeView.ItemText>
+*           </TreeView.Item>
+*         )
+*       }
+*     />
+*   </TreeView.Tree>
+* </TreeView.Root>
+* ```
+*/
+const TreeViewRoot = (props) => {
+	const [variantProps, withoutVariantProps] = splitVariantProps(props, [
+		"colorScheme",
+		"size",
+		"variant"
+	]);
+	/** Criado aqui, e não no módulo, porque o tipo depende do genérico `T`. */
+	const [useTreeViewProps, elementProps] = createSplitProps()(withoutVariantProps, ZagTreeView.props);
+	const { render, className, keepMounted = false, ...rest } = elementProps;
+	const treeView = useTreeView(useTreeViewProps);
+	const zagProps = treeView.getRootProps();
+	const baseProps = {
+		"data-component": "TreeView.Root",
+		className: mergeTwClassNames([
+			"flex",
+			"flex-col",
+			"gap-2",
+			"w-full"
+		], className)
+	};
+	return /* @__PURE__ */ jsx(TreeViewContextProvider, {
+		value: treeView,
+		children: /* @__PURE__ */ jsx(TreeViewVariantsContextProvider, {
+			value: variantProps,
+			children: /* @__PURE__ */ jsx(TreeViewRenderStrategyContextProvider, {
+				value: { keepMounted },
+				children: useRender({
+					render,
+					defaultTagName: "div",
+					props: mergeProps(baseProps, zagProps, rest)
+				})
+			})
+		})
+	});
+};
+TreeViewRoot.displayName = "TreeView.Root";
+//#endregion
+export { TreeViewRoot };
+
+//# sourceMappingURL=tree-view-root.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-root.js","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-root.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport type { TreeNode } from '@zag-js/collection';\nimport * as ZagTreeView from '@zag-js/tree-view';\nimport { mergeTwClassNames } from '#utils';\nimport { type UseTreeViewProps, useTreeView } from './use-tree-view';\nimport { TreeViewContextProvider } from './use-tree-view-context';\nimport {\n  TreeViewRenderStrategyContextProvider,\n  type TreeViewRenderStrategyContextValue,\n} from './use-tree-view-render-strategy-context';\nimport {\n  type TreeViewVariants,\n  TreeViewVariantsContextProvider,\n} from './use-tree-view-variants-context';\n\n/**\n * Props do `TreeView.Root`: as opções da árvore, as opções de estilo e as\n * props do elemento renderizado.\n */\nexport type TreeViewRootProps<T extends TreeNode> = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  UseTreeViewProps<T> & TreeViewVariants & TreeViewRenderStrategyContextValue\n>;\n\nconst splitVariantProps = createSplitProps<TreeViewVariants>();\n\n/**\n * Raiz do Tree View.\n *\n * Cria a árvore a partir da `collection` e disponibiliza estado, opções de\n * estilo e estratégia de renderização para todas as partes aninhadas.\n *\n * Use o `TreeView.RootProvider` no lugar deste componente quando a árvore\n * precisar ser lida ou comandada de fora da própria subárvore.\n *\n * @example\n * ```tsx\n * <TreeView.Root collection={collection} size=\"sm\" colorScheme=\"brand\">\n *   <TreeView.Label>Arquivos</TreeView.Label>\n *\n *   <TreeView.Tree>\n *     <TreeView.NodeRenderer<FileNode>\n *       renderNode={({ node, nodeState }) =>\n *         nodeState.isBranch ? (\n *           <TreeView.BranchControl>\n *             <TreeView.BranchText>{node.name}</TreeView.BranchText>\n *           </TreeView.BranchControl>\n *         ) : (\n *           <TreeView.Item>\n *             <TreeView.ItemText>{node.name}</TreeView.ItemText>\n *           </TreeView.Item>\n *         )\n *       }\n *     />\n *   </TreeView.Tree>\n * </TreeView.Root>\n * ```\n */\nexport const TreeViewRoot = <T extends TreeNode>(\n  props: TreeViewRootProps<T>,\n) => {\n  const [variantProps, withoutVariantProps] = splitVariantProps(props, [\n    'colorScheme',\n    'size',\n    'variant',\n  ]);\n\n  /** Criado aqui, e não no módulo, porque o tipo depende do genérico `T`. */\n  const [useTreeViewProps, elementProps] = createSplitProps<\n    UseTreeViewProps<T>\n  >()(withoutVariantProps, ZagTreeView.props);\n\n  const { render, className, keepMounted = false, ...rest } = elementProps;\n\n  const treeView = useTreeView(useTreeViewProps);\n\n  const zagProps = treeView.getRootProps();\n\n  const baseProps = {\n    'data-component': 'TreeView.Root',\n    className: mergeTwClassNames(\n      ['flex', 'flex-col', 'gap-2', 'w-full'],\n      className,\n    ),\n  };\n\n  return (\n    <TreeViewContextProvider value={treeView}>\n      <TreeViewVariantsContextProvider value={variantProps}>\n        <TreeViewRenderStrategyContextProvider value={{ keepMounted }}>\n          {useRender({\n            render,\n            defaultTagName: 'div',\n            props: mergeProps(baseProps, zagProps, rest),\n          })}\n        </TreeViewRenderStrategyContextProvider>\n      </TreeViewVariantsContextProvider>\n    </TreeViewContextProvider>\n  );\n};\n\nTreeViewRoot.displayName = 'TreeView.Root';\n"],"mappings":";;;;;;;;;;AAyBA,MAAM,oBAAoB,iBAAmC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkC7D,MAAa,gBACX,UACG;CACH,MAAM,CAAC,cAAc,uBAAuB,kBAAkB,OAAO;EACnE;EACA;EACA;CACF,CAAC;;CAGD,MAAM,CAAC,kBAAkB,gBAAgB,iBAEvC,CAAC,CAAC,qBAAqB,YAAY,KAAK;CAE1C,MAAM,EAAE,QAAQ,WAAW,cAAc,OAAO,GAAG,SAAS;CAE5D,MAAM,WAAW,YAAY,gBAAgB;CAE7C,MAAM,WAAW,SAAS,aAAa;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GAAC;GAAQ;GAAY;GAAS;EAAQ,GACtC,SACF;CACF;CAEA,OACE,oBAAC,yBAAD;EAAyB,OAAO;EAC9B,UAAA,oBAAC,iCAAD;GAAiC,OAAO;GACtC,UAAA,oBAAC,uCAAD;IAAuC,OAAO,EAAE,YAAY;IACzD,UAAA,UAAU;KACT;KACA,gBAAgB;KAChB,OAAO,WAAW,WAAW,UAAU,IAAI;IAC7C,CAAC;GACoC,CAAA;EACR,CAAA;CACV,CAAA;AAE7B;AAEA,aAAa,cAAc"}

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

@@ -0,0 +1,13 @@
+//#region src/components/collections/tree-view/tree-view-text-class-names.d.ts
+/**
+ * Classes compartilhadas pelos dois slots de rótulo do Tree View:
+ * `TreeView.ItemText` e `TreeView.BranchText`.
+ *
+ * O texto ocupa o espaço restante da linha (`flex-1`) para que ações
+ * posicionadas depois dele encostem na borda oposta. O `min-w-0` é o que
+ * permite o `truncate` funcionar: sem ele o item flex usa `min-width: auto` e
+ * nunca encolhe abaixo do conteúdo.
+ */
+export declare const treeViewTextClassNames: string[];
+//#endregion
+//# sourceMappingURL=tree-view-text-class-names.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-text-class-names.d.ts","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-text-class-names.ts"],"mappings":";;;;;;;;;;qBASa"}

package/dist/components/collections/tree-view/tree-view-text-class-names.js

@@ -0,0 +1,23 @@
+//#region src/components/collections/tree-view/tree-view-text-class-names.ts
+/**
+* Classes compartilhadas pelos dois slots de rótulo do Tree View:
+* `TreeView.ItemText` e `TreeView.BranchText`.
+*
+* O texto ocupa o espaço restante da linha (`flex-1`) para que ações
+* posicionadas depois dele encostem na borda oposta. O `min-w-0` é o que
+* permite o `truncate` funcionar: sem ele o item flex usa `min-width: auto` e
+* nunca encolhe abaixo do conteúdo.
+*/
+const treeViewTextClassNames = [
+	"flex-1",
+	"min-w-0",
+	"truncate",
+	"[&>svg]:inline-block",
+	"[&>svg]:align-text-bottom",
+	"[&>svg]:me-(--tree-view-item-gap)",
+	"in-data-renaming:hidden"
+];
+//#endregion
+export { treeViewTextClassNames };
+
+//# sourceMappingURL=tree-view-text-class-names.js.map