@lucasbernardosn/react-ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-text-class-names.js","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-text-class-names.ts"],"sourcesContent":["/**\n * Classes compartilhadas pelos dois slots de rótulo do Tree View:\n * `TreeView.ItemText` e `TreeView.BranchText`.\n *\n * O texto ocupa o espaço restante da linha (`flex-1`) para que ações\n * posicionadas depois dele encostem na borda oposta. O `min-w-0` é o que\n * permite o `truncate` funcionar: sem ele o item flex usa `min-width: auto` e\n * nunca encolhe abaixo do conteúdo.\n */\nexport const treeViewTextClassNames = [\n  'flex-1',\n  'min-w-0',\n  'truncate',\n\n  // Um ícone dentro do rótulo fica inline em vez de transformar o slot em\n  // container flex, o que preservaria o `truncate` — ele não se aplica a um nó\n  // de texto anônimo dentro de um container flex.\n  '[&>svg]:inline-block',\n  '[&>svg]:align-text-bottom',\n  '[&>svg]:me-(--tree-view-item-gap)',\n\n  // O Zag só esconde o `NodeRenameInput`; sem isto, o rótulo continua ao lado\n  // do campo durante a renomeação. O `data-renaming` fica na linha, e os\n  // filhos de um branch são irmãos dela, então não herdam.\n  'in-data-renaming:hidden',\n];\n"],"mappings":";;;;;;;;;;AASA,MAAa,yBAAyB;CACpC;CACA;CACA;CAKA;CACA;CACA;CAKA;AACF"}

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

@@ -0,0 +1,11 @@
+//#region src/components/collections/tree-view/tree-view-tree-variants.d.ts
+/**
+ * O `Tree` declara todas as CSS variables de dimensionamento consumidas pelas
+ * partes internas, e é por isso que todo nó renderizado precisa viver dentro
+ * dele. O tamanho definido aqui vale para a árvore inteira.
+ */
+export declare const treeViewTreeVariants: (props?: ({
+  size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=tree-view-tree-variants.d.ts.map

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

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

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

@@ -0,0 +1,55 @@
+import { treeViewDefaultVariants } from "./use-tree-view-variants-context.js";
+import { cva } from "class-variance-authority";
+//#region src/components/collections/tree-view/tree-view-tree-variants.ts
+/**
+* O `Tree` declara todas as CSS variables de dimensionamento consumidas pelas
+* partes internas, e é por isso que todo nó renderizado precisa viver dentro
+* dele. O tamanho definido aqui vale para a árvore inteira.
+*/
+const treeViewTreeVariants = cva([
+	"[--tree-view-item-gap:--spacing(2)]",
+	"[--tree-view-vertical-spacing:--spacing(0.5)]",
+	"[--tree-view-indentation:calc(var(--tree-view-indent-size)+var(--tree-view-icon-size)*0.5)]",
+	"flex",
+	"flex-col",
+	"font-medium",
+	"space-y-(--tree-view-vertical-spacing)",
+	"[&_svg]:size-(--tree-view-icon-size)",
+	"[&_svg]:shrink-0"
+], {
+	variants: { size: {
+		xs: [
+			"[--tree-view-indent-size:--spacing(4)]",
+			"[--tree-view-icon-size:--spacing(3)]",
+			"[--tree-view-padding-inline:--spacing(2)]",
+			"[--tree-view-padding-block:--spacing(1)]",
+			"text-xs"
+		],
+		sm: [
+			"[--tree-view-indent-size:--spacing(4)]",
+			"[--tree-view-icon-size:--spacing(3)]",
+			"[--tree-view-padding-inline:--spacing(3)]",
+			"[--tree-view-padding-block:--spacing(1)]",
+			"text-sm"
+		],
+		md: [
+			"[--tree-view-indent-size:--spacing(4)]",
+			"[--tree-view-icon-size:--spacing(4)]",
+			"[--tree-view-padding-inline:--spacing(3)]",
+			"[--tree-view-padding-block:--spacing(1.5)]",
+			"text-sm"
+		],
+		lg: [
+			"[--tree-view-indent-size:--spacing(5)]",
+			"[--tree-view-icon-size:--spacing(5)]",
+			"[--tree-view-padding-inline:--spacing(4)]",
+			"[--tree-view-padding-block:--spacing(2)]",
+			"text-base"
+		]
+	} },
+	defaultVariants: { size: treeViewDefaultVariants.size }
+});
+//#endregion
+export { treeViewTreeVariants };
+
+//# sourceMappingURL=tree-view-tree-variants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-tree-variants.js","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-tree-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { treeViewDefaultVariants } from './use-tree-view-variants-context';\n\n/**\n * O `Tree` declara todas as CSS variables de dimensionamento consumidas pelas\n * partes internas, e é por isso que todo nó renderizado precisa viver dentro\n * dele. O tamanho definido aqui vale para a árvore inteira.\n */\nexport const treeViewTreeVariants = cva(\n  [\n    '[--tree-view-item-gap:--spacing(2)]', // Espaço entre ícone, checkbox e texto\n    '[--tree-view-vertical-spacing:--spacing(0.5)]', // Espaço vertical entre nós\n\n    // Recuo efetivo por nível. Soma metade do ícone ao recuo base para que o\n    // texto de um filho alinhe com o texto do pai, e não com o indicador.\n    '[--tree-view-indentation:calc(var(--tree-view-indent-size)+var(--tree-view-icon-size)*0.5)]',\n\n    'flex',\n    'flex-col',\n\n    'font-medium',\n\n    'space-y-(--tree-view-vertical-spacing)',\n\n    // Todo ícone da árvore herda o tamanho do nível escolhido, sem precisar de\n    // classe em cada ponto de uso.\n    '[&_svg]:size-(--tree-view-icon-size)',\n    '[&_svg]:shrink-0',\n  ],\n  {\n    variants: {\n      size: {\n        xs: [\n          '[--tree-view-indent-size:--spacing(4)]',\n          '[--tree-view-icon-size:--spacing(3)]',\n          '[--tree-view-padding-inline:--spacing(2)]',\n          '[--tree-view-padding-block:--spacing(1)]',\n\n          'text-xs',\n        ],\n        sm: [\n          '[--tree-view-indent-size:--spacing(4)]',\n          '[--tree-view-icon-size:--spacing(3)]',\n          '[--tree-view-padding-inline:--spacing(3)]',\n          '[--tree-view-padding-block:--spacing(1)]',\n\n          'text-sm',\n        ],\n        md: [\n          '[--tree-view-indent-size:--spacing(4)]',\n          '[--tree-view-icon-size:--spacing(4)]',\n          '[--tree-view-padding-inline:--spacing(3)]',\n          '[--tree-view-padding-block:--spacing(1.5)]',\n\n          'text-sm',\n        ],\n        lg: [\n          '[--tree-view-indent-size:--spacing(5)]',\n          '[--tree-view-icon-size:--spacing(5)]',\n          '[--tree-view-padding-inline:--spacing(4)]',\n          '[--tree-view-padding-block:--spacing(2)]',\n\n          'text-base',\n        ],\n      },\n    },\n    defaultVariants: {\n      size: treeViewDefaultVariants.size,\n    },\n  },\n);\n"],"mappings":";;;;;;;;AAQA,MAAa,uBAAuB,IAClC;CACE;CACA;CAIA;CAEA;CACA;CAEA;CAEA;CAIA;CACA;AACF,GACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;GACF;GACA;GACA;GACA;GAEA;EACF;EACA,IAAI;GACF;GACA;GACA;GACA;GAEA;EACF;EACA,IAAI;GACF;GACA;GACA;GACA;GAEA;EACF;EACA,IAAI;GACF;GACA;GACA;GACA;GAEA;EACF;CACF,EACF;CACA,iBAAiB,EACf,MAAM,wBAAwB,KAChC;AACF,CACF"}

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

@@ -0,0 +1,16 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/collections/tree-view/tree-view-tree.d.ts
+export type TreeViewTreeProps = useRender.ComponentProps<'div'>;
+/**
+ * Lista de nós da árvore, e o elemento que concentra a navegação por teclado.
+ *
+ * É aqui que o tamanho escolhido na raiz vira CSS variables — recuo, tamanho
+ * de ícone e espaçamentos —, então todo nó precisa ser renderizado dentro
+ * dele.
+ */
+export declare const TreeViewTree: {
+  (props: TreeViewTreeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=tree-view-tree.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-tree.d.ts","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-tree.tsx"],"mappings":";;YAMY,oBAAoB,UAAU;;;;;;;;qBAS7B;GAAuB,OAAA,oCAAiB,+CAAA"}

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

@@ -0,0 +1,33 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { useTreeViewContext } from "./use-tree-view-context.js";
+import { useTreeViewVariantsContext } from "./use-tree-view-variants-context.js";
+import { treeViewTreeVariants } from "./tree-view-tree-variants.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/collections/tree-view/tree-view-tree.tsx
+/**
+* Lista de nós da árvore, e o elemento que concentra a navegação por teclado.
+*
+* É aqui que o tamanho escolhido na raiz vira CSS variables — recuo, tamanho
+* de ícone e espaçamentos —, então todo nó precisa ser renderizado dentro
+* dele.
+*/
+const TreeViewTree = (props) => {
+	const { render, className, ...rest } = props;
+	const treeView = useTreeViewContext();
+	const { size } = useTreeViewVariantsContext();
+	const zagProps = treeView.getTreeProps();
+	const baseProps = {
+		"data-component": "TreeView.Tree",
+		className: mergeTwClassNames(treeViewTreeVariants({ size }), className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, zagProps, rest)
+	});
+};
+TreeViewTree.displayName = "TreeView.Tree";
+//#endregion
+export { TreeViewTree };
+
+//# sourceMappingURL=tree-view-tree.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-tree.js","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-tree.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\nimport { treeViewTreeVariants } from './tree-view-tree-variants';\nimport { useTreeViewContext } from './use-tree-view-context';\nimport { useTreeViewVariantsContext } from './use-tree-view-variants-context';\n\nexport type TreeViewTreeProps = useRender.ComponentProps<'div'>;\n\n/**\n * Lista de nós da árvore, e o elemento que concentra a navegação por teclado.\n *\n * É aqui que o tamanho escolhido na raiz vira CSS variables — recuo, tamanho\n * de ícone e espaçamentos —, então todo nó precisa ser renderizado dentro\n * dele.\n */\nexport const TreeViewTree = (props: TreeViewTreeProps) => {\n  const { render, className, ...rest } = props;\n\n  const treeView = useTreeViewContext();\n  const { size } = useTreeViewVariantsContext();\n\n  const zagProps = treeView.getTreeProps();\n\n  const baseProps = {\n    'data-component': 'TreeView.Tree',\n    className: mergeTwClassNames(treeViewTreeVariants({ size }), className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, zagProps, rest),\n  });\n};\n\nTreeViewTree.displayName = 'TreeView.Tree';\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAa,gBAAgB,UAA6B;CACxD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,WAAW,mBAAmB;CACpC,MAAM,EAAE,SAAS,2BAA2B;CAE5C,MAAM,WAAW,SAAS,aAAa;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,qBAAqB,EAAE,KAAK,CAAC,GAAG,SAAS;CACxE;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,UAAU,IAAI;CAC7C,CAAC;AACH;AAEA,aAAa,cAAc"}

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

@@ -0,0 +1,16 @@
+import { UseTreeViewReturn } from "./use-tree-view.js";
+//#region src/components/collections/tree-view/use-tree-view-context.d.ts
+/**
+ * Provider e hook para acessar a API do Tree View.
+ *
+ * @example
+ * ```tsx
+ * const ExpandAllButton = () => {
+ *   const tree = useTreeViewContext();
+ *   return <button onClick={() => tree.expand()}>Expandir tudo</button>;
+ * };
+ * ```
+ */
+export declare const TreeViewContextProvider: import("react").Provider<UseTreeViewReturn<any>>, useTreeViewContext: () => UseTreeViewReturn<any>;
+//#endregion
+//# sourceMappingURL=use-tree-view-context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-tree-view-context.d.ts","names":[],"sources":["../../../../src/components/collections/tree-view/use-tree-view-context.ts"],"mappings":";;;;;;;;;;;;;qBAec,yCAAuB,SAAA,yBAAE,0BAAkB"}

package/dist/components/collections/tree-view/use-tree-view-context.js

@@ -0,0 +1,21 @@
+import { createContext } from "@lucasbernardosn/react-utils";
+//#region src/components/collections/tree-view/use-tree-view-context.ts
+/**
+* Provider e hook para acessar a API do Tree View.
+*
+* @example
+* ```tsx
+* const ExpandAllButton = () => {
+*   const tree = useTreeViewContext();
+*   return <button onClick={() => tree.expand()}>Expandir tudo</button>;
+* };
+* ```
+*/
+const [TreeViewContextProvider, useTreeViewContext] = createContext({
+	name: "TreeViewContext",
+	providers: ["TreeView.Root", "TreeView.RootProvider"]
+});
+//#endregion
+export { TreeViewContextProvider, useTreeViewContext };
+
+//# sourceMappingURL=use-tree-view-context.js.map

package/dist/components/collections/tree-view/use-tree-view-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-tree-view-context.js","names":[],"sources":["../../../../src/components/collections/tree-view/use-tree-view-context.ts"],"sourcesContent":["import { createContext } from '@lucasbernardosn/react-utils';\nimport type { TreeNode } from '@zag-js/collection';\nimport type { UseTreeViewReturn } from './use-tree-view';\n\n/**\n * Provider e hook para acessar a API do Tree View.\n *\n * @example\n * ```tsx\n * const ExpandAllButton = () => {\n *   const tree = useTreeViewContext();\n *   return <button onClick={() => tree.expand()}>Expandir tudo</button>;\n * };\n * ```\n */\nexport const [TreeViewContextProvider, useTreeViewContext] = createContext<\n  UseTreeViewReturn<TreeNode>\n>({\n  name: 'TreeViewContext',\n  providers: ['TreeView.Root', 'TreeView.RootProvider'],\n});\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAa,CAAC,yBAAyB,sBAAsB,cAE3D;CACA,MAAM;CACN,WAAW,CAAC,iBAAiB,uBAAuB;AACtD,CAAC"}

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

@@ -0,0 +1,19 @@
+import { NodeState } from "@zag-js/tree-view";
+//#region src/components/collections/tree-view/use-tree-view-node-context.d.ts
+/**
+ * Provider e hook para acessar o estado do nó atual.
+ *
+ * O provider é montado pelo `TreeView.NodeProvider`, então o hook só funciona
+ * dentro de uma linha da árvore.
+ *
+ * @example
+ * ```tsx
+ * const FolderIcon = () => {
+ *   const { expanded } = useTreeViewNodeContext();
+ *   return expanded ? <FolderOpenIcon /> : <FolderClosedIcon />;
+ * };
+ * ```
+ */
+export declare const TreeViewNodeContextProvider: import("react").Provider<NodeState>, useTreeViewNodeContext: () => NodeState;
+//#endregion
+//# sourceMappingURL=use-tree-view-node-context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-tree-view-node-context.d.ts","names":[],"sources":["../../../../src/components/collections/tree-view/use-tree-view-node-context.ts"],"mappings":";;;;;;;;;;;;;;;;qBAiBc,6CAA2B,SAAA,YAAE,8BAAsB"}

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

@@ -0,0 +1,24 @@
+import { createContext } from "@lucasbernardosn/react-utils";
+//#region src/components/collections/tree-view/use-tree-view-node-context.ts
+/**
+* Provider e hook para acessar o estado do nó atual.
+*
+* O provider é montado pelo `TreeView.NodeProvider`, então o hook só funciona
+* dentro de uma linha da árvore.
+*
+* @example
+* ```tsx
+* const FolderIcon = () => {
+*   const { expanded } = useTreeViewNodeContext();
+*   return expanded ? <FolderOpenIcon /> : <FolderClosedIcon />;
+* };
+* ```
+*/
+const [TreeViewNodeContextProvider, useTreeViewNodeContext] = createContext({
+	name: "TreeViewNodeContext",
+	providers: ["TreeView.NodeProvider"]
+});
+//#endregion
+export { TreeViewNodeContextProvider, useTreeViewNodeContext };
+
+//# sourceMappingURL=use-tree-view-node-context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-tree-view-node-context.js","names":[],"sources":["../../../../src/components/collections/tree-view/use-tree-view-node-context.ts"],"sourcesContent":["import { createContext } from '@lucasbernardosn/react-utils';\nimport type { NodeState } from '@zag-js/tree-view';\n\n/**\n * Provider e hook para acessar o estado do nó atual.\n *\n * O provider é montado pelo `TreeView.NodeProvider`, então o hook só funciona\n * dentro de uma linha da árvore.\n *\n * @example\n * ```tsx\n * const FolderIcon = () => {\n *   const { expanded } = useTreeViewNodeContext();\n *   return expanded ? <FolderOpenIcon /> : <FolderClosedIcon />;\n * };\n * ```\n */\nexport const [TreeViewNodeContextProvider, useTreeViewNodeContext] =\n  createContext<NodeState>({\n    name: 'TreeViewNodeContext',\n    providers: ['TreeView.NodeProvider'],\n  });\n"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAa,CAAC,6BAA6B,0BACzC,cAAyB;CACvB,MAAM;CACN,WAAW,CAAC,uBAAuB;AACrC,CAAC"}

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

@@ -0,0 +1,11 @@
+import { NodeProps } from "@zag-js/tree-view";
+//#region src/components/collections/tree-view/use-tree-view-node-props-context.d.ts
+/**
+ * Provider e hook para acessar a identificação do nó atual.
+ *
+ * O provider é montado pelo `TreeView.NodeProvider`, então o hook só funciona
+ * dentro de uma linha da árvore.
+ */
+export declare const TreeViewNodePropsContextProvider: import("react").Provider<NodeProps>, useTreeViewNodePropsContext: () => NodeProps;
+//#endregion
+//# sourceMappingURL=use-tree-view-node-props-context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-tree-view-node-props-context.d.ts","names":[],"sources":["../../../../src/components/collections/tree-view/use-tree-view-node-props-context.ts"],"mappings":";;;;;;;;qBASc,kDAAgC,SAAA,YAAE,mCAA2B"}

package/dist/components/collections/tree-view/use-tree-view-node-props-context.js

@@ -0,0 +1,16 @@
+import { createContext } from "@lucasbernardosn/react-utils";
+//#region src/components/collections/tree-view/use-tree-view-node-props-context.ts
+/**
+* Provider e hook para acessar a identificação do nó atual.
+*
+* O provider é montado pelo `TreeView.NodeProvider`, então o hook só funciona
+* dentro de uma linha da árvore.
+*/
+const [TreeViewNodePropsContextProvider, useTreeViewNodePropsContext] = createContext({
+	name: "TreeViewNodePropsContext",
+	providers: ["TreeView.NodeProvider"]
+});
+//#endregion
+export { TreeViewNodePropsContextProvider, useTreeViewNodePropsContext };
+
+//# sourceMappingURL=use-tree-view-node-props-context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-tree-view-node-props-context.js","names":[],"sources":["../../../../src/components/collections/tree-view/use-tree-view-node-props-context.ts"],"sourcesContent":["import { createContext } from '@lucasbernardosn/react-utils';\nimport type { NodeProps } from '@zag-js/tree-view';\n\n/**\n * Provider e hook para acessar a identificação do nó atual.\n *\n * O provider é montado pelo `TreeView.NodeProvider`, então o hook só funciona\n * dentro de uma linha da árvore.\n */\nexport const [TreeViewNodePropsContextProvider, useTreeViewNodePropsContext] =\n  createContext<NodeProps>({\n    name: 'TreeViewNodePropsContext',\n    providers: ['TreeView.NodeProvider'],\n  });\n"],"mappings":";;;;;;;;AASA,MAAa,CAAC,kCAAkC,+BAC9C,cAAyB;CACvB,MAAM;CACN,WAAW,CAAC,uBAAuB;AACrC,CAAC"}

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

@@ -0,0 +1,27 @@
+//#region src/components/collections/tree-view/use-tree-view-render-strategy-context.d.ts
+/**
+ * Estratégia de renderização do conteúdo dos branches.
+ *
+ * Declarada no `TreeView.Root` (ou no `TreeView.RootProvider`) e aplicada por
+ * todo `TreeView.BranchContent` da árvore, que pode sobrescrevê-la
+ * individualmente.
+ */
+export type TreeViewRenderStrategyContextValue = {
+  /**
+   * Mantém o conteúdo de um branch montado no DOM enquanto ele está colapsado.
+   *
+   * Com `false`, o conteúdo só é montado na primeira expansão e é desmontado a
+   * cada colapso — melhor para árvores grandes. Com `true`, o conteúdo fica
+   * sempre no DOM, útil quando os nós guardam estado local (formulários,
+   * scroll) que não pode ser perdido ao colapsar.
+   *
+   * @default false
+   */
+  keepMounted?: boolean;
+};
+/**
+ * Provider e hook para acessar a estratégia de renderização do Tree View.
+ */
+export declare const TreeViewRenderStrategyContextProvider: import("react").Provider<TreeViewRenderStrategyContextValue>, useTreeViewRenderStrategyContext: () => TreeViewRenderStrategyContextValue;
+//#endregion
+//# sourceMappingURL=use-tree-view-render-strategy-context.d.ts.map

package/dist/components/collections/tree-view/use-tree-view-render-strategy-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-tree-view-render-strategy-context.d.ts","names":[],"sources":["../../../../src/components/collections/tree-view/use-tree-view-render-strategy-context.ts"],"mappings":";;;;;;;;YASY;;;;;;;;;;;EAWV;;;;;qBAOA,uDAAqC,SAAA,qCACrC,wCAAgC"}

package/dist/components/collections/tree-view/use-tree-view-render-strategy-context.js

@@ -0,0 +1,13 @@
+import { createContext } from "@lucasbernardosn/react-utils";
+//#region src/components/collections/tree-view/use-tree-view-render-strategy-context.ts
+/**
+* Provider e hook para acessar a estratégia de renderização do Tree View.
+*/
+const [TreeViewRenderStrategyContextProvider, useTreeViewRenderStrategyContext] = createContext({
+	name: "TreeViewRenderStrategyContext",
+	providers: ["TreeView.Root", "TreeView.RootProvider"]
+});
+//#endregion
+export { TreeViewRenderStrategyContextProvider, useTreeViewRenderStrategyContext };
+
+//# sourceMappingURL=use-tree-view-render-strategy-context.js.map

package/dist/components/collections/tree-view/use-tree-view-render-strategy-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-tree-view-render-strategy-context.js","names":[],"sources":["../../../../src/components/collections/tree-view/use-tree-view-render-strategy-context.ts"],"sourcesContent":["import { createContext } from '@lucasbernardosn/react-utils';\n\n/**\n * Estratégia de renderização do conteúdo dos branches.\n *\n * Declarada no `TreeView.Root` (ou no `TreeView.RootProvider`) e aplicada por\n * todo `TreeView.BranchContent` da árvore, que pode sobrescrevê-la\n * individualmente.\n */\nexport type TreeViewRenderStrategyContextValue = {\n  /**\n   * Mantém o conteúdo de um branch montado no DOM enquanto ele está colapsado.\n   *\n   * Com `false`, o conteúdo só é montado na primeira expansão e é desmontado a\n   * cada colapso — melhor para árvores grandes. Com `true`, o conteúdo fica\n   * sempre no DOM, útil quando os nós guardam estado local (formulários,\n   * scroll) que não pode ser perdido ao colapsar.\n   *\n   * @default false\n   */\n  keepMounted?: boolean;\n};\n\n/**\n * Provider e hook para acessar a estratégia de renderização do Tree View.\n */\nexport const [\n  TreeViewRenderStrategyContextProvider,\n  useTreeViewRenderStrategyContext,\n] = createContext<TreeViewRenderStrategyContextValue>({\n  name: 'TreeViewRenderStrategyContext',\n  providers: ['TreeView.Root', 'TreeView.RootProvider'],\n});\n"],"mappings":";;;;;AA0BA,MAAa,CACX,uCACA,oCACE,cAAkD;CACpD,MAAM;CACN,WAAW,CAAC,iBAAiB,uBAAuB;AACtD,CAAC"}

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

@@ -0,0 +1,32 @@
+import { ColorSchemeCore } from "../../../types/color-scheme.js";
+//#region src/components/collections/tree-view/use-tree-view-variants-context.d.ts
+/**
+ * Variantes do Tree View. Informadas no `TreeView.Root` (ou no `TreeView.RootProvider`) e
+ * repassadas às partes por contexto.
+ */
+export type TreeViewVariants = {
+  /**
+   * Cor da linha selecionada. As demais linhas usam a escala neutra.
+   *
+   * @default 'gray'
+   */
+  colorScheme?: ColorSchemeCore;
+  /**
+   * Recuo, tamanho de ícone, espaçamento e texto. Aplicado no `TreeView.Tree`, que declara as
+   * variáveis lidas por todas as partes.
+   *
+   * @default 'md'
+   */
+  size?: 'xs' | 'sm' | 'md' | 'lg';
+  /**
+   * Desenho da linha selecionada: `subtle` com fundo suave, `solid` com fundo saturado e texto
+   * invertido.
+   *
+   * @default 'solid'
+   */
+  variant?: 'subtle' | 'solid';
+};
+export declare const treeViewDefaultVariants: Required<TreeViewVariants>;
+export declare const TreeViewVariantsContextProvider: import("react").Provider<TreeViewVariants>, useTreeViewVariantsContext: () => TreeViewVariants;
+//#endregion
+//# sourceMappingURL=use-tree-view-variants-context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-tree-view-variants-context.d.ts","names":[],"sources":["../../../../src/components/collections/tree-view/use-tree-view-variants-context.ts"],"mappings":";;;;;;YAOY;;;;;;EAMV,cAAc;;;;;;;EAOd;;;;;;;EAOA;;qBAGW,yBAAyB,SAAS;qBAMjC,iDAA+B,SAAA,mBAAE,kCAA0B"}

package/dist/components/collections/tree-view/use-tree-view-variants-context.js

@@ -0,0 +1,15 @@
+import { createContext } from "@lucasbernardosn/react-utils";
+//#region src/components/collections/tree-view/use-tree-view-variants-context.ts
+const treeViewDefaultVariants = {
+	colorScheme: "gray",
+	size: "md",
+	variant: "solid"
+};
+const [TreeViewVariantsContextProvider, useTreeViewVariantsContext] = createContext({
+	name: "TreeViewVariantsContext",
+	providers: ["TreeView.Root", "TreeView.RootProvider"]
+});
+//#endregion
+export { TreeViewVariantsContextProvider, treeViewDefaultVariants, useTreeViewVariantsContext };
+
+//# sourceMappingURL=use-tree-view-variants-context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-tree-view-variants-context.js","names":[],"sources":["../../../../src/components/collections/tree-view/use-tree-view-variants-context.ts"],"sourcesContent":["import { createContext } from '@lucasbernardosn/react-utils';\nimport type { ColorSchemeCore } from '#types';\n\n/**\n * Variantes do Tree View. Informadas no `TreeView.Root` (ou no `TreeView.RootProvider`) e\n * repassadas às partes por contexto.\n */\nexport type TreeViewVariants = {\n  /**\n   * Cor da linha selecionada. As demais linhas usam a escala neutra.\n   *\n   * @default 'gray'\n   */\n  colorScheme?: ColorSchemeCore;\n  /**\n   * Recuo, tamanho de ícone, espaçamento e texto. Aplicado no `TreeView.Tree`, que declara as\n   * variáveis lidas por todas as partes.\n   *\n   * @default 'md'\n   */\n  size?: 'xs' | 'sm' | 'md' | 'lg';\n  /**\n   * Desenho da linha selecionada: `subtle` com fundo suave, `solid` com fundo saturado e texto\n   * invertido.\n   *\n   * @default 'solid'\n   */\n  variant?: 'subtle' | 'solid';\n};\n\nexport const treeViewDefaultVariants: Required<TreeViewVariants> = {\n  colorScheme: 'gray',\n  size: 'md',\n  variant: 'solid',\n};\n\nexport const [TreeViewVariantsContextProvider, useTreeViewVariantsContext] =\n  createContext<TreeViewVariants>({\n    name: 'TreeViewVariantsContext',\n    providers: ['TreeView.Root', 'TreeView.RootProvider'],\n  });\n"],"mappings":";;AA8BA,MAAa,0BAAsD;CACjE,aAAa;CACb,MAAM;CACN,SAAS;AACX;AAEA,MAAa,CAAC,iCAAiC,8BAC7C,cAAgC;CAC9B,MAAM;CACN,WAAW,CAAC,iBAAiB,uBAAuB;AACtD,CAAC"}

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

@@ -0,0 +1,66 @@
+import { Optional } from "@lucasbernardosn/utils";
+import { PropTypes } from "@zag-js/react";
+import { TreeCollection, TreeNode } from "@zag-js/collection";
+import * as ZagTreeView from "@zag-js/tree-view";
+//#region src/components/collections/tree-view/use-tree-view.d.ts
+/**
+ * Textos acessíveis padrão do Tree View.
+ *
+ * O Zag traz os rótulos em inglês; aqui eles são substituídos pelos
+ * equivalentes em pt-BR. Passar `translations` no `TreeView.Root` ou no
+ * `useTreeView` sobrescreve apenas as chaves informadas.
+ */
+export declare const treeViewTranslations: ZagTreeView.IntlTranslations;
+/**
+ * Propriedades do hook `useTreeView`.
+ *
+ * São as mesmas opções aceitas pelo `TreeView.Root`, com o `id` opcional — um
+ * id único é gerado quando ele não é informado.
+ */
+export type UseTreeViewProps<T extends TreeNode> = Optional<Omit<ZagTreeView.Props<T>, 'collection'>, 'id'> & {
+  /**
+   * Coleção de nós da árvore.
+   *
+   * Define a estrutura hierárquica dos itens exibidos. Use
+   * `TreeView.createCollection` ou `TreeView.createFileCollection` para construí-la.
+   */
+  collection: TreeCollection<T>;
+};
+/**
+ * Retorno do hook `useTreeView`: a API completa da árvore, com métodos para
+ * expandir, colapsar, selecionar, marcar, renomear e navegar, além das props
+ * de cada parte.
+ */
+export type UseTreeViewReturn<T extends TreeNode> = ZagTreeView.Api<PropTypes, T>;
+/**
+ * Cria e gerencia o estado de um Tree View.
+ *
+ * Use junto do `TreeView.RootProvider` quando for preciso controlar a árvore
+ * de fora da sua subárvore — virtualização, botões de expandir e colapsar
+ * tudo, ou leitura do estado em um componente irmão. Nos casos comuns prefira
+ * o `TreeView.Root`, que chama este hook internamente.
+ *
+ * @example
+ * ```tsx
+ * const collection = TreeView.createCollection<Node>({
+ *   nodeToValue: (node) => node.id,
+ *   nodeToString: (node) => node.name,
+ *   rootNode: {
+ *     id: 'ROOT',
+ *     name: '',
+ *     children: [{ id: 'src', name: 'src', children: [] }],
+ *   },
+ * });
+ *
+ * const treeView = useTreeView({ collection });
+ *
+ * return (
+ *   <TreeView.RootProvider value={treeView}>
+ *     <TreeView.Tree>…</TreeView.Tree>
+ *   </TreeView.RootProvider>
+ * );
+ * ```
+ */
+export declare const useTreeView: <T extends TreeNode>(props: UseTreeViewProps<T>) => UseTreeViewReturn<T>;
+//#endregion
+//# sourceMappingURL=use-tree-view.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-tree-view.d.ts","names":[],"sources":["../../../../src/components/collections/tree-view/use-tree-view.ts"],"mappings":";;;;;;;;;;;;qBAaa,sBAAsB,YAAY;;;;;;;YAWnC,iBAAiB,UAAU,YAAY,SACjD,KAAK,YAAY,MAAM;;;;;;;EASvB,YAAY,eAAe;;;;;;;YAQjB,kBAAkB,UAAU,YAAY,YAAY,IAC9D,WACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAgCW,cAAe,UAAU,UACpC,OAAO,iBAAiB,OACvB,kBAAkB"}

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

@@ -0,0 +1,60 @@
+import { useId } from "react";
+import { normalizeProps, useMachine } from "@zag-js/react";
+import * as ZagTreeView from "@zag-js/tree-view";
+//#region src/components/collections/tree-view/use-tree-view.ts
+/**
+* Textos acessíveis padrão do Tree View.
+*
+* O Zag traz os rótulos em inglês; aqui eles são substituídos pelos
+* equivalentes em pt-BR. Passar `translations` no `TreeView.Root` ou no
+* `useTreeView` sobrescreve apenas as chaves informadas.
+*/
+const treeViewTranslations = {
+	treeLabel: "Árvore",
+	renameInputLabel: "Renomear item"
+};
+/**
+* Cria e gerencia o estado de um Tree View.
+*
+* Use junto do `TreeView.RootProvider` quando for preciso controlar a árvore
+* de fora da sua subárvore — virtualização, botões de expandir e colapsar
+* tudo, ou leitura do estado em um componente irmão. Nos casos comuns prefira
+* o `TreeView.Root`, que chama este hook internamente.
+*
+* @example
+* ```tsx
+* const collection = TreeView.createCollection<Node>({
+*   nodeToValue: (node) => node.id,
+*   nodeToString: (node) => node.name,
+*   rootNode: {
+*     id: 'ROOT',
+*     name: '',
+*     children: [{ id: 'src', name: 'src', children: [] }],
+*   },
+* });
+*
+* const treeView = useTreeView({ collection });
+*
+* return (
+*   <TreeView.RootProvider value={treeView}>
+*     <TreeView.Tree>…</TreeView.Tree>
+*   </TreeView.RootProvider>
+* );
+* ```
+*/
+const useTreeView = (props) => {
+	const machineProps = {
+		id: useId(),
+		...props,
+		translations: {
+			...treeViewTranslations,
+			...props.translations
+		}
+	};
+	const service = useMachine(ZagTreeView.machine, machineProps);
+	return ZagTreeView.connect(service, normalizeProps);
+};
+//#endregion
+export { treeViewTranslations, useTreeView };
+
+//# sourceMappingURL=use-tree-view.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-tree-view.js","names":[],"sources":["../../../../src/components/collections/tree-view/use-tree-view.ts"],"sourcesContent":["import type { Optional } from '@lucasbernardosn/utils';\nimport type { TreeCollection, TreeNode } from '@zag-js/collection';\nimport { normalizeProps, type PropTypes, useMachine } from '@zag-js/react';\nimport * as ZagTreeView from '@zag-js/tree-view';\nimport { useId } from 'react';\n\n/**\n * Textos acessíveis padrão do Tree View.\n *\n * O Zag traz os rótulos em inglês; aqui eles são substituídos pelos\n * equivalentes em pt-BR. Passar `translations` no `TreeView.Root` ou no\n * `useTreeView` sobrescreve apenas as chaves informadas.\n */\nexport const treeViewTranslations: ZagTreeView.IntlTranslations = {\n  treeLabel: 'Árvore',\n  renameInputLabel: 'Renomear item',\n};\n\n/**\n * Propriedades do hook `useTreeView`.\n *\n * São as mesmas opções aceitas pelo `TreeView.Root`, com o `id` opcional — um\n * id único é gerado quando ele não é informado.\n */\nexport type UseTreeViewProps<T extends TreeNode> = Optional<\n  Omit<ZagTreeView.Props<T>, 'collection'>,\n  'id'\n> & {\n  /**\n   * Coleção de nós da árvore.\n   *\n   * Define a estrutura hierárquica dos itens exibidos. Use\n   * `TreeView.createCollection` ou `TreeView.createFileCollection` para construí-la.\n   */\n  collection: TreeCollection<T>;\n};\n\n/**\n * Retorno do hook `useTreeView`: a API completa da árvore, com métodos para\n * expandir, colapsar, selecionar, marcar, renomear e navegar, além das props\n * de cada parte.\n */\nexport type UseTreeViewReturn<T extends TreeNode> = ZagTreeView.Api<\n  PropTypes,\n  T\n>;\n\n/**\n * Cria e gerencia o estado de um Tree View.\n *\n * Use junto do `TreeView.RootProvider` quando for preciso controlar a árvore\n * de fora da sua subárvore — virtualização, botões de expandir e colapsar\n * tudo, ou leitura do estado em um componente irmão. Nos casos comuns prefira\n * o `TreeView.Root`, que chama este hook internamente.\n *\n * @example\n * ```tsx\n * const collection = TreeView.createCollection<Node>({\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 * const treeView = useTreeView({ collection });\n *\n * return (\n *   <TreeView.RootProvider value={treeView}>\n *     <TreeView.Tree>…</TreeView.Tree>\n *   </TreeView.RootProvider>\n * );\n * ```\n */\nexport const useTreeView = <T extends TreeNode>(\n  props: UseTreeViewProps<T>,\n): UseTreeViewReturn<T> => {\n  /** Id de fallback: só é usado quando `props.id` não é informado. */\n  const id = useId();\n\n  const machineProps: ZagTreeView.Props = {\n    id,\n    ...props,\n    // Mesclado por chave para que um `translations` parcial não derrube os\n    // demais textos padrão.\n    translations: { ...treeViewTranslations, ...props.translations },\n  };\n\n  const service = useMachine(ZagTreeView.machine, machineProps);\n\n  return ZagTreeView.connect(service, normalizeProps);\n};\n"],"mappings":";;;;;;;;;;;AAaA,MAAa,uBAAqD;CAChE,WAAW;CACX,kBAAkB;AACpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DA,MAAa,eACX,UACyB;CAIzB,MAAM,eAAkC;EACtC,IAHS,MAGR;EACD,GAAG;EAGH,cAAc;GAAE,GAAG;GAAsB,GAAG,MAAM;EAAa;CACjE;CAEA,MAAM,UAAU,WAAW,YAAY,SAAS,YAAY;CAE5D,OAAO,YAAY,QAAQ,SAAS,cAAc;AACpD"}

package/dist/components/disclosure/breadcrumb/breadcrumb-current.d.ts

@@ -0,0 +1,13 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/disclosure/breadcrumb/breadcrumb-current.d.ts
+export type BreadcrumbCurrentProps = useRender.ComponentProps<'span'>;
+/**
+ * A página atual, último nível da trilha. Não é link: renderiza um `<span>` com
+ * `aria-current="page"`, no tom mais forte da trilha.
+ */
+export declare const BreadcrumbCurrent: {
+  (props: BreadcrumbCurrentProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=breadcrumb-current.d.ts.map

package/dist/components/disclosure/breadcrumb/breadcrumb-current.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb-current.d.ts","names":[],"sources":["../../../../src/components/disclosure/breadcrumb/breadcrumb-current.tsx"],"mappings":";;YAGY,yBAAyB,UAAU;;;;;qBAMlC;GAA4B,OAAA,yCAAsB,+CAAA"}

package/dist/components/disclosure/breadcrumb/breadcrumb-current.js

@@ -0,0 +1,33 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/disclosure/breadcrumb/breadcrumb-current.tsx
+/**
+* A página atual, último nível da trilha. Não é link: renderiza um `<span>` com
+* `aria-current="page"`, no tom mais forte da trilha.
+*/
+const BreadcrumbCurrent = (props) => {
+	const { render, className, ...rest } = props;
+	const baseProps = {
+		"data-component": "Breadcrumb.Current",
+		"aria-current": "page",
+		className: mergeTwClassNames([
+			"inline-flex",
+			"items-center",
+			"gap-1.5",
+			"min-w-0",
+			"text-gray-12",
+			"[&_svg]:size-[1em]",
+			"[&_svg]:shrink-0"
+		], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "span",
+		props: mergeProps(baseProps, rest)
+	});
+};
+BreadcrumbCurrent.displayName = "Breadcrumb.Current";
+//#endregion
+export { BreadcrumbCurrent };
+
+//# sourceMappingURL=breadcrumb-current.js.map

package/dist/components/disclosure/breadcrumb/breadcrumb-current.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb-current.js","names":[],"sources":["../../../../src/components/disclosure/breadcrumb/breadcrumb-current.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type BreadcrumbCurrentProps = useRender.ComponentProps<'span'>;\n\n/**\n * A página atual, último nível da trilha. Não é link: renderiza um `<span>` com\n * `aria-current=\"page\"`, no tom mais forte da trilha.\n */\nexport const BreadcrumbCurrent = (props: BreadcrumbCurrentProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Breadcrumb.Current',\n    'aria-current': 'page',\n    className: mergeTwClassNames(\n      [\n        'inline-flex',\n        'items-center',\n        'gap-1.5',\n        'min-w-0',\n\n        'text-gray-12',\n\n        '[&_svg]:size-[1em]',\n        '[&_svg]:shrink-0',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'span',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nBreadcrumbCurrent.displayName = 'Breadcrumb.Current';\n"],"mappings":";;;;;;;AASA,MAAa,qBAAqB,UAAkC;CAClE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,gBAAgB;EAChB,WAAW,kBACT;GACE;GACA;GACA;GACA;GAEA;GAEA;GACA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,kBAAkB,cAAc"}

package/dist/components/disclosure/breadcrumb/breadcrumb-item.d.ts

@@ -0,0 +1,12 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/disclosure/breadcrumb/breadcrumb-item.d.ts
+export type BreadcrumbItemProps = useRender.ComponentProps<'li'>;
+/**
+ * Um nível da trilha, com um `Breadcrumb.Link` ou o `Breadcrumb.Current` dentro.
+ */
+export declare const BreadcrumbItem: {
+  (props: BreadcrumbItemProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=breadcrumb-item.d.ts.map

package/dist/components/disclosure/breadcrumb/breadcrumb-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb-item.d.ts","names":[],"sources":["../../../../src/components/disclosure/breadcrumb/breadcrumb-item.tsx"],"mappings":";;YAGY,sBAAsB,UAAU;;;;qBAK/B;GAAyB,OAAA,sCAAmB,+CAAA"}