@veracity/vui 3.2.0 → 4.0.0-floatinguitake3.2154362

package/dist/pagination/paginationGoToPage.js

@@ -10,7 +10,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/pagination/paginationGoToPage.tsx
 /** Displays a number input, which allows quickly jumping between pages. */
 const PaginationGoToPage = vui((props, ref) => {
-	const { className,...rest } = props;
+	const { className, ...rest } = props;
 	const { onPageChange, pageCount } = usePaginationContext();
 	const styles = useStyleConfig("Pagination", usePaginationContext());
 	const onChange = (e) => {
@@ -54,5 +54,5 @@ var paginationGoToPage_default = PaginationGoToPage;
 
 //#endregion
 export { PaginationGoToPage, paginationGoToPage_default as default };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=paginationGoToPage.js.map

package/dist/pagination/paginationGoToPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"paginationGoToPage.js","names":["Box","T","Input"],"sources":["../../src/pagination/paginationGoToPage.tsx"],"sourcesContent":["import type { BoxProps } from '../box'\nimport Box from '../box'\nimport { useStyleConfig, vui } from '../core'\nimport Input from '../input'\nimport T from '../t'\nimport type { ChangeEvent } from '../utils'\nimport { cs } from '../utils'\nimport { usePaginationContext } from './context'\n\n/** Displays a number input, which allows quickly jumping between pages. */\nexport const PaginationGoToPage = vui<'div', BoxProps>((props, ref) => {\n  const { className, ...rest } = props\n  const { onPageChange, pageCount } = usePaginationContext()\n  const styles = useStyleConfig('Pagination', usePaginationContext())\n\n  const onChange = (e: ChangeEvent) => {\n    const value = +e.target.value\n    if (value >= 1 && value <= pageCount) {\n      onPageChange(Math.floor(value))\n    }\n  }\n\n  return (\n    <Box\n      centerV\n      className={cs('vui-paginationGoToPage', className)}\n      lineHeight=\"normal\"\n      ref={ref}\n      {...styles.goToPage}\n      {...rest}\n    >\n      <T size=\"sm\" variant=\"navigation\" fontWeight=\"medium\">\n        Go&nbsp;to\n      </T>\n      <Input max={pageCount} min={1} mx={1} onChange={onChange} size=\"sm\" type=\"number\" w={56} />\n      <T size=\"sm\" variant=\"navigation\" fontWeight=\"medium\">\n        Page\n      </T>\n    </Box>\n  )\n})\n\nPaginationGoToPage.displayName = 'PaginationGoToPage'\n\nexport default PaginationGoToPage\n"],"mappings":";;;;;;;;;;;AAUA,MAAa,qBAAqB,KAAsB,OAAO,QAAQ;CACrE,MAAM,EAAE,UAAW,GAAG,SAAS;CAC/B,MAAM,EAAE,cAAc,cAAc,sBAAsB;CAC1D,MAAM,SAAS,eAAe,cAAc,sBAAsB,CAAC;CAEnE,MAAM,YAAY,MAAmB;EACnC,MAAM,QAAQ,CAAC,EAAE,OAAO;AACxB,MAAI,SAAS,KAAK,SAAS,UACzB,cAAa,KAAK,MAAM,MAAM,CAAC;;AAInC,QACE,qBAACA;EACC;EACA,WAAW,GAAG,0BAA0B,UAAU;EAClD,YAAW;EACN;EACL,GAAI,OAAO;EACX,GAAI;;GAEJ,oBAACC;IAAE,MAAK;IAAK,SAAQ;IAAa,YAAW;cAAS;KAElD;GACJ,oBAACC;IAAM,KAAK;IAAW,KAAK;IAAG,IAAI;IAAa;IAAU,MAAK;IAAK,MAAK;IAAS,GAAG;KAAM;GAC3F,oBAACD;IAAE,MAAK;IAAK,SAAQ;IAAa,YAAW;cAAS;KAElD;;GACA;EAER;AAEF,mBAAmB,cAAc;AAEjC,iCAAe"}
+{"version":3,"file":"paginationGoToPage.js","names":["Box","T","Input"],"sources":["../../src/pagination/paginationGoToPage.tsx"],"sourcesContent":["import type { BoxProps } from '../box'\nimport Box from '../box'\nimport { useStyleConfig, vui } from '../core'\nimport Input from '../input'\nimport T from '../t'\nimport type { ChangeEvent } from '../utils'\nimport { cs } from '../utils'\nimport { usePaginationContext } from './context'\n\n/** Displays a number input, which allows quickly jumping between pages. */\nexport const PaginationGoToPage = vui<'div', BoxProps>((props, ref) => {\n  const { className, ...rest } = props\n  const { onPageChange, pageCount } = usePaginationContext()\n  const styles = useStyleConfig('Pagination', usePaginationContext())\n\n  const onChange = (e: ChangeEvent) => {\n    const value = +e.target.value\n    if (value >= 1 && value <= pageCount) {\n      onPageChange(Math.floor(value))\n    }\n  }\n\n  return (\n    <Box\n      centerV\n      className={cs('vui-paginationGoToPage', className)}\n      lineHeight=\"normal\"\n      ref={ref}\n      {...styles.goToPage}\n      {...rest}\n    >\n      <T size=\"sm\" variant=\"navigation\" fontWeight=\"medium\">\n        Go&nbsp;to\n      </T>\n      <Input max={pageCount} min={1} mx={1} onChange={onChange} size=\"sm\" type=\"number\" w={56} />\n      <T size=\"sm\" variant=\"navigation\" fontWeight=\"medium\">\n        Page\n      </T>\n    </Box>\n  )\n})\n\nPaginationGoToPage.displayName = 'PaginationGoToPage'\n\nexport default PaginationGoToPage\n"],"mappings":";;;;;;;;;;;AAUA,MAAa,qBAAqB,KAAsB,OAAO,QAAQ;CACrE,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,EAAE,cAAc,cAAc,sBAAsB;CAC1D,MAAM,SAAS,eAAe,cAAc,sBAAsB,CAAC;CAEnE,MAAM,YAAY,MAAmB;EACnC,MAAM,QAAQ,CAAC,EAAE,OAAO;AACxB,MAAI,SAAS,KAAK,SAAS,UACzB,cAAa,KAAK,MAAM,MAAM,CAAC;;AAInC,QACE,qBAACA;EACC;EACA,WAAW,GAAG,0BAA0B,UAAU;EAClD,YAAW;EACN;EACL,GAAI,OAAO;EACX,GAAI;;GAEJ,oBAACC;IAAE,MAAK;IAAK,SAAQ;IAAa,YAAW;cAAS;KAElD;GACJ,oBAACC;IAAM,KAAK;IAAW,KAAK;IAAG,IAAI;IAAa;IAAU,MAAK;IAAK,MAAK;IAAS,GAAG;KAAM;GAC3F,oBAACD;IAAE,MAAK;IAAK,SAAQ;IAAa,YAAW;cAAS;KAElD;;GACA;EAER;AAEF,mBAAmB,cAAc;AAEjC,iCAAe"}

package/dist/pagination/paginationNavigation.d.ts

@@ -8,4 +8,5 @@ import "../index.js";
 declare const PaginationNavigation: VuiComponent<"div", BoxProps>;
 //#endregion
 export { PaginationNavigation };
+
 //# sourceMappingURL=paginationNavigation.d.ts.map

package/dist/pagination/paginationNavigation.js

@@ -13,7 +13,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/pagination/paginationNavigation.tsx
 /** Displays a set of page navigation buttons. */
 const PaginationNavigation = vui((props, ref) => {
-	const { children, className,...rest } = props;
+	const { children, className, ...rest } = props;
 	const { items } = usePaginationContext();
 	const styles = useStyleConfig("Pagination", usePaginationContext());
 	return /* @__PURE__ */ jsx(box_default, {
@@ -42,5 +42,5 @@ var paginationNavigation_default = PaginationNavigation;
 
 //#endregion
 export { PaginationNavigation, paginationNavigation_default as default };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=paginationNavigation.js.map

package/dist/pagination/paginationNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"paginationNavigation.js","names":["Box","PaginationPrevNext","PaginationButton","PaginationEllipsis"],"sources":["../../src/pagination/paginationNavigation.tsx"],"sourcesContent":["import { Fragment } from 'react'\n\nimport type { BoxProps } from '../box'\nimport Box from '../box'\nimport { useStyleConfig, vui } from '../core'\nimport { cs, isNumber, isString } from '../utils'\nimport { usePaginationContext } from './context'\nimport PaginationButton from './paginationButton'\nimport PaginationEllipsis from './paginationEllipsis'\nimport PaginationPrevNext from './paginationPrevNext'\n\n/** Displays a set of page navigation buttons. */\nexport const PaginationNavigation = vui<'div', BoxProps>((props, ref) => {\n  const { children, className, ...rest } = props\n  const { items } = usePaginationContext()\n  const styles = useStyleConfig('Pagination', usePaginationContext())\n\n  return (\n    <Box className={cs('vui-paginationNavigation', className)} gap={1} ref={ref} wrap {...styles.navigation} {...rest}>\n      {children ??\n        items.map(item => (\n          <Fragment key={item}>\n            {item === 'previous' && <PaginationPrevNext aria-label=\"previous\" direction=\"previous\" />}\n\n            {isNumber(item) && <PaginationButton page={item} />}\n\n            {isString(item) && item.includes('ellipsis') && <PaginationEllipsis />}\n\n            {item === 'next' && <PaginationPrevNext aria-label=\"next\" direction=\"next\" />}\n          </Fragment>\n        ))}\n    </Box>\n  )\n})\n\nPaginationNavigation.displayName = 'PaginationNavigation'\n\nexport default PaginationNavigation\n"],"mappings":";;;;;;;;;;;;;;AAYA,MAAa,uBAAuB,KAAsB,OAAO,QAAQ;CACvE,MAAM,EAAE,UAAU,UAAW,GAAG,SAAS;CACzC,MAAM,EAAE,UAAU,sBAAsB;CACxC,MAAM,SAAS,eAAe,cAAc,sBAAsB,CAAC;AAEnE,QACE,oBAACA;EAAI,WAAW,GAAG,4BAA4B,UAAU;EAAE,KAAK;EAAQ;EAAK;EAAK,GAAI,OAAO;EAAY,GAAI;YAC1G,YACC,MAAM,KAAI,SACR,qBAAC;GACE,SAAS,cAAc,oBAACC;IAAmB,cAAW;IAAW,WAAU;KAAa;GAExF,SAAS,KAAK,IAAI,oBAACC,4BAAiB,MAAM,OAAQ;GAElD,SAAS,KAAK,IAAI,KAAK,SAAS,WAAW,IAAI,oBAACC,+BAAqB;GAErE,SAAS,UAAU,oBAACF;IAAmB,cAAW;IAAO,WAAU;KAAS;OAPhE,KAQJ,CACX;GACA;EAER;AAEF,qBAAqB,cAAc;AAEnC,mCAAe"}
+{"version":3,"file":"paginationNavigation.js","names":["Box","PaginationPrevNext","PaginationButton","PaginationEllipsis"],"sources":["../../src/pagination/paginationNavigation.tsx"],"sourcesContent":["import { Fragment } from 'react'\n\nimport type { BoxProps } from '../box'\nimport Box from '../box'\nimport { useStyleConfig, vui } from '../core'\nimport { cs, isNumber, isString } from '../utils'\nimport { usePaginationContext } from './context'\nimport PaginationButton from './paginationButton'\nimport PaginationEllipsis from './paginationEllipsis'\nimport PaginationPrevNext from './paginationPrevNext'\n\n/** Displays a set of page navigation buttons. */\nexport const PaginationNavigation = vui<'div', BoxProps>((props, ref) => {\n  const { children, className, ...rest } = props\n  const { items } = usePaginationContext()\n  const styles = useStyleConfig('Pagination', usePaginationContext())\n\n  return (\n    <Box className={cs('vui-paginationNavigation', className)} gap={1} ref={ref} wrap {...styles.navigation} {...rest}>\n      {children ??\n        items.map(item => (\n          <Fragment key={item}>\n            {item === 'previous' && <PaginationPrevNext aria-label=\"previous\" direction=\"previous\" />}\n\n            {isNumber(item) && <PaginationButton page={item} />}\n\n            {isString(item) && item.includes('ellipsis') && <PaginationEllipsis />}\n\n            {item === 'next' && <PaginationPrevNext aria-label=\"next\" direction=\"next\" />}\n          </Fragment>\n        ))}\n    </Box>\n  )\n})\n\nPaginationNavigation.displayName = 'PaginationNavigation'\n\nexport default PaginationNavigation\n"],"mappings":";;;;;;;;;;;;;;AAYA,MAAa,uBAAuB,KAAsB,OAAO,QAAQ;CACvE,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CACzC,MAAM,EAAE,UAAU,sBAAsB;CACxC,MAAM,SAAS,eAAe,cAAc,sBAAsB,CAAC;AAEnE,QACE,oBAACA;EAAI,WAAW,GAAG,4BAA4B,UAAU;EAAE,KAAK;EAAQ;EAAK;EAAK,GAAI,OAAO;EAAY,GAAI;YAC1G,YACC,MAAM,KAAI,SACR,qBAAC;GACE,SAAS,cAAc,oBAACC;IAAmB,cAAW;IAAW,WAAU;KAAa;GAExF,SAAS,KAAK,IAAI,oBAACC,4BAAiB,MAAM,OAAQ;GAElD,SAAS,KAAK,IAAI,KAAK,SAAS,WAAW,IAAI,oBAACC,+BAAqB;GAErE,SAAS,UAAU,oBAACF;IAAmB,cAAW;IAAO,WAAU;KAAS;OAPhE,KAQJ,CACX;GACA;EAER;AAEF,qBAAqB,cAAc;AAEnC,mCAAe"}

package/dist/pagination/paginationPrevNext.d.ts

@@ -7,4 +7,5 @@ import "../index.js";
 declare const PaginationPrevNext: VuiComponent<"button", PaginationPrevNextProps>;
 //#endregion
 export { PaginationPrevNext };
+
 //# sourceMappingURL=paginationPrevNext.d.ts.map

package/dist/pagination/paginationPrevNext.js

@@ -8,7 +8,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/pagination/paginationPrevNext.tsx
 /** Displays a page navigation button, which navigates forward or backward. */
 const PaginationPrevNext = vui((props, ref) => {
-	const { className, direction,...rest } = props;
+	const { className, direction, ...rest } = props;
 	const { onPageChange, page, pageCount } = usePaginationContext();
 	const styles = useStyleConfig("Pagination", usePaginationContext());
 	const isPrev = direction === "previous";
@@ -34,5 +34,5 @@ var paginationPrevNext_default = PaginationPrevNext;
 
 //#endregion
 export { PaginationPrevNext, paginationPrevNext_default as default };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=paginationPrevNext.js.map

package/dist/pagination/paginationPrevNext.js.map

@@ -1 +1 @@
-{"version":3,"file":"paginationPrevNext.js","names":["Button"],"sources":["../../src/pagination/paginationPrevNext.tsx"],"sourcesContent":["import Button from '../button'\nimport { useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport { usePaginationContext } from './context'\nimport type { PaginationPrevNextProps } from './pagination.types'\n\n/** Displays a page navigation button, which navigates forward or backward. */\nexport const PaginationPrevNext = vui<'button', PaginationPrevNextProps>((props, ref) => {\n  const { className, direction, ...rest } = props\n  const { onPageChange, page, pageCount } = usePaginationContext()\n  const styles = useStyleConfig('Pagination', usePaginationContext())\n\n  const isPrev = direction === 'previous'\n  const pageChange = isPrev ? -1 : 1\n  const directionProps = {\n    disabled: isPrev ? page === 1 : page === pageCount,\n    icon: `falAngle${isPrev ? 'Left' : 'Right'}`,\n    onClick: () => onPageChange(page + pageChange),\n  }\n\n  return (\n    <Button\n      className={cs('vui-paginationPrevNext', className)}\n      minW={0}\n      ref={ref}\n      size=\"sm\"\n      variant=\"text\"\n      {...styles.prevNext}\n      {...directionProps}\n      {...rest}\n    />\n  )\n})\n\nPaginationPrevNext.displayName = 'PaginationPrevNext'\n\nexport default PaginationPrevNext\n"],"mappings":";;;;;;;;;AAOA,MAAa,qBAAqB,KAAwC,OAAO,QAAQ;CACvF,MAAM,EAAE,WAAW,UAAW,GAAG,SAAS;CAC1C,MAAM,EAAE,cAAc,MAAM,cAAc,sBAAsB;CAChE,MAAM,SAAS,eAAe,cAAc,sBAAsB,CAAC;CAEnE,MAAM,SAAS,cAAc;CAC7B,MAAM,aAAa,SAAS,KAAK;CACjC,MAAM,iBAAiB;EACrB,UAAU,SAAS,SAAS,IAAI,SAAS;EACzC,MAAM,WAAW,SAAS,SAAS;EACnC,eAAe,aAAa,OAAO,WAAW;EAC/C;AAED,QACE,oBAACA;EACC,WAAW,GAAG,0BAA0B,UAAU;EAClD,MAAM;EACD;EACL,MAAK;EACL,SAAQ;EACR,GAAI,OAAO;EACX,GAAI;EACJ,GAAI;GACJ;EAEJ;AAEF,mBAAmB,cAAc;AAEjC,iCAAe"}
+{"version":3,"file":"paginationPrevNext.js","names":["Button"],"sources":["../../src/pagination/paginationPrevNext.tsx"],"sourcesContent":["import Button from '../button'\nimport { useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport { usePaginationContext } from './context'\nimport type { PaginationPrevNextProps } from './pagination.types'\n\n/** Displays a page navigation button, which navigates forward or backward. */\nexport const PaginationPrevNext = vui<'button', PaginationPrevNextProps>((props, ref) => {\n  const { className, direction, ...rest } = props\n  const { onPageChange, page, pageCount } = usePaginationContext()\n  const styles = useStyleConfig('Pagination', usePaginationContext())\n\n  const isPrev = direction === 'previous'\n  const pageChange = isPrev ? -1 : 1\n  const directionProps = {\n    disabled: isPrev ? page === 1 : page === pageCount,\n    icon: `falAngle${isPrev ? 'Left' : 'Right'}`,\n    onClick: () => onPageChange(page + pageChange),\n  }\n\n  return (\n    <Button\n      className={cs('vui-paginationPrevNext', className)}\n      minW={0}\n      ref={ref}\n      size=\"sm\"\n      variant=\"text\"\n      {...styles.prevNext}\n      {...directionProps}\n      {...rest}\n    />\n  )\n})\n\nPaginationPrevNext.displayName = 'PaginationPrevNext'\n\nexport default PaginationPrevNext\n"],"mappings":";;;;;;;;;AAOA,MAAa,qBAAqB,KAAwC,OAAO,QAAQ;CACvF,MAAM,EAAE,WAAW,WAAW,GAAG,SAAS;CAC1C,MAAM,EAAE,cAAc,MAAM,cAAc,sBAAsB;CAChE,MAAM,SAAS,eAAe,cAAc,sBAAsB,CAAC;CAEnE,MAAM,SAAS,cAAc;CAC7B,MAAM,aAAa,SAAS,KAAK;CACjC,MAAM,iBAAiB;EACrB,UAAU,SAAS,SAAS,IAAI,SAAS;EACzC,MAAM,WAAW,SAAS,SAAS;EACnC,eAAe,aAAa,OAAO,WAAW;EAC/C;AAED,QACE,oBAACA;EACC,WAAW,GAAG,0BAA0B,UAAU;EAClD,MAAM;EACD;EACL,MAAK;EACL,SAAQ;EACR,GAAI,OAAO;EACX,GAAI;EACJ,GAAI;GACJ;EAEJ;AAEF,mBAAmB,cAAc;AAEjC,iCAAe"}

package/dist/pagination/paginationResults.d.ts

@@ -8,4 +8,5 @@ import "../index.js";
 declare const PaginationResults: VuiComponent<"span", TProps>;
 //#endregion
 export { PaginationResults };
+
 //# sourceMappingURL=paginationResults.d.ts.map

package/dist/pagination/paginationResults.js

@@ -8,7 +8,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/pagination/paginationResults.tsx
 /** Displays an action button within the Pagination. */
 const PaginationResults = vui((props, ref) => {
-	const { children, className,...rest } = props;
+	const { children, className, ...rest } = props;
 	const { count, rangeEnd, rangeStart } = usePaginationContext();
 	const styles = useStyleConfig("Pagination", usePaginationContext());
 	return /* @__PURE__ */ jsx(t_default, {
@@ -26,5 +26,5 @@ var paginationResults_default = PaginationResults;
 
 //#endregion
 export { PaginationResults, paginationResults_default as default };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=paginationResults.js.map

package/dist/pagination/paginationResults.js.map

@@ -1 +1 @@
-{"version":3,"file":"paginationResults.js","names":["T"],"sources":["../../src/pagination/paginationResults.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport type { TProps } from '../t'\nimport T from '../t'\nimport { cs } from '../utils'\nimport { usePaginationContext } from './context'\n\n/** Displays an action button within the Pagination. */\nexport const PaginationResults = vui<'span', TProps>((props, ref) => {\n  const { children, className, ...rest } = props\n  const { count, rangeEnd, rangeStart } = usePaginationContext()\n  const styles = useStyleConfig('Pagination', usePaginationContext())\n\n  return (\n    <T\n      className={cs('vui-paginationResults', className)}\n      ref={ref}\n      size=\"sm\"\n      {...styles.results}\n      {...rest}\n      variant=\"navigation\"\n    >\n      {children ?? `Showing ${rangeStart} to ${rangeEnd} of ${count} results.`}\n    </T>\n  )\n})\n\nPaginationResults.displayName = 'PaginationResults'\n\nexport default PaginationResults\n"],"mappings":";;;;;;;;;AAOA,MAAa,oBAAoB,KAAqB,OAAO,QAAQ;CACnE,MAAM,EAAE,UAAU,UAAW,GAAG,SAAS;CACzC,MAAM,EAAE,OAAO,UAAU,eAAe,sBAAsB;CAC9D,MAAM,SAAS,eAAe,cAAc,sBAAsB,CAAC;AAEnE,QACE,oBAACA;EACC,WAAW,GAAG,yBAAyB,UAAU;EAC5C;EACL,MAAK;EACL,GAAI,OAAO;EACX,GAAI;EACJ,SAAQ;YAEP,YAAY,WAAW,WAAW,MAAM,SAAS,MAAM,MAAM;GAC5D;EAEN;AAEF,kBAAkB,cAAc;AAEhC,gCAAe"}
+{"version":3,"file":"paginationResults.js","names":["T"],"sources":["../../src/pagination/paginationResults.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport type { TProps } from '../t'\nimport T from '../t'\nimport { cs } from '../utils'\nimport { usePaginationContext } from './context'\n\n/** Displays an action button within the Pagination. */\nexport const PaginationResults = vui<'span', TProps>((props, ref) => {\n  const { children, className, ...rest } = props\n  const { count, rangeEnd, rangeStart } = usePaginationContext()\n  const styles = useStyleConfig('Pagination', usePaginationContext())\n\n  return (\n    <T\n      className={cs('vui-paginationResults', className)}\n      ref={ref}\n      size=\"sm\"\n      {...styles.results}\n      {...rest}\n      variant=\"navigation\"\n    >\n      {children ?? `Showing ${rangeStart} to ${rangeEnd} of ${count} results.`}\n    </T>\n  )\n})\n\nPaginationResults.displayName = 'PaginationResults'\n\nexport default PaginationResults\n"],"mappings":";;;;;;;;;AAOA,MAAa,oBAAoB,KAAqB,OAAO,QAAQ;CACnE,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CACzC,MAAM,EAAE,OAAO,UAAU,eAAe,sBAAsB;CAC9D,MAAM,SAAS,eAAe,cAAc,sBAAsB,CAAC;AAEnE,QACE,oBAACA;EACC,WAAW,GAAG,yBAAyB,UAAU;EAC5C;EACL,MAAK;EACL,GAAI,OAAO;EACX,GAAI;EACJ,SAAQ;YAEP,YAAY,WAAW,WAAW,MAAM,SAAS,MAAM,MAAM;GAC5D;EAEN;AAEF,kBAAkB,cAAc;AAEhC,gCAAe"}

package/dist/pagination/theme.js

@@ -40,5 +40,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/pagination/usePagination.d.ts

@@ -1,13 +1,13 @@
 import { UsePaginationProps } from "./usePagination.types.js";
 import { PaginationItem } from "./pagination.types.js";
-import * as react948 from "react";
+import * as react3 from "react";
 
 //#region src/pagination/usePagination.d.ts
 /** Hook to manage pagination data and state in controlled or uncontrolled way. */
 declare function usePagination(props: UsePaginationProps): {
   count: number;
   items: PaginationItem[];
-  onPageChange: react948.Dispatch<react948.SetStateAction<number>>;
+  onPageChange: react3.Dispatch<react3.SetStateAction<number>>;
   page: number;
   pageCount: number;
   pageSize: number;
@@ -17,4 +17,5 @@ declare function usePagination(props: UsePaginationProps): {
 type UsePaginationReturnType = ReturnType<typeof usePagination>;
 //#endregion
 export { UsePaginationReturnType, usePagination };
+
 //# sourceMappingURL=usePagination.d.ts.map

package/dist/pagination/usePagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePagination.d.ts","names":[],"sources":["../../src/pagination/usePagination.ts"],"sourcesContent":[],"mappings":";;;;;;iBAOwB,aAAA,QAAqB;;SAAkB,cAAA,CAAA;EAAvC,YAAA,CAAA,kBAAa,wBAAA,CAAA,MAAA,CAAA,CAAA;EAAQ,IAAA,CAAA,CAAA,MAAA;EAAkB,SAAA,CAAA,CAAA,MAAA;;;;AAyC/D,CAAA;KAAY,uBAAA,CAAA,CAAA,CAA0B,kBAAkB"}
+{"version":3,"file":"usePagination.d.ts","names":[],"sources":["../../src/pagination/usePagination.ts"],"sourcesContent":[],"mappings":";;;;;;iBAOwB,aAAA,QAAqB;;SAAkB,cAAA;EAAvC,YAAA,iBAAa,sBAAA,CAAA,MAAA,CAAA,CAAA;EAAQ,IAAA,EAAA,MAAA;EAAkB,SAAA,EAAA,MAAA;;;;AAyC/D,CAAA;KAAY,uBAAA,GAA0B,kBAAkB"}

package/dist/pagination/usePagination.js

@@ -39,5 +39,5 @@ function usePagination(props) {
 
 //#endregion
 export { usePagination as default };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=usePagination.js.map

package/dist/pagination/usePagination.types.d.ts

@@ -13,4 +13,5 @@ type UsePaginationProps = {
 };
 //#endregion
 export { UsePaginationProps };
+
 //# sourceMappingURL=usePagination.types.d.ts.map

package/dist/pagination/usePagination.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePagination.types.d.ts","names":[],"sources":["../../src/pagination/usePagination.types.ts"],"sourcesContent":[],"mappings":";KAAY,kBAAA,CAAA,CAAA;EAAA,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,MAAA,CAAA,EAAA,CAAA,KAAA,CAAA,KAAA,CAAA,SAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"usePagination.types.d.ts","names":[],"sources":["../../src/pagination/usePagination.types.ts"],"sourcesContent":[],"mappings":";KAAY,kBAAA;EAAA"}

package/dist/panel/index.d.ts

@@ -1,2 +1,2 @@
 import { PanelProps } from "./panel.types.js";
-import { Panel } from "./panel.js";
+import { Panel } from "./panel.js";

package/dist/panel/panel.d.ts

@@ -10,4 +10,5 @@ import "../index.js";
 declare const Panel: VuiComponent<"div", PanelProps>;
 //#endregion
 export { Panel };
+
 //# sourceMappingURL=panel.d.ts.map

package/dist/panel/panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"panel.d.ts","names":[],"sources":["../../src/panel/panel.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;AASa,OAAA,CAAA,KAAA,CAAA,KAAK,CAAA,CAAA,YAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,UAAA,CAAA"}
+{"version":3,"file":"panel.d.ts","names":[],"sources":["../../src/panel/panel.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;AASa,cAAA,KAAK,EAAA,YAAA,CAAA,KAAA,EAAA,UAAA,CAAA"}

package/dist/panel/panel.js

@@ -10,7 +10,7 @@ import { jsx } from "react/jsx-runtime";
 * Supports use cases of showing multiple segments of a page, each focusing on different data type or context.
 */
 const Panel = vui((props, ref) => {
-	const { className,...rest } = omitThemingProps(props);
+	const { className, ...rest } = omitThemingProps(props);
 	const styles = useStyleConfig("Panel", props);
 	return /* @__PURE__ */ jsx(box_default, {
 		bg: "white",
@@ -25,5 +25,5 @@ Panel.displayName = "Panel";
 
 //#endregion
 export { Panel };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=panel.js.map

package/dist/panel/panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"panel.js","names":["Box"],"sources":["../../src/panel/panel.tsx"],"sourcesContent":["import Box from '../box'\nimport { omitThemingProps, useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport type { PanelProps } from './panel.types'\n\n/**\n * Displays static or partially interactive content, such as text, images or buttons.\n * Supports use cases of showing multiple segments of a page, each focusing on different data type or context.\n */\nexport const Panel = vui<'div', PanelProps>((props, ref) => {\n  const { className, ...rest } = omitThemingProps(props)\n  const styles = useStyleConfig('Panel', props)\n\n  return <Box bg=\"white\" className={cs('vui-panel', className)} p={2} ref={ref} {...styles} {...rest} />\n})\n\nPanel.displayName = 'Panel'\n\nexport default Panel\n"],"mappings":";;;;;;;;;;;AASA,MAAa,QAAQ,KAAwB,OAAO,QAAQ;CAC1D,MAAM,EAAE,UAAW,GAAG,SAAS,iBAAiB,MAAM;CACtD,MAAM,SAAS,eAAe,SAAS,MAAM;AAE7C,QAAO,oBAACA;EAAI,IAAG;EAAQ,WAAW,GAAG,aAAa,UAAU;EAAE,GAAG;EAAQ;EAAK,GAAI;EAAQ,GAAI;GAAQ;EACtG;AAEF,MAAM,cAAc"}
+{"version":3,"file":"panel.js","names":["Box"],"sources":["../../src/panel/panel.tsx"],"sourcesContent":["import Box from '../box'\nimport { omitThemingProps, useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport type { PanelProps } from './panel.types'\n\n/**\n * Displays static or partially interactive content, such as text, images or buttons.\n * Supports use cases of showing multiple segments of a page, each focusing on different data type or context.\n */\nexport const Panel = vui<'div', PanelProps>((props, ref) => {\n  const { className, ...rest } = omitThemingProps(props)\n  const styles = useStyleConfig('Panel', props)\n\n  return <Box bg=\"white\" className={cs('vui-panel', className)} p={2} ref={ref} {...styles} {...rest} />\n})\n\nPanel.displayName = 'Panel'\n\nexport default Panel\n"],"mappings":";;;;;;;;;;;AASA,MAAa,QAAQ,KAAwB,OAAO,QAAQ;CAC1D,MAAM,EAAE,WAAW,GAAG,SAAS,iBAAiB,MAAM;CACtD,MAAM,SAAS,eAAe,SAAS,MAAM;AAE7C,QAAO,oBAACA;EAAI,IAAG;EAAQ,WAAW,GAAG,aAAa,UAAU;EAAE,GAAG;EAAQ;EAAK,GAAI;EAAQ,GAAI;GAAQ;EACtG;AAEF,MAAM,cAAc"}

package/dist/panel/panel.types.d.ts

@@ -6,4 +6,5 @@ import "../box/index.js";
 type PanelProps = Omit<BoxProps, 'size' | 'variant'> & ThemingProps<'Panel'> & {};
 //#endregion
 export { PanelProps };
+
 //# sourceMappingURL=panel.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"panel.types.d.ts","names":[],"sources":["../../src/panel/panel.types.ts"],"sourcesContent":[],"mappings":";;;;;KAGY,UAAA,CAAA,CAAA,CAAa,KAAK,gCAAgC"}
+{"version":3,"file":"panel.types.d.ts","names":[],"sources":["../../src/panel/panel.types.ts"],"sourcesContent":[],"mappings":";;;;;KAGY,UAAA,GAAa,KAAK,gCAAgC"}

package/dist/panel/theme.js

@@ -18,5 +18,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/popover/context.d.ts

@@ -1,9 +1,10 @@
 import { Dict } from "../utils/types.js";
 import "../utils/index.js";
-import * as react941 from "react";
+import * as react5 from "react";
 
 //#region src/popover/context.d.ts
-declare const PopoverProvider: react941.Provider<Dict>, usePopoverContext: () => Dict;
+declare const PopoverProvider: react5.Provider<Dict>, usePopoverContext: () => Dict;
 //#endregion
 export { PopoverProvider, usePopoverContext };
+
 //# sourceMappingURL=context.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","names":[],"sources":["../../src/popover/context.ts"],"sourcesContent":[],"mappings":";;;;;cAGO,iBAAe,QAAA,CAAA,SAAA,OAAE,yBAAiB"}
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../src/popover/context.ts"],"sourcesContent":[],"mappings":";;;;;cAGO,iBAAe,MAAA,CAAA,SAAA,OAAE,yBAAiB"}

package/dist/popover/context.js

@@ -5,5 +5,5 @@ const [PopoverProvider, usePopoverContext] = createContext({ isOptional: true })
 
 //#endregion
 export { PopoverProvider, usePopoverContext };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=context.js.map

package/dist/popover/index.d.ts

@@ -1,8 +1,7 @@
-import { closeOnEscPlugin, matchWidthModifier } from "./consts.js";
 import { PopoverProvider, usePopoverContext } from "./context.js";
-import { UsePopoverProps } from "./usePopover.types.js";
+import { Placement, UsePopoverProps } from "./usePopover.types.js";
 import { usePopover } from "./usePopover.js";
 import { PopoverContentProps, PopoverProps, PopoverRenderProps, PopoverTriggerProps } from "./popover.types.js";
 import { Popover } from "./popover.js";
 import { PopoverContent } from "./popoverContent.js";
-import { PopoverTrigger } from "./popoverTrigger.js";
+import { PopoverTrigger } from "./popoverTrigger.js";

package/dist/popover/popover.d.ts

@@ -3,14 +3,14 @@ import { BoxProps } from "../box/box.types.js";
 import { VuiComponent } from "../core/vui.js";
 import { PopoverProps } from "./popover.types.js";
 import "../index.js";
-import * as react_jsx_runtime6 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/popover/popover.d.ts
 /**
  * Uses 'usePopover' hook to expose relevant data to its children parts.
  * By default, renders provided content only when popover is opened (lazy).
  */
-declare function Popover(props: PopoverProps): react_jsx_runtime6.JSX.Element;
+declare function Popover(props: PopoverProps): react_jsx_runtime0.JSX.Element;
 declare namespace Popover {
   var Content: VuiComponent<"div", BoxProps>;
   var Trigger: VuiComponent<"button", SystemProps>;
@@ -18,4 +18,5 @@ declare namespace Popover {
 }
 //#endregion
 export { Popover };
+
 //# sourceMappingURL=popover.d.ts.map

package/dist/popover/popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","names":[],"sources":["../../src/popover/popover.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;;iBAWwB,OAAA,QAAe,eAAY,kBAAA,CAAA,GAAA,CAAA;kBAA3B,OAAA;mCAAO,QAAA;EAAP,GAAA,CAAA,OAAO,CAAA,aAAoB,CAAA,CAAA,MAAA,CAAA,CAAA,aAAA;EAA3B,GAAA,CAAA,WAAO,CAAA,CAAA,MAAA"}
+{"version":3,"file":"popover.d.ts","names":[],"sources":["../../src/popover/popover.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;;iBAWwB,OAAA,QAAe,eAAY,kBAAA,CAAA,GAAA,CAAA;kBAA3B,OAAA;mCAAO,QAAA;EAAP,IAAA,OAAO,cAAoB,CAAA,QAAA,cAAA;EAA3B,IAAA,WAAO,EAAA,MAAA"}

package/dist/popover/popover.js

@@ -12,11 +12,8 @@ import { jsx } from "react/jsx-runtime";
 * By default, renders provided content only when popover is opened (lazy).
 */
 function Popover(props) {
-	const { children, isLazy = true, options,...rest } = props;
-	const popoverProps = usePopover({
-		options,
-		...rest
-	});
+	const { children, isLazy = true, ...rest } = props;
+	const popoverProps = usePopover(rest);
 	const { close, isOpen, open } = popoverProps;
 	return /* @__PURE__ */ jsx(PopoverProvider, {
 		value: filterUndefined({
@@ -36,5 +33,5 @@ Popover.displayName = "Popover";
 
 //#endregion
 export { Popover as default };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=popover.js.map

package/dist/popover/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","names":["PopoverContent","PopoverTrigger"],"sources":["../../src/popover/popover.tsx"],"sourcesContent":["import { filterUndefined, runIfFn } from '../utils'\nimport { PopoverProvider } from './context'\nimport type { PopoverProps } from './popover.types'\nimport PopoverContent from './popoverContent'\nimport PopoverTrigger from './popoverTrigger'\nimport usePopover from './usePopover'\n\n/**\n * Uses 'usePopover' hook to expose relevant data to its children parts.\n * By default, renders provided content only when popover is opened (lazy).\n */\nexport default function Popover(props: PopoverProps) {\n  const { children, isLazy = true, options, ...rest } = props\n  const popoverProps = usePopover({ options, ...rest })\n  const { close, isOpen, open } = popoverProps\n  const context = filterUndefined({ isLazy, ...popoverProps })\n\n  return <PopoverProvider value={context}>{runIfFn(children, { close, isOpen, open })}</PopoverProvider>\n}\n\nPopover.Content = PopoverContent\nPopover.Trigger = PopoverTrigger\nPopover.displayName = 'Popover'\n"],"mappings":";;;;;;;;;;;;;AAWA,SAAwB,QAAQ,OAAqB;CACnD,MAAM,EAAE,UAAU,SAAS,MAAM,QAAS,GAAG,SAAS;CACtD,MAAM,eAAe,WAAW;EAAE;EAAS,GAAG;EAAM,CAAC;CACrD,MAAM,EAAE,OAAO,QAAQ,SAAS;AAGhC,QAAO,oBAAC;EAAgB,OAFR,gBAAgB;GAAE;GAAQ,GAAG;GAAc,CAAC;YAEnB,QAAQ,UAAU;GAAE;GAAO;GAAQ;GAAM,CAAC;GAAmB;;AAGxG,QAAQ,UAAUA;AAClB,QAAQ,UAAUC;AAClB,QAAQ,cAAc"}
+{"version":3,"file":"popover.js","names":["PopoverContent","PopoverTrigger"],"sources":["../../src/popover/popover.tsx"],"sourcesContent":["import { filterUndefined, runIfFn } from '../utils'\nimport { PopoverProvider } from './context'\nimport type { PopoverProps } from './popover.types'\nimport PopoverContent from './popoverContent'\nimport PopoverTrigger from './popoverTrigger'\nimport usePopover from './usePopover'\n\n/**\n * Uses 'usePopover' hook to expose relevant data to its children parts.\n * By default, renders provided content only when popover is opened (lazy).\n */\nexport default function Popover(props: PopoverProps) {\n  const { children, isLazy = true, ...rest } = props\n  const popoverProps = usePopover(rest)\n  const { close, isOpen, open } = popoverProps\n  const context = filterUndefined({ isLazy, ...popoverProps })\n\n  return <PopoverProvider value={context}>{runIfFn(children, { close, isOpen, open })}</PopoverProvider>\n}\n\nPopover.Content = PopoverContent\nPopover.Trigger = PopoverTrigger\nPopover.displayName = 'Popover'\n"],"mappings":";;;;;;;;;;;;;AAWA,SAAwB,QAAQ,OAAqB;CACnD,MAAM,EAAE,UAAU,SAAS,MAAM,GAAG,SAAS;CAC7C,MAAM,eAAe,WAAW,KAAK;CACrC,MAAM,EAAE,OAAO,QAAQ,SAAS;AAGhC,QAAO,oBAAC;EAAgB,OAFR,gBAAgB;GAAE;GAAQ,GAAG;GAAc,CAAC;YAEnB,QAAQ,UAAU;GAAE;GAAO;GAAQ;GAAM,CAAC;GAAmB;;AAGxG,QAAQ,UAAUA;AAClB,QAAQ,UAAUC;AAClB,QAAQ,cAAc"}

package/dist/popover/popover.types.d.ts

@@ -6,7 +6,6 @@ import { BoxProps } from "../box/box.types.js";
 import "../box/index.js";
 import { UsePopoverProps } from "./usePopover.types.js";
 import { UsePopoverType } from "./usePopover.js";
-import { TippyProps } from "@tippyjs/react";
 
 //#region src/popover/popover.types.d.ts
 type PopoverContentProps = BoxProps;
@@ -15,8 +14,6 @@ type PopoverProps = UsePopoverProps & {
   children?: PopoverRenderProps;
   /** Mounts provided content only when popover is opened for performance. @default true */
   isLazy?: boolean;
-  /** Object with any Tippy props. */
-  options?: Partial<TippyProps>;
 };
 type PopoverRenderProps = RenderProps<{
   close: UsePopoverType['close'];
@@ -26,4 +23,5 @@ type PopoverRenderProps = RenderProps<{
 type PopoverTriggerProps = SystemProps;
 //#endregion
 export { PopoverContentProps, PopoverProps, PopoverRenderProps, PopoverTriggerProps };
+
 //# sourceMappingURL=popover.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"popover.types.d.ts","names":[],"sources":["../../src/popover/popover.types.ts"],"sourcesContent":[],"mappings":";;;;;;;;;;;KAQY,mBAAA,CAAA,CAAA,CAAsB;KAEtB,YAAA,CAAA,CAAA,CAAe;;aAEd;;EAJD,MAAA,CAAA,CAAA,CAAA,OAAA;EAEA,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,IAAA,CAAA,GAAA,CAAA,KAAA,CAAA,KAAA,CAAA,CAAA,CAAA;EAAe,OAAA,CAAA,CAAA,CAMf,OANe,CAMP,UANO,CAAA;CAEd;AAIO,IAAA,CAGR,kBAAA,CAAA,CAAA,CAAqB,WAHb,CAAA;EAAR,KAAA,CAAA,CAIH,cAJG,CAAA,CAAA,KAAA,CAAA,CAAA;EAAO,MAAA,CAAA,CAKT,cALS,CAAA,CAAA,MAAA,CAAA,CAAA;EAGP,IAAA,CAAA,CAGJ,cAHI,CAAkB,CAAA,IAAA,CAAA,CAAA;CACrB,CAAA;AACC,IAAA,CAIE,mBAAA,CAAA,CAAA,CAAsB,WAJxB"}
+{"version":3,"file":"popover.types.d.ts","names":[],"sources":["../../src/popover/popover.types.ts"],"sourcesContent":[],"mappings":";;;;;;;;;;KAMY,mBAAA,GAAsB;KAEtB,YAAA,GAAe;;aAEd;;EAJD,MAAA,CAAA,EAAA,OAAA;AAEZ,CAAA;AAOY,KAAA,kBAAA,GAAqB,WAAH,CAAA;EACrB,KAAA,EAAA,cAAA,CAAA,OAAA,CAAA;EACC,MAAA,EAAA,cAAA,CAAA,QAAA,CAAA;EACF,IAAA,EAAA,cAAA,CAAA,MAAA,CAAA;CAHyB,CAAA;AAAW,KAMhC,mBAAA,GAAsB,WANU"}

package/dist/popover/popoverContent.d.ts

@@ -7,4 +7,5 @@ import "../index.js";
 declare const PopoverContent: VuiComponent<"div", BoxProps>;
 //#endregion
 export { PopoverContent };
+
 //# sourceMappingURL=popoverContent.d.ts.map

package/dist/popover/popoverContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popoverContent.d.ts","names":[],"sources":["../../src/popover/popoverContent.tsx"],"sourcesContent":[],"mappings":";;;;;;cAOa,gBAAc,oBA0BzB,QAAA"}
+{"version":3,"file":"popoverContent.d.ts","names":[],"sources":["../../src/popover/popoverContent.tsx"],"sourcesContent":[],"mappings":";;;;;;cASa,gBAAc,oBAmCzB,QAAA"}

package/dist/popover/popoverContent.js

@@ -1,26 +1,27 @@
 import { mergeRefs } from "../utils/react.js";
 import { cs } from "../utils/styles.js";
 import { useStyleConfig } from "../core/theme.js";
-import { v } from "../core/styled.js";
 import { vui } from "../core/vui.js";
 import box_default from "../box/box.js";
 import { usePopoverContext } from "./context.js";
 import { jsx } from "react/jsx-runtime";
+import { FloatingFocusManager, FloatingPortal } from "@floating-ui/react";
 
 //#region src/popover/popoverContent.tsx
 /** Displays provided content in an overlaying wrapper. */
 const PopoverContent = vui((props, ref) => {
-	const { children, className,...rest } = props;
+	const { children, className, ...rest } = props;
 	const popoverProps = usePopoverContext() ?? {};
-	const { isLazy, isOpen, setPopper } = popoverProps;
+	const { context, floatingStyles, getFloatingProps, isLazy, isMounted, isOpen, setPopper, transitionStyles } = popoverProps;
 	const styles = useStyleConfig("Popover", {
 		...popoverProps,
 		...props
 	});
 	const shouldRenderChildren = isLazy ? isOpen : true;
-	return /* @__PURE__ */ jsx(v.div, {
-		className: "vui-popoverContainer",
-		ring: 0,
+	if (!isMounted) return null;
+	return /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(FloatingFocusManager, {
+		context,
+		modal: false,
 		children: /* @__PURE__ */ jsx(box_default, {
 			bg: "white",
 			borderRadius: "md",
@@ -29,16 +30,21 @@ const PopoverContent = vui((props, ref) => {
 			overflowY: "auto",
 			ref: mergeRefs(setPopper, ref),
 			ring: 0,
+			style: {
+				...floatingStyles,
+				...transitionStyles
+			},
+			...getFloatingProps?.() ?? {},
 			...styles.content,
 			...rest,
 			children: shouldRenderChildren ? children : null
 		})
-	});
+	}) });
 });
 PopoverContent.displayName = "PopoverContent";
 var popoverContent_default = PopoverContent;
 
 //#endregion
 export { popoverContent_default as default };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=popoverContent.js.map

package/dist/popover/popoverContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"popoverContent.js","names":["Box"],"sources":["../../src/popover/popoverContent.tsx"],"sourcesContent":["import Box from '../box'\nimport { useStyleConfig, v, vui } from '../core'\nimport { cs, mergeRefs } from '../utils'\nimport { usePopoverContext } from './context'\nimport type { PopoverContentProps } from './popover.types'\n\n/** Displays provided content in an overlaying wrapper. */\nexport const PopoverContent = vui<'div', PopoverContentProps>((props, ref) => {\n  const { children, className, ...rest } = props\n  const popoverProps = usePopoverContext() ?? {}\n  const { isLazy, isOpen, setPopper } = popoverProps\n  const styles = useStyleConfig('Popover', { ...popoverProps, ...props })\n\n  const shouldRenderChildren = isLazy ? isOpen : true\n\n  return (\n    // Wrapping div prevents an error thrown when conditionally unmounting this component\n    <v.div className=\"vui-popoverContainer\" ring={0}>\n      <Box\n        bg=\"white\"\n        borderRadius=\"md\"\n        boxShadow=\"2\"\n        className={cs('vui-popoverContent', className)}\n        overflowY=\"auto\"\n        ref={mergeRefs(setPopper, ref)}\n        ring={0}\n        {...styles.content}\n        {...rest}\n      >\n        {shouldRenderChildren ? children : null}\n      </Box>\n    </v.div>\n  )\n})\n\nPopoverContent.displayName = 'PopoverContent'\n\nexport default PopoverContent\n"],"mappings":";;;;;;;;;;;AAOA,MAAa,iBAAiB,KAAiC,OAAO,QAAQ;CAC5E,MAAM,EAAE,UAAU,UAAW,GAAG,SAAS;CACzC,MAAM,eAAe,mBAAmB,IAAI,EAAE;CAC9C,MAAM,EAAE,QAAQ,QAAQ,cAAc;CACtC,MAAM,SAAS,eAAe,WAAW;EAAE,GAAG;EAAc,GAAG;EAAO,CAAC;CAEvE,MAAM,uBAAuB,SAAS,SAAS;AAE/C,QAEE,oBAAC,EAAE;EAAI,WAAU;EAAuB,MAAM;YAC5C,oBAACA;GACC,IAAG;GACH,cAAa;GACb,WAAU;GACV,WAAW,GAAG,sBAAsB,UAAU;GAC9C,WAAU;GACV,KAAK,UAAU,WAAW,IAAI;GAC9B,MAAM;GACN,GAAI,OAAO;GACX,GAAI;aAEH,uBAAuB,WAAW;IAC/B;GACA;EAEV;AAEF,eAAe,cAAc;AAE7B,6BAAe"}
+{"version":3,"file":"popoverContent.js","names":["Box"],"sources":["../../src/popover/popoverContent.tsx"],"sourcesContent":["import { FloatingFocusManager, FloatingPortal } from '@floating-ui/react'\n\nimport Box from '../box'\nimport { useStyleConfig, vui } from '../core'\nimport { cs, mergeRefs } from '../utils'\nimport { usePopoverContext } from './context'\nimport type { PopoverContentProps } from './popover.types'\n\n/** Displays provided content in an overlaying wrapper. */\nexport const PopoverContent = vui<'div', PopoverContentProps>((props, ref) => {\n  const { children, className, ...rest } = props\n  const popoverProps = usePopoverContext() ?? {}\n  const { context, floatingStyles, getFloatingProps, isLazy, isMounted, isOpen, setPopper, transitionStyles } =\n    popoverProps\n  const styles = useStyleConfig('Popover', { ...popoverProps, ...props })\n\n  const shouldRenderChildren = isLazy ? isOpen : true\n\n  // Use isMounted for render control - handles transition timing\n  if (!isMounted) {\n    return null\n  }\n\n  return (\n    <FloatingPortal>\n      <FloatingFocusManager context={context} modal={false}>\n        <Box\n          bg=\"white\"\n          borderRadius=\"md\"\n          boxShadow=\"2\"\n          className={cs('vui-popoverContent', className)}\n          overflowY=\"auto\"\n          ref={mergeRefs(setPopper, ref)}\n          ring={0}\n          style={{ ...floatingStyles, ...transitionStyles }}\n          {...(getFloatingProps?.() ?? {})}\n          {...styles.content}\n          {...rest}\n        >\n          {shouldRenderChildren ? children : null}\n        </Box>\n      </FloatingFocusManager>\n    </FloatingPortal>\n  )\n})\n\nPopoverContent.displayName = 'PopoverContent'\n\nexport default PopoverContent\n"],"mappings":";;;;;;;;;;;AASA,MAAa,iBAAiB,KAAiC,OAAO,QAAQ;CAC5E,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CACzC,MAAM,eAAe,mBAAmB,IAAI,EAAE;CAC9C,MAAM,EAAE,SAAS,gBAAgB,kBAAkB,QAAQ,WAAW,QAAQ,WAAW,qBACvF;CACF,MAAM,SAAS,eAAe,WAAW;EAAE,GAAG;EAAc,GAAG;EAAO,CAAC;CAEvE,MAAM,uBAAuB,SAAS,SAAS;AAG/C,KAAI,CAAC,UACH,QAAO;AAGT,QACE,oBAAC,4BACC,oBAAC;EAA8B;EAAS,OAAO;YAC7C,oBAACA;GACC,IAAG;GACH,cAAa;GACb,WAAU;GACV,WAAW,GAAG,sBAAsB,UAAU;GAC9C,WAAU;GACV,KAAK,UAAU,WAAW,IAAI;GAC9B,MAAM;GACN,OAAO;IAAE,GAAG;IAAgB,GAAG;IAAkB;GACjD,GAAK,oBAAoB,IAAI,EAAE;GAC/B,GAAI,OAAO;GACX,GAAI;aAEH,uBAAuB,WAAW;IAC/B;GACe,GACR;EAEnB;AAEF,eAAe,cAAc;AAE7B,6BAAe"}

package/dist/popover/popoverTrigger.d.ts

@@ -10,4 +10,5 @@ import "../index.js";
 declare const PopoverTrigger: VuiComponent<"button", SystemProps>;
 //#endregion
 export { PopoverTrigger };
+
 //# sourceMappingURL=popoverTrigger.d.ts.map

package/dist/popover/popoverTrigger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popoverTrigger.d.ts","names":[],"sources":["../../src/popover/popoverTrigger.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;cAUa,gBAAc,uBAwBzB,WAAA"}
+{"version":3,"file":"popoverTrigger.d.ts","names":[],"sources":["../../src/popover/popoverTrigger.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;cAUa,gBAAc,uBA2BzB,WAAA"}

package/dist/popover/popoverTrigger.js

@@ -12,8 +12,8 @@ import { jsx } from "react/jsx-runtime";
 * Can be rendered as any component using the 'as' prop. By default renders as a plain button.
 */
 const PopoverTrigger = vui((props, ref) => {
-	const { as, className, onClick: onClickProp,...rest } = props;
-	const { setReference, isOpen,...popoverProps } = usePopoverContext() ?? {};
+	const { as, className, onClick: onClickProp, ...rest } = props;
+	const { getReferenceProps, setReference, isOpen, ...popoverProps } = usePopoverContext() ?? {};
 	const styles = useStyleConfig("Popover", {
 		...popoverProps,
 		...props
@@ -23,11 +23,13 @@ const PopoverTrigger = vui((props, ref) => {
 		e.stopPropagation();
 		onClickProp?.(e);
 	};
+	const referenceProps = getReferenceProps?.() ?? {};
 	return /* @__PURE__ */ jsx(Element, {
 		isActive: isOpen,
 		className: cs("vui-popoverTrigger", className),
 		onClick,
 		ref: mergeRefs(setReference, ref),
+		...referenceProps,
 		...styles.trigger,
 		...rest
 	});
@@ -37,5 +39,5 @@ var popoverTrigger_default = PopoverTrigger;
 
 //#endregion
 export { popoverTrigger_default as default };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=popoverTrigger.js.map

package/dist/popover/popoverTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"popoverTrigger.js","names":[],"sources":["../../src/popover/popoverTrigger.tsx"],"sourcesContent":["import { useStyleConfig, v, vui } from '../core'\nimport type { MouseEvent } from '../utils'\nimport { cs, mergeRefs } from '../utils'\nimport { usePopoverContext } from './context'\nimport type { PopoverTriggerProps } from './popover.types'\n\n/**\n * Displays a trigger component to toggle display of the popover content.\n * Can be rendered as any component using the 'as' prop. By default renders as a plain button.\n */\nexport const PopoverTrigger = vui<'button', PopoverTriggerProps>((props, ref) => {\n  // @ts-expect-error TS incorrectly doesn't recognize 'as' prop\n  const { as, className, onClick: onClickProp, ...rest } = props\n  const { setReference, isOpen, ...popoverProps } = usePopoverContext() ?? {}\n  const styles = useStyleConfig('Popover', { ...popoverProps, ...props })\n\n  const Element = as || v.button\n\n  const onClick = (e: MouseEvent<HTMLButtonElement>) => {\n    // Avoids triggering parent's onClick, like when inside a ListItem\n    e.stopPropagation()\n    onClickProp?.(e)\n  }\n\n  return (\n    <Element\n      isActive={isOpen}\n      className={cs('vui-popoverTrigger', className)}\n      onClick={onClick}\n      ref={mergeRefs(setReference, ref)}\n      {...styles.trigger}\n      {...rest}\n    />\n  )\n})\n\nPopoverTrigger.displayName = 'PopoverTrigger'\n\nexport default PopoverTrigger\n"],"mappings":";;;;;;;;;;;;;AAUA,MAAa,iBAAiB,KAAoC,OAAO,QAAQ;CAE/E,MAAM,EAAE,IAAI,WAAW,SAAS,YAAa,GAAG,SAAS;CACzD,MAAM,EAAE,cAAc,OAAQ,GAAG,iBAAiB,mBAAmB,IAAI,EAAE;CAC3E,MAAM,SAAS,eAAe,WAAW;EAAE,GAAG;EAAc,GAAG;EAAO,CAAC;CAEvE,MAAM,UAAU,MAAM,EAAE;CAExB,MAAM,WAAW,MAAqC;AAEpD,IAAE,iBAAiB;AACnB,gBAAc,EAAE;;AAGlB,QACE,oBAAC;EACC,UAAU;EACV,WAAW,GAAG,sBAAsB,UAAU;EACrC;EACT,KAAK,UAAU,cAAc,IAAI;EACjC,GAAI,OAAO;EACX,GAAI;GACJ;EAEJ;AAEF,eAAe,cAAc;AAE7B,6BAAe"}
+{"version":3,"file":"popoverTrigger.js","names":[],"sources":["../../src/popover/popoverTrigger.tsx"],"sourcesContent":["import { useStyleConfig, v, vui } from '../core'\nimport type { MouseEvent } from '../utils'\nimport { cs, mergeRefs } from '../utils'\nimport { usePopoverContext } from './context'\nimport type { PopoverTriggerProps } from './popover.types'\n\n/**\n * Displays a trigger component to toggle display of the popover content.\n * Can be rendered as any component using the 'as' prop. By default renders as a plain button.\n */\nexport const PopoverTrigger = vui<'button', PopoverTriggerProps>((props, ref) => {\n  // @ts-expect-error TS incorrectly doesn't recognize 'as' prop\n  const { as, className, onClick: onClickProp, ...rest } = props\n  const { getReferenceProps, setReference, isOpen, ...popoverProps } = usePopoverContext() ?? {}\n  const styles = useStyleConfig('Popover', { ...popoverProps, ...props })\n\n  const Element = as || v.button\n\n  const onClick = (e: MouseEvent<HTMLButtonElement>) => {\n    // Avoids triggering parent's onClick, like when inside a ListItem\n    e.stopPropagation()\n    onClickProp?.(e)\n  }\n\n  const referenceProps = getReferenceProps?.() ?? {}\n\n  return (\n    <Element\n      isActive={isOpen}\n      className={cs('vui-popoverTrigger', className)}\n      onClick={onClick}\n      ref={mergeRefs(setReference, ref)}\n      {...referenceProps}\n      {...styles.trigger}\n      {...rest}\n    />\n  )\n})\n\nPopoverTrigger.displayName = 'PopoverTrigger'\n\nexport default PopoverTrigger\n"],"mappings":";;;;;;;;;;;;;AAUA,MAAa,iBAAiB,KAAoC,OAAO,QAAQ;CAE/E,MAAM,EAAE,IAAI,WAAW,SAAS,aAAa,GAAG,SAAS;CACzD,MAAM,EAAE,mBAAmB,cAAc,QAAQ,GAAG,iBAAiB,mBAAmB,IAAI,EAAE;CAC9F,MAAM,SAAS,eAAe,WAAW;EAAE,GAAG;EAAc,GAAG;EAAO,CAAC;CAEvE,MAAM,UAAU,MAAM,EAAE;CAExB,MAAM,WAAW,MAAqC;AAEpD,IAAE,iBAAiB;AACnB,gBAAc,EAAE;;CAGlB,MAAM,iBAAiB,qBAAqB,IAAI,EAAE;AAElD,QACE,oBAAC;EACC,UAAU;EACV,WAAW,GAAG,sBAAsB,UAAU;EACrC;EACT,KAAK,UAAU,cAAc,IAAI;EACjC,GAAI;EACJ,GAAI,OAAO;EACX,GAAI;GACJ;EAEJ;AAEF,eAAe,cAAc;AAE7B,6BAAe"}

package/dist/popover/theme.js

@@ -14,5 +14,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