@veracity/vui 3.0.0-beta.8 → 3.0.0

package/dist/list/list.js

@@ -1,2 +1,88 @@
-import{isArray as e,isReactText as t}from"../utils/assertion.js";import{filterUndefined as n}from"../utils/object.js";import{cs as r}from"../utils/styles.js";import{useStyleConfig as i}from"../core/theme.js";import{styled as a}from"../core/styled.js";import{vui as o}from"../core/vui.js";import{ListProvider as s}from"./context.js";import c from"./listDivider.js";import l from"./listHeading.js";import u from"./listIcon.js";import d from"./listText.js";import f from"./listItem.js";import{useEffect as p,useMemo as m,useRef as h,useState as g}from"react";import{jsx as _,jsxs as v}from"react/jsx-runtime";const y=[`Enter`,` `],b=[`ArrowDown`,`Tab`],x=[`ArrowUp`],S=a.ulBox``,C=o((a,o)=>{let{children:c,className:u,heading:d,isInteractive:C,items:w,size:T,variant:E,...D}=a,O=i(`List`,a),k=m(()=>n({isInteractive:C,size:T,variant:E}),[C,T,E]),A=h(null),[j,M]=g(-1),N=e=>{[...x,...b,...y].includes(e.key)&&(e.preventDefault(),M(t=>{let n=t;if(A.current){let t=Array.from(A.current.childNodes).filter(e=>e.tabIndex===0);b.includes(e.key)&&n<t.length-1&&n++,x.includes(e.key)&&(n=n>0?n-1:0),t.forEach((t,r)=>{r===n&&(y.includes(e.key)?t?.click():t?.focus())})}return n}))};return p(()=>{if(A.current&&C)return A.current.addEventListener(`keydown`,N),()=>{A.current?.removeEventListener(`keydown`,N)}},[A.current,C]),_(s,{value:k,children:v(S,{className:r(`vui-list`,u),ref:o||A,...O.container,...D,children:[t(d)?_(l,{text:d}):d,c??(e(w)?w.map(({key:e,...t},n)=>_(f,{...t},e??n)):w)]})})});C.Divider=c,C.Heading=l,C.Icon=u,C.Item=f,C.Text=d,C.displayName=`List`;var w=C;export{C as List,S as ListBase,w as default};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+import { isArray, isReactText } from "../utils/assertion.js";
+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 { ListProvider } from "./context.js";
+import listDivider_default from "./listDivider.js";
+import listHeading_default from "./listHeading.js";
+import listIcon_default from "./listIcon.js";
+import listText_default from "./listText.js";
+import listItem_default from "./listItem.js";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/list/list.tsx
+const clickKeys = ["Enter", " "];
+const nextKeys = ["ArrowDown", "Tab"];
+const prevKeys = ["ArrowUp"];
+const ListBase = styled.ulBox``;
+/** Displays a list of list link items and optional heading. Exposes some props to the children via context. */
+const List = vui((props, ref) => {
+	const { children, className, heading, isInteractive, items, size, variant,...rest } = props;
+	const styles = useStyleConfig("List", props);
+	const context = useMemo(() => filterUndefined({
+		isInteractive,
+		size,
+		variant
+	}), [
+		isInteractive,
+		size,
+		variant
+	]);
+	const listRef = useRef(null);
+	const [_, setActive] = useState(-1);
+	const onKeydown = (event) => {
+		if ([
+			...prevKeys,
+			...nextKeys,
+			...clickKeys
+		].includes(event.key)) {
+			event.preventDefault();
+			setActive((a) => {
+				let active = a;
+				if (listRef.current) {
+					const tabIndexedChildren = Array.from(listRef.current.childNodes).filter((child) => child.tabIndex === 0);
+					if (nextKeys.includes(event.key) && active < tabIndexedChildren.length - 1) active++;
+					if (prevKeys.includes(event.key)) active = active > 0 ? active - 1 : 0;
+					tabIndexedChildren.forEach((node, index) => {
+						if (index === active) if (clickKeys.includes(event.key)) node?.click();
+						else node?.focus();
+					});
+				}
+				return active;
+			});
+		}
+	};
+	useEffect(() => {
+		if (listRef.current && isInteractive) {
+			listRef.current.addEventListener("keydown", onKeydown);
+			return () => {
+				listRef.current?.removeEventListener("keydown", onKeydown);
+			};
+		}
+	}, [listRef.current, isInteractive]);
+	return /* @__PURE__ */ jsx(ListProvider, {
+		value: context,
+		children: /* @__PURE__ */ jsxs(ListBase, {
+			className: cs("vui-list", className),
+			ref: ref || listRef,
+			...styles.container,
+			...rest,
+			children: [isReactText(heading) ? /* @__PURE__ */ jsx(listHeading_default, { text: heading }) : heading, children ?? (isArray(items) ? items.map(({ key,...props$1 }, index) => /* @__PURE__ */ jsx(listItem_default, { ...props$1 }, key ?? index)) : items)]
+		})
+	});
+});
+List.Divider = listDivider_default;
+List.Heading = listHeading_default;
+List.Icon = listIcon_default;
+List.Item = listItem_default;
+List.Text = listText_default;
+List.displayName = "List";
+var list_default = List;
+
+//#endregion
+export { List, ListBase, list_default as default };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=list.js.map

package/dist/list/list.js.map

