@lucasbernardosn/react-ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-context.d.ts","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-context.tsx"],"mappings":";;;;YAKY,qBAAqB,UAAU;EACzC,WAAW,SAAS,kBAAkB,OAAO,MAAM;;;;;;;;;;;;;;;qBAgBxC;GAAmB,mBAAC,OACxB,qBAAqB,KAC3B,MAAM"}

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

@@ -0,0 +1,21 @@
+import { useTreeViewContext } from "./use-tree-view-context.js";
+//#region src/components/collections/tree-view/tree-view-context.tsx
+/**
+* Expõe a API do Tree View como render prop.
+*
+* Atalho para acessar o estado inline, sem criar um componente filho só para
+* chamar `useTreeViewContext`.
+*
+* @example
+* ```tsx
+* <TreeView.Context>
+*   {(tree) => <output>{tree.selectedValue.join(', ')}</output>}
+* </TreeView.Context>
+* ```
+*/
+const TreeViewContext = (props) => props.children(useTreeViewContext());
+TreeViewContext.displayName = "TreeView.Context";
+//#endregion
+export { TreeViewContext };
+
+//# sourceMappingURL=tree-view-context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-context.js","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-context.tsx"],"sourcesContent":["import type { TreeNode } from '@zag-js/collection';\nimport type React from 'react';\nimport type { UseTreeViewReturn } from './use-tree-view';\nimport { useTreeViewContext } from './use-tree-view-context';\n\nexport type TreeViewContextProps<T extends TreeNode> = {\n  children: (context: UseTreeViewReturn<T>) => React.ReactNode;\n};\n\n/**\n * Expõe a API do Tree View como render prop.\n *\n * Atalho para acessar o estado inline, sem criar um componente filho só para\n * chamar `useTreeViewContext`.\n *\n * @example\n * ```tsx\n * <TreeView.Context>\n *   {(tree) => <output>{tree.selectedValue.join(', ')}</output>}\n * </TreeView.Context>\n * ```\n */\nexport const TreeViewContext = <T extends TreeNode>(\n  props: TreeViewContextProps<T>,\n): React.ReactNode => props.children(useTreeViewContext());\n\nTreeViewContext.displayName = 'TreeView.Context';\n"],"mappings":";;;;;;;;;;;;;;;AAsBA,MAAa,mBACX,UACoB,MAAM,SAAS,mBAAmB,CAAC;AAEzD,gBAAgB,cAAc"}

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

