@veracity/vui 1.0.0 → 1.1.1

package/src/textarea/textarea.types.ts

@@ -3,45 +3,45 @@ import { ThemingProps } from '../theme'
 import { ChangeEventHandler, FocusEventHandler, PropsOf } from '../utils'
 
 export type TextareaProps = SystemProps &
-	ThemingProps<'Textarea'> & {
-		/** Passed to the inner input. */
-		autoFocus?: boolean
-		/** Children are disabled for this component. */
-		children?: never
-		/** Available theme colors for this component. @default grey */
-		colorScheme?: 'green' | 'grey' | 'red'
-		/** Passed to the inner input. */
-		cols?: number
-		/** Passed to the inner input. */
-		defaultValue?: number | string
-		/** Passed to the inner input. */
-		disabled?: boolean
-		/** Styles the textarea in invalid state. */
-		isInvalid?: boolean
-		/** Passed to the inner input. */
-		maxLength?: number
-		/** Passed to the inner input. */
-		name?: string
-		/** Passed to the inner input. */
-		onBlur?: FocusEventHandler<HTMLTextAreaElement>
-		/** Passed to the inner input. */
-		onChange?: ChangeEventHandler<HTMLTextAreaElement>
-		/** Passed to the inner input. */
-		onFocus?: FocusEventHandler<HTMLTextAreaElement>
-		/** Passed to the inner input. */
-		placeholder?: string
-		/** Passed to the inner input. */
-		readOnly?: boolean
-		/** Passed to the inner input. */
-		required?: boolean
-		/** Passed to the inner input. */
-		rows?: number
-		/** Displays length of textarea value if also using maxLength. */
-		showCount?: boolean
-		/** Props object passed to the inner textarea. */
-		textareaProps?: PropsOf<'textarea', SystemProps>
-		/** Ref passed to the inner textarea. */
-		textareaRef?: React.MutableRefObject<HTMLTextAreaElement | null> | null
-		/** Passed to the inner input. */
-		value?: number | string
-	}
+  ThemingProps<'Textarea'> & {
+    /** Passed to the inner input. */
+    autoFocus?: boolean
+    /** Children are disabled for this component. */
+    children?: never
+    /** Available theme colors for this component. @default grey */
+    colorScheme?: 'green' | 'grey' | 'red'
+    /** Passed to the inner input. */
+    cols?: number
+    /** Passed to the inner input. */
+    defaultValue?: number | string
+    /** Passed to the inner input. */
+    disabled?: boolean
+    /** Styles the textarea in invalid state. */
+    isInvalid?: boolean
+    /** Passed to the inner input. */
+    maxLength?: number
+    /** Passed to the inner input. */
+    name?: string
+    /** Passed to the inner input. */
+    onBlur?: FocusEventHandler<HTMLTextAreaElement>
+    /** Passed to the inner input. */
+    onChange?: ChangeEventHandler<HTMLTextAreaElement>
+    /** Passed to the inner input. */
+    onFocus?: FocusEventHandler<HTMLTextAreaElement>
+    /** Passed to the inner input. */
+    placeholder?: string
+    /** Passed to the inner input. */
+    readOnly?: boolean
+    /** Passed to the inner input. */
+    required?: boolean
+    /** Passed to the inner input. */
+    rows?: number
+    /** Displays length of textarea value if also using maxLength. */
+    showCount?: boolean
+    /** Props object passed to the inner textarea. */
+    textareaProps?: PropsOf<'textarea', SystemProps>
+    /** Ref passed to the inner textarea. */
+    textareaRef?: React.MutableRefObject<HTMLTextAreaElement | null> | null
+    /** Passed to the inner input. */
+    value?: number | string
+  }

package/src/textarea/theme.ts

@@ -1,29 +1,29 @@
 import { Dict } from '../utils'
 
 function variantDefault(props: Dict) {
-	const { colorScheme: c } = props
+  const { colorScheme: c } = props
 
-	const container = {}
+  const container = {}
 
-	const textarea = {
-		borderColor: `${c}.80`,
-		focusRing: 2,
-		focusRingColor: `${c}.80`
-	}
+  const textarea = {
+    borderColor: `${c}.80`,
+    focusRing: 2,
+    focusRingColor: `${c}.80`
+  }
 
-	if (c === 'grey') {
-		textarea.borderColor = `${c}.60`
-		textarea.focusRingColor = 'blue.50'
-	}
+  if (c === 'grey') {
+    textarea.borderColor = `${c}.60`
+    textarea.focusRingColor = 'blue.50'
+  }
 
-	return { container, textarea }
+  return { container, textarea }
 }
 
 const baseStyle = {}
 
 const defaultProps = {
-	colorScheme: 'grey',
-	variant: 'default'
+  colorScheme: 'grey',
+  variant: 'default'
 }
 
 const parts = ['container', 'textarea']