@@ -1 +1 @@
-{"version":3,"file":"list.js","names":["ListHeading","props","ListItem","ListDivider","ListIcon","ListText"],"sources":["../../src/list/list.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react'\n\nimport type { VuiComponent } from '../core'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { cs, filterUndefined, isArray, isReactText } from '../utils'\nimport { ListProvider } from './context'\nimport type { ListItemProps, ListProps } from './list.types'\nimport ListDivider from './listDivider'\nimport ListHeading from './listHeading'\nimport ListIcon from './listIcon'\nimport ListItem from './listItem'\nimport ListText from './listText'\n\nconst clickKeys = ['Enter', ' ']\nconst nextKeys = ['ArrowDown', 'Tab']\nconst prevKeys = ['ArrowUp']\n\nexport const ListBase = styled.ulBox``\n\n/** Displays a list of list link items and optional heading. Exposes some props to the children via context. */\nexport const List = vui<'ul', ListProps>((props, ref) => {\n  const { children, className, heading, isInteractive, items, size, variant, ...rest } = props\n  const styles = useStyleConfig('List', props)\n\n  const context = useMemo(() => filterUndefined({ isInteractive, size, variant }), [isInteractive, size, variant])\n\n  const listRef = useRef<HTMLUListElement>(null)\n\n  const [_, setActive] = useState(-1)\n\n  const onKeydown = (event: KeyboardEvent) => {\n    if ([...prevKeys, ...nextKeys, ...clickKeys].includes(event.key)) {\n      event.preventDefault()\n      setActive((a: number) => {\n        let active = a\n        if (listRef.current) {\n          const allChildren = Array.from(listRef.current.childNodes)\n          const tabIndexedChildren = allChildren.filter(child => (child as HTMLElement).tabIndex === 0)\n\n          if (nextKeys.includes(event.key) && active < tabIndexedChildren.length - 1) active++\n          if (prevKeys.includes(event.key)) active = active > 0 ? active - 1 : 0\n\n          tabIndexedChildren.forEach((node, index) => {\n            if (index === active) {\n              if (clickKeys.includes(event.key)) (node as HTMLElement)?.click()\n              else (node as HTMLElement)?.focus()\n            }\n          })\n        }\n        return active\n      })\n    }\n  }\n\n  useEffect(() => {\n    if (listRef.current && isInteractive) {\n      listRef.current.addEventListener('keydown', onKeydown)\n      return () => {\n        listRef.current?.removeEventListener('keydown', onKeydown)\n      }\n    }\n  }, [listRef.current, isInteractive])\n\n  return (\n    <ListProvider value={context}>\n      <ListBase className={cs('vui-list', className)} ref={ref || listRef} {...styles.container} {...rest}>\n        {isReactText(heading) ? <ListHeading text={heading} /> : heading}\n        {children ??\n          (isArray<ListItemProps>(items)\n            ? items.map(({ key, ...props }, index) => <ListItem key={key ?? index} {...props} />)\n            : items)}\n      </ListBase>\n    </ListProvider>\n  )\n}) as VuiComponent<'ul', ListProps> & {\n  Divider: typeof ListDivider\n  Heading: typeof ListHeading\n  Icon: typeof ListIcon\n  Item: typeof ListItem\n  Text: typeof ListText\n}\n\nList.Divider = ListDivider\nList.Heading = ListHeading\nList.Icon = ListIcon\nList.Item = ListItem\nList.Text = ListText\nList.displayName = 'List'\nexport default List\n"],"mappings":"8lBAaA,MAAM,EAAY,CAAC,QAAS,IAAI,CAC1B,EAAW,CAAC,YAAa,MAAM,CAC/B,EAAW,CAAC,UAAU,CAEf,EAAW,EAAO,KAAK,GAGvB,EAAO,GAAsB,EAAO,IAAQ,CACvD,GAAM,CAAE,WAAU,YAAW,UAAS,gBAAe,QAAO,OAAM,UAAS,GAAG,GAAS,EACjF,EAAS,EAAe,OAAQ,EAAM,CAEtC,EAAU,MAAc,EAAgB,CAAE,gBAAe,OAAM,UAAS,CAAC,CAAE,CAAC,EAAe,EAAM,EAAQ,CAAC,CAE1G,EAAU,EAAyB,KAAK,CAExC,CAAC,EAAG,GAAa,EAAS,GAAG,CAE7B,EAAa,GAAyB,CACtC,CAAC,GAAG,EAAU,GAAG,EAAU,GAAG,EAAU,CAAC,SAAS,EAAM,IAAI,GAC9D,EAAM,gBAAgB,CACtB,EAAW,GAAc,CACvB,IAAI,EAAS,EACb,GAAI,EAAQ,QAAS,CAEnB,IAAM,EADc,MAAM,KAAK,EAAQ,QAAQ,WAAW,CACnB,OAAO,GAAU,EAAsB,WAAa,EAAE,CAEzF,EAAS,SAAS,EAAM,IAAI,EAAI,EAAS,EAAmB,OAAS,GAAG,IACxE,EAAS,SAAS,EAAM,IAAI,GAAE,EAAS,EAAS,EAAI,EAAS,EAAI,GAErE,EAAmB,SAAS,EAAM,IAAU,CACtC,IAAU,IACR,EAAU,SAAS,EAAM,IAAI,CAAG,GAAsB,OAAO,CAC3D,GAAsB,OAAO,GAErC,CAEJ,OAAO,GACP,GAaN,OATA,MAAgB,CACd,GAAI,EAAQ,SAAW,EAErB,OADA,EAAQ,QAAQ,iBAAiB,UAAW,EAAU,KACzC,CACX,EAAQ,SAAS,oBAAoB,UAAW,EAAU,GAG7D,CAAC,EAAQ,QAAS,EAAc,CAAC,CAGlC,EAAC,EAAA,CAAa,MAAO,WACnB,EAAC,EAAA,CAAS,UAAW,EAAG,WAAY,EAAU,CAAE,IAAK,GAAO,EAAS,GAAI,EAAO,UAAW,GAAI,YAC5F,EAAY,EAAQ,CAAG,EAACA,EAAAA,CAAY,KAAM,EAAA,CAAW,CAAG,EACxD,IACE,EAAuB,EAAM,CAC1B,EAAM,KAAK,CAAE,MAAK,GAAGC,GAAS,IAAU,EAACC,EAAAA,CAA4B,GAAID,EAAAA,CAAlB,GAAO,EAAoB,CAAC,CACnF,GAAA,EACG,EACE,EAEjB,CAQF,EAAK,QAAUE,EACf,EAAK,QAAUH,EACf,EAAK,KAAOI,EACZ,EAAK,KAAOF,EACZ,EAAK,KAAOG,EACZ,EAAK,YAAc,OACnB,IAAA,EAAe"}
+{"version":3,"file":"list.js","names":["ListHeading","props","ListItem","ListDivider","ListIcon","ListText"],"sources":["../../src/list/list.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react'\n\nimport type { VuiComponent } from '../core'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { cs, filterUndefined, isArray, isReactText } from '../utils'\nimport { ListProvider } from './context'\nimport type { ListItemProps, ListProps } from './list.types'\nimport ListDivider from './listDivider'\nimport ListHeading from './listHeading'\nimport ListIcon from './listIcon'\nimport ListItem from './listItem'\nimport ListText from './listText'\n\nconst clickKeys = ['Enter', ' ']\nconst nextKeys = ['ArrowDown', 'Tab']\nconst prevKeys = ['ArrowUp']\n\nexport const ListBase = styled.ulBox``\n\n/** Displays a list of list link items and optional heading. Exposes some props to the children via context. */\nexport const List = vui<'ul', ListProps>((props, ref) => {\n  const { children, className, heading, isInteractive, items, size, variant, ...rest } = props\n  const styles = useStyleConfig('List', props)\n\n  const context = useMemo(() => filterUndefined({ isInteractive, size, variant }), [isInteractive, size, variant])\n\n  const listRef = useRef<HTMLUListElement>(null)\n\n  const [_, setActive] = useState(-1)\n\n  const onKeydown = (event: KeyboardEvent) => {\n    if ([...prevKeys, ...nextKeys, ...clickKeys].includes(event.key)) {\n      event.preventDefault()\n      setActive((a: number) => {\n        let active = a\n        if (listRef.current) {\n          const allChildren = Array.from(listRef.current.childNodes)\n          const tabIndexedChildren = allChildren.filter(child => (child as HTMLElement).tabIndex === 0)\n\n          if (nextKeys.includes(event.key) && active < tabIndexedChildren.length - 1) active++\n          if (prevKeys.includes(event.key)) active = active > 0 ? active - 1 : 0\n\n          tabIndexedChildren.forEach((node, index) => {\n            if (index === active) {\n              if (clickKeys.includes(event.key)) (node as HTMLElement)?.click()\n              else (node as HTMLElement)?.focus()\n            }\n          })\n        }\n        return active\n      })\n    }\n  }\n\n  useEffect(() => {\n    if (listRef.current && isInteractive) {\n      listRef.current.addEventListener('keydown', onKeydown)\n      return () => {\n        listRef.current?.removeEventListener('keydown', onKeydown)\n      }\n    }\n  }, [listRef.current, isInteractive])\n\n  return (\n    <ListProvider value={context}>\n      <ListBase className={cs('vui-list', className)} ref={ref || listRef} {...styles.container} {...rest}>\n        {isReactText(heading) ? <ListHeading text={heading} /> : heading}\n        {children ??\n          (isArray<ListItemProps>(items)\n            ? items.map(({ key, ...props }, index) => <ListItem key={key ?? index} {...props} />)\n            : items)}\n      </ListBase>\n    </ListProvider>\n  )\n}) as VuiComponent<'ul', ListProps> & {\n  Divider: typeof ListDivider\n  Heading: typeof ListHeading\n  Icon: typeof ListIcon\n  Item: typeof ListItem\n  Text: typeof ListText\n}\n\nList.Divider = ListDivider\nList.Heading = ListHeading\nList.Icon = ListIcon\nList.Item = ListItem\nList.Text = ListText\nList.displayName = 'List'\nexport default List\n"],"mappings":";;;;;;;;;;;;;;;;AAaA,MAAM,YAAY,CAAC,SAAS,IAAI;AAChC,MAAM,WAAW,CAAC,aAAa,MAAM;AACrC,MAAM,WAAW,CAAC,UAAU;AAE5B,MAAa,WAAW,OAAO,KAAK;;AAGpC,MAAa,OAAO,KAAsB,OAAO,QAAQ;CACvD,MAAM,EAAE,UAAU,WAAW,SAAS,eAAe,OAAO,MAAM,QAAS,GAAG,SAAS;CACvF,MAAM,SAAS,eAAe,QAAQ,MAAM;CAE5C,MAAM,UAAU,cAAc,gBAAgB;EAAE;EAAe;EAAM;EAAS,CAAC,EAAE;EAAC;EAAe;EAAM;EAAQ,CAAC;CAEhH,MAAM,UAAU,OAAyB,KAAK;CAE9C,MAAM,CAAC,GAAG,aAAa,SAAS,GAAG;CAEnC,MAAM,aAAa,UAAyB;AAC1C,MAAI;GAAC,GAAG;GAAU,GAAG;GAAU,GAAG;GAAU,CAAC,SAAS,MAAM,IAAI,EAAE;AAChE,SAAM,gBAAgB;AACtB,cAAW,MAAc;IACvB,IAAI,SAAS;AACb,QAAI,QAAQ,SAAS;KAEnB,MAAM,qBADc,MAAM,KAAK,QAAQ,QAAQ,WAAW,CACnB,QAAO,UAAU,MAAsB,aAAa,EAAE;AAE7F,SAAI,SAAS,SAAS,MAAM,IAAI,IAAI,SAAS,mBAAmB,SAAS,EAAG;AAC5E,SAAI,SAAS,SAAS,MAAM,IAAI,CAAE,UAAS,SAAS,IAAI,SAAS,IAAI;AAErE,wBAAmB,SAAS,MAAM,UAAU;AAC1C,UAAI,UAAU,OACZ,KAAI,UAAU,SAAS,MAAM,IAAI,CAAE,CAAC,MAAsB,OAAO;UAC5D,CAAC,MAAsB,OAAO;OAErC;;AAEJ,WAAO;KACP;;;AAIN,iBAAgB;AACd,MAAI,QAAQ,WAAW,eAAe;AACpC,WAAQ,QAAQ,iBAAiB,WAAW,UAAU;AACtD,gBAAa;AACX,YAAQ,SAAS,oBAAoB,WAAW,UAAU;;;IAG7D,CAAC,QAAQ,SAAS,cAAc,CAAC;AAEpC,QACE,oBAAC;EAAa,OAAO;YACnB,qBAAC;GAAS,WAAW,GAAG,YAAY,UAAU;GAAE,KAAK,OAAO;GAAS,GAAI,OAAO;GAAW,GAAI;cAC5F,YAAY,QAAQ,GAAG,oBAACA,uBAAY,MAAM,UAAW,GAAG,SACxD,aACE,QAAuB,MAAM,GAC1B,MAAM,KAAK,EAAE,IAAK,GAAGC,WAAS,UAAU,oBAACC,oBAA4B,GAAID,WAAlB,OAAO,MAAoB,CAAC,GACnF;IACG;GACE;EAEjB;AAQF,KAAK,UAAUE;AACf,KAAK,UAAUH;AACf,KAAK,OAAOI;AACZ,KAAK,OAAOF;AACZ,KAAK,OAAOG;AACZ,KAAK,cAAc;AACnB,mBAAe"}

