@teamturing/react-kit 2.4.0 → 2.6.0

package/dist/utils/index.d.ts

@@ -1,3 +1,4 @@
 export { forcePixelValue } from './forcePixelValue';
 export { isArray } from './isArray';
+export { isFunction } from './isFunction';
 export { isNullable } from './isNullable';

package/dist/utils/isFunction.d.ts

@@ -0,0 +1 @@
+export declare const isFunction: (value: any) => value is (...args: any[]) => any;

package/esm/_virtual/index.js

@@ -0,0 +1,3 @@
+var reactIs = {exports: {}};
+
+export { reactIs as __module };

package/esm/_virtual/react-is.development.js

@@ -0,0 +1,3 @@
+var reactIs_development = {};
+
+export { reactIs_development as __exports };

package/esm/_virtual/react-is.production.min.js

@@ -0,0 +1,3 @@
+var reactIs_production_min = {};
+
+export { reactIs_production_min as __exports };

package/esm/core/Dialog/index.js

@@ -0,0 +1,188 @@
+import { forwardRef, useCallback, useRef, useImperativeHandle, useEffect } from 'react';
+import SvgClose from '../../packages/icons/esm/Close.js';
+import color from '../../packages/token-studio/esm/token/color/index.js';
+import elevation from '../../packages/token-studio/esm/token/elevation/index.js';
+import '../../packages/token-studio/esm/token/typography/index.js';
+import styled from 'styled-components';
+import IconButton from '../IconButton/index.js';
+import View from '../View/index.js';
+import { sx } from '../../utils/styled-system/index.js';
+import MotionView from '../MotionView/index.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+import { AnimatePresence } from '../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
+import { cubicBezier } from '../../node_modules/framer-motion/dist/es/easing/cubic-bezier.js';
+
+function visible(el) {
+  return !el.hidden && (!el.type || el.type !== 'hidden') && (el.offsetWidth > 0 || el.offsetHeight > 0);
+}
+function focusable(el) {
+  const inputEl = el;
+  return inputEl.tabIndex >= 0 && !inputEl.disabled && visible(inputEl);
+}
+const Dialog = ({
+  children,
+  isOpen,
+  onDismiss,
+  size,
+  sx
+}, ref) => {
+  const dialogRoot = typeof document !== 'undefined' ? document.getElementById('dialog_root') : null;
+  if (dialogRoot === null) return null;
+  const handleDismiss = useCallback(() => onDismiss?.(), [onDismiss]);
+  const overlayRef = useRef(null);
+  const dialogRef = useRef(null);
+  const closeButtonRef = useRef(null);
+  useImperativeHandle(ref, () => dialogRef.current);
+  const handleOutsideClick = useCallback(e => {
+    if (dialogRef.current && overlayRef.current && e.target instanceof Node && !dialogRef.current.contains(e.target) && overlayRef.current.contains(e.target)) {
+      handleDismiss?.();
+    }
+  }, [handleDismiss, dialogRef, overlayRef]);
+  const getFocusableItem = useCallback((e, movement) => {
+    if (dialogRef.current) {
+      const items = Array.from(dialogRef.current.querySelectorAll('*')).filter(focusable);
+      if (items.length === 0) return;
+      e.preventDefault();
+      const focusedElement = document.activeElement;
+      if (!focusedElement) {
+        return;
+      }
+      const index = items.indexOf(focusedElement);
+      const offsetIndex = index + movement;
+      const fallbackIndex = movement === 1 ? 0 : items.length - 1;
+      const focusableItem = items[offsetIndex] || items[fallbackIndex];
+      return focusableItem;
+    }
+  }, [dialogRef]);
+  const handleTab = useCallback(e => {
+    const movement = e.shiftKey ? -1 : 1;
+    const focusableItem = getFocusableItem(e, movement);
+    if (!focusableItem) {
+      return;
+    }
+    focusableItem.focus();
+  }, [getFocusableItem]);
+  const handleKeyDown = useCallback(event => {
+    switch (event.key) {
+      case 'Tab':
+        handleTab(event);
+        break;
+      case 'Escape':
+        handleDismiss?.();
+        event.stopPropagation();
+        break;
+    }
+  }, [handleDismiss]);
+  useEffect(() => {
+    if (isOpen) {
+      document.addEventListener('click', handleOutsideClick);
+      return () => {
+        document.removeEventListener('click', handleOutsideClick);
+      };
+    }
+  }, [isOpen, handleOutsideClick]);
+  useEffect(() => {
+    if (isOpen) {
+      if (closeButtonRef && closeButtonRef.current) {
+        closeButtonRef.current.focus();
+      }
+    }
+  }, [isOpen, closeButtonRef]);
+  return /*#__PURE__*/jsxRuntimeExports.jsx(AnimatePresence, {
+    children: isOpen ? /*#__PURE__*/jsxRuntimeExports.jsxs(MotionView, {
+      initial: {
+        opacity: 0,
+        scale: 1.1
+      },
+      animate: {
+        opacity: 1,
+        scale: 1
+      },
+      exit: {
+        opacity: 0,
+        scale: 1.1
+      },
+      transition: {
+        duration: 0.25,
+        /**
+         * easeOutQuad by https://easings.net/ko#easeOutQuad
+         */
+        ease: cubicBezier(0.5, 1, 0.89, 1)
+      },
+      sx: {
+        position: 'fixed',
+        display: 'flex',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        zIndex: 9999
+      },
+      children: [/*#__PURE__*/jsxRuntimeExports.jsx(Overlay, {
+        ref: overlayRef
+      }), /*#__PURE__*/jsxRuntimeExports.jsxs(BaseDialog, {
+        ref: dialogRef,
+        "aria-modal": 'true',
+        role: 'dialog',
+        tabIndex: -1,
+        sx: {
+          ...(size === 's' ? {
+            maxHeight: 'calc(100vh - 32px)',
+            width: ['100%', 400, 400],
+            marginX: [8, 'auto', 'auto'],
+            marginY: 'auto',
+            borderRadius: 'l'
+          } : size === 'l' ? {
+            maxHeight: '100vh',
+            height: ['100%', '100%', 'auto'],
+            minHeight: ['-webkit-fill-available', '-webkit-fill-available', 'auto'],
+            width: ['100%', '100%', 820],
+            marginX: [0, 0, 'auto'],
+            marginY: 'auto',
+            borderRadius: ['none', 'none', 'l']
+          } : {}),
+          ...sx
+        },
+        onKeyDown: handleKeyDown,
+        children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
+          sx: {
+            position: 'absolute',
+            top: 4,
+            right: 4
+          },
+          children: /*#__PURE__*/jsxRuntimeExports.jsx(IconButton, {
+            ref: closeButtonRef,
+            icon: SvgClose,
+            variant: 'plain',
+            size: 'm',
+            onClick: handleDismiss
+          })
+        }), children]
+      })]
+    }) : null
+  });
+};
+const Overlay = styled.span`
+  &:before {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: block;
+    cursor: default;
+    content: '';
+    background: ${color.dim};
+  }
+`;
+const BaseDialog = styled.div(() => ({
+  position: 'relative',
+  boxShadow: elevation['shadow/overlay'],
+  backgroundColor: elevation['surface/overlay'],
+  outline: 'none',
+  overflow: 'hidden',
+  margin: 'auto'
+}), sx);
+var index = /*#__PURE__*/forwardRef(Dialog);
+
+export { index as default };

