@veracity/vui 1.0.0 → 1.1.1

package/src/button/theme.ts

@@ -1,162 +1,162 @@
 import { Dict } from '../utils'
 
 function variantOutlined(props: Dict) {
-	const { colorScheme: c } = props
+  const { colorScheme: c } = props
 
-	const container = {
-		...variantText(props)?.container,
-		borderColor: `${c}.80`,
-		hoverBorderColor: `${c}.80`,
-		focusRing: 3
-	}
+  const container = {
+    ...variantText(props)?.container,
+    borderColor: `${c}.80`,
+    hoverBorderColor: `${c}.80`,
+    focusRing: 3
+  }
 
-	return { container }
+  return { container }
 }
 
 function variantSolid(props: Dict) {
-	const { colorScheme: c } = props
-
-	const container = {
-		hoverBg: `${c}.90`,
-		hoverBorderColor: `${c}.90`,
-		activeBg: `${c}.100`,
-		bg: `${c}.80`,
-		borderColor: `${c}.80`,
-		borderWidth: 1,
-		color: 'white'
-	}
-
-	// Special cases
-	if (c === 'prussian') {
-		container.activeBg = 'prussian.50'
-		container.hoverBg = 'prussian.60'
-		container.hoverBorderColor = 'prussian.60'
-	}
-
-	return { container }
+  const { colorScheme: c } = props
+
+  const container = {
+    hoverBg: `${c}.90`,
+    hoverBorderColor: `${c}.90`,
+    activeBg: `${c}.100`,
+    bg: `${c}.80`,
+    borderColor: `${c}.80`,
+    borderWidth: 1,
+    color: 'white'
+  }
+
+  // Special cases
+  if (c === 'prussian') {
+    container.activeBg = 'prussian.50'
+    container.hoverBg = 'prussian.60'
+    container.hoverBorderColor = 'prussian.60'
+  }
+
+  return { container }
 }
 
 function variantSubtle(props: Dict) {
-	const { colorScheme: c } = props
-
-	const container = {
-		hoverBg: `${c}.30`,
-		hoverBorderColor: `${c}.30`,
-		activeBg: `${c}.40`,
-		bg: `${c}.20`,
-		borderColor: `${c}.20`,
-		borderWidth: 1,
-		color: `${c}.90`
-	}
-
-	// Special cases
-	if (c === 'prussian') {
-		container.activeBg = 'blue.40'
-		container.hoverBg = 'blue.30'
-		container.hoverBorderColor = 'blue.30'
-		container.bg = 'blue.20'
-		container.borderColor = 'blue.20'
-	}
-
-	return { container }
+  const { colorScheme: c } = props
+
+  const container = {
+    hoverBg: `${c}.30`,
+    hoverBorderColor: `${c}.30`,
+    activeBg: `${c}.40`,
+    bg: `${c}.20`,
+    borderColor: `${c}.20`,
+    borderWidth: 1,
+    color: `${c}.90`
+  }
+
+  // Special cases
+  if (c === 'prussian') {
+    container.activeBg = 'blue.40'
+    container.hoverBg = 'blue.30'
+    container.hoverBorderColor = 'blue.30'
+    container.bg = 'blue.20'
+    container.borderColor = 'blue.20'
+  }
+
+  return { container }
 }
 
 function variantText(props: Dict) {
-	const { colorScheme: c } = props
-
-	const container = {
-		hoverBg: `${c}.20`,
-		hoverBorderColor: `${c}.20`,
-		activeBg: `${c}.30`,
-		bg: 'transparent',
-		borderColor: 'transparent',
-		borderWidth: 1,
-		color: `${c}.80`,
-		focusRing: 2
-	}
-
-	// Special cases
-	if (c === 'prussian') {
-		container.activeBg = 'blue.30'
-		container.hoverBg = 'blue.20'
-		container.hoverBorderColor = 'blue.20'
-	}
-
-	return { container }
+  const { colorScheme: c } = props
+
+  const container = {
+    hoverBg: `${c}.20`,
+    hoverBorderColor: `${c}.20`,
+    activeBg: `${c}.30`,
+    bg: 'transparent',
+    borderColor: 'transparent',
+    borderWidth: 1,
+    color: `${c}.80`,
+    focusRing: 2
+  }
+
+  // Special cases
+  if (c === 'prussian') {
+    container.activeBg = 'blue.30'
+    container.hoverBg = 'blue.20'
+    container.hoverBorderColor = 'blue.20'
+  }
+
+  return { container }
 }
 
 const baseStyle = {}
 
 const defaultProps = {
-	colorScheme: 'prussian',
-	size: 'md',
-	variant: 'solid'
+  colorScheme: 'prussian',
+  size: 'md',
+  variant: 'solid'
 }
 
 const parts = ['container', 'icon', 'text']
 
 const sizes = {
-	xs: {
-		container: {
-			fontSize: 'sm',
-			h: 24,
-			minW: 48,
-			spaceX: 4
-		},
-		icon: {
-			size: 'xs'
-		},
-		text: {}
-	},
-	sm: {
-		container: {
-			fontSize: 'sm',
-			h: 32,
-			minW: 64,
-			spaceX: 6
-		},
-		icon: {
-			size: 'sm'
-		},
-		text: {}
-	},
-	md: {
-		container: {
-			fontSize: 'md',
-			h: 40,
-			minW: 80,
-			spaceX: 8
-		},
-		icon: {
-			size: 'md'
-		},
-		text: {}
-	},
-	lg: {
-		container: {
-			fontSize: 'lg',
-			h: 48,
-			minW: 96,
-			spaceX: 10
-		},
-		icon: {
-			size: 'lg'
-		},
-		text: {}
-	}
+  xs: {
+    container: {
+      fontSize: 'sm',
+      h: 24,
+      minW: 48,
+      spaceX: 4
+    },
+    icon: {
+      size: 'xs'
+    },
+    text: {}
+  },
+  sm: {
+    container: {
+      fontSize: 'sm',
+      h: 32,
+      minW: 64,
+      spaceX: 6
+    },
+    icon: {
+      size: 'sm'
+    },
+    text: {}
+  },
+  md: {
+    container: {
+      fontSize: 'md',
+      h: 40,
+      minW: 80,
+      spaceX: 8
+    },
+    icon: {
+      size: 'md'
+    },
+    text: {}
+  },
+  lg: {
+    container: {
+      fontSize: 'lg',
+      h: 48,
+      minW: 96,
+      spaceX: 10
+    },
+    icon: {
+      size: 'lg'
+    },
+    text: {}
+  }
 }
 
 const variants = {
-	outlined: variantOutlined,
-	solid: variantSolid,
-	subtle: variantSubtle,
-	text: variantText
+  outlined: variantOutlined,
+  solid: variantSolid,
+  subtle: variantSubtle,
+  text: variantText
 }
 
 export default {
-	baseStyle,
-	defaultProps,
-	parts,
-	sizes,
-	variants
+  baseStyle,
+  defaultProps,
+  parts,
+  sizes,
+  variants
 }