package/dist/list/list.types.d.ts

@@ -1,8 +1,12 @@
 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 { ReactText } from "react";
 
 //#region src/list/list.types.d.ts

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

@@ -1 +1 @@
-{"version":3,"file":"list.types.d.ts","names":[],"sources":["../../src/list/list.types.ts"],"sourcesContent":[],"mappings":";;;;;;;;KAQY,SAAA,CAAA,CAAA,CAAY,cACtB;;EADU,WAAA,CAAS,CAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA;EAAA,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,UAAA,CAAA,CAAA,CAAA,OAAA,CAAA,KAAA,CAAA,GAAA,CAAA,KAAA,CAAA,CAAA,CAAA;SAAG,CAAA,CAAA,CAKV,KAAA,CAAM,SALI;;eAKJ,CAAA,CAAA,CAAA,OAAA;;OAIR,CAAA,CAAA,CAAA,OAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAc,aAAd,CAAA,CAAA,CAAA,CAAA,CAAA,CAAiC,GAAA,CAAI,OAArC;;EAA4C,OAAA,CAAA,CAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,CAAA,CAAA,SAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA;AAKxD,CAAA;AAA6B,IAAA,CAAjB,iBAAA,CAAA,CAAA,CAAoB,OAAH,CAAA,CAAA,CAAA,CAAA,CAAA,CAAgB,SAAhB,CAAA,CAAA,CAAA,CAAA,MAAA;AAAgB,IAAA,CAEjC,aAAA,CAAA,CAAA,CAAgB,WAFiB,CAAA,CAAA,CAG3C,YAH2C,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA;;EAAN,MAAA,CAAA,CAAA,CAAA,OAAA;EAE3B,CAAA,CAAA,CAAA,CAAA,OAAA,CAAA,GAAA,CAAA,OAAA,CAAA,YAAA,CAAA,CAAA,CAAA,UAAA,CAAA,CAAA;EAAa,OAAA,CAAA,CAAA,CAAA,OAAA;;SACvB,CAAA,CAAA,CAAA,OAAA;;aAc4B,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA;;QAEH,CAAI,CAAA,CAAA,OAAA;;UAQf,CAAM,CAAA,CAAA,OAAA;;UAMX,CAAA,CAAA,CAhBI,QAgBJ,CAAA,CAAA,CAhBe,GAAA,CAAI,OAgBnB;;EAAuB,SAAA,CAAA,CAAA,CAdlB,QAckB,CAAA,CAAA,CAdP,GAAA,CAAI,OAcG;;;;;;aARnB,KAAA,CAAM;;cAEL,KAAA,CAAM;;;;cAIN;;SAEL,YAAY,GAAA,CAAI"}
+{"version":3,"file":"list.types.d.ts","names":[],"sources":["../../src/list/list.types.ts"],"sourcesContent":[],"mappings":";;;;;;;;;;;;KAQY,SAAA,CAAA,CAAA,CAAY,cACtB;;;;YAIY,KAAA,CAAM;;EALR,aAAS,CAAA,CAAA,CAAA,OAAA;EAAG,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,UAAA,CAAA,CAAA,CAAA,IAAA,CAAA,EAAA,CAAA,KAAA,CAAA,CAAA,CAAA;EACtB,KAAA,CAAA,CAAA,CAQU,OARV,CAAA,CAAA,EAAA,CAAA,CAAA,CAQwB,aARxB,CAAA,CAAA,CAAA,CAAA,CAAA,CAQ2C,GAAA,CAAI,OAR/C;EAIY,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,GAAA,CAAA,GAAA,CAAA,OAAA,CAAA,CAAA,GAAA,CAAA,CAAA,IAAA,CAAA,CAAA,OAAA,CAAA,EAAA,CAAA,QAAA,CAAA,CAAA,IAAA,CAAA,EAAA,CAAA,GAAA,CAAA,MAAA,CAAA,CAAA,CAAA;EAIY,OAAA,CAAA,CAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,CAAA,CAAA,SAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA;CAAd;AAAqC,IAAA,CAKrC,iBAAA,CAAA,CAAA,CAAoB,OALiB,CAAA,CAAA,CAAA,CAAA,CAAA,CAKJ,SALI,CAAA,CAAA,CAAA,CAAA,MAAA;AAAO,IAAA,CAO5C,aAAA,CAAA,CAAA,CAAgB,WAP4B,CAAA,CAAA,CAQtD,YARsD,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA;EAK5C,CAAA,CAAA,CAAA,CAAA,OAAA,CAAA,GAAA,CAAA,OAAA,CAAA,UAAA,CAAA,GAAA,CAAA,YAAA,CAAA,CAAA,CAAA,UAAA,CAAA,CAAA;EAEA,MAAA,CAAA,CAAA,CAAA,OAAa;EAAG,CAAA,CAAA,CAAA,CAAA,OAAA,CAAA,GAAA,CAAA,OAAA,CAAA,YAAA,CAAA,CAAA,CAAA,UAAA,CAAA,CAAA;EAC1B,OAAA,CAAA,CAAA,CAAA,OAAA;EAca,CAAA,CAAA,CAAA,CAAA,OAAA,CAAA,GAAA,CAAA,OAAA,CAAA,UAAA,CAAA,CAAA,CAAA,UAAA,CAAA,CAAA;EAAW,OAAI,CAAA,CAAA,CAAA,OAAA;EAEd,CAAA,CAAA,CAAA,CAAA,UAAA,CAAA,CAAA,CAAA,UAAA,CAAA,CAAA,CAAA;EAAW,WAAI,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA;EAMhB,CAAA,CAAA,CAAA,CAAA,QAAA,CAAA,OAAA,CAAA,EAAA,CAAA,CAAA,CAAA,MAAA,CAAA,CAAA,CAAA,UAAA,CAAA,CAAA;EAEC,MAAM,CAAA,CAAA,CAAA,OAAA;EAIN,CAAA,CAAA,CAAA,CAAA,QAAA,CAAA,IAAA,CAAA,GAAA,CAAA,GAAA,CAAA,OAAA,CAAA,EAAA,CAAA,QAAA,CAAA,KAAA,CAAA,IAAA,CAAA,WAAA,CAAA,OAAA,CAAA,CAAA,CAAA;EAEL,QAAA,CAAA,CAAA,CAAA,OAAA;EAAY,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,UAAA,CAAA,EAAA,CAAA,IAAA,CAAA,EAAA,CAAA,GAAA,CAAA,IAAA,CAAA,CAAA,CAAA;EAAW,QAAA,CAAA,CAAA,CAhBnB,QAgBmB,CAAA,CAAA,CAhBR,GAAA,CAAI,OAgBI;;cAdlB,WAAW,GAAA,CAAI;;;;;;aAMhB,KAAA,CAAM;;cAEL,KAAA,CAAM;;;;cAIN;;SAEL,YAAY,GAAA,CAAI"}

