@veracity/vui 1.0.0 → 1.1.1

package/src/input/inputIcon.tsx

@@ -7,16 +7,14 @@ import { useInputContext } from './context'
 
 /** Displays an icon within the Input. */
 export const InputIcon = vui<'svg', IconProps>((props, ref) => {
-	const { className, ...rest } = props
-	const inputProps = useInputContext()
-	const mergedProps = { ...inputProps, ...props }
-	const styles = useStyleConfig('Input', mergedProps)
+  const { className, ...rest } = props
+  const inputProps = useInputContext()
+  const mergedProps = { ...inputProps, ...props }
+  const styles = useStyleConfig('Input', mergedProps)
 
-	const color = !mergedProps.disabled ? 'blue.80' : 'grey.50'
+  const color = !mergedProps.disabled ? 'blue.80' : 'grey.50'
 
-	return <Icon className={cs('vui-inputIcon', className)} color={color} ref={ref} {...styles.icon} {...rest} />
+  return <Icon className={cs('vui-inputIcon', className)} color={color} ref={ref} {...styles.icon} {...rest} />
 })
 
-InputIcon.displayName = 'InputIcon'
-
 export default InputIcon

package/src/input/inputInput.tsx

@@ -6,49 +6,47 @@ import { useInputContext } from './context'
 import { InputInputProps } from './input.types'
 
 export const InputInputBase = styled.input`
-	align-self: stretch;
-	background-color: transparent;
-	border: none;
-	border-radius: md;
-	flex: 1;
-	font-size: inherit;
-	min-width: 0;
-	outline: none;
-	padding: 0 1;
-
-	&::placeholder {
-		color: grey.60;
-	}
-
-	&[aria-disabled='true'],
-	&[aria-disabled='true']::placeholder {
-		color: disabled.color;
-		cursor: not-allowed;
-	}
+  align-self: stretch;
+  background-color: transparent;
+  border: none;
+  border-radius: md;
+  flex: 1;
+  font-size: inherit;
+  min-width: 0;
+  outline: none;
+  padding: 0 1;
+
+  &::placeholder {
+    color: grey.60;
+  }
+
+  &[aria-disabled='true'],
+  &[aria-disabled='true']::placeholder {
+    color: disabled.color;
+    cursor: not-allowed;
+  }
 `
 
 /** Displays an input element within the Input component. */
 export const InputInput = vui<'input', InputInputProps>((props, ref) => {
-	const { className, ...rest } = props
-	const inputProps = useInputContext()
-	const mergedProps = { ...inputProps, ...props }
-	const styles = useStyleConfig('Input', mergedProps)
-
-	const aliasedProps = filterUndefined({
-		'aria-disabled': mergedProps.disabled
-	})
-
-	return (
-		<InputInputBase
-			className={cs('vui-inputInput', className)}
-			ref={ref}
-			{...styles.input}
-			{...aliasedProps}
-			{...rest}
-		/>
-	)
+  const { className, ...rest } = props
+  const inputProps = useInputContext()
+  const mergedProps = { ...inputProps, ...props }
+  const styles = useStyleConfig('Input', mergedProps)
+
+  const aliasedProps = filterUndefined({
+    'aria-disabled': mergedProps.disabled
+  })
+
+  return (
+    <InputInputBase
+      className={cs('vui-inputInput', className)}
+      ref={ref}
+      {...styles.input}
+      {...aliasedProps}
+      {...rest}
+    />
+  )
 })
 
-InputInput.displayName = 'InputInput'
-
 export default InputInput

package/src/input/theme.ts

