@bigtablet/design-system 2.2.0 → 2.2.2

package/dist/index.css

@@ -1858,22 +1858,29 @@
   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: inherit;
-  transition: border-color 0.2s ease-in-out;
+  padding: 0;
+  margin: 0;
+  min-inline-size: 0;
+  width: 100%;
+  background-color: #FFFFFF;
+  transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
 }
 .text_field_container:hover {
   border-color: #B3B3B3;
 }
-.text_field_size_sm .text_field_container {
+.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 {
@@ -1883,24 +1890,23 @@
   font-size: 14px;
   line-height: 20px;
 }
-.text_field_container:focus-within {
-  border-color: #121212;
-}
 .text_field_label {
-  position: absolute;
-  top: -8px;
-  left: 16px;
+  margin-inline-start: 12px;
   padding: 0 4px;
-  background: var(--text-field-surface, #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;
@@ -1994,6 +2000,7 @@
 }
 .text_field_disabled .text_field_container {
   border-color: rgba(26, 26, 26, 0.12);
+  background-color: #F4F4F4;
 }
 .text_field_disabled .text_field_container:hover {
   border-color: rgba(26, 26, 26, 0.12);

package/dist/index.d.ts

@@ -958,6 +958,7 @@ interface TextFieldProps extends Omit<React$1.InputHTMLAttributes<HTMLInputEleme
 /**
  * 텍스트 필드를 렌더링한다.
  * Figma DS 기준 outlined 스타일 + floating label을 지원한다.
+ * fieldset + legend 구조로 배경색 없이 border notch를 자연스럽게 처리한다.
  * @param props 텍스트 필드 속성
  * @returns 렌더링된 텍스트 필드 UI
  */

package/dist/index.js

@@ -2351,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.2.0",
+	"version": "2.2.2",
 	"description": "Bigtablet Design System UI Components",
 	"type": "module",
 	"types": "dist/index.d.ts",