@veracity/vui 3.2.0 → 4.0.0-alpha.366771.2601090922

package/dist/select/selectOption.d.ts

@@ -12,4 +12,5 @@ import "../index.js";
 declare const SelectOption: VuiComponent<"li", SelectOptionProps>;
 //#endregion
 export { SelectOption };
+
 //# sourceMappingURL=selectOption.d.ts.map

package/dist/select/selectOption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selectOption.d.ts","names":[],"sources":["../../src/select/selectOption.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;AAgBA,CAAA,CAAA;cAAa,cAAY,mBAAA"}
+{"version":3,"file":"selectOption.d.ts","names":[],"sources":["../../src/select/selectOption.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;AAgBA;cAAa,cAAY,mBAAA"}

package/dist/select/selectOption.js

@@ -1,11 +1,16 @@
 import { useCallbackRef } from "../utils/react.js";
 import { cs, ellipsisOverflow } from "../utils/styles.js";
+import "../utils/index.js";
 import { useStyleConfig } from "../core/theme.js";
 import { vui } from "../core/vui.js";
+import "../core/index.js";
 import { ListItem } from "../list/listItem.js";
 import { List } from "../list/list.js";
+import "../list/index.js";
 import { Checkbox } from "../checkbox/checkbox.js";
+import "../checkbox/index.js";
 import { usePopoverContext } from "../popover/context.js";
+import "../popover/index.js";
 import { useSelectContext } from "./context.js";
 import { useEffect } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -17,12 +22,12 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 * 'onChange' is triggered with a modified click event, which adds 'value' and 'name' properties.
 */
 const SelectOption = vui((props, ref) => {
-	const { children, closeOnScroll, className, disabled, title, onClick: onClickProp, value: valueProp,...rest } = props;
-	const { instance } = usePopoverContext() ?? {};
+	const { children, closeOnScroll, className, disabled, title, onClick: onClickProp, value: valueProp, ...rest } = props;
+	const { close } = usePopoverContext() ?? {};
 	const { isMultiple, name, onChange, value } = useSelectContext() ?? {};
 	const styles = useStyleConfig("Select", useSelectContext());
 	const isSelected = Array.isArray(value) && valueProp ? value.includes(valueProp) : value === valueProp;
-	const hide = () => instance?.hide();
+	const hide = () => close?.();
 	const onClick = useCallbackRef((e) => {
 		const nativeEvent = e.nativeEvent || e;
 		const clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);
@@ -75,5 +80,5 @@ var selectOption_default = SelectOption;
 
 //#endregion
 export { SelectOption, selectOption_default as default };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=selectOption.js.map

package/dist/select/selectOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"selectOption.js","names":[],"sources":["../../src/select/selectOption.tsx"],"sourcesContent":["import { useEffect } from 'react'\n\nimport { Checkbox } from '../checkbox'\nimport { useStyleConfig, vui } from '../core'\nimport { List, ListItem } from '../list'\nimport { usePopoverContext } from '../popover'\nimport type { KeyboardEvent, MouseEvent } from '../utils'\nimport { cs, ellipsisOverflow, useCallbackRef } from '../utils'\nimport { useSelectContext } from './context'\nimport type { SelectOptionProps } from './select.types'\n\n/**\n * Displays a select option as a list item. By default, closes popover when option is selected.\n * In multi-select mode, displays a checkbox and doesn't close popover.\n * 'onChange' is triggered with a modified click event, which adds 'value' and 'name' properties.\n */\nexport const SelectOption = vui<'li', SelectOptionProps>((props, ref) => {\n  const { children, closeOnScroll, className, disabled, title, onClick: onClickProp, value: valueProp, ...rest } = props\n  const { instance } = usePopoverContext() ?? {}\n  const { isMultiple, name, onChange, value } = useSelectContext() ?? {}\n  const styles = useStyleConfig('Select', useSelectContext())\n\n  const isSelected = Array.isArray(value) && valueProp ? value.includes(valueProp) : value === valueProp\n\n  const hide = () => instance?.hide()\n\n  const onClick = useCallbackRef((e: MouseEvent<HTMLLIElement> | KeyboardEvent<HTMLLIElement>) => {\n    const nativeEvent = e.nativeEvent || e\n    const clonedEvent = new (nativeEvent.constructor as any)(nativeEvent.type, nativeEvent)\n\n    Object.defineProperty(clonedEvent, 'target', {\n      writable: true,\n      value: { value: valueProp, name },\n    })\n\n    onClickProp?.(e as MouseEvent<HTMLLIElement>)\n    onChange?.(clonedEvent)\n    !isMultiple && hide()\n  })\n\n  const onKeyDown = useCallbackRef((e: KeyboardEvent<HTMLLIElement>) => e.key === 'Enter' && onClick(e))\n\n  const onScroll = (e: Event) => !(e.target as HTMLElement)?.className?.includes('vui-allowScroll') && hide()\n\n  // Hiding the popover on scroll\n  useEffect(() => {\n    if (closeOnScroll) document.addEventListener('scroll', onScroll, true)\n\n    return () => {\n      if (closeOnScroll) document.removeEventListener('scroll', onScroll, true)\n    }\n  }, [closeOnScroll])\n\n  return (\n    <ListItem\n      activeBg=\"skyBlue.active\"\n      className={cs('vui-selectOption', className)}\n      disabled={disabled}\n      hoverBg=\"skyBlue.hover\"\n      isInteractive\n      isSelected={isSelected}\n      onClick={onClick}\n      onKeyDown={onKeyDown}\n      ref={ref}\n      selectedBg=\"skyBlue.selected\"\n      tabIndex={0}\n      title={title}\n      value={valueProp}\n      {...styles.option}\n      {...rest}\n      {...ellipsisOverflow}\n    >\n      {children ??\n        (isMultiple && (\n          <>\n            <Checkbox checked={isSelected} disabled={disabled} mr={1} {...styles.option} />\n            <List.Text>{props.text}</List.Text>\n          </>\n        ))}\n    </ListItem>\n  )\n})\n\nSelectOption.displayName = 'SelectOption'\n\nexport default SelectOption\n"],"mappings":";;;;;;;;;;;;;;;;;;AAgBA,MAAa,eAAe,KAA8B,OAAO,QAAQ;CACvE,MAAM,EAAE,UAAU,eAAe,WAAW,UAAU,OAAO,SAAS,aAAa,OAAO,UAAW,GAAG,SAAS;CACjH,MAAM,EAAE,aAAa,mBAAmB,IAAI,EAAE;CAC9C,MAAM,EAAE,YAAY,MAAM,UAAU,UAAU,kBAAkB,IAAI,EAAE;CACtE,MAAM,SAAS,eAAe,UAAU,kBAAkB,CAAC;CAE3D,MAAM,aAAa,MAAM,QAAQ,MAAM,IAAI,YAAY,MAAM,SAAS,UAAU,GAAG,UAAU;CAE7F,MAAM,aAAa,UAAU,MAAM;CAEnC,MAAM,UAAU,gBAAgB,MAAgE;EAC9F,MAAM,cAAc,EAAE,eAAe;EACrC,MAAM,cAAc,IAAK,YAAY,YAAoB,YAAY,MAAM,YAAY;AAEvF,SAAO,eAAe,aAAa,UAAU;GAC3C,UAAU;GACV,OAAO;IAAE,OAAO;IAAW;IAAM;GAClC,CAAC;AAEF,gBAAc,EAA+B;AAC7C,aAAW,YAAY;AACvB,GAAC,cAAc,MAAM;GACrB;CAEF,MAAM,YAAY,gBAAgB,MAAoC,EAAE,QAAQ,WAAW,QAAQ,EAAE,CAAC;CAEtG,MAAM,YAAY,MAAa,CAAE,EAAE,QAAwB,WAAW,SAAS,kBAAkB,IAAI,MAAM;AAG3G,iBAAgB;AACd,MAAI,cAAe,UAAS,iBAAiB,UAAU,UAAU,KAAK;AAEtE,eAAa;AACX,OAAI,cAAe,UAAS,oBAAoB,UAAU,UAAU,KAAK;;IAE1E,CAAC,cAAc,CAAC;AAEnB,QACE,oBAAC;EACC,UAAS;EACT,WAAW,GAAG,oBAAoB,UAAU;EAClC;EACV,SAAQ;EACR;EACY;EACH;EACE;EACN;EACL,YAAW;EACX,UAAU;EACH;EACP,OAAO;EACP,GAAI,OAAO;EACX,GAAI;EACJ,GAAI;YAEH,aACE,cACC,8CACE,oBAAC;GAAS,SAAS;GAAsB;GAAU,IAAI;GAAG,GAAI,OAAO;IAAU,EAC/E,oBAAC,KAAK,kBAAM,MAAM,OAAiB,IAClC;GAEE;EAEb;AAEF,aAAa,cAAc;AAE3B,2BAAe"}
+{"version":3,"file":"selectOption.js","names":[],"sources":["../../src/select/selectOption.tsx"],"sourcesContent":["import { useEffect } from 'react'\n\nimport { Checkbox } from '../checkbox'\nimport { useStyleConfig, vui } from '../core'\nimport { List, ListItem } from '../list'\nimport { usePopoverContext } from '../popover'\nimport type { KeyboardEvent, MouseEvent } from '../utils'\nimport { cs, ellipsisOverflow, useCallbackRef } from '../utils'\nimport { useSelectContext } from './context'\nimport type { SelectOptionProps } from './select.types'\n\n/**\n * Displays a select option as a list item. By default, closes popover when option is selected.\n * In multi-select mode, displays a checkbox and doesn't close popover.\n * 'onChange' is triggered with a modified click event, which adds 'value' and 'name' properties.\n */\nexport const SelectOption = vui<'li', SelectOptionProps>((props, ref) => {\n  const { children, closeOnScroll, className, disabled, title, onClick: onClickProp, value: valueProp, ...rest } = props\n  const { close } = usePopoverContext() ?? {}\n  const { isMultiple, name, onChange, value } = useSelectContext() ?? {}\n  const styles = useStyleConfig('Select', useSelectContext())\n\n  const isSelected = Array.isArray(value) && valueProp ? value.includes(valueProp) : value === valueProp\n\n  const hide = () => close?.()\n\n  const onClick = useCallbackRef((e: MouseEvent<HTMLLIElement> | KeyboardEvent<HTMLLIElement>) => {\n    const nativeEvent = e.nativeEvent || e\n    const clonedEvent = new (nativeEvent.constructor as any)(nativeEvent.type, nativeEvent)\n\n    Object.defineProperty(clonedEvent, 'target', {\n      writable: true,\n      value: { value: valueProp, name },\n    })\n\n    onClickProp?.(e as MouseEvent<HTMLLIElement>)\n    onChange?.(clonedEvent)\n    !isMultiple && hide()\n  })\n\n  const onKeyDown = useCallbackRef((e: KeyboardEvent<HTMLLIElement>) => e.key === 'Enter' && onClick(e))\n\n  const onScroll = (e: Event) => !(e.target as HTMLElement)?.className?.includes('vui-allowScroll') && hide()\n\n  // Hiding the popover on scroll\n  useEffect(() => {\n    if (closeOnScroll) document.addEventListener('scroll', onScroll, true)\n\n    return () => {\n      if (closeOnScroll) document.removeEventListener('scroll', onScroll, true)\n    }\n  }, [closeOnScroll])\n\n  return (\n    <ListItem\n      activeBg=\"skyBlue.active\"\n      className={cs('vui-selectOption', className)}\n      disabled={disabled}\n      hoverBg=\"skyBlue.hover\"\n      isInteractive\n      isSelected={isSelected}\n      onClick={onClick}\n      onKeyDown={onKeyDown}\n      ref={ref}\n      selectedBg=\"skyBlue.selected\"\n      tabIndex={0}\n      title={title}\n      value={valueProp}\n      {...styles.option}\n      {...rest}\n      {...ellipsisOverflow}\n    >\n      {children ??\n        (isMultiple && (\n          <>\n            <Checkbox checked={isSelected} disabled={disabled} mr={1} {...styles.option} />\n            <List.Text>{props.text}</List.Text>\n          </>\n        ))}\n    </ListItem>\n  )\n})\n\nSelectOption.displayName = 'SelectOption'\n\nexport default SelectOption\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAa,eAAe,KAA8B,OAAO,QAAQ;CACvE,MAAM,EAAE,UAAU,eAAe,WAAW,UAAU,OAAO,SAAS,aAAa,OAAO,WAAW,GAAG,SAAS;CACjH,MAAM,EAAE,UAAU,mBAAmB,IAAI,EAAE;CAC3C,MAAM,EAAE,YAAY,MAAM,UAAU,UAAU,kBAAkB,IAAI,EAAE;CACtE,MAAM,SAAS,eAAe,UAAU,kBAAkB,CAAC;CAE3D,MAAM,aAAa,MAAM,QAAQ,MAAM,IAAI,YAAY,MAAM,SAAS,UAAU,GAAG,UAAU;CAE7F,MAAM,aAAa,SAAS;CAE5B,MAAM,UAAU,gBAAgB,MAAgE;EAC9F,MAAM,cAAc,EAAE,eAAe;EACrC,MAAM,cAAc,IAAK,YAAY,YAAoB,YAAY,MAAM,YAAY;AAEvF,SAAO,eAAe,aAAa,UAAU;GAC3C,UAAU;GACV,OAAO;IAAE,OAAO;IAAW;IAAM;GAClC,CAAC;AAEF,gBAAc,EAA+B;AAC7C,aAAW,YAAY;AACvB,GAAC,cAAc,MAAM;GACrB;CAEF,MAAM,YAAY,gBAAgB,MAAoC,EAAE,QAAQ,WAAW,QAAQ,EAAE,CAAC;CAEtG,MAAM,YAAY,MAAa,CAAE,EAAE,QAAwB,WAAW,SAAS,kBAAkB,IAAI,MAAM;AAG3G,iBAAgB;AACd,MAAI,cAAe,UAAS,iBAAiB,UAAU,UAAU,KAAK;AAEtE,eAAa;AACX,OAAI,cAAe,UAAS,oBAAoB,UAAU,UAAU,KAAK;;IAE1E,CAAC,cAAc,CAAC;AAEnB,QACE,oBAAC;EACC,UAAS;EACT,WAAW,GAAG,oBAAoB,UAAU;EAClC;EACV,SAAQ;EACR;EACY;EACH;EACE;EACN;EACL,YAAW;EACX,UAAU;EACH;EACP,OAAO;EACP,GAAI,OAAO;EACX,GAAI;EACJ,GAAI;YAEH,aACE,cACC,8CACE,oBAAC;GAAS,SAAS;GAAsB;GAAU,IAAI;GAAG,GAAI,OAAO;IAAU,EAC/E,oBAAC,KAAK,kBAAM,MAAM,OAAiB,IAClC;GAEE;EAEb;AAEF,aAAa,cAAc;AAE3B,2BAAe"}

package/dist/select/theme.js

@@ -62,5 +62,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=theme.js.map

package/dist/select/useSelect.d.ts

@@ -14,4 +14,5 @@ declare function useSelect(props: UseSelectProps): {
 type UseSelectReturnType = ReturnType<typeof useSelect>;
 //#endregion
 export { UseSelectReturnType, getOptionText };
+
 //# sourceMappingURL=useSelect.d.ts.map

package/dist/select/useSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSelect.d.ts","names":[],"sources":["../../src/select/useSelect.tsx"],"sourcesContent":[],"mappings":";;;;;;cAOa,uBAAwB,sBAAsB,uBAAkB;;iBAOrD,SAAA,QAAiB;EAP5B,QAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAgCyB,WA5BrC,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA;EAJoC,KAAA,CAAA,YAAA,CAAA,CAAA,YAAA,CAAA,CAAA,CAAA,CAAA,CAAA,SAAA;EAAsB,SAAA,CAAA,YAAA,CAAA,CAAA,CAAA,SAAA;CAAkB;AAI5E,IAAA,CAiDW,mBAAA,CAAA,CAAA,CAAsB,UAjDjC,CAAA,MAAA,CAiDmD,SAjDnD,CAAA"}
+{"version":3,"file":"useSelect.d.ts","names":[],"sources":["../../src/select/useSelect.tsx"],"sourcesContent":[],"mappings":";;;;;;cAOa,uBAAwB,sBAAsB,uBAAkB;;iBAOrD,SAAA,QAAiB;EAP5B,QAAA,EAAA,CAAA,CAAA,EAgCyB,WA5BrC,EAAA,GAAA,IAAA;EAJoC,KAAA,aAAA,cAAA,EAAA,GAAA,SAAA;EAAsB,SAAA,aAAA,GAAA,SAAA;CAAkB;AAI5E,KAiDW,mBAAA,GAAsB,UAjDjC,CAAA,OAiDmD,SAjDnD,CAAA"}

package/dist/select/useSelect.js

@@ -1,5 +1,6 @@
 import { toggleItem } from "../utils/array.js";
 import { useCallbackRef } from "../utils/react.js";
+import "../utils/index.js";
 import { Children, isValidElement, useState } from "react";
 
 //#region src/select/useSelect.tsx
@@ -30,5 +31,5 @@ function useSelect(props) {
 
 //#endregion
 export { useSelect as default, getOptionText };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=useSelect.js.map

package/dist/select/useSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSelect.js","names":["dynamicOptions: SelectOptionData[]","option: SelectOptionData","value"],"sources":["../../src/select/useSelect.tsx"],"sourcesContent":["import { Children, isValidElement, useState } from 'react'\n\nimport type { ChangeEvent } from '../utils'\nimport { toggleItem, useCallbackRef } from '../utils'\nimport type { SelectOptionData, SelectValue } from './select.types'\nimport type { UseSelectProps } from './useSelect.types'\n\nexport const getOptionText = (value: SelectValue, options: SelectOptionData[]) => {\n  const option = options?.find((o: SelectOptionData) => o?.value === value)\n\n  return option?.text || value\n}\n\n/** Handles controlled/uncontrolled value state. Supports single and multiple values. */\nexport default function useSelect(props: UseSelectProps) {\n  const {\n    defaultValue,\n    isMultiple,\n    onChange: onChangeProp,\n    value: valueProp,\n    options = [],\n    selectedText,\n    children,\n  } = props\n\n  // Not using useControlled here, because we need custom value setter when uncontrolled\n  const [stateValue, setStateValue] = useState(defaultValue)\n  const isControlled = valueProp !== undefined\n  const value = isControlled ? valueProp : stateValue\n\n  // Iterating over the children to dynamically obtain the list of available options\n  const dynamicOptions: SelectOptionData[] = []\n  Children.forEach(children, element => {\n    if (!isValidElement(element)) return\n    const option: SelectOptionData = element.props as SelectOptionData\n    if (option.text && option.value) dynamicOptions.push(option)\n  })\n\n  /** Sends a change event to the external consumer, but internal keeps the actual value as primitive or array. */\n  const onChange = useCallbackRef((e: ChangeEvent) => {\n    onChangeProp?.(e)\n\n    if (!isControlled)\n      setStateValue(value => (Array.isArray(value) ? toggleItem(value, e.target.value).sort() : e.target.value))\n  })\n\n  const valueText =\n    isMultiple && Array.isArray(value)\n      ? value[0]\n        ? selectedText && value.length > 1\n          ? selectedText\n          : `${getOptionText(value[0], [...options, ...dynamicOptions])}${\n              value.length > 1 ? ` (+${value.length - 1})` : ''\n            }`\n        : undefined\n      : getOptionText(value as SelectValue, [...options, ...dynamicOptions])\n\n  return { onChange, value, valueText }\n}\n\nexport type UseSelectReturnType = ReturnType<typeof useSelect>\n"],"mappings":";;;;;AAOA,MAAa,iBAAiB,OAAoB,YAAgC;AAGhF,SAFe,SAAS,MAAM,MAAwB,GAAG,UAAU,MAAM,GAE1D,QAAQ;;;AAIzB,SAAwB,UAAU,OAAuB;CACvD,MAAM,EACJ,cACA,YACA,UAAU,cACV,OAAO,WACP,UAAU,EAAE,EACZ,cACA,aACE;CAGJ,MAAM,CAAC,YAAY,iBAAiB,SAAS,aAAa;CAC1D,MAAM,eAAe,cAAc;CACnC,MAAM,QAAQ,eAAe,YAAY;CAGzC,MAAMA,iBAAqC,EAAE;AAC7C,UAAS,QAAQ,WAAU,YAAW;AACpC,MAAI,CAAC,eAAe,QAAQ,CAAE;EAC9B,MAAMC,SAA2B,QAAQ;AACzC,MAAI,OAAO,QAAQ,OAAO,MAAO,gBAAe,KAAK,OAAO;GAC5D;AAqBF,QAAO;EAAE,UAlBQ,gBAAgB,MAAmB;AAClD,kBAAe,EAAE;AAEjB,OAAI,CAAC,aACH,gBAAc,YAAU,MAAM,QAAQC,QAAM,GAAG,WAAWA,SAAO,EAAE,OAAO,MAAM,CAAC,MAAM,GAAG,EAAE,OAAO,MAAO;IAC5G;EAaiB;EAAO,WAVxB,cAAc,MAAM,QAAQ,MAAM,GAC9B,MAAM,KACJ,gBAAgB,MAAM,SAAS,IAC7B,eACA,GAAG,cAAc,MAAM,IAAI,CAAC,GAAG,SAAS,GAAG,eAAe,CAAC,GACzD,MAAM,SAAS,IAAI,MAAM,MAAM,SAAS,EAAE,KAAK,OAEnD,SACF,cAAc,OAAsB,CAAC,GAAG,SAAS,GAAG,eAAe,CAAC;EAErC"}
+{"version":3,"file":"useSelect.js","names":["dynamicOptions: SelectOptionData[]","option: SelectOptionData","value"],"sources":["../../src/select/useSelect.tsx"],"sourcesContent":["import { Children, isValidElement, useState } from 'react'\n\nimport type { ChangeEvent } from '../utils'\nimport { toggleItem, useCallbackRef } from '../utils'\nimport type { SelectOptionData, SelectValue } from './select.types'\nimport type { UseSelectProps } from './useSelect.types'\n\nexport const getOptionText = (value: SelectValue, options: SelectOptionData[]) => {\n  const option = options?.find((o: SelectOptionData) => o?.value === value)\n\n  return option?.text || value\n}\n\n/** Handles controlled/uncontrolled value state. Supports single and multiple values. */\nexport default function useSelect(props: UseSelectProps) {\n  const {\n    defaultValue,\n    isMultiple,\n    onChange: onChangeProp,\n    value: valueProp,\n    options = [],\n    selectedText,\n    children,\n  } = props\n\n  // Not using useControlled here, because we need custom value setter when uncontrolled\n  const [stateValue, setStateValue] = useState(defaultValue)\n  const isControlled = valueProp !== undefined\n  const value = isControlled ? valueProp : stateValue\n\n  // Iterating over the children to dynamically obtain the list of available options\n  const dynamicOptions: SelectOptionData[] = []\n  Children.forEach(children, element => {\n    if (!isValidElement(element)) return\n    const option: SelectOptionData = element.props as SelectOptionData\n    if (option.text && option.value) dynamicOptions.push(option)\n  })\n\n  /** Sends a change event to the external consumer, but internal keeps the actual value as primitive or array. */\n  const onChange = useCallbackRef((e: ChangeEvent) => {\n    onChangeProp?.(e)\n\n    if (!isControlled)\n      setStateValue(value => (Array.isArray(value) ? toggleItem(value, e.target.value).sort() : e.target.value))\n  })\n\n  const valueText =\n    isMultiple && Array.isArray(value)\n      ? value[0]\n        ? selectedText && value.length > 1\n          ? selectedText\n          : `${getOptionText(value[0], [...options, ...dynamicOptions])}${\n              value.length > 1 ? ` (+${value.length - 1})` : ''\n            }`\n        : undefined\n      : getOptionText(value as SelectValue, [...options, ...dynamicOptions])\n\n  return { onChange, value, valueText }\n}\n\nexport type UseSelectReturnType = ReturnType<typeof useSelect>\n"],"mappings":";;;;;;AAOA,MAAa,iBAAiB,OAAoB,YAAgC;AAGhF,SAFe,SAAS,MAAM,MAAwB,GAAG,UAAU,MAAM,GAE1D,QAAQ;;;AAIzB,SAAwB,UAAU,OAAuB;CACvD,MAAM,EACJ,cACA,YACA,UAAU,cACV,OAAO,WACP,UAAU,EAAE,EACZ,cACA,aACE;CAGJ,MAAM,CAAC,YAAY,iBAAiB,SAAS,aAAa;CAC1D,MAAM,eAAe,cAAc;CACnC,MAAM,QAAQ,eAAe,YAAY;CAGzC,MAAMA,iBAAqC,EAAE;AAC7C,UAAS,QAAQ,WAAU,YAAW;AACpC,MAAI,CAAC,eAAe,QAAQ,CAAE;EAC9B,MAAMC,SAA2B,QAAQ;AACzC,MAAI,OAAO,QAAQ,OAAO,MAAO,gBAAe,KAAK,OAAO;GAC5D;AAqBF,QAAO;EAAE,UAlBQ,gBAAgB,MAAmB;AAClD,kBAAe,EAAE;AAEjB,OAAI,CAAC,aACH,gBAAc,YAAU,MAAM,QAAQC,QAAM,GAAG,WAAWA,SAAO,EAAE,OAAO,MAAM,CAAC,MAAM,GAAG,EAAE,OAAO,MAAO;IAC5G;EAaiB;EAAO,WAVxB,cAAc,MAAM,QAAQ,MAAM,GAC9B,MAAM,KACJ,gBAAgB,MAAM,SAAS,IAC7B,eACA,GAAG,cAAc,MAAM,IAAI,CAAC,GAAG,SAAS,GAAG,eAAe,CAAC,GACzD,MAAM,SAAS,IAAI,MAAM,MAAM,SAAS,EAAE,KAAK,OAEnD,SACF,cAAc,OAAsB,CAAC,GAAG,SAAS,GAAG,eAAe,CAAC;EAErC"}

package/dist/select/useSelect.types.d.ts

@@ -31,4 +31,5 @@ type UseSelectProps = {
 };
 //#endregion
 export { UseSelectProps };
+
 //# sourceMappingURL=useSelect.types.d.ts.map

package/dist/select/useSelect.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSelect.types.d.ts","names":[],"sources":["../../src/select/useSelect.types.ts"],"sourcesContent":[],"mappings":";;;;;;;;KAMY,cAAA,CAAA,CAAA;;UAEF,cAAc;;EAFZ,YAAA,CAAA,CAAA,CAIK,WAJS,CAAA,CAAA,CAIK,WAJL,CAAA,CAAA;EAEhB,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,QAAA,CAAA,QAAA,CAAA,MAAA,CAAA,CAAA,OAAA,CAAA,GAAA,CAAA,CAAA,CAAA,KAAA,CAAA,aAAA,CAAA,EAAA,CAAA,IAAA,CAAA,KAAA,CAAA,CAAA,CAAA;EAAc,UAAA,CAAA,CAAA,CAAA,OAAA;EAEP,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,EAAA,CAAA,GAAA,CAAA,SAAA,CAAA,OAAA,CAAA,CAAA;EAAc,OAAA,CAAA,CAAA,CAInB,gBAJmB,CAAA,CAAA;EAInB,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,QAAA,CAAA,QAAA,CAAA,GAAA,CAAA,OAAA,CAAA,QAAA,CAAA,CAAA;EAEC,QAAA,CAAA,CAAA,CAAA,SAAA;EAES,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,KAAA,CAAA,EAAA,CAAA,GAAA,CAAA,MAAA,CAAA,MAAA,CAAA,CAAA;EASL,iBAAA,CAAA,CAAA,CATK,WASL;EAAW,CAAA,CAAA,CAAA,CAAA,SAAA,CAAA,MAAA,CAAA,GAAA,CAAA,OAAA,CAAA,IAAA,CAAA,QAAA,CAAA,OAAA,CAAA,QAAA,CAAA,CAAA,CAAA;;;;;;;;iBAAX"}
+{"version":3,"file":"useSelect.types.d.ts","names":[],"sources":["../../src/select/useSelect.types.ts"],"sourcesContent":[],"mappings":";;;;;;;;KAMY,cAAA;;UAEF,cAAc;;EAFZ,YAAA,CAAA,EAIK,WAJS,GAIK,WAJL,EAAA;EAEhB;EAAc,UAAA,CAAA,EAAA,OAAA;EAEP;EAAc,OAAA,CAAA,EAInB,gBAJmB,EAAA;EAInB;EAEC,QAAA,CAAA,EAAA,SAAA;EAES;EASL,iBAAA,CAAA,EATK,WASL;EAAW;;;;;;;;iBAAX"}

package/dist/sidemenu/consts.js

@@ -4,5 +4,5 @@ const expandedWidth = 240;
 
 //#endregion
 export { collapsedWidth, expandedWidth };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=consts.js.map

package/dist/sidemenu/context.js

@@ -1,9 +1,10 @@
 import { createContext } from "../utils/react.js";
+import "../utils/index.js";
 
 //#region src/sidemenu/context.ts
 const [SidemenuProvider, useSidemenuContext] = createContext({ isOptional: true });
 
 //#endregion
 export { SidemenuProvider, useSidemenuContext };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=context.js.map

package/dist/sidemenu/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../src/sidemenu/context.ts"],"sourcesContent":["import type { Dict } from '../utils'\nimport { createContext } from '../utils'\n\nconst [SidemenuProvider, useSidemenuContext] = createContext<Dict>({ isOptional: true })\n\nexport { SidemenuProvider, useSidemenuContext }\n"],"mappings":";;;AAGA,MAAM,CAAC,kBAAkB,sBAAsB,cAAoB,EAAE,YAAY,MAAM,CAAC"}
+{"version":3,"file":"context.js","names":[],"sources":["../../src/sidemenu/context.ts"],"sourcesContent":["import type { Dict } from '../utils'\nimport { createContext } from '../utils'\n\nconst [SidemenuProvider, useSidemenuContext] = createContext<Dict>({ isOptional: true })\n\nexport { SidemenuProvider, useSidemenuContext }\n"],"mappings":";;;;AAGA,MAAM,CAAC,kBAAkB,sBAAsB,cAAoB,EAAE,YAAY,MAAM,CAAC"}

package/dist/sidemenu/index.d.ts

@@ -1,4 +1,4 @@
 import { SidemenuItemProps, SidemenuOrientation, SidemenuProps, SidemenuTopProps } from "./sidemenu.types.js";
 import { SidemenuItem } from "./sidemenuItem.js";
 import { SidemenuTop } from "./sidemenuTop.js";
-import { Sidemenu } from "./sidemenu.js";
+import { Sidemenu } from "./sidemenu.js";

package/dist/sidemenu/index.js

@@ -0,0 +1,5 @@
+import { SidemenuItem } from "./sidemenuItem.js";
+import { SidemenuTop } from "./sidemenuTop.js";
+import { Sidemenu } from "./sidemenu.js";
+
+globalThis.__vuiVersion__ = "4.0.0-beta.1"

package/dist/sidemenu/sidemenu.d.ts

@@ -12,4 +12,5 @@ declare const Sidemenu: VuiComponent<"div", SidemenuProps> & {
 };
 //#endregion
 export { Sidemenu };
+
 //# sourceMappingURL=sidemenu.d.ts.map

package/dist/sidemenu/sidemenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidemenu.d.ts","names":[],"sources":["../../src/sidemenu/sidemenu.tsx"],"sourcesContent":[],"mappings":";;;;;;;;cAea,UA6FP,oBAAoB;cACZ;EA9FD,IAAA,CAAA,CAAA,MAAA,CA+FE,YACd;CAHyB"}
+{"version":3,"file":"sidemenu.d.ts","names":[],"sources":["../../src/sidemenu/sidemenu.tsx"],"sourcesContent":[],"mappings":";;;;;;;;cAea,UA6FP,oBAAoB;cACZ;EA9FD,IAAA,EAAA,OA+FE,YACd;CAHyB"}

package/dist/sidemenu/sidemenu.js

@@ -1,11 +1,16 @@
 import { filterUndefined } from "../utils/object.js";
 import { cs } from "../utils/styles.js";
 import { isActivePath } from "../utils/window.js";
+import "../utils/index.js";
 import { useStyleConfig } from "../core/theme.js";
 import { vui } from "../core/vui.js";
 import box_default from "../box/box.js";
+import "../box/index.js";
 import icon_default from "../icon/icon.js";
+import "../icon/index.js";
 import button_default from "../button/button.js";
+import "../button/index.js";
+import "../core/index.js";
 import { collapsedWidth, expandedWidth } from "./consts.js";
 import { SidemenuProvider } from "./context.js";
 import sidemenuItem_default from "./sidemenuItem.js";
@@ -16,7 +21,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/sidemenu/sidemenu.tsx
 /** A collapsible side menu for navigation. */
 const Sidemenu = vui((props, ref) => {
-	const { children, className, items, isExpanded = false, isSticky = false, size, variant, width = expandedWidth, onNavigate,...rest } = props;
+	const { children, className, items, isExpanded = false, isSticky = false, size, variant, width = expandedWidth, onNavigate, ...rest } = props;
 	const [isExpandedHorizontally, setIsExpandedHorizontally] = useState(isExpanded);
 	const context = useMemo(() => filterUndefined({
 		size,
@@ -94,5 +99,5 @@ Sidemenu.displayName = "Sidemenu";
 
 //#endregion
 export { Sidemenu };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=sidemenu.js.map

package/dist/sidemenu/sidemenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidemenu.js","names":["Box","SidemenuItem","Button","Icon","SidemenuTop"],"sources":["../../src/sidemenu/sidemenu.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react'\n\nimport Box from '../box'\nimport Button from '../button'\nimport type { VuiComponent } from '../core'\nimport { useStyleConfig, vui } from '../core'\nimport Icon from '../icon'\nimport { cs, filterUndefined, isActivePath } from '../utils'\nimport { collapsedWidth, expandedWidth } from './consts'\nimport { SidemenuProvider } from './context'\nimport type { SidemenuItemProps, SidemenuProps } from './sidemenu.types'\nimport SidemenuItem from './sidemenuItem'\nimport SidemenuTop from './sidemenuTop'\n\n/** A collapsible side menu for navigation. */\nexport const Sidemenu = vui<'div', SidemenuProps>((props, ref) => {\n  const {\n    children,\n    className,\n    items,\n    isExpanded = false,\n    isSticky = false,\n    size,\n    variant,\n    width = expandedWidth,\n    onNavigate,\n    ...rest\n  } = props\n\n  const [isExpandedHorizontally, setIsExpandedHorizontally] = useState(isExpanded)\n  const context = useMemo(\n    () => filterUndefined({ size, variant, isExpandedHorizontally }),\n    [size, variant, isExpandedHorizontally],\n  )\n\n  const styles = useStyleConfig('Sidemenu', props)\n\n  const isDark = variant === 'dark'\n\n  useEffect(() => {\n    setIsExpandedHorizontally(isExpanded)\n  }, [isExpanded])\n\n  const onToggle = () => setIsExpandedHorizontally(!isExpandedHorizontally)\n\n  const w = isExpandedHorizontally ? width : collapsedWidth\n  const icon = `falArrow${isExpandedHorizontally ? 'Left' : 'Right'}`\n  const justifyContent = isExpandedHorizontally ? 'flex-end' : 'center'\n\n  function onItemClick(item: SidemenuItemProps) {\n    item?.onClick?.()\n    if (item?.path) onNavigate?.(item.path)\n  }\n\n  return (\n    <SidemenuProvider value={context}>\n      <Box\n        className={cs('vui-sidemenu', className)}\n        elevation=\"3\"\n        flexDirection=\"column\"\n        minWidth={0}\n        overflowX=\"hidden\"\n        position={isSticky ? 'sticky' : 'static'}\n        ref={ref}\n        top={isSticky ? (top ? top : 0) : 'auto'}\n        transitionDuration=\"normal\"\n        w={w}\n        {...styles.container}\n        {...rest}\n      >\n        <Box\n          flexDirection=\"column\"\n          flexGrow={1}\n          justifyContent=\"flex-start\"\n          minW={expandedWidth}\n          overflowX=\"hidden\"\n          overflowY=\"auto\"\n          w=\"100%\"\n        >\n          {items\n            ? items?.map?.((item: SidemenuItemProps, key: number) => (\n                <SidemenuItem\n                  isActive={isActivePath(item?.path)}\n                  key={key}\n                  {...item}\n                  onClick={() => onItemClick(item)}\n                />\n              ))\n            : children}\n        </Box>\n        <Box className=\"vui-sidemenu-bottom\" w=\"100%\" {...styles.bottom}>\n          <Button\n            aria-label={isExpandedHorizontally ? 'Collapse' : 'Expand'}\n            borderRadius={0}\n            justifyContent={justifyContent}\n            minH={size === 'lg' ? '56px' : '40px'}\n            onClick={onToggle}\n            pl={0}\n            size=\"md\"\n            variant={isDark ? 'tertiaryLight' : 'tertiaryDark'}\n            w=\"100%\"\n          >\n            <Icon name={icon} />\n          </Button>\n        </Box>\n      </Box>\n    </SidemenuProvider>\n  )\n}) as VuiComponent<'div', SidemenuProps> & {\n  Top: typeof SidemenuTop\n  Item: typeof SidemenuItem\n}\n\nSidemenu.Top = SidemenuTop\nSidemenu.Item = SidemenuItem\nSidemenu.displayName = 'Sidemenu'\n\nexport default Sidemenu\n"],"mappings":";;;;;;;;;;;;;;;;;AAeA,MAAa,WAAW,KAA2B,OAAO,QAAQ;CAChE,MAAM,EACJ,UACA,WACA,OACA,aAAa,OACb,WAAW,OACX,MACA,SACA,QAAQ,eACR,WACA,GAAG,SACD;CAEJ,MAAM,CAAC,wBAAwB,6BAA6B,SAAS,WAAW;CAChF,MAAM,UAAU,cACR,gBAAgB;EAAE;EAAM;EAAS;EAAwB,CAAC,EAChE;EAAC;EAAM;EAAS;EAAuB,CACxC;CAED,MAAM,SAAS,eAAe,YAAY,MAAM;CAEhD,MAAM,SAAS,YAAY;AAE3B,iBAAgB;AACd,4BAA0B,WAAW;IACpC,CAAC,WAAW,CAAC;CAEhB,MAAM,iBAAiB,0BAA0B,CAAC,uBAAuB;CAEzE,MAAM,IAAI,yBAAyB,QAAQ;CAC3C,MAAM,OAAO,WAAW,yBAAyB,SAAS;CAC1D,MAAM,iBAAiB,yBAAyB,aAAa;CAE7D,SAAS,YAAY,MAAyB;AAC5C,QAAM,WAAW;AACjB,MAAI,MAAM,KAAM,cAAa,KAAK,KAAK;;AAGzC,QACE,oBAAC;EAAiB,OAAO;YACvB,qBAACA;GACC,WAAW,GAAG,gBAAgB,UAAU;GACxC,WAAU;GACV,eAAc;GACd,UAAU;GACV,WAAU;GACV,UAAU,WAAW,WAAW;GAC3B;GACL,KAAK,WAAY,MAAM,MAAM,IAAK;GAClC,oBAAmB;GAChB;GACH,GAAI,OAAO;GACX,GAAI;cAEJ,oBAACA;IACC,eAAc;IACd,UAAU;IACV,gBAAe;IACf,MAAM;IACN,WAAU;IACV,WAAU;IACV,GAAE;cAED,QACG,OAAO,OAAO,MAAyB,QACrC,oBAACC;KACC,UAAU,aAAa,MAAM,KAAK;KAElC,GAAI;KACJ,eAAe,YAAY,KAAK;OAF3B,IAGL,CACF,GACF;KACA,EACN,oBAACD;IAAI,WAAU;IAAsB,GAAE;IAAO,GAAI,OAAO;cACvD,oBAACE;KACC,cAAY,yBAAyB,aAAa;KAClD,cAAc;KACE;KAChB,MAAM,SAAS,OAAO,SAAS;KAC/B,SAAS;KACT,IAAI;KACJ,MAAK;KACL,SAAS,SAAS,kBAAkB;KACpC,GAAE;eAEF,oBAACC,gBAAK,MAAM,OAAQ;MACb;KACL;IACF;GACW;EAErB;AAKF,SAAS,MAAMC;AACf,SAAS,OAAOH;AAChB,SAAS,cAAc"}
+{"version":3,"file":"sidemenu.js","names":["Box","SidemenuItem","Button","Icon","SidemenuTop"],"sources":["../../src/sidemenu/sidemenu.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react'\n\nimport Box from '../box'\nimport Button from '../button'\nimport type { VuiComponent } from '../core'\nimport { useStyleConfig, vui } from '../core'\nimport Icon from '../icon'\nimport { cs, filterUndefined, isActivePath } from '../utils'\nimport { collapsedWidth, expandedWidth } from './consts'\nimport { SidemenuProvider } from './context'\nimport type { SidemenuItemProps, SidemenuProps } from './sidemenu.types'\nimport SidemenuItem from './sidemenuItem'\nimport SidemenuTop from './sidemenuTop'\n\n/** A collapsible side menu for navigation. */\nexport const Sidemenu = vui<'div', SidemenuProps>((props, ref) => {\n  const {\n    children,\n    className,\n    items,\n    isExpanded = false,\n    isSticky = false,\n    size,\n    variant,\n    width = expandedWidth,\n    onNavigate,\n    ...rest\n  } = props\n\n  const [isExpandedHorizontally, setIsExpandedHorizontally] = useState(isExpanded)\n  const context = useMemo(\n    () => filterUndefined({ size, variant, isExpandedHorizontally }),\n    [size, variant, isExpandedHorizontally],\n  )\n\n  const styles = useStyleConfig('Sidemenu', props)\n\n  const isDark = variant === 'dark'\n\n  useEffect(() => {\n    setIsExpandedHorizontally(isExpanded)\n  }, [isExpanded])\n\n  const onToggle = () => setIsExpandedHorizontally(!isExpandedHorizontally)\n\n  const w = isExpandedHorizontally ? width : collapsedWidth\n  const icon = `falArrow${isExpandedHorizontally ? 'Left' : 'Right'}`\n  const justifyContent = isExpandedHorizontally ? 'flex-end' : 'center'\n\n  function onItemClick(item: SidemenuItemProps) {\n    item?.onClick?.()\n    if (item?.path) onNavigate?.(item.path)\n  }\n\n  return (\n    <SidemenuProvider value={context}>\n      <Box\n        className={cs('vui-sidemenu', className)}\n        elevation=\"3\"\n        flexDirection=\"column\"\n        minWidth={0}\n        overflowX=\"hidden\"\n        position={isSticky ? 'sticky' : 'static'}\n        ref={ref}\n        top={isSticky ? (top ? top : 0) : 'auto'}\n        transitionDuration=\"normal\"\n        w={w}\n        {...styles.container}\n        {...rest}\n      >\n        <Box\n          flexDirection=\"column\"\n          flexGrow={1}\n          justifyContent=\"flex-start\"\n          minW={expandedWidth}\n          overflowX=\"hidden\"\n          overflowY=\"auto\"\n          w=\"100%\"\n        >\n          {items\n            ? items?.map?.((item: SidemenuItemProps, key: number) => (\n                <SidemenuItem\n                  isActive={isActivePath(item?.path)}\n                  key={key}\n                  {...item}\n                  onClick={() => onItemClick(item)}\n                />\n              ))\n            : children}\n        </Box>\n        <Box className=\"vui-sidemenu-bottom\" w=\"100%\" {...styles.bottom}>\n          <Button\n            aria-label={isExpandedHorizontally ? 'Collapse' : 'Expand'}\n            borderRadius={0}\n            justifyContent={justifyContent}\n            minH={size === 'lg' ? '56px' : '40px'}\n            onClick={onToggle}\n            pl={0}\n            size=\"md\"\n            variant={isDark ? 'tertiaryLight' : 'tertiaryDark'}\n            w=\"100%\"\n          >\n            <Icon name={icon} />\n          </Button>\n        </Box>\n      </Box>\n    </SidemenuProvider>\n  )\n}) as VuiComponent<'div', SidemenuProps> & {\n  Top: typeof SidemenuTop\n  Item: typeof SidemenuItem\n}\n\nSidemenu.Top = SidemenuTop\nSidemenu.Item = SidemenuItem\nSidemenu.displayName = 'Sidemenu'\n\nexport default Sidemenu\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAeA,MAAa,WAAW,KAA2B,OAAO,QAAQ;CAChE,MAAM,EACJ,UACA,WACA,OACA,aAAa,OACb,WAAW,OACX,MACA,SACA,QAAQ,eACR,YACA,GAAG,SACD;CAEJ,MAAM,CAAC,wBAAwB,6BAA6B,SAAS,WAAW;CAChF,MAAM,UAAU,cACR,gBAAgB;EAAE;EAAM;EAAS;EAAwB,CAAC,EAChE;EAAC;EAAM;EAAS;EAAuB,CACxC;CAED,MAAM,SAAS,eAAe,YAAY,MAAM;CAEhD,MAAM,SAAS,YAAY;AAE3B,iBAAgB;AACd,4BAA0B,WAAW;IACpC,CAAC,WAAW,CAAC;CAEhB,MAAM,iBAAiB,0BAA0B,CAAC,uBAAuB;CAEzE,MAAM,IAAI,yBAAyB,QAAQ;CAC3C,MAAM,OAAO,WAAW,yBAAyB,SAAS;CAC1D,MAAM,iBAAiB,yBAAyB,aAAa;CAE7D,SAAS,YAAY,MAAyB;AAC5C,QAAM,WAAW;AACjB,MAAI,MAAM,KAAM,cAAa,KAAK,KAAK;;AAGzC,QACE,oBAAC;EAAiB,OAAO;YACvB,qBAACA;GACC,WAAW,GAAG,gBAAgB,UAAU;GACxC,WAAU;GACV,eAAc;GACd,UAAU;GACV,WAAU;GACV,UAAU,WAAW,WAAW;GAC3B;GACL,KAAK,WAAY,MAAM,MAAM,IAAK;GAClC,oBAAmB;GAChB;GACH,GAAI,OAAO;GACX,GAAI;cAEJ,oBAACA;IACC,eAAc;IACd,UAAU;IACV,gBAAe;IACf,MAAM;IACN,WAAU;IACV,WAAU;IACV,GAAE;cAED,QACG,OAAO,OAAO,MAAyB,QACrC,oBAACC;KACC,UAAU,aAAa,MAAM,KAAK;KAElC,GAAI;KACJ,eAAe,YAAY,KAAK;OAF3B,IAGL,CACF,GACF;KACA,EACN,oBAACD;IAAI,WAAU;IAAsB,GAAE;IAAO,GAAI,OAAO;cACvD,oBAACE;KACC,cAAY,yBAAyB,aAAa;KAClD,cAAc;KACE;KAChB,MAAM,SAAS,OAAO,SAAS;KAC/B,SAAS;KACT,IAAI;KACJ,MAAK;KACL,SAAS,SAAS,kBAAkB;KACpC,GAAE;eAEF,oBAACC,gBAAK,MAAM,OAAQ;MACb;KACL;IACF;GACW;EAErB;AAKF,SAAS,MAAMC;AACf,SAAS,OAAOH;AAChB,SAAS,cAAc"}

package/dist/sidemenu/sidemenu.types.d.ts

@@ -1,10 +1,10 @@
 import { ThemingProps } from "../theme/types.js";
 import { SystemProps } from "../system/system.js";
 import "../system/index.js";
-import { BoxProps } from "../box/box.types.js";
-import "../box/index.js";
 import { IconProp } from "../icon/icon.types.js";
 import "../icon/index.js";
+import { BoxProps } from "../box/box.types.js";
+import "../box/index.js";
 import { ReactNode } from "react";
 
 //#region src/sidemenu/sidemenu.types.d.ts
@@ -54,4 +54,5 @@ type SidemenuTopProps = BoxProps & {
 };
 //#endregion
 export { SidemenuItemProps, SidemenuOrientation, SidemenuProps, SidemenuTopProps };
+
 //# sourceMappingURL=sidemenu.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"sidemenu.types.d.ts","names":[],"sources":["../../src/sidemenu/sidemenu.types.ts"],"sourcesContent":[],"mappings":";;;;;;;;;;KAOY,mBAAA,CAAA,CAAA;KAEA,aAAA,CAAA,CAAA,CAAgB,cAC1B;;UAEU;;EALA,UAAA,CAAA,CAAA,CAAA,OAAA;EAEA,QAAA,CAAA,CAAA,CAAA,OAAa;EAAG,CAAA,CAAA,CAAA,CAAA,QAAA,CAAA,QAAA,CAAA,GAAA,CAAA,UAAA,CAAA,EAAA,CAAA,GAAA,CAAA,IAAA,CAAA,IAAA,CAAA,CAAA,KAAA,CAAA,EAAA,CAAA,CAAA,CAAA,MAAA,CAAA,QAAA,CAAA,EAAA,CAAA,KAAA,CAAA,MAAA,CAAA,IAAA,CAAA,CAAA,KAAA,CAAA,CAAA,CAAA,WAAA,CAAA,GAAA,CAAA,EAAA,CAAA,IAAA,CAAA,KAAA,CAAA,GAAA,CAAA,QAAA,CAAA,CAAA,CAAA;EAC1B,UAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,MAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA;EAEU,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,EAAA,CAAA,GAAA,CAAA,SAAA,CAAA,IAAA,CAAA,GAAA,CAAA,IAAA,CAAA,IAAA,CAAA,EAAA,CAAA,QAAA,CAAA,CAAA,OAAA,CAAA,GAAA,CAAA,CAAA,CAAA;EAAiB,KAAA,CAAA,CAAA,CAAA,MAAA;AAU7B,CAAA;AAAgC,IAAA,CAApB,iBAAA,CAAA,CAAA,CAAoB,QAAA,CAAA,CAAA,CAAA;EAInB,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,KAAA,CAAA,IAAA,CAAA,CAAA;EAEJ,SAAA,CAAA,CAAA,CAAA,MAAA;EAAQ,CAAA,CAAA,CAAA,CAAA,QAAA,CAAA,CAAA;EAmBL,QAAA,CAAA,CAAA,CArBC,SAqBe;EAAG,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,KAAA,CAAA,IAAA,CAAA,CAAA;EAIlB,IAAA,CAAA,CAAA,CAvBJ,QAuBI;EAEC,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,IAAA,CAAA,CAAA,OAAA,CAAA,EAAA,CAAA,CAAA,CAAA;EAAS,QAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA;;;;;;;;;;;;;;;;KANX,gBAAA,CAAA,CAAA,CAAmB;;;;aAIlB;;cAEC"}
+{"version":3,"file":"sidemenu.types.d.ts","names":[],"sources":["../../src/sidemenu/sidemenu.types.ts"],"sourcesContent":[],"mappings":";;;;;;;;;;KAOY,mBAAA;KAEA,aAAA,GAAgB,cAC1B;;UAEU;;EALA,UAAA,CAAA,EAAA,OAAA;EAEA,QAAA,CAAA,EAAA,OAAa;EAAG;EAC1B,UAAA,CAAA,EAAA,CAAA,EAAA,EAAA,MAAA,EAAA,GAAA,IAAA;EAEU;EAAiB,KAAA,CAAA,EAAA,MAAA;AAU7B,CAAA;AAAgC,KAApB,iBAAA,GAAoB,QAAA,GAAA;EAInB;EAEJ,SAAA,CAAA,EAAA,MAAA;EAAQ;EAmBL,QAAA,CAAA,EArBC,SAqBe;EAAG;EAIlB,IAAA,CAAA,EAvBJ,QAuBI;EAEC;EAAS,QAAA,CAAA,EAAA,IAAA,GAAA,IAAA;;;;;;;;;;;;;;;;KANX,gBAAA,GAAmB;;;;aAIlB;;cAEC"}

package/dist/sidemenu/sidemenuItem.d.ts

@@ -7,4 +7,5 @@ import { SidemenuItemProps } from "./sidemenu.types.js";
 declare const SidemenuItem: VuiComponent<"div", SidemenuItemProps>;
 //#endregion
 export { SidemenuItem };
+
 //# sourceMappingURL=sidemenuItem.d.ts.map

package/dist/sidemenu/sidemenuItem.js

@@ -1,11 +1,18 @@
 import { cs } from "../utils/styles.js";
+import "../utils/index.js";
 import { omitThemingProps } from "../core/theme.js";
 import { vui } from "../core/vui.js";
 import box_default from "../box/box.js";
+import "../box/index.js";
 import icon_default from "../icon/icon.js";
+import "../icon/index.js";
 import t_default from "../t/t.js";
+import "../t/index.js";
 import button_default from "../button/button.js";
+import "../button/index.js";
+import "../core/index.js";
 import Popover from "../popover/popover.js";
+import "../popover/index.js";
 import { collapsedWidth, expandedWidth } from "./consts.js";
 import useSidemenuItem_default from "./useSidemenuItem.js";
 import { useEffect } from "react";
@@ -14,7 +21,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/sidemenu/sidemenuItem.tsx
 /** A menu item. */
 const SidemenuItem = vui((props, ref) => {
-	const { className, children, icon, iconSize = "md", isActive, isExpanded = true, pl = 0, py = 0, onClick, onCollapse, onExpand, title,...rest } = omitThemingProps(props);
+	const { className, children, icon, iconSize = "md", isActive, isExpanded = true, pl = 0, py = 0, onClick, onCollapse, onExpand, title, ...rest } = omitThemingProps(props);
 	const { isExpandedVertically, setIsExpandedVertically, isDark, size, isExpandedHorizontally, styles } = useSidemenuItem_default(isExpanded);
 	useEffect(() => {
 		if (isExpandedVertically) onExpand?.();
@@ -112,5 +119,5 @@ var sidemenuItem_default = SidemenuItem;
 
 //#endregion
 export { SidemenuItem, sidemenuItem_default as default };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=sidemenuItem.js.map

package/dist/sidemenu/sidemenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidemenuItem.js","names":["useSidemenuItem","Box","Icon","T","Button"],"sources":["../../src/sidemenu/sidemenuItem.tsx"],"sourcesContent":["import type { MouseEvent } from 'react'\nimport { useEffect } from 'react'\n\nimport Box from '../box'\nimport Button from '../button'\nimport type { VuiComponent } from '../core'\nimport { omitThemingProps, vui } from '../core'\nimport Icon from '../icon'\nimport { Popover } from '../popover'\nimport T from '../t'\nimport { cs } from '../utils'\nimport { collapsedWidth, expandedWidth } from './consts'\nimport type { SidemenuItemProps } from './sidemenu.types'\nimport useSidemenuItem from './useSidemenuItem'\n\n/** A menu item. */\nexport const SidemenuItem = vui<'button', SidemenuItemProps>((props, ref) => {\n  const {\n    className,\n    children,\n    icon,\n    iconSize = 'md',\n    isActive,\n    isExpanded = true,\n    pl = 0,\n    py = 0,\n    onClick,\n    onCollapse,\n    onExpand,\n    title,\n    ...rest\n  } = omitThemingProps(props)\n\n  const { isExpandedVertically, setIsExpandedVertically, isDark, size, isExpandedHorizontally, styles } =\n    useSidemenuItem(isExpanded)\n\n  useEffect(() => {\n    if (isExpandedVertically) onExpand?.()\n    if (!isExpandedVertically) onCollapse?.()\n  }, [isExpandedVertically])\n\n  const hasChildrenExpanded = !!children && isExpandedHorizontally\n\n  const InnerContent = () => (\n    <Box centerV px={1.5} py={1} w=\"100%\" whiteSpace=\"pre\">\n      <Icon ml={iconSize === 'sm' ? '4px' : 0} name={icon} size={iconSize} />\n      <T isTruncated ml={2}>\n        {title}\n      </T>\n    </Box>\n  )\n\n  const toggle = (e: MouseEvent<HTMLButtonElement>) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setIsExpandedVertically(!isExpandedVertically)\n  }\n\n  const buttonStyles = {\n    alignItems: 'center',\n    border: 'none',\n    borderRadius: 0,\n    borderLeft: !hasChildrenExpanded && children ? 'none' : '3px solid transparent',\n    borderLeftColor: isActive ? (isDark ? 'digiGreen.main' : 'seaBlue.main') : undefined,\n    bg: isDark ? 'darkBlue.main' : isActive ? 'skyBlue.95' : 'white',\n    color: hasChildrenExpanded ? 'seaBlue.main' : isDark ? 'digiGreen.main' : 'sandstone.10',\n    h: 'auto',\n    justifyContent: 'space-between',\n    onClick: () => onClick?.(),\n    pl,\n    py,\n    size: 'md',\n    variant: isDark ? 'tertiaryLight' : 'tertiaryDark',\n    w: '100%',\n    ...styles.item,\n    minH: size === 'lg' ? '56px' : '40px',\n    hoverBg: isDark ? 'seaBlue.main' : 'skyBlue.90',\n    ...rest,\n  }\n\n  return (\n    <Box flexDirection=\"column\" ref={ref} w=\"100%\">\n      {!hasChildrenExpanded && children ? (\n        <Popover offset={[0, collapsedWidth - expandedWidth - 2]} placement=\"right-start\" trigger=\"mouseenter\">\n          <Popover.Trigger as={Box} className={cs('vui-sidemenu-item-popover', className)}>\n            <Box {...buttonStyles} borderLeft={`3px solid ${isDark ? 'digiGreen.main' : 'seaBlue.main'}`}>\n              <InnerContent />\n            </Box>\n          </Popover.Trigger>\n          <Popover.Content elevation=\"none\">\n            <Box flexDirection=\"column\" justifyContent=\"start\" w=\"100%\">\n              {children}\n            </Box>\n          </Popover.Content>\n        </Popover>\n      ) : (\n        <Button className={cs('vui-sidemenu-item', className)} {...buttonStyles}>\n          <InnerContent />\n          {hasChildrenExpanded && (\n            <Button\n              aria-label={isExpandedVertically ? 'Collapse' : 'Expand'}\n              className=\"vui-sidemenu-item-expand\"\n              icon={isExpandedVertically ? 'falChevronUp' : 'falChevronDown'}\n              onClick={toggle}\n              size=\"sm\"\n              variant={isDark ? 'tertiaryLight' : 'tertiaryDark'}\n            />\n          )}\n        </Button>\n      )}\n      {!!children && hasChildrenExpanded && isExpandedVertically && (\n        <Box flexDirection=\"column\" justifyContent=\"start\" w=\"100%\">\n          {children}\n        </Box>\n      )}\n    </Box>\n  )\n}) as VuiComponent<'div', SidemenuItemProps>\n\nSidemenuItem.displayName = 'SidemenuItem'\n\nexport default SidemenuItem\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,MAAa,eAAe,KAAkC,OAAO,QAAQ;CAC3E,MAAM,EACJ,WACA,UACA,MACA,WAAW,MACX,UACA,aAAa,MACb,KAAK,GACL,KAAK,GACL,SACA,YACA,UACA,MACA,GAAG,SACD,iBAAiB,MAAM;CAE3B,MAAM,EAAE,sBAAsB,yBAAyB,QAAQ,MAAM,wBAAwB,WAC3FA,wBAAgB,WAAW;AAE7B,iBAAgB;AACd,MAAI,qBAAsB,aAAY;AACtC,MAAI,CAAC,qBAAsB,eAAc;IACxC,CAAC,qBAAqB,CAAC;CAE1B,MAAM,sBAAsB,CAAC,CAAC,YAAY;CAE1C,MAAM,qBACJ,qBAACC;EAAI;EAAQ,IAAI;EAAK,IAAI;EAAG,GAAE;EAAO,YAAW;aAC/C,oBAACC;GAAK,IAAI,aAAa,OAAO,QAAQ;GAAG,MAAM;GAAM,MAAM;IAAY,EACvE,oBAACC;GAAE;GAAY,IAAI;aAChB;IACC;GACA;CAGR,MAAM,UAAU,MAAqC;AACnD,IAAE,gBAAgB;AAClB,IAAE,iBAAiB;AACnB,0BAAwB,CAAC,qBAAqB;;CAGhD,MAAM,eAAe;EACnB,YAAY;EACZ,QAAQ;EACR,cAAc;EACd,YAAY,CAAC,uBAAuB,WAAW,SAAS;EACxD,iBAAiB,WAAY,SAAS,mBAAmB,iBAAkB;EAC3E,IAAI,SAAS,kBAAkB,WAAW,eAAe;EACzD,OAAO,sBAAsB,iBAAiB,SAAS,mBAAmB;EAC1E,GAAG;EACH,gBAAgB;EAChB,eAAe,WAAW;EAC1B;EACA;EACA,MAAM;EACN,SAAS,SAAS,kBAAkB;EACpC,GAAG;EACH,GAAG,OAAO;EACV,MAAM,SAAS,OAAO,SAAS;EAC/B,SAAS,SAAS,iBAAiB;EACnC,GAAG;EACJ;AAED,QACE,qBAACF;EAAI,eAAc;EAAc;EAAK,GAAE;aACrC,CAAC,uBAAuB,WACvB,qBAAC;GAAQ,QAAQ,CAAC,GAAG,iBAAiB,gBAAgB,EAAE;GAAE,WAAU;GAAc,SAAQ;cACxF,oBAAC,QAAQ;IAAQ,IAAIA;IAAK,WAAW,GAAG,6BAA6B,UAAU;cAC7E,oBAACA;KAAI,GAAI;KAAc,YAAY,aAAa,SAAS,mBAAmB;eAC1E,oBAAC,iBAAe;MACZ;KACU,EAClB,oBAAC,QAAQ;IAAQ,WAAU;cACzB,oBAACA;KAAI,eAAc;KAAS,gBAAe;KAAQ,GAAE;KAClD;MACG;KACU;IACV,GAEV,qBAACG;GAAO,WAAW,GAAG,qBAAqB,UAAU;GAAE,GAAI;cACzD,oBAAC,iBAAe,EACf,uBACC,oBAACA;IACC,cAAY,uBAAuB,aAAa;IAChD,WAAU;IACV,MAAM,uBAAuB,iBAAiB;IAC9C,SAAS;IACT,MAAK;IACL,SAAS,SAAS,kBAAkB;KACpC;IAEG,EAEV,CAAC,CAAC,YAAY,uBAAuB,wBACpC,oBAACH;GAAI,eAAc;GAAS,gBAAe;GAAQ,GAAE;GAClD;IACG;GAEJ;EAER;AAEF,aAAa,cAAc;AAE3B,2BAAe"}
+{"version":3,"file":"sidemenuItem.js","names":["useSidemenuItem","Box","Icon","T","Button"],"sources":["../../src/sidemenu/sidemenuItem.tsx"],"sourcesContent":["import type { MouseEvent } from 'react'\nimport { useEffect } from 'react'\n\nimport Box from '../box'\nimport Button from '../button'\nimport type { VuiComponent } from '../core'\nimport { omitThemingProps, vui } from '../core'\nimport Icon from '../icon'\nimport { Popover } from '../popover'\nimport T from '../t'\nimport { cs } from '../utils'\nimport { collapsedWidth, expandedWidth } from './consts'\nimport type { SidemenuItemProps } from './sidemenu.types'\nimport useSidemenuItem from './useSidemenuItem'\n\n/** A menu item. */\nexport const SidemenuItem = vui<'button', SidemenuItemProps>((props, ref) => {\n  const {\n    className,\n    children,\n    icon,\n    iconSize = 'md',\n    isActive,\n    isExpanded = true,\n    pl = 0,\n    py = 0,\n    onClick,\n    onCollapse,\n    onExpand,\n    title,\n    ...rest\n  } = omitThemingProps(props)\n\n  const { isExpandedVertically, setIsExpandedVertically, isDark, size, isExpandedHorizontally, styles } =\n    useSidemenuItem(isExpanded)\n\n  useEffect(() => {\n    if (isExpandedVertically) onExpand?.()\n    if (!isExpandedVertically) onCollapse?.()\n  }, [isExpandedVertically])\n\n  const hasChildrenExpanded = !!children && isExpandedHorizontally\n\n  const InnerContent = () => (\n    <Box centerV px={1.5} py={1} w=\"100%\" whiteSpace=\"pre\">\n      <Icon ml={iconSize === 'sm' ? '4px' : 0} name={icon} size={iconSize} />\n      <T isTruncated ml={2}>\n        {title}\n      </T>\n    </Box>\n  )\n\n  const toggle = (e: MouseEvent<HTMLButtonElement>) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setIsExpandedVertically(!isExpandedVertically)\n  }\n\n  const buttonStyles = {\n    alignItems: 'center',\n    border: 'none',\n    borderRadius: 0,\n    borderLeft: !hasChildrenExpanded && children ? 'none' : '3px solid transparent',\n    borderLeftColor: isActive ? (isDark ? 'digiGreen.main' : 'seaBlue.main') : undefined,\n    bg: isDark ? 'darkBlue.main' : isActive ? 'skyBlue.95' : 'white',\n    color: hasChildrenExpanded ? 'seaBlue.main' : isDark ? 'digiGreen.main' : 'sandstone.10',\n    h: 'auto',\n    justifyContent: 'space-between',\n    onClick: () => onClick?.(),\n    pl,\n    py,\n    size: 'md',\n    variant: isDark ? 'tertiaryLight' : 'tertiaryDark',\n    w: '100%',\n    ...styles.item,\n    minH: size === 'lg' ? '56px' : '40px',\n    hoverBg: isDark ? 'seaBlue.main' : 'skyBlue.90',\n    ...rest,\n  }\n\n  return (\n    <Box flexDirection=\"column\" ref={ref} w=\"100%\">\n      {!hasChildrenExpanded && children ? (\n        <Popover offset={[0, collapsedWidth - expandedWidth - 2]} placement=\"right-start\" trigger=\"mouseenter\">\n          <Popover.Trigger as={Box} className={cs('vui-sidemenu-item-popover', className)}>\n            <Box {...buttonStyles} borderLeft={`3px solid ${isDark ? 'digiGreen.main' : 'seaBlue.main'}`}>\n              <InnerContent />\n            </Box>\n          </Popover.Trigger>\n          <Popover.Content elevation=\"none\">\n            <Box flexDirection=\"column\" justifyContent=\"start\" w=\"100%\">\n              {children}\n            </Box>\n          </Popover.Content>\n        </Popover>\n      ) : (\n        <Button className={cs('vui-sidemenu-item', className)} {...buttonStyles}>\n          <InnerContent />\n          {hasChildrenExpanded && (\n            <Button\n              aria-label={isExpandedVertically ? 'Collapse' : 'Expand'}\n              className=\"vui-sidemenu-item-expand\"\n              icon={isExpandedVertically ? 'falChevronUp' : 'falChevronDown'}\n              onClick={toggle}\n              size=\"sm\"\n              variant={isDark ? 'tertiaryLight' : 'tertiaryDark'}\n            />\n          )}\n        </Button>\n      )}\n      {!!children && hasChildrenExpanded && isExpandedVertically && (\n        <Box flexDirection=\"column\" justifyContent=\"start\" w=\"100%\">\n          {children}\n        </Box>\n      )}\n    </Box>\n  )\n}) as VuiComponent<'div', SidemenuItemProps>\n\nSidemenuItem.displayName = 'SidemenuItem'\n\nexport default SidemenuItem\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAa,eAAe,KAAkC,OAAO,QAAQ;CAC3E,MAAM,EACJ,WACA,UACA,MACA,WAAW,MACX,UACA,aAAa,MACb,KAAK,GACL,KAAK,GACL,SACA,YACA,UACA,OACA,GAAG,SACD,iBAAiB,MAAM;CAE3B,MAAM,EAAE,sBAAsB,yBAAyB,QAAQ,MAAM,wBAAwB,WAC3FA,wBAAgB,WAAW;AAE7B,iBAAgB;AACd,MAAI,qBAAsB,aAAY;AACtC,MAAI,CAAC,qBAAsB,eAAc;IACxC,CAAC,qBAAqB,CAAC;CAE1B,MAAM,sBAAsB,CAAC,CAAC,YAAY;CAE1C,MAAM,qBACJ,qBAACC;EAAI;EAAQ,IAAI;EAAK,IAAI;EAAG,GAAE;EAAO,YAAW;aAC/C,oBAACC;GAAK,IAAI,aAAa,OAAO,QAAQ;GAAG,MAAM;GAAM,MAAM;IAAY,EACvE,oBAACC;GAAE;GAAY,IAAI;aAChB;IACC;GACA;CAGR,MAAM,UAAU,MAAqC;AACnD,IAAE,gBAAgB;AAClB,IAAE,iBAAiB;AACnB,0BAAwB,CAAC,qBAAqB;;CAGhD,MAAM,eAAe;EACnB,YAAY;EACZ,QAAQ;EACR,cAAc;EACd,YAAY,CAAC,uBAAuB,WAAW,SAAS;EACxD,iBAAiB,WAAY,SAAS,mBAAmB,iBAAkB;EAC3E,IAAI,SAAS,kBAAkB,WAAW,eAAe;EACzD,OAAO,sBAAsB,iBAAiB,SAAS,mBAAmB;EAC1E,GAAG;EACH,gBAAgB;EAChB,eAAe,WAAW;EAC1B;EACA;EACA,MAAM;EACN,SAAS,SAAS,kBAAkB;EACpC,GAAG;EACH,GAAG,OAAO;EACV,MAAM,SAAS,OAAO,SAAS;EAC/B,SAAS,SAAS,iBAAiB;EACnC,GAAG;EACJ;AAED,QACE,qBAACF;EAAI,eAAc;EAAc;EAAK,GAAE;aACrC,CAAC,uBAAuB,WACvB,qBAAC;GAAQ,QAAQ,CAAC,GAAG,iBAAiB,gBAAgB,EAAE;GAAE,WAAU;GAAc,SAAQ;cACxF,oBAAC,QAAQ;IAAQ,IAAIA;IAAK,WAAW,GAAG,6BAA6B,UAAU;cAC7E,oBAACA;KAAI,GAAI;KAAc,YAAY,aAAa,SAAS,mBAAmB;eAC1E,oBAAC,iBAAe;MACZ;KACU,EAClB,oBAAC,QAAQ;IAAQ,WAAU;cACzB,oBAACA;KAAI,eAAc;KAAS,gBAAe;KAAQ,GAAE;KAClD;MACG;KACU;IACV,GAEV,qBAACG;GAAO,WAAW,GAAG,qBAAqB,UAAU;GAAE,GAAI;cACzD,oBAAC,iBAAe,EACf,uBACC,oBAACA;IACC,cAAY,uBAAuB,aAAa;IAChD,WAAU;IACV,MAAM,uBAAuB,iBAAiB;IAC9C,SAAS;IACT,MAAK;IACL,SAAS,SAAS,kBAAkB;KACpC;IAEG,EAEV,CAAC,CAAC,YAAY,uBAAuB,wBACpC,oBAACH;GAAI,eAAc;GAAS,gBAAe;GAAQ,GAAE;GAClD;IACG;GAEJ;EAER;AAEF,aAAa,cAAc;AAE3B,2BAAe"}

package/dist/sidemenu/sidemenuTop.d.ts

@@ -1,12 +1,13 @@
 import { SidemenuTopProps } from "./sidemenu.types.js";
-import * as react_jsx_runtime7 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 
 //#region src/sidemenu/sidemenuTop.d.ts
 /** Top container. */
 declare const SidemenuTop: {
-  (props: SidemenuTopProps): react_jsx_runtime7.JSX.Element | null;
+  (props: SidemenuTopProps): react_jsx_runtime3.JSX.Element | null;
   displayName: string;
 };
 //#endregion
 export { SidemenuTop };
+
 //# sourceMappingURL=sidemenuTop.d.ts.map

package/dist/sidemenu/sidemenuTop.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidemenuTop.d.ts","names":[],"sources":["../../src/sidemenu/sidemenuTop.tsx"],"sourcesContent":[],"mappings":";;;;;cAOa;UAAsB,mBAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA,CAAA,CAAA;EAAtC,WAAA,CAAA,CAAA,MAgBZ"}
+{"version":3,"file":"sidemenuTop.d.ts","names":[],"sources":["../../src/sidemenu/sidemenuTop.tsx"],"sourcesContent":[],"mappings":";;;;;cAOa;UAAsB,mBAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA;EAAtC,WAAA,EAAA,MAgBZ"}

package/dist/sidemenu/sidemenuTop.js

@@ -1,13 +1,16 @@
 import { cs } from "../utils/styles.js";
+import "../utils/index.js";
 import { omitThemingProps, useStyleConfig } from "../core/theme.js";
 import { Box } from "../box/box.js";
+import "../box/index.js";
+import "../core/index.js";
 import { collapsedWidth } from "./consts.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/sidemenu/sidemenuTop.tsx
 /** Top container. */
 const SidemenuTop = (props) => {
-	const { className, leftSlot, rightSlot,...rest } = omitThemingProps(props);
+	const { className, leftSlot, rightSlot, ...rest } = omitThemingProps(props);
 	const styles = useStyleConfig("Sidemenu", props);
 	if (!leftSlot && !rightSlot) return null;
 	return /* @__PURE__ */ jsxs(Box, {
@@ -32,5 +35,5 @@ var sidemenuTop_default = SidemenuTop;
 
 //#endregion
 export { SidemenuTop, sidemenuTop_default as default };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=sidemenuTop.js.map

package/dist/sidemenu/sidemenuTop.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidemenuTop.js","names":[],"sources":["../../src/sidemenu/sidemenuTop.tsx"],"sourcesContent":["import { Box } from '../box'\nimport { omitThemingProps, useStyleConfig } from '../core'\nimport { cs } from '../utils'\nimport { collapsedWidth } from './consts'\nimport type { SidemenuTopProps } from './sidemenu.types'\n\n/** Top container. */\nexport const SidemenuTop = (props: SidemenuTopProps) => {\n  const { className, leftSlot, rightSlot, ...rest } = omitThemingProps(props)\n  const styles = useStyleConfig('Sidemenu', props)\n\n  if (!leftSlot && !rightSlot) return null\n\n  return (\n    <Box className={cs('vui-sidemenu-top', className)} mb={1} w=\"100%\" {...styles.sidemenuTop} {...rest}>\n      {!!leftSlot && (\n        <Box alignItems=\"center\" className=\"vui-sidemenu-top-left\" minW={collapsedWidth}>\n          {leftSlot}\n        </Box>\n      )}\n      {!!rightSlot && <Box className=\"vui-sidemenu-top-left\">{rightSlot}</Box>}\n    </Box>\n  )\n}\n\nSidemenuTop.displayName = 'SidemenuTop'\n\nexport default SidemenuTop\n"],"mappings":";;;;;;;;AAOA,MAAa,eAAe,UAA4B;CACtD,MAAM,EAAE,WAAW,UAAU,UAAW,GAAG,SAAS,iBAAiB,MAAM;CAC3E,MAAM,SAAS,eAAe,YAAY,MAAM;AAEhD,KAAI,CAAC,YAAY,CAAC,UAAW,QAAO;AAEpC,QACE,qBAAC;EAAI,WAAW,GAAG,oBAAoB,UAAU;EAAE,IAAI;EAAG,GAAE;EAAO,GAAI,OAAO;EAAa,GAAI;aAC5F,CAAC,CAAC,YACD,oBAAC;GAAI,YAAW;GAAS,WAAU;GAAwB,MAAM;aAC9D;IACG,EAEP,CAAC,CAAC,aAAa,oBAAC;GAAI,WAAU;aAAyB;IAAgB;GACpE;;AAIV,YAAY,cAAc;AAE1B,0BAAe"}
+{"version":3,"file":"sidemenuTop.js","names":[],"sources":["../../src/sidemenu/sidemenuTop.tsx"],"sourcesContent":["import { Box } from '../box'\nimport { omitThemingProps, useStyleConfig } from '../core'\nimport { cs } from '../utils'\nimport { collapsedWidth } from './consts'\nimport type { SidemenuTopProps } from './sidemenu.types'\n\n/** Top container. */\nexport const SidemenuTop = (props: SidemenuTopProps) => {\n  const { className, leftSlot, rightSlot, ...rest } = omitThemingProps(props)\n  const styles = useStyleConfig('Sidemenu', props)\n\n  if (!leftSlot && !rightSlot) return null\n\n  return (\n    <Box className={cs('vui-sidemenu-top', className)} mb={1} w=\"100%\" {...styles.sidemenuTop} {...rest}>\n      {!!leftSlot && (\n        <Box alignItems=\"center\" className=\"vui-sidemenu-top-left\" minW={collapsedWidth}>\n          {leftSlot}\n        </Box>\n      )}\n      {!!rightSlot && <Box className=\"vui-sidemenu-top-left\">{rightSlot}</Box>}\n    </Box>\n  )\n}\n\nSidemenuTop.displayName = 'SidemenuTop'\n\nexport default SidemenuTop\n"],"mappings":";;;;;;;;;;;AAOA,MAAa,eAAe,UAA4B;CACtD,MAAM,EAAE,WAAW,UAAU,WAAW,GAAG,SAAS,iBAAiB,MAAM;CAC3E,MAAM,SAAS,eAAe,YAAY,MAAM;AAEhD,KAAI,CAAC,YAAY,CAAC,UAAW,QAAO;AAEpC,QACE,qBAAC;EAAI,WAAW,GAAG,oBAAoB,UAAU;EAAE,IAAI;EAAG,GAAE;EAAO,GAAI,OAAO;EAAa,GAAI;aAC5F,CAAC,CAAC,YACD,oBAAC;GAAI,YAAW;GAAS,WAAU;GAAwB,MAAM;aAC9D;IACG,EAEP,CAAC,CAAC,aAAa,oBAAC;GAAI,WAAU;aAAyB;IAAgB;GACpE;;AAIV,YAAY,cAAc;AAE1B,0BAAe"}

package/dist/sidemenu/theme.js

@@ -41,5 +41,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=theme.js.map

package/dist/sidemenu/useSidemenuItem.js

@@ -1,4 +1,5 @@
 import { useStyleConfig } from "../core/theme.js";
+import "../core/index.js";
 import { useSidemenuContext } from "./context.js";
 import { useEffect, useState } from "react";
 
@@ -23,5 +24,5 @@ var useSidemenuItem_default = useSidemenuItem;
 
 //#endregion
 export { useSidemenuItem_default as default };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=useSidemenuItem.js.map

package/dist/sidemenu/useSidemenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSidemenuItem.js","names":[],"sources":["../../src/sidemenu/useSidemenuItem.ts"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport { useStyleConfig } from '../core'\nimport { useSidemenuContext } from './context'\n\nconst useSidemenuItem = (isExpanded: boolean) => {\n  const [isExpandedVertically, setIsExpandedVertically] = useState(isExpanded)\n  const { variant, size, isExpandedHorizontally } = useSidemenuContext()\n  const styles = useStyleConfig('Sidemenu', useSidemenuContext)\n\n  useEffect(() => {\n    if (isExpanded !== isExpandedVertically) setIsExpandedVertically(isExpanded)\n  }, [isExpanded])\n\n  return {\n    isExpandedVertically,\n    isDark: variant === 'dark',\n    size,\n    isExpandedHorizontally,\n    styles,\n    setIsExpandedVertically,\n  }\n}\n\nexport default useSidemenuItem\n"],"mappings":";;;;;AAKA,MAAM,mBAAmB,eAAwB;CAC/C,MAAM,CAAC,sBAAsB,2BAA2B,SAAS,WAAW;CAC5E,MAAM,EAAE,SAAS,MAAM,2BAA2B,oBAAoB;CACtE,MAAM,SAAS,eAAe,YAAY,mBAAmB;AAE7D,iBAAgB;AACd,MAAI,eAAe,qBAAsB,yBAAwB,WAAW;IAC3E,CAAC,WAAW,CAAC;AAEhB,QAAO;EACL;EACA,QAAQ,YAAY;EACpB;EACA;EACA;EACA;EACD;;AAGH,8BAAe"}
+{"version":3,"file":"useSidemenuItem.js","names":[],"sources":["../../src/sidemenu/useSidemenuItem.ts"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport { useStyleConfig } from '../core'\nimport { useSidemenuContext } from './context'\n\nconst useSidemenuItem = (isExpanded: boolean) => {\n  const [isExpandedVertically, setIsExpandedVertically] = useState(isExpanded)\n  const { variant, size, isExpandedHorizontally } = useSidemenuContext()\n  const styles = useStyleConfig('Sidemenu', useSidemenuContext)\n\n  useEffect(() => {\n    if (isExpanded !== isExpandedVertically) setIsExpandedVertically(isExpanded)\n  }, [isExpanded])\n\n  return {\n    isExpandedVertically,\n    isDark: variant === 'dark',\n    size,\n    isExpandedHorizontally,\n    styles,\n    setIsExpandedVertically,\n  }\n}\n\nexport default useSidemenuItem\n"],"mappings":";;;;;;AAKA,MAAM,mBAAmB,eAAwB;CAC/C,MAAM,CAAC,sBAAsB,2BAA2B,SAAS,WAAW;CAC5E,MAAM,EAAE,SAAS,MAAM,2BAA2B,oBAAoB;CACtE,MAAM,SAAS,eAAe,YAAY,mBAAmB;AAE7D,iBAAgB;AACd,MAAI,eAAe,qBAAsB,yBAAwB,WAAW;IAC3E,CAAC,WAAW,CAAC;AAEhB,QAAO;EACL;EACA,QAAQ,YAAY;EACpB;EACA;EACA;EACA;EACD;;AAGH,8BAAe"}

package/dist/sidemenuV2/SidemenuItemContent.js

@@ -1,7 +1,11 @@
 import box_default from "../box/box.js";
+import "../box/index.js";
 import icon_default from "../icon/icon.js";
+import "../icon/index.js";
 import t_default from "../t/t.js";
+import "../t/index.js";
 import badge_default from "../badge/badge.js";
+import "../badge/index.js";
 import { memo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
@@ -62,5 +66,5 @@ var SidemenuItemContent_default = SidemenuItemContent;
 
 //#endregion
 export { SidemenuItemContent_default as default };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=SidemenuItemContent.js.map

package/dist/sidemenuV2/SidemenuItemContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidemenuItemContent.js","names":["T","Badge","Box","Icon"],"sources":["../../src/sidemenuV2/SidemenuItemContent.tsx"],"sourcesContent":["import { memo } from 'react'\n\nimport Badge from '../badge'\nimport type { BadgeProps } from '../badge/badge.types'\nimport Box from '../box'\nimport type { IconProp } from '../icon'\nimport Icon from '../icon'\nimport T from '../t'\n\nexport interface SidemenuItemContentProps {\n  icon?: IconProp\n  iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  title?: string\n  isMenuExpanded?: boolean\n  isInPopover?: boolean\n  badge?: Pick<BadgeProps, 'text' | 'variant'>\n  badgeLinkUrl?: string\n}\n\nconst SidemenuItemContent = memo<SidemenuItemContentProps>(\n  ({ icon, iconSize = 'sm', title, isMenuExpanded, isInPopover, badge, badgeLinkUrl }) => {\n    const iconBaseMarginLeft = 13 / 8\n    const iconMarginRight = isMenuExpanded ? 10 / 8 : 20 / 8\n\n    if (isInPopover)\n      return (\n        <>\n          <T isTruncated size=\"sm\" display=\"inline-block\" fontWeight=\"500\" ml={iconBaseMarginLeft}>\n            {title}\n          </T>\n          {badge && typeof badge === 'object' && typeof badge.text === 'string' && badge.text.trim() !== '' && (\n            <Badge\n              {...badge}\n              data-link={btoa(badgeLinkUrl ?? '#')}\n              variant={badge.variant ?? 'subtleGreen'}\n              size=\"sm\"\n              minW=\"32px\"\n              fontSize=\"12px\"\n              lineHeight=\"16px\"\n              ml=\"10px\"\n              mr=\"10px\"\n            />\n          )}\n        </>\n      )\n\n    return (\n      <>\n        <Box ml={iconBaseMarginLeft} mr={iconMarginRight} w=\"20px\" transition=\"margin 0.2s ease-in-out\">\n          {icon && <Icon name={icon} size={iconSize} />}\n        </Box>\n        <T isTruncated size=\"sm\" display=\"inline-block\">\n          {title}\n        </T>\n        {badge && typeof badge === 'object' && typeof badge.text === 'string' && badge.text.trim() !== '' && (\n          <Badge\n            {...badge}\n            data-link={btoa(badgeLinkUrl ?? '#')}\n            variant={badge.variant ?? 'subtleGreen'}\n            size=\"sm\"\n            minW=\"32px\"\n            fontSize=\"12px\"\n            lineHeight=\"16px\"\n            ml=\"10px\"\n            mr=\"10px\"\n          />\n        )}\n      </>\n    )\n  },\n)\n\nSidemenuItemContent.displayName = 'SidemenuItemContent'\n\nexport default SidemenuItemContent\n"],"mappings":";;;;;;;;AAmBA,MAAM,sBAAsB,MACzB,EAAE,MAAM,WAAW,MAAM,OAAO,gBAAgB,aAAa,OAAO,mBAAmB;CACtF,MAAM,qBAAqB,KAAK;CAChC,MAAM,kBAAkB,iBAAiB,KAAK,IAAI,KAAK;AAEvD,KAAI,YACF,QACE,8CACE,oBAACA;EAAE;EAAY,MAAK;EAAK,SAAQ;EAAe,YAAW;EAAM,IAAI;YAClE;GACC,EACH,SAAS,OAAO,UAAU,YAAY,OAAO,MAAM,SAAS,YAAY,MAAM,KAAK,MAAM,KAAK,MAC7F,oBAACC;EACC,GAAI;EACJ,aAAW,KAAK,gBAAgB,IAAI;EACpC,SAAS,MAAM,WAAW;EAC1B,MAAK;EACL,MAAK;EACL,UAAS;EACT,YAAW;EACX,IAAG;EACH,IAAG;GACH,IAEH;AAGP,QACE;EACE,oBAACC;GAAI,IAAI;GAAoB,IAAI;GAAiB,GAAE;GAAO,YAAW;aACnE,QAAQ,oBAACC;IAAK,MAAM;IAAM,MAAM;KAAY;IACzC;EACN,oBAACH;GAAE;GAAY,MAAK;GAAK,SAAQ;aAC9B;IACC;EACH,SAAS,OAAO,UAAU,YAAY,OAAO,MAAM,SAAS,YAAY,MAAM,KAAK,MAAM,KAAK,MAC7F,oBAACC;GACC,GAAI;GACJ,aAAW,KAAK,gBAAgB,IAAI;GACpC,SAAS,MAAM,WAAW;GAC1B,MAAK;GACL,MAAK;GACL,UAAS;GACT,YAAW;GACX,IAAG;GACH,IAAG;IACH;KAEH;EAGR;AAED,oBAAoB,cAAc;AAElC,kCAAe"}
+{"version":3,"file":"SidemenuItemContent.js","names":["T","Badge","Box","Icon"],"sources":["../../src/sidemenuV2/SidemenuItemContent.tsx"],"sourcesContent":["import { memo } from 'react'\n\nimport Badge from '../badge'\nimport type { BadgeProps } from '../badge/badge.types'\nimport Box from '../box'\nimport type { IconProp } from '../icon'\nimport Icon from '../icon'\nimport T from '../t'\n\nexport interface SidemenuItemContentProps {\n  icon?: IconProp\n  iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  title?: string\n  isMenuExpanded?: boolean\n  isInPopover?: boolean\n  badge?: Pick<BadgeProps, 'text' | 'variant'>\n  badgeLinkUrl?: string\n}\n\nconst SidemenuItemContent = memo<SidemenuItemContentProps>(\n  ({ icon, iconSize = 'sm', title, isMenuExpanded, isInPopover, badge, badgeLinkUrl }) => {\n    const iconBaseMarginLeft = 13 / 8\n    const iconMarginRight = isMenuExpanded ? 10 / 8 : 20 / 8\n\n    if (isInPopover)\n      return (\n        <>\n          <T isTruncated size=\"sm\" display=\"inline-block\" fontWeight=\"500\" ml={iconBaseMarginLeft}>\n            {title}\n          </T>\n          {badge && typeof badge === 'object' && typeof badge.text === 'string' && badge.text.trim() !== '' && (\n            <Badge\n              {...badge}\n              data-link={btoa(badgeLinkUrl ?? '#')}\n              variant={badge.variant ?? 'subtleGreen'}\n              size=\"sm\"\n              minW=\"32px\"\n              fontSize=\"12px\"\n              lineHeight=\"16px\"\n              ml=\"10px\"\n              mr=\"10px\"\n            />\n          )}\n        </>\n      )\n\n    return (\n      <>\n        <Box ml={iconBaseMarginLeft} mr={iconMarginRight} w=\"20px\" transition=\"margin 0.2s ease-in-out\">\n          {icon && <Icon name={icon} size={iconSize} />}\n        </Box>\n        <T isTruncated size=\"sm\" display=\"inline-block\">\n          {title}\n        </T>\n        {badge && typeof badge === 'object' && typeof badge.text === 'string' && badge.text.trim() !== '' && (\n          <Badge\n            {...badge}\n            data-link={btoa(badgeLinkUrl ?? '#')}\n            variant={badge.variant ?? 'subtleGreen'}\n            size=\"sm\"\n            minW=\"32px\"\n            fontSize=\"12px\"\n            lineHeight=\"16px\"\n            ml=\"10px\"\n            mr=\"10px\"\n          />\n        )}\n      </>\n    )\n  },\n)\n\nSidemenuItemContent.displayName = 'SidemenuItemContent'\n\nexport default SidemenuItemContent\n"],"mappings":";;;;;;;;;;;;AAmBA,MAAM,sBAAsB,MACzB,EAAE,MAAM,WAAW,MAAM,OAAO,gBAAgB,aAAa,OAAO,mBAAmB;CACtF,MAAM,qBAAqB,KAAK;CAChC,MAAM,kBAAkB,iBAAiB,KAAK,IAAI,KAAK;AAEvD,KAAI,YACF,QACE,8CACE,oBAACA;EAAE;EAAY,MAAK;EAAK,SAAQ;EAAe,YAAW;EAAM,IAAI;YAClE;GACC,EACH,SAAS,OAAO,UAAU,YAAY,OAAO,MAAM,SAAS,YAAY,MAAM,KAAK,MAAM,KAAK,MAC7F,oBAACC;EACC,GAAI;EACJ,aAAW,KAAK,gBAAgB,IAAI;EACpC,SAAS,MAAM,WAAW;EAC1B,MAAK;EACL,MAAK;EACL,UAAS;EACT,YAAW;EACX,IAAG;EACH,IAAG;GACH,IAEH;AAGP,QACE;EACE,oBAACC;GAAI,IAAI;GAAoB,IAAI;GAAiB,GAAE;GAAO,YAAW;aACnE,QAAQ,oBAACC;IAAK,MAAM;IAAM,MAAM;KAAY;IACzC;EACN,oBAACH;GAAE;GAAY,MAAK;GAAK,SAAQ;aAC9B;IACC;EACH,SAAS,OAAO,UAAU,YAAY,OAAO,MAAM,SAAS,YAAY,MAAM,KAAK,MAAM,KAAK,MAC7F,oBAACC;GACC,GAAI;GACJ,aAAW,KAAK,gBAAgB,IAAI;GACpC,SAAS,MAAM,WAAW;GAC1B,MAAK;GACL,MAAK;GACL,UAAS;GACT,YAAW;GACX,IAAG;GACH,IAAG;IACH;KAEH;EAGR;AAED,oBAAoB,cAAc;AAElC,kCAAe"}

package/dist/sidemenuV2/consts.js

@@ -4,5 +4,5 @@ const expandedWidth = 240;
 
 //#endregion
 export { collapsedWidth, expandedWidth };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=consts.js.map

package/dist/sidemenuV2/context.d.ts

@@ -1,6 +1,6 @@
 import { Dict } from "../utils/types.js";
 import "../utils/index.js";
-import * as react960 from "react";
+import * as react378 from "react";
 import { ReactNode } from "react";
 import * as react_jsx_runtime15 from "react/jsx-runtime";
 
@@ -26,7 +26,7 @@ interface SidemenuStateProviderProps {
   size?: string;
   isDark?: boolean;
 }
-declare const SidemenuProvider: react960.Provider<SidemenuContextValue>, useSidemenuContext: () => SidemenuContextValue;
+declare const SidemenuProvider: react378.Provider<SidemenuContextValue>, useSidemenuContext: () => SidemenuContextValue;
 declare const SidemenuStateProvider: ({
   children,
   isExpandedInitial,
@@ -37,4 +37,5 @@ declare const SidemenuStateProvider: ({
 }: SidemenuStateProviderProps) => react_jsx_runtime15.JSX.Element;
 //#endregion
 export { SidemenuStateProvider, useSidemenuContext };
+
 //# sourceMappingURL=context.d.ts.map

package/dist/sidemenuV2/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","names":[],"sources":["../../src/sidemenuV2/context.tsx"],"sourcesContent":[],"mappings":";;;;;;;UAMiB,oBAAA,CAAA,OAAA,CAA6B;;;;kBAO5B;EAPD,eAAA,CAAA,CAAA,CAAA,CAAA,MAAqB,CAAA,CAAA,MAAA,CAAA,CAAA,MAOpB,CAAA,CAAA,OAPgC,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA;EA4DxC,aAAA,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,CAAA,MAA0B,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA;EAS7B,aAAA,CAAA,CAAA,CAAA,CAAA,UAAgB,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA;EAAA,gBAAA,CAAA,CAAA,CAAA,CAAA,UAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA;EAAA,cAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA;EAAoB,kBAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA;EAAlB,gBAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA;AAGzB;UAZU,0BAAA,CAY4B;EAAA,QAAA,CAAA,CAX1B,SAW0B;EAAA,iBAAA,CAAA,CAAA,CAAA,OAAA;EAAA,gBAAA,CAAA,CAAA,CAAA,CAAA,UAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA;EAAA,OAAA,CAAA,CAAA,CAAA,MAAA;EAAA,IAAA,CAAA,CAAA,CAAA,MAAA;EAOnC,MAAA,CAAA,CAAA,CAAA,OAAA;;cAVI,gBAsFN,CAAA,CAtFsB,QAAA,CAAA,QAsFtB,CAtFsB,oBAsFtB,CAAA,CAAA,CAtFwB,kBAsFxB,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAtF0C,oBAsF1C;cAnFY;;;;;;;GAOV,+BAA0B,mBAAA,CAAA,GAAA,CAAA"}
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../src/sidemenuV2/context.tsx"],"sourcesContent":[],"mappings":";;;;;;;UAMiB,oBAAA,SAA6B;;;;kBAO5B;EAPD,eAAA,CAAA,EAAA,CAAA,MAAqB,EAAA,MAAA,EAAA,MAOpB,EAAA,OAPgC,EAAA,GAAA,IAAA;EA4DxC,aAAA,CAAA,EAAA,CAAA,MAAA,EAAA,MAA0B,EAAA,GAAA,IAAA;EAS7B,aAAA,CAAA,EAAA,CAAA,UAAgB,EAAA,OAAA,EAAA,GAAA,IAAA;EAAA,gBAAA,CAAA,EAAA,CAAA,UAAA,EAAA,OAAA,EAAA,GAAA,IAAA;EAAA,cAAA,CAAA,EAAA,GAAA,GAAA,IAAA;EAAoB,kBAAA,CAAA,EAAA,GAAA,GAAA,IAAA;EAAlB,gBAAA,CAAA,EAAA,GAAA,GAAA,IAAA;AAGzB;UAZU,0BAAA,CAY4B;EAAA,QAAA,EAX1B,SAW0B;EAAA,iBAAA,CAAA,EAAA,OAAA;EAAA,gBAAA,CAAA,EAAA,CAAA,UAAA,EAAA,OAAA,EAAA,GAAA,IAAA;EAAA,OAAA,CAAA,EAAA,MAAA;EAAA,IAAA,CAAA,EAAA,MAAA;EAOnC,MAAA,CAAA,EAAA,OAAA;;cAVI,gBAkGN,EAlGsB,QAAA,CAAA,QAkGtB,CAlGsB,oBAkGtB,CAAA,EAlGwB,kBAkGxB,EAAA,GAAA,GAlG0C,oBAkG1C;cA/FY;;;;;;;GAOV,+BAA0B,mBAAA,CAAA,GAAA,CAAA"}

package/dist/sidemenuV2/context.js

@@ -1,5 +1,6 @@
 import { createContext as createContext$1 } from "../utils/react.js";
-import { useCallback, useMemo, useReducer, useState } from "react";
+import "../utils/index.js";
+import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/sidemenuV2/context.tsx
@@ -34,6 +35,11 @@ const submenuReducer = (state, action) => {
 const [SidemenuProvider, useSidemenuContext] = createContext$1({ isOptional: true });
 const SidemenuStateProvider = ({ children, isExpandedInitial = true, onExpandedChange, variant, size, isDark }) => {
 	const [isExpanded, setIsExpanded] = useState(isExpandedInitial);
+	const isInternalChangeRef = useRef(false);
+	useEffect(() => {
+		if (!isInternalChangeRef.current) setIsExpanded(isExpandedInitial);
+		isInternalChangeRef.current = false;
+	}, [isExpandedInitial]);
 	const [submenuStates, dispatchSubmenu] = useReducer(submenuReducer, {});
 	const setSubmenuState = useCallback((itemId, isOpen) => {
 		dispatchSubmenu({
@@ -49,6 +55,7 @@ const SidemenuStateProvider = ({ children, isExpandedInitial = true, onExpandedC
 		});
 	}, []);
 	const handleSetIsExpanded = useCallback((newIsExpanded) => {
+		isInternalChangeRef.current = true;
 		setIsExpanded(newIsExpanded);
 		onExpandedChange?.(newIsExpanded);
 	}, [onExpandedChange]);
@@ -100,5 +107,5 @@ const SidemenuStateProvider = ({ children, isExpandedInitial = true, onExpandedC
 
 //#endregion
 export { SidemenuStateProvider, useSidemenuContext };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=context.js.map