@veracity/vui 1.0.0 → 1.1.1

package/src/radio/radio.tsx

@@ -8,44 +8,44 @@ import { useRadioGroupContext } from './context'
 import { RadioProps, RadioStyleProps } from './radio.types'
 
 const RadioControl = styled.spanBox`
-	border-radius: 50%;
-	display: inline-flex;
-	flex-shrink: 0;
-	position: relative;
-	transition-duration: fast;
+  border-radius: 50%;
+  display: inline-flex;
+  flex-shrink: 0;
+  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;
+  cursor: inherit;
+  height: 100%;
+  left: 0;
+  margin: 0;
+  opacity: 0;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 1;
 `
 
 export const RadioBase = styled.labelBox<RadioStyleProps>`
-	align-items: center;
-	cursor: pointer;
-	display: inline-flex;
-	width: fit-content;
-
-	&:not([aria-disabled='true']):hover .vui-radioControl {
-		color: ${p => th.color(p.controlHoverColor)};
-	}
-
-	&[aria-disabled='true'] {
-		color: disabled.color;
-		cursor: not-allowed;
-
-		.vui-radioControl {
-			color: disabled.color;
-		}
-	}
+  align-items: center;
+  cursor: pointer;
+  display: inline-flex;
+  width: fit-content;
+
+  &:not([aria-disabled='true']):hover .vui-radioControl {
+    color: ${p => th.color(p.controlHoverColor)};
+  }
+
+  &[aria-disabled='true'] {
+    color: disabled.color;
+    cursor: not-allowed;
+
+    .vui-radioControl {
+      color: disabled.color;
+    }
+  }
 `
 
 /**
@@ -53,92 +53,90 @@ export const RadioBase = styled.labelBox<RadioStyleProps>`
  * Uses icons to display itself in different states.
  */
 export const Radio = vui<'span', RadioProps>((props, ref) => {
-	const {
-		defaultValue: groupDefaultValue,
-		isChecked: groupIsChecked,
-		onChange: groupOnChange,
-		value: groupValue,
-		...radioGroupProps
-	} = useRadioGroupContext() ?? {}
-	const defaultIsChecked = groupIsChecked !== undefined ? groupIsChecked === props.value : undefined
-
-	const mergedProps = { ...radioGroupProps, ...props }
-	const {
-		checked = groupValue !== undefined ? props.value === groupValue : undefined,
-		children,
-		className,
-		defaultChecked = groupDefaultValue !== undefined ? props.value === groupDefaultValue : undefined,
-		disabled,
-		icon: iconProp = 'cuiRadioUnselected',
-		iconChecked = 'cuiRadioSelected',
-		id,
-		inputProps,
-		inputRef,
-		label,
-		name,
-		onChange,
-		required,
-		value,
-		...rest
-	} = omitThemingProps(mergedProps)
-	const [isChecked, setIsChecked] = useState(defaultIsChecked ?? checked ?? defaultChecked)
-	const styles = useStyleConfig('Radio', mergedProps)
-	const { color: controlColor, hoverColor, ...controlStyles } = styles.control
-
-	const icon = isChecked ? iconChecked : iconProp
-	const controlMr = children || label ? 1 : 0
-	const color = isChecked ? controlColor : 'grey.60'
-	const controlHoverColor = isChecked ? hoverColor : 'grey.90'
-
-	useEffect(() => {
-		if (groupIsChecked !== undefined) {
-			setIsChecked(groupIsChecked === value)
-		} else if (checked !== undefined) {
-			setIsChecked(checked)
-		}
-	}, [checked, groupIsChecked])
-
-	function handleOnChange(e: ChangeEvent) {
-		groupOnChange?.(e)
-		onChange?.(e)
-	}
-
-	const aliasedProps = filterUndefined({
-		'aria-disabled': disabled
-	})
-
-	return (
-		<RadioBase
-			className={cs('vui-radio', className)}
-			controlHoverColor={controlHoverColor}
-			ref={ref}
-			{...styles.container}
-			{...aliasedProps}
-			{...rest}
-		>
-			<RadioControl className="vui-radioControl" color={color} focusWithinRing={3} mr={controlMr} {...controlStyles}>
-				<RadioInput
-					className="vui-radioInput"
-					onChange={handleOnChange}
-					ref={inputRef}
-					type="radio"
-					{...{ checked, defaultChecked, disabled, id, name, required, value }}
-					{...inputProps}
-				/>
-
-				<Icon className="vui-radioIcon" h="100%" name={icon} w="100%" />
-			</RadioControl>
-
-			{children ??
-				(label && (
-					<T className="vui-radioLabel" lineHeight="normal" {...styles.label}>
-						{label}
-					</T>
-				))}
-		</RadioBase>
-	)
+  const {
+    defaultValue: groupDefaultValue,
+    isChecked: groupIsChecked,
+    onChange: groupOnChange,
+    value: groupValue,
+    ...radioGroupProps
+  } = useRadioGroupContext() ?? {}
+  const defaultIsChecked = groupIsChecked !== undefined ? groupIsChecked === props.value : undefined
+
+  const mergedProps = { ...radioGroupProps, ...props }
+  const {
+    checked = groupValue !== undefined ? props.value === groupValue : undefined,
+    children,
+    className,
+    defaultChecked = groupDefaultValue !== undefined ? props.value === groupDefaultValue : undefined,
+    disabled,
+    icon: iconProp = 'cuiRadioUnselected',
+    iconChecked = 'cuiRadioSelected',
+    id,
+    inputProps,
+    inputRef,
+    label,
+    name,
+    onChange,
+    required,
+    value,
+    ...rest
+  } = omitThemingProps(mergedProps)
+  const [isChecked, setIsChecked] = useState(defaultIsChecked ?? checked ?? defaultChecked)
+  const styles = useStyleConfig('Radio', mergedProps)
+  const { color: controlColor, hoverColor, ...controlStyles } = styles.control
+
+  const icon = isChecked ? iconChecked : iconProp
+  const controlMr = children || label ? 1 : 0
+  const color = isChecked ? controlColor : 'grey.60'
+  const controlHoverColor = isChecked ? hoverColor : 'grey.90'
+
+  useEffect(() => {
+    if (groupIsChecked !== undefined) {
+      setIsChecked(groupIsChecked === value)
+    } else if (checked !== undefined) {
+      setIsChecked(checked)
+    }
+  }, [checked, groupIsChecked])
+
+  function handleOnChange(e: ChangeEvent) {
+    groupOnChange?.(e)
+    onChange?.(e)
+  }
+
+  const aliasedProps = filterUndefined({
+    'aria-disabled': disabled
+  })
+
+  return (
+    <RadioBase
+      className={cs('vui-radio', className)}
+      controlHoverColor={controlHoverColor}
+      ref={ref}
+      {...styles.container}
+      {...aliasedProps}
+      {...rest}
+    >
+      <RadioControl className="vui-radioControl" color={color} focusWithinRing={3} mr={controlMr} {...controlStyles}>
+        <RadioInput
+          className="vui-radioInput"
+          onChange={handleOnChange}
+          ref={inputRef}
+          type="radio"
+          {...{ checked, defaultChecked, disabled, id, name, required, value }}
+          {...inputProps}
+        />
+
+        <Icon className="vui-radioIcon" h="100%" name={icon} w="100%" />
+      </RadioControl>
+
+      {children ??
+        (label && (
+          <T className="vui-radioLabel" lineHeight="normal" {...styles.label}>
+            {label}
+          </T>
+        ))}
+    </RadioBase>
+  )
 })
 
