@veracity/vui 3.0.0-beta.5 → 3.0.0-beta.7

package/dist/popover/globalStyle.js

@@ -0,0 +1,20 @@
+import{createGlobalStyle as e}from"../core/styled.js";var t=e`
+	[data-tippy-root] {
+		max-width: calc(100vw - 10px);
+	}
+
+	.tippy-box {
+		position: relative;
+		transition-property: transform, visibility, opacity;
+	}
+
+	.tippy-box[data-animation=fade][data-state=hidden] {
+		opacity: 0;
+	}
+
+	.tippy-content {
+		position: relative;
+		z-index: 1;
+	}
+`;export{t as default};globalThis.__vuiVersion__=`3.0.0-beta.7`;
+//# sourceMappingURL=globalStyle.js.map

package/dist/popover/globalStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"globalStyle.js","names":[],"sources":["../../src/popover/globalStyle.ts"],"sourcesContent":["import { createGlobalStyle } from '../core'\n\nexport default createGlobalStyle`\n\t[data-tippy-root] {\n\t\tmax-width: calc(100vw - 10px);\n\t}\n\n\t.tippy-box {\n\t\tposition: relative;\n\t\ttransition-property: transform, visibility, opacity;\n\t}\n\n\t.tippy-box[data-animation=fade][data-state=hidden] {\n\t\topacity: 0;\n\t}\n\n\t.tippy-content {\n\t\tposition: relative;\n\t\tz-index: 1;\n\t}\n`\n"],"mappings":"sDAEA,IAAA,EAAe,CAAiB"}

package/dist/popover/popover.d.ts

@@ -0,0 +1,20 @@
+import { SystemProps } from "../system/system.js";
+import { BoxProps } from "../box/box.types.js";
+import { VuiComponent } from "../core/vui.js";
+import { PopoverProps } from "./popover.types.js";
+import * as react_jsx_runtime3 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_runtime3.JSX.Element;
+declare namespace Popover {
+  var Content: VuiComponent<"div", BoxProps>;
+  var Trigger: VuiComponent<"button", SystemProps>;
+  var displayName: string;
+}
+//#endregion
+export { Popover };
+//# sourceMappingURL=popover.d.ts.map

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

@@ -0,0 +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;EAAA,IAAA,OAAO,cAAA,CAAA,KAAA,WAAA;EAAA,IAAA,OAAA,cAAA,CAAA,QAAA,cAAA;MAAQ,WAAA,EAAA,MAAA"}

package/dist/popover/popover.js

@@ -0,0 +1,2 @@
+import{runIfFn as e}from"../utils/function.js";import{filterUndefined as t}from"../utils/object.js";import{PopoverProvider as n}from"./context.js";import r from"./popoverContent.js";import i from"./popoverTrigger.js";import a from"./usePopover.js";import{jsx as o}from"react/jsx-runtime";function s(r){let{children:i,isLazy:s=!0,options:c,...l}=r,u=a({options:c,...l}),{close:d,isOpen:f,open:p}=u,m=t({isLazy:s,...u});return o(n,{value:m,children:e(i,{close:d,isOpen:f,open:p})})}s.Content=r,s.Trigger=i,s.displayName=`Popover`;export{s as default};globalThis.__vuiVersion__=`3.0.0-beta.7`;
+//# sourceMappingURL=popover.js.map

package/dist/popover/popover.js.map

@@ -0,0 +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":"gSAWA,SAAwB,EAAQ,EAAqB,CACnD,GAAM,CAAE,WAAU,SAAS,GAAM,UAAS,GAAG,GAAS,EAChD,EAAe,EAAW,CAAE,UAAS,GAAG,EAAM,CAAC,CAC/C,CAAE,QAAO,SAAQ,QAAS,EAC1B,EAAU,EAAgB,CAAE,SAAQ,GAAG,EAAc,CAAC,CAE5D,OAAO,EAAC,EAAA,CAAgB,MAAO,WAAU,EAAQ,EAAU,CAAE,QAAO,SAAQ,OAAM,CAAC,EAAmB,CAGxG,EAAQ,QAAUA,EAClB,EAAQ,QAAUC,EAClB,EAAQ,YAAc"}

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

@@ -0,0 +1,26 @@
+import { RenderProps } from "../utils/types.js";
+import { SystemProps } from "../system/system.js";
+import { BoxProps } from "../box/box.types.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;
+type PopoverProps = UsePopoverProps & {
+  /** Exposes render props to the children. */
+  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'];
+  isOpen: UsePopoverType['isOpen'];
+  open: UsePopoverType['open'];
+}>;
+type PopoverTriggerProps = SystemProps;
+//#endregion
+export { PopoverContentProps, PopoverProps, PopoverRenderProps, PopoverTriggerProps };
+//# sourceMappingURL=popover.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover.types.d.ts","names":[],"sources":["../../src/popover/popover.types.ts"],"sourcesContent":[],"mappings":";;;;;;;;KAQY,mBAAA,GAAsB;KAEtB,YAAA,GAAe;EAFf;EAEA,QAAA,CAAA,EAEC,kBAFW;EAAA;QAAG,CAAA,EAAA,OAAA;;SAMP,CAAA,EAAR,OAAQ,CAAA,UAAA,CAAA;;AAAD,KAGP,kBAAA,GAAqB,WAHd,CAAA;EAGP,KAAA,EACH,cADqB,CAAA,OAAA,CAAA;EAAA,MAAA,EAEpB,cAFoB,CAAA,QAAA,CAAA;MACrB,EAED,cAFC,CAAA,MAAA,CAAA;;AAED,KAGI,mBAAA,GAAsB,WAH1B"}

package/dist/popover/popoverContent.d.ts

@@ -0,0 +1,9 @@
+import { BoxProps } from "../box/box.types.js";
+import { VuiComponent } from "../core/vui.js";
+
+//#region src/popover/popoverContent.d.ts
+/** Displays provided content in an overlaying wrapper. */
+declare const PopoverContent: VuiComponent<"div", BoxProps>;
+//#endregion
+export { PopoverContent };
+//# sourceMappingURL=popoverContent.d.ts.map

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

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

package/dist/popover/popoverContent.js

@@ -0,0 +1,2 @@
+import{mergeRefs as e}from"../utils/react.js";import{cs as t}from"../utils/styles.js";import{useStyleConfig as n}from"../core/theme.js";import{v as r}from"../core/styled.js";import{vui as i}from"../core/vui.js";import a from"../box/box.js";import{usePopoverContext as o}from"./context.js";import{jsx as s}from"react/jsx-runtime";const c=i((i,c)=>{let{children:l,className:u,...d}=i,f=o()??{},{isLazy:p,isOpen:m,setPopper:h}=f,g=n(`Popover`,{...f,...i}),_=p?m:!0;return s(r.div,{className:`vui-popoverContainer`,ring:0,children:s(a,{bg:`white`,borderRadius:`md`,boxShadow:`2`,className:t(`vui-popoverContent`,u),overflowY:`auto`,ref:e(h,c),ring:0,...g.content,...d,children:_?l:null})})});c.displayName=`PopoverContent`;var l=c;export{l as default};globalThis.__vuiVersion__=`3.0.0-beta.7`;
+//# sourceMappingURL=popoverContent.js.map

package/dist/popover/popoverContent.js.map

