@veracity/vui 1.2.2 → 1.3.0-rc.0

package/dist/esm/theme/components.d.ts

@@ -608,6 +608,32 @@ declare const _default: {
         };
         variants: {};
     };
+    Message: {
+        baseStyle: {};
+        defaultProps: {
+            variant: string;
+        };
+        sizes: {
+            xs: {};
+            sm: {};
+            md: {};
+            lg: {};
+        };
+        variants: {
+            info: {
+                color: string;
+            };
+            warning: {
+                color: string;
+            };
+            error: {
+                color: string;
+            };
+            success: {
+                color: string;
+            };
+        };
+    };
     Modal: {
         baseStyle: {};
         defaultProps: {};

package/dist/esm/theme/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/theme/components.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,wBAmCC"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/theme/components.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,wBAoCC"}

package/dist/esm/theme/components.js

@@ -15,6 +15,7 @@ import Input from '../input/theme';
 import Link from '../link/theme';
 import List from '../list/theme';
 import Menu from '../menu/theme';
+import Message from '../message/theme';
 import Modal from '../modal/theme';
 import Notification from '../notification/theme';
 import P from '../p/theme';
@@ -50,6 +51,7 @@ export default {
     Link,
     List,
     Menu,
+    Message,
     Modal,
     Notification,
     P,

package/dist/esm/theme/defaultTheme.d.ts

@@ -804,6 +804,32 @@ declare const defaultTheme: {
             };
             variants: {};
         };
