@veracity/vui 2.4.1 → 2.5.0-beta.1

package/dist/esm/theme/defaultTheme.d.ts

@@ -1098,11 +1098,14 @@ declare const defaultTheme: {
             variants: {};
         };
         Checkbox: {
-            baseStyle: {};
+            baseStyle: {
+                control: {
+                    color: string;
+                    hoverColor: string;
+                };
+            };
             defaultProps: {
-                colorScheme: string;
                 size: string;
-                variant: string;
             };
             parts: string[];
             sizes: {
@@ -1134,14 +1137,7 @@ declare const defaultTheme: {
                     };
                 };
             };
-            variants: {
-                default: (props: import("..").Dict<any>) => {
-                    control: {
-                        color: string;
-                        hoverColor: string;
-                    };
-                };
-            };
+            variants: {};
         };
         Dialog: {
             baseStyle: {};
@@ -1883,6 +1879,39 @@ declare const defaultTheme: {
             };
             variants: {};
         };
+        ProgressCircular: {
+            baseStyle: {};
+            defaultProps: {
+                size: string;
+            };
+            sizes: {
+                sm: {
+                    strokeWidth: number;
+                    width: number;
+                    top: number;
+                    fontSize: number;
+                };
+                md: {
+                    strokeWidth: number;
+                    width: number;
+                    top: number;
+                    fontSize: number;
+                };
+                lg: {
+                    strokeWidth: number;
+                    width: number;
+                    top: number;
+                    fontSize: number;
+                };
+                xl: {
+                    strokeWidth: number;
+                    width: number;
+                    top: number;
+                    fontSize: number;
+                };
+            };
+            variants: {};
+        };
         Popover: {
             baseStyle: {};
             defaultProps: {};
@@ -1891,11 +1920,14 @@ declare const defaultTheme: {
             variants: {};
         };
         Radio: {
-            baseStyle: {};
+            baseStyle: {
+                control: {
+                    color: string;
+                    hoverColor: string;
+                };
+            };
             defaultProps: {
-                colorScheme: string;
                 size: string;
-                variant: string;
             };
             parts: string[];
             sizes: {
@@ -1927,14 +1959,7 @@ declare const defaultTheme: {
                     };
                 };
             };
-            variants: {
-                default: (props: import("..").Dict<any>) => {
-                    control: {
-                        color: string;
-                        hoverColor: string;
-                    };
-                };
-            };
+            variants: {};
         };
         Select: {
             baseStyle: {};

package/dist/esm/theme/defaultTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGjB,CAAA;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGjB,CAAA;AAED,eAAe,YAAY,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.4.1",
+  "version": "2.5.0-beta.1",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/checkbox/checkbox.tsx

@@ -5,6 +5,7 @@ import Icon from '../icon'
 import T from '../t'
 import { ChangeEvent, cs, filterUndefined } from '../utils'
 import { CheckboxProps, CheckboxStyleProps } from './checkbox.types'
+import { checkboxColors } from './consts'
 import { useCheckboxGroupContext } from './context'
 
 const CheckboxControl = styled.spanBox`
@@ -39,11 +40,11 @@ export const CheckboxBase = styled.labelBox<CheckboxStyleProps>`
   }
 
   &[aria-disabled='true'] {
-    color: disabled.color;
+    color: ${checkboxColors.disabled};
     cursor: not-allowed;
 
     .vui-checkboxControl {
-      color: disabled.color;
+      color: ${checkboxColors.disabled};
     }
   }
 `
@@ -80,11 +81,10 @@ export const Checkbox = vui<'span', CheckboxProps>((props, ref) => {
   const styles = useStyleConfig('Checkbox', mergedProps)
   const { color: controlColor, hoverColor, ...controlStyles } = styles.control
 
-  const isFilled = isChecked || isIndeterminate
   const icon = isIndeterminate ? iconIndeterminate : isChecked ? iconChecked : iconProp
   const controlMr = children || label ? 1 : 0
-  const color = isFilled ? controlColor : 'grey.60'
-  const controlHoverColor = isFilled ? hoverColor : 'grey.90'
+  const color = controlColor ? controlColor : checkboxColors.main
+  const controlHoverColor = hoverColor ? hoverColor : checkboxColors.hover
 
   useEffect(() => {
     checked !== undefined && setIsChecked(checked)

package/src/checkbox/checkbox.types.ts

@@ -9,7 +9,7 @@ export type CheckboxProps = SystemProps &
   ThemingProps<'Checkbox'> & {
     /** Provides value to checkbox in controlled mode. */
     checked?: boolean
-    /** Available theme colors for this component. @default blue */
+    /** @deprecated Available theme colors for this component. */
     colorScheme?: 'blue' | 'prussian'
     /** Disables checkbox and related elements with the right styling. */
     disabled?: boolean

package/src/checkbox/checkboxGroup.tsx

@@ -15,24 +15,11 @@ export const CheckboxGroupBase = styled.divBox`
  * Exposes some props to the children via context.
  */
 export const CheckboxGroup = vui<'div', CheckboxGroupProps>((props, ref) => {
-  const {
-    className,
-    colorScheme,
-    defaultValue,
-    disabled,
-    isRow,
-    name,
-    onBlur,
-    onChange,
-    onFocus,
-    size,
-    variant,
-    ...rest
-  } = props
+  const { className, defaultValue, disabled, isRow, name, onBlur, onChange, onFocus, size, variant, ...rest } = props
 
   const context = useMemo(
-    () => filterUndefined({ colorScheme, defaultValue, disabled, name, onBlur, onChange, onFocus, size, variant }),
-    [colorScheme, defaultValue, disabled, name, onBlur, onChange, onFocus, size, variant]
+    () => filterUndefined({ defaultValue, disabled, name, onBlur, onChange, onFocus, size, variant }),
+    [defaultValue, disabled, name, onBlur, onChange, onFocus, size, variant]
   )
 
   const aliasedProps = filterUndefined({

package/src/checkbox/checkboxGroup.types.ts

@@ -4,7 +4,7 @@ import { ChangeEventHandler, FocusEventHandler } from '../utils'
 
 export type CheckboxGroupProps = SystemProps &
   ThemingProps<'Checkbox'> & {
-    /** Available theme colors for this component. */
+    /** @deprecated Available theme colors for this component. */
     colorScheme?: 'blue' | 'prussian'
     /** Passes the prop to each checkbox. */
     disabled?: boolean

package/src/checkbox/consts.ts

@@ -0,0 +1,5 @@
+export const checkboxColors = {
+  main: 'seaBlue.main',
+  hover: 'seaBlue.40',
+  disabled: 'sandstone.main'
+}

package/src/checkbox/theme.ts

@@ -1,28 +1,14 @@
-import { Dict } from '../utils'
+import { checkboxColors } from './consts'
 
-function variantDefault(props: Dict) {
-  const { colorScheme: c } = props
-
-  const control = {
-    color: `${c}.80`,
-    hoverColor: `${c}.90`
-  }
-
-  if (c === 'prussian') {
-    control.hoverColor = 'prussian.70'
-  }
-
-  return {
-    control
+const baseStyle = {
+  control: {
+    color: checkboxColors.main,
+    hoverColor: checkboxColors.hover
   }
 }
 
-const baseStyle = {}
-
 const defaultProps = {
-  colorScheme: 'blue',
-  size: 'md',
-  variant: 'default'
+  size: 'md'
 }
 
 const parts = ['container', 'control', 'label']
@@ -57,9 +43,7 @@ const sizes = {
   }
 }
 
-const variants = {
-  default: variantDefault
-}
+const variants = {}
 
 export default {
   baseStyle,

package/src/index.ts

@@ -34,6 +34,7 @@ export * from './panel'
 export * from './popover'
 export * from './portal'
 export * from './progress'
+export * from './progressCircular'
 export * from './radio'
 export * from './select'
 export * from './sidemenu'

package/src/progress/progress.tsx

@@ -11,19 +11,23 @@ export const ProgressBase = styled.divBox`
 `
 
 const minPercentageDisplay = 3
+const maxValue = 100
 
-/** Indicates a process progress. */
+/** [Beta] Indicates a process progress. */
 export const Progress = vui<'div', ProgressProps>((props, ref) => {
-  const { className, size = 'md', value = 0, max = 100, showPercentage, ...rest } = props
+  const { className, value = 0, showPercentage, ...rest } = props
 
   const [width, setWidth] = useState(0)
 
   const styles = useStyleConfig('Progress', props)
 
   useEffect(() => {
-    const w = !value ? 0 : Math.ceil((value / max) * 100)
-    setWidth(w > 100 ? 100 : w)
-  }, [value, max])
+    const w = !value ? 0 : Math.ceil(value)
+    setWidth(w > maxValue ? maxValue : w)
+  }, [value])
+
+  const bg = rest.bg || 'darkBlue.95'
+  const color = rest.color || 'darkBlue.main'
 
   return (
     <ProgressBase
@@ -31,12 +35,12 @@ export const Progress = vui<'div', ProgressProps>((props, ref) => {
       ref={ref}
       {...styles.container}
       {...rest}
-      bg="grey.10"
+      bg={bg}
       borderRadius="sm"
       h={1}
     >
       <Box
-        bg="seaBlue.main"
+        bg={color}
         borderRadius="sm"
         position="relative"
         textAlign="right"

package/src/progress/progress.types.ts

@@ -4,6 +4,5 @@ import { ThemingProps } from '../theme'
 export type ProgressProps = SystemProps &
   ThemingProps<'Progress'> & {
     value?: number
-    max?: number
     showPercentage?: boolean
   }

package/src/progressCircular/consts.ts

@@ -0,0 +1,13 @@
+export const absCenterStyles = {
+  position: 'absolute',
+  w: '100%',
+  left: 0,
+  right: 0,
+  alignItems: 'center',
+  justifyContent: 'center',
+  zIndex: 100
+}
+
+export const labelBottom = -16
+
+export const maxValue = 100

package/src/progressCircular/index.ts

@@ -0,0 +1,3 @@
+export * from './progressCircular'
+export { default } from './progressCircular'
+export * from './progressCircular.types'

package/src/progressCircular/progressCircular.tsx

@@ -0,0 +1,82 @@
+import React, { useEffect, useState } from 'react'
+
+import { Box, BoxProps } from '../box'
+import { styled, useStyleConfig, vui } from '../core'
+import { T } from '../t'
+import { cs } from '../utils'
+import { absCenterStyles, labelBottom, maxValue } from './consts'
+import { ProgressCircularProps } from './progressCircular.types'
+
+export const ProgressCircularBase = styled.divBox`
+  display: flex;
+  position: relative;
+  width: 100%;
+`
+const Circle = styled.circle`
+  fill: transparent;
+  stroke: hsl(223, 67%, 95%);
+`
+
+const ProgressCircle = styled(Circle)`
+  stroke: hsl(223, 67%, 18%);
+  transform: rotate(-90deg);
+  transform-origin: 50% 50%;
+  transition: stroke-dashoffset 0.5s ease-out;
+`
+
+/** [Beta] Indicates a process progress. */
+export const ProgressCircular = vui<'div', ProgressCircularProps>((props, ref) => {
+  const { children, className, label, value = 0, showPercentage, ...rest } = props
+
+  const styles = useStyleConfig('ProgressCircular', props)
+
+  const [progress, setProgress] = useState(value)
+
+  useEffect(() => {
+    setProgress(value ? Math.ceil(value) : 0)
+  }, [value])
+
+  useEffect(() => {
+    const w = !value ? 0 : Math.ceil(value)
+    setProgress(w > maxValue ? maxValue : w)
+  }, [value])
+
+  const radius = maxValue / 2 - styles.strokeWidth * 2
+  const angle = radius * 2 * Math.PI
+  const offset = angle - (progress / maxValue) * angle
+
+  return (
+    <ProgressCircularBase className={cs('vui-progress-circular', className)} ref={ref} w={styles.width} {...rest}>
+      <svg
+        aria-valuemax={maxValue}
+        aria-valuemin={0}
+        aria-valuenow={progress}
+        height={styles.width}
+        version="1.1"
+        viewBox="0 0 100 100"
+        width={styles.width}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <Circle cx="50" cy="50" r={radius} strokeWidth={styles.strokeWidth} />
+        <ProgressCircle
+          cx="50"
+          cy="50"
+          r={radius}
+          strokeDasharray={`${angle} ${angle}`}
+          strokeDashoffset={offset}
+          strokeWidth={styles.strokeWidth}
+        />
+      </svg>
+      <Box {...(absCenterStyles as BoxProps)} top={styles.top}>
+        {children ? children : showPercentage ? <T fontSize={styles.fontSize}>{progress}%</T> : null}
+      </Box>
+      {!!label && (
+        <Box {...(absCenterStyles as BoxProps)} bottom={labelBottom}>
+          <T fontSize={styles.fontSize}>{label}</T>
+        </Box>
+      )}
+    </ProgressCircularBase>
+  )
+})
+
+export default ProgressCircular

package/src/progressCircular/progressCircular.types.ts

@@ -0,0 +1,9 @@
+import { SystemProps } from '../system'
+import { ThemingProps } from '../theme'
+
+export type ProgressCircularProps = SystemProps &
+  ThemingProps<'ProgressCircular'> & {
+    label?: string
+    value?: number
+    showPercentage?: boolean
+  }

package/src/progressCircular/theme.ts

@@ -0,0 +1,26 @@
+const baseStyle = {}
+
+const defaultProps = {
+  size: 'md'
+}
+
+const sizes = {
+  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 }
+}
+
+const variants = {}
+
+export default {
+  baseStyle,
+  defaultProps,
+  sizes,
+  variants
+}

package/src/radio/consts.ts

@@ -0,0 +1,5 @@
+export const radioColors = {
+  main: 'seaBlue.main',
+  hover: 'seaBlue.40',
+  disabled: 'sandstone.main'
+}

package/src/radio/radio.tsx

@@ -4,6 +4,7 @@ import { omitThemingProps, styled, th, useStyleConfig, vui } from '../core'
 import Icon from '../icon'
 import T from '../t'
 import { ChangeEvent, cs, filterUndefined } from '../utils'
+import { radioColors } from './consts'
 import { useRadioGroupContext } from './context'
 import { RadioProps, RadioStyleProps } from './radio.types'
 
@@ -39,11 +40,11 @@ export const RadioBase = styled.labelBox<RadioStyleProps>`
   }
 
   &[aria-disabled='true'] {
-    color: disabled.color;
+    color: ${radioColors.disabled};
     cursor: not-allowed;
 
     .vui-radioControl {
-      color: disabled.color;
+      color: ${radioColors.disabled};
     }
   }
 `
@@ -87,8 +88,8 @@ export const Radio = vui<'span', RadioProps>((props, ref) => {
 
   const icon = isChecked ? iconChecked : iconProp
   const controlMr = children || label ? 1 : 0
-  const color = isChecked ? controlColor : 'grey.60'
-  const controlHoverColor = isChecked ? hoverColor : 'grey.90'
+  const color = controlColor ? controlColor : radioColors.main
+  const controlHoverColor = hoverColor ? hoverColor : radioColors.hover
 
   useEffect(() => {
     if (groupIsChecked !== undefined) {
@@ -132,7 +133,6 @@ export const Radio = vui<'span', RadioProps>((props, ref) => {
           {...{ checked, defaultChecked, disabled, id, name, required, value }}
           {...inputProps}
         />
-
         <Icon className="vui-radioIcon" h="100%" name={icon} w="100%" />
       </RadioControl>
 

package/src/radio/radio.types.ts

@@ -9,7 +9,7 @@ export type RadioProps = SystemProps &
   ThemingProps<'Radio'> & {
     /** Provides value to radio in controlled mode. */
     checked?: boolean
-    /** Available theme colors for this component. @default blue */
+    /** @deprecated Available theme colors for this component. */
     colorScheme?: 'blue' | 'prussian'
     /** Disables radio and related elements with the right styling. */
     disabled?: boolean

package/src/radio/radioGroup.tsx

@@ -16,21 +16,8 @@ export const RadioGroupBase = styled.divBox`
  * Exposes some props to the children via context.
  */
 export const RadioGroup = vui<'div', RadioGroupProps>((props, ref) => {
-  const {
-    className,
-    colorScheme,
-    defaultValue,
-    disabled,
-    isRow,
-    name,
-    onBlur,
-    onChange,
-    onFocus,
-    size,
-    value,
-    variant,
-    ...rest
-  } = props
+  const { className, defaultValue, disabled, isRow, name, onBlur, onChange, onFocus, size, value, variant, ...rest } =
+    props
   const [isChecked, setIsChecked] = useState(value ?? defaultValue)
 
   const handleOnChange = useCallback(
@@ -44,7 +31,6 @@ export const RadioGroup = vui<'div', RadioGroupProps>((props, ref) => {
   const context = useMemo(
     () =>
       filterUndefined({
-        colorScheme,
         defaultValue,
         disabled,
         isChecked,
@@ -56,7 +42,7 @@ export const RadioGroup = vui<'div', RadioGroupProps>((props, ref) => {
         value,
         variant
       }),
-    [colorScheme, defaultValue, disabled, handleOnChange, isChecked, name, onBlur, onFocus, size, value, variant]
+    [defaultValue, disabled, handleOnChange, isChecked, name, onBlur, onFocus, size, value, variant]
   )
 
   const aliasedProps = filterUndefined({

package/src/radio/radioGroup.types.ts

@@ -4,7 +4,7 @@ import { ChangeEventHandler, FocusEventHandler } from '../utils'
 
 export type RadioGroupProps = SystemProps &
   ThemingProps<'Radio'> & {
-    /** Available theme colors for this component. */
+    /** @deprecated Available theme colors for this component. */
     colorScheme?: 'blue' | 'prussian'
     /** Passes the prop to each radio. */
     disabled?: boolean

package/src/radio/theme.ts

@@ -1,28 +1,14 @@
-import { Dict } from '../utils'
+import { radioColors } from './consts'
 
-function variantDefault(props: Dict) {
-  const { colorScheme: c } = props
-
-  const control = {
-    color: `${c}.80`,
-    hoverColor: `${c}.90`
-  }
-
-  if (c === 'prussian') {
-    control.hoverColor = 'prussian.70'
-  }
-
-  return {
-    control
+const baseStyle = {
+  control: {
+    color: radioColors.main,
+    hoverColor: radioColors.hover
   }
 }
 
-const baseStyle = {}
-
 const defaultProps = {
-  colorScheme: 'blue',
-  size: 'md',
-  variant: 'default'
+  size: 'md'
 }
 
 const parts = ['container', 'control', 'label']
@@ -57,9 +43,7 @@ const sizes = {
   }
 }
 
-const variants = {
-  default: variantDefault
-}
+const variants = {}
 
 export default {
   baseStyle,

package/src/theme/components.ts

@@ -28,6 +28,7 @@ import Pagination from '../pagination/theme'
 import Panel from '../panel/theme'
 import Popover from '../popover/theme'
 import Progress from '../progress/theme'
+import ProgressCircular from '../progressCircular/theme'
 import Radio from '../radio/theme'
 import Select from '../select/theme'
 import Sidemenu from '../sidemenu/theme'
@@ -78,6 +79,7 @@ export default {
   Pagination,
   Panel,
   Progress,
+  ProgressCircular,
   Popover,
   Radio,
   Select,