@veracity/vui 5.4.0-alpha.manual.2609080740 → 5.4.0

package/dist/onedesign-tokens/dist/js/rem/button.js

@@ -61,5 +61,5 @@ const buttonDisabledOpacity = "0.5";
 
 //#endregion
 export { buttonDisabledCursor, buttonTypePrimaryActiveBackgroundColorDark, buttonTypePrimaryActiveBackgroundColorLight, buttonTypePrimaryActiveBorderColorDark, buttonTypePrimaryActiveBorderColorLight, buttonTypePrimaryActiveTextColorDark, buttonTypePrimaryActiveTextColorLight, buttonTypePrimaryDefaultBackgroundColorDark, buttonTypePrimaryDefaultBackgroundColorLight, buttonTypePrimaryDefaultBorderColorDark, buttonTypePrimaryDefaultBorderColorLight, buttonTypePrimaryDefaultTextColorDark, buttonTypePrimaryDefaultTextColorLight, buttonTypePrimaryFocusOutline, buttonTypePrimaryHoverBackgroundColorDark, buttonTypePrimaryHoverBackgroundColorLight, buttonTypePrimaryHoverBorderColorDark, buttonTypePrimaryHoverBorderColorLight, buttonTypePrimaryHoverTextColorDark, buttonTypePrimaryHoverTextColorLight, buttonTypeSecondaryActiveBackgroundColorDark, buttonTypeSecondaryActiveBackgroundColorLight, buttonTypeSecondaryActiveBorderColorDark, buttonTypeSecondaryActiveBorderColorLight, buttonTypeSecondaryActiveTextColorDark, buttonTypeSecondaryActiveTextColorLight, buttonTypeSecondaryDefaultBackgroundColorDark, buttonTypeSecondaryDefaultBackgroundColorLight, buttonTypeSecondaryDefaultBorderColorDark, buttonTypeSecondaryDefaultBorderColorLight, buttonTypeSecondaryDefaultTextColorDark, buttonTypeSecondaryDefaultTextColorLight, buttonTypeSecondaryFocusOutline, buttonTypeSecondaryHoverBackgroundColorDark, buttonTypeSecondaryHoverBackgroundColorLight, buttonTypeSecondaryHoverBorderColorDark, buttonTypeSecondaryHoverBorderColorLight, buttonTypeSecondaryHoverTextColorDark, buttonTypeSecondaryHoverTextColorLight, buttonTypeTertiaryActiveBackgroundColorDark, buttonTypeTertiaryActiveBackgroundColorLight, buttonTypeTertiaryActiveBorderColorDark, buttonTypeTertiaryActiveBorderColorLight, buttonTypeTertiaryActiveTextColorDark, buttonTypeTertiaryActiveTextColorLight, buttonTypeTertiaryDefaultBackgroundColorDark, buttonTypeTertiaryDefaultBackgroundColorLight, buttonTypeTertiaryDefaultBorderColorDark, buttonTypeTertiaryDefaultBorderColorLight, buttonTypeTertiaryDefaultTextColorDark, buttonTypeTertiaryDefaultTextColorLight, buttonTypeTertiaryFocusOutline, buttonTypeTertiaryHoverBackgroundColorDark, buttonTypeTertiaryHoverBackgroundColorLight, buttonTypeTertiaryHoverBorderColorDark, buttonTypeTertiaryHoverBorderColorLight, buttonTypeTertiaryHoverTextColorDark, buttonTypeTertiaryHoverTextColorLight };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=button.js.map

package/dist/p/p.js

@@ -36,5 +36,5 @@ P.displayName = "P";
 
 //#endregion
 export { P, P as default, PBase };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=p.js.map

package/dist/p/theme.js

@@ -35,5 +35,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=theme.js.map

package/dist/pagination/context.js

