@teamturing/react-kit 2.35.2 → 2.36.0

package/dist/core/FormControl/FormControlTooltipIcon.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+import { StyledIconProps } from '../StyledIcon';
+import { TooltipProps } from '../Tooltip';
+type Props = {} & Partial<StyledIconProps> & Pick<TooltipProps, 'text' | 'direction'>;
+declare const FormControlTooltipIcon: ({ text, direction, icon, size, color, ...props }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element;
+export default FormControlTooltipIcon;
+export type { Props as FormControlTooltipIconProps };

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

@@ -4,6 +4,7 @@ import { FormControlCaptionProps } from './FormControlCaption';
 import { FormControlErrorMessageProps } from './FormControlErrorMessage';
 import { FormControlLabelProps } from './FormControlLabel';
 import { FormControlSuccessMessageProps } from './FormControlSuccessMessage';
+import { FormControlTooltipIconProps } from './FormControlTooltipIcon';
 type Props = {
     /**
      * `FormControl`의 Input 요소를 컨트롤하기 위한 ID입니다. `Label`, `Caption`과 연결짓기 위해 사용합니다.
@@ -18,7 +19,7 @@ type Props = {
      */
     required?: boolean;
     /**
-     * @default TextInput, Select, SearchSelectInput, Checkbox
+     * @default TextInput, Textarea, Select, SearchSelectInput, Checkbox, Radio, Switch
      *
      * FormControl이 허용하는 Input 컴포넌트를 추가로 정의합니다.
      */
@@ -45,7 +46,7 @@ declare const _default: import("react").ForwardRefExoticComponent<{
      */
     required?: boolean | undefined;
     /**
-     * @default TextInput, Select, SearchSelectInput, Checkbox
+     * @default TextInput, Textarea, Select, SearchSelectInput, Checkbox, Radio, Switch
      *
      * FormControl이 허용하는 Input 컴포넌트를 추가로 정의합니다.
      */
@@ -63,7 +64,8 @@ declare const _default: import("react").ForwardRefExoticComponent<{
     SuccessMessage: ({ children }: {
         children?: import("react").ReactNode;
     }) => import("react/jsx-runtime").JSX.Element;
+    TooltipIcon: ({ text, direction, icon, size, color, ...props }: PropsWithChildren<FormControlTooltipIconProps>) => import("react/jsx-runtime").JSX.Element;
 };
 export default _default;
 export { FormControlContext };
-export type { Props as FormControlProps, FormControlFieldProps, FormControlContextValue, FormControlCaptionProps, FormControlErrorMessageProps, FormControlLabelProps, FormControlSuccessMessageProps, };
+export type { Props as FormControlProps, FormControlFieldProps, FormControlContextValue, FormControlCaptionProps, FormControlErrorMessageProps, FormControlLabelProps, FormControlSuccessMessageProps, FormControlTooltipIconProps, };

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

@@ -26,4 +26,4 @@ declare const _default: import("react").ForwardRefExoticComponent<{
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLSpanElement>>;
 export default _default;
-export type { Props as TooptipProps };
+export type { Props as TooltipProps };

package/dist/index.d.ts

@@ -32,7 +32,7 @@ export type { EmptyStateProps } from './core/EmptyState';
 export { default as Flash } from './core/Flash';
 export type { FlashProps } from './core/Flash';
 export { default as FormControl } from './core/FormControl';
-export type { FormControlProps, FormControlFieldProps, FormControlCaptionProps, FormControlErrorMessageProps, FormControlLabelProps, FormControlSuccessMessageProps, } from './core/FormControl';
+export type { FormControlProps, FormControlFieldProps, FormControlCaptionProps, FormControlErrorMessageProps, FormControlLabelProps, FormControlSuccessMessageProps, FormControlTooltipIconProps, } from './core/FormControl';
 export { default as GradientText } from './core/GradientText';
 export type { GradientTextProps } from './core/GradientText';
 export { default as Grid } from './core/Grid';
@@ -84,7 +84,7 @@ export { default as ThemeProvider } from './core/ThemeProvider';
 export { default as Toast } from './core/Toast';
 export type { ToastProps } from './core/Toast';
 export { default as Tooltip } from './core/Tooltip';
-export type { TooptipProps } from './core/Tooltip';
+export type { TooltipProps } from './core/Tooltip';
 export { default as View } from './core/View';
 export type { ViewProps } from './core/View';
 export { default as UnstyledButton } from './core/_UnstyledButton';

package/dist/index.js

@@ -37076,6 +37076,24 @@ const StyledText = styled__default.default(Text)`
   animation: 170ms ${successMessageKeyframe} cubic-bezier(0.44, 0.74, 0.36, 1);
 `;
 
+const FormControlTooltipIcon = ({
+  text,
+  direction,
+  icon = SvgInfoInCircle,
+  size = 16,
+  color = 'icon/neutral',
+  ...props
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(Tooltip$1, {
+  text: text,
+  direction: direction,
+  children: /*#__PURE__*/jsxRuntimeExports.jsx(StyledIcon, {
+    icon: icon,
+    size: size,
+    color: color,
+    ...props
+  })
+});
+
 const FormControlContext = /*#__PURE__*/React.createContext({});
 const FormControl = ({
   children: propChildren,
@@ -37092,7 +37110,8 @@ const FormControl = ({
       label: FormControlLabel,
       caption: FormControlCaption,
       errorMessage: FormControlErrorMessage,
-      successMessage: FormControlSuccessMessage
+      successMessage: FormControlSuccessMessage,
+      tooltipIcon: FormControlTooltipIcon
     }
   });
   const inputComponentCandidates = [TextInput$1, Textarea, Select$1, SearchSelectInput$1, Checkbox$1, Radio$1, Switch$1, ...additionalInputComponentCandidates];
@@ -37124,15 +37143,23 @@ const FormControl = ({
             mt: 0.5
           }
         },
-        children: [relocatableComponentsObject.label, relocatableComponentsObject.caption, relocatableComponentsObject.errorMessage, relocatableComponentsObject.successMessage]
+        children: [/*#__PURE__*/jsxRuntimeExports.jsxs(View, {
+          className: 'form_control__label_wrapper__horizontal',
+          display: 'flex',
+          alignItems: 'center',
+          sx: {
+            columnGap: 1
+          },
+          children: [relocatableComponentsObject.label, relocatableComponentsObject.tooltipIcon]
+        }), relocatableComponentsObject.caption, relocatableComponentsObject.errorMessage, relocatableComponentsObject.successMessage]
       })]
     }) : /*#__PURE__*/jsxRuntimeExports.jsxs(View, {
       ref: ref,
       display: 'flex',
       flexDirection: 'column',
       sx: {
-        '& > label': {
-          mb: 1
+        '& .form_control__label_wrapper__vertical': {
+          mb: relocatableComponentsObject.label?.props.visuallyHidden ? 0 : 1
         },
         '& > span': {
           mt: 1
@@ -37140,7 +37167,15 @@ const FormControl = ({
         ...sx
       },
       ...props,
-      children: [relocatableComponentsObject.label, /*#__PURE__*/React.cloneElement(InputComponent, {
+      children: [/*#__PURE__*/jsxRuntimeExports.jsxs(View, {
+        className: 'form_control__label_wrapper__vertical',
+        display: 'flex',
+        alignItems: 'center',
+        sx: {
+          columnGap: 1
+        },
+        children: [relocatableComponentsObject.label, relocatableComponentsObject.tooltipIcon]
+      }), /*#__PURE__*/React.cloneElement(InputComponent, {
         id,
         disabled
       }), relocatableComponentsObject.caption, relocatableComponentsObject.errorMessage, relocatableComponentsObject.successMessage]
@@ -37151,7 +37186,8 @@ var index$5 = Object.assign( /*#__PURE__*/React.forwardRef(FormControl), {
   Label: FormControlLabel,
   Caption: FormControlCaption,
   ErrorMessage: FormControlErrorMessage,
-  SuccessMessage: FormControlSuccessMessage
+  SuccessMessage: FormControlSuccessMessage,
+  TooltipIcon: FormControlTooltipIcon
 });
 
 const GradientText = styled__default.default(Text)`

package/esm/core/FormControl/FormControlTooltipIcon.js

@@ -0,0 +1,25 @@
+import 'react';
+import SvgInfoInCircle from '../../packages/icons/esm/InfoInCircle.js';
+import StyledIcon from '../StyledIcon/index.js';
+import Tooltip from '../Tooltip/index.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const FormControlTooltipIcon = ({
+  text,
+  direction,
+  icon = SvgInfoInCircle,
+  size = 16,
+  color = 'icon/neutral',
+  ...props
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(Tooltip, {
+  text: text,
+  direction: direction,
+  children: /*#__PURE__*/jsxRuntimeExports.jsx(StyledIcon, {
+    icon: icon,
+    size: size,
+    color: color,
+    ...props
+  })
+});
+
+export { FormControlTooltipIcon as default };

package/esm/core/FormControl/index.js

@@ -12,6 +12,7 @@ import FormControlCaption from './FormControlCaption.js';
 import FormControlErrorMessage from './FormControlErrorMessage.js';
 import FormControlLabel from './FormControlLabel.js';
 import FormControlSuccessMessage from './FormControlSuccessMessage.js';
+import FormControlTooltipIcon from './FormControlTooltipIcon.js';
 import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
 
 const FormControlContext = /*#__PURE__*/createContext({});
@@ -30,7 +31,8 @@ const FormControl = ({
       label: FormControlLabel,
       caption: FormControlCaption,
       errorMessage: FormControlErrorMessage,
-      successMessage: FormControlSuccessMessage
+      successMessage: FormControlSuccessMessage,
+      tooltipIcon: FormControlTooltipIcon
     }
   });
   const inputComponentCandidates = [TextInput, Textarea, Select, SearchSelectInput, Checkbox, Radio, Switch, ...additionalInputComponentCandidates];
@@ -62,15 +64,23 @@ const FormControl = ({
             mt: 0.5
           }
         },
-        children: [relocatableComponentsObject.label, relocatableComponentsObject.caption, relocatableComponentsObject.errorMessage, relocatableComponentsObject.successMessage]
+        children: [/*#__PURE__*/jsxRuntimeExports.jsxs(View, {
+          className: 'form_control__label_wrapper__horizontal',
+          display: 'flex',
+          alignItems: 'center',
+          sx: {
+            columnGap: 1
+          },
+          children: [relocatableComponentsObject.label, relocatableComponentsObject.tooltipIcon]
+        }), relocatableComponentsObject.caption, relocatableComponentsObject.errorMessage, relocatableComponentsObject.successMessage]
       })]
     }) : /*#__PURE__*/jsxRuntimeExports.jsxs(View, {
       ref: ref,
       display: 'flex',
       flexDirection: 'column',
       sx: {
-        '& > label': {
-          mb: 1
+        '& .form_control__label_wrapper__vertical': {
+          mb: relocatableComponentsObject.label?.props.visuallyHidden ? 0 : 1
         },
         '& > span': {
           mt: 1
@@ -78,7 +88,15 @@ const FormControl = ({
         ...sx
       },
       ...props,
-      children: [relocatableComponentsObject.label, /*#__PURE__*/cloneElement(InputComponent, {
+      children: [/*#__PURE__*/jsxRuntimeExports.jsxs(View, {
+        className: 'form_control__label_wrapper__vertical',
+        display: 'flex',
+        alignItems: 'center',
+        sx: {
+          columnGap: 1
+        },
+        children: [relocatableComponentsObject.label, relocatableComponentsObject.tooltipIcon]
+      }), /*#__PURE__*/cloneElement(InputComponent, {
         id,
         disabled
       }), relocatableComponentsObject.caption, relocatableComponentsObject.errorMessage, relocatableComponentsObject.successMessage]
@@ -89,7 +107,8 @@ var index = Object.assign( /*#__PURE__*/forwardRef(FormControl), {
   Label: FormControlLabel,
   Caption: FormControlCaption,
   ErrorMessage: FormControlErrorMessage,
-  SuccessMessage: FormControlSuccessMessage
+  SuccessMessage: FormControlSuccessMessage,
+  TooltipIcon: FormControlTooltipIcon
 });
 
 export { FormControlContext, index as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.35.2",
+  "version": "2.36.0",
   "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",
@@ -66,5 +66,5 @@
     "react-textarea-autosize": "^8.5.3",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "8a7130853ecdce2c6619bd81f69e54d86904f979"
+  "gitHead": "d14e82c45731d9641122e5888e468a0d91a80cd8"
 }