-Radio.displayName = 'Radio'
-
 export default Radio

package/src/radio/radio.types.ts

@@ -6,38 +6,38 @@ import { ThemingProps } from '../theme'
 import { ChangeEventHandler, FocusEventHandler } from '../utils'
 
 export type RadioProps = SystemProps &
-	ThemingProps<'Radio'> & {
-		/** Provides value to radio in controlled mode. */
-		checked?: boolean
-		/** Available theme colors for this component. @default blue */
-		colorScheme?: 'blue' | 'prussian'
-		/** Disables radio and related elements with the right styling. */
-		disabled?: boolean
-		/** Icon used when not checked. @default cuiRadioSelected */
-		icon?: IconProp
-		/** Icon used when checked. @default cuiRadioUnselected */
-		iconChecked?: IconProp
-		/** Props object passed to the inner input element. */
-		inputProps?: HTMLAttributes<HTMLInputElement>
-		/** Ref passed to the inner input element. */
-		inputRef?: React.MutableRefObject<HTMLInputElement | null> | null
-		/** Socket placing text to the left of the checkbox. */
-		label?: string
-		/** Passed to the inner input. */
-		name?: string
-		/** Passed to the inner input. */
-		onBlur?: FocusEventHandler
-		/** Passed to the inner input. */
-		onChange?: ChangeEventHandler
-		/** Passed to the inner input. */
-		onFocus?: FocusEventHandler
-		/** Passed to the inner input. */
-		required?: boolean
-		/** Passed to the inner input. */
-		value?: number | string
-	}
+  ThemingProps<'Radio'> & {
+    /** Provides value to radio in controlled mode. */
+    checked?: boolean
+    /** Available theme colors for this component. @default blue */
+    colorScheme?: 'blue' | 'prussian'
+    /** Disables radio and related elements with the right styling. */
+    disabled?: boolean
+    /** Icon used when not checked. @default cuiRadioSelected */
+    icon?: IconProp
+    /** Icon used when checked. @default cuiRadioUnselected */
+    iconChecked?: IconProp
+    /** Props object passed to the inner input element. */
+    inputProps?: HTMLAttributes<HTMLInputElement>
+    /** Ref passed to the inner input element. */
+    inputRef?: React.MutableRefObject<HTMLInputElement | null> | null
+    /** Socket placing text to the left of the checkbox. */
+    label?: string
+    /** Passed to the inner input. */
+    name?: string
+    /** Passed to the inner input. */
+    onBlur?: FocusEventHandler
+    /** Passed to the inner input. */
+    onChange?: ChangeEventHandler
+    /** Passed to the inner input. */
+    onFocus?: FocusEventHandler
+    /** Passed to the inner input. */
+    required?: boolean
+    /** Passed to the inner input. */
+    value?: number | string
+  }
 
 export type RadioStyleProps = {
-	/** Styles the icon when any part of the radio is hovered. */
-	controlHoverColor: string
+  /** Styles the icon when any part of the radio is hovered. */
+  controlHoverColor: string
 }

