@veracity/vui 1.1.0 → 1.1.2

package/src/tabs/tabsNavBar.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+
+import Box from '../box'
+import { vui } from '../core'
+import { List, ListItem } from '../list'
+import { cs } from '../utils'
+import { TabNavBarProps } from './tabs.types'
+
+export const TabsNavBar = vui<'div', TabNavBarProps>((props, ref) => {
+  const { tabs, onNavItemClick, activeNavItem, animationDirection, size } = props
+
+  return (
+    <List
+      borderBottom="1px solid grey.40"
+      className={cs('vui-tabsNavBar')}
+      display="flex"
+      isInteractive
+      ref={ref}
+      size={size}
+      w={1}
+    >
+      {tabs?.map?.(tab => (
+        <ListItem
+          className={`vui-tabsNavBarItem vui-tabsNavBarItem-${tab?.id}`}
+          disabled={tab.disabled}
+          display="inline-flex"
+          key={tab.id}
+          onClick={() => tab?.id !== undefined && onNavItemClick(tab.id)}
+          position="relative"
+        >
+          {tab.title}
+          {!tab.disabled && tab.id === activeNavItem && (
+            <Box
+              animation={animationDirection}
+              bg="prussian.80"
+              bottom="-1px"
+              h={`${size === 'sm' ? 2 : 4}px`}
+              left={0}
+              position="absolute"
+              w={1}
+            >
+              &nbsp;
+            </Box>
+          )}
+        </ListItem>
+      ))}
+    </List>
+  )
+})
+
+export default TabsNavBar

package/src/tabs/theme.ts

@@ -0,0 +1,22 @@
+const baseStyle = {}
+
+const defaultProps = {}
+
+const parts = ['container', 'tabsNavBar', 'tab']
+
+const sizes = {
+  sm: {},
+  md: {},
+  lg: {},
+  xl: {}
+}
+
+const variants = {}
+
+export default {
+  baseStyle,
+  defaultProps,
+  parts,
+  sizes,
+  variants
+}

package/src/tabs/useTabsState.ts

@@ -0,0 +1,11 @@
+import { useState } from 'react'
+
+import { AnimationDirection, TabProps } from './tabs.types'
+
+export const useTabsState = (initialAnimation: AnimationDirection, activeTabId?: number) => {
+  const [tabs, setTabs] = useState<TabProps[]>([])
+  const [activeTabIndex, setActiveTabIndex] = useState<number>(activeTabId ?? 0)
+  const [animationDirection, setAnimationDirection] = useState<AnimationDirection>(initialAnimation)
+
+  return { tabs, setTabs, activeTabIndex, setActiveTabIndex, animationDirection, setAnimationDirection }
+}

package/src/theme/components.ts

@@ -21,6 +21,7 @@ import P from '../p/theme'
 import Pagination from '../pagination/theme'
 import Panel from '../panel/theme'
 import Popover from '../popover/theme'
+import Progress from '../progress/theme'
 import Radio from '../radio/theme'
 import Select from '../select/theme'
 import Skeleton from '../skeleton/theme'
@@ -28,6 +29,7 @@ import Spinner from '../spinner/theme'
 import Switch from '../switch/theme'
 import T from '../t/theme'
 import Table from '../table/theme'
+import Tabs from '../tabs/theme'
 import Tag from '../tag/theme'
 import Textarea from '../textarea/theme'
 
@@ -54,6 +56,7 @@ export default {
   P,
   Pagination,
   Panel,
+  Progress,
   Popover,
   Radio,
   Select,
@@ -62,6 +65,7 @@ export default {
   Switch,
   T,
   Table,
+  Tabs,
   Tag,
   Textarea
 }

package/src/tooltip/tooltip.tsx

@@ -12,7 +12,7 @@ import { TooltipProps } from './tooltip.types'
  *
  * */
 export const Tooltip = (props: TooltipProps) => {
-  const { children, text = 'demo', placement = 'top', isAnimated = false } = props
+  const { children, maxWidth = '400px', text = 'demo', placement = 'top', isAnimated = false } = props
 
   return (
     <Popover placement={placement} trigger="mouseenter">
@@ -24,6 +24,7 @@ export const Tooltip = (props: TooltipProps) => {
         bg={color}
         color="white"
         m={1}
+        maxW={maxWidth}
         p={1}
         pl={2}
         pr={2}

package/src/tooltip/tooltip.types.ts

@@ -7,5 +7,7 @@ export type TooltipProps = {
   placement?: 'top' | 'left' | 'bottom' | 'right'
   /** Displays the tooltip with animation, without the arrow pointer. */
   isAnimated?: boolean
+  /** Sets maximum width to the tooltip body. */
+  maxWidth?: string
   children?: ReactNode
 }