@veracity/vui 1.0.0 → 1.1.1

package/src/icons/consts.ts

@@ -22,21 +22,21 @@ import { IconDefinition } from './types'
  * They are added to the icon library in order to avoid loading them from CDN.
  */
 export const defaultIcons: Record<string, IconDefinition> = {
-	cuiCheckboxIndeterminate,
-	cuiCheckboxSelected,
-	cuiCheckboxUnselected,
-	cuiRadioSelected,
-	cuiRadioUnselected,
-	fadSpinnerThird,
-	falCheck,
-	falCheckCircle,
-	falEllipsisH,
-	falEllipsisV,
-	falExclamationCircle,
-	falExclamationTriangle,
-	falInfoCircle,
-	falPlus,
-	falSpinner,
-	falTimes,
-	falTimesCircle
+  cuiCheckboxIndeterminate,
+  cuiCheckboxSelected,
+  cuiCheckboxUnselected,
+  cuiRadioSelected,
+  cuiRadioUnselected,
+  fadSpinnerThird,
+  falCheck,
+  falCheckCircle,
+  falEllipsisH,
+  falEllipsisV,
+  falExclamationCircle,
+  falExclamationTriangle,
+  falInfoCircle,
+  falPlus,
+  falSpinner,
+  falTimes,
+  falTimesCircle
 }

package/src/icons/types.ts

@@ -6,23 +6,23 @@ import { BaseIcon } from './baseIcons/types'
 
 /** Object defining a custom icon. */
 export type IconDefinition = {
-	/** Icon details including height, width and 'd' attribute. */
-	details: IconDetails
-	/** Name of the icon used internally. */
-	name: string
-	/** Props object or array of objects passed to the path elements. */
-	pathProps?: React.SVGProps<SVGPathElement> | React.SVGProps<SVGPathElement>[]
-	/** Props object passed to the svg element. */
-	svgProps?: PropsOf<typeof Svg>
+  /** Icon details including height, width and 'd' attribute. */
+  details: IconDetails
+  /** Name of the icon used internally. */
+  name: string
+  /** Props object or array of objects passed to the path elements. */
+  pathProps?: React.SVGProps<SVGPathElement> | React.SVGProps<SVGPathElement>[]
+  /** Props object passed to the svg element. */
+  svgProps?: PropsOf<typeof Svg>
 }
 
 /** Icon definition following Font Awesome standard. */
 export type IconDetails = [
-	number, // width
-	number, // height
-	string[], // ligatures
-	string, // unicode
-	string | string[] // svgPathData
+  number, // width
+  number, // height
+  string[], // ligatures
+  string, // unicode
+  string | string[] // svgPathData
 ]
 
 export type VuiIcon = keyof VuiIcons

package/src/image/image.tsx

@@ -5,19 +5,17 @@ import { cs } from '../utils'
 import { ImageProps } from './image.types'
 
 export const ImageBase = styled.imgBox`
-	height: auto;
-	object-fit: cover;
-	width: 100%;
+  height: auto;
+  object-fit: cover;
+  width: 100%;
 `
 
 /** Displays an image. Includes base styling. */
 export const Image = vui<'img', ImageProps>((props, ref) => {
-	const { className, ...rest } = omitThemingProps(props)
-	const styles = useStyleConfig('Image', props)
+  const { className, ...rest } = omitThemingProps(props)
+  const styles = useStyleConfig('Image', props)
 
-	return <ImageBase className={cs('vui-image', className)} ref={ref} {...styles} {...rest} />
+  return <ImageBase className={cs('vui-image', className)} ref={ref} {...styles} {...rest} />
 })
 
-Image.displayName = 'Image'
-
 export default Image

package/src/image/image.types.ts

@@ -2,7 +2,7 @@ import { SystemProps } from '../system'
 import { ThemingProps } from '../theme'
 
 export type ImageProps = SystemProps &
