@hua-labs/ui 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 HUA Labs Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE. 

package/README.md

@@ -0,0 +1,363 @@
+# @hua-labs/ui 🎨
+
+**HUA Labs의 모던 React UI 컴포넌트 라이브러리**
+
+Beautiful, accessible, and customizable components for React applications.
+
+## ✨ 주요 기능
+
+### 🎯 **15개의 핵심 컴포넌트**
+- **기본 UI**: Accordion, BottomSheet, Drawer, ConfirmModal, ScrollArea, Icon, Breadcrumb
+- **테마**: ThemeProvider, ThemeToggle
+- **스크롤**: ScrollToTop, ScrollIndicator, ScrollProgress
+- **전환**: PageTransition
+- **감정**: ChatMessage, EmotionAnalysis, EmotionSelector
+
+### 🌙 **다크모드 지원**
+- 자동 테마 감지
+- 수동 테마 전환
+- 일관된 디자인 시스템
+
+### ♿ **접근성 고려**
+- ARIA 속성 지원
+- 키보드 네비게이션
+- 스크린 리더 호환
+
+### 📱 **반응형 디자인**
+- 모든 디바이스에서 완벽한 경험
+- 모바일 우선 설계
+
+## 🚀 시작하기
+
+### 설치
+
+```bash
+npm install @hua-labs/ui
+# or
+yarn add @hua-labs/ui
+# or
+pnpm add @hua-labs/ui
+```
+
+### 기본 사용법
+
+```tsx
+import { Accordion, ThemeProvider } from '@hua-labs/ui';
+
+function App() {
+  return (
+    <ThemeProvider>
+      <Accordion type="single" collapsible>
+        <AccordionItem value="item-1">
+          <AccordionTrigger>아코디언 제목</AccordionTrigger>
+          <AccordionContent>
+            아코디언 내용입니다.
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </ThemeProvider>
+  );
+}
+```
+
+## 📚 컴포넌트 가이드
+
+### Accordion (아코디언)
+
+```tsx
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@hua-labs/ui';
+
+<Accordion type="single" collapsible>
+  <AccordionItem value="item-1">
+    <AccordionTrigger>첫 번째 항목</AccordionTrigger>
+    <AccordionContent>첫 번째 항목의 내용</AccordionContent>
+  </AccordionItem>
+  <AccordionItem value="item-2">
+    <AccordionTrigger>두 번째 항목</AccordionTrigger>
+    <AccordionContent>두 번째 항목의 내용</AccordionContent>
+  </AccordionItem>
+</Accordion>
+```
+
+### ThemeProvider & ThemeToggle
+
+```tsx
+import { ThemeProvider, ThemeToggle } from '@hua-labs/ui';
+
+function App() {
+  return (
+    <ThemeProvider>
+      <div>
+        <ThemeToggle />
+        {/* 다른 컴포넌트들 */}
+      </div>
+    </ThemeProvider>
+  );
+}
+```
+
+### BottomSheet (바텀시트)
+
+```tsx
+import { BottomSheet } from '@hua-labs/ui';
+
+function MyComponent() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <BottomSheet 
+      isOpen={isOpen} 
+      onClose={() => setIsOpen(false)}
+    >
+      <div className="p-6">
+        <h2>바텀시트 제목</h2>
+        <p>바텀시트 내용입니다.</p>
+      </div>
+    </BottomSheet>
+  );
+}
+```
+
+## 🎨 테마 커스터마이징
+
+### CSS 변수 사용
+
+```css
+:root {
+  --hua-primary: #3b82f6;
+  --hua-secondary: #64748b;
+  --hua-accent: #f59e0b;
+  --hua-background: #ffffff;
+  --hua-foreground: #0f172a;
+}
+
+[data-theme="dark"] {
+  --hua-background: #0f172a;
+  --hua-foreground: #f8fafc;
+}
+```
+
+## 🔧 개발
+
+### 빌드
+
+```bash
+pnpm build
+```
+
+### 개발 모드
+
+```bash
+pnpm dev
+```
+
+### 타입 체크
+
+```bash
+pnpm type-check
+```
+
+## 📄 라이선스
+
+MIT License - 자유롭게 사용하세요!
+
+## 🤝 기여하기
+
+1. **Fork** 프로젝트
+2. **Feature branch** 생성 (`git checkout -b feature/amazing-feature`)
+3. **Commit** 변경사항 (`git commit -m 'Add amazing feature'`)
+4. **Push** 브랜치 (`git push origin feature/amazing-feature`)
+5. **Pull Request** 생성
+
+## 🔗 관련 링크
+
+- [HUA Labs 공식 사이트](https://hua-labs.com)
+- [UI 컴포넌트 갤러리](https://ui.hua-labs.com)
+- [GitHub 저장소](https://github.com/HUA-Labs/HUA-Labs-public)
+
+---
+
+**HUA Labs**에서 제작되었습니다. 🚀
+
+---
+
+# @hua-labs/ui 🎨
+
+**HUA Labs' Modern React UI Component Library**
+
+Beautiful, accessible, and customizable components for React applications.
+
+## ✨ Key Features
+
+### 🎯 **15 Core Components**
+- **Basic UI**: Accordion, BottomSheet, Drawer, ConfirmModal, ScrollArea, Icon, Breadcrumb
+- **Theme**: ThemeProvider, ThemeToggle
+- **Scroll**: ScrollToTop, ScrollIndicator, ScrollProgress
+- **Transition**: PageTransition
+- **Emotion**: ChatMessage, EmotionAnalysis, EmotionSelector
+
+### 🌙 **Dark Mode Support**
+- Automatic theme detection
+- Manual theme switching
+- Consistent design system
+
+### ♿ **Accessibility**
+- ARIA attributes support
+- Keyboard navigation
+- Screen reader compatibility
+
+### 📱 **Responsive Design**
+- Perfect experience on all devices
+- Mobile-first design
+
+## 🚀 Getting Started
+
+### Installation
+
+```bash
+npm install @hua-labs/ui
+# or
+yarn add @hua-labs/ui
+# or
+pnpm add @hua-labs/ui
+```
+
+### Basic Usage
+
+```tsx
+import { Accordion, ThemeProvider } from '@hua-labs/ui';
+
+function App() {
+  return (
+    <ThemeProvider>
+      <Accordion type="single" collapsible>
+        <AccordionItem value="item-1">
+          <AccordionTrigger>Accordion Title</AccordionTrigger>
+          <AccordionContent>
+            Accordion content here.
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </ThemeProvider>
+  );
+}
+```
+
+## 📚 Component Guide
+
+### Accordion
+
+```tsx
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@hua-labs/ui';
+
+<Accordion type="single" collapsible>
+  <AccordionItem value="item-1">
+    <AccordionTrigger>First Item</AccordionTrigger>
+    <AccordionContent>First item content</AccordionContent>
+  </AccordionItem>
+  <AccordionItem value="item-2">
+    <AccordionTrigger>Second Item</AccordionTrigger>
+    <AccordionContent>Second item content</AccordionContent>
+  </AccordionItem>
+</Accordion>
+```
+
+### ThemeProvider & ThemeToggle
+
+```tsx
+import { ThemeProvider, ThemeToggle } from '@hua-labs/ui';
+
+function App() {
+  return (
+    <ThemeProvider>
+      <div>
+        <ThemeToggle />
+        {/* Other components */}
+      </div>
+    </ThemeProvider>
+  );
+}
+```
+
+### BottomSheet
+
+```tsx
+import { BottomSheet } from '@hua-labs/ui';
+
+function MyComponent() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <BottomSheet 
+      isOpen={isOpen} 
+      onClose={() => setIsOpen(false)}
+    >
+      <div className="p-6">
+        <h2>Bottom Sheet Title</h2>
+        <p>Bottom sheet content here.</p>
+      </div>
+    </BottomSheet>
+  );
+}
+```
+
+## 🎨 Theme Customization
+
+### Using CSS Variables
+
+```css
+:root {
+  --hua-primary: #3b82f6;
+  --hua-secondary: #64748b;
+  --hua-accent: #f59e0b;
+  --hua-background: #ffffff;
+  --hua-foreground: #0f172a;
+}
+
+[data-theme="dark"] {
+  --hua-background: #0f172a;
+  --hua-foreground: #f8fafc;
+}
+```
+
+## 🔧 Development
+
+### Build
+
+```bash
+pnpm build
+```
+
+### Development Mode
+
+```bash
+pnpm dev
+```
+
+### Type Check
+
+```bash
+pnpm type-check
+```
+
+## 📄 License
+
+MIT License - Feel free to use!
+
+## 🤝 Contributing
+
+1. **Fork** the project
+2. **Create** feature branch (`git checkout -b feature/amazing-feature`)
+3. **Commit** changes (`git commit -m 'Add amazing feature'`)
+4. **Push** branch (`git push origin feature/amazing-feature`)
+5. **Create** Pull Request
+
+## 🔗 Links
+
+- [HUA Labs Official Site](https://hua-labs.com)
+- [UI Component Gallery](https://ui.hua-labs.com)
+- [GitHub Repository](https://github.com/HUA-Labs/HUA-Labs-public)
+
+---
+
+**Made with ❤️ by HUA Labs** 🚀 

package/dist/components/Accordion.d.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+interface AccordionProps {
+    children: React.ReactNode;
+    className?: string;
+    type?: "single" | "multiple";
+    defaultValue?: string | string[];
+    value?: string | string[];
+    onValueChange?: (value: string | string[]) => void;
+    collapsible?: boolean;
+}
+declare const Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>;
+interface AccordionItemProps {
+    value: string;
+    children: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+    openItems?: string[];
+    onToggle?: (value: string) => void;
+}
+declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
+interface AccordionTriggerProps {
+    children: React.ReactNode;
+    className?: string;
+    icon?: React.ReactNode;
+    iconPosition?: "left" | "right";
+    value?: string;
+    isOpen?: boolean;
+    disabled?: boolean;
+    onToggle?: () => void;
+}
+declare const AccordionTrigger: React.ForwardRefExoticComponent<AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+interface AccordionContentProps {
+    children: React.ReactNode;
+    className?: string;
+    isOpen?: boolean;
+}
+declare const AccordionContent: React.ForwardRefExoticComponent<AccordionContentProps & React.RefAttributes<HTMLDivElement>>;
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
+//# sourceMappingURL=Accordion.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../src/components/Accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,UAAU,cAAc;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAA;IAC5B,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAChC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IACzB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAA;IAClD,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED,QAAA,MAAM,SAAS,uFA8Dd,CAAA;AAGD,UAAU,kBAAkB;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAA;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC;AAED,QAAA,MAAM,aAAa,2FAqClB,CAAA;AAGD,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAED,QAAA,MAAM,gBAAgB,iGAyCrB,CAAA;AAGD,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,QAAA,MAAM,gBAAgB,8FA+BrB,CAAA;AAGD,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/Accordion.js

@@ -0,0 +1,84 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { Icon } from "./Icon";
+const Accordion = React.forwardRef(({ children, className, type = "single", defaultValue, value, onValueChange, collapsible = false, ...props }, ref) => {
+    const [openItems, setOpenItems] = React.useState(value ? (Array.isArray(value) ? value : [value]) :
+        defaultValue ? (Array.isArray(defaultValue) ? defaultValue : [defaultValue]) : []);
+    React.useEffect(() => {
+        if (value !== undefined) {
+            setOpenItems(Array.isArray(value) ? value : [value]);
+        }
+    }, [value]);
+    const handleItemToggle = (itemValue) => {
+        let newOpenItems;
+        if (type === "single") {
+            if (openItems.includes(itemValue)) {
+                newOpenItems = collapsible ? [] : openItems;
+            }
+            else {
+                newOpenItems = [itemValue];
+            }
+        }
+        else {
+            if (openItems.includes(itemValue)) {
+                newOpenItems = openItems.filter(item => item !== itemValue);
+            }
+            else {
+                newOpenItems = [...openItems, itemValue];
+            }
+        }
+        setOpenItems(newOpenItems);
+        onValueChange?.(type === "single" ? newOpenItems[0] || "" : newOpenItems);
+    };
+    return (_jsx("div", { ref: ref, className: cn("space-y-2", className), ...props, children: React.Children.map(children, (child) => {
+            if (React.isValidElement(child)) {
+                return React.cloneElement(child, {
+                    openItems,
+                    onToggle: handleItemToggle,
+                    ...child.props
+                });
+            }
+            return child;
+        }) }));
+});
+Accordion.displayName = "Accordion";
+const AccordionItem = React.forwardRef(({ value, children, className, disabled = false, openItems = [], onToggle, ...props }, ref) => {
+    const isOpen = openItems.includes(value);
+    return (_jsx("div", { ref: ref, className: cn("border border-gray-200/50 dark:border-gray-700/50 rounded-lg overflow-hidden", disabled && "opacity-50 pointer-events-none", className), ...props, children: React.Children.map(children, (child) => {
+            if (React.isValidElement(child)) {
+                return React.cloneElement(child, {
+                    value,
+                    isOpen,
+                    disabled,
+                    onToggle: () => onToggle?.(value),
+                    ...child.props
+                });
+            }
+            return child;
+        }) }));
+});
+AccordionItem.displayName = "AccordionItem";
+const AccordionTrigger = React.forwardRef(({ children, className, icon, iconPosition = "right", isOpen = false, disabled = false, onToggle, ...props }, ref) => {
+    const defaultIcon = (_jsx(Icon, { name: "chevronDown", size: 20, className: cn("transition-transform duration-300 ease-out", isOpen && "rotate-180") }));
+    return (_jsxs("button", { ref: ref, onClick: onToggle, disabled: disabled, className: cn("flex w-full items-center justify-between px-6 py-4 text-left font-medium transition-all hover:bg-gray-50/80 dark:hover:bg-gray-800/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", className), ...props, children: [_jsxs("div", { className: "flex items-center gap-3 flex-1", children: [iconPosition === "left" && (icon || defaultIcon), _jsx("span", { className: "flex-1", children: children })] }), iconPosition === "right" && (icon || defaultIcon)] }));
+});
+AccordionTrigger.displayName = "AccordionTrigger";
+const AccordionContent = React.forwardRef(({ children, className, isOpen = false, ...props }, ref) => {
+    const [height, setHeight] = React.useState(0);
+    const contentRef = React.useRef(null);
+    React.useEffect(() => {
+        if (contentRef.current) {
+            if (isOpen) {
+                setHeight(contentRef.current.scrollHeight);
+            }
+            else {
+                setHeight(0);
+            }
+        }
+    }, [isOpen, children]);
+    return (_jsx("div", { ref: ref, className: "overflow-hidden transition-all duration-300 ease-out", style: { height: `${height}px` }, ...props, children: _jsx("div", { ref: contentRef, className: cn("px-6 pb-4", className), children: children }) }));
+});
+AccordionContent.displayName = "AccordionContent";
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/dist/components/Alert.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: "default" | "success" | "warning" | "error" | "info";
+    title?: string;
+    description?: string;
+    icon?: React.ReactNode;
+    action?: React.ReactNode;
+    closable?: boolean;
+    onClose?: () => void;
+}
+declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
+export declare const AlertSuccess: React.ForwardRefExoticComponent<Omit<AlertProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
+export declare const AlertWarning: React.ForwardRefExoticComponent<Omit<AlertProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
+export declare const AlertError: React.ForwardRefExoticComponent<Omit<AlertProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
+export declare const AlertInfo: React.ForwardRefExoticComponent<Omit<AlertProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
+export { Alert };
+//# sourceMappingURL=Alert.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../src/components/Alert.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtE,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAED,QAAA,MAAM,KAAK,mFAuIV,CAAA;AAID,eAAO,MAAM,YAAY,oGAIxB,CAAA;AAGD,eAAO,MAAM,YAAY,oGAIxB,CAAA;AAGD,eAAO,MAAM,UAAU,oGAItB,CAAA;AAGD,eAAO,MAAM,SAAS,oGAIrB,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/components/Alert.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { cn } from "../lib/utils";
+const Alert = React.forwardRef(({ className, variant = "default", title, description, icon, action, closable = false, onClose, children, ...props }, ref) => {
+    const getVariantClasses = () => {
+        switch (variant) {
+            case "success":
+                return "bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800 text-green-800 dark:text-green-200";
+            case "warning":
+                return "bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800 text-yellow-800 dark:text-yellow-200";
+            case "error":
+                return "bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800 text-red-800 dark:text-red-200";
+            case "info":
+                return "bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800 text-blue-800 dark:text-blue-200";
+            default:
+                return "bg-gray-50 dark:bg-gray-900/20 border-gray-200 dark:border-gray-800 text-gray-800 dark:text-gray-200";
+        }
+    };
+    const getIconClasses = () => {
+        switch (variant) {
+            case "success":
+                return "text-green-500 dark:text-green-400";
+            case "warning":
+                return "text-yellow-500 dark:text-yellow-400";
+            case "error":
+                return "text-red-500 dark:text-red-400";
+            case "info":
+                return "text-blue-500 dark:text-blue-400";
+            default:
+                return "text-gray-500 dark:text-gray-400";
+        }
+    };
+    const getDefaultIcon = () => {
+        switch (variant) {
+            case "success":
+                return (_jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }));
+            case "warning":
+                return (_jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" }) }));
+            case "error":
+                return (_jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }));
+            case "info":
+                return (_jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }));
+            default:
+                return null;
+        }
+    };
+    return (_jsx("div", { ref: ref, className: cn("relative rounded-lg border p-4", // 16px 패딩
+        getVariantClasses(), className), ...props, children: _jsxs("div", { className: "flex items-start gap-3", children: [" ", (icon || getDefaultIcon()) && (_jsx("div", { className: cn("flex-shrink-0 mt-0.5", getIconClasses()), children: icon || getDefaultIcon() })), _jsxs("div", { className: "flex-1 min-w-0", children: [title && (_jsxs("h4", { className: "text-sm font-semibold mb-1", children: [" ", title] })), description && (_jsx("p", { className: "text-sm leading-relaxed", children: description })), children && (_jsxs("div", { className: "mt-2", children: [" ", children] }))] }), (action || closable) && (_jsxs("div", { className: "flex-shrink-0 flex items-center gap-2", children: [" ", action, closable && (_jsx("button", { onClick: onClose, className: cn("inline-flex rounded-md p-1.5 focus:outline-none focus:ring-2 focus:ring-offset-2 transition-all duration-200 hover:bg-black/5 dark:hover:bg-white/5", getIconClasses()), "aria-label": "\uB2EB\uAE30", children: _jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }))] }))] }) }));
+});
+Alert.displayName = "Alert";
+// 편의 컴포넌트들
+export const AlertSuccess = React.forwardRef(({ className, ...props }, ref) => (_jsx(Alert, { ref: ref, variant: "success", className: className, ...props })));
+AlertSuccess.displayName = "AlertSuccess";
+export const AlertWarning = React.forwardRef(({ className, ...props }, ref) => (_jsx(Alert, { ref: ref, variant: "warning", className: className, ...props })));
+AlertWarning.displayName = "AlertWarning";
+export const AlertError = React.forwardRef(({ className, ...props }, ref) => (_jsx(Alert, { ref: ref, variant: "error", className: className, ...props })));
+AlertError.displayName = "AlertError";
+export const AlertInfo = React.forwardRef(({ className, ...props }, ref) => (_jsx(Alert, { ref: ref, variant: "info", className: className, ...props })));
+AlertInfo.displayName = "AlertInfo";
+export { Alert };

