@teamturing/react-kit 2.41.1 → 2.42.0

package/dist/core/ActionList/ActionListItem.d.ts

@@ -1,4 +1,4 @@
-import { ElementType, PropsWithChildren, ReactNode, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent } from 'react';
+import { ElementType, PropsWithChildren, ReactNode, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent, LiHTMLAttributes } from 'react';
 import { SxProp } from '../../utils/styled-system';
 type Props = {
     variant?: 'neutral' | 'danger';
@@ -9,7 +9,7 @@ type Props = {
     disabled?: boolean;
     selected?: boolean;
     onSelect?: (event: ReactMouseEvent<HTMLLIElement> | ReactKeyboardEvent<HTMLLIElement>) => void;
-} & SxProp;
-declare const ActionListItem: ({ variant, leadingVisual: LeadingVisual, trailingVisual: TrailingVisual, description, descriptionLayout, disabled, selected, onSelect: propOnSelect, children, sx, }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element;
+} & Pick<LiHTMLAttributes<HTMLLIElement>, 'onFocus' | 'onBlur'> & SxProp;
+declare const ActionListItem: ({ variant, leadingVisual: LeadingVisual, trailingVisual: TrailingVisual, description, descriptionLayout, disabled, selected, onSelect: propOnSelect, children, onFocus, onBlur, sx, }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element;
 export default ActionListItem;
 export type { Props as ActionListItemProps };

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

@@ -16,7 +16,7 @@ type Props = {
 type ActionListContextValue = {} & Pick<Props, 'selectionVariant' | 'onSelect'>;
 declare const ActionListContext: import("react").Context<Pick<Props, "onSelect" | "selectionVariant">>;
 declare const _default: (({ selectionVariant, onSelect, ...props }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element) & {
-    Item: ({ variant, leadingVisual: LeadingVisual, trailingVisual: TrailingVisual, description, descriptionLayout, disabled, selected, onSelect: propOnSelect, children, sx, }: PropsWithChildren<ActionListItemProps>) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ variant, leadingVisual: LeadingVisual, trailingVisual: TrailingVisual, description, descriptionLayout, disabled, selected, onSelect: propOnSelect, children, onFocus, onBlur, sx, }: PropsWithChildren<ActionListItemProps>) => import("react/jsx-runtime").JSX.Element;
     SectionDivider: ({ color, variant, width, sx }: ActionListSectionDividerProps) => import("react/jsx-runtime").JSX.Element;
     SectionHeader: ({ ...props }: PropsWithChildren<SxProp>) => import("react/jsx-runtime").JSX.Element;
 };

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

@@ -9,10 +9,16 @@ type Props = {
      * 반응형 디자인이 적용됩니다.
      */
     size?: ResponsiveValue<'l' | 'm' | 's'>;
+    /**
+     * 모양을 정의합니다.
+     * 반응형 디자인이 적용됩니다.
+     */
+    shape?: 'circle' | 'rounded';
     /**
      * 색을 정의합니다.
+     * 반응형 디자인이 적용됩니다.
      */
-    variant?: 'primary' | 'plain' | 'plain-neutral';
+    variant?: 'primary' | 'plain' | 'blue' | 'plain-neutral';
     /**
      * 활성화 상태를 정의합니다.
      * `true`일 경우, 활성화된 상태를 그립니다.
@@ -30,10 +36,16 @@ declare const _default: import("react").ForwardRefExoticComponent<{
      * 반응형 디자인이 적용됩니다.
      */
     size?: ResponsiveValue<"m" | "s" | "l"> | undefined;
+    /**
+     * 모양을 정의합니다.
+     * 반응형 디자인이 적용됩니다.
+     */
+    shape?: "circle" | "rounded" | undefined;
     /**
      * 색을 정의합니다.
+     * 반응형 디자인이 적용됩니다.
      */
-    variant?: "primary" | "plain" | "plain-neutral" | undefined;
+    variant?: "blue" | "primary" | "plain" | "plain-neutral" | undefined;
     /**
      * 활성화 상태를 정의합니다.
      * `true`일 경우, 활성화된 상태를 그립니다.

package/dist/index.js

@@ -6925,6 +6925,8 @@ const ActionListItem = ({
   selected = false,
   onSelect: propOnSelect,
   children,
+  onFocus,
+  onBlur,
   sx
 }) => {
   const {
@@ -6958,6 +6960,8 @@ const ActionListItem = ({
     sx: sx,
     onClick: handleClick,
     onKeyDown: handleKeyDown,
+    onFocus: onFocus,
+    onBlur: onBlur,
     children: [!isNullable(selectionVariant) ? /*#__PURE__*/jsxRuntimeExports.jsx(View, {
       display: 'inline-flex',
       minWidth: 20,
@@ -37356,6 +37360,7 @@ const GradientText = styled__default.default(Text)`
 const IconToggleButton = ({
   icon: Icon,
   size = 'm',
+  shape = 'circle',
   variant = 'primary',
   selected = false,
   disabled = false,
@@ -37365,6 +37370,7 @@ const IconToggleButton = ({
   ref: ref,
   icon: Icon,
   size: size,
+  shape: shape,
   variant: variant,
   selected: selected,
   type: 'button',
@@ -37379,7 +37385,6 @@ const BaseIconToggleButton = styled__default.default(UnstyledButton)(({
   theme
 }) => ({
   'position': 'relative',
-  'borderRadius': theme.radii.full,
   'transition': 'background-color 100ms, color 100ms',
   '& svg': {
     display: 'block'
@@ -37416,6 +37421,18 @@ const BaseIconToggleButton = styled__default.default(UnstyledButton)(({
       }
     }
   }
+}), ({
+  theme
+}) => variant({
+  prop: 'shape',
+  variants: {
+    circle: {
+      borderRadius: theme.radii.full
+    },
+    rounded: {
+      borderRadius: theme.radii.xs
+    }
+  }
 }), ({
   selected,
   $disabled,
@@ -37448,6 +37465,19 @@ const BaseIconToggleButton = styled__default.default(UnstyledButton)(({
         color: theme.colors['icon/disabled/subtler']
       } : {})
     },
+    'blue': {
+      ...(selected ? {
+        backgroundColor: theme.colors['bg/accent/blue/subtlest'],
+        color: theme.colors['icon/accent/blue']
+      } : {
+        backgroundColor: theme.colors['bg/neutral'],
+        color: theme.colors['icon/neutral']
+      }),
+      ...($disabled ? {
+        backgroundColor: theme.colors['bg/disabled'],
+        color: theme.colors['icon/disabled']
+      } : {})
+    },
     'plain-neutral': {
       backgroundColor: theme.colors['bg/neutral/subtler'],
       ...(selected ? {

package/esm/core/ActionList/ActionListItem.js

@@ -25,6 +25,8 @@ const ActionListItem = ({
   selected = false,
   onSelect: propOnSelect,
   children,
+  onFocus,
+  onBlur,
   sx
 }) => {
   const {
@@ -58,6 +60,8 @@ const ActionListItem = ({
     sx: sx,
     onClick: handleClick,
     onKeyDown: handleKeyDown,
+    onFocus: onFocus,
+    onBlur: onBlur,
     children: [!isNullable(selectionVariant) ? /*#__PURE__*/jsxRuntimeExports.jsx(View, {
       display: 'inline-flex',
       minWidth: 20,

package/esm/core/IconToggleButton/index.js

@@ -9,6 +9,7 @@ import { variant } from '../../node_modules/@styled-system/variant/dist/index.es
 const IconToggleButton = ({
   icon: Icon,
   size = 'm',
+  shape = 'circle',
   variant = 'primary',
   selected = false,
   disabled = false,
@@ -18,6 +19,7 @@ const IconToggleButton = ({
   ref: ref,
   icon: Icon,
   size: size,
+  shape: shape,
   variant: variant,
   selected: selected,
   type: 'button',
@@ -32,7 +34,6 @@ const BaseIconToggleButton = styled(UnstyledButton)(({
   theme
 }) => ({
   'position': 'relative',
-  'borderRadius': theme.radii.full,
   'transition': 'background-color 100ms, color 100ms',
   '& svg': {
     display: 'block'
@@ -69,6 +70,18 @@ const BaseIconToggleButton = styled(UnstyledButton)(({
       }
     }
   }
+}), ({
+  theme
+}) => variant({
+  prop: 'shape',
+  variants: {
+    circle: {
+      borderRadius: theme.radii.full
+    },
+    rounded: {
+      borderRadius: theme.radii.xs
+    }
+  }
 }), ({
   selected,
   $disabled,
@@ -101,6 +114,19 @@ const BaseIconToggleButton = styled(UnstyledButton)(({
         color: theme.colors['icon/disabled/subtler']
       } : {})
     },
+    'blue': {
+      ...(selected ? {
+        backgroundColor: theme.colors['bg/accent/blue/subtlest'],
+        color: theme.colors['icon/accent/blue']
+      } : {
+        backgroundColor: theme.colors['bg/neutral'],
+        color: theme.colors['icon/neutral']
+      }),
+      ...($disabled ? {
+        backgroundColor: theme.colors['bg/disabled'],
+        color: theme.colors['icon/disabled']
+      } : {})
+    },
     'plain-neutral': {
       backgroundColor: theme.colors['bg/neutral/subtler'],
       ...(selected ? {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.41.1",
+  "version": "2.42.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": "1d8867136d2359ec9825bc1fa1ef2c31c0f933c3"
+  "gitHead": "94a3c71c241b43a1946205576082a33047abff02"
 }