-	ThemingProps<'Image'> & {
-		/** Children are disabled for this component. */
-		children?: never
-	}
+  ThemingProps<'Image'> & {
+    /** Children are disabled for this component. */
+    children?: never
+  }

package/src/image/theme.ts

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

package/src/index.ts

@@ -25,6 +25,7 @@ export * from './pagination'
 export * from './panel'
 export * from './popover'
 export * from './portal'
+export * from './progress'
 export * from './radio'
 export * from './select'
 export * from './skeleton'
@@ -34,7 +35,9 @@ export * from './switch'
 export * from './system'
 export * from './t'
 export * from './toast'
+export * from './tooltip'
 export * from './table'
+export * from './tabs'
 export * from './tag'
 export * from './textarea'
 export * from './theme'

package/src/input/consts.ts

@@ -1,26 +1,26 @@
 import { InputStateMapping } from './input.types'
 
 export const inputStateMapping: InputStateMapping = {
-	error: {
-		colorScheme: 'red',
-		iconProps: {
-			color: 'red.80',
-			icon: 'falExclamationTriangle'
-		}
-	},
-	loading: {
-		colorScheme: 'grey',
-		iconProps: {
-			animation: 'vui-spin 0.6s linear infinite',
-			name: 'fadSpinnerThird',
-			pathFill: ['blue.20', 'blue.50']
-		}
-	},
-	success: {
-		colorScheme: 'green',
-		iconProps: {
-			color: 'green.80',
-			icon: 'falCheck'
-		}
-	}
+  error: {
+    colorScheme: 'red',
+    iconProps: {
+      color: 'red.80',
+      icon: 'falExclamationTriangle'
+    }
+  },
+  loading: {
+    colorScheme: 'grey',
+    iconProps: {
+      animation: 'vui-spin 0.6s linear infinite',
+      name: 'fadSpinnerThird',
+      pathFill: ['blue.20', 'blue.50']
+    }
+  },
+  success: {
+    colorScheme: 'green',
+    iconProps: {
+      color: 'green.80',
+      icon: 'falCheck'
+    }
+  }
 }

package/src/input/helpers.ts

@@ -2,7 +2,7 @@ import { InputProps } from './input.types'
 
 /** Returns length of the initial input's value. */
 export function getInitialCount(props: InputProps) {
-	const { defaultValue, value } = props
+  const { defaultValue, value } = props
 
-	return defaultValue?.toString().length ?? value?.toString().length ?? 0
+  return defaultValue?.toString().length ?? value?.toString().length ?? 0
 }

package/src/input/input.tsx