@@ -0,0 +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":"yUAOA,MAAa,EAAiB,GAAiC,EAAO,IAAQ,CAC5E,GAAM,CAAE,WAAU,YAAW,GAAG,GAAS,EACnC,EAAe,GAAmB,EAAI,EAAE,CACxC,CAAE,SAAQ,SAAQ,aAAc,EAChC,EAAS,EAAe,UAAW,CAAE,GAAG,EAAc,GAAG,EAAO,CAAC,CAEjE,EAAuB,EAAS,EAAS,GAE/C,OAEE,EAAC,EAAE,IAAA,CAAI,UAAU,uBAAuB,KAAM,WAC5C,EAACA,EAAAA,CACC,GAAG,QACH,aAAa,KACb,UAAU,IACV,UAAW,EAAG,qBAAsB,EAAU,CAC9C,UAAU,OACV,IAAK,EAAU,EAAW,EAAI,CAC9B,KAAM,EACN,GAAI,EAAO,QACX,GAAI,WAEH,EAAuB,EAAW,MAC/B,EACA,EAEV,CAEF,EAAe,YAAc,iBAE7B,IAAA,EAAe"}

package/dist/popover/popoverTrigger.d.ts

@@ -0,0 +1,12 @@
+import { SystemProps } from "../system/system.js";
+import { VuiComponent } from "../core/vui.js";
+
+//#region src/popover/popoverTrigger.d.ts
+/**
+ * Displays a trigger component to toggle display of the popover content.
+ * Can be rendered as any component using the 'as' prop. By default renders as a plain button.
+ */
+declare const PopoverTrigger: VuiComponent<"button", SystemProps>;
+//#endregion
+export { PopoverTrigger };
+//# sourceMappingURL=popoverTrigger.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popoverTrigger.d.ts","names":[],"sources":["../../src/popover/popoverTrigger.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAUa,cAAA,cAwBX,cAAA,CAAA,QAAA,cAAA"}

package/dist/popover/popoverTrigger.js

@@ -0,0 +1,2 @@
+import{mergeRefs as e}from"../utils/react.js";import{cs as t}from"../utils/styles.js";import{useStyleConfig as n}from"../core/theme.js";import{v as r}from"../core/styled.js";import{vui as i}from"../core/vui.js";import{usePopoverContext as a}from"./context.js";import{jsx as o}from"react/jsx-runtime";const s=i((i,s)=>{let{as:c,className:l,onClick:u,...d}=i,{setReference:f,isOpen:p,...m}=a()??{},h=n(`Popover`,{...m,...i}),g=c||r.button;return o(g,{isActive:p,className:t(`vui-popoverTrigger`,l),onClick:e=>{e.stopPropagation(),u?.(e)},ref:e(f,s),...h.trigger,...d})});s.displayName=`PopoverTrigger`;var c=s;export{c as default};globalThis.__vuiVersion__=`3.0.0-beta.7`;
+//# sourceMappingURL=popoverTrigger.js.map

package/dist/popover/popoverTrigger.js.map

@@ -0,0 +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":"4SAUA,MAAa,EAAiB,GAAoC,EAAO,IAAQ,CAE/E,GAAM,CAAE,KAAI,YAAW,QAAS,EAAa,GAAG,GAAS,EACnD,CAAE,eAAc,SAAQ,GAAG,GAAiB,GAAmB,EAAI,EAAE,CACrE,EAAS,EAAe,UAAW,CAAE,GAAG,EAAc,GAAG,EAAO,CAAC,CAEjE,EAAU,GAAM,EAAE,OAQxB,OACE,EAAC,EAAA,CACC,SAAU,EACV,UAAW,EAAG,qBAAsB,EAAU,CACrC,QAVI,GAAqC,CAEpD,EAAE,iBAAiB,CACnB,IAAc,EAAE,EAQd,IAAK,EAAU,EAAc,EAAI,CACjC,GAAI,EAAO,QACX,GAAI,GACJ,EAEJ,CAEF,EAAe,YAAc,iBAE7B,IAAA,EAAe"}

package/dist/popover/theme.js

@@ -0,0 +1,2 @@
+var e={baseStyle:{},defaultProps:{},parts:[`content`,`trigger`],sizes:{},variants:{}};export{e as default};globalThis.__vuiVersion__=`3.0.0-beta.7`;
+//# sourceMappingURL=theme.js.map

package/dist/popover/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/popover/theme.ts"],"sourcesContent":["const baseStyle = {}\n\nconst defaultProps = {}\n\nconst parts = ['content', 'trigger']\n\nconst sizes = {}\n\nconst variants = {}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":"AAUA,IAAA,EAAe,CACb,UAXgB,EAAE,CAYlB,aAVmB,EAAE,CAWrB,MATY,CAAC,UAAW,UAAU,CAUlC,MARY,EAAE,CASd,SAPe,EAAE,CAQlB"}

package/dist/popover/usePopover.d.ts

@@ -0,0 +1,25 @@
+import { UsePopoverProps } from "./usePopover.types.js";
+import * as react14 from "react";
+import { Instance, Props } from "tippy.js";
+
+//#region src/popover/usePopover.d.ts
+
+/**
+ * Controls the logic of instantiating and managing a tippy instance.
+ * 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.
+ */
+declare function usePopover(props?: UsePopoverProps): {
+  close: () => void | undefined;
+  instance: Instance<Props> | null;
+  isOpen: boolean;
+  open: () => void | undefined;
+  popper: HTMLElement | null;
+  reference: HTMLElement | null;
+  setPopper: react14.Dispatch<react14.SetStateAction<HTMLElement | null>>;
+  setReference: react14.Dispatch<react14.SetStateAction<HTMLElement | null>>;
+};
+type UsePopoverType = ReturnType<typeof usePopover>;
+//#endregion
+export { UsePopoverType, usePopover };
+//# sourceMappingURL=usePopover.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePopover.d.ts","names":[],"sources":["../../src/popover/usePopover.ts"],"sourcesContent":[],"mappings":";;;;;;;;;AAMyD;;AAOf,iBAAlB,UAAA,CAAkB,KAAA,CAAA,EAAA,eAAA,CAAA,EAAA;;;;;;;;;;KAmH9B,cAAA,GAAiB,kBAAkB"}

package/dist/popover/usePopover.js

@@ -0,0 +1,2 @@
+import{useCallbackRef as e}from"../utils/react.js";import{closeOnEscPlugin as t,matchWidthModifier as n}from"./consts.js";import{useCallback as r,useEffect as i,useMemo as a,useState as o}from"react";import s from"tippy.js";function c(c={}){let{closeOnBlur:l=!0,closeOnEsc:u=!0,defaultIsOpen:d=!1,flip:f=!0,isOpen:p,matchWidth:m,offset:h,onClose:g,onOpen:_,options:v,placement:y=`bottom-start`,trigger:b=`click`}=c,[x,S]=o(p??d),[C,w]=o(null),[T,E]=o(null),[D,O]=o(null),k=r(()=>C?.hide(),[C]),A=e(g),j=e(_),M=r(()=>C?.show(),[C]),N=p!==void 0,P=a(()=>{let{aria:e,offset:r,onHidden:i,onHide:a,onShow:o,plugins:s=[],popperOptions:c={},...g}=v??{};return{aria:e,arrow:!1,duration:[200,150],hideOnClick:N?!1:l,interactive:!0,maxWidth:`none`,offset:r??h??[0,4],onHidden:e=>{S(!1),i?.(e)},onHide:e=>{A(e),a?.(e)},onShow:e=>{S(!0),j(e),o?.(e)},placement:y,plugins:[...!N&&u?[t]:[],...s],popperOptions:{...c,modifiers:[{name:`flip`,enabled:f},{...n,enabled:!!m},...c.modifiers??[]]},showOnCreate:p??d,trigger:N?`manual`:b,...g}},[l,u,h,v,y,b]);return i(()=>{if(D!==null&&T!==null){C?.destroy();let e=s(T,{...P,content:D});w(e)}},[D,P,b]),i(()=>{N&&(p?C?.show():C?.hide())},[p]),{close:k,instance:C,isOpen:x,open:M,popper:D,reference:T,setPopper:O,setReference:E}}export{c as default};globalThis.__vuiVersion__=`3.0.0-beta.7`;
+//# sourceMappingURL=usePopover.js.map