package/src/buttonGroup/buttonGroup.tsx

@@ -7,33 +7,33 @@ import { ButtonGroupProvider } from './context'
 import { getInnerBorderColor } from './helpers'
 
 export const ButtonGroupBase = styled.divBox<{ innerBorderColor: string }>`
-	display: flex;
-
-	// Border color between Buttons
-	> *:not(:last-of-type):not(:focus) {
-		border-right-color: ${p => th.color(p.innerBorderColor)};
-	}
-
-	// First Button
-	> *:first-of-type:not(:last-of-type) {
-		border-bottom-right-radius: 0;
-		border-right-width: 1px;
-		border-top-right-radius: 0;
-	}
-
-	// Middle Buttons
-	> *:not(:first-of-type):not(:last-of-type) {
-		border-left-width: 0px;
-		border-radius: 0;
-		border-right-width: 1px;
-	}
-
-	// Last Button
-	> *:not(:first-of-type):last-of-type {
-		border-bottom-left-radius: 0;
-		border-left-width: 0px;
-		border-top-left-radius: 0;
-	}
+  display: flex;
+
+  // Border color between Buttons
+  > *:not(:last-of-type):not(:focus) {
+    border-right-color: ${p => th.color(p.innerBorderColor)};
+  }
+
+  // First Button
+  > *:first-of-type:not(:last-of-type) {
+    border-bottom-right-radius: 0;
+    border-right-width: 1px;
+    border-top-right-radius: 0;
+  }
+
+  // Middle Buttons
+  > *:not(:first-of-type):not(:last-of-type) {
+    border-left-width: 0px;
+    border-radius: 0;
+    border-right-width: 1px;
+  }
+
+  // Last Button
+  > *:not(:first-of-type):last-of-type {
+    border-bottom-left-radius: 0;
+    border-left-width: 0px;
+    border-top-left-radius: 0;
+  }
 `
 
 /**
@@ -41,22 +41,20 @@ export const ButtonGroupBase = styled.divBox<{ innerBorderColor: string }>`
  * Exposes some props to the children via context.
  */
 export const ButtonGroup = vui<'div', ButtonGroupProps>((props, ref) => {
-	const { className, colorScheme, disabled, size, variant, ...rest } = props
+  const { className, colorScheme, disabled, size, variant, ...rest } = props
 
-	const innerBorderColor = getInnerBorderColor(props)
+  const innerBorderColor = getInnerBorderColor(props)
 
-	const context = useMemo(
-		() => filterUndefined({ colorScheme, disabled, size, variant }),
-		[colorScheme, disabled, size, variant]
-	)
+  const context = useMemo(
+    () => filterUndefined({ colorScheme, disabled, size, variant }),
+    [colorScheme, disabled, size, variant]
+  )
 
-	return (
-		<ButtonGroupProvider value={context}>
-			<ButtonGroupBase className={cs('vui-buttonGroup', className)} {...{ innerBorderColor, ref }} {...rest} />
-		</ButtonGroupProvider>
-	)
+  return (
+    <ButtonGroupProvider value={context}>
+      <ButtonGroupBase className={cs('vui-buttonGroup', className)} {...{ innerBorderColor, ref }} {...rest} />
+    </ButtonGroupProvider>
+  )
 })
 
