@hua-labs/ui 1.1.0-alpha.6 → 2.0.0-alpha.10

package/dist/form.d.mts

@@ -1,46 +1,6 @@
-import React__default from 'react';
-
-/**
- * Input 컴포넌트의 props / Input component props
- * HTML input 요소의 모든 표준 속성을 상속받습니다.
- * Inherits all standard attributes of HTML input element.
- * @typedef {Object} InputProps
- * @extends {React.InputHTMLAttributes<HTMLInputElement>}
- */
-interface InputProps extends React__default.InputHTMLAttributes<HTMLInputElement> {
-}
-/**
- * Input 컴포넌트 / Input component
- *
- * 표준 HTML input 요소를 래핑한 스타일링된 입력 필드 컴포넌트입니다.
- * 접근성 속성(aria-invalid)을 자동으로 처리합니다.
- *
- * Styled input field component wrapping standard HTML input element.
- * Automatically handles accessibility attributes (aria-invalid).
- *
- * @component
- * @example
- * // 기본 사용 / Basic usage
- * <Input type="text" placeholder="이름을 입력하세요" />
- *
- * @example
- * // 에러 상태 / Error state
- * <Input
- *   type="email"
- *   placeholder="이메일"
- *   aria-invalid={true}
- * />
- *
- * @example
- * // ref 사용 / Using ref
- * const inputRef = useRef<HTMLInputElement>(null)
- * <Input ref={inputRef} type="text" />
- *
- * @param {InputProps} props - Input 컴포넌트의 props / Input component props
- * @param {React.Ref<HTMLInputElement>} ref - input 요소 ref / input element ref
- * @returns {JSX.Element} Input 컴포넌트 / Input component
- */
-declare const Input: React__default.ForwardRefExoticComponent<InputProps & React__default.RefAttributes<HTMLInputElement>>;
+import React from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+export { I as Input, b as InputProps, L as Label, a as LabelProps, N as NumberInput, c as NumberInputProps, S as Switch, d as SwitchProps } from './Switch-BB6GZnqn.mjs';
 
 /**
  * Form 컴포넌트의 props / Form component props
@@ -49,8 +9,8 @@ declare const Input: React__default.ForwardRefExoticComponent<InputProps & React
  * @property {"default" | "glass"} [variant="default"] - Form 스타일 변형 / Form style variant
  * @extends {React.FormHTMLAttributes<HTMLFormElement>}
  */
-interface FormProps extends React__default.FormHTMLAttributes<HTMLFormElement> {
-    onSubmit?: (e: React__default.FormEvent<HTMLFormElement>) => void;
+interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
+    onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
     variant?: "default" | "glass";
 }
 /**
@@ -60,7 +20,7 @@ interface FormProps extends React__default.FormHTMLAttributes<HTMLFormElement> {
  * @property {boolean} [required=false] - 필수 필드 여부 / Required field
  * @extends {React.HTMLAttributes<HTMLDivElement>}
  */