@@ -1,86 +1,86 @@
 import { Dict } from '../utils'
 
 function variantDefault(props: Dict) {
-	const { colorScheme: c } = props
+  const { colorScheme: c } = props
 
-	const container = {
-		borderColor: `${c}.80`,
-		focusWithinRing: 2,
-		focusWithinRingColor: `${c}.80`
-	}
+  const container = {
+    borderColor: `${c}.80`,
+    focusWithinRing: 2,
+    focusWithinRingColor: `${c}.80`
+  }
 
-	if (c === 'grey') {
-		container.borderColor = `${c}.60`
-		container.focusWithinRingColor = 'blue.50'
-	}
+  if (c === 'grey') {
+    container.borderColor = `${c}.60`
+    container.focusWithinRingColor = 'blue.50'
+  }
 
-	const icon = {}
-	const input = {}
+  const icon = {}
+  const input = {}
 
-	return { container, icon, input }
+  return { container, icon, input }
 }
 
 const baseStyle = {}
 
 const defaultProps = {
-	colorScheme: 'grey',
-	size: 'md',
-	variant: 'default'
+  colorScheme: 'grey',
+  size: 'md',
+  variant: 'default'
 }
 
 const parts = ['container', 'icon', 'input']
 
 const sizes = {
-	xs: {
-		container: {
-			fontSize: 'sm',
-			h: 24
-		},
-		icon: {
-			size: 'xs'
-		},
-		input: {}
-	},
-	sm: {
-		container: {
-			fontSize: 'sm',
-			h: 32
-		},
-		icon: {
-			size: 'sm'
-		},
-		input: {}
-	},
-	md: {
-		container: {
-			fontSize: 'md',
-			h: 40
-		},
-		icon: {
-			size: 'md'
-		},
-		input: {}
-	},
-	lg: {
-		container: {
-			fontSize: 'lg',
-			h: 48
-		},
-		icon: {
-			size: 'md'
-		},
-		input: {}
-	}
+  xs: {
+    container: {
+      fontSize: 'sm',
+      h: 24
+    },
+    icon: {
+      size: 'xs'
+    },
+    input: {}
+  },
+  sm: {
+    container: {
+      fontSize: 'sm',
+      h: 32
+    },
+    icon: {
+      size: 'sm'
+    },
+    input: {}
+  },
+  md: {
+    container: {
+      fontSize: 'md',
+      h: 40
+    },
+    icon: {
+      size: 'md'
+    },
+    input: {}
+  },
+  lg: {
+    container: {
+      fontSize: 'lg',
+      h: 48
+    },
+    icon: {
+      size: 'md'
+    },
+    input: {}
+  }
 }
 
 const variants = {
-	default: variantDefault
+  default: variantDefault
 }
 
 export default {
-	baseStyle,
-	defaultProps,
-	parts,
-	sizes,
-	variants
+  baseStyle,
+  defaultProps,
+  parts,
+  sizes,
+  variants
 }

package/src/link/link.tsx

