@veracity/vui 1.0.0 → 1.1.0

package/src/tag/tag.types.ts

@@ -3,33 +3,33 @@ import { SystemProps, TypographyProps } from '../system'
 import { ThemingProps } from '../theme'
 
 export type TagProps = SystemProps &
-	ThemingProps<'Tag'> & {
-		/** Alias for textTransform prop. @deprecated */
-		casing?: TypographyProps['textTransform']
-		/** Available theme colors for this component. @default blue */
-		colorScheme?: 'blue' | 'green' | 'grey' | 'prussian' | 'red' | 'yellow'
-		/** Displays tag and its content in disabled state with appropriate styling. */
-		disabled?: boolean
-		/** Icon that replaces any other content. */
-		icon?: IconProp | JSX.Element
-		/** Socket displaying icon on the left side. */
-		iconLeft?: IconProp | JSX.Element
-		/** Socket displaying icon on the right side. */
-		iconRight?: IconProp | JSX.Element
-		/** Makes the button take full width of the container. @deprecated */
-		isFullWidth?: boolean
-		/** Makes item clickable and focusable with appropriate styling. */
-		isInteractive?: boolean
-		/** Rounds the borders. @default false */
-		isRound?: boolean
-		/** Socket displaying a custom item on the left. */
-		itemLeft?: React.ReactNode
-		/** Socket displaying a custom item on right left. */
-		itemRight?: React.ReactNode
-		/** If provided, displays a remove button with this function as onClick. */
-		onDelete?: () => void
-		/** Socket displaying text as alternative to children. */
-		text?: React.ReactNode
-		/** Alias for fontWeight prop. @deprecated */
-		weight?: TypographyProps['fontWeight']
-	}
+  ThemingProps<'Tag'> & {
+    /** Alias for textTransform prop. @deprecated */
+    casing?: TypographyProps['textTransform']
+    /** Available theme colors for this component. @default blue */
+    colorScheme?: 'blue' | 'green' | 'grey' | 'prussian' | 'red' | 'yellow'
+    /** Displays tag and its content in disabled state with appropriate styling. */
+    disabled?: boolean
+    /** Icon that replaces any other content. */
+    icon?: IconProp | JSX.Element
+    /** Socket displaying icon on the left side. */
+    iconLeft?: IconProp | JSX.Element
+    /** Socket displaying icon on the right side. */
+    iconRight?: IconProp | JSX.Element
+    /** Makes the button take full width of the container. @deprecated */
+    isFullWidth?: boolean
+    /** Makes item clickable and focusable with appropriate styling. */
+    isInteractive?: boolean
+    /** Rounds the borders. @default false */
+    isRound?: boolean
+    /** Socket displaying a custom item on the left. */
+    itemLeft?: React.ReactNode
+    /** Socket displaying a custom item on right left. */
+    itemRight?: React.ReactNode
+    /** If provided, displays a remove button with this function as onClick. */
+    onDelete?: () => void
+    /** Socket displaying text as alternative to children. */
+    text?: React.ReactNode
+    /** Alias for fontWeight prop. @deprecated */
+    weight?: TypographyProps['fontWeight']
+  }

package/src/tag/tagButton.tsx

@@ -7,27 +7,25 @@ import { useTagContext } from './context'
 
 /** Displays a button within the Tag. */
 export const TagButton = vui<'button', ButtonProps>((props, ref) => {
-	const { className, ...rest } = props
-	const mergedProps = { ...useTagContext(), ...props }
-	const styles = useStyleConfig('Tag', useTagContext())
+  const { className, ...rest } = props
+  const mergedProps = { ...useTagContext(), ...props }
+  const styles = useStyleConfig('Tag', useTagContext())
 
-	return (
-		<Button
-			borderColor="transparent"
-			className={cs('vui-tagButton', className)}
-			colorScheme={mergedProps.colorScheme}
-			disabled={mergedProps.disabled}
-			hoverBorderColor="transparent"
-			icon="falTimes"
-			mr={-0.5}
-			ref={ref}
-			variant="text"
-			{...styles.button}
-			{...rest}
-		/>
-	)
+  return (
+    <Button
+      borderColor="transparent"
+      className={cs('vui-tagButton', className)}
+      colorScheme={mergedProps.colorScheme}
+      disabled={mergedProps.disabled}
+      hoverBorderColor="transparent"
+      icon="falTimes"
+      mr={-0.5}
+      ref={ref}
+      variant="text"
+      {...styles.button}
+      {...rest}
+    />
+  )
 })
 
-TagButton.displayName = 'TagButton'
-
 export default TagButton

