@veracity/vui 3.0.0-beta.8 → 3.0.0-beta.9

package/dist/_virtual/rolldown_runtime.js

@@ -1 +1,14 @@
-var e=Object.defineProperty,t=t=>{let n={};for(var r in t)e(n,r,{get:t[r],enumerable:!0});return n};export{t as __export};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+//#region rolldown:runtime
+var __defProp = Object.defineProperty;
+var __export = (all) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	return target;
+};
+
+//#endregion
+export { __export };
+globalThis.__vuiVersion__ = "3.0.0-beta.9"

package/dist/accordion/accordion.d.ts

@@ -3,10 +3,10 @@ import { VuiComponent } from "../core/vui.js";
 import { AccordionProps } from "./accordion.types.js";
 import { AccordionItem } from "./accordionItem.js";
 import { AccordionItemHorizontal } from "./accordionItemHorizontal.js";
-import * as styled_components3 from "styled-components";
+import * as styled_components5 from "styled-components";
 
 //#region src/accordion/accordion.d.ts
-declare const AccordionBase: styled_components3.StyledComponent<"div", styled_components3.DefaultTheme, SystemProps, never>;
+declare const AccordionBase: styled_components5.StyledComponent<"div", styled_components5.DefaultTheme, SystemProps, never>;
 /** Allows to show and hide sections of related content on a page. */
 declare const Accordion: VuiComponent<"div", AccordionProps> & {
   Item: typeof AccordionItem;

package/dist/accordion/accordion.js

@@ -1,7 +1,58 @@
-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 a from"../list/list.js";import{AccordionProvider as o}from"./context.js";import s from"./accordionItem.js";import c from"./accordionItemHorizontal.js";import{useMemo as l}from"react";import{jsx as u}from"react/jsx-runtime";const d=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_default from "../list/list.js";
+import { AccordionProvider } from "./context.js";
+import accordionItem_default from "./accordionItem.js";
+import accordionItemHorizontal_default from "./accordionItemHorizontal.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/accordion/accordion.tsx
+const AccordionBase = styled.divBox`
   display: flex;
   min-width: 0;
   transition-duration: normal;
-`,f=i((r,i)=>{let{children:f,className:p,items:m,orientation:h=`vertical`,iconPosition:g=`end`,size:_,variant:v,...y}=r,b=n(`Accordion`,r),x=l(()=>e({size:_,variant:v}),[_,v]),S=e({}),C=h===`vertical`;return u(o,{value:x,children:u(d,{borderLeft:C?void 0:`1px solid transparent
-        `,borderTop:C?`1px solid transparent`:void 0,className:t(`vui-accordion`,p),ref:i,w:`100%`,...b.container,...S,...y,children:C?u(a,{w:`100%`,children:m?m?.map?.((e,t)=>u(s,{iconPosition:g,...e},t)):f}):m?m?.map?.((e,t)=>u(c,{...e},t)):f})})});f.Item=s,f.ItemHorizontal=c,f.displayName=`Accordion`;export{f as Accordion,d as AccordionBase};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+`;
+/** Allows to show and hide sections of related content on a page. */
+const Accordion = vui((props, ref) => {
+	const { children, className, items, orientation = "vertical", iconPosition = "end", size, variant,...rest } = props;
+	const styles = useStyleConfig("Accordion", props);
+	const context = useMemo(() => filterUndefined({
+		size,
+		variant
+	}), [size, variant]);
+	const aliasedProps = filterUndefined({});
+	const isVertical = orientation === "vertical";
+	return /* @__PURE__ */ jsx(AccordionProvider, {
+		value: context,
+		children: /* @__PURE__ */ jsx(AccordionBase, {
+			borderLeft: isVertical ? void 0 : `1px solid transparent
+        `,
+			borderTop: isVertical ? `1px solid transparent` : void 0,
+			className: cs("vui-accordion", className),
+			ref,
+			w: "100%",
+			...styles.container,
+			...aliasedProps,
+			...rest,
+			children: isVertical ? /* @__PURE__ */ jsx(list_default, {
+				w: "100%",
+				children: items ? items?.map?.((item, key) => /* @__PURE__ */ jsx(accordionItem_default, {
+					iconPosition,
+					...item
+				}, key)) : children
+			}) : items ? items?.map?.((item, key) => /* @__PURE__ */ jsx(accordionItemHorizontal_default, { ...item }, key)) : children
+		})
+	});
+});
+Accordion.Item = accordionItem_default;
+Accordion.ItemHorizontal = accordionItemHorizontal_default;
+Accordion.displayName = "Accordion";
+
+//#endregion
+export { Accordion, AccordionBase };
+globalThis.__vuiVersion__ = "3.0.0-beta.9"
 //# sourceMappingURL=accordion.js.map

package/dist/accordion/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","names":["List","AccordionItem","AccordionItemHorizontal"],"sources":["../../src/accordion/accordion.tsx"],"sourcesContent":["import { 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 type { AccordionItemProps, AccordionProps } from './accordion.types'\nimport AccordionItem from './accordionItem'\nimport AccordionItemHorizontal from './accordionItemHorizontal'\nimport { AccordionProvider } from './context'\n\nexport const AccordionBase = styled.divBox`\n  display: flex;\n  min-width: 0;\n  transition-duration: normal;\n`\n\n/** Allows to show and hide sections of related content on a page. */\nexport const Accordion = vui<'div', AccordionProps>((props, ref) => {\n  const { children, className, items, orientation = 'vertical', iconPosition = 'end', size, variant, ...rest } = props\n  const styles = useStyleConfig('Accordion', props)\n  const context = useMemo(() => filterUndefined({ size, variant }), [size, variant])\n  const aliasedProps = filterUndefined<AccordionProps>({})\n  const isVertical = orientation === 'vertical'\n  return (\n    <AccordionProvider value={context}>\n      <AccordionBase\n        borderLeft={\n          isVertical\n            ? undefined\n            : `1px solid transparent\n        `\n        }\n        borderTop={isVertical ? `1px solid transparent` : undefined}\n        className={cs('vui-accordion', className)}\n        ref={ref}\n        w=\"100%\"\n        {...styles.container}\n        {...aliasedProps}\n        {...rest}\n      >\n        {isVertical ? (\n          <List w=\"100%\">\n            {items\n              ? items?.map?.((item: AccordionItemProps, key: number) => (\n                  <AccordionItem iconPosition={iconPosition} key={key} {...item} />\n                ))\n              : children}\n          </List>\n        ) : items ? (\n          items?.map?.((item: AccordionItemProps, key: number) => <AccordionItemHorizontal key={key} {...item} />)\n        ) : (\n          children\n        )}\n      </AccordionBase>\n    </AccordionProvider>\n  )\n}) as VuiComponent<'div', AccordionProps> & {\n  Item: typeof AccordionItem\n  ItemHorizontal: typeof AccordionItemHorizontal\n}\n\nAccordion.Item = AccordionItem\nAccordion.ItemHorizontal = AccordionItemHorizontal\nAccordion.displayName = 'Accordion'\n\nexport default Accordion\n"],"mappings":"qcAWA,MAAa,EAAgB,EAAO,MAAM;;;;EAO7B,EAAY,GAA4B,EAAO,IAAQ,CAClE,GAAM,CAAE,WAAU,YAAW,QAAO,cAAc,WAAY,eAAe,MAAO,OAAM,UAAS,GAAG,GAAS,EACzG,EAAS,EAAe,YAAa,EAAM,CAC3C,EAAU,MAAc,EAAgB,CAAE,OAAM,UAAS,CAAC,CAAE,CAAC,EAAM,EAAQ,CAAC,CAC5E,EAAe,EAAgC,EAAE,CAAC,CAClD,EAAa,IAAgB,WACnC,OACE,EAAC,EAAA,CAAkB,MAAO,WACxB,EAAC,EAAA,CACC,WACE,EACI,IAAA,GACA;UAGN,UAAW,EAAa,wBAA0B,IAAA,GAClD,UAAW,EAAG,gBAAiB,EAAU,CACpC,MACL,EAAE,OACF,GAAI,EAAO,UACX,GAAI,EACJ,GAAI,WAEH,EACC,EAACA,EAAAA,CAAK,EAAE,gBACL,EACG,GAAO,OAAO,EAA0B,IACtC,EAACC,EAAAA,CAA4B,eAAwB,GAAI,GAAT,EAAiB,CACjE,CACF,GACC,CACL,EACF,GAAO,OAAO,EAA0B,IAAgB,EAACC,EAAAA,CAAkC,GAAI,EAAA,CAAT,EAAiB,CAAC,CAExG,GAEY,EACE,EAEtB,CAKF,EAAU,KAAOD,EACjB,EAAU,eAAiBC,EAC3B,EAAU,YAAc"}
+{"version":3,"file":"accordion.js","names":["List","AccordionItem","AccordionItemHorizontal"],"sources":["../../src/accordion/accordion.tsx"],"sourcesContent":["import { 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 type { AccordionItemProps, AccordionProps } from './accordion.types'\nimport AccordionItem from './accordionItem'\nimport AccordionItemHorizontal from './accordionItemHorizontal'\nimport { AccordionProvider } from './context'\n\nexport const AccordionBase = styled.divBox`\n  display: flex;\n  min-width: 0;\n  transition-duration: normal;\n`\n\n/** Allows to show and hide sections of related content on a page. */\nexport const Accordion = vui<'div', AccordionProps>((props, ref) => {\n  const { children, className, items, orientation = 'vertical', iconPosition = 'end', size, variant, ...rest } = props\n  const styles = useStyleConfig('Accordion', props)\n  const context = useMemo(() => filterUndefined({ size, variant }), [size, variant])\n  const aliasedProps = filterUndefined<AccordionProps>({})\n  const isVertical = orientation === 'vertical'\n  return (\n    <AccordionProvider value={context}>\n      <AccordionBase\n        borderLeft={\n          isVertical\n            ? undefined\n            : `1px solid transparent\n        `\n        }\n        borderTop={isVertical ? `1px solid transparent` : undefined}\n        className={cs('vui-accordion', className)}\n        ref={ref}\n        w=\"100%\"\n        {...styles.container}\n        {...aliasedProps}\n        {...rest}\n      >\n        {isVertical ? (\n          <List w=\"100%\">\n            {items\n              ? items?.map?.((item: AccordionItemProps, key: number) => (\n                  <AccordionItem iconPosition={iconPosition} key={key} {...item} />\n                ))\n              : children}\n          </List>\n        ) : items ? (\n          items?.map?.((item: AccordionItemProps, key: number) => <AccordionItemHorizontal key={key} {...item} />)\n        ) : (\n          children\n        )}\n      </AccordionBase>\n    </AccordionProvider>\n  )\n}) as VuiComponent<'div', AccordionProps> & {\n  Item: typeof AccordionItem\n  ItemHorizontal: typeof AccordionItemHorizontal\n}\n\nAccordion.Item = AccordionItem\nAccordion.ItemHorizontal = AccordionItemHorizontal\nAccordion.displayName = 'Accordion'\n\nexport default Accordion\n"],"mappings":";;;;;;;;;;;;;AAWA,MAAa,gBAAgB,OAAO,MAAM;;;;;;AAO1C,MAAa,YAAY,KAA4B,OAAO,QAAQ;CAClE,MAAM,EAAE,UAAU,WAAW,OAAO,cAAc,YAAY,eAAe,OAAO,MAAM,QAAS,GAAG,SAAS;CAC/G,MAAM,SAAS,eAAe,aAAa,MAAM;CACjD,MAAM,UAAU,cAAc,gBAAgB;EAAE;EAAM;EAAS,CAAC,EAAE,CAAC,MAAM,QAAQ,CAAC;CAClF,MAAM,eAAe,gBAAgC,EAAE,CAAC;CACxD,MAAM,aAAa,gBAAgB;AACnC,QACE,oBAAC;EAAkB,OAAO;YACxB,oBAAC;GACC,YACE,aACI,SACA;;GAGN,WAAW,aAAa,0BAA0B;GAClD,WAAW,GAAG,iBAAiB,UAAU;GACpC;GACL,GAAE;GACF,GAAI,OAAO;GACX,GAAI;GACJ,GAAI;aAEH,aACC,oBAACA;IAAK,GAAE;cACL,QACG,OAAO,OAAO,MAA0B,QACtC,oBAACC;KAA4B;KAAwB,GAAI;OAAT,IAAiB,CACjE,GACF;KACC,GACL,QACF,OAAO,OAAO,MAA0B,QAAgB,oBAACC,mCAAkC,GAAI,QAAT,IAAiB,CAAC,GAExG;IAEY;GACE;EAEtB;AAKF,UAAU,OAAOD;AACjB,UAAU,iBAAiBC;AAC3B,UAAU,cAAc"}

package/dist/accordion/accordionItem.js

@@ -1,2 +1,87 @@
-import{cs as e}from"../utils/styles.js";import{omitThemingProps as t,useStyleConfig as n}from"../core/theme.js";import{Box as r}from"../box/box.js";import{ListItem as i}from"../list/listItem.js";import a from"./accordionItemArrow.js";import{useAccordionContext as o}from"./context.js";import{useEffect as s,useState as c}from"react";import{jsx as l,jsxs as u}from"react/jsx-runtime";const d=d=>{let{className:f,children:p,collapsed:m,content:h,disabled:g,id:_,iconPosition:v=`end`,title:y,onToggle:b,...x}=t(d),[S,C]=c(!1),w=n(`Accordion`,o());s(()=>{C(!!m)},[m]);let T=()=>{g||(b?.({id:_,collapsed:!S}),C(!S))},E=v===`start`,D=v===`end`;return u(i,{borderBottom:`1px solid transparent`,borderColor:w.item.borderColor,className:e(`vui-accordion-item`,f),color:`yellow`,disabled:g,disabledBg:w.item.disabledBg,disabledColor:w.item.disabledColor,flexDirection:`column`,h:`auto`,id:`${_}`,p:0,w:`100%`,...x,children:[u(r,{center:!0,color:`yellow`,cursor:g?`not-allowed`:`pointer`,hoverBg:g?`transparent`:S?w.item.itemTitleHoverBg:w.item.expandedItemTitleHoverBg,justifyContent:v===`start`?`initial`:`space-between`,onClick:T,px:2,w:`100%`,...w.item,children:[E&&l(r,{children:l(a,{collapsed:S,color:w.icon.color})}),l(r,{fontWeight:typeof y==`string`?`500`:`inherit`,ml:E?2:0,opacity:g?.5:1,children:y}),D&&l(r,{children:l(a,{collapsed:S,color:w.icon.color,disabled:g})})]}),!S&&l(r,{mb:2,mt:2,px:2,py:1,w:`100%`,children:p??h})]})};d.displayName=`AccordionItem`;var f=d;export{d as AccordionItem,f as default};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+import { cs } from "../utils/styles.js";
+import { omitThemingProps, useStyleConfig } from "../core/theme.js";
+import { Box } from "../box/box.js";
+import { ListItem } from "../list/listItem.js";
+import accordionItemArrow_default from "./accordionItemArrow.js";
+import { useAccordionContext } from "./context.js";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/accordion/accordionItem.tsx
+/** An accordion item. */
+const AccordionItem = (props) => {
+	const { className, children, collapsed, content, disabled, id, iconPosition = "end", title, onToggle,...rest } = omitThemingProps(props);
+	const [collapsedInternal, setIsCollapsedInternal] = useState(false);
+	const styles = useStyleConfig("Accordion", useAccordionContext());
+	useEffect(() => {
+		setIsCollapsedInternal(!!collapsed);
+	}, [collapsed]);
+	const toggle = () => {
+		if (!disabled) {
+			onToggle?.({
+				id,
+				collapsed: !collapsedInternal
+			});
+			setIsCollapsedInternal(!collapsedInternal);
+		}
+	};
+	const isIconStart = iconPosition === "start";
+	const isIconEnd = iconPosition === "end";
+	return /* @__PURE__ */ jsxs(ListItem, {
+		borderBottom: "1px solid transparent",
+		borderColor: styles.item.borderColor,
+		className: cs("vui-accordion-item", className),
+		color: "yellow",
+		disabled,
+		disabledBg: styles.item.disabledBg,
+		disabledColor: styles.item.disabledColor,
+		flexDirection: "column",
+		h: "auto",
+		id: `${id}`,
+		p: 0,
+		w: "100%",
+		...rest,
+		children: [/* @__PURE__ */ jsxs(Box, {
+			center: true,
+			color: "yellow",
+			cursor: disabled ? "not-allowed" : "pointer",
+			hoverBg: disabled ? "transparent" : collapsedInternal ? styles.item.itemTitleHoverBg : styles.item.expandedItemTitleHoverBg,
+			justifyContent: iconPosition === "start" ? "initial" : "space-between",
+			onClick: toggle,
+			px: 2,
+			w: "100%",
+			...styles.item,
+			children: [
+				isIconStart && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(accordionItemArrow_default, {
+					collapsed: collapsedInternal,
+					color: styles.icon.color
+				}) }),
+				/* @__PURE__ */ jsx(Box, {
+					fontWeight: typeof title === "string" ? "500" : "inherit",
+					ml: isIconStart ? 2 : 0,
+					opacity: disabled ? .5 : 1,
+					children: title
+				}),
+				isIconEnd && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(accordionItemArrow_default, {
+					collapsed: collapsedInternal,
+					color: styles.icon.color,
+					disabled
+				}) })
+			]
+		}), !collapsedInternal && /* @__PURE__ */ jsx(Box, {
+			mb: 2,
+			mt: 2,
+			px: 2,
+			py: 1,
+			w: "100%",
+			children: children ?? content
+		})]
+	});
+};
+AccordionItem.displayName = "AccordionItem";
+var accordionItem_default = AccordionItem;
+
+//#endregion
+export { AccordionItem, accordionItem_default as default };
+globalThis.__vuiVersion__ = "3.0.0-beta.9"
 //# sourceMappingURL=accordionItem.js.map

package/dist/accordion/accordionItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordionItem.js","names":["AccordionItemArrow"],"sources":["../../src/accordion/accordionItem.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport { Box } from '../box'\nimport { omitThemingProps, useStyleConfig } from '../core'\nimport { ListItem } from '../list'\nimport { cs } from '../utils'\nimport type { AccordionItemProps } from './accordion.types'\nimport AccordionItemArrow from './accordionItemArrow'\nimport { useAccordionContext } from './context'\n\n/** An accordion item. */\nexport const AccordionItem = (props: AccordionItemProps) => {\n  const {\n    className,\n    children,\n    collapsed,\n    content,\n    disabled,\n    id,\n    iconPosition = 'end',\n    title,\n    onToggle,\n    ...rest\n  } = omitThemingProps(props)\n  const [collapsedInternal, setIsCollapsedInternal] = useState<boolean>(false)\n  const styles = useStyleConfig('Accordion', useAccordionContext())\n\n  useEffect(() => {\n    setIsCollapsedInternal(!!collapsed)\n  }, [collapsed])\n\n  const toggle = () => {\n    if (!disabled) {\n      onToggle?.({ id, collapsed: !collapsedInternal })\n      setIsCollapsedInternal(!collapsedInternal)\n    }\n  }\n\n  const isIconStart = iconPosition === 'start'\n  const isIconEnd = iconPosition === 'end'\n\n  return (\n    <ListItem\n      borderBottom=\"1px solid transparent\"\n      borderColor={styles.item.borderColor}\n      className={cs('vui-accordion-item', className)}\n      color=\"yellow\"\n      disabled={disabled}\n      disabledBg={styles.item.disabledBg}\n      disabledColor={styles.item.disabledColor}\n      flexDirection=\"column\"\n      h=\"auto\"\n      id={`${id}`}\n      p={0}\n      w=\"100%\"\n      {...rest}\n    >\n      <Box\n        center\n        color=\"yellow\"\n        cursor={disabled ? 'not-allowed' : 'pointer'}\n        hoverBg={\n          disabled\n            ? 'transparent'\n            : collapsedInternal\n              ? styles.item.itemTitleHoverBg\n              : styles.item.expandedItemTitleHoverBg\n        }\n        justifyContent={iconPosition === 'start' ? 'initial' : 'space-between'}\n        onClick={toggle}\n        px={2}\n        w=\"100%\"\n        {...styles.item}\n      >\n        {isIconStart && (\n          <Box>\n            <AccordionItemArrow collapsed={collapsedInternal} color={styles.icon.color} />\n          </Box>\n        )}\n        <Box\n          fontWeight={typeof title === 'string' ? '500' : 'inherit'}\n          ml={isIconStart ? 2 : 0}\n          opacity={disabled ? 0.5 : 1}\n        >\n          {title}\n        </Box>\n        {isIconEnd && (\n          <Box>\n            <AccordionItemArrow collapsed={collapsedInternal} color={styles.icon.color} disabled={disabled} />\n          </Box>\n        )}\n      </Box>\n      {!collapsedInternal && (\n        <Box mb={2} mt={2} px={2} py={1} w=\"100%\">\n          {children ?? content}\n        </Box>\n      )}\n    </ListItem>\n  )\n}\n\nAccordionItem.displayName = 'AccordionItem'\n\nexport default AccordionItem\n"],"mappings":"+XAWA,MAAa,EAAiB,GAA8B,CAC1D,GAAM,CACJ,YACA,WACA,YACA,UACA,WACA,KACA,eAAe,MACf,QACA,WACA,GAAG,GACD,EAAiB,EAAM,CACrB,CAAC,EAAmB,GAA0B,EAAkB,GAAM,CACtE,EAAS,EAAe,YAAa,GAAqB,CAAC,CAEjE,MAAgB,CACd,EAAuB,CAAC,CAAC,EAAU,EAClC,CAAC,EAAU,CAAC,CAEf,IAAM,MAAe,CACd,IACH,IAAW,CAAE,KAAI,UAAW,CAAC,EAAmB,CAAC,CACjD,EAAuB,CAAC,EAAkB,GAIxC,EAAc,IAAiB,QAC/B,EAAY,IAAiB,MAEnC,OACE,EAAC,EAAA,CACC,aAAa,wBACb,YAAa,EAAO,KAAK,YACzB,UAAW,EAAG,qBAAsB,EAAU,CAC9C,MAAM,SACI,WACV,WAAY,EAAO,KAAK,WACxB,cAAe,EAAO,KAAK,cAC3B,cAAc,SACd,EAAE,OACF,GAAI,GAAG,IACP,EAAG,EACH,EAAE,OACF,GAAI,YAEJ,EAAC,EAAA,CACC,OAAA,GACA,MAAM,SACN,OAAQ,EAAW,cAAgB,UACnC,QACE,EACI,cACA,EACE,EAAO,KAAK,iBACZ,EAAO,KAAK,yBAEpB,eAAgB,IAAiB,QAAU,UAAY,gBACvD,QAAS,EACT,GAAI,EACJ,EAAE,OACF,GAAI,EAAO,eAEV,GACC,EAAC,EAAA,CAAA,SACC,EAACA,EAAAA,CAAmB,UAAW,EAAmB,MAAO,EAAO,KAAK,OAAS,CAAA,CAC1E,CAER,EAAC,EAAA,CACC,WAAY,OAAO,GAAU,SAAW,MAAQ,UAChD,GAAI,EAAc,EAAI,EACtB,QAAS,EAAW,GAAM,WAEzB,GACG,CACL,GACC,EAAC,EAAA,CAAA,SACC,EAACA,EAAAA,CAAmB,UAAW,EAAmB,MAAO,EAAO,KAAK,MAAiB,YAAY,CAAA,CAC9F,GAEJ,CACL,CAAC,GACA,EAAC,EAAA,CAAI,GAAI,EAAG,GAAI,EAAG,GAAI,EAAG,GAAI,EAAG,EAAE,gBAChC,GAAY,GACT,CAAA,EAEC,EAIf,EAAc,YAAc,gBAE5B,IAAA,EAAe"}
+{"version":3,"file":"accordionItem.js","names":["AccordionItemArrow"],"sources":["../../src/accordion/accordionItem.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport { Box } from '../box'\nimport { omitThemingProps, useStyleConfig } from '../core'\nimport { ListItem } from '../list'\nimport { cs } from '../utils'\nimport type { AccordionItemProps } from './accordion.types'\nimport AccordionItemArrow from './accordionItemArrow'\nimport { useAccordionContext } from './context'\n\n/** An accordion item. */\nexport const AccordionItem = (props: AccordionItemProps) => {\n  const {\n    className,\n    children,\n    collapsed,\n    content,\n    disabled,\n    id,\n    iconPosition = 'end',\n    title,\n    onToggle,\n    ...rest\n  } = omitThemingProps(props)\n  const [collapsedInternal, setIsCollapsedInternal] = useState<boolean>(false)\n  const styles = useStyleConfig('Accordion', useAccordionContext())\n\n  useEffect(() => {\n    setIsCollapsedInternal(!!collapsed)\n  }, [collapsed])\n\n  const toggle = () => {\n    if (!disabled) {\n      onToggle?.({ id, collapsed: !collapsedInternal })\n      setIsCollapsedInternal(!collapsedInternal)\n    }\n  }\n\n  const isIconStart = iconPosition === 'start'\n  const isIconEnd = iconPosition === 'end'\n\n  return (\n    <ListItem\n      borderBottom=\"1px solid transparent\"\n      borderColor={styles.item.borderColor}\n      className={cs('vui-accordion-item', className)}\n      color=\"yellow\"\n      disabled={disabled}\n      disabledBg={styles.item.disabledBg}\n      disabledColor={styles.item.disabledColor}\n      flexDirection=\"column\"\n      h=\"auto\"\n      id={`${id}`}\n      p={0}\n      w=\"100%\"\n      {...rest}\n    >\n      <Box\n        center\n        color=\"yellow\"\n        cursor={disabled ? 'not-allowed' : 'pointer'}\n        hoverBg={\n          disabled\n            ? 'transparent'\n            : collapsedInternal\n              ? styles.item.itemTitleHoverBg\n              : styles.item.expandedItemTitleHoverBg\n        }\n        justifyContent={iconPosition === 'start' ? 'initial' : 'space-between'}\n        onClick={toggle}\n        px={2}\n        w=\"100%\"\n        {...styles.item}\n      >\n        {isIconStart && (\n          <Box>\n            <AccordionItemArrow collapsed={collapsedInternal} color={styles.icon.color} />\n          </Box>\n        )}\n        <Box\n          fontWeight={typeof title === 'string' ? '500' : 'inherit'}\n          ml={isIconStart ? 2 : 0}\n          opacity={disabled ? 0.5 : 1}\n        >\n          {title}\n        </Box>\n        {isIconEnd && (\n          <Box>\n            <AccordionItemArrow collapsed={collapsedInternal} color={styles.icon.color} disabled={disabled} />\n          </Box>\n        )}\n      </Box>\n      {!collapsedInternal && (\n        <Box mb={2} mt={2} px={2} py={1} w=\"100%\">\n          {children ?? content}\n        </Box>\n      )}\n    </ListItem>\n  )\n}\n\nAccordionItem.displayName = 'AccordionItem'\n\nexport default AccordionItem\n"],"mappings":";;;;;;;;;;;AAWA,MAAa,iBAAiB,UAA8B;CAC1D,MAAM,EACJ,WACA,UACA,WACA,SACA,UACA,IACA,eAAe,OACf,OACA,SACA,GAAG,SACD,iBAAiB,MAAM;CAC3B,MAAM,CAAC,mBAAmB,0BAA0B,SAAkB,MAAM;CAC5E,MAAM,SAAS,eAAe,aAAa,qBAAqB,CAAC;AAEjE,iBAAgB;AACd,yBAAuB,CAAC,CAAC,UAAU;IAClC,CAAC,UAAU,CAAC;CAEf,MAAM,eAAe;AACnB,MAAI,CAAC,UAAU;AACb,cAAW;IAAE;IAAI,WAAW,CAAC;IAAmB,CAAC;AACjD,0BAAuB,CAAC,kBAAkB;;;CAI9C,MAAM,cAAc,iBAAiB;CACrC,MAAM,YAAY,iBAAiB;AAEnC,QACE,qBAAC;EACC,cAAa;EACb,aAAa,OAAO,KAAK;EACzB,WAAW,GAAG,sBAAsB,UAAU;EAC9C,OAAM;EACI;EACV,YAAY,OAAO,KAAK;EACxB,eAAe,OAAO,KAAK;EAC3B,eAAc;EACd,GAAE;EACF,IAAI,GAAG;EACP,GAAG;EACH,GAAE;EACF,GAAI;aAEJ,qBAAC;GACC;GACA,OAAM;GACN,QAAQ,WAAW,gBAAgB;GACnC,SACE,WACI,gBACA,oBACE,OAAO,KAAK,mBACZ,OAAO,KAAK;GAEpB,gBAAgB,iBAAiB,UAAU,YAAY;GACvD,SAAS;GACT,IAAI;GACJ,GAAE;GACF,GAAI,OAAO;;IAEV,eACC,oBAAC,iBACC,oBAACA;KAAmB,WAAW;KAAmB,OAAO,OAAO,KAAK;MAAS,GAC1E;IAER,oBAAC;KACC,YAAY,OAAO,UAAU,WAAW,QAAQ;KAChD,IAAI,cAAc,IAAI;KACtB,SAAS,WAAW,KAAM;eAEzB;MACG;IACL,aACC,oBAAC,iBACC,oBAACA;KAAmB,WAAW;KAAmB,OAAO,OAAO,KAAK;KAAiB;MAAY,GAC9F;;IAEJ,EACL,CAAC,qBACA,oBAAC;GAAI,IAAI;GAAG,IAAI;GAAG,IAAI;GAAG,IAAI;GAAG,GAAE;aAChC,YAAY;IACT;GAEC;;AAIf,cAAc,cAAc;AAE5B,4BAAe"}

package/dist/accordion/accordionItemArrow.js

@@ -1,2 +1,28 @@
-import e from"../icon/icon.js";import{memo as t}from"react";import{jsx as n}from"react/jsx-runtime";const r={horizontal:{collapsed:`falChevronRight`,expanded:`falChevronLeft`},vertical:{collapsed:`falChevronDown`,expanded:`falChevronUp`}};var i=t(({collapsed:t,color:i=`sandstone.10`,disabled:a=!1,orientation:o=`vertical`,...s})=>n(e,{name:r[o][t?`collapsed`:`expanded`],opacity:a?.5:1,pathFill:i,size:`sm`,...s}));export{i as default};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+import icon_default from "../icon/icon.js";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/accordion/accordionItemArrow.tsx
+const names = {
+	horizontal: {
+		collapsed: "falChevronRight",
+		expanded: "falChevronLeft"
+	},
+	vertical: {
+		collapsed: "falChevronDown",
+		expanded: "falChevronUp"
+	}
+};
+const AccordionItemArrow = ({ collapsed, color = "sandstone.10", disabled = false, orientation = "vertical",...rest }) => /* @__PURE__ */ jsx(icon_default, {
+	name: names[orientation][collapsed ? "collapsed" : "expanded"],
+	opacity: disabled ? .5 : 1,
+	pathFill: color,
+	size: "sm",
+	...rest
+});
+var accordionItemArrow_default = memo(AccordionItemArrow);
+
+//#endregion
+export { accordionItemArrow_default as default };
+globalThis.__vuiVersion__ = "3.0.0-beta.9"
 //# sourceMappingURL=accordionItemArrow.js.map

package/dist/accordion/accordionItemArrow.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordionItemArrow.js","names":["Icon"],"sources":["../../src/accordion/accordionItemArrow.tsx"],"sourcesContent":["import { memo } from 'react'\n\nimport Icon from '../icon'\nimport type { AccordionItemArrowProps } from './accordion.types'\n\nconst names = {\n  horizontal: {\n    collapsed: 'falChevronRight',\n    expanded: 'falChevronLeft',\n  },\n  vertical: {\n    collapsed: 'falChevronDown',\n    expanded: 'falChevronUp',\n  },\n}\n\nconst AccordionItemArrow = ({\n  collapsed,\n  color = 'sandstone.10',\n  disabled = false,\n  orientation = 'vertical',\n  ...rest\n}: AccordionItemArrowProps) => (\n  <Icon\n    name={names[orientation][collapsed ? 'collapsed' : 'expanded']}\n    opacity={disabled ? 0.5 : 1}\n    pathFill={color}\n    size=\"sm\"\n    {...rest}\n  />\n)\n\nexport default memo(AccordionItemArrow)\n"],"mappings":"oGAKA,MAAM,EAAQ,CACZ,WAAY,CACV,UAAW,kBACX,SAAU,iBACX,CACD,SAAU,CACR,UAAW,iBACX,SAAU,eACX,CACF,CAkBD,IAAA,EAAe,GAhBa,CAC1B,YACA,QAAQ,eACR,WAAW,GACX,cAAc,WACd,GAAG,KAEH,EAACA,EAAAA,CACC,KAAM,EAAM,GAAa,EAAY,YAAc,YACnD,QAAS,EAAW,GAAM,EAC1B,SAAU,EACV,KAAK,KACL,GAAI,GACJ,CAGmC"}
+{"version":3,"file":"accordionItemArrow.js","names":["Icon"],"sources":["../../src/accordion/accordionItemArrow.tsx"],"sourcesContent":["import { memo } from 'react'\n\nimport Icon from '../icon'\nimport type { AccordionItemArrowProps } from './accordion.types'\n\nconst names = {\n  horizontal: {\n    collapsed: 'falChevronRight',\n    expanded: 'falChevronLeft',\n  },\n  vertical: {\n    collapsed: 'falChevronDown',\n    expanded: 'falChevronUp',\n  },\n}\n\nconst AccordionItemArrow = ({\n  collapsed,\n  color = 'sandstone.10',\n  disabled = false,\n  orientation = 'vertical',\n  ...rest\n}: AccordionItemArrowProps) => (\n  <Icon\n    name={names[orientation][collapsed ? 'collapsed' : 'expanded']}\n    opacity={disabled ? 0.5 : 1}\n    pathFill={color}\n    size=\"sm\"\n    {...rest}\n  />\n)\n\nexport default memo(AccordionItemArrow)\n"],"mappings":";;;;;AAKA,MAAM,QAAQ;CACZ,YAAY;EACV,WAAW;EACX,UAAU;EACX;CACD,UAAU;EACR,WAAW;EACX,UAAU;EACX;CACF;AAED,MAAM,sBAAsB,EAC1B,WACA,QAAQ,gBACR,WAAW,OACX,cAAc,WACd,GAAG,WAEH,oBAACA;CACC,MAAM,MAAM,aAAa,YAAY,cAAc;CACnD,SAAS,WAAW,KAAM;CAC1B,UAAU;CACV,MAAK;CACL,GAAI;EACJ;AAGJ,iCAAe,KAAK,mBAAmB"}

package/dist/accordion/accordionItemHorizontal.js

@@ -1,2 +1,91 @@
-import{cs as e}from"../utils/styles.js";import{omitThemingProps as t,useStyleConfig as n}from"../core/theme.js";import r from"../box/box.js";import i from"./accordionItemArrow.js";import{useAccordionContext as a}from"./context.js";import{useEffect as o,useState as s}from"react";import{jsx as c,jsxs as l}from"react/jsx-runtime";const u=u=>{let{className:d,children:f,collapsed:p,content:m,disabled:h,id:g,contentPx:_,title:v,onToggle:y,...b}=t(u),[x,S]=s(!1),C=n(`Accordion`,a());o(()=>{S(!!p)},[p]);let w=()=>{h||(y?.({id:g,collapsed:!x}),S(!x))},T=h?`not-allowed`:`pointer`,E=typeof v==`string`?`500`:`inherit`,D=_||C.itemHorizontal.space;return l(r,{alignItems:x?`normal`:`baseline`,bg:h?`disabled.bg`:void 0,borderRight:`1px solid transparent`,className:e(`vui-accordion-item-horizontal`,d),color:h?`disabled.color`:void 0,column:!0,cursor:h?`not-allowed`:void 0,id:`${g}`,maxW:x?C.item.minH:`auto`,minW:C.item.minH,transitionDuration:`0ms`,userSelect:h?`none`:void 0,...C.item,p:0,...b,children:[l(r,{cursor:T,hoverBg:h?`transparent`:x?C.item.itemTitleHoverBg:C.item.expandedItemTitleHoverBg,justifyContent:`space-between`,minH:C.item.minH,onClick:w,p:C.itemHorizontal.space,w:`100%`,children:[!x&&c(r,{fontWeight:E,opacity:h?.5:1,children:v}),c(i,{collapsed:x,color:C.icon.color,disabled:h,orientation:`horizontal`})]}),x?c(r,{cursor:T,flexDirection:`row-reverse`,fontWeight:E,mb:C.item.minH,mt:C.itemHorizontal.space,onClick:w,transform:`rotate(-90deg)`,transitionDuration:`0ms`,whiteSpace:`nowrap`,children:v}):c(r,{p:C.itemHorizontal.space,pt:0,px:D,transitionDuration:`0ms`,w:1,children:f??m})]})};u.displayName=`AccordionItemHorizontal`;var d=u;export{u as AccordionItemHorizontal,d as default};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+import { cs } from "../utils/styles.js";
+import { omitThemingProps, useStyleConfig } from "../core/theme.js";
+import box_default from "../box/box.js";
+import accordionItemArrow_default from "./accordionItemArrow.js";
+import { useAccordionContext } from "./context.js";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/accordion/accordionItemHorizontal.tsx
+/** An accordion item (horizontal AccordionOrientation). */
+const AccordionItemHorizontal = (props) => {
+	const { className, children, collapsed, content, disabled, id, contentPx, title, onToggle,...rest } = omitThemingProps(props);
+	const [collapsedInternal, setIsCollapsedInternal] = useState(false);
+	const styles = useStyleConfig("Accordion", useAccordionContext());
+	useEffect(() => {
+		setIsCollapsedInternal(!!collapsed);
+	}, [collapsed]);
+	const toggle = () => {
+		if (!disabled) {
+			onToggle?.({
+				id,
+				collapsed: !collapsedInternal
+			});
+			setIsCollapsedInternal(!collapsedInternal);
+		}
+	};
+	const cursor = disabled ? "not-allowed" : "pointer";
+	const fontWeight = typeof title === "string" ? "500" : "inherit";
+	const expandedContentPx = contentPx ? contentPx : styles.itemHorizontal.space;
+	return /* @__PURE__ */ jsxs(box_default, {
+		alignItems: collapsedInternal ? "normal" : "baseline",
+		bg: disabled ? "disabled.bg" : void 0,
+		borderRight: "1px solid transparent",
+		className: cs("vui-accordion-item-horizontal", className),
+		color: disabled ? "disabled.color" : void 0,
+		column: true,
+		cursor: disabled ? "not-allowed" : void 0,
+		id: `${id}`,
+		maxW: collapsedInternal ? styles.item.minH : "auto",
+		minW: styles.item.minH,
+		transitionDuration: "0ms",
+		userSelect: disabled ? "none" : void 0,
+		...styles.item,
+		p: 0,
+		...rest,
+		children: [/* @__PURE__ */ jsxs(box_default, {
+			cursor,
+			hoverBg: disabled ? "transparent" : collapsedInternal ? styles.item.itemTitleHoverBg : styles.item.expandedItemTitleHoverBg,
+			justifyContent: "space-between",
+			minH: styles.item.minH,
+			onClick: toggle,
+			p: styles.itemHorizontal.space,
+			w: "100%",
+			children: [!collapsedInternal && /* @__PURE__ */ jsx(box_default, {
+				fontWeight,
+				opacity: disabled ? .5 : 1,
+				children: title
+			}), /* @__PURE__ */ jsx(accordionItemArrow_default, {
+				collapsed: collapsedInternal,
+				color: styles.icon.color,
+				disabled,
+				orientation: "horizontal"
+			})]
+		}), !collapsedInternal ? /* @__PURE__ */ jsx(box_default, {
+			p: styles.itemHorizontal.space,
+			pt: 0,
+			px: expandedContentPx,
+			transitionDuration: "0ms",
+			w: 1,
+			children: children ?? content
+		}) : /* @__PURE__ */ jsx(box_default, {
+			cursor,
+			flexDirection: "row-reverse",
+			fontWeight,
+			mb: styles.item.minH,
+			mt: styles.itemHorizontal.space,
+			onClick: toggle,
+			transform: "rotate(-90deg)",
+			transitionDuration: "0ms",
+			whiteSpace: "nowrap",
+			children: title
+		})]
+	});
+};
+AccordionItemHorizontal.displayName = "AccordionItemHorizontal";
+var accordionItemHorizontal_default = AccordionItemHorizontal;
+
+//#endregion
+export { AccordionItemHorizontal, accordionItemHorizontal_default as default };
+globalThis.__vuiVersion__ = "3.0.0-beta.9"
 //# sourceMappingURL=accordionItemHorizontal.js.map

package/dist/accordion/accordionItemHorizontal.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordionItemHorizontal.js","names":["Box","AccordionItemArrow"],"sources":["../../src/accordion/accordionItemHorizontal.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport Box from '../box'\nimport { omitThemingProps, useStyleConfig } from '../core'\nimport { cs } from '../utils'\nimport type { AccordionItemProps } from './accordion.types'\nimport AccordionItemArrow from './accordionItemArrow'\nimport { useAccordionContext } from './context'\n\n/** An accordion item (horizontal AccordionOrientation). */\nexport const AccordionItemHorizontal = (props: AccordionItemProps) => {\n  const { className, children, collapsed, content, disabled, id, contentPx, title, onToggle, ...rest } =\n    omitThemingProps(props)\n  const [collapsedInternal, setIsCollapsedInternal] = useState<boolean>(false)\n\n  const styles = useStyleConfig('Accordion', useAccordionContext())\n\n  useEffect(() => {\n    setIsCollapsedInternal(!!collapsed)\n  }, [collapsed])\n\n  const toggle = () => {\n    if (!disabled) {\n      onToggle?.({ id, collapsed: !collapsedInternal })\n      setIsCollapsedInternal(!collapsedInternal)\n    }\n  }\n\n  const cursor = disabled ? 'not-allowed' : 'pointer'\n  const fontWeight = typeof title === 'string' ? '500' : 'inherit'\n\n  const expandedContentPx = contentPx ? contentPx : styles.itemHorizontal.space\n\n  return (\n    <Box\n      alignItems={collapsedInternal ? 'normal' : 'baseline'}\n      bg={disabled ? 'disabled.bg' : undefined}\n      borderRight=\"1px solid transparent\"\n      className={cs('vui-accordion-item-horizontal', className)}\n      color={disabled ? 'disabled.color' : undefined}\n      column\n      cursor={disabled ? 'not-allowed' : undefined}\n      id={`${id}`}\n      maxW={collapsedInternal ? styles.item.minH : 'auto'}\n      minW={styles.item.minH}\n      transitionDuration=\"0ms\"\n      userSelect={disabled ? 'none' : undefined}\n      {...styles.item}\n      p={0}\n      {...rest}\n    >\n      <Box\n        cursor={cursor}\n        hoverBg={\n          disabled\n            ? 'transparent'\n            : collapsedInternal\n              ? styles.item.itemTitleHoverBg\n              : styles.item.expandedItemTitleHoverBg\n        }\n        justifyContent=\"space-between\"\n        minH={styles.item.minH}\n        onClick={toggle}\n        p={styles.itemHorizontal.space}\n        w=\"100%\"\n      >\n        {!collapsedInternal && (\n          <Box fontWeight={fontWeight} opacity={disabled ? 0.5 : 1}>\n            {title}\n          </Box>\n        )}\n        <AccordionItemArrow\n          collapsed={collapsedInternal}\n          color={styles.icon.color}\n          disabled={disabled}\n          orientation=\"horizontal\"\n        />\n      </Box>\n\n      {!collapsedInternal ? (\n        <Box p={styles.itemHorizontal.space} pt={0} px={expandedContentPx} transitionDuration=\"0ms\" w={1}>\n          {children ?? content}\n        </Box>\n      ) : (\n        <Box\n          cursor={cursor}\n          flexDirection=\"row-reverse\"\n          fontWeight={fontWeight}\n          mb={styles.item.minH}\n          mt={styles.itemHorizontal.space}\n          onClick={toggle}\n          transform=\"rotate(-90deg)\"\n          transitionDuration=\"0ms\"\n          whiteSpace=\"nowrap\"\n        >\n          {title}\n        </Box>\n      )}\n    </Box>\n  )\n}\n\nAccordionItemHorizontal.displayName = 'AccordionItemHorizontal'\n\nexport default AccordionItemHorizontal\n"],"mappings":"yUAUA,MAAa,EAA2B,GAA8B,CACpE,GAAM,CAAE,YAAW,WAAU,YAAW,UAAS,WAAU,KAAI,YAAW,QAAO,WAAU,GAAG,GAC5F,EAAiB,EAAM,CACnB,CAAC,EAAmB,GAA0B,EAAkB,GAAM,CAEtE,EAAS,EAAe,YAAa,GAAqB,CAAC,CAEjE,MAAgB,CACd,EAAuB,CAAC,CAAC,EAAU,EAClC,CAAC,EAAU,CAAC,CAEf,IAAM,MAAe,CACd,IACH,IAAW,CAAE,KAAI,UAAW,CAAC,EAAmB,CAAC,CACjD,EAAuB,CAAC,EAAkB,GAIxC,EAAS,EAAW,cAAgB,UACpC,EAAa,OAAO,GAAU,SAAW,MAAQ,UAEjD,EAAoB,GAAwB,EAAO,eAAe,MAExE,OACE,EAACA,EAAAA,CACC,WAAY,EAAoB,SAAW,WAC3C,GAAI,EAAW,cAAgB,IAAA,GAC/B,YAAY,wBACZ,UAAW,EAAG,gCAAiC,EAAU,CACzD,MAAO,EAAW,iBAAmB,IAAA,GACrC,OAAA,GACA,OAAQ,EAAW,cAAgB,IAAA,GACnC,GAAI,GAAG,IACP,KAAM,EAAoB,EAAO,KAAK,KAAO,OAC7C,KAAM,EAAO,KAAK,KAClB,mBAAmB,MACnB,WAAY,EAAW,OAAS,IAAA,GAChC,GAAI,EAAO,KACX,EAAG,EACH,GAAI,YAEJ,EAACA,EAAAA,CACS,SACR,QACE,EACI,cACA,EACE,EAAO,KAAK,iBACZ,EAAO,KAAK,yBAEpB,eAAe,gBACf,KAAM,EAAO,KAAK,KAClB,QAAS,EACT,EAAG,EAAO,eAAe,MACzB,EAAE,iBAED,CAAC,GACA,EAACA,EAAAA,CAAgB,aAAY,QAAS,EAAW,GAAM,WACpD,GACG,CAER,EAACC,EAAAA,CACC,UAAW,EACX,MAAO,EAAO,KAAK,MACT,WACV,YAAY,cACZ,CAAA,EACE,CAEJ,EAKA,EAACD,EAAAA,CACS,SACR,cAAc,cACF,aACZ,GAAI,EAAO,KAAK,KAChB,GAAI,EAAO,eAAe,MAC1B,QAAS,EACT,UAAU,iBACV,mBAAmB,MACnB,WAAW,kBAEV,GACG,CAhBN,EAACA,EAAAA,CAAI,EAAG,EAAO,eAAe,MAAO,GAAI,EAAG,GAAI,EAAmB,mBAAmB,MAAM,EAAG,WAC5F,GAAY,GACT,CAcA,EAEJ,EAIV,EAAwB,YAAc,0BAEtC,IAAA,EAAe"}
+{"version":3,"file":"accordionItemHorizontal.js","names":["Box","AccordionItemArrow"],"sources":["../../src/accordion/accordionItemHorizontal.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport Box from '../box'\nimport { omitThemingProps, useStyleConfig } from '../core'\nimport { cs } from '../utils'\nimport type { AccordionItemProps } from './accordion.types'\nimport AccordionItemArrow from './accordionItemArrow'\nimport { useAccordionContext } from './context'\n\n/** An accordion item (horizontal AccordionOrientation). */\nexport const AccordionItemHorizontal = (props: AccordionItemProps) => {\n  const { className, children, collapsed, content, disabled, id, contentPx, title, onToggle, ...rest } =\n    omitThemingProps(props)\n  const [collapsedInternal, setIsCollapsedInternal] = useState<boolean>(false)\n\n  const styles = useStyleConfig('Accordion', useAccordionContext())\n\n  useEffect(() => {\n    setIsCollapsedInternal(!!collapsed)\n  }, [collapsed])\n\n  const toggle = () => {\n    if (!disabled) {\n      onToggle?.({ id, collapsed: !collapsedInternal })\n      setIsCollapsedInternal(!collapsedInternal)\n    }\n  }\n\n  const cursor = disabled ? 'not-allowed' : 'pointer'\n  const fontWeight = typeof title === 'string' ? '500' : 'inherit'\n\n  const expandedContentPx = contentPx ? contentPx : styles.itemHorizontal.space\n\n  return (\n    <Box\n      alignItems={collapsedInternal ? 'normal' : 'baseline'}\n      bg={disabled ? 'disabled.bg' : undefined}\n      borderRight=\"1px solid transparent\"\n      className={cs('vui-accordion-item-horizontal', className)}\n      color={disabled ? 'disabled.color' : undefined}\n      column\n      cursor={disabled ? 'not-allowed' : undefined}\n      id={`${id}`}\n      maxW={collapsedInternal ? styles.item.minH : 'auto'}\n      minW={styles.item.minH}\n      transitionDuration=\"0ms\"\n      userSelect={disabled ? 'none' : undefined}\n      {...styles.item}\n      p={0}\n      {...rest}\n    >\n      <Box\n        cursor={cursor}\n        hoverBg={\n          disabled\n            ? 'transparent'\n            : collapsedInternal\n              ? styles.item.itemTitleHoverBg\n              : styles.item.expandedItemTitleHoverBg\n        }\n        justifyContent=\"space-between\"\n        minH={styles.item.minH}\n        onClick={toggle}\n        p={styles.itemHorizontal.space}\n        w=\"100%\"\n      >\n        {!collapsedInternal && (\n          <Box fontWeight={fontWeight} opacity={disabled ? 0.5 : 1}>\n            {title}\n          </Box>\n        )}\n        <AccordionItemArrow\n          collapsed={collapsedInternal}\n          color={styles.icon.color}\n          disabled={disabled}\n          orientation=\"horizontal\"\n        />\n      </Box>\n\n      {!collapsedInternal ? (\n        <Box p={styles.itemHorizontal.space} pt={0} px={expandedContentPx} transitionDuration=\"0ms\" w={1}>\n          {children ?? content}\n        </Box>\n      ) : (\n        <Box\n          cursor={cursor}\n          flexDirection=\"row-reverse\"\n          fontWeight={fontWeight}\n          mb={styles.item.minH}\n          mt={styles.itemHorizontal.space}\n          onClick={toggle}\n          transform=\"rotate(-90deg)\"\n          transitionDuration=\"0ms\"\n          whiteSpace=\"nowrap\"\n        >\n          {title}\n        </Box>\n      )}\n    </Box>\n  )\n}\n\nAccordionItemHorizontal.displayName = 'AccordionItemHorizontal'\n\nexport default AccordionItemHorizontal\n"],"mappings":";;;;;;;;;;AAUA,MAAa,2BAA2B,UAA8B;CACpE,MAAM,EAAE,WAAW,UAAU,WAAW,SAAS,UAAU,IAAI,WAAW,OAAO,SAAU,GAAG,SAC5F,iBAAiB,MAAM;CACzB,MAAM,CAAC,mBAAmB,0BAA0B,SAAkB,MAAM;CAE5E,MAAM,SAAS,eAAe,aAAa,qBAAqB,CAAC;AAEjE,iBAAgB;AACd,yBAAuB,CAAC,CAAC,UAAU;IAClC,CAAC,UAAU,CAAC;CAEf,MAAM,eAAe;AACnB,MAAI,CAAC,UAAU;AACb,cAAW;IAAE;IAAI,WAAW,CAAC;IAAmB,CAAC;AACjD,0BAAuB,CAAC,kBAAkB;;;CAI9C,MAAM,SAAS,WAAW,gBAAgB;CAC1C,MAAM,aAAa,OAAO,UAAU,WAAW,QAAQ;CAEvD,MAAM,oBAAoB,YAAY,YAAY,OAAO,eAAe;AAExE,QACE,qBAACA;EACC,YAAY,oBAAoB,WAAW;EAC3C,IAAI,WAAW,gBAAgB;EAC/B,aAAY;EACZ,WAAW,GAAG,iCAAiC,UAAU;EACzD,OAAO,WAAW,mBAAmB;EACrC;EACA,QAAQ,WAAW,gBAAgB;EACnC,IAAI,GAAG;EACP,MAAM,oBAAoB,OAAO,KAAK,OAAO;EAC7C,MAAM,OAAO,KAAK;EAClB,oBAAmB;EACnB,YAAY,WAAW,SAAS;EAChC,GAAI,OAAO;EACX,GAAG;EACH,GAAI;aAEJ,qBAACA;GACS;GACR,SACE,WACI,gBACA,oBACE,OAAO,KAAK,mBACZ,OAAO,KAAK;GAEpB,gBAAe;GACf,MAAM,OAAO,KAAK;GAClB,SAAS;GACT,GAAG,OAAO,eAAe;GACzB,GAAE;cAED,CAAC,qBACA,oBAACA;IAAgB;IAAY,SAAS,WAAW,KAAM;cACpD;KACG,EAER,oBAACC;IACC,WAAW;IACX,OAAO,OAAO,KAAK;IACT;IACV,aAAY;KACZ;IACE,EAEL,CAAC,oBACA,oBAACD;GAAI,GAAG,OAAO,eAAe;GAAO,IAAI;GAAG,IAAI;GAAmB,oBAAmB;GAAM,GAAG;aAC5F,YAAY;IACT,GAEN,oBAACA;GACS;GACR,eAAc;GACF;GACZ,IAAI,OAAO,KAAK;GAChB,IAAI,OAAO,eAAe;GAC1B,SAAS;GACT,WAAU;GACV,oBAAmB;GACnB,YAAW;aAEV;IACG;GAEJ;;AAIV,wBAAwB,cAAc;AAEtC,sCAAe"}

package/dist/accordion/context.js

@@ -1,2 +1,9 @@
-import{createContext as e}from"../utils/react.js";const[t,n]=e({isOptional:!0});export{t as AccordionProvider,n as useAccordionContext};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+import { createContext } from "../utils/react.js";
+
+//#region src/accordion/context.ts
+const [AccordionProvider, useAccordionContext] = createContext({ isOptional: true });
+
+//#endregion
+export { AccordionProvider, useAccordionContext };
+globalThis.__vuiVersion__ = "3.0.0-beta.9"
 //# sourceMappingURL=context.js.map

package/dist/accordion/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../src/accordion/context.ts"],"sourcesContent":["import type { Dict } from '../utils'\nimport { createContext } from '../utils'\n\nconst [AccordionProvider, useAccordionContext] = createContext<Dict>({ isOptional: true })\n\nexport { AccordionProvider, useAccordionContext }\n"],"mappings":"kDAGA,KAAM,CAAC,EAAmB,GAAuB,EAAoB,CAAE,WAAY,GAAM,CAAC"}
+{"version":3,"file":"context.js","names":[],"sources":["../../src/accordion/context.ts"],"sourcesContent":["import type { Dict } from '../utils'\nimport { createContext } from '../utils'\n\nconst [AccordionProvider, useAccordionContext] = createContext<Dict>({ isOptional: true })\n\nexport { AccordionProvider, useAccordionContext }\n"],"mappings":";;;AAGA,MAAM,CAAC,mBAAmB,uBAAuB,cAAoB,EAAE,YAAY,MAAM,CAAC"}

package/dist/accordion/theme.js

@@ -1,2 +1,59 @@
-var e={baseStyle:{},defaultProps:{size:`md`,variant:`light`},sizes:{sm:{item:{minH:`32px`},itemHorizontal:{space:`8px`}},md:{item:{minH:`40px`},itemHorizontal:{space:`12px`}},lg:{item:{minH:`48px`},itemHorizontal:{space:`14px`}}},variants:{light:{container:{bg:`white`,borderColor:`sandstone.main`},item:{borderColor:`sandstone.main`,itemTitleHoverBg:`skyBlue.95`,expandedItemTitleHoverBg:`skyBlue.90`},icon:{color:`sandstone.10`}},dark:{container:{bg:`darkBlue.main`,borderColor:`white`,color:`white`},item:{borderColor:`white`,disabledBg:`transparent`,itemTitleHoverBg:`seaBlue.35`,expandedItemTitleHoverBg:`seaBlue.25`},icon:{color:`digiGreen.main`}}}};export{e as default};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+//#region src/accordion/theme.ts
+const baseStyle = {};
+const defaultProps = {
+	size: "md",
+	variant: "light"
+};
+const sizes = {
+	sm: {
+		item: { minH: "32px" },
+		itemHorizontal: { space: "8px" }
+	},
+	md: {
+		item: { minH: "40px" },
+		itemHorizontal: { space: "12px" }
+	},
+	lg: {
+		item: { minH: "48px" },
+		itemHorizontal: { space: "14px" }
+	}
+};
+const variants = {
+	light: {
+		container: {
+			bg: "white",
+			borderColor: "sandstone.main"
+		},
+		item: {
+			borderColor: "sandstone.main",
+			itemTitleHoverBg: "skyBlue.95",
+			expandedItemTitleHoverBg: "skyBlue.90"
+		},
+		icon: { color: "sandstone.10" }
+	},
+	dark: {
+		container: {
+			bg: "darkBlue.main",
+			borderColor: "white",
+			color: "white"
+		},
+		item: {
+			borderColor: "white",
+			disabledBg: "transparent",
+			itemTitleHoverBg: "seaBlue.35",
+			expandedItemTitleHoverBg: "seaBlue.25"
+		},
+		icon: { color: "digiGreen.main" }
+	}
+};
+var theme_default = {
+	baseStyle,
+	defaultProps,
+	sizes,
+	variants
+};
+
+//#endregion
+export { theme_default as default };
+globalThis.__vuiVersion__ = "3.0.0-beta.9"
 //# sourceMappingURL=theme.js.map

package/dist/accordion/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","names":[],"sources":["../../src/accordion/theme.ts"],"sourcesContent":["const baseStyle = {}\n\nconst defaultProps = {\n  size: 'md',\n  variant: 'light',\n}\n\nconst sizes = {\n  sm: {\n    item: {\n      minH: '32px',\n    },\n    itemHorizontal: {\n      space: '8px',\n    },\n  },\n  md: {\n    item: {\n      minH: '40px',\n    },\n    itemHorizontal: {\n      space: '12px',\n    },\n  },\n  lg: {\n    item: {\n      minH: '48px',\n    },\n    itemHorizontal: {\n      space: '14px',\n    },\n  },\n}\n\nconst variants = {\n  light: {\n    container: {\n      bg: 'white',\n      borderColor: 'sandstone.main',\n    },\n    item: {\n      borderColor: 'sandstone.main',\n      itemTitleHoverBg: 'skyBlue.95',\n      expandedItemTitleHoverBg: 'skyBlue.90',\n    },\n    icon: {\n      color: 'sandstone.10',\n    },\n  },\n  dark: {\n    container: {\n      bg: 'darkBlue.main',\n      borderColor: 'white',\n      color: 'white',\n    },\n    item: {\n      borderColor: 'white',\n      disabledBg: 'transparent',\n      itemTitleHoverBg: 'seaBlue.35',\n      expandedItemTitleHoverBg: 'seaBlue.25',\n    },\n    icon: {\n      color: 'digiGreen.main',\n    },\n  },\n}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  sizes,\n  variants,\n}\n"],"mappings":"AAmEA,IAAA,EAAe,CACb,UApEgB,EAAE,CAqElB,aAnEmB,CACnB,KAAM,KACN,QAAS,QACV,CAiEC,MA/DY,CACZ,GAAI,CACF,KAAM,CACJ,KAAM,OACP,CACD,eAAgB,CACd,MAAO,MACR,CACF,CACD,GAAI,CACF,KAAM,CACJ,KAAM,OACP,CACD,eAAgB,CACd,MAAO,OACR,CACF,CACD,GAAI,CACF,KAAM,CACJ,KAAM,OACP,CACD,eAAgB,CACd,MAAO,OACR,CACF,CACF,CAuCC,SArCe,CACf,MAAO,CACL,UAAW,CACT,GAAI,QACJ,YAAa,iBACd,CACD,KAAM,CACJ,YAAa,iBACb,iBAAkB,aAClB,yBAA0B,aAC3B,CACD,KAAM,CACJ,MAAO,eACR,CACF,CACD,KAAM,CACJ,UAAW,CACT,GAAI,gBACJ,YAAa,QACb,MAAO,QACR,CACD,KAAM,CACJ,YAAa,QACb,WAAY,cACZ,iBAAkB,aAClB,yBAA0B,aAC3B,CACD,KAAM,CACJ,MAAO,iBACR,CACF,CACF,CAOA"}
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/accordion/theme.ts"],"sourcesContent":["const baseStyle = {}\n\nconst defaultProps = {\n  size: 'md',\n  variant: 'light',\n}\n\nconst sizes = {\n  sm: {\n    item: {\n      minH: '32px',\n    },\n    itemHorizontal: {\n      space: '8px',\n    },\n  },\n  md: {\n    item: {\n      minH: '40px',\n    },\n    itemHorizontal: {\n      space: '12px',\n    },\n  },\n  lg: {\n    item: {\n      minH: '48px',\n    },\n    itemHorizontal: {\n      space: '14px',\n    },\n  },\n}\n\nconst variants = {\n  light: {\n    container: {\n      bg: 'white',\n      borderColor: 'sandstone.main',\n    },\n    item: {\n      borderColor: 'sandstone.main',\n      itemTitleHoverBg: 'skyBlue.95',\n      expandedItemTitleHoverBg: 'skyBlue.90',\n    },\n    icon: {\n      color: 'sandstone.10',\n    },\n  },\n  dark: {\n    container: {\n      bg: 'darkBlue.main',\n      borderColor: 'white',\n      color: 'white',\n    },\n    item: {\n      borderColor: 'white',\n      disabledBg: 'transparent',\n      itemTitleHoverBg: 'seaBlue.35',\n      expandedItemTitleHoverBg: 'seaBlue.25',\n    },\n    icon: {\n      color: 'digiGreen.main',\n    },\n  },\n}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  sizes,\n  variants,\n}\n"],"mappings":";AAAA,MAAM,YAAY,EAAE;AAEpB,MAAM,eAAe;CACnB,MAAM;CACN,SAAS;CACV;AAED,MAAM,QAAQ;CACZ,IAAI;EACF,MAAM,EACJ,MAAM,QACP;EACD,gBAAgB,EACd,OAAO,OACR;EACF;CACD,IAAI;EACF,MAAM,EACJ,MAAM,QACP;EACD,gBAAgB,EACd,OAAO,QACR;EACF;CACD,IAAI;EACF,MAAM,EACJ,MAAM,QACP;EACD,gBAAgB,EACd,OAAO,QACR;EACF;CACF;AAED,MAAM,WAAW;CACf,OAAO;EACL,WAAW;GACT,IAAI;GACJ,aAAa;GACd;EACD,MAAM;GACJ,aAAa;GACb,kBAAkB;GAClB,0BAA0B;GAC3B;EACD,MAAM,EACJ,OAAO,gBACR;EACF;CACD,MAAM;EACJ,WAAW;GACT,IAAI;GACJ,aAAa;GACb,OAAO;GACR;EACD,MAAM;GACJ,aAAa;GACb,YAAY;GACZ,kBAAkB;GAClB,0BAA0B;GAC3B;EACD,MAAM,EACJ,OAAO,kBACR;EACF;CACF;AAED,oBAAe;CACb;CACA;CACA;CACA;CACD"}

package/dist/avatar/avatar.d.ts

@@ -1,10 +1,10 @@
 import { SystemProps } from "../system/system.js";
 import { VuiComponent } from "../core/vui.js";
 import { AvatarProps } from "./avatar.types.js";
-import * as styled_components5 from "styled-components";
+import * as styled_components7 from "styled-components";
 
 //#region src/avatar/avatar.d.ts
-declare const AvatarBase: styled_components5.StyledComponent<"span", styled_components5.DefaultTheme, SystemProps, never>;
+declare const AvatarBase: styled_components7.StyledComponent<"span", styled_components7.DefaultTheme, SystemProps, never>;
 /** Displays user data, such as name initials or profile image. */
 declare const Avatar: VuiComponent<"span", AvatarProps>;
 //#endregion

package/dist/avatar/avatar.js

@@ -1,4 +1,17 @@
-import{filterUndefined as e}from"../utils/object.js";import{cs as t}from"../utils/styles.js";import{omitThemingProps as n,useStyleConfig as r}from"../core/theme.js";import{styled as i}from"../core/styled.js";import{vui as a}from"../core/vui.js";import o from"../icon/icon.js";import s from"../image/image.js";import{loadImageUrl as c}from"../utils/images.js";import{defaultGetInitials as l}from"./helpers.js";import{useEffect as u,useState as d}from"react";import{Fragment as f,jsx as p}from"react/jsx-runtime";const m=i.spanBox`
+import { filterUndefined } from "../utils/object.js";
+import { cs } from "../utils/styles.js";
+import { omitThemingProps, useStyleConfig } from "../core/theme.js";
+import { styled } from "../core/styled.js";
+import { vui } from "../core/vui.js";
+import icon_default from "../icon/icon.js";
+import image_default from "../image/image.js";
+import { loadImageUrl } from "../utils/images.js";
+import { defaultGetInitials } from "./helpers.js";
+import { useEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+
+//#region src/avatar/avatar.tsx
+const AvatarBase = styled.spanBox`
   align-items: center;
   display: inline-flex;
   flex-shrink: 0;
@@ -18,5 +31,78 @@ import{filterUndefined as e}from"../utils/object.js";import{cs as t}from"../util
     cursor: not-allowed;
     user-select: none;
   }
-`,h=a((i,a)=>{let{children:s,className:c,disabled:u,getInitials:d=l,icon:f,isInteractive:h=i.onClick!==void 0,isSquare:_,name:v=``,src:y,...b}=n(i),{activeBg:x,h:S,hoverBg:C,iconSize:w,...T}=r(`Avatar`,i),E=_?i.size===`sm`?`3px`:`6px`:`50%`,D=d(v),O=!u&&h?{cursor:`pointer`,hoverBg:C,hoverOpacity:y?.85:1,activeOpacity:y?.7:1,activeBg:x,focusRing:3,tabIndex:0,userSelect:`none`}:{},k=e({borderRadius:E,"aria-disabled":u});return p(m,{borderRadius:E,className:t(`vui-avatar`,c),h:S,ref:a,w:S,...T,...O,...k,...b,children:s||(y?p(g,{borderRadius:E,icon:f,iconSize:w,initials:D,src:y}):f?p(o,{name:f,size:w}):D||p(o,{name:`uiUser`,size:w}))})});function g({src:e,borderRadius:t,icon:n,iconSize:r,initials:i}){let[a,l]=d(!1);return u(()=>{let t=!1;return c(e).then(e=>{t||l(e)}),()=>{t=!0}},[e]),a?p(s,{borderRadius:t,src:e}):n?p(o,{name:n,size:r}):i?p(f,{children:i}):p(o,{name:`uiUser`,size:r})}h.displayName=`Avatar`;var _=h;export{h as Avatar,m as AvatarBase,_ as default};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+`;
+/** Displays user data, such as name initials or profile image. */
+const Avatar = vui((props, ref) => {
+	const { children, className, disabled, getInitials = defaultGetInitials, icon, isInteractive = props.onClick !== void 0, isSquare, name = "", src,...rest } = omitThemingProps(props);
+	const { activeBg, h, hoverBg, iconSize,...styles } = useStyleConfig("Avatar", props);
+	const borderRadius = isSquare ? props.size === "sm" ? "3px" : "6px" : "50%";
+	const initials = getInitials(name);
+	const interactiveProps = !disabled && isInteractive ? {
+		cursor: "pointer",
+		hoverBg,
+		hoverOpacity: src ? .85 : 1,
+		activeOpacity: src ? .7 : 1,
+		activeBg,
+		focusRing: 3,
+		tabIndex: 0,
+		userSelect: "none"
+	} : {};
+	const aliasedProps = filterUndefined({
+		borderRadius,
+		"aria-disabled": disabled
+	});
+	return /* @__PURE__ */ jsx(AvatarBase, {
+		borderRadius,
+		className: cs("vui-avatar", className),
+		h,
+		ref,
+		w: h,
+		...styles,
+		...interactiveProps,
+		...aliasedProps,
+		...rest,
+		children: children ? children : src ? /* @__PURE__ */ jsx(LazyImageOrDefault, {
+			borderRadius,
+			icon,
+			iconSize,
+			initials,
+			src
+		}) : icon ? /* @__PURE__ */ jsx(icon_default, {
+			name: icon,
+			size: iconSize
+		}) : initials ? initials : /* @__PURE__ */ jsx(icon_default, {
+			name: "uiUser",
+			size: iconSize
+		})
+	});
+});
+function LazyImageOrDefault({ src, borderRadius, icon, iconSize, initials }) {
+	const [imgLoaded, setImgLoaded] = useState(false);
+	useEffect(() => {
+		let cancelled = false;
+		loadImageUrl(src).then((res) => {
+			if (!cancelled) setImgLoaded(res);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [src]);
+	return imgLoaded ? /* @__PURE__ */ jsx(image_default, {
+		borderRadius,
+		src
+	}) : icon ? /* @__PURE__ */ jsx(icon_default, {
+		name: icon,
+		size: iconSize
+	}) : initials ? /* @__PURE__ */ jsx(Fragment$1, { children: initials }) : /* @__PURE__ */ jsx(icon_default, {
+		name: "uiUser",
+		size: iconSize
+	});
+}
+Avatar.displayName = "Avatar";
+var avatar_default = Avatar;
+
+//#endregion
+export { Avatar, AvatarBase, avatar_default as default };
+globalThis.__vuiVersion__ = "3.0.0-beta.9"
 //# sourceMappingURL=avatar.js.map