@veracity/vui 3.1.2 → 4.0.0-floatinguitake3.2154362

package/dist/popover/usePopover.js

@@ -1,106 +1,93 @@
 import { useCallbackRef } from "../utils/react.js";
-import { closeOnEscPlugin, matchWidthModifier } from "./consts.js";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import tippy from "tippy.js";
+import { useCallback, useEffect, useState } from "react";
+import { autoUpdate, flip, offset, shift, size, useClick, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole, useTransitionStyles } from "@floating-ui/react";
 
 //#region src/popover/usePopover.ts
 /**
-* Controls the logic of instantiating and managing a tippy instance.
+* Controls the logic of positioning and managing a floating popover.
 * Takes multiple configuration props that control closing, placement or behavior.
-* Exposes functions used for ref callbacks on consuming components, programatic open/close methods and properties.
+* Exposes functions used for ref callbacks on consuming components, programmatic open/close methods and properties.
 */
 function usePopover(props = {}) {
-	const { closeOnBlur = true, closeOnEsc = true, defaultIsOpen = false, flip = true, isOpen: isOpenProp, matchWidth, offset, onClose: onCloseProp, onOpen: onOpenProp, options, placement = "bottom-start", trigger = "click" } = props;
-	const [isOpen, setIsOpen] = useState(isOpenProp ?? defaultIsOpen);
-	const [instance, setInstance] = useState(null);
-	const [reference, setReference] = useState(null);
-	const [popper, setPopper] = useState(null);
-	const close = useCallback(() => instance?.hide(), [instance]);
+	const { closeOnBlur = true, closeOnEsc = true, defaultIsOpen = false, flip: flip$1 = true, isOpen: isOpenProp, matchWidth, offset: offset$1, onClose: onCloseProp, onOpen: onOpenProp, placement = "bottom-start", trigger = "click" } = props;
+	const isControlled = isOpenProp !== void 0;
+	const [isOpenState, setIsOpenState] = useState(defaultIsOpen);
+	const isOpen = isControlled ? isOpenProp : isOpenState;
 	const onClose = useCallbackRef(onCloseProp);
 	const onOpen = useCallbackRef(onOpenProp);
-	const open = useCallback(() => instance?.show(), [instance]);
-	const isControlled = isOpenProp !== void 0;
-	const tippyOptions = useMemo(() => {
-		const { aria, offset: optionsOffset, onHidden, onHide, onShow, plugins = [], popperOptions = {},...otherOptions } = options ?? {};
-		return {
-			aria,
-			arrow: false,
-			duration: [200, 150],
-			hideOnClick: !isControlled ? closeOnBlur : false,
-			interactive: true,
-			maxWidth: "none",
-			offset: optionsOffset ?? offset ?? [0, 4],
-			onHidden: (instance$1) => {
-				setIsOpen(false);
-				onHidden?.(instance$1);
-			},
-			onHide: (instance$1) => {
-				onClose(instance$1);
-				onHide?.(instance$1);
-			},
-			onShow: (instance$1) => {
-				setIsOpen(true);
-				onOpen(instance$1);
-				onShow?.(instance$1);
-			},
-			placement,
-			plugins: [...!isControlled && closeOnEsc ? [closeOnEscPlugin] : [], ...plugins],
-			popperOptions: {
-				...popperOptions,
-				modifiers: [
-					{
-						name: "flip",
-						enabled: flip
-					},
-					{
-						...matchWidthModifier,
-						enabled: !!matchWidth
-					},
-					...popperOptions.modifiers ?? []
-				]
-			},
-			showOnCreate: isOpenProp ?? defaultIsOpen,
-			trigger: !isControlled ? trigger : "manual",
-			...otherOptions
-		};
+	const setIsOpen = useCallback((open$1) => {
+		if (!isControlled) setIsOpenState(open$1);
+		if (open$1) onOpen();
+		else onClose();
 	}, [
-		closeOnBlur,
-		closeOnEsc,
-		offset,
-		options,
-		placement,
-		trigger
+		isControlled,
+		onOpen,
+		onClose
 	]);
-	useEffect(() => {
-		if (popper !== null && reference !== null) {
-			instance?.destroy();
-			setInstance(tippy(reference, {
-				...tippyOptions,
-				content: popper
-			}));
-		}
-	}, [
-		popper,
-		tippyOptions,
-		trigger
+	const close = useCallback(() => setIsOpen(false), [setIsOpen]);
+	const open = useCallback(() => setIsOpen(true), [setIsOpen]);
+	const { refs, floatingStyles, context } = useFloating({
+		open: isOpen,
+		onOpenChange: setIsOpen,
+		placement,
+		middleware: [
+			offset({
+				mainAxis: offset$1?.[1] ?? 4,
+				crossAxis: offset$1?.[0] ?? 0
+			}),
+			flip$1 && flip(),
+			shift({ padding: 5 }),
+			matchWidth && size({ apply({ rects, elements }) {
+				Object.assign(elements.floating.style, { width: `${rects.reference.width}px` });
+			} })
+		].filter(Boolean),
+		whileElementsMounted: autoUpdate
+	});
+	const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {
+		duration: 150,
+		initial: { opacity: 0 },
+		open: { opacity: 1 },
+		close: { opacity: 0 }
+	});
+	const clickEnabled = trigger === "click" && !isControlled;
+	const hoverEnabled = trigger === "mouseenter" && !isControlled;
+	const focusEnabled = (trigger === "focus" || trigger === "focusin") && !isControlled;
+	const { getReferenceProps, getFloatingProps } = useInteractions([
+		useClick(context, { enabled: clickEnabled }),
+		useHover(context, {
+			enabled: hoverEnabled,
+			move: false
+		}),
+		useFocus(context, { enabled: focusEnabled }),
+		useDismiss(context, {
+			enabled: !isControlled,
+			escapeKey: closeOnEsc,
+			outsidePress: closeOnBlur
+		}),
+		useRole(context)
 	]);
 	useEffect(() => {
-		if (isControlled) if (isOpenProp) instance?.show();
-		else instance?.hide();
-	}, [isOpenProp]);
+		if (isControlled) setIsOpenState(isOpenProp);
+	}, [isControlled, isOpenProp]);
 	return {
 		close,
-		instance,
+		context,
+		floatingStyles,
+		getFloatingProps,
+		getReferenceProps,
+		isMounted,
 		isOpen,
 		open,
-		popper,
-		reference,
-		setPopper,
-		setReference
+		popper: refs.floating.current,
+		reference: refs.reference.current,
+		refs,
+		setPopper: refs.setFloating,
+		setReference: refs.setReference,
+		transitionStyles
 	};
 }
 
 //#endregion
 export { usePopover as default };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=usePopover.js.map

package/dist/popover/usePopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePopover.js","names":["tippyOptions: Partial<TippyProps>","instance"],"sources":["../../src/popover/usePopover.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react'\nimport type { Instance, Props as TippyProps } from 'tippy.js'\nimport tippy from 'tippy.js'\n\nimport { useCallbackRef } from '../utils'\nimport { closeOnEscPlugin, matchWidthModifier } from './consts'\nimport type { UsePopoverProps } from './usePopover.types'\n\n/**\n * Controls the logic of instantiating and managing a tippy instance.\n * Takes multiple configuration props that control closing, placement or behavior.\n * Exposes functions used for ref callbacks on consuming components, programatic open/close methods and properties.\n */\nexport default function usePopover(props: UsePopoverProps = {}) {\n  const {\n    closeOnBlur = true,\n    closeOnEsc = true,\n    defaultIsOpen = false,\n    flip = true,\n    isOpen: isOpenProp,\n    matchWidth,\n    offset,\n    onClose: onCloseProp,\n    onOpen: onOpenProp,\n    options,\n    placement = 'bottom-start',\n    trigger = 'click',\n  } = props\n\n  const [isOpen, setIsOpen] = useState(isOpenProp ?? defaultIsOpen)\n  const [instance, setInstance] = useState<Instance | null>(null)\n  const [reference, setReference] = useState<HTMLElement | null>(null)\n  const [popper, setPopper] = useState<HTMLElement | null>(null)\n\n  const close = useCallback(() => instance?.hide(), [instance])\n  const onClose = useCallbackRef(onCloseProp)\n  const onOpen = useCallbackRef(onOpenProp)\n  const open = useCallback(() => instance?.show(), [instance])\n\n  const isControlled = isOpenProp !== undefined\n\n  const tippyOptions: Partial<TippyProps> = useMemo(() => {\n    const {\n      aria,\n      offset: optionsOffset,\n      onHidden,\n      onHide,\n      onShow,\n      plugins = [],\n      popperOptions = {},\n      ...otherOptions\n    } = options ?? {}\n\n    return {\n      aria,\n      arrow: false,\n      duration: [200, 150],\n      hideOnClick: !isControlled ? closeOnBlur : false,\n      interactive: true,\n      maxWidth: 'none',\n      offset: optionsOffset ?? offset ?? [0, 4],\n      onHidden: instance => {\n        setIsOpen(false)\n        onHidden?.(instance)\n      },\n      onHide: instance => {\n        onClose(instance)\n        onHide?.(instance)\n      },\n      onShow: instance => {\n        setIsOpen(true)\n        onOpen(instance)\n        onShow?.(instance)\n      },\n      placement,\n      plugins: [...(!isControlled && closeOnEsc ? [closeOnEscPlugin] : []), ...plugins],\n      popperOptions: {\n        ...popperOptions,\n        modifiers: [\n          {\n            name: 'flip',\n            enabled: flip,\n          },\n          { ...matchWidthModifier, enabled: !!matchWidth },\n          ...(popperOptions.modifiers ?? []),\n        ],\n      },\n      showOnCreate: isOpenProp ?? defaultIsOpen,\n      trigger: !isControlled ? trigger : 'manual',\n      ...otherOptions,\n    }\n  }, [closeOnBlur, closeOnEsc, offset, options, placement, trigger])\n\n  // Create a new Tippy instance\n  useEffect(() => {\n    if (popper !== null && reference !== null) {\n      // Destroy old instance to ensure new options work\n      instance?.destroy()\n\n      const newInstance = tippy(reference, {\n        ...tippyOptions,\n        content: popper,\n      })\n\n      setInstance(newInstance)\n    }\n  }, [popper, tippyOptions, trigger])\n\n  // Handle showing/hiding popup in controlled mode\n  useEffect(() => {\n    if (isControlled) {\n      if (isOpenProp) instance?.show()\n      else instance?.hide()\n    }\n  }, [isOpenProp])\n\n  return {\n    close,\n    instance,\n    isOpen,\n    open,\n    popper,\n    reference,\n    setPopper,\n    setReference,\n  }\n}\n\nexport type UsePopoverType = ReturnType<typeof usePopover>\n"],"mappings":";;;;;;;;;;;AAaA,SAAwB,WAAW,QAAyB,EAAE,EAAE;CAC9D,MAAM,EACJ,cAAc,MACd,aAAa,MACb,gBAAgB,OAChB,OAAO,MACP,QAAQ,YACR,YACA,QACA,SAAS,aACT,QAAQ,YACR,SACA,YAAY,gBACZ,UAAU,YACR;CAEJ,MAAM,CAAC,QAAQ,aAAa,SAAS,cAAc,cAAc;CACjE,MAAM,CAAC,UAAU,eAAe,SAA0B,KAAK;CAC/D,MAAM,CAAC,WAAW,gBAAgB,SAA6B,KAAK;CACpE,MAAM,CAAC,QAAQ,aAAa,SAA6B,KAAK;CAE9D,MAAM,QAAQ,kBAAkB,UAAU,MAAM,EAAE,CAAC,SAAS,CAAC;CAC7D,MAAM,UAAU,eAAe,YAAY;CAC3C,MAAM,SAAS,eAAe,WAAW;CACzC,MAAM,OAAO,kBAAkB,UAAU,MAAM,EAAE,CAAC,SAAS,CAAC;CAE5D,MAAM,eAAe,eAAe;CAEpC,MAAMA,eAAoC,cAAc;EACtD,MAAM,EACJ,MACA,QAAQ,eACR,UACA,QACA,QACA,UAAU,EAAE,EACZ,gBAAgB,EAAE,CAClB,GAAG,iBACD,WAAW,EAAE;AAEjB,SAAO;GACL;GACA,OAAO;GACP,UAAU,CAAC,KAAK,IAAI;GACpB,aAAa,CAAC,eAAe,cAAc;GAC3C,aAAa;GACb,UAAU;GACV,QAAQ,iBAAiB,UAAU,CAAC,GAAG,EAAE;GACzC,WAAU,eAAY;AACpB,cAAU,MAAM;AAChB,eAAWC,WAAS;;GAEtB,SAAQ,eAAY;AAClB,YAAQA,WAAS;AACjB,aAASA,WAAS;;GAEpB,SAAQ,eAAY;AAClB,cAAU,KAAK;AACf,WAAOA,WAAS;AAChB,aAASA,WAAS;;GAEpB;GACA,SAAS,CAAC,GAAI,CAAC,gBAAgB,aAAa,CAAC,iBAAiB,GAAG,EAAE,EAAG,GAAG,QAAQ;GACjF,eAAe;IACb,GAAG;IACH,WAAW;KACT;MACE,MAAM;MACN,SAAS;MACV;KACD;MAAE,GAAG;MAAoB,SAAS,CAAC,CAAC;MAAY;KAChD,GAAI,cAAc,aAAa,EAAE;KAClC;IACF;GACD,cAAc,cAAc;GAC5B,SAAS,CAAC,eAAe,UAAU;GACnC,GAAG;GACJ;IACA;EAAC;EAAa;EAAY;EAAQ;EAAS;EAAW;EAAQ,CAAC;AAGlE,iBAAgB;AACd,MAAI,WAAW,QAAQ,cAAc,MAAM;AAEzC,aAAU,SAAS;AAOnB,eALoB,MAAM,WAAW;IACnC,GAAG;IACH,SAAS;IACV,CAAC,CAEsB;;IAEzB;EAAC;EAAQ;EAAc;EAAQ,CAAC;AAGnC,iBAAgB;AACd,MAAI,aACF,KAAI,WAAY,WAAU,MAAM;MAC3B,WAAU,MAAM;IAEtB,CAAC,WAAW,CAAC;AAEhB,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD"}
+{"version":3,"file":"usePopover.js","names":["open","offsetMiddleware","offset","flip","flipMiddleware"],"sources":["../../src/popover/usePopover.ts"],"sourcesContent":["import {\n  autoUpdate,\n  flip as flipMiddleware,\n  offset as offsetMiddleware,\n  shift,\n  size,\n  useClick,\n  useDismiss,\n  useFloating,\n  useFocus,\n  useHover,\n  useInteractions,\n  useRole,\n  useTransitionStyles,\n} from '@floating-ui/react'\nimport { useCallback, useEffect, useState } from 'react'\n\nimport { useCallbackRef } from '../utils'\nimport type { UsePopoverProps } from './usePopover.types'\n\n/**\n * Controls the logic of positioning and managing a floating popover.\n * Takes multiple configuration props that control closing, placement or behavior.\n * Exposes functions used for ref callbacks on consuming components, programmatic open/close methods and properties.\n */\nexport default function usePopover(props: UsePopoverProps = {}) {\n  const {\n    closeOnBlur = true,\n    closeOnEsc = true,\n    defaultIsOpen = false,\n    flip = true,\n    isOpen: isOpenProp,\n    matchWidth,\n    offset,\n    onClose: onCloseProp,\n    onOpen: onOpenProp,\n    placement = 'bottom-start',\n    trigger = 'click',\n  } = props\n\n  const isControlled = isOpenProp !== undefined\n  const [isOpenState, setIsOpenState] = useState(defaultIsOpen)\n  const isOpen = isControlled ? isOpenProp : isOpenState\n\n  const onClose = useCallbackRef(onCloseProp)\n  const onOpen = useCallbackRef(onOpenProp)\n\n  const setIsOpen = useCallback(\n    (open: boolean) => {\n      if (!isControlled) {\n        setIsOpenState(open)\n      }\n      if (open) {\n        onOpen()\n      } else {\n        onClose()\n      }\n    },\n    [isControlled, onOpen, onClose],\n  )\n\n  const close = useCallback(() => setIsOpen(false), [setIsOpen])\n  const open = useCallback(() => setIsOpen(true), [setIsOpen])\n\n  // Build middleware array\n  const middleware = [\n    offsetMiddleware({ mainAxis: offset?.[1] ?? 4, crossAxis: offset?.[0] ?? 0 }),\n    flip && flipMiddleware(),\n    shift({ padding: 5 }),\n    matchWidth &&\n      size({\n        apply({ rects, elements }) {\n          Object.assign(elements.floating.style, {\n            width: `${rects.reference.width}px`,\n          })\n        },\n      }),\n  ].filter(Boolean)\n\n  const { refs, floatingStyles, context } = useFloating({\n    open: isOpen,\n    onOpenChange: setIsOpen,\n    placement,\n    middleware,\n    whileElementsMounted: autoUpdate,\n  })\n\n  // Opacity-only transition - no position movement\n  const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {\n    duration: 150,\n    initial: { opacity: 0 },\n    open: { opacity: 1 },\n    close: { opacity: 0 },\n  })\n\n  // Interaction hooks based on trigger type\n  const clickEnabled = trigger === 'click' && !isControlled\n  const hoverEnabled = trigger === 'mouseenter' && !isControlled\n  const focusEnabled = (trigger === 'focus' || trigger === 'focusin') && !isControlled\n\n  const click = useClick(context, { enabled: clickEnabled })\n  const hover = useHover(context, { enabled: hoverEnabled, move: false })\n  const focus = useFocus(context, { enabled: focusEnabled })\n  const dismiss = useDismiss(context, {\n    enabled: !isControlled,\n    escapeKey: closeOnEsc,\n    outsidePress: closeOnBlur,\n  })\n  const role = useRole(context)\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([click, hover, focus, dismiss, role])\n\n  // Sync controlled state\n  useEffect(() => {\n    if (isControlled) {\n      setIsOpenState(isOpenProp)\n    }\n  }, [isControlled, isOpenProp])\n\n  return {\n    close,\n    context,\n    floatingStyles,\n    getFloatingProps,\n    getReferenceProps,\n    isMounted,\n    isOpen,\n    open,\n    popper: refs.floating.current,\n    reference: refs.reference.current as HTMLElement | null,\n    refs,\n    setPopper: refs.setFloating,\n    setReference: refs.setReference,\n    transitionStyles,\n  }\n}\n\nexport type UsePopoverType = ReturnType<typeof usePopover>\n"],"mappings":";;;;;;;;;;AAyBA,SAAwB,WAAW,QAAyB,EAAE,EAAE;CAC9D,MAAM,EACJ,cAAc,MACd,aAAa,MACb,gBAAgB,OAChB,eAAO,MACP,QAAQ,YACR,YACA,kBACA,SAAS,aACT,QAAQ,YACR,YAAY,gBACZ,UAAU,YACR;CAEJ,MAAM,eAAe,eAAe;CACpC,MAAM,CAAC,aAAa,kBAAkB,SAAS,cAAc;CAC7D,MAAM,SAAS,eAAe,aAAa;CAE3C,MAAM,UAAU,eAAe,YAAY;CAC3C,MAAM,SAAS,eAAe,WAAW;CAEzC,MAAM,YAAY,aACf,WAAkB;AACjB,MAAI,CAAC,aACH,gBAAeA,OAAK;AAEtB,MAAIA,OACF,SAAQ;MAER,UAAS;IAGb;EAAC;EAAc;EAAQ;EAAQ,CAChC;CAED,MAAM,QAAQ,kBAAkB,UAAU,MAAM,EAAE,CAAC,UAAU,CAAC;CAC9D,MAAM,OAAO,kBAAkB,UAAU,KAAK,EAAE,CAAC,UAAU,CAAC;CAiB5D,MAAM,EAAE,MAAM,gBAAgB,YAAY,YAAY;EACpD,MAAM;EACN,cAAc;EACd;EACA,YAlBiB;GACjBC,OAAiB;IAAE,UAAUC,WAAS,MAAM;IAAG,WAAWA,WAAS,MAAM;IAAG,CAAC;GAC7EC,UAAQC,MAAgB;GACxB,MAAM,EAAE,SAAS,GAAG,CAAC;GACrB,cACE,KAAK,EACH,MAAM,EAAE,OAAO,YAAY;AACzB,WAAO,OAAO,SAAS,SAAS,OAAO,EACrC,OAAO,GAAG,MAAM,UAAU,MAAM,KACjC,CAAC;MAEL,CAAC;GACL,CAAC,OAAO,QAAQ;EAOf,sBAAsB;EACvB,CAAC;CAGF,MAAM,EAAE,WAAW,QAAQ,qBAAqB,oBAAoB,SAAS;EAC3E,UAAU;EACV,SAAS,EAAE,SAAS,GAAG;EACvB,MAAM,EAAE,SAAS,GAAG;EACpB,OAAO,EAAE,SAAS,GAAG;EACtB,CAAC;CAGF,MAAM,eAAe,YAAY,WAAW,CAAC;CAC7C,MAAM,eAAe,YAAY,gBAAgB,CAAC;CAClD,MAAM,gBAAgB,YAAY,WAAW,YAAY,cAAc,CAAC;CAYxE,MAAM,EAAE,mBAAmB,qBAAqB,gBAAgB;EAVlD,SAAS,SAAS,EAAE,SAAS,cAAc,CAAC;EAC5C,SAAS,SAAS;GAAE,SAAS;GAAc,MAAM;GAAO,CAAC;EACzD,SAAS,SAAS,EAAE,SAAS,cAAc,CAAC;EAC1C,WAAW,SAAS;GAClC,SAAS,CAAC;GACV,WAAW;GACX,cAAc;GACf,CAAC;EACW,QAAQ,QAAQ;EAEuE,CAAC;AAGrG,iBAAgB;AACd,MAAI,aACF,gBAAe,WAAW;IAE3B,CAAC,cAAc,WAAW,CAAC;AAE9B,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,QAAQ,KAAK,SAAS;EACtB,WAAW,KAAK,UAAU;EAC1B;EACA,WAAW,KAAK;EAChB,cAAc,KAAK;EACnB;EACD"}

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

@@ -1,6 +1,6 @@
 import { AnyString } from "../utils/types.js";
 import "../utils/index.js";
-import { Instance, Placement, Props } from "tippy.js";
+import { Placement as Placement$1 } from "@floating-ui/react";
 
 //#region src/popover/usePopover.types.d.ts
 type PopoverTrigger = 'click' | 'focus' | 'focusin' | 'manual' | 'mouseenter';
@@ -17,19 +17,18 @@ type UsePopoverProps = {
   isOpen?: boolean;
   /** Sets the content element width to be the same as trigger element. */
   matchWidth?: boolean;
-  /** Displaces content from the trigger in pixels. */
-  offset?: Props['offset'];
+  /** Displaces content from the trigger in pixels. [skidding, distance] */
+  offset?: [number, number];
   /** Invoked once content is fully hidden. */
-  onClose?: (instance: Instance<Props>) => void;
+  onClose?: () => void;
   /** Invoked once content begins to show. */
-  onOpen?: (instance: Instance<Props>) => void;
-  /** Object with any Tippy props. */
-  options?: Partial<Props>;
+  onOpen?: () => void;
   /** Preferred placement of the content. Might be flipped if needs more space. */
-  placement?: Placement;
-  /** Determintes the events that cause the content to show. */
+  placement?: Placement$1;
+  /** Determines the events that cause the content to show. */
   trigger?: PopoverTrigger | AnyString;
 };
 //#endregion
-export { UsePopoverProps };
+export { type Placement$1 as Placement, UsePopoverProps };
+
 //# sourceMappingURL=usePopover.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"usePopover.types.d.ts","names":[],"sources":["../../src/popover/usePopover.types.ts"],"sourcesContent":[],"mappings":";;;;;KAIY,cAAA,CAAA,CAAA;KAEA,eAAA,CAAA,CAAA;;EAFA,WAAA,CAAA,CAAA,CAAA,OAAc;EAEd,CAAA,CAAA,CAAA,CAAA,OAAA,CAAA,MAAA,CAAA,IAAA,CAAA,QAAA,CAAA,CAAA,MAAA,CAAA,CAAA,CAAA,CAAA,OAAA,CAAA,IAAA,CAAA,CAAA;EAcD,UAAA,CAAA,CAAA,CAAA,OAAA;EAEqB,CAAA,CAAA,CAAA,CAAA,OAAA,CAAA,EAAA,CAAA,MAAA,CAAA,EAAA,CAAA,KAAA,CAAA,MAAA,CAAA,CAAA,YAAA,CAAA,IAAA,CAAA,CAAA,CAAA;EAAT,aAAA,CAAA,CAAA,CAAA,OAAA;EAEQ,CAAA,CAAA,CAAA,CAAA,OAAA,CAAA,SAAA,CAAA,KAAA,CAAA,EAAA,CAAA,OAAA,CAAA,EAAA,CAAA,GAAA,CAAA,QAAA,CAAA,SAAA,CAAA,EAAA,CAAA,SAAA,CAAA,KAAA,CAAA,CAAA,CAAA;EAAT,IAAA,CAAA,CAAA,CAAA,OAAA;EAEF,CAAA,CAAA,CAAA,CAAA,OAAA,CAAA,EAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,CAAA,GAAA,CAAA,QAAA,CAAA,CAAA,UAAA,CAAA,IAAA,CAAA,CAAA,CAAA;EAAR,MAAA,CAAA,CAAA,CAAA,OAAA;EAEE,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,GAAA,CAAA,OAAA,CAAA,OAAA,CAAA,KAAA,CAAA,EAAA,CAAA,EAAA,CAAA,GAAA,CAAA,IAAA,CAAA,EAAA,CAAA,OAAA,CAAA,OAAA,CAAA,CAAA,CAAA;EAEF,UAAA,CAAA,CAAA,CAAA,OAAA;EAAiB,CAAA,CAAA,CAAA,CAAA,SAAA,CAAA,OAAA,CAAA,IAAA,CAAA,GAAA,CAAA,OAAA,CAAA,EAAA,CAAA,MAAA,CAAA,CAAA,CAAA;EAAS,MAAA,CAAA,CAAA,CAV3B,KAU2B,CAAA,CAAA,MAAA,CAAA,CAAA;;uBARf,SAAS;;sBAEV,SAAS;;YAEnB,QAAQ;;cAEN;;YAEF,iBAAiB"}
+{"version":3,"file":"usePopover.types.d.ts","names":[],"sources":["../../src/popover/usePopover.types.ts"],"sourcesContent":[],"mappings":";;;;;KAIY,cAAA;KAEA,eAAA;;EAFA,WAAA,CAAA,EAAA,OAAc;EAEd;EAoBE,UAAA,CAAA,EAAA,OAAA;EAEF;EAAiB,aAAA,CAAA,EAAA,OAAA;EAAS;;;;;;;;;;;;;cAFxB;;YAEF,iBAAiB"}

package/dist/portal/index.d.ts

@@ -1,2 +1,2 @@
 import { PortalProps } from "./portal.types.js";
-import { Portal } from "./portal.js";
+import { Portal } from "./portal.js";

package/dist/portal/portal.d.ts

@@ -8,4 +8,5 @@ import { FC } from "react";
 declare const Portal: FC<PortalProps & ChildrenProp>;
 //#endregion
 export { Portal };
+
 //# sourceMappingURL=portal.d.ts.map

package/dist/portal/portal.js

@@ -18,5 +18,5 @@ var portal_default = Portal;
 
 //#endregion
 export { Portal, portal_default as default };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=portal.js.map

package/dist/portal/portal.types.d.ts

@@ -9,4 +9,5 @@ type PortalProps = {
 };
 //#endregion
 export { PortalProps };
+
 //# sourceMappingURL=portal.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"portal.types.d.ts","names":[],"sources":["../../src/portal/portal.types.ts"],"sourcesContent":[],"mappings":";;;KAEY,WAAA,CAAA,CAAA;;EAAA,YAAA,CAAA,CAAA,CAEK,SAFM,CAEI,WAAA,CAAA,CAAA,CAAA,IAAV,CAAA"}
+{"version":3,"file":"portal.types.d.ts","names":[],"sources":["../../src/portal/portal.types.ts"],"sourcesContent":[],"mappings":";;;KAEY,WAAA;;EAAA,YAAA,CAAA,EAEK,SAFM,CAEI,WAAA,GAAA,IAAV,CAAA"}

package/dist/progress/index.d.ts

@@ -1,2 +1,2 @@
 import { ProgressProps } from "./progress.types.js";
-import { Progress, ProgressBase } from "./progress.js";
+import { Progress, ProgressBase } from "./progress.js";

package/dist/progress/progress.d.ts

@@ -2,12 +2,13 @@ import { SystemProps } from "../system/system.js";
 import { VuiComponent } from "../core/vui.js";
 import { ProgressProps } from "./progress.types.js";
 import "../index.js";
-import * as styled_components406 from "styled-components";
+import * as styled_components11 from "styled-components";
 
 //#region src/progress/progress.d.ts
-declare const ProgressBase: styled_components406.StyledComponent<"div", styled_components406.DefaultTheme, SystemProps, never>;
+declare const ProgressBase: styled_components11.StyledComponent<"div", styled_components11.DefaultTheme, SystemProps, never>;
 /** Indicates a process progress. */
 declare const Progress: VuiComponent<"div", ProgressProps>;
 //#endregion
 export { Progress, ProgressBase };
+
 //# sourceMappingURL=progress.d.ts.map

package/dist/progress/progress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress.d.ts","names":[],"sources":["../../src/progress/progress.tsx"],"sourcesContent":[],"mappings":";;;;;;;cAOa,cAAY,oBAAA,CAAA,uBAGxB,oBAAA,CAHwB,YAAA,CAAA,CAAA,WAAA,CAAA;;cASZ,UAAQ,oBAAA"}
+{"version":3,"file":"progress.d.ts","names":[],"sources":["../../src/progress/progress.tsx"],"sourcesContent":[],"mappings":";;;;;;;cAOa,cAAY,mBAAA,CAAA,uBAGxB,mBAAA,CAHwB,YAAA,EAAA,WAAA;;cASZ,UAAQ,oBAAA"}

package/dist/progress/progress.js

@@ -15,7 +15,7 @@ const minPercentageDisplay = 3;
 const maxValue = 100;
 /** Indicates a process progress. */
 const Progress = vui((props, ref) => {
-	const { className, value = 0, showPercentage,...rest } = props;
+	const { className, value = 0, showPercentage, ...rest } = props;
 	const [width, setWidth] = useState(0);
 	const styles = useStyleConfig("Progress", props);
 	useEffect(() => {
@@ -52,5 +52,5 @@ Progress.displayName = "Progress";
 
 //#endregion
 export { Progress, ProgressBase };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=progress.js.map

package/dist/progress/progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress.js","names":[],"sources":["../../src/progress/progress.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport { Box } from '../box'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport type { ProgressProps } from './progress.types'\n\nexport const ProgressBase = styled.divBox`\n  display: flex;\n  width: 100%;\n`\n\nconst minPercentageDisplay = 3\nconst maxValue = 100\n\n/** Indicates a process progress. */\nexport const Progress = vui<'div', ProgressProps>((props, ref) => {\n  const { className, value = 0, showPercentage, ...rest } = props\n\n  const [width, setWidth] = useState(0)\n\n  const styles = useStyleConfig('Progress', props)\n\n  useEffect(() => {\n    const w = !value ? 0 : Math.ceil(value)\n    setWidth(w > maxValue ? maxValue : w)\n  }, [value])\n\n  const bg = rest.bg || styles.bg\n  const color = rest.color || styles.color\n\n  return (\n    <ProgressBase\n      className={cs('vui-progress', className)}\n      ref={ref}\n      {...styles.container}\n      {...rest}\n      bg={bg}\n      borderRadius=\"sm\"\n      h={1}\n    >\n      <Box\n        bg={color}\n        borderRadius=\"sm\"\n        position=\"relative\"\n        textAlign=\"right\"\n        transition=\"width 0.4s ease-in-out;\"\n        w={`${width}%`}\n      >\n        {showPercentage && value >= minPercentageDisplay && (\n          <Box {...styles.percentage} position=\"absolute\" right=\"0\">{`${width}%`}</Box>\n        )}\n      </Box>\n    </ProgressBase>\n  )\n})\n\nProgress.displayName = 'Progress'\nexport default Progress\n"],"mappings":";;;;;;;;;AAOA,MAAa,eAAe,OAAO,MAAM;;;;AAKzC,MAAM,uBAAuB;AAC7B,MAAM,WAAW;;AAGjB,MAAa,WAAW,KAA2B,OAAO,QAAQ;CAChE,MAAM,EAAE,WAAW,QAAQ,GAAG,eAAgB,GAAG,SAAS;CAE1D,MAAM,CAAC,OAAO,YAAY,SAAS,EAAE;CAErC,MAAM,SAAS,eAAe,YAAY,MAAM;AAEhD,iBAAgB;EACd,MAAM,IAAI,CAAC,QAAQ,IAAI,KAAK,KAAK,MAAM;AACvC,WAAS,IAAI,WAAW,WAAW,EAAE;IACpC,CAAC,MAAM,CAAC;CAEX,MAAM,KAAK,KAAK,MAAM,OAAO;CAC7B,MAAM,QAAQ,KAAK,SAAS,OAAO;AAEnC,QACE,oBAAC;EACC,WAAW,GAAG,gBAAgB,UAAU;EACnC;EACL,GAAI,OAAO;EACX,GAAI;EACA;EACJ,cAAa;EACb,GAAG;YAEH,oBAAC;GACC,IAAI;GACJ,cAAa;GACb,UAAS;GACT,WAAU;GACV,YAAW;GACX,GAAG,GAAG,MAAM;aAEX,kBAAkB,SAAS,wBAC1B,oBAAC;IAAI,GAAI,OAAO;IAAY,UAAS;IAAW,OAAM;cAAK,GAAG,MAAM;KAAS;IAE3E;GACO;EAEjB;AAEF,SAAS,cAAc"}
+{"version":3,"file":"progress.js","names":[],"sources":["../../src/progress/progress.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport { Box } from '../box'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport type { ProgressProps } from './progress.types'\n\nexport const ProgressBase = styled.divBox`\n  display: flex;\n  width: 100%;\n`\n\nconst minPercentageDisplay = 3\nconst maxValue = 100\n\n/** Indicates a process progress. */\nexport const Progress = vui<'div', ProgressProps>((props, ref) => {\n  const { className, value = 0, showPercentage, ...rest } = props\n\n  const [width, setWidth] = useState(0)\n\n  const styles = useStyleConfig('Progress', props)\n\n  useEffect(() => {\n    const w = !value ? 0 : Math.ceil(value)\n    setWidth(w > maxValue ? maxValue : w)\n  }, [value])\n\n  const bg = rest.bg || styles.bg\n  const color = rest.color || styles.color\n\n  return (\n    <ProgressBase\n      className={cs('vui-progress', className)}\n      ref={ref}\n      {...styles.container}\n      {...rest}\n      bg={bg}\n      borderRadius=\"sm\"\n      h={1}\n    >\n      <Box\n        bg={color}\n        borderRadius=\"sm\"\n        position=\"relative\"\n        textAlign=\"right\"\n        transition=\"width 0.4s ease-in-out;\"\n        w={`${width}%`}\n      >\n        {showPercentage && value >= minPercentageDisplay && (\n          <Box {...styles.percentage} position=\"absolute\" right=\"0\">{`${width}%`}</Box>\n        )}\n      </Box>\n    </ProgressBase>\n  )\n})\n\nProgress.displayName = 'Progress'\nexport default Progress\n"],"mappings":";;;;;;;;;AAOA,MAAa,eAAe,OAAO,MAAM;;;;AAKzC,MAAM,uBAAuB;AAC7B,MAAM,WAAW;;AAGjB,MAAa,WAAW,KAA2B,OAAO,QAAQ;CAChE,MAAM,EAAE,WAAW,QAAQ,GAAG,gBAAgB,GAAG,SAAS;CAE1D,MAAM,CAAC,OAAO,YAAY,SAAS,EAAE;CAErC,MAAM,SAAS,eAAe,YAAY,MAAM;AAEhD,iBAAgB;EACd,MAAM,IAAI,CAAC,QAAQ,IAAI,KAAK,KAAK,MAAM;AACvC,WAAS,IAAI,WAAW,WAAW,EAAE;IACpC,CAAC,MAAM,CAAC;CAEX,MAAM,KAAK,KAAK,MAAM,OAAO;CAC7B,MAAM,QAAQ,KAAK,SAAS,OAAO;AAEnC,QACE,oBAAC;EACC,WAAW,GAAG,gBAAgB,UAAU;EACnC;EACL,GAAI,OAAO;EACX,GAAI;EACA;EACJ,cAAa;EACb,GAAG;YAEH,oBAAC;GACC,IAAI;GACJ,cAAa;GACb,UAAS;GACT,WAAU;GACV,YAAW;GACX,GAAG,GAAG,MAAM;aAEX,kBAAkB,SAAS,wBAC1B,oBAAC;IAAI,GAAI,OAAO;IAAY,UAAS;IAAW,OAAM;cAAK,GAAG,MAAM;KAAS;IAE3E;GACO;EAEjB;AAEF,SAAS,cAAc"}

package/dist/progress/progress.types.d.ts

@@ -9,4 +9,5 @@ type ProgressProps = SystemProps & ThemingProps<'Progress'> & {
 };
 //#endregion
 export { ProgressProps };
+
 //# sourceMappingURL=progress.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"progress.types.d.ts","names":[],"sources":["../../src/progress/progress.types.ts"],"sourcesContent":[],"mappings":";;;;;KAGY,aAAA,CAAA,CAAA,CAAgB,cAC1B;;;AADF,CAAA"}
+{"version":3,"file":"progress.types.d.ts","names":[],"sources":["../../src/progress/progress.types.ts"],"sourcesContent":[],"mappings":";;;;;KAGY,aAAA,GAAgB,cAC1B;;;AADF,CAAA"}

package/dist/progress/theme.js

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

package/dist/progressCircular/consts.js

@@ -13,5 +13,5 @@ const maxValue = 100;
 
 //#endregion
 export { absCenterStyles, labelBottom, maxValue };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=consts.js.map

package/dist/progressCircular/index.d.ts

@@ -1,2 +1,2 @@
 import { ProgressCircularProps } from "./progressCircular.types.js";
-import { ProgressCircular, ProgressCircularBase } from "./progressCircular.js";
+import { ProgressCircular, ProgressCircularBase } from "./progressCircular.js";

package/dist/progressCircular/progressCircular.d.ts

@@ -2,12 +2,13 @@ import { SystemProps } from "../system/system.js";
 import { VuiComponent } from "../core/vui.js";
 import { ProgressCircularProps } from "./progressCircular.types.js";
 import "../index.js";
-import * as styled_components408 from "styled-components";
+import * as styled_components13 from "styled-components";
 
 //#region src/progressCircular/progressCircular.d.ts
-declare const ProgressCircularBase: styled_components408.StyledComponent<"div", styled_components408.DefaultTheme, SystemProps, never>;
+declare const ProgressCircularBase: styled_components13.StyledComponent<"div", styled_components13.DefaultTheme, SystemProps, never>;
 /** Indicates a process progress. */
 declare const ProgressCircular: VuiComponent<"div", ProgressCircularProps>;
 //#endregion
 export { ProgressCircular, ProgressCircularBase };
+
 //# sourceMappingURL=progressCircular.d.ts.map

package/dist/progressCircular/progressCircular.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progressCircular.d.ts","names":[],"sources":["../../src/progressCircular/progressCircular.tsx"],"sourcesContent":[],"mappings":";;;;;;;cAUa,sBAAoB,oBAAA,CAAA,uBAIhC,oBAAA,CAJgC,YAAA,CAAA,CAAA,WAAA,CAAA;;cAgBpB,kBAAgB,oBAAA"}
+{"version":3,"file":"progressCircular.d.ts","names":[],"sources":["../../src/progressCircular/progressCircular.tsx"],"sourcesContent":[],"mappings":";;;;;;;cAUa,sBAAoB,mBAAA,CAAA,uBAIhC,mBAAA,CAJgC,YAAA,EAAA,WAAA;;cAgBpB,kBAAgB,oBAAA"}

package/dist/progressCircular/progressCircular.js

@@ -24,7 +24,7 @@ const ProgressCircle = styled(MainCircle)`
 `;
 /** Indicates a process progress. */
 const ProgressCircular = vui((props, ref) => {
-	const { children, className, label, value = 0, showPercentage,...rest } = props;
+	const { children, className, label, value = 0, showPercentage, ...rest } = props;
 	const styles = useStyleConfig("ProgressCircular", props);
 	const [progress, setProgress] = useState(value);
 	useEffect(() => {
@@ -94,5 +94,5 @@ ProgressCircular.displayName = "ProgressCircular";
 
 //#endregion
 export { ProgressCircular, ProgressCircularBase };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=progressCircular.js.map

package/dist/progressCircular/progressCircular.js.map

@@ -1 +1 @@
-{"version":3,"file":"progressCircular.js","names":[],"sources":["../../src/progressCircular/progressCircular.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport type { BoxProps } from '../box'\nimport { Box } from '../box'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { T } from '../t'\nimport { cs } from '../utils'\nimport { absCenterStyles, labelBottom, maxValue } from './consts'\nimport type { ProgressCircularProps } from './progressCircular.types'\n\nexport const ProgressCircularBase = styled.divBox`\n  display: flex;\n  position: relative;\n  width: 100%;\n`\nconst MainCircle = styled.circle`\n  fill: transparent;\n`\n\nconst ProgressCircle = styled(MainCircle)`\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n  transition: stroke-dashoffset 0.5s ease-out;\n`\n\n/** Indicates a process progress. */\nexport const ProgressCircular = vui<'div', ProgressCircularProps>((props, ref) => {\n  const { children, className, label, value = 0, showPercentage, ...rest } = props\n\n  const styles = useStyleConfig('ProgressCircular', props)\n\n  const [progress, setProgress] = useState(value)\n\n  useEffect(() => {\n    setProgress(value ? Math.ceil(value) : 0)\n  }, [value])\n\n  useEffect(() => {\n    const w = !value ? 0 : Math.ceil(value)\n    setProgress(w > maxValue ? maxValue : w)\n  }, [value])\n\n  const radius = maxValue / 2 - styles.strokeWidth * 2\n  const angle = radius * 2 * Math.PI\n  const offset = angle - (progress / maxValue) * angle\n\n  return (\n    <ProgressCircularBase className={cs('vui-progress-circular', className)} ref={ref} w={styles.width} {...rest}>\n      <svg\n        aria-valuemax={maxValue}\n        aria-valuemin={0}\n        aria-valuenow={progress}\n        height={styles.width}\n        role=\"meter\"\n        version=\"1.1\"\n        viewBox=\"0 0 100 100\"\n        width={styles.width}\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <MainCircle cx=\"50\" cy=\"50\" r={radius} stroke={styles.stroke.main} strokeWidth={styles.strokeWidth} />\n        <ProgressCircle\n          cx=\"50\"\n          cy=\"50\"\n          r={radius}\n          stroke={styles.stroke.progress}\n          strokeDasharray={`${angle} ${angle}`}\n          strokeDashoffset={offset}\n          strokeWidth={styles.strokeWidth}\n        />\n      </svg>\n      <Box {...(absCenterStyles as BoxProps)} top={styles.top}>\n        {children ? (\n          children\n        ) : showPercentage ? (\n          <T color={styles.color} fontSize={styles.fontSize}>\n            {progress}%\n          </T>\n        ) : null}\n      </Box>\n      {!!label && (\n        <Box {...(absCenterStyles as BoxProps)} bottom={labelBottom}>\n          <T color={styles.color} fontSize={styles.fontSize}>\n            {label}\n          </T>\n        </Box>\n      )}\n    </ProgressCircularBase>\n  )\n})\n\nProgressCircular.displayName = 'ProgressCircular'\nexport default ProgressCircular\n"],"mappings":";;;;;;;;;;;AAUA,MAAa,uBAAuB,OAAO,MAAM;;;;;AAKjD,MAAM,aAAa,OAAO,MAAM;;;AAIhC,MAAM,iBAAiB,OAAO,WAAW;;;;;;AAOzC,MAAa,mBAAmB,KAAmC,OAAO,QAAQ;CAChF,MAAM,EAAE,UAAU,WAAW,OAAO,QAAQ,GAAG,eAAgB,GAAG,SAAS;CAE3E,MAAM,SAAS,eAAe,oBAAoB,MAAM;CAExD,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;AAE/C,iBAAgB;AACd,cAAY,QAAQ,KAAK,KAAK,MAAM,GAAG,EAAE;IACxC,CAAC,MAAM,CAAC;AAEX,iBAAgB;EACd,MAAM,IAAI,CAAC,QAAQ,IAAI,KAAK,KAAK,MAAM;AACvC,cAAY,IAAI,WAAW,WAAW,EAAE;IACvC,CAAC,MAAM,CAAC;CAEX,MAAM,SAAS,WAAW,IAAI,OAAO,cAAc;CACnD,MAAM,QAAQ,SAAS,IAAI,KAAK;CAChC,MAAM,SAAS,QAAS,WAAW,WAAY;AAE/C,QACE,qBAAC;EAAqB,WAAW,GAAG,yBAAyB,UAAU;EAAO;EAAK,GAAG,OAAO;EAAO,GAAI;;GACtG,qBAAC;IACC,iBAAe;IACf,iBAAe;IACf,iBAAe;IACf,QAAQ,OAAO;IACf,MAAK;IACL,SAAQ;IACR,SAAQ;IACR,OAAO,OAAO;IACd,OAAM;eAEN,oBAAC;KAAW,IAAG;KAAK,IAAG;KAAK,GAAG;KAAQ,QAAQ,OAAO,OAAO;KAAM,aAAa,OAAO;MAAe,EACtG,oBAAC;KACC,IAAG;KACH,IAAG;KACH,GAAG;KACH,QAAQ,OAAO,OAAO;KACtB,iBAAiB,GAAG,MAAM,GAAG;KAC7B,kBAAkB;KAClB,aAAa,OAAO;MACpB;KACE;GACN,oBAAC;IAAI,GAAK;IAA8B,KAAK,OAAO;cACjD,WACC,WACE,iBACF,qBAAC;KAAE,OAAO,OAAO;KAAO,UAAU,OAAO;gBACtC,UAAS;MACR,GACF;KACA;GACL,CAAC,CAAC,SACD,oBAAC;IAAI,GAAK;IAA8B,QAAQ;cAC9C,oBAAC;KAAE,OAAO,OAAO;KAAO,UAAU,OAAO;eACtC;MACC;KACA;;GAEa;EAEzB;AAEF,iBAAiB,cAAc"}
+{"version":3,"file":"progressCircular.js","names":[],"sources":["../../src/progressCircular/progressCircular.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport type { BoxProps } from '../box'\nimport { Box } from '../box'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { T } from '../t'\nimport { cs } from '../utils'\nimport { absCenterStyles, labelBottom, maxValue } from './consts'\nimport type { ProgressCircularProps } from './progressCircular.types'\n\nexport const ProgressCircularBase = styled.divBox`\n  display: flex;\n  position: relative;\n  width: 100%;\n`\nconst MainCircle = styled.circle`\n  fill: transparent;\n`\n\nconst ProgressCircle = styled(MainCircle)`\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n  transition: stroke-dashoffset 0.5s ease-out;\n`\n\n/** Indicates a process progress. */\nexport const ProgressCircular = vui<'div', ProgressCircularProps>((props, ref) => {\n  const { children, className, label, value = 0, showPercentage, ...rest } = props\n\n  const styles = useStyleConfig('ProgressCircular', props)\n\n  const [progress, setProgress] = useState(value)\n\n  useEffect(() => {\n    setProgress(value ? Math.ceil(value) : 0)\n  }, [value])\n\n  useEffect(() => {\n    const w = !value ? 0 : Math.ceil(value)\n    setProgress(w > maxValue ? maxValue : w)\n  }, [value])\n\n  const radius = maxValue / 2 - styles.strokeWidth * 2\n  const angle = radius * 2 * Math.PI\n  const offset = angle - (progress / maxValue) * angle\n\n  return (\n    <ProgressCircularBase className={cs('vui-progress-circular', className)} ref={ref} w={styles.width} {...rest}>\n      <svg\n        aria-valuemax={maxValue}\n        aria-valuemin={0}\n        aria-valuenow={progress}\n        height={styles.width}\n        role=\"meter\"\n        version=\"1.1\"\n        viewBox=\"0 0 100 100\"\n        width={styles.width}\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <MainCircle cx=\"50\" cy=\"50\" r={radius} stroke={styles.stroke.main} strokeWidth={styles.strokeWidth} />\n        <ProgressCircle\n          cx=\"50\"\n          cy=\"50\"\n          r={radius}\n          stroke={styles.stroke.progress}\n          strokeDasharray={`${angle} ${angle}`}\n          strokeDashoffset={offset}\n          strokeWidth={styles.strokeWidth}\n        />\n      </svg>\n      <Box {...(absCenterStyles as BoxProps)} top={styles.top}>\n        {children ? (\n          children\n        ) : showPercentage ? (\n          <T color={styles.color} fontSize={styles.fontSize}>\n            {progress}%\n          </T>\n        ) : null}\n      </Box>\n      {!!label && (\n        <Box {...(absCenterStyles as BoxProps)} bottom={labelBottom}>\n          <T color={styles.color} fontSize={styles.fontSize}>\n            {label}\n          </T>\n        </Box>\n      )}\n    </ProgressCircularBase>\n  )\n})\n\nProgressCircular.displayName = 'ProgressCircular'\nexport default ProgressCircular\n"],"mappings":";;;;;;;;;;;AAUA,MAAa,uBAAuB,OAAO,MAAM;;;;;AAKjD,MAAM,aAAa,OAAO,MAAM;;;AAIhC,MAAM,iBAAiB,OAAO,WAAW;;;;;;AAOzC,MAAa,mBAAmB,KAAmC,OAAO,QAAQ;CAChF,MAAM,EAAE,UAAU,WAAW,OAAO,QAAQ,GAAG,gBAAgB,GAAG,SAAS;CAE3E,MAAM,SAAS,eAAe,oBAAoB,MAAM;CAExD,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;AAE/C,iBAAgB;AACd,cAAY,QAAQ,KAAK,KAAK,MAAM,GAAG,EAAE;IACxC,CAAC,MAAM,CAAC;AAEX,iBAAgB;EACd,MAAM,IAAI,CAAC,QAAQ,IAAI,KAAK,KAAK,MAAM;AACvC,cAAY,IAAI,WAAW,WAAW,EAAE;IACvC,CAAC,MAAM,CAAC;CAEX,MAAM,SAAS,WAAW,IAAI,OAAO,cAAc;CACnD,MAAM,QAAQ,SAAS,IAAI,KAAK;CAChC,MAAM,SAAS,QAAS,WAAW,WAAY;AAE/C,QACE,qBAAC;EAAqB,WAAW,GAAG,yBAAyB,UAAU;EAAO;EAAK,GAAG,OAAO;EAAO,GAAI;;GACtG,qBAAC;IACC,iBAAe;IACf,iBAAe;IACf,iBAAe;IACf,QAAQ,OAAO;IACf,MAAK;IACL,SAAQ;IACR,SAAQ;IACR,OAAO,OAAO;IACd,OAAM;eAEN,oBAAC;KAAW,IAAG;KAAK,IAAG;KAAK,GAAG;KAAQ,QAAQ,OAAO,OAAO;KAAM,aAAa,OAAO;MAAe,EACtG,oBAAC;KACC,IAAG;KACH,IAAG;KACH,GAAG;KACH,QAAQ,OAAO,OAAO;KACtB,iBAAiB,GAAG,MAAM,GAAG;KAC7B,kBAAkB;KAClB,aAAa,OAAO;MACpB;KACE;GACN,oBAAC;IAAI,GAAK;IAA8B,KAAK,OAAO;cACjD,WACC,WACE,iBACF,qBAAC;KAAE,OAAO,OAAO;KAAO,UAAU,OAAO;gBACtC,UAAS;MACR,GACF;KACA;GACL,CAAC,CAAC,SACD,oBAAC;IAAI,GAAK;IAA8B,QAAQ;cAC9C,oBAAC;KAAE,OAAO,OAAO;KAAO,UAAU,OAAO;eACtC;MACC;KACA;;GAEa;EAEzB;AAEF,iBAAiB,cAAc"}

package/dist/progressCircular/progressCircular.types.d.ts

@@ -10,4 +10,5 @@ type ProgressCircularProps = SystemProps & ThemingProps<'ProgressCircular'> & {
 };
 //#endregion
 export { ProgressCircularProps };
+
 //# sourceMappingURL=progressCircular.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"progressCircular.types.d.ts","names":[],"sources":["../../src/progressCircular/progressCircular.types.ts"],"sourcesContent":[],"mappings":";;;;;KAGY,qBAAA,CAAA,CAAA,CAAwB,cAClC;;;EADU,cAAA,CAAA,CAAA,CAAA,OAAqB"}
+{"version":3,"file":"progressCircular.types.d.ts","names":[],"sources":["../../src/progressCircular/progressCircular.types.ts"],"sourcesContent":[],"mappings":";;;;;KAGY,qBAAA,GAAwB,cAClC;;;EADU,cAAA,CAAA,EAAA,OAAqB"}

package/dist/progressCircular/theme.js

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

package/dist/radio/consts.js

@@ -8,5 +8,5 @@ const radioColors = {
 
 //#endregion
 export { radioColors };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=consts.js.map

package/dist/radio/context.d.ts

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

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

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

package/dist/radio/context.js

@@ -5,5 +5,5 @@ const [RadioGroupProvider, useRadioGroupContext] = createContext({ isOptional: t
 
 //#endregion
 export { RadioGroupProvider, useRadioGroupContext };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=context.js.map

package/dist/radio/index.d.ts

@@ -2,4 +2,4 @@ import { RadioGroupProvider, useRadioGroupContext } from "./context.js";
 import { RadioProps, RadioStyleProps } from "./radio.types.js";
 import { Radio, RadioBase } from "./radio.js";
 import { RadioGroupProps } from "./radioGroup.types.js";
-import { RadioGroup, RadioGroupBase } from "./radioGroup.js";
+import { RadioGroup, RadioGroupBase } from "./radioGroup.js";

package/dist/radio/radio.d.ts

@@ -17,10 +17,10 @@ import { ColorProps, FontFamilyProps, FontSizeProps, FontStyleProps, FontWeightP
 import { VuiComponent } from "../core/vui.js";
 import { RadioProps, RadioStyleProps } from "./radio.types.js";
 import "../index.js";
-import * as styled_components402 from "styled-components";
+import * as styled_components17 from "styled-components";
 
 //#region src/radio/radio.d.ts
-declare const RadioBase: styled_components402.StyledComponent<"label", styled_components402.DefaultTheme, AnimationProps & BackgroundColorProps & BorderProps & BorderTopProps & BorderRightProps & BorderBottomProps & BorderLeftProps & BorderColorProps & BorderTopColorProps & BorderRightColorProps & BorderBottomColorProps & BorderLeftColorProps & BorderWidthProps & BorderTopWidthProps & BorderRightWidthProps & BorderBottomWidthProps & BorderLeftWidthProps & BorderStyleProps & BorderRadiusProps & OutlineProps & OutlineColorProps & OutlineWidthProps & OutlineStyleProps & DivideXProps & DivideYProps & DivideXReverseProps & DivideYReverseProps & DivideColorProps & DivideStyleProps & RingProps & RingColorProps & OpacityProps & BoxShadowProps & TextShadowProps & DisplayProps & AlignItemsProps & AlignContentProps & JustifyContentProps & JustifyItemsProps & FlexWrapProps & FlexGrowProps & FlexShrinkProps & FlexBasisProps & FlexDirectionProps & FlexProps & JustifySelfProps & AlignSelfProps & OrderProps & RowProps & ColProps & GapProps & ColumnGapProps & RowGapProps & GridColumnProps & GridRowProps & GridAutoFlowProps & GridAutoColumnsProps & GridAutoRowsProps & GridTemplateColumnsProps & GridTemplateRowsProps & GridTemplateAreasProps & GridAreaProps & AppearanceProps & CursorProps & PointerEventsProps & ResizeProps & UserSelectProps & IsTruncatedProps & FloatProps & BoxSizingProps & OverflowProps & OverflowXProps & OverflowYProps & PositionProps & ZIndexProps & TopProps & RightProps & BottomProps & LeftProps & VisibilityProps & OverscrollBehaviorProps & ObjectFitProps & MaxLinesProps & WidthProps & HeightProps & MaxWidthProps & MaxHeightProps & MinWidthProps & MinHeightProps & MarginProps & MarginTopProps & MarginRightProps & MarginBottomProps & MarginLeftProps & MarginXProps & MarginYProps & PaddingProps & PaddingTopProps & PaddingRightProps & PaddingBottomProps & PaddingLeftProps & PaddingXProps & PaddingYProps & SpaceXProps & SpaceYProps & SpaceXReverseProps & SpaceYReverseProps & BorderCollapseProps & TableLayoutProps & TransformProps & TransformOriginProps & TranslateXProps & TranslateYProps & RotateProps & SkewXProps & SkewYProps & ScaleProps & ScaleXProps & ScaleYProps & TransitionProps & TransitionPropertyProps & TransitionDurationProps & TransitionTimingFunctionProps & TransitionDelayProps & FontFamilyProps & FontSizeProps & FontStyleProps & FontWeightProps & LineHeightProps & ColorProps & TextTransformProps & TextDecorationProps & TextAlignProps & VerticalAlignProps & LetterSpacingProps & WhiteSpaceProps & TextOverflowProps & ListStyleTypeProps & ListStylePositionProps & WordBreakProps & RadioStyleProps, never>;
+declare const RadioBase: styled_components17.StyledComponent<"label", styled_components17.DefaultTheme, AnimationProps & BackgroundColorProps & BorderProps & BorderTopProps & BorderRightProps & BorderBottomProps & BorderLeftProps & BorderColorProps & BorderTopColorProps & BorderRightColorProps & BorderBottomColorProps & BorderLeftColorProps & BorderWidthProps & BorderTopWidthProps & BorderRightWidthProps & BorderBottomWidthProps & BorderLeftWidthProps & BorderStyleProps & BorderRadiusProps & OutlineProps & OutlineColorProps & OutlineWidthProps & OutlineStyleProps & DivideXProps & DivideYProps & DivideXReverseProps & DivideYReverseProps & DivideColorProps & DivideStyleProps & RingProps & RingColorProps & OpacityProps & BoxShadowProps & TextShadowProps & DisplayProps & AlignItemsProps & AlignContentProps & JustifyContentProps & JustifyItemsProps & FlexWrapProps & FlexGrowProps & FlexShrinkProps & FlexBasisProps & FlexDirectionProps & FlexProps & JustifySelfProps & AlignSelfProps & OrderProps & RowProps & ColProps & GapProps & ColumnGapProps & RowGapProps & GridColumnProps & GridRowProps & GridAutoFlowProps & GridAutoColumnsProps & GridAutoRowsProps & GridTemplateColumnsProps & GridTemplateRowsProps & GridTemplateAreasProps & GridAreaProps & AppearanceProps & CursorProps & PointerEventsProps & ResizeProps & UserSelectProps & IsTruncatedProps & FloatProps & BoxSizingProps & OverflowProps & OverflowXProps & OverflowYProps & PositionProps & ZIndexProps & TopProps & RightProps & BottomProps & LeftProps & VisibilityProps & OverscrollBehaviorProps & ObjectFitProps & MaxLinesProps & WidthProps & HeightProps & MaxWidthProps & MaxHeightProps & MinWidthProps & MinHeightProps & MarginProps & MarginTopProps & MarginRightProps & MarginBottomProps & MarginLeftProps & MarginXProps & MarginYProps & PaddingProps & PaddingTopProps & PaddingRightProps & PaddingBottomProps & PaddingLeftProps & PaddingXProps & PaddingYProps & SpaceXProps & SpaceYProps & SpaceXReverseProps & SpaceYReverseProps & BorderCollapseProps & TableLayoutProps & TransformProps & TransformOriginProps & TranslateXProps & TranslateYProps & RotateProps & SkewXProps & SkewYProps & ScaleProps & ScaleXProps & ScaleYProps & TransitionProps & TransitionPropertyProps & TransitionDurationProps & TransitionTimingFunctionProps & TransitionDelayProps & FontFamilyProps & FontSizeProps & FontStyleProps & FontWeightProps & LineHeightProps & ColorProps & TextTransformProps & TextDecorationProps & TextAlignProps & VerticalAlignProps & LetterSpacingProps & WhiteSpaceProps & TextOverflowProps & ListStyleTypeProps & ListStylePositionProps & WordBreakProps & RadioStyleProps, never>;
 /**
  * Allows selection of a single choice from a set of items. Handles controlled and uncontrolled modes.
  * Uses icons to display itself in different states.
@@ -28,4 +28,5 @@ declare const RadioBase: styled_components402.StyledComponent<"label", styled_co
 declare const Radio: VuiComponent<"span", RadioProps>;
 //#endregion
 export { Radio, RadioBase };
+
 //# sourceMappingURL=radio.d.ts.map

package/dist/radio/radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio.d.ts","names":[],"sources":["../../src/radio/radio.tsx"],"sourcesContent":[],"mappings":"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"}
+{"version":3,"file":"radio.d.ts","names":[],"sources":["../../src/radio/radio.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;cAiCa,WAAS,mBAAA,CAAA,yBAsBrB,mBAAA,CAtBqB,YAAA,EAAA,cAAA,GAAA,oBAAA,GAAA,WAAA,GAAA,cAAA,GAAA,gBAAA,GAAA,iBAAA,GAAA,eAAA,GAAA,gBAAA,GAAA,mBAAA,GAAA,qBAAA,GAAA,sBAAA,GAAA,oBAAA,GAAA,gBAAA,GAAA,mBAAA,GAAA,qBAAA,GAAA,sBAAA,GAAA,oBAAA,GAAA,gBAAA,GAAA,iBAAA,GAAA,YAAA,GAAA,iBAAA,GAAA,iBAAA,GAAA,iBAAA,GAAA,YAAA,GAAA,YAAA,GAAA,mBAAA,GAAA,mBAAA,GAAA,gBAAA,GAAA,gBAAA,GAAA,SAAA,GAAA,cAAA,GAAA,YAAA,GAAA,cAAA,GAAA,eAAA,GAAA,YAAA,GAAA,eAAA,GAAA,iBAAA,GAAA,mBAAA,GAAA,iBAAA,GAAA,aAAA,GAAA,aAAA,GAAA,eAAA,GAAA,cAAA,GAAA,kBAAA,GAAA,SAAA,GAAA,gBAAA,GAAA,cAAA,GAAA,UAAA,GAAA,QAAA,GAAA,QAAA,GAAA,QAAA,GAAA,cAAA,GAAA,WAAA,GAAA,eAAA,GAAA,YAAA,GAAA,iBAAA,GAAA,oBAAA,GAAA,iBAAA,GAAA,wBAAA,GAAA,qBAAA,GAAA,sBAAA,GAAA,aAAA,GAAA,eAAA,GAAA,WAAA,GAAA,kBAAA,GAAA,WAAA,GAAA,eAAA,GAAA,gBAAA,GAAA,UAAA,GAAA,cAAA,GAAA,aAAA,GAAA,cAAA,GAAA,cAAA,GAAA,aAAA,GAAA,WAAA,GAAA,QAAA,GAAA,UAAA,GAAA,WAAA,GAAA,SAAA,GAAA,eAAA,GAAA,uBAAA,GAAA,cAAA,GAAA,aAAA,GAAA,UAAA,GAAA,WAAA,GAAA,aAAA,GAAA,cAAA,GAAA,aAAA,GAAA,cAAA,GAAA,WAAA,GAAA,cAAA,GAAA,gBAAA,GAAA,iBAAA,GAAA,eAAA,GAAA,YAAA,GAAA,YAAA,GAAA,YAAA,GAAA,eAAA,GAAA,iBAAA,GAAA,kBAAA,GAAA,gBAAA,GAAA,aAAA,GAAA,aAAA,GAAA,WAAA,GAAA,WAAA,GAAA,kBAAA,GAAA,kBAAA,GAAA,mBAAA,GAAA,gBAAA,GAAA,cAAA,GAAA,oBAAA,GAAA,eAAA,GAAA,eAAA,GAAA,WAAA,GAAA,UAAA,GAAA,UAAA,GAAA,UAAA,GAAA,WAAA,GAAA,WAAA,GAAA,eAAA,GAAA,uBAAA,GAAA,uBAAA,GAAA,6BAAA,GAAA,oBAAA,GAAA,eAAA,GAAA,aAAA,GAAA,cAAA,GAAA,eAAA,GAAA,eAAA,GAAA,UAAA,GAAA,kBAAA,GAAA,mBAAA,GAAA,cAAA,GAAA,kBAAA,GAAA,kBAAA,GAAA,eAAA,GAAA,iBAAA,GAAA,kBAAA,GAAA,sBAAA,GAAA,cAAA,GAAA;;;;;cA4BT,OAAK,qBAAA"}

package/dist/radio/radio.js

@@ -59,16 +59,16 @@ const RadioBase = styled.labelBox`
 * Uses icons to display itself in different states.
 */
 const Radio = vui((props, ref) => {
-	const { defaultValue: groupDefaultValue, isChecked: groupIsChecked, onChange: groupOnChange, value: groupValue,...radioGroupProps } = useRadioGroupContext() ?? {};
+	const { defaultValue: groupDefaultValue, isChecked: groupIsChecked, onChange: groupOnChange, value: groupValue, ...radioGroupProps } = useRadioGroupContext() ?? {};
 	const defaultIsChecked = groupIsChecked !== void 0 ? groupIsChecked === props.value : void 0;
 	const mergedProps = {
 		...radioGroupProps,
 		...props
 	};
-	const { checked = groupValue !== void 0 ? props.value === groupValue : void 0, children, className, defaultChecked = groupDefaultValue !== void 0 ? props.value === groupDefaultValue : void 0, disabled: disabled$1, icon: iconProp = "uiRadioUnselected", iconChecked = "uiRadioSelected", id, inputProps, inputRef, label, name, onChange, required, value,...rest } = omitThemingProps(mergedProps);
+	const { checked = groupValue !== void 0 ? props.value === groupValue : void 0, children, className, defaultChecked = groupDefaultValue !== void 0 ? props.value === groupDefaultValue : void 0, disabled: disabled$1, icon: iconProp = "uiRadioUnselected", iconChecked = "uiRadioSelected", id, inputProps, inputRef, label, name, onChange, required, value, ...rest } = omitThemingProps(mergedProps);
 	const [isChecked, setIsChecked] = useState(defaultIsChecked ?? checked ?? defaultChecked);
 	const styles = useStyleConfig("Radio", mergedProps);
-	const { color: controlColor, hoverColor,...controlStyles } = styles.control;
+	const { color: controlColor, hoverColor, ...controlStyles } = styles.control;
 	const icon = isChecked ? iconChecked : iconProp;
 	const controlMr = children || label ? 1 : 0;
 	const color = isChecked ? radioColors.checked : controlColor;
@@ -126,5 +126,5 @@ Radio.displayName = "Radio";
 
 //#endregion
 export { Radio, RadioBase };
-globalThis.__vuiVersion__ = "3.1.2"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=radio.js.map