package/src/radio/radioGroup.tsx

@@ -6,9 +6,9 @@ import { RadioGroupProvider } from './context'
 import { RadioGroupProps } from './radioGroup.types'
 
 export const RadioGroupBase = styled.divBox`
-	display: flex;
-	flex-direction: column;
-	gap: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 1;
 `
 
 /**
@@ -16,60 +16,58 @@ 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 [isChecked, setIsChecked] = useState(value ?? defaultValue)
+  const {
+    className,
+    colorScheme,
+    defaultValue,
+    disabled,
+    isRow,
+    name,
+    onBlur,
+    onChange,
+    onFocus,
+    size,
+    value,
+    variant,
+    ...rest
+  } = props
+  const [isChecked, setIsChecked] = useState(value ?? defaultValue)
 
-	const handleOnChange = useCallback(
-		(e: ChangeEvent) => {
-			setIsChecked(e.target.value)
-			onChange?.(e)
-		},
-		[onChange]
-	)
+  const handleOnChange = useCallback(
+    (e: ChangeEvent) => {
+      setIsChecked(e.target.value)
+      onChange?.(e)
+    },
+    [onChange]
+  )
 
-	const context = useMemo(
-		() =>
-			filterUndefined({
-				colorScheme,
-				defaultValue,
-				disabled,
-				isChecked,
-				name,
-				onBlur,
-				onChange: handleOnChange,
-				onFocus,
-				size,
-				value,
-				variant
-			}),
-		[colorScheme, defaultValue, disabled, handleOnChange, isChecked, name, onBlur, onFocus, size, value, variant]
-	)
+  const context = useMemo(
+    () =>
+      filterUndefined({
+        colorScheme,
+        defaultValue,
+        disabled,
+        isChecked,
+        name,
+        onBlur,
+        onChange: handleOnChange,
+        onFocus,
+        size,
+        value,
+        variant
+      }),
+    [colorScheme, defaultValue, disabled, handleOnChange, isChecked, name, onBlur, onFocus, size, value, variant]
+  )
 
-	const aliasedProps = filterUndefined({
-		flexDirection: isRow ? 'row' : undefined
-	} as const)
+  const aliasedProps = filterUndefined({
+    flexDirection: isRow ? 'row' : undefined
+  } as const)
 
-	return (
-		<RadioGroupProvider value={context}>
-			<RadioGroupBase className={cs('vui-radioGroup', className)} ref={ref} {...aliasedProps} {...rest} />
-		</RadioGroupProvider>
-	)
+  return (
+    <RadioGroupProvider value={context}>
+      <RadioGroupBase className={cs('vui-radioGroup', className)} ref={ref} {...aliasedProps} {...rest} />
+    </RadioGroupProvider>
+  )
 })
 
-RadioGroup.displayName = 'RadioGroup'
-
 export default RadioGroup

package/src/radio/radioGroup.types.ts

@@ -3,21 +3,21 @@ import { ThemingProps } from '../theme'
 import { ChangeEventHandler, FocusEventHandler } from '../utils'
 
 export type RadioGroupProps = SystemProps &
-	ThemingProps<'Radio'> & {
-		/** Available theme colors for this component. */
-		colorScheme?: 'blue' | 'prussian'
-		/** Passes the prop to each radio. */
-		disabled?: boolean
-		/** Displays radio buttons in a row. */
-		isRow?: boolean
-		/** Passes the prop to each checkbox. */
-		name?: string
-		/** Passes the prop to each checkbox. */
-		onBlur?: FocusEventHandler
-		/** Passes the prop to each checkbox. */
-		onChange?: ChangeEventHandler
-		/** Passes the prop to each checkbox. */
-		onFocus?: FocusEventHandler
-		/** Passes the prop to each checkbox. */
-		value?: number | string
-	}
+  ThemingProps<'Radio'> & {
+    /** Available theme colors for this component. */
+    colorScheme?: 'blue' | 'prussian'
+    /** Passes the prop to each radio. */
+    disabled?: boolean
+    /** Displays radio buttons in a row. */
+    isRow?: boolean
+    /** Passes the prop to each checkbox. */
+    name?: string
+    /** Passes the prop to each checkbox. */
+    onBlur?: FocusEventHandler
+    /** Passes the prop to each checkbox. */
+    onChange?: ChangeEventHandler
+    /** Passes the prop to each checkbox. */
+    onFocus?: FocusEventHandler
+    /** Passes the prop to each checkbox. */
+    value?: number | string
+  }

