@veracity/vui 1.0.0 → 1.1.0

package/src/switch/switchButton.tsx

@@ -6,57 +6,57 @@ import { useSwitchContext } from './context'
 import { SwitchButtonProps } from './switch.types'
 
 const SwitchInput = styled.inputBox`
-	cursor: inherit;
-	height: calc(100% + 10px);
-	left: -5px;
-	margin: 0;
-	opacity: 0;
-	padding: 0;
-	position: absolute;
-	top: -5px;
-	width: calc(100% + 10px);
-	z-index: 1;
+  cursor: inherit;
+  height: calc(100% + 10px);
+  left: -5px;
+  margin: 0;
+  opacity: 0;
+  padding: 0;
+  position: absolute;
+  top: -5px;
+  width: calc(100% + 10px);
+  z-index: 1;
 `
 
 /** Circular element that moves along the track when toggled. */
 const SwitchThumb = styled.spanBox`
-	border-radius: round;
-	display: inline-flex;
-	flex-shrink: 0;
-	position: absolute;
-	transition-duration: fast;
+  border-radius: round;
+  display: inline-flex;
+  flex-shrink: 0;
+  position: absolute;
+  transition-duration: fast;
 `
 
 /** Track element along which the thumb moves when toggled. */
 const SwitchTrack = styled.spanBox`
-	align-items: center;
-	border-radius: round;
-	display: inline-flex;
-	flex: 1;
-	position: relative;
-	transition-duration: fast;
+  align-items: center;
+  border-radius: round;
+  display: inline-flex;
+  flex: 1;
+  position: relative;
+  transition-duration: fast;
 `
 
 export const SwitchButtonBase = styled.spanBox`
-	color: white;
-	cursor: pointer;
-	display: inline-flex;
-	flex-shrink: 0;
-	position: relative;
-
-	&[aria-disabled='true'] {
-		cursor: not-allowed;
-
-		.vui-switchThumb {
-			background-color: disabled.color;
-		}
-
-		.vui-switchTrack {
-			// Using ring instead of border when disabled, because it's easier
-			--x-ring-color: var(--vui-colors-disabled-border);
-			background-color: disabled.bg;
-		}
-	}
+  color: white;
+  cursor: pointer;
+  display: inline-flex;
+  flex-shrink: 0;
+  position: relative;
+
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+
+    .vui-switchThumb {
+      background-color: disabled.color;
+    }
+
+    .vui-switchTrack {
+      // Using ring instead of border when disabled, because it's easier
+      --x-ring-color: var(--vui-colors-disabled-border);
+      background-color: disabled.bg;
+    }
+  }
 `
 
 /**
@@ -64,102 +64,100 @@ export const SwitchButtonBase = styled.spanBox`
  * Handles controlled and uncontrolled modes.
  */
 export const SwitchButton = vui<'span', SwitchButtonProps>((props, ref) => {
-	const mergedProps = { ...useSwitchContext(), ...props }
-	const {
-		checked,
-		className,
-		defaultChecked,
-		disabled,
-		id,
-		innerLabelOff,
-		innerLabelOn,
-		inputProps,
-		inputRef,
-		name,
-		onBlur,
-		onChange,
-		onFocus,
-		required,
-		value,
-		...rest
-	} = omitThemingProps(mergedProps)
-	const { current: isControlled } = useRef(checked !== undefined)
-	const [isChecked, setIsChecked] = useState(checked ?? defaultChecked)
-	const [isFocused, setIsFocused] = useState(false)
-	const styles = useStyleConfig('Switch', useSwitchContext())
-	const { thumb: thumbStyles, track: trackStyles, ...buttonStyles } = styles.button
-
-	useEffect(() => {
-		isControlled && setIsChecked(checked)
-	}, [checked, isControlled])
-
-	function handleOnBlur(e: FocusEvent) {
-		setIsFocused(false)
-		onBlur?.(e)
-	}
-
-	function handleOnChange(e: ChangeEvent) {
-		!isControlled && setIsChecked(e.target.checked)
-		onChange?.(e)
-	}
-
-	function handleOnFocus(e: FocusEvent) {
-		setIsFocused(true)
-		onFocus?.(e)
-	}
-
-	const hDiff = (thumbStyles.h - trackStyles.h) / 2
-	const thumbOffset = `calc(100% - ${Math.abs(hDiff - thumbStyles.h)}px)`
-	const labelOffset = `${thumbStyles.h - hDiff + 4}px`
-
-	const aliasedProps = filterUndefined({
-		'aria-checked': isChecked ? true : false,
-		'aria-disabled': disabled,
-		'data-focused': isFocused ? true : false
-	})
-
-	const thumbAliasedProps = filterUndefined({
-		left: isChecked ? thumbOffset : -hDiff,
-		ring: isFocused ? thumbStyles.ring : 0
-	})
-
-	const trackAliasedProps = filterUndefined({
-		bg: isChecked ? trackStyles.bg : 'grey.50',
-		pl: isChecked ? 1 : labelOffset,
-		pr: isChecked ? labelOffset : 1,
-		ring: !disabled ? (isFocused ? trackStyles.ring : 0) : 1
-	})
-
-	return (
-		<SwitchButtonBase
-			className={cs('vui-switchButton', className)}
-			ref={ref}
-			{...buttonStyles}
-			{...aliasedProps}
-			{...rest}
-		>
-			<SwitchInput
-				className="vui-switchInput"
-				onBlur={handleOnBlur}
-				onChange={handleOnChange}
-				onFocus={handleOnFocus}
-				ref={inputRef}
-				type="checkbox"
-				{...{ checked, defaultChecked, disabled, id, name, required, value }}
-				{...inputProps}
-			/>
-
-			<SwitchTrack className="vui-switchTrack" {...trackStyles} {...trackAliasedProps}>
-				{!isChecked && innerLabelOff}
-
-				<SwitchThumb className="vui-switchThumb" {...thumbStyles} {...thumbAliasedProps} />
-
-				{isChecked && innerLabelOn}
-			</SwitchTrack>
-		</SwitchButtonBase>
-	)
+  const mergedProps = { ...useSwitchContext(), ...props }
+  const {
+    checked,
+    className,
+    defaultChecked,
+    disabled,
+    id,
+    innerLabelOff,
+    innerLabelOn,
+    inputProps,
+    inputRef,
+    name,
+    onBlur,
+    onChange,
+    onFocus,
+    required,
+    value,
+    ...rest
+  } = omitThemingProps(mergedProps)
+  const { current: isControlled } = useRef(checked !== undefined)
+  const [isChecked, setIsChecked] = useState(checked ?? defaultChecked)
+  const [isFocused, setIsFocused] = useState(false)
+  const styles = useStyleConfig('Switch', useSwitchContext())
+  const { thumb: thumbStyles, track: trackStyles, ...buttonStyles } = styles.button
+
+  useEffect(() => {
+    isControlled && setIsChecked(checked)
+  }, [checked, isControlled])
+
+  function handleOnBlur(e: FocusEvent) {
+    setIsFocused(false)
+    onBlur?.(e)
+  }
+
+  function handleOnChange(e: ChangeEvent) {
+    !isControlled && setIsChecked(e.target.checked)
+    onChange?.(e)
+  }
+
+  function handleOnFocus(e: FocusEvent) {
+    setIsFocused(true)
+    onFocus?.(e)
+  }
+
+  const hDiff = (thumbStyles.h - trackStyles.h) / 2
+  const thumbOffset = `calc(100% - ${Math.abs(hDiff - thumbStyles.h)}px)`
+  const labelOffset = `${thumbStyles.h - hDiff + 4}px`
+
+  const aliasedProps = filterUndefined({
+    'aria-checked': isChecked ? true : false,
+    'aria-disabled': disabled,
+    'data-focused': isFocused ? true : false
+  })
+
+  const thumbAliasedProps = filterUndefined({
+    left: isChecked ? thumbOffset : -hDiff,
+    ring: isFocused ? thumbStyles.ring : 0
+  })
+
+  const trackAliasedProps = filterUndefined({
+    bg: isChecked ? trackStyles.bg : 'grey.50',
+    pl: isChecked ? 1 : labelOffset,
+    pr: isChecked ? labelOffset : 1,
+    ring: !disabled ? (isFocused ? trackStyles.ring : 0) : 1
+  })
+
+  return (
+    <SwitchButtonBase
+      className={cs('vui-switchButton', className)}
+      ref={ref}
+      {...buttonStyles}
+      {...aliasedProps}
+      {...rest}
+    >
+      <SwitchInput
+        className="vui-switchInput"
+        onBlur={handleOnBlur}
+        onChange={handleOnChange}
+        onFocus={handleOnFocus}
+        ref={inputRef}
+        type="checkbox"
+        {...{ checked, defaultChecked, disabled, id, name, required, value }}
+        {...inputProps}
+      />
+
+      <SwitchTrack className="vui-switchTrack" {...trackStyles} {...trackAliasedProps}>
+        {!isChecked && innerLabelOff}
+
+        <SwitchThumb className="vui-switchThumb" {...thumbStyles} {...thumbAliasedProps} />
+
+        {isChecked && innerLabelOn}
+      </SwitchTrack>
+    </SwitchButtonBase>
+  )
 })
 
