@veracity/vui 2.29.3 → 2.29.5

package/src/system/typography.ts

@@ -1,8 +1,8 @@
-import { SystemProp, VariantsType } from '@xstyled/system'
-import { Globals, Property } from 'csstype'
+import type { SystemProp, VariantsType } from '@xstyled/system'
+import type { Globals, Property } from 'csstype'
 
-import { VuiTheme } from '../theme'
-import { ColorGetter } from './colors'
+import type { VuiTheme } from '../theme'
+import type { ColorGetter } from './colors'
 
 export type FontGetter = VariantsType<VuiTheme['fonts']>
 export type FontSizeGetter = VariantsType<VuiTheme['fontSizes']>

package/src/t/index.ts

@@ -1,3 +1,3 @@
 export * from './t'
 export { default } from './t'
-export * from './t.types'
+export type * from './t.types'

package/src/t/t.tsx

@@ -1,6 +1,6 @@
 import { omitThemingProps, styled, useStyleConfig, vui } from '../core'
 import { cs, filterUndefined } from '../utils'
-import { TProps } from './t.types'
+import type { TProps } from './t.types'
 
 export const TBase = styled.spanBox`
   transition-duration: fast;

package/src/t/t.types.ts

@@ -1,7 +1,7 @@
-import { ReactText } from 'react'
+import type { ReactText } from 'react'
 
-import { SystemProps, TypographyProps } from '../system'
-import { ThemingProps } from '../theme'
+import type { SystemProps, TypographyProps } from '../system'
+import type { ThemingProps } from '../theme'
 
 export type TProps = SystemProps &
   ThemingProps<'T'> & {

package/src/table/context.ts

@@ -1,5 +1,5 @@
 import { createContext } from '../utils'
-import { TableContext } from './table.types'
+import type { TableContext } from './table.types'
 
 const [TableProvider, useTableContext] = createContext<TableContext>({ isOptional: true })
 

package/src/table/index.ts

@@ -1,7 +1,7 @@
 export * from './context'
 export * from './table'
 export { default } from './table'
-export * from './table.types'
+export type * from './table.types'
 export * from './tableSortIcon'
 export * from './tbody'
 export * from './td'

package/src/table/table.tsx

@@ -1,9 +1,10 @@
 import { useMemo } from 'react'
 
-import { css, styled, useStyleConfig, vui, VuiComponent } from '../core'
+import type { VuiComponent } from '../core'
+import { css, styled, useStyleConfig, vui } from '../core'
 import { compareBy, cs } from '../utils'
 import { TableProvider } from './context'
-import { TableProps } from './table.types'
+import type { TableProps } from './table.types'
 import TableSortIcon from './tableSortIcon'
 import Tbody from './tbody'
 import Td from './td'

package/src/table/table.types.ts

@@ -1,11 +1,11 @@
-import { ReactNode } from 'react'
+import type { ReactNode } from 'react'
 
-import { IconProps } from '../icon'
-import { SystemProps } from '../system'
-import { ThemingProps } from '../theme'
-import { Sort } from '../utils'
-import { UseTableReturnType } from './useTable'
-import { UseTableProps } from './useTable.types'
+import type { IconProps } from '../icon'
+import type { SystemProps } from '../system'
+import type { ThemingProps } from '../theme'
+import type { Sort } from '../utils'
+import type { UseTableReturnType } from './useTable'
+import type { UseTableProps } from './useTable.types'
 
 export type TableColumn<T = string> = SystemProps & {
   /** Unique identifier of a column. */

package/src/table/tableSortIcon.tsx

@@ -2,7 +2,7 @@ import { useStyleConfig, vui } from '../core'
 import { Icon } from '../icon'
 import { cs } from '../utils'
 import { useTableContext } from './context'
-import { TableSortIconProps } from './table.types'
+import type { TableSortIconProps } from './table.types'
 
 /** Displays a sort icon with given direction based on sort order. */
 export const TableSortIcon = vui<'svg', TableSortIconProps>((props, ref) => {

package/src/table/tbody.tsx

@@ -1,7 +1,7 @@
 import { styled, useStyleConfig, vui } from '../core'
 import { cs } from '../utils'
 import { useTableContext } from './context'
-import { TbodyProps } from './table.types'
+import type { TbodyProps } from './table.types'
 import Td from './td'
 import Tr from './tr'
 
@@ -39,7 +39,11 @@ export const Tbody = vui<'tbody', TbodyProps>((props, ref) => {
     <TbodyBase className={cs('vui-tbody', className)} ref={ref} {...styles.tbody} {...rest}>
       {children ??
         rows?.map((row, index) => (
-          <Tr key={index}>{columns?.map(column => <Td key={column.field}>{row[column.field]}</Td>)}</Tr>
+          <Tr key={index}>
+            {columns?.map(column => (
+              <Td key={column.field}>{row[column.field]}</Td>
+            ))}
+          </Tr>
         ))}
     </TbodyBase>
   )

package/src/table/td.tsx

@@ -2,7 +2,7 @@ import { styled, useStyleConfig, vui } from '../core'
 import T from '../t'
 import { cs } from '../utils'
 import { useTableContext } from './context'
-import { TdProps } from './table.types'
+import type { TdProps } from './table.types'
 
 export const TdBase = styled.tdBox`
   transition-duration: fast;

