@bigtablet/design-system 3.18.3 → 3.19.0

package/dist/index.css

@@ -2385,6 +2385,16 @@ body:has(.bottom_nav) {
   cursor: pointer;
   transition: color 0.2s ease-in-out;
 }
+.field_label_row {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  width: 100%;
+}
+.field_label_row .field_label {
+  margin-right: auto;
+}
 .field_required {
   margin-left: 2px;
   color: var(--bt-color-status-error-on-surface);

package/dist/index.d.ts

@@ -2293,6 +2293,14 @@ interface FieldProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "child
     name: string;
     /** 라벨 텍스트. `Field` 가 소유하므로 자식 입력에는 `label` 을 주지 않는다 */
     label?: string;
+    /**
+     * 라벨과 **같은 줄 오른쪽**에 놓는 조작 요소(토글·링크 버튼 등).
+     *
+     * `<label>` 안이 아니라 형제로 렌더된다 - 라벨 클릭이 입력 포커스로 가는 동작과
+     * 조작 요소 클릭이 겹치지 않아야 한다(`TextField` 의 `leadingIcon` 은 `aria-hidden`,
+     * `leadingAction` 은 아닌 것과 같은 구분).
+     */
+    labelAction?: React$1.ReactNode;
     /** 필수 표시(*). 자식 입력에 `aria-required` 로도 전달된다 */
     required?: boolean;
     /** 입력 아래 도움말. 에러가 있으면 에러가 대신 보인다 */
@@ -2321,7 +2329,7 @@ interface FieldProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "child
  * </Field>
  * ```
  */
-declare const Field: ({ name, label, required, help, error: errorProp, children, className, ...props }: FieldProps) => React$1.JSX.Element;
+declare const Field: ({ name, label, labelAction, required, help, error: errorProp, children, className, ...props }: FieldProps) => React$1.JSX.Element;
 
 type FileInputVariant = "button" | "preview";
 interface FileInputProps extends React$1.InputHTMLAttributes<HTMLInputElement> {

package/dist/index.js

@@ -2849,6 +2849,7 @@ function useFieldControl() {
 var Field = ({
   name,
   label,
+  labelAction,
   required = false,
   help,
   error: errorProp,
@@ -2871,11 +2872,15 @@ var Field = ({
     invalid: !!error,
     required
   };
+  const labelElement = label ? /* @__PURE__ */ jsxs("label", { id: labelId, htmlFor: inputId, className: "field_label", children: [
+    label,
+    required && /* @__PURE__ */ jsx("span", { className: "field_required", "aria-hidden": "true", children: "*" })
+  ] }) : null;
   return /* @__PURE__ */ jsxs("div", { className: cn("field", !!error && "field_error", className), ...props, children: [
-    label && /* @__PURE__ */ jsxs("label", { id: labelId, htmlFor: inputId, className: "field_label", children: [
-      label,
-      required && /* @__PURE__ */ jsx("span", { className: "field_required", "aria-hidden": "true", children: "*" })
-    ] }),
+    labelAction ? /* @__PURE__ */ jsxs("div", { className: "field_label_row", children: [
+      labelElement,
+      labelAction
+    ] }) : labelElement,
     /* @__PURE__ */ jsx(FieldContext.Provider, { value: control, children }),
     showHelp && /* @__PURE__ */ jsx("div", { id: helpId, className: "field_help", children: help }),
     error && /* @__PURE__ */ jsx("div", { id: errorId, className: "field_message", children: error })

package/package.json

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