@bigtablet/design-system 2.0.7 → 2.2.0

package/dist/index.css

@@ -1205,6 +1205,70 @@
   pointer-events: none;
 }
 
+/* src/ui/otp-input/style.scss */
+@keyframes skeleton_loading {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
+.otp_input {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.otp_input_boxes {
+  display: flex;
+  gap: 6px;
+}
+.otp_input_box {
+  width: 48px;
+  min-height: 56px;
+  padding: 4px;
+  border: 1px solid #E5E5E5;
+  border-radius: 12px;
+  background: none;
+  font-family: "Pretendard", sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  color: #121212;
+  text-align: center;
+  outline: none;
+  transition: border-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
+}
+.otp_input_box:hover:not(:disabled):not(:focus) {
+  border-color: #B3B3B3;
+}
+.otp_input_box:focus {
+  border-color: #121212;
+  border-width: 2px;
+  padding: calc(4px - 1px);
+}
+.otp_input_box_disabled {
+  cursor: not-allowed;
+  color: #666666;
+}
+.otp_input_box_error {
+  border-color: #EF4444;
+}
+.otp_input_box_error:focus {
+  border-color: #EF4444;
+}
+.otp_input_supporting {
+  padding-top: 4px;
+  font-family: "Pretendard", sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  color: #666666;
+}
+.otp_input_supporting_error {
+  color: #EF4444;
+}
+
 /* src/ui/modal/style.scss */
 @keyframes skeleton_loading {
   0% {
@@ -1459,16 +1523,22 @@
   display: inline-flex;
   flex-direction: column;
   width: 100%;
-  gap: 4px;
   font-family: "Pretendard", sans-serif;
 }
 .select_label {
+  position: absolute;
+  top: -8px;
+  left: 16px;
+  padding: 0 4px;
+  background: var(--select-surface, #FFFFFF);
+  font-family: "Pretendard", sans-serif;
   font-size: 12px;
   font-weight: 400;
   line-height: 16px;
-  letter-spacing: 0px;
-  font-weight: 500;
+  letter-spacing: 0.32px;
   color: #121212;
+  white-space: nowrap;
+  pointer-events: none;
 }
 .select_control {
   width: 100%;
@@ -1478,8 +1548,8 @@
   gap: 8px;
   cursor: pointer;
   color: #121212;
-  background: #FFFFFF;
-  border-radius: 8px;
+  background: var(--select-surface, #FFFFFF);
+  border-radius: 12px;
   transition:
     border-color 0.2s ease-in-out,
     box-shadow 0.2s ease-in-out,
@@ -1514,7 +1584,7 @@
   background: rgb(251.7, 251.7, 251.7);
 }
 .select_variant_filled.is_open {
-  background: #FFFFFF;
+  background: var(--select-surface, #FFFFFF);
   border-color: #121212;
   box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.15);
 }
@@ -1526,11 +1596,12 @@
   background: rgba(0, 0, 0, 0.05);
 }
 .select_variant_ghost.is_open {
-  background: #FFFFFF;
+  background: var(--select-surface, #FFFFFF);
   border-color: #121212;
   box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.15);
 }
 .select_size_sm {
+  min-height: 40px;
   padding: 8px 16px;
   font-size: 12px;
   font-weight: 400;
@@ -1538,6 +1609,7 @@
   letter-spacing: 0px;
 }
 .select_size_md {
+  min-height: 52px;
   padding: 12px 20px;
   font-size: 15px;
   font-weight: 400;
@@ -1545,6 +1617,7 @@
   letter-spacing: 0px;
 }
 .select_size_lg {
+  min-height: 52px;
   padding: 16px 24px;
   font-size: 16px;
   font-weight: 400;
@@ -1639,6 +1712,10 @@
   cursor: not-allowed;
   color: #888888;
 }
+.select:has(.select_control:disabled) .select_label,
+.select:has(.select_control.is_disabled) .select_label {
+  color: rgba(26, 26, 26, 0.38);
+}
 
 /* src/ui/spinner/style.scss */
 @keyframes skeleton_loading {
@@ -1790,12 +1867,22 @@
   padding: 4px 0;
   border: 1px solid #E5E5E5;
   border-radius: 12px;
-  background: #FFFFFF;
+  background: inherit;
   transition: border-color 0.2s ease-in-out;
 }
 .text_field_container:hover {
   border-color: #B3B3B3;
 }
+.text_field_size_sm .text_field_container {
+  min-height: 40px;
+}
+.text_field_size_sm .text_field_input_wrap {
+  padding: 8px 16px;
+}
+.text_field_size_sm .text_field_input {
+  font-size: 14px;
+  line-height: 20px;
+}
 .text_field_container:focus-within {
   border-color: #121212;
 }
@@ -1804,7 +1891,7 @@
   top: -8px;
   left: 16px;
   padding: 0 4px;
-  background: #FFFFFF;
+  background: var(--text-field-surface, #FFFFFF);
   font-family: "Pretendard", sans-serif;
   font-size: 12px;
   font-weight: 400;

package/dist/index.d.ts

@@ -748,6 +748,37 @@ interface ListItemProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "on
  */
 declare const ListItem: ({ overline, label, supportingText, metadata, leadingElement, trailingElement, alignment, disabled, onClick, className, ...props }: ListItemProps) => react_jsx_runtime.JSX.Element;
 
+interface OtpInputProps {
+    /** OTP 자릿수 (기본값: 6) */
+    length?: 4 | 6;
+    /** 제어형 값 */
+    value?: string;
+    /** 값 변경 콜백 */
+    onChange?: (value: string) => void;
+    /** 에러 상태 */
+    error?: boolean;
+    /** 비활성화 */
+    disabled?: boolean;
+    /** 하단 도움말 텍스트 */
+    supportingText?: string;
+    /** 첫 번째 입력에 자동 포커스 */
+    autoFocus?: boolean;
+    /** 접근성 레이블 */
+    ariaLabel?: string;
+    /** 추가 className */
+    className?: string;
+}
+/**
+ * OTP 입력 컴포넌트를 렌더링한다.
+ * 각 자리를 개별 입력으로 분리하고, 자동 포커스 이동·붙여넣기를 지원한다.
+ * @param props OTP 입력 속성
+ * @returns 렌더링된 OTP 입력 요소
+ */
+declare const OtpInput: {
+    ({ length, value, onChange, error, disabled, supportingText, autoFocus, ariaLabel, className, }: OtpInputProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
 interface ModalProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title"> {
     /** 모달 열림 여부 */
     open: boolean;
@@ -893,7 +924,10 @@ declare const Toggle: {
     displayName: string;
 };
 
+type TextFieldSize = "sm" | "md";
 interface TextFieldProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "value" | "defaultValue"> {
+    /** 입력 필드 크기 (기본값: "md") */
+    size?: TextFieldSize;
     /** 입력 필드 위에 표시할 라벨 텍스트 */
     label?: string;
     /** 라벨 표시 여부 (기본값: true) */
@@ -928,7 +962,7 @@ interface TextFieldProps extends Omit<React$1.InputHTMLAttributes<HTMLInputEleme
  * @returns 렌더링된 텍스트 필드 UI
  */
 declare const TextField: {
-    ({ id, label, showLabel, supportingText, error, leadingIcon, trailingIcon, clearable, fullWidth, className, onChangeAction, value, defaultValue, transformValue, ref, ...props }: TextFieldProps): react_jsx_runtime.JSX.Element;
+    ({ id, label, showLabel, supportingText, error, leadingIcon, trailingIcon, clearable, fullWidth, size, className, onChangeAction, value, defaultValue, transformValue, ref, ...props }: TextFieldProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -986,4 +1020,4 @@ interface TopLoadingProps {
  */
 declare const TopLoading: ({ progress, color, height, isLoading, ariaLabel, }: TopLoadingProps) => react_jsx_runtime.JSX.Element | null;
 
-export { AlertProvider, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipType, DatePicker, type DatePickerProps, Divider, type DividerProps, FAB, type FABProps, type FABVariant, FileInput, type FileInputProps, Icon, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconName, type IconProps, type IconWeight, LinearProgress, type LinearProgressProps, ListItem, type ListItemProps, Modal, type ModalProps, Pagination, type PaginationProps, Radio, type RadioProps, Select, type SelectOption, type SelectProps, Spinner, type SpinnerProps, TextField, type TextFieldProps, ToastProvider, Toggle, type ToggleProps, TopLoading, type TopLoadingProps, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, colors, elevation, motion, opacity, radius, skeleton, spacing, typography, useAlert, useToast, zIndex };
+export { AlertProvider, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipType, DatePicker, type DatePickerProps, Divider, type DividerProps, FAB, type FABProps, type FABVariant, FileInput, type FileInputProps, Icon, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconName, type IconProps, type IconWeight, LinearProgress, type LinearProgressProps, ListItem, type ListItemProps, Modal, type ModalProps, OtpInput, type OtpInputProps, Pagination, type PaginationProps, Radio, type RadioProps, Select, type SelectOption, type SelectProps, Spinner, type SpinnerProps, TextField, type TextFieldProps, ToastProvider, Toggle, type ToggleProps, TopLoading, type TopLoadingProps, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, colors, elevation, motion, opacity, radius, skeleton, spacing, typography, useAlert, useToast, zIndex };

package/dist/index.js

@@ -1756,6 +1756,112 @@ var ListItem = ({
     }
   );
 };
+var OtpInput = ({
+  length = 6,
+  value = "",
+  onChange,
+  error = false,
+  disabled = false,
+  supportingText,
+  autoFocus = false,
+  ariaLabel = "OTP \uC785\uB825",
+  className
+}) => {
+  const inputsRef = React5.useRef([]);
+  const digits = React5.useMemo(() => {
+    const arr = value.split("").slice(0, length);
+    while (arr.length < length) arr.push("");
+    return arr;
+  }, [value, length]);
+  const focusInput = (index) => {
+    inputsRef.current[index]?.focus();
+  };
+  const updateValue = (newDigits) => {
+    onChange?.(newDigits.join(""));
+  };
+  const handleChange = (index, e) => {
+    const val = e.target.value;
+    if (val && !/^\d$/.test(val)) return;
+    const newDigits = [...digits];
+    newDigits[index] = val;
+    updateValue(newDigits);
+    if (val && index < length - 1) {
+      focusInput(index + 1);
+    }
+  };
+  const handleFocus = (index) => {
+    const firstEmpty = digits.findIndex((d) => d === "");
+    if (firstEmpty !== -1 && firstEmpty < index) {
+      focusInput(firstEmpty);
+    }
+  };
+  const handleKeyDown = (index, e) => {
+    if (e.key === "Backspace") {
+      if (digits[index]) {
+        const newDigits = [...digits];
+        newDigits[index] = "";
+        updateValue(newDigits);
+      } else if (index > 0) {
+        focusInput(index - 1);
+        const newDigits = [...digits];
+        newDigits[index - 1] = "";
+        updateValue(newDigits);
+      }
+      e.preventDefault();
+    }
+    if (e.key === "ArrowLeft" && index > 0) {
+      focusInput(index - 1);
+      e.preventDefault();
+    }
+    if (e.key === "ArrowRight" && index < length - 1) {
+      focusInput(index + 1);
+      e.preventDefault();
+    }
+  };
+  const handlePaste = (e) => {
+    e.preventDefault();
+    const pasted = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, length);
+    if (!pasted) return;
+    const newDigits = [...digits];
+    for (let i = 0; i < pasted.length; i++) {
+      newDigits[i] = pasted[i];
+    }
+    updateValue(newDigits);
+    const nextIndex = Math.min(pasted.length, length - 1);
+    focusInput(nextIndex);
+  };
+  const rootClassName = cn("otp_input", className);
+  return /* @__PURE__ */ jsxs("div", { className: rootClassName, role: "group", "aria-label": ariaLabel, children: [
+    /* @__PURE__ */ jsx("div", { className: "otp_input_boxes", children: digits.map((digit, i) => /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: (el) => {
+          inputsRef.current[i] = el;
+        },
+        type: "text",
+        inputMode: "numeric",
+        pattern: "\\d*",
+        maxLength: 1,
+        value: digit,
+        onChange: (e) => handleChange(i, e),
+        onFocus: () => handleFocus(i),
+        onKeyDown: (e) => handleKeyDown(i, e),
+        onPaste: handlePaste,
+        disabled,
+        autoFocus: autoFocus && i === 0,
+        "aria-label": `${i + 1}\uBC88\uC9F8 \uC790\uB9AC`,
+        className: cn(
+          "otp_input_box",
+          error && "otp_input_box_error",
+          disabled && "otp_input_box_disabled"
+        )
+      },
+      i
+    )) }),
+    supportingText && /* @__PURE__ */ jsx("span", { className: cn("otp_input_supporting", error && "otp_input_supporting_error"), children: supportingText })
+  ] });
+};
+OtpInput.displayName = "OtpInput";
 var Modal = ({
   open,
   onClose,
@@ -2050,7 +2156,7 @@ var Select = ({
     const spaceAbove = rect.top;
     setDropUp(spaceBelow < listHeight && spaceAbove > spaceBelow);
   }, [isOpen, options.length]);
-  const rootClassName = cn("select", className);
+  const rootClassName = cn("select", { select_has_label: !!label }, className);
   const controlClassName = cn(
     "select_control",
     `select_variant_${variant}`,
@@ -2199,6 +2305,7 @@ var TextField = ({
   trailingIcon,
   clearable,
   fullWidth,
+  size = "md",
   className,
   onChangeAction,
   value,
@@ -2227,6 +2334,7 @@ var TextField = ({
   }, [onChangeAction]);
   const rootClassName = cn(
     "text_field",
+    size === "sm" && "text_field_size_sm",
     fullWidth && "text_field_full_width",
     error && "text_field_error",
     props.disabled && "text_field_disabled",
@@ -2415,4 +2523,4 @@ var TopLoading = ({
   );
 };
 
-export { AlertProvider, Button, Card, Checkbox, Chip, DatePicker, Divider, FAB, FileInput, Icon, IconButton, LinearProgress, ListItem, Modal, Pagination, Radio, Select, Spinner, TextField, ToastProvider, Toggle, TopLoading, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, colors, elevation, motion, opacity, radius, skeleton, spacing, typography, useAlert, useToast, zIndex };
+export { AlertProvider, Button, Card, Checkbox, Chip, DatePicker, Divider, FAB, FileInput, Icon, IconButton, LinearProgress, ListItem, Modal, OtpInput, Pagination, Radio, Select, Spinner, TextField, ToastProvider, Toggle, TopLoading, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, colors, elevation, motion, opacity, radius, skeleton, spacing, typography, useAlert, useToast, zIndex };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bigtablet/design-system",
-	"version": "2.0.7",
+	"version": "2.2.0",
 	"description": "Bigtablet Design System UI Components",
 	"type": "module",
 	"types": "dist/index.d.ts",