@@ -31,13 +31,13 @@ const parts = ['container', 'textarea']
 const sizes = {}
 
 const variants = {
-	default: variantDefault
+  default: variantDefault
 }
 
 export default {
-	baseStyle,
-	defaultProps,
-	parts,
-	sizes,
-	variants
+  baseStyle,
+  defaultProps,
+  parts,
+  sizes,
+  variants
 }

package/src/theme/components.ts

@@ -21,6 +21,7 @@ import P from '../p/theme'
 import Pagination from '../pagination/theme'
 import Panel from '../panel/theme'
 import Popover from '../popover/theme'
+import Progress from '../progress/theme'
 import Radio from '../radio/theme'
 import Select from '../select/theme'
 import Skeleton from '../skeleton/theme'
@@ -28,40 +29,43 @@ import Spinner from '../spinner/theme'
 import Switch from '../switch/theme'
 import T from '../t/theme'
 import Table from '../table/theme'
+import Tabs from '../tabs/theme'
 import Tag from '../tag/theme'
 import Textarea from '../textarea/theme'
 
 export default {
-	Avatar,
-	Box,
-	Button,
-	Card,
-	Checkbox,
-	Dialog,
-	Divider,
-	Footer,
-	Grid,
-	Header,
-	Heading,
-	Icon,
-	Image,
-	Input,
-	Link,
-	List,
-	Menu,
-	Modal,
-	Notification,
-	P,
-	Pagination,
-	Panel,
-	Popover,
-	Radio,
-	Select,
-	Skeleton,
-	Spinner,
-	Switch,
-	T,
-	Table,
-	Tag,
-	Textarea
+  Avatar,
+  Box,
+  Button,
+  Card,
+  Checkbox,
+  Dialog,
+  Divider,
+  Footer,
+  Grid,
+  Header,
+  Heading,
+  Icon,
+  Image,
+  Input,
+  Link,
+  List,
+  Menu,
+  Modal,
+  Notification,
+  P,
+  Pagination,
+  Panel,
+  Progress,
+  Popover,
+  Radio,
+  Select,
+  Skeleton,
+  Spinner,
+  Switch,
+  T,
+  Table,
+  Tabs,
+  Tag,
+  Textarea
 }

package/src/theme/defaultTheme.ts

@@ -2,8 +2,8 @@ import components from './components'
 import foundations from './foundations'
 
 const defaultTheme = {
-	components,
-	...foundations
+  components,
+  ...foundations
 }
 
 export default defaultTheme

package/src/theme/foundations/animations.ts

@@ -1,11 +1,11 @@
 export default {
-	bounce: 'vui-bounce 1s infinite',
-	fadeDown: 'vui-fadeDown 0.2s ease-in-out',
-	fadeIn: 'vui-fadeIn 0.2s ease-in-out',
-	fadeLeft: 'vui-fadeLeft 0.2s ease-in-out',
-	fadeOut: 'vui-fadeOut 0.2s ease-in-out',
-	fadeRight: 'vui-fadeRight 0.2s ease-in-out',
-	fadeUp: 'vui-fadeUp 0.2s ease-in-out',
-	pulse: 'vui-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
-	spin: 'vui-spin 1s linear infinite'
+  bounce: 'vui-bounce 1s infinite',
+  fadeDown: 'vui-fadeDown 0.2s ease-in-out',
+  fadeIn: 'vui-fadeIn 0.2s ease-in-out',
+  fadeLeft: 'vui-fadeLeft 0.2s ease-in-out',
+  fadeOut: 'vui-fadeOut 0.2s ease-in-out',
+  fadeRight: 'vui-fadeRight 0.2s ease-in-out',
+  fadeUp: 'vui-fadeUp 0.2s ease-in-out',
+  pulse: 'vui-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+  spin: 'vui-spin 1s linear infinite'
 }