package/dist/components/Avatar.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+    size?: "sm" | "md" | "lg";
+}
+export interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+}
+export interface AvatarFallbackProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
+declare const AvatarImage: React.ForwardRefExoticComponent<AvatarImageProps & React.RefAttributes<HTMLImageElement>>;
+declare const AvatarFallback: React.ForwardRefExoticComponent<AvatarFallbackProps & React.RefAttributes<HTMLDivElement>>;
+export { Avatar, AvatarImage, AvatarFallback };
+//# sourceMappingURL=Avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/components/Avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACvE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAC1B;AAED,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC;CAAG;AAEtF,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEpF,QAAA,MAAM,MAAM,oFAoBX,CAAA;AAGD,QAAA,MAAM,WAAW,2FAQhB,CAAA;AAGD,QAAA,MAAM,cAAc,4FAWnB,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/Avatar.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/utils";
+const Avatar = React.forwardRef(({ className, size = "md", ...props }, ref) => {
+    const sizeClasses = {
+        sm: "w-8 h-8",
+        md: "w-10 h-10",
+        lg: "w-12 h-12"
+    };
+    return (_jsx("div", { ref: ref, className: cn("relative flex shrink-0 overflow-hidden rounded-full", sizeClasses[size], className), ...props }));
+});
+Avatar.displayName = "Avatar";
+const AvatarImage = React.forwardRef(({ className, ...props }, ref) => (_jsx("img", { ref: ref, className: cn("aspect-square h-full w-full", className), ...props })));
+AvatarImage.displayName = "AvatarImage";
+const AvatarFallback = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex h-full w-full items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800", className), ...props })));
+AvatarFallback.displayName = "AvatarFallback";
+export { Avatar, AvatarImage, AvatarFallback };

