@teamturing/react-kit 2.39.2 → 2.41.0

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

@@ -12,7 +12,7 @@ type Props = {
     /**
      * 색을 정의합니다.
      */
-    variant?: 'primary' | 'plain';
+    variant?: 'primary' | 'plain' | 'plain-neutral';
     /**
      * 활성화 상태를 정의합니다.
      * `true`일 경우, 활성화된 상태를 그립니다.
@@ -33,7 +33,7 @@ declare const _default: import("react").ForwardRefExoticComponent<{
     /**
      * 색을 정의합니다.
      */
-    variant?: "primary" | "plain" | undefined;
+    variant?: "primary" | "plain" | "plain-neutral" | undefined;
     /**
      * 활성화 상태를 정의합니다.
      * `true`일 경우, 활성화된 상태를 그립니다.

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { ColorKey, RadiiKey, SurfaceElevationKey } from '@teamturing/token-studio';
+import { ColorKey, RadiiKey, SpaceKey, SurfaceElevationKey } from '@teamturing/token-studio';
 import { LayoutProps, ColorProps, FlexboxProps, BackgroundProps, BorderProps, PositionProps, ShadowProps, BorderRadiusProps, Theme, BorderColorProps } from 'styled-system';
-import { SxProp } from '../../utils/styled-system';
-type Props = {} & SxProp & LayoutProps & ColorProps<Theme, ColorKey | SurfaceElevationKey> & FlexboxProps & BackgroundProps & BorderProps & BorderColorProps<Theme, ColorKey | SurfaceElevationKey> & PositionProps & ShadowProps<Theme> & BorderRadiusProps<Theme, RadiiKey>;
+import { ColumnGapProps, GapProps, RowGapProps, SxProp } from '../../utils/styled-system';
+type Props = {} & SxProp & LayoutProps & ColorProps<Theme, ColorKey | SurfaceElevationKey> & FlexboxProps & BackgroundProps & BorderProps & BorderColorProps<Theme, ColorKey | SurfaceElevationKey> & PositionProps & ShadowProps<Theme> & BorderRadiusProps<Theme, RadiiKey> & GapProps<Theme, SpaceKey> & ColumnGapProps<Theme, SpaceKey> & RowGapProps<Theme, SpaceKey>;
 declare const View: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Props>>;
 export default View;
 export type { Props as ViewProps };

package/dist/index.js

@@ -1062,6 +1062,24 @@ const lineClamp = system({
     scale: 'WebkitLineClamp'
   }
 });
+const gap = system({
+  gap: {
+    property: 'gap',
+    scale: 'space'
+  }
+});
+const columnGap = system({
+  columnGap: {
+    property: 'columnGap',
+    scale: 'space'
+  }
+});
+const rowGap = system({
+  rowGap: {
+    property: 'rowGap',
+    scale: 'space'
+  }
+});
 
 const UnstyledTableBody = styled__default.default.tbody`
   ${sx}
@@ -5432,7 +5450,7 @@ if (process.env.NODE_ENV === 'production') {
 var reactIsExports = reactIs.exports;
 
 const View = styled__default.default.div`
-  ${compose(layout$1, color$2, flexbox, background, border, position, shadow$1)}
+  ${compose(layout$1, color$2, flexbox, background, border, position, shadow$1, gap, columnGap, rowGap)}
   ${sx}
 `;
 
@@ -37405,7 +37423,7 @@ const BaseIconToggleButton = styled__default.default(UnstyledButton)(({
 }) => variant({
   prop: 'variant',
   variants: {
-    primary: {
+    'primary': {
       ...(selected ? {
         backgroundColor: theme.colors['bg/selected/violet'],
         color: theme.colors['icon/inverse']
@@ -37418,7 +37436,7 @@ const BaseIconToggleButton = styled__default.default(UnstyledButton)(({
         color: theme.colors['icon/disabled']
       } : {})
     },
-    plain: {
+    'plain': {
       backgroundColor: theme.colors['bg/neutral/subtler'],
       ...(selected ? {
         color: theme.colors['icon/selected/violet']
@@ -37429,6 +37447,18 @@ const BaseIconToggleButton = styled__default.default(UnstyledButton)(({
         backgroundColor: theme.colors['bg/disabled/subtlest'],
         color: theme.colors['icon/disabled/subtler']
       } : {})
+    },
+    'plain-neutral': {
+      backgroundColor: theme.colors['bg/neutral/subtler'],
+      ...(selected ? {
+        color: theme.colors['icon/neutral/bold']
+      } : {
+        color: theme.colors['icon/neutral']
+      }),
+      ...($disabled ? {
+        backgroundColor: theme.colors['bg/disabled/subtlest'],
+        color: theme.colors['icon/disabled/subtler']
+      } : {})
     }
   }
 }), sx);
@@ -39951,7 +39981,10 @@ exports.Tooltip = Tooltip$1;
 exports.UnstyledButton = UnstyledButton;
 exports.UnstyledTable = index$e;
 exports.View = View;
+exports.columnGap = columnGap;
+exports.gap = gap;
 exports.lineClamp = lineClamp;
+exports.rowGap = rowGap;
 exports.sx = sx;
 exports.textDecoration = textDecoration;
 exports.theme = theme;

package/dist/utils/styled-system/index.d.ts

@@ -1,6 +1,6 @@
 import { SystemStyleObject } from '@styled-system/css';
 import * as CSS from 'csstype';
-import { RequiredTheme, ResponsiveValue, Theme } from 'styled-system';
+import { RequiredTheme, ResponsiveValue, Theme, ThemeValue } from 'styled-system';
 type CSSCustomProperties = {
     [key: `--${string}`]: string | number;
 };
@@ -31,5 +31,17 @@ type LineClampProps<ThemeType extends Theme = RequiredTheme> = {
     lineClamp?: ResponsiveValue<CSS.Property.LineClamp, ThemeType> | undefined;
 };
 declare const lineClamp: import("styled-system").styleFn;
-export { sx, textDecoration, whiteSpace, wordBreak, lineClamp };
-export type { BetterSystemStyleObject, AsProp, TextDecorationProps, WhiteSpaceProps, WordBreakProps, LineClampProps };
+type GapProps<ThemeType extends Theme = RequiredTheme, TVal = ThemeValue<'space', ThemeType>> = {
+    gap?: ResponsiveValue<TVal, ThemeType> | undefined;
+};
+declare const gap: import("styled-system").styleFn;
+type ColumnGapProps<ThemeType extends Theme = RequiredTheme, TVal = ThemeValue<'space', ThemeType>> = {
+    columnGap?: ResponsiveValue<TVal, ThemeType> | undefined;
+};
+declare const columnGap: import("styled-system").styleFn;
+type RowGapProps<ThemeType extends Theme = RequiredTheme, TVal = ThemeValue<'space', ThemeType>> = {
+    rowGap?: ResponsiveValue<TVal, ThemeType> | undefined;
+};
+declare const rowGap: import("styled-system").styleFn;
+export { sx, textDecoration, whiteSpace, wordBreak, lineClamp, gap, columnGap, rowGap };
+export type { BetterSystemStyleObject, AsProp, TextDecorationProps, WhiteSpaceProps, WordBreakProps, LineClampProps, GapProps, ColumnGapProps, RowGapProps, };

package/esm/core/IconToggleButton/index.js

@@ -76,7 +76,7 @@ const BaseIconToggleButton = styled(UnstyledButton)(({
 }) => variant({
   prop: 'variant',
   variants: {
-    primary: {
+    'primary': {
       ...(selected ? {
         backgroundColor: theme.colors['bg/selected/violet'],
         color: theme.colors['icon/inverse']
@@ -89,7 +89,7 @@ const BaseIconToggleButton = styled(UnstyledButton)(({
         color: theme.colors['icon/disabled']
       } : {})
     },
-    plain: {
+    'plain': {
       backgroundColor: theme.colors['bg/neutral/subtler'],
       ...(selected ? {
         color: theme.colors['icon/selected/violet']
@@ -100,6 +100,18 @@ const BaseIconToggleButton = styled(UnstyledButton)(({
         backgroundColor: theme.colors['bg/disabled/subtlest'],
         color: theme.colors['icon/disabled/subtler']
       } : {})
+    },
+    'plain-neutral': {
+      backgroundColor: theme.colors['bg/neutral/subtler'],
+      ...(selected ? {
+        color: theme.colors['icon/neutral/bold']
+      } : {
+        color: theme.colors['icon/neutral']
+      }),
+      ...($disabled ? {
+        backgroundColor: theme.colors['bg/disabled/subtlest'],
+        color: theme.colors['icon/disabled/subtler']
+      } : {})
     }
   }
 }), sx);

package/esm/core/View/index.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import '../../node_modules/styled-system/dist/index.esm.js';
-import { sx } from '../../utils/styled-system/index.js';
+import { sx, gap, columnGap, rowGap } from '../../utils/styled-system/index.js';
 import { compose } from '../../node_modules/@styled-system/core/dist/index.esm.js';
 import { layout } from '../../node_modules/@styled-system/layout/dist/index.esm.js';
 import { color } from '../../node_modules/@styled-system/color/dist/index.esm.js';
@@ -11,7 +11,7 @@ import { position } from '../../node_modules/@styled-system/position/dist/index.
 import { shadow } from '../../node_modules/@styled-system/shadow/dist/index.esm.js';
 
 const View = styled.div`
-  ${compose(layout, color, flexbox, background, border, position, shadow)}
+  ${compose(layout, color, flexbox, background, border, position, shadow, gap, columnGap, rowGap)}
   ${sx}
 `;
 

package/esm/index.js

@@ -59,5 +59,5 @@ export { default as useSafeLayoutEffect } from './hook/useSafeLayoutEffect.js';
 export { default as useTabState } from './hook/useTabState.js';
 export { default as useToggleState } from './hook/useToggleState.js';
 export { default as theme } from './theme/index.js';
-export { lineClamp, sx, textDecoration, whiteSpace, wordBreak } from './utils/styled-system/index.js';
+export { columnGap, gap, lineClamp, rowGap, sx, textDecoration, whiteSpace, wordBreak } from './utils/styled-system/index.js';
 export { AnimatePresence } from './node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';

package/esm/utils/styled-system/index.js

@@ -29,5 +29,23 @@ const lineClamp = system({
     scale: 'WebkitLineClamp'
   }
 });
+const gap = system({
+  gap: {
+    property: 'gap',
+    scale: 'space'
+  }
+});
+const columnGap = system({
+  columnGap: {
+    property: 'columnGap',
+    scale: 'space'
+  }
+});
+const rowGap = system({
+  rowGap: {
+    property: 'rowGap',
+    scale: 'space'
+  }
+});
 
-export { lineClamp, sx, textDecoration, whiteSpace, wordBreak };
+export { columnGap, gap, lineClamp, rowGap, sx, textDecoration, whiteSpace, wordBreak };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.39.2",
+  "version": "2.41.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": "da1c0d7aaf792147c844b59991aae3fe4b384fb6"
+  "gitHead": "ac4bfda6cfb14d28ea9924b4585cfd1c50ed3c5d"
 }