@veracity/vui 3.0.0-beta.8 → 3.0.0

package/dist/tree/theme.js

@@ -1,2 +1,80 @@
-var e={baseStyle:{},defaultProps:{size:`xl`,variant:`default`},parts:[`container`,`icon`,`firstLevelItem`,`item`,`text`],sizes:{xl:{item:{fontSize:`md`,height:48,lineHeight:`24px`,py:`12px`},icon:{height:18,width:18}}},variants:{default:{container:{bg:`white`},firstLevelItem:{bg:`white`,color:`seaBlue.main`,activeColor:`seaBlue.main`,activeBg:`skyBlue.85`,hoverBg:`skyBlue.80`},item:{bg:`white`,color:`seaBlue.main`,activeColor:`seaBlue.main`,activeBg:`skyBlue.85`,hoverBg:`skyBlue.80`,selectedBg:`skyBlue.10`,px:2}},dark:{container:{bg:`darkBlue.main`,color:`white`},firstLevelItem:{bg:`darkBlue.main`,color:`white`,activeBg:`darkBlue.25`,activeColor:`seaBlue.main`,hoverBg:`darkBlue.25`,hoverColor:`white`},item:{bg:`skyBlue.97`,color:`seaBlue.main`,activeBg:`skyBlue.85`,activeColor:`seaBlue.main`,hoverBg:`skyBlue.80`,hoverColor:`seaBlue.main`}}}};export{e as default};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+//#region src/tree/theme.ts
+const baseStyle = {};
+const defaultProps = {
+	size: "xl",
+	variant: "default"
+};
+const parts = [
+	"container",
+	"icon",
+	"firstLevelItem",
+	"item",
+	"text"
+];
+const sizes = { xl: {
+	item: {
+		fontSize: "md",
+		height: 48,
+		lineHeight: "24px",
+		py: "12px"
+	},
+	icon: {
+		height: 18,
+		width: 18
+	}
+} };
+const variants = {
+	default: {
+		container: { bg: "white" },
+		firstLevelItem: {
+			bg: "white",
+			color: "seaBlue.main",
+			activeColor: "seaBlue.main",
+			activeBg: "skyBlue.85",
+			hoverBg: "skyBlue.80"
+		},
+		item: {
+			bg: "white",
+			color: "seaBlue.main",
+			activeColor: "seaBlue.main",
+			activeBg: "skyBlue.85",
+			hoverBg: "skyBlue.80",
+			selectedBg: "skyBlue.10",
+			px: 2
+		}
+	},
+	dark: {
+		container: {
+			bg: "darkBlue.main",
+			color: "white"
+		},
+		firstLevelItem: {
+			bg: "darkBlue.main",
+			color: "white",
+			activeBg: "darkBlue.25",
+			activeColor: "seaBlue.main",
+			hoverBg: "darkBlue.25",
+			hoverColor: "white"
+		},
+		item: {
+			bg: "skyBlue.97",
+			color: "seaBlue.main",
+			activeBg: "skyBlue.85",
+			activeColor: "seaBlue.main",
+			hoverBg: "skyBlue.80",
+			hoverColor: "seaBlue.main"
+		}
+	}
+};
+var theme_default = {
+	baseStyle,
+	defaultProps,
+	parts,
+	sizes,
+	variants
+};
+
+//#endregion
+export { theme_default as default };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=theme.js.map