-SwitchButton.displayName = 'SwitchButton'
-
 export default SwitchButton

package/src/switch/switchLabel.tsx

@@ -7,12 +7,10 @@ import { useSwitchContext } from './context'
 
 /** Displays label text within the Switch component. */
 export const SwitchLabel = vui<'span', TProps>((props, ref) => {
-	const { className, ...rest } = props
-	const styles = useStyleConfig('Switch', useSwitchContext())
+  const { className, ...rest } = props
+  const styles = useStyleConfig('Switch', useSwitchContext())
 
-	return <T className={cs('vui-switchLabel', className)} display="flex" ref={ref} {...styles.label} {...rest} />
+  return <T className={cs('vui-switchLabel', className)} display="flex" ref={ref} {...styles.label} {...rest} />
 })
 
-SwitchLabel.displayName = 'SwitchLabel'
-
 export default SwitchLabel

package/src/switch/switchMain.tsx

@@ -0,0 +1,100 @@
+import React, { useMemo } from 'react'
+
+import { styled, useStyleConfig, vui, VuiComponent } from '../core'
+import { cs, filterUndefined, isReactText } from '../utils'
+import { SwitchProvider } from './context'
+import { SwitchProps } from './switch.types'
+import { SwitchButton } from './switchButton'
+import { SwitchLabel } from './switchLabel'
+
+export const SwitchBase = styled.labelBox`
+  align-items: center;
+  cursor: pointer;
+  display: inline-flex;
+  line-height: normal;
+  width: fit-content;
+
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+
+    .vui-switchLabel {
+      color: disabled.color;
+    }
+  }
+`
+
+/**
+ * Displays a toggle button with supporting text. Allows passing custom elements as side labels and inner labels.
+ * Forwards many relevant props to the innner input element. Exposes some props to the children via context.
+ */
+export const Switch = vui<'label', SwitchProps>((props, ref) => {
+  const {
+    button,
+    checked,
+    children,
+    className,
+    colorScheme,
+    defaultChecked,
+    disabled,
+    id,
+    innerLabelOff,
+    innerLabelOn,
+    inputProps,
+    inputRef,
+    labelLeft,
+    labelRight,
+    name,
+    onBlur,
+    onChange,
+    onFocus,
+    required,
+    size,
+    value,
+    variant,
+    ...rest
+  } = props
+  const styles = useStyleConfig('Switch', props)
+
+  const context = useMemo(
+    () =>
+      filterUndefined({
+        checked,
+        colorScheme,
+        defaultChecked,
+        disabled,
+        name,
+        onBlur,
+        onChange,
+        onFocus,
+        required,
+        size,
+        value,
+        variant
+      }),
+    [checked, colorScheme, defaultChecked, disabled, name, onBlur, onChange, onFocus, required, size, value, variant]
+  )
+
+  const aliasedProps = filterUndefined({
+    'aria-disabled': disabled
+  })
+
+  return (
+    <SwitchProvider value={context}>
+      <SwitchBase className={cs('vui-switch', className)} ref={ref} {...styles.container} {...aliasedProps} {...rest}>
+        {isReactText(labelLeft) ? <SwitchLabel mr={1} text={labelLeft} /> : labelLeft}
+
+        {children ?? button ?? <SwitchButton {...{ id, innerLabelOff, innerLabelOn, inputProps, inputRef }} />}
+
+        {isReactText(labelRight) ? <SwitchLabel ml={1} text={labelRight} /> : labelRight}
+      </SwitchBase>
+    </SwitchProvider>
+  )
+}) as VuiComponent<'label', SwitchProps> & {
+  Button: typeof SwitchButton
+  Label: typeof SwitchLabel
+}
+
+Switch.Button = SwitchButton
+Switch.Label = SwitchLabel
+
+export default Switch