package/src/table/tfoot.tsx

@@ -1,7 +1,7 @@
 import { styled, useStyleConfig, vui } from '../core'
 import { cs } from '../utils'
 import { useTableContext } from './context'
-import { TfootProps } from './table.types'
+import type { TfootProps } from './table.types'
 
 export const TfootBase = styled.tfootBox``
 

package/src/table/th.tsx

@@ -1,8 +1,9 @@
 import Box from '../box'
 import { styled, useStyleConfig, vui } from '../core'
-import { cs, MouseEvent, useCallbackRef } from '../utils'
+import type { MouseEvent } from '../utils'
+import { cs, useCallbackRef } from '../utils'
 import { useTableContext } from './context'
-import { ThProps } from './table.types'
+import type { ThProps } from './table.types'
 import TableSortIcon from './tableSortIcon'
 
 export const ThBase = styled.thBox`

package/src/table/thead.tsx

@@ -1,18 +1,16 @@
 import { styled, useStyleConfig, vui } from '../core'
 import { cs } from '../utils'
 import { useTableContext } from './context'
-import { TheadProps } from './table.types'
+import type { TheadProps } from './table.types'
 import Th from './th'
 import Tr from './tr'
 
-/*@formatter:off*/
 const TheadBase = styled.theadBox`
   tr th,
   tr td {
     border-bottom: 1px solid sandstone.main;
   }
 `
-/*@formatter:on*/
 
 /** Displays Table head with support for columns and sticky. */
 export const Thead = vui<'thead', TheadProps>((props, ref) => {
@@ -31,7 +29,13 @@ export const Thead = vui<'thead', TheadProps>((props, ref) => {
 
   return (
     <TheadBase className={cs('vui-thead', className)} ref={ref} {...stickyProps} {...styles.thead} {...rest}>
-      {children ?? <Tr>{columns?.map(column => <Th key={column.field} role="columnheader" {...column} />)}</Tr>}
+      {children ?? (
+        <Tr>
+          {columns?.map(column => (
+            <Th key={column.field} role="columnheader" {...column} />
+          ))}
+        </Tr>
+      )}
     </TheadBase>
   )
 })

package/src/table/tr.tsx

@@ -4,7 +4,7 @@ import Button from '../button'
 import { styled, useStyleConfig, vui } from '../core'
 import { cs } from '../utils'
 import { useTableContext } from './context'
-import { TrProps } from './table.types'
+import type { TrProps } from './table.types'
 import Td from './td'
 
 const trClassName = 'vui-tr'

package/src/table/useTable.ts

@@ -1,5 +1,6 @@
-import { SortOrder, useCallbackRef, useControlled } from '../utils'
-import { UseTableProps } from './useTable.types'
+import type { SortOrder } from '../utils'
+import { useCallbackRef, useControlled } from '../utils'
+import type { UseTableProps } from './useTable.types'
 
 const sortOrders: SortOrder[] = ['asc', 'desc', null]
 const defaultSortOrder: SortOrder = sortOrders[0]

package/src/table/useTable.types.ts

@@ -1,4 +1,4 @@
-import { Sort } from '../utils'
+import type { Sort } from '../utils'
 
 export type UseTableProps = {
   /** Initial sort value in uncontrolled mode. */

package/src/tabs/consts.ts

@@ -1,4 +1,4 @@
-import { Dict } from '../utils'
+import type { Dict } from '../utils'
 
 export const colors = {
   activeBg: 'skyBlue.main',

package/src/tabs/index.ts

@@ -1,4 +1,4 @@
 export * from './tabs'
 export * from './tab'
 export { default } from './tabs'
-export * from './tabs.types'
+export type * from './tabs.types'

package/src/tabs/tab.tsx

@@ -1,6 +1,6 @@
 import { styled, vui } from '../core'
 import { cs } from '../utils'
-import { TabProps } from './tabs.types'
+import type { TabProps } from './tabs.types'
 
 export const TabBase = styled.divBox`
   width: 100%;

