@teamturing/react-kit 2.26.4 → 2.27.1

package/README.md

@@ -2,4 +2,20 @@
 
 튜링 내에서 웹 애플리케이션을 만들 때 필요한 리액트의 핵심 컴포넌트, 훅을 모아둔 패키지입니다.
 
-> react-native와는 호환성이 맞지 않을 수 있습니다.
+## 설치
+
+```bash
+yarn add @teamturing/react-kit styled-components styled-system @emotion/is-prop-valid
+```
+
+## 시작하기
+
+```jsx
+<StyleSheetManager shouldForwardProp={isPropValid}>
+  <ThemeProvider>
+    <App />
+  </ThemeProvider>
+</StyleSheetManager>
+```
+
+[Pretendard](https://github.com/orioncactus/pretendard) 폰트와 사용하는 것을 추천합니다.

package/dist/core/Flash/index.d.ts

@@ -1,17 +1,19 @@
-import { ComponentType, HTMLAttributes, HTMLProps, ReactElement, SVGProps } from 'react';
+import { ComponentType, ElementType, HTMLAttributes, HTMLProps, ReactElement, ReactNode, SVGProps } from 'react';
 import { SxProp } from '../../utils/styled-system';
-type FlashVariantType = 'neutral' | 'danger' | 'assist';
+type FlashVariantType = 'neutral' | 'danger' | 'assist' | 'accent';
 type Props = {
     variant?: FlashVariantType;
     icon?: ComponentType<SVGProps<SVGSVGElement>>;
+    trailingVisual?: ElementType | ReactNode;
     buttons?: Array<ReactElement<HTMLProps<HTMLButtonElement>>>;
 } & SxProp & HTMLAttributes<HTMLDivElement>;
 declare const _default: import("react").ForwardRefExoticComponent<{
     variant?: FlashVariantType | undefined;
     icon?: ComponentType<SVGProps<SVGSVGElement>> | undefined;
+    trailingVisual?: string | number | boolean | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal | null | undefined;
     buttons?: ReactElement<HTMLProps<HTMLButtonElement>, string | import("react").JSXElementConstructor<any>>[] | undefined;
 } & SxProp & HTMLAttributes<HTMLDivElement> & {
-    children?: import("react").ReactNode;
+    children?: ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>>;
 export default _default;
 export type { Props as FlashProps };

package/dist/index.js

@@ -1326,6 +1326,22 @@ const SvgArrowUpLimit = props => /*#__PURE__*/React__namespace.createElement("sv
   clipRule: "evenodd"
 }));
 
+const SvgAuto = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "m23.723 10.94-2.037-2.78a1.2 1.2 0 0 0-1.936 0l-2.037 2.78c-.58.793-.014 1.909.968 1.909h.88a7.543 7.543 0 0 1-3.73 5.695c-2.301 1.334-5.25 1.334-7.553 0a1.1 1.1 0 0 0-1.102 1.904 9.755 9.755 0 0 0 4.88 1.314 9.756 9.756 0 0 0 4.878-1.313 9.803 9.803 0 0 0 3.57-3.57 9.74 9.74 0 0 0 1.258-4.03h.993a1.2 1.2 0 0 0 .968-1.91m-18.183.213h-.992a7.594 7.594 0 0 1 .962-2.93 7.61 7.61 0 0 1 2.768-2.766c2.302-1.332 5.25-1.332 7.554 0a1.1 1.1 0 0 0 1.102-1.905c-2.972-1.718-6.787-1.718-9.758 0a9.812 9.812 0 0 0-3.57 3.57 9.775 9.775 0 0 0-1.258 4.03H1.244a1.2 1.2 0 0 0-.968 1.91l2.148 2.932a1.2 1.2 0 0 0 1.936 0l2.148-2.932a1.2 1.2 0 0 0-.968-1.91",
+  clipRule: "evenodd"
+}), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  d: "M10.354 14.963a.912.912 0 1 1-1.732-.568l1.909-5.617a1.2 1.2 0 0 1 1.136-.814h.663a1.2 1.2 0 0 1 1.137.815l1.902 5.623a.908.908 0 1 1-1.725.564l-.316-1H10.67l-.316.997Zm.748-2.369h1.793l-.864-2.742h-.064l-.865 2.742Z"
+}));
+
 const SvgBarchart = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   width: "1em",
