@bigtablet/design-system 2.1.0 → 2.2.0

package/dist/index.css

@@ -1523,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%;
@@ -1542,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,
@@ -1578,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);
 }
@@ -1590,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;
@@ -1602,6 +1609,7 @@
   letter-spacing: 0px;
 }
 .select_size_md {
+  min-height: 52px;
   padding: 12px 20px;
   font-size: 15px;
   font-weight: 400;
@@ -1609,6 +1617,7 @@
   letter-spacing: 0px;
 }
 .select_size_lg {
+  min-height: 52px;
   padding: 16px 24px;
   font-size: 16px;
   font-weight: 400;
@@ -1703,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 {
@@ -1854,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;
 }
@@ -1868,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

@@ -924,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) */
@@ -959,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;
 };
 

package/dist/index.js

@@ -1789,6 +1789,12 @@ var OtpInput = ({
       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]) {
@@ -1838,8 +1844,9 @@ var OtpInput = ({
         maxLength: 1,
         value: digit,
         onChange: (e) => handleChange(i, e),
+        onFocus: () => handleFocus(i),
         onKeyDown: (e) => handleKeyDown(i, e),
-        onPaste: i === 0 ? handlePaste : void 0,
+        onPaste: handlePaste,
         disabled,
         autoFocus: autoFocus && i === 0,
         "aria-label": `${i + 1}\uBC88\uC9F8 \uC790\uB9AC`,
@@ -2149,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}`,
@@ -2298,6 +2305,7 @@ var TextField = ({
   trailingIcon,
   clearable,
   fullWidth,
+  size = "md",
   className,
   onChangeAction,
   value,
@@ -2326,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",

package/package.json

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