@@ -8,15 +8,15 @@ import LinkIcon from './linkIcon'
 import LinkText from './linkText'
 
 export const LinkBase = styled.aBox`
-	align-items: center;
-	border-radius: sm;
-	cursor: pointer;
-	display: inline-flex;
-	line-height: normal;
-	outline: none;
-	text-decoration: none;
-	transition-duration: instant;
-	width: fit-content;
+  align-items: center;
+  border-radius: sm;
+  cursor: pointer;
+  display: inline-flex;
+  line-height: normal;
+  outline: none;
+  text-decoration: none;
+  transition-duration: instant;
+  width: fit-content;
 `
 
 /**
@@ -24,59 +24,57 @@ export const LinkBase = styled.aBox`
  * Exposes some props to the children via context.
  */
 export const Link = vui<'a', LinkProps>((props, ref) => {
-	const {
-		children,
-		className,
-		colorScheme,
-		decoration,
-		hoverDecoration = 'underline',
-		iconLeft,
-		iconRight,
-		isExternal,
-		isUnderlined,
-		size,
-		text,
-		variant,
-		weight,
-		...rest
-	} = props
-	const styles = useStyleConfig('Link', props)
+  const {
+    children,
+    className,
+    colorScheme,
+    decoration,
+    hoverDecoration = 'underline',
+    iconLeft,
+    iconRight,
+    isExternal,
+    isUnderlined,
+    size,
+    text,
+    variant,
+    weight,
+    ...rest
+  } = props
+  const styles = useStyleConfig('Link', props)
 
-	const context = useMemo(() => filterUndefined({ colorScheme, size, variant }), [colorScheme, size, variant])
+  const context = useMemo(() => filterUndefined({ colorScheme, size, variant }), [colorScheme, size, variant])
 
-	const aliasedProps = filterUndefined({
-		fontWeight: weight,
-		rel: isExternal ? 'noopener' : undefined,
-		target: isExternal ? '_blank' : undefined,
-		textDecoration: decoration ?? (isUnderlined ? 'underline' : undefined)
-	})
+  const aliasedProps = filterUndefined({
+    fontWeight: weight,
+    rel: isExternal ? 'noopener' : undefined,
+    target: isExternal ? '_blank' : undefined,
+    textDecoration: decoration ?? (isUnderlined ? 'underline' : undefined)
+  })
 
-	return (
-		<LinkProvider value={context}>
-			<LinkBase
-				className={cs('vui-link', className)}
-				focusRing={2}
-				hoverTextDecoration={hoverDecoration}
-				ref={ref}
-				{...styles.container}
-				{...aliasedProps}
-				{...rest}
-			>
-				{isString(iconLeft) ? <LinkIcon mr={1} name={iconLeft} /> : iconLeft}
+  return (
+    <LinkProvider value={context}>
+      <LinkBase
+        className={cs('vui-link', className)}
+        focusRing={2}
+        hoverTextDecoration={hoverDecoration}
+        ref={ref}
+        {...styles.container}
+        {...aliasedProps}
+        {...rest}
+      >
+        {isString(iconLeft) ? <LinkIcon mr={1} name={iconLeft} /> : iconLeft}
 
-				{children ?? (isReactText(text) ? <LinkText text={text} /> : text)}
+        {children ?? (isReactText(text) ? <LinkText text={text} /> : text)}
 
-				{isString(iconRight) ? <LinkIcon ml={1} name={iconRight} /> : iconRight}
-			</LinkBase>
-		</LinkProvider>
-	)
+        {isString(iconRight) ? <LinkIcon ml={1} name={iconRight} /> : iconRight}
+      </LinkBase>
+    </LinkProvider>
+  )
 }) as VuiComponent<'a', LinkProps> & {
-	Icon: typeof LinkIcon
-	Text: typeof LinkText
+  Icon: typeof LinkIcon
+  Text: typeof LinkText
 }
 
-Link.displayName = 'Link'
-
 Link.Icon = LinkIcon
 Link.Text = LinkText
 

package/src/link/link.types.ts

@@ -3,23 +3,23 @@ import { SystemProps, TypographyProps } from '../system'
 import { ThemingProps } from '../theme'
 
 export type LinkProps = SystemProps &
-	ThemingProps<'Link'> & {
-		/** Available theme colors for this component. @default blue */
-		colorScheme?: 'blue' | 'white'
-		/** Alias for textDecoration prop. @deprecated */
-		decoration?: TypographyProps['textDecoration']
-		/** Alias for hoverTextDecoration prop. @deprecated */
-		hoverDecoration?: TypographyProps['textDecoration']
-		/** Socket displaying an icon on the left. */
-		iconLeft?: IconProp | JSX.Element
-		/** Socket displaying an icon on the right. */
-		iconRight?: IconProp | JSX.Element
-		/** Opens the link in new tab with appropriate attributes. */
-		isExternal?: boolean
-		/** Displays permanent underline. */
-		isUnderlined?: boolean
-		/** Socket displaying text within the Link. */
-		text?: number | string | JSX.Element
-		/** Alias for fontWeight prop. @deprecated */
-		weight?: TypographyProps['fontWeight']
-	}
+  ThemingProps<'Link'> & {
+    /** Available theme colors for this component. @default blue */
+    colorScheme?: 'blue' | 'white'
+    /** Alias for textDecoration prop. @deprecated */
+    decoration?: TypographyProps['textDecoration']
+    /** Alias for hoverTextDecoration prop. @deprecated */
+    hoverDecoration?: TypographyProps['textDecoration']
+    /** Socket displaying an icon on the left. */
+    iconLeft?: IconProp | JSX.Element
+    /** Socket displaying an icon on the right. */
+    iconRight?: IconProp | JSX.Element
+    /** Opens the link in new tab with appropriate attributes. */
+    isExternal?: boolean
+    /** Displays permanent underline. */
+    isUnderlined?: boolean
+    /** Socket displaying text within the Link. */
+    text?: number | string | JSX.Element
+    /** Alias for fontWeight prop. @deprecated */
+    weight?: TypographyProps['fontWeight']
+  }