@@ -2272,6 +2288,29 @@ const SvgExclamationPointInCircle = props => /*#__PURE__*/React__namespace.creat
   clipRule: "evenodd"
 }));
 
+const SvgExternalLink = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M5.953 4.326c-.899 0-1.627.728-1.627 1.627v12.094c0 .899.728 1.627 1.627 1.627h12.094c.899 0 1.627-.728 1.627-1.627V12A1.163 1.163 0 1 1 22 12v6.047A3.953 3.953 0 0 1 18.047 22H5.953A3.953 3.953 0 0 1 2 18.047V5.953A3.953 3.953 0 0 1 5.953 2H12a1.163 1.163 0 1 1 0 2.326H5.953Z",
+  clipRule: "evenodd"
+}), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M13.308 10.682a1.06 1.06 0 0 0 1.5 0l5.668-5.668a1.06 1.06 0 0 0-1.5-1.5l-5.668 5.668a1.06 1.06 0 0 0 0 1.5Z",
+  clipRule: "evenodd"
+}), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M15.24 3.163c0-.642.52-1.163 1.163-1.163h4.419c.642 0 1.162.52 1.162 1.163V7.58a1.163 1.163 0 0 1-2.325 0V4.326h-3.256c-.642 0-1.163-.521-1.163-1.163Z",
+  clipRule: "evenodd"
+}));
+
 const SvgEyeOff = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   width: "1em",
@@ -4613,6 +4652,7 @@ var icons = /*#__PURE__*/Object.freeze({
   ArrowUpDownIcon: SvgArrowUpDown,
   ArrowUpIcon: SvgArrowUp,
   ArrowUpLimitIcon: SvgArrowUpLimit,
+  AutoIcon: SvgAuto,
   BarchartIcon: SvgBarchart,
   BookIcon: SvgBook,
   BookmarkAnimationIcon: SvgBookmarkAnimation,
@@ -4674,6 +4714,7 @@ var icons = /*#__PURE__*/Object.freeze({
   EqualIcon: SvgEqual,
   EraserIcon: SvgEraser,
   ExclamationPointInCircleIcon: SvgExclamationPointInCircle,
+  ExternalLinkIcon: SvgExternalLink,
   EyeOffIcon: SvgEyeOff,
   EyeOnIcon: SvgEyeOn,
   FaceHappyIcon: SvgFaceHappy,
@@ -17216,6 +17257,7 @@ const BaseCheckbox = styled__default.default(UnstyledCheckbox)`
     border-color: ${({
   theme
 }) => theme.colors['border/disabled']};
+    cursor: not-allowed;
   }
 
   &:checked {
@@ -19279,7 +19321,8 @@ const BaseEmptyState = styled__default.default.div`
 
 const Flash = ({
   variant = 'neutral',
-  icon: Icon = variant === 'danger' ? SvgWarning : variant === 'assist' ? SvgTwinkle : SvgInfoInCircle,
+  icon: Icon = variant === 'danger' ? SvgWarning : variant === 'assist' ? SvgTwinkle : variant === 'accent' ? SvgInfoInCircle : SvgInfoInCircle,
+  trailingVisual: TrailingVisual,
   buttons,
   children,
   ...props
@@ -19289,7 +19332,9 @@ const Flash = ({
     ref: ref,
     variant: variant,
     ...props,
-    children: [/*#__PURE__*/jsxRuntimeExports.jsx(Icon, {}), /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+    children: [/*#__PURE__*/jsxRuntimeExports.jsx(Icon, {
+      className: 'flash__leading_icon'
+    }), /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
       className: 'flash__content',
       children: [/*#__PURE__*/jsxRuntimeExports.jsx("span", {
         className: 'flash__content__children',
@@ -19298,7 +19343,10 @@ const Flash = ({
         className: 'flash__content__buttons',
         children: buttons
       }) : null]
-    })]
+    }), TrailingVisual ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+      className: 'flash__trailing_visual',
+      children: typeof TrailingVisual !== 'string' && reactIsExports.isValidElementType(TrailingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingVisual, {}) : TrailingVisual
+    }) : null]
   });
 };
 const BaseFlash = styled__default.default.div`
@@ -19309,15 +19357,24 @@ const BaseFlash = styled__default.default.div`
   align-items: flex-start;
   padding: ${({
   theme
-}) => forcePixelValue(theme.space[4])};
+}) => forcePixelValue(theme.space[3])};
   border-radius: ${({
   theme
 }) => forcePixelValue(theme.radii.xs)};