@@ -11,22 +11,22 @@ import InputIcon from './inputIcon'
 import InputInput from './inputInput'
 
 export const InputBase = styled.divBox`
-	align-items: center;
-	background-color: white;
-	border-radius: md;
-	border-width: 1px;
-	display: flex;
-	flex-shrink: 0;
-	outline: none;
-	position: relative;
-	transition-duration: fast;
-	width: 100%;
-
-	&[aria-disabled='true'] {
-		background-color: disabled.bg;
-		color: disabled.color;
-		cursor: not-allowed;
-	}
+  align-items: center;
+  background-color: white;
+  border-radius: md;
+  border-width: 1px;
+  display: flex;
+  flex-shrink: 0;
+  outline: none;
+  position: relative;
+  transition-duration: fast;
+  width: 100%;
+
+  &[aria-disabled='true'] {
+    background-color: disabled.bg;
+    color: disabled.color;
+    cursor: not-allowed;
+  }
 `
 
 /**
@@ -35,125 +35,123 @@ export const InputBase = styled.divBox`
  * Exposes some props to the children via context.
  */
 export const Input = vui<'div', InputProps>((props, ref) => {
-	const [count, setCount] = useState(getInitialCount(props))
-	const {
-		autoComplete,
-		autoFocus,
-		children,
-		className,
-		colorScheme,
-		defaultValue,
-		disabled,
-		iconLeft,
-		iconRight,
-		id,
-		input,
-		inputProps,
-		inputRef,
-		isInvalid,
-		itemLeft,
-		itemRight,
-		max,
-		maxLength,
-		min,
-		name,
-		onBlur,
-		onChange: onChangeProp,
-		onFocus,
-		pattern,
-		placeholder,
-		readOnly,
-		required,
-		showCount,
-		size,
-		state = '',
-		stateMapping,
-		step,
-		type = 'text',
-		value,
-		variant,
-		...rest
-	} = props
-	const states = { ...inputStateMapping, ...stateMapping }
-	const computedColorScheme = filterUndefined({
-		colorScheme: colorScheme ?? (isInvalid ? 'red' : undefined) ?? states[state]?.colorScheme
-	})
-
-	const styles = useStyleConfig('Input', { ...computedColorScheme, ...props })
-
-	const context = useMemo(
-		() => filterUndefined({ colorScheme, disabled, size, variant }),
-		[colorScheme, disabled, size, variant]
-	)
-
-	function onChange(e: ChangeEvent) {
-		setCount(e.target.value.length)
-		onChangeProp?.(e)
-	}
-
-	const aliasedProps = filterUndefined({
-		'aria-disabled': disabled,
-		bg: readOnly ? 'grey.10' : undefined,
-		focusWithinBorderColor: !readOnly ? 'transparent' : undefined,
-		focusWithinRingColor: readOnly ? 'transparent' : undefined
-	})
-
-	return (
-		<InputProvider value={context}>
-			<InputBase className={cs('vui-input', className)} ref={ref} {...styles.container} {...aliasedProps} {...rest}>
-				{itemLeft}
-
-				{isString(iconLeft) ? <InputIcon ml={1} name={iconLeft} /> : iconLeft}
-
-				{children ?? input ?? (
-					<InputInput
-						ref={inputRef}
-						{...{
-							autoComplete,
-							autoFocus,
-							defaultValue,
-							disabled,
-							id,
-							max,
-							maxLength,
-							min,
-							name,
-							onBlur,
-							onChange,
-							onFocus,
-							pattern,
-							placeholder,
-							readOnly,
-							required,
-							step,
-							type,
-							value
-						}}
-						{...inputProps}
-					/>
-				)}
-
-				{isString(iconRight) ? <InputIcon mr={1} name={iconRight} /> : iconRight}
-
-				{itemRight}
-
-				{state && <InputIcon mr={1} {...states[state]?.iconProps} />}
-
-				{showCount && (
-					<T className="vui-inputCount" color="grey.80" position="absolute" right={0} size="sm" top="calc(100% + 1px)">
-						{count} / {maxLength}
-					</T>
-				)}
-			</InputBase>
-		</InputProvider>
-	)
+  const [count, setCount] = useState(getInitialCount(props))
+  const {
+    autoComplete,
+    autoFocus,
+    children,
+    className,
+    colorScheme,
+    defaultValue,
+    disabled,
+    iconLeft,
+    iconRight,
+    id,
+    input,
+    inputProps,
+    inputRef,
+    isInvalid,
+    itemLeft,
+    itemRight,
+    max,
+    maxLength,
+    min,
+    name,
+    onBlur,
+    onChange: onChangeProp,
+    onFocus,
+    pattern,
+    placeholder,
+    readOnly,
+    required,
+    showCount,
+    size,
+    state = '',
+    stateMapping,
+    step,
+    type = 'text',
+    value,
+    variant,
+    ...rest
+  } = props
+  const states = { ...inputStateMapping, ...stateMapping }
+  const computedColorScheme = filterUndefined({
+    colorScheme: colorScheme ?? (isInvalid ? 'red' : undefined) ?? states[state]?.colorScheme
+  })
+
+  const styles = useStyleConfig('Input', { ...computedColorScheme, ...props })
+
+  const context = useMemo(
+    () => filterUndefined({ colorScheme, disabled, size, variant }),
+    [colorScheme, disabled, size, variant]
+  )
+
+  function onChange(e: ChangeEvent) {
+    setCount(e.target.value.length)
+    onChangeProp?.(e)
+  }
+
+  const aliasedProps = filterUndefined({
+    'aria-disabled': disabled,
+    bg: readOnly ? 'grey.10' : undefined,
+    focusWithinBorderColor: !readOnly ? 'transparent' : undefined,
+    focusWithinRingColor: readOnly ? 'transparent' : undefined
+  })
+
+  return (
+    <InputProvider value={context}>
+      <InputBase className={cs('vui-input', className)} ref={ref} {...styles.container} {...aliasedProps} {...rest}>
+        {itemLeft}
+
+        {isString(iconLeft) ? <InputIcon ml={1} name={iconLeft} /> : iconLeft}
+
+        {children ?? input ?? (
+          <InputInput
+            ref={inputRef}
+            {...{
+              autoComplete,
+              autoFocus,
+              defaultValue,
+              disabled,
+              id,
+              max,
+              maxLength,
+              min,
+              name,
+              onBlur,
+              onChange,
+              onFocus,
+              pattern,
+              placeholder,
+              readOnly,
+              required,
+              step,
+              type,
+              value
+            }}
+            {...inputProps}
+          />
+        )}
+
+        {isString(iconRight) ? <InputIcon mr={1} name={iconRight} /> : iconRight}
+
+        {itemRight}
+
+        {state && <InputIcon mr={1} {...states[state]?.iconProps} />}
+
+        {showCount && (
+          <T className="vui-inputCount" color="grey.80" position="absolute" right={0} size="sm" top="calc(100% + 1px)">
+            {count} / {maxLength}
+          </T>
+        )}
+      </InputBase>
+    </InputProvider>
+  )
 }) as VuiComponent<'div', InputProps> & {
-	Icon: typeof InputIcon
-	Input: typeof InputInput
+  Icon: typeof InputIcon
+  Input: typeof InputInput
 }
 