package/dist/tree/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","names":[],"sources":["../../src/tree/theme.ts"],"sourcesContent":["const baseStyle = {}\n\nconst defaultProps = {\n  size: 'xl',\n  variant: 'default',\n}\n\nconst parts = ['container', 'icon', 'firstLevelItem', 'item', 'text']\n\nconst sizes = {\n  xl: {\n    item: {\n      fontSize: 'md', // 16px\n      height: 48,\n      lineHeight: '24px',\n      py: '12px',\n    },\n    icon: {\n      height: 18,\n      width: 18,\n    },\n  },\n}\n\nconst variants = {\n  default: {\n    container: {\n      bg: 'white',\n    },\n    firstLevelItem: {\n      bg: 'white',\n      color: 'seaBlue.main',\n      activeColor: 'seaBlue.main',\n      activeBg: 'skyBlue.85',\n      hoverBg: 'skyBlue.80', // '#A6DEF2'\n    },\n    item: {\n      bg: 'white',\n      color: 'seaBlue.main',\n      activeColor: 'seaBlue.main',\n      activeBg: 'skyBlue.85',\n      hoverBg: 'skyBlue.80',\n      selectedBg: 'skyBlue.10',\n      px: 2,\n    },\n  },\n  dark: {\n    container: {\n      bg: 'darkBlue.main',\n      color: 'white',\n    },\n    firstLevelItem: {\n      bg: 'darkBlue.main',\n      color: 'white',\n      activeBg: 'darkBlue.25',\n      activeColor: 'seaBlue.main',\n      hoverBg: 'darkBlue.25', //'#152D6A'\n      hoverColor: 'white',\n    },\n    item: {\n      bg: 'skyBlue.97',\n      color: 'seaBlue.main',\n      activeBg: 'skyBlue.85',\n      activeColor: 'seaBlue.main',\n      hoverBg: 'skyBlue.80',\n      hoverColor: 'seaBlue.main',\n    },\n  },\n}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":"AAsEA,IAAA,EAAe,CACb,UAvEgB,EAAE,CAwElB,aAtEmB,CACnB,KAAM,KACN,QAAS,UACV,CAoEC,MAlEY,CAAC,YAAa,OAAQ,iBAAkB,OAAQ,OAAO,CAmEnE,MAjEY,CACZ,GAAI,CACF,KAAM,CACJ,SAAU,KACV,OAAQ,GACR,WAAY,OACZ,GAAI,OACL,CACD,KAAM,CACJ,OAAQ,GACR,MAAO,GACR,CACF,CACF,CAqDC,SAnDe,CACf,QAAS,CACP,UAAW,CACT,GAAI,QACL,CACD,eAAgB,CACd,GAAI,QACJ,MAAO,eACP,YAAa,eACb,SAAU,aACV,QAAS,aACV,CACD,KAAM,CACJ,GAAI,QACJ,MAAO,eACP,YAAa,eACb,SAAU,aACV,QAAS,aACT,WAAY,aACZ,GAAI,EACL,CACF,CACD,KAAM,CACJ,UAAW,CACT,GAAI,gBACJ,MAAO,QACR,CACD,eAAgB,CACd,GAAI,gBACJ,MAAO,QACP,SAAU,cACV,YAAa,eACb,QAAS,cACT,WAAY,QACb,CACD,KAAM,CACJ,GAAI,aACJ,MAAO,eACP,SAAU,aACV,YAAa,eACb,QAAS,aACT,WAAY,eACb,CACF,CACF,CAQA"}
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/tree/theme.ts"],"sourcesContent":["const baseStyle = {}\n\nconst defaultProps = {\n  size: 'xl',\n  variant: 'default',\n}\n\nconst parts = ['container', 'icon', 'firstLevelItem', 'item', 'text']\n\nconst sizes = {\n  xl: {\n    item: {\n      fontSize: 'md', // 16px\n      height: 48,\n      lineHeight: '24px',\n      py: '12px',\n    },\n    icon: {\n      height: 18,\n      width: 18,\n    },\n  },\n}\n\nconst variants = {\n  default: {\n    container: {\n      bg: 'white',\n    },\n    firstLevelItem: {\n      bg: 'white',\n      color: 'seaBlue.main',\n      activeColor: 'seaBlue.main',\n      activeBg: 'skyBlue.85',\n      hoverBg: 'skyBlue.80', // '#A6DEF2'\n    },\n    item: {\n      bg: 'white',\n      color: 'seaBlue.main',\n      activeColor: 'seaBlue.main',\n      activeBg: 'skyBlue.85',\n      hoverBg: 'skyBlue.80',\n      selectedBg: 'skyBlue.10',\n      px: 2,\n    },\n  },\n  dark: {\n    container: {\n      bg: 'darkBlue.main',\n      color: 'white',\n    },\n    firstLevelItem: {\n      bg: 'darkBlue.main',\n      color: 'white',\n      activeBg: 'darkBlue.25',\n      activeColor: 'seaBlue.main',\n      hoverBg: 'darkBlue.25', //'#152D6A'\n      hoverColor: 'white',\n    },\n    item: {\n      bg: 'skyBlue.97',\n      color: 'seaBlue.main',\n      activeBg: 'skyBlue.85',\n      activeColor: 'seaBlue.main',\n      hoverBg: 'skyBlue.80',\n      hoverColor: 'seaBlue.main',\n    },\n  },\n}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":";AAAA,MAAM,YAAY,EAAE;AAEpB,MAAM,eAAe;CACnB,MAAM;CACN,SAAS;CACV;AAED,MAAM,QAAQ;CAAC;CAAa;CAAQ;CAAkB;CAAQ;CAAO;AAErE,MAAM,QAAQ,EACZ,IAAI;CACF,MAAM;EACJ,UAAU;EACV,QAAQ;EACR,YAAY;EACZ,IAAI;EACL;CACD,MAAM;EACJ,QAAQ;EACR,OAAO;EACR;CACF,EACF;AAED,MAAM,WAAW;CACf,SAAS;EACP,WAAW,EACT,IAAI,SACL;EACD,gBAAgB;GACd,IAAI;GACJ,OAAO;GACP,aAAa;GACb,UAAU;GACV,SAAS;GACV;EACD,MAAM;GACJ,IAAI;GACJ,OAAO;GACP,aAAa;GACb,UAAU;GACV,SAAS;GACT,YAAY;GACZ,IAAI;GACL;EACF;CACD,MAAM;EACJ,WAAW;GACT,IAAI;GACJ,OAAO;GACR;EACD,gBAAgB;GACd,IAAI;GACJ,OAAO;GACP,UAAU;GACV,aAAa;GACb,SAAS;GACT,YAAY;GACb;EACD,MAAM;GACJ,IAAI;GACJ,OAAO;GACP,UAAU;GACV,aAAa;GACb,SAAS;GACT,YAAY;GACb;EACF;CACF;AAED,oBAAe;CACb;CACA;CACA;CACA;CACA;CACD"}

package/dist/tree/tree.d.ts

@@ -1,13 +1,15 @@
 import { SystemProps } from "../system/system.js";
 import { VuiComponent } from "../core/vui.js";
+import "../core/index.js";
 import { TreeProps } from "./tree.types.js";
 import { TreeIcon } from "./treeIcon.js";
 import { TreeItem } from "./treeItem.js";
 import { TreeText } from "./treeText.js";
-import * as styled_components426 from "styled-components";
+import "../index.js";
+import * as styled_components443 from "styled-components";
 
 //#region src/tree/tree.d.ts
-declare const TreeBase: styled_components426.StyledComponent<"div", styled_components426.DefaultTheme, SystemProps, never>;
+declare const TreeBase: styled_components443.StyledComponent<"div", styled_components443.DefaultTheme, SystemProps, never>;
 /** Displays a tree of tree link items and optional heading. Exposes some props to the children via context. */
 declare const Tree: VuiComponent<"div", TreeProps> & {
   Icon: typeof TreeIcon;

package/dist/tree/tree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tree.d.ts","names":[],"sources":["../../src/tree/tree.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;cAca,UAAQ,oBAAA,CAAA,uBAKpB,oBAAA,CALoB,YAAA,CAAA,CAAA,WAAA,CAAA;;cAQR,MAuFP,oBAAoB;eACX;EAhGF,IAAA,CAAA,CAAA,MAAA,CAiGE,QA5Fd;EAAA,IAAA,CAAA,CAAA,MAAA,CA6Fc,QA7Fd"}
+{"version":3,"file":"tree.d.ts","names":[],"sources":["../../src/tree/tree.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;cAca,UAAQ,oBAAA,CAAA,uBAKpB,oBAAA,CALoB,YAAA,CAAA,CAAA,WAAA,CAAA;;cAQR,MAuFP,oBAAoB;eACX;eACA;eACA;AAlGf,CAAA"}

package/dist/tree/tree.js

@@ -1,7 +1,103 @@
-import{filterUndefined as e}from"../utils/object.js";import{cs as t}from"../utils/styles.js";import{useStyleConfig as n}from"../core/theme.js";import{styled as r}from"../core/styled.js";import{vui as i}from"../core/vui.js";import{List as a}from"../list/list.js";import{TreeProvider as o}from"./context.js";import s from"./treeIcon.js";import c from"./treeText.js";import l from"./treeItem.js";import{useTreeState as u}from"./useTreeState.js";import{Children as d,useEffect as f,useMemo as p}from"react";import{jsx as m}from"react/jsx-runtime";const h=r.divBox`
+import { filterUndefined } from "../utils/object.js";
+import { cs } from "../utils/styles.js";
+import { useStyleConfig } from "../core/theme.js";
+import { styled } from "../core/styled.js";
+import { vui } from "../core/vui.js";
+import { List } from "../list/list.js";
+import { TreeProvider } from "./context.js";
+import treeIcon_default from "./treeIcon.js";
+import treeText_default from "./treeText.js";
+import treeItem_default from "./treeItem.js";
+import { useTreeState } from "./useTreeState.js";
+import { Children, useEffect, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/tree/tree.tsx
+const TreeBase = styled.divBox`
   display: flex;
   height: auto;
   align-content: flex-start;
   flex-direction: column;
-`,g=i((r,i)=>{let{activeItemId:s,children:c,className:g,iconCollapse:_,iconExpand:v,items:y,onClickItem:b,size:x,variant:S,...C}=r,w=n(`Tree`,r),{itemsInternal:T,setItemsInternal:E,activeItemIndex:D,setActiveItemIndex:O}=u(s),k=p(()=>e({size:x,variant:S}),[x,S]),A=_||(S===`default`?`falAngleRight`:`falMinus`),j=v||(S===`default`?`falAngleDown`:`falPlus`),M=e=>{let t=[];return e&&d.toArray(e).forEach((e,n)=>{if(e?.props?.text){let n=[];e.props.children&&(n=M(e.props.children)),t.push({id:e.props.id,text:e.props.text,isActive:e.props.isActive,items:e.props.items||n,isCollapsed:e.props.isCollapsed,disabled:e.props.disabled,onClickTreeItem:N})}}),t};f(()=>{if(y){E(y);return}let e=[];if(c){let t=M(c);e.push(...t)}E(e),s!==void 0&&e?.find(e=>e.id===s)&&O(s)},[c,s]);let N=e=>{O(e),b&&b(e)};return m(o,{value:k,children:m(h,{className:t(`vui-tree`,g),ref:i,...w.container,...C,children:m(a,{role:`tree`,w:1,children:T?.map(({id:e,isActive:t,...n},r)=>m(l,{activeItemIndex:D,iconCollapse:A,iconExpand:j,id:e,isActive:t||(D?D===e:!1),isFirstLevel:!0,onClickTreeItem:N,...n},e??r))})})})});g.Icon=s,g.Item=l,g.Text=c,g.displayName=`Tree`;export{g as Tree,h as TreeBase};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+`;
+/** Displays a tree of tree link items and optional heading. Exposes some props to the children via context. */
+const Tree = vui((props, ref) => {
+	const { activeItemId, children, className, iconCollapse, iconExpand, items, onClickItem, size, variant,...rest } = props;
+	const styles = useStyleConfig("Tree", props);
+	const { itemsInternal, setItemsInternal, activeItemIndex, setActiveItemIndex } = useTreeState(activeItemId);
+	const context = useMemo(() => filterUndefined({
+		size,
+		variant
+	}), [size, variant]);
+	const iconCollapseInternal = iconCollapse ? iconCollapse : variant === "default" ? "falAngleRight" : "falMinus";
+	const iconExpandInternal = iconExpand ? iconExpand : variant === "default" ? "falAngleDown" : "falPlus";
+	const transformChildrenToItems = (children$1) => {
+		const t = [];
+		if (children$1) Children.toArray(children$1).forEach((child, index) => {
+			if (child?.props?.text) {
+				let items$1 = [];
+				if (child.props.children) items$1 = transformChildrenToItems(child.props.children);
+				t.push({
+					id: child.props.id,
+					text: child.props.text,
+					isActive: child.props.isActive,
+					items: child.props.items || items$1,
+					isCollapsed: child.props.isCollapsed,
+					disabled: child.props.disabled,
+					onClickTreeItem
+				});
+			}
+		});
+		return t;
+	};
+	useEffect(() => {
+		if (items) {
+			setItemsInternal(items);
+			return;
+		}
+		const t = [];
+		if (children) {
+			const transformed = transformChildrenToItems(children);
+			t.push(...transformed);
+		}
+		setItemsInternal(t);
+		if (activeItemId !== void 0 && t?.find((i) => i.id === activeItemId)) setActiveItemIndex(activeItemId);
+	}, [children, activeItemId]);
+	const onClickTreeItem = (id) => {
+		setActiveItemIndex(id);
+		if (onClickItem) onClickItem(id);
+	};
+	return /* @__PURE__ */ jsx(TreeProvider, {
+		value: context,
+		children: /* @__PURE__ */ jsx(TreeBase, {
+			className: cs("vui-tree", className),
+			ref,
+			...styles.container,
+			...rest,
+			children: /* @__PURE__ */ jsx(List, {
+				role: "tree",
+				w: 1,
+				children: itemsInternal?.map(({ id, isActive,...props$1 }, index) => {
+					return /* @__PURE__ */ jsx(treeItem_default, {
+						activeItemIndex,
+						iconCollapse: iconCollapseInternal,
+						iconExpand: iconExpandInternal,
+						id,
+						isActive: isActive ? isActive : activeItemIndex ? activeItemIndex === id : false,
+						isFirstLevel: true,
+						onClickTreeItem,
+						...props$1
+					}, id ?? index);
+				})
+			})
+		})
+	});
+});
+Tree.Icon = treeIcon_default;
+Tree.Item = treeItem_default;
+Tree.Text = treeText_default;
+Tree.displayName = "Tree";
+
+//#endregion
+export { Tree, TreeBase };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=tree.js.map

package/dist/tree/tree.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree.js","names":["t: TreeItemProps[]","children","items: TreeItemProps[]","items","props","TreeItem","TreeIcon","TreeText"],"sources":["../../src/tree/tree.tsx"],"sourcesContent":["import type { ReactElement } from 'react'\nimport { Children, useEffect, useMemo } from 'react'\n\nimport type { VuiComponent } from '../core'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { List } from '../list'\nimport { cs, filterUndefined } from '../utils'\nimport { TreeProvider } from './context'\nimport type { TreeItemId, TreeItemProps, TreeProps } from './tree.types'\nimport TreeIcon from './treeIcon'\nimport TreeItem from './treeItem'\nimport TreeText from './treeText'\nimport { useTreeState } from './useTreeState'\n\nexport const TreeBase = styled.divBox`\n  display: flex;\n  height: auto;\n  align-content: flex-start;\n  flex-direction: column;\n`\n\n/** Displays a tree of tree link items and optional heading. Exposes some props to the children via context. */\nexport const Tree = vui<'div', TreeProps>((props, ref) => {\n  const { activeItemId, children, className, iconCollapse, iconExpand, items, onClickItem, size, variant, ...rest } =\n    props\n  const styles = useStyleConfig('Tree', props)\n\n  const { itemsInternal, setItemsInternal, activeItemIndex, setActiveItemIndex } = useTreeState(activeItemId)\n\n  const context = useMemo(() => filterUndefined({ size, variant }), [size, variant])\n\n  const iconCollapseInternal = iconCollapse ? iconCollapse : variant === 'default' ? 'falAngleRight' : 'falMinus'\n  const iconExpandInternal = iconExpand ? iconExpand : variant === 'default' ? 'falAngleDown' : 'falPlus'\n\n  const transformChildrenToItems = (children: any) => {\n    const t: TreeItemProps[] = []\n\n    if (children) {\n      ;(Children.toArray(children) as ReactElement[]).forEach((child: ReactElement<TreeItemProps>, index: number) => {\n        if (child?.props?.text) {\n          let items: TreeItemProps[] = []\n\n          if (child.props.children) {\n            items = transformChildrenToItems(child.props.children) as unknown as TreeItemProps[]\n          }\n\n          t.push({\n            id: child.props.id,\n            text: child.props.text,\n            isActive: child.props.isActive,\n            items: child.props.items || items,\n            isCollapsed: child.props.isCollapsed,\n            disabled: child.props.disabled,\n            onClickTreeItem: onClickTreeItem,\n          } as unknown as TreeItemProps)\n        }\n      })\n    }\n\n    return t\n  }\n\n  useEffect(() => {\n    if (items) {\n      setItemsInternal(items as TreeItemProps[])\n      return\n    }\n\n    const t: TreeItemProps[] = []\n    if (children) {\n      const transformed = transformChildrenToItems(children) as unknown as TreeItemProps[]\n      t.push(...transformed)\n    }\n    setItemsInternal(t)\n    if (activeItemId !== undefined && t?.find((i: TreeItemProps) => i.id === activeItemId)) {\n      setActiveItemIndex(activeItemId)\n    }\n  }, [children, activeItemId])\n\n  const onClickTreeItem = (id: TreeItemId) => {\n    setActiveItemIndex(id)\n    if (onClickItem) {\n      onClickItem(id)\n    }\n  }\n\n  return (\n    <TreeProvider value={context}>\n      <TreeBase className={cs('vui-tree', className)} ref={ref} {...styles.container} {...rest}>\n        <List role=\"tree\" w={1}>\n          {itemsInternal?.map(({ id, isActive, ...props }, index: number) => {\n            return (\n              <TreeItem\n                activeItemIndex={activeItemIndex}\n                iconCollapse={iconCollapseInternal}\n                iconExpand={iconExpandInternal}\n                id={id}\n                isActive={isActive ? isActive : activeItemIndex ? activeItemIndex === id : false}\n                isFirstLevel={true}\n                key={id ?? index}\n                onClickTreeItem={onClickTreeItem}\n                {...props}\n              />\n            )\n          })}\n        </List>\n      </TreeBase>\n    </TreeProvider>\n  )\n}) as VuiComponent<'div', TreeProps> & {\n  Icon: typeof TreeIcon\n  Item: typeof TreeItem\n  Text: typeof TreeText\n}\n\nTree.Icon = TreeIcon\nTree.Item = TreeItem\nTree.Text = TreeText\nTree.displayName = 'Tree'\n\nexport default Tree\n"],"mappings":"+hBAcA,MAAa,EAAW,EAAO,MAAM;;;;;EAQxB,EAAO,GAAuB,EAAO,IAAQ,CACxD,GAAM,CAAE,eAAc,WAAU,YAAW,eAAc,aAAY,QAAO,cAAa,OAAM,UAAS,GAAG,GACzG,EACI,EAAS,EAAe,OAAQ,EAAM,CAEtC,CAAE,gBAAe,mBAAkB,kBAAiB,sBAAuB,EAAa,EAAa,CAErG,EAAU,MAAc,EAAgB,CAAE,OAAM,UAAS,CAAC,CAAE,CAAC,EAAM,EAAQ,CAAC,CAE5E,EAAuB,IAA8B,IAAY,UAAY,gBAAkB,YAC/F,EAAqB,IAA0B,IAAY,UAAY,eAAiB,WAExF,EAA4B,GAAkB,CAClD,IAAMA,EAAqB,EAAE,CAwB7B,OAtBIC,GACA,EAAS,QAAQA,EAAS,CAAoB,SAAS,EAAoC,IAAkB,CAC7G,GAAI,GAAO,OAAO,KAAM,CACtB,IAAIC,EAAyB,EAAE,CAE3B,EAAM,MAAM,WACd,EAAQ,EAAyB,EAAM,MAAM,SAAS,EAGxD,EAAE,KAAK,CACL,GAAI,EAAM,MAAM,GAChB,KAAM,EAAM,MAAM,KAClB,SAAU,EAAM,MAAM,SACtB,MAAO,EAAM,MAAM,OAASC,EAC5B,YAAa,EAAM,MAAM,YACzB,SAAU,EAAM,MAAM,SACL,kBAClB,CAA6B,GAEhC,CAGG,GAGT,MAAgB,CACd,GAAI,EAAO,CACT,EAAiB,EAAyB,CAC1C,OAGF,IAAMH,EAAqB,EAAE,CAC7B,GAAI,EAAU,CACZ,IAAM,EAAc,EAAyB,EAAS,CACtD,EAAE,KAAK,GAAG,EAAY,CAExB,EAAiB,EAAE,CACf,IAAiB,IAAA,IAAa,GAAG,KAAM,GAAqB,EAAE,KAAO,EAAa,EACpF,EAAmB,EAAa,EAEjC,CAAC,EAAU,EAAa,CAAC,CAE5B,IAAM,EAAmB,GAAmB,CAC1C,EAAmB,EAAG,CAClB,GACF,EAAY,EAAG,EAInB,OACE,EAAC,EAAA,CAAa,MAAO,WACnB,EAAC,EAAA,CAAS,UAAW,EAAG,WAAY,EAAU,CAAO,MAAK,GAAI,EAAO,UAAW,GAAI,WAClF,EAAC,EAAA,CAAK,KAAK,OAAO,EAAG,WAClB,GAAe,KAAK,CAAE,KAAI,WAAU,GAAGI,GAAS,IAE7C,EAACC,EAAAA,CACkB,kBACjB,aAAc,EACd,WAAY,EACR,KACJ,SAAU,IAAsB,EAAkB,IAAoB,EAAK,IAC3E,aAAc,GAEG,kBACjB,GAAID,GAFC,GAAM,EAGX,CAEJ,EACG,EACE,EACE,EAEjB,CAMF,EAAK,KAAOE,EACZ,EAAK,KAAOD,EACZ,EAAK,KAAOE,EACZ,EAAK,YAAc"}
+{"version":3,"file":"tree.js","names":["t: TreeItemProps[]","children","items: TreeItemProps[]","items","props","TreeItem","TreeIcon","TreeText"],"sources":["../../src/tree/tree.tsx"],"sourcesContent":["import type { ReactElement } from 'react'\nimport { Children, useEffect, useMemo } from 'react'\n\nimport type { VuiComponent } from '../core'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { List } from '../list'\nimport { cs, filterUndefined } from '../utils'\nimport { TreeProvider } from './context'\nimport type { TreeItemId, TreeItemProps, TreeProps } from './tree.types'\nimport TreeIcon from './treeIcon'\nimport TreeItem from './treeItem'\nimport TreeText from './treeText'\nimport { useTreeState } from './useTreeState'\n\nexport const TreeBase = styled.divBox`\n  display: flex;\n  height: auto;\n  align-content: flex-start;\n  flex-direction: column;\n`\n\n/** Displays a tree of tree link items and optional heading. Exposes some props to the children via context. */\nexport const Tree = vui<'div', TreeProps>((props, ref) => {\n  const { activeItemId, children, className, iconCollapse, iconExpand, items, onClickItem, size, variant, ...rest } =\n    props\n  const styles = useStyleConfig('Tree', props)\n\n  const { itemsInternal, setItemsInternal, activeItemIndex, setActiveItemIndex } = useTreeState(activeItemId)\n\n  const context = useMemo(() => filterUndefined({ size, variant }), [size, variant])\n\n  const iconCollapseInternal = iconCollapse ? iconCollapse : variant === 'default' ? 'falAngleRight' : 'falMinus'\n  const iconExpandInternal = iconExpand ? iconExpand : variant === 'default' ? 'falAngleDown' : 'falPlus'\n\n  const transformChildrenToItems = (children: any) => {\n    const t: TreeItemProps[] = []\n\n    if (children) {\n      ;(Children.toArray(children) as ReactElement[]).forEach((child: ReactElement<TreeItemProps>, index: number) => {\n        if (child?.props?.text) {\n          let items: TreeItemProps[] = []\n\n          if (child.props.children) {\n            items = transformChildrenToItems(child.props.children) as unknown as TreeItemProps[]\n          }\n\n          t.push({\n            id: child.props.id,\n            text: child.props.text,\n            isActive: child.props.isActive,\n            items: child.props.items || items,\n            isCollapsed: child.props.isCollapsed,\n            disabled: child.props.disabled,\n            onClickTreeItem: onClickTreeItem,\n          } as unknown as TreeItemProps)\n        }\n      })\n    }\n\n    return t\n  }\n\n  useEffect(() => {\n    if (items) {\n      setItemsInternal(items as TreeItemProps[])\n      return\n    }\n\n    const t: TreeItemProps[] = []\n    if (children) {\n      const transformed = transformChildrenToItems(children) as unknown as TreeItemProps[]\n      t.push(...transformed)\n    }\n    setItemsInternal(t)\n    if (activeItemId !== undefined && t?.find((i: TreeItemProps) => i.id === activeItemId)) {\n      setActiveItemIndex(activeItemId)\n    }\n  }, [children, activeItemId])\n\n  const onClickTreeItem = (id: TreeItemId) => {\n    setActiveItemIndex(id)\n    if (onClickItem) {\n      onClickItem(id)\n    }\n  }\n\n  return (\n    <TreeProvider value={context}>\n      <TreeBase className={cs('vui-tree', className)} ref={ref} {...styles.container} {...rest}>\n        <List role=\"tree\" w={1}>\n          {itemsInternal?.map(({ id, isActive, ...props }, index: number) => {\n            return (\n              <TreeItem\n                activeItemIndex={activeItemIndex}\n                iconCollapse={iconCollapseInternal}\n                iconExpand={iconExpandInternal}\n                id={id}\n                isActive={isActive ? isActive : activeItemIndex ? activeItemIndex === id : false}\n                isFirstLevel={true}\n                key={id ?? index}\n                onClickTreeItem={onClickTreeItem}\n                {...props}\n              />\n            )\n          })}\n        </List>\n      </TreeBase>\n    </TreeProvider>\n  )\n}) as VuiComponent<'div', TreeProps> & {\n  Icon: typeof TreeIcon\n  Item: typeof TreeItem\n  Text: typeof TreeText\n}\n\nTree.Icon = TreeIcon\nTree.Item = TreeItem\nTree.Text = TreeText\nTree.displayName = 'Tree'\n\nexport default Tree\n"],"mappings":";;;;;;;;;;;;;;;AAcA,MAAa,WAAW,OAAO,MAAM;;;;;;;AAQrC,MAAa,OAAO,KAAuB,OAAO,QAAQ;CACxD,MAAM,EAAE,cAAc,UAAU,WAAW,cAAc,YAAY,OAAO,aAAa,MAAM,QAAS,GAAG,SACzG;CACF,MAAM,SAAS,eAAe,QAAQ,MAAM;CAE5C,MAAM,EAAE,eAAe,kBAAkB,iBAAiB,uBAAuB,aAAa,aAAa;CAE3G,MAAM,UAAU,cAAc,gBAAgB;EAAE;EAAM;EAAS,CAAC,EAAE,CAAC,MAAM,QAAQ,CAAC;CAElF,MAAM,uBAAuB,eAAe,eAAe,YAAY,YAAY,kBAAkB;CACrG,MAAM,qBAAqB,aAAa,aAAa,YAAY,YAAY,iBAAiB;CAE9F,MAAM,4BAA4B,eAAkB;EAClD,MAAMA,IAAqB,EAAE;AAE7B,MAAIC,WACD,CAAC,SAAS,QAAQA,WAAS,CAAoB,SAAS,OAAoC,UAAkB;AAC7G,OAAI,OAAO,OAAO,MAAM;IACtB,IAAIC,UAAyB,EAAE;AAE/B,QAAI,MAAM,MAAM,SACd,WAAQ,yBAAyB,MAAM,MAAM,SAAS;AAGxD,MAAE,KAAK;KACL,IAAI,MAAM,MAAM;KAChB,MAAM,MAAM,MAAM;KAClB,UAAU,MAAM,MAAM;KACtB,OAAO,MAAM,MAAM,SAASC;KAC5B,aAAa,MAAM,MAAM;KACzB,UAAU,MAAM,MAAM;KACL;KAClB,CAA6B;;IAEhC;AAGJ,SAAO;;AAGT,iBAAgB;AACd,MAAI,OAAO;AACT,oBAAiB,MAAyB;AAC1C;;EAGF,MAAMH,IAAqB,EAAE;AAC7B,MAAI,UAAU;GACZ,MAAM,cAAc,yBAAyB,SAAS;AACtD,KAAE,KAAK,GAAG,YAAY;;AAExB,mBAAiB,EAAE;AACnB,MAAI,iBAAiB,UAAa,GAAG,MAAM,MAAqB,EAAE,OAAO,aAAa,CACpF,oBAAmB,aAAa;IAEjC,CAAC,UAAU,aAAa,CAAC;CAE5B,MAAM,mBAAmB,OAAmB;AAC1C,qBAAmB,GAAG;AACtB,MAAI,YACF,aAAY,GAAG;;AAInB,QACE,oBAAC;EAAa,OAAO;YACnB,oBAAC;GAAS,WAAW,GAAG,YAAY,UAAU;GAAO;GAAK,GAAI,OAAO;GAAW,GAAI;aAClF,oBAAC;IAAK,MAAK;IAAO,GAAG;cAClB,eAAe,KAAK,EAAE,IAAI,SAAU,GAAGI,WAAS,UAAkB;AACjE,YACE,oBAACC;MACkB;MACjB,cAAc;MACd,YAAY;MACR;MACJ,UAAU,WAAW,WAAW,kBAAkB,oBAAoB,KAAK;MAC3E,cAAc;MAEG;MACjB,GAAID;QAFC,MAAM,MAGX;MAEJ;KACG;IACE;GACE;EAEjB;AAMF,KAAK,OAAOE;AACZ,KAAK,OAAOD;AACZ,KAAK,OAAOE;AACZ,KAAK,cAAc"}

package/dist/tree/tree.types.d.ts

@@ -1,9 +1,14 @@
 import { PropsOf } from "../utils/types.js";
+import "../utils/index.js";
 import { ThemingProps } from "../theme/types.js";
 import { SystemProps } from "../system/system.js";
+import "../system/index.js";
 import { IconProp } from "../icon/icon.types.js";
+import "../icon/index.js";
 import { LinkProps } from "../link/link.types.js";
+import "../link/index.js";
 import { ListItemProps } from "../list/list.types.js";
+import "../list/index.js";
 import { ReactNode, ReactText } from "react";
 
 //#region src/tree/tree.types.d.ts

package/dist/tree/tree.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tree.types.d.ts","names":[],"sources":["../../src/tree/tree.types.ts"],"sourcesContent":[],"mappings":";;;;;;;;;KASY,SAAA,CAAA,CAAA,CAAY,cACtB;;EADU,YAAS,CAAA,CAAA,CAGF,UAHE;EAAA,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,QAAA,CAAA,GAAA,CAAA,QAAA,CAAA,IAAA,CAAA,EAAA,CAAA,GAAA,CAAA,IAAA,CAAA,CAAA,CAAA;cAAG,CAAA,CAAA,CAKL,QALK;;YAGL,CAAA,CAAA,CAIF,QAJE;;OAIF,CAAA,CAAA,CAEL,OAFK,CAAA,CAAA,EAAA,CAAA,CAAA,CAES,aAFT,CAAA,CAAA,CAAA,CAAA,CAAA,CAE4B,GAAA,CAAI,OAFhC;;aAEL,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAEW,UAFX,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA;;AAEW,IAAA,CAGX,iBAAA,CAAA,CAAA,CAAoB,OAHT,CAAA,CAAA,CAAA,CAAA,CAAA,CAGsB,SAHtB,CAAA,CAAA,CAAA,CAAA,MAAA;AAAU,IAAA,CAKrB,UAAA,CAAA,CAAA,CALqB,MAAA,CAAA,CAAA,CAAA,MAAA;AAGrB,IAAA,CAIA,iBAAA,CAAA,CAAA,CAJiB;EAAA,EAAA,CAAA,CAKvB,UALuB;WAAgB,CAAA,CAAA,OAAA;;AAAN,IAAA,CAS3B,aAAA,CAAA,CAAA,CAAgB,aATW,CAAA,CAAA,CAUrC,YAVqC,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA;EAE3B,YAAA,CAAU,CAAA,CASH,UATG;EAEV,CAAA,CAAA,CAAA,CAAA,QAAA,CAAA,CAAA,GAAA,CAAA,OAAA,CAAA,CAAA;EAKA,eAAA,CAAa,CAAA,CAIH,UAJG;EAAA,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,EAAA,CAAA,CAAA;MAMjB,UANoB;;QAET,CAAA,CAAA,CAAA,OAAA;;SAIX,CAAA,CAAA,CAAA,OAAA;;SAUS,CAAA,CAAA,CAAA,OAAA;;cAEL,CAAA,CAAA,CAJO,QAIP;;YAWI,CAAA,CAAA,CAbC,QAaD;;OAMM,CAAA,CAAA,CAjBV,OAiBc,CAAA,CAAA,EAAA,CAAA,CAAA,CAjBA,aAiBA,CAAA,CAAA,CAAA;UAEH,CAAA,CAAA,CAlBR,SAkBQ;;EACc,WAAA,CAAA,CAAA,CAAA,OAAA;;;;;;;;cATrB;;;;;;QAMN,YAAY,GAAA,CAAI;;qBAEH;yBACI"}
+{"version":3,"file":"tree.types.d.ts","names":[],"sources":["../../src/tree/tree.types.ts"],"sourcesContent":[],"mappings":"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"}

package/dist/tree/treeIcon.d.ts

@@ -1,5 +1,7 @@
 import { IconProps } from "../icon/icon.types.js";
+import "../icon/index.js";
 import { VuiComponent } from "../core/vui.js";
+import "../index.js";
 
 //#region src/tree/treeIcon.d.ts
 /** Displays an icon on the side of the TreeItem. */

package/dist/tree/treeIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"treeIcon.d.ts","names":[],"sources":["../../src/tree/treeIcon.tsx"],"sourcesContent":[],"mappings":";;;;;cAOa,UAAQ,oBAAA"}
+{"version":3,"file":"treeIcon.d.ts","names":[],"sources":["../../src/tree/treeIcon.tsx"],"sourcesContent":[],"mappings":";;;;;;;cAOa,UAAQ,oBAAA"}

package/dist/tree/treeIcon.js

@@ -1,2 +1,27 @@
-import{cs as e}from"../utils/styles.js";import{useStyleConfig as t}from"../core/theme.js";import{vui as n}from"../core/vui.js";import r from"../icon/icon.js";import{useTreeContext as i}from"./context.js";import{jsx as a}from"react/jsx-runtime";const o=n((n,o)=>{let{className:s,...c}=n,l=t(`Tree`,i());return a(r,{className:e(`vui-treeIcon`,s),ref:o,size:`xs`,...l.icon,...c})});o.displayName=`TreeIcon`;var s=o;export{o as TreeIcon,s as default};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+import { cs } from "../utils/styles.js";
+import { useStyleConfig } from "../core/theme.js";
+import { vui } from "../core/vui.js";
+import icon_default from "../icon/icon.js";
+import { useTreeContext } from "./context.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/tree/treeIcon.tsx
+/** Displays an icon on the side of the TreeItem. */
+const TreeIcon = vui((props, ref) => {
+	const { className,...rest } = props;
+	const styles = useStyleConfig("Tree", useTreeContext());
+	return /* @__PURE__ */ jsx(icon_default, {
+		className: cs("vui-treeIcon", className),
+		ref,
+		size: "xs",
+		...styles.icon,
+		...rest
+	});
+});
+TreeIcon.displayName = "TreeIcon";
+var treeIcon_default = TreeIcon;
+
+//#endregion
+export { TreeIcon, treeIcon_default as default };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=treeIcon.js.map

package/dist/tree/treeIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"treeIcon.js","names":["Icon"],"sources":["../../src/tree/treeIcon.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport type { IconProps } from '../icon'\nimport Icon from '../icon'\nimport { cs } from '../utils'\nimport { useTreeContext } from './context'\n\n/** Displays an icon on the side of the TreeItem. */\nexport const TreeIcon = vui<'svg', IconProps>((props, ref) => {\n  const { className, ...rest } = props\n  const styles = useStyleConfig('Tree', useTreeContext())\n\n  return <Icon className={cs('vui-treeIcon', className)} ref={ref} size=\"xs\" {...styles.icon} {...rest} />\n})\n\nTreeIcon.displayName = 'TreeIcon'\n\nexport default TreeIcon\n"],"mappings":"oPAOA,MAAa,EAAW,GAAuB,EAAO,IAAQ,CAC5D,GAAM,CAAE,YAAW,GAAG,GAAS,EACzB,EAAS,EAAe,OAAQ,GAAgB,CAAC,CAEvD,OAAO,EAACA,EAAAA,CAAK,UAAW,EAAG,eAAgB,EAAU,CAAO,MAAK,KAAK,KAAK,GAAI,EAAO,KAAM,GAAI,GAAQ,EACxG,CAEF,EAAS,YAAc,WAEvB,IAAA,EAAe"}
+{"version":3,"file":"treeIcon.js","names":["Icon"],"sources":["../../src/tree/treeIcon.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport type { IconProps } from '../icon'\nimport Icon from '../icon'\nimport { cs } from '../utils'\nimport { useTreeContext } from './context'\n\n/** Displays an icon on the side of the TreeItem. */\nexport const TreeIcon = vui<'svg', IconProps>((props, ref) => {\n  const { className, ...rest } = props\n  const styles = useStyleConfig('Tree', useTreeContext())\n\n  return <Icon className={cs('vui-treeIcon', className)} ref={ref} size=\"xs\" {...styles.icon} {...rest} />\n})\n\nTreeIcon.displayName = 'TreeIcon'\n\nexport default TreeIcon\n"],"mappings":";;;;;;;;;AAOA,MAAa,WAAW,KAAuB,OAAO,QAAQ;CAC5D,MAAM,EAAE,UAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,eAAe,QAAQ,gBAAgB,CAAC;AAEvD,QAAO,oBAACA;EAAK,WAAW,GAAG,gBAAgB,UAAU;EAAO;EAAK,MAAK;EAAK,GAAI,OAAO;EAAM,GAAI;GAAQ;EACxG;AAEF,SAAS,cAAc;AAEvB,uBAAe"}

package/dist/tree/treeItem.d.ts

@@ -1,10 +1,11 @@
 import { SystemProps } from "../system/system.js";
 import { VuiComponent } from "../core/vui.js";
 import { TreeItemProps } from "./tree.types.js";
-import * as styled_components428 from "styled-components";
+import "../index.js";
+import * as styled_components445 from "styled-components";
 
 //#region src/tree/treeItem.d.ts
-declare const TreeItemBase: styled_components428.StyledComponent<"li", styled_components428.DefaultTheme, SystemProps, never>;
+declare const TreeItemBase: styled_components445.StyledComponent<"li", styled_components445.DefaultTheme, SystemProps, never>;
 /**
  * Displays a tree item with text and optional icons. Can be shown as selected.
  */

package/dist/tree/treeItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"treeItem.d.ts","names":[],"sources":["../../src/tree/treeItem.tsx"],"sourcesContent":[],"mappings":";;;;;;cAWa,cAAY,oBAAA,CAAA,sBAKxB,oBAAA,CALwB,YAAA,CAAA,CAAA,WAAA,CAAA;;;;cAUZ,UAAQ,mBAAA"}
+{"version":3,"file":"treeItem.d.ts","names":[],"sources":["../../src/tree/treeItem.tsx"],"sourcesContent":[],"mappings":";;;;;;;cAWa,cAAY,oBAAA,CAAA,sBAKxB,oBAAA,CALwB,YAAA,CAAA,CAAA,WAAA,CAAA;;;;cAUZ,UAAQ,mBAAA"}

package/dist/tree/treeItem.js

@@ -1,7 +1,131 @@
-import{isArray as e,isReactText as t}from"../utils/assertion.js";import{filterUndefined as n}from"../utils/object.js";import{cs as r,vuiColorToRGBA as i}from"../utils/styles.js";import{useStyleConfig as a}from"../core/theme.js";import{styled as o}from"../core/styled.js";import{vui as s}from"../core/vui.js";import{Box as c}from"../box/box.js";import{List as l}from"../list/list.js";import{useTreeContext as u}from"./context.js";import d from"./treeIcon.js";import f from"./treeText.js";import{useEffect as p,useState as m}from"react";import{Fragment as h,jsx as g,jsxs as _}from"react/jsx-runtime";const v=o.liBox`
+import { isArray, isReactText } from "../utils/assertion.js";
+import { filterUndefined } from "../utils/object.js";
+import { cs, vuiColorToRGBA } from "../utils/styles.js";
+import { useStyleConfig } from "../core/theme.js";
+import { styled } from "../core/styled.js";
+import { vui } from "../core/vui.js";
+import { Box } from "../box/box.js";
+import { List } from "../list/list.js";
+import { useTreeContext } from "./context.js";
+import treeIcon_default from "./treeIcon.js";
+import treeText_default from "./treeText.js";
+import { useEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/tree/treeItem.tsx
+const TreeItemBase = styled.liBox`
   display: flex;
   flex-direction: column;
   transition-duration: fast;
   width: 100%;
-`,y=s((o,s)=>{let{activeItemId:b,activeItemIndex:x,children:S,center:ee,centerH:te,centerV:ne=!0,className:C,iconCollapse:w=`falMinus`,isCollapsed:T,disabled:E,iconExpand:D=`falPlus`,id:O,items:k,isActive:A,isFirstLevel:j,isTruncated:M,key:re,onClickTreeItem:N,onToggle:P,propagatedPL:F,plUnit:I=26,text:L,...R}={...u(),...o},z=a(`Tree`,u()),{activeBg:ie,bg:B,color:V,h:H,hoverBg:ae,hoverColor:oe,p:se,px:ce,py:le,selectedBg:ue,...U}=z.item,[W,G]=m(!1),K=F||0,q=K+(I||0);p(()=>{G(!!T)},[T]);let J=e=>{E||(P?.({id:O,collapsed:!W}),G(!W));let t=e.target?.closest(`.vui-tree`)?.getElementsByClassName(`vui-treeItem-active`)[0];t&&(t.style.backgroundColor=`transparent`),N?.(O),e.stopPropagation()},Y=(e,t)=>{let n=e.target,r;r=n.classList.contains(`vui-treeItem-permanent`)?n:n.closest(`.vui-treeItem`)?.getElementsByClassName(`vui-treeItem-permanent`)[0];let a=!!r?.classList.contains(`vui-treeItem-active`);r?.classList.contains(`vui-treeItem-permanent`)?r?.classList.contains(`vui-treeItem-firstLevel`)?(t===`over`&&(r.style.backgroundColor=i(z?.firstLevelItem?.hoverBg||`transparent`)),t===`out`&&(r.style.backgroundColor=i(a?z?.firstLevelItem?.activeBg||`transparent`:z?.firstLevelItem?.bg||`transparent`))):(t===`over`&&(r.style.backgroundColor=i(z?.item?.hoverBg||`transparent`)),t===`out`&&(r.style.backgroundColor=i(a?z?.item?.activeBg||`transparent`:z?.item?.bg||`transparent`))):e.preventDefault(),e.stopPropagation()},X=e(S)&&S.length>0||e(k)&&k.length>0,Z=!x&&A||x===O,Q=k&&k?.length>0?0:1.5;X||(Q+=3.8);let $=n({"aria-expanded":X?!W:void 0,role:`treeitem`});return g(v,{className:r(`vui-treeItem`,j?`vui-treeItem-firstLevel`:``,C),color:j?z?.firstLevelItem?.color:V,h:W?H:X?`auto`:H,id:O.toString(),m:0,onClick:E?void 0:e=>J(e),onMouseOut:E?void 0:e=>Y(e,`out`),onMouseOver:E?void 0:e=>Y(e,`over`),p:0,propagatedPL:F,ref:s,w:1,...U,bg:j?Z?z?.firstLevelItem?.activeBg:z?.firstLevelItem?.bg:Z?z?.item?.activeBg:B,hoverBg:void 0,...$,...R,children:_(h,{children:[_(c,{centerV:!0,className:r(`vui-treeItem-permanent`,Z?`vui-treeItem-active`:``,j?`vui-treeItem-firstLevel`:``),fontWeight:Z?`600`:`500`,pl:`${K}px`,children:[k&&k?.length>0&&g(h,{children:W?g(d,{mx:1.5,name:D}):g(d,{mx:1.5,name:w})}),t(L)?g(f,{ml:Q,isTruncated:M,text:L}):L]}),X&&!W&&g(l,{role:`tree`,w:1,children:S??(e(k)?k.map(({key:e,propagatedPL:t,...n},r)=>g(y,{activeItemIndex:x,iconCollapse:w,iconExpand:D,onClickTreeItem:N,propagatedPL:q,...n},e??r)):k)})]})})});y.displayName=`TreeItem`;var b=y;export{y as TreeItem,v as TreeItemBase,b as default};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+`;
+/**
+* Displays a tree item with text and optional icons. Can be shown as selected.
+*/
+const TreeItem = vui((props, ref) => {
+	const { activeItemId, activeItemIndex, children, center, centerH, centerV = true, className, iconCollapse = "falMinus", isCollapsed, disabled, iconExpand = "falPlus", id, items, isActive, isFirstLevel, isTruncated, key, onClickTreeItem, onToggle, propagatedPL, plUnit = 26, text,...rest } = {
+		...useTreeContext(),
+		...props
+	};
+	const styles = useStyleConfig("Tree", useTreeContext());
+	const { activeBg, bg, color, h, hoverBg, hoverColor, p, px, py, selectedBg,...itemStyles } = styles.item;
+	const [collapsedInternal, setIsCollapsedInternal] = useState(false);
+	const innerBoxPl = propagatedPL || 0;
+	const innerListPl = innerBoxPl + (plUnit || 0);
+	useEffect(() => {
+		setIsCollapsedInternal(!!isCollapsed);
+	}, [isCollapsed]);
+	const toggle = (e) => {
+		if (!disabled) {
+			onToggle?.({
+				id,
+				collapsed: !collapsedInternal
+			});
+			setIsCollapsedInternal(!collapsedInternal);
+		}
+		const active = e.target?.closest(".vui-tree")?.getElementsByClassName("vui-treeItem-active")[0];
+		active && (active.style.backgroundColor = "transparent");
+		onClickTreeItem?.(id);
+		e.stopPropagation();
+	};
+	const hoverTreeItem = (e, type) => {
+		const target = e.target;
+		let parentDiv = void 0;
+		if (target.classList.contains("vui-treeItem-permanent")) parentDiv = target;
+		else parentDiv = target.closest(".vui-treeItem")?.getElementsByClassName("vui-treeItem-permanent")[0];
+		const isDivActive = parentDiv?.classList.contains("vui-treeItem-active") ? true : false;
+		if (parentDiv?.classList.contains("vui-treeItem-permanent")) if (parentDiv?.classList.contains("vui-treeItem-firstLevel")) {
+			if (type === "over") parentDiv.style.backgroundColor = vuiColorToRGBA(styles?.firstLevelItem?.hoverBg || "transparent");
+			if (type === "out") parentDiv.style.backgroundColor = isDivActive ? vuiColorToRGBA(styles?.firstLevelItem?.activeBg || "transparent") : vuiColorToRGBA(styles?.firstLevelItem?.bg || "transparent");
+		} else {
+			if (type === "over") parentDiv.style.backgroundColor = vuiColorToRGBA(styles?.item?.hoverBg || "transparent");
+			if (type === "out") parentDiv.style.backgroundColor = isDivActive ? vuiColorToRGBA(styles?.item?.activeBg || "transparent") : vuiColorToRGBA(styles?.item?.bg || "transparent");
+		}
+		else e.preventDefault();
+		e.stopPropagation();
+	};
+	const isCollapsable = isArray(children) && children.length > 0 || isArray(items) && items.length > 0;
+	const isActiveInternal = !activeItemIndex && isActive || activeItemIndex === id;
+	let textMl = items && items?.length > 0 ? 0 : 1.5;
+	if (!isCollapsable) textMl += 3.8;
+	const aliasedProps = filterUndefined({
+		"aria-expanded": isCollapsable ? !collapsedInternal : void 0,
+		role: "treeitem"
+	});
+	return /* @__PURE__ */ jsx(TreeItemBase, {
+		className: cs("vui-treeItem", isFirstLevel ? "vui-treeItem-firstLevel" : "", className),
+		color: isFirstLevel ? styles?.firstLevelItem?.color : color,
+		h: collapsedInternal ? h : isCollapsable ? "auto" : h,
+		id: id.toString(),
+		m: 0,
+		onClick: !disabled ? (e) => toggle(e) : void 0,
+		onMouseOut: !disabled ? (e) => hoverTreeItem(e, "out") : void 0,
+		onMouseOver: !disabled ? (e) => hoverTreeItem(e, "over") : void 0,
+		p: 0,
+		propagatedPL,
+		ref,
+		w: 1,
+		...itemStyles,
+		bg: isFirstLevel ? isActiveInternal ? styles?.firstLevelItem?.activeBg : styles?.firstLevelItem?.bg : isActiveInternal ? styles?.item?.activeBg : bg,
+		hoverBg: void 0,
+		...aliasedProps,
+		...rest,
+		children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Box, {
+			centerV: true,
+			className: cs("vui-treeItem-permanent", isActiveInternal ? "vui-treeItem-active" : "", isFirstLevel ? "vui-treeItem-firstLevel" : ""),
+			fontWeight: isActiveInternal ? "600" : "500",
+			pl: `${innerBoxPl}px`,
+			children: [items && items?.length > 0 && /* @__PURE__ */ jsx(Fragment$1, { children: collapsedInternal ? /* @__PURE__ */ jsx(treeIcon_default, {
+				mx: 1.5,
+				name: iconExpand
+			}) : /* @__PURE__ */ jsx(treeIcon_default, {
+				mx: 1.5,
+				name: iconCollapse
+			}) }), isReactText(text) ? /* @__PURE__ */ jsx(treeText_default, {
+				ml: textMl,
+				isTruncated,
+				text
+			}) : text]
+		}), isCollapsable && !collapsedInternal && /* @__PURE__ */ jsx(List, {
+			role: "tree",
+			w: 1,
+			children: children ?? (isArray(items) ? items.map(({ key: key$1, propagatedPL: propagatedPL$1,...props$1 }, index) => {
+				return /* @__PURE__ */ jsx(TreeItem, {
+					activeItemIndex,
+					iconCollapse,
+					iconExpand,
+					onClickTreeItem,
+					propagatedPL: innerListPl,
+					...props$1
+				}, key$1 ?? index);
+			}) : items)
+		})] })
+	});
+});
+TreeItem.displayName = "TreeItem";
+var treeItem_default = TreeItem;
+
+//#endregion
+export { TreeItem, TreeItemBase, treeItem_default as default };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=treeItem.js.map

package/dist/tree/treeItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"treeItem.js","names":["parentDiv: HTMLDivElement | undefined","TreeIcon","TreeText","props","key"],"sources":["../../src/tree/treeItem.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport { Box } from '../box'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { List } from '../list'\nimport { cs, filterUndefined, isArray, isReactText, vuiColorToRGBA } from '../utils'\nimport { useTreeContext } from './context'\nimport type { TreeItemProps } from './tree.types'\nimport TreeIcon from './treeIcon'\nimport TreeText from './treeText'\n\nexport const TreeItemBase = styled.liBox`\n  display: flex;\n  flex-direction: column;\n  transition-duration: fast;\n  width: 100%;\n`\n\n/**\n * Displays a tree item with text and optional icons. Can be shown as selected.\n */\nexport const TreeItem = vui<'li', TreeItemProps>((props, ref) => {\n  const mergedProps = { ...useTreeContext(), ...props }\n\n  const {\n    activeItemId,\n    activeItemIndex,\n    children,\n    center,\n    centerH,\n    centerV = true,\n    className,\n    iconCollapse = 'falMinus',\n    isCollapsed,\n    disabled,\n    iconExpand = 'falPlus',\n    id,\n    items,\n    isActive,\n    isFirstLevel,\n    isTruncated,\n    key,\n    onClickTreeItem,\n    onToggle,\n    propagatedPL,\n    plUnit = 26,\n    text,\n    ...rest\n  } = mergedProps\n  const styles = useStyleConfig('Tree', useTreeContext())\n  const { activeBg, bg, color, h, hoverBg, hoverColor, p, px, py, selectedBg, ...itemStyles } = styles.item\n\n  const [collapsedInternal, setIsCollapsedInternal] = useState<boolean>(false)\n\n  const innerBoxPl = propagatedPL || 0\n  const innerListPl = innerBoxPl + (plUnit || 0)\n\n  useEffect(() => {\n    setIsCollapsedInternal(!!isCollapsed)\n  }, [isCollapsed])\n\n  const toggle = (e: Event) => {\n    if (!disabled) {\n      onToggle?.({ id, collapsed: !collapsedInternal })\n      setIsCollapsedInternal(!collapsedInternal)\n    }\n\n    const target = e.target as HTMLDivElement\n    const active = target?.closest('.vui-tree')?.getElementsByClassName('vui-treeItem-active')[0] as HTMLDivElement\n\n    active ? (active.style.backgroundColor = 'transparent') : null\n\n    onClickTreeItem?.(id)\n\n    // Avoids triggering parent's onClick\n    e.stopPropagation()\n  }\n\n  const hoverTreeItem = (e: Event, type: string) => {\n    const target = e.target as HTMLDivElement\n\n    let parentDiv: HTMLDivElement | undefined = undefined\n\n    if (target.classList.contains('vui-treeItem-permanent')) {\n      parentDiv = target\n    } else {\n      const parentLi = target.closest('.vui-treeItem')\n      parentDiv = parentLi?.getElementsByClassName('vui-treeItem-permanent')[0] as HTMLDivElement\n    }\n\n    const isDivActive = parentDiv?.classList.contains('vui-treeItem-active') ? true : false\n\n    // translate the list-item style over to the div\n    if (parentDiv?.classList.contains('vui-treeItem-permanent')) {\n      // is it a fist level item?\n      if (parentDiv?.classList.contains('vui-treeItem-firstLevel')) {\n        if (type === 'over') {\n          parentDiv.style.backgroundColor = vuiColorToRGBA(styles?.firstLevelItem?.hoverBg || 'transparent')\n        }\n\n        if (type === 'out') {\n          parentDiv.style.backgroundColor = isDivActive\n            ? vuiColorToRGBA(styles?.firstLevelItem?.activeBg || 'transparent')\n            : vuiColorToRGBA(styles?.firstLevelItem?.bg || 'transparent')\n        }\n      } else {\n        // it is NOT first level\n        if (type === 'over') {\n          parentDiv.style.backgroundColor = vuiColorToRGBA(styles?.item?.hoverBg || 'transparent')\n        }\n        if (type === 'out') {\n          parentDiv.style.backgroundColor = isDivActive\n            ? vuiColorToRGBA(styles?.item?.activeBg || 'transparent')\n            : vuiColorToRGBA(styles?.item?.bg || 'transparent')\n        }\n      }\n    } else {\n      e.preventDefault()\n    }\n\n    e.stopPropagation()\n  }\n\n  const isCollapsable = (isArray(children) && children.length > 0) || (isArray(items) && items.length > 0)\n  const isActiveInternal = (!activeItemIndex && isActive) || activeItemIndex === id\n\n  let textMl = items && items?.length > 0 ? 0 : 1.5\n  if (!isCollapsable) {\n    textMl += 3.8\n  }\n\n  const aliasedProps = filterUndefined({\n    'aria-expanded': isCollapsable ? !collapsedInternal : undefined,\n    role: 'treeitem',\n  })\n\n  // hoverBg cannot be styled directly from theme, it has to be JS manipulated because of event propagation\n  return (\n    <TreeItemBase\n      className={cs('vui-treeItem', isFirstLevel ? 'vui-treeItem-firstLevel' : '', className)}\n      color={isFirstLevel ? styles?.firstLevelItem?.color : color}\n      h={collapsedInternal ? h : isCollapsable ? 'auto' : h}\n      id={id.toString()}\n      m={0}\n      onClick={!disabled ? (e: Event) => toggle(e) : undefined}\n      onMouseOut={!disabled ? (e: Event) => hoverTreeItem(e, 'out') : undefined}\n      onMouseOver={!disabled ? (e: Event) => hoverTreeItem(e, 'over') : undefined}\n      p={0}\n      propagatedPL={propagatedPL}\n      ref={ref}\n      w={1}\n      {...itemStyles}\n      bg={\n        isFirstLevel\n          ? isActiveInternal\n            ? styles?.firstLevelItem?.activeBg\n            : styles?.firstLevelItem?.bg\n          : isActiveInternal\n            ? styles?.item?.activeBg\n            : bg\n      }\n      hoverBg={undefined}\n      {...aliasedProps}\n      {...rest}\n    >\n      <>\n        <Box\n          centerV\n          className={cs(\n            'vui-treeItem-permanent',\n            isActiveInternal ? 'vui-treeItem-active' : '',\n            isFirstLevel ? 'vui-treeItem-firstLevel' : '',\n          )}\n          fontWeight={isActiveInternal ? '600' : '500'}\n          pl={`${innerBoxPl}px`}\n        >\n          {items && items?.length > 0 && (\n            <>\n              {collapsedInternal ? <TreeIcon mx={1.5} name={iconExpand} /> : <TreeIcon mx={1.5} name={iconCollapse} />}\n            </>\n          )}\n          {isReactText(text) ? <TreeText ml={textMl} {...{ isTruncated, text }} /> : text}\n        </Box>\n\n        {isCollapsable && !collapsedInternal && (\n          <List role=\"tree\" w={1}>\n            {children ??\n              (isArray<TreeItemProps>(items)\n                ? items.map(({ key, propagatedPL, ...props }, index) => {\n                    return (\n                      <TreeItem\n                        activeItemIndex={activeItemIndex}\n                        iconCollapse={iconCollapse}\n                        iconExpand={iconExpand}\n                        key={key ?? index}\n                        onClickTreeItem={onClickTreeItem}\n                        propagatedPL={innerListPl}\n                        {...props}\n                      />\n                    )\n                  })\n                : items)}\n          </List>\n        )}\n      </>\n    </TreeItemBase>\n  )\n})\n\nTreeItem.displayName = 'TreeItem'\n\nexport default TreeItem\n"],"mappings":"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"}
+{"version":3,"file":"treeItem.js","names":["parentDiv: HTMLDivElement | undefined","TreeIcon","TreeText","props","key"],"sources":["../../src/tree/treeItem.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport { Box } from '../box'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { List } from '../list'\nimport { cs, filterUndefined, isArray, isReactText, vuiColorToRGBA } from '../utils'\nimport { useTreeContext } from './context'\nimport type { TreeItemProps } from './tree.types'\nimport TreeIcon from './treeIcon'\nimport TreeText from './treeText'\n\nexport const TreeItemBase = styled.liBox`\n  display: flex;\n  flex-direction: column;\n  transition-duration: fast;\n  width: 100%;\n`\n\n/**\n * Displays a tree item with text and optional icons. Can be shown as selected.\n */\nexport const TreeItem = vui<'li', TreeItemProps>((props, ref) => {\n  const mergedProps = { ...useTreeContext(), ...props }\n\n  const {\n    activeItemId,\n    activeItemIndex,\n    children,\n    center,\n    centerH,\n    centerV = true,\n    className,\n    iconCollapse = 'falMinus',\n    isCollapsed,\n    disabled,\n    iconExpand = 'falPlus',\n    id,\n    items,\n    isActive,\n    isFirstLevel,\n    isTruncated,\n    key,\n    onClickTreeItem,\n    onToggle,\n    propagatedPL,\n    plUnit = 26,\n    text,\n    ...rest\n  } = mergedProps\n  const styles = useStyleConfig('Tree', useTreeContext())\n  const { activeBg, bg, color, h, hoverBg, hoverColor, p, px, py, selectedBg, ...itemStyles } = styles.item\n\n  const [collapsedInternal, setIsCollapsedInternal] = useState<boolean>(false)\n\n  const innerBoxPl = propagatedPL || 0\n  const innerListPl = innerBoxPl + (plUnit || 0)\n\n  useEffect(() => {\n    setIsCollapsedInternal(!!isCollapsed)\n  }, [isCollapsed])\n\n  const toggle = (e: Event) => {\n    if (!disabled) {\n      onToggle?.({ id, collapsed: !collapsedInternal })\n      setIsCollapsedInternal(!collapsedInternal)\n    }\n\n    const target = e.target as HTMLDivElement\n    const active = target?.closest('.vui-tree')?.getElementsByClassName('vui-treeItem-active')[0] as HTMLDivElement\n\n    active ? (active.style.backgroundColor = 'transparent') : null\n\n    onClickTreeItem?.(id)\n\n    // Avoids triggering parent's onClick\n    e.stopPropagation()\n  }\n\n  const hoverTreeItem = (e: Event, type: string) => {\n    const target = e.target as HTMLDivElement\n\n    let parentDiv: HTMLDivElement | undefined = undefined\n\n    if (target.classList.contains('vui-treeItem-permanent')) {\n      parentDiv = target\n    } else {\n      const parentLi = target.closest('.vui-treeItem')\n      parentDiv = parentLi?.getElementsByClassName('vui-treeItem-permanent')[0] as HTMLDivElement\n    }\n\n    const isDivActive = parentDiv?.classList.contains('vui-treeItem-active') ? true : false\n\n    // translate the list-item style over to the div\n    if (parentDiv?.classList.contains('vui-treeItem-permanent')) {\n      // is it a fist level item?\n      if (parentDiv?.classList.contains('vui-treeItem-firstLevel')) {\n        if (type === 'over') {\n          parentDiv.style.backgroundColor = vuiColorToRGBA(styles?.firstLevelItem?.hoverBg || 'transparent')\n        }\n\n        if (type === 'out') {\n          parentDiv.style.backgroundColor = isDivActive\n            ? vuiColorToRGBA(styles?.firstLevelItem?.activeBg || 'transparent')\n            : vuiColorToRGBA(styles?.firstLevelItem?.bg || 'transparent')\n        }\n      } else {\n        // it is NOT first level\n        if (type === 'over') {\n          parentDiv.style.backgroundColor = vuiColorToRGBA(styles?.item?.hoverBg || 'transparent')\n        }\n        if (type === 'out') {\n          parentDiv.style.backgroundColor = isDivActive\n            ? vuiColorToRGBA(styles?.item?.activeBg || 'transparent')\n            : vuiColorToRGBA(styles?.item?.bg || 'transparent')\n        }\n      }\n    } else {\n      e.preventDefault()\n    }\n\n    e.stopPropagation()\n  }\n\n  const isCollapsable = (isArray(children) && children.length > 0) || (isArray(items) && items.length > 0)\n  const isActiveInternal = (!activeItemIndex && isActive) || activeItemIndex === id\n\n  let textMl = items && items?.length > 0 ? 0 : 1.5\n  if (!isCollapsable) {\n    textMl += 3.8\n  }\n\n  const aliasedProps = filterUndefined({\n    'aria-expanded': isCollapsable ? !collapsedInternal : undefined,\n    role: 'treeitem',\n  })\n\n  // hoverBg cannot be styled directly from theme, it has to be JS manipulated because of event propagation\n  return (\n    <TreeItemBase\n      className={cs('vui-treeItem', isFirstLevel ? 'vui-treeItem-firstLevel' : '', className)}\n      color={isFirstLevel ? styles?.firstLevelItem?.color : color}\n      h={collapsedInternal ? h : isCollapsable ? 'auto' : h}\n      id={id.toString()}\n      m={0}\n      onClick={!disabled ? (e: Event) => toggle(e) : undefined}\n      onMouseOut={!disabled ? (e: Event) => hoverTreeItem(e, 'out') : undefined}\n      onMouseOver={!disabled ? (e: Event) => hoverTreeItem(e, 'over') : undefined}\n      p={0}\n      propagatedPL={propagatedPL}\n      ref={ref}\n      w={1}\n      {...itemStyles}\n      bg={\n        isFirstLevel\n          ? isActiveInternal\n            ? styles?.firstLevelItem?.activeBg\n            : styles?.firstLevelItem?.bg\n          : isActiveInternal\n            ? styles?.item?.activeBg\n            : bg\n      }\n      hoverBg={undefined}\n      {...aliasedProps}\n      {...rest}\n    >\n      <>\n        <Box\n          centerV\n          className={cs(\n            'vui-treeItem-permanent',\n            isActiveInternal ? 'vui-treeItem-active' : '',\n            isFirstLevel ? 'vui-treeItem-firstLevel' : '',\n          )}\n          fontWeight={isActiveInternal ? '600' : '500'}\n          pl={`${innerBoxPl}px`}\n        >\n          {items && items?.length > 0 && (\n            <>\n              {collapsedInternal ? <TreeIcon mx={1.5} name={iconExpand} /> : <TreeIcon mx={1.5} name={iconCollapse} />}\n            </>\n          )}\n          {isReactText(text) ? <TreeText ml={textMl} {...{ isTruncated, text }} /> : text}\n        </Box>\n\n        {isCollapsable && !collapsedInternal && (\n          <List role=\"tree\" w={1}>\n            {children ??\n              (isArray<TreeItemProps>(items)\n                ? items.map(({ key, propagatedPL, ...props }, index) => {\n                    return (\n                      <TreeItem\n                        activeItemIndex={activeItemIndex}\n                        iconCollapse={iconCollapse}\n                        iconExpand={iconExpand}\n                        key={key ?? index}\n                        onClickTreeItem={onClickTreeItem}\n                        propagatedPL={innerListPl}\n                        {...props}\n                      />\n                    )\n                  })\n                : items)}\n          </List>\n        )}\n      </>\n    </TreeItemBase>\n  )\n})\n\nTreeItem.displayName = 'TreeItem'\n\nexport default TreeItem\n"],"mappings":"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"}

package/dist/tree/treeText.d.ts

@@ -1,5 +1,7 @@
 import { TProps } from "../t/t.types.js";
+import "../t/index.js";
 import { VuiComponent } from "../core/vui.js";
+import "../index.js";
 
 //#region src/tree/treeText.d.ts
 /** Displays text within the TreeItem. */

package/dist/tree/treeText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"treeText.d.ts","names":[],"sources":["../../src/tree/treeText.tsx"],"sourcesContent":[],"mappings":";;;;;cAOa,UAAQ,qBAAA"}
+{"version":3,"file":"treeText.d.ts","names":[],"sources":["../../src/tree/treeText.tsx"],"sourcesContent":[],"mappings":";;;;;;;cAOa,UAAQ,qBAAA"}

