@petnow/ui 4.1.4 → 4.1.6

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

@@ -1 +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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"}
+{"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.1.4",
+  "version": "4.1.6",
   "type": "module",
   "packageManager": "pnpm@11.1.3",
   "engines": {
@@ -24,16 +24,16 @@
     "@types/react-swipeable-views": "^0.13.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "date-fns": "^4.1.0",
+    "date-fns": "^4.4.0",
     "keen-slider": "^6.8.6",
-    "lucide-react": "^0.577.0",
+    "lucide-react": "^1.17.0",
     "radix-ui": "^1.4.3",
     "react-datepicker": "^8.3.0",
-    "react-daum-postcode": "^3.2.0",
-    "react-icons": "^5.5.0",
+    "react-daum-postcode": "^4.0.0",
+    "react-icons": "^5.6.0",
     "react-swipeable-views": "^0.14.1",
-    "shadcn": "^4.1.0",
-    "tailwind-merge": "^3.3.1",
+    "shadcn": "^4.11.0",
+    "tailwind-merge": "^3.6.0",
     "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
@@ -42,38 +42,38 @@
     "@storybook/addon-links": "10.3.1",
     "@storybook/addon-onboarding": "10.3.1",
     "@storybook/react": "10.3.1",
-    "@storybook/react-vite": "10.3.1",
+    "@storybook/react-vite": "10.4.1",
     "@tailwindcss/postcss": "^4.2.2",
     "@testing-library/jest-dom": "^6.9.0",
-    "@testing-library/react": "^16.1.0",
+    "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^30.0.0",
     "@types/node": "^24.6.2",
-    "@types/react": "^19.0.0",
+    "@types/react": "^19.2.17",
     "@types/react-dom": "^19.0.0",
-    "@typescript-eslint/eslint-plugin": "^8.57.1",
-    "@typescript-eslint/parser": "^8.57.1",
+    "@typescript-eslint/eslint-plugin": "^8.59.4",
+    "@typescript-eslint/parser": "^8.59.4",
     "@vitejs/plugin-react": "^6.0.1",
-    "eslint": "^9.39.4",
+    "eslint": "^10.5.0",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.5.2",
-    "eslint-plugin-storybook": "10.3.1",
+    "eslint-plugin-storybook": "10.4.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^30.3.0",
-    "jest-environment-jsdom": "^30.2.0",
+    "jest-environment-jsdom": "^30.4.1",
     "jest-transformer-svg": "^2.1.0",
-    "postcss": "^8.5.6",
+    "postcss": "^8.5.10",
     "prettier": "^3.6.2",
     "prettier-plugin-tailwindcss": "^0.6.14",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "storybook": "10.3.1",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "storybook": "10.4.1",
     "tailwindcss": "^4.1.14",
     "ts-jest": "^29.4.6",
     "typescript": "^5.7.2",
-    "vite": "^8.0.1",
-    "vite-plugin-dts": "^4.5.4"
+    "vite": "^8.0.16",
+    "vite-plugin-dts": "^5.0.1"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/petnow-design-system-v1.css

@@ -453,7 +453,13 @@
   --color-yellow-90: var(--yellow-90);
   --color-yellow-95: var(--yellow-95);
   --color-yellow-100: var(--yellow-100);
+}
 
+/* Semantic tokens must be `inline`: utilities then reference the underlying
+   --surface/--text/--icon/... vars directly, so the `.petify` theme override
+   propagates. With a plain `@theme`, --color-* is resolved once at :root
+   (petnow/orange) and stays frozen regardless of `.petify`. */
+@theme inline {
   /* ===== SEMANTIC COLORS (from CSS vars) ===== */
   --color-background-base-neutral-1: var(--background-base-neutral-1);
   --color-background-base-neutral-2: var(--background-base-neutral-2);