@petnow/ui 4.0.2 → 4.1.0

package/dist/v1/text-field.js

@@ -0,0 +1,286 @@
+"use client";
+import { t as e } from "../TailwindUtil-aZk2bbTo.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 { jsx as i, jsxs as a } from "react/jsx-runtime";
+import * as o from "react";
+import { cva as s } from "class-variance-authority";
+//#region src/components/v1/text-field/TextField.tsx
+var c = s("flex items-center 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",
+		disabled: !1,
+		hasError: !1
+	}
+}), l = s("", {
+	variants: {
+		size: {
+			large: "text-body-16-regular",
+			small: "text-caption-12-medium"
+		},
+		hasError: {
+			true: "text-text-prominent-error",
+			false: "text-text-base-neutral-2"
+		}
+	},
+	defaultVariants: {
+		size: "large",
+		hasError: !1
+	}
+}), u = o.forwardRef(({ onChange: t, subtitle: r, isRequired: s = !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 = o.useRef(null);
+	o.useImperativeHandle(x, () => C.current);
+	let w = o.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__ */ a("div", {
+		className: e("flex flex-col gap-2", m),
+		children: [
+			r && /* @__PURE__ */ a("span", {
+				className: e(k, "text-text-base-neutral-5"),
+				children: [r, s && /* @__PURE__ */ i("span", {
+					className: "text-text-prominent-accent-1",
+					children: "*"
+				})]
+			}),
+			/* @__PURE__ */ a("div", {
+				onClick: f ? void 0 : w,
+				className: e("group overflow-hidden", c({
+					size: y,
+					disabled: f,
+					hasError: S
+				}), !f && !S && "focus-within:border-border-base-neutral-4", p && "h-[120px] items-start"),
+				children: [
+					p ? /* @__PURE__ */ i("textarea", {
+						...D,
+						onChange: t,
+						ref: C,
+						value: _,
+						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__ */ i("input", {
+						...E,
+						onChange: t,
+						ref: C,
+						value: _,
+						maxLength: v,
+						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__ */ i("div", {
+						className: "shrink-0",
+						children: h
+					}),
+					/* @__PURE__ */ i("button", {
+						type: "button",
+						onClick: () => t && t({ target: { value: "" } }),
+						tabIndex: -1,
+						disabled: f,
+						className: e("hidden shrink-0", {
+							flex: S,
+							"group-focus-within:flex": !f && T > 0
+						}),
+						children: /* @__PURE__ */ i(n, { className: "text-icon-base-neutral-3 h-6 w-6 shrink-0 cursor-pointer" })
+					})
+				]
+			}),
+			(u || d || v && g) && /* @__PURE__ */ a("div", {
+				className: "flex items-center justify-between gap-2",
+				children: [(u || d) && /* @__PURE__ */ i("span", {
+					className: e(A, l({
+						size: y,
+						hasError: S
+					})),
+					children: d || u
+				}), v && g && /* @__PURE__ */ a("span", {
+					className: e("ml-auto", A, l({
+						size: y,
+						hasError: S
+					})),
+					children: [
+						T,
+						"/",
+						v
+					]
+				})]
+			})
+		]
+	});
+});
+u.displayName = "TextFieldNormal";
+var d = s("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: o, isRequired: s = !1, disabled: c = !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__ */ a("div", {
+		className: e("flex w-full flex-col gap-2", m),
+		children: [
+			t && /* @__PURE__ */ a("div", {
+				className: "flex items-start",
+				children: [/* @__PURE__ */ i("span", {
+					className: e(_, "text-text-base-neutral-5"),
+					children: t
+				}), s && /* @__PURE__ */ i("span", {
+					className: e(_, "text-text-prominent-accent-1"),
+					children: "*"
+				})]
+			}),
+			/* @__PURE__ */ a("button", {
+				type: "button",
+				className: d({
+					size: h,
+					hasError: g,
+					disabled: c
+				}),
+				onClick: p,
+				disabled: c,
+				children: [/* @__PURE__ */ i("span", {
+					className: e(v, "flex-1", o ? "text-text-base-neutral-5" : "text-text-base-neutral-2"),
+					style: {
+						textAlign: "left",
+						overflow: "hidden",
+						textOverflow: "ellipsis"
+					},
+					children: o || n
+				}), /* @__PURE__ */ i(r, { className: "text-icon-base-neutral-3 rotate-270" })]
+			}),
+			(u || f) && /* @__PURE__ */ i("div", {
+				className: "flex items-start gap-2",
+				children: /* @__PURE__ */ i("span", {
+					className: l({
+						size: h,
+						hasError: g
+					}),
+					children: f || u
+				})
+			})
+		]
+	});
+}, p = o.forwardRef(({ onChange: r, subtitle: s, 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 = o.useRef(null);
+	o.useImperativeHandle(T, () => D.current);
+	let O = o.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__ */ a("div", {
+		className: e("flex flex-col gap-2", h),
+		children: [
+			s && /* @__PURE__ */ a("span", {
+				className: e(N, "text-text-base-neutral-5"),
+				children: [s, u && /* @__PURE__ */ i("span", {
+					className: "text-text-prominent-accent-1",
+					children: "*"
+				})]
+			}),
+			/* @__PURE__ */ a("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ a("div", {
+					onClick: p ? void 0 : O,
+					className: e("group flex-1 overflow-hidden", c({
+						size: y,
+						disabled: p,
+						hasError: E
+					}), !p && !E && "focus-within:border-border-base-neutral-4", m && "h-[120px] items-start"),
+					children: [
+						m ? /* @__PURE__ */ i("textarea", {
+							...j,
+							onChange: r,
+							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__ */ i("input", {
+							...A,
+							onChange: r,
+							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__ */ i("div", {
+							className: "shrink-0",
+							children: b
+						}),
+						/* @__PURE__ */ i("button", {
+							type: "button",
+							onClick: () => r && r({ target: { value: "" } }),
+							tabIndex: -1,
+							disabled: p,
+							className: e("hidden shrink-0", {
+								flex: E,
+								"group-focus-within:flex": !p && k > 0
+							}),
+							children: /* @__PURE__ */ i(n, { className: "text-icon-base-neutral-3 h-6 w-6 shrink-0 cursor-pointer" })
+						})
+					]
+				}), /* @__PURE__ */ i("div", {
+					className: "shrink-0",
+					children: /* @__PURE__ */ i(t, {
+						label: x,
+						onClick: S,
+						size: "medium",
+						hierarchy: "tertiary",
+						disabled: C || p
+					})
+				})]
+			}),
+			(d || f || v && g) && /* @__PURE__ */ a("div", {
+				className: "flex items-center justify-between gap-2",
+				children: [(d || f) && /* @__PURE__ */ i("span", {
+					className: e(P, l({
+						size: y,
+						hasError: E
+					})),
+					children: f || d
+				}), v && g && /* @__PURE__ */ a("span", {
+					className: e("ml-auto", P, l({
+						size: y,
+						hasError: E
+					})),
+					children: [
+						k,
+						"/",
+						v
+					]
+				})]
+			})
+		]
+	});
+});
+p.displayName = "TextFieldWithButton";
+//#endregion
+export { u as TextFieldNormal, f as TextFieldSelect, p as TextFieldWithButton };
+
+//# sourceMappingURL=text-field.js.map

package/dist/v1/text-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field.js","names":[],"sources":["../../src/components/v1/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 { cn } from \"@/utils/TailwindUtil\";\n\n// TextField Normal 컴포넌트 스타일 정의\nconst textFieldNormalContainerVariants = cva(\n  \"flex items-center 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      disabled: false,\n      hasError: false,\n    },\n  },\n);\n\nconst textFieldAssistiveAreaVariants = 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\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":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@petnow/ui",
-  "version": "4.0.2",
+  "version": "4.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -27,6 +27,7 @@
     "react-daum-postcode": "^3.2.0",
     "react-icons": "^5.5.0",
     "react-swipeable-views": "^0.14.1",
+    "shadcn": "^4.1.0",
     "tailwind-merge": "^3.3.1",
     "tw-animate-css": "^1.4.0"
   },
@@ -62,7 +63,6 @@
     "prettier-plugin-tailwindcss": "^0.6.14",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "shadcn": "^4.0.8",
     "storybook": "10.3.1",
     "tailwindcss": "^4.1.14",
     "ts-jest": "^29.4.6",
@@ -79,8 +79,99 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.es.js",
-      "require": "./dist/index.umd.js"
+      "import": "./dist/index.es.js"
+    },
+    "./v0/radio": {
+      "types": "./dist/src/components/v0/radio/Radio.d.ts",
+      "import": "./dist/v0/radio.js"
+    },
+    "./v0/tabs": {
+      "types": "./dist/src/components/v0/tabs/Tabs.d.ts",
+      "import": "./dist/v0/tabs.js"
+    },
+    "./v0/checkbox": {
+      "types": "./dist/src/components/v0/checkbox/Checkbox.d.ts",
+      "import": "./dist/v0/checkbox.js"
+    },
+    "./v0/toggle": {
+      "types": "./dist/src/components/v0/toggle/Toggle.d.ts",
+      "import": "./dist/v0/toggle.js"
+    },
+    "./v1/badge": {
+      "types": "./dist/src/components/v1/badge/Badge.d.ts",
+      "import": "./dist/v1/badge.js"
+    },
+    "./v1/chip": {
+      "types": "./dist/src/components/v1/chip/Chip.d.ts",
+      "import": "./dist/v1/chip.js"
+    },
+    "./v1/cta-button": {
+      "types": "./dist/src/components/v1/cta-button/CTAButton.d.ts",
+      "import": "./dist/v1/cta-button.js"
+    },
+    "./v1/popup": {
+      "types": "./dist/src/components/v1/popup/Popup.d.ts",
+      "import": "./dist/v1/popup.js"
+    },
+    "./v1/text-field": {
+      "types": "./dist/src/components/v1/text-field/TextField.d.ts",
+      "import": "./dist/v1/text-field.js"
+    },
+    "./v1/icons/action/cancel-filled": {
+      "types": "./dist/src/components/v1/icons/action/CancelFilledIcon.d.ts",
+      "import": "./dist/v1/icons/action/cancel-filled.js"
+    },
+    "./v1/icons/action/cancel": {
+      "types": "./dist/src/components/v1/icons/action/CancelIcon.d.ts",
+      "import": "./dist/v1/icons/action/cancel.js"
+    },
+    "./v1/icons/action/chevron-down": {
+      "types": "./dist/src/components/v1/icons/action/ChevronDownIcon.d.ts",
+      "import": "./dist/v1/icons/action/chevron-down.js"
+    },
+    "./v1/icons/action/chevron-left": {
+      "types": "./dist/src/components/v1/icons/action/ChevronLeftIcon.d.ts",
+      "import": "./dist/v1/icons/action/chevron-left.js"
+    },
+    "./v1/icons/action/chevron-right": {
+      "types": "./dist/src/components/v1/icons/action/ChevronRightIcon.d.ts",
+      "import": "./dist/v1/icons/action/chevron-right.js"
+    },
+    "./v1/icons/action/chevron-up": {
+      "types": "./dist/src/components/v1/icons/action/ChevronUpIcon.d.ts",
+      "import": "./dist/v1/icons/action/chevron-up.js"
+    },
+    "./v1/icons/action/filter": {
+      "types": "./dist/src/components/v1/icons/action/FilterIcon.d.ts",
+      "import": "./dist/v1/icons/action/filter.js"
+    },
+    "./v1/icons/action/retry": {
+      "types": "./dist/src/components/v1/icons/action/RetryIcon.d.ts",
+      "import": "./dist/v1/icons/action/retry.js"
+    },
+    "./v1/icons/action/sorting": {
+      "types": "./dist/src/components/v1/icons/action/SortingIcon.d.ts",
+      "import": "./dist/v1/icons/action/sorting.js"
+    },
+    "./v1/icons/static/close": {
+      "types": "./dist/src/components/v1/icons/static/CloseIcon.d.ts",
+      "import": "./dist/v1/icons/static/close.js"
+    },
+    "./v1/icons/static/delete": {
+      "types": "./dist/src/components/v1/icons/static/DeleteIcon.d.ts",
+      "import": "./dist/v1/icons/static/delete.js"
+    },
+    "./v1/icons/static/recent": {
+      "types": "./dist/src/components/v1/icons/static/RecentIcon.d.ts",
+      "import": "./dist/v1/icons/static/recent.js"
+    },
+    "./v1/icons/static/report": {
+      "types": "./dist/src/components/v1/icons/static/ReportIcon.d.ts",
+      "import": "./dist/v1/icons/static/report.js"
+    },
+    "./v1/icons/static/shield-done": {
+      "types": "./dist/src/components/v1/icons/static/ShieldDoneIcon.d.ts",
+      "import": "./dist/v1/icons/static/shield-done.js"
     },
     "./package.json": "./package.json",
     "./dist/*": "./dist/*",