package/dist/popover/usePopover.js.map

@@ -0,0 +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":"gOAaA,SAAwB,EAAW,EAAyB,EAAE,CAAE,CAC9D,GAAM,CACJ,cAAc,GACd,aAAa,GACb,gBAAgB,GAChB,OAAO,GACP,OAAQ,EACR,aACA,SACA,QAAS,EACT,OAAQ,EACR,UACA,YAAY,eACZ,UAAU,SACR,EAEE,CAAC,EAAQ,GAAa,EAAS,GAAc,EAAc,CAC3D,CAAC,EAAU,GAAe,EAA0B,KAAK,CACzD,CAAC,EAAW,GAAgB,EAA6B,KAAK,CAC9D,CAAC,EAAQ,GAAa,EAA6B,KAAK,CAExD,EAAQ,MAAkB,GAAU,MAAM,CAAE,CAAC,EAAS,CAAC,CACvD,EAAU,EAAe,EAAY,CACrC,EAAS,EAAe,EAAW,CACnC,EAAO,MAAkB,GAAU,MAAM,CAAE,CAAC,EAAS,CAAC,CAEtD,EAAe,IAAe,IAAA,GAE9BA,EAAoC,MAAc,CACtD,GAAM,CACJ,OACA,OAAQ,EACR,WACA,SACA,SACA,UAAU,EAAE,CACZ,gBAAgB,EAAE,CAClB,GAAG,GACD,GAAW,EAAE,CAEjB,MAAO,CACL,OACA,MAAO,GACP,SAAU,CAAC,IAAK,IAAI,CACpB,YAAc,EAA6B,GAAd,EAC7B,YAAa,GACb,SAAU,OACV,OAAQ,GAAiB,GAAU,CAAC,EAAG,EAAE,CACzC,SAAU,GAAY,CACpB,EAAU,GAAM,CAChB,IAAWC,EAAS,EAEtB,OAAQ,GAAY,CAClB,EAAQA,EAAS,CACjB,IAASA,EAAS,EAEpB,OAAQ,GAAY,CAClB,EAAU,GAAK,CACf,EAAOA,EAAS,CAChB,IAASA,EAAS,EAEpB,YACA,QAAS,CAAC,GAAI,CAAC,GAAgB,EAAa,CAAC,EAAiB,CAAG,EAAE,CAAG,GAAG,EAAQ,CACjF,cAAe,CACb,GAAG,EACH,UAAW,CACT,CACE,KAAM,OACN,QAAS,EACV,CACD,CAAE,GAAG,EAAoB,QAAS,CAAC,CAAC,EAAY,CAChD,GAAI,EAAc,WAAa,EAAE,CAClC,CACF,CACD,aAAc,GAAc,EAC5B,QAAU,EAAyB,SAAV,EACzB,GAAG,EACJ,EACA,CAAC,EAAa,EAAY,EAAQ,EAAS,EAAW,EAAQ,CAAC,CAyBlE,OAtBA,MAAgB,CACd,GAAI,IAAW,MAAQ,IAAc,KAAM,CAEzC,GAAU,SAAS,CAEnB,IAAM,EAAc,EAAM,EAAW,CACnC,GAAG,EACH,QAAS,EACV,CAAC,CAEF,EAAY,EAAY,GAEzB,CAAC,EAAQ,EAAc,EAAQ,CAAC,CAGnC,MAAgB,CACV,IACE,EAAY,GAAU,MAAM,CAC3B,GAAU,MAAM,GAEtB,CAAC,EAAW,CAAC,CAET,CACL,QACA,WACA,SACA,OACA,SACA,YACA,YACA,eACD"}

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

@@ -0,0 +1,34 @@
+import { AnyString } from "../utils/types.js";
+import { Instance, Placement, Props } from "tippy.js";
+
+//#region src/popover/usePopover.types.d.ts
+type PopoverTrigger = 'click' | 'focus' | 'focusin' | 'manual' | 'mouseenter';
+type UsePopoverProps = {
+  /** Content closes when clicking the trigger or anywhere outside. @default true */
+  closeOnBlur?: boolean;
+  /** Content closes when pressing 'Escape'. @default true */
+  closeOnEsc?: boolean;
+  /** Content is opened on first render. Uncontrolled mode. */
+  defaultIsOpen?: boolean;
+  /** Content placement could be changed to the opposite depending on available space. */
+  flip?: boolean;
+  /** Content is opened/closed by the consumer. Controlled mode. */
+  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'];
+  /** Invoked once content is fully hidden. */
+  onClose?: (instance: Instance<Props>) => void;
+  /** Invoked once content begins to show. */
+  onOpen?: (instance: Instance<Props>) => void;
+  /** Object with any Tippy props. */
+  options?: Partial<Props>;
+  /** Preferred placement of the content. Might be flipped if needs more space. */
+  placement?: Placement;
+  /** Determintes the events that cause the content to show. */
+  trigger?: PopoverTrigger | AnyString;
+};
+//#endregion
+export { UsePopoverProps };
+//# sourceMappingURL=usePopover.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePopover.types.d.ts","names":[],"sources":["../../src/popover/usePopover.types.ts"],"sourcesContent":[],"mappings":";;;;KAIY,cAAA;KAEA,eAAA;EAFA;EAEA,WAAA,CAAA,EAAA,OAAe;EAAA;YAchB,CAAA,EAAA,OAAA;;eAEY,CAAA,EAAA,OAAA;;MAED,CAAA,EAAA,OAAA;;QAEV,CAAA,EAAA,OAAA;;YAIA,CAAA,EAAA,OAAA;;EAA0B,MAAA,CAAA,EAV3B,KAU2B,CAAA,QAAA,CAAA;;uBARf,SAAS;;sBAEV,SAAS;;YAEnB,QAAQ;;cAEN;;YAEF,iBAAiB"}

package/dist/portal/portal.d.ts

@@ -0,0 +1,10 @@
+import { ChildrenProp } from "../core/types.js";
+import { PortalProps } from "./portal.types.js";
+import { FC } from "react";
+
+//#region src/portal/portal.d.ts
+/** Provided children are portaled to document.body or custom container. */
+declare const Portal: FC<PortalProps & ChildrenProp>;
+//#endregion
+export { Portal };
+//# sourceMappingURL=portal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"portal.d.ts","names":[],"sources":["../../src/portal/portal.tsx"],"sourcesContent":[],"mappings":";;;;;;cAQa,QAAQ,GAAG,cAAc"}

package/dist/portal/portal.js

@@ -0,0 +1,2 @@
+import{useEffect as e,useState as t}from"react";import{Fragment as n,jsx as r}from"react/jsx-runtime";import{createPortal as i}from"react-dom";const a=a=>{let{children:o,containerRef:s,disablePortal:c}=a,[l,u]=t();return e(()=>{c||u(s?.current??document.body)},[c]),c?r(n,{children:o}):l?i(o,l):r(n,{children:l})};a.displayName=`Portal`;var o=a;export{a as Portal,o as default};globalThis.__vuiVersion__=`3.0.0-beta.7`;
+//# sourceMappingURL=portal.js.map

