@hua-labs/ui 2.2.0 → 2.3.0

package/dist/form.d.mts

@@ -1,116 +1,82 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-export { I as Input, a as InputProps, L as Label, b as LabelProps, N as NumberInput, c as NumberInputProps, S as Switch, d as SwitchProps } from './Switch-Dzm5TLR3.mjs';
+export { I as Input, a as InputProps, L as Label, b as LabelProps, N as NumberInput, c as NumberInputProps, S as Switch, d as SwitchProps } from './Switch-D0l7SJrz.mjs';
 
 /**
- * Form 컴포넌트의 props / Form component props
- * @typedef {Object} FormProps
- * @property {(e: React.FormEvent<HTMLFormElement>) => void} [onSubmit] - 폼 제출 핸들러 / Form submit handler
- * @property {"default" | "glass"} [variant="default"] - Form 스타일 변형 / Form style variant
- * @extends {React.FormHTMLAttributes<HTMLFormElement>}
+ * Form component props
  */
-interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
+interface FormProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>, "className"> {
     onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
     variant?: "default" | "glass";
+    dot?: string;
+    style?: React.CSSProperties;
 }
 /**
- * FormField 컴포넌트의 props / FormField component props
- * @typedef {Object} FormFieldProps
- * @property {string} [error] - 에러 메시지 / Error message
- * @property {boolean} [required=false] - 필수 필드 여부 / Required field
- * @extends {React.HTMLAttributes<HTMLDivElement>}
+ * FormField component props
  */
-interface FormFieldProps extends React.HTMLAttributes<HTMLDivElement> {
+interface FormFieldProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className"> {
     error?: string;
     required?: boolean;
+    dot?: string;
+    style?: React.CSSProperties;
 }
 /**
- * FormGroup 컴포넌트의 props / FormGroup component props
- * @typedef {Object} FormGroupProps
- * @property {boolean} [inline=false] - 인라인 레이아웃 여부 / Inline layout
- * @extends {React.HTMLAttributes<HTMLDivElement>}
+ * FormGroup component props
  */
-interface FormGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+interface FormGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className"> {
     inline?: boolean;
+    dot?: string;
+    style?: React.CSSProperties;
 }
 /**
- * Form 컴포넌트 / Form component
- *
- * 폼 컨테이너 컴포넌트입니다.
- * FormField, FormGroup과 함께 사용하여 구조화된 폼을 구성합니다.
- *
  * Form container component.
  * Used with FormField and FormGroup to create structured forms.
  *
- * @component
  * @example
- * // 기본 사용 / Basic usage
- * <Form onSubmit={(e) => { e.preventDefault(); console.log('제출') }}>
+ * <Form onSubmit={(e) => { e.preventDefault(); console.log('submit') }}>
  *   <FormField>
- *     <Label>이름</Label>
+ *     <Label>Name</Label>
  *     <Input />
  *   </FormField>
  * </Form>
  *
  * @example
- * // Glass 스타일 / Glass style
+ * // Glass variant
  * <Form variant="glass" onSubmit={handleSubmit}>
  *   <FormGroup>
  *     <FormField>
- *       <Label>이메일</Label>
+ *       <Label>Email</Label>
  *       <Input type="email" />
  *     </FormField>
  *   </FormGroup>
  * </Form>
- *
- * @param {FormProps} props - Form 컴포넌트의 props / Form component props
- * @param {React.Ref<HTMLFormElement>} ref - form 요소 ref / form element ref
- * @returns {JSX.Element} Form 컴포넌트 / Form component
  */
 declare const Form: React.ForwardRefExoticComponent<FormProps & React.RefAttributes<HTMLFormElement>>;
 /**
- * FormField 컴포넌트 / FormField component
- *
- * 폼 필드를 감싸는 컨테이너입니다.
- * 에러 메시지를 표시하고 필수 필드 표시를 지원합니다.
- *
  * Container that wraps a form field.
  * Displays error messages and supports required field indication.
  *
- * @component
  * @example
- * <FormField error="이 필드는 필수입니다" required>
- *   <Label>이름</Label>
+ * <FormField error="This field is required" required>
+ *   <Label>Name</Label>
  *   <Input />
  * </FormField>
- *
- * @param {FormFieldProps} props - FormField 컴포넌트의 props / FormField component props
- * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
- * @returns {JSX.Element} FormField 컴포넌트 / FormField component
  */
 declare const FormField: React.ForwardRefExoticComponent<FormFieldProps & React.RefAttributes<HTMLDivElement>>;
 /**
- * FormGroup 컴포넌트 / FormGroup component
- *
- * 여러 폼 필드를 그룹화하는 컨테이너입니다.
  * Container that groups multiple form fields.
  *
- * @component
  * @example
  * <FormGroup inline>
  *   <FormField>
- *     <Label>이름</Label>
+ *     <Label>First Name</Label>
  *     <Input />
  *   </FormField>
  *   <FormField>
- *     <Label>성</Label>
+ *     <Label>Last Name</Label>
  *     <Input />
  *   </FormField>
  * </FormGroup>
- *
- * @param {FormGroupProps} props - FormGroup 컴포넌트의 props / FormGroup component props
- * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
- * @returns {JSX.Element} FormGroup 컴포넌트 / FormGroup component
  */
 declare const FormGroup: React.ForwardRefExoticComponent<FormGroupProps & React.RefAttributes<HTMLDivElement>>;
 
