@petnow/ui 5.4.0 → 6.0.0

package/dist/text-field.js

@@ -2,37 +2,35 @@
 import { t as e } from "./TailwindUtil-DiNvXuNl.js";
 import { CTAButton as t } from "./cta-button.js";
 import { CancelFilledIcon as n } from "./icons/action/cancel-filled.js";
-import { ChevronLeftIcon as r } from "./icons/action/chevron-left.js";
-import { i, n as a } from "./fieldStyles-DyZu__hI.js";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import * as c from "react";
-import { cva as l } from "class-variance-authority";
+import { r, t as i } from "./fieldStyles-DXyDrzxD.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import * as s from "react";
 //#region src/components/text-field/TextField.tsx
-var u = c.forwardRef(({ onChange: t, subtitle: r, isRequired: l = !1, assistiveText: u, errorText: d, disabled: f = !1, multiLine: p = !1, className: m, rightElement: h, showCounter: g = !1, value: _, maxLength: v, size: y = "large", ...b }, x) => {
-	let S = !!d, C = c.useRef(null);
-	c.useImperativeHandle(x, () => C.current);
-	let w = c.useCallback(() => {
+var c = s.forwardRef(({ onChange: t, subtitle: c, isRequired: l = !1, assistiveText: u, errorText: d, disabled: f = !1, multiLine: p = !1, className: m, rightElement: h, showCounter: g = !1, value: _, maxLength: v, size: y = "large", ...b }, x) => {
+	let S = !!d, C = s.useRef(null);
+	s.useImperativeHandle(x, () => C.current);
+	let w = s.useCallback(() => {
 		C.current?.focus();
 	}, []), T = (typeof _ == "string" ? _ : "").length, E = b, D = b, O = y === "large" ? "text-title-20-regular" : "text-body-16-regular", k = y === "large" ? "text-title-18-bold" : "text-title-14-bold", A = y === "large" ? "text-body-16-regular" : "text-caption-12-medium";
-	return /* @__PURE__ */ s("div", {
+	return /* @__PURE__ */ o("div", {
 		className: e("flex flex-col gap-2", m),
 		children: [
-			r && /* @__PURE__ */ s("span", {
+			c && /* @__PURE__ */ o("span", {
 				className: e(k, "text-text-base-neutral-5"),
-				children: [r, l && /* @__PURE__ */ o("span", {
+				children: [c, l && /* @__PURE__ */ a("span", {
 					className: "text-text-prominent-accent-1",
 					children: "*"
 				})]
 			}),
-			/* @__PURE__ */ s("div", {
+			/* @__PURE__ */ o("div", {
 				onClick: f ? void 0 : w,
-				className: e("group overflow-hidden", a({
+				className: e("group overflow-hidden", i({
 					size: y,
 					disabled: f,
 					hasError: S
 				}), !f && !S && "focus-within:border-border-base-neutral-4", p && "h-[120px] items-start"),
 				children: [
-					p ? /* @__PURE__ */ o("textarea", {
+					p ? /* @__PURE__ */ a("textarea", {
 						...D,
 						onChange: t,
 						ref: C,
@@ -40,7 +38,7 @@ var u = c.forwardRef(({ onChange: t, subtitle: r, isRequired: l = !1, assistiveT
 						maxLength: v,
 						disabled: f,
 						className: e("text-text-base-neutral-5 placeholder:text-text-base-neutral-2 h-full min-h-[24px] min-w-0 flex-1 border-none bg-transparent py-0 outline-none", O, "resize-none overflow-y-auto")
-					}) : /* @__PURE__ */ o("input", {
+					}) : /* @__PURE__ */ a("input", {
 						...E,
 						onChange: t,
 						ref: C,
@@ -49,11 +47,11 @@ var u = c.forwardRef(({ onChange: t, subtitle: r, isRequired: l = !1, assistiveT
 						disabled: f,
 						className: e("text-text-base-neutral-5 placeholder:text-text-base-neutral-2 min-h-[24px] min-w-0 flex-1 border-none bg-transparent py-0 outline-none", O, "overflow-hidden text-ellipsis whitespace-nowrap")
 					}),
-					h && /* @__PURE__ */ o("div", {
+					h && /* @__PURE__ */ a("div", {
 						className: "shrink-0",
 						children: h
 					}),
-					/* @__PURE__ */ o("button", {
+					/* @__PURE__ */ a("button", {
 						type: "button",
 						onClick: () => t && t({ target: { value: "" } }),
 						tabIndex: -1,
@@ -62,20 +60,20 @@ var u = c.forwardRef(({ onChange: t, subtitle: r, isRequired: l = !1, assistiveT
 							flex: S,
 							"group-focus-within:flex": !f && T > 0
 						}),
-						children: /* @__PURE__ */ o(n, { className: "text-icon-base-neutral-3 h-6 w-6 shrink-0 cursor-pointer" })
+						children: /* @__PURE__ */ a(n, { className: "text-icon-base-neutral-3 h-6 w-6 shrink-0 cursor-pointer" })
 					})
 				]
 			}),
-			(u || d || v && g) && /* @__PURE__ */ s("div", {
+			(u || d || v && g) && /* @__PURE__ */ o("div", {
 				className: "flex items-center justify-between gap-2",
-				children: [(u || d) && /* @__PURE__ */ o("span", {
-					className: e(A, i({
+				children: [(u || d) && /* @__PURE__ */ a("span", {
+					className: e(A, r({
 						size: y,
 						hasError: S
 					})),
 					children: d || u
-				}), v && g && /* @__PURE__ */ s("span", {
-					className: e("ml-auto", A, i({
+				}), v && g && /* @__PURE__ */ o("span", {
+					className: e("ml-auto", A, r({
 						size: y,
 						hasError: S
 					})),
@@ -89,131 +87,69 @@ var u = c.forwardRef(({ onChange: t, subtitle: r, isRequired: l = !1, assistiveT
 		]
 	});
 });
-u.displayName = "TextFieldNormal";
-var d = l("flex items-center justify-between rounded-[4px] bg-surface-base-neutral-2 border transition-colors duration-200", {
-	variants: {
-		size: {
-			large: "gap-2 p-[15px] min-h-[56px]",
-			small: "gap-3 p-[11px] min-h-[48px]"
-		},
-		hasError: {
-			true: "border-border-prominent-error",
-			false: "border-transparent"
-		},
-		disabled: {
-			true: "opacity-50",
-			false: ""
-		}
-	},
-	defaultVariants: { size: "large" }
-}), f = ({ label: t, placeholder: n, value: a, isRequired: c = !1, disabled: l = !1, assistiveText: u, errorText: f, onPress: p, className: m, size: h = "large" }) => {
-	let g = !!f, _ = h === "large" ? "text-title-18-bold" : "text-title-14-bold", v = h === "large" ? "text-title-20-regular" : "text-body-16-regular";
-	return /* @__PURE__ */ s("div", {
-		className: e("flex w-full flex-col gap-2", m),
-		children: [
-			t && /* @__PURE__ */ s("div", {
-				className: "flex items-start",
-				children: [/* @__PURE__ */ o("span", {
-					className: e(_, "text-text-base-neutral-5"),
-					children: t
-				}), c && /* @__PURE__ */ o("span", {
-					className: e(_, "text-text-prominent-accent-1"),
-					children: "*"
-				})]
-			}),
-			/* @__PURE__ */ s("button", {
-				type: "button",
-				className: d({
-					size: h,
-					hasError: g,
-					disabled: l
-				}),
-				onClick: p,
-				disabled: l,
-				children: [/* @__PURE__ */ o("span", {
-					className: e(v, "flex-1", a ? "text-text-base-neutral-5" : "text-text-base-neutral-2"),
-					style: {
-						textAlign: "left",
-						overflow: "hidden",
-						textOverflow: "ellipsis"
-					},
-					children: a || n
-				}), /* @__PURE__ */ o(r, { className: "text-icon-base-neutral-3 rotate-270" })]
-			}),
-			(u || f) && /* @__PURE__ */ o("div", {
-				className: "flex items-start gap-2",
-				children: /* @__PURE__ */ o("span", {
-					className: i({
-						size: h,
-						hasError: g
-					}),
-					children: f || u
-				})
-			})
-		]
-	});
-}, p = c.forwardRef(({ onChange: r, subtitle: l, isRequired: u = !1, assistiveText: d, errorText: f, disabled: p = !1, multiLine: m = !1, className: h, showCounter: g = !1, value: _, maxLength: v, size: y = "large", fieldRightElement: b, buttonText: x, onButtonClick: S, buttonDisabled: C = !1, ...w }, T) => {
-	let E = !!f, D = c.useRef(null);
-	c.useImperativeHandle(T, () => D.current);
-	let O = c.useCallback(() => {
+c.displayName = "TextFieldNormal";
+var l = s.forwardRef(({ onChange: c, subtitle: l, isRequired: u = !1, assistiveText: d, errorText: f, disabled: p = !1, multiLine: m = !1, className: h, showCounter: g = !1, value: _, maxLength: v, size: y = "large", fieldRightElement: b, buttonText: x, onButtonClick: S, buttonDisabled: C = !1, ...w }, T) => {
+	let E = !!f, D = s.useRef(null);
+	s.useImperativeHandle(T, () => D.current);
+	let O = s.useCallback(() => {
 		D.current?.focus();
 	}, []), k = (typeof _ == "string" ? _ : "").length, A = w, j = w, M = y === "large" ? "text-title-20-regular" : "text-body-16-regular", N = y === "large" ? "text-title-18-bold" : "text-title-14-bold", P = y === "large" ? "text-body-16-regular" : "text-caption-12-medium";
-	return /* @__PURE__ */ s("div", {
+	return /* @__PURE__ */ o("div", {
 		className: e("flex flex-col gap-2", h),
 		children: [
-			l && /* @__PURE__ */ s("span", {
+			l && /* @__PURE__ */ o("span", {
 				className: e(N, "text-text-base-neutral-5"),
-				children: [l, u && /* @__PURE__ */ o("span", {
+				children: [l, u && /* @__PURE__ */ a("span", {
 					className: "text-text-prominent-accent-1",
 					children: "*"
 				})]
 			}),
-			/* @__PURE__ */ s("div", {
+			/* @__PURE__ */ o("div", {
 				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ s("div", {
+				children: [/* @__PURE__ */ o("div", {
 					onClick: p ? void 0 : O,
-					className: e("group flex-1 overflow-hidden", a({
+					className: e("group flex-1 overflow-hidden", i({
 						size: y,
 						disabled: p,
 						hasError: E
 					}), !p && !E && "focus-within:border-border-base-neutral-4", m && "h-[120px] items-start"),
 					children: [
-						m ? /* @__PURE__ */ o("textarea", {
+						m ? /* @__PURE__ */ a("textarea", {
 							...j,
-							onChange: r,
+							onChange: c,
 							ref: D,
 							value: _,
 							maxLength: v,
 							disabled: p,
 							className: e("text-text-base-neutral-5 placeholder:text-text-base-neutral-2 min-h-[24px] min-w-0 flex-1 border-none bg-transparent py-0 outline-none", M, "resize-none overflow-y-auto")
-						}) : /* @__PURE__ */ o("input", {
+						}) : /* @__PURE__ */ a("input", {
 							...A,
-							onChange: r,
+							onChange: c,
 							ref: D,
 							value: _,
 							maxLength: v,
 							disabled: p,
 							className: e("text-text-base-neutral-5 placeholder:text-text-base-neutral-2 min-h-[24px] min-w-0 flex-1 border-none bg-transparent py-0 outline-none", M, "overflow-hidden text-ellipsis whitespace-nowrap")
 						}),
-						b && /* @__PURE__ */ o("div", {
+						b && /* @__PURE__ */ a("div", {
 							className: "shrink-0",
 							children: b
 						}),
-						/* @__PURE__ */ o("button", {
+						/* @__PURE__ */ a("button", {
 							type: "button",
-							onClick: () => r && r({ target: { value: "" } }),
+							onClick: () => c && c({ target: { value: "" } }),
 							tabIndex: -1,
 							disabled: p,
 							className: e("hidden shrink-0", {
 								flex: E,
 								"group-focus-within:flex": !p && k > 0
 							}),
-							children: /* @__PURE__ */ o(n, { className: "text-icon-base-neutral-3 h-6 w-6 shrink-0 cursor-pointer" })
+							children: /* @__PURE__ */ a(n, { className: "text-icon-base-neutral-3 h-6 w-6 shrink-0 cursor-pointer" })
 						})
 					]
-				}), /* @__PURE__ */ o("div", {
+				}), /* @__PURE__ */ a("div", {
 					className: "shrink-0",
-					children: /* @__PURE__ */ o(t, {
+					children: /* @__PURE__ */ a(t, {
 						label: x,
 						onClick: S,
 						size: "medium",
@@ -222,16 +158,16 @@ var d = l("flex items-center justify-between rounded-[4px] bg-surface-base-neutr
 					})
 				})]
 			}),
-			(d || f || v && g) && /* @__PURE__ */ s("div", {
+			(d || f || v && g) && /* @__PURE__ */ o("div", {
 				className: "flex items-center justify-between gap-2",
-				children: [(d || f) && /* @__PURE__ */ o("span", {
-					className: e(P, i({
+				children: [(d || f) && /* @__PURE__ */ a("span", {
+					className: e(P, r({
 						size: y,
 						hasError: E
 					})),
 					children: f || d
-				}), v && g && /* @__PURE__ */ s("span", {
-					className: e("ml-auto", P, i({
+				}), v && g && /* @__PURE__ */ o("span", {
+					className: e("ml-auto", P, r({
 						size: y,
 						hasError: E
 					})),
@@ -245,8 +181,8 @@ var d = l("flex items-center justify-between rounded-[4px] bg-surface-base-neutr
 		]
 	});
 });
-p.displayName = "TextFieldWithButton";
+l.displayName = "TextFieldWithButton";
 //#endregion
-export { u as TextFieldNormal, f as TextFieldSelect, p as TextFieldWithButton };
+export { c as TextFieldNormal, l as TextFieldWithButton };
 
 //# sourceMappingURL=text-field.js.map

package/dist/text-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.js","names":[],"sources":["../src/components/text-field/TextField.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\n\nimport { CTAButton } from \"../cta-button/CTAButton\";\nimport { CancelFilledIcon } from \"../icons/action/CancelFilledIcon\";\nimport { ChevronLeftIcon } from \"../icons/action/ChevronLeftIcon\";\n\nimport {\n  fieldContainerVariants as textFieldNormalContainerVariants,\n  fieldMessageVariants as textFieldAssistiveAreaVariants,\n} from \"@/components/ui/fieldStyles\";\nimport { cn } from \"@/utils/TailwindUtil\";\n\ninterface TextFieldNormalProps extends Omit<React.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, \"size\"> {\n  subtitle?: string;\n  isRequired?: boolean;\n  assistiveText?: string | React.ReactNode;\n  errorText?: string;\n  disabled?: boolean;\n  multiLine?: boolean;\n  className?: string;\n  rightElement?: React.ReactNode;\n  showCounter?: boolean;\n  size?: \"large\" | \"small\";\n}\n\nconst TextFieldNormal = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, TextFieldNormalProps>(\n  (\n    {\n      onChange,\n      subtitle,\n      isRequired = false,\n      assistiveText,\n      errorText,\n      disabled = false,\n      multiLine = false,\n      className,\n      rightElement,\n      showCounter = false,\n      value,\n      maxLength,\n      size = \"large\",\n      ...inputProps\n    },\n    ref,\n  ) => {\n    const hasError = !!errorText;\n    const inputRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n\n    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement | HTMLTextAreaElement);\n\n    const handleContainerClick = React.useCallback(() => {\n      inputRef.current?.focus();\n    }, []);\n\n    const stringValue = typeof value === \"string\" ? value : \"\";\n    const currentLength = stringValue.length;\n\n    const inputPropsForInput = inputProps as React.ComponentPropsWithoutRef<\"input\">;\n    const inputPropsForTextarea = inputProps as React.ComponentPropsWithoutRef<\"textarea\">;\n\n    // 사이즈별 폰트 크기\n    const inputFontSize = size === \"large\" ? \"text-title-20-regular\" : \"text-body-16-regular\";\n    const subtitleFontSize = size === \"large\" ? \"text-title-18-bold\" : \"text-title-14-bold\";\n    const assistiveFontSize = size === \"large\" ? \"text-body-16-regular\" : \"text-caption-12-medium\";\n\n    return (\n      <div className={cn(\"flex flex-col gap-2\", className)}>\n        {subtitle && (\n          <span className={cn(subtitleFontSize, \"text-text-base-neutral-5\")}>\n            {subtitle}\n            {isRequired && <span className=\"text-text-prominent-accent-1\">*</span>}\n          </span>\n        )}\n\n        <div\n          onClick={disabled ? undefined : handleContainerClick}\n          className={cn(\n            \"group overflow-hidden\",\n            textFieldNormalContainerVariants({ size, disabled, hasError }),\n            !disabled && !hasError && \"focus-within:border-border-base-neutral-4\",\n            multiLine && \"h-[120px] items-start\",\n          )}\n        >\n          {multiLine ? (\n            <textarea\n              {...inputPropsForTextarea}\n              onChange={onChange}\n              ref={inputRef as React.Ref<HTMLTextAreaElement>}\n              value={value}\n              maxLength={maxLength}\n              disabled={disabled}\n              className={cn(\n                \"text-text-base-neutral-5 placeholder:text-text-base-neutral-2 h-full min-h-[24px] min-w-0 flex-1 border-none bg-transparent py-0 outline-none\",\n                inputFontSize,\n                \"resize-none overflow-y-auto\",\n              )}\n            />\n          ) : (\n            <input\n              {...inputPropsForInput}\n              onChange={onChange}\n              ref={inputRef as React.Ref<HTMLInputElement>}\n              value={value}\n              maxLength={maxLength}\n              disabled={disabled}\n              className={cn(\n                \"text-text-base-neutral-5 placeholder:text-text-base-neutral-2 min-h-[24px] min-w-0 flex-1 border-none bg-transparent py-0 outline-none\",\n                inputFontSize,\n                \"overflow-hidden text-ellipsis whitespace-nowrap\",\n              )}\n            />\n          )}\n\n          {rightElement && <div className=\"shrink-0\">{rightElement}</div>}\n\n          <button\n            type=\"button\"\n            onClick={() =>\n              onChange &&\n              onChange({ target: { value: \"\" } } as React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>)\n            }\n            tabIndex={-1}\n            disabled={disabled}\n            className={cn(\"hidden shrink-0\", {\n              flex: hasError,\n              \"group-focus-within:flex\": !disabled && currentLength > 0,\n            })}\n          >\n            <CancelFilledIcon className=\"text-icon-base-neutral-3 h-6 w-6 shrink-0 cursor-pointer\" />\n          </button>\n        </div>\n\n        {(assistiveText || errorText || (maxLength && showCounter)) && (\n          <div className=\"flex items-center justify-between gap-2\">\n            {(assistiveText || errorText) && (\n              <span className={cn(assistiveFontSize, textFieldAssistiveAreaVariants({ size, hasError }))}>\n                {errorText || assistiveText}\n              </span>\n            )}\n            {maxLength && showCounter && (\n              <span className={cn(\"ml-auto\", assistiveFontSize, textFieldAssistiveAreaVariants({ size, hasError }))}>\n                {currentLength}/{maxLength}\n              </span>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\nTextFieldNormal.displayName = \"TextFieldNormal\";\n\n// TextField Select 컴포넌트\nconst textFieldSelectVariants = cva(\n  \"flex items-center justify-between rounded-[4px] bg-surface-base-neutral-2 border transition-colors duration-200\",\n  {\n    variants: {\n      size: {\n        large: \"gap-2 p-[15px] min-h-[56px]\",\n        small: \"gap-3 p-[11px] min-h-[48px]\",\n      },\n      hasError: {\n        true: \"border-border-prominent-error\",\n        false: \"border-transparent\",\n      },\n      disabled: {\n        true: \"opacity-50\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      size: \"large\",\n    },\n  },\n);\n\ninterface TextFieldSelectProps extends VariantProps<typeof textFieldSelectVariants> {\n  label?: string;\n  placeholder: string;\n  value?: string;\n  isRequired?: boolean;\n  disabled?: boolean;\n  assistiveText?: string | React.ReactNode;\n  errorText?: string;\n  onPress?: () => void;\n  className?: string;\n  size?: \"large\" | \"small\";\n}\n\nconst TextFieldSelect = ({\n  label,\n  placeholder,\n  value,\n  isRequired = false,\n  disabled = false,\n  assistiveText,\n  errorText,\n  onPress,\n  className,\n  size = \"large\",\n}: TextFieldSelectProps) => {\n  const hasError = !!errorText;\n\n  // 사이즈별 폰트 크기\n  const labelFontSize = size === \"large\" ? \"text-title-18-bold\" : \"text-title-14-bold\";\n  const valueFontSize = size === \"large\" ? \"text-title-20-regular\" : \"text-body-16-regular\";\n\n  return (\n    <div className={cn(\"flex w-full flex-col gap-2\", className)}>\n      {/* Label with optional asterisk */}\n      {label && (\n        <div className=\"flex items-start\">\n          <span className={cn(labelFontSize, \"text-text-base-neutral-5\")}>{label}</span>\n          {isRequired && <span className={cn(labelFontSize, \"text-text-prominent-accent-1\")}>*</span>}\n        </div>\n      )}\n      {/* Select Field */}\n      <button\n        type=\"button\"\n        className={textFieldSelectVariants({ size, hasError, disabled })}\n        onClick={onPress}\n        disabled={disabled}\n      >\n        <span\n          className={cn(valueFontSize, \"flex-1\", value ? \"text-text-base-neutral-5\" : \"text-text-base-neutral-2\")}\n          style={{ textAlign: \"left\", overflow: \"hidden\", textOverflow: \"ellipsis\" }}\n        >\n          {value || placeholder}\n        </span>\n        <ChevronLeftIcon className=\"text-icon-base-neutral-3 rotate-270\" />\n      </button>\n      {/* Assistive/Error Text */}\n      {(assistiveText || errorText) && (\n        <div className=\"flex items-start gap-2\">\n          <span className={textFieldAssistiveAreaVariants({ size, hasError })}>{errorText || assistiveText}</span>\n        </div>\n      )}\n    </div>\n  );\n};\n\n// TextField With Button 컴포넌트\ninterface TextFieldWithButtonProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, \"size\"> {\n  subtitle?: string;\n  isRequired?: boolean;\n  assistiveText?: string | React.ReactNode;\n  errorText?: string;\n  disabled?: boolean;\n  multiLine?: boolean;\n  className?: string;\n  showCounter?: boolean;\n  size?: \"large\" | \"small\";\n  fieldRightElement?: React.ReactNode;\n  buttonText: string;\n  onButtonClick: () => void;\n  buttonDisabled?: boolean;\n}\n\nconst TextFieldWithButton = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, TextFieldWithButtonProps>(\n  (\n    {\n      onChange,\n      subtitle,\n      isRequired = false,\n      assistiveText,\n      errorText,\n      disabled = false,\n      multiLine = false,\n      className,\n      showCounter = false,\n      value,\n      maxLength,\n      size = \"large\",\n      fieldRightElement,\n      buttonText,\n      onButtonClick,\n      buttonDisabled = false,\n      ...inputProps\n    },\n    ref,\n  ) => {\n    const hasError = !!errorText;\n    const inputRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n\n    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement | HTMLTextAreaElement);\n\n    const handleContainerClick = React.useCallback(() => {\n      inputRef.current?.focus();\n    }, []);\n\n    const stringValue = typeof value === \"string\" ? value : \"\";\n    const currentLength = stringValue.length;\n\n    const inputPropsForInput = inputProps as React.ComponentPropsWithoutRef<\"input\">;\n    const inputPropsForTextarea = inputProps as React.ComponentPropsWithoutRef<\"textarea\">;\n\n    // 사이즈별 폰트 크기\n    const inputFontSize = size === \"large\" ? \"text-title-20-regular\" : \"text-body-16-regular\";\n    const subtitleFontSize = size === \"large\" ? \"text-title-18-bold\" : \"text-title-14-bold\";\n    const assistiveFontSize = size === \"large\" ? \"text-body-16-regular\" : \"text-caption-12-medium\";\n\n    return (\n      <div className={cn(\"flex flex-col gap-2\", className)}>\n        {subtitle && (\n          <span className={cn(subtitleFontSize, \"text-text-base-neutral-5\")}>\n            {subtitle}\n            {isRequired && <span className=\"text-text-prominent-accent-1\">*</span>}\n          </span>\n        )}\n\n        <div className=\"flex items-center gap-2\">\n          <div\n            onClick={disabled ? undefined : handleContainerClick}\n            className={cn(\n              \"group flex-1 overflow-hidden\",\n              textFieldNormalContainerVariants({ size, disabled, hasError }),\n              !disabled && !hasError && \"focus-within:border-border-base-neutral-4\",\n              multiLine && \"h-[120px] items-start\",\n            )}\n          >\n            {multiLine ? (\n              <textarea\n                {...inputPropsForTextarea}\n                onChange={onChange}\n                ref={inputRef as React.Ref<HTMLTextAreaElement>}\n                value={value}\n                maxLength={maxLength}\n                disabled={disabled}\n                className={cn(\n                  \"text-text-base-neutral-5 placeholder:text-text-base-neutral-2 min-h-[24px] min-w-0 flex-1 border-none bg-transparent py-0 outline-none\",\n                  inputFontSize,\n                  \"resize-none overflow-y-auto\",\n                )}\n              />\n            ) : (\n              <input\n                {...inputPropsForInput}\n                onChange={onChange}\n                ref={inputRef as React.Ref<HTMLInputElement>}\n                value={value}\n                maxLength={maxLength}\n                disabled={disabled}\n                className={cn(\n                  \"text-text-base-neutral-5 placeholder:text-text-base-neutral-2 min-h-[24px] min-w-0 flex-1 border-none bg-transparent py-0 outline-none\",\n                  inputFontSize,\n                  \"overflow-hidden text-ellipsis whitespace-nowrap\",\n                )}\n              />\n            )}\n\n            {fieldRightElement && <div className=\"shrink-0\">{fieldRightElement}</div>}\n\n            <button\n              type=\"button\"\n              onClick={() =>\n                onChange &&\n                onChange({ target: { value: \"\" } } as React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>)\n              }\n              tabIndex={-1}\n              disabled={disabled}\n              className={cn(\"hidden shrink-0\", {\n                flex: hasError,\n                \"group-focus-within:flex\": !disabled && currentLength > 0,\n              })}\n            >\n              <CancelFilledIcon className=\"text-icon-base-neutral-3 h-6 w-6 shrink-0 cursor-pointer\" />\n            </button>\n          </div>\n\n          <div className=\"shrink-0\">\n            <CTAButton\n              label={buttonText}\n              onClick={onButtonClick}\n              size=\"medium\"\n              hierarchy=\"tertiary\"\n              disabled={buttonDisabled || disabled}\n            />\n          </div>\n        </div>\n\n        {(assistiveText || errorText || (maxLength && showCounter)) && (\n          <div className=\"flex items-center justify-between gap-2\">\n            {(assistiveText || errorText) && (\n              <span className={cn(assistiveFontSize, textFieldAssistiveAreaVariants({ size, hasError }))}>\n                {errorText || assistiveText}\n              </span>\n            )}\n            {maxLength && showCounter && (\n              <span className={cn(\"ml-auto\", assistiveFontSize, textFieldAssistiveAreaVariants({ size, hasError }))}>\n                {currentLength}/{maxLength}\n              </span>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\nTextFieldWithButton.displayName = \"TextFieldWithButton\";\n\nexport { TextFieldNormal, TextFieldSelect, TextFieldWithButton };\n"],"mappings":";;;;;;;;;;AA4BA,IAAM,IAAkB,EAAM,YAE1B,EACE,aACA,aACA,gBAAa,IACb,kBACA,cACA,cAAW,IACX,eAAY,IACZ,cACA,iBACA,iBAAc,IACd,UACA,cACA,UAAO,SACP,GAAG,KAEL,MACG;CACH,IAAM,IAAW,CAAC,CAAC,GACb,IAAW,EAAM,OAA+C,IAAI;CAE1E,EAAM,oBAAoB,SAAW,EAAS,OAAiD;CAE/F,IAAM,IAAuB,EAAM,kBAAkB;EACnD,EAAS,SAAS,MAAM;CAC1B,GAAG,CAAC,CAAC,GAGC,KADc,OAAO,KAAU,WAAW,IAAQ,GAAA,CACtB,QAE5B,IAAqB,GACrB,IAAwB,GAGxB,IAAgB,MAAS,UAAU,0BAA0B,wBAC7D,IAAmB,MAAS,UAAU,uBAAuB,sBAC7D,IAAoB,MAAS,UAAU,yBAAyB;CAEtE,OACE,kBAAC,OAAD;EAAK,WAAW,EAAG,uBAAuB,CAAS;YAAnD;GACG,KACC,kBAAC,QAAD;IAAM,WAAW,EAAG,GAAkB,0BAA0B;cAAhE,CACG,GACA,KAAc,kBAAC,QAAD;KAAM,WAAU;eAA+B;IAAO,CAAA,CACjE;;GAGR,kBAAC,OAAD;IACE,SAAS,IAAW,KAAA,IAAY;IAChC,WAAW,EACT,yBACA,EAAiC;KAAE;KAAM;KAAU;IAAS,CAAC,GAC7D,CAAC,KAAY,CAAC,KAAY,6CAC1B,KAAa,uBACf;cAPF;KASG,IACC,kBAAC,YAAD;MACE,GAAI;MACM;MACV,KAAK;MACE;MACI;MACD;MACV,WAAW,EACT,iJACA,GACA,6BACF;KACD,CAAA,IAED,kBAAC,SAAD;MACE,GAAI;MACM;MACV,KAAK;MACE;MACI;MACD;MACV,WAAW,EACT,0IACA,GACA,iDACF;KACD,CAAA;KAGF,KAAgB,kBAAC,OAAD;MAAK,WAAU;gBAAY;KAAkB,CAAA;KAE9D,kBAAC,UAAD;MACE,MAAK;MACL,eACE,KACA,EAAS,EAAE,QAAQ,EAAE,OAAO,GAAG,EAAE,CAA8D;MAEjG,UAAU;MACA;MACV,WAAW,EAAG,mBAAmB;OAC/B,MAAM;OACN,2BAA2B,CAAC,KAAY,IAAgB;MAC1D,CAAC;gBAED,kBAAC,GAAD,EAAkB,WAAU,2DAA4D,CAAA;KAClF,CAAA;IACL;;IAEH,KAAiB,KAAc,KAAa,MAC5C,kBAAC,OAAD;IAAK,WAAU;cAAf,EACI,KAAiB,MACjB,kBAAC,QAAD;KAAM,WAAW,EAAG,GAAmB,EAA+B;MAAE;MAAM;KAAS,CAAC,CAAC;eACtF,KAAa;IACV,CAAA,GAEP,KAAa,KACZ,kBAAC,QAAD;KAAM,WAAW,EAAG,WAAW,GAAmB,EAA+B;MAAE;MAAM;KAAS,CAAC,CAAC;eAApG;MACG;MAAc;MAAE;KACb;MAEL;;EAEJ;;AAET,CACF;AACA,EAAgB,cAAc;AAG9B,IAAM,IAA0B,EAC9B,mHACA;CACE,UAAU;EACR,MAAM;GACJ,OAAO;GACP,OAAO;EACT;EACA,UAAU;GACR,MAAM;GACN,OAAO;EACT;EACA,UAAU;GACR,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB,EACf,MAAM,QACR;AACF,CACF,GAeM,KAAmB,EACvB,UACA,gBACA,UACA,gBAAa,IACb,cAAW,IACX,kBACA,cACA,YACA,cACA,UAAO,cACmB;CAC1B,IAAM,IAAW,CAAC,CAAC,GAGb,IAAgB,MAAS,UAAU,uBAAuB,sBAC1D,IAAgB,MAAS,UAAU,0BAA0B;CAEnE,OACE,kBAAC,OAAD;EAAK,WAAW,EAAG,8BAA8B,CAAS;YAA1D;GAEG,KACC,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,QAAD;KAAM,WAAW,EAAG,GAAe,0BAA0B;eAAI;IAAY,CAAA,GAC5E,KAAc,kBAAC,QAAD;KAAM,WAAW,EAAG,GAAe,8BAA8B;eAAG;IAAO,CAAA,CACvF;;GAGP,kBAAC,UAAD;IACE,MAAK;IACL,WAAW,EAAwB;KAAE;KAAM;KAAU;IAAS,CAAC;IAC/D,SAAS;IACC;cAJZ,CAME,kBAAC,QAAD;KACE,WAAW,EAAG,GAAe,UAAU,IAAQ,6BAA6B,0BAA0B;KACtG,OAAO;MAAE,WAAW;MAAQ,UAAU;MAAU,cAAc;KAAW;eAExE,KAAS;IACN,CAAA,GACN,kBAAC,GAAD,EAAiB,WAAU,sCAAuC,CAAA,CAC5D;;IAEN,KAAiB,MACjB,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,QAAD;KAAM,WAAW,EAA+B;MAAE;MAAM;KAAS,CAAC;eAAI,KAAa;IAAoB,CAAA;GACpG,CAAA;EAEJ;;AAET,GAoBM,IAAsB,EAAM,YAE9B,EACE,aACA,aACA,gBAAa,IACb,kBACA,cACA,cAAW,IACX,eAAY,IACZ,cACA,iBAAc,IACd,UACA,cACA,UAAO,SACP,sBACA,eACA,kBACA,oBAAiB,IACjB,GAAG,KAEL,MACG;CACH,IAAM,IAAW,CAAC,CAAC,GACb,IAAW,EAAM,OAA+C,IAAI;CAE1E,EAAM,oBAAoB,SAAW,EAAS,OAAiD;CAE/F,IAAM,IAAuB,EAAM,kBAAkB;EACnD,EAAS,SAAS,MAAM;CAC1B,GAAG,CAAC,CAAC,GAGC,KADc,OAAO,KAAU,WAAW,IAAQ,GAAA,CACtB,QAE5B,IAAqB,GACrB,IAAwB,GAGxB,IAAgB,MAAS,UAAU,0BAA0B,wBAC7D,IAAmB,MAAS,UAAU,uBAAuB,sBAC7D,IAAoB,MAAS,UAAU,yBAAyB;CAEtE,OACE,kBAAC,OAAD;EAAK,WAAW,EAAG,uBAAuB,CAAS;YAAnD;GACG,KACC,kBAAC,QAAD;IAAM,WAAW,EAAG,GAAkB,0BAA0B;cAAhE,CACG,GACA,KAAc,kBAAC,QAAD;KAAM,WAAU;eAA+B;IAAO,CAAA,CACjE;;GAGR,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KACE,SAAS,IAAW,KAAA,IAAY;KAChC,WAAW,EACT,gCACA,EAAiC;MAAE;MAAM;MAAU;KAAS,CAAC,GAC7D,CAAC,KAAY,CAAC,KAAY,6CAC1B,KAAa,uBACf;eAPF;MASG,IACC,kBAAC,YAAD;OACE,GAAI;OACM;OACV,KAAK;OACE;OACI;OACD;OACV,WAAW,EACT,0IACA,GACA,6BACF;MACD,CAAA,IAED,kBAAC,SAAD;OACE,GAAI;OACM;OACV,KAAK;OACE;OACI;OACD;OACV,WAAW,EACT,0IACA,GACA,iDACF;MACD,CAAA;MAGF,KAAqB,kBAAC,OAAD;OAAK,WAAU;iBAAY;MAAuB,CAAA;MAExE,kBAAC,UAAD;OACE,MAAK;OACL,eACE,KACA,EAAS,EAAE,QAAQ,EAAE,OAAO,GAAG,EAAE,CAA8D;OAEjG,UAAU;OACA;OACV,WAAW,EAAG,mBAAmB;QAC/B,MAAM;QACN,2BAA2B,CAAC,KAAY,IAAgB;OAC1D,CAAC;iBAED,kBAAC,GAAD,EAAkB,WAAU,2DAA4D,CAAA;MAClF,CAAA;KACL;QAEL,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,GAAD;MACE,OAAO;MACP,SAAS;MACT,MAAK;MACL,WAAU;MACV,UAAU,KAAkB;KAC7B,CAAA;IACE,CAAA,CACF;;IAEH,KAAiB,KAAc,KAAa,MAC5C,kBAAC,OAAD;IAAK,WAAU;cAAf,EACI,KAAiB,MACjB,kBAAC,QAAD;KAAM,WAAW,EAAG,GAAmB,EAA+B;MAAE;MAAM;KAAS,CAAC,CAAC;eACtF,KAAa;IACV,CAAA,GAEP,KAAa,KACZ,kBAAC,QAAD;KAAM,WAAW,EAAG,WAAW,GAAmB,EAA+B;MAAE;MAAM;KAAS,CAAC,CAAC;eAApG;MACG;MAAc;MAAE;KACb;MAEL;;EAEJ;;AAET,CACF;AACA,EAAoB,cAAc"}
+{"version":3,"file":"text-field.js","names":[],"sources":["../src/components/text-field/TextField.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { CTAButton } from \"../cta-button/CTAButton\";\nimport { CancelFilledIcon } from \"../icons/action/CancelFilledIcon\";\n\nimport {\n  fieldContainerVariants as textFieldNormalContainerVariants,\n  fieldMessageVariants as textFieldAssistiveAreaVariants,\n} from \"@/components/ui/fieldStyles\";\nimport { cn } from \"@/utils/TailwindUtil\";\n\ninterface TextFieldNormalProps extends Omit<React.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, \"size\"> {\n  subtitle?: string;\n  isRequired?: boolean;\n  assistiveText?: string | React.ReactNode;\n  errorText?: string;\n  disabled?: boolean;\n  multiLine?: boolean;\n  className?: string;\n  rightElement?: React.ReactNode;\n  showCounter?: boolean;\n  size?: \"large\" | \"small\";\n}\n\nconst TextFieldNormal = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, TextFieldNormalProps>(\n  (\n    {\n      onChange,\n      subtitle,\n      isRequired = false,\n      assistiveText,\n      errorText,\n      disabled = false,\n      multiLine = false,\n      className,\n      rightElement,\n      showCounter = false,\n      value,\n      maxLength,\n      size = \"large\",\n      ...inputProps\n    },\n    ref,\n  ) => {\n    const hasError = !!errorText;\n    const inputRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n\n    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement | HTMLTextAreaElement);\n\n    const handleContainerClick = React.useCallback(() => {\n      inputRef.current?.focus();\n    }, []);\n\n    const stringValue = typeof value === \"string\" ? value : \"\";\n    const currentLength = stringValue.length;\n\n    const inputPropsForInput = inputProps as React.ComponentPropsWithoutRef<\"input\">;\n    const inputPropsForTextarea = inputProps as React.ComponentPropsWithoutRef<\"textarea\">;\n\n    // 사이즈별 폰트 크기\n    const inputFontSize = size === \"large\" ? \"text-title-20-regular\" : \"text-body-16-regular\";\n    const subtitleFontSize = size === \"large\" ? \"text-title-18-bold\" : \"text-title-14-bold\";\n    const assistiveFontSize = size === \"large\" ? \"text-body-16-regular\" : \"text-caption-12-medium\";\n\n    return (\n      <div className={cn(\"flex flex-col gap-2\", className)}>\n        {subtitle && (\n          <span className={cn(subtitleFontSize, \"text-text-base-neutral-5\")}>\n            {subtitle}\n            {isRequired && <span className=\"text-text-prominent-accent-1\">*</span>}\n          </span>\n        )}\n\n        <div\n          onClick={disabled ? undefined : handleContainerClick}\n          className={cn(\n            \"group overflow-hidden\",\n            textFieldNormalContainerVariants({ size, disabled, hasError }),\n            !disabled && !hasError && \"focus-within:border-border-base-neutral-4\",\n            multiLine && \"h-[120px] items-start\",\n          )}\n        >\n          {multiLine ? (\n            <textarea\n              {...inputPropsForTextarea}\n              onChange={onChange}\n              ref={inputRef as React.Ref<HTMLTextAreaElement>}\n              value={value}\n              maxLength={maxLength}\n              disabled={disabled}\n              className={cn(\n                \"text-text-base-neutral-5 placeholder:text-text-base-neutral-2 h-full min-h-[24px] min-w-0 flex-1 border-none bg-transparent py-0 outline-none\",\n                inputFontSize,\n                \"resize-none overflow-y-auto\",\n              )}\n            />\n          ) : (\n            <input\n              {...inputPropsForInput}\n              onChange={onChange}\n              ref={inputRef as React.Ref<HTMLInputElement>}\n              value={value}\n              maxLength={maxLength}\n              disabled={disabled}\n              className={cn(\n                \"text-text-base-neutral-5 placeholder:text-text-base-neutral-2 min-h-[24px] min-w-0 flex-1 border-none bg-transparent py-0 outline-none\",\n                inputFontSize,\n                \"overflow-hidden text-ellipsis whitespace-nowrap\",\n              )}\n            />\n          )}\n\n          {rightElement && <div className=\"shrink-0\">{rightElement}</div>}\n\n          <button\n            type=\"button\"\n            onClick={() =>\n              onChange &&\n              onChange({ target: { value: \"\" } } as React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>)\n            }\n            tabIndex={-1}\n            disabled={disabled}\n            className={cn(\"hidden shrink-0\", {\n              flex: hasError,\n              \"group-focus-within:flex\": !disabled && currentLength > 0,\n            })}\n          >\n            <CancelFilledIcon className=\"text-icon-base-neutral-3 h-6 w-6 shrink-0 cursor-pointer\" />\n          </button>\n        </div>\n\n        {(assistiveText || errorText || (maxLength && showCounter)) && (\n          <div className=\"flex items-center justify-between gap-2\">\n            {(assistiveText || errorText) && (\n              <span className={cn(assistiveFontSize, textFieldAssistiveAreaVariants({ size, hasError }))}>\n                {errorText || assistiveText}\n              </span>\n            )}\n            {maxLength && showCounter && (\n              <span className={cn(\"ml-auto\", assistiveFontSize, textFieldAssistiveAreaVariants({ size, hasError }))}>\n                {currentLength}/{maxLength}\n              </span>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\nTextFieldNormal.displayName = \"TextFieldNormal\";\n\n// TextField With Button 컴포넌트\ninterface TextFieldWithButtonProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, \"size\"> {\n  subtitle?: string;\n  isRequired?: boolean;\n  assistiveText?: string | React.ReactNode;\n  errorText?: string;\n  disabled?: boolean;\n  multiLine?: boolean;\n  className?: string;\n  showCounter?: boolean;\n  size?: \"large\" | \"small\";\n  fieldRightElement?: React.ReactNode;\n  buttonText: string;\n  onButtonClick: () => void;\n  buttonDisabled?: boolean;\n}\n\nconst TextFieldWithButton = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, TextFieldWithButtonProps>(\n  (\n    {\n      onChange,\n      subtitle,\n      isRequired = false,\n      assistiveText,\n      errorText,\n      disabled = false,\n      multiLine = false,\n      className,\n      showCounter = false,\n      value,\n      maxLength,\n      size = \"large\",\n      fieldRightElement,\n      buttonText,\n      onButtonClick,\n      buttonDisabled = false,\n      ...inputProps\n    },\n    ref,\n  ) => {\n    const hasError = !!errorText;\n    const inputRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n\n    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement | HTMLTextAreaElement);\n\n    const handleContainerClick = React.useCallback(() => {\n      inputRef.current?.focus();\n    }, []);\n\n    const stringValue = typeof value === \"string\" ? value : \"\";\n    const currentLength = stringValue.length;\n\n    const inputPropsForInput = inputProps as React.ComponentPropsWithoutRef<\"input\">;\n    const inputPropsForTextarea = inputProps as React.ComponentPropsWithoutRef<\"textarea\">;\n\n    // 사이즈별 폰트 크기\n    const inputFontSize = size === \"large\" ? \"text-title-20-regular\" : \"text-body-16-regular\";\n    const subtitleFontSize = size === \"large\" ? \"text-title-18-bold\" : \"text-title-14-bold\";\n    const assistiveFontSize = size === \"large\" ? \"text-body-16-regular\" : \"text-caption-12-medium\";\n\n    return (\n      <div className={cn(\"flex flex-col gap-2\", className)}>\n        {subtitle && (\n          <span className={cn(subtitleFontSize, \"text-text-base-neutral-5\")}>\n            {subtitle}\n            {isRequired && <span className=\"text-text-prominent-accent-1\">*</span>}\n          </span>\n        )}\n\n        <div className=\"flex items-center gap-2\">\n          <div\n            onClick={disabled ? undefined : handleContainerClick}\n            className={cn(\n              \"group flex-1 overflow-hidden\",\n              textFieldNormalContainerVariants({ size, disabled, hasError }),\n              !disabled && !hasError && \"focus-within:border-border-base-neutral-4\",\n              multiLine && \"h-[120px] items-start\",\n            )}\n          >\n            {multiLine ? (\n              <textarea\n                {...inputPropsForTextarea}\n                onChange={onChange}\n                ref={inputRef as React.Ref<HTMLTextAreaElement>}\n                value={value}\n                maxLength={maxLength}\n                disabled={disabled}\n                className={cn(\n                  \"text-text-base-neutral-5 placeholder:text-text-base-neutral-2 min-h-[24px] min-w-0 flex-1 border-none bg-transparent py-0 outline-none\",\n                  inputFontSize,\n                  \"resize-none overflow-y-auto\",\n                )}\n              />\n            ) : (\n              <input\n                {...inputPropsForInput}\n                onChange={onChange}\n                ref={inputRef as React.Ref<HTMLInputElement>}\n                value={value}\n                maxLength={maxLength}\n                disabled={disabled}\n                className={cn(\n                  \"text-text-base-neutral-5 placeholder:text-text-base-neutral-2 min-h-[24px] min-w-0 flex-1 border-none bg-transparent py-0 outline-none\",\n                  inputFontSize,\n                  \"overflow-hidden text-ellipsis whitespace-nowrap\",\n                )}\n              />\n            )}\n\n            {fieldRightElement && <div className=\"shrink-0\">{fieldRightElement}</div>}\n\n            <button\n              type=\"button\"\n              onClick={() =>\n                onChange &&\n                onChange({ target: { value: \"\" } } as React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>)\n              }\n              tabIndex={-1}\n              disabled={disabled}\n              className={cn(\"hidden shrink-0\", {\n                flex: hasError,\n                \"group-focus-within:flex\": !disabled && currentLength > 0,\n              })}\n            >\n              <CancelFilledIcon className=\"text-icon-base-neutral-3 h-6 w-6 shrink-0 cursor-pointer\" />\n            </button>\n          </div>\n\n          <div className=\"shrink-0\">\n            <CTAButton\n              label={buttonText}\n              onClick={onButtonClick}\n              size=\"medium\"\n              hierarchy=\"tertiary\"\n              disabled={buttonDisabled || disabled}\n            />\n          </div>\n        </div>\n\n        {(assistiveText || errorText || (maxLength && showCounter)) && (\n          <div className=\"flex items-center justify-between gap-2\">\n            {(assistiveText || errorText) && (\n              <span className={cn(assistiveFontSize, textFieldAssistiveAreaVariants({ size, hasError }))}>\n                {errorText || assistiveText}\n              </span>\n            )}\n            {maxLength && showCounter && (\n              <span className={cn(\"ml-auto\", assistiveFontSize, textFieldAssistiveAreaVariants({ size, hasError }))}>\n                {currentLength}/{maxLength}\n              </span>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\nTextFieldWithButton.displayName = \"TextFieldWithButton\";\n\nexport { TextFieldNormal, TextFieldWithButton };\n"],"mappings":"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"}

package/dist/v1/text-field.js

@@ -1 +1 @@
-export { TextFieldNormal, TextFieldSelect, TextFieldWithButton } from "../text-field.js";
+export { TextFieldNormal, TextFieldWithButton } from "../text-field.js";

package/docs/migration/v5-to-v6.md

@@ -0,0 +1,59 @@
+# 5.x → 6.0 마이그레이션 가이드
+
+6.0은 `Select`를 petify-admin-console과 같은 드롭다운(Radix Select)으로 바꾸고, 목록 없이 버튼만 있던
+`TextFieldSelect`를 지운 릴리스다. 바뀐 항목 전체는 [CHANGELOG](../../CHANGELOG.md)를 본다.
+
+## 1. `TextFieldSelect` → `Select`
+
+`TextFieldSelect`는 값과 셰브런을 보이는 버튼이었고, 목록은 소비 레포가 `onPress`로 직접 띄웠다. 6.0에서는
+`Select`가 목록까지 그린다.
+
+```tsx
+// 5.x
+<TextFieldSelect
+  label="품종"
+  placeholder="품종을 선택해 주세요"
+  value={breed}
+  isRequired
+  onPress={() => openBreedSheet()}
+/>
+
+// 6.0
+<Select
+  label="품종"
+  placeholder="품종을 선택해 주세요"
+  options={BREEDS}
+  value={breed}
+  onChange={setBreed}
+  required
+/>
+```
+
+| 5.x `TextFieldSelect`                                                                 | 6.0 `Select`                                             |
+| ------------------------------------------------------------------------------------- | -------------------------------------------------------- |
+| `isRequired`                                                                          | `required`                                               |
+| `onPress` + 직접 띄운 목록                                                            | `options` + `onChange(value)`                            |
+| `value`(보이는 글자)                                                                  | `value`(고른 옵션의 값), 표시 이름은 `options`의 `label` |
+| `errorText`, `assistiveText`, `size`, `disabled`, `className`, `placeholder`, `label` | 같음                                                     |
+
+옵션이 많아 검색이 필요하면 `Combobox`를 쓴다. 바텀시트 같은 자체 선택 화면을 계속 써야 하면 그 레포에
+버튼을 두고 `@petnow/ui`의 `TextFieldSelect`에 기대지 않는다.
+
+## 2. `Select`의 ref와 속성
+
+- `ref`는 `<select>`가 아니라 트리거 `<button>`(`HTMLButtonElement`)을 가리킨다. `ref.current.value`로 값을
+  읽던 코드는 `value`/`onChange`를 쓴다.
+- 나머지 속성은 `<button>` 속성으로 넘어간다. `name`, `form`, `required`는 그대로 동작한다. 폼 안에서는 Radix가
+  숨은 `<select>`를 그려 `FormData`와 브라우저 검증에 값이 들어간다.
+- 옵션 값으로 `""`를 쓸 수 없다. `""`는 고르지 않은 상태이고 `placeholder`를 보이며, 값이 `""`인 옵션은
+  그리지 않는다.
+- 한 번 고른 뒤 사용자가 "고르지 않음"으로 되돌릴 수 없다. 네이티브 `<select>`는 placeholder 옵션을 다시 고를
+  수 있었다. 되돌려야 하는 폼은 코드에서 `value`를 `""`로 바꾼다.
+- 폼 `reset`이면 화면 값과 숨은 `<select>`가 `defaultValue`(없으면 고르지 않음)로 돌아간다. 제어 컴포넌트는
+  `onChange`로 그 값을 받는다.
+- 모바일 브라우저에서도 시스템 피커 대신 같은 패널이 열린다.
+
+## 3. 확인
+
+- 목록이 트리거 아래(공간이 없으면 위)에 열리고, 고른 옵션 앞에 체크가 보이는지.
+- 폼을 제출하는 화면이면 `FormData`나 서버로 넘어가는 값이 그대로인지.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@petnow/ui",
-  "version": "5.4.0",
+  "version": "6.0.0",
   "type": "module",
   "packageManager": "pnpm@11.1.3",
   "scripts": {

package/dist/fieldStyles-DyZu__hI.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"fieldStyles-DyZu__hI.js","names":[],"sources":["../src/components/ui/fieldStyles.ts"],"sourcesContent":["import { cva } from \"class-variance-authority\";\n\n// TextField, Select, Combobox가 함께 쓰는 입력 칸 스타일\n// 입력 칸과 목록 팝업이 같은 모서리를 쓴다. 소비 레포의 --radius-* 설정과 무관하게 4px로 고정한다.\nexport const FIELD_RADIUS = \"rounded-[4px]\";\n\nexport const fieldContainerVariants = cva(\n  `flex items-center ${FIELD_RADIUS} bg-surface-base-neutral-2 border transition-colors duration-200`,\n  {\n    variants: {\n      size: {\n        large: \"gap-2 p-[15px] min-h-[56px]\",\n        small: \"gap-3 p-[11px] min-h-[48px]\",\n      },\n      hasError: {\n        true: \"border-border-prominent-error\",\n        false: \"border-transparent\",\n      },\n      disabled: {\n        true: \"opacity-50\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      size: \"large\",\n      disabled: false,\n      hasError: false,\n    },\n  },\n);\n\nexport const fieldMessageVariants = cva(\"\", {\n  variants: {\n    size: {\n      large: \"text-body-16-regular\",\n      small: \"text-caption-12-medium\",\n    },\n    hasError: {\n      true: \"text-text-prominent-error\",\n      false: \"text-text-base-neutral-2\",\n    },\n  },\n  defaultVariants: {\n    size: \"large\",\n    hasError: false,\n  },\n});\n\nexport type FieldSize = \"large\" | \"small\";\n\nexport const fieldLabelFontSize = (size: FieldSize) => (size === \"large\" ? \"text-title-18-bold\" : \"text-title-14-bold\");\nexport const fieldValueFontSize = (size: FieldSize) =>\n  size === \"large\" ? \"text-title-20-regular\" : \"text-body-16-regular\";\n\n// 소비 레포가 넘긴 aria-describedby와 필드 메시지 id를 합친다.\nexport const joinIds = (...ids: (string | false | undefined)[]) => ids.filter(Boolean).join(\" \") || undefined;\n"],"mappings":";;AAIA,IAAa,IAAe,iBAEf,IAAyB,EACpC,qBAAqB,EAAa,mEAClC;CACE,UAAU;EACR,MAAM;GACJ,OAAO;GACP,OAAO;EACT;EACA,UAAU;GACR,MAAM;GACN,OAAO;EACT;EACA,UAAU;GACR,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EACf,MAAM;EACN,UAAU;EACV,UAAU;CACZ;AACF,CACF,GAEa,IAAuB,EAAI,IAAI;CAC1C,UAAU;EACR,MAAM;GACJ,OAAO;GACP,OAAO;EACT;EACA,UAAU;GACR,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EACf,MAAM;EACN,UAAU;CACZ;AACF,CAAC,GAIY,KAAsB,MAAqB,MAAS,UAAU,uBAAuB,sBACrF,KAAsB,MACjC,MAAS,UAAU,0BAA0B,wBAGlC,KAAW,GAAG,MAAwC,EAAI,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA"}

package/dist/mergeRefs-BHwdBwNQ.js

@@ -1,27 +0,0 @@
-import { t as e } from "./TailwindUtil-DiNvXuNl.js";
-import { i as t, r as n } from "./fieldStyles-DyZu__hI.js";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-//#region src/components/ui/field.tsx
-var a = ({ id: t, htmlFor: a, size: o, required: s, children: c }) => /* @__PURE__ */ i("label", {
-	id: t,
-	htmlFor: a,
-	className: e(n(o), "text-text-base-neutral-5"),
-	children: [c, s && /* @__PURE__ */ r("span", {
-		className: "text-text-prominent-accent-1",
-		"aria-hidden": "true",
-		children: "*"
-	})]
-}), o = ({ id: e, size: n, errorText: i, assistiveText: a }) => !i && !a ? null : /* @__PURE__ */ r("span", {
-	id: e,
-	className: t({
-		size: n,
-		hasError: !!i
-	}),
-	children: i || a
-}), s = (...e) => (t) => {
-	for (let n of e) typeof n == "function" ? n(t) : n && (n.current = t);
-};
-//#endregion
-export { a as n, o as r, s as t };
-
-//# sourceMappingURL=mergeRefs-BHwdBwNQ.js.map

package/dist/mergeRefs-BHwdBwNQ.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"mergeRefs-BHwdBwNQ.js","names":[],"sources":["../src/components/ui/field.tsx","../src/utils/mergeRefs.ts"],"sourcesContent":["import { fieldLabelFontSize, fieldMessageVariants, type FieldSize } from \"./fieldStyles\";\n\nimport type { ReactNode } from \"react\";\n\nimport { cn } from \"@/utils/TailwindUtil\";\n\nexport const FieldLabel = ({\n  id,\n  htmlFor,\n  size,\n  required,\n  children,\n}: {\n  id?: string;\n  htmlFor: string;\n  size: FieldSize;\n  required?: boolean;\n  children: ReactNode;\n}) => (\n  <label id={id} htmlFor={htmlFor} className={cn(fieldLabelFontSize(size), \"text-text-base-neutral-5\")}>\n    {children}\n    {required && (\n      <span className=\"text-text-prominent-accent-1\" aria-hidden=\"true\">\n        *\n      </span>\n    )}\n  </label>\n);\n\nexport const FieldMessage = ({\n  id,\n  size,\n  errorText,\n  assistiveText,\n}: {\n  id: string;\n  size: FieldSize;\n  errorText?: string;\n  assistiveText?: ReactNode;\n}) => {\n  if (!errorText && !assistiveText) return null;\n  return (\n    <span id={id} className={fieldMessageVariants({ size, hasError: Boolean(errorText) })}>\n      {errorText || assistiveText}\n    </span>\n  );\n};\n","import type { Ref, RefCallback } from \"react\";\n\n// 내부 ref와 소비 레포가 넘긴 ref(React 19 ref prop)를 함께 연결한다.\nexport const mergeRefs =\n  <T>(...refs: (Ref<T> | undefined)[]): RefCallback<T> =>\n  (node) => {\n    for (const ref of refs) {\n      if (typeof ref === \"function\") ref(node);\n      else if (ref) ref.current = node;\n    }\n  };\n"],"mappings":";;;;AAMA,IAAa,KAAc,EACzB,OACA,YACA,SACA,aACA,kBAQA,kBAAC,SAAD;CAAW;CAAa;CAAS,WAAW,EAAG,EAAmB,CAAI,GAAG,0BAA0B;WAAnG,CACG,GACA,KACC,kBAAC,QAAD;EAAM,WAAU;EAA+B,eAAY;YAAO;CAE5D,CAAA,CAEH;IAGI,KAAgB,EAC3B,OACA,SACA,cACA,uBAOI,CAAC,KAAa,CAAC,IAAsB,OAEvC,kBAAC,QAAD;CAAU;CAAI,WAAW,EAAqB;EAAE;EAAM,UAAU,EAAQ;CAAW,CAAC;WACjF,KAAa;AACV,CAAA,GCzCG,KACP,GAAG,OACN,MAAS;CACR,KAAK,IAAM,KAAO,GAChB,AAAI,OAAO,KAAQ,aAAY,EAAI,CAAI,IAC9B,MAAK,EAAI,UAAU;AAEhC"}