package/dist/portal/portal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"portal.js","names":["Portal: FC<PortalProps & ChildrenProp>"],"sources":["../../src/portal/portal.tsx"],"sourcesContent":["import type { FC } from 'react'\nimport { useEffect, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\nimport type { ChildrenProp } from '../core'\nimport type { PortalProps } from './portal.types'\n\n/** Provided children are portaled to document.body or custom container. */\nexport const Portal: FC<PortalProps & ChildrenProp> = props => {\n  const { children, containerRef, disablePortal } = props\n  const [mountNode, setMountNode] = useState<HTMLElement>()\n\n  useEffect(() => {\n    if (!disablePortal) {\n      setMountNode(containerRef?.current ?? document.body)\n    }\n  }, [disablePortal])\n\n  if (disablePortal) return <>{children}</>\n\n  return mountNode ? createPortal(children, mountNode) : <>{mountNode}</>\n}\n\nPortal.displayName = 'Portal'\n\nexport default Portal\n"],"mappings":"+IAQA,MAAaA,EAAyC,GAAS,CAC7D,GAAM,CAAE,WAAU,eAAc,iBAAkB,EAC5C,CAAC,EAAW,GAAgB,GAAuB,CAUzD,OARA,MAAgB,CACT,GACH,EAAa,GAAc,SAAW,SAAS,KAAK,EAErD,CAAC,EAAc,CAAC,CAEf,EAAsB,EAAA,EAAA,CAAG,WAAA,CAAY,CAElC,EAAY,EAAa,EAAU,EAAU,CAAG,EAAA,EAAA,CAAA,SAAG,EAAA,CAAa,EAGzE,EAAO,YAAc,SAErB,IAAA,EAAe"}

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

@@ -0,0 +1,12 @@
+import { RefObject } from "react";
+
+//#region src/portal/portal.types.d.ts
+type PortalProps = {
+  /** Ref of a custom container that will be used instead of document.body. */
+  containerRef?: RefObject<HTMLElement | null>;
+  /** Content will be rendered as usual, without portaling. */
+  disablePortal?: boolean;
+};
+//#endregion
+export { PortalProps };
+//# sourceMappingURL=portal.types.d.ts.map

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

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

package/dist/progress/progress.d.ts

@@ -0,0 +1,12 @@
+import { SystemProps } from "../system/system.js";
+import { VuiComponent } from "../core/vui.js";
+import { ProgressProps } from "./progress.types.js";
+import * as styled_components48 from "styled-components";
+
+//#region src/progress/progress.d.ts
+declare const ProgressBase: styled_components48.StyledComponent<"div", styled_components48.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

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

package/dist/progress/progress.js

@@ -0,0 +1,5 @@
+import{cs as e}from"../utils/styles.js";import{useStyleConfig as t}from"../core/theme.js";import{styled as n}from"../core/styled.js";import{vui as r}from"../core/vui.js";import{Box as i}from"../box/box.js";import{useEffect as a,useState as o}from"react";import{jsx as s}from"react/jsx-runtime";const c=n.divBox`
+  display: flex;
+  width: 100%;
+`,l=r((n,r)=>{let{className:l,value:u=0,showPercentage:d,...f}=n,[p,m]=o(0),h=t(`Progress`,n);a(()=>{let e=u?Math.ceil(u):0;m(e>100?100:e)},[u]);let g=f.bg||h.bg,_=f.color||h.color;return s(c,{className:e(`vui-progress`,l),ref:r,...h.container,...f,bg:g,borderRadius:`sm`,h:1,children:s(i,{bg:_,borderRadius:`sm`,position:`relative`,textAlign:`right`,transition:`width 0.4s ease-in-out;`,w:`${p}%`,children:d&&u>=3&&s(i,{...h.percentage,position:`absolute`,right:`0`,children:`${p}%`})})})});l.displayName=`Progress`;export{l as Progress,c as ProgressBase};globalThis.__vuiVersion__=`3.0.0-beta.7`;
+//# sourceMappingURL=progress.js.map

package/dist/progress/progress.js.map

@@ -0,0 +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":"sSAOA,MAAa,EAAe,EAAO,MAAM;;;EAS5B,EAAW,GAA2B,EAAO,IAAQ,CAChE,GAAM,CAAE,YAAW,QAAQ,EAAG,iBAAgB,GAAG,GAAS,EAEpD,CAAC,EAAO,GAAY,EAAS,EAAE,CAE/B,EAAS,EAAe,WAAY,EAAM,CAEhD,MAAgB,CACd,IAAM,EAAK,EAAY,KAAK,KAAK,EAAM,CAApB,EACnB,EAAS,EAAI,IAAW,IAAW,EAAE,EACpC,CAAC,EAAM,CAAC,CAEX,IAAM,EAAK,EAAK,IAAM,EAAO,GACvB,EAAQ,EAAK,OAAS,EAAO,MAEnC,OACE,EAAC,EAAA,CACC,UAAW,EAAG,eAAgB,EAAU,CACnC,MACL,GAAI,EAAO,UACX,GAAI,EACA,KACJ,aAAa,KACb,EAAG,WAEH,EAAC,EAAA,CACC,GAAI,EACJ,aAAa,KACb,SAAS,WACT,UAAU,QACV,WAAW,0BACX,EAAG,GAAG,EAAM,YAEX,GAAkB,GAAS,GAC1B,EAAC,EAAA,CAAI,GAAI,EAAO,WAAY,SAAS,WAAW,MAAM,aAAK,GAAG,EAAM,IAAS,EAE3E,EACO,EAEjB,CAEF,EAAS,YAAc"}

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

@@ -0,0 +1,11 @@
+import { ThemingProps } from "../theme/types.js";
+import { SystemProps } from "../system/system.js";
+
+//#region src/progress/progress.types.d.ts
+type ProgressProps = SystemProps & ThemingProps<'Progress'> & {
+  value?: number;
+  showPercentage?: boolean;
+};
+//#endregion
+export { ProgressProps };
+//# sourceMappingURL=progress.types.d.ts.map

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

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

package/dist/progress/theme.js

@@ -0,0 +1,2 @@
+var e={baseStyle:{},defaultProps:{size:`md`,variant:`primary`},sizes:{sm:{container:{minH:`4px`},percentage:{fontSize:`80%`,top:`-16px`}},md:{container:{minH:`8px`},percentage:{fontSize:`100%`,top:`-20px`}},lg:{container:{minH:`12px`},percentage:{fontSize:`110%`,top:`-22px`}},xl:{container:{minH:`16px`},percentage:{fontSize:`120%`,top:`-24px`}}},variants:{primary:{bg:`darkBlue.95`,color:`darkBlue.main`},green:{bg:`landGreen.95`,color:`landGreen.main`},red:{bg:`energyRed.95`,color:`energyRed.main`}}};export{e as default};globalThis.__vuiVersion__=`3.0.0-beta.7`;
+//# sourceMappingURL=theme.js.map

