@teamturing/react-kit 2.68.0 → 2.69.0

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

@@ -1,16 +1,17 @@
 import { SpaceKey } from '@teamturing/token-studio';
 import { PropsWithChildren, RefObject } from 'react';
 import { ResponsiveValue } from 'styled-system';
+import { SxProp } from '../../utils/styled-system';
 type Props = {
     variant?: 'plain' | 'outlined' | 'underline';
     size?: ResponsiveValue<'l' | 'm' | 's'>;
     gap?: ResponsiveValue<SpaceKey>;
-};
+} & SxProp;
 type TabContextValue = {
     containerRef?: RefObject<HTMLElement>;
 } & Props;
 declare const TabContext: import("react").Context<TabContextValue>;
-declare const _default: (({ variant, size, gap, children }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element) & {
+declare const _default: (({ variant, size, gap, sx, children }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element) & {
     Item: ({ children, leadingIcon: LeadingIcon, selected, onClick, size: propSize, variant: propVariant, }: PropsWithChildren<import("./TabItem").TabItemProps>) => import("react/jsx-runtime").JSX.Element;
 };
 export default _default;

package/dist/index.js

@@ -7072,6 +7072,7 @@ const TabItem = ({
     onClick?.(e);
   };
   return /*#__PURE__*/jsxRuntime.jsx(BaseTabItem, {
+    className: 'trk-tab_item',
     type: 'button',
     role: 'tab',
     ref: ref,
@@ -7081,6 +7082,7 @@ const TabItem = ({
     selected: selected,
     onClick: handleClick,
     children: /*#__PURE__*/jsxRuntime.jsxs(View, {
+      className: 'trk-tab_item__content',
       sx: {
         display: 'flex',
         flexDirection: 'row',
@@ -7089,6 +7091,7 @@ const TabItem = ({
         columnGap: 1
       },
       children: [LeadingIcon ? /*#__PURE__*/jsxRuntime.jsx(LeadingIcon, {}) : null, /*#__PURE__*/jsxRuntime.jsx(View, {
+        className: 'trk-tab_item__label',
         children: children
       })]
     })
@@ -7258,6 +7261,7 @@ const Tab = ({
   variant = 'plain',
   size = 'm',
   gap = 2,
+  sx,
   children
 }) => {
   const theme = styled.useTheme();
@@ -7299,8 +7303,11 @@ const Tab = ({
       containerRef: rootRef
     },
     children: /*#__PURE__*/jsxRuntime.jsxs(View, {
+      className: 'trk-tab__wrapper',
       position: 'relative',
+      sx: sx,
       children: [/*#__PURE__*/jsxRuntime.jsx(View, {
+        className: 'trk-tab__list',
         ref: rootRef,
         role: 'tablist',
         sx: {
@@ -7318,9 +7325,11 @@ const Tab = ({
         onScroll: throttle__default.default(handleScrollButtonVisibility, 150),
         children: children
       }), /*#__PURE__*/jsxRuntime.jsxs(View, {
+        className: 'trk-tab__navigation',
         display: ['none', 'initial', 'initial'],
         children: [isLeftButtonVisible ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
           children: [/*#__PURE__*/jsxRuntime.jsx(View, {
+            className: 'trk-tab__left_gradient',
             sx: {
               position: 'absolute',
               top: 0,
@@ -7332,6 +7341,7 @@ const Tab = ({
               pointerEvents: 'none'
             }
           }), /*#__PURE__*/jsxRuntime.jsx(View, {
+            className: 'trk-tab__left_button',
             sx: {
               position: 'absolute',
               display: 'flex',
@@ -7350,6 +7360,7 @@ const Tab = ({
           })]
         }) : null, isRightButtonVisible ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
           children: [/*#__PURE__*/jsxRuntime.jsx(View, {
+            className: 'trk-tab__right_gradient',
             sx: {
               position: 'absolute',
               top: 0,
@@ -7361,6 +7372,7 @@ const Tab = ({
               pointerEvents: 'none'
             }
           }), /*#__PURE__*/jsxRuntime.jsx(View, {
+            className: 'trk-tab__right_button',
             sx: {
               position: 'absolute',
               display: 'flex',

package/esm/core/Tab/TabItem.js

@@ -38,6 +38,7 @@ const TabItem = ({
     onClick?.(e);
   };
   return /*#__PURE__*/jsx(BaseTabItem, {
+    className: 'trk-tab_item',
     type: 'button',
     role: 'tab',
     ref: ref,
@@ -47,6 +48,7 @@ const TabItem = ({
     selected: selected,
     onClick: handleClick,
     children: /*#__PURE__*/jsxs(View, {
+      className: 'trk-tab_item__content',
       sx: {
         display: 'flex',
         flexDirection: 'row',
@@ -55,6 +57,7 @@ const TabItem = ({
         columnGap: 1
       },
       children: [LeadingIcon ? /*#__PURE__*/jsx(LeadingIcon, {}) : null, /*#__PURE__*/jsx(View, {
+        className: 'trk-tab_item__label',
         children: children
       })]
     })

package/esm/core/Tab/index.js

@@ -14,6 +14,7 @@ const Tab = ({
   variant = 'plain',
   size = 'm',
   gap = 2,
+  sx,
   children
 }) => {
   const theme = useTheme();
@@ -55,8 +56,11 @@ const Tab = ({
       containerRef: rootRef
     },
     children: /*#__PURE__*/jsxs(View, {
+      className: 'trk-tab__wrapper',
       position: 'relative',
+      sx: sx,
       children: [/*#__PURE__*/jsx(View, {
+        className: 'trk-tab__list',
         ref: rootRef,
         role: 'tablist',
         sx: {
@@ -74,9 +78,11 @@ const Tab = ({
         onScroll: throttle(handleScrollButtonVisibility, 150),
         children: children
       }), /*#__PURE__*/jsxs(View, {
+        className: 'trk-tab__navigation',
         display: ['none', 'initial', 'initial'],
         children: [isLeftButtonVisible ? /*#__PURE__*/jsxs(Fragment, {
           children: [/*#__PURE__*/jsx(View, {
+            className: 'trk-tab__left_gradient',
             sx: {
               position: 'absolute',
               top: 0,
@@ -88,6 +94,7 @@ const Tab = ({
               pointerEvents: 'none'
             }
           }), /*#__PURE__*/jsx(View, {
+            className: 'trk-tab__left_button',
             sx: {
               position: 'absolute',
               display: 'flex',
@@ -106,6 +113,7 @@ const Tab = ({
           })]
         }) : null, isRightButtonVisible ? /*#__PURE__*/jsxs(Fragment, {
           children: [/*#__PURE__*/jsx(View, {
+            className: 'trk-tab__right_gradient',
             sx: {
               position: 'absolute',
               top: 0,
@@ -117,6 +125,7 @@ const Tab = ({
               pointerEvents: 'none'
             }
           }), /*#__PURE__*/jsx(View, {
+            className: 'trk-tab__right_button',
             sx: {
               position: 'absolute',
               display: 'flex',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.68.0",
+  "version": "2.69.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": "367ba22b7504f2ac19a89ca49cf5deeeb8034592"
+  "gitHead": "116ff31ab9416028bc458439c710c91122326fee"
 }