package/esm/core/DialogHandler/index.js

@@ -0,0 +1,33 @@
+import { Children, cloneElement } from 'react';
+import useDialogHandler from '../../hook/useDialogHandler.js';
+import { isFunction } from '../../utils/isFunction.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const DialogHandler = ({
+  renderDialog,
+  onClick,
+  children: propChildren
+}) => {
+  const {
+    isOpen,
+    openDialog,
+    closeDialog
+  } = useDialogHandler();
+  const handleClick = e => {
+    onClick?.(e);
+    openDialog();
+  };
+  const children = isFunction(propChildren) ? propChildren({
+    openDialog
+  }) : Children.map(propChildren, child => /*#__PURE__*/cloneElement(child, {
+    onClick: handleClick
+  }));
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
+    children: [children, renderDialog({
+      isOpen,
+      closeDialog
+    })]
+  });
+};
+
+export { DialogHandler as default };

package/esm/core/MotionView/index.js

@@ -0,0 +1,6 @@
+import View from '../View/index.js';
+import { motion } from '../../node_modules/framer-motion/dist/es/render/dom/motion.js';
+
+const MotionView = motion(View);
+
+export { MotionView as default };

package/esm/core/TextInput/index.js

@@ -0,0 +1,220 @@
+import color from '../../packages/token-studio/esm/token/color/index.js';
+import '../../packages/token-studio/esm/token/typography/index.js';
+import { forwardRef, cloneElement } from 'react';
+import { r as reactIsExports } from '../../node_modules/react-is/index.js';
+import styled, { css } from 'styled-components';
+import useProvidedOrCreatedRef from '../../hook/useProvidedOrCreatedRef.js';
+import { forcePixelValue } from '../../utils/forcePixelValue.js';
+import { isFunction } from '../../utils/isFunction.js';
+import { isNullable } from '../../utils/isNullable.js';
+import View from '../View/index.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const TextInput = /*#__PURE__*/forwardRef(({
+  type = 'text',
+  disabled,
+  validationStatus,
+  leadingVisual: LeadingVisual,
+  trailingVisual: TrailingVisual,
+  trailingAction,
+  ...props
+}, ref) => {
+  const inputRef = useProvidedOrCreatedRef(ref);
+  const focusInput = () => {
+    inputRef.current?.focus();
+  };
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(TextInputWrapper, {
+    disabled: disabled,
+    onClick: focusInput,
+    hasLeadingVisual: !isNullable(LeadingVisual),
+    hasTrailingVisual: !isNullable(TrailingVisual),
+    hasTrailingAction: !isNullable(trailingAction),
+    validationStatus: validationStatus,
+    children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
+      sx: {
+        'flexShrink': 0,
+        'fontSize': 'xxs',
+        'fontWeight': 'medium',
+        'color': color['text/neutral'],
+        '& > svg': {
+          display: 'block',
+          width: 24,
+          height: 24,
+          color: color['icon/neutral/bold']
+        }
+      },
+      children: typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {}) : LeadingVisual
+    }), /*#__PURE__*/jsxRuntimeExports.jsx(BaseInput, {
+      ref: e => {
+        isFunction(ref) ? ref(e) : null;
+        inputRef.current = e;
+      },
+      type: type,
+      disabled: disabled,
+      ...props
+    }), /*#__PURE__*/jsxRuntimeExports.jsxs(View, {
+      sx: {
+        'display': 'flex',
+        'alignItems': 'center',
+        'columnGap': 2,
+        'flexShrink': 0,
+        'fontSize': 'xxs',
+        'fontWeight': 'medium',
+        'color': color['text/neutral'],
+        '& > svg': {
+          display: 'block',
+          width: 24,
+          height: 24,
+          color: color['icon/neutral/bold']
+        }
+      },
+      children: [typeof TrailingVisual !== 'string' && reactIsExports.isValidElementType(TrailingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingVisual, {}) : TrailingVisual, trailingAction ? /*#__PURE__*/cloneElement(trailingAction, {
+        disabled: disabled
+      }) : null]
+    })]
+  });
+});
+const TextInputWrapper = styled.div`
+  position: relative;
+  width: ${forcePixelValue('100%')};
+  border-width: ${forcePixelValue(1)};
+  border-style: solid;
+  border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.s)};
+  border-color: ${({
+  theme
+}) => theme.colors['border/input']};
+  background-color: ${({
+  theme
+}) => theme.colors['bg/input']};
+  cursor: text;
+  display: inline-flex;
+  align-items: center;
+
+  font-size: ${({
+  theme
+}) => forcePixelValue(theme.fontSizes.xs)};
+  font-weight: ${({
+  theme
+}) => theme.fontWeights.medium};
+  line-height: ${({
+  theme
+}) => theme.lineHeights[2]};
+  color: ${({
+  theme
+}) => theme.colors['text/neutral']};
+  input::placeholder {
+    color: ${({
+  theme
+}) => theme.colors['text/neutral/subtlest']};
+  }
+
+  &:after {
+    content: '';
+    position: absolute;
+    top: ${forcePixelValue(-1)};
+    right: ${forcePixelValue(-1)};
+    bottom: ${forcePixelValue(-1)};
+    left: ${forcePixelValue(-1)};
+
+    border: ${forcePixelValue(2)} solid transparent;
+    border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.s)};
+    pointer-events: none;
+  }
+
+  ${props => props.validationStatus !== 'error' && !props.disabled && css`
+      &:hover:not(:focus-within) {
+        &:after {
+          border-color: ${({
+  theme
+}) => theme.colors['border/hovered']};
+        }
+      }
+    `}
+
+  ${props => props.validationStatus === 'error' && css`
+      &:after {
+        border-color: ${({
+  theme
+}) => theme.colors['border/danger']};
+      }
+    `}
+
+  ${props => props.validationStatus !== 'error' && css`
+      &:focus-within {
+        &:after {
+          border-color: ${({
+  theme
+}) => theme.colors['border/focused']};
+        }
+      }
+    `}
+
+  ${props => props.disabled && css`
+      border-color: ${props.theme.colors['border/input']};
+      background-color: ${props.theme.colors['bg/disabled']};
+      color: ${props.theme.colors['text/disabled']};
+
+      input::placeholder {
+        color: ${props.theme.colors['text/disabled']};
+      }
+
+      input {
+        cursor: not-allowed;
+      }
+    `};
+
+  ${props => props.hasLeadingVisual && css`
+      padding-left: ${forcePixelValue(props.theme.space[5])};
+      input {
+        padding-left: ${forcePixelValue(props.theme.space[3])};
+      }
+    `}
+
+  ${props => (props.hasTrailingVisual || props.hasTrailingAction) && css`
+      padding-right: ${forcePixelValue(props.theme.space[3])};
+      input {
+        padding-right: ${forcePixelValue(props.theme.space[3])};
+      }
+    `}
+
+  transition: color 100ms, background-color 100ms;
+  &:after {
+    transition: border-color 100ms;
+  }
+`;
+const UnstyledInput = styled.input`
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  font-family: inherit;
+  border-radius: inherit;
+  color: inherit;
+  transition: inherit;
+
+  border: 0;
+  background-color: transparent;
+  width: 100%;
+  &:focus {
+    outline: 0;
+  }
+`;
+const BaseInput = styled(UnstyledInput)`
+  padding-top: ${({
+  theme
+}) => forcePixelValue(theme.space['4'])};
+  padding-right: ${({
+  theme
+}) => forcePixelValue(theme.space['4'])};
+  padding-bottom: ${({
+  theme
+}) => forcePixelValue(theme.space['4'])};
+  padding-left: ${({
+  theme
+}) => forcePixelValue(theme.space['5'])};
+`;
+
+export { TextInput as default };