package/dist/list/listDivider.d.ts

@@ -1,5 +1,7 @@
 import { VuiComponent } from "../core/vui.js";
 import { DividerProps } from "../divider/divider.types.js";
+import "../divider/index.js";
+import "../index.js";
 
 //#region src/list/listDivider.d.ts
 /** Displays a divider line within the List. */

package/dist/list/listDivider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"listDivider.d.ts","names":[],"sources":["../../src/list/listDivider.tsx"],"sourcesContent":[],"mappings":";;;;;cAOa,aAAW,mBAAA"}
+{"version":3,"file":"listDivider.d.ts","names":[],"sources":["../../src/list/listDivider.tsx"],"sourcesContent":[],"mappings":";;;;;;;cAOa,aAAW,mBAAA"}

package/dist/list/listDivider.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{useListContext as r}from"./context.js";import i from"../divider/divider.js";import{jsx as a}from"react/jsx-runtime";const o=n((n,o)=>{let{className:s,...c}=n,l=t(`List`,r());return a(`li`,{children:a(i,{className:e(`vui-listDivider`,s),my:1,ref:o,...l.divider,...c})})});o.displayName=`ListDivider`;var s=o;export{o as ListDivider,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 { useListContext } from "./context.js";
+import divider_default from "../divider/divider.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/list/listDivider.tsx
+/** Displays a divider line within the List. */
+const ListDivider = vui((props, ref) => {
+	const { className,...rest } = props;
+	const styles = useStyleConfig("List", useListContext());
+	return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(divider_default, {
+		className: cs("vui-listDivider", className),
+		my: 1,
+		ref,
+		...styles.divider,
+		...rest
+	}) });
+});
+ListDivider.displayName = "ListDivider";
+var listDivider_default = ListDivider;
+
+//#endregion
+export { ListDivider, listDivider_default as default };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=listDivider.js.map

package/dist/list/listDivider.js.map

@@ -1 +1 @@
-{"version":3,"file":"listDivider.js","names":["Divider"],"sources":["../../src/list/listDivider.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport type { DividerProps } from '../divider'\nimport Divider from '../divider'\nimport { cs } from '../utils'\nimport { useListContext } from './context'\n\n/** Displays a divider line within the List. */\nexport const ListDivider = vui<'hr', DividerProps>((props, ref) => {\n  const { className, ...rest } = props\n  const styles = useStyleConfig('List', useListContext())\n\n  return (\n    <li>\n      <Divider className={cs('vui-listDivider', className)} my={1} ref={ref} {...styles.divider} {...rest} />\n    </li>\n  )\n})\n\nListDivider.displayName = 'ListDivider'\nexport default ListDivider\n"],"mappings":"0PAOA,MAAa,EAAc,GAAyB,EAAO,IAAQ,CACjE,GAAM,CAAE,YAAW,GAAG,GAAS,EACzB,EAAS,EAAe,OAAQ,GAAgB,CAAC,CAEvD,OACE,EAAC,KAAA,CAAA,SACC,EAACA,EAAAA,CAAQ,UAAW,EAAG,kBAAmB,EAAU,CAAE,GAAI,EAAQ,MAAK,GAAI,EAAO,QAAS,GAAI,GAAQ,CAAA,CACpG,EAEP,CAEF,EAAY,YAAc,cAC1B,IAAA,EAAe"}
+{"version":3,"file":"listDivider.js","names":["Divider"],"sources":["../../src/list/listDivider.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport type { DividerProps } from '../divider'\nimport Divider from '../divider'\nimport { cs } from '../utils'\nimport { useListContext } from './context'\n\n/** Displays a divider line within the List. */\nexport const ListDivider = vui<'hr', DividerProps>((props, ref) => {\n  const { className, ...rest } = props\n  const styles = useStyleConfig('List', useListContext())\n\n  return (\n    <li>\n      <Divider className={cs('vui-listDivider', className)} my={1} ref={ref} {...styles.divider} {...rest} />\n    </li>\n  )\n})\n\nListDivider.displayName = 'ListDivider'\nexport default ListDivider\n"],"mappings":";;;;;;;;;AAOA,MAAa,cAAc,KAAyB,OAAO,QAAQ;CACjE,MAAM,EAAE,UAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,eAAe,QAAQ,gBAAgB,CAAC;AAEvD,QACE,oBAAC,kBACC,oBAACA;EAAQ,WAAW,GAAG,mBAAmB,UAAU;EAAE,IAAI;EAAQ;EAAK,GAAI,OAAO;EAAS,GAAI;GAAQ,GACpG;EAEP;AAEF,YAAY,cAAc;AAC1B,0BAAe"}

package/dist/list/listHeading.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/list/listHeading.d.ts
 /** Displays a heading within the List. */

package/dist/list/listHeading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"listHeading.d.ts","names":[],"sources":["../../src/list/listHeading.tsx"],"sourcesContent":[],"mappings":";;;;;cAOa,aAAW,mBAAA"}
+{"version":3,"file":"listHeading.d.ts","names":[],"sources":["../../src/list/listHeading.tsx"],"sourcesContent":[],"mappings":";;;;;;;cAOa,aAAW,mBAAA"}

package/dist/list/listHeading.js

@@ -1,2 +1,32 @@
-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{T as r}from"../t/t.js";import{useListContext 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(`List`,i());return a(`li`,{children:a(r,{className:e(`vui-listHeading`,s),display:`inline-block`,px:2,py:1,ref:o,size:`sm`,textTransform:`uppercase`,weight:`medium`,...l.heading,...c})})});o.displayName=`ListHeading`;var s=o;export{o as ListHeading,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 { T } from "../t/t.js";
+import { useListContext } from "./context.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/list/listHeading.tsx
+/** Displays a heading within the List. */
+const ListHeading = vui((props, ref) => {
+	const { className,...rest } = props;
+	const styles = useStyleConfig("List", useListContext());
+	return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(T, {
+		className: cs("vui-listHeading", className),
+		display: "inline-block",
+		px: 2,
+		py: 1,
+		ref,
+		size: "sm",
+		textTransform: "uppercase",
+		weight: "medium",
+		...styles.heading,
+		...rest
+	}) });
+});
+ListHeading.displayName = "ListHeading";
+var listHeading_default = ListHeading;
+
+//#endregion
+export { ListHeading, listHeading_default as default };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=listHeading.js.map

package/dist/list/listHeading.js.map

