@teamturing/react-kit 2.7.1 → 2.8.0

package/dist/utils/scrollIntoView.d.ts

@@ -0,0 +1,11 @@
+type Options = {
+    behavior?: ScrollBehavior;
+    direction?: 'horizontal' | 'vertical';
+    offset?: number;
+};
+export declare const scrollIntoView: ({ childrenRef, scrollContainerRef, options, }: {
+    childrenRef: HTMLElement;
+    scrollContainerRef?: HTMLElement | undefined;
+    options: Options;
+}) => void;
+export {};

package/esm/core/Tab/TabItem.js

@@ -0,0 +1,217 @@
+import typography from '../../packages/token-studio/esm/token/typography/index.js';
+import { useRef, useContext } from 'react';
+import styled from 'styled-components';
+import '../../node_modules/styled-system/dist/index.esm.js';
+import { scrollIntoView } from '../../utils/scrollIntoView.js';
+import View from '../View/index.js';
+import UnstyledButton from '../_UnstyledButton.js';
+import { TabContext } from './index.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+import { variant } from '../../node_modules/@styled-system/variant/dist/index.esm.js';
+
+const TabItem = ({
+  children,
+  leadingIcon: LeadingIcon,
+  selected = false,
+  onClick,
+  size: propSize,
+  variant: propVariant
+}) => {
+  const ref = useRef(null);
+  const {
+    size: contextSize,
+    variant: contextVariant,
+    containerRef
+  } = useContext(TabContext);
+  const size = propSize ?? contextSize;
+  const variant = propVariant ?? contextVariant;
+  const handleClick = e => {
+    if (containerRef && containerRef.current && ref.current) {
+      scrollIntoView({
+        scrollContainerRef: containerRef.current,
+        childrenRef: ref.current,
+        options: {
+          behavior: 'smooth',
+          offset: 72
+        }
+      });
+    }
+    onClick?.(e);
+  };
+  return /*#__PURE__*/jsxRuntimeExports.jsx(BaseTabItem, {
+    role: 'tab',
+    ref: ref,
+    variant: variant,
+    size: size,
+    leadingIcon: LeadingIcon,
+    selected: selected,
+    onClick: handleClick,
+    children: /*#__PURE__*/jsxRuntimeExports.jsxs(View, {
+      sx: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        columnGap: 1
+      },
+      children: [LeadingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingIcon, {}) : null, /*#__PURE__*/jsxRuntimeExports.jsx(View, {
+        children: children
+      })]
+    })
+  });
+};
+const BaseTabItem = styled(UnstyledButton)(({
+  theme
+}) => ({
+  'width': 'initial',
+  'position': 'relative',
+  'transition': 'background-color 100ms, color 100ms',
+  'whiteSpace': 'nowrap',
+  '& svg': {
+    transition: 'color 100ms'
+  },
+  '&:focus-visible': {
+    outlineColor: theme.colors['border/focused'],
+    outlineStyle: 'solid',
+    outlineWidth: 2,
+    outlineOffset: 2
+  }
+}), () => variant({
+  prop: 'size',
+  variants: {
+    l: {
+      'px': 4,
+      'py': 2,
+      'fontSize': typography['s'].fontSize,
+      'fontWeight': typography['s'].fontWeight,
+      'lineHeight': typography['s'].lineHeight,
+      '& svg': {
+        width: 20,
+        height: 20
+      }
+    },
+    m: {
+      'px': 4,
+      'py': 2,
+      'fontSize': typography['xs'].fontSize,
+      'fontWeight': typography['xs'].fontWeight,
+      'lineHeight': typography['xs'].lineHeight,
+      '& svg': {
+        width: 20,
+        height: 20
+      }
+    },
+    s: {
+      'px': 3,
+      'py': 2,
+      'fontSize': typography['xxs'].fontSize,
+      'fontWeight': typography['xxs'].fontWeight,
+      'lineHeight': typography['xxs'].lineHeight,
+      '& svg': {
+        width: 16,
+        height: 16
+      }
+    }
+  }
+}), ({
+  theme,
+  selected
+}) => variant({
+  prop: 'variant',
+  variants: {
+    plain: {
+      borderRadius: theme.radii.full,
+      ...(selected ? {
+        'color': theme.colors['text/neutral'],
+        'backgroundColor': theme.colors['bg/selected/subtle'],
+        '& svg': {
+          color: theme.colors['icon/selected']
+        }
+      } : {
+        'color': theme.colors['text/neutral/subtler'],
+        'backgroundColor': theme.colors['bg/neutral/subtler'],
+        '& svg': {
+          color: theme.colors['icon/neutral']
+        },
+        '&:hover, &:active': {
+          'color': theme.colors['text/neutral/subtle'],
+          '& svg': {
+            color: theme.colors['icon/neutral/bolder']
+          }
+        }
+      })
+    },
+    outlined: {
+      borderRadius: theme.radii.full,
+      ...(selected ? {
+        'color': theme.colors['text/inverse'],
+        'backgroundColor': theme.colors['bg/selected'],
+        '& svg': {
+          color: theme.colors['icon/inverse']
+        }
+      } : {
+        'color': theme.colors['text/neutral/subtler'],
+        'backgroundColor': theme.colors['bg/neutral/subtler'],
+        '& svg': {
+          color: theme.colors['icon/neutral']
+        },
+        '&:after': {
+          content: '""',
+          position: 'absolute',
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+          borderWidth: 1,
+          borderStyle: 'solid',
+          borderColor: theme.colors['border/neutral/bolder'],
+          borderRadius: theme.radii.full,
+          boxSizing: 'border-box'
+        },
+        '&:hover': {
+          backgroundColor: theme.colors['bg/neutral/subtler/hovered']
+        },
+        '&:active': {
+          backgroundColor: theme.colors['bg/neutral/subtler/pressed']
+        }
+      })
+    },
+    underline: {
+      borderRadius: theme.radii.xxs,
+      ...(selected ? {
+        'color': theme.colors['text/selected'],
+        'backgroundColor': theme.colors['bg/neutral/subtler'],
+        '& svg': {
+          color: theme.colors['icon/selected']
+        },
+        ':after': {
+          content: '""',
+          position: 'absolute',
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+          borderBottomWidth: 2,
+          borderBottomStyle: 'solid',
+          borderBottomColor: theme.colors['border/selected'],
+          borderRadius: theme.radii.none,
+          boxSizing: 'border-box'
+        }
+      } : {
+        'color': theme.colors['text/neutral/subtler'],
+        'backgroundColor': theme.colors['bg/neutral/subtler'],
+        '& svg': {
+          color: theme.colors['icon/neutral']
+        },
+        ':hover, :active': {
+          'color': theme.colors['text/neutral/subtle'],
+          '& svg': {
+            color: theme.colors['icon/neutral/bolder']
+          }
+        }
+      })
+    }
+  }
+}));
+
+export { TabItem as default };