package/dist/tree/treeText.js

@@ -1,2 +1,29 @@
-import{cs as e,ellipsisOverflow as t}from"../utils/styles.js";import{useStyleConfig as n}from"../core/theme.js";import{vui as r}from"../core/vui.js";import i from"../t/t.js";import{useTreeContext as a}from"./context.js";import{jsx as o}from"react/jsx-runtime";const s=r((r,s)=>{let{className:c,...l}=r,u=n(`Tree`,a());return o(i,{className:e(`vui-treeText`,c),fontSize:`inherit`,py:u.item.py,ref:s,...t,...u.text,...l})});s.displayName=`TreeText`;var c=s;export{s as TreeText,c as default};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+import { cs, ellipsisOverflow } from "../utils/styles.js";
+import { useStyleConfig } from "../core/theme.js";
+import { vui } from "../core/vui.js";
+import t_default from "../t/t.js";
+import { useTreeContext } from "./context.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/tree/treeText.tsx
+/** Displays text within the TreeItem. */
+const TreeText = vui((props, ref) => {
+	const { className,...rest } = props;
+	const styles = useStyleConfig("Tree", useTreeContext());
+	return /* @__PURE__ */ jsx(t_default, {
+		className: cs("vui-treeText", className),
+		fontSize: "inherit",
+		py: styles.item.py,
+		ref,
+		...ellipsisOverflow,
+		...styles.text,
+		...rest
+	});
+});
+TreeText.displayName = "TreeText";
+var treeText_default = TreeText;
+
+//#endregion
+export { TreeText, treeText_default as default };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=treeText.js.map