@teamturing/react-kit 2.42.3 → 2.43.1

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

@@ -7,6 +7,10 @@ type Props = {
     gapX?: ResponsiveValue<SpaceKey>;
     gapY?: ResponsiveValue<SpaceKey>;
     wrap?: ResponsiveValue<boolean>;
+    /**
+     * 화면의 레이아웃을 위해 사용하는 경우 document size를 넘어가는 경우를 방지하기 위해 사용합니다.
+     */
+    layout?: boolean;
 } & Pick<ViewProps, 'alignItems' | 'justifyContent' | 'sx'> & Pick<HTMLAttributes<HTMLDivElement>, 'className'> & AsProp;
 type UnitSizeType = 'min' | 'max' | number;
 type GridUnitProps = {
@@ -16,6 +20,10 @@ declare const _default: import("react").ForwardRefExoticComponent<{
     gapX?: ResponsiveValue<0 | 1 | 20 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 12 | 14 | 16 | 18 | "-80" | "-50" | "-48" | "-40" | "-32" | "-30" | "-28" | "-24" | "-20" | "-18" | "-16" | "-14" | "-12" | "-10" | "-8" | "-7" | "-6" | "-5" | "-4" | "-3" | "-2" | "-1" | "-0.5" | "-0.25" | 0.25 | 0.5 | 24 | 28 | 30 | 32 | 40 | 48 | 50 | 80> | undefined;
     gapY?: ResponsiveValue<0 | 1 | 20 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 12 | 14 | 16 | 18 | "-80" | "-50" | "-48" | "-40" | "-32" | "-30" | "-28" | "-24" | "-20" | "-18" | "-16" | "-14" | "-12" | "-10" | "-8" | "-7" | "-6" | "-5" | "-4" | "-3" | "-2" | "-1" | "-0.5" | "-0.25" | 0.25 | 0.5 | 24 | 28 | 30 | 32 | 40 | 48 | 50 | 80> | undefined;
     wrap?: ResponsiveValue<boolean> | undefined;
+    /**
+     * 화면의 레이아웃을 위해 사용하는 경우 document size를 넘어가는 경우를 방지하기 위해 사용합니다.
+     */
+    layout?: boolean | undefined;
 } & Pick<ViewProps, "alignItems" | "justifyContent" | "sx"> & Pick<HTMLAttributes<HTMLDivElement>, "className"> & AsProp & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>> & {

package/dist/index.js

@@ -6675,28 +6675,43 @@ const BaseGrid = styled__default.default(View)({
   display: 'flex',
   flexDirection: 'row'
 }, ({
-  theme
+  theme,
+  layout
 }) => variant({
   prop: 'gapX',
   variants: Object.fromEntries(Object.entries(theme.space).map(([key, value]) => {
     const styleValue = {
-      '& > *': {
-        px: forcePixelValue(value / 2)
-      },
-      'mx': forcePixelValue(-value / 2)
+      ...(layout ? {
+        '& > *': {
+          pl: forcePixelValue(value)
+        },
+        'ml': forcePixelValue(-value)
+      } : {
+        '& > *': {
+          px: forcePixelValue(value / 2)
+        },
+        'mx': forcePixelValue(-value / 2)
+      })
     };
     return [key, styleValue];
   }))
 }), ({
-  theme
+  theme,
+  layout
 }) => variant({
   prop: 'gapY',
   variants: Object.fromEntries(Object.entries(theme.space).map(([key, value]) => {
     const styleValue = {
-      '& > *': {
-        mt: forcePixelValue(value)
-      },
-      'mt': forcePixelValue(-value)
+      ...(layout ? {
+        '& > *': {
+          pt: forcePixelValue(value)
+        }
+      } : {
+        '& > *': {
+          mt: forcePixelValue(value)
+        }
+      }),
+      mt: forcePixelValue(-value)
     };
     return [key, styleValue];
   }))
@@ -39168,7 +39183,8 @@ const colorStopList = {
   colorStopListVioletPink: '#8E6CF0, #CF75F3',
   colorStopListBlackGray: '#0F0E0F, #595959',
   colorStopListWhite: '#FFFFFF, #FFFFFF00',
-  colorStopListBlack: '#000000, #00000000'
+  colorStopListBlack: '#000000, #00000000',
+  colorStopListPinkVioletBlue: '#FF6DEB, #8E6EF1, #5F9EFF'
 };
 
 const direction = {
@@ -39181,12 +39197,16 @@ const direction = {
 
 const generateGradientTokenValue = (direction$1, colorStopList$1) => `${direction[direction$1]}, ${colorStopList[colorStopList$1]}`;
 const textGradient = {
-  'text/accent': generateGradientTokenValue('directionToRightBottom', 'colorStopListVioletPink')
+  'text/accent': generateGradientTokenValue('directionToRightBottom', 'colorStopListVioletPink'),
+  'text/accent/pinkblue': generateGradientTokenValue('directionToRightBottom', 'colorStopListPinkVioletBlue')
 };
 const bgGradient = {
   'bg/accent/violet': generateGradientTokenValue('directionToRightBottom', 'colorStopListVioletPink'),
   'bg/accent/neutral': generateGradientTokenValue('directionToRightBottom', 'colorStopListBlackGray')
 };
+const iconGradient = {
+  'icon/accent/pinkblue': generateGradientTokenValue('directionToRightBottom', 'colorStopListPinkVioletBlue')
+};
 const borderGradient = {
   'border/accent/violet': generateGradientTokenValue('directionToRightBottom', 'colorStopListVioletPink')
 };
@@ -39206,6 +39226,7 @@ const overlayGradient = {
 };
 const gradient = {
   ...textGradient,
+  ...iconGradient,
   ...bgGradient,
   ...borderGradient,
   ...overlayGradient

package/dist/theme/index.d.ts

@@ -295,7 +295,9 @@ declare const theme: {
         readonly 'border/accent/violet': string;
         readonly 'bg/accent/violet': string;
         readonly 'bg/accent/neutral': string;
+        readonly 'icon/accent/pinkblue': string;
         readonly 'text/accent': string;
+        readonly 'text/accent/pinkblue': string;
     };
     shadows: {
         'shadow/overlay': string;

package/esm/core/Grid/index.js

@@ -31,28 +31,43 @@ const BaseGrid = styled(View)({
   display: 'flex',
   flexDirection: 'row'
 }, ({
-  theme
+  theme,
+  layout
 }) => variant({
   prop: 'gapX',
   variants: Object.fromEntries(Object.entries(theme.space).map(([key, value]) => {
     const styleValue = {
-      '& > *': {
-        px: forcePixelValue(value / 2)
-      },
-      'mx': forcePixelValue(-value / 2)
+      ...(layout ? {
+        '& > *': {
+          pl: forcePixelValue(value)
+        },
+        'ml': forcePixelValue(-value)
+      } : {
+        '& > *': {
+          px: forcePixelValue(value / 2)
+        },
+        'mx': forcePixelValue(-value / 2)
+      })
     };
     return [key, styleValue];
   }))
 }), ({
-  theme
+  theme,
+  layout
 }) => variant({
   prop: 'gapY',
   variants: Object.fromEntries(Object.entries(theme.space).map(([key, value]) => {
     const styleValue = {
-      '& > *': {
-        mt: forcePixelValue(value)
-      },
-      'mt': forcePixelValue(-value)
+      ...(layout ? {
+        '& > *': {
+          pt: forcePixelValue(value)
+        }
+      } : {
+        '& > *': {
+          mt: forcePixelValue(value)
+        }
+      }),
+      mt: forcePixelValue(-value)
     };
     return [key, styleValue];
   }))

package/esm/packages/token-studio/esm/foundation/gradient/colorStopList/index.js

@@ -2,7 +2,8 @@ const colorStopList = {
   colorStopListVioletPink: '#8E6CF0, #CF75F3',
   colorStopListBlackGray: '#0F0E0F, #595959',
   colorStopListWhite: '#FFFFFF, #FFFFFF00',
-  colorStopListBlack: '#000000, #00000000'
+  colorStopListBlack: '#000000, #00000000',
+  colorStopListPinkVioletBlue: '#FF6DEB, #8E6EF1, #5F9EFF'
 };
 
 export { colorStopList as default };

package/esm/packages/token-studio/esm/token/gradient/index.js

@@ -3,12 +3,16 @@ import direction from '../../foundation/gradient/direction/index.js';
 
 const generateGradientTokenValue = (direction$1, colorStopList$1) => `${direction[direction$1]}, ${colorStopList[colorStopList$1]}`;
 const textGradient = {
-  'text/accent': generateGradientTokenValue('directionToRightBottom', 'colorStopListVioletPink')
+  'text/accent': generateGradientTokenValue('directionToRightBottom', 'colorStopListVioletPink'),
+  'text/accent/pinkblue': generateGradientTokenValue('directionToRightBottom', 'colorStopListPinkVioletBlue')
 };
 const bgGradient = {
   'bg/accent/violet': generateGradientTokenValue('directionToRightBottom', 'colorStopListVioletPink'),
   'bg/accent/neutral': generateGradientTokenValue('directionToRightBottom', 'colorStopListBlackGray')
 };
+const iconGradient = {
+  'icon/accent/pinkblue': generateGradientTokenValue('directionToRightBottom', 'colorStopListPinkVioletBlue')
+};
 const borderGradient = {
   'border/accent/violet': generateGradientTokenValue('directionToRightBottom', 'colorStopListVioletPink')
 };
@@ -28,9 +32,10 @@ const overlayGradient = {
 };
 const gradient = {
   ...textGradient,
+  ...iconGradient,
   ...bgGradient,
   ...borderGradient,
   ...overlayGradient
 };
 
-export { bgGradient, borderGradient, gradient as default, overlayGradient, textGradient };
+export { bgGradient, borderGradient, gradient as default, iconGradient, overlayGradient, textGradient };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.42.3",
+  "version": "2.43.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",
@@ -56,7 +56,7 @@
     "@floating-ui/react-dom": "^2.0.2",
     "@primer/behaviors": "^1.3.6",
     "@teamturing/icons": "^1.49.0",
-    "@teamturing/token-studio": "^1.10.0",
+    "@teamturing/token-studio": "^1.11.0",
     "@teamturing/utils": "^1.4.0",
     "framer-motion": "^10.16.4",
     "lodash.debounce": "^4.0.8",
@@ -66,5 +66,5 @@
     "react-textarea-autosize": "^8.5.3",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "e21ec7a978c176d80e14e958adc570cb44281bf2"
+  "gitHead": "7a5a4ccc3b698c7c5f4e2fe6f8cb209cdf38e245"
 }