@@ -1 +1 @@
-{"version":3,"file":"listHeading.js","names":[],"sources":["../../src/list/listHeading.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport type { TProps } from '../t'\nimport { T } from '../t'\nimport { cs } from '../utils'\nimport { useListContext } from './context'\n\n/** Displays a heading within the List. */\nexport const ListHeading = vui<'li', TProps>((props, ref) => {\n  const { className, ...rest } = props\n  const styles = useStyleConfig('List', useListContext())\n\n  return (\n    <li>\n      <T\n        className={cs('vui-listHeading', className)}\n        display=\"inline-block\"\n        px={2}\n        py={1}\n        ref={ref}\n        size=\"sm\"\n        textTransform=\"uppercase\"\n        weight=\"medium\"\n        {...styles.heading}\n        {...rest}\n      />\n    </li>\n  )\n})\n\nListHeading.displayName = 'ListHeading'\nexport default ListHeading\n"],"mappings":"mPAOA,MAAa,EAAc,GAAmB,EAAO,IAAQ,CAC3D,GAAM,CAAE,YAAW,GAAG,GAAS,EACzB,EAAS,EAAe,OAAQ,GAAgB,CAAC,CAEvD,OACE,EAAC,KAAA,CAAA,SACC,EAAC,EAAA,CACC,UAAW,EAAG,kBAAmB,EAAU,CAC3C,QAAQ,eACR,GAAI,EACJ,GAAI,EACC,MACL,KAAK,KACL,cAAc,YACd,OAAO,SACP,GAAI,EAAO,QACX,GAAI,GACJ,CAAA,CACC,EAEP,CAEF,EAAY,YAAc,cAC1B,IAAA,EAAe"}
+{"version":3,"file":"listHeading.js","names":[],"sources":["../../src/list/listHeading.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport type { TProps } from '../t'\nimport { T } from '../t'\nimport { cs } from '../utils'\nimport { useListContext } from './context'\n\n/** Displays a heading within the List. */\nexport const ListHeading = vui<'li', TProps>((props, ref) => {\n  const { className, ...rest } = props\n  const styles = useStyleConfig('List', useListContext())\n\n  return (\n    <li>\n      <T\n        className={cs('vui-listHeading', className)}\n        display=\"inline-block\"\n        px={2}\n        py={1}\n        ref={ref}\n        size=\"sm\"\n        textTransform=\"uppercase\"\n        weight=\"medium\"\n        {...styles.heading}\n        {...rest}\n      />\n    </li>\n  )\n})\n\nListHeading.displayName = 'ListHeading'\nexport default ListHeading\n"],"mappings":";;;;;;;;;AAOA,MAAa,cAAc,KAAmB,OAAO,QAAQ;CAC3D,MAAM,EAAE,UAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,eAAe,QAAQ,gBAAgB,CAAC;AAEvD,QACE,oBAAC,kBACC,oBAAC;EACC,WAAW,GAAG,mBAAmB,UAAU;EAC3C,SAAQ;EACR,IAAI;EACJ,IAAI;EACC;EACL,MAAK;EACL,eAAc;EACd,QAAO;EACP,GAAI,OAAO;EACX,GAAI;GACJ,GACC;EAEP;AAEF,YAAY,cAAc;AAC1B,0BAAe"}

package/dist/list/listIcon.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/list/listIcon.d.ts
 /** Displays an icon on the side of the ListItem. */

package/dist/list/listIcon.d.ts.map

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

package/dist/list/listIcon.js