package/src/theme/foundations/colors.ts

@@ -1,107 +1,107 @@
 export const blue = {
-	10: '#f6fbff',
-	20: '#e2f1ff',
-	30: '#c2e1fe',
-	40: '#a1cef9',
-	50: '#77baf9',
-	60: '#48a1f3',
-	70: '#1e86e5',
-	80: '#0067c5',
-	90: '#075094',
-	100: '#003f79'
+  10: '#f6fbff',
+  20: '#e2f1ff',
+  30: '#c2e1fe',
+  40: '#a1cef9',
+  50: '#77baf9',
+  60: '#48a1f3',
+  70: '#1e86e5',
+  80: '#0067c5',
+  90: '#075094',
+  100: '#003f79'
 }
 
 export const green = {
-	10: '#efffed',
-	20: '#d8ffd3',
-	30: '#bdfbb6',
-	40: '#9df291',
-	50: '#82db77',
-	60: '#68c35e',
-	70: '#4ea344',
-	80: '#36842d',
-	90: '#276121',
-	100: '#024019'
+  10: '#efffed',
+  20: '#d8ffd3',
+  30: '#bdfbb6',
+  40: '#9df291',
+  50: '#82db77',
+  60: '#68c35e',
+  70: '#4ea344',
+  80: '#36842d',
+  90: '#276121',
+  100: '#024019'
 }
 
 export const grey = {
-	10: '#f7f8f9',
-	20: '#f1f3f5',
-	30: '#e1e6e9',
-	40: '#c3ccd3',
-	50: '#a5b3bd',
-	60: '#8799a7',
-	70: '#768b9c',
-	80: '#698091',
-	90: '#586c7a',
-	100: '#465663'
+  10: '#f7f8f9',
+  20: '#f1f3f5',
+  30: '#e1e6e9',
+  40: '#c3ccd3',
+  50: '#a5b3bd',
+  60: '#8799a7',
+  70: '#768b9c',
+  80: '#698091',
+  90: '#586c7a',
+  100: '#465663'
 }
 
 export const pink = {
-	10: '#fff3fd',
-	20: '#ffddf9',
-	30: '#ffbdf3',
-	40: '#ff8eea',
-	50: '#ff55df',
-	60: '#ff0ed2',
-	70: '#ee00c1',
-	80: '#da00b1',
-	90: '#a00082',
-	100: '#72005c'
+  10: '#fff3fd',
+  20: '#ffddf9',
+  30: '#ffbdf3',
+  40: '#ff8eea',
+  50: '#ff55df',
+  60: '#ff0ed2',
+  70: '#ee00c1',
+  80: '#da00b1',
+  90: '#a00082',
+  100: '#72005c'
 }
 
 export const prussian = {
-	10: '#eff3f5',
-	20: '#c5dce8',
-	30: '#91bbcf',
-	40: '#5690ac',
-	50: '#32718e',
-	60: '#0d5071',
-	70: '#003b57',
-	80: '#002a3e',
-	90: '#001620',
-	100: '#000b11'
+  10: '#eff3f5',
+  20: '#c5dce8',
+  30: '#91bbcf',
+  40: '#5690ac',
+  50: '#32718e',
+  60: '#0d5071',
+  70: '#003b57',
+  80: '#002a3e',
+  90: '#001620',
+  100: '#000b11'
 }
 
 export const red = {
-	10: '#fff1f1',
-	20: '#ffe4e4',
-	30: '#ffc8c8',
-	40: '#faa7ab',
-	50: '#fb7b81',
-	60: '#f64d55',
-	70: '#e84148',
-	80: '#d6383f',
-	90: '#b62f3a',
-	100: '#962730'
+  10: '#fff1f1',
+  20: '#ffe4e4',
+  30: '#ffc8c8',
+  40: '#faa7ab',
+  50: '#fb7b81',
+  60: '#f64d55',
+  70: '#e84148',
+  80: '#d6383f',
+  90: '#b62f3a',
+  100: '#962730'
 }
 
 export const yellow = {
-	10: '#fffde7',
-	20: '#fff8bd',
-	30: '#ffed7a',
-	40: '#ffe43a',
-	50: '#ffd600',
-	60: '#fec600',
-	70: '#f4b40d',
-	80: '#e29c13',
-	90: '#b67b08',
-	100: '#83591a'
+  10: '#fffde7',
+  20: '#fff8bd',
+  30: '#ffed7a',
+  40: '#ffe43a',
+  50: '#ffd600',
+  60: '#fec600',
+  70: '#f4b40d',
+  80: '#e29c13',
+  90: '#b67b08',
+  100: '#83591a'
 }
 
 export const disabled = {
-	bg: grey[10],
-	border: grey[50],
-	color: grey[50]
+  bg: grey[10],
+  border: grey[50],
+  color: grey[50]
 }
 
 export default {
-	blue,
-	green,
-	grey,
-	pink,
-	prussian,
-	red,
-	yellow,
-	disabled
+  blue,
+  green,
+  grey,
+  pink,
+  prussian,
+  red,
+  yellow,
+  disabled
 }

