@teamturing/react-kit 1.1.5 → 1.2.0

package/esm/packages/react-kit/src/core/Button/index.js

@@ -0,0 +1,347 @@
+import { extends as _extends } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import color from '../../../../token-studio/esm/token/color/index.js';
+import radii from '../../../../token-studio/esm/token/radii/index.js';
+import typography from '../../../../token-studio/esm/token/typography/index.js';
+import { forwardRef } from 'react';
+import Qe from '../../../../../node_modules/styled-components/dist/styled-components.esm.js';
+import '../../../../../node_modules/styled-system/dist/index.esm.js';
+import Spinner from '../Spinner/index.js';
+import View from '../View/index.js';
+import UnstyledButton from '../_UnstyledButton.js';
+import { variant } from '../../../../../node_modules/@styled-system/variant/dist/index.esm.js';
+
+const Button = /*#__PURE__*/forwardRef(({
+  size = 'm',
+  variant = 'primary',
+  fillWidth = false,
+  disabled = false,
+  loading = false,
+  leadingIcon: LeadingIcon,
+  trailingIcon: TrailingIcon,
+  children,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/React.createElement(BaseButton, _extends({
+    ref: ref,
+    size: size,
+    disabled: disabled || loading,
+    $disabled: disabled,
+    $loading: loading,
+    variant: variant,
+    leadingIcon: LeadingIcon,
+    trailingIcon: TrailingIcon,
+    fillWidth: fillWidth
+  }, props), /*#__PURE__*/React.createElement(View, {
+    sx: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      columnGap: 1,
+      visibility: !loading ? 'initial' : 'hidden'
+    }
+  }, LeadingIcon ? /*#__PURE__*/React.createElement(LeadingIcon, null) : null, children, TrailingIcon ? /*#__PURE__*/React.createElement(TrailingIcon, null) : null), loading ? /*#__PURE__*/React.createElement(View, {
+    sx: {
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(BaseSpinner, {
+    size: size,
+    variant: variant
+  })) : null);
+});
+const BaseButton = Qe(UnstyledButton)(({
+  $loading,
+  $disabled,
+  fillWidth
+}) => ({
+  'position': 'relative',
+  'borderRadius': radii.full,
+  'backgroundColor': 'black',
+  'transition': 'background-color 100ms, color 100ms',
+  'cursor': $loading ? 'progress' : $disabled ? 'not-allowed' : 'pointer',
+  'width': fillWidth ? '100%' : 'initial',
+  '& svg': {
+    transition: 'color 100ms'
+  }
+}), ({
+  leadingIcon,
+  trailingIcon
+}) => variant({
+  prop: 'size',
+  variants: {
+    l: {
+      'pl': leadingIcon && !trailingIcon ? 3 : 4,
+      'pr': !leadingIcon && trailingIcon ? 3 : 4,
+      'py': 3,
+      'height': 'initial',
+      'maxHeight': 'initial',
+      'fontSize': typography['s'].fontSize,
+      'fontWeight': typography['s'].fontWeight,
+      'lineHeight': typography['s'].lineHeight,
+      '& svg': {
+        width: 20,
+        height: 20
+      }
+    },
+    m: {
+      'pl': leadingIcon && !trailingIcon ? 3 : 4,
+      'pr': !leadingIcon && trailingIcon ? 3 : 4,
+      'py': 2,
+      'height': 'initial',
+      'maxHeight': 'initial',
+      'fontSize': typography['xs'].fontSize,
+      'fontWeight': typography['xs'].fontWeight,
+      'lineHeight': typography['xs'].lineHeight,
+      '& svg': {
+        width: 16,
+        height: 16
+      }
+    },
+    s: {
+      'pl': leadingIcon && !trailingIcon ? 2 : 3,
+      'pr': !leadingIcon && trailingIcon ? 2 : 3,
+      'py': 0,
+      'height': 32,
+      'maxHeight': 32,
+      'fontSize': typography['xxs'].fontSize,
+      'fontWeight': typography['xxs'].fontWeight,
+      'lineHeight': typography['xxs'].lineHeight,
+      '& svg': {
+        width: 12,
+        height: 12
+      }
+    }
+  }
+}), ({
+  $disabled
+}) => variant({
+  prop: 'variant',
+  variants: {
+    primary: {
+      'backgroundColor': color['bg/primary'],
+      'color': color['text/inverse'],
+      '& svg': {
+        color: color['icon/inverse']
+      },
+      ':hover:not(:disabled)': {
+        backgroundColor: color['bg/primary/hovered']
+      },
+      ':active:not(:disabled)': {
+        backgroundColor: color['bg/primary/pressed']
+      },
+      ':focus-visible': {
+        outlineColor: color['border/focused'],
+        outlineStyle: 'solid',
+        outlineWidth: 2,
+        outlineOffset: 2
+      },
+      ...($disabled ? {
+        'backgroundColor': color['bg/disabled'],
+        'color': color['text/disabled'],
+        '& svg': {
+          color: color['icon/disabled']
+        }
+      } : {})
+    },
+    secondary: {
+      'backgroundColor': color['bg/secondary'],
+      'color': color['text/primary'],
+      '& svg': {
+        color: color['icon/primary']
+      },
+      ':hover:not(:disabled)': {
+        backgroundColor: color['bg/secondary/hovered']
+      },
+      ':active:not(:disabled)': {
+        backgroundColor: color['bg/secondary/pressed']
+      },
+      ':focus-visible': {
+        outlineColor: color['border/focused'],
+        outlineStyle: 'solid',
+        outlineWidth: 2,
+        outlineOffset: 2
+      },
+      ...($disabled ? {
+        'backgroundColor': color['bg/disabled'],
+        'color': color['text/disabled'],
+        '& svg': {
+          color: color['icon/disabled']
+        }
+      } : {})
+    },
+    tertiary: {
+      'backgroundColor': color['bg/neutral'],
+      'color': color['text/neutral'],
+      '& svg': {
+        color: color['icon/accent/gray']
+      },
+      ':hover:not(:disabled)': {
+        backgroundColor: color['bg/neutral/hovered']
+      },
+      ':active:not(:disabled)': {
+        backgroundColor: color['bg/neutral/pressed']
+      },
+      ':focus-visible': {
+        outlineColor: color['border/focused'],
+        outlineStyle: 'solid',
+        outlineWidth: 2,
+        outlineOffset: 2
+      },
+      ...($disabled ? {
+        'backgroundColor': color['bg/disabled'],
+        'color': color['text/disabled'],
+        '& svg': {
+          color: color['icon/disabled']
+        }
+      } : {})
+    },
+    outlined: {
+      'backgroundColor': color['bg/neutral/subtler'],
+      'color': color['text/neutral/subtle'],
+      '& svg': {
+        color: color['icon/neutral/bolder']
+      },
+      ':after': {
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: color['border/neutral/bolder'],
+        borderRadius: radii.full,
+        boxSizing: 'border-box'
+      },
+      ':hover:not(:disabled)': {
+        backgroundColor: color['bg/neutral/subtler/hovered']
+      },
+      ':active:not(:disabled)': {
+        backgroundColor: color['bg/neutral/subtler/pressed']
+      },
+      ':focus-visible': {
+        outlineColor: color['border/focused'],
+        outlineStyle: 'solid',
+        outlineWidth: 2,
+        outlineOffset: 2
+      },
+      ...($disabled ? {
+        'backgroundColor': color['bg/disabled'],
+        'color': color['text/disabled'],
+        '& svg': {
+          color: color['icon/disabled']
+        },
+        ':after': {
+          display: 'none'
+        }
+      } : {})
+    },
+    plain: {
+      'backgroundColor': color['bg/neutral/subtler'],
+      'color': color['text/neutral/subtle'],
+      '& svg': {
+        color: color['icon/neutral/bolder']
+      },
+      ':hover:not(:disabled)': {
+        'color': color['text/neutral'],
+        '& svg': {
+          color: color['icon/accent/gray']
+        }
+      },
+      ':active:not(:disabled)': {
+        'color': color['text/neutral'],
+        '& svg': {
+          color: color['icon/accent/gray']
+        }
+      },
+      ':focus-visible': {
+        outlineColor: color['border/focused'],
+        outlineStyle: 'solid',
+        outlineWidth: 2,
+        outlineOffset: 2
+      },
+      ...($disabled ? {
+        'backgroundColor': color['bg/disabled'],
+        'color': color['text/disabled'],
+        '& svg': {
+          color: color['icon/disabled']
+        }
+      } : {})
+    },
+    danger: {
+      'backgroundColor': color['bg/danger/bold'],
+      'color': color['text/inverse'],
+      '& svg': {
+        color: color['icon/inverse']
+      },
+      ':hover:not(:disabled)': {
+        backgroundColor: color['bg/danger/bold/hovered']
+      },
+      ':active:not(:disabled)': {
+        backgroundColor: color['bg/danger/bold/pressed']
+      },
+      ':focus-visible': {
+        outlineColor: color['border/focused'],
+        outlineStyle: 'solid',
+        outlineWidth: 2,
+        outlineOffset: 2
+      },
+      ...($disabled ? {
+        'backgroundColor': color['bg/disabled'],
+        'color': color['text/disabled'],
+        '& svg': {
+          color: color['icon/disabled']
+        }
+      } : {})
+    }
+  }
+}));
+const BaseSpinner = Qe(Spinner)(variant({
+  prop: 'size',
+  variants: {
+    l: {
+      width: 20,
+      height: 20
+    },
+    m: {
+      width: 16,
+      height: 16
+    },
+    s: {
+      width: 16,
+      height: 16
+    }
+  }
+}), variant({
+  prop: 'variant',
+  variants: {
+    primary: {
+      color: color['icon/inverse']
+    },
+    secondary: {
+      color: color['icon/primary']
+    },
+    tertiary: {
+      color: color['icon/accent/gray']
+    },
+    outlined: {
+      color: color['icon/neutral/bolder']
+    },
+    plain: {
+      color: color['icon/neutral/bolder']
+    },
+    danger: {
+      color: color['icon/inverse']
+    }
+  }
+}));
+
+export { Button as default };

package/esm/packages/react-kit/src/core/Chip/index.js

@@ -1,6 +1,6 @@
-import color from '../../../../token-studio/src/token/color/index.js';
-import radii from '../../../../token-studio/src/token/radii/index.js';
-import typography from '../../../../token-studio/src/token/typography/index.js';
+import color from '../../../../token-studio/esm/token/color/index.js';
+import radii from '../../../../token-studio/esm/token/radii/index.js';
+import typography from '../../../../token-studio/esm/token/typography/index.js';
 import Qe from '../../../../../node_modules/styled-components/dist/styled-components.esm.js';
 import '../../../../../node_modules/styled-system/dist/index.esm.js';
 import { sx } from '../../utils/styled-system/index.js';

package/esm/packages/react-kit/src/core/Grid/index.js

@@ -1,5 +1,5 @@
 import { extends as _extends } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import space from '../../../../token-studio/src/token/space/index.js';
+import space from '../../../../token-studio/esm/token/space/index.js';
 import { forwardRef } from 'react';
 import Qe from '../../../../../node_modules/styled-components/dist/styled-components.esm.js';
 import '../../../../../node_modules/styled-system/dist/index.esm.js';

package/esm/packages/react-kit/src/core/IconButton/index.js

@@ -1,6 +1,6 @@
 import { extends as _extends } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import color from '../../../../token-studio/src/token/color/index.js';
-import radii from '../../../../token-studio/src/token/radii/index.js';
+import color from '../../../../token-studio/esm/token/color/index.js';
+import radii from '../../../../token-studio/esm/token/radii/index.js';
 import { forwardRef } from 'react';
 import Qe from '../../../../../node_modules/styled-components/dist/styled-components.esm.js';
 import '../../../../../node_modules/styled-system/dist/index.esm.js';

package/esm/packages/react-kit/src/core/IconToggleButton/index.js

@@ -1,6 +1,6 @@
 import { extends as _extends } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import color from '../../../../token-studio/src/token/color/index.js';
-import radii from '../../../../token-studio/src/token/radii/index.js';
+import color from '../../../../token-studio/esm/token/color/index.js';
+import radii from '../../../../token-studio/esm/token/radii/index.js';
 import Qe from '../../../../../node_modules/styled-components/dist/styled-components.esm.js';
 import '../../../../../node_modules/styled-system/dist/index.esm.js';
 import { sx } from '../../utils/styled-system/index.js';

package/esm/packages/react-kit/src/core/Spinner/index.js

@@ -1,6 +1,6 @@
 import 'react';
-import SvgProgressGradient from '../../../../icons/src/ProgressGradient.js';
-import color from '../../../../token-studio/src/token/color/index.js';
+import SvgProgressGradient from '../../../../icons/esm/ProgressGradient.js';
+import color from '../../../../token-studio/esm/token/color/index.js';
 import Qe, { keyframes as nt } from '../../../../../node_modules/styled-components/dist/styled-components.esm.js';
 
 const spin = nt`

package/esm/packages/react-kit/src/core/Stack/index.js

@@ -1,5 +1,5 @@
 import { extends as _extends } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import space from '../../../../token-studio/src/token/space/index.js';
+import space from '../../../../token-studio/esm/token/space/index.js';
 import { forwardRef } from 'react';
 import Qe from '../../../../../node_modules/styled-components/dist/styled-components.esm.js';
 import '../../../../../node_modules/styled-system/dist/index.esm.js';

package/esm/packages/react-kit/src/core/Text/index.js

@@ -1,4 +1,4 @@
-import typography from '../../../../token-studio/src/token/typography/index.js';
+import typography from '../../../../token-studio/esm/token/typography/index.js';
 import Qe from '../../../../../node_modules/styled-components/dist/styled-components.esm.js';
 import { fontSize, fontWeight, lineHeight, textAlign } from '../../../../../node_modules/styled-system/dist/index.esm.js';
 import { sx, wordBreak, whiteSpace, textDecoration } from '../../utils/styled-system/index.js';

package/esm/packages/react-kit/src/index.js

@@ -1,3 +1,4 @@
+export { default as Button } from './core/Button/index.js';
 export { default as Chip } from './core/Chip/index.js';
 export { default as GradientText } from './core/GradientText/index.js';
 export { default as Grid } from './core/Grid/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "1.1.5",
+  "version": "1.2.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",
@@ -11,8 +11,9 @@
     "esm"
   ],
   "exports": {
-    "require": "./src/index.ts",
-    "import": "./src/index.ts"
+    "require": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "import": "./esm/index.js"
   },
   "repository": {
     "type": "git",
@@ -44,8 +45,8 @@
     "styled-system": "^5.1.5"
   },
   "dependencies": {
-    "@teamturing/icons": "^1.17.5",
-    "@teamturing/token-studio": "^1.1.5"
+    "@teamturing/icons": "^1.17.6",
+    "@teamturing/token-studio": "^1.1.6"
   },
-  "gitHead": "feca6a32202c553c53ef2870fa2e374009b737ef"
+  "gitHead": "9a886f294a5301d5733ea151fca77233a541ff96"
 }