package/esm/core/Textarea/index.js

@@ -0,0 +1,158 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import useProvidedOrCreatedRef from '../../hook/useProvidedOrCreatedRef.js';
+import { forcePixelValue } from '../../utils/forcePixelValue.js';
+import { isFunction } from '../../utils/isFunction.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const Textarea = /*#__PURE__*/forwardRef(({
+  disabled,
+  ...props
+}, ref) => {
+  const inputRef = useProvidedOrCreatedRef(ref);
+  const focusInput = () => {
+    inputRef.current?.focus();
+  };
+  return /*#__PURE__*/jsxRuntimeExports.jsx(TextareaWrapper, {
+    disabled: disabled,
+    onClick: focusInput,
+    children: /*#__PURE__*/jsxRuntimeExports.jsx(BaseTextarea, {
+      ref: e => {
+        isFunction(ref) ? ref(e) : null;
+        inputRef.current = e;
+      },
+      disabled: disabled,
+      ...props
+    })
+  });
+});
+const TextareaWrapper = styled.div`
+  position: relative;
+  width: ${forcePixelValue('100%')};
+  border-width: ${forcePixelValue(1)};
+  border-style: solid;
+  border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.s)};
+  border-color: ${({
+  theme
+}) => theme.colors['border/input']};
+  background-color: ${({
+  theme
+}) => theme.colors['bg/input']};
+  cursor: text;
+  display: inline-flex;
+  align-items: center;
+
+  padding-top: ${({
+  theme
+}) => forcePixelValue(theme.space['4'])};
+  padding-right: ${({
+  theme
+}) => forcePixelValue(theme.space['4'])};
+  padding-bottom: ${({
+  theme
+}) => forcePixelValue(theme.space['4'])};
+  padding-left: ${({
+  theme
+}) => forcePixelValue(theme.space['5'])};
+
+  font-size: ${({
+  theme
+}) => forcePixelValue(theme.fontSizes.xs)};
+  font-weight: ${({
+  theme
+}) => theme.fontWeights.medium};
+  line-height: ${({
+  theme
+}) => theme.lineHeights[2]};
+  color: ${({
+  theme
+}) => theme.colors['text/neutral']};
+  input::placeholder {
+    color: ${({
+  theme
+}) => theme.colors['text/neutral/subtlest']};
+  }
+
+  height: 74px;
+
+  &:after {
+    content: '';
+    position: absolute;
+    top: ${forcePixelValue(-1)};
+    right: ${forcePixelValue(-1)};
+    bottom: ${forcePixelValue(-1)};
+    left: ${forcePixelValue(-1)};
+
+    border: ${forcePixelValue(2)} solid transparent;
+    border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.s)};
+    pointer-events: none;
+  }
+
+  ${props => props.validationStatus !== 'error' && !props.disabled && css`
+      &:hover:not(:focus-within) {
+        &:after {
+          border-color: ${({
+  theme
+}) => theme.colors['border/hovered']};
+        }
+      }
+    `}
+
+  ${props => props.validationStatus === 'error' && css`
+      &:after {
+        border-color: ${({
+  theme
+}) => theme.colors['border/danger']};
+      }
+    `}
+
+  ${props => props.validationStatus !== 'error' && css`
+      &:focus-within {
+        &:after {
+          border-color: ${({
+  theme
+}) => theme.colors['border/focused']};
+        }
+      }
+    `}
+
+  ${props => props.disabled && css`
+      border-color: ${props.theme.colors['border/input']};
+      background-color: ${props.theme.colors['bg/disabled']};
+      color: ${props.theme.colors['text/disabled']};
+
+      textarea::placeholder {
+        color: ${props.theme.colors['text/disabled']};
+      }
+
+      &,
+      textarea {
+        cursor: not-allowed;
+      }
+    `};
+`;
+const UnstyledTextarea = styled.textarea`
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  font-family: inherit;
+  border-radius: inherit;
+  color: inherit;
+  transition: inherit;
+
+  border: 0;
+  background-color: transparent;
+  width: 100%;
+  &:focus {
+    outline: 0;
+  }
+`;
+const BaseTextarea = styled(UnstyledTextarea)`
+  resize: none;
+`;
+
+export { Textarea as default };