@@ -134,7 +100,8 @@ interface FormControlProps {
     htmlFor?: string;
     showErrorIcon?: boolean;
     suppressBrowserValidation?: boolean;
-    className?: string;
+    dot?: string;
+    style?: React.CSSProperties;
     children: React.ReactNode;
 }
 /**
@@ -163,7 +130,7 @@ interface FormControlProps {
  *   <Input type="password" />
  * </FormControl>
  */
-declare function FormControl({ label, description, error, required, htmlFor, showErrorIcon, suppressBrowserValidation, className, children, }: FormControlProps): react_jsx_runtime.JSX.Element;
+declare function FormControl({ label, description, error, required, htmlFor, showErrorIcon, suppressBrowserValidation, dot: dotProp, style, children, }: FormControlProps): react_jsx_runtime.JSX.Element;
 /**
  * useFormValidation 훅 / useFormValidation hook
  *
@@ -222,12 +189,14 @@ declare function useFormValidation(initialErrors?: ValidationErrors): {
 /**
  * Textarea 컴포넌트의 props / Textarea component props
  */
-interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "className" | "size"> {
     variant?: "default" | "outline" | "filled" | "ghost" | "glass";
     size?: "sm" | "md" | "lg";
     error?: boolean;
     success?: boolean;
     resize?: "none" | "vertical" | "horizontal" | "both";
+    dot?: string;
+    style?: CSSProperties;
 }
 /**
  * Textarea 컴포넌트 / Textarea component
@@ -270,13 +239,15 @@ declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.Re
 /**
  * Select 컴포넌트의 props / Select component props
  */
-interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "className" | "size"> {
     variant?: "default" | "outline" | "filled" | "ghost" | "glass";
     size?: "sm" | "md" | "lg";
     error?: boolean;
     success?: boolean;
     leftIcon?: React.ReactNode;
     placeholder?: string;
+    dot?: string;
+    style?: CSSProperties;
 }
 /**
  * SelectOption 컴포넌트의 props / SelectOption component props
@@ -340,15 +311,18 @@ declare const SelectOption: React.ForwardRefExoticComponent<SelectOptionProps &
  * @property {boolean} [success=false] - 성공 상태 표시 / Success state
  * @property {string} [label] - 체크박스 레이블 텍스트 / Checkbox label text
  * @property {string} [description] - 체크박스 설명 텍스트 / Checkbox description text
- * @extends {Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>}
+ * @property {string} [dot] - dot 스타일 유틸리티 문자열 / Dot style utility string
+ * @extends {Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'className'>}
  */
-interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "className"> {
     variant?: "default" | "outline" | "filled" | "glass";
     size?: "sm" | "md" | "lg";
     error?: boolean;
     success?: boolean;
     label?: string;
     description?: string;
+    dot?: string;
+    style?: React.CSSProperties;
 }
 /**
  * Checkbox 컴포넌트 / Checkbox component
@@ -387,55 +361,51 @@ interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>
  */
 declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
 