-interface FormFieldProps extends React__default.HTMLAttributes<HTMLDivElement> {
+interface FormFieldProps extends React.HTMLAttributes<HTMLDivElement> {
     error?: string;
     required?: boolean;
 }
@@ -70,7 +30,7 @@ interface FormFieldProps extends React__default.HTMLAttributes<HTMLDivElement> {
  * @property {boolean} [inline=false] - 인라인 레이아웃 여부 / Inline layout
  * @extends {React.HTMLAttributes<HTMLDivElement>}
  */
-interface FormGroupProps extends React__default.HTMLAttributes<HTMLDivElement> {
+interface FormGroupProps extends React.HTMLAttributes<HTMLDivElement> {
     inline?: boolean;
 }
 /**
@@ -107,7 +67,7 @@ interface FormGroupProps extends React__default.HTMLAttributes<HTMLDivElement> {
  * @param {React.Ref<HTMLFormElement>} ref - form 요소 ref / form element ref
  * @returns {JSX.Element} Form 컴포넌트 / Form component
  */
-declare const Form: React__default.ForwardRefExoticComponent<FormProps & React__default.RefAttributes<HTMLFormElement>>;
+declare const Form: React.ForwardRefExoticComponent<FormProps & React.RefAttributes<HTMLFormElement>>;
 /**
  * FormField 컴포넌트 / FormField component
  *
@@ -128,7 +88,7 @@ declare const Form: React__default.ForwardRefExoticComponent<FormProps & React__
  * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
  * @returns {JSX.Element} FormField 컴포넌트 / FormField component
  */
-declare const FormField: React__default.ForwardRefExoticComponent<FormFieldProps & React__default.RefAttributes<HTMLDivElement>>;
+declare const FormField: React.ForwardRefExoticComponent<FormFieldProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * FormGroup 컴포넌트 / FormGroup component
  *
@@ -152,163 +112,167 @@ declare const FormField: React__default.ForwardRefExoticComponent<FormFieldProps
  * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
  * @returns {JSX.Element} FormGroup 컴포넌트 / FormGroup component
  */
-declare const FormGroup: React__default.ForwardRefExoticComponent<FormGroupProps & React__default.RefAttributes<HTMLDivElement>>;
+declare const FormGroup: React.ForwardRefExoticComponent<FormGroupProps & React.RefAttributes<HTMLDivElement>>;
 
 /**
- * Label 컴포넌트의 props / Label component props
- * @typedef {Object} LabelProps
- * @property {boolean} [required=false] - 필수 필드 여부 / Required field indicator
- * @property {boolean} [error=false] - 에러 상태 표시 / Error state
- * @property {boolean} [disabled=false] - 비활성화 상태 / Disabled state
- * @property {"default" | "glass"} [variant="default"] - Label 스타일 변형 / Label style variant
- * @extends {React.LabelHTMLAttributes<HTMLLabelElement>}
+ * FormControl 컴포넌트의 props / FormControl component props
+ * @typedef {Object} FormControlProps
+ * @property {string} [label] - 필드 레이블 / Field label
+ * @property {string} [description] - 필드 설명 / Field description
+ * @property {string} [error] - 에러 메시지 / Error message
+ * @property {boolean} [required=false] - 필수 필드 표시 / Required field indicator
+ * @property {string} [htmlFor] - 레이블의 for 속성 / Label's for attribute
+ * @property {boolean} [showErrorIcon=true] - 에러 아이콘 표시 / Show error icon
+ * @property {boolean} [suppressBrowserValidation=true] - 브라우저 유효성 검사 UI 숨기기 / Hide browser validation UI
+ * @property {React.ReactNode} children - 폼 입력 요소 / Form input element
  */
-interface LabelProps extends React__default.LabelHTMLAttributes<HTMLLabelElement> {
+interface FormControlProps {
+    label?: string;
+    description?: string;
+    error?: string;
     required?: boolean;
-    error?: boolean;
-    disabled?: boolean;
-    variant?: "default" | "glass";
+    htmlFor?: string;
+    showErrorIcon?: boolean;
+    suppressBrowserValidation?: boolean;
+    className?: string;
+    children: React.ReactNode;
 }
 /**
- * Label 컴포넌트 / Label component
+ * FormControl 컴포넌트 / FormControl component
  *
- * 폼 필드의 레이블을 표시하는 컴포넌트입니다.
- * 필수 필드 표시와 에러 상태를 지원합니다.
+ * 폼 입력 요소를 감싸서 레이블, 설명, 에러 메시지를 표시합니다.
+ * 브라우저 기본 유효성 검사 팝업 대신 커스텀 에러 메시지를 사용합니다.
  *
- * Component for displaying form field labels.
- * Supports required field indicator and error state.
+ * Wraps form input elements with label, description, and error messages.
+ * Uses custom error messages instead of browser default validation popups.
  *
  * @component
  * @example
  * // 기본 사용 / Basic usage
- * <Label htmlFor="email">이메일</Label>
- * <Input id="email" />
- *
- * @example
- * // 필수 필드 / Required field
- * <Label required htmlFor="name">이름</Label>
- * <Input id="name" required />
+ * <FormControl label="Email" required error={errors.email}>
+ *   <Input type="email" />
+ * </FormControl>
  *
  * @example
- * // 에러 상태 / Error state
- * <Label error htmlFor="password">비밀번호</Label>
- * <Input id="password" aria-invalid />
- *
- * @param {LabelProps} props - Label 컴포넌트의 props / Label component props
- * @param {React.Ref<HTMLLabelElement>} ref - label 요소 ref / label element ref
- * @returns {JSX.Element} Label 컴포넌트 / Label component
- *
- * @todo 접근성 개선: required일 때 aria-required="true" 추가 필요 / Accessibility improvement: add aria-required="true" when required
- */
-declare const Label: React__default.ForwardRefExoticComponent<LabelProps & React__default.RefAttributes<HTMLLabelElement>>;
-
-/**
- * Checkbox 컴포넌트의 props / Checkbox component props
- * @typedef {Object} CheckboxProps
- * @property {"default" | "outline" | "filled" | "glass"} [variant="default"] - Checkbox 스타일 변형 / Checkbox style variant
- * @property {"sm" | "md" | "lg"} [size="md"] - Checkbox 크기 / Checkbox size
- * @property {boolean} [error=false] - 에러 상태 표시 / Error state
- * @property {boolean} [success=false] - 성공 상태 표시 / Success state
- * @property {string} [label] - 체크박스 레이블 텍스트 / Checkbox label text
- * @property {string} [description] - 체크박스 설명 텍스트 / Checkbox description text
- * @extends {Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>}
+ * // 설명 포함 / With description
+ * <FormControl
+ *   label="Password"
+ *   description="Must be at least 8 characters"
+ *   error={errors.password}
+ * >
+ *   <Input type="password" />
+ * </FormControl>
  */
-interface CheckboxProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'size'> {
-    variant?: "default" | "outline" | "filled" | "glass";
-    size?: "sm" | "md" | "lg";
-    error?: boolean;
-    success?: boolean;
-    label?: string;
-    description?: string;
-}
+declare function FormControl({ label, description, error, required, htmlFor, showErrorIcon, suppressBrowserValidation, className, children, }: FormControlProps): react_jsx_runtime.JSX.Element;
 /**
- * Checkbox 컴포넌트 / Checkbox component
+ * useFormValidation 훅 / useFormValidation hook
  *
- * 체크박스 입력 필드를 제공하는 컴포넌트입니다.
- * ARIA 속성을 자동으로 설정하여 접근성을 지원합니다.
+ * 폼 유효성 검사를 위한 훅입니다.
+ * 브라우저 기본 유효성 검사를 비활성화하고 커스텀 에러 메시지를 사용합니다.
  *
- * Checkbox input field component.
- * Automatically sets ARIA attributes for accessibility support.
- *
- * @component
- * @example
- * // 기본 사용 / Basic usage
- * <Checkbox label="이용약관에 동의합니다" />
+ * Hook for form validation.
+ * Disables browser default validation and uses custom error messages.
  *
  * @example
- * // 에러 상태와 설명 / Error state with description
- * <Checkbox
- *   label="필수 항목"
- *   description="이 항목은 필수입니다"
- *   error
- * />
+ * const { errors, validate, clearError } = useFormValidation();
  *
- * @example
- * // 제어 컴포넌트 / Controlled component
- * const [checked, setChecked] = useState(false)
- * <Checkbox
- *   checked={checked}
- *   onChange={(e) => setChecked(e.target.checked)}
- *   label="동의"
- * />
- *
- * @param {CheckboxProps} props - Checkbox 컴포넌트의 props / Checkbox component props
- * @param {React.Ref<HTMLInputElement>} ref - input 요소 ref / input element ref
- * @returns {JSX.Element} Checkbox 컴포넌트 / Checkbox component
+ * const handleSubmit = (e) => {
+ *   e.preventDefault();
+ *   const isValid = validate({
+ *     email: { value: email, required: true, pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/ },
+ *     password: { value: password, required: true, minLength: 8 },
+ *   });
+ *   if (isValid) { ... }
+ * };
  */
-declare const Checkbox: React__default.ForwardRefExoticComponent<CheckboxProps & React__default.RefAttributes<HTMLInputElement>>;
+/**
+ * Validation preset types for common field formats
+ */
+type ValidationPreset = "email" | "phone" | "url" | "alphanumeric" | "password";
+interface ValidationRule {
+    value: string | number | boolean;
+    type?: ValidationPreset;
+    required?: boolean;
+    minLength?: number;
+    maxLength?: number;
+    min?: number;
+    max?: number;
+    pattern?: RegExp;
+    custom?: (value: string | number | boolean) => string | undefined;
+    messages?: {
+        required?: string;
+        type?: string;
+        minLength?: string;
+        maxLength?: string;
+        min?: string;
+        max?: string;
+        pattern?: string;
+    };
+}
+type ValidationRules = Record<string, ValidationRule>;
+type ValidationErrors = Record<string, string>;
+declare function useFormValidation(initialErrors?: ValidationErrors): {
+    errors: ValidationErrors;
+    validate: (rules: ValidationRules) => boolean;
+    clearError: (field: string) => void;
+    clearAllErrors: () => void;
+    setErrors: React.Dispatch<React.SetStateAction<ValidationErrors>>;
+};
 
 /**
- * Radio 컴포넌트의 props / Radio component props
- * @typedef {Object} RadioProps
- * @property {"default" | "outline" | "filled" | "glass"} [variant="default"] - Radio 스타일 변형 / Radio style variant
- * @property {"sm" | "md" | "lg"} [size="md"] - Radio 크기 / Radio size
+ * Textarea 컴포넌트의 props / Textarea component props
+ * @typedef {Object} TextareaProps
+ * @property {"default" | "outline" | "filled" | "ghost" | "glass"} [variant="default"] - Textarea 스타일 변형 / Textarea style variant
+ * @property {"sm" | "md" | "lg"} [size="md"] - Textarea 크기 / Textarea size
  * @property {boolean} [error=false] - 에러 상태 표시 / Error state
  * @property {boolean} [success=false] - 성공 상태 표시 / Success state
- * @property {string} [label] - 라디오 버튼 레이블 텍스트 / Radio button label text
- * @property {string} [description] - 라디오 버튼 설명 텍스트 / Radio button description text
- * @extends {Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>}
+ * @property {"none" | "vertical" | "horizontal" | "both"} [resize="vertical"] - 크기 조절 방향 / Resize direction
+ * @extends {React.TextareaHTMLAttributes<HTMLTextAreaElement>}
  */
-interface RadioProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'size'> {
-    variant?: "default" | "outline" | "filled" | "glass";
+interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    variant?: "default" | "outline" | "filled" | "ghost" | "glass";
     size?: "sm" | "md" | "lg";
     error?: boolean;
     success?: boolean;
-    label?: string;
-    description?: string;
+    resize?: "none" | "vertical" | "horizontal" | "both";
 }
 /**
- * Radio 컴포넌트 / Radio component
+ * Textarea 컴포넌트 / Textarea component
  *
- * 라디오 버튼 입력 필드를 제공하는 컴포넌트입니다.
- * 같은 name 속성을 가진 여러 Radio는 그룹으로 동작합니다.
- * ARIA 속성을 자동으로 설정하여 접근성을 지원합니다.
+ * 여러 줄 텍스트 입력을 위한 텍스트 영역 컴포넌트입니다.
+ * 다양한 스타일 변형과 크기를 지원하며, 접근성 속성을 포함합니다.
  *
- * Radio button input field component.
- * Multiple Radio components with the same name attribute work as a group.
- * Automatically sets ARIA attributes for accessibility support.
+ * Text area component for multi-line text input.
+ * Supports various style variants and sizes, includes accessibility attributes.
  *
  * @component
  * @example
- * // 기본 사용 (그룹) / Basic usage (group)
- * <Radio name="option" value="1" label="옵션 1" />
- * <Radio name="option" value="2" label="옵션 2" />
- * <Radio name="option" value="3" label="옵션 3" />
+ * // 기본 사용 / Basic usage
+ * <Textarea placeholder="내용을 입력하세요" />
  *
  * @example
  * // 에러 상태 / Error state
- * <Radio
- *   name="gender"
- *   value="male"
- *   label="남성"
+ * <Textarea
  *   error
+ *   placeholder="에러가 발생했습니다"
+ *   aria-label="설명 입력"
  * />
  *
- * @param {RadioProps} props - Radio 컴포넌트의 props / Radio component props
- * @param {React.Ref<HTMLInputElement>} ref - input 요소 ref / input element ref
- * @returns {JSX.Element} Radio 컴포넌트 / Radio component
+ * @example
+ * // 크기 조절 비활성화 / Disable resize
+ * <Textarea
+ *   resize="none"
+ *   rows={5}
+ *   placeholder="고정 크기 텍스트 영역"
+ * />
+ *
+ * @param {TextareaProps} props - Textarea 컴포넌트의 props / Textarea component props
+ * @param {React.Ref<HTMLTextAreaElement>} ref - textarea 요소 ref / textarea element ref
+ * @returns {JSX.Element} Textarea 컴포넌트 / Textarea component
+ *
+ * @todo 접근성 개선: aria-invalid 속성 자동 추가 필요 / Accessibility improvement: auto-add aria-invalid attribute
  */
-declare const Radio: React__default.ForwardRefExoticComponent<RadioProps & React__default.RefAttributes<HTMLInputElement>>;
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 
 /**
  * Select 컴포넌트의 props / Select component props
@@ -321,12 +285,12 @@ declare const Radio: React__default.ForwardRefExoticComponent<RadioProps & React
  * @property {string} [placeholder] - 플레이스홀더 텍스트 / Placeholder text
  * @extends {Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'>}
  */
-interface SelectProps extends Omit<React__default.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
     variant?: "default" | "outline" | "filled" | "ghost" | "glass";
     size?: "sm" | "md" | "lg";
     error?: boolean;
     success?: boolean;
-    leftIcon?: React__default.ReactNode;
+    leftIcon?: React.ReactNode;
     placeholder?: string;
 }
 /**
@@ -336,9 +300,9 @@ interface SelectProps extends Omit<React__default.SelectHTMLAttributes<HTMLSelec
  * @property {React.ReactNode} children - 옵션 표시 텍스트 / Option display text
  * @extends {React.OptionHTMLAttributes<HTMLOptionElement>}
  */
-interface SelectOptionProps extends React__default.OptionHTMLAttributes<HTMLOptionElement> {
+interface SelectOptionProps extends React.OptionHTMLAttributes<HTMLOptionElement> {
     value: string;
-    children: React__default.ReactNode;
+    children: React.ReactNode;
 }
 /**
  * Select 컴포넌트 / Select component
@@ -379,21 +343,21 @@ interface SelectOptionProps extends React__default.OptionHTMLAttributes<HTMLOpti
  * @param {React.Ref<HTMLSelectElement>} ref - select 요소 ref / select element ref
  * @returns {JSX.Element} Select 컴포넌트 / Select component
  */
-declare const Select: React__default.ForwardRefExoticComponent<SelectProps & React__default.RefAttributes<HTMLSelectElement>>;
-declare const SelectOption: React__default.ForwardRefExoticComponent<SelectOptionProps & React__default.RefAttributes<HTMLOptionElement>>;
+declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+declare const SelectOption: React.ForwardRefExoticComponent<SelectOptionProps & React.RefAttributes<HTMLOptionElement>>;
 
 /**
- * Switch 컴포넌트의 props / Switch component props
- * @typedef {Object} SwitchProps
- * @property {"default" | "outline" | "filled" | "glass"} [variant="default"] - Switch 스타일 변형 / Switch style variant
- * @property {"sm" | "md" | "lg"} [size="md"] - Switch 크기 / Switch size
+ * Checkbox 컴포넌트의 props / Checkbox component props
+ * @typedef {Object} CheckboxProps
+ * @property {"default" | "outline" | "filled" | "glass"} [variant="default"] - Checkbox 스타일 변형 / Checkbox style variant
+ * @property {"sm" | "md" | "lg"} [size="md"] - Checkbox 크기 / Checkbox size
  * @property {boolean} [error=false] - 에러 상태 표시 / Error state
  * @property {boolean} [success=false] - 성공 상태 표시 / Success state
- * @property {string} [label] - 스위치 레이블 텍스트 / Switch label text
- * @property {string} [description] - 스위치 설명 텍스트 / Switch description text
+ * @property {string} [label] - 체크박스 레이블 텍스트 / Checkbox label text
+ * @property {string} [description] - 체크박스 설명 텍스트 / Checkbox description text
  * @extends {Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>}
  */
-interface SwitchProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
     variant?: "default" | "outline" | "filled" | "glass";
     size?: "sm" | "md" | "lg";
     error?: boolean;
@@ -402,41 +366,93 @@ interface SwitchProps extends Omit<React__default.InputHTMLAttributes<HTMLInputE
     description?: string;
 }
 /**
- * Switch 컴포넌트 / Switch component
+ * Checkbox 컴포넌트 / Checkbox component
  *
- * 토글 스위치 입력 필드를 제공하는 컴포넌트입니다.
+ * 체크박스 입력 필드를 제공하는 컴포넌트입니다.
  * ARIA 속성을 자동으로 설정하여 접근성을 지원합니다.
  *
- * Toggle switch input field component.
+ * Checkbox input field component.
  * Automatically sets ARIA attributes for accessibility support.
  *
  * @component
  * @example
  * // 기본 사용 / Basic usage
- * <Switch label="알림 받기" />
+ * <Checkbox label="이용약관에 동의합니다" />
+ *
+ * @example
+ * // 에러 상태와 설명 / Error state with description
+ * <Checkbox
+ *   label="필수 항목"
+ *   description="이 항목은 필수입니다"
+ *   error
+ * />
  *
  * @example
  * // 제어 컴포넌트 / Controlled component
- * const [enabled, setEnabled] = useState(false)
- * <Switch
- *   checked={enabled}
- *   onChange={(e) => setEnabled(e.target.checked)}
- *   label="다크 모드"
+ * const [checked, setChecked] = useState(false)
+ * <Checkbox
+ *   checked={checked}
+ *   onChange={(e) => setChecked(e.target.checked)}
+ *   label="동의"
  * />
  *
+ * @param {CheckboxProps} props - Checkbox 컴포넌트의 props / Checkbox component props
+ * @param {React.Ref<HTMLInputElement>} ref - input 요소 ref / input element ref
+ * @returns {JSX.Element} Checkbox 컴포넌트 / Checkbox component
+ */
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+
+/**
+ * Radio 컴포넌트의 props / Radio component props
+ * @typedef {Object} RadioProps
+ * @property {"default" | "outline" | "filled" | "glass"} [variant="default"] - Radio 스타일 변형 / Radio style variant
+ * @property {"sm" | "md" | "lg"} [size="md"] - Radio 크기 / Radio size
+ * @property {boolean} [error=false] - 에러 상태 표시 / Error state
+ * @property {boolean} [success=false] - 성공 상태 표시 / Success state
+ * @property {string} [label] - 라디오 버튼 레이블 텍스트 / Radio button label text
+ * @property {string} [description] - 라디오 버튼 설명 텍스트 / Radio button description text
+ * @extends {Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>}
+ */
+interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    variant?: "default" | "outline" | "filled" | "glass";
+    size?: "sm" | "md" | "lg";
+    error?: boolean;
+    success?: boolean;
+    label?: string;
+    description?: string;
+}
+/**
+ * Radio 컴포넌트 / Radio component
+ *
+ * 라디오 버튼 입력 필드를 제공하는 컴포넌트입니다.
+ * 같은 name 속성을 가진 여러 Radio는 그룹으로 동작합니다.
+ * ARIA 속성을 자동으로 설정하여 접근성을 지원합니다.
+ *
+ * Radio button input field component.
+ * Multiple Radio components with the same name attribute work as a group.
+ * Automatically sets ARIA attributes for accessibility support.
+ *
+ * @component
+ * @example
+ * // 기본 사용 (그룹) / Basic usage (group)
+ * <Radio name="option" value="1" label="옵션 1" />
+ * <Radio name="option" value="2" label="옵션 2" />
+ * <Radio name="option" value="3" label="옵션 3" />
+ *
  * @example
  * // 에러 상태 / Error state
- * <Switch
- *   label="필수 설정"
- *   description="이 설정을 활성화해야 합니다"
+ * <Radio
+ *   name="gender"
+ *   value="male"
+ *   label="남성"
  *   error
  * />
  *
- * @param {SwitchProps} props - Switch 컴포넌트의 props / Switch component props
+ * @param {RadioProps} props - Radio 컴포넌트의 props / Radio component props
  * @param {React.Ref<HTMLInputElement>} ref - input 요소 ref / input element ref
- * @returns {JSX.Element} Switch 컴포넌트 / Switch component
+ * @returns {JSX.Element} Radio 컴포넌트 / Radio component
  */
-declare const Switch: React__default.ForwardRefExoticComponent<SwitchProps & React__default.RefAttributes<HTMLInputElement>>;
+declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
 
 /**
  * Slider 컴포넌트의 props
@@ -456,7 +472,7 @@ declare const Switch: React__default.ForwardRefExoticComponent<SwitchProps & Rea
  * @property {string} [className] - 추가 CSS 클래스
  * @extends {Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'onChange' | 'size'>}
  */
-interface SliderProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'onChange' | 'size'> {
+interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'onChange' | 'size'> {
     variant?: "default" | "primary" | "success" | "warning" | "danger";
     size?: "sm" | "md" | "lg";
     showValue?: boolean;
@@ -509,62 +525,7 @@ interface SliderProps extends Omit<React__default.InputHTMLAttributes<HTMLInputE
  * @param {React.Ref<HTMLInputElement>} ref - input 요소 ref / input element ref
  * @returns {JSX.Element} Slider 컴포넌트 / Slider component
  */
-declare const Slider: React__default.ForwardRefExoticComponent<SliderProps & React__default.RefAttributes<HTMLInputElement>>;
-
-/**
- * Textarea 컴포넌트의 props / Textarea component props
- * @typedef {Object} TextareaProps
- * @property {"default" | "outline" | "filled" | "ghost" | "glass"} [variant="default"] - Textarea 스타일 변형 / Textarea style variant
- * @property {"sm" | "md" | "lg"} [size="md"] - Textarea 크기 / Textarea size
- * @property {boolean} [error=false] - 에러 상태 표시 / Error state
- * @property {boolean} [success=false] - 성공 상태 표시 / Success state
- * @property {"none" | "vertical" | "horizontal" | "both"} [resize="vertical"] - 크기 조절 방향 / Resize direction
- * @extends {React.TextareaHTMLAttributes<HTMLTextAreaElement>}
- */
-interface TextareaProps extends React__default.TextareaHTMLAttributes<HTMLTextAreaElement> {
-    variant?: "default" | "outline" | "filled" | "ghost" | "glass";
-    size?: "sm" | "md" | "lg";
-    error?: boolean;
-    success?: boolean;
-    resize?: "none" | "vertical" | "horizontal" | "both";
-}
-/**
- * Textarea 컴포넌트 / Textarea component
- *
- * 여러 줄 텍스트 입력을 위한 텍스트 영역 컴포넌트입니다.
- * 다양한 스타일 변형과 크기를 지원하며, 접근성 속성을 포함합니다.
- *
- * Text area component for multi-line text input.
- * Supports various style variants and sizes, includes accessibility attributes.
- *
- * @component
- * @example
- * // 기본 사용 / Basic usage
- * <Textarea placeholder="내용을 입력하세요" />
- *
- * @example
- * // 에러 상태 / Error state
- * <Textarea
- *   error
- *   placeholder="에러가 발생했습니다"
- *   aria-label="설명 입력"
- * />
- *
- * @example
- * // 크기 조절 비활성화 / Disable resize
- * <Textarea
- *   resize="none"
- *   rows={5}
- *   placeholder="고정 크기 텍스트 영역"
- * />
- *
- * @param {TextareaProps} props - Textarea 컴포넌트의 props / Textarea component props
- * @param {React.Ref<HTMLTextAreaElement>} ref - textarea 요소 ref / textarea element ref
- * @returns {JSX.Element} Textarea 컴포넌트 / Textarea component
- *
- * @todo 접근성 개선: aria-invalid 속성 자동 추가 필요 / Accessibility improvement: auto-add aria-invalid attribute
- */
-declare const Textarea: React__default.ForwardRefExoticComponent<TextareaProps & React__default.RefAttributes<HTMLTextAreaElement>>;
+declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLInputElement>>;
 
 /**
  * DatePicker 컴포넌트의 props / DatePicker component props
@@ -582,7 +543,7 @@ declare const Textarea: React__default.ForwardRefExoticComponent<TextareaProps &
  * @property {string} [className] - 추가 클래스명 / Additional class name
  * @extends {Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>}
  */
-interface DatePickerProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+interface DatePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
     value?: Date | null;
     onChange?: (date: Date | null) => void;
     minDate?: Date;
@@ -594,6 +555,8 @@ interface DatePickerProps extends Omit<React__default.HTMLAttributes<HTMLDivElem
     locale?: string;
     size?: "sm" | "md" | "lg";
     className?: string;
+    /** 표시할 날짜 배열 (점으로 표시) / Dates to mark with a dot */
+    markedDates?: Date[];
 }
 /**
  * DatePicker 컴포넌트 / DatePicker component
@@ -625,7 +588,7 @@ interface DatePickerProps extends Omit<React__default.HTMLAttributes<HTMLDivElem
  * @param {DatePickerProps} props - DatePicker 컴포넌트의 props / DatePicker component props
  * @returns {JSX.Element} DatePicker 컴포넌트 / DatePicker component
  */
-declare const DatePicker: React__default.ForwardRefExoticComponent<DatePickerProps & React__default.RefAttributes<HTMLDivElement>>;
+declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
 
 /**
  * 업로드된 파일 정보 인터페이스 / Uploaded file information interface
@@ -667,7 +630,7 @@ interface UploadedFile {
  * @property {"sm" | "md" | "lg"} [size="md"] - 크기 / Size
  * @property {string} [className] - 추가 클래스명 / Additional class name
  */
-interface UploadProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+interface UploadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
     files?: UploadedFile[];
     onChange?: (files: File[]) => void;
     onRemove?: (file: UploadedFile) => void;
@@ -711,7 +674,7 @@ interface UploadProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>
  * @param {UploadProps} props - Upload 컴포넌트의 props / Upload component props
  * @returns {JSX.Element} Upload 컴포넌트 / Upload component
  */
-declare const Upload: React__default.ForwardRefExoticComponent<UploadProps & React__default.RefAttributes<HTMLDivElement>>;
+declare const Upload: React.ForwardRefExoticComponent<UploadProps & React.RefAttributes<HTMLDivElement>>;
 
 /**
  * Autocomplete 옵션 인터페이스 / Autocomplete option interface
@@ -726,7 +689,7 @@ interface AutocompleteOption {
     value: string;
     label: string;
     description?: string;
-    icon?: React__default.ReactNode;
+    icon?: React.ReactNode;
     data?: Record<string, unknown>;
 }
 /**
@@ -748,7 +711,7 @@ interface AutocompleteOption {
  * @property {string} [className] - 추가 클래스명 / Additional class name
  * @extends {Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>}
  */
-interface AutocompleteProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+interface AutocompleteProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
     options: AutocompleteOption[];
     value?: string;
     onChange?: (value: string, option?: AutocompleteOption) => void;
@@ -798,6 +761,36 @@ interface AutocompleteProps extends Omit<React__default.HTMLAttributes<HTMLDivEl
  * @param {AutocompleteProps} props - Autocomplete 컴포넌트의 props / Autocomplete component props
  * @returns {JSX.Element} Autocomplete 컴포넌트 / Autocomplete component
  */
-declare const Autocomplete: React__default.ForwardRefExoticComponent<AutocompleteProps & React__default.RefAttributes<HTMLDivElement>>;
+declare const Autocomplete: React.ForwardRefExoticComponent<AutocompleteProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * ColorPicker 컴포넌트
+ *
+ * 탭 기반 컬러 피커 (의존성 없음)
+ * - Tailwind 탭: Tailwind CSS 프리셋 팔레트
+ * - Custom 탭: HSL 슬라이더 + HEX 입력
+ *
+ * @example
+ * ```tsx
+ * <ColorPicker value="#3b82f6" onChange={(color) => console.log(color)} />
+ * ```
+ */
+
+interface ColorPickerProps {
+    /** 현재 색상 값 (HEX 또는 'transparent') */
+    value: string;
+    /** 색상 변경 콜백 */
+    onChange: (color: string) => void;
+    /** 추가 클래스명 */
+    className?: string;
+    /** 비활성화 여부 */
+    disabled?: boolean;
+}
+/**
+ * ColorPicker 컴포넌트
+ *
+ * 탭 기반 컬러 피커로 Tailwind CSS 프리셋과 커스텀 HSL 피커를 제공합니다.
+ */
+declare const ColorPicker: React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<HTMLDivElement>>;
 
-export { Autocomplete, type AutocompleteOption, type AutocompleteProps, Checkbox, type CheckboxProps, DatePicker, type DatePickerProps, Form, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Input, type InputProps, Label, type LabelProps, Radio, type RadioProps, Select, SelectOption, type SelectOptionProps, type SelectProps, Slider, type SliderProps, Switch, type SwitchProps, Textarea, type TextareaProps, Upload, type UploadProps, type UploadedFile };
+export { Autocomplete, type AutocompleteOption, type AutocompleteProps, Checkbox, type CheckboxProps, ColorPicker, type ColorPickerProps, DatePicker, type DatePickerProps, Form, FormControl, type FormControlProps, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Radio, type RadioProps, Select, SelectOption, type SelectOptionProps, type SelectProps, Slider, type SliderProps, Textarea, type TextareaProps, Upload, type UploadProps, type UploadedFile, type ValidationErrors, type ValidationRule, type ValidationRules, useFormValidation };