package/esm/hook/useDialogHandler.js

@@ -0,0 +1,14 @@
+import { useState } from 'react';
+
+const useDialogHandler = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const openDialog = () => setIsOpen(true);
+  const closeDialog = () => setIsOpen(false);
+  return {
+    isOpen,
+    openDialog,
+    closeDialog
+  };
+};
+
+export { useDialogHandler as default };

package/esm/index.js

@@ -1,16 +1,21 @@
 export { default as Button } from './core/Button/index.js';
 export { default as Chip } from './core/Chip/index.js';
+export { default as Dialog } from './core/Dialog/index.js';
+export { default as DialogHandler } from './core/DialogHandler/index.js';
 export { default as GradientText } from './core/GradientText/index.js';
 export { default as Grid } from './core/Grid/index.js';
 export { default as IconButton } from './core/IconButton/index.js';
 export { default as IconToggleButton } from './core/IconToggleButton/index.js';
 export { default as Image } from './core/Image/index.js';
 export { default as ItemList } from './core/ItemList/index.js';
+export { default as MotionView } from './core/MotionView/index.js';
 export { default as Space } from './core/Space/index.js';
 export { default as Spinner } from './core/Spinner/index.js';
 export { default as Stack } from './core/Stack/index.js';
 export { default as StyledIcon } from './core/StyledIcon/index.js';
 export { default as Text } from './core/Text/index.js';
+export { default as Textarea } from './core/Textarea/index.js';
+export { default as TextInput } from './core/TextInput/index.js';
 export { default as ThemeProvider } from './core/ThemeProvider/index.js';
 export { default as View } from './core/View/index.js';
 export { default as UnstyledButton } from './core/_UnstyledButton.js';