@teamturing/react-kit 2.41.2 → 2.42.1

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

@@ -9,10 +9,16 @@ type Props = {
      * 반응형 디자인이 적용됩니다.
      */
     size?: ResponsiveValue<'l' | 'm' | 's'>;
+    /**
+     * 모양을 정의합니다.
+     * 반응형 디자인이 적용됩니다.
+     */
+    shape?: 'circle' | 'rounded';
     /**
      * 색을 정의합니다.
+     * 반응형 디자인이 적용됩니다.
      */
-    variant?: 'primary' | 'plain' | 'plain-neutral';
+    variant?: 'primary' | 'plain' | 'blue' | 'plain-neutral';
     /**
      * 활성화 상태를 정의합니다.
      * `true`일 경우, 활성화된 상태를 그립니다.
@@ -30,10 +36,16 @@ declare const _default: import("react").ForwardRefExoticComponent<{
      * 반응형 디자인이 적용됩니다.
      */
     size?: ResponsiveValue<"m" | "s" | "l"> | undefined;
+    /**
+     * 모양을 정의합니다.
+     * 반응형 디자인이 적용됩니다.
+     */
+    shape?: "circle" | "rounded" | undefined;
     /**
      * 색을 정의합니다.
+     * 반응형 디자인이 적용됩니다.
      */
-    variant?: "primary" | "plain" | "plain-neutral" | undefined;
+    variant?: "blue" | "primary" | "plain" | "plain-neutral" | undefined;
     /**
      * 활성화 상태를 정의합니다.
      * `true`일 경우, 활성화된 상태를 그립니다.

package/dist/index.js

@@ -20406,8 +20406,10 @@ const Overlay = ({
   React.useEffect(() => {
     if (isOpen) {
       document.addEventListener('click', handleOutsideClick);
+      document.addEventListener('touchstart', handleOutsideClick);
       return () => {
         document.removeEventListener('click', handleOutsideClick);
+        document.removeEventListener('touchstart', handleOutsideClick);
       };
     }
   }, [isOpen, handleOutsideClick]);
@@ -37360,6 +37362,7 @@ const GradientText = styled__default.default(Text)`
 const IconToggleButton = ({
   icon: Icon,
   size = 'm',
+  shape = 'circle',
   variant = 'primary',
   selected = false,
   disabled = false,
@@ -37369,6 +37372,7 @@ const IconToggleButton = ({
   ref: ref,
   icon: Icon,
   size: size,
+  shape: shape,
   variant: variant,
   selected: selected,
   type: 'button',
@@ -37383,7 +37387,6 @@ const BaseIconToggleButton = styled__default.default(UnstyledButton)(({
   theme
 }) => ({
   'position': 'relative',
-  'borderRadius': theme.radii.full,
   'transition': 'background-color 100ms, color 100ms',
   '& svg': {
     display: 'block'
@@ -37420,6 +37423,18 @@ const BaseIconToggleButton = styled__default.default(UnstyledButton)(({
       }
     }
   }
+}), ({
+  theme
+}) => variant({
+  prop: 'shape',
+  variants: {
+    circle: {
+      borderRadius: theme.radii.full
+    },
+    rounded: {
+      borderRadius: theme.radii.xs
+    }
+  }
 }), ({
   selected,
   $disabled,
@@ -37452,6 +37467,19 @@ const BaseIconToggleButton = styled__default.default(UnstyledButton)(({
         color: theme.colors['icon/disabled/subtler']
       } : {})
     },
+    'blue': {
+      ...(selected ? {
+        backgroundColor: theme.colors['bg/accent/blue/subtlest'],
+        color: theme.colors['icon/accent/blue']
+      } : {
+        backgroundColor: theme.colors['bg/neutral'],
+        color: theme.colors['icon/neutral']
+      }),
+      ...($disabled ? {
+        backgroundColor: theme.colors['bg/disabled'],
+        color: theme.colors['icon/disabled']
+      } : {})
+    },
     'plain-neutral': {
       backgroundColor: theme.colors['bg/neutral/subtler'],
       ...(selected ? {

package/esm/core/IconToggleButton/index.js

@@ -9,6 +9,7 @@ import { variant } from '../../node_modules/@styled-system/variant/dist/index.es
 const IconToggleButton = ({
   icon: Icon,
   size = 'm',
+  shape = 'circle',
   variant = 'primary',
   selected = false,
   disabled = false,
@@ -18,6 +19,7 @@ const IconToggleButton = ({
   ref: ref,
   icon: Icon,
   size: size,
+  shape: shape,
   variant: variant,
   selected: selected,
   type: 'button',
@@ -32,7 +34,6 @@ const BaseIconToggleButton = styled(UnstyledButton)(({
   theme
 }) => ({
   'position': 'relative',
-  'borderRadius': theme.radii.full,
   'transition': 'background-color 100ms, color 100ms',
   '& svg': {
     display: 'block'
@@ -69,6 +70,18 @@ const BaseIconToggleButton = styled(UnstyledButton)(({
       }
     }
   }
+}), ({
+  theme
+}) => variant({
+  prop: 'shape',
+  variants: {
+    circle: {
+      borderRadius: theme.radii.full
+    },
+    rounded: {
+      borderRadius: theme.radii.xs
+    }
+  }
 }), ({
   selected,
   $disabled,
@@ -101,6 +114,19 @@ const BaseIconToggleButton = styled(UnstyledButton)(({
         color: theme.colors['icon/disabled/subtler']
       } : {})
     },
+    'blue': {
+      ...(selected ? {
+        backgroundColor: theme.colors['bg/accent/blue/subtlest'],
+        color: theme.colors['icon/accent/blue']
+      } : {
+        backgroundColor: theme.colors['bg/neutral'],
+        color: theme.colors['icon/neutral']
+      }),
+      ...($disabled ? {
+        backgroundColor: theme.colors['bg/disabled'],
+        color: theme.colors['icon/disabled']
+      } : {})
+    },
     'plain-neutral': {
       backgroundColor: theme.colors['bg/neutral/subtler'],
       ...(selected ? {

package/esm/core/Overlay/index.js

@@ -57,8 +57,10 @@ const Overlay = ({
   useEffect(() => {
     if (isOpen) {
       document.addEventListener('click', handleOutsideClick);
+      document.addEventListener('touchstart', handleOutsideClick);
       return () => {
         document.removeEventListener('click', handleOutsideClick);
+        document.removeEventListener('touchstart', handleOutsideClick);
       };
     }
   }, [isOpen, handleOutsideClick]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.41.2",
+  "version": "2.42.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",
@@ -66,5 +66,5 @@
     "react-textarea-autosize": "^8.5.3",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "1c94452565da07dbabbccc743bc12fde947342cc"
+  "gitHead": "c8efab2beaf98b2cdcb79ba45eaebfc50f985dfe"
 }