package/dist/progress/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/progress/theme.ts"],"sourcesContent":["const baseStyle = {}\n\nconst defaultProps = {\n  size: 'md',\n  variant: 'primary',\n}\n\nconst sizes = {\n  sm: {\n    container: {\n      minH: '4px',\n    },\n    percentage: {\n      fontSize: '80%',\n      top: '-16px',\n    },\n  },\n  md: {\n    container: {\n      minH: '8px',\n    },\n    percentage: {\n      fontSize: '100%',\n      top: '-20px',\n    },\n  },\n  lg: {\n    container: {\n      minH: '12px',\n    },\n    percentage: {\n      fontSize: '110%',\n      top: '-22px',\n    },\n  },\n  xl: {\n    container: {\n      minH: '16px',\n    },\n    percentage: {\n      fontSize: '120%',\n      top: '-24px',\n    },\n  },\n}\n\nconst variants = {\n  primary: {\n    bg: 'darkBlue.95',\n    color: 'darkBlue.main',\n  },\n  green: {\n    bg: 'landGreen.95',\n    color: 'landGreen.main',\n  },\n  red: {\n    bg: 'energyRed.95',\n    color: 'energyRed.main',\n  },\n}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  sizes,\n  variants,\n}\n"],"mappings":"AA6DA,IAAA,EAAe,CACb,UA9DgB,EAAE,CA+DlB,aA7DmB,CACnB,KAAM,KACN,QAAS,UACV,CA2DC,MAzDY,CACZ,GAAI,CACF,UAAW,CACT,KAAM,MACP,CACD,WAAY,CACV,SAAU,MACV,IAAK,QACN,CACF,CACD,GAAI,CACF,UAAW,CACT,KAAM,MACP,CACD,WAAY,CACV,SAAU,OACV,IAAK,QACN,CACF,CACD,GAAI,CACF,UAAW,CACT,KAAM,OACP,CACD,WAAY,CACV,SAAU,OACV,IAAK,QACN,CACF,CACD,GAAI,CACF,UAAW,CACT,KAAM,OACP,CACD,WAAY,CACV,SAAU,OACV,IAAK,QACN,CACF,CACF,CAqBC,SAnBe,CACf,QAAS,CACP,GAAI,cACJ,MAAO,gBACR,CACD,MAAO,CACL,GAAI,eACJ,MAAO,iBACR,CACD,IAAK,CACH,GAAI,eACJ,MAAO,iBACR,CACF,CAOA"}

package/dist/progressCircular/consts.js

@@ -0,0 +1,2 @@
+const e={position:`absolute`,w:`100%`,left:0,right:0,alignItems:`center`,justifyContent:`center`,zIndex:100},t=-16,n=100;export{e as absCenterStyles,t as labelBottom,n as maxValue};globalThis.__vuiVersion__=`3.0.0-beta.7`;
+//# sourceMappingURL=consts.js.map

package/dist/progressCircular/consts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"consts.js","names":[],"sources":["../../src/progressCircular/consts.ts"],"sourcesContent":["export const absCenterStyles = {\n  position: 'absolute',\n  w: '100%',\n  left: 0,\n  right: 0,\n  alignItems: 'center',\n  justifyContent: 'center',\n  zIndex: 100,\n}\n\nexport const labelBottom = -16\n\nexport const maxValue = 100\n"],"mappings":"AAAA,MAAa,EAAkB,CAC7B,SAAU,WACV,EAAG,OACH,KAAM,EACN,MAAO,EACP,WAAY,SACZ,eAAgB,SAChB,OAAQ,IACT,CAEY,EAAc,IAEd,EAAW"}

package/dist/progressCircular/progressCircular.d.ts

@@ -0,0 +1,12 @@
+import { SystemProps } from "../system/system.js";
+import { VuiComponent } from "../core/vui.js";
+import { ProgressCircularProps } from "./progressCircular.types.js";
+import * as styled_components50 from "styled-components";
+
+//#region src/progressCircular/progressCircular.d.ts
+declare const ProgressCircularBase: styled_components50.StyledComponent<"div", styled_components50.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

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

package/dist/progressCircular/progressCircular.js

@@ -0,0 +1,12 @@
+import{cs as e}from"../utils/styles.js";import{useStyleConfig as t}from"../core/theme.js";import{styled as n}from"../core/styled.js";import{vui as r}from"../core/vui.js";import{Box as i}from"../box/box.js";import{T as a}from"../t/t.js";import{absCenterStyles as o,labelBottom as s,maxValue as c}from"./consts.js";import{useEffect as l,useState as u}from"react";import{jsx as d,jsxs as f}from"react/jsx-runtime";const p=n.divBox`
+  display: flex;
+  position: relative;
+  width: 100%;
+`,m=n.circle`
+  fill: transparent;
+`,h=n(m)`
+  transform: rotate(-90deg);
+  transform-origin: 50% 50%;
+  transition: stroke-dashoffset 0.5s ease-out;
+`,g=r((n,r)=>{let{children:g,className:_,label:v,value:y=0,showPercentage:b,...x}=n,S=t(`ProgressCircular`,n),[C,w]=u(y);l(()=>{w(y?Math.ceil(y):0)},[y]),l(()=>{let e=y?Math.ceil(y):0;w(e>c?c:e)},[y]);let T=c/2-S.strokeWidth*2,E=T*2*Math.PI,D=E-C/c*E;return f(p,{className:e(`vui-progress-circular`,_),ref:r,w:S.width,...x,children:[f(`svg`,{"aria-valuemax":c,"aria-valuemin":0,"aria-valuenow":C,height:S.width,role:`meter`,version:`1.1`,viewBox:`0 0 100 100`,width:S.width,xmlns:`http://www.w3.org/2000/svg`,children:[d(m,{cx:`50`,cy:`50`,r:T,stroke:S.stroke.main,strokeWidth:S.strokeWidth}),d(h,{cx:`50`,cy:`50`,r:T,stroke:S.stroke.progress,strokeDasharray:`${E} ${E}`,strokeDashoffset:D,strokeWidth:S.strokeWidth})]}),d(i,{...o,top:S.top,children:g||(b?f(a,{color:S.color,fontSize:S.fontSize,children:[C,`%`]}):null)}),!!v&&d(i,{...o,bottom:s,children:d(a,{color:S.color,fontSize:S.fontSize,children:v})})]})});g.displayName=`ProgressCircular`;export{g as ProgressCircular,p as ProgressCircularBase};globalThis.__vuiVersion__=`3.0.0-beta.7`;
+//# sourceMappingURL=progressCircular.js.map

package/dist/progressCircular/progressCircular.js.map

@@ -0,0 +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":"2ZAUA,MAAa,EAAuB,EAAO,MAAM;;;;EAK3C,EAAa,EAAO,MAAM;;EAI1B,EAAiB,EAAO,EAAW;;;;EAO5B,EAAmB,GAAmC,EAAO,IAAQ,CAChF,GAAM,CAAE,WAAU,YAAW,QAAO,QAAQ,EAAG,iBAAgB,GAAG,GAAS,EAErE,EAAS,EAAe,mBAAoB,EAAM,CAElD,CAAC,EAAU,GAAe,EAAS,EAAM,CAE/C,MAAgB,CACd,EAAY,EAAQ,KAAK,KAAK,EAAM,CAAG,EAAE,EACxC,CAAC,EAAM,CAAC,CAEX,MAAgB,CACd,IAAM,EAAK,EAAY,KAAK,KAAK,EAAM,CAApB,EACnB,EAAY,EAAI,EAAW,EAAW,EAAE,EACvC,CAAC,EAAM,CAAC,CAEX,IAAM,EAAS,EAAW,EAAI,EAAO,YAAc,EAC7C,EAAQ,EAAS,EAAI,KAAK,GAC1B,EAAS,EAAS,EAAW,EAAY,EAE/C,OACE,EAAC,EAAA,CAAqB,UAAW,EAAG,wBAAyB,EAAU,CAAO,MAAK,EAAG,EAAO,MAAO,GAAI,YACtG,EAAC,MAAA,CACC,gBAAe,EACf,gBAAe,EACf,gBAAe,EACf,OAAQ,EAAO,MACf,KAAK,QACL,QAAQ,MACR,QAAQ,cACR,MAAO,EAAO,MACd,MAAM,uCAEN,EAAC,EAAA,CAAW,GAAG,KAAK,GAAG,KAAK,EAAG,EAAQ,OAAQ,EAAO,OAAO,KAAM,YAAa,EAAO,aAAe,CACtG,EAAC,EAAA,CACC,GAAG,KACH,GAAG,KACH,EAAG,EACH,OAAQ,EAAO,OAAO,SACtB,gBAAiB,GAAG,EAAM,GAAG,IAC7B,iBAAkB,EAClB,YAAa,EAAO,aACpB,CAAA,EACE,CACN,EAAC,EAAA,CAAI,GAAK,EAA8B,IAAK,EAAO,aACjD,IAEG,EACF,EAAC,EAAA,CAAE,MAAO,EAAO,MAAO,SAAU,EAAO,mBACtC,EAAS,IAAA,EACR,CACF,OACA,CACL,CAAC,CAAC,GACD,EAAC,EAAA,CAAI,GAAK,EAA8B,OAAQ,WAC9C,EAAC,EAAA,CAAE,MAAO,EAAO,MAAO,SAAU,EAAO,kBACtC,GACC,EACA,GAEa,EAEzB,CAEF,EAAiB,YAAc"}

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