package/dist/components/Badge.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: "default" | "secondary" | "destructive" | "outline";
+}
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>;
+export { Badge };
+//# sourceMappingURL=Badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/components/Badge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtE,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,aAAa,GAAG,SAAS,CAAA;CAC9D;AAED,QAAA,MAAM,KAAK,mFAqBV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/components/Badge.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { cn } from "../lib/utils";
+const Badge = React.forwardRef(({ className, variant = "default", ...props }, ref) => {
+    const variantClasses = {
+        default: "bg-gray-900 text-gray-50 hover:bg-gray-900/80 dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-50/80",
+        secondary: "bg-gray-100 text-gray-900 hover:bg-gray-100/80 dark:bg-gray-800 dark:text-gray-50 dark:hover:bg-gray-800/80",
+        destructive: "bg-red-500 text-gray-50 hover:bg-red-500/80 dark:bg-red-900 dark:text-gray-50 dark:hover:bg-red-900/80",
+        outline: "text-gray-950 border border-gray-200 hover:bg-gray-100 hover:text-gray-900 dark:border-gray-800 dark:text-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-50"
+    };
+    return (_jsx("div", { ref: ref, className: cn("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2", variantClasses[variant], className), ...props }));
+});
+Badge.displayName = "Badge";
+export { Badge };