@teamturing/react-kit 2.65.1 → 2.67.0

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

@@ -1,16 +1,22 @@
-import { PropsWithChildren } from 'react';
+import { ComponentType, PropsWithChildren, SVGProps } from 'react';
 import { ResponsiveValue } from 'styled-system';
+type ToastVariantType = 'success' | 'warning';
 type Props = {
     /**
      * 변주에 대해 정의합니다.
      */
-    variant?: 'success' | 'warning';
+    variant?: ToastVariantType;
+    /**
+     * 아이콘을 정의합니다.
+     * 기본값은 variant에 따라 결정됩니다.
+     */
+    icon?: ComponentType<SVGProps<SVGSVGElement>>;
     /**
      * 크기 변화에 대한 행동을 정의합니다.
      * 반응형 디자인이 적용됩니다.
      */
     resizing?: ResponsiveValue<'hug' | 'fill'>;
 };
-declare const Toast: ({ variant, resizing, children }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element;
+declare const Toast: ({ variant, icon: Icon, resizing, children, }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element;
 export default Toast;
 export type { Props as ToastProps };

package/dist/index.js

@@ -5249,8 +5249,8 @@ const BaseIconButton = /*#__PURE__*/styled__default.default(UnstyledButton).with
     m: {
       'p': 2,
       '& svg': {
-        width: 24,
-        height: 24
+        width: 20,
+        height: 20
       }
     },
     s: {
@@ -5521,6 +5521,7 @@ const Dialog = ({
   initialFocusRef,
   sx
 }, ref) => {
+  const theme = styled.useTheme();
   const handleDismiss = React.useCallback(() => onDismiss?.(), [onDismiss]);
   const blanketRef = React.useRef(null);
   const dialogRef = React.useRef(null);
@@ -5630,7 +5631,7 @@ const Dialog = ({
             children: [/*#__PURE__*/jsxRuntime.jsx(View, {
               sx: {
                 position: 'absolute',
-                top: 3,
+                top: utils.forcePixelValue(theme.space[3] + theme.space['0.5']),
                 right: 3
               },
               children: /*#__PURE__*/jsxRuntime.jsx(IconButton, {
@@ -5780,6 +5781,7 @@ const Drawer = ({
   initialFocusRef,
   sx
 }, ref) => {
+  const theme = styled.useTheme();
   const handleDismiss = React.useCallback(() => onDismiss?.(), [onDismiss]);
   const blanketRef = React.useRef(null);
   const drawerRef = React.useRef(null);
@@ -5893,7 +5895,7 @@ const Drawer = ({
           children: [/*#__PURE__*/jsxRuntime.jsx(View, {
             sx: {
               position: 'absolute',
-              top: 2,
+              top: utils.forcePixelValue(theme.space[2] + theme.space['0.5']),
               right: 5
             },
             children: /*#__PURE__*/jsxRuntime.jsx(IconButton, {
@@ -6481,8 +6483,8 @@ const BaseIconToggleButton = /*#__PURE__*/styled__default.default(UnstyledButton
     m: {
       'p': 2,
       '& svg': {
-        width: 24,
-        height: 24
+        width: 20,
+        height: 20
       }
     },
     s: {
@@ -7432,17 +7434,16 @@ const ThemeProvider = ({
 
 const Toast = ({
   variant = 'success',
+  icon: Icon = variant === 'success' ? icons.CheckInCircleIcon : icons.ExclamationPointInCircleIcon,
   resizing = 'hug',
   children
 }) => {
-  const IconByVariant = {
-    success: icons.CheckInCircleIcon,
-    warning: icons.ExclamationPointInCircleIcon
-  }[variant];
   return /*#__PURE__*/jsxRuntime.jsxs(BaseToast, {
     variant: variant,
     resizing: resizing,
-    children: [/*#__PURE__*/jsxRuntime.jsx(IconByVariant, {}), children]
+    children: [/*#__PURE__*/jsxRuntime.jsx(Icon, {
+      className: 'toast__leading_icon'
+    }), children]
   });
 };
 const BaseToast = /*#__PURE__*/styled__default.default.div.withConfig({
@@ -7462,11 +7463,7 @@ const BaseToast = /*#__PURE__*/styled__default.default.div.withConfig({
   'fontSize': theme.fontSizes.s,
   'fontWeight': theme.fontWeights.medium,
   'lineHeight': theme.lineHeights[2],
-  '& div': {
-    margin: 0,
-    display: 'inline-block'
-  },
-  '& svg': {
+  '& .toast__leading_icon': {
     width: 24,
     minWidth: 24,
     height: 24,
@@ -7478,12 +7475,12 @@ const BaseToast = /*#__PURE__*/styled__default.default.div.withConfig({
   prop: 'variant',
   variants: {
     success: {
-      '& svg': {
+      '& .toast__leading_icon': {
         color: theme.colors['icon/success']
       }
     },
     warning: {
-      '& svg': {
+      '& .toast__leading_icon': {
         color: theme.colors['icon/warning']
       }
     }

package/esm/core/Dialog/index.js

@@ -1,7 +1,8 @@
 import { CloseIcon } from '@teamturing/icons';
+import { forcePixelValue } from '@teamturing/utils';
 import { AnimatePresence, cubicBezier } from 'framer-motion';
 import { forwardRef, useCallback, useRef, useImperativeHandle, useEffect } from 'react';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 import IconButton from '../IconButton/index.js';
 import View from '../View/index.js';
 import useFocusTrap from '../../hook/useFocusTrap.js';
@@ -26,6 +27,7 @@ const Dialog = ({
   initialFocusRef,
   sx
 }, ref) => {
+  const theme = useTheme();
   const handleDismiss = useCallback(() => onDismiss?.(), [onDismiss]);
   const blanketRef = useRef(null);
   const dialogRef = useRef(null);
@@ -135,7 +137,7 @@ const Dialog = ({
             children: [/*#__PURE__*/jsx(View, {
               sx: {
                 position: 'absolute',
-                top: 3,
+                top: forcePixelValue(theme.space[3] + theme.space['0.5']),
                 right: 3
               },
               children: /*#__PURE__*/jsx(IconButton, {

package/esm/core/Drawer/index.js

@@ -1,7 +1,8 @@
 import { CloseIcon } from '@teamturing/icons';
+import { forcePixelValue } from '@teamturing/utils';
 import { AnimatePresence, easeInOut } from 'framer-motion';
 import { forwardRef, useCallback, useRef, useImperativeHandle, useEffect } from 'react';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 import '../../node_modules/styled-system/dist/index.esm.js';
 import useFocusTrap from '../../hook/useFocusTrap.js';
 import { sx } from '../../utils/styled-system/index.js';
@@ -28,6 +29,7 @@ const Drawer = ({
   initialFocusRef,
   sx
 }, ref) => {
+  const theme = useTheme();
   const handleDismiss = useCallback(() => onDismiss?.(), [onDismiss]);
   const blanketRef = useRef(null);
   const drawerRef = useRef(null);
@@ -141,7 +143,7 @@ const Drawer = ({
           children: [/*#__PURE__*/jsx(View, {
             sx: {
               position: 'absolute',
-              top: 2,
+              top: forcePixelValue(theme.space[2] + theme.space['0.5']),
               right: 5
             },
             children: /*#__PURE__*/jsx(IconButton, {

package/esm/core/IconButton/index.js

@@ -64,8 +64,8 @@ const BaseIconButton = /*#__PURE__*/styled(UnstyledButton).withConfig({
     m: {
       'p': 2,
       '& svg': {
-        width: 24,
-        height: 24
+        width: 20,
+        height: 20
       }
     },
     s: {

package/esm/core/IconToggleButton/index.js

@@ -61,8 +61,8 @@ const BaseIconToggleButton = /*#__PURE__*/styled(UnstyledButton).withConfig({
     m: {
       'p': 2,
       '& svg': {
-        width: 24,
-        height: 24
+        width: 20,
+        height: 20
       }
     },
     s: {

package/esm/core/Toast/index.js

@@ -6,17 +6,16 @@ import { variant } from '../../node_modules/@styled-system/variant/dist/index.es
 
 const Toast = ({
   variant = 'success',
+  icon: Icon = variant === 'success' ? CheckInCircleIcon : ExclamationPointInCircleIcon,
   resizing = 'hug',
   children
 }) => {
-  const IconByVariant = {
-    success: CheckInCircleIcon,
-    warning: ExclamationPointInCircleIcon
-  }[variant];
   return /*#__PURE__*/jsxs(BaseToast, {
     variant: variant,
     resizing: resizing,
-    children: [/*#__PURE__*/jsx(IconByVariant, {}), children]
+    children: [/*#__PURE__*/jsx(Icon, {
+      className: 'toast__leading_icon'
+    }), children]
   });
 };
 const BaseToast = /*#__PURE__*/styled.div.withConfig({
@@ -36,11 +35,7 @@ const BaseToast = /*#__PURE__*/styled.div.withConfig({
   'fontSize': theme.fontSizes.s,
   'fontWeight': theme.fontWeights.medium,
   'lineHeight': theme.lineHeights[2],
-  '& div': {
-    margin: 0,
-    display: 'inline-block'
-  },
-  '& svg': {
+  '& .toast__leading_icon': {
     width: 24,
     minWidth: 24,
     height: 24,
@@ -52,12 +47,12 @@ const BaseToast = /*#__PURE__*/styled.div.withConfig({
   prop: 'variant',
   variants: {
     success: {
-      '& svg': {
+      '& .toast__leading_icon': {
         color: theme.colors['icon/success']
       }
     },
     warning: {
-      '& svg': {
+      '& .toast__leading_icon': {
         color: theme.colors['icon/warning']
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.65.1",
+  "version": "2.67.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",
@@ -65,5 +65,5 @@
     "react-textarea-autosize": "^8.5.3",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "9fae1892c2d8231b05ec646230e468f4f0263428"
+  "gitHead": "4cbea2311c3a6e06924ab571b29c4d35de67f507"
 }