package/src/theme/foundations/durations.ts

@@ -1,6 +1,6 @@
 export default {
-	instant: '100ms',
-	fast: '200ms',
-	normal: '300ms',
-	slow: '400ms'
+  instant: '100ms',
+  fast: '200ms',
+  normal: '300ms',
+  slow: '400ms'
 }

package/src/theme/foundations/fontSizes.ts

@@ -1,6 +1,6 @@
 export default {
-	xs: 12,
-	sm: 14,
-	md: 16,
-	lg: 18
+  xs: 12,
+  sm: 14,
+  md: 16,
+  lg: 18
 }

package/src/theme/foundations/fontWeights.ts

@@ -1,6 +1,6 @@
 export default {
-	regular: '400',
-	medium: '500',
-	demi: '600',
-	bold: '700'
+  regular: '400',
+  medium: '500',
+  demi: '600',
+  bold: '700'
 }

package/src/theme/foundations/fonts.ts

@@ -1,3 +1,3 @@
 export default {
-	avenir: `'Avenir Next', Verdana, Geneva, Tahoma, sans-serif`
+  avenir: `'Avenir Next', Verdana, Geneva, Tahoma, sans-serif`
 }

package/src/theme/foundations/gridTemplateColumns.ts

@@ -1,14 +1,14 @@
 export default {
-	1: 'repeat(1, minmax(0, 1fr))',
-	2: 'repeat(2, minmax(0, 1fr))',
-	3: 'repeat(3, minmax(0, 1fr))',
-	4: 'repeat(4, minmax(0, 1fr))',
-	5: 'repeat(5, minmax(0, 1fr))',
-	6: 'repeat(6, minmax(0, 1fr))',
-	7: 'repeat(7, minmax(0, 1fr))',
-	8: 'repeat(8, minmax(0, 1fr))',
-	9: 'repeat(9, minmax(0, 1fr))',
-	10: 'repeat(10, minmax(0, 1fr))',
-	11: 'repeat(11, minmax(0, 1fr))',
-	12: 'repeat(12, minmax(0, 1fr))'
+  1: 'repeat(1, minmax(0, 1fr))',
+  2: 'repeat(2, minmax(0, 1fr))',
+  3: 'repeat(3, minmax(0, 1fr))',
+  4: 'repeat(4, minmax(0, 1fr))',
+  5: 'repeat(5, minmax(0, 1fr))',
+  6: 'repeat(6, minmax(0, 1fr))',
+  7: 'repeat(7, minmax(0, 1fr))',
+  8: 'repeat(8, minmax(0, 1fr))',
+  9: 'repeat(9, minmax(0, 1fr))',
+  10: 'repeat(10, minmax(0, 1fr))',
+  11: 'repeat(11, minmax(0, 1fr))',
+  12: 'repeat(12, minmax(0, 1fr))'
 }

package/src/theme/foundations/gridTemplateRows.ts

@@ -1,8 +1,8 @@
 export default {
-	1: 'repeat(1, minmax(0, 1fr))',
-	2: 'repeat(2, minmax(0, 1fr))',
-	3: 'repeat(3, minmax(0, 1fr))',
-	4: 'repeat(4, minmax(0, 1fr))',
-	5: 'repeat(5, minmax(0, 1fr))',
-	6: 'repeat(6, minmax(0, 1fr))'
+  1: 'repeat(1, minmax(0, 1fr))',
+  2: 'repeat(2, minmax(0, 1fr))',
+  3: 'repeat(3, minmax(0, 1fr))',
+  4: 'repeat(4, minmax(0, 1fr))',
+  5: 'repeat(5, minmax(0, 1fr))',
+  6: 'repeat(6, minmax(0, 1fr))'
 }