package/esm/core/Tab/index.js

@@ -0,0 +1,147 @@
+import { createContext, useRef, useState, useEffect } from 'react';
+import SvgChevronLeft from '../../packages/icons/esm/ChevronLeft.js';
+import SvgChevronRight from '../../packages/icons/esm/ChevronRight.js';
+import elevation from '../../packages/token-studio/esm/token/elevation/index.js';
+import gradient from '../../packages/token-studio/esm/token/gradient/index.js';
+import '../../packages/token-studio/esm/token/typography/index.js';
+import throttle from '../../node_modules/lodash.throttle/index.js';
+import useResize from '../../hook/useResize.js';
+import { forcePixelValue } from '../../utils/forcePixelValue.js';
+import IconButton from '../IconButton/index.js';
+import View from '../View/index.js';
+import TabItem from './TabItem.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const TabContext = /*#__PURE__*/createContext({});
+const Tab = ({
+  variant = 'plain',
+  size = 'm',
+  gap = 2,
+  children
+}) => {
+  const rootRef = useRef(null);
+  const [isLeftButtonVisible, setIsLeftButtonVisible] = useState(rootRef.current ? rootRef.current.scrollLeft > 0 : false);
+  const [isRightButtonVisible, setIsRightButtonVisible] = useState(rootRef.current ? rootRef.current.clientWidth + rootRef.current.scrollLeft < rootRef.current.scrollWidth : false);
+  const handleScrollButtonVisibility = () => {
+    if (rootRef.current) {
+      setIsLeftButtonVisible(rootRef.current ? rootRef.current.scrollLeft > 0 : false);
+      setIsRightButtonVisible(rootRef.current ? rootRef.current.clientWidth + Math.ceil(rootRef.current.scrollLeft) < rootRef.current.scrollWidth : false);
+    }
+  };
+  const buttonWidth = 32;
+  const gradientWidth = 40;
+  const handleLeftButtonClick = () => {
+    if (rootRef.current) {
+      rootRef.current.scrollTo({
+        left: rootRef.current.scrollLeft - rootRef.current.clientWidth + buttonWidth + gradientWidth,
+        behavior: 'smooth'
+      });
+    }
+  };
+  const handleRightButtonClick = () => {
+    if (rootRef.current) {
+      rootRef.current.scrollTo({
+        left: rootRef.current.scrollLeft + rootRef.current.clientWidth - (buttonWidth + gradientWidth),
+        behavior: 'smooth'
+      });
+    }
+  };
+  useEffect(() => {
+    handleScrollButtonVisibility();
+  }, []);
+  useResize(handleScrollButtonVisibility);
+  return /*#__PURE__*/jsxRuntimeExports.jsx(TabContext.Provider, {
+    value: {
+      variant,
+      size,
+      containerRef: rootRef
+    },
+    children: /*#__PURE__*/jsxRuntimeExports.jsxs(View, {
+      position: 'relative',
+      children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
+        ref: rootRef,
+        role: 'tablist',
+        sx: {
+          'width': 'auto',
+          'display': 'flex',
+          'flexDirection': 'row',
+          'alignItems': 'center',
+          'columnGap': gap,
+          'overflowX': 'auto',
+          'msOverflowStyle': 'none',
+          '::-webkit-scrollbar': {
+            display: 'none'
+          }
+        },
+        onScroll: throttle(handleScrollButtonVisibility, 150),
+        children: children
+      }), /*#__PURE__*/jsxRuntimeExports.jsxs(View, {
+        display: ['none', 'initial', 'initial'],
+        children: [isLeftButtonVisible ? /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
+          children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
+            sx: {
+              position: 'absolute',
+              top: 0,
+              left: forcePixelValue(buttonWidth),
+              bottom: 0,
+              width: forcePixelValue(gradientWidth),
+              height: '100%',
+              background: `linear-gradient(${gradient['overlay/floating/toright']})`,
+              pointerEvents: 'none'
+            }
+          }), /*#__PURE__*/jsxRuntimeExports.jsx(View, {
+            sx: {
+              position: 'absolute',
+              display: 'flex',
+              alignItems: 'center',
+              top: 0,
+              left: 0,
+              bottom: 0,
+              backgroundColor: elevation.surface
+            },
+            children: /*#__PURE__*/jsxRuntimeExports.jsx(IconButton, {
+              size: 's',
+              variant: 'plain-bold',
+              icon: SvgChevronLeft,
+              onClick: handleLeftButtonClick
+            })
+          })]
+        }) : null, isRightButtonVisible ? /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
+          children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
+            sx: {
+              position: 'absolute',
+              top: 0,
+              right: forcePixelValue(buttonWidth),
+              bottom: 0,
+              width: forcePixelValue(gradientWidth),
+              height: '100%',
+              background: `linear-gradient(${gradient['overlay/floating/toleft']})`,
+              pointerEvents: 'none'
+            }
+          }), /*#__PURE__*/jsxRuntimeExports.jsx(View, {
+            sx: {
+              position: 'absolute',
+              display: 'flex',
+              alignItems: 'center',
+              top: 0,
+              right: 0,
+              bottom: 0,
+              backgroundColor: elevation.surface
+            },
+            children: /*#__PURE__*/jsxRuntimeExports.jsx(IconButton, {
+              size: 's',
+              variant: 'plain-bold',
+              icon: SvgChevronRight,
+              onClick: handleRightButtonClick
+            })
+          })]
+        }) : null]
+      })]
+    })
+  });
+};
+var index = Object.assign(Tab, {
+  Item: TabItem
+});
+
+export { TabContext, index as default };

