@lucasbernardosn/react-ui 0.2.0 → 0.4.0

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

@@ -1 +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"}
+{"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  /**\n   * O `TreeNode` do Zag é `any`, então os nós que a coleção do contexto devolve entram como\n   * `TTreeNode` sem conversão. O tipo é o que quem usa declarou no genérico; a coleção não o\n   * confere.\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, [...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, [index]));\n};\n\nTreeViewNodeRenderer.displayName = 'TreeView.NodeRenderer';\n"],"mappings":";;;;;;;;;;;;;;;AAwDA,MAAa,wBACX,UACoB;CACpB,MAAM,EAAE,YAAY,aAAa,aAAa,uBAAuB;;;;;;CAOrE,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,OAAO,CAAC,GAAG,WAAW,KAAK,CAAC,CAC7C,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,MAAM,CAAC,KAAK,CAAC,CAAC;AACvD;AAEA,qBAAqB,cAAc"}

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

@@ -1,7 +1,7 @@
 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 { MergeOverride } from "@lucasbernardosn/ts-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

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

@@ -2,7 +2,7 @@ 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 { createSplitProps } from "@lucasbernardosn/ts-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

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

@@ -1 +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    '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,CACnE,eACA,SACF,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"}
+{"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 {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-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    '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":";;;;;;;;AAkCA,MAAM,oBAAoB,iBAAmC;;;;;;;;;;;;;;;;;;;;;;;AAwB7D,MAAa,wBACX,UACG;CACH,MAAM,CAAC,cAAc,uBAAuB,kBAAkB,OAAO,CACnE,eACA,SACF,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

@@ -1,7 +1,7 @@
 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 { MergeOverride } from "@lucasbernardosn/ts-utils";
 import { useRender } from "@base-ui/react";
 import { TreeNode } from "@zag-js/collection";
 //#region src/components/collections/tree-view/tree-view-root.d.ts

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

@@ -3,7 +3,7 @@ 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 { createSplitProps } from "@lucasbernardosn/ts-utils";
 import { mergeProps, useRender } from "@base-ui/react";
 import { jsx } from "react/jsx-runtime";
 import * as ZagTreeView from "@zag-js/tree-view";

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

@@ -1 +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} 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    '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,CACnE,eACA,SACF,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"}
+{"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 {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-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} 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    '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":";;;;;;;;;;AA4BA,MAAM,oBAAoB,iBAAmC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkC7D,MAAa,gBACX,UACG;CACH,MAAM,CAAC,cAAc,uBAAuB,kBAAkB,OAAO,CACnE,eACA,SACF,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/use-tree-view.d.ts

@@ -1,4 +1,4 @@
-import { Optional } from "@lucasbernardosn/utils";
+import { Optional } from "@lucasbernardosn/ts-utils";
 import { PropTypes } from "@zag-js/react";
 import { TreeCollection, TreeNode } from "@zag-js/collection";
 import * as ZagTreeView from "@zag-js/tree-view";

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

@@ -1 +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"}
+{"version":3,"file":"use-tree-view.js","names":[],"sources":["../../../../src/components/collections/tree-view/use-tree-view.ts"],"sourcesContent":["import type { Optional } from '@lucasbernardosn/ts-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-ellipsis.d.ts

@@ -0,0 +1,27 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/disclosure/breadcrumb/breadcrumb-ellipsis.d.ts
+export type BreadcrumbEllipsisProps = useRender.ComponentProps<'span'>;
+/**
+ * Reticências no lugar dos níveis do meio de um caminho longo, dentro de um `Breadcrumb.Item`. Os
+ * filhos substituem o ícone.
+ *
+ * Sozinho, é decorativo (`aria-hidden`): os níveis escondidos não chegam ao leitor de tela. Para
+ * mostrá-los, faça dele o trigger de um `Menu` com os links escondidos, pelo `render`, com um nome
+ * que diga o que abre; aí ele vira botão, com o hover e o anel de foco.
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumb.Item>
+ *   <Menu.Root>
+ *     <Breadcrumb.Ellipsis render={<Menu.Trigger aria-label="Mostrar os níveis ocultos" />} />
+ *     …
+ *   </Menu.Root>
+ * </Breadcrumb.Item>
+ * ```
+ */
+export declare const BreadcrumbEllipsis: {
+  (props: BreadcrumbEllipsisProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=breadcrumb-ellipsis.d.ts.map

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

@@ -0,0 +1,59 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { Icon } from "../../display/icon/icon.js";
+import { mergeProps, useRender } from "@base-ui/react";
+import { jsx } from "react/jsx-runtime";
+import { DotsThreeIcon } from "@phosphor-icons/react";
+//#region src/components/disclosure/breadcrumb/breadcrumb-ellipsis.tsx
+/**
+* Reticências no lugar dos níveis do meio de um caminho longo, dentro de um `Breadcrumb.Item`. Os
+* filhos substituem o ícone.
+*
+* Sozinho, é decorativo (`aria-hidden`): os níveis escondidos não chegam ao leitor de tela. Para
+* mostrá-los, faça dele o trigger de um `Menu` com os links escondidos, pelo `render`, com um nome
+* que diga o que abre; aí ele vira botão, com o hover e o anel de foco.
+*
+* @example
+* ```tsx
+* <Breadcrumb.Item>
+*   <Menu.Root>
+*     <Breadcrumb.Ellipsis render={<Menu.Trigger aria-label="Mostrar os níveis ocultos" />} />
+*     …
+*   </Menu.Root>
+* </Breadcrumb.Item>
+* ```
+*/
+const BreadcrumbEllipsis = (props) => {
+	const { render, className, children, ...rest } = props;
+	const baseProps = {
+		"data-component": "Breadcrumb.Ellipsis",
+		"aria-hidden": render === void 0 ? true : void 0,
+		children: children ?? /* @__PURE__ */ jsx(Icon, { render: /* @__PURE__ */ jsx(DotsThreeIcon, {}) }),
+		className: mergeTwClassNames([
+			"inline-flex",
+			"items-center",
+			"justify-center",
+			"shrink-0",
+			"size-[1lh]",
+			"rounded-md",
+			"corner-squircle",
+			"text-gray-11",
+			"[button]:cursor-pointer",
+			"[&:is(button):hover]:bg-gray-4",
+			"[&:is(button):hover]:text-gray-12",
+			"[&:is(button)[data-popup-open]]:bg-gray-4",
+			"[&:is(button)[data-popup-open]]:text-gray-12",
+			"focus-ring-outside",
+			"[&_svg]:size-[1em]"
+		], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "span",
+		props: mergeProps(baseProps, rest)
+	});
+};
+BreadcrumbEllipsis.displayName = "Breadcrumb.Ellipsis";
+//#endregion
+export { BreadcrumbEllipsis };
+
+//# sourceMappingURL=breadcrumb-ellipsis.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb-ellipsis.js","names":[],"sources":["../../../../src/components/disclosure/breadcrumb/breadcrumb-ellipsis.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { DotsThreeIcon } from '@phosphor-icons/react';\nimport { Icon } from '#components/display/icon';\nimport { mergeTwClassNames } from '#utils';\n\nexport type BreadcrumbEllipsisProps = useRender.ComponentProps<'span'>;\n\n/**\n * Reticências no lugar dos níveis do meio de um caminho longo, dentro de um `Breadcrumb.Item`. Os\n * filhos substituem o ícone.\n *\n * Sozinho, é decorativo (`aria-hidden`): os níveis escondidos não chegam ao leitor de tela. Para\n * mostrá-los, faça dele o trigger de um `Menu` com os links escondidos, pelo `render`, com um nome\n * que diga o que abre; aí ele vira botão, com o hover e o anel de foco.\n *\n * @example\n * ```tsx\n * <Breadcrumb.Item>\n *   <Menu.Root>\n *     <Breadcrumb.Ellipsis render={<Menu.Trigger aria-label=\"Mostrar os níveis ocultos\" />} />\n *     …\n *   </Menu.Root>\n * </Breadcrumb.Item>\n * ```\n */\nexport const BreadcrumbEllipsis = (props: BreadcrumbEllipsisProps) => {\n  const { render, className, children, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Breadcrumb.Ellipsis',\n    'aria-hidden': render === undefined ? true : undefined,\n    children: children ?? <Icon render={<DotsThreeIcon />} />,\n    className: mergeTwClassNames(\n      [\n        'inline-flex',\n        'items-center',\n        'justify-center',\n        'shrink-0',\n\n        // Da altura da linha e quadrado, para o hover do botão formar um quadrado em volta do ícone.\n        'size-[1lh]',\n\n        'rounded-md',\n        'corner-squircle',\n\n        'text-gray-11',\n\n        // Só como botão: o `span` decorativo não tem interação.\n        '[button]:cursor-pointer',\n        '[&:is(button):hover]:bg-gray-4',\n        '[&:is(button):hover]:text-gray-12',\n        '[&:is(button)[data-popup-open]]:bg-gray-4',\n        '[&:is(button)[data-popup-open]]:text-gray-12',\n        'focus-ring-outside',\n\n        '[&_svg]:size-[1em]',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'span',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nBreadcrumbEllipsis.displayName = 'Breadcrumb.Ellipsis';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAyBA,MAAa,sBAAsB,UAAmC;CACpE,MAAM,EAAE,QAAQ,WAAW,UAAU,GAAG,SAAS;CAEjD,MAAM,YAAY;EAChB,kBAAkB;EAClB,eAAe,WAAW,KAAA,IAAY,OAAO,KAAA;EAC7C,UAAU,YAAY,oBAAC,MAAD,EAAM,QAAQ,oBAAC,eAAD,CAAgB,CAAA,EAAI,CAAA;EACxD,WAAW,kBACT;GACE;GACA;GACA;GACA;GAGA;GAEA;GACA;GAEA;GAGA;GACA;GACA;GACA;GACA;GACA;GAEA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,mBAAmB,cAAc"}

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

@@ -17,7 +17,7 @@ const BreadcrumbList = (props) => {
 			"flex",
 			"flex-wrap",
 			"items-center",
-			"gap-x-1.5",
+			"gap-x-0.5",
 			"gap-y-1",
 			"text-sm",
 			"text-gray-11",

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

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb-list.js","names":[],"sources":["../../../../src/components/disclosure/breadcrumb/breadcrumb-list.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type BreadcrumbListProps = useRender.ComponentProps<'ol'>;\n\n/**\n * Lista ordenada dos itens e separadores. Quando falta espaço, o item inteiro desce para a linha\n * de baixo (`flex-wrap`): o texto de um item só quebra por dentro quando ele sozinho é mais largo\n * que a linha. Sem o `flex-wrap`, os itens encolheriam e quebrariam o texto antes de descer.\n *\n * O tamanho do texto é fixo em `text-sm`; outro tamanho vem pela `className`, e os ícones medem\n * `1em` e acompanham.\n */\nexport const BreadcrumbList = (props: BreadcrumbListProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Breadcrumb.List',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'flex-wrap',\n        'items-center',\n        'gap-x-1.5',\n        'gap-y-1',\n\n        'text-sm',\n        'text-gray-11',\n        // Uma palavra maior que a linha quebra em qualquer ponto em vez de vazar.\n        'wrap-anywhere',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'ol',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nBreadcrumbList.displayName = 'Breadcrumb.List';\n"],"mappings":";;;;;;;;;;;AAaA,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GACA;GACA;GAEA;GACA;GAEA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,eAAe,cAAc"}
+{"version":3,"file":"breadcrumb-list.js","names":[],"sources":["../../../../src/components/disclosure/breadcrumb/breadcrumb-list.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type BreadcrumbListProps = useRender.ComponentProps<'ol'>;\n\n/**\n * Lista ordenada dos itens e separadores. Quando falta espaço, o item inteiro desce para a linha\n * de baixo (`flex-wrap`): o texto de um item só quebra por dentro quando ele sozinho é mais largo\n * que a linha. Sem o `flex-wrap`, os itens encolheriam e quebrariam o texto antes de descer.\n *\n * O tamanho do texto é fixo em `text-sm`; outro tamanho vem pela `className`, e os ícones medem\n * `1em` e acompanham.\n */\nexport const BreadcrumbList = (props: BreadcrumbListProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Breadcrumb.List',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'flex-wrap',\n        'items-center',\n        // O chevron já tem folga nas laterais do desenho: o espaço entre as partes fica mínimo.\n        'gap-x-0.5',\n        'gap-y-1',\n\n        'text-sm',\n        'text-gray-11',\n        // Uma palavra maior que a linha quebra em qualquer ponto em vez de vazar.\n        'wrap-anywhere',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'ol',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nBreadcrumbList.displayName = 'Breadcrumb.List';\n"],"mappings":";;;;;;;;;;;AAaA,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GAEA;GACA;GAEA;GACA;GAEA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,eAAe,cAAc"}

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

@@ -3,8 +3,8 @@ import { useRender } from "@base-ui/react";
 export type BreadcrumbSeparatorProps = useRender.ComponentProps<'li'>;
 /**
  * Separador entre dois itens, colocado à mão entre eles. Fica fora da árvore de acessibilidade:
- * a ordem da lista já diz a hierarquia. O padrão é um chevron de `1em`, espelhado em RTL; os
- * filhos o substituem (`/`, outro ícone).
+ * a ordem da lista já diz a hierarquia. O padrão é um chevron de `1em` pelo `Icon` da lib, espelhado
+ * em RTL; os filhos o substituem (`/`, outro ícone pelo `Icon`, para ter o mesmo traço).
  */
 export declare const BreadcrumbSeparator: {
   (props: BreadcrumbSeparatorProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

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

@@ -1,12 +1,13 @@
 import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { Icon } from "../../display/icon/icon.js";
 import { mergeProps, useRender } from "@base-ui/react";
 import { jsx } from "react/jsx-runtime";
 import { CaretRightIcon } from "@phosphor-icons/react";
 //#region src/components/disclosure/breadcrumb/breadcrumb-separator.tsx
 /**
 * Separador entre dois itens, colocado à mão entre eles. Fica fora da árvore de acessibilidade:
-* a ordem da lista já diz a hierarquia. O padrão é um chevron de `1em`, espelhado em RTL; os
-* filhos o substituem (`/`, outro ícone).
+* a ordem da lista já diz a hierarquia. O padrão é um chevron de `1em` pelo `Icon` da lib, espelhado
+* em RTL; os filhos o substituem (`/`, outro ícone pelo `Icon`, para ter o mesmo traço).
 */
 const BreadcrumbSeparator = (props) => {
 	const { render, className, children, ...rest } = props;
@@ -21,7 +22,7 @@ const BreadcrumbSeparator = (props) => {
 			"[&_svg]:size-[1em]",
 			"rtl:[&_svg]:rotate-180"
 		], className),
-		children: children ?? /* @__PURE__ */ jsx(CaretRightIcon, {})
+		children: children ?? /* @__PURE__ */ jsx(Icon, { render: /* @__PURE__ */ jsx(CaretRightIcon, {}) })
 	};
 	return useRender({
 		render,

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

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb-separator.js","names":[],"sources":["../../../../src/components/disclosure/breadcrumb/breadcrumb-separator.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { CaretRightIcon } from '@phosphor-icons/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type BreadcrumbSeparatorProps = useRender.ComponentProps<'li'>;\n\n/**\n * Separador entre dois itens, colocado à mão entre eles. Fica fora da árvore de acessibilidade:\n * a ordem da lista já diz a hierarquia. O padrão é um chevron de `1em`, espelhado em RTL; os\n * filhos o substituem (`/`, outro ícone).\n */\nexport const BreadcrumbSeparator = (props: BreadcrumbSeparatorProps) => {\n  const { render, className, children, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Breadcrumb.Separator',\n    role: 'presentation',\n    'aria-hidden': true,\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'items-center',\n\n        'text-gray-11',\n\n        '[&_svg]:size-[1em]',\n        'rtl:[&_svg]:rotate-180',\n      ],\n      className,\n    ),\n    children: children ?? <CaretRightIcon />,\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'li',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nBreadcrumbSeparator.displayName = 'Breadcrumb.Separator';\n"],"mappings":";;;;;;;;;;AAWA,MAAa,uBAAuB,UAAoC;CACtE,MAAM,EAAE,QAAQ,WAAW,UAAU,GAAG,SAAS;CAEjD,MAAM,YAAY;EAChB,kBAAkB;EAClB,MAAM;EACN,eAAe;EACf,WAAW,kBACT;GACE;GACA;GAEA;GAEA;GACA;EACF,GACA,SACF;EACA,UAAU,YAAY,oBAAC,gBAAD,CAAiB,CAAA;CACzC;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,oBAAoB,cAAc"}
+{"version":3,"file":"breadcrumb-separator.js","names":[],"sources":["../../../../src/components/disclosure/breadcrumb/breadcrumb-separator.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';\n\nexport type BreadcrumbSeparatorProps = useRender.ComponentProps<'li'>;\n\n/**\n * Separador entre dois itens, colocado à mão entre eles. Fica fora da árvore de acessibilidade:\n * a ordem da lista já diz a hierarquia. O padrão é um chevron de `1em` pelo `Icon` da lib, espelhado\n * em RTL; os filhos o substituem (`/`, outro ícone pelo `Icon`, para ter o mesmo traço).\n */\nexport const BreadcrumbSeparator = (props: BreadcrumbSeparatorProps) => {\n  const { render, className, children, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Breadcrumb.Separator',\n    role: 'presentation',\n    'aria-hidden': true,\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'items-center',\n\n        'text-gray-11',\n\n        '[&_svg]:size-[1em]',\n        'rtl:[&_svg]:rotate-180',\n      ],\n      className,\n    ),\n    children: children ?? <Icon render={<CaretRightIcon />} />,\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'li',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nBreadcrumbSeparator.displayName = 'Breadcrumb.Separator';\n"],"mappings":";;;;;;;;;;;AAYA,MAAa,uBAAuB,UAAoC;CACtE,MAAM,EAAE,QAAQ,WAAW,UAAU,GAAG,SAAS;CAEjD,MAAM,YAAY;EAChB,kBAAkB;EAClB,MAAM;EACN,eAAe;EACf,WAAW,kBACT;GACE;GACA;GAEA;GAEA;GACA;EACF,GACA,SACF;EACA,UAAU,YAAY,oBAAC,MAAD,EAAM,QAAQ,oBAAC,gBAAD,CAAiB,CAAA,EAAI,CAAA;CAC3D;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,oBAAoB,cAAc"}

package/dist/components/disclosure/breadcrumb/index.parts.d.ts

@@ -1,12 +1,13 @@
 import { BreadcrumbCurrent, BreadcrumbCurrentProps } from "./breadcrumb-current.js";
+import { BreadcrumbEllipsis, BreadcrumbEllipsisProps } from "./breadcrumb-ellipsis.js";
 import { BreadcrumbItem, BreadcrumbItemProps } from "./breadcrumb-item.js";
 import { BreadcrumbLink, BreadcrumbLinkProps } from "./breadcrumb-link.js";
 import { BreadcrumbList, BreadcrumbListProps } from "./breadcrumb-list.js";
 import { BreadcrumbRoot, BreadcrumbRootProps } from "./breadcrumb-root.js";
 import { BreadcrumbSeparator, BreadcrumbSeparatorProps } from "./breadcrumb-separator.js";
 declare namespace index_parts_d_exports {
-  export { BreadcrumbCurrent as Current, BreadcrumbCurrentProps as CurrentProps, BreadcrumbItem as Item, BreadcrumbItemProps as ItemProps, BreadcrumbLink as Link, BreadcrumbLinkProps as LinkProps, BreadcrumbList as List, BreadcrumbListProps as ListProps, BreadcrumbRoot as Root, BreadcrumbRootProps as RootProps, BreadcrumbSeparator as Separator, BreadcrumbSeparatorProps as SeparatorProps };
+  export { BreadcrumbCurrent as Current, BreadcrumbCurrentProps as CurrentProps, BreadcrumbEllipsis as Ellipsis, BreadcrumbEllipsisProps as EllipsisProps, BreadcrumbItem as Item, BreadcrumbItemProps as ItemProps, BreadcrumbLink as Link, BreadcrumbLinkProps as LinkProps, BreadcrumbList as List, BreadcrumbListProps as ListProps, BreadcrumbRoot as Root, BreadcrumbRootProps as RootProps, BreadcrumbSeparator as Separator, BreadcrumbSeparatorProps as SeparatorProps };
 }
 //#endregion
-export { BreadcrumbCurrent as Current, type BreadcrumbCurrentProps as CurrentProps, BreadcrumbItem as Item, type BreadcrumbItemProps as ItemProps, BreadcrumbLink as Link, type BreadcrumbLinkProps as LinkProps, BreadcrumbList as List, type BreadcrumbListProps as ListProps, BreadcrumbRoot as Root, type BreadcrumbRootProps as RootProps, BreadcrumbSeparator as Separator, type BreadcrumbSeparatorProps as SeparatorProps, index_parts_d_exports };
+export { BreadcrumbCurrent as Current, type BreadcrumbCurrentProps as CurrentProps, BreadcrumbEllipsis as Ellipsis, type BreadcrumbEllipsisProps as EllipsisProps, BreadcrumbItem as Item, type BreadcrumbItemProps as ItemProps, BreadcrumbLink as Link, type BreadcrumbLinkProps as LinkProps, BreadcrumbList as List, type BreadcrumbListProps as ListProps, BreadcrumbRoot as Root, type BreadcrumbRootProps as RootProps, BreadcrumbSeparator as Separator, type BreadcrumbSeparatorProps as SeparatorProps, index_parts_d_exports };
 //# sourceMappingURL=index.parts.d.ts.map

package/dist/components/disclosure/breadcrumb/index.parts.js

@@ -1,5 +1,6 @@
 import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
 import { BreadcrumbCurrent } from "./breadcrumb-current.js";
+import { BreadcrumbEllipsis } from "./breadcrumb-ellipsis.js";
 import { BreadcrumbItem } from "./breadcrumb-item.js";
 import { BreadcrumbLink } from "./breadcrumb-link.js";
 import { BreadcrumbList } from "./breadcrumb-list.js";
@@ -8,6 +9,7 @@ import { BreadcrumbSeparator } from "./breadcrumb-separator.js";
 //#region src/components/disclosure/breadcrumb/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Current: () => BreadcrumbCurrent,
+	Ellipsis: () => BreadcrumbEllipsis,
 	Item: () => BreadcrumbItem,
 	Link: () => BreadcrumbLink,
 	List: () => BreadcrumbList,
@@ -15,6 +17,6 @@ var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Separator: () => BreadcrumbSeparator
 });
 //#endregion
-export { BreadcrumbCurrent as Current, BreadcrumbItem as Item, BreadcrumbLink as Link, BreadcrumbList as List, BreadcrumbRoot as Root, BreadcrumbSeparator as Separator, index_parts_exports };
+export { BreadcrumbCurrent as Current, BreadcrumbEllipsis as Ellipsis, BreadcrumbItem as Item, BreadcrumbLink as Link, BreadcrumbList as List, BreadcrumbRoot as Root, BreadcrumbSeparator as Separator, index_parts_exports };
 
 //# sourceMappingURL=index.parts.js.map

package/dist/components/disclosure/breadcrumb/index.parts.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/components/disclosure/breadcrumb/index.parts.ts"],"sourcesContent":["export { BreadcrumbCurrent as Current } from './breadcrumb-current';\nexport { BreadcrumbItem as Item } from './breadcrumb-item';\nexport { BreadcrumbLink as Link } from './breadcrumb-link';\nexport { BreadcrumbList as List } from './breadcrumb-list';\nexport { BreadcrumbRoot as Root } from './breadcrumb-root';\nexport { BreadcrumbSeparator as Separator } from './breadcrumb-separator';\n\n/* types */\n\nexport type { BreadcrumbCurrentProps as CurrentProps } from './breadcrumb-current';\nexport type { BreadcrumbItemProps as ItemProps } from './breadcrumb-item';\nexport type { BreadcrumbLinkProps as LinkProps } from './breadcrumb-link';\nexport type { BreadcrumbListProps as ListProps } from './breadcrumb-list';\nexport type { BreadcrumbRootProps as RootProps } from './breadcrumb-root';\nexport type { BreadcrumbSeparatorProps as SeparatorProps } from './breadcrumb-separator';\n"],"mappings":""}
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/components/disclosure/breadcrumb/index.parts.ts"],"sourcesContent":["export { BreadcrumbCurrent as Current } from './breadcrumb-current';\nexport { BreadcrumbEllipsis as Ellipsis } from './breadcrumb-ellipsis';\nexport { BreadcrumbItem as Item } from './breadcrumb-item';\nexport { BreadcrumbLink as Link } from './breadcrumb-link';\nexport { BreadcrumbList as List } from './breadcrumb-list';\nexport { BreadcrumbRoot as Root } from './breadcrumb-root';\nexport { BreadcrumbSeparator as Separator } from './breadcrumb-separator';\n\n/* types */\n\nexport type { BreadcrumbCurrentProps as CurrentProps } from './breadcrumb-current';\nexport type { BreadcrumbEllipsisProps as EllipsisProps } from './breadcrumb-ellipsis';\nexport type { BreadcrumbItemProps as ItemProps } from './breadcrumb-item';\nexport type { BreadcrumbLinkProps as LinkProps } from './breadcrumb-link';\nexport type { BreadcrumbListProps as ListProps } from './breadcrumb-list';\nexport type { BreadcrumbRootProps as RootProps } from './breadcrumb-root';\nexport type { BreadcrumbSeparatorProps as SeparatorProps } from './breadcrumb-separator';\n"],"mappings":""}

package/dist/components/disclosure/collapsible/collapsible-panel.d.ts

@@ -1,5 +1,5 @@
 import { CollapsiblePanelVariants } from "./collapsible-panel-variants.js";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 import { Collapsible } from "@base-ui/react/collapsible";
 //#region src/components/disclosure/collapsible/collapsible-panel.d.ts
 export type CollapsiblePanelProps = MergeOverride<Collapsible.Panel.Props, CollapsiblePanelVariants>;

package/dist/components/disclosure/collapsible/collapsible-panel.js

@@ -1,6 +1,6 @@
 import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
 import { collapsiblePanelVariants } from "./collapsible-panel-variants.js";
-import { createSplitProps } from "@lucasbernardosn/utils";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
 import { jsx } from "react/jsx-runtime";
 import { Collapsible } from "@base-ui/react/collapsible";
 //#region src/components/disclosure/collapsible/collapsible-panel.tsx

package/dist/components/disclosure/collapsible/collapsible-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapsible-panel.js","names":["BaseCollapsible"],"sources":["../../../../src/components/disclosure/collapsible/collapsible-panel.tsx"],"sourcesContent":["import { Collapsible as BaseCollapsible } from '@base-ui/react/collapsible';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeStateClassNames } from '#utils';\nimport {\n  type CollapsiblePanelVariants,\n  collapsiblePanelVariants,\n} from './collapsible-panel-variants';\n\nexport type CollapsiblePanelProps = MergeOverride<\n  BaseCollapsible.Panel.Props,\n  CollapsiblePanelVariants\n>;\n\nexport type CollapsiblePanelState = BaseCollapsible.Panel.State;\n\nconst splitVariantProps = createSplitProps<CollapsiblePanelVariants>();\n\n/**\n * Conteúdo que abre e fecha, com a altura (ou largura) animada. Com `hiddenUntilFound`, o\n * conteúdo fechado continua encontrável pela busca da página.\n *\n * Padding e borda vão num filho, não no painel: a animação leva a altura a 0, mas padding e\n * borda continuam ocupando espaço, e o painel não fecha por inteiro.\n */\nexport const CollapsiblePanel = (props: CollapsiblePanelProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'orientation',\n  ]);\n\n  const { className, ...rest } = elementProps;\n\n  return (\n    <BaseCollapsible.Panel\n      data-component=\"Collapsible.Panel\"\n      className={mergeStateClassNames(\n        collapsiblePanelVariants(variantProps),\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nCollapsiblePanel.displayName = 'Collapsible.Panel';\n"],"mappings":";;;;;;AAeA,MAAM,oBAAoB,iBAA2C;;;;;;;;AASrE,MAAa,oBAAoB,UAAiC;CAChE,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAC5D,aACF,CAAC;CAED,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,YAAgB,OAAjB;EACE,kBAAe;EACf,WAAW,qBACT,yBAAyB,YAAY,GACrC,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,iBAAiB,cAAc"}
+{"version":3,"file":"collapsible-panel.js","names":["BaseCollapsible"],"sources":["../../../../src/components/disclosure/collapsible/collapsible-panel.tsx"],"sourcesContent":["import { Collapsible as BaseCollapsible } from '@base-ui/react/collapsible';\nimport {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport { mergeStateClassNames } from '#utils';\nimport {\n  type CollapsiblePanelVariants,\n  collapsiblePanelVariants,\n} from './collapsible-panel-variants';\n\nexport type CollapsiblePanelProps = MergeOverride<\n  BaseCollapsible.Panel.Props,\n  CollapsiblePanelVariants\n>;\n\nexport type CollapsiblePanelState = BaseCollapsible.Panel.State;\n\nconst splitVariantProps = createSplitProps<CollapsiblePanelVariants>();\n\n/**\n * Conteúdo que abre e fecha, com a altura (ou largura) animada. Com `hiddenUntilFound`, o\n * conteúdo fechado continua encontrável pela busca da página.\n *\n * Padding e borda vão num filho, não no painel: a animação leva a altura a 0, mas padding e\n * borda continuam ocupando espaço, e o painel não fecha por inteiro.\n */\nexport const CollapsiblePanel = (props: CollapsiblePanelProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'orientation',\n  ]);\n\n  const { className, ...rest } = elementProps;\n\n  return (\n    <BaseCollapsible.Panel\n      data-component=\"Collapsible.Panel\"\n      className={mergeStateClassNames(\n        collapsiblePanelVariants(variantProps),\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nCollapsiblePanel.displayName = 'Collapsible.Panel';\n"],"mappings":";;;;;;AAkBA,MAAM,oBAAoB,iBAA2C;;;;;;;;AASrE,MAAa,oBAAoB,UAAiC;CAChE,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAC5D,aACF,CAAC;CAED,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,YAAgB,OAAjB;EACE,kBAAe;EACf,WAAW,qBACT,yBAAyB,YAAY,GACrC,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,iBAAiB,cAAc"}

package/dist/components/disclosure/tabs/tabs-indicator-variants.d.ts

@@ -1,6 +1,6 @@
 //#region src/components/disclosure/tabs/tabs-indicator-variants.d.ts
 export declare const tabsIndicatorVariants: (props?: ({
-  variant?: "line" | "subtle" | "outline" | "plain" | "enclosed" | null | undefined;
+  variant?: "subtle" | "outline" | "plain" | "line" | "enclosed" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 //# sourceMappingURL=tabs-indicator-variants.d.ts.map

package/dist/components/disclosure/tabs/tabs-list-variants.d.ts

@@ -2,7 +2,7 @@
 export declare const tabsListVariants: (props?: ({
   fitted?: boolean | null | undefined;
   justify?: "center" | "start" | "end" | null | undefined;
-  variant?: "line" | "subtle" | "outline" | "plain" | "enclosed" | null | undefined;
+  variant?: "subtle" | "outline" | "plain" | "line" | "enclosed" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 //# sourceMappingURL=tabs-list-variants.d.ts.map

package/dist/components/disclosure/tabs/tabs-root.d.ts

@@ -1,5 +1,5 @@
 import { TabsVariants } from "./use-tabs-context.js";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 import { Tabs } from "@base-ui/react/tabs";
 //#region src/components/disclosure/tabs/tabs-root.d.ts
 export type TabsRootProps = MergeOverride<Tabs.Root.Props, TabsVariants>;

package/dist/components/disclosure/tabs/tabs-root.js

@@ -1,7 +1,7 @@
 import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
 import { TabsContextProvider } from "./use-tabs-context.js";
 import { tabsRootVariants } from "./tabs-root-variants.js";
-import { createSplitProps } from "@lucasbernardosn/utils";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
 import { jsx } from "react/jsx-runtime";
 import { Tabs } from "@base-ui/react/tabs";
 //#region src/components/disclosure/tabs/tabs-root.tsx

package/dist/components/disclosure/tabs/tabs-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-root.js","names":["BaseTabs"],"sources":["../../../../src/components/disclosure/tabs/tabs-root.tsx"],"sourcesContent":["import { Tabs as BaseTabs } from '@base-ui/react/tabs';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeStateClassNames } from '#utils';\nimport { tabsRootVariants } from './tabs-root-variants';\nimport { TabsContextProvider, type TabsVariants } from './use-tabs-context';\n\nexport type TabsRootProps = MergeOverride<BaseTabs.Root.Props, TabsVariants>;\n\nexport type TabsRootState = BaseTabs.Root.State;\n\nexport type TabsRootChangeEventDetails = BaseTabs.Root.ChangeEventDetails;\n\nexport type TabsRootChangeEventReason = BaseTabs.Root.ChangeEventReason;\n\nexport type TabsRootOrientation = BaseTabs.Root.Orientation;\n\nconst splitVariantProps = createSplitProps<TabsVariants>();\n\n/**\n * Agrupa a lista de tabs e os painéis. `variant`, `fitted` e `justify` seguem\n * por contexto para `List`, `Tab` e `Indicator`; `colorScheme` vira variáveis\n * CSS (`--tabs-*`) lidas por todas as partes. Com\n * `orientation=\"vertical\"`, a lista fica ao lado dos painéis.\n *\n * O fundo da tab ativa no `enclosed` e no `outline`, e o do `Indicator`, vem de\n * `--tabs-surface-bg` (`gray-1`). Sobre outra superfície, troque pela cor dela:\n * `className=\"[--tabs-surface-bg:var(--color-gray-2)]\"`.\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"conta\">\n *   <Tabs.List>\n *     <Tabs.Tab value=\"conta\">Conta</Tabs.Tab>\n *     <Tabs.Tab value=\"senha\">Senha</Tabs.Tab>\n *     <Tabs.Indicator />\n *   </Tabs.List>\n *   <Tabs.Panel value=\"conta\">…</Tabs.Panel>\n *   <Tabs.Panel value=\"senha\">…</Tabs.Panel>\n * </Tabs.Root>\n * ```\n */\nexport const TabsRoot = (props: TabsRootProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'colorScheme',\n    'fitted',\n    'justify',\n    'variant',\n  ]);\n\n  const { className, ...rest } = elementProps;\n\n  return (\n    <TabsContextProvider value={variantProps}>\n      <BaseTabs.Root\n        data-component=\"Tabs.Root\"\n        className={mergeStateClassNames(\n          tabsRootVariants(variantProps),\n          className,\n        )}\n        {...rest}\n      />\n    </TabsContextProvider>\n  );\n};\n\nTabsRoot.displayName = 'Tabs.Root';\n"],"mappings":";;;;;;;AAgBA,MAAM,oBAAoB,iBAA+B;;;;;;;;;;;;;;;;;;;;;;;;AAyBzD,MAAa,YAAY,UAAyB;CAChD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO;EAC5D;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAAC,qBAAD;EAAqB,OAAO;EAC1B,UAAA,oBAACA,KAAS,MAAV;GACE,kBAAe;GACf,WAAW,qBACT,iBAAiB,YAAY,GAC7B,SACF;GACA,GAAI;EACL,CAAA;CACkB,CAAA;AAEzB;AAEA,SAAS,cAAc"}
+{"version":3,"file":"tabs-root.js","names":["BaseTabs"],"sources":["../../../../src/components/disclosure/tabs/tabs-root.tsx"],"sourcesContent":["import { Tabs as BaseTabs } from '@base-ui/react/tabs';\nimport {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport { mergeStateClassNames } from '#utils';\nimport { tabsRootVariants } from './tabs-root-variants';\nimport { TabsContextProvider, type TabsVariants } from './use-tabs-context';\n\nexport type TabsRootProps = MergeOverride<BaseTabs.Root.Props, TabsVariants>;\n\nexport type TabsRootState = BaseTabs.Root.State;\n\nexport type TabsRootChangeEventDetails = BaseTabs.Root.ChangeEventDetails;\n\nexport type TabsRootChangeEventReason = BaseTabs.Root.ChangeEventReason;\n\nexport type TabsRootOrientation = BaseTabs.Root.Orientation;\n\nconst splitVariantProps = createSplitProps<TabsVariants>();\n\n/**\n * Agrupa a lista de tabs e os painéis. `variant`, `fitted` e `justify` seguem\n * por contexto para `List`, `Tab` e `Indicator`; `colorScheme` vira variáveis\n * CSS (`--tabs-*`) lidas por todas as partes. Com\n * `orientation=\"vertical\"`, a lista fica ao lado dos painéis.\n *\n * O fundo da tab ativa no `enclosed` e no `outline`, e o do `Indicator`, vem de\n * `--tabs-surface-bg` (`gray-1`). Sobre outra superfície, troque pela cor dela:\n * `className=\"[--tabs-surface-bg:var(--color-gray-2)]\"`.\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"conta\">\n *   <Tabs.List>\n *     <Tabs.Tab value=\"conta\">Conta</Tabs.Tab>\n *     <Tabs.Tab value=\"senha\">Senha</Tabs.Tab>\n *     <Tabs.Indicator />\n *   </Tabs.List>\n *   <Tabs.Panel value=\"conta\">…</Tabs.Panel>\n *   <Tabs.Panel value=\"senha\">…</Tabs.Panel>\n * </Tabs.Root>\n * ```\n */\nexport const TabsRoot = (props: TabsRootProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'colorScheme',\n    'fitted',\n    'justify',\n    'variant',\n  ]);\n\n  const { className, ...rest } = elementProps;\n\n  return (\n    <TabsContextProvider value={variantProps}>\n      <BaseTabs.Root\n        data-component=\"Tabs.Root\"\n        className={mergeStateClassNames(\n          tabsRootVariants(variantProps),\n          className,\n        )}\n        {...rest}\n      />\n    </TabsContextProvider>\n  );\n};\n\nTabsRoot.displayName = 'Tabs.Root';\n"],"mappings":";;;;;;;AAmBA,MAAM,oBAAoB,iBAA+B;;;;;;;;;;;;;;;;;;;;;;;;AAyBzD,MAAa,YAAY,UAAyB;CAChD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO;EAC5D;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAAC,qBAAD;EAAqB,OAAO;EAC1B,UAAA,oBAACA,KAAS,MAAV;GACE,kBAAe;GACf,WAAW,qBACT,iBAAiB,YAAY,GAC7B,SACF;GACA,GAAI;EACL,CAAA;CACkB,CAAA;AAEzB;AAEA,SAAS,cAAc"}

package/dist/components/disclosure/tabs/tabs-tab-variants.d.ts

@@ -7,7 +7,7 @@
  */
 export declare const tabsTabVariants: (props?: ({
   fitted?: boolean | null | undefined;
-  variant?: "line" | "subtle" | "outline" | "plain" | "enclosed" | null | undefined;
+  variant?: "subtle" | "outline" | "plain" | "line" | "enclosed" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 //# sourceMappingURL=tabs-tab-variants.d.ts.map

package/dist/components/display/avatar/avatar-fallback.d.ts

@@ -0,0 +1,17 @@
+import { Avatar } from "@base-ui/react/avatar";
+//#region src/components/display/avatar/avatar-fallback.d.ts
+export type AvatarFallbackProps = Avatar.Fallback.Props;
+export type AvatarFallbackState = Avatar.Fallback.State;
+/**
+ * O que aparece sem a foto: as iniciais do `name` do `Avatar.Root` (primeiro e último nome) ou,
+ * sem `name`, um ícone de pessoa. Com filhos, usa os filhos. A cor vem do `colorScheme` e da `variant` do `Root`.
+ *
+ * Fica com `aria-hidden`: o nome acessível é o `name` inteiro, no `Root`, e as iniciais lidas
+ * sozinhas não dizem nada.
+ */
+export declare const AvatarFallback: {
+  (props: AvatarFallbackProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=avatar-fallback.d.ts.map

package/dist/components/display/avatar/avatar-fallback.js

@@ -0,0 +1,44 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { Icon } from "../icon/icon.js";
+import { useAvatarContext } from "./use-avatar-context.js";
+import { getInitials } from "@lucasbernardosn/ts-utils";
+import { jsx } from "react/jsx-runtime";
+import { UserIcon } from "@phosphor-icons/react";
+import { Avatar } from "@base-ui/react/avatar";
+//#region src/components/display/avatar/avatar-fallback.tsx
+/**
+* O que aparece sem a foto: as iniciais do `name` do `Avatar.Root` (primeiro e último nome) ou,
+* sem `name`, um ícone de pessoa. Com filhos, usa os filhos. A cor vem do `colorScheme` e da `variant` do `Root`.
+*
+* Fica com `aria-hidden`: o nome acessível é o `name` inteiro, no `Root`, e as iniciais lidas
+* sozinhas não dizem nada.
+*/
+const AvatarFallback = (props) => {
+	const { className, children, ...rest } = props;
+	const { name } = useAvatarContext();
+	const initials = getInitials(name ?? "");
+	return /* @__PURE__ */ jsx(Avatar.Fallback, {
+		"data-component": "Avatar.Fallback",
+		"aria-hidden": true,
+		className: mergeStateClassNames([
+			"absolute",
+			"inset-0",
+			"flex",
+			"items-center",
+			"justify-center",
+			"border",
+			"border-(--avatar-fallback-border)",
+			"rounded-full",
+			"bg-(--avatar-fallback-bg)",
+			"text-(--avatar-fallback-fg)",
+			"[&_svg]:size-[1.25em]"
+		], className),
+		...rest,
+		children: children ?? (initials === "" ? /* @__PURE__ */ jsx(Icon, { render: /* @__PURE__ */ jsx(UserIcon, {}) }) : initials)
+	});
+};
+AvatarFallback.displayName = "Avatar.Fallback";
+//#endregion
+export { AvatarFallback };
+
+//# sourceMappingURL=avatar-fallback.js.map

package/dist/components/display/avatar/avatar-fallback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-fallback.js","names":["BaseAvatar"],"sources":["../../../../src/components/display/avatar/avatar-fallback.tsx"],"sourcesContent":["import { Avatar as BaseAvatar } from '@base-ui/react/avatar';\nimport { getInitials } from '@lucasbernardosn/ts-utils';\nimport { UserIcon } from '@phosphor-icons/react';\nimport { Icon } from '#components/display/icon';\nimport { mergeStateClassNames } from '#utils';\nimport { useAvatarContext } from './use-avatar-context';\n\nexport type AvatarFallbackProps = BaseAvatar.Fallback.Props;\n\nexport type AvatarFallbackState = BaseAvatar.Fallback.State;\n\n/**\n * O que aparece sem a foto: as iniciais do `name` do `Avatar.Root` (primeiro e último nome) ou,\n * sem `name`, um ícone de pessoa. Com filhos, usa os filhos. A cor vem do `colorScheme` e da `variant` do `Root`.\n *\n * Fica com `aria-hidden`: o nome acessível é o `name` inteiro, no `Root`, e as iniciais lidas\n * sozinhas não dizem nada.\n */\nexport const AvatarFallback = (props: AvatarFallbackProps) => {\n  const { className, children, ...rest } = props;\n\n  const { name } = useAvatarContext();\n\n  const initials = getInitials(name ?? '');\n\n  return (\n    <BaseAvatar.Fallback\n      data-component=\"Avatar.Fallback\"\n      aria-hidden={true}\n      className={mergeStateClassNames(\n        [\n          'absolute',\n          'inset-0',\n\n          'flex',\n          'items-center',\n          'justify-center',\n\n          // A borda fica no fallback, e não no `Root`, para a foto não ganhar contorno.\n          'border',\n          'border-(--avatar-fallback-border)',\n          'rounded-full',\n\n          'bg-(--avatar-fallback-bg)',\n          'text-(--avatar-fallback-fg)',\n\n          '[&_svg]:size-[1.25em]',\n        ],\n        className,\n      )}\n      {...rest}\n    >\n      {children ??\n        (initials === '' ? <Icon render={<UserIcon />} /> : initials)}\n    </BaseAvatar.Fallback>\n  );\n};\n\nAvatarFallback.displayName = 'Avatar.Fallback';\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,WAAW,UAAU,GAAG,SAAS;CAEzC,MAAM,EAAE,SAAS,iBAAiB;CAElC,MAAM,WAAW,YAAY,QAAQ,EAAE;CAEvC,OACE,oBAACA,OAAW,UAAZ;EACE,kBAAe;EACf,eAAa;EACb,WAAW,qBACT;GACE;GACA;GAEA;GACA;GACA;GAGA;GACA;GACA;GAEA;GACA;GAEA;EACF,GACA,SACF;EACA,GAAI;EAEH,UAAA,aACE,aAAa,KAAK,oBAAC,MAAD,EAAM,QAAQ,oBAAC,UAAD,CAAW,CAAA,EAAI,CAAA,IAAI;CACnC,CAAA;AAEzB;AAEA,eAAe,cAAc"}

package/dist/components/display/avatar/avatar-image.d.ts

@@ -0,0 +1,18 @@
+import { Avatar } from "@base-ui/react/avatar";
+//#region src/components/display/avatar/avatar-image.d.ts
+export type AvatarImageProps = Avatar.Image.Props;
+export type AvatarImageState = Avatar.Image.State;
+/**
+ * Foto do avatar, por cima do `Avatar.Fallback`, cortada no círculo. O Base UI só a mostra depois
+ * de carregar; com `keepMounted` (para `loading="lazy"` ou um otimizador de imagem), ela fica
+ * invisível enquanto carrega e se falhar, e o fallback aparece por baixo.
+ *
+ * Com `name` no `Avatar.Root`, o nome já vem dele: o `alt` fica vazio. Sem `name`, o `alt` diz quem
+ * é.
+ */
+export declare const AvatarImage: {
+  (props: AvatarImageProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=avatar-image.d.ts.map

package/dist/components/display/avatar/avatar-image.js

@@ -0,0 +1,33 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { jsx } from "react/jsx-runtime";
+import { Avatar } from "@base-ui/react/avatar";
+//#region src/components/display/avatar/avatar-image.tsx
+/**
+* Foto do avatar, por cima do `Avatar.Fallback`, cortada no círculo. O Base UI só a mostra depois
+* de carregar; com `keepMounted` (para `loading="lazy"` ou um otimizador de imagem), ela fica
+* invisível enquanto carrega e se falhar, e o fallback aparece por baixo.
+*
+* Com `name` no `Avatar.Root`, o nome já vem dele: o `alt` fica vazio. Sem `name`, o `alt` diz quem
+* é.
+*/
+const AvatarImage = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(Avatar.Image, {
+		"data-component": "Avatar.Image",
+		className: mergeStateClassNames([
+			"absolute",
+			"inset-0",
+			"z-1",
+			"size-full",
+			"object-cover",
+			"data-loading:invisible",
+			"data-error:invisible"
+		], className),
+		...rest
+	});
+};
+AvatarImage.displayName = "Avatar.Image";
+//#endregion
+export { AvatarImage };
+
+//# sourceMappingURL=avatar-image.js.map

package/dist/components/display/avatar/avatar-image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-image.js","names":["BaseAvatar"],"sources":["../../../../src/components/display/avatar/avatar-image.tsx"],"sourcesContent":["import { Avatar as BaseAvatar } from '@base-ui/react/avatar';\nimport { mergeStateClassNames } from '#utils';\n\nexport type AvatarImageProps = BaseAvatar.Image.Props;\n\nexport type AvatarImageState = BaseAvatar.Image.State;\n\n/**\n * Foto do avatar, por cima do `Avatar.Fallback`, cortada no círculo. O Base UI só a mostra depois\n * de carregar; com `keepMounted` (para `loading=\"lazy\"` ou um otimizador de imagem), ela fica\n * invisível enquanto carrega e se falhar, e o fallback aparece por baixo.\n *\n * Com `name` no `Avatar.Root`, o nome já vem dele: o `alt` fica vazio. Sem `name`, o `alt` diz quem\n * é.\n */\nexport const AvatarImage = (props: AvatarImageProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseAvatar.Image\n      data-component=\"Avatar.Image\"\n      className={mergeStateClassNames(\n        [\n          'absolute',\n          'inset-0',\n          // Por cima do fallback, seja qual for a ordem das partes.\n          'z-1',\n\n          'size-full',\n          'object-cover',\n\n          'data-loading:invisible',\n          'data-error:invisible',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nAvatarImage.displayName = 'Avatar.Image';\n"],"mappings":";;;;;;;;;;;;AAeA,MAAa,eAAe,UAA4B;CACtD,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,OAAW,OAAZ;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GAEA;GAEA;GACA;GAEA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,YAAY,cAAc"}