package/src/theme/foundations/index.ts

@@ -20,24 +20,24 @@ import transitions from './transitions'
 import zIndices from './zIndices'
 
 export default {
-	animations,
-	borders,
-	colors,
-	durations,
-	fonts,
-	fontSizes,
-	fontWeights,
-	gridTemplateColumns,
-	gridTemplateRows,
-	radii,
-	ringWidths,
-	screens,
-	shadows,
-	sizes,
-	spaces,
-	transformers,
-	transforms,
-	transitions,
-	timingFunctions,
-	zIndices
+  animations,
+  borders,
+  colors,
+  durations,
+  fonts,
+  fontSizes,
+  fontWeights,
+  gridTemplateColumns,
+  gridTemplateRows,
+  radii,
+  ringWidths,
+  screens,
+  shadows,
+  sizes,
+  spaces,
+  transformers,
+  transforms,
+  transitions,
+  timingFunctions,
+  zIndices
 }

package/src/theme/foundations/radii.ts

@@ -1,7 +1,7 @@
 export default {
-	none: 0,
-	sm: 4,
-	md: 6,
-	lg: 10,
-	round: 9999
+  none: 0,
+  sm: 4,
+  md: 6,
+  lg: 10,
+  round: 9999
 }

package/src/theme/foundations/screens.ts

@@ -1,7 +1,7 @@
 export default {
-	xs: 0,
-	sm: 600,
-	md: 960,
-	lg: 1280,
-	xl: 1920
+  xs: 0,
+  sm: 600,
+  md: 960,
+  lg: 1280,
+  xl: 1920
 }

package/src/theme/foundations/shadows.ts

@@ -5,21 +5,21 @@ const greyLight = hexToRGBA(grey[80], 0.4)
 const greyDark = hexToRGBA(grey[80], 0.6)
 
 export default {
-	'0': `0 0 0 0 #fff`,
-	'1': `0 2px 5px 0 ${greyLight}`,
-	'2': `0 4px 12px 0 ${greyLight}`,
-	'3': `0 7px 20px 0 ${greyDark}`,
-	'4': `0 12px 30px 0 ${greyDark}`,
-	t1: `0 -2px 5px 0 ${greyLight}`,
-	t2: `0 -4px 12px 0 ${greyLight}`,
-	t3: `0 -7px 20px 0 ${greyDark}`,
-	t4: `0 -12px 30px 0 ${greyDark}`,
-	r1: `2px 0 5px 0 ${greyLight}`,
-	r2: `4px 0 12px 0 ${greyLight}`,
-	r3: `7px 0 20px 0 ${greyDark}`,
-	r4: `12px 0 30px 0 ${greyDark}`,
-	l1: `-2px 0 5px 0 ${greyLight}`,
-	l2: `-4px 0 12px 0 ${greyLight}`,
-	l3: `-7px 0 20px 0 ${greyDark}`,
-	l4: `-12px 0 30px 0 ${greyDark}`
+  '0': `0 0 0 0 #fff`,
+  '1': `0 2px 5px 0 ${greyLight}`,
+  '2': `0 4px 12px 0 ${greyLight}`,
+  '3': `0 7px 20px 0 ${greyDark}`,
+  '4': `0 12px 30px 0 ${greyDark}`,
+  t1: `0 -2px 5px 0 ${greyLight}`,
+  t2: `0 -4px 12px 0 ${greyLight}`,
+  t3: `0 -7px 20px 0 ${greyDark}`,
+  t4: `0 -12px 30px 0 ${greyDark}`,
+  r1: `2px 0 5px 0 ${greyLight}`,
+  r2: `4px 0 12px 0 ${greyLight}`,
+  r3: `7px 0 20px 0 ${greyDark}`,
+  r4: `12px 0 30px 0 ${greyDark}`,
+  l1: `-2px 0 5px 0 ${greyLight}`,
+  l2: `-4px 0 12px 0 ${greyLight}`,
+  l3: `-7px 0 20px 0 ${greyDark}`,
+  l4: `-12px 0 30px 0 ${greyDark}`
 }