package/src/tabs/tabs.tsx

@@ -1,10 +1,11 @@
-import { Children, ReactElement, useEffect } from 'react'
+import type { ReactElement } from 'react'
+import { Children, useEffect } from 'react'
 
 import { styled, useStyleConfig, vui } from '../core'
 import { P } from '../p'
 import { cs } from '../utils'
 import Tab from './tab'
-import { TabIndexProps, TabProps, TabsProps } from './tabs.types'
+import type { TabIndexProps, TabProps, TabsProps } from './tabs.types'
 import TabsNavBar from './tabsNavBar'
 import { useTabsState } from './useTabsState'
 

package/src/tabs/tabs.types.ts

@@ -1,9 +1,9 @@
-import { ReactNode } from 'react'
+import type { ReactNode } from 'react'
 
-import { ChildrenProp } from '../core'
-import { IconProp } from '../icon'
-import { SystemProps } from '../system'
-import { ThemingProps } from '../theme'
+import type { ChildrenProp } from '../core'
+import type { IconProp } from '../icon'
+import type { SystemProps } from '../system'
+import type { ThemingProps } from '../theme'
 
 export type AnimationDirection = 'fadeLeft' | 'fadeRight' | 'fadeIn'
 export type TabsSize = 'md' | 'sm' | 'lg' | 'xl' | 'xxl'

package/src/tabs/tabsNavBar.tsx

@@ -3,9 +3,10 @@ import { vui } from '../core'
 import { Icon } from '../icon'
 import { List, ListItem } from '../list'
 import { TagButton } from '../tag'
-import { cs, Dict } from '../utils'
+import type { Dict } from '../utils'
+import { cs } from '../utils'
 import { colors, iconSizeMapper } from './consts'
-import { NavBarIconSize, TabIndexProps, TabNavBarProps } from './tabs.types'
+import type { NavBarIconSize, TabIndexProps, TabNavBarProps } from './tabs.types'
 import theme from './theme'
 
 const { activeBg, border, color, hover, main } = colors

