@hua-labs/ui 1.0.0 → 1.1.0-alpha.0.2

package/dist/components/EmotionButton.d.ts

@@ -1,9 +1,43 @@
-import * as React from "react";
+import React from "react";
+/**
+ * EmotionButton 컴포넌트의 props / EmotionButton component props
+ * @typedef {Object} EmotionButtonProps
+ * @property {string} emotion - 감정 이모지 또는 텍스트 / Emotion emoji or text
+ * @property {boolean} [isSelected=false] - 선택 상태 / Selected state
+ * @property {"sm" | "md" | "lg"} [size="md"] - 버튼 크기 / Button size
+ * @extends {React.ButtonHTMLAttributes<HTMLButtonElement>}
+ */
 export interface EmotionButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     emotion: string;
     isSelected?: boolean;
     size?: "sm" | "md" | "lg";
 }
+/**
+ * EmotionButton 컴포넌트 / EmotionButton component
+ *
+ * 감정을 선택하는 버튼 컴포넌트입니다.
+ * 이모지나 텍스트로 감정을 표시하며, 선택 상태를 지원합니다.
+ *
+ * Button component for selecting emotions.
+ * Displays emotion as emoji or text and supports selected state.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <EmotionButton emotion="😊" />
+ *
+ * @example
+ * // 선택 상태 / Selected state
+ * <EmotionButton
+ *   emotion="😊"
+ *   isSelected
+ *   size="lg"
+ * />
+ *
+ * @param {EmotionButtonProps} props - EmotionButton 컴포넌트의 props / EmotionButton component props
+ * @param {React.Ref<HTMLButtonElement>} ref - button 요소 ref / button element ref
+ * @returns {JSX.Element} EmotionButton 컴포넌트 / EmotionButton component
+ */
 declare const EmotionButton: React.ForwardRefExoticComponent<EmotionButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { EmotionButton };
 //# sourceMappingURL=EmotionButton.d.ts.map