+  column-gap: ${({
+  theme
+}) => forcePixelValue(theme.space[2])};
+
+  & .flash__content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
 
   & .flash__content__children {
     font-size: ${({
   theme
-}) => forcePixelValue(theme.fontSizes.xs)};
+}) => forcePixelValue(theme.fontSizes.xxs)};
     font-weight: ${({
   theme
 }) => theme.fontWeights.medium};
@@ -19337,12 +19394,22 @@ const BaseFlash = styled__default.default.div`
 }) => forcePixelValue(theme.space[2])};
   }
 
-  & > svg {
-    min-width: ${forcePixelValue(20)};
-    height: ${forcePixelValue(20)};
-    margin-right: ${({
+  & .flash__leading_icon {
+    min-width: ${forcePixelValue(16)};
+    height: ${forcePixelValue(16)};
+  }
+
+  & .flash__trailing_visual {
+    display: flex;
+    flex-direction: column;
+
+    svg {
+      width: ${forcePixelValue(16)};
+      height: ${forcePixelValue(16)};
+      color: ${({
   theme
-}) => forcePixelValue(theme.space[2])};
+}) => theme.colors['icon/neutral/bold']};
+    }
   }
 
   ${({
@@ -19352,13 +19419,13 @@ const BaseFlash = styled__default.default.div`
   variants: {
     neutral: {
       'backgroundColor': 'bg/neutral',
-      '& > svg': {
+      '& .flash__leading_icon': {
         color: 'icon/neutral/bold'
       }
     },
     danger: {
       'backgroundColor': 'bg/danger',
-      '& > svg': {
+      '& .flash__leading_icon': {
         color: 'icon/danger'
       }
     },
@@ -19367,9 +19434,15 @@ const BaseFlash = styled__default.default.div`
       'borderWidth': 1,
       'borderStyle': 'solid',
       'borderColor': 'transparent',
-      '& > svg': {
+      '& .flash__leading_icon': {
         color: 'icon/primary'
       }
+    },
+    accent: {
+      'backgroundColor': 'bg/accent/blue/subtlest',
+      '& .flash__leading_icon': {
+        color: 'icon/accent/blue'
+      }
     }
   }
 })}

package/esm/core/Checkbox/index.js

@@ -86,6 +86,7 @@ const BaseCheckbox = styled(UnstyledCheckbox)`
     border-color: ${({
   theme
 }) => theme.colors['border/disabled']};
+    cursor: not-allowed;
   }
 
   &:checked {

package/esm/core/Flash/index.js

@@ -4,6 +4,7 @@ import SvgTwinkle from '../../packages/icons/esm/Twinkle.js';
 import SvgWarning from '../../packages/icons/esm/Warning.js';
 import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
 import { isNullable } from '../../packages/utils/esm/isNullable.js';
+import { r as reactIsExports } from '../../node_modules/react-is/index.js';
 import styled from 'styled-components';
 import '../../node_modules/styled-system/dist/index.esm.js';
 import { sx } from '../../utils/styled-system/index.js';
@@ -12,7 +13,8 @@ import { variant } from '../../node_modules/@styled-system/variant/dist/index.es
 
 const Flash = ({
   variant = 'neutral',
-  icon: Icon = variant === 'danger' ? SvgWarning : variant === 'assist' ? SvgTwinkle : SvgInfoInCircle,
+  icon: Icon = variant === 'danger' ? SvgWarning : variant === 'assist' ? SvgTwinkle : variant === 'accent' ? SvgInfoInCircle : SvgInfoInCircle,
+  trailingVisual: TrailingVisual,
   buttons,
   children,
   ...props
@@ -22,7 +24,9 @@ const Flash = ({
     ref: ref,
     variant: variant,
     ...props,
-    children: [/*#__PURE__*/jsxRuntimeExports.jsx(Icon, {}), /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+    children: [/*#__PURE__*/jsxRuntimeExports.jsx(Icon, {
+      className: 'flash__leading_icon'
+    }), /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
       className: 'flash__content',
       children: [/*#__PURE__*/jsxRuntimeExports.jsx("span", {
         className: 'flash__content__children',
@@ -31,7 +35,10 @@ const Flash = ({
         className: 'flash__content__buttons',
         children: buttons
       }) : null]
-    })]
+    }), TrailingVisual ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+      className: 'flash__trailing_visual',
+      children: typeof TrailingVisual !== 'string' && reactIsExports.isValidElementType(TrailingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingVisual, {}) : TrailingVisual
+    }) : null]
   });
 };
 const BaseFlash = styled.div`
@@ -42,15 +49,24 @@ const BaseFlash = styled.div`
   align-items: flex-start;
   padding: ${({
   theme
-}) => forcePixelValue(theme.space[4])};
+}) => forcePixelValue(theme.space[3])};
   border-radius: ${({
   theme
 }) => forcePixelValue(theme.radii.xs)};
