@teamturing/react-kit 2.62.2 → 2.63.0

package/dist/core/CheckboxOrRadioGroupFormControl/CheckboxOrRadioGroupFormControlLabel.d.ts

@@ -1,5 +1,5 @@
-import { SxProp } from '@teamturing/react-kit';
 import { PropsWithChildren } from 'react';
+import { SxProp } from '../../utils/styled-system';
 type Props = {
     visuallyHidden?: boolean;
 } & SxProp;

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

@@ -1,5 +1,5 @@
-import { SxProp } from '@teamturing/react-kit';
 import { PropsWithChildren } from 'react';
+import { SxProp } from '../../utils/styled-system';
 import { CheckboxOrRadioGroupFormControlCaptionProps } from './CheckboxOrRadioGroupFormControlCaption';
 import { CheckboxOrRadioGroupFormControlErrorMessageProps } from './CheckboxOrRadioGroupFormControlErrorMessage';
 import { CheckboxOrRadioGroupFormControlLabelProps } from './CheckboxOrRadioGroupFormControlLabel';

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

@@ -31,8 +31,11 @@ type PaginationPageProps = {
 type PaginationPageDirectionProps = Pick<UnstyledButtonProps, 'onClick' | 'disabled' | 'type'>;
 declare const _default: (<T extends {
     label: string;
-}>({ pages: propPages, currentPageIndex, aroundPageCount, edgePageCount, type, sx, onPageClick, onPreviousClick, onNextClick, renderPage, renderPageWrapper, renderPreviousPageDirection, renderNextPageDirection, renderTruncationIndicator, }: Props<T>) => import("react/jsx-runtime").JSX.Element) & {
-    Page: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement> & SxProp & import("react").RefAttributes<HTMLButtonElement>, "ref"> & {
+}>({ pages: propPages, currentPageIndex, aroundPageCount, edgePageCount, type, sx, onPageClick, onPreviousClick, onNextClick, renderPage, renderPageWrapper, renderPreviousPageDirection: propRenderPreviousPageDirection, renderNextPageDirection: propRenderNextPageDirection, renderTruncationIndicator, }: Props<T>) => import("react/jsx-runtime").JSX.Element) & {
+    Page: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<Omit<{
+        ref?: import("react").LegacyRef<HTMLButtonElement> | undefined;
+        key?: import("react").Key | null | undefined;
+    } & import("react").ButtonHTMLAttributes<HTMLButtonElement> & SxProp, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
     }, PaginationPageProps>>;
     PageDirection: import("styled-components").IStyledComponent<"web", {

package/dist/core/_UnstyledButton.d.ts

@@ -1,6 +1,6 @@
 import { ButtonHTMLAttributes } from 'react';
 import { SxProp } from '../utils/styled-system';
 type Props = {} & ButtonHTMLAttributes<HTMLButtonElement> & SxProp;
-declare const UnstyledButton: import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & SxProp & import("react").RefAttributes<HTMLButtonElement>>;
+declare const UnstyledButton: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, Props>>;
 export default UnstyledButton;
 export type { Props as UnstyledButtonProps };

package/dist/index.js

@@ -12,7 +12,6 @@ var react = require('@floating-ui/react');
 var behaviors = require('@primer/behaviors');
 var debounce = require('lodash.debounce');
 var ReactTextareaAutosize = require('react-textarea-autosize');
-var reactKit = require('@teamturing/react-kit');
 var throttle = require('lodash.throttle');
 var tokenStudio = require('@teamturing/token-studio');
 
@@ -2098,19 +2097,13 @@ const Space = /*#__PURE__*/styled__default.default.div.withConfig({
   componentId: "sc-4g4g8r-0"
 })(["width:inherit;", ";", ""], space, sx);
 
-const BaseButton$1 = /*#__PURE__*/styled__default.default.button.withConfig({
-  displayName: "_UnstyledButton__BaseButton",
+const UnstyledButton = /*#__PURE__*/styled__default.default.button.withConfig({
+  displayName: "_UnstyledButton__UnstyledButton",
   componentId: "sc-j96ib-0"
 })(["background:none;border:0;padding:0;outline:none;cursor:pointer;", ""], sx);
-const UnstyledButton = /*#__PURE__*/React.forwardRef(({
-  type = 'button',
-  ...props
-}, ref) => /*#__PURE__*/jsxRuntime.jsx(BaseButton$1, {
-  ref: ref,
-  type: type,
-  ...props
-}));
-UnstyledButton.displayName = 'UnstyledButton';
+UnstyledButton.defaultProps = {
+  type: 'button'
+};
 
 function useTooltip({
   initialOpen = false,
@@ -3708,9 +3701,11 @@ const Select = ({
   validationStatus,
   disabledPlaceholderOption = false,
   leadingVisual: LeadingVisual,
-  placeholder = '옵션 선택',
+  placeholder: propPlaceholder,
   ...props
 }, ref) => {
+  const theme = styled.useTheme();
+  const placeholder = propPlaceholder ?? theme.locales?.Select?.placeholder ?? '옵션 선택';
   const PLACEHOLDER_VALUE = '';
   const selectRef = useProvidedOrCreatedRef(ref);
   const [isValueEmpty, setIsValueEmpty] = React.useState(utils.isNullable(props.value) || props.value === PLACEHOLDER_VALUE);
@@ -3907,7 +3902,7 @@ var Switch$1 = /*#__PURE__*/React.forwardRef(Switch);
 const Textarea = /*#__PURE__*/React.forwardRef(({
   validationStatus,
   disabled,
-  renderCount = count => `${utils.commaizeNumber(count)}자`,
+  renderCount = count => `${utils.commaizeNumber(count)}`,
   ...props
 }, ref) => {
   const inputRef = useProvidedOrCreatedRef(ref);
@@ -4087,6 +4082,7 @@ const FormControlLabel = ({
     disabled,
     required
   } = React.useContext(FormControlContext);
+  const theme = styled.useTheme();
   return /*#__PURE__*/jsxRuntime.jsx(VisuallyHidden$1, {
     as: 'label',
     htmlFor: id,
@@ -4102,7 +4098,7 @@ const FormControlLabel = ({
         as: 'span',
         className: 'form_control_label__required__false',
         "aria-hidden": "true",
-        children: ' (선택)'
+        children: theme.locales?.FormControl?.optionalLabel ?? ' (선택)'
       }) : null]
     })
   });
@@ -4531,6 +4527,7 @@ const CheckboxOrRadioGroupFormControlLabel = ({
     disabled,
     required
   } = React.useContext(CheckboxOrRadioGroupFormControlContext);
+  const theme = styled.useTheme();
   return /*#__PURE__*/jsxRuntime.jsx(VisuallyHidden, {
     as: 'label',
     htmlFor: id,
@@ -4546,7 +4543,7 @@ const CheckboxOrRadioGroupFormControlLabel = ({
         as: 'span',
         className: 'checkbox_or_radio_group_form_control_label__required__false',
         "aria-hidden": "true",
-        children: ' (선택)'
+        children: theme.locales?.FormControl?.optionalLabel ?? ' (선택)'
       }) : null]
     })
   });
@@ -4558,7 +4555,7 @@ const VisuallyHidden = /*#__PURE__*/styled__default.default.span.withConfig({
   isVisible = false
 }) => {
   if (isVisible) {
-    return reactKit.sx;
+    return sx;
   }
   return `
       position: absolute;
@@ -4587,7 +4584,7 @@ const LabelWrapper = /*#__PURE__*/styled__default.default(View).withConfig({
   disabled
 }) => disabled ? 'not-allowed' : 'pointer', ({
   theme
-}) => theme.colors['text/neutral/subtlest'], reactKit.sx);
+}) => theme.colors['text/neutral/subtlest'], sx);
 
 const CheckboxOrRadioGroupFormControlSuccessMessage = ({
   children
@@ -4666,7 +4663,7 @@ const CheckboxOrRadioGroupFormControl = ({
   sx,
   ...props
 }, ref) => {
-  const [relocatableComponentsObject, restComponents] = reactKit.useRelocation({
+  const [relocatableComponentsObject, restComponents] = useRelocation({
     children: propChildren,
     config: {
       label: CheckboxOrRadioGroupFormControlLabel,
@@ -6590,22 +6587,25 @@ const Pagination = ({
   }, i) => /*#__PURE__*/jsxRuntime.jsx(React.Fragment, {
     children: children
   }, [label, i].join('-')),
-  renderPreviousPageDirection = ({
+  renderPreviousPageDirection: propRenderPreviousPageDirection,
+  renderNextPageDirection: propRenderNextPageDirection,
+  renderTruncationIndicator = () => /*#__PURE__*/jsxRuntime.jsx(PaginationTruncationIndicator, {
+    children: "\u2026"
+  })
+}) => {
+  const theme = styled.useTheme();
+  const renderPreviousPageDirection = propRenderPreviousPageDirection ?? (({
     previousPageDirectionProps
   }) => /*#__PURE__*/jsxRuntime.jsxs(PaginationPageDirection, {
     ...previousPageDirectionProps,
-    children: [/*#__PURE__*/jsxRuntime.jsx(icons.ChevronLeftIcon, {}), "\uC774\uC804"]
-  }),
-  renderNextPageDirection = ({
+    children: [/*#__PURE__*/jsxRuntime.jsx(icons.ChevronLeftIcon, {}), theme.locales?.Pagination?.previous ?? '이전']
+  }));
+  const renderNextPageDirection = propRenderNextPageDirection ?? (({
     nextPageDirectionProps
   }) => /*#__PURE__*/jsxRuntime.jsxs(PaginationPageDirection, {
     ...nextPageDirectionProps,
-    children: ["\uB2E4\uC74C", /*#__PURE__*/jsxRuntime.jsx(icons.ChevronRightIcon, {})]
-  }),
-  renderTruncationIndicator = () => /*#__PURE__*/jsxRuntime.jsx(PaginationTruncationIndicator, {
-    children: "\u2026"
-  })
-}) => {
+    children: [theme.locales?.Pagination?.next ?? '다음', /*#__PURE__*/jsxRuntime.jsx(icons.ChevronRightIcon, {})]
+  }));
   const CURRENT_PAGE_COUNT = 1;
   const totalVisiblePageCount = CURRENT_PAGE_COUNT + 2 * aroundPageCount + 2 * edgePageCount;
   const pages = propPages.map((page, i) => ({
@@ -7369,6 +7369,22 @@ const theme = {
     spinner: {
       defaultVariant: 'progress-gradient'
     }
+  },
+  locales: {
+    FormControl: {
+      optionalLabel: ' (선택)'
+    },
+    Pagination: {
+      previous: '이전',
+      next: '다음'
+    },
+    Select: {
+      placeholder: '옵션 선택'
+    },
+    UploadInput: {
+      placeholder: '파일을 끌어다 놓으세요',
+      selectFile: '파일 선택'
+    }
   }
 };
 const gpaiLightTheme = {
@@ -7473,13 +7489,15 @@ const BaseToast = /*#__PURE__*/styled__default.default.div.withConfig({
 
 const UploadInput = ({
   buttonProps: propsButtonProps,
-  placeholder = '파일을 끌어다 놓으세요',
+  placeholder: propPlaceholder,
   accept,
   disabled,
   ...props
 }, ref) => {
+  const theme = styled.useTheme();
+  const placeholder = propPlaceholder ?? theme.locales?.UploadInput?.placeholder ?? '파일을 끌어다 놓으세요';
   const defaultButtonProps = {
-    children: '파일 선택',
+    children: theme.locales?.UploadInput?.selectFile ?? '파일 선택',
     size: 's',
     variant: 'neutral'
   };

package/dist/theme/index.d.ts

@@ -310,6 +310,22 @@ declare const theme: {
             defaultVariant: "progress-gradient";
         };
     };
+    locales: {
+        FormControl: {
+            optionalLabel: string;
+        };
+        Pagination: {
+            previous: string;
+            next: string;
+        };
+        Select: {
+            placeholder: string;
+        };
+        UploadInput: {
+            placeholder: string;
+            selectFile: string;
+        };
+    };
 };
 declare const gpaiLightTheme: {
     colors: {
@@ -623,6 +639,22 @@ declare const gpaiLightTheme: {
     opacity: {
         readonly disabled: number;
     };
+    locales: {
+        FormControl: {
+            optionalLabel: string;
+        };
+        Pagination: {
+            previous: string;
+            next: string;
+        };
+        Select: {
+            placeholder: string;
+        };
+        UploadInput: {
+            placeholder: string;
+            selectFile: string;
+        };
+    };
 };
 declare const gpaiDarkTheme: {
     colors: {
@@ -936,6 +968,22 @@ declare const gpaiDarkTheme: {
     opacity: {
         readonly disabled: number;
     };
+    locales: {
+        FormControl: {
+            optionalLabel: string;
+        };
+        Pagination: {
+            previous: string;
+            next: string;
+        };
+        Select: {
+            placeholder: string;
+        };
+        UploadInput: {
+            placeholder: string;
+            selectFile: string;
+        };
+    };
 };
 export default theme;
 export { gpaiLightTheme, gpaiDarkTheme };

package/esm/core/CheckboxOrRadioGroupFormControl/CheckboxOrRadioGroupFormControlLabel.js

@@ -1,7 +1,7 @@
-import { sx } from '@teamturing/react-kit';
 import { forcePixelValue } from '@teamturing/utils';
 import { useContext } from 'react';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
+import { sx } from '../../utils/styled-system/index.js';
 import View from '../View/index.js';
 import { CheckboxOrRadioGroupFormControlContext } from './index.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -16,6 +16,7 @@ const CheckboxOrRadioGroupFormControlLabel = ({
     disabled,
     required
   } = useContext(CheckboxOrRadioGroupFormControlContext);
+  const theme = useTheme();
   return /*#__PURE__*/jsx(VisuallyHidden, {
     as: 'label',
     htmlFor: id,
@@ -31,7 +32,7 @@ const CheckboxOrRadioGroupFormControlLabel = ({
         as: 'span',
         className: 'checkbox_or_radio_group_form_control_label__required__false',
         "aria-hidden": "true",
-        children: ' (선택)'
+        children: theme.locales?.FormControl?.optionalLabel ?? ' (선택)'
       }) : null]
     })
   });

package/esm/core/CheckboxOrRadioGroupFormControl/index.js

@@ -1,5 +1,5 @@
-import { useRelocation } from '@teamturing/react-kit';
 import { forwardRef, createContext, isValidElement, cloneElement } from 'react';
+import useRelocation from '../../hook/useRelocation.js';
 import CheckboxGroup from '../CheckboxGroup/index.js';
 import RadioGroup from '../RadioGroup/index.js';
 import View from '../View/index.js';

package/esm/core/FormControl/FormControlLabel.js

@@ -1,6 +1,6 @@
 import { forcePixelValue } from '@teamturing/utils';
 import { useContext } from 'react';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 import { sx } from '../../utils/styled-system/index.js';
 import View from '../View/index.js';
 import { FormControlContext } from './index.js';
@@ -16,6 +16,7 @@ const FormControlLabel = ({
     disabled,
     required
   } = useContext(FormControlContext);
+  const theme = useTheme();
   return /*#__PURE__*/jsx(VisuallyHidden, {
     as: 'label',
     htmlFor: id,
@@ -31,7 +32,7 @@ const FormControlLabel = ({
         as: 'span',
         className: 'form_control_label__required__false',
         "aria-hidden": "true",
-        children: ' (선택)'
+        children: theme.locales?.FormControl?.optionalLabel ?? ' (선택)'
       }) : null]
     })
   });

package/esm/core/Pagination/index.js

@@ -1,7 +1,7 @@
 import { ChevronLeftIcon, ChevronRightIcon } from '@teamturing/icons';
 import { forcePixelValue, noop } from '@teamturing/utils';
 import { useCallback, Fragment } from 'react';
-import styled, { css } from 'styled-components';
+import styled, { css, useTheme } from 'styled-components';
 import '../../node_modules/styled-system/dist/index.esm.js';
 import { sx } from '../../utils/styled-system/index.js';
 import UnstyledButton from '../_UnstyledButton.js';
@@ -29,22 +29,25 @@ const Pagination = ({
   }, i) => /*#__PURE__*/jsx(Fragment, {
     children: children
   }, [label, i].join('-')),
-  renderPreviousPageDirection = ({
+  renderPreviousPageDirection: propRenderPreviousPageDirection,
+  renderNextPageDirection: propRenderNextPageDirection,
+  renderTruncationIndicator = () => /*#__PURE__*/jsx(PaginationTruncationIndicator, {
+    children: "\u2026"
+  })
+}) => {
+  const theme = useTheme();
+  const renderPreviousPageDirection = propRenderPreviousPageDirection ?? (({
     previousPageDirectionProps
   }) => /*#__PURE__*/jsxs(PaginationPageDirection, {
     ...previousPageDirectionProps,
-    children: [/*#__PURE__*/jsx(ChevronLeftIcon, {}), "\uC774\uC804"]
-  }),
-  renderNextPageDirection = ({
+    children: [/*#__PURE__*/jsx(ChevronLeftIcon, {}), theme.locales?.Pagination?.previous ?? '이전']
+  }));
+  const renderNextPageDirection = propRenderNextPageDirection ?? (({
     nextPageDirectionProps
   }) => /*#__PURE__*/jsxs(PaginationPageDirection, {
     ...nextPageDirectionProps,
-    children: ["\uB2E4\uC74C", /*#__PURE__*/jsx(ChevronRightIcon, {})]
-  }),
-  renderTruncationIndicator = () => /*#__PURE__*/jsx(PaginationTruncationIndicator, {
-    children: "\u2026"
-  })
-}) => {
+    children: [theme.locales?.Pagination?.next ?? '다음', /*#__PURE__*/jsx(ChevronRightIcon, {})]
+  }));
   const CURRENT_PAGE_COUNT = 1;
   const totalVisiblePageCount = CURRENT_PAGE_COUNT + 2 * aroundPageCount + 2 * edgePageCount;
   const pages = propPages.map((page, i) => ({

package/esm/core/Select/index.js

@@ -2,7 +2,7 @@ import { ChevronDownIcon } from '@teamturing/icons';
 import { forcePixelValue, isNullable, isFunction } from '@teamturing/utils';
 import { forwardRef, useState, useEffect } from 'react';
 import { isValidElementType } from 'react-is';
-import styled, { css } from 'styled-components';
+import styled, { css, useTheme } from 'styled-components';
 import useProvidedOrCreatedRef from '../../hook/useProvidedOrCreatedRef.js';
 import StyledIcon from '../StyledIcon/index.js';
 import View from '../View/index.js';
@@ -15,9 +15,11 @@ const Select = ({
   validationStatus,
   disabledPlaceholderOption = false,
   leadingVisual: LeadingVisual,
-  placeholder = '옵션 선택',
+  placeholder: propPlaceholder,
   ...props
 }, ref) => {
+  const theme = useTheme();
+  const placeholder = propPlaceholder ?? theme.locales?.Select?.placeholder ?? '옵션 선택';
   const PLACEHOLDER_VALUE = '';
   const selectRef = useProvidedOrCreatedRef(ref);
   const [isValueEmpty, setIsValueEmpty] = useState(isNullable(props.value) || props.value === PLACEHOLDER_VALUE);

package/esm/core/Textarea/index.js

@@ -8,7 +8,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 const Textarea = /*#__PURE__*/forwardRef(({
   validationStatus,
   disabled,
-  renderCount = count => `${commaizeNumber(count)}자`,
+  renderCount = count => `${commaizeNumber(count)}`,
   ...props
 }, ref) => {
   const inputRef = useProvidedOrCreatedRef(ref);

package/esm/core/UploadInput/index.js

@@ -1,19 +1,21 @@
 import { ShareIcon } from '@teamturing/icons';
 import { forcePixelValue } from '@teamturing/utils';
 import { forwardRef, useRef, useImperativeHandle } from 'react';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 import Button from '../Button/index.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 const UploadInput = ({
   buttonProps: propsButtonProps,
-  placeholder = '파일을 끌어다 놓으세요',
+  placeholder: propPlaceholder,
   accept,
   disabled,
   ...props
 }, ref) => {
+  const theme = useTheme();
+  const placeholder = propPlaceholder ?? theme.locales?.UploadInput?.placeholder ?? '파일을 끌어다 놓으세요';
   const defaultButtonProps = {
-    children: '파일 선택',
+    children: theme.locales?.UploadInput?.selectFile ?? '파일 선택',
     size: 's',
     variant: 'neutral'
   };

package/esm/core/_UnstyledButton.js

@@ -1,20 +1,12 @@
-import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { sx } from '../utils/styled-system/index.js';
-import { jsx } from 'react/jsx-runtime';
 
-const BaseButton = /*#__PURE__*/styled.button.withConfig({
-  displayName: "_UnstyledButton__BaseButton",
+const UnstyledButton = /*#__PURE__*/styled.button.withConfig({
+  displayName: "_UnstyledButton__UnstyledButton",
   componentId: "sc-j96ib-0"
 })(["background:none;border:0;padding:0;outline:none;cursor:pointer;", ""], sx);
-const UnstyledButton = /*#__PURE__*/forwardRef(({
-  type = 'button',
-  ...props
-}, ref) => /*#__PURE__*/jsx(BaseButton, {
-  ref: ref,
-  type: type,
-  ...props
-}));
-UnstyledButton.displayName = 'UnstyledButton';
+UnstyledButton.defaultProps = {
+  type: 'button'
+};
 
 export { UnstyledButton as default };

package/esm/theme/index.js

@@ -15,6 +15,22 @@ const theme = {
     spinner: {
       defaultVariant: 'progress-gradient'
     }
+  },
+  locales: {
+    FormControl: {
+      optionalLabel: ' (선택)'
+    },
+    Pagination: {
+      previous: '이전',
+      next: '다음'
+    },
+    Select: {
+      placeholder: '옵션 선택'
+    },
+    UploadInput: {
+      placeholder: '파일을 끌어다 놓으세요',
+      selectFile: '파일 선택'
+    }
   }
 };
 const gpaiLightTheme = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.62.2",
+  "version": "2.63.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": "f252c89c97c9ffe92734e09da1856504f4f992e5"
+  "gitHead": "23cd76c438448e0bd53514ef150933a1866207aa"
 }