package/src/tabs/useTabsState.ts

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 
-import { AnimationDirection, TabIndexProps } from './tabs.types'
+import type { AnimationDirection, TabIndexProps } from './tabs.types'
 
 export const useTabsState = (initialAnimation: AnimationDirection, tabIndex?: number) => {
   const [tabs, setTabs] = useState<TabIndexProps[]>([])

package/src/tag/context.ts

@@ -1,4 +1,5 @@
-import { createContext, Dict } from '../utils'
+import type { Dict } from '../utils'
+import { createContext } from '../utils'
 
 const [TagProvider, useTagContext] = createContext<Dict>({ isOptional: true })
 

package/src/tag/index.ts

@@ -1,7 +1,7 @@
 export * from './context'
 export * from './tag'
 export { default } from './tag'
-export * from './tag.types'
+export type * from './tag.types'
 export * from './tagButton'
 export * from './tagIcon'
 export * from './tagText'

package/src/tag/tag.tsx

@@ -1,9 +1,10 @@
 import { useMemo } from 'react'
 
-import { styled, useStyleConfig, vui, VuiComponent } from '../core'
+import type { VuiComponent } from '../core'
+import { styled, useStyleConfig, vui } from '../core'
 import { cs, filterUndefined, isReactText, isString } from '../utils'
 import { TagProvider } from './context'
-import { TagProps } from './tag.types'
+import type { TagProps } from './tag.types'
 import TagButton from './tagButton'
 import TagIcon from './tagIcon'
 import TagText from './tagText'

package/src/tag/tag.types.ts

@@ -1,6 +1,6 @@
-import { IconProp } from '../icon'
-import { SystemProps, TypographyProps } from '../system'
-import { ThemingProps } from '../theme'
+import type { IconProp } from '../icon'
+import type { SystemProps, TypographyProps } from '../system'
+import type { ThemingProps } from '../theme'
 
 export type TagInnerProps = {
   /** Alias for textTransform prop. @deprecated */

package/src/tag/tagButton.tsx

@@ -1,4 +1,5 @@
-import Button, { ButtonProps } from '../button'
+import type { ButtonProps } from '../button'
+import Button from '../button'
 import { useStyleConfig, vui } from '../core'
 import { cs } from '../utils'
 import { useTagContext } from './context'

package/src/tag/tagIcon.tsx

@@ -1,5 +1,6 @@
 import { useStyleConfig, vui } from '../core'
-import Icon, { IconProps } from '../icon'
+import type { IconProps } from '../icon'
+import Icon from '../icon'
 import { cs } from '../utils'
 import { useTagContext } from './context'
 

package/src/tag/tagText.tsx

@@ -1,5 +1,6 @@
 import { useStyleConfig, vui } from '../core'
-import T, { TProps } from '../t'
+import type { TProps } from '../t'
+import T from '../t'
 import { cs } from '../utils'
 import { useTagContext } from './context'
 

package/src/textarea/helpers.ts

@@ -1,4 +1,4 @@
-import { TextareaProps } from './textarea.types'
+import type { TextareaProps } from './textarea.types'
 
 /** Returns length of the initial textarea's value. */
 export function getInitialCount(props: TextareaProps) {

package/src/textarea/index.ts

@@ -1,3 +1,3 @@
 export * from './textarea'
 export { default } from './textarea'
-export * from './textarea.types'
+export type * from './textarea.types'

package/src/textarea/textarea.tsx

@@ -5,9 +5,10 @@ import { omitThemingProps, styled, useStyleConfig, vui } from '../core'
 import { helpTextMargin, helpTextSize, inputColors } from '../input/consts'
 import HelpText from '../input/helpText'
 import T from '../t'
-import { ChangeEvent, cs, filterUndefined, isString } from '../utils'
+import type { ChangeEvent } from '../utils'
+import { cs, filterUndefined, isString } from '../utils'
 import { getInitialCount } from './helpers'
-import { TextareaProps } from './textarea.types'
+import type { TextareaProps } from './textarea.types'
 
 const TextareaTextarea = styled.textareaBox`
   border-radius: none;

package/src/textarea/textarea.types.ts

@@ -1,6 +1,6 @@
-import { SystemProps } from '../system'
-import { ThemingProps } from '../theme'
-import { ChangeEventHandler, FocusEventHandler, PropsOf } from '../utils'
+import type { SystemProps } from '../system'
+import type { ThemingProps } from '../theme'
+import type { ChangeEventHandler, FocusEventHandler, PropsOf } from '../utils'
 
 export type TextareaProps = SystemProps &
   ThemingProps<'Textarea'> & {

package/src/theme/foundations/colors.ts

@@ -1,5 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore - the missing types have to be added into the onedesign-tokens package
 import * as oneDesignButtonTokens from '../../onedesign-tokens/dist/js/rem/button'
 
 const buttonTypePrimaryDefaultBorderColorDark: string = oneDesignButtonTokens.buttonTypePrimaryDefaultBorderColorDark

package/src/theme/foundations/screens.ts

@@ -1,4 +1,4 @@
-// Pixel values inspired by https://tailwindcss.com/docs/screens
+// Pixel values inspired by https://tailwindcss.com/docs/responsive-design#overview
 export default {
   xs: 0,
   sm: 640,

package/src/theme/index.ts

@@ -17,4 +17,4 @@ export { default as spaces } from './foundations/spaces'
 export { default as transforms } from './foundations/transforms'
 export { default as transitions } from './foundations/transitions'
 export { default as zIndices } from './foundations/zIndices'
-export * from './types'
+export type * from './types'

package/src/theme/types.ts

@@ -1,4 +1,4 @@
-import defaultTheme from './defaultTheme'
+import type defaultTheme from './defaultTheme'
 
 export type Animation = keyof VuiTheme['animations']
 export type Border = keyof VuiTheme['borders']

package/src/theme/vui.d.ts

@@ -1,4 +1,4 @@
-import { VuiTheme } from './types'
+import type { VuiTheme } from './types'
 
 import 'styled-components'
 

package/src/toast/toast.tsx

@@ -3,7 +3,7 @@ import { memo } from 'react'
 import { Box } from '../box'
 import { useVuiContext, v } from '../core'
 import { zIndices } from '../theme'
-import { ToastListItem } from './toast.types'
+import type { ToastListItem } from './toast.types'
 
 export const toasterWidth = 420
 

package/src/toast/toast.types.ts

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react'
+import type { ReactNode } from 'react'
 
-import { NotificationProps } from '../notification'
+import type { NotificationProps } from '../notification'
 
 export type ToastDuration = 'fast' | 'slow' | 'sticky'
 

package/src/toast/useToast.tsx

@@ -1,9 +1,10 @@
-import { ReactNode, useCallback } from 'react'
+import type { ReactNode } from 'react'
+import { useCallback } from 'react'
 
 import { useVuiContext } from '../core'
-import { Notification, NotificationStatus } from '../notification'
+import { Notification } from '../notification'
 import { uid } from '../utils'
-import { ToastDuration, ToastOptions, ToastSetup } from './toast.types'
+import type { ToastDuration, ToastOptions, ToastSetup } from './toast.types'
 
 export const defaultDuration = 'fast'
 export const fastToastDuration = 4000
@@ -35,7 +36,7 @@ export const useToast = () => {
           icon={icon}
           mt={{ md: 1, sm: '4px', xs: '4px' }}
           onClose={() => removeToast(id)}
-          status={status as NotificationStatus}
+          status={status}
           text={text}
           title={title}
           verticalAlign="center"

package/src/tooltip/index.ts

@@ -1,3 +1,3 @@
 export * from './tooltip'
 export { default } from './tooltip'
-export * from './tooltip.types'
+export type * from './tooltip.types'

package/src/tooltip/tooltip.tsx

@@ -1,11 +1,11 @@
 import Tippy from '@tippyjs/react'
-import { JSXElementConstructor, ReactElement } from 'react'
+import type { JSXElementConstructor, ReactElement } from 'react'
 
 import Box from '../box'
 import { useUp, v } from '../core'
 import { Link } from '../link'
 import { bg, pointerPlacement, pointerSize } from './consts'
-import { TooltipProps } from './tooltip.types'
+import type { TooltipProps } from './tooltip.types'
 import { TooltipContent } from './tooltipContent'
 
 /**

package/src/tooltip/tooltip.types.ts

@@ -1,5 +1,5 @@
-import { ChildrenProp } from '../core'
-import { LinkProps } from '../link'
+import type { ChildrenProp } from '../core'
+import type { LinkProps } from '../link'
 
 export interface TooltipProps extends ChildrenProp {
   /** Font size. */

package/src/tooltip/tooltipContent.tsx

@@ -1,6 +1,6 @@
 import Box from '../box'
 import { bg, borderRaduis, boxShadow } from './consts'
-import { TooltipProps } from './tooltip.types'
+import type { TooltipProps } from './tooltip.types'
 
 export const TooltipContent = ({ children, disabled, fontSize = '16px', maxWidth = '400px' }: TooltipProps) => (
   <Box

package/src/tree/context.ts

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

package/src/tree/index.ts

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

package/src/tree/tree.tsx

@@ -1,10 +1,12 @@
-import { Children, ReactElement, useEffect, useMemo } from 'react'
+import type { ReactElement } from 'react'
+import { Children, useEffect, useMemo } from 'react'
 
-import { styled, useStyleConfig, vui, VuiComponent } from '../core'
+import type { VuiComponent } from '../core'
+import { styled, useStyleConfig, vui } from '../core'
 import { List } from '../list'
 import { cs, filterUndefined } from '../utils'
 import { TreeProvider } from './context'
-import { TreeItemId, TreeItemProps, TreeProps } from './tree.types'
+import type { TreeItemId, TreeItemProps, TreeProps } from './tree.types'
 import TreeIcon from './treeIcon'
 import TreeItem from './treeItem'
 import TreeText from './treeText'

package/src/tree/tree.types.ts

@@ -1,11 +1,11 @@
-import { ReactNode, ReactText } from 'react'
+import type { ReactNode, ReactText } from 'react'
 
-import { IconProp } from '../icon'
-import { LinkProps } from '../link'
-import { ListItemProps } from '../list'
-import { SystemProps } from '../system'
-import { ThemingProps } from '../theme'
-import { PropsOf } from '../utils'
+import type { IconProp } from '../icon'
+import type { LinkProps } from '../link'
+import type { ListItemProps } from '../list'
+import type { SystemProps } from '../system'
+import type { ThemingProps } from '../theme'
+import type { PropsOf } from '../utils'
 
 export type TreeProps = SystemProps &
   ThemingProps<'Tree'> & {

package/src/tree/treeIcon.tsx

@@ -1,5 +1,6 @@
 import { useStyleConfig, vui } from '../core'
-import Icon, { IconProps } from '../icon'
+import type { IconProps } from '../icon'
+import Icon from '../icon'
 import { cs } from '../utils'
 import { useTreeContext } from './context'
 

package/src/tree/treeItem.tsx

@@ -5,18 +5,16 @@ import { styled, useStyleConfig, vui } from '../core'
 import { List } from '../list'
 import { cs, filterUndefined, isArray, isReactText, vuiColorToRGBA } from '../utils'
 import { useTreeContext } from './context'
-import { TreeItemProps } from './tree.types'
+import type { TreeItemProps } from './tree.types'
 import TreeIcon from './treeIcon'
 import TreeText from './treeText'
 
-/*@formatter:off*/
 export const TreeItemBase = styled.liBox`
   display: flex;
   flex-direction: column;
   transition-duration: fast;
   width: 100%;
 `
-/*@formatter:on*/
 
 /**
  * Displays a tree item with text and optional icons. Can be shown as selected.
@@ -69,7 +67,7 @@ export const TreeItem = vui<'li', TreeItemProps>((props, ref) => {
 
     const target = e.target as HTMLDivElement
     const active = target?.closest('.vui-tree')?.getElementsByClassName('vui-treeItem-active')[0] as HTMLDivElement
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+
     active ? (active.style.backgroundColor = 'transparent') : null
 
     onClickTreeItem?.(id)