@@ -1,2 +1,26 @@
-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{useListContext 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(`List`,i());return a(r,{className:e(`vui-listIcon`,s),ref:o,...l.icon,...c})});o.displayName=`ListIcon`;var s=o;export{o as ListIcon,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 { useListContext } from "./context.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/list/listIcon.tsx
+/** Displays an icon on the side of the ListItem. */
+const ListIcon = vui((props, ref) => {
+	const { className,...rest } = props;
+	const styles = useStyleConfig("List", useListContext());
+	return /* @__PURE__ */ jsx(icon_default, {
+		className: cs("vui-listIcon", className),
+		ref,
+		...styles.icon,
+		...rest
+	});
+});
+ListIcon.displayName = "ListIcon";
+var listIcon_default = ListIcon;
+
+//#endregion
+export { ListIcon, listIcon_default as default };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=listIcon.js.map

package/dist/list/listIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"listIcon.js","names":["Icon"],"sources":["../../src/list/listIcon.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport type { IconProps } from '../icon'\nimport Icon from '../icon'\nimport { cs } from '../utils'\nimport { useListContext } from './context'\n\n/** Displays an icon on the side of the ListItem. */\nexport const ListIcon = vui<'svg', IconProps>((props, ref) => {\n  const { className, ...rest } = props\n  const styles = useStyleConfig('List', useListContext())\n\n  return <Icon className={cs('vui-listIcon', className)} ref={ref} {...styles.icon} {...rest} />\n})\n\nListIcon.displayName = 'ListIcon'\nexport default ListIcon\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,GAAI,EAAO,KAAM,GAAI,GAAQ,EAC9F,CAEF,EAAS,YAAc,WACvB,IAAA,EAAe"}
+{"version":3,"file":"listIcon.js","names":["Icon"],"sources":["../../src/list/listIcon.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport type { IconProps } from '../icon'\nimport Icon from '../icon'\nimport { cs } from '../utils'\nimport { useListContext } from './context'\n\n/** Displays an icon on the side of the ListItem. */\nexport const ListIcon = vui<'svg', IconProps>((props, ref) => {\n  const { className, ...rest } = props\n  const styles = useStyleConfig('List', useListContext())\n\n  return <Icon className={cs('vui-listIcon', className)} ref={ref} {...styles.icon} {...rest} />\n})\n\nListIcon.displayName = 'ListIcon'\nexport default ListIcon\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,GAAI,OAAO;EAAM,GAAI;GAAQ;EAC9F;AAEF,SAAS,cAAc;AACvB,uBAAe"}

package/dist/list/listItem.d.ts

@@ -1,10 +1,11 @@
 import { SystemProps } from "../system/system.js";
 import { VuiComponent } from "../core/vui.js";
 import { ListItemProps } from "./list.types.js";
-import * as styled_components441 from "styled-components";
+import "../index.js";
+import * as styled_components402 from "styled-components";
 
 //#region src/list/listItem.d.ts
-declare const ListItemBase: styled_components441.StyledComponent<"li", styled_components441.DefaultTheme, SystemProps, never>;
+declare const ListItemBase: styled_components402.StyledComponent<"li", styled_components402.DefaultTheme, SystemProps, never>;
 /**
  * Displays a list item with text and optional icons. Can be shown as interactive or selected.
  * Optionally wraps the content with an <a> element when rendering a link.

package/dist/list/listItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"listItem.d.ts","names":[],"sources":["../../src/list/listItem.tsx"],"sourcesContent":[],"mappings":";;;;;;cAyBa,cAAY,oBAAA,CAAA,sBAexB,oBAAA,CAfwB,YAAA,CAAA,CAAA,WAAA,CAAA;;;;;AAAZ,OAAA,CAAA,KAAA,CAqBA,QANZ,CAAA,CAMoB,YANpB,CAAA,CAAA,EAAA,CAAA,CAAA,CAMoB,aANpB,CAAA"}
+{"version":3,"file":"listItem.d.ts","names":[],"sources":["../../src/list/listItem.tsx"],"sourcesContent":[],"mappings":";;;;;;;cAyBa,cAAY,oBAAA,CAAA,sBAexB,oBAAA,CAfwB,YAAA,CAAA,CAAA,WAAA,CAAA;;;;;cAqBZ,UAAQ,mBAAA"}

package/dist/list/listItem.js

@@ -1,4 +1,29 @@
-import{isReactText as e,isString as t}from"../utils/assertion.js";import{filterUndefined as n}from"../utils/object.js";import{cs as r}from"../utils/styles.js";import{useStyleConfig as i}from"../core/theme.js";import{styled as a}from"../core/styled.js";import{vui as o}from"../core/vui.js";import{useListContext as s}from"./context.js";import c from"./listIcon.js";import l from"../link/link.js";import u from"./listText.js";import{Fragment as d}from"react";import{jsx as f,jsxs as p}from"react/jsx-runtime";const m=o((e,t)=>f(l,{borderRadius:`none`,className:`vui-listItemLink vui-linkNoUnderline`,h:`100%`,px:2,ref:t,variant:`plain`,w:`100%`,...e})),h=a.liBox`
+import { isReactText, isString } from "../utils/assertion.js";
+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 { useListContext } from "./context.js";
+import listIcon_default from "./listIcon.js";
+import link_default from "../link/link.js";
+import listText_default from "./listText.js";
+import { Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/list/listItem.tsx
+/** Used as optional content wrapper when list item should be a link. */
+const ListItemLink = vui((props, ref) => /* @__PURE__ */ jsx(link_default, {
+	borderRadius: "none",
+	className: "vui-listItemLink vui-linkNoUnderline",
+	h: "100%",
+	px: 2,
+	ref,
+	variant: "plain",
+	w: "100%",
+	...props
+}));
+const ListItemBase = styled.liBox`
   display: flex;
   line-height: normal;
   outline: none;
@@ -13,5 +38,80 @@ import{isReactText as e,isString as t}from"../utils/assertion.js";import{filterU
   &:focus-visible {
     z-index: 1;
   }
-`,g=o((a,o)=>{let{children:l,center:g,centerH:_,centerV:v=!0,className:y,column:b,disabled:x,iconLeft:S,iconRight:C,isInteractive:w,isSelected:T,isTruncated:E,itemLeft:D,itemRight:O,linkProps:k,onClick:A,text:j,...M}={...s(),...a},{activeBg:N,hoverBg:P,selectedBg:F,...I}=i(`List`,s()).item,L=k!==void 0,R=w||L||A!==void 0,z=(g||(b?_:v))&&`center`,B=b&&`column`,V=(g||(b?v:_))&&`center`,H=L?m:d,U=L?{alignItems:`center`,display:`inline-flex`}:{},W=!x&&R?{cursor:`pointer`,focusVisibleRing:2,hoverBg:P,activeBg:N,tabIndex:L?void 0:0,userSelect:`none`}:{},G=n({alignItems:z,bg:T?F:void 0,"aria-disabled":x,flexDirection:B,justifyContent:V,px:L?0:void 0});return f(h,{bg:x?M.disabledBg||`sandstone.95`:void 0,className:r(`vui-listItem`,y),onClick:x?void 0:A,ref:o,...I,...W,...G,...M,children:p(H,{...k,...U,children:[D,t(S)?f(c,{mr:1,name:S,verticalAlign:`middle`}):S,l??(e(j)?f(u,{isTruncated:E,text:j}):j),t(C)?f(c,{ml:`auto`,name:C,verticalAlign:`middle`}):C,O]})})});g.displayName=`ListItem`;var _=g;export{g as ListItem,h as ListItemBase,_ as default};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+`;
+/**
+* Displays a list item with text and optional icons. Can be shown as interactive or selected.
+* Optionally wraps the content with an <a> element when rendering a link.
+*/
+const ListItem = vui((props, ref) => {
+	const { children, center, centerH, centerV = true, className, column, disabled, iconLeft, iconRight, isInteractive: isInteractiveProp, isSelected, isTruncated, itemLeft, itemRight, linkProps, onClick, text,...rest } = {
+		...useListContext(),
+		...props
+	};
+	const { activeBg, hoverBg, selectedBg,...itemStyles } = useStyleConfig("List", useListContext()).item;
+	const isLinkItem = linkProps !== void 0;
+	const isInteractive = isInteractiveProp || isLinkItem || onClick !== void 0;
+	const alignItems = (center || (column ? centerH : centerV)) && "center";
+	const flexDirection = column && "column";
+	const justifyContent = (center || (column ? centerV : centerH)) && "center";
+	const ContentWrapper = isLinkItem ? ListItemLink : Fragment;
+	const contentWrapperProps = isLinkItem ? {
+		alignItems: "center",
+		display: "inline-flex"
+	} : {};
+	const interactiveProps = !disabled && isInteractive ? {
+		cursor: "pointer",
+		focusVisibleRing: 2,
+		hoverBg,
+		activeBg,
+		tabIndex: !isLinkItem ? 0 : void 0,
+		userSelect: "none"
+	} : {};
+	const aliasedProps = filterUndefined({
+		alignItems,
+		bg: isSelected ? selectedBg : void 0,
+		"aria-disabled": disabled,
+		flexDirection,
+		justifyContent,
+		px: isLinkItem ? 0 : void 0
+	});
+	return /* @__PURE__ */ jsx(ListItemBase, {
+		bg: disabled ? rest.disabledBg || "sandstone.95" : void 0,
+		className: cs("vui-listItem", className),
+		onClick: !disabled ? onClick : void 0,
+		ref,
+		...itemStyles,
+		...interactiveProps,
+		...aliasedProps,
+		...rest,
+		children: /* @__PURE__ */ jsxs(ContentWrapper, {
+			...linkProps,
+			...contentWrapperProps,
+			children: [
+				itemLeft,
+				isString(iconLeft) ? /* @__PURE__ */ jsx(listIcon_default, {
+					mr: 1,
+					name: iconLeft,
+					verticalAlign: "middle"
+				}) : iconLeft,
+				children ?? (isReactText(text) ? /* @__PURE__ */ jsx(listText_default, {
+					isTruncated,
+					text
+				}) : text),
+				isString(iconRight) ? /* @__PURE__ */ jsx(listIcon_default, {
+					ml: "auto",
+					name: iconRight,
+					verticalAlign: "middle"
+				}) : iconRight,
+				itemRight
+			]
+		})
+	});
+});
+ListItem.displayName = "ListItem";
+var listItem_default = ListItem;
+
+//#endregion
+export { ListItem, ListItemBase, listItem_default as default };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=listItem.js.map

package/dist/list/listItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"listItem.js","names":["Link","ListIcon","ListText"],"sources":["../../src/list/listItem.tsx"],"sourcesContent":["import { Fragment } from 'react'\n\nimport { styled, useStyleConfig, vui } from '../core'\nimport type { LinkProps } from '../link'\nimport Link from '../link'\nimport { cs, filterUndefined, isReactText, isString } from '../utils'\nimport { useListContext } from './context'\nimport type { ListItemProps } from './list.types'\nimport ListIcon from './listIcon'\nimport ListText from './listText'\n\n/** Used as optional content wrapper when list item should be a link. */\nconst ListItemLink = vui<'a', LinkProps>((props, ref) => (\n  <Link\n    borderRadius=\"none\"\n    className=\"vui-listItemLink vui-linkNoUnderline\"\n    h=\"100%\"\n    px={2}\n    ref={ref}\n    variant=\"plain\"\n    w=\"100%\"\n    {...props}\n  />\n))\n\nexport const ListItemBase = styled.liBox`\n  display: flex;\n  line-height: normal;\n  outline: none;\n  transition-duration: fast;\n\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n    user-select: none;\n    opacity: 0.5;\n  }\n\n  &:focus-visible {\n    z-index: 1;\n  }\n`\n\n/**\n * Displays a list item with text and optional icons. Can be shown as interactive or selected.\n * Optionally wraps the content with an <a> element when rendering a link.\n */\nexport const ListItem = vui<'li', ListItemProps>((props, ref) => {\n  const mergedProps = { ...useListContext(), ...props }\n  const {\n    children,\n    center,\n    centerH,\n    centerV = true,\n    className,\n    column,\n    disabled,\n    iconLeft,\n    iconRight,\n    isInteractive: isInteractiveProp,\n    isSelected,\n    isTruncated,\n    itemLeft,\n    itemRight,\n    linkProps,\n    onClick,\n    text,\n    ...rest\n  } = mergedProps\n  const styles = useStyleConfig('List', useListContext())\n  const { activeBg, hoverBg, selectedBg, ...itemStyles } = styles.item\n\n  const isLinkItem = linkProps !== undefined\n  const isInteractive = isInteractiveProp || isLinkItem || onClick !== undefined\n  const alignItems = (center || (column ? centerH : centerV)) && 'center'\n  const flexDirection = column && 'column'\n  const justifyContent = (center || (column ? centerV : centerH)) && 'center'\n\n  const ContentWrapper = isLinkItem ? ListItemLink : Fragment\n  const contentWrapperProps = isLinkItem ? { alignItems: 'center', display: 'inline-flex' } : {}\n\n  const interactiveProps =\n    !disabled && isInteractive\n      ? {\n          cursor: 'pointer',\n          focusVisibleRing: 2,\n          hoverBg,\n          activeBg,\n          tabIndex: !isLinkItem ? 0 : undefined,\n          userSelect: 'none',\n        }\n      : {}\n\n  const aliasedProps = filterUndefined({\n    alignItems,\n    bg: isSelected ? selectedBg : undefined,\n    'aria-disabled': disabled,\n    flexDirection,\n    justifyContent,\n    px: isLinkItem ? 0 : undefined,\n  })\n\n  return (\n    <ListItemBase\n      bg={disabled ? rest.disabledBg || 'sandstone.95' : undefined}\n      className={cs('vui-listItem', className)}\n      onClick={!disabled ? onClick : undefined}\n      ref={ref}\n      {...itemStyles}\n      {...interactiveProps}\n      {...aliasedProps}\n      {...rest}\n    >\n      <ContentWrapper {...linkProps} {...contentWrapperProps}>\n        {itemLeft}\n\n        {isString(iconLeft) ? <ListIcon mr={1} name={iconLeft} verticalAlign={'middle'} /> : iconLeft}\n\n        {children ?? (isReactText(text) ? <ListText {...{ isTruncated, text }} /> : text)}\n\n        {isString(iconRight) ? <ListIcon ml=\"auto\" name={iconRight} verticalAlign={'middle'} /> : iconRight}\n\n        {itemRight}\n      </ContentWrapper>\n    </ListItemBase>\n  )\n})\n\nListItem.displayName = 'ListItem'\nexport default ListItem\n"],"mappings":"2fAYA,MAAM,EAAe,GAAqB,EAAO,IAC/C,EAACA,EAAAA,CACC,aAAa,OACb,UAAU,uCACV,EAAE,OACF,GAAI,EACC,MACL,QAAQ,QACR,EAAE,OACF,GAAI,GACJ,CACF,CAEW,EAAe,EAAO,KAAK;;;;;;;;;;;;;;;EAqB3B,EAAW,GAA0B,EAAO,IAAQ,CAE/D,GAAM,CACJ,WACA,SACA,UACA,UAAU,GACV,YACA,SACA,WACA,WACA,YACA,cAAe,EACf,aACA,cACA,WACA,YACA,YACA,UACA,OACA,GAAG,GAnBe,CAAE,GAAG,GAAgB,CAAE,GAAG,EAAO,CAsB/C,CAAE,WAAU,UAAS,aAAY,GAAG,GAD3B,EAAe,OAAQ,GAAgB,CAAC,CACS,KAE1D,EAAa,IAAc,IAAA,GAC3B,EAAgB,GAAqB,GAAc,IAAY,IAAA,GAC/D,GAAc,IAAW,EAAS,EAAU,KAAa,SACzD,EAAgB,GAAU,SAC1B,GAAkB,IAAW,EAAS,EAAU,KAAa,SAE7D,EAAiB,EAAa,EAAe,EAC7C,EAAsB,EAAa,CAAE,WAAY,SAAU,QAAS,cAAe,CAAG,EAAE,CAExF,EACJ,CAAC,GAAY,EACT,CACE,OAAQ,UACR,iBAAkB,EAClB,UACA,WACA,SAAW,EAAiB,IAAA,GAAJ,EACxB,WAAY,OACb,CACD,EAAE,CAEF,EAAe,EAAgB,CACnC,aACA,GAAI,EAAa,EAAa,IAAA,GAC9B,gBAAiB,EACjB,gBACA,iBACA,GAAI,EAAa,EAAI,IAAA,GACtB,CAAC,CAEF,OACE,EAAC,EAAA,CACC,GAAI,EAAW,EAAK,YAAc,eAAiB,IAAA,GACnD,UAAW,EAAG,eAAgB,EAAU,CACxC,QAAU,EAAqB,IAAA,GAAV,EAChB,MACL,GAAI,EACJ,GAAI,EACJ,GAAI,EACJ,GAAI,WAEJ,EAAC,EAAA,CAAe,GAAI,EAAW,GAAI,YAChC,EAEA,EAAS,EAAS,CAAG,EAACC,EAAAA,CAAS,GAAI,EAAG,KAAM,EAAU,cAAe,UAAY,CAAG,EAEpF,IAAa,EAAY,EAAK,CAAG,EAACC,EAAAA,CAAe,cAAa,QAAU,CAAG,GAE3E,EAAS,EAAU,CAAG,EAACD,EAAAA,CAAS,GAAG,OAAO,KAAM,EAAW,cAAe,UAAY,CAAG,EAEzF,IACc,EACJ,EAEjB,CAEF,EAAS,YAAc,WACvB,IAAA,EAAe"}
+{"version":3,"file":"listItem.js","names":["Link","ListIcon","ListText"],"sources":["../../src/list/listItem.tsx"],"sourcesContent":["import { Fragment } from 'react'\n\nimport { styled, useStyleConfig, vui } from '../core'\nimport type { LinkProps } from '../link'\nimport Link from '../link'\nimport { cs, filterUndefined, isReactText, isString } from '../utils'\nimport { useListContext } from './context'\nimport type { ListItemProps } from './list.types'\nimport ListIcon from './listIcon'\nimport ListText from './listText'\n\n/** Used as optional content wrapper when list item should be a link. */\nconst ListItemLink = vui<'a', LinkProps>((props, ref) => (\n  <Link\n    borderRadius=\"none\"\n    className=\"vui-listItemLink vui-linkNoUnderline\"\n    h=\"100%\"\n    px={2}\n    ref={ref}\n    variant=\"plain\"\n    w=\"100%\"\n    {...props}\n  />\n))\n\nexport const ListItemBase = styled.liBox`\n  display: flex;\n  line-height: normal;\n  outline: none;\n  transition-duration: fast;\n\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n    user-select: none;\n    opacity: 0.5;\n  }\n\n  &:focus-visible {\n    z-index: 1;\n  }\n`\n\n/**\n * Displays a list item with text and optional icons. Can be shown as interactive or selected.\n * Optionally wraps the content with an <a> element when rendering a link.\n */\nexport const ListItem = vui<'li', ListItemProps>((props, ref) => {\n  const mergedProps = { ...useListContext(), ...props }\n  const {\n    children,\n    center,\n    centerH,\n    centerV = true,\n    className,\n    column,\n    disabled,\n    iconLeft,\n    iconRight,\n    isInteractive: isInteractiveProp,\n    isSelected,\n    isTruncated,\n    itemLeft,\n    itemRight,\n    linkProps,\n    onClick,\n    text,\n    ...rest\n  } = mergedProps\n  const styles = useStyleConfig('List', useListContext())\n  const { activeBg, hoverBg, selectedBg, ...itemStyles } = styles.item\n\n  const isLinkItem = linkProps !== undefined\n  const isInteractive = isInteractiveProp || isLinkItem || onClick !== undefined\n  const alignItems = (center || (column ? centerH : centerV)) && 'center'\n  const flexDirection = column && 'column'\n  const justifyContent = (center || (column ? centerV : centerH)) && 'center'\n\n  const ContentWrapper = isLinkItem ? ListItemLink : Fragment\n  const contentWrapperProps = isLinkItem ? { alignItems: 'center', display: 'inline-flex' } : {}\n\n  const interactiveProps =\n    !disabled && isInteractive\n      ? {\n          cursor: 'pointer',\n          focusVisibleRing: 2,\n          hoverBg,\n          activeBg,\n          tabIndex: !isLinkItem ? 0 : undefined,\n          userSelect: 'none',\n        }\n      : {}\n\n  const aliasedProps = filterUndefined({\n    alignItems,\n    bg: isSelected ? selectedBg : undefined,\n    'aria-disabled': disabled,\n    flexDirection,\n    justifyContent,\n    px: isLinkItem ? 0 : undefined,\n  })\n\n  return (\n    <ListItemBase\n      bg={disabled ? rest.disabledBg || 'sandstone.95' : undefined}\n      className={cs('vui-listItem', className)}\n      onClick={!disabled ? onClick : undefined}\n      ref={ref}\n      {...itemStyles}\n      {...interactiveProps}\n      {...aliasedProps}\n      {...rest}\n    >\n      <ContentWrapper {...linkProps} {...contentWrapperProps}>\n        {itemLeft}\n\n        {isString(iconLeft) ? <ListIcon mr={1} name={iconLeft} verticalAlign={'middle'} /> : iconLeft}\n\n        {children ?? (isReactText(text) ? <ListText {...{ isTruncated, text }} /> : text)}\n\n        {isString(iconRight) ? <ListIcon ml=\"auto\" name={iconRight} verticalAlign={'middle'} /> : iconRight}\n\n        {itemRight}\n      </ContentWrapper>\n    </ListItemBase>\n  )\n})\n\nListItem.displayName = 'ListItem'\nexport default ListItem\n"],"mappings":";;;;;;;;;;;;;;;AAYA,MAAM,eAAe,KAAqB,OAAO,QAC/C,oBAACA;CACC,cAAa;CACb,WAAU;CACV,GAAE;CACF,IAAI;CACC;CACL,SAAQ;CACR,GAAE;CACF,GAAI;EACJ,CACF;AAEF,MAAa,eAAe,OAAO,KAAK;;;;;;;;;;;;;;;;;;;;AAqBxC,MAAa,WAAW,KAA0B,OAAO,QAAQ;CAE/D,MAAM,EACJ,UACA,QACA,SACA,UAAU,MACV,WACA,QACA,UACA,UACA,WACA,eAAe,mBACf,YACA,aACA,UACA,WACA,WACA,SACA,KACA,GAAG,SAnBe;EAAE,GAAG,gBAAgB;EAAE,GAAG;EAAO;CAsBrD,MAAM,EAAE,UAAU,SAAS,WAAY,GAAG,eAD3B,eAAe,QAAQ,gBAAgB,CAAC,CACS;CAEhE,MAAM,aAAa,cAAc;CACjC,MAAM,gBAAgB,qBAAqB,cAAc,YAAY;CACrE,MAAM,cAAc,WAAW,SAAS,UAAU,aAAa;CAC/D,MAAM,gBAAgB,UAAU;CAChC,MAAM,kBAAkB,WAAW,SAAS,UAAU,aAAa;CAEnE,MAAM,iBAAiB,aAAa,eAAe;CACnD,MAAM,sBAAsB,aAAa;EAAE,YAAY;EAAU,SAAS;EAAe,GAAG,EAAE;CAE9F,MAAM,mBACJ,CAAC,YAAY,gBACT;EACE,QAAQ;EACR,kBAAkB;EAClB;EACA;EACA,UAAU,CAAC,aAAa,IAAI;EAC5B,YAAY;EACb,GACD,EAAE;CAER,MAAM,eAAe,gBAAgB;EACnC;EACA,IAAI,aAAa,aAAa;EAC9B,iBAAiB;EACjB;EACA;EACA,IAAI,aAAa,IAAI;EACtB,CAAC;AAEF,QACE,oBAAC;EACC,IAAI,WAAW,KAAK,cAAc,iBAAiB;EACnD,WAAW,GAAG,gBAAgB,UAAU;EACxC,SAAS,CAAC,WAAW,UAAU;EAC1B;EACL,GAAI;EACJ,GAAI;EACJ,GAAI;EACJ,GAAI;YAEJ,qBAAC;GAAe,GAAI;GAAW,GAAI;;IAChC;IAEA,SAAS,SAAS,GAAG,oBAACC;KAAS,IAAI;KAAG,MAAM;KAAU,eAAe;MAAY,GAAG;IAEpF,aAAa,YAAY,KAAK,GAAG,oBAACC;KAAe;KAAa;MAAU,GAAG;IAE3E,SAAS,UAAU,GAAG,oBAACD;KAAS,IAAG;KAAO,MAAM;KAAW,eAAe;MAAY,GAAG;IAEzF;;IACc;GACJ;EAEjB;AAEF,SAAS,cAAc;AACvB,uBAAe"}

package/dist/list/listText.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/list/listText.d.ts
 /** Displays text within the ListItem. */

package/dist/list/listText.d.ts.map

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

package/dist/list/listText.js

@@ -1,2 +1,28 @@
-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{useListContext 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(`List`,a());return o(i,{className:e(`vui-listText`,c),fontSize:`inherit`,ref:s,...t,...u.text,...l})});s.displayName=`ListText`;var c=s;export{s as ListText,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 { useListContext } from "./context.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/list/listText.tsx
+/** Displays text within the ListItem. */
+const ListText = vui((props, ref) => {
+	const { className,...rest } = props;
+	const styles = useStyleConfig("List", useListContext());
+	return /* @__PURE__ */ jsx(t_default, {
+		className: cs("vui-listText", className),
+		fontSize: "inherit",
+		ref,
+		...ellipsisOverflow,
+		...styles.text,
+		...rest
+	});
+});
+ListText.displayName = "ListText";
+var listText_default = ListText;
+
+//#endregion
+export { ListText, listText_default as default };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=listText.js.map

package/dist/list/listText.js.map

@@ -1 +1 @@
-{"version":3,"file":"listText.js","names":["T"],"sources":["../../src/list/listText.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport type { TProps } from '../t'\nimport T from '../t'\nimport { cs, ellipsisOverflow } from '../utils'\nimport { useListContext } from './context'\n\n/** Displays text within the ListItem. */\nexport const ListText = vui<'span', TProps>((props, ref) => {\n  const { className, ...rest } = props\n  const styles = useStyleConfig('List', useListContext())\n\n  return (\n    <T\n      className={cs('vui-listText', className)}\n      fontSize=\"inherit\"\n      ref={ref}\n      {...ellipsisOverflow}\n      {...styles.text}\n      {...rest}\n    />\n  )\n})\n\nListText.displayName = 'ListText'\nexport default ListText\n"],"mappings":"oQAOA,MAAa,EAAW,GAAqB,EAAO,IAAQ,CAC1D,GAAM,CAAE,YAAW,GAAG,GAAS,EACzB,EAAS,EAAe,OAAQ,GAAgB,CAAC,CAEvD,OACE,EAACA,EAAAA,CACC,UAAW,EAAG,eAAgB,EAAU,CACxC,SAAS,UACJ,MACL,GAAI,EACJ,GAAI,EAAO,KACX,GAAI,GACJ,EAEJ,CAEF,EAAS,YAAc,WACvB,IAAA,EAAe"}
+{"version":3,"file":"listText.js","names":["T"],"sources":["../../src/list/listText.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport type { TProps } from '../t'\nimport T from '../t'\nimport { cs, ellipsisOverflow } from '../utils'\nimport { useListContext } from './context'\n\n/** Displays text within the ListItem. */\nexport const ListText = vui<'span', TProps>((props, ref) => {\n  const { className, ...rest } = props\n  const styles = useStyleConfig('List', useListContext())\n\n  return (\n    <T\n      className={cs('vui-listText', className)}\n      fontSize=\"inherit\"\n      ref={ref}\n      {...ellipsisOverflow}\n      {...styles.text}\n      {...rest}\n    />\n  )\n})\n\nListText.displayName = 'ListText'\nexport default ListText\n"],"mappings":";;;;;;;;;AAOA,MAAa,WAAW,KAAqB,OAAO,QAAQ;CAC1D,MAAM,EAAE,UAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,eAAe,QAAQ,gBAAgB,CAAC;AAEvD,QACE,oBAACA;EACC,WAAW,GAAG,gBAAgB,UAAU;EACxC,UAAS;EACJ;EACL,GAAI;EACJ,GAAI,OAAO;EACX,GAAI;GACJ;EAEJ;AAEF,SAAS,cAAc;AACvB,uBAAe"}