@veracity/vui 1.0.0 → 1.1.1

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

package/src/system/borders.ts

@@ -11,192 +11,192 @@ export type RingWidthGetter = VariantsType<VuiTheme['ringWidths']>
 
 type BorderProp = SystemProp<BorderGetter, VuiTheme>
 export type BorderProps = {
-	border?: BorderProp
-	hoverBorder?: BorderProp
+  border?: BorderProp
+  hoverBorder?: BorderProp
 }
 
 type BorderTopProp = SystemProp<BorderGetter, VuiTheme>
 export type BorderTopProps = {
-	borderTop?: BorderTopProp
+  borderTop?: BorderTopProp
 }
 
 type BorderRightProp = SystemProp<BorderGetter, VuiTheme>
 export type BorderRightProps = {
-	borderRight?: BorderRightProp
+  borderRight?: BorderRightProp
 }
 
 type BorderBottomProp = SystemProp<BorderGetter, VuiTheme>
 export type BorderBottomProps = {
-	borderBottom?: BorderBottomProp
+  borderBottom?: BorderBottomProp
 }
 
 type BorderLeftProp = SystemProp<BorderGetter, VuiTheme>
 export type BorderLeftProps = {
-	borderLeft?: BorderLeftProp
+  borderLeft?: BorderLeftProp
 }
 
 type BorderColorProp = SystemProp<ColorGetter, VuiTheme>
 export type BorderColorProps = {
-	borderColor?: BorderColorProp
-	disabledBorderColor?: BorderColorProp
-	focusBorderColor?: BorderColorProp
-	hoverBorderColor?: BorderColorProp
-	focusWithinBorderColor?: BorderColorProp
+  borderColor?: BorderColorProp
+  disabledBorderColor?: BorderColorProp
+  focusBorderColor?: BorderColorProp
+  hoverBorderColor?: BorderColorProp
+  focusWithinBorderColor?: BorderColorProp
 }
 
 type BorderTopColorProp = SystemProp<ColorGetter, VuiTheme>
 export type BorderTopColorProps = {
-	borderTopColor?: BorderTopColorProp
+  borderTopColor?: BorderTopColorProp
 }
 
 type BorderRightColorProp = SystemProp<ColorGetter, VuiTheme>
 export type BorderRightColorProps = {
-	borderRightColor?: BorderRightColorProp
+  borderRightColor?: BorderRightColorProp
 }
 
 type BorderBottomColorProp = SystemProp<ColorGetter, VuiTheme>
 export type BorderBottomColorProps = {
-	borderBottomColor?: BorderBottomColorProp
+  borderBottomColor?: BorderBottomColorProp
 }
 
 type BorderLeftColorProp = SystemProp<ColorGetter, VuiTheme>
 export type BorderLeftColorProps = {
-	borderLeftColor?: BorderLeftColorProp
+  borderLeftColor?: BorderLeftColorProp
 }
 
 type BorderWidthProp = SystemProp<BorderWidthGetter, VuiTheme>
 export type BorderWidthProps = {
-	borderWidth?: BorderWidthProp
-	hoverBorderWidth?: BorderWidthProp
+  borderWidth?: BorderWidthProp
+  hoverBorderWidth?: BorderWidthProp
 }
 
 type BorderTopWidthProp = SystemProp<BorderWidthGetter, VuiTheme>
 export type BorderTopWidthProps = {
-	borderTopWidth?: BorderTopWidthProp
+  borderTopWidth?: BorderTopWidthProp
 }
 
 type BorderRightWidthProp = SystemProp<BorderWidthGetter, VuiTheme>
 export type BorderRightWidthProps = {
-	borderRightWidth?: BorderRightWidthProp
+  borderRightWidth?: BorderRightWidthProp
 }
 
 type BorderBottomWidthProp = SystemProp<BorderWidthGetter, VuiTheme>
 export type BorderBottomWidthProps = {
-	borderBottomWidth?: BorderBottomWidthProp
+  borderBottomWidth?: BorderBottomWidthProp
 }
 
 type BorderLeftWidthProp = SystemProp<BorderWidthGetter, VuiTheme>
 export type BorderLeftWidthProps = {
-	borderLeftWidth?: BorderLeftWidthProp
+  borderLeftWidth?: BorderLeftWidthProp
 }
 
 type BorderStyleProp = SystemProp<BorderStyleGetter, VuiTheme>
 export type BorderStyleProps = {
-	borderStyle?: BorderStyleProp
-	hoverBorderStyle?: BorderStyleProp
+  borderStyle?: BorderStyleProp
+  hoverBorderStyle?: BorderStyleProp
 }
 
 export type BorderRadiusProp = SystemProp<RadiusGetter, VuiTheme>
 export type BorderRadiusProps = {
-	borderRadius?: BorderRadiusProp
-	hoverBorderRadius?: BorderRadiusProp
+  borderRadius?: BorderRadiusProp
+  hoverBorderRadius?: BorderRadiusProp
 }
 
 type OutlineProp = SystemProp<BorderGetter, VuiTheme>
 export type OutlineProps = {
-	outline?: OutlineProp
+  outline?: OutlineProp
 }
 
 type OutlineColorProp = SystemProp<ColorGetter, VuiTheme>
 export type OutlineColorProps = {
-	outlineColor?: OutlineColorProp
+  outlineColor?: OutlineColorProp
 }
 
 type OutlineWidthProp = SystemProp<BorderWidthGetter, VuiTheme>
 export type OutlineWidthProps = {
-	outlineWidth?: OutlineWidthProp
+  outlineWidth?: OutlineWidthProp
 }
 
 type OutlineStyleProp = SystemProp<BorderStyleGetter, VuiTheme>
 export type OutlineStyleProps = {
-	outlineStyle?: OutlineStyleProp
+  outlineStyle?: OutlineStyleProp
 }
 
 type DivideXProp = SystemProp<BorderWidthGetter, VuiTheme>
 export type DivideXProps = {
-	divideX?: DivideXProp
+  divideX?: DivideXProp
 }
 
 type DivideYProp = SystemProp<BorderWidthGetter, VuiTheme>
 export type DivideYProps = {
-	divideY?: DivideYProp
+  divideY?: DivideYProp
 }
 
 type DivideXReverseProp = SystemProp<BorderWidthGetter, VuiTheme>
 export type DivideXReverseProps = {
-	divideXReverse?: DivideXReverseProp
+  divideXReverse?: DivideXReverseProp
 }
 
 type DivideYReverseProp = SystemProp<BorderWidthGetter, VuiTheme>
 export type DivideYReverseProps = {
-	divideYReverse?: DivideYReverseProp
+  divideYReverse?: DivideYReverseProp
 }
 
 type DivideColorProp = SystemProp<ColorGetter, VuiTheme>
 export type DivideColorProps = {
-	divideColor?: DivideColorProp
-	hoverDivideColor?: DivideColorProp
+  divideColor?: DivideColorProp
+  hoverDivideColor?: DivideColorProp
 }
 
 type DivideStyleProp = SystemProp<BorderStyleGetter, VuiTheme>
 export type DivideStyleProps = {
-	divideStyle?: DivideStyleProp
+  divideStyle?: DivideStyleProp
 }
 
 type RingProp = SystemProp<RingWidthGetter, VuiTheme>
 export type RingProps = {
-	ring?: RingProp
-	focusRing?: RingProp
-	focusVisibleRing?: RingProp
-	focusWithinRing?: RingProp
-	hoverRing?: RingProp
+  ring?: RingProp
+  focusRing?: RingProp
+  focusVisibleRing?: RingProp
+  focusWithinRing?: RingProp
+  hoverRing?: RingProp
 }
 
 type RingColorProp = SystemProp<ColorGetter, VuiTheme>
 export type RingColorProps = {
-	ringColor?: RingColorProp
-	focusRingColor?: RingColorProp
-	focusVisibleRingColor?: RingColorProp
-	focusWithinRingColor?: RingColorProp
-	hoverRingColor?: RingColorProp
+  ringColor?: RingColorProp
+  focusRingColor?: RingColorProp
+  focusVisibleRingColor?: RingColorProp
+  focusWithinRingColor?: RingColorProp
+  hoverRingColor?: RingColorProp
 }
 
 export type BordersProps = 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