+        Message: {
+            baseStyle: {};
+            defaultProps: {
+                variant: string;
+            };
+            sizes: {
+                xs: {};
+                sm: {};
+                md: {};
+                lg: {};
+            };
+            variants: {
+                info: {
+                    color: string;
+                };
+                warning: {
+                    color: string;
+                };
+                error: {
+                    color: string;
+                };
+                success: {
+                    color: string;
+                };
+            };
+        };
         Modal: {
             baseStyle: {};
             defaultProps: {};

package/dist/esm/theme/defaultTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGjB,CAAA;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGjB,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/esm/tooltip/tooltip.js

@@ -12,7 +12,7 @@ import { TooltipContent } from './tooltipContent';
  *
  * */
 export const Tooltip = (props) => {
-    const { children, fontSize = '16px', linkText, linkProps, maxWidth = '400px', text = 'demo', placement = 'top' } = props;
+    const { children, fontSize = '16px', linkText, linkProps, maxWidth = '400px', text = 'Tooltip', placement = 'top' } = props;
     const isDesktop = useUp('md');
     return (React.createElement(Tippy, { content: React.createElement(TooltipContent, { fontSize: fontSize, maxWidth: maxWidth },
             isDesktop && (React.createElement(Box, { bg: color, bottom: pointerPlacement[placement].bottom, h: `${pointerSize}px`, left: pointerPlacement[placement].left, position: "absolute", right: pointerPlacement[placement].right, top: pointerPlacement[placement].top, transform: `translate(${pointerPlacement[placement].translate}) rotate(45deg)`, w: `${pointerSize}px` })),

package/dist/esm/utils/consts.d.ts

@@ -1,2 +1,5 @@
 export declare const __DEV__: boolean;
+export declare const activeClassName = "vui-active";
+export declare const activeItemShade = 30;
+export declare const dimmedBorderColor = "grey.40";
 //# sourceMappingURL=consts.d.ts.map

package/dist/esm/utils/consts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../../src/utils/consts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,SAAwC,CAAA"}
+{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../../src/utils/consts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,SAAwC,CAAA;AAE5D,eAAO,MAAM,eAAe,eAAe,CAAA;AAE3C,eAAO,MAAM,eAAe,KAAK,CAAA;AAEjC,eAAO,MAAM,iBAAiB,YAAY,CAAA"}

package/dist/esm/utils/consts.js

@@ -1 +1,4 @@
 export const __DEV__ = process.env.NODE_ENV !== 'production';
+export const activeClassName = 'vui-active';
+export const activeItemShade = 30;
+export const dimmedBorderColor = 'grey.40';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "1.2.2",
+  "version": "1.3.0-rc.0",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/button/button.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react'
 
 import { useButtonGroupContext } from '../buttonGroup/context'
 import { styled, useStyleConfig, vui, VuiComponent } from '../core'
-import { cs, filterUndefined, isReactText, isString } from '../utils'
+import { activeClassName, cs, filterUndefined, isReactText, isString } from '../utils'
 import { ButtonProps } from './button.types'
 import ButtonIcon from './buttonIcon'
 import ButtonText from './buttonText'
@@ -62,6 +62,7 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
     icon,
     iconLeft,
     iconRight,
+    isActive,
     isElevated,
     isFullWidth,
 		isLoading, // eslint-disable-line
@@ -128,7 +129,7 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
     <ButtonProvider value={context}>
       <ButtonBase
         borderWidth={border}
-        className={cs('vui-button', className)}
+        className={cs('vui-button', className, isActive && activeClassName)}
         disabled={disabled}
         focusRing={3}
         h={h}

package/src/button/button.types.ts

@@ -3,16 +3,20 @@ import { SystemProps } from '../system'
 import { ThemingProps } from '../theme'
 import { AnyString } from '../utils'
 
+export type ButtonColorScheme = 'blue' | 'green' | 'pink' | 'prussian' | 'red'
+
 export type ButtonProps = SystemProps &
   ThemingProps<'Button'> & {
     /** Available theme colors for this component. @default prussian */
-    colorScheme?: 'blue' | 'green' | 'pink' | 'prussian' | 'red'
+    colorScheme?: ButtonColorScheme
     /** 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
+    /** Adds an active class name for further handling. */
+    isActive?: boolean
     /** Adds box shadow style. @default false */
     isElevated?: boolean
     /** Makes the button take full width of the container. @deprecated */

package/src/buttonGroup/buttonGroup.tsx

@@ -1,12 +1,12 @@
 import React, { useMemo } from 'react'
 
 import { styled, th, vui } from '../core'
-import { cs, filterUndefined } from '../utils'
+import { activeClassName, activeItemShade, cs, filterUndefined } from '../utils'
 import { ButtonGroupProps } from './buttonGroup.types'
 import { ButtonGroupProvider } from './context'
 import { getInnerBorderColor } from './helpers'
 
-export const ButtonGroupBase = styled.divBox<{ innerBorderColor: string }>`
+export const ButtonGroupBase = styled.divBox<{ colorScheme?: string; innerBorderColor: string }>`
   display: flex;
 
   // Border color between Buttons
@@ -34,6 +34,17 @@ export const ButtonGroupBase = styled.divBox<{ innerBorderColor: string }>`
     border-left-width: 0px;
     border-top-left-radius: 0;
   }
+
+  // Border color
+  > *,
+  *:hover {
+    border-color: ${p => th.color(p.innerBorderColor)};
+  }
+
+  //
+  > .${activeClassName} {
+    background-color: ${p => th.color(`${p.colorScheme}.${activeItemShade}`)};
+  }
 `
 
 /**
@@ -41,9 +52,7 @@ export const ButtonGroupBase = styled.divBox<{ innerBorderColor: string }>`
  * Exposes some props to the children via context.
  */
 export const ButtonGroup = vui<'div', ButtonGroupProps>((props, ref) => {
-  const { className, colorScheme, disabled, size, variant, ...rest } = props
-
-  const innerBorderColor = getInnerBorderColor(props)
+  const { className, colorScheme, disabled, innerBorderColor, size, variant, ...rest } = props
 
   const context = useMemo(
     () => filterUndefined({ colorScheme, disabled, size, variant }),
@@ -52,7 +61,11 @@ export const ButtonGroup = vui<'div', ButtonGroupProps>((props, ref) => {
 
   return (
     <ButtonGroupProvider value={context}>
-      <ButtonGroupBase className={cs('vui-buttonGroup', className)} {...{ innerBorderColor, ref }} {...rest} />
+      <ButtonGroupBase
+        className={cs('vui-buttonGroup', className)}
+        {...{ colorScheme, innerBorderColor: innerBorderColor ? innerBorderColor : getInnerBorderColor(props), ref }}
+        {...rest}
+      />
     </ButtonGroupProvider>
   )
 })

package/src/buttonGroup/buttonGroup.types.ts

@@ -1,10 +1,13 @@
+import { ButtonColorScheme } from '../button/button.types'
 import { SystemProps } from '../system'
 import { ThemingProps } from '../theme'
 
 export type ButtonGroupProps = SystemProps &
   ThemingProps<'ButtonGroup'> & {
     /** Available theme colors for this component. */
-    colorScheme?: 'blue' | 'green' | 'pink' | 'prussian' | 'red'
+    colorScheme?: ButtonColorScheme
     /** Makes all wrapped buttons disabled. */
     disabled?: boolean
+    /** Border color between the buttons. */
+    innerBorderColor?: string
   }

package/src/buttonGroup/helpers.ts

@@ -1,7 +1,7 @@
 import { ButtonGroupProps } from './buttonGroup.types'
 
 /** Returns appropriate color for the border between the buttons. */
-export function getInnerBorderColor(props: ButtonGroupProps) {
+export function getInnerBorderColor(props: ButtonGroupProps): string {
   const { colorScheme = 'prussian', disabled, variant = 'solid' } = props
 
   if (disabled) return 'disabled.border'

package/src/buttonToggleGroup/buttonToggleGroup.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+import ButtonGroup from '../buttonGroup'
+import { cs, dimmedBorderColor } from '../utils'
+import { ButtonToggleGroupProps } from './buttonToggleGroup.types'
+
+/**
+ * Organizes layout and display of multiple buttons. Based on ButtonGroup and should be used to toggle options.
+ */
+export const ButtonToggleGroup = (props: ButtonToggleGroupProps) => {
+  const { className, isDimmedBorder } = props
+
+  return (
+    <ButtonGroup
+      className={cs('vui-buttonToggleGroup', className)}
+      colorScheme="blue"
+      innerBorderColor={isDimmedBorder ? dimmedBorderColor : ''}
+      variant="outlined"
+      {...props}
+    />
+  )
+}
+
+export default ButtonToggleGroup

package/src/buttonToggleGroup/buttonToggleGroup.types.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react'
+
+import { ButtonGroupProps } from '../buttonGroup'
+import { ThemingProps } from '../theme'
+
+export type ButtonToggleGroupProps = ButtonGroupProps &
+  ThemingProps<'ButtonToggleGroup'> & {
+    className?: string
+    /** Sets dimmed borders to the buttons. */
+    isDimmedBorder?: boolean
+    children: ReactNode
+  }

package/src/buttonToggleGroup/index.ts

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

package/src/index.ts

@@ -2,6 +2,7 @@ export * from './avatar'
 export * from './box'
 export * from './button'
 export * from './buttonGroup'
+export * from './buttonToggleGroup'
 export * from './card'
 export * from './checkbox'
 export * from './core'
@@ -19,6 +20,7 @@ export * from './link'
 export * from './list'
 export * from './logo'
 export * from './menu'
+export * from './message'
 export * from './modal'
 export * from './notification'
 export * from './p'

package/src/message/consts.ts

@@ -0,0 +1,13 @@
+export const iconDictionary = {
+  info: 'falInfoCircle',
+  warning: 'falExclamationTriangle',
+  error: 'falExclamationTriangle',
+  success: 'falCheckCircle'
+}
+
+export const spacingDictionary = {
+  md: 8,
+  xs: 4,
+  sm: 6,
+  lg: 10
+}

package/src/message/index.ts

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

package/src/message/message.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import { styled, useStyleConfig, vui } from '../core'
+import { Icon } from '../icon'
+import { T } from '../t'
+import { cs } from '../utils'
+import { iconDictionary, spacingDictionary } from './consts'
+import { MessageProps } from './message.types'
+
+export const MessageBase = styled.divBox`
+  transition-duration: fast;
+`
+
+/** Displays a simple message text. */
+export const Message = vui<'span', MessageProps>((props, ref) => {
+  const { children, className, text, size = 'md', variant = 'info', ...rest } = props
+  const styles = useStyleConfig('Message', props)
+
+  return (
+    <MessageBase className={cs('vui-message', className)} ref={ref} {...styles} {...rest}>
+      <T centerV size={size}>
+        <Icon mr={`${spacingDictionary[size]}px`} name={iconDictionary[variant]} size={size} />
+        {children ?? text}
+      </T>
+    </MessageBase>
+  )
+})
+
+export default Message

package/src/message/message.types.ts

@@ -0,0 +1,10 @@
+import { ReactText } from 'react'
+
+import { SystemProps } from '../system'
+import { ThemingProps } from '../theme'
+
+export type MessageProps = SystemProps &
+  ThemingProps<'Message'> & {
+    /** Displays given text if no children are provided. */
+    text?: ReactText
+  }

package/src/message/theme.ts

@@ -0,0 +1,34 @@
+const baseStyle = {}
+
+const defaultProps = {
+  variant: 'info'
+}
+
+const sizes = {
+  xs: {},
+  sm: {},
+  md: {},
+  lg: {}
+}
+
+const variants = {
+  info: {
+    color: 'blue.80'
+  },
+  warning: {
+    color: 'yellow.90'
+  },
+  error: {
+    color: 'red.80'
+  },
+  success: {
+    color: 'green.80'
+  }
+}
+
+export default {
+  baseStyle,
+  defaultProps,
+  sizes,
+  variants
+}

package/src/theme/components.ts

@@ -15,6 +15,7 @@ import Input from '../input/theme'
 import Link from '../link/theme'
 import List from '../list/theme'
 import Menu from '../menu/theme'
+import Message from '../message/theme'
 import Modal from '../modal/theme'
 import Notification from '../notification/theme'
 import P from '../p/theme'
@@ -51,6 +52,7 @@ export default {
   Link,
   List,
   Menu,
+  Message,
   Modal,
   Notification,
   P,

package/src/tooltip/tooltip.tsx

@@ -21,7 +21,7 @@ export const Tooltip = (props: TooltipProps) => {
     linkText,
     linkProps,
     maxWidth = '400px',
-    text = 'demo',
+    text = 'Tooltip',
     placement = 'top'
   } = props
 

package/src/utils/consts.ts

@@ -1 +1,7 @@
 export const __DEV__ = process.env.NODE_ENV !== 'production'
+
+export const activeClassName = 'vui-active'
+
+export const activeItemShade = 30
+
+export const dimmedBorderColor = 'grey.40'