-ButtonGroup.displayName = 'ButtonGroup'
-
 export default ButtonGroup

package/src/buttonGroup/buttonGroup.types.ts

@@ -2,9 +2,9 @@ import { SystemProps } from '../system'
 import { ThemingProps } from '../theme'
 
 export type ButtonGroupProps = SystemProps &
-	ThemingProps<'ButtonGroup'> & {
-		/** Available theme colors for this component. */
-		colorScheme?: 'blue' | 'green' | 'pink' | 'prussian' | 'red'
-		/** Makes all wrapped buttons disabled. */
-		disabled?: boolean
-	}
+  ThemingProps<'ButtonGroup'> & {
+    /** Available theme colors for this component. */
+    colorScheme?: 'blue' | 'green' | 'pink' | 'prussian' | 'red'
+    /** Makes all wrapped buttons disabled. */
+    disabled?: boolean
+  }

package/src/buttonGroup/helpers.ts

@@ -2,11 +2,11 @@ import { ButtonGroupProps } from './buttonGroup.types'
 
 /** Returns appropriate color for the border between the buttons. */
 export function getInnerBorderColor(props: ButtonGroupProps) {
-	const { colorScheme = 'prussian', disabled, variant = 'solid' } = props
+  const { colorScheme = 'prussian', disabled, variant = 'solid' } = props
 
-	if (disabled) return 'disabled.border'
+  if (disabled) return 'disabled.border'
 
-	const shade = variant === 'solid' ? '100' : '80'
+  const shade = variant === 'solid' ? '100' : '80'
 
-	return `${colorScheme}.${shade}`
+  return `${colorScheme}.${shade}`
 }

package/src/card/card.tsx

@@ -10,38 +10,36 @@ import { CardProps } from './card.types'
  * Supports use cases like a single card or multiple tiles.
  */
 export const Card = vui<'div', CardProps>((props, ref) => {
-	const { className, isInteractive = props.onClick !== undefined, ...rest } = omitThemingProps(props)
-	const styles = useStyleConfig('Card', props)
+  const { className, isInteractive = props.onClick !== undefined, ...rest } = omitThemingProps(props)
+  const styles = useStyleConfig('Card', props)
 
-	const interactiveProps: Dict = isInteractive
-		? {
-				cursor: 'pointer',
-				focusRing: 2,
-				focusRingColor: 'blue.50',
-				hoverRingColor: 'prussian.80',
-				hoverShadow: '4',
-				outline: 'none',
-				tabIndex: 0,
-				userSelect: 'none'
-		  }
-		: {}
+  const interactiveProps: Dict = isInteractive
+    ? {
+        cursor: 'pointer',
+        focusRing: 2,
+        focusRingColor: 'blue.50',
+        hoverRingColor: 'prussian.80',
+        hoverShadow: '4',
+        outline: 'none',
+        tabIndex: 0,
+        userSelect: 'none'
+      }
+    : {}
 
-	return (
-		<Box
-			bg="white"
-			borderRadius="md"
-			className={cs('vui-card', className)}
-			ref={ref}
-			ring={1}
-			ringColor="transparent"
-			shadow="2"
-			{...styles}
-			{...interactiveProps}
-			{...rest}
-		/>
-	)
+  return (
+    <Box
+      bg="white"
+      borderRadius="md"
+      className={cs('vui-card', className)}
+      ref={ref}
+      ring={1}
+      ringColor="transparent"
+      shadow="2"
+      {...styles}
+      {...interactiveProps}
+      {...rest}
+    />
+  )
 })
 
-Card.displayName = 'Card'
-
 export default Card

package/src/card/card.types.ts

@@ -2,7 +2,7 @@ import { BoxProps } from '../box'
 import { ThemingProps } from '../theme'
 
 export type CardProps = Omit<BoxProps, 'size' | 'variant'> &
-	ThemingProps<'Card'> & {
-		/** Makes card clickable and focusable with correct styling. */
-		isInteractive?: boolean
-	}
+  ThemingProps<'Card'> & {
+    /** Makes card clickable and focusable with correct styling. */
+    isInteractive?: boolean
+  }

package/src/card/theme.ts

@@ -7,8 +7,8 @@ const sizes = {}
 const variants = {}
 
 export default {
-	baseStyle,
-	defaultProps,
-	sizes,
-	variants
+  baseStyle,
+  defaultProps,
+  sizes,
+  variants
 }