+  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

package/src/system/custom.ts

@@ -1,44 +1,44 @@
 import { style } from '@xstyled/styled-components'
 
 export type IsTruncatedProps = {
-	isTruncated?: boolean
+  isTruncated?: boolean
 }
 
 /** Provides styling to truncate single-line text. */
 export const isTruncated = style({
-	prop: 'isTruncated',
-	cssProperty: function () {
-		return {
-			overflow: 'hidden',
-			'text-overflow': 'ellipsis',
-			'white-space': 'nowrap'
-		}
-	},
-	states: {}
+  prop: 'isTruncated',
+  cssProperty: function () {
+    return {
+      overflow: 'hidden',
+      'text-overflow': 'ellipsis',
+      'white-space': 'nowrap'
+    }
+  },
+  states: {}
 })
 
 export type MaxLinesProps = {
-	maxLines?: number
+  maxLines?: number
 }
 
 /** Provides styling to truncate multi-line text. */
 export const maxLines = style({
-	prop: 'maxLines',
-	cssProperty: function (value: any) {
-		return {
-			display: '-webkit-box',
-			overflow: 'hidden',
-			'-webkit-line-clamp': `${value}`,
-			'-webkit-box-orient': 'vertical'
-		}
-	},
-	states: {}
+  prop: 'maxLines',
+  cssProperty: function (value: any) {
+    return {
+      display: '-webkit-box',
+      overflow: 'hidden',
+      '-webkit-line-clamp': `${value}`,
+      '-webkit-box-orient': 'vertical'
+    }
+  },
+  states: {}
 })
 
 export type WordBreakProps = {
-	wordBreak?: 'normal' | 'break-all' | 'keep-all' | 'break-word'
+  wordBreak?: 'normal' | 'break-all' | 'keep-all' | 'break-word'
 }
 
 export const wordBreak = style({
-	prop: 'wordBreak'
+  prop: 'wordBreak'
 })