@@ -0,0 +1,12 @@
+import { ThemingProps } from "../theme/types.js";
+import { SystemProps } from "../system/system.js";
+
+//#region src/progressCircular/progressCircular.types.d.ts
+type ProgressCircularProps = SystemProps & ThemingProps<'ProgressCircular'> & {
+  label?: string;
+  value?: number;
+  showPercentage?: boolean;
+};
+//#endregion
+export { ProgressCircularProps };
+//# sourceMappingURL=progressCircular.types.d.ts.map

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

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

package/dist/progressCircular/theme.js

@@ -0,0 +1,2 @@
+import{darkBlue as e,energyRed as t,landGreen as n}from"../theme/foundations/colors.js";const r={color:`darkBlue.main`},i={size:`md`,variant:`primary`},a={sm:{strokeWidth:4,width:46,top:15,fontSize:12},md:{strokeWidth:5,width:80,top:30,fontSize:16},lg:{strokeWidth:6,width:120,top:48,fontSize:18},xl:{strokeWidth:7,width:160,top:64,fontSize:22}},o={primary:{stroke:{main:e[95],progress:e.main}},green:{stroke:{main:n[95],progress:n.main}},red:{stroke:{main:t[95],progress:t.main}}};var s={baseStyle:r,defaultProps:i,sizes:a,variants:o};export{s as default};globalThis.__vuiVersion__=`3.0.0-beta.7`;
+//# sourceMappingURL=theme.js.map

package/dist/progressCircular/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/progressCircular/theme.ts"],"sourcesContent":["import { darkBlue, energyRed, landGreen } from '../theme/foundations/colors'\n\nconst baseStyle = {\n  color: 'darkBlue.main',\n}\n\nconst defaultProps = {\n  size: 'md',\n  variant: 'primary',\n}\n\nconst sizes = {\n  sm: {\n    strokeWidth: 4,\n    width: 46,\n    top: 15,\n    fontSize: 12,\n  },\n  md: { strokeWidth: 5, width: 80, top: 30, fontSize: 16 },\n  lg: { strokeWidth: 6, width: 120, top: 48, fontSize: 18 },\n  xl: { strokeWidth: 7, width: 160, top: 64, fontSize: 22 },\n}\n\nconst variants = {\n  primary: {\n    stroke: {\n      main: darkBlue[95],\n      progress: darkBlue.main,\n    },\n  },\n  green: {\n    stroke: {\n      main: landGreen[95],\n      progress: landGreen.main,\n    },\n  },\n  red: {\n    stroke: {\n      main: energyRed[95],\n      progress: energyRed.main,\n    },\n  },\n}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  sizes,\n  variants,\n}\n"],"mappings":"wFAEA,MAAM,EAAY,CAChB,MAAO,gBACR,CAEK,EAAe,CACnB,KAAM,KACN,QAAS,UACV,CAEK,EAAQ,CACZ,GAAI,CACF,YAAa,EACb,MAAO,GACP,IAAK,GACL,SAAU,GACX,CACD,GAAI,CAAE,YAAa,EAAG,MAAO,GAAI,IAAK,GAAI,SAAU,GAAI,CACxD,GAAI,CAAE,YAAa,EAAG,MAAO,IAAK,IAAK,GAAI,SAAU,GAAI,CACzD,GAAI,CAAE,YAAa,EAAG,MAAO,IAAK,IAAK,GAAI,SAAU,GAAI,CAC1D,CAEK,EAAW,CACf,QAAS,CACP,OAAQ,CACN,KAAM,EAAS,IACf,SAAU,EAAS,KACpB,CACF,CACD,MAAO,CACL,OAAQ,CACN,KAAM,EAAU,IAChB,SAAU,EAAU,KACrB,CACF,CACD,IAAK,CACH,OAAQ,CACN,KAAM,EAAU,IAChB,SAAU,EAAU,KACrB,CACF,CACF,CAED,IAAA,EAAe,CACb,YACA,eACA,QACA,WACD"}

package/dist/radio/consts.js

@@ -0,0 +1,2 @@
+const e={unchecked:`sandstone.60`,checked:`seaBlue.28`,hover:`seaBlue.20`,focus:`seaBlue.35`};export{e as radioColors};globalThis.__vuiVersion__=`3.0.0-beta.7`;
+//# sourceMappingURL=consts.js.map

package/dist/radio/consts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"consts.js","names":[],"sources":["../../src/radio/consts.ts"],"sourcesContent":["export const radioColors = {\n  unchecked: 'sandstone.60',\n  checked: 'seaBlue.28',\n  hover: 'seaBlue.20',\n  focus: 'seaBlue.35',\n} as const\n"],"mappings":"AAAA,MAAa,EAAc,CACzB,UAAW,eACX,QAAS,aACT,MAAO,aACP,MAAO,aACR"}

package/dist/radio/context.d.ts

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

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

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

package/dist/radio/context.js

@@ -0,0 +1,2 @@
+import{createContext as e}from"../utils/react.js";const[t,n]=e({isOptional:!0});export{t as RadioGroupProvider,n as useRadioGroupContext};globalThis.__vuiVersion__=`3.0.0-beta.7`;
+//# sourceMappingURL=context.js.map

package/dist/radio/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../src/radio/context.ts"],"sourcesContent":["import type { Dict } from '../utils'\nimport { createContext } from '../utils'\n\nconst [RadioGroupProvider, useRadioGroupContext] = createContext<Dict>({ isOptional: true })\n\nexport { RadioGroupProvider, useRadioGroupContext }\n"],"mappings":"kDAGA,KAAM,CAAC,EAAoB,GAAwB,EAAoB,CAAE,WAAY,GAAM,CAAC"}

package/dist/radio/radio.d.ts