-// Input.displayName = 'Input'
-
 Input.Icon = InputIcon
 Input.Input = InputInput
 

package/src/input/input.types.ts

@@ -6,90 +6,90 @@ import { ChangeEventHandler, FocusEventHandler, PropsOf } from '../utils'
 export type InputInputProps = PropsOf<'input', SystemProps>
 
 export type InputProps = SystemProps &
-	ThemingProps<'Input'> & {
-		/** Passed to the inner input. */
-		autoComplete?: string
-		/** Passed to the inner input. */
-		autoFocus?: boolean
-		/** Available theme colors for this component. @default grey */
-		colorScheme?: 'green' | 'grey' | 'red'
-		/** Passed to the inner input. */
-		defaultValue?: number | string
-		/** Passed to the inner input. */
-		disabled?: boolean
-		/** Socket displaying an icon on the left. */
-		iconLeft?: IconProp | JSX.Element
-		/** Socket displaying an icon on the right. */
-		iconRight?: IconProp | JSX.Element
-		/** Socket rendering a custom input element. */
-		input?: React.ReactNode
-		/** Props object passed to the inner input. */
-		inputProps?: InputInputProps
-		/** Ref passed to the inner input. */
-		inputRef?: React.MutableRefObject<HTMLInputElement | null> | null
-		/** Styles the input in invalid state. */
-		isInvalid?: boolean
-		/** Socket displaying a custom element on the left. */
-		itemLeft?: React.ReactNode
-		/** Socket displaying a custom element on the right. */
-		itemRight?: React.ReactNode
-		/** Passed to the inner input. */
-		max?: number | string
-		/** Passed to the inner input. */
-		maxLength?: number
-		/** Passed to the inner input. */
-		min?: number | string
-		/** Passed to the inner input. */
-		name?: string
-		/** Passed to the inner input. */
-		onBlur?: FocusEventHandler
-		/** Passed to the inner input. */
-		onChange?: ChangeEventHandler
-		/** Passed to the inner input. */
-		onFocus?: FocusEventHandler
-		/** Passed to the inner input. */
-		pattern?: string
-		/** Passed to the inner input. */
-		placeholder?: string
-		/** Passed to the inner input. */
-		readOnly?: boolean
-		/** Passed to the inner input. */
-		required?: boolean
-		/** Displays length of input value if also using maxLength. */
-		showCount?: boolean
-		/** Modifies Input style and content based on the given state. */
-		state?: InputState
-		/** Object definition of styles and content for each state. */
-		stateMapping?: InputStateMapping
-		/** Passed to the inner input. */
-		step?: number | string
-		/** Passed to the inner input. */
-		type?: InputType
-		/** Passed to the inner input. */
-		value?: number | string
-	}
+  ThemingProps<'Input'> & {
+    /** Passed to the inner input. */
+    autoComplete?: string
+    /** Passed to the inner input. */
+    autoFocus?: boolean
+    /** Available theme colors for this component. @default grey */
+    colorScheme?: 'green' | 'grey' | 'red'
+    /** Passed to the inner input. */
+    defaultValue?: number | string
+    /** Passed to the inner input. */
+    disabled?: boolean
+    /** Socket displaying an icon on the left. */
+    iconLeft?: IconProp | JSX.Element
+    /** Socket displaying an icon on the right. */
+    iconRight?: IconProp | JSX.Element
+    /** Socket rendering a custom input element. */
+    input?: React.ReactNode
+    /** Props object passed to the inner input. */
+    inputProps?: InputInputProps
+    /** Ref passed to the inner input. */
+    inputRef?: React.MutableRefObject<HTMLInputElement | null> | null
+    /** Styles the input in invalid state. */
+    isInvalid?: boolean
+    /** Socket displaying a custom element on the left. */
+    itemLeft?: React.ReactNode
+    /** Socket displaying a custom element on the right. */
+    itemRight?: React.ReactNode
+    /** Passed to the inner input. */
+    max?: number | string
+    /** Passed to the inner input. */
+    maxLength?: number
+    /** Passed to the inner input. */
+    min?: number | string
+    /** Passed to the inner input. */
+    name?: string
+    /** Passed to the inner input. */
+    onBlur?: FocusEventHandler
+    /** Passed to the inner input. */
+    onChange?: ChangeEventHandler
+    /** Passed to the inner input. */
+    onFocus?: FocusEventHandler
+    /** Passed to the inner input. */
+    pattern?: string
+    /** Passed to the inner input. */
+    placeholder?: string
+    /** Passed to the inner input. */
+    readOnly?: boolean
+    /** Passed to the inner input. */
+    required?: boolean
+    /** Displays length of input value if also using maxLength. */
+    showCount?: boolean
+    /** Modifies Input style and content based on the given state. */
+    state?: InputState
+    /** Object definition of styles and content for each state. */
+    stateMapping?: InputStateMapping
+    /** Passed to the inner input. */
+    step?: number | string
+    /** Passed to the inner input. */
+    type?: InputType
+    /** Passed to the inner input. */
+    value?: number | string
+  }
 
 export type InputState = 'default' | 'error' | 'loading' | 'success'
 
 export type InputStateMapping = Record<
-	string,
-	{
-		colorScheme?: InputProps['colorScheme']
-		iconProps: IconProps
-	}
+  string,
+  {
+    colorScheme?: InputProps['colorScheme']
+    iconProps: IconProps
+  }
 >
 
 export type InputType =
-	| 'date'
-	| 'datetime-local'
-	| 'email'
-	| 'hidden'
-	| 'month'
-	| 'number'
-	| 'password'
-	| 'search'
-	| 'tel'
-	| 'text'
-	| 'time'
-	| 'url'
-	| 'week'
+  | 'date'
+  | 'datetime-local'
+  | 'email'
+  | 'hidden'
+  | 'month'
+  | 'number'
+  | 'password'
+  | 'search'
+  | 'tel'
+  | 'text'
+  | 'time'
+  | 'url'
+  | 'week'