package/esm/core/Toast/index.js

@@ -0,0 +1,76 @@
+import 'react';
+import SvgCheckInCircle from '../../packages/icons/esm/CheckInCircle.js';
+import SvgExclamationPointInCircle from '../../packages/icons/esm/ExclamationPointInCircle.js';
+import styled from 'styled-components';
+import '../../node_modules/styled-system/dist/index.esm.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+import { variant } from '../../node_modules/@styled-system/variant/dist/index.esm.js';
+
+const Toast = ({
+  variant = 'success',
+  resizing = 'hug',
+  children
+}) => {
+  const IconByVariant = {
+    success: SvgCheckInCircle,
+    warning: SvgExclamationPointInCircle
+  }[variant];
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(BaseToast, {
+    variant: variant,
+    resizing: resizing,
+    children: [/*#__PURE__*/jsxRuntimeExports.jsx(IconByVariant, {}), children]
+  });
+};
+const BaseToast = styled.div(({
+  theme
+}) => ({
+  'display': 'flex',
+  'flexDirection': 'row',
+  'alignItems': 'center',
+  'columnGap': theme.space[3],
+  'backgroundColor': theme.colors['bg/neutral/bold'],
+  'color': theme.colors['text/inverse'],
+  'borderRadius': theme.radii.m,
+  'padding': theme.space[4],
+  'fontSize': theme.fontSizes.s,
+  'fontWeight': theme.fontWeights.medium,
+  'lineHeight': theme.lineHeights[2],
+  '& div': {
+    margin: 0,
+    display: 'inline-block'
+  },
+  '& svg': {
+    width: 24,
+    minWidth: 24,
+    height: 24,
+    minHeight: 24
+  }
+}), ({
+  theme
+}) => variant({
+  prop: 'variant',
+  variants: {
+    success: {
+      '& svg': {
+        color: theme.colors['icon/success']
+      }
+    },
+    warning: {
+      '& svg': {
+        color: theme.colors['icon/warning']
+      }
+    }
+  }
+}), () => variant({
+  prop: 'resizing',
+  variants: {
+    fill: {
+      width: '100%'
+    },
+    hug: {
+      width: 'fit-content'
+    }
+  }
+}));
+
+export { Toast as default };

