@veracity/vui 2.0.6 → 2.2.0

package/src/input/consts.ts

@@ -1,30 +1,45 @@
 import { InputStateMapping } from './input.types'
 
-export const greyLightColor = 'warmGrey.90'
-export const greyColor = 'sandstone.60'
-export const redColor = 'energyRed.45'
+export const inputColors = {
+  border: 'sandstone.60',
+  placeholder: 'sandstone.55',
+  inputText: 'sandstone.10',
+  helpText: 'sandstone.30',
+  icons: 'seaBlue.28',
+  disabled: 'sandstone.95',
+  focus: 'seaBlue.28',
+  error: 'energyRed.45',
+  loading: 'seaBlue.70',
+  success: 'landGreen.41'
+}
+
+export const stateIcons = {
+  error: 'falExclamationTriangle',
+  loading: 'fadSpinnerThird',
+  success: 'falCheck'
+}
 
 export const inputStateMapping: InputStateMapping = {
   error: {
-    colorScheme: 'red',
+    variant: 'red',
     iconProps: {
-      color: 'energyRed.45',
-      icon: 'falExclamationTriangle'
+      color: inputColors.error,
+      icon: stateIcons.error
     }
   },
   loading: {
-    colorScheme: 'grey',
+    variant: 'grey',
     iconProps: {
       animation: 'vui-spin 0.6s linear infinite',
-      name: 'fadSpinnerThird',
-      pathFill: ['seaBlue.90', 'seaBlue.28']
+      name: stateIcons.loading,
+      pathFill: [inputColors.loading, inputColors.icons]
     }
   },
   success: {
-    colorScheme: 'green',
+    variant: 'green',
     iconProps: {
-      color: 'landGreen.30',
-      icon: 'falCheck'
+      color: inputColors.success,
+      icon: stateIcons.success
     }
   }
 }

package/src/input/helpText.tsx

@@ -4,7 +4,7 @@ import { useStyleConfig, vui } from '../core'
 import Icon from '../icon'
 import P from '../p'
 import { cs } from '../utils'
-import { greyColor, redColor } from './consts'
+import { inputColors } from './consts'
 import { useInputContext } from './context'
 import { HelpTextProps } from './input.types'
 