@@ -0,0 +1,30 @@
+import { AnimationProps } from "../system/animations.js";
+import { BackgroundColorProps } from "../system/backgrounds.js";
+import { BorderBottomColorProps, BorderBottomProps, BorderBottomWidthProps, BorderColorProps, BorderLeftColorProps, BorderLeftProps, BorderLeftWidthProps, BorderProps, BorderRadiusProps, BorderRightColorProps, BorderRightProps, BorderRightWidthProps, BorderStyleProps, BorderTopColorProps, BorderTopProps, BorderTopWidthProps, BorderWidthProps, DivideColorProps, DivideStyleProps, DivideXProps, DivideXReverseProps, DivideYProps, DivideYReverseProps, OutlineColorProps, OutlineProps, OutlineStyleProps, OutlineWidthProps, RingColorProps, RingProps } from "../system/borders.js";
+import { IsTruncatedProps, MaxLinesProps, WordBreakProps } from "../system/custom.js";
+import { BoxShadowProps, OpacityProps, TextShadowProps } from "../system/effects.js";
+import { BottomProps, BoxSizingProps, DisplayProps, FloatProps, LeftProps, ObjectFitProps, OverflowProps, OverflowXProps, OverflowYProps, OverscrollBehaviorProps, PositionProps, RightProps, TopProps, VisibilityProps, ZIndexProps } from "../system/layout.js";
+import { AlignContentProps, AlignItemsProps, AlignSelfProps, FlexBasisProps, FlexDirectionProps, FlexGrowProps, FlexProps, FlexShrinkProps, FlexWrapProps, JustifyContentProps, JustifyItemsProps, JustifySelfProps, OrderProps } from "../system/flexboxes.js";
+import { AppearanceProps, CursorProps, PointerEventsProps, ResizeProps, UserSelectProps } from "../system/interactivity.js";
+import { HeightProps, MaxHeightProps, MaxWidthProps, MinHeightProps, MinWidthProps, WidthProps } from "../system/sizing.js";
+import { MarginBottomProps, MarginLeftProps, MarginProps, MarginRightProps, MarginTopProps, MarginXProps, MarginYProps, PaddingBottomProps, PaddingLeftProps, PaddingProps, PaddingRightProps, PaddingTopProps, PaddingXProps, PaddingYProps, SpaceXProps, SpaceXReverseProps, SpaceYProps, SpaceYReverseProps } from "../system/space.js";
+import { ColProps, RowProps } from "../system/flexboxGrids.js";
+import { ColumnGapProps, GapProps, GridAreaProps, GridAutoColumnsProps, GridAutoFlowProps, GridAutoRowsProps, GridColumnProps, GridRowProps, GridTemplateAreasProps, GridTemplateColumnsProps, GridTemplateRowsProps, RowGapProps } from "../system/grids.js";
+import { BorderCollapseProps, TableLayoutProps } from "../system/tables.js";
+import { RotateProps, ScaleProps, ScaleXProps, ScaleYProps, SkewXProps, SkewYProps, TransformOriginProps, TransformProps, TranslateXProps, TranslateYProps } from "../system/transforms.js";
+import { TransitionDelayProps, TransitionDurationProps, TransitionPropertyProps, TransitionProps, TransitionTimingFunctionProps } from "../system/transitions.js";
+import { ColorProps, FontFamilyProps, FontSizeProps, FontStyleProps, FontWeightProps, LetterSpacingProps, LineHeightProps, ListStylePositionProps, ListStyleTypeProps, TextAlignProps, TextDecorationProps, TextOverflowProps, TextTransformProps, VerticalAlignProps, WhiteSpaceProps } from "../system/typography.js";
+import { VuiComponent } from "../core/vui.js";
+import { RadioProps, RadioStyleProps } from "./radio.types.js";
+import * as styled_components60 from "styled-components";
+
+//#region src/radio/radio.d.ts
+declare const RadioBase: styled_components60.StyledComponent<"label", styled_components60.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.
+ */
+declare const Radio: VuiComponent<"span", RadioProps>;
+//#endregion
+export { Radio, RadioBase };
+//# sourceMappingURL=radio.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio.d.ts","names":[],"sources":["../../src/radio/radio.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;;;;;;;cAiCa,WAAS,mBAAA,CAAA,yBAsBrB,mBAAA,CAtBqB,YAAA,k+EAAA;;;;;cA4BT,4BAAK"}

package/dist/radio/radio.js

@@ -0,0 +1,41 @@
+import{filterUndefined as e}from"../utils/object.js";import{cs as t}from"../utils/styles.js";import{disabled as n}from"../checkbox/consts.js";import{radioColors as r}from"./consts.js";import{omitThemingProps as i,th as a,useStyleConfig as o}from"../core/theme.js";import{styled as s}from"../core/styled.js";import{vui as c}from"../core/vui.js";import l from"../icon/icon.js";import u from"../t/t.js";import{useRadioGroupContext as d}from"./context.js";import{useEffect as f,useState as p}from"react";import{jsx as m,jsxs as h}from"react/jsx-runtime";const g=s.spanBox`
+  border-radius: 50%;
+  display: inline-flex;
+  flex-shrink: 0;
+  position: relative;
+  transition-duration: fast;
+`,_=s.input`
+  cursor: inherit;
+  height: 100%;
+  left: 0;
+  margin: 0;
+  opacity: 0;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 1;
+`,v=s.labelBox`
+  align-items: center;
+  cursor: pointer;
+  display: inline-flex;
+  width: fit-content;
+
+  &:not([aria-disabled='true']):hover .vui-radioControl {
+    color: ${e=>a.color(e.controlHoverColor)};
+  }
+
+  .vui-radioControl:focus-within {
+    color: ${r.focus};
+  }
+
+  &[aria-disabled='true'] {
+    color: ${n.text};
+    cursor: not-allowed;
+
+    .vui-radioControl {
+      color: ${n.icon};
+    }
+  }
+`,y=c((n,a)=>{let{defaultValue:s,isChecked:c,onChange:y,value:b,...x}=d()??{},S=c===void 0?void 0:c===n.value,C={...x,...n},{checked:w=b===void 0?void 0:n.value===b,children:T,className:E,defaultChecked:D=s===void 0?void 0:n.value===s,disabled:O,icon:k=`uiRadioUnselected`,iconChecked:A=`uiRadioSelected`,id:j,inputProps:M,inputRef:N,label:P,name:F,onChange:I,required:L,value:R,...z}=i(C),[B,V]=p(S??w??D),H=o(`Radio`,C),{color:U,hoverColor:W,...G}=H.control,K=B?A:k,q=T||P?1:0,J=B?r.checked:U,Y=W||r.hover;f(()=>{c===void 0?w!==void 0&&V(w):V(c===R)},[w,c]);function X(e){y?.(e),I?.(e)}let Z=e({"aria-disabled":O});return h(v,{className:t(`vui-radio`,E),controlHoverColor:Y,ref:a,...H.container,...Z,...z,children:[h(g,{bg:`white`,className:`vui-radioControl`,color:J,focusWithinRing:3,mr:q,...G,children:[m(_,{className:`vui-radioInput`,onClick:X,ref:N,type:`radio`,defaultChecked:w,disabled:O,id:j,name:F,required:L,value:R,...M}),m(l,{className:`vui-radioIcon`,h:`100%`,name:K,w:`100%`})]}),T??(P&&m(u,{className:`vui-radioLabel`,lineHeight:`normal`,...H.label,children:P}))]})});y.displayName=`Radio`;export{y as Radio,v as RadioBase};globalThis.__vuiVersion__=`3.0.0-beta.7`;
+//# sourceMappingURL=radio.js.map