@@ -0,0 +1,15 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/collections/tree-view/tree-view-item-indicator.d.ts
+export type TreeViewItemIndicatorProps = useRender.ComponentProps<'div'>;
+/**
+ * Marca exibida somente enquanto o nó está selecionado.
+ *
+ * Fica oculta nos demais estados, sem precisar de renderização condicional no
+ * consumidor. Traz um check; `children` troca o ícone.
+ */
+export declare const TreeViewItemIndicator: {
+  (props: TreeViewItemIndicatorProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=tree-view-item-indicator.d.ts.map

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

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

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

@@ -0,0 +1,43 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { Icon } from "../../display/icon/icon.js";
+import { useTreeViewContext } from "./use-tree-view-context.js";
+import { useTreeViewNodePropsContext } from "./use-tree-view-node-props-context.js";
+import { mergeProps, useRender } from "@base-ui/react";
+import { jsx } from "react/jsx-runtime";
+import { CheckIcon } from "@phosphor-icons/react";
+//#region src/components/collections/tree-view/tree-view-item-indicator.tsx
+/**
+* Marca exibida somente enquanto o nó está selecionado.
+*
+* Fica oculta nos demais estados, sem precisar de renderização condicional no
+* consumidor. Traz um check; `children` troca o ícone.
+*/
+const TreeViewItemIndicator = (props) => {
+	const { render, className, children = /* @__PURE__ */ jsx(Icon, { render: /* @__PURE__ */ jsx(CheckIcon, {}) }), ...rest } = props;
+	const treeView = useTreeViewContext();
+	const nodeProps = useTreeViewNodePropsContext();
+	const zagProps = treeView.getItemIndicatorProps(nodeProps);
+	const baseProps = {
+		"data-component": "TreeView.ItemIndicator",
+		className: mergeTwClassNames([
+			"inline-flex",
+			"items-center",
+			"justify-center",
+			"shrink-0",
+			"text-current"
+		], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, zagProps, {
+			...rest,
+			children
+		})
+	});
+};
+TreeViewItemIndicator.displayName = "TreeView.ItemIndicator";
+//#endregion
+export { TreeViewItemIndicator };
+
+//# sourceMappingURL=tree-view-item-indicator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-item-indicator.js","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-item-indicator.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { CheckIcon } from '@phosphor-icons/react';\nimport { Icon } from '#components/display/icon';\nimport { mergeTwClassNames } from '#utils';\nimport { useTreeViewContext } from './use-tree-view-context';\nimport { useTreeViewNodePropsContext } from './use-tree-view-node-props-context';\n\nexport type TreeViewItemIndicatorProps = useRender.ComponentProps<'div'>;\n\n/**\n * Marca exibida somente enquanto o nó está selecionado.\n *\n * Fica oculta nos demais estados, sem precisar de renderização condicional no\n * consumidor. Traz um check; `children` troca o ícone.\n */\nexport const TreeViewItemIndicator = (props: TreeViewItemIndicatorProps) => {\n  const {\n    render,\n    className,\n    children = <Icon render={<CheckIcon />} />,\n    ...rest\n  } = props;\n\n  const treeView = useTreeViewContext();\n  const nodeProps = useTreeViewNodePropsContext();\n\n  const zagProps = treeView.getItemIndicatorProps(nodeProps);\n\n  const baseProps = {\n    'data-component': 'TreeView.ItemIndicator',\n    className: mergeTwClassNames(\n      [\n        'inline-flex',\n        'items-center',\n        'justify-center',\n        'shrink-0',\n        'text-current',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, zagProps, { ...rest, children }),\n  });\n};\n\nTreeViewItemIndicator.displayName = 'TreeView.ItemIndicator';\n"],"mappings":";;;;;;;;;;;;;;AAeA,MAAa,yBAAyB,UAAsC;CAC1E,MAAM,EACJ,QACA,WACA,WAAW,oBAAC,MAAD,EAAM,QAAQ,oBAAC,WAAD,CAAY,CAAA,EAAI,CAAA,GACzC,GAAG,SACD;CAEJ,MAAM,WAAW,mBAAmB;CACpC,MAAM,YAAY,4BAA4B;CAE9C,MAAM,WAAW,SAAS,sBAAsB,SAAS;CAEzD,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GACA;GACA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,UAAU;GAAE,GAAG;GAAM;EAAS,CAAC;CAC9D,CAAC;AACH;AAEA,sBAAsB,cAAc"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-item-text.d.ts","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-item-text.tsx"],"mappings":";;YAMY,wBAAwB,UAAU;;;;;;;qBAQjC;GAA2B,OAAA,wCAAqB,+CAAA"}

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

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

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

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

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

@@ -0,0 +1,26 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/collections/tree-view/tree-view-item.d.ts
+export type TreeViewItemProps = useRender.ComponentProps<'div'>;
+/**
+ * Linha de um nó folha — um nó sem filhos, que só pode ser selecionado.
+ *
+ * Divide a mesma caixa do `TreeView.BranchControl`: mesmo recuo por
+ * profundidade, mesmo espaçamento e mesmos estados visuais.
+ *
+ * Renderize-o como âncora quando o nó levar a algum lugar. A árvore reconhece
+ * o elemento e deixa `Enter` e `Ctrl`/`Cmd` + clique seguirem a navegação
+ * nativa, em vez de apenas selecionar.
+ *
+ * @example
+ * ```tsx
+ * <TreeView.Item render={<a href={node.href} />}>
+ *   <TreeView.ItemText>{node.name}</TreeView.ItemText>
+ * </TreeView.Item>
+ * ```
+ */
+export declare const TreeViewItem: {
+  (props: TreeViewItemProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=tree-view-item.d.ts.map

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

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

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

@@ -0,0 +1,48 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { useTreeViewContext } from "./use-tree-view-context.js";
+import { useTreeViewNodePropsContext } from "./use-tree-view-node-props-context.js";
+import { useTreeViewVariantsContext } from "./use-tree-view-variants-context.js";
+import { treeViewNodeVariants } from "./tree-view-node-variants.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/collections/tree-view/tree-view-item.tsx
+/**
+* Linha de um nó folha — um nó sem filhos, que só pode ser selecionado.
+*
+* Divide a mesma caixa do `TreeView.BranchControl`: mesmo recuo por
+* profundidade, mesmo espaçamento e mesmos estados visuais.
+*
+* Renderize-o como âncora quando o nó levar a algum lugar. A árvore reconhece
+* o elemento e deixa `Enter` e `Ctrl`/`Cmd` + clique seguirem a navegação
+* nativa, em vez de apenas selecionar.
+*
+* @example
+* ```tsx
+* <TreeView.Item render={<a href={node.href} />}>
+*   <TreeView.ItemText>{node.name}</TreeView.ItemText>
+* </TreeView.Item>
+* ```
+*/
+const TreeViewItem = (props) => {
+	const { render, className, ...rest } = props;
+	const treeView = useTreeViewContext();
+	const nodeProps = useTreeViewNodePropsContext();
+	const { variant, colorScheme } = useTreeViewVariantsContext();
+	const zagProps = treeView.getItemProps(nodeProps);
+	const baseProps = {
+		"data-component": "TreeView.Item",
+		className: mergeTwClassNames(treeViewNodeVariants({
+			colorScheme,
+			variant
+		}), className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, zagProps, rest)
+	});
+};
+TreeViewItem.displayName = "TreeView.Item";
+//#endregion
+export { TreeViewItem };
+
+//# sourceMappingURL=tree-view-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-item.js","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-item.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\nimport { treeViewNodeVariants } from './tree-view-node-variants';\nimport { useTreeViewContext } from './use-tree-view-context';\nimport { useTreeViewNodePropsContext } from './use-tree-view-node-props-context';\nimport { useTreeViewVariantsContext } from './use-tree-view-variants-context';\n\nexport type TreeViewItemProps = useRender.ComponentProps<'div'>;\n\n/**\n * Linha de um nó folha — um nó sem filhos, que só pode ser selecionado.\n *\n * Divide a mesma caixa do `TreeView.BranchControl`: mesmo recuo por\n * profundidade, mesmo espaçamento e mesmos estados visuais.\n *\n * Renderize-o como âncora quando o nó levar a algum lugar. A árvore reconhece\n * o elemento e deixa `Enter` e `Ctrl`/`Cmd` + clique seguirem a navegação\n * nativa, em vez de apenas selecionar.\n *\n * @example\n * ```tsx\n * <TreeView.Item render={<a href={node.href} />}>\n *   <TreeView.ItemText>{node.name}</TreeView.ItemText>\n * </TreeView.Item>\n * ```\n */\nexport const TreeViewItem = (props: TreeViewItemProps) => {\n  const { render, className, ...rest } = props;\n\n  const treeView = useTreeViewContext();\n  const nodeProps = useTreeViewNodePropsContext();\n  const { variant, colorScheme } = useTreeViewVariantsContext();\n\n  const zagProps = treeView.getItemProps(nodeProps);\n\n  const baseProps = {\n    'data-component': 'TreeView.Item',\n    className: mergeTwClassNames(\n      treeViewNodeVariants({ colorScheme, variant }),\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, zagProps, rest),\n  });\n};\n\nTreeViewItem.displayName = 'TreeView.Item';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAa,gBAAgB,UAA6B;CACxD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,WAAW,mBAAmB;CACpC,MAAM,YAAY,4BAA4B;CAC9C,MAAM,EAAE,SAAS,gBAAgB,2BAA2B;CAE5D,MAAM,WAAW,SAAS,aAAa,SAAS;CAEhD,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT,qBAAqB;GAAE;GAAa;EAAQ,CAAC,GAC7C,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,UAAU,IAAI;CAC7C,CAAC;AACH;AAEA,aAAa,cAAc"}

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

@@ -0,0 +1,15 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/collections/tree-view/tree-view-label.d.ts
+export type TreeViewLabelProps = useRender.ComponentProps<'h3'>;
+/**
+ * Título da árvore.
+ *
+ * Quando presente, é ele que dá o nome acessível ao `TreeView.Tree`,
+ * substituindo o rótulo padrão.
+ */
+export declare const TreeViewLabel: {
+  (props: TreeViewLabelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=tree-view-label.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-label.d.ts","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-label.tsx"],"mappings":";;YAIY,qBAAqB,UAAU;;;;;;;qBAQ9B;GAAwB,OAAA,qCAAkB,+CAAA"}

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

@@ -0,0 +1,33 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { useTreeViewContext } from "./use-tree-view-context.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/collections/tree-view/tree-view-label.tsx
+/**
+* Título da árvore.
+*
+* Quando presente, é ele que dá o nome acessível ao `TreeView.Tree`,
+* substituindo o rótulo padrão.
+*/
+const TreeViewLabel = (props) => {
+	const { render, className, ...rest } = props;
+	const zagProps = useTreeViewContext().getLabelProps();
+	const baseProps = {
+		"data-component": "TreeView.Label",
+		className: mergeTwClassNames([
+			"text-sm",
+			"font-medium",
+			"text-gray-12",
+			"select-none"
+		], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "h3",
+		props: mergeProps(baseProps, zagProps, rest)
+	});
+};
+TreeViewLabel.displayName = "TreeView.Label";
+//#endregion
+export { TreeViewLabel };
+
+//# sourceMappingURL=tree-view-label.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-label.js","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-label.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\nimport { useTreeViewContext } from './use-tree-view-context';\n\nexport type TreeViewLabelProps = useRender.ComponentProps<'h3'>;\n\n/**\n * Título da árvore.\n *\n * Quando presente, é ele que dá o nome acessível ao `TreeView.Tree`,\n * substituindo o rótulo padrão.\n */\nexport const TreeViewLabel = (props: TreeViewLabelProps) => {\n  const { render, className, ...rest } = props;\n\n  const treeView = useTreeViewContext();\n\n  const zagProps = treeView.getLabelProps();\n\n  const baseProps = {\n    'data-component': 'TreeView.Label',\n    className: mergeTwClassNames(\n      ['text-sm', 'font-medium', 'text-gray-12', 'select-none'],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'h3',\n    props: mergeProps(baseProps, zagProps, rest),\n  });\n};\n\nTreeViewLabel.displayName = 'TreeView.Label';\n"],"mappings":";;;;;;;;;;AAYA,MAAa,iBAAiB,UAA8B;CAC1D,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAIvC,MAAM,WAFW,mBAEO,CAAC,CAAC,cAAc;CAExC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GAAC;GAAW;GAAe;GAAgB;EAAa,GACxD,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,UAAU,IAAI;CAC7C,CAAC;AACH;AAEA,cAAc,cAAc"}

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

@@ -0,0 +1,45 @@
+import React from "react";
+//#region src/components/collections/tree-view/tree-view-node-checkbox-indicator.d.ts
+/**
+ * Props do indicador do checkbox.
+ *
+ * Não aceita `className`, `style` nem props de DOM: o componente escolhe um
+ * dos três conteúdos e o devolve como está, sem envolvê-lo em elemento algum.
+ * A caixa visível é o `TreeView.NodeCheckbox`, que é quem recebe estilo.
+ */
+export type TreeViewNodeCheckboxIndicatorProps = {
+  /**
+   * Conteúdo exibido quando o nó está marcado.
+   *
+   * @default <CheckFatIcon weight="fill" />
+   */
+  children?: React.ReactNode | undefined;
+  /**
+   * Conteúdo exibido quando o nó está parcialmente marcado — alguns
+   * descendentes marcados, outros não.
+   *
+   * @default <MinusIcon />
+   */
+  indeterminate?: React.ReactNode | undefined;
+  /**
+   * Conteúdo exibido quando o nó não está marcado.
+   */
+  fallback?: React.ReactNode | undefined;
+};
+/**
+ * Conteúdo do checkbox correspondente ao estado de marcação do nó: check quando
+ * marcado, traço quando indeterminado e nada quando desmarcado.
+ *
+ * @example
+ * ```tsx
+ * <TreeView.NodeCheckbox>
+ *   <TreeView.NodeCheckboxIndicator />
+ * </TreeView.NodeCheckbox>
+ * ```
+ */
+export declare const TreeViewNodeCheckboxIndicator: {
+  (props: TreeViewNodeCheckboxIndicatorProps): React.ReactNode;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=tree-view-node-checkbox-indicator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-node-checkbox-indicator.d.ts","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-node-checkbox-indicator.tsx"],"mappings":";;;;;;;;;YAYY;;;;;;EAMV,WAAW,MAAM;;;;;;;EAOjB,gBAAgB,MAAM;;;;EAItB,WAAW,MAAM;;;;;;;;;;;;;qBAcN;GACJ,OAAA,qCACN,MAAM"}

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

@@ -0,0 +1,28 @@
+import { Icon } from "../../display/icon/icon.js";
+import { useTreeViewNodeContext } from "./use-tree-view-node-context.js";
+import { jsx } from "react/jsx-runtime";
+import { CheckFatIcon, MinusIcon } from "@phosphor-icons/react";
+//#region src/components/collections/tree-view/tree-view-node-checkbox-indicator.tsx
+/**
+* Conteúdo do checkbox correspondente ao estado de marcação do nó: check quando
+* marcado, traço quando indeterminado e nada quando desmarcado.
+*
+* @example
+* ```tsx
+* <TreeView.NodeCheckbox>
+*   <TreeView.NodeCheckboxIndicator />
+* </TreeView.NodeCheckbox>
+* ```
+*/
+const TreeViewNodeCheckboxIndicator = (props) => {
+	const { children = /* @__PURE__ */ jsx(Icon, { render: /* @__PURE__ */ jsx(CheckFatIcon, { weight: "fill" }) }), indeterminate = /* @__PURE__ */ jsx(Icon, { render: /* @__PURE__ */ jsx(MinusIcon, {}) }), fallback } = props;
+	const nodeState = useTreeViewNodeContext();
+	if (nodeState.checked === "indeterminate" && indeterminate) return indeterminate;
+	if (nodeState.checked === true && children) return children;
+	return fallback;
+};
+TreeViewNodeCheckboxIndicator.displayName = "TreeView.NodeCheckboxIndicator";
+//#endregion
+export { TreeViewNodeCheckboxIndicator };
+
+//# sourceMappingURL=tree-view-node-checkbox-indicator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-node-checkbox-indicator.js","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-node-checkbox-indicator.tsx"],"sourcesContent":["import { CheckFatIcon, MinusIcon } from '@phosphor-icons/react';\nimport type React from 'react';\nimport { Icon } from '#components/display/icon';\nimport { useTreeViewNodeContext } from './use-tree-view-node-context';\n\n/**\n * Props do indicador do checkbox.\n *\n * Não aceita `className`, `style` nem props de DOM: o componente escolhe um\n * dos três conteúdos e o devolve como está, sem envolvê-lo em elemento algum.\n * A caixa visível é o `TreeView.NodeCheckbox`, que é quem recebe estilo.\n */\nexport type TreeViewNodeCheckboxIndicatorProps = {\n  /**\n   * Conteúdo exibido quando o nó está marcado.\n   *\n   * @default <CheckFatIcon weight=\"fill\" />\n   */\n  children?: React.ReactNode | undefined;\n  /**\n   * Conteúdo exibido quando o nó está parcialmente marcado — alguns\n   * descendentes marcados, outros não.\n   *\n   * @default <MinusIcon />\n   */\n  indeterminate?: React.ReactNode | undefined;\n  /**\n   * Conteúdo exibido quando o nó não está marcado.\n   */\n  fallback?: React.ReactNode | undefined;\n};\n\n/**\n * Conteúdo do checkbox correspondente ao estado de marcação do nó: check quando\n * marcado, traço quando indeterminado e nada quando desmarcado.\n *\n * @example\n * ```tsx\n * <TreeView.NodeCheckbox>\n *   <TreeView.NodeCheckboxIndicator />\n * </TreeView.NodeCheckbox>\n * ```\n */\nexport const TreeViewNodeCheckboxIndicator = (\n  props: TreeViewNodeCheckboxIndicatorProps,\n): React.ReactNode => {\n  const {\n    children = <Icon render={<CheckFatIcon weight=\"fill\" />} />,\n    indeterminate = <Icon render={<MinusIcon />} />,\n    fallback,\n  } = props;\n\n  const nodeState = useTreeViewNodeContext();\n\n  if (nodeState.checked === 'indeterminate' && indeterminate) {\n    return indeterminate;\n  }\n\n  if (nodeState.checked === true && children) {\n    return children;\n  }\n\n  return fallback;\n};\n\nTreeViewNodeCheckboxIndicator.displayName = 'TreeView.NodeCheckboxIndicator';\n"],"mappings":";;;;;;;;;;;;;;;;AA2CA,MAAa,iCACX,UACoB;CACpB,MAAM,EACJ,WAAW,oBAAC,MAAD,EAAM,QAAQ,oBAAC,cAAD,EAAc,QAAO,OAAQ,CAAA,EAAI,CAAA,GAC1D,gBAAgB,oBAAC,MAAD,EAAM,QAAQ,oBAAC,WAAD,CAAY,CAAA,EAAI,CAAA,GAC9C,aACE;CAEJ,MAAM,YAAY,uBAAuB;CAEzC,IAAI,UAAU,YAAY,mBAAmB,eAC3C,OAAO;CAGT,IAAI,UAAU,YAAY,QAAQ,UAChC,OAAO;CAGT,OAAO;AACT;AAEA,8BAA8B,cAAc"}

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

@@ -0,0 +1,16 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/collections/tree-view/tree-view-node-checkbox.d.ts
+export type TreeViewNodeCheckboxProps = useRender.ComponentProps<'span'>;
+/**
+ * Caixa de marcação de um nó.
+ *
+ * Reflete três estados: marcado, desmarcado e indeterminado — este último
+ * quando só parte dos descendentes está marcada. Marcar um branch propaga a
+ * marcação para os filhos.
+ */
+export declare const TreeViewNodeCheckbox: {
+  (props: TreeViewNodeCheckboxProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=tree-view-node-checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-node-checkbox.d.ts","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-node-checkbox.tsx"],"mappings":";;YAKY,4BAA4B,UAAU;;;;;;;;qBASrC;GAA+B,OAAA,4CAAyB,+CAAA"}

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

@@ -0,0 +1,54 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { useTreeViewContext } from "./use-tree-view-context.js";
+import { useTreeViewNodePropsContext } from "./use-tree-view-node-props-context.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/collections/tree-view/tree-view-node-checkbox.tsx
+/**
+* Caixa de marcação de um nó.
+*
+* Reflete três estados: marcado, desmarcado e indeterminado — este último
+* quando só parte dos descendentes está marcada. Marcar um branch propaga a
+* marcação para os filhos.
+*/
+const TreeViewNodeCheckbox = (props) => {
+	const { render, className, ...rest } = props;
+	const treeView = useTreeViewContext();
+	const nodeProps = useTreeViewNodePropsContext();
+	const zagProps = treeView.getNodeCheckboxProps(nodeProps);
+	const baseProps = {
+		"data-component": "TreeView.NodeCheckbox",
+		className: mergeTwClassNames([
+			"inline-flex",
+			"items-center",
+			"justify-center",
+			"shrink-0",
+			"size-(--tree-view-icon-size)",
+			"border",
+			"border-gray-alpha-7",
+			"rounded-sm",
+			"corner-squircle",
+			"bg-transparent",
+			"cursor-pointer",
+			"not-motion-reduced:transition-colors",
+			"not-motion-reduced:duration-150",
+			"[&_svg]:size-[calc(var(--tree-view-icon-size)*0.75)]",
+			"data-[state=checked]:bg-(--tree-view-solid-bg)",
+			"data-[state=checked]:border-(--tree-view-solid-bg)",
+			"data-[state=checked]:text-(--tree-view-solid-fg)",
+			"data-[state=indeterminate]:bg-(--tree-view-solid-bg)",
+			"data-[state=indeterminate]:border-(--tree-view-solid-bg)",
+			"data-[state=indeterminate]:text-(--tree-view-solid-fg)",
+			"data-disabled:cursor-not-allowed"
+		], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "span",
+		props: mergeProps(baseProps, zagProps, rest)
+	});
+};
+TreeViewNodeCheckbox.displayName = "TreeView.NodeCheckbox";
+//#endregion
+export { TreeViewNodeCheckbox };
+
+//# sourceMappingURL=tree-view-node-checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-node-checkbox.js","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-node-checkbox.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\nimport { useTreeViewContext } from './use-tree-view-context';\nimport { useTreeViewNodePropsContext } from './use-tree-view-node-props-context';\n\nexport type TreeViewNodeCheckboxProps = useRender.ComponentProps<'span'>;\n\n/**\n * Caixa de marcação de um nó.\n *\n * Reflete três estados: marcado, desmarcado e indeterminado — este último\n * quando só parte dos descendentes está marcada. Marcar um branch propaga a\n * marcação para os filhos.\n */\nexport const TreeViewNodeCheckbox = (props: TreeViewNodeCheckboxProps) => {\n  const { render, className, ...rest } = props;\n\n  const treeView = useTreeViewContext();\n  const nodeProps = useTreeViewNodePropsContext();\n\n  const zagProps = treeView.getNodeCheckboxProps(nodeProps);\n\n  const baseProps = {\n    'data-component': 'TreeView.NodeCheckbox',\n    className: mergeTwClassNames(\n      [\n        'inline-flex',\n        'items-center',\n        'justify-center',\n        'shrink-0',\n\n        'size-(--tree-view-icon-size)',\n\n        'border',\n        'border-gray-alpha-7',\n        'rounded-sm',\n        'corner-squircle',\n\n        'bg-transparent',\n\n        'cursor-pointer',\n\n        'not-motion-reduced:transition-colors',\n        'not-motion-reduced:duration-150',\n\n        // A árvore dimensiona todo ícone com `--tree-view-icon-size`, que aqui é o\n        // tamanho da própria caixa. O ícone de dentro precisa ser menor.\n        '[&_svg]:size-[calc(var(--tree-view-icon-size)*0.75)]',\n\n        // As cores do estado marcado vêm do esquema declarado na linha do nó,\n        // da qual o checkbox é filho.\n        'data-[state=checked]:bg-(--tree-view-solid-bg)',\n        'data-[state=checked]:border-(--tree-view-solid-bg)',\n        'data-[state=checked]:text-(--tree-view-solid-fg)',\n\n        'data-[state=indeterminate]:bg-(--tree-view-solid-bg)',\n        'data-[state=indeterminate]:border-(--tree-view-solid-bg)',\n        'data-[state=indeterminate]:text-(--tree-view-solid-fg)',\n\n        'data-disabled:cursor-not-allowed',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'span',\n    props: mergeProps(baseProps, zagProps, rest),\n  });\n};\n\nTreeViewNodeCheckbox.displayName = 'TreeView.NodeCheckbox';\n"],"mappings":";;;;;;;;;;;;AAcA,MAAa,wBAAwB,UAAqC;CACxE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,WAAW,mBAAmB;CACpC,MAAM,YAAY,4BAA4B;CAE9C,MAAM,WAAW,SAAS,qBAAqB,SAAS;CAExD,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GACA;GAEA;GAEA;GACA;GACA;GACA;GAEA;GAEA;GAEA;GACA;GAIA;GAIA;GACA;GACA;GAEA;GACA;GACA;GAEA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,UAAU,IAAI;CAC7C,CAAC;AACH;AAEA,qBAAqB,cAAc"}

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

@@ -0,0 +1,24 @@
+import React from "react";
+import { NodeState } from "@zag-js/tree-view";
+//#region src/components/collections/tree-view/tree-view-node-context.d.ts
+export type TreeViewNodeContextProps = {
+  children: (context: NodeState) => React.ReactNode;
+};
+/**
+ * Expõe o estado do nó atual como render prop.
+ *
+ * Precisa estar dentro de um `TreeView.NodeProvider`.
+ *
+ * @example
+ * ```tsx
+ * <TreeView.NodeContext>
+ *   {({ expanded }) => (expanded ? <FolderOpenIcon /> : <FolderIcon />)}
+ * </TreeView.NodeContext>
+ * ```
+ */
+export declare const TreeViewNodeContext: {
+  (props: TreeViewNodeContextProps): React.ReactNode;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=tree-view-node-context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-node-context.d.ts","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-node-context.tsx"],"mappings":";;;YAIY;EACV,WAAW,SAAS,cAAc,MAAM;;;;;;;;;;;;;;qBAe7B;GACJ,OAAA,2BACN,MAAM"}

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

@@ -0,0 +1,20 @@
+import { useTreeViewNodeContext } from "./use-tree-view-node-context.js";
+//#region src/components/collections/tree-view/tree-view-node-context.tsx
+/**
+* Expõe o estado do nó atual como render prop.
+*
+* Precisa estar dentro de um `TreeView.NodeProvider`.
+*
+* @example
+* ```tsx
+* <TreeView.NodeContext>
+*   {({ expanded }) => (expanded ? <FolderOpenIcon /> : <FolderIcon />)}
+* </TreeView.NodeContext>
+* ```
+*/
+const TreeViewNodeContext = (props) => props.children(useTreeViewNodeContext());
+TreeViewNodeContext.displayName = "TreeView.NodeContext";
+//#endregion
+export { TreeViewNodeContext };
+
+//# sourceMappingURL=tree-view-node-context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-node-context.js","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-node-context.tsx"],"sourcesContent":["import type { NodeState } from '@zag-js/tree-view';\nimport type React from 'react';\nimport { useTreeViewNodeContext } from './use-tree-view-node-context';\n\nexport type TreeViewNodeContextProps = {\n  children: (context: NodeState) => React.ReactNode;\n};\n\n/**\n * Expõe o estado do nó atual como render prop.\n *\n * Precisa estar dentro de um `TreeView.NodeProvider`.\n *\n * @example\n * ```tsx\n * <TreeView.NodeContext>\n *   {({ expanded }) => (expanded ? <FolderOpenIcon /> : <FolderIcon />)}\n * </TreeView.NodeContext>\n * ```\n */\nexport const TreeViewNodeContext = (\n  props: TreeViewNodeContextProps,\n): React.ReactNode => props.children(useTreeViewNodeContext());\n\nTreeViewNodeContext.displayName = 'TreeView.NodeContext';\n"],"mappings":";;;;;;;;;;;;;;AAoBA,MAAa,uBACX,UACoB,MAAM,SAAS,uBAAuB,CAAC;AAE7D,oBAAoB,cAAc"}

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

@@ -0,0 +1,26 @@
+import React from "react";
+import { MergeOverride } from "@lucasbernardosn/utils";
+import { NodeProps } from "@zag-js/tree-view";
+//#region src/components/collections/tree-view/tree-view-node-provider.d.ts
+export type TreeViewNodeProviderProps<T> = MergeOverride<NodeProps, {
+  /**
+   * Nó da coleção que este provider representa.
+   */
+  node: T;
+  children?: React.ReactNode | undefined;
+}>;
+/**
+ * Disponibiliza um nó da coleção — e o estado derivado dele — para as partes
+ * aninhadas.
+ *
+ * Toda parte que depende de um nó específico (`Item`, `BranchControl`,
+ * `NodeCheckbox`, …) precisa estar dentro de um `NodeProvider`. O
+ * `TreeView.NodeRenderer` já cuida disso; use este componente diretamente
+ * apenas quando estiver montando a recursão à mão.
+ */
+export declare const TreeViewNodeProvider: {
+  <T>(props: TreeViewNodeProviderProps<T>): React.ReactNode;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=tree-view-node-provider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-node-provider.d.ts","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-node-provider.tsx"],"mappings":";;;;YAOY,0BAA0B,KAAK,cACzC;;;;EAKE,MAAM;EACN,WAAW,MAAM;;;;;;;;;;;qBAeR;GAAwB,GAAC,OAC7B,0BAA0B,KAChC,MAAM"}

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

@@ -0,0 +1,32 @@
+import { useTreeViewContext } from "./use-tree-view-context.js";
+import { TreeViewNodeContextProvider } from "./use-tree-view-node-context.js";
+import { TreeViewNodePropsContextProvider } from "./use-tree-view-node-props-context.js";
+import { createSplitProps } from "@lucasbernardosn/utils";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/collections/tree-view/tree-view-node-provider.tsx
+const splitNodeProps = createSplitProps();
+/**
+* Disponibiliza um nó da coleção — e o estado derivado dele — para as partes
+* aninhadas.
+*
+* Toda parte que depende de um nó específico (`Item`, `BranchControl`,
+* `NodeCheckbox`, …) precisa estar dentro de um `NodeProvider`. O
+* `TreeView.NodeRenderer` já cuida disso; use este componente diretamente
+* apenas quando estiver montando a recursão à mão.
+*/
+const TreeViewNodeProvider = (props) => {
+	const [nodeProps, { children }] = splitNodeProps(props, ["indexPath", "node"]);
+	const nodeState = useTreeViewContext().getNodeState(nodeProps);
+	return /* @__PURE__ */ jsx(TreeViewNodeContextProvider, {
+		value: nodeState,
+		children: /* @__PURE__ */ jsx(TreeViewNodePropsContextProvider, {
+			value: nodeProps,
+			children
+		})
+	});
+};
+TreeViewNodeProvider.displayName = "TreeView.NodeProvider";
+//#endregion
+export { TreeViewNodeProvider };
+
+//# sourceMappingURL=tree-view-node-provider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-node-provider.js","names":[],"sources":["../../../../src/components/collections/tree-view/tree-view-node-provider.tsx"],"sourcesContent":["import { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport type { NodeProps } from '@zag-js/tree-view';\nimport type React from 'react';\nimport { useTreeViewContext } from './use-tree-view-context';\nimport { TreeViewNodeContextProvider } from './use-tree-view-node-context';\nimport { TreeViewNodePropsContextProvider } from './use-tree-view-node-props-context';\n\nexport type TreeViewNodeProviderProps<T> = MergeOverride<\n  NodeProps,\n  {\n    /**\n     * Nó da coleção que este provider representa.\n     */\n    node: T;\n    children?: React.ReactNode | undefined;\n  }\n>;\n\nconst splitNodeProps = createSplitProps<NodeProps>();\n\n/**\n * Disponibiliza um nó da coleção — e o estado derivado dele — para as partes\n * aninhadas.\n *\n * Toda parte que depende de um nó específico (`Item`, `BranchControl`,\n * `NodeCheckbox`, …) precisa estar dentro de um `NodeProvider`. O\n * `TreeView.NodeRenderer` já cuida disso; use este componente diretamente\n * apenas quando estiver montando a recursão à mão.\n */\nexport const TreeViewNodeProvider = <T,>(\n  props: TreeViewNodeProviderProps<T>,\n): React.ReactNode => {\n  const [nodeProps, { children }] = splitNodeProps(props, [\n    'indexPath',\n    'node',\n  ]);\n\n  const treeView = useTreeViewContext();\n\n  const nodeState = treeView.getNodeState(nodeProps);\n\n  return (\n    <TreeViewNodeContextProvider value={nodeState}>\n      <TreeViewNodePropsContextProvider value={nodeProps}>\n        {children}\n      </TreeViewNodePropsContextProvider>\n    </TreeViewNodeContextProvider>\n  );\n};\n\nTreeViewNodeProvider.displayName = 'TreeView.NodeProvider';\n"],"mappings":";;;;;;AAkBA,MAAM,iBAAiB,iBAA4B;;;;;;;;;;AAWnD,MAAa,wBACX,UACoB;CACpB,MAAM,CAAC,WAAW,EAAE,cAAc,eAAe,OAAO,CACtD,aACA,MACF,CAAC;CAID,MAAM,YAFW,mBAEQ,CAAC,CAAC,aAAa,SAAS;CAEjD,OACE,oBAAC,6BAAD;EAA6B,OAAO;EAClC,UAAA,oBAAC,kCAAD;GAAkC,OAAO;GACtC;EAC+B,CAAA;CACP,CAAA;AAEjC;AAEA,qBAAqB,cAAc"}