package/esm/core/Tooltip/index.js

@@ -0,0 +1,256 @@
+import styled, { keyframes } from 'styled-components';
+import { forcePixelValue } from '../../utils/forcePixelValue.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const Tooltip = ({
+  children,
+  direction = 'top-center',
+  text,
+  className: propClassName
+}) => {
+  const className = [propClassName, `tooltip-direction-${direction}`].join(' ');
+  return /*#__PURE__*/jsxRuntimeExports.jsx(BaseTooltip, {
+    role: 'tooltip',
+    "aria-label": text,
+    className: className,
+    children: children
+  });
+};
+const tooltipAppear = keyframes`
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+`;
+const BaseTooltip = styled.span`
+  display: inline-block;
+  position: relative;
+
+  &::before {
+    position: absolute;
+    z-index: 1000001;
+    display: none;
+    width: 0px;
+    height: 0px;
+    color: ${({
+  theme
+}) => theme.colors['bg/neutral/bolder']};
+    pointer-events: none;
+    content: '';
+    border: 6px solid transparent;
+    opacity: 0;
+  }
+
+  &::after {
+    position: absolute;
+    z-index: 1000000;
+    display: none;
+    padding: ${({
+  theme
+}) => `${forcePixelValue(theme.space[2])} ${forcePixelValue(theme.space[3])}`};
+    font-size: ${({
+  theme
+}) => forcePixelValue(theme.fontSizes.xxs)};
+    font-weight: ${({
+  theme
+}) => theme.fontWeights.medium};
+    line-height: ${({
+  theme
+}) => theme.lineHeights[2]};
+    -webkit-font-smoothing: subpixel-antialiased;
+    color: ${({
+  theme
+}) => theme.colors['text/inverse']};
+    text-align: center;
+    text-decoration: none;
+    text-shadow: none;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: break-word;
+    white-space: pre;
+    pointer-events: none;
+    content: attr(aria-label);
+    background: ${({
+  theme
+}) => theme.colors['bg/neutral/bolder']};
+    border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.xs)};
+    box-shadow: ${({
+  theme
+}) => theme.shadows['shadow/overlay']};
+    opacity: 0;
+  }
+
+  &:hover,
+  &:active,
+  &:focus {
+    &::before,
+    &::after {
+      display: table-cell;
+      text-decoration: none;
+      animation-name: ${tooltipAppear};
+      animation-duration: 100ms;
+      animation-fill-mode: forwards;
+      animation-timing-function: ease-in;
+      animation-delay: 300ms;
+    }
+  }
+
+  &.tooltip-direction-bottom-center,
+  &.tooltip-direction-bottom-right,
+  &.tooltip-direction-bottom-left {
+    &::after {
+      top: 100%;
+      right: 50%;
+      margin-top: ${({
+  theme
+}) => forcePixelValue(theme.space[2])};
+    }
+
+    &::before {
+      top: auto;
+      right: 50%;
+      bottom: ${({
+  theme
+}) => forcePixelValue(theme.space[-2] + theme.space['-0.25'])};
+      margin-right: -6px;
+      border-bottom-color: ${({
+  theme
+}) => theme.colors['bg/neutral/bolder']};
+    }
+  }
+
+  &.tooltip-direction-bottom-right {
+    &::after {
+      right: auto;
+      left: 50%;
+      margin-left: -${({
+  theme
+}) => forcePixelValue(theme.space[4])};
+    }
+  }
+
+  &.tooltip-direction-bottom-left::after {
+    margin-right: -${({
+  theme
+}) => forcePixelValue(theme.space[4])};
+  }
+
+  // Tooltips above the object
+  &.tooltip-direction-top-center,
+  &.tooltip-direction-top-right,
+  &.tooltip-direction-top-left {
+    &::after {
+      right: 50%;
+      bottom: 100%;
+      margin-bottom: ${({
+  theme
+}) => forcePixelValue(theme.space[2])};
+    }
+
+    &::before {
+      top: ${({
+  theme
+}) => forcePixelValue(theme.space[-2] + theme.space['-0.25'])};
+      right: 50%;
+      bottom: auto;
+      margin-right: -6px;
+      border-top-color: ${({
+  theme
+}) => theme.colors['bg/neutral/bolder']};
+    }
+  }
+
+  &.tooltip-direction-top-right {
+    &::after {
+      right: auto;
+      left: 50%;
+      margin-left: -${({
+  theme
+}) => forcePixelValue(theme.space[4])};
+    }
+  }
+
+  &.tooltip-direction-top-left::after {
+    margin-right: -${({
+  theme
+}) => forcePixelValue(theme.space[4])};
+  }
+
+  &.tooltip-direction-top-center::after,
+  &.tooltip-direction-bottom-center::after {
+    transform: translateX(50%);
+  }
+
+  &.tooltip-direction-left {
+    &::after {
+      right: 100%;
+      bottom: 50%;
+      margin-right: ${({
+  theme
+}) => forcePixelValue(theme.space[2])};
+      transform: translateY(50%);
+    }
+
+    &::before {
+      top: 50%;
+      bottom: 50%;
+      left: ${({
+  theme
+}) => forcePixelValue(theme.space[-2] + theme.space['-0.25'])};
+      margin-top: -6px;
+      border-left-color: ${({
+  theme
+}) => theme.colors['bg/neutral/bolder']};
+    }
+  }
+
+  &.tooltip-direction-right {
+    &::after {
+      bottom: 50%;
+      left: 100%;
+      margin-left: ${({
+  theme
+}) => forcePixelValue(theme.space[2])};
+      transform: translateY(50%);
+    }
+
+    &::before {
+      top: 50%;
+      right: ${({
+  theme
+}) => forcePixelValue(theme.space[-2] + theme.space['-0.25'])};
+      bottom: 50%;
+      margin-top: -6px;
+      border-right-color: ${({
+  theme
+}) => theme.colors['bg/neutral/bolder']};
+    }
+  }
+
+  &::after {
+    width: max-content;
+    max-width: 240px;
+    word-wrap: break-word;
+    white-space: pre-line;
+    border-collapse: separate;
+  }
+
+  &.tooltip-direction-bottom-center::after,
+  &.tooltip-direction-top-center::after {
+    right: auto;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &.tooltip-direction-left::after,
+  &.tooltip-direction-right::after {
+    right: 100%;
+  }
+`;
+
+export { Tooltip as default };