package/src/tag/tagIcon.tsx

@@ -7,12 +7,10 @@ import { useTagContext } from './context'
 
 /** Displays an icon within the Tag. */
 export const TagIcon = vui<'svg', IconProps>((props, ref) => {
-	const { className, ...rest } = props
-	const styles = useStyleConfig('Tag', useTagContext())
+  const { className, ...rest } = props
+  const styles = useStyleConfig('Tag', useTagContext())
 
-	return <Icon className={cs('vui-tagIcon', className)} ref={ref} {...styles.icon} {...rest} />
+  return <Icon className={cs('vui-tagIcon', className)} ref={ref} {...styles.icon} {...rest} />
 })
 
-TagIcon.displayName = 'TagIcon'
-
 export default TagIcon

package/src/tag/tagText.tsx

@@ -7,12 +7,10 @@ import { useTagContext } from './context'
 
 /** Displays text within the Tag. */
 export const TagText = vui<'span', TProps>((props, ref) => {
-	const { className, ...rest } = props
-	const styles = useStyleConfig('Tag', useTagContext())
+  const { className, ...rest } = props
+  const styles = useStyleConfig('Tag', useTagContext())
 
-	return <T className={cs('vui-tagText', className)} fontSize="inherit" ref={ref} {...styles.text} {...rest} />
+  return <T className={cs('vui-tagText', className)} fontSize="inherit" ref={ref} {...styles.text} {...rest} />
 })
 
-TagText.displayName = 'TagText'
-
 export default TagText

package/src/tag/theme.ts

@@ -1,137 +1,137 @@
 import { Dict } from '../utils'
 
 function variantSolid(props: Dict) {
-	const { colorScheme: c } = props
-
-	const container = {
-		hoverBg: `${c}.90`,
-		activeBg: `${c}.100`,
-		bg: `${c}.80`,
-		color: 'white',
-		focusRing: 3
-	}
-
-	const button = {
-		hoverBg: `${c}.70`,
-		activeBg: `${c}.60`,
-		bg: `${c}.80`,
-		color: 'white'
-	}
-
-	if (c === 'prussian') {
-		container.hoverBg = 'prussian.60'
-		container.activeBg = 'prussian.50'
-		button.hoverBg = 'prussian.60'
-		button.activeBg = 'prussian.50'
-	}
-
-	if (c === 'yellow') {
-		container.hoverBg = 'yellow.80'
-		container.activeBg = 'yellow.90'
-		container.bg = 'yellow.70'
-		button.hoverBg = 'yellow.60'
-		button.activeBg = 'yellow.50'
-		button.bg = 'yellow.70'
-	}
-
-	return { container, button }
+  const { colorScheme: c } = props
+
+  const container = {
+    hoverBg: `${c}.90`,
+    activeBg: `${c}.100`,
+    bg: `${c}.80`,
+    color: 'white',
+    focusRing: 3
+  }
+
+  const button = {
+    hoverBg: `${c}.70`,
+    activeBg: `${c}.60`,
+    bg: `${c}.80`,
+    color: 'white'
+  }
+
+  if (c === 'prussian') {
+    container.hoverBg = 'prussian.60'
+    container.activeBg = 'prussian.50'
+    button.hoverBg = 'prussian.60'
+    button.activeBg = 'prussian.50'
+  }
+
+  if (c === 'yellow') {
+    container.hoverBg = 'yellow.80'
+    container.activeBg = 'yellow.90'
+    container.bg = 'yellow.70'
+    button.hoverBg = 'yellow.60'
+    button.activeBg = 'yellow.50'
+    button.bg = 'yellow.70'
+  }
+
+  return { container, button }
 }
 
 function variantSubtle(props: Dict) {
-	const { colorScheme: c } = props
-
-	const container = {
-		hoverBg: `${c}.30`,
-		activeBg: `${c}.40`,
-		bg: `${c}.20`,
-		color: `${c}.90`
-	}
-
-	const button = {
-		hoverBg: `${c}.30`,
-		activeBg: `${c}.40`,
-		color: `${c}.90`
-	}
-
-	if (c === 'blue') {
-		container.color = 'blue.80'
-		button.color = 'blue.80'
-	}
-
-	if (c === 'grey') {
-		container.color = 'prussian.80'
-		button.color = 'prussian.80'
-	}
-
-	if (c === 'yellow') {
-		container.color = 'yellow.100'
-		button.color = 'yellow.100'
-	}
-
-	return { container, button }
+  const { colorScheme: c } = props
+
+  const container = {
+    hoverBg: `${c}.30`,
+    activeBg: `${c}.40`,
+    bg: `${c}.20`,
+    color: `${c}.90`
+  }
+
+  const button = {
+    hoverBg: `${c}.30`,
+    activeBg: `${c}.40`,
+    color: `${c}.90`
+  }
+
+  if (c === 'blue') {
+    container.color = 'blue.80'
+    button.color = 'blue.80'
+  }
+
+  if (c === 'grey') {
+    container.color = 'prussian.80'
+    button.color = 'prussian.80'
+  }
+
+  if (c === 'yellow') {
+    container.color = 'yellow.100'
+    button.color = 'yellow.100'
+  }
+
+  return { container, button }
 }
 
 const baseStyle = {}
 
 const defaultProps = {
-	colorScheme: 'blue',
-	size: 'md',
-	variant: 'subtle'
+  colorScheme: 'blue',
+  size: 'md',
+  variant: 'subtle'
 }
 
 const parts = ['container', 'button', 'icon', 'text']
 
 const sizes = {
-	sm: {
-		container: {
-			fontSize: 'sm',
-			h: 24,
-			spaceX: 4
-		},
-		button: {
-			size: 'xs'
-		},
-		icon: {
-			size: 'xs'
-		}
-	},
-	md: {
-		container: {
-			fontSize: 'sm',
-			h: 32,
-			spaceX: 6
-		},
-		button: {
-			size: 'xs'
-		},
-		icon: {
-			size: 'sm'
-		}
-	},
-	lg: {
-		container: {
-			fontSize: 'md',
-			h: 40,
-			spaceX: 8
-		},
-		button: {
-			size: 'sm'
-		},
-		icon: {
-			size: 'md'
-		}
-	}
+  sm: {
+    container: {
+      fontSize: 'sm',
+      h: 24,
+      spaceX: 4
+    },
+    button: {
+      size: 'xs'
+    },
+    icon: {
+      size: 'xs'
+    }
+  },
+  md: {
+    container: {
+      fontSize: 'sm',
+      h: 32,
+      spaceX: 6
+    },
+    button: {
+      size: 'xs'
+    },
+    icon: {
+      size: 'sm'
+    }
+  },
+  lg: {
+    container: {
+      fontSize: 'md',
+      h: 40,
+      spaceX: 8
+    },
+    button: {
+      size: 'sm'
+    },
+    icon: {
+      size: 'md'
+    }
+  }
 }
 
 const variants = {
-	solid: variantSolid,
-	subtle: variantSubtle
+  solid: variantSolid,
+  subtle: variantSubtle
 }
 
 export default {
-	baseStyle,
-	defaultProps,
-	parts,
-	sizes,
-	variants
+  baseStyle,
+  defaultProps,
+  parts,
+  sizes,
+  variants
 }