@@ -5,5 +5,5 @@ const [PaginationProvider, usePaginationContext] = createContext({ isOptional: t
 
 //#endregion
 export { PaginationProvider, usePaginationContext };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=context.js.map

package/dist/pagination/helpers.js

@@ -24,5 +24,5 @@ function getPaginationItems(page, pageCount) {
 
 //#endregion
 export { getPaginationItems };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=helpers.js.map

package/dist/pagination/pagination.js

@@ -62,5 +62,5 @@ Pagination.displayName = "Pagination";
 
 //#endregion
 export { Pagination, Pagination as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=pagination.js.map

package/dist/pagination/paginationButtons.js

@@ -64,5 +64,5 @@ PaginationPrevNext.displayName = "PaginationPrevNext";
 
 //#endregion
 export { PaginationButton, PaginationEllipsis, PaginationPrevNext };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=paginationButtons.js.map

package/dist/pagination/paginationGoToPage.js

@@ -55,5 +55,5 @@ PaginationGoToPage.displayName = "PaginationGoToPage";
 
 //#endregion
 export { PaginationGoToPage, PaginationGoToPage as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=paginationGoToPage.js.map

package/dist/pagination/paginationNavigation.js

@@ -39,5 +39,5 @@ PaginationNavigation.displayName = "PaginationNavigation";
 
 //#endregion
 export { PaginationNavigation, PaginationNavigation as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=paginationNavigation.js.map

package/dist/pagination/paginationResults.js

@@ -25,5 +25,5 @@ PaginationResults.displayName = "PaginationResults";
 
 //#endregion
 export { PaginationResults, PaginationResults as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=paginationResults.js.map

package/dist/pagination/theme.js

@@ -36,5 +36,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=theme.js.map

package/dist/pagination/usePagination.js

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

package/dist/panel/panel.js

@@ -25,5 +25,5 @@ Panel.displayName = "Panel";
 
 //#endregion
 export { Panel, Panel as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=panel.js.map

package/dist/panel/theme.js

@@ -18,5 +18,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=theme.js.map

package/dist/popover/context.js

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

package/dist/popover/popover.js

@@ -46,5 +46,5 @@ Popover.displayName = "Popover";
 
 //#endregion
 export { Popover as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=popover.js.map

package/dist/popover/popoverContent.js

@@ -49,5 +49,5 @@ PopoverContent.displayName = "PopoverContent";
 
 //#endregion
 export { PopoverContent, PopoverContent as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=popoverContent.js.map

package/dist/popover/popoverTrigger.js

@@ -38,5 +38,5 @@ PopoverTrigger.displayName = "PopoverTrigger";
 
 //#endregion
 export { PopoverTrigger, PopoverTrigger as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=popoverTrigger.js.map

package/dist/popover/theme.js

@@ -14,5 +14,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=theme.js.map

package/dist/popover/usePopover.js

@@ -101,5 +101,5 @@ function usePopover(props = {}) {
 
 //#endregion
 export { usePopover as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=usePopover.js.map

package/dist/portal/portal.js

@@ -17,5 +17,5 @@ Portal.displayName = "Portal";
 
 //#endregion
 export { Portal, Portal as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=portal.js.map

package/dist/progress/progress.js

@@ -52,5 +52,5 @@ Progress.displayName = "Progress";
 
 //#endregion
 export { Progress, Progress as default, ProgressBase };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=progress.js.map

package/dist/progress/theme.js

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

package/dist/progressCircular/consts.js

@@ -11,5 +11,5 @@ const absCenterStyles = {
 
 //#endregion
 export { absCenterStyles };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=consts.js.map

package/dist/progressCircular/progressCircular.js

@@ -90,9 +90,9 @@ const ProgressCircular = vui((props, ref) => {
 		]
 	});
 });
-ProgressCircular.displayName = "Progress Circular";
+ProgressCircular.displayName = "ProgressCircular";
 
 //#endregion
 export { ProgressCircular, ProgressCircular as default, ProgressCircularBase };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# 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 type { ProgressCircularProps } from './progressCircular.types'\n\nimport { Box } from '../box'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { T } from '../t'\nimport { cs } from '../utils'\nimport { absCenterStyles, labelBottom, maxValue } from './consts'\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 = 'Progress Circular'\nexport default ProgressCircular\n"],"mappings":";;;;;;;;;;;AAWA,MAAa,uBAAuB,OAAO,MAAM;;;;;AAKjD,MAAM,aAAa,OAAO,MAAM;;;AAIhC,MAAM,iBAAiB,OAAO,UAAU,CAAC;;;;;;AAOzC,MAAa,mBAAmB,KAAmC,OAAO,QAAQ;CAChF,MAAM,EAAE,UAAU,WAAW,OAAO,QAAQ,GAAG,gBAAgB,GAAG,SAAS;CAE3E,MAAM,SAAS,eAAe,oBAAoB,KAAK;CAEvD,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAE9C,gBAAgB;EACd,YAAY,QAAQ,KAAK,KAAK,KAAK,IAAI,CAAC;CAC1C,GAAG,CAAC,KAAK,CAAC;CAEV,gBAAgB;EACd,MAAM,IAAI,CAAC,QAAQ,IAAI,KAAK,KAAK,KAAK;EACtC,YAAY,gBAA0B,CAAC;CACzC,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,eAAoB,IAAI,OAAO,cAAc;CACnD,MAAM,QAAQ,SAAS,IAAI,KAAK;CAChC,MAAM,SAAS,QAAS,iBAAuB;CAE/C,OACE,qBAAC,sBAAD;EAAsB,WAAW,GAAG,yBAAyB,SAAS;EAAQ;EAAK,GAAG,OAAO;EAAO,GAAI;YAAxG;GACE,qBAAC,OAAD;IACE;IACA,iBAAe;IACf,iBAAe;IACf,QAAQ,OAAO;IACf,MAAK;IACL,SAAQ;IACR,SAAQ;IACR,OAAO,OAAO;IACd,OAAM;cATR,CAWE,oBAAC,YAAD;KAAY,IAAG;KAAK,IAAG;KAAK,GAAG;KAAQ,QAAQ,OAAO,OAAO;KAAM,aAAa,OAAO;IAAc,IACrG,oBAAC,gBAAD;KACE,IAAG;KACH,IAAG;KACH,GAAG;KACH,QAAQ,OAAO,OAAO;KACtB,iBAAiB,GAAG,MAAM,GAAG;KAC7B,kBAAkB;KAClB,aAAa,OAAO;IACrB,EACE;;GACL,oBAAC,KAAD;IAAK,GAAK;IAA8B,KAAK,OAAO;cACjD,WACC,WACE,iBACF,qBAAC,GAAD;KAAG,OAAO,OAAO;KAAO,UAAU,OAAO;eAAzC,CACG,UAAS,GACT;SACD;GACD;GACJ,CAAC,CAAC,SACD,oBAAC,KAAD;IAAK,GAAK;IAA8B;cACtC,oBAAC,GAAD;KAAG,OAAO,OAAO;KAAO,UAAU,OAAO;eACtC;IACA;GACA;EAEa;;AAE1B,CAAC;AAED,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 type { ProgressCircularProps } from './progressCircular.types'\n\nimport { Box } from '../box'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { T } from '../t'\nimport { cs } from '../utils'\nimport { absCenterStyles, labelBottom, maxValue } from './consts'\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":";;;;;;;;;;;AAWA,MAAa,uBAAuB,OAAO,MAAM;;;;;AAKjD,MAAM,aAAa,OAAO,MAAM;;;AAIhC,MAAM,iBAAiB,OAAO,UAAU,CAAC;;;;;;AAOzC,MAAa,mBAAmB,KAAmC,OAAO,QAAQ;CAChF,MAAM,EAAE,UAAU,WAAW,OAAO,QAAQ,GAAG,gBAAgB,GAAG,SAAS;CAE3E,MAAM,SAAS,eAAe,oBAAoB,KAAK;CAEvD,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAE9C,gBAAgB;EACd,YAAY,QAAQ,KAAK,KAAK,KAAK,IAAI,CAAC;CAC1C,GAAG,CAAC,KAAK,CAAC;CAEV,gBAAgB;EACd,MAAM,IAAI,CAAC,QAAQ,IAAI,KAAK,KAAK,KAAK;EACtC,YAAY,gBAA0B,CAAC;CACzC,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,eAAoB,IAAI,OAAO,cAAc;CACnD,MAAM,QAAQ,SAAS,IAAI,KAAK;CAChC,MAAM,SAAS,QAAS,iBAAuB;CAE/C,OACE,qBAAC,sBAAD;EAAsB,WAAW,GAAG,yBAAyB,SAAS;EAAQ;EAAK,GAAG,OAAO;EAAO,GAAI;YAAxG;GACE,qBAAC,OAAD;IACE;IACA,iBAAe;IACf,iBAAe;IACf,QAAQ,OAAO;IACf,MAAK;IACL,SAAQ;IACR,SAAQ;IACR,OAAO,OAAO;IACd,OAAM;cATR,CAWE,oBAAC,YAAD;KAAY,IAAG;KAAK,IAAG;KAAK,GAAG;KAAQ,QAAQ,OAAO,OAAO;KAAM,aAAa,OAAO;IAAc,IACrG,oBAAC,gBAAD;KACE,IAAG;KACH,IAAG;KACH,GAAG;KACH,QAAQ,OAAO,OAAO;KACtB,iBAAiB,GAAG,MAAM,GAAG;KAC7B,kBAAkB;KAClB,aAAa,OAAO;IACrB,EACE;;GACL,oBAAC,KAAD;IAAK,GAAK;IAA8B,KAAK,OAAO;cACjD,WACC,WACE,iBACF,qBAAC,GAAD;KAAG,OAAO,OAAO;KAAO,UAAU,OAAO;eAAzC,CACG,UAAS,GACT;SACD;GACD;GACJ,CAAC,CAAC,SACD,oBAAC,KAAD;IAAK,GAAK;IAA8B;cACtC,oBAAC,GAAD;KAAG,OAAO,OAAO;KAAO,UAAU,OAAO;eACtC;IACA;GACA;EAEa;;AAE1B,CAAC;AAED,iBAAiB,cAAc"}

package/dist/progressCircular/theme.js

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

package/dist/prose/prose.js

@@ -126,5 +126,5 @@ Prose.displayName = "Prose";
 
 //#endregion
 export { Prose, Prose as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=prose.js.map

package/dist/radio/context.js

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

package/dist/radio/radio.d.ts

@@ -21,7 +21,7 @@ import "../index.js";
 declare const RadioBase: import("styled-components").StyledComponent<"label", import("styled-components").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.
+ * The ring and the inner dot shown when checked are both plain CSS — no icon assets involved.
  */
 declare const Radio: VuiComponent<"span", RadioProps>;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"radio.d.ts","names":[],"sources":["../../src/radio/radio.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;cAkCa,uCAAS,qDAAA,cAAT,iBAAS,uBAAA,cAAA,iBAAA,mBAAA,oBAAA,kBAAA,mBAAA,sBAAA,wBAAA,yBAAA,uBAAA,mBAAA,sBAAA,wBAAA,yBAAA,uBAAA,mBAAA,oBAAA,eAAA,oBAAA,oBAAA,oBAAA,eAAA,eAAA,sBAAA,sBAAA,mBAAA,mBAAA,YAAA,iBAAA,eAAA,iBAAA,kBAAA,eAAA,kBAAA,oBAAA,sBAAA,oBAAA,gBAAA,gBAAA,kBAAA,iBAAA,qBAAA,YAAA,mBAAA,iBAAA,aAAA,WAAA,WAAA,WAAA,iBAAA,cAAA,kBAAA,eAAA,oBAAA,uBAAA,oBAAA,2BAAA,wBAAA,yBAAA,gBAAA,kBAAA,cAAA,qBAAA,cAAA,kBAAA,mBAAA,aAAA,iBAAA,gBAAA,iBAAA,iBAAA,gBAAA,cAAA,WAAA,aAAA,cAAA,YAAA,kBAAA,0BAAA,iBAAA,gBAAA,aAAA,cAAA,gBAAA,iBAAA,gBAAA,iBAAA,cAAA,iBAAA,mBAAA,oBAAA,kBAAA,eAAA,eAAA,eAAA,kBAAA,oBAAA,qBAAA,mBAAA,gBAAA,gBAAA,cAAA,cAAA,qBAAA,qBAAA,sBAAA,mBAAA,iBAAA,uBAAA,kBAAA,kBAAA,cAAA,aAAA,aAAA,aAAA,cAAA,cAAA,kBAAA,0BAAA,0BAAA,gCAAA,uBAAA,kBAAA,gBAAA,iBAAA,kBAAA,kBAAA,aAAA,qBAAA,sBAAA,iBAAA,qBAAA,qBAAA,kBAAA,oBAAA,qBAAA,yBAAA,iBAAA;;;;;cAgCT,OAAK,qBAAA"}
+{"version":3,"file":"radio.d.ts","names":[],"sources":["../../src/radio/radio.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;cA+Ca,uCAAS,qDAAA,cAAT,iBAAS,uBAAA,cAAA,iBAAA,mBAAA,oBAAA,kBAAA,mBAAA,sBAAA,wBAAA,yBAAA,uBAAA,mBAAA,sBAAA,wBAAA,yBAAA,uBAAA,mBAAA,oBAAA,eAAA,oBAAA,oBAAA,oBAAA,eAAA,eAAA,sBAAA,sBAAA,mBAAA,mBAAA,YAAA,iBAAA,eAAA,iBAAA,kBAAA,eAAA,kBAAA,oBAAA,sBAAA,oBAAA,gBAAA,gBAAA,kBAAA,iBAAA,qBAAA,YAAA,mBAAA,iBAAA,aAAA,WAAA,WAAA,WAAA,iBAAA,cAAA,kBAAA,eAAA,oBAAA,uBAAA,oBAAA,2BAAA,wBAAA,yBAAA,gBAAA,kBAAA,cAAA,qBAAA,cAAA,kBAAA,mBAAA,aAAA,iBAAA,gBAAA,iBAAA,iBAAA,gBAAA,cAAA,WAAA,aAAA,cAAA,YAAA,kBAAA,0BAAA,iBAAA,gBAAA,aAAA,cAAA,gBAAA,iBAAA,gBAAA,iBAAA,cAAA,iBAAA,mBAAA,oBAAA,kBAAA,eAAA,eAAA,eAAA,kBAAA,oBAAA,qBAAA,mBAAA,gBAAA,gBAAA,cAAA,cAAA,qBAAA,qBAAA,sBAAA,mBAAA,iBAAA,uBAAA,kBAAA,kBAAA,cAAA,aAAA,aAAA,aAAA,cAAA,cAAA,kBAAA,0BAAA,0BAAA,gCAAA,uBAAA,kBAAA,gBAAA,iBAAA,kBAAA,kBAAA,aAAA,qBAAA,sBAAA,iBAAA,qBAAA,qBAAA,kBAAA,oBAAA,qBAAA,yBAAA,iBAAA;;;;;cAmCT,OAAK,qBAAA"}

package/dist/radio/radio.js

@@ -1,38 +1,51 @@
 import { filterUndefined } from "../utils/object.js";
 import { cs } from "../utils/styles.js";
-import { disabled } from "../checkbox/consts.js";
-import { radioColors } from "./consts.js";
+import { selectionControlColors, selectionControlDisabled } from "../selectionControl/consts.js";
 import { omitThemingProps, th, useStyleConfig } from "../core/theme.js";
 import styled from "../core/styled.js";
 import vui from "../core/vui.js";
-import { Icon } from "../icon/icon.js";
+import { Box } from "../box/box.js";
 import { T } from "../t/t.js";
+import { SelectionControlInput, useDeprecatedLgSize, useSelectionControlColors, useSelectionControlDescription } from "../selectionControl/selectionControl.js";
 import { useRadioGroupContext } from "./context.js";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/radio/radio.tsx
+const dotSize = {
+	lg: "12px",
+	md: "12px",
+	sm: "10px",
+	xs: "8px"
+};
+const jsxChildrenMt = {
+	lg: "0px",
+	md: "0px",
+	sm: "2px",
+	xs: "3px"
+};
+const labelMt = {
+	lg: "0px",
+	md: "0px",
+	sm: "0.5px",
+	xs: "1px"
+};
 const RadioControl = styled.spanBox`
+  align-items: center;
+  border: 1px solid currentColor;
   border-radius: 50%;
   display: inline-flex;
   flex-shrink: 0;
+  justify-content: center;
   position: relative;
   transition-duration: fast;
 `;
-const RadioInput = styled.input`
-  cursor: inherit;
-  height: 100%;
-  left: 0;
-  margin: 0;
-  opacity: 0;
-  padding: 0;
-  position: absolute;
-  top: 0;
-  width: 100%;
-  z-index: 1;
+const RadioDot = styled.spanBox`
+  background-color: currentColor;
+  border-radius: 50%;
+  flex-shrink: 0;
 `;
 const RadioBase = styled.labelBox`
-  align-items: center;
   cursor: pointer;
   display: inline-flex;
   width: fit-content;
@@ -41,26 +54,30 @@ const RadioBase = styled.labelBox`
     color: ${(p) => th.color(p.controlHoverColor)};
   }
 
+  &:not([aria-disabled='true']):not([aria-readonly='true']):active .vui-radioControl {
+    color: ${(p) => th.color(p.controlPressedColor)};
+  }
+
   &[aria-readonly='true'] {
     cursor: auto;
   }
 
   &:not([aria-disabled='true']):not([aria-readonly='true']) .vui-radioControl:focus-within {
-    color: ${radioColors.focus};
+    color: ${selectionControlColors.focus};
   }
 
   &[aria-disabled='true'] {
-    color: ${disabled.text};
+    color: ${selectionControlDisabled.text};
     cursor: not-allowed;
 
     .vui-radioControl {
-      color: ${disabled.icon};
+      color: ${selectionControlDisabled.icon};
     }
   }
 `;
 /**
 * Allows selection of a single choice from a set of items. Handles controlled and uncontrolled modes.
-* Uses icons to display itself in different states.
+* The ring and the inner dot shown when checked are both plain CSS — no icon assets involved.
 */
 const Radio = vui((props, ref) => {
 	const { defaultValue: groupDefaultValue, isChecked: groupIsChecked, onChange: groupOnChange, value: groupValue, ...radioGroupProps } = useRadioGroupContext() ?? {};
@@ -69,20 +86,31 @@ const Radio = vui((props, ref) => {
 		...radioGroupProps,
 		...props
 	};
-	const { checked = groupValue !== void 0 ? props.value === groupValue : void 0, children, className, defaultChecked = groupDefaultValue !== void 0 ? props.value === groupDefaultValue : void 0, disabled, readOnly, 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, errorText, readOnly, helpText, id: idProp, 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 icon = isChecked ? iconChecked : iconProp;
+	const { color: controlColor, hoverColor, pressedColor, ...controlStyles } = styles.control;
+	const size = mergedProps.size ?? "md";
+	const { description, descriptionId, errorText: effectiveErrorText, id } = useSelectionControlDescription(idProp, helpText, errorText, !!isChecked);
+	const hasJsxChildren = !!children;
 	const controlMr = children || label ? 1 : 0;
-	const color = isChecked ? readOnly ? radioColors.readOnly : radioColors.checked : controlColor;
-	const controlHoverColor = hoverColor ? hoverColor : radioColors.hover;
+	const { color, controlHoverColor, controlPressedColor, descriptionColor, labelColor } = useSelectionControlColors({
+		controlColor,
+		disabled,
+		errorText: effectiveErrorText,
+		hoverColor,
+		isActive: !!isChecked,
+		pressedColor,
+		readOnly
+	});
+	useDeprecatedLgSize(size, "Radio");
 	useEffect(() => {
 		if (groupIsChecked !== void 0) setIsChecked(groupIsChecked === value);
 		else if (checked !== void 0) setIsChecked(checked);
 	}, [checked, groupIsChecked]);
 	function handleOnChange(e) {
 		if (readOnly) return;
+		if (checked === void 0 && groupIsChecked === void 0) setIsChecked(e.target.checked);
 		groupOnChange?.(e);
 		onChange?.(e);
 	}
@@ -91,8 +119,10 @@ const Radio = vui((props, ref) => {
 		"aria-readonly": readOnly
 	});
 	return /* @__PURE__ */ jsxs(RadioBase, {
+		alignItems: label || hasJsxChildren ? "flex-start" : "center",
 		className: cs("vui-radio", className),
 		controlHoverColor,
+		controlPressedColor,
 		ref,
 		...styles.container,
 		...aliasedProps,
@@ -103,30 +133,44 @@ const Radio = vui((props, ref) => {
 			color,
 			focusWithinRing: 3,
 			mr: controlMr,
+			mt: hasJsxChildren ? jsxChildrenMt[size] ?? jsxChildrenMt.md : label ? labelMt[size] ?? labelMt.md : void 0,
 			...controlStyles,
-			children: [/* @__PURE__ */ jsx(RadioInput, {
+			children: [/* @__PURE__ */ jsx(SelectionControlInput, {
+				"aria-describedby": descriptionId,
+				"aria-invalid": !!effectiveErrorText || void 0,
 				className: "vui-radioInput",
-				onClick: handleOnChange,
+				onChange: handleOnChange,
 				ref: inputRef,
 				type: "radio",
-				defaultChecked: checked,
+				checked,
+				defaultChecked,
 				disabled,
 				id,
 				name,
 				required,
 				value,
 				...inputProps
-			}), /* @__PURE__ */ jsx(Icon, {
-				className: "vui-radioIcon",
-				h: "100%",
-				name: icon,
-				w: "100%"
+			}), isChecked && /* @__PURE__ */ jsx(RadioDot, {
+				className: "vui-radioDot",
+				h: dotSize[size] ?? dotSize.md,
+				w: dotSize[size] ?? dotSize.md
+			})]
+		}), children ?? (label && /* @__PURE__ */ jsxs(Box, {
+			column: true,
+			children: [/* @__PURE__ */ jsx(T, {
+				className: "vui-radioLabel",
+				color: labelColor,
+				variant: "caption",
+				...styles.label,
+				children: label
+			}), description && /* @__PURE__ */ jsx(T, {
+				className: "vui-radioDescription",
+				color: descriptionColor,
+				id: descriptionId,
+				mt: "2px",
+				size: "sm",
+				children: description
 			})]
-		}), children ?? (label && /* @__PURE__ */ jsx(T, {
-			className: "vui-radioLabel",
-			lineHeight: "normal",
-			...styles.label,
-			children: label
 		}))]
 	});
 });
@@ -134,5 +178,5 @@ Radio.displayName = "Radio";
 
 //#endregion
 export { Radio, Radio as default, RadioBase };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=radio.js.map

package/dist/radio/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","names":[],"sources":["../../src/radio/radio.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport type { ChangeEvent } from '../utils'\nimport type { RadioProps, RadioStyleProps } from './radio.types'\n\nimport { disabled } from '../checkbox/consts'\nimport { omitThemingProps, styled, th, useStyleConfig, vui } from '../core'\nimport Icon from '../icon'\nimport T from '../t'\nimport { cs, filterUndefined } from '../utils'\nimport { radioColors } from './consts'\nimport { useRadioGroupContext } from './context'\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']):not([aria-readonly='true']):hover .vui-radioControl {\n    color: ${p => th.color(p.controlHoverColor)};\n  }\n\n  &[aria-readonly='true'] {\n    cursor: auto;\n  }\n\n  &:not([aria-disabled='true']):not([aria-readonly='true']) .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    readOnly,\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 ? (readOnly ? radioColors.readOnly : 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    if (readOnly) return\n    groupOnChange?.(e)\n    onChange?.(e as unknown as ChangeEvent)\n  }\n\n  const aliasedProps = filterUndefined({\n    'aria-disabled': disabled,\n    'aria-readonly': readOnly,\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":";;;;;;;;;;;;;;AAaA,MAAM,eAAe,OAAO,OAAO;;;;;;;AAQnC,MAAM,aAAa,OAAO,KAAK;;;;;;;;;;;;AAa/B,MAAa,YAAY,OAAO,QAAyB;;;;;;;cAO5C,MAAK,GAAG,MAAM,EAAE,iBAAiB,EAAE;;;;;;;;aAQnC,YAAY,MAAM;;;;aAIlB,SAAS,KAAK;;;;eAIZ,SAAS,KAAK;;;;;;;;AAS7B,MAAa,QAAQ,KAAyB,OAAO,QAAQ;CAC3D,MAAM,EACJ,cAAc,mBACd,WAAW,gBACX,UAAU,eACV,OAAO,YACP,GAAG,oBACD,qBAAqB,KAAK,CAAC;CAC/B,MAAM,mBAAmB,mBAAmB,SAAY,mBAAmB,MAAM,QAAQ;CAEzF,MAAM,cAAc;EAAE,GAAG;EAAiB,GAAG;CAAM;CACnD,MAAM,EACJ,UAAU,eAAe,SAAY,MAAM,UAAU,aAAa,QAClE,UACA,WACA,iBAAiB,sBAAsB,SAAY,MAAM,UAAU,oBAAoB,QACvF,UACA,UACA,MAAM,WAAW,qBACjB,cAAc,mBACd,IACA,YACA,UACA,OACA,MACA,UACA,UACA,OACA,GAAG,SACD,iBAAiB,WAAW;CAEhC,MAAM,CAAC,WAAW,gBAAgB,SAAS,oBAAoB,WAAW,cAAc;CACxF,MAAM,SAAS,eAAe,SAAS,WAAW;CAClD,MAAM,EAAE,OAAO,cAAc,YAAY,GAAG,kBAAkB,OAAO;CAErE,MAAM,OAAO,YAAY,cAAc;CACvC,MAAM,YAAY,YAAY,QAAQ,IAAI;CAC1C,MAAM,QAAQ,YAAa,WAAW,YAAY,WAAW,YAAY,UAAW;CACpF,MAAM,oBAAoB,aAAa,aAAa,YAAY;CAEhE,gBAAgB;EACd,IAAI,mBAAmB,QAAW,aAAa,mBAAmB,KAAK;OAClE,IAAI,YAAY,QAAW,aAAa,OAAO;CACtD,GAAG,CAAC,SAAS,cAAc,CAAC;CAE5B,SAAS,eAAe,GAAuC;EAC7D,IAAI,UAAU;EACd,gBAAgB,CAAC;EACjB,WAAW,CAA2B;CACxC;CAEA,MAAM,eAAe,gBAAgB;EACnC,iBAAiB;EACjB,iBAAiB;CACnB,CAAC;CAED,OACE,qBAAC,WAAD;EACE,WAAW,GAAG,aAAa,SAAS;EACjB;EACd;EACL,GAAI,OAAO;EACX,GAAI;EACJ,GAAI;YANN,CAQE,qBAAC,cAAD;GACE,IAAG;GACH,WAAU;GACH;GACP,iBAAiB;GACjB,IAAI;GACJ,GAAI;aANN,CAQE,oBAAC,YAAD;IACE,WAAU;IACV,SAAS;IACT,KAAK;IACL,MAAK;IACC,gBAAgB;IAAS;IAAU;IAAI;IAAM;IAAU;IAC7D,GAAI;GACL,IACD,oBAAC,MAAD;IAAM,WAAU;IAAgB,GAAE;IAAO,MAAM;IAAM,GAAE;GAAQ,EACnD;MAEb,aACE,SACC,oBAAC,GAAD;GAAG,WAAU;GAAiB,YAAW;GAAS,GAAI,OAAO;aAC1D;EACA,GAEE;;AAEf,CAAC;AAED,MAAM,cAAc"}
+{"version":3,"file":"radio.js","names":["radioColors","disabledColors"],"sources":["../../src/radio/radio.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport { useEffect, useState } from 'react'\n\nimport type { ChangeEvent } from '../utils'\nimport type { RadioProps, RadioStyleProps } from './radio.types'\n\nimport Box from '../box'\nimport { omitThemingProps, styled, th, useStyleConfig, vui } from '../core'\nimport {\n  SelectionControlInput,\n  useDeprecatedLgSize,\n  useSelectionControlColors,\n  useSelectionControlDescription,\n} from '../selectionControl/selectionControl'\nimport T from '../t'\nimport { cs, filterUndefined } from '../utils'\nimport { disabled as disabledColors, radioColors } from './consts'\nimport { useRadioGroupContext } from './context'\n\n// Figma \"VUI v5 (modernized)\" Radio spec: inner filled dot shown when checked, roughly half the ring's\n// diameter (xs=16 -> 8px, sm=20 -> 10px, md/lg=24 -> 12px) — matches Checkbox's mark-inset proportions.\nconst dotSize: Record<string, string> = { lg: '12px', md: '12px', sm: '10px', xs: '8px' }\n// Offset decreases as control size grows, so JSX children stay visually centered with the first text line.\nconst jsxChildrenMt: Record<string, string> = { lg: '0px', md: '0px', sm: '2px', xs: '3px' }\n// Centers the ring on the label's first line: (caption line-height 150% of font-size - control ring height) / 2.\nconst labelMt: Record<string, string> = { lg: '0px', md: '0px', sm: '0.5px', xs: '1px' }\n\nconst RadioControl = styled.spanBox`\n  align-items: center;\n  border: 1px solid currentColor;\n  border-radius: 50%;\n  display: inline-flex;\n  flex-shrink: 0;\n  justify-content: center;\n  position: relative;\n  transition-duration: fast;\n`\n\n// Plain CSS dot for the checked state — no icon asset involved. Inherits `color` from `RadioControl`,\n// so it automatically matches the ring's current colour (checked/hover/pressed/disabled).\nconst RadioDot = styled.spanBox`\n  background-color: currentColor;\n  border-radius: 50%;\n  flex-shrink: 0;\n`\n\nexport const RadioBase = styled.labelBox<RadioStyleProps>`\n  cursor: pointer;\n  display: inline-flex;\n  width: fit-content;\n\n  &:not([aria-disabled='true']):not([aria-readonly='true']):hover .vui-radioControl {\n    color: ${p => th.color(p.controlHoverColor)};\n  }\n\n  &:not([aria-disabled='true']):not([aria-readonly='true']):active .vui-radioControl {\n    color: ${p => th.color(p.controlPressedColor)};\n  }\n\n  &[aria-readonly='true'] {\n    cursor: auto;\n  }\n\n  &:not([aria-disabled='true']):not([aria-readonly='true']) .vui-radioControl:focus-within {\n    color: ${radioColors.focus};\n  }\n\n  &[aria-disabled='true'] {\n    color: ${disabledColors.text};\n    cursor: not-allowed;\n\n    .vui-radioControl {\n      color: ${disabledColors.icon};\n    }\n  }\n`\n\n/**\n * Allows selection of a single choice from a set of items. Handles controlled and uncontrolled modes.\n * The ring and the inner dot shown when checked are both plain CSS — no icon assets involved.\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    errorText,\n    readOnly,\n    helpText,\n    id: idProp,\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, pressedColor, ...controlStyles } = styles.control\n  const size = mergedProps.size ?? 'md'\n  const {\n    description,\n    descriptionId,\n    errorText: effectiveErrorText,\n    id,\n  } = useSelectionControlDescription(idProp, helpText, errorText, !!isChecked)\n\n  const hasJsxChildren = !!children\n  const controlMr = children || label ? 1 : 0\n  const { color, controlHoverColor, controlPressedColor, descriptionColor, labelColor } = useSelectionControlColors({\n    controlColor,\n    disabled,\n    errorText: effectiveErrorText,\n    hoverColor,\n    isActive: !!isChecked,\n    pressedColor,\n    readOnly,\n  })\n\n  useDeprecatedLgSize(size, 'Radio')\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: ChangeEvent) {\n    if (readOnly) return\n    // Uncontrolled and outside a group (or group hasn't settled on a value yet): manage checked state locally.\n    if (checked === undefined && groupIsChecked === undefined) setIsChecked(e.target.checked)\n    groupOnChange?.(e)\n    onChange?.(e)\n  }\n\n  const aliasedProps = filterUndefined({\n    'aria-disabled': disabled,\n    'aria-readonly': readOnly,\n  })\n\n  return (\n    <RadioBase\n      alignItems={label || hasJsxChildren ? 'flex-start' : 'center'}\n      className={cs('vui-radio', className)}\n      controlHoverColor={controlHoverColor}\n      controlPressedColor={controlPressedColor}\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        mt={\n          hasJsxChildren ? (jsxChildrenMt[size] ?? jsxChildrenMt.md) : label ? (labelMt[size] ?? labelMt.md) : undefined\n        }\n        {...controlStyles}\n      >\n        <SelectionControlInput\n          aria-describedby={descriptionId}\n          aria-invalid={!!effectiveErrorText || undefined}\n          className=\"vui-radioInput\"\n          onChange={handleOnChange}\n          ref={inputRef}\n          type=\"radio\"\n          {...{ checked, defaultChecked, disabled, id, name, required, value }}\n          {...inputProps}\n        />\n        {isChecked && (\n          <RadioDot className=\"vui-radioDot\" h={dotSize[size] ?? dotSize.md} w={dotSize[size] ?? dotSize.md} />\n        )}\n      </RadioControl>\n\n      {children ??\n        (label && (\n          <Box column>\n            <T className=\"vui-radioLabel\" color={labelColor} variant=\"caption\" {...styles.label}>\n              {label}\n            </T>\n            {description && (\n              <T className=\"vui-radioDescription\" color={descriptionColor} id={descriptionId} mt=\"2px\" size=\"sm\">\n                {description as ReactNode}\n              </T>\n            )}\n          </Box>\n        ))}\n    </RadioBase>\n  )\n})\n\nRadio.displayName = 'Radio'\n\nexport default Radio\n"],"mappings":"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"}

package/dist/radio/radio.types.d.ts

@@ -4,9 +4,7 @@ import { ThemingProps } from "../theme/types.js";
 import "../theme/index.js";
 import { SystemProps } from "../system/system.js";
 import "../system/index.js";
-import { IconProp } from "../icon/icon.types.js";
-import "../icon/index.js";
-import { HTMLAttributes } from "react";
+import { HTMLAttributes, ReactNode } from "react";
 //#region src/radio/radio.types.d.ts
 type RadioProps = SystemProps & ThemingProps<'Radio'> & {
   /** Provides value to radio in controlled mode. */
@@ -15,12 +13,12 @@ type RadioProps = SystemProps & ThemingProps<'Radio'> & {
   colorScheme?: 'blue' | 'prussian';
   /** Disables radio and related elements with the right styling. */
   disabled?: boolean;
+  /** Socket displaying error text below the label. Overrides `helpText` and marks the input as invalid. */
+  errorText?: ReactNode;
   /** Makes the radio non-interactive while keeping normal styling. Value cannot be changed by the user. */
   readOnly?: boolean;
-  /** Icon used when not checked. @default uiRadioSelected */
-  icon?: IconProp;
-  /** Icon used when checked. @default uiRadioUnselected */
-  iconChecked?: IconProp;
+  /** Socket displaying help text below the label. */
+  helpText?: ReactNode;
   /** Props object passed to the inner input element. */
   inputProps?: HTMLAttributes<HTMLInputElement>;
   /** Ref passed to the inner input element. */
@@ -43,6 +41,8 @@ type RadioProps = SystemProps & ThemingProps<'Radio'> & {
 type RadioStyleProps = {
   /** Styles the icon when any part of the radio is hovered. */
   controlHoverColor: string;
+  /** Styles the icon when the radio is actively pressed. */
+  controlPressedColor: string;
 };
 //#endregion
 export { RadioProps, RadioStyleProps };

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

@@ -1 +1 @@
-{"version":3,"file":"radio.types.d.ts","names":[],"sources":["../../src/radio/radio.types.ts"],"mappings":";;;;;;;;;;KAOY,aAAa,cACvB;;EAEE;;EAEA;;EAEA;;EAEA;;EAEA,OAAO;;EAEP,cAAc;;EAEd,aAAa,eAAe;;EAE5B,WAAW,MAAM,iBAAiB;;EAElC;;EAEA;;EAEA,SAAS;;EAET,WAAW;;EAEX,UAAU;;EAEV;;EAEA;;KAGQ;;EAEV"}
+{"version":3,"file":"radio.types.d.ts","names":[],"sources":["../../src/radio/radio.types.ts"],"mappings":";;;;;;;;KAMY,aAAa,cACvB;;EAEE;;EAEA;;EAEA;;EAEA,YAAY;;EAEZ;;EAEA,WAAW;;EAEX,aAAa,eAAe;;EAE5B,WAAW,MAAM,iBAAiB;;EAElC;;EAEA;;EAEA,SAAS;;EAET,WAAW;;EAEX,UAAU;;EAEV;;EAEA;;KAGQ;;EAEV;;EAEA"}

package/dist/radio/radioGroup.d.ts

@@ -6,7 +6,8 @@ import "../index.js";
 declare const RadioGroupBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SystemProps, never>;
 /**
  * Organizes layout and display of multiple radio buttons as a row or column.
- * Exposes some props to the children via context.
+ * Exposes some props to the children via context. `label`/`helpText`/`errorText` render an optional
+ * group heading/description around the stack; `errorText` overrides `helpText` and marks the group invalid.
  */
 declare const RadioGroup: VuiComponent<"div", RadioGroupProps>;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"radioGroup.d.ts","names":[],"sources":["../../src/radio/radioGroup.tsx"],"mappings":";;;;;cASa,4CAAc,mDAAA,cAAd;;;;;cAUA,YAAU,oBAAA"}
+{"version":3,"file":"radioGroup.d.ts","names":[],"sources":["../../src/radio/radioGroup.tsx"],"mappings":";;;;;cAiBa,4CAAc,mDAAA,cAAd;;;;;;cAUA,YAAU,oBAAA"}