+  column-gap: ${({
+  theme
+}) => forcePixelValue(theme.space[2])};
+
+  & .flash__content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
 
   & .flash__content__children {
     font-size: ${({
   theme
-}) => forcePixelValue(theme.fontSizes.xs)};
+}) => forcePixelValue(theme.fontSizes.xxs)};
     font-weight: ${({
   theme
 }) => theme.fontWeights.medium};
@@ -70,12 +86,22 @@ const BaseFlash = styled.div`
 }) => forcePixelValue(theme.space[2])};
   }
 
-  & > svg {
-    min-width: ${forcePixelValue(20)};
-    height: ${forcePixelValue(20)};
-    margin-right: ${({
+  & .flash__leading_icon {
+    min-width: ${forcePixelValue(16)};
+    height: ${forcePixelValue(16)};
+  }
+
+  & .flash__trailing_visual {
+    display: flex;
+    flex-direction: column;
+
+    svg {
+      width: ${forcePixelValue(16)};
+      height: ${forcePixelValue(16)};
+      color: ${({
   theme
-}) => forcePixelValue(theme.space[2])};
+}) => theme.colors['icon/neutral/bold']};
+    }
   }
 
   ${({
@@ -85,13 +111,13 @@ const BaseFlash = styled.div`
   variants: {
     neutral: {
       'backgroundColor': 'bg/neutral',
-      '& > svg': {
+      '& .flash__leading_icon': {
         color: 'icon/neutral/bold'
       }
     },
     danger: {
       'backgroundColor': 'bg/danger',
-      '& > svg': {
+      '& .flash__leading_icon': {
         color: 'icon/danger'
       }
     },
@@ -100,9 +126,15 @@ const BaseFlash = styled.div`
       'borderWidth': 1,
       'borderStyle': 'solid',
       'borderColor': 'transparent',
-      '& > svg': {
+      '& .flash__leading_icon': {
         color: 'icon/primary'
       }
+    },
+    accent: {
+      'backgroundColor': 'bg/accent/blue/subtlest',
+      '& .flash__leading_icon': {
+        color: 'icon/accent/blue'
+      }
     }
   }
 })}

package/esm/packages/icons/esm/Auto.js

@@ -0,0 +1,20 @@
+import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
+import * as React from 'react';
+
+const SvgAuto = props => /*#__PURE__*/React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "m23.723 10.94-2.037-2.78a1.2 1.2 0 0 0-1.936 0l-2.037 2.78c-.58.793-.014 1.909.968 1.909h.88a7.543 7.543 0 0 1-3.73 5.695c-2.301 1.334-5.25 1.334-7.553 0a1.1 1.1 0 0 0-1.102 1.904 9.755 9.755 0 0 0 4.88 1.314 9.756 9.756 0 0 0 4.878-1.313 9.803 9.803 0 0 0 3.57-3.57 9.74 9.74 0 0 0 1.258-4.03h.993a1.2 1.2 0 0 0 .968-1.91m-18.183.213h-.992a7.594 7.594 0 0 1 .962-2.93 7.61 7.61 0 0 1 2.768-2.766c2.302-1.332 5.25-1.332 7.554 0a1.1 1.1 0 0 0 1.102-1.905c-2.972-1.718-6.787-1.718-9.758 0a9.812 9.812 0 0 0-3.57 3.57 9.775 9.775 0 0 0-1.258 4.03H1.244a1.2 1.2 0 0 0-.968 1.91l2.148 2.932a1.2 1.2 0 0 0 1.936 0l2.148-2.932a1.2 1.2 0 0 0-.968-1.91",
+  clipRule: "evenodd"
+}), /*#__PURE__*/React.createElement("path", {
+  fill: "currentColor",
+  d: "M10.354 14.963a.912.912 0 1 1-1.732-.568l1.909-5.617a1.2 1.2 0 0 1 1.136-.814h.663a1.2 1.2 0 0 1 1.137.815l1.902 5.623a.908.908 0 1 1-1.725.564l-.316-1H10.67l-.316.997Zm.748-2.369h1.793l-.864-2.742h-.064l-.865 2.742Z"
+}));
+
+export { SvgAuto as default };

package/esm/packages/icons/esm/ExternalLink.js

@@ -0,0 +1,27 @@
+import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
+import * as React from 'react';
+
+const SvgExternalLink = props => /*#__PURE__*/React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M5.953 4.326c-.899 0-1.627.728-1.627 1.627v12.094c0 .899.728 1.627 1.627 1.627h12.094c.899 0 1.627-.728 1.627-1.627V12A1.163 1.163 0 1 1 22 12v6.047A3.953 3.953 0 0 1 18.047 22H5.953A3.953 3.953 0 0 1 2 18.047V5.953A3.953 3.953 0 0 1 5.953 2H12a1.163 1.163 0 1 1 0 2.326H5.953Z",
+  clipRule: "evenodd"
+}), /*#__PURE__*/React.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M13.308 10.682a1.06 1.06 0 0 0 1.5 0l5.668-5.668a1.06 1.06 0 0 0-1.5-1.5l-5.668 5.668a1.06 1.06 0 0 0 0 1.5Z",
+  clipRule: "evenodd"
+}), /*#__PURE__*/React.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M15.24 3.163c0-.642.52-1.163 1.163-1.163h4.419c.642 0 1.162.52 1.162 1.163V7.58a1.163 1.163 0 0 1-2.325 0V4.326h-3.256c-.642 0-1.163-.521-1.163-1.163Z",
+  clipRule: "evenodd"
+}));
+
+export { SvgExternalLink as default };

package/esm/packages/icons/esm/index.js

@@ -16,6 +16,7 @@ export { default as ArrowRightLimitIcon } from './ArrowRightLimit.js';
 export { default as ArrowUpIcon } from './ArrowUp.js';
 export { default as ArrowUpDownIcon } from './ArrowUpDown.js';
 export { default as ArrowUpLimitIcon } from './ArrowUpLimit.js';
+export { default as AutoIcon } from './Auto.js';
 export { default as BarchartIcon } from './Barchart.js';
 export { default as BookIcon } from './Book.js';
 export { default as BookmarkIcon } from './Bookmark.js';
@@ -77,6 +78,7 @@ export { default as EnterIcon } from './Enter.js';
 export { default as EqualIcon } from './Equal.js';
 export { default as EraserIcon } from './Eraser.js';
 export { default as ExclamationPointInCircleIcon } from './ExclamationPointInCircle.js';
+export { default as ExternalLinkIcon } from './ExternalLink.js';
 export { default as EyeOffIcon } from './EyeOff.js';
 export { default as EyeOnIcon } from './EyeOn.js';
 export { default as FaceHappyIcon } from './FaceHappy.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.26.4",
+  "version": "2.27.1",
   "description": "React components, hooks for create teamturing web application",
   "author": "Sungchang Park <psch300@gmail.com> (https://github.com/psch300)",
   "homepage": "https://github.com/weareteamturing/bombe#readme",
@@ -55,7 +55,7 @@
   "dependencies": {
     "@floating-ui/react-dom": "^2.0.2",
     "@primer/behaviors": "^1.3.6",
-    "@teamturing/icons": "^1.40.2",
+    "@teamturing/icons": "^1.41.0",
     "@teamturing/token-studio": "^1.6.0",
     "@teamturing/utils": "^1.3.0",
     "framer-motion": "^10.16.4",
@@ -66,5 +66,5 @@
     "react-textarea-autosize": "^8.5.3",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "2ac83a049bfab481eec183d3baa80964d7a2d4c5"
+  "gitHead": "b2c810fa21527d0a188655ac141f41df83ca7503"
 }