package/src/link/linkIcon.tsx

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

package/src/link/linkText.tsx

@@ -7,21 +7,19 @@ import { useLinkContext } from './context'
 
 /** Displays text of the Link. */
 export const LinkText = vui<'span', TProps>((props, ref) => {
-	const { className, ...rest } = props
-	const styles = useStyleConfig('Link', useLinkContext())
+  const { className, ...rest } = props
+  const styles = useStyleConfig('Link', useLinkContext())
 
-	return (
-		<T
-			className={cs('vui-linkText', className)}
-			fontSize="inherit"
-			ref={ref}
-			transitionDuration="unset"
-			{...styles.text}
-			{...rest}
-		/>
-	)
+  return (
+    <T
+      className={cs('vui-linkText', className)}
+      fontSize="inherit"
+      ref={ref}
+      transitionDuration="unset"
+      {...styles.text}
+      {...rest}
+    />
+  )
 })
 
-LinkText.displayName = 'LinkText'
-
 export default LinkText

package/src/link/theme.ts

@@ -1,85 +1,85 @@
 import { Dict } from '../utils'
 
 function variantDefault(props: Dict) {
-	const { colorScheme: c } = props
+  const { colorScheme: c } = props
 
-	const container = {
-		color: `${c}.80`,
-		hoverColor: `${c}.60`
-	}
+  const container = {
+    color: `${c}.80`,
+    hoverColor: `${c}.60`
+  }
 
-	if (c === 'white') {
-		container.color = 'white'
-		container.hoverColor = 'white'
-	}
+  if (c === 'white') {
+    container.color = 'white'
+    container.hoverColor = 'white'
+  }
 
-	return { container }
+  return { container }
 }
 
 function variantLight(props: Dict) {
-	const { colorScheme: c } = props
+  const { colorScheme: c } = props
 
-	const container = {
-		color: `${c}.60`,
-		hoverColor: `${c}.40`
-	}
+  const container = {
+    color: `${c}.60`,
+    hoverColor: `${c}.40`
+  }
 
-	return { container }
+  return { container }
 }
 
 const variantPlain = {
-	container: {
-		hoverTextDecoration: 'none'
-	}
+  container: {
+    hoverTextDecoration: 'none'
+  }
 }
 
 const baseStyle = {}
 
 const defaultProps = {
-	colorScheme: 'blue',
-	size: 'md',
-	variant: 'default'
+  colorScheme: 'blue',
+  size: 'md',
+  variant: 'default'
 }
 
 const parts = ['container', 'icon', 'text']
 
 const sizes = {
-	sm: {
-		container: {
-			fontSize: 'sm'
-		},
-		icon: {
-			size: 'xs'
-		}
-	},
-	md: {
-		container: {
-			fontSize: 'md'
-		},
-		icon: {
-			size: 'xs'
-		}
-	},
-	lg: {
-		container: {
-			fontSize: 'lg'
-		},
-		icon: {
-			size: 'sm'
-		}
-	}
+  sm: {
+    container: {
+      fontSize: 'sm'
+    },
+    icon: {
+      size: 'xs'
+    }
+  },
+  md: {
+    container: {
+      fontSize: 'md'
+    },
+    icon: {
+      size: 'xs'
+    }
+  },
+  lg: {
+    container: {
+      fontSize: 'lg'
+    },
+    icon: {
+      size: 'sm'
+    }
+  }
 }
 
 const variants = {
-	default: variantDefault,
-	light: variantLight,
-	plain: variantPlain
+  default: variantDefault,
+  light: variantLight,
+  plain: variantPlain
 }
 
 export default {
-	baseStyle,
-	defaultProps,
-	parts,
-	sizes,
-	variants
+  baseStyle,
+  defaultProps,
+  parts,
+  sizes,
+  variants
 }