+type Size = "sm" | "md" | "lg";
+type Variant = "default" | "outline" | "filled" | "glass";
 /**
- * Radio 컴포넌트의 props / Radio component 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'>}
+ * @property {"default" | "outline" | "filled" | "glass"} [variant="default"] - Radio style variant
+ * @property {"sm" | "md" | "lg"} [size="md"] - 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
+ * @property {string} [dot] - Dot utility string for additional styles on the wrapper
+ * @property {React.CSSProperties} [style] - Inline styles for the wrapper
+ * @extends {Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'className'>}
  */
-interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
-    variant?: "default" | "outline" | "filled" | "glass";
-    size?: "sm" | "md" | "lg";
+interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "className"> {
+    variant?: Variant;
+    size?: Size;
     error?: boolean;
     success?: boolean;
     label?: string;
     description?: string;
+    dot?: string;
+    style?: React.CSSProperties;
 }
 /**
- * Radio 컴포넌트 / Radio component
- *
- * 라디오 버튼 입력 필드를 제공하는 컴포넌트입니다.
- * 같은 name 속성을 가진 여러 Radio는 그룹으로 동작합니다.
- * ARIA 속성을 자동으로 설정하여 접근성을 지원합니다.
+ * Radio component
  *
- * Radio button input field component.
- * Multiple Radio components with the same name attribute work as a group.
- * Automatically sets ARIA attributes for accessibility support.
+ * A radio button input field. Multiple Radio components with the same name attribute
+ * work as a group. Automatically sets ARIA attributes for accessibility.
  *
  * @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 (group)
+ * <Radio name="option" value="1" label="Option 1" />
+ * <Radio name="option" value="2" label="Option 2" />
  *
  * @example
- * // 에러 상태 / Error state
- * <Radio
- *   name="gender"
- *   value="male"
- *   label="남성"
- *   error
- * />
+ * // Error state
+ * <Radio name="gender" value="male" label="Male" error />
  *
- * @param {RadioProps} props - Radio 컴포넌트의 props / Radio component props
- * @param {React.Ref<HTMLInputElement>} ref - input 요소 ref / input element ref
- * @returns {JSX.Element} Radio 컴포넌트 / Radio component
+ * @param {RadioProps} props - Radio component props
+ * @param {React.Ref<HTMLInputElement>} ref - input element ref
+ * @returns {JSX.Element} Radio component
  */
 declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
 
@@ -454,10 +424,11 @@ declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttri
  * @property {(value: number | number[]) => void} [onValueChange] - 값 변경 콜백
  * @property {"horizontal" | "vertical"} [orientation="horizontal"] - Slider 방향
  * @property {boolean} [disabled=false] - 비활성화 여부
- * @property {string} [className] - 추가 CSS 클래스
- * @extends {Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'onChange' | 'size'>}
+ * @property {string} [dot] - dot 유틸리티 스타일
+ * @property {React.CSSProperties} [style] - 인라인 스타일
+ * @extends {Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'onChange' | 'size' | 'className'>}
  */
-interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'onChange' | 'size'> {
+interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "onChange" | "size" | "className"> {
     variant?: "default" | "primary" | "success" | "warning" | "danger";
     size?: "sm" | "md" | "lg";
     showValue?: boolean;
@@ -470,7 +441,8 @@ interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>,
     onValueChange?: (value: number | number[]) => void;
     orientation?: "horizontal" | "vertical";
     disabled?: boolean;
-    className?: string;
+    dot?: string;
+    style?: React.CSSProperties;
 }
 /**
  * Slider 컴포넌트 / Slider component
@@ -503,7 +475,7 @@ interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>,
  *   orientation="vertical"
  *   variant="primary"
  *   size="lg"
- *   className="h-64"
+ *   style={{ height: '16rem' }}
  * />
  *
  * @param {SliderProps} props - Slider 컴포넌트의 props / Slider component props
@@ -525,10 +497,9 @@ declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAtt
  * @property {string} [dateFormat="YYYY-MM-DD"] - 날짜 포맷 / Date format
  * @property {string} [locale="ko-KR"] - 로케일 / Locale
  * @property {"sm" | "md" | "lg"} [size="md"] - 크기 / Size
- * @property {string} [className] - 추가 클래스명 / Additional class name
- * @extends {Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>}
+ * @extends {Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'className'>}
  */
-interface DatePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+interface DatePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "className"> {
     value?: Date | null;
     onChange?: (date: Date | null) => void;
     minDate?: Date;
@@ -539,9 +510,17 @@ interface DatePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'on
     dateFormat?: string;
     locale?: string;
     size?: "sm" | "md" | "lg";
-    className?: string;
-    /** 표시할 날짜 배열 (점으로 표시) / Dates to mark with a dot */
+    /** 표시할 날짜 배열 (점으로 표시) / Dates to mark with a dot
+     * @deprecated markedDateKeys 사용 권장 (타임존 안전) */
     markedDates?: Date[];
+    /** 표시할 날짜 키 배열 (YYYY-MM-DD 형식, 타임존 안전) / Date keys to mark with a dot */
+    markedDateKeys?: string[];
+    /** dot 유틸리티 스트링 (인라인 스타일로 변환) / dot utility string (converted to inline style) */
+    dot?: string;
+    /** 추가 인라인 스타일 / Additional inline style */
+    style?: React.CSSProperties;
+    /** trigger 버튼의 id (label htmlFor 연결용) / id for the trigger button (for label htmlFor linking) */
+    triggerId?: string;
 }
 /**
  * DatePicker 컴포넌트 / DatePicker component
@@ -613,9 +592,10 @@ interface UploadedFile {
  * @property {boolean} [dragDrop=true] - 드래그 앤 드롭 활성화 / Enable drag and drop
  * @property {string} [placeholder="파일을 선택하거나 여기에 드래그하세요"] - 플레이스홀더 / Placeholder
  * @property {"sm" | "md" | "lg"} [size="md"] - 크기 / Size
- * @property {string} [className] - 추가 클래스명 / Additional class name
+ * @property {string} [dot] - dot 스타일 유틸리티 문자열 / Dot style utility string
+ * @property {React.CSSProperties} [style] - 인라인 스타일 / Inline style
  */
-interface UploadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+interface UploadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "onChange"> {
     files?: UploadedFile[];
     onChange?: (files: File[]) => void;
     onRemove?: (file: UploadedFile) => void;
@@ -627,7 +607,8 @@ interface UploadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChan
     dragDrop?: boolean;
     placeholder?: string;
     size?: "sm" | "md" | "lg";
-    className?: string;
+    dot?: string;
+    style?: React.CSSProperties;
 }
 /**
  * Upload 컴포넌트 / Upload component
@@ -693,10 +674,9 @@ interface AutocompleteOption {
  * @property {(query: string) => AutocompleteOption[] | Promise<AutocompleteOption[]>} [onSearch] - 검색 핸들러 (비동기 지원) / Search handler (async support)
  * @property {React.ReactNode} [emptyText="결과가 없습니다"] - 빈 결과 텍스트 / Empty result text
  * @property {"sm" | "md" | "lg"} [size="md"] - 크기 / Size
- * @property {string} [className] - 추가 클래스명 / Additional class name
- * @extends {Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>}
+ * @extends {Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'className'>}
  */
-interface AutocompleteProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+interface AutocompleteProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "className"> {
     options: AutocompleteOption[];
     value?: string;
     onChange?: (value: string, option?: AutocompleteOption) => void;
@@ -710,7 +690,10 @@ interface AutocompleteProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
     onSearch?: (query: string) => AutocompleteOption[] | Promise<AutocompleteOption[]>;
     emptyText?: string;
     size?: "sm" | "md" | "lg";
-    className?: string;
+    /** dot 유틸리티 스트링 (인라인 스타일로 변환) / dot utility string (converted to inline style) */
+    dot?: string;
+    /** 추가 인라인 스타일 / Additional inline style */
+    style?: React.CSSProperties;
 }
 /**
  * Autocomplete 컴포넌트 / Autocomplete component
@@ -766,8 +749,10 @@ interface ColorPickerProps {
     value: string;
     /** 색상 변경 콜백 */
     onChange: (color: string) => void;
-    /** 추가 클래스명 */
-    className?: string;
+    /** dot 유틸리티 스타일 */
+    dot?: string;
+    /** 추가 인라인 스타일 */
+    style?: React.CSSProperties;
     /** 비활성화 여부 */
     disabled?: boolean;
 }