package/src/switch/theme.ts

@@ -1,105 +1,105 @@
 import { Dict } from '../utils'
 
 function sizeLg() {
-	const button = {
-		fontSize: 'md',
-		minW: 50,
-		thumb: {
-			h: 24,
-			w: 24
-		},
-		track: {
-			h: 28
-		}
-	}
-
-	const label = {
-		size: 'lg'
-	}
-
-	return { button, label }
+  const button = {
+    fontSize: 'md',
+    minW: 50,
+    thumb: {
+      h: 24,
+      w: 24
+    },
+    track: {
+      h: 28
+    }
+  }
+
+  const label = {
+    size: 'lg'
+  }
+
+  return { button, label }
 }
 
 function sizeMd() {
-	const button = {
-		fontSize: 'sm',
-		minW: 42,
-		thumb: {
-			h: 20,
-			w: 20
-		},
-		track: {
-			h: 24
-		}
-	}
-
-	const label = {
-		size: 'md'
-	}
-
-	return { button, label }
+  const button = {
+    fontSize: 'sm',
+    minW: 42,
+    thumb: {
+      h: 20,
+      w: 20
+    },
+    track: {
+      h: 24
+    }
+  }
+
+  const label = {
+    size: 'md'
+  }
+
+  return { button, label }
 }
 
 function sizeSm() {
-	const button = {
-		fontSize: 'xs',
-		minW: 34,
-		thumb: {
-			h: 16,
-			w: 16
-		},
-		track: {
-			h: 20
-		}
-	}
-
-	const label = {
-		size: 'sm'
-	}
-
-	return { button, label }
+  const button = {
+    fontSize: 'xs',
+    minW: 34,
+    thumb: {
+      h: 16,
+      w: 16
+    },
+    track: {
+      h: 20
+    }
+  }
+
+  const label = {
+    size: 'sm'
+  }
+
+  return { button, label }
 }
 
 function variantContained(props: Dict) {
-	const { colorScheme: c } = props
-
-	const button = {
-		thumb: {
-			bg: 'white'
-		},
-		track: {
-			bg: `${c}.80`,
-			ring: 3
-		}
-	}
-
-	return { button }
+  const { colorScheme: c } = props
+
+  const button = {
+    thumb: {
+      bg: 'white'
+    },
+    track: {
+      bg: `${c}.80`,
+      ring: 3
+    }
+  }
+
+  return { button }
 }
 
 const baseStyle = {}
 
 const defaultProps = {
-	colorScheme: 'blue',
-	size: 'md',
-	variant: 'contained'
+  colorScheme: 'blue',
+  size: 'md',
+  variant: 'contained'
 }
 
 const parts = ['container', 'button', 'label']
 
 const sizes = {
-	sm: sizeSm,
-	md: sizeMd,
-	lg: sizeLg
+  sm: sizeSm,
+  md: sizeMd,
+  lg: sizeLg
 }
 
 const variants = {
-	contained: variantContained
+  contained: variantContained
 }
 
 export default {
-	baseStyle,
-	defaultProps,
-	parts,
-	sizes,
-	variants
+  baseStyle,
+  defaultProps,
+  parts,
+  sizes,
+  variants
 }

package/src/system/animations.ts

@@ -4,10 +4,11 @@ import { VuiTheme } from '../theme'
 
 export type AnimationGetter = VariantsType<VuiTheme['animations']>
 
-type AnimationProp = SystemProp<AnimationGetter, VuiTheme>
+export type AnimationProp = SystemProp<AnimationGetter, VuiTheme>
+
 export type AnimationProps = {
-	animation?: AnimationProp
-	hoverAnimation?: AnimationProp
+  animation?: AnimationProp
+  hoverAnimation?: AnimationProp
 }
 
 export type AnimationsProps = AnimationProps

package/src/system/backgrounds.ts

@@ -5,10 +5,10 @@ import { ColorGetter } from './colors'
 
 type BackgroundColorProp = SystemProp<ColorGetter, VuiTheme>
 export type BackgroundColorProps = {
-	activeBg?: BackgroundColorProp
-	bg?: BackgroundColorProp
-	disabledBg?: BackgroundColorProp
-	hoverBg?: BackgroundColorProp
+  activeBg?: BackgroundColorProp
+  bg?: BackgroundColorProp
+  disabledBg?: BackgroundColorProp
+  hoverBg?: BackgroundColorProp
 }
 
 export type BackgroundsProps = BackgroundColorProps