@teamturing/react-kit 2.19.23 → 2.19.25

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

@@ -1,7 +1,7 @@
 import { ComponentType, ElementType, HTMLAttributes, ReactNode, SVGProps, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent } from 'react';
 import { ResponsiveValue } from 'styled-system';
 import { SxProp } from '../../utils/styled-system';
-type PillSizeType = 'm';
+type PillSizeType = 's' | 'm';
 type PillVariantType = 'outlined' | 'secondary';
 type Props = {
     /**
@@ -40,7 +40,7 @@ declare const _default: import("react").ForwardRefExoticComponent<{
      * 크기를 정의합니다.
      * 반응형 디자인이 적용됩니다.
      */
-    size?: ResponsiveValue<"m"> | undefined;
+    size?: ResponsiveValue<PillSizeType> | undefined;
     /**
      * 색을 정의합니다.
      * hover, active, focused, disabled, loading 등의 모든 상황에 관여합니다.

package/dist/index.js

@@ -22542,9 +22542,6 @@ const Pill = ({
 const BasePill = styled__default.default(UnstyledButton)`
   display: inline-flex;
   align-items: center;
-  border-radius: ${({
-  theme
-}) => forcePixelValue(theme.radii.xs)};
   column-gap: ${({
   theme
 }) => forcePixelValue(theme.space[2])};
@@ -22593,10 +22590,28 @@ const BasePill = styled__default.default(UnstyledButton)`
 }) => variant({
   prop: 'size',
   variants: {
+    s: {
+      'pl': 2,
+      'pr': !hasRemoveButton ? 2 : 0.25,
+      'height': forcePixelValue(20),
+      'borderRadius': 'xxs',
+      'fontSize': theme.fontSizes.xxs,
+      'fontWeight': theme.fontWeights.medium,
+      'lineHeight': theme.lineHeights[2],
+      'columnGap': 0.25,
+      '& svg': {
+        minWidth: 12,
+        height: 12
+      },
+      '& > div': {
+        p: 1
+      }
+    },
     m: {
       'pl': 3,
       'pr': !hasRemoveButton ? 3 : 1,
       'height': forcePixelValue(32),
+      'borderRadius': 'xs',
       'fontSize': theme.fontSizes.xxs,
       'fontWeight': theme.fontWeights.medium,
       'lineHeight': theme.lineHeights[2],
@@ -22618,20 +22633,9 @@ const BasePill = styled__default.default(UnstyledButton)`
   prop: 'variant',
   variants: {
     outlined: {
-      'backgroundColor': theme.colors['bg/neutral/subtler'],
-      'borderWidth': 1,
-      'borderStyle': 'solid',
-      'borderColor': theme.colors['border/neutral'],
-      'color': 'text/neutral/subtle',
-      '& svg': {
-        color: theme.colors['icon/neutral/bolder']
-      },
-      '&:hover': {
-        backgroundColor: theme.colors['bg/neutral/subtler/hovered']
-      },
-      '&:active': {
-        backgroundColor: theme.colors['bg/neutral/subtler/pressed']
-      },
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: theme.colors['border/neutral'],
       ...(disabled ? {
         'cursor': 'not-allowed',
         'backgroundColor': theme.colors['bg/disabled'],
@@ -22639,20 +22643,21 @@ const BasePill = styled__default.default(UnstyledButton)`
         '& svg': {
           color: theme.colors['icon/disabled']
         }
-      } : {})
+      } : {
+        'backgroundColor': theme.colors['bg/neutral/subtler'],
+        'color': 'text/neutral/subtle',
+        '& svg': {
+          color: theme.colors['icon/neutral/bolder']
+        },
+        '&:hover': {
+          backgroundColor: theme.colors['bg/neutral/subtler/hovered']
+        },
+        '&:active': {
+          backgroundColor: theme.colors['bg/neutral/subtler/pressed']
+        }
+      })
     },
     secondary: {
-      'backgroundColor': theme.colors['bg/secondary'],
-      'color': theme.colors['text/primary'],
-      '& svg': {
-        color: theme.colors['icon/primary']
-      },
-      '&:hover': {
-        backgroundColor: theme.colors['bg/secondary/hovered']
-      },
-      '&:active': {
-        backgroundColor: theme.colors['bg/secondary/pressed']
-      },
       ...(disabled ? {
         'cursor': 'not-allowed',
         'backgroundColor': theme.colors['bg/disabled'],
@@ -22660,7 +22665,19 @@ const BasePill = styled__default.default(UnstyledButton)`
         '& svg': {
           color: theme.colors['icon/disabled']
         }
-      } : {})
+      } : {
+        'backgroundColor': theme.colors['bg/secondary'],
+        'color': theme.colors['text/primary'],
+        '& svg': {
+          color: theme.colors['icon/primary']
+        },
+        '&:hover': {
+          backgroundColor: theme.colors['bg/secondary/hovered']
+        },
+        '&:active': {
+          backgroundColor: theme.colors['bg/secondary/pressed']
+        }
+      })
     }
   }
 })}

package/esm/core/Pill/index.js

@@ -71,9 +71,6 @@ const Pill = ({
 const BasePill = styled(UnstyledButton)`
   display: inline-flex;
   align-items: center;
-  border-radius: ${({
-  theme
-}) => forcePixelValue(theme.radii.xs)};
   column-gap: ${({
   theme
 }) => forcePixelValue(theme.space[2])};
@@ -122,10 +119,28 @@ const BasePill = styled(UnstyledButton)`
 }) => variant({
   prop: 'size',
   variants: {
+    s: {
+      'pl': 2,
+      'pr': !hasRemoveButton ? 2 : 0.25,
+      'height': forcePixelValue(20),
+      'borderRadius': 'xxs',
+      'fontSize': theme.fontSizes.xxs,
+      'fontWeight': theme.fontWeights.medium,
+      'lineHeight': theme.lineHeights[2],
+      'columnGap': 0.25,
+      '& svg': {
+        minWidth: 12,
+        height: 12
+      },
+      '& > div': {
+        p: 1
+      }
+    },
     m: {
       'pl': 3,
       'pr': !hasRemoveButton ? 3 : 1,
       'height': forcePixelValue(32),
+      'borderRadius': 'xs',
       'fontSize': theme.fontSizes.xxs,
       'fontWeight': theme.fontWeights.medium,
       'lineHeight': theme.lineHeights[2],
@@ -147,20 +162,9 @@ const BasePill = styled(UnstyledButton)`
   prop: 'variant',
   variants: {
     outlined: {
-      'backgroundColor': theme.colors['bg/neutral/subtler'],
-      'borderWidth': 1,
-      'borderStyle': 'solid',
-      'borderColor': theme.colors['border/neutral'],
-      'color': 'text/neutral/subtle',
-      '& svg': {
-        color: theme.colors['icon/neutral/bolder']
-      },
-      '&:hover': {
-        backgroundColor: theme.colors['bg/neutral/subtler/hovered']
-      },
-      '&:active': {
-        backgroundColor: theme.colors['bg/neutral/subtler/pressed']
-      },
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: theme.colors['border/neutral'],
       ...(disabled ? {
         'cursor': 'not-allowed',
         'backgroundColor': theme.colors['bg/disabled'],
@@ -168,20 +172,21 @@ const BasePill = styled(UnstyledButton)`
         '& svg': {
           color: theme.colors['icon/disabled']
         }
-      } : {})
+      } : {
+        'backgroundColor': theme.colors['bg/neutral/subtler'],
+        'color': 'text/neutral/subtle',
+        '& svg': {
+          color: theme.colors['icon/neutral/bolder']
+        },
+        '&:hover': {
+          backgroundColor: theme.colors['bg/neutral/subtler/hovered']
+        },
+        '&:active': {
+          backgroundColor: theme.colors['bg/neutral/subtler/pressed']
+        }
+      })
     },
     secondary: {
-      'backgroundColor': theme.colors['bg/secondary'],
-      'color': theme.colors['text/primary'],
-      '& svg': {
-        color: theme.colors['icon/primary']
-      },
-      '&:hover': {
-        backgroundColor: theme.colors['bg/secondary/hovered']
-      },
-      '&:active': {
-        backgroundColor: theme.colors['bg/secondary/pressed']
-      },
       ...(disabled ? {
         'cursor': 'not-allowed',
         'backgroundColor': theme.colors['bg/disabled'],
@@ -189,7 +194,19 @@ const BasePill = styled(UnstyledButton)`
         '& svg': {
           color: theme.colors['icon/disabled']
         }
-      } : {})
+      } : {
+        'backgroundColor': theme.colors['bg/secondary'],
+        'color': theme.colors['text/primary'],
+        '& svg': {
+          color: theme.colors['icon/primary']
+        },
+        '&:hover': {
+          backgroundColor: theme.colors['bg/secondary/hovered']
+        },
+        '&:active': {
+          backgroundColor: theme.colors['bg/secondary/pressed']
+        }
+      })
     }
   }
 })}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.19.23",
+  "version": "2.19.25",
   "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",
@@ -62,5 +62,5 @@
     "react-is": "^18.2.0",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "58ccb149838349dd9245d2deaf370d14d4040ce9"
+  "gitHead": "dcbb5dd19a560f537cad13a4798d9e036e7e6631"
 }