package/dist/components/EmotionButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmotionButton.d.ts","sourceRoot":"","sources":["../../src/components/EmotionButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACvF,OAAO,EAAE,MAAM,CAAA;IACf,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAC1B;AAED,QAAA,MAAM,aAAa,8FAyBlB,CAAA;AAGD,OAAO,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"EmotionButton.d.ts","sourceRoot":"","sources":["../../src/components/EmotionButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB;;;;;;;GAOG;AACH,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACvF,OAAO,EAAE,MAAM,CAAA;IACf,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,QAAA,MAAM,aAAa,8FAyBlB,CAAA;AAGD,OAAO,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/EmotionMeter.d.ts

@@ -1,10 +1,46 @@
-import * as React from "react";
+import React from "react";
+import type { Color } from "../lib/types/common";
+/**
+ * EmotionMeter 컴포넌트의 props / EmotionMeter component props
+ * @typedef {Object} EmotionMeterProps
+ * @property {number} value - 감정 강도 값 (0-max) / Emotion intensity value (0-max)
+ * @property {number} [max=100] - 최대값 / Maximum value
+ * @property {"sm" | "md" | "lg"} [size="md"] - 미터 크기 / Meter size
+ * @property {"blue" | "green" | "yellow" | "red"} [color="blue"] - 미터 색상 / Meter color
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
 export interface EmotionMeterProps extends React.HTMLAttributes<HTMLDivElement> {
     value: number;
     max?: number;
     size?: "sm" | "md" | "lg";
-    color?: "blue" | "green" | "yellow" | "red";
+    color?: "blue" | "green" | "yellow" | "red" | Color;
 }
+/**
+ * EmotionMeter 컴포넌트 / EmotionMeter component
+ *
+ * 감정 강도를 표시하는 미터 컴포넌트입니다.
+ * Progress 컴포넌트와 유사하지만 감정 분석에 특화되어 있습니다.
+ *
+ * Meter component that displays emotion intensity.
+ * Similar to Progress component but specialized for emotion analysis.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <EmotionMeter value={75} />
+ *
+ * @example
+ * // 다양한 색상 / Various colors
+ * <EmotionMeter
+ *   value={80}
+ *   color="green"
+ *   size="lg"
+ * />
+ *
+ * @param {EmotionMeterProps} props - EmotionMeter 컴포넌트의 props / EmotionMeter component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} EmotionMeter 컴포넌트 / EmotionMeter component
+ */
 declare const EmotionMeter: React.ForwardRefExoticComponent<EmotionMeterProps & React.RefAttributes<HTMLDivElement>>;
 export { EmotionMeter };
 //# sourceMappingURL=EmotionMeter.d.ts.map

package/dist/components/EmotionMeter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmotionMeter.d.ts","sourceRoot":"","sources":["../../src/components/EmotionMeter.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC7E,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;CAC5C;AAED,QAAA,MAAM,YAAY,0FAqCjB,CAAA;AAGD,OAAO,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"EmotionMeter.d.ts","sourceRoot":"","sources":["../../src/components/EmotionMeter.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAA;AAEhD;;;;;;;;GAQG;AACH,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC7E,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAA;CACpD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,QAAA,MAAM,YAAY,0FA4CjB,CAAA;AAGD,OAAO,EAAE,YAAY,EAAE,CAAA"}

package/dist/components/EmotionSelector.d.ts

@@ -1,4 +1,22 @@
-import * as React from "react";
+import React from "react";
+/**
+ * EmotionSelector 컴포넌트의 props / EmotionSelector component props
+ * @typedef {Object} EmotionSelectorProps
+ * @property {string} [selectedEmotion] - 선택된 감정 키 / Selected emotion key
+ * @property {(emotion: string) => void} [onEmotionSelect] - 감정 선택 콜백 / Emotion selection callback
+ * @property {"grid" | "list" | "compact"} [layout="grid"] - 레이아웃 타입 / Layout type
+ * @property {boolean} [showIntensity=false] - 강도 조절 표시 여부 / Show intensity control
+ * @property {number} [intensity=50] - 감정 강도 (0-100) / Emotion intensity (0-100)
+ * @property {(intensity: number) => void} [onIntensityChange] - 강도 변경 콜백 / Intensity change callback
+ * @property {Array<Object>} [emotions] - 감정 목록 / Emotions list
+ * @property {string} emotions[].key - 감정 키 / Emotion key
+ * @property {string} emotions[].label - 감정 라벨 / Emotion label
+ * @property {string} [emotions[].icon] - 감정 아이콘 / Emotion icon
+ * @property {string} [emotions[].color] - 감정 색상 / Emotion color
+ * @property {"sm" | "md" | "lg"} [size="md"] - 감정 버튼 크기 / Emotion button size
+ * @property {"button" | "card" | "chip"} [variant="button"] - 감정 표시 스타일 / Emotion display style
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
 interface EmotionSelectorProps extends React.HTMLAttributes<HTMLDivElement> {
     selectedEmotion?: string;
     onEmotionSelect?: (emotion: string) => void;
@@ -15,6 +33,38 @@ interface EmotionSelectorProps extends React.HTMLAttributes<HTMLDivElement> {
     size?: "sm" | "md" | "lg";
     variant?: "button" | "card" | "chip";
 }
+/**
+ * EmotionSelector 컴포넌트 / EmotionSelector component
+ *
+ * 감정을 선택하는 컴포넌트입니다.
+ * 여러 감정 옵션을 제공하며, 강도 조절 기능을 포함할 수 있습니다.
+ *
+ * Component for selecting emotions.
+ * Provides multiple emotion options and can include intensity control.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <EmotionSelector
+ *   selectedEmotion="joy"
+ *   onEmotionSelect={(emotion) => console.log(emotion)}
+ * />
+ *
+ * @example
+ * // 강도 조절 포함 / With intensity control
+ * <EmotionSelector
+ *   selectedEmotion="calm"
+ *   onEmotionSelect={handleEmotionSelect}
+ *   showIntensity
+ *   intensity={intensity}
+ *   onIntensityChange={setIntensity}
+ *   variant="card"
+ * />
+ *
+ * @param {EmotionSelectorProps} props - EmotionSelector 컴포넌트의 props / EmotionSelector component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} EmotionSelector 컴포넌트 / EmotionSelector component
+ */
 declare const EmotionSelector: React.ForwardRefExoticComponent<EmotionSelectorProps & React.RefAttributes<HTMLDivElement>>;
 export { EmotionSelector };
 //# sourceMappingURL=EmotionSelector.d.ts.map

package/dist/components/EmotionSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmotionSelector.d.ts","sourceRoot":"","sources":["../../src/components/EmotionSelector.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,UAAU,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IACpC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC;QACf,GAAG,EAAE,MAAM,CAAA;QACX,KAAK,EAAE,MAAM,CAAA;QACb,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,KAAK,CAAC,EAAE,MAAM,CAAA;KACf,CAAC,CAAA;IACF,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,OAAO,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAA;CACrC;AAaD,QAAA,MAAM,eAAe,6FAgJpB,CAAA;AAID,OAAO,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"EmotionSelector.d.ts","sourceRoot":"","sources":["../../src/components/EmotionSelector.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB;;;;;;;;;;;;;;;;;GAiBG;AACH,UAAU,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IACpC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC;QACf,GAAG,EAAE,MAAM,CAAA;QACX,KAAK,EAAE,MAAM,CAAA;QACb,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,KAAK,CAAC,EAAE,MAAM,CAAA;KACf,CAAC,CAAA;IACF,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,OAAO,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAA;CACrC;AAaD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,QAAA,MAAM,eAAe,6FAgJpB,CAAA;AAID,OAAO,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/FeatureCard.d.ts

@@ -0,0 +1,61 @@
+import React from "react";
+import type { IconName } from "../lib/icons";
+/**
+ * FeatureCard 컴포넌트의 props / FeatureCard component props
+ * @typedef {Object} FeatureCardProps
+ * @property {IconName | string} [icon] - 아이콘 (IconName 또는 이미지 URL) / Icon (IconName or image URL)
+ * @property {string} title - 카드 제목 / Card title
+ * @property {string} description - 카드 설명 / Card description
+ * @property {"default" | "gradient" | "glass" | "neon"} [variant="default"] - FeatureCard 스타일 변형 / FeatureCard style variant
+ * @property {"sm" | "md" | "lg"} [size="md"] - FeatureCard 크기 / FeatureCard size
+ * @property {"scale" | "glow" | "slide" | "none"} [hover="scale"] - 호버 효과 / Hover effect
+ * @property {"blue" | "purple" | "green" | "orange" | "pink" | "custom"} [gradient="blue"] - 그라디언트 색상 / Gradient color
+ * @property {string} [customGradient] - 커스텀 그라디언트 클래스 / Custom gradient class
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+export interface FeatureCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    icon?: IconName | string;
+    title: string;
+    description: string;
+    variant?: "default" | "gradient" | "glass" | "neon";
+    size?: "sm" | "md" | "lg";
+    hover?: "scale" | "glow" | "slide" | "none";
+    gradient?: "blue" | "purple" | "green" | "orange" | "pink" | "custom";
+    customGradient?: string;
+}
+/**
+ * FeatureCard 컴포넌트 / FeatureCard component
+ *
+ * 기능을 소개하는 카드 컴포넌트입니다.
+ * 아이콘, 제목, 설명을 포함하며, 다양한 스타일과 호버 효과를 지원합니다.
+ *
+ * Card component that introduces features.
+ * Includes icon, title, and description, supports various styles and hover effects.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <FeatureCard
+ *   icon="star"
+ *   title="고급 기능"
+ *   description="강력한 기능을 제공합니다"
+ * />
+ *
+ * @example
+ * // Gradient 스타일 / Gradient style
+ * <FeatureCard
+ *   icon="zap"
+ *   title="빠른 성능"
+ *   description="최적화된 성능"
+ *   variant="gradient"
+ *   gradient="purple"
+ *   hover="glow"
+ * />
+ *
+ * @param {FeatureCardProps} props - FeatureCard 컴포넌트의 props / FeatureCard component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} FeatureCard 컴포넌트 / FeatureCard component
+ */
+declare const FeatureCard: React.ForwardRefExoticComponent<FeatureCardProps & React.RefAttributes<HTMLDivElement>>;
+export { FeatureCard };
+//# sourceMappingURL=FeatureCard.d.ts.map

package/dist/components/FeatureCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeatureCard.d.ts","sourceRoot":"","sources":["../../src/components/FeatureCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAE5C;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAA;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,CAAA;IACnD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAA;IAC3C,QAAQ,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAA;IACrE,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,QAAA,MAAM,WAAW,yFA4EhB,CAAA;AAeD,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/Form.d.ts

@@ -0,0 +1,114 @@
+import React from "react";
+/**
+ * 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>}
+ */
+export interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
+    onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
+    variant?: "default" | "glass";
+}
+/**
+ * FormField 컴포넌트의 props / FormField component props
+ * @typedef {Object} FormFieldProps
+ * @property {string} [error] - 에러 메시지 / Error message
+ * @property {boolean} [required=false] - 필수 필드 여부 / Required field
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+export interface FormFieldProps extends React.HTMLAttributes<HTMLDivElement> {
+    error?: string;
+    required?: boolean;
+}
+/**
+ * FormGroup 컴포넌트의 props / FormGroup component props
+ * @typedef {Object} FormGroupProps
+ * @property {boolean} [inline=false] - 인라인 레이아웃 여부 / Inline layout
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+export interface FormGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    inline?: boolean;
+}
+/**
+ * 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('제출') }}>
+ *   <FormField>
+ *     <Label>이름</Label>
+ *     <Input />
+ *   </FormField>
+ * </Form>
+ *
+ * @example
+ * // Glass 스타일 / Glass style
+ * <Form variant="glass" onSubmit={handleSubmit}>
+ *   <FormGroup>
+ *     <FormField>
+ *       <Label>이메일</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>
+ *   <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>
+ *     <Input />
+ *   </FormField>
+ *   <FormField>
+ *     <Label>성</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>>;
+export { Form, FormField, FormGroup };
+//# sourceMappingURL=Form.d.ts.map

package/dist/components/Form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../src/components/Form.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB;;;;;;GAMG;AACH,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,kBAAkB,CAAC,eAAe,CAAC;IAC1E,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAA;IACxD,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;CAC9B;AAED;;;;;;GAMG;AACH,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;;GAKG;AACH,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,QAAA,MAAM,IAAI,mFA6BT,CAAA;AAGD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,SAAS,uFA6Ed,CAAA;AAGD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,SAAS,uFAoBd,CAAA;AAGD,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,CAAA"}

package/dist/components/Grid.d.ts

@@ -1,4 +1,14 @@
-import * as React from "react";
+import React from "react";
+/**
+ * Grid 컴포넌트의 props
+ * @typedef {Object} GridProps
+ * @property {1|2|3|4|5|6|7|8|9|10|11|12} [cols=1] - 그리드 열 개수
+ * @property {"none" | "sm" | "md" | "lg" | "xl"} [gap="md"] - 그리드 아이템 간 간격
+ * @property {"none" | "sm" | "md" | "lg" | "xl"} [gapX] - 가로 간격 (gap보다 우선)
+ * @property {"none" | "sm" | "md" | "lg" | "xl"} [gapY] - 세로 간격
+ * @property {boolean} [responsive=true] - 반응형 그리드 활성화 (모바일: 1열, 태블릿: 2열, 데스크톱: 지정 열)
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
 export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
     cols?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
     gap?: "none" | "sm" | "md" | "lg" | "xl";
@@ -6,6 +16,37 @@ export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
     gapY?: "none" | "sm" | "md" | "lg" | "xl";
     responsive?: boolean;
 }
+/**
+ * Grid 컴포넌트
+ *
+ * CSS Grid를 사용한 그리드 레이아웃 컴포넌트입니다.
+ * 반응형 그리드를 지원하여 모바일부터 데스크톱까지 최적화된 레이아웃을 제공합니다.
+ *
+ * @component
+ * @example
+ * // 기본 3열 그리드
+ * <Grid cols={3} gap="md">
+ *   <div>아이템 1</div>
+ *   <div>아이템 2</div>
+ *   <div>아이템 3</div>
+ * </Grid>
+ *
+ * @example
+ * // 가로/세로 간격 분리
+ * <Grid cols={4} gapX="lg" gapY="sm">
+ *   {items.map(item => <div key={item.id}>{item.content}</div>)}
+ * </Grid>
+ *
+ * @example
+ * // 반응형 비활성화 (고정 그리드)
+ * <Grid cols={6} responsive={false} gap="lg">
+ *   <div>고정 6열</div>
+ * </Grid>
+ *
+ * @param {GridProps} props - Grid 컴포넌트의 props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref
+ * @returns {JSX.Element} Grid 컴포넌트
+ */
 declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
 export { Grid };
 //# sourceMappingURL=Grid.d.ts.map

package/dist/components/Grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../src/components/Grid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAA;IACvD,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACxC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzC,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,QAAA,MAAM,IAAI,kFA+DT,CAAA;AAGD,OAAO,EAAE,IAAI,EAAE,CAAA"}
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../src/components/Grid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB;;;;;;;;;GASG;AACH,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAA;IACvD,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACxC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzC,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,QAAA,MAAM,IAAI,kFA+DT,CAAA;AAGD,OAAO,EAAE,IAAI,EAAE,CAAA"}

package/dist/components/HeroSection.d.ts

@@ -0,0 +1,77 @@
+import React from "react";
+/**
+ * HeroSection 컴포넌트의 props / HeroSection component props
+ * @typedef {Object} HeroSectionProps
+ * @property {string} title - 히어로 섹션 제목 / Hero section title
+ * @property {string} [subtitle] - 히어로 섹션 부제목 / Hero section subtitle
+ * @property {string} description - 히어로 섹션 설명 / Hero section description
+ * @property {Object} [primaryAction] - 주요 액션 버튼 / Primary action button
+ * @property {string} primaryAction.label - 버튼 라벨 / Button label
+ * @property {string} primaryAction.href - 버튼 링크 / Button link
+ * @property {string} [primaryAction.icon] - 버튼 아이콘 / Button icon
+ * @property {Object} [secondaryAction] - 보조 액션 버튼 / Secondary action button
+ * @property {string} secondaryAction.label - 버튼 라벨 / Button label
+ * @property {string} secondaryAction.href - 버튼 링크 / Button link
+ * @property {string} [secondaryAction.icon] - 버튼 아이콘 / Button icon
+ * @property {"default" | "gradient" | "glass" | "neon"} [variant="default"] - HeroSection 스타일 변형 / HeroSection style variant
+ * @property {"none" | "gradient" | "particles" | "video"} [background="gradient"] - 배경 타입 / Background type
+ * @property {string} [customBackground] - 커스텀 배경 / Custom background
+ * @property {"sm" | "md" | "lg" | "xl"} [size="lg"] - HeroSection 크기 / HeroSection size
+ * @extends {React.HTMLAttributes<HTMLElement>}
+ */
+export interface HeroSectionProps extends React.HTMLAttributes<HTMLElement> {
+    title: string;
+    subtitle?: string;
+    description: string;
+    primaryAction?: {
+        label: string;
+        href: string;
+        icon?: string;
+    };
+    secondaryAction?: {
+        label: string;
+        href: string;
+        icon?: string;
+    };
+    variant?: "default" | "gradient" | "glass" | "neon";
+    background?: "none" | "gradient" | "particles" | "video";
+    customBackground?: string;
+    size?: "sm" | "md" | "lg" | "xl";
+}
+/**
+ * HeroSection 컴포넌트 / HeroSection component
+ *
+ * 랜딩 페이지의 히어로 섹션을 제공하는 컴포넌트입니다.
+ * 제목, 설명, 액션 버튼을 포함하며, 다양한 배경 효과를 지원합니다.
+ *
+ * Component that provides hero section for landing pages.
+ * Includes title, description, and action buttons, supports various background effects.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <HeroSection
+ *   title="환영합니다"
+ *   description="우리 서비스를 소개합니다"
+ *   primaryAction={{ label: "시작하기", href: "/start" }}
+ * />
+ *
+ * @example
+ * // Gradient 배경, 두 개의 액션 버튼 / Gradient background, two action buttons
+ * <HeroSection
+ *   title="혁신적인 솔루션"
+ *   subtitle="차세대 플랫폼"
+ *   description="최신 기술로 만든 플랫폼"
+ *   variant="gradient"
+ *   background="gradient"
+ *   primaryAction={{ label: "시작하기", href: "/start", icon: "arrowRight" }}
+ *   secondaryAction={{ label: "더 알아보기", href: "/about" }}
+ * />
+ *
+ * @param {HeroSectionProps} props - HeroSection 컴포넌트의 props / HeroSection component props
+ * @param {React.Ref<HTMLElement>} ref - section 요소 ref / section element ref
+ * @returns {JSX.Element} HeroSection 컴포넌트 / HeroSection component
+ */
+declare const HeroSection: React.ForwardRefExoticComponent<HeroSectionProps & React.RefAttributes<HTMLElement>>;
+export { HeroSection };
+//# sourceMappingURL=HeroSection.d.ts.map

package/dist/components/HeroSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroSection.d.ts","sourceRoot":"","sources":["../../src/components/HeroSection.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACzE,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,aAAa,CAAC,EAAE;QACd,KAAK,EAAE,MAAM,CAAA;QACb,IAAI,EAAE,MAAM,CAAA;QACZ,IAAI,CAAC,EAAE,MAAM,CAAA;KACd,CAAA;IACD,eAAe,CAAC,EAAE;QAChB,KAAK,EAAE,MAAM,CAAA;QACb,IAAI,EAAE,MAAM,CAAA;QACZ,IAAI,CAAC,EAAE,MAAM,CAAA;KACd,CAAA;IACD,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,CAAA;IACnD,UAAU,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,WAAW,GAAG,OAAO,CAAA;IACxD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CACjC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,QAAA,MAAM,WAAW,sFAgKhB,CAAA;AAID,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/Icon/Icon.d.ts

@@ -0,0 +1,159 @@
+import React from 'react';
+import { emotionIcons, statusIcons } from '../../lib/icons';
+import { type IconSet } from './IconProvider';
+import { type PhosphorWeight } from './icon-store';
+import type { AllIconName } from '../../lib/icon-names';
+/**
+ * Icon 컴포넌트 Props
+ *
+ * Icon component props interface.
+ *
+ * @interface IconProps
+ */
+export interface IconProps {
+    /** 아이콘 이름 / Icon name */
+    name: AllIconName;
+    /** 아이콘 크기 (숫자 또는 문자열) / Icon size (number or string) */
+    size?: number | string;
+    /** 추가 CSS 클래스 / Additional CSS classes */
+    className?: string;
+    /** 감정 아이콘 타입 / Emotion icon type */
+    emotion?: keyof typeof emotionIcons;
+    /** 상태 아이콘 타입 / Status icon type */
+    status?: keyof typeof statusIcons;
+    /** 아이콘 프로바이더 오버라이드 (전역 설정 무시) / Icon provider override (ignores global config) */
+    provider?: IconSet;
+    /** 부드러운 애니메이션 효과 / Smooth animation effect */
+    animated?: boolean;
+    /** 펄스 애니메이션 / Pulse animation */
+    pulse?: boolean;
+    /** 회전 애니메이션 / Spin animation */
+    spin?: boolean;
+    /** 바운스 애니메이션 / Bounce animation */
+    bounce?: boolean;
+    /** 색상 변형 / Color variant */
+    variant?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'muted';
+    /** Phosphor 아이콘 weight 오버라이드 / Phosphor icon weight override */
+    weight?: PhosphorWeight;
+    /** 스크린 리더용 라벨 (의미 있는 아이콘인 경우) / Screen reader label (for meaningful icons) */
+    'aria-label'?: string;
+    /** 장식용 아이콘인 경우 true (스크린 리더에서 숨김) / Set to true for decorative icons (hidden from screen readers) */
+    'aria-hidden'?: boolean;
+}
+/**
+ * Icon 컴포넌트
+ *
+ * 다중 아이콘 라이브러리(Lucide, Phosphor, Untitled)를 지원하는 통합 아이콘 컴포넌트입니다.
+ * IconProvider를 통해 전역 설정을 관리할 수 있으며, 개별 아이콘에서도 설정을 오버라이드할 수 있습니다.
+ *
+ * Icon component that supports multiple icon libraries (Lucide, Phosphor, Untitled).
+ * Global settings can be managed through IconProvider, and individual icons can override settings.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // 기본 사용 / Basic usage
+ * <Icon name="heart" />
+ *
+ * // 크기 지정 / Specify size
+ * <Icon name="user" size={24} />
+ *
+ * // 색상 변형 / Color variant
+ * <Icon name="check" variant="success" />
+ *
+ * // 애니메이션 / Animation
+ * <Icon name="loader" spin />
+ * <Icon name="heart" pulse />
+ *
+ * // 접근성 / Accessibility
+ * <Icon name="search" aria-label="검색" />
+ * <Icon name="decorative-icon" aria-hidden />
+ *
+ * // 감정 아이콘 / Emotion icon
+ * <Icon emotion="happy" />
+ *
+ * // 상태 아이콘 / Status icon
+ * <Icon status="loading" spin />
+ * ```
+ *
+ * @param props - Icon 컴포넌트 props / Icon component props
+ * @returns Icon 컴포넌트 / Icon component
+ */
+declare const IconComponent: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const Icon: typeof IconComponent;
+/**
+ * EmotionIcon 컴포넌트
+ *
+ * 감정을 표현하는 아이콘 컴포넌트입니다.
+ * Icon component for expressing emotions.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <EmotionIcon emotion="happy" />
+ * <EmotionIcon emotion="sad" size={24} />
+ * ```
+ */
+export declare const EmotionIcon: React.ForwardRefExoticComponent<Omit<IconProps, "name"> & {
+    emotion: keyof typeof emotionIcons;
+} & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * StatusIcon 컴포넌트
+ *
+ * 상태를 표현하는 아이콘 컴포넌트입니다.
+ * Icon component for expressing status.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <StatusIcon status="loading" spin />
+ * <StatusIcon status="success" variant="success" />
+ * ```
+ */
+export declare const StatusIcon: React.ForwardRefExoticComponent<Omit<IconProps, "name"> & {
+    status: keyof typeof statusIcons;
+} & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * LoadingIcon 컴포넌트
+ *
+ * 로딩 상태를 표시하는 전용 아이콘 컴포넌트입니다.
+ * Dedicated icon component for displaying loading status.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <LoadingIcon />
+ * <LoadingIcon size={32} />
+ * ```
+ */
+export declare const LoadingIcon: React.ForwardRefExoticComponent<Omit<IconProps, "name" | "status"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * SuccessIcon 컴포넌트
+ *
+ * 성공 상태를 표시하는 전용 아이콘 컴포넌트입니다.
+ * Dedicated icon component for displaying success status.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <SuccessIcon />
+ * <SuccessIcon size={24} />
+ * ```
+ */
+export declare const SuccessIcon: React.ForwardRefExoticComponent<Omit<IconProps, "name" | "status"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * ErrorIcon 컴포넌트
+ *
+ * 에러 상태를 표시하는 전용 아이콘 컴포넌트입니다.
+ * Dedicated icon component for displaying error status.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ErrorIcon />
+ * <ErrorIcon size={24} />
+ * ```
+ */
+export declare const ErrorIcon: React.ForwardRefExoticComponent<Omit<IconProps, "name" | "status"> & React.RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=Icon.d.ts.map