@@ -15,7 +15,7 @@ export const HelpText = vui<'div', HelpTextProps>((props, ref) => {
   const mergedProps = { ...inputProps, ...props }
   const styles = useStyleConfig('Input', mergedProps)
 
-  const color = isError ? redColor : greyColor
+  const color = isError ? inputColors.error : inputColors.helpText
 
   return (
     <P
@@ -27,7 +27,7 @@ export const HelpText = vui<'div', HelpTextProps>((props, ref) => {
       {...styles.helpText}
       {...rest}
     >
-      {isError && <Icon mr={1} name="falExclamationTriangle" pathFill={redColor} size="sm" />}
+      {isError && <Icon mr={1} name="falExclamationTriangle" pathFill={inputColors.error} size="sm" />}
       {children}
     </P>
   )

package/src/input/input.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useMemo, useState } from 'react'
 import { styled, useStyleConfig, vui, VuiComponent } from '../core'
 import { T } from '../t'
 import { ChangeEvent, cs, filterUndefined, isString } from '../utils'
-import { greyColor, greyLightColor, inputStateMapping, redColor } from './consts'
+import { inputColors, inputStateMapping } from './consts'
 import { InputProvider } from './context'
 import { getInitialCount } from './helpers'
 import HelpText from './helpText'
@@ -40,7 +40,6 @@ export const Input = vui<'div', InputProps>((props, ref) => {
     autoFocus,
     children,
     className,
-    colorScheme,
     defaultValue,
     disabled,
     errorText,
@@ -50,7 +49,6 @@ export const Input = vui<'div', InputProps>((props, ref) => {
     input,
     inputProps,
     inputRef,
-    isInvalid,
     itemLeft,
     itemRight,
     helpText,
@@ -80,16 +78,9 @@ export const Input = vui<'div', InputProps>((props, ref) => {
   const [valueInternal, setValueInternal] = useState(defaultValue || '')
   const states = { ...inputStateMapping, ...stateMapping }
 
-  const computedColorScheme = filterUndefined({
-    colorScheme: colorScheme ?? (isInvalid ? 'red' : undefined) ?? states[state]?.colorScheme
-  })
-
-  const styles = useStyleConfig('Input', { ...computedColorScheme, ...props })
+  const styles = useStyleConfig('Input', props)
 
-  const context = useMemo(
-    () => filterUndefined({ colorScheme, disabled, size, variant }),
-    [colorScheme, disabled, size, variant]
-  )
+  const context = useMemo(() => filterUndefined({ disabled, size, variant }), [disabled, size, variant])
 
   function onChange(e: ChangeEvent) {
     setValueInternal(e.target.value)
@@ -99,7 +90,7 @@ export const Input = vui<'div', InputProps>((props, ref) => {
 
   const aliasedProps = filterUndefined({
     'aria-disabled': disabled,
-    bg: readOnly ? greyLightColor : undefined,
+    bg: readOnly ? inputColors.disabled : undefined,
     focusWithinBorderColor: !readOnly ? 'transparent' : undefined,
     focusWithinRingColor: readOnly ? 'transparent' : undefined
   })
@@ -147,7 +138,7 @@ export const Input = vui<'div', InputProps>((props, ref) => {
         {showCount && (
           <T
             className="vui-inputCount"
-            color={maxLength && count > maxLength ? redColor : greyColor}
+            color={maxLength && count > maxLength ? inputColors.error : inputColors.helpText}
             position="absolute"
             right={0}
             size="sm"

package/src/input/input.types.ts

@@ -14,7 +14,7 @@ export type InputProps = SystemProps &
     autoComplete?: string
     /** Passed to the inner input. */
     autoFocus?: boolean
-    /** Available theme colors for this component. @default grey */
+    /** Deprecated. Please use variant instead. @deprecated  */
     colorScheme?: 'green' | 'grey' | 'red'
     /** Passed to the inner input. */
     defaultValue?: number | string
@@ -32,7 +32,7 @@ export type InputProps = SystemProps &
     inputProps?: InputInputProps
     /** Ref passed to the inner input. */
     inputRef?: React.MutableRefObject<HTMLInputElement | null> | null
-    /** Styles the input in invalid state. */
+    /** Deprecated. Please use variant="red" and/or state="error" instead. @deprecated*/
     isInvalid?: boolean
     /** Socket displaying a custom element on the left. */
     itemLeft?: React.ReactNode
@@ -41,11 +41,11 @@ export type InputProps = SystemProps &
     /** Socket displaying help text bellow an input. */
     helpText?: React.ReactNode | string
     /** Passed to the inner input. */
-    max?: number | string
+    max?: number
     /** Passed to the inner input. */
     maxLength?: number
     /** Passed to the inner input. */
-    min?: number | string
+    min?: number
     /** Passed to the inner input. */
     name?: string
     /** Passed to the inner input. */
@@ -69,7 +69,7 @@ export type InputProps = SystemProps &
     /** Object definition of styles and content for each state. */
     stateMapping?: InputStateMapping
     /** Passed to the inner input. */
-    step?: number | string
+    step?: number
     /** Passed to the inner input. */
     type?: InputType
     /** Passed to the inner input. */
@@ -85,7 +85,7 @@ export type InputState = 'default' | 'error' | 'loading' | 'success'
 export type InputStateMapping = Record<
   string,
   {
-    colorScheme?: InputProps['colorScheme']
+    variant?: InputProps['variant']
     iconProps: IconProps
   }
 >

package/src/input/inputIcon.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 import { useStyleConfig, vui } from '../core'
 import Icon, { IconProps } from '../icon'
 import { cs } from '../utils'
+import { inputColors } from './consts'
 import { useInputContext } from './context'
 
 /** Displays an icon within the Input. */
@@ -12,7 +13,7 @@ export const InputIcon = vui<'svg', IconProps>((props, ref) => {
   const mergedProps = { ...inputProps, ...props }
   const styles = useStyleConfig('Input', mergedProps)
 
-  const color = !mergedProps.disabled ? 'blue.80' : 'grey.50'
+  const color = !mergedProps.disabled ? inputColors.icons : inputColors.placeholder
 
   return <Icon className={cs('vui-inputIcon', className)} color={color} ref={ref} {...styles.icon} {...rest} />
 })

package/src/input/theme.ts

@@ -1,37 +1,24 @@
-import { Dict } from '../utils'
+import { inputColors } from './consts'
 
-function variantDefault(props: Dict) {
-  const { colorScheme: c } = props
-
-  const container = {
-    borderColor: `${c}.80`,
+const baseStyle = {
+  container: {
     focusWithinRing: 2,
-    focusWithinRingColor: `${c}.80`
-  }
-
-  if (c === 'grey') {
-    container.borderColor = `${c}.60`
-    container.focusWithinRingColor = 'blue.50'
+    color: inputColors.inputText
+  },
+  input: {
+    color: { placeholder: inputColors.placeholder }
   }
-
-  const icon = {}
-  const input = {}
-
-  return { container, icon, input }
 }
 
-const baseStyle = {}
-
 const defaultProps = {
-  colorScheme: 'grey',
-  size: 'md',
-  variant: 'default'
+  size: 'lg',
+  variant: 'grey'
 }
 
 const parts = ['container', 'icon', 'input']
 
 const sizes = {
-  xs: {
+  sm: {
     container: {
       fontSize: 'sm',
       h: 24
@@ -41,7 +28,7 @@ const sizes = {
     },
     input: {}
   },
-  sm: {
+  md: {
     container: {
       fontSize: 'sm',
       h: 32
@@ -51,7 +38,7 @@ const sizes = {
     },
     input: {}
   },
-  md: {
+  lg: {
     container: {
       fontSize: 'md',
       h: 40
@@ -61,7 +48,7 @@ const sizes = {
     },
     input: {}
   },
-  lg: {
+  xl: {
     container: {
       fontSize: 'lg',
       h: 48
@@ -74,7 +61,24 @@ const sizes = {
 }
 
 const variants = {
-  default: variantDefault
+  grey: {
+    container: {
+      borderColor: inputColors.border,
+      focusWithinRingColor: inputColors.focus
+    }
+  },
+  green: {
+    container: {
+      borderColor: inputColors.success,
+      focusWithinRingColor: inputColors.success
+    }
+  },
+  red: {
+    container: {
+      borderColor: inputColors.error,
+      focusWithinRingColor: inputColors.error
+    }
+  }
 }
 
 export default {

package/src/pagination/paginationButton.tsx

@@ -15,17 +15,13 @@ export const PaginationButton = vui<'button', PaginationButtonProps>((props, ref
   const isActive = isActiveProp ?? pageProp === page
   const activeProps = isActive
     ? {
-        bg: 'blue.20',
-        color: 'blue.80',
-        hoverBg: 'blue.30',
-        activeBg: 'blue.40'
+        bg: 'skyBlue.85'
       }
     : {}
 
   return (
     <Button
       className={cs('vui-paginationButton', className)}
-      minW={0}
       onClick={() => onPageChange(pageProp)}
       ref={ref}
       size="sm"

package/src/pagination/paginationEllipsis.tsx

@@ -19,7 +19,7 @@ export const PaginationEllipsis = vui<'span', BoxProps>((props, ref) => {
       {...styles.ellipsis}
       {...rest}
     >
-      {children ?? '...'}
+      {children ?? '…'}
     </Box>
   )
 })

package/src/pagination/paginationGoToPage.tsx

@@ -30,7 +30,7 @@ export const PaginationGoToPage = vui<'div', BoxProps>((props, ref) => {
       {...rest}
     >
       <T size="sm" weight="medium">
-        Go to
+        Go&nbsp;to
       </T>
       <Input max={pageCount} min={1} mx={1} onChange={onChange} size="sm" type="number" w={56} />
       <T size="sm" weight="medium">

package/src/pagination/paginationPrevNext.tsx

@@ -16,7 +16,7 @@ export const PaginationPrevNext = vui<'button', PaginationPrevNextProps>((props,
   const pageChange = isPrev ? -1 : 1
   const directionProps = {
     disabled: isPrev ? page === 1 : page === pageCount,
-    icon: isPrev ? 'falAngleLeft' : 'falAngleRight',
+    icon: `falAngle${isPrev ? 'Left' : 'Right'}`,
     onClick: () => onPageChange(page + pageChange)
   }
 

package/src/pagination/paginationResults.tsx

@@ -12,15 +12,7 @@ export const PaginationResults = vui<'span', TProps>((props, ref) => {
   const styles = useStyleConfig('Pagination', usePaginationContext())
 
   return (
-    <T
-      className={cs('vui-paginationResults', className)}
-      color="grey.80"
-      ref={ref}
-      size="sm"
-      weight="medium"
-      {...styles.results}
-      {...rest}
-    >
+    <T className={cs('vui-paginationResults', className)} ref={ref} size="sm" {...styles.results} {...rest}>
       {children ?? `Showing ${rangeStart} to ${rangeEnd} of ${count} results.`}
     </T>
   )

package/src/pagination/theme.ts

@@ -1,4 +1,25 @@
-const baseStyle = {}
+const base = {
+  bg: 'transparent',
+  border: 'none',
+  color: 'darkBlue.18'
+}
+
+const baseStyle = {
+  button: {
+    ...base,
+    color: 'seaBlue.28',
+    hoverBg: 'skyBlue.80',
+    minW: 24
+  },
+  ellipsis: { ...base },
+  goToPage: { ...base },
+  prevNext: {
+    ...base
+  },
+  results: {
+    color: 'sandstone.30'
+  }
+}
 
 const defaultProps = {}
 

package/src/skeleton/skeleton.types.ts

@@ -5,7 +5,7 @@ export type SkeletonProps = SystemProps &
   ThemingProps<'Skeleton'> & {
     /** Children are disabled for this component. */
     children?: never
-    /** Available theme colors for this component. @default blue */
+    /** Available theme colors for this component. @deprecated */
     colorScheme?: 'blue' | 'grey'
     /** Displays given amount of skeleton elements. */
     repeat?: number

package/src/skeleton/theme.ts

@@ -1,32 +1,8 @@
-import { Dict } from '../utils'
-
-function variantCircle(props: Dict) {
-  const { colorScheme: c } = props
-
-  const styles = {
-    borderRadius: '50%',
-    bg: `${c}.20`
-  }
-
-  return styles
-}
-
-function variantRectangle(props: Dict) {
-  const { colorScheme: c } = props
-
-  const styles = {
-    borderRadius: 'md',
-    bg: `${c}.20`,
-    w: '100%'
-  }
-
-  return styles
+const baseStyle = {
+  bg: 'skyBlue.95'
 }
 
-const baseStyle = {}
-
 const defaultProps = {
-  colorScheme: 'blue',
   size: 'md',
   variant: 'rect'
 }
@@ -47,8 +23,13 @@ const sizes = {
 }
 
 const variants = {
-  circle: variantCircle,
-  rect: variantRectangle
+  circle: {
+    borderRadius: '50%'
+  },
+  rect: {
+    borderRadius: 'md',
+    w: '100%'
+  }
 }
 
 export default {

package/src/tag/tag.tsx

@@ -26,13 +26,11 @@ export const TagBase = styled.spanBox`
   }
 
   &[aria-disabled='true'] {
-    background-color: disabled .bg;
-    color: disabled .color;
+    opacity: 0.5;
     cursor: not-allowed;
     user-select: none;
   }
 `
-
 /**
  * Displays text, icons or custom content. Can be made interactive or a link.
  * Exposes some props to the children via context.
@@ -121,7 +119,7 @@ export const Tag = vui<'span', TagProps>((props, ref) => {
 
             {isString(iconRight) ? <TagIcon ml={spaceX} name={iconRight} /> : iconRight}
 
-            {onDelete ? <TagButton isRound={isRound} ml={spaceX} onClick={onDelete} /> : itemRight}
+            {onDelete ? <TagButton disabled={disabled} isRound={isRound} ml={spaceX} onClick={onDelete} /> : itemRight}
           </>
         )}
       </TagBase>

package/src/tag/theme.ts

@@ -2,7 +2,8 @@ const baseStyle = {}
 
 const defaultProps = {
   size: 'md',
-  variant: 'subtleBlue'
+  variant: 'subtleBlue',
+  fontWeight: 'medium'
 }
 
 const parts = ['container', 'button', 'icon', 'text']
@@ -66,18 +67,18 @@ const sizes = {
 const variants = {
   subtleGrey: {
     container: {
-      bg: 'sandstone.95',
-      hoverBg: 'sandstone.90',
-      borderColor: 'sandstone.90',
+      bg: 'sandstone.90',
+      hoverBg: 'sandstone.85',
+      borderColor: 'sandstone.85',
       color: 'sandstone.20',
-      activeBg: 'sandstone.85'
+      activeBg: 'sandstone.79'
     },
     button: {
       bg: 'transparent',
-      hoverBg: 'sandstone.90',
+      hoverBg: 'sandstone.85',
       hoverBorderColor: 'transparent',
       color: 'sandstone.20',
-      activeBg: 'sandstone.85'
+      activeBg: 'sandstone.79'
     }
   },
   subtleBlue: {
@@ -198,10 +199,10 @@ const variants = {
   },
   solidYellow: {
     container: {
-      bg: 'sunflower.65',
+      bg: 'sunflower.50',
       hoverBg: 'sunflower.80',
       activeBg: 'sunflower.85',
-      borderColor: 'sunflower.65',
+      borderColor: 'sunflower.50',
       color: 'sunflower.15'
     },
     button: {

package/src/theme/components.ts

@@ -38,6 +38,7 @@ import Table from '../table/theme'
 import Tabs from '../tabs/theme'
 import Tag from '../tag/theme'
 import Textarea from '../textarea/theme'
+import Tree from '../tree/theme'
 
 export default {
   Accordion,
@@ -79,5 +80,6 @@ export default {
   Table,
   Tabs,
   Tag,
-  Textarea
+  Textarea,
+  Tree
 }

package/src/tooltip/tooltip.tsx

@@ -49,7 +49,7 @@ export const Tooltip = (props: TooltipProps) => {
             {!!linkText && (
               <>
                 &nbsp;
-                <Link variant="light" {...linkProps}>
+                <Link variant="white" {...linkProps}>
                   {linkText}
                 </Link>
               </>

package/src/tooltip/tooltipContent.tsx

@@ -4,24 +4,20 @@ import Box from '../box'
 import { color } from './tooltip.setup'
 import { TooltipProps } from './tooltip.types'
 
-export const TooltipContent = (props: TooltipProps) => {
-  const { children, fontSize = '16px', maxWidth = '400px' } = props
-  return (
-    <Box
-      bg={color}
-      borderRadius="md"
-      boxShadow="2"
-      className="vui-tooltip-content"
-      color="white"
-      fontSize={fontSize}
-      m={1}
-      maxW={maxWidth}
-      overflowY="auto"
-      p={1}
-      pl={2}
-      pr={2}
-    >
-      {children}
-    </Box>
-  )
-}
+export const TooltipContent = ({ children, fontSize = '16px', maxWidth = '400px' }: TooltipProps) => (
+  <Box
+    bg={color}
+    boxShadow="2"
+    className="vui-tooltip-content"
+    color="white"
+    fontSize={fontSize}
+    m={1}
+    maxW={maxWidth}
+    overflowY="auto"
+    p={1}
+    pl={2}
+    pr={2}
+  >
+    {children}
+  </Box>
+)

package/src/tree/context.ts

@@ -0,0 +1,5 @@
+import { createContext, Dict } from '../utils'
+
+const [TreeProvider, useTreeContext] = createContext<Dict>({ isOptional: true })
+
+export { TreeProvider, useTreeContext }

package/src/tree/index.ts

@@ -0,0 +1,7 @@
+export * from './context'
+export * from './tree'
+export { default } from './tree'
+export * from './tree.types'
+export * from './treeIcon'
+export * from './treeItem'
+export * from './treeText'