@bigtablet/design-system 2.1.0 → 2.2.1

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 {
@@ -1845,16 +1858,12 @@
   width: 100%;
 }
 .text_field_container {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  width: 100%;
-  min-height: 52px;
-  padding: 4px 0;
   border: 1px solid #E5E5E5;
   border-radius: 12px;
-  background: #FFFFFF;
+  padding: 0;
+  margin: 0;
+  min-inline-size: 0;
+  width: 100%;
   transition: border-color 0.2s ease-in-out;
 }
 .text_field_container:hover {
@@ -1863,21 +1872,40 @@
 .text_field_container:focus-within {
   border-color: #121212;
 }
+.text_field_inner {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-height: 52px;
+  padding: 4px 0;
+}
+.text_field_size_sm .text_field_inner {
+  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_label {
-  position: absolute;
-  top: -8px;
-  left: 16px;
+  margin-inline-start: 12px;
   padding: 0 4px;
-  background: #FFFFFF;
+  color: #121212;
+  transition: color 0.2s ease-in-out;
+}
+.text_field_label > label {
+  display: block;
   font-family: "Pretendard", sans-serif;
   font-size: 12px;
   font-weight: 400;
   line-height: 16px;
   letter-spacing: 0.32px;
-  color: #121212;
+  color: inherit;
   white-space: nowrap;
   pointer-events: none;
-  transition: color 0.2s ease-in-out;
+  cursor: default;
 }
 .text_field_input_wrap {
   flex: 1;

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) */
@@ -955,11 +958,12 @@ interface TextFieldProps extends Omit<React$1.InputHTMLAttributes<HTMLInputEleme
 /**
  * 텍스트 필드를 렌더링한다.
  * Figma DS 기준 outlined 스타일 + floating label을 지원한다.
+ * fieldset + legend 구조로 배경색 없이 border notch를 자연스럽게 처리한다.
  * @param props 텍스트 필드 속성
  * @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",
@@ -2342,43 +2351,45 @@ var TextField = ({
     }
   ) : trailingIcon ? /* @__PURE__ */ jsx("span", { className: "text_field_icon", "aria-hidden": "true", children: trailingIcon }) : null;
   return /* @__PURE__ */ jsxs("div", { className: rootClassName, children: [
-    /* @__PURE__ */ jsxs("div", { className: "text_field_container", children: [
-      leadingIcon && /* @__PURE__ */ jsx("span", { className: "text_field_icon", "aria-hidden": "true", children: leadingIcon }),
-      /* @__PURE__ */ jsx("div", { className: cn("text_field_input_wrap", resolvedTrailing && "text_field_input_wrap_no_pad_right"), children: /* @__PURE__ */ jsx(
-        "input",
-        {
-          id: inputId,
-          ref,
-          className: "text_field_input",
-          "aria-invalid": !!error,
-          "aria-describedby": helperId,
-          "aria-label": !showLabel ? label : void 0,
-          ...props,
-          value: innerValue,
-          onCompositionStart: () => {
-            isComposingRef.current = true;
-          },
-          onCompositionEnd: (event) => {
-            isComposingRef.current = false;
-            const rawValue = event.currentTarget.value;
-            const nextValue = applyTransform(rawValue);
-            setInnerValue(nextValue);
-            onChangeAction?.(nextValue);
-          },
-          onChange: (event) => {
-            const rawValue = event.target.value;
-            if (isComposingRef.current) {
-              setInnerValue(rawValue);
-              return;
+    /* @__PURE__ */ jsxs("fieldset", { className: "text_field_container", children: [
+      label && showLabel && /* @__PURE__ */ jsx("legend", { className: "text_field_label", children: /* @__PURE__ */ jsx("label", { htmlFor: inputId, children: label }) }),
+      /* @__PURE__ */ jsxs("div", { className: "text_field_inner", children: [
+        leadingIcon && /* @__PURE__ */ jsx("span", { className: "text_field_icon", "aria-hidden": "true", children: leadingIcon }),
+        /* @__PURE__ */ jsx("div", { className: cn("text_field_input_wrap", resolvedTrailing && "text_field_input_wrap_no_pad_right"), children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: inputId,
+            ref,
+            className: "text_field_input",
+            "aria-invalid": !!error,
+            "aria-describedby": helperId,
+            "aria-label": !showLabel ? label : void 0,
+            ...props,
+            value: innerValue,
+            onCompositionStart: () => {
+              isComposingRef.current = true;
+            },
+            onCompositionEnd: (event) => {
+              isComposingRef.current = false;
+              const rawValue = event.currentTarget.value;
+              const nextValue = applyTransform(rawValue);
+              setInnerValue(nextValue);
+              onChangeAction?.(nextValue);
+            },
+            onChange: (event) => {
+              const rawValue = event.target.value;
+              if (isComposingRef.current) {
+                setInnerValue(rawValue);
+                return;
+              }
+              const nextValue = applyTransform(rawValue);
+              setInnerValue(nextValue);
+              onChangeAction?.(nextValue);
             }
-            const nextValue = applyTransform(rawValue);
-            setInnerValue(nextValue);
-            onChangeAction?.(nextValue);
           }
-        }
-      ) }),
-      resolvedTrailing,
-      label && showLabel && /* @__PURE__ */ jsx("label", { className: "text_field_label", htmlFor: inputId, children: label })
+        ) }),
+        resolvedTrailing
+      ] })
     ] }),
     supportingText && /* @__PURE__ */ jsx("div", { id: helperId, className: "text_field_helper", children: supportingText })
   ] });

package/package.json

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