package/src/textarea/helpers.ts

@@ -2,7 +2,7 @@ import { TextareaProps } from './textarea.types'
 
 /** Returns length of the initial textarea's value. */
 export function getInitialCount(props: TextareaProps) {
-	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/textarea/textarea.tsx

@@ -7,32 +7,32 @@ import { getInitialCount } from './helpers'
 import { TextareaProps } from './textarea.types'
 
 const TextareaTextarea = styled.textareaBox`
-	border-radius: md;
-	border-width: 1px;
-	outline: none;
-	padding: 1;
-	resize: none;
-	transition-duration: fast;
-	width: 100%;
+  border-radius: md;
+  border-width: 1px;
+  outline: none;
+  padding: 1;
+  resize: none;
+  transition-duration: fast;
+  width: 100%;
 
-	&::placeholder {
-		color: grey.60;
-	}
+  &::placeholder {
+    color: grey.60;
+  }
 
-	&[aria-disabled='true'],
-	&[aria-disabled='true']::placeholder {
-		background-color: disabled.bg;
-		border-color: disabled.border;
-		color: disabled.color;
-		cursor: not-allowed;
-	}
+  &[aria-disabled='true'],
+  &[aria-disabled='true']::placeholder {
+    background-color: disabled.bg;
+    border-color: disabled.border;
+    color: disabled.color;
+    cursor: not-allowed;
+  }
 `
 
 export const TextareaBase = styled.divBox`
-	display: flex;
-	min-height: 80px;
-	position: relative;
-	width: 100%;
+  display: flex;
+  min-height: 80px;
+  position: relative;
+  width: 100%;
 `
 
 /**
@@ -40,90 +40,88 @@ export const TextareaBase = styled.divBox`
  * Forwards many relevant props to the inner textarea. Exposes some props to the children via context.
  */
 export const Textarea = vui<'div', TextareaProps>((props, ref) => {
-	const [count, setCount] = useState(getInitialCount(props))
-	const {
-		autoFocus,
-		className,
-		colorScheme: colorSchemeProp,
-		cols,
-		defaultValue,
-		disabled,
-		id,
-		isInvalid,
-		maxLength,
-		name,
-		onBlur,
-		onChange: onChangeProp,
-		onFocus,
-		placeholder,
-		readOnly,
-		required,
-		resize = 'none',
-		rows,
-		showCount,
-		textareaProps = {},
-		textareaRef,
-		value,
-		...rest
-	} = omitThemingProps(props)
-	const colorProps = filterUndefined({
-		colorScheme: colorSchemeProp ?? (isInvalid ? 'red' : undefined)
-	})
-	const styles = useStyleConfig('Textarea', { ...colorProps, ...props })
+  const [count, setCount] = useState(getInitialCount(props))
+  const {
+    autoFocus,
+    className,
+    colorScheme: colorSchemeProp,
+    cols,
+    defaultValue,
+    disabled,
+    id,
+    isInvalid,
+    maxLength,
+    name,
+    onBlur,
+    onChange: onChangeProp,
+    onFocus,
+    placeholder,
+    readOnly,
+    required,
+    resize = 'none',
+    rows,
+    showCount,
+    textareaProps = {},
+    textareaRef,
+    value,
+    ...rest
+  } = omitThemingProps(props)
+  const colorProps = filterUndefined({
+    colorScheme: colorSchemeProp ?? (isInvalid ? 'red' : undefined)
+  })
+  const styles = useStyleConfig('Textarea', { ...colorProps, ...props })
 
-	function onChange(e: ChangeEvent<HTMLTextAreaElement>) {
-		setCount(e.target.value.length)
-		onChangeProp?.(e)
-	}
+  function onChange(e: ChangeEvent<HTMLTextAreaElement>) {
+    setCount(e.target.value.length)
+    onChangeProp?.(e)
+  }
 
-	const aliasedProps = filterUndefined({
-		'aria-disabled': disabled
-	})
+  const aliasedProps = filterUndefined({
+    'aria-disabled': disabled
+  })
 
-	const textareaAliasedProps = filterUndefined({
-		'aria-disabled': disabled,
-		bg: readOnly ? 'grey.20' : undefined,
-		focusBorderColor: !readOnly ? 'transparent' : undefined,
-		focusRing: readOnly ? 0 : undefined
-	})
+  const textareaAliasedProps = filterUndefined({
+    'aria-disabled': disabled,
+    bg: readOnly ? 'grey.20' : undefined,
+    focusBorderColor: !readOnly ? 'transparent' : undefined,
+    focusRing: readOnly ? 0 : undefined
+  })
 
-	return (
-		<TextareaBase className={cs('vui-textarea', className)} ref={ref} {...styles.container} {...aliasedProps} {...rest}>
-			<TextareaTextarea
-				className="vui-textareaTextarea"
-				ref={textareaRef}
-				{...{
-					autoFocus,
-					cols,
-					defaultValue,
-					disabled,
-					id,
-					maxLength,
-					name,
-					onBlur,
-					onChange,
-					onFocus,
-					placeholder,
-					readOnly,
-					required,
-					resize,
-					rows,
-					value
-				}}
-				{...styles.textarea}
-				{...textareaAliasedProps}
-				{...textareaProps}
-			/>
+  return (
+    <TextareaBase className={cs('vui-textarea', className)} ref={ref} {...styles.container} {...aliasedProps} {...rest}>
+      <TextareaTextarea
+        className="vui-textareaTextarea"
+        ref={textareaRef}
+        {...{
+          autoFocus,
+          cols,
+          defaultValue,
+          disabled,
+          id,
+          maxLength,
+          name,
+          onBlur,
+          onChange,
+          onFocus,
+          placeholder,
+          readOnly,
+          required,
+          resize,
+          rows,
+          value
+        }}
+        {...styles.textarea}
+        {...textareaAliasedProps}
+        {...textareaProps}
+      />
 
-			{showCount && (
-				<T className="vui-textareaCount" color="grey.80" position="absolute" right={0} size="sm" top="calc(100% + 1px)">
-					{count} / {maxLength}
-				</T>
-			)}
-		</TextareaBase>
-	)
+      {showCount && (
+        <T className="vui-textareaCount" color="grey.80" position="absolute" right={0} size="sm" top="calc(100% + 1px)">
+          {count} / {maxLength}
+        </T>
+      )}
+    </TextareaBase>
+  )
 })
 
-Textarea.displayName = 'Textarea'
-
 export default Textarea