package/src/system/effects.ts

@@ -8,19 +8,19 @@ export type ShadowGetter = VariantsType<VuiTheme['shadows']>
 
 type OpacityProp = SystemProp<CSS.Property.Opacity, VuiTheme>
 export type OpacityProps = {
-	opacity?: OpacityProp
-	hoverOpacity?: OpacityProp
+  opacity?: OpacityProp
+  hoverOpacity?: OpacityProp
 }
 
 type BoxShadowProp = SystemProp<ShadowGetter | AnyString, VuiTheme>
 export type BoxShadowProps = {
-	boxShadow?: BoxShadowProp
-	hoverBoxShadow?: BoxShadowProp
+  boxShadow?: BoxShadowProp
+  hoverBoxShadow?: BoxShadowProp
 }
 
 type TextShadowProp = SystemProp<ShadowGetter | AnyString, VuiTheme>
 export type TextShadowProps = {
-	textShadow?: TextShadowProp
+  textShadow?: TextShadowProp
 }
 
 export type EffectsProps = OpacityProps & BoxShadowProps & TextShadowProps

package/src/system/flexboxGrids.ts

@@ -4,12 +4,12 @@ import { VuiTheme } from '../theme'
 
 type RowProp = SystemProp<boolean, VuiTheme>
 export type RowProps = {
-	row?: RowProp
+  row?: RowProp
 }
 
 type ColProp = SystemProp<true | 'auto' | string | number, VuiTheme>
 export type ColProps = {
-	col?: ColProp
+  col?: ColProp
 }
 
 export type FlexboxGridsProps = RowProps & ColProps