package/dist/radio/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","names":["disabled","Icon","T"],"sources":["../../src/radio/radio.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport { disabled } from '../checkbox/consts'\nimport { omitThemingProps, styled, th, useStyleConfig, vui } from '../core'\nimport Icon from '../icon'\nimport T from '../t'\nimport type { ChangeEvent } from '../utils'\nimport { cs, filterUndefined } from '../utils'\nimport { radioColors } from './consts'\nimport { useRadioGroupContext } from './context'\nimport type { RadioProps, RadioStyleProps } from './radio.types'\n\nconst RadioControl = styled.spanBox`\n  border-radius: 50%;\n  display: inline-flex;\n  flex-shrink: 0;\n  position: relative;\n  transition-duration: fast;\n`\n\nconst RadioInput = styled.input`\n  cursor: inherit;\n  height: 100%;\n  left: 0;\n  margin: 0;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n  z-index: 1;\n`\n\nexport const RadioBase = styled.labelBox<RadioStyleProps>`\n  align-items: center;\n  cursor: pointer;\n  display: inline-flex;\n  width: fit-content;\n\n  &:not([aria-disabled='true']):hover .vui-radioControl {\n    color: ${p => th.color(p.controlHoverColor)};\n  }\n\n  .vui-radioControl:focus-within {\n    color: ${radioColors.focus};\n  }\n\n  &[aria-disabled='true'] {\n    color: ${disabled.text};\n    cursor: not-allowed;\n\n    .vui-radioControl {\n      color: ${disabled.icon};\n    }\n  }\n`\n\n/**\n * Allows selection of a single choice from a set of items. Handles controlled and uncontrolled modes.\n * Uses icons to display itself in different states.\n */\nexport const Radio = vui<'span', RadioProps>((props, ref) => {\n  const {\n    defaultValue: groupDefaultValue,\n    isChecked: groupIsChecked,\n    onChange: groupOnChange,\n    value: groupValue,\n    ...radioGroupProps\n  } = useRadioGroupContext() ?? {}\n  const defaultIsChecked = groupIsChecked !== undefined ? groupIsChecked === props.value : undefined\n\n  const mergedProps = { ...radioGroupProps, ...props }\n  const {\n    checked = groupValue !== undefined ? props.value === groupValue : undefined,\n    children,\n    className,\n    defaultChecked = groupDefaultValue !== undefined ? props.value === groupDefaultValue : undefined,\n    disabled,\n    icon: iconProp = 'uiRadioUnselected',\n    iconChecked = 'uiRadioSelected',\n    id,\n    inputProps,\n    inputRef,\n    label,\n    name,\n    onChange,\n    required,\n    value,\n    ...rest\n  } = omitThemingProps(mergedProps)\n\n  const [isChecked, setIsChecked] = useState(defaultIsChecked ?? checked ?? defaultChecked)\n  const styles = useStyleConfig('Radio', mergedProps)\n  const { color: controlColor, hoverColor, ...controlStyles } = styles.control\n\n  const icon = isChecked ? iconChecked : iconProp\n  const controlMr = children || label ? 1 : 0\n  const color = isChecked ? radioColors.checked : controlColor\n  const controlHoverColor = hoverColor ? hoverColor : radioColors.hover\n\n  useEffect(() => {\n    if (groupIsChecked !== undefined) setIsChecked(groupIsChecked === value)\n    else if (checked !== undefined) setIsChecked(checked)\n  }, [checked, groupIsChecked])\n\n  function handleOnChange(e: React.MouseEvent<HTMLInputElement>) {\n    groupOnChange?.(e)\n    onChange?.(e as unknown as ChangeEvent)\n  }\n\n  const aliasedProps = filterUndefined({\n    'aria-disabled': disabled,\n  })\n\n  return (\n    <RadioBase\n      className={cs('vui-radio', className)}\n      controlHoverColor={controlHoverColor}\n      ref={ref}\n      {...styles.container}\n      {...aliasedProps}\n      {...rest}\n    >\n      <RadioControl\n        bg=\"white\"\n        className=\"vui-radioControl\"\n        color={color}\n        focusWithinRing={3}\n        mr={controlMr}\n        {...controlStyles}\n      >\n        <RadioInput\n          className=\"vui-radioInput\"\n          onClick={handleOnChange}\n          ref={inputRef}\n          type=\"radio\"\n          {...{ defaultChecked: checked, disabled, id, name, required, value }}\n          {...inputProps}\n        />\n        <Icon className=\"vui-radioIcon\" h=\"100%\" name={icon} w=\"100%\" />\n      </RadioControl>\n\n      {children ??\n        (label && (\n          <T className=\"vui-radioLabel\" lineHeight=\"normal\" {...styles.label}>\n            {label}\n          </T>\n        ))}\n    </RadioBase>\n  )\n})\n\nRadio.displayName = 'Radio'\n\nexport default Radio\n"],"mappings":"siBAYA,MAAM,EAAe,EAAO,OAAO;;;;;;EAQ7B,EAAa,EAAO,KAAK;;;;;;;;;;;EAalB,EAAY,EAAO,QAAyB;;;;;;;aAO5C,GAAK,EAAG,MAAM,EAAE,kBAAkB,CAAC;;;;aAInC,EAAY,MAAM;;;;aAIlB,EAAS,KAAK;;;;eAIZ,EAAS,KAAK;;;EAShB,EAAQ,GAAyB,EAAO,IAAQ,CAC3D,GAAM,CACJ,aAAc,EACd,UAAW,EACX,SAAU,EACV,MAAO,EACP,GAAG,GACD,GAAsB,EAAI,EAAE,CAC1B,EAAmB,IAAmB,IAAA,GAA6C,IAAA,GAAjC,IAAmB,EAAM,MAE3E,EAAc,CAAE,GAAG,EAAiB,GAAG,EAAO,CAC9C,CACJ,UAAU,IAAe,IAAA,GAAyC,IAAA,GAA7B,EAAM,QAAU,EACrD,WACA,YACA,iBAAiB,IAAsB,IAAA,GAAgD,IAAA,GAApC,EAAM,QAAU,EACnE,SAAA,EACA,KAAM,EAAW,oBACjB,cAAc,kBACd,KACA,aACA,WACA,QACA,OACA,WACA,WACA,QACA,GAAG,GACD,EAAiB,EAAY,CAE3B,CAAC,EAAW,GAAgB,EAAS,GAAoB,GAAW,EAAe,CACnF,EAAS,EAAe,QAAS,EAAY,CAC7C,CAAE,MAAO,EAAc,aAAY,GAAG,GAAkB,EAAO,QAE/D,EAAO,EAAY,EAAc,EACjC,EAAY,GAAY,EAAQ,EAAI,EACpC,EAAQ,EAAY,EAAY,QAAU,EAC1C,EAAoB,GAA0B,EAAY,MAEhE,MAAgB,CACV,IAAmB,IAAA,GACd,IAAY,IAAA,IAAW,EAAa,EAAQ,CADnB,EAAa,IAAmB,EAAM,EAEvE,CAAC,EAAS,EAAe,CAAC,CAE7B,SAAS,EAAe,EAAuC,CAC7D,IAAgB,EAAE,CAClB,IAAW,EAA4B,CAGzC,IAAM,EAAe,EAAgB,CACnC,gBAAiBA,EAClB,CAAC,CAEF,OACE,EAAC,EAAA,CACC,UAAW,EAAG,YAAa,EAAU,CAClB,oBACd,MACL,GAAI,EAAO,UACX,GAAI,EACJ,GAAI,YAEJ,EAAC,EAAA,CACC,GAAG,QACH,UAAU,mBACH,QACP,gBAAiB,EACjB,GAAI,EACJ,GAAI,YAEJ,EAAC,EAAA,CACC,UAAU,iBACV,QAAS,EACT,IAAK,EACL,KAAK,QACC,eAAgB,EAAS,SAAA,EAAU,KAAI,OAAM,WAAU,QAC7D,GAAI,GACJ,CACF,EAACC,EAAAA,CAAK,UAAU,gBAAgB,EAAE,OAAO,KAAM,EAAM,EAAE,QAAS,CAAA,EACnD,CAEd,IACE,GACC,EAACC,EAAAA,CAAE,UAAU,iBAAiB,WAAW,SAAS,GAAI,EAAO,eAC1D,GACC,EAAA,EAEE,EAEd,CAEF,EAAM,YAAc"}