package/src/radio/theme.ts

@@ -1,70 +1,70 @@
 import { Dict } from '../utils'
 
 function variantDefault(props: Dict) {
-	const { colorScheme: c } = props
+  const { colorScheme: c } = props
 
-	const control = {
-		color: `${c}.80`,
-		hoverColor: `${c}.90`
-	}
+  const control = {
+    color: `${c}.80`,
+    hoverColor: `${c}.90`
+  }
 
-	if (c === 'prussian') {
-		control.hoverColor = 'prussian.70'
-	}
+  if (c === 'prussian') {
+    control.hoverColor = 'prussian.70'
+  }
 
-	return {
-		control
-	}
+  return {
+    control
+  }
 }
 
 const baseStyle = {}
 
 const defaultProps = {
-	colorScheme: 'blue',
-	size: 'md',
-	variant: 'default'
+  colorScheme: 'blue',
+  size: 'md',
+  variant: 'default'
 }
 
 const parts = ['container', 'control', 'label']
 
 const sizes = {
-	sm: {
-		control: {
-			h: 16,
-			w: 16
-		},
-		label: {
-			size: 'sm'
-		}
-	},
-	md: {
-		control: {
-			h: 20,
-			w: 20
-		},
-		label: {
-			size: 'md'
-		}
-	},
-	lg: {
-		control: {
-			h: 24,
-			w: 24
-		},
-		label: {
-			size: 'lg'
-		}
-	}
+  sm: {
+    control: {
+      h: 16,
+      w: 16
+    },
+    label: {
+      size: 'sm'
+    }
+  },
+  md: {
+    control: {
+      h: 20,
+      w: 20
+    },
+    label: {
+      size: 'md'
+    }
+  },
+  lg: {
+    control: {
+      h: 24,
+      w: 24
+    },
+    label: {
+      size: 'lg'
+    }
+  }
 }
 
 const variants = {
-	default: variantDefault
+  default: variantDefault
 }
 
 export default {
-	baseStyle,
-	defaultProps,
-	parts,
-	sizes,
-	variants
+  baseStyle,
+  defaultProps,
+  parts,
+  sizes,
+  variants
 }