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

package/dist/interactive.d.mts

@@ -0,0 +1,602 @@
+import React from 'react';
+
+/**
+ * Accordion 컴포넌트의 props / Accordion component props
+ * @typedef {Object} AccordionProps
+ * @property {React.ReactNode} children - AccordionItem 컴포넌트들 / AccordionItem components
+ * @property {string} [className] - 추가 CSS 클래스 / Additional CSS class
+ * @property {"single" | "multiple"} [type="single"] - 단일 또는 다중 아이템 열기 허용 / Allow single or multiple items to be open
+ * @property {string | string[]} [defaultValue] - 초기 열린 아이템 값 (비제어 컴포넌트) / Initial open item value (uncontrolled component)
+ * @property {string | string[]} [value] - 현재 열린 아이템 값 (제어 컴포넌트) / Current open item value (controlled component)
+ * @property {(value: string | string[]) => void} [onValueChange] - 아이템 열림/닫힘 콜백 / Item open/close callback
+ * @property {boolean} [collapsible=false] - 단일 모드에서 열린 아이템을 닫을 수 있는지 여부 / Whether open item can be closed in single mode
+ */
+interface AccordionProps {
+    children: React.ReactNode;
+    className?: string;
+    type?: "single" | "multiple";
+    defaultValue?: string | string[];
+    value?: string | string[];
+    onValueChange?: (value: string | string[]) => void;
+    collapsible?: boolean;
+}
+/**
+ * Accordion 컴포넌트 / Accordion component
+ *
+ * 접을 수 있는 콘텐츠 섹션을 제공하는 컴포넌트입니다.
+ * 키보드 네비게이션(Arrow keys, Home/End)을 지원하며, ARIA 속성을 자동으로 설정합니다.
+ *
+ * Component that provides collapsible content sections.
+ * Supports keyboard navigation (Arrow keys, Home/End) and automatically sets ARIA attributes.
+ *
+ * @component
+ * @example
+ * // 기본 사용 (단일 열기) / Basic usage (single open)
+ * <Accordion type="single">
+ *   <AccordionItem value="item1">
+ *     <AccordionTrigger>제목 1</AccordionTrigger>
+ *     <AccordionContent>내용 1</AccordionContent>
+ *   </AccordionItem>
+ *   <AccordionItem value="item2">
+ *     <AccordionTrigger>제목 2</AccordionTrigger>
+ *     <AccordionContent>내용 2</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ *
+ * @example
+ * // 다중 열기 / Multiple open
+ * <Accordion type="multiple" defaultValue={["item1", "item2"]}>
+ *   <AccordionItem value="item1">
+ *     <AccordionTrigger>제목 1</AccordionTrigger>
+ *     <AccordionContent>내용 1</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ *
+ * @example
+ * // 제어 컴포넌트 / Controlled component
+ * const [openItems, setOpenItems] = useState<string[]>([])
+ * <Accordion type="multiple" value={openItems} onValueChange={setOpenItems}>
+ *   <AccordionItem value="item1">
+ *     <AccordionTrigger>제목</AccordionTrigger>
+ *     <AccordionContent>내용</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ *
+ * @param {AccordionProps} props - Accordion 컴포넌트의 props / Accordion component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} Accordion 컴포넌트 / Accordion component
+ */
+declare const Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * AccordionItem 컴포넌트의 props / AccordionItem component props
+ * @typedef {Object} AccordionItemProps
+ * @property {string} value - 아이템의 고유 값 / Item unique value
+ * @property {React.ReactNode} children - AccordionTrigger와 AccordionContent / AccordionTrigger and AccordionContent
+ * @property {string} [className] - 추가 CSS 클래스 / Additional CSS class
+ * @property {boolean} [disabled=false] - 아이템 비활성화 여부 / Item disabled state
+ * @property {string[]} [openItems] - 열린 아이템 목록 (Accordion에서 자동 전달) / Open items list (auto-passed from Accordion)
+ * @property {(value: string) => void} [onToggle] - 토글 콜백 (Accordion에서 자동 전달) / Toggle callback (auto-passed from Accordion)
+ */
+interface AccordionItemProps {
+    value: string;
+    children: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+    openItems?: string[];
+    onToggle?: (value: string) => void;
+}
+/**
+ * AccordionItem 컴포넌트 / AccordionItem component
+ * 아코디언의 개별 아이템을 감싸는 컨테이너입니다.
+ * Container that wraps an individual accordion item.
+ *
+ * @component
+ * @param {AccordionItemProps} props - AccordionItem 컴포넌트의 props / AccordionItem component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} AccordionItem 컴포넌트 / AccordionItem component
+ */
+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>>;
+/**
+ * AccordionTrigger 컴포넌트 / AccordionTrigger component
+ * 아코디언 아이템을 열고 닫는 트리거 버튼입니다.
+ * Button that opens and closes an accordion item.
+ *
+ * @component
+ * @param {AccordionTriggerProps} props - AccordionTrigger 컴포넌트의 props / AccordionTrigger component props
+ * @param {React.Ref<HTMLButtonElement>} ref - button 요소 ref / button element ref
+ * @returns {JSX.Element} AccordionTrigger 컴포넌트 / AccordionTrigger component
+ */
+/**
+ * AccordionContent 컴포넌트의 props
+ * @typedef {Object} AccordionContentProps
+ * @property {React.ReactNode} children - 콘텐츠
+ * @property {string} [className] - 추가 CSS 클래스
+ * @property {boolean} [isOpen] - 열림 상태 (AccordionItem에서 자동 전달)
+ * @property {string} [value] - 아이템 값 (AccordionItem에서 자동 전달)
+ * @property {string} ['data-accordion-value'] - 아이템 값 (내부 사용)
+ */
+interface AccordionContentProps {
+    children: React.ReactNode;
+    className?: string;
+    isOpen?: boolean;
+    value?: string;
+    'data-accordion-value'?: string;
+}
+/**
+ * AccordionContent 컴포넌트 / AccordionContent component
+ * 아코디언 아이템의 콘텐츠를 표시합니다.
+ * Displays the content of an accordion item.
+ *
+ * @component
+ * @param {AccordionContentProps} props - AccordionContent 컴포넌트의 props / AccordionContent component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} AccordionContent 컴포넌트 / AccordionContent component
+ */
+declare const AccordionContent: React.ForwardRefExoticComponent<AccordionContentProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * TabsContent 컴포넌트의 props / TabsContent component props
+ * @typedef {Object} TabsContentProps
+ * @property {string} value - 탭 패널의 고유 값 (TabsTrigger의 value와 일치해야 함) / Unique value for tab panel (must match TabsTrigger value)
+ * @property {boolean} [active] - 탭 패널 활성화 상태 (자동 설정됨) / Tab panel active state (auto-set)
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    value: string;
+    active?: boolean;
+}
+/**
+ * TabsContent 컴포넌트 / TabsContent component
+ * 탭의 콘텐츠 패널을 표시합니다. Tabs 컴포넌트 내부에서 사용됩니다.
+ * Displays the tab content panel. Used inside Tabs component.
+ *
+ * @component
+ * @param {TabsContentProps} props - TabsContent 컴포넌트의 props / TabsContent component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} TabsContent 컴포넌트 / TabsContent component
+ */
+declare const TabsContent: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Tabs 컴포넌트의 props / Tabs component props
+ * @typedef {Object} TabsProps
+ * @property {string} [value] - 현재 활성화된 탭 값 (제어 컴포넌트) / Currently active tab value (controlled component)
+ * @property {string} [defaultValue] - 초기 활성화된 탭 값 (비제어 컴포넌트) / Initial active tab value (uncontrolled component)
+ * @property {(value: string) => void} [onValueChange] - 탭 변경 시 호출되는 콜백 / Callback when tab changes
+ * @property {"horizontal" | "vertical"} [orientation="horizontal"] - 탭 방향 / Tab orientation
+ * @property {"default" | "pills" | "underline" | "cards"} [variant="default"] - 탭 스타일 변형 / Tab style variant
+ * @property {"sm" | "md" | "lg"} [size="md"] - 탭 크기 / Tab size
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    orientation?: "horizontal" | "vertical";
+    variant?: "default" | "pills" | "underline" | "cards";
+    size?: "sm" | "md" | "lg";
+}
+/**
+ * Tabs 컴포넌트 / Tabs component
+ *
+ * 탭 네비게이션을 제공하는 컴포넌트입니다.
+ * 키보드 네비게이션(Arrow keys, Home/End)을 지원하며, ARIA 속성을 자동으로 설정합니다.
+ *
+ * Component that provides tab navigation.
+ * Supports keyboard navigation (Arrow keys, Home/End) and automatically sets ARIA attributes.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <Tabs defaultValue="tab1">
+ *   <TabsList>
+ *     <TabsTrigger value="tab1">탭 1</TabsTrigger>
+ *     <TabsTrigger value="tab2">탭 2</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="tab1">탭 1 내용</TabsContent>
+ *   <TabsContent value="tab2">탭 2 내용</TabsContent>
+ * </Tabs>
+ *
+ * @example
+ * // 제어 컴포넌트 / Controlled component
+ * const [activeTab, setActiveTab] = useState("tab1")
+ * <Tabs value={activeTab} onValueChange={setActiveTab}>
+ *   <TabsList>
+ *     <TabsTrigger value="tab1">탭 1</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="tab1">내용</TabsContent>
+ * </Tabs>
+ *
+ * @example
+ * // 다양한 변형 / Various variants
+ * <Tabs variant="pills" size="lg">
+ *   <TabsList>
+ *     <TabsTrigger value="tab1">Pills 스타일</TabsTrigger>
+ *   </TabsList>
+ * </Tabs>
+ *
+ * @param {TabsProps} props - Tabs 컴포넌트의 props / Tabs component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} Tabs 컴포넌트 / Tabs component
+ */
+declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * TabsList 컴포넌트의 props / TabsList component props
+ * @typedef {Object} TabsListProps
+ * @property {string} [value] - 현재 활성화된 탭 값 (Tabs에서 자동 전달) / Currently active tab value (auto-passed from Tabs)
+ * @property {(value: string) => void} [onValueChange] - 탭 변경 콜백 (Tabs에서 자동 전달) / Tab change callback (auto-passed from Tabs)
+ * @property {"horizontal" | "vertical"} [orientation] - 탭 방향 (Tabs에서 자동 전달) / Tab orientation (auto-passed from Tabs)
+ * @property {"default" | "pills" | "underline" | "cards"} [variant] - 탭 스타일 (Tabs에서 자동 전달) / Tab style (auto-passed from Tabs)
+ * @property {"sm" | "md" | "lg"} [size] - 탭 크기 (Tabs에서 자동 전달) / Tab size (auto-passed from Tabs)
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {
+    value?: string;
+    onValueChange?: (value: string) => void;
+    orientation?: "horizontal" | "vertical";
+    variant?: "default" | "pills" | "underline" | "cards";
+    size?: "sm" | "md" | "lg";
+}
+/**
+ * TabsList 컴포넌트 / TabsList component
+ * 탭 트리거 목록을 표시합니다. Tabs 컴포넌트 내부에서 사용됩니다.
+ * Displays the list of tab triggers. Used inside Tabs component.
+ *
+ * @component
+ * @param {TabsListProps} props - TabsList 컴포넌트의 props / TabsList component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} TabsList 컴포넌트 / TabsList component
+ */
+declare const TabsList: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * TabsTrigger 컴포넌트의 props
+ * @typedef {Object} TabsTriggerProps
+ * @property {string} value - 탭 트리거의 고유 값 (TabsContent의 value와 일치해야 함)
+ * @property {(value: string) => void} [onValueChange] - 탭 변경 콜백 (TabsList에서 자동 전달)
+ * @property {"horizontal" | "vertical"} [orientation] - 탭 방향 (TabsList에서 자동 전달)
+ * @property {"default" | "pills" | "underline" | "cards"} [variant] - 탭 스타일 (TabsList에서 자동 전달)
+ * @property {"sm" | "md" | "lg"} [size] - 탭 크기 (TabsList에서 자동 전달)
+ * @property {boolean} [active] - 탭 활성화 상태 (자동 설정됨)
+ * @extends {React.ButtonHTMLAttributes<HTMLButtonElement>}
+ */
+interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    value: string;
+    onValueChange?: (value: string) => void;
+    orientation?: "horizontal" | "vertical";
+    variant?: "default" | "pills" | "underline" | "cards";
+    size?: "sm" | "md" | "lg";
+    active?: boolean;
+}
+/**
+ * TabsTrigger 컴포넌트 / TabsTrigger component
+ * 탭을 활성화하는 버튼입니다. TabsList 컴포넌트 내부에서 사용됩니다.
+ * Button that activates a tab. Used inside TabsList component.
+ *
+ * @component
+ * @param {TabsTriggerProps} props - TabsTrigger 컴포넌트의 props / TabsTrigger component props
+ * @param {React.Ref<HTMLButtonElement>} ref - button 요소 ref / button element ref
+ * @returns {JSX.Element} TabsTrigger 컴포넌트 / TabsTrigger component
+ */
+declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const TabsPills: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
+declare const TabsUnderline: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
+declare const TabsCards: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Menu 컴포넌트의 props / Menu component props
+ * @typedef {Object} MenuProps
+ * @property {React.ReactNode} children - MenuItem, MenuSeparator, MenuLabel 컴포넌트들 / MenuItem, MenuSeparator, MenuLabel components
+ * @property {"default" | "horizontal" | "vertical" | "compact"} [variant="default"] - 메뉴 방향 및 스타일 / Menu direction and style
+ * @property {"sm" | "md" | "lg"} [size="md"] - 메뉴 아이템 크기 / Menu item size
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface MenuProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    variant?: "default" | "horizontal" | "vertical" | "compact";
+    size?: "sm" | "md" | "lg";
+}
+/**
+ * Menu 컴포넌트 / Menu component
+ *
+ * 메뉴 리스트를 제공하는 컴포넌트입니다.
+ * MenuItem, MenuSeparator, MenuLabel과 함께 사용합니다.
+ *
+ * Component that provides menu lists.
+ * Used with MenuItem, MenuSeparator, and MenuLabel.
+ *
+ * @component
+ * @example
+ * // 기본 수직 메뉴 / Basic vertical menu
+ * <Menu>
+ *   <MenuItem icon={<Icon name="home" />}>홈</MenuItem>
+ *   <MenuItem icon={<Icon name="settings" />}>설정</MenuItem>
+ *   <MenuSeparator />
+ *   <MenuItem>로그아웃</MenuItem>
+ * </Menu>
+ *
+ * @example
+ * // 수평 메뉴 / Horizontal menu
+ * <Menu variant="horizontal">
+ *   <MenuItem>메뉴 1</MenuItem>
+ *   <MenuItem>메뉴 2</MenuItem>
+ * </Menu>
+ *
+ * @param {MenuProps} props - Menu 컴포넌트의 props / Menu component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} Menu 컴포넌트 / Menu component
+ */
+declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * MenuItem 컴포넌트의 props / MenuItem component props
+ * @typedef {Object} MenuItemProps
+ * @property {React.ReactNode} [icon] - 메뉴 아이템 아이콘 / Menu item icon
+ * @property {"default" | "horizontal" | "vertical" | "compact"} [variant] - 메뉴 변형 (Menu에서 자동 전달) / Menu variant (auto-passed from Menu)
+ * @property {"sm" | "md" | "lg"} [size] - 메뉴 크기 (Menu에서 자동 전달) / Menu size (auto-passed from Menu)
+ * @property {boolean} [active=false] - 활성화 상태 / Active state
+ * @property {boolean} [disabled=false] - 비활성화 상태 / Disabled state
+ * @extends {React.ButtonHTMLAttributes<HTMLButtonElement>}
+ */
+interface MenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    icon?: React.ReactNode;
+    variant?: "default" | "horizontal" | "vertical" | "compact";
+    size?: "sm" | "md" | "lg";
+    active?: boolean;
+    disabled?: boolean;
+}
+/**
+ * MenuItem 컴포넌트 / MenuItem component
+ * 메뉴의 개별 아이템을 표시합니다.
+ * Displays an individual menu item.
+ *
+ * @component
+ * @param {MenuItemProps} props - MenuItem 컴포넌트의 props / MenuItem component props
+ * @param {React.Ref<HTMLButtonElement>} ref - button 요소 ref / button element ref
+ * @returns {JSX.Element} MenuItem 컴포넌트 / MenuItem component
+ */
+declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * MenuSeparator 컴포넌트의 props / MenuSeparator component props
+ * @typedef {Object} MenuSeparatorProps
+ * @property {"default" | "horizontal" | "vertical" | "compact"} [variant] - 메뉴 변형 (Menu에서 자동 전달) / Menu variant (auto-passed from Menu)
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface MenuSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: "default" | "horizontal" | "vertical" | "compact";
+}
+/**
+ * MenuSeparator 컴포넌트 / MenuSeparator component
+ * 메뉴 아이템들을 구분하는 구분선을 표시합니다.
+ * Displays a separator line between menu items.
+ *
+ * @component
+ * @param {MenuSeparatorProps} props - MenuSeparator 컴포넌트의 props / MenuSeparator component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} MenuSeparator 컴포넌트 / MenuSeparator component
+ */
+declare const MenuSeparator: React.ForwardRefExoticComponent<MenuSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * MenuLabel 컴포넌트의 props / MenuLabel component props
+ * @typedef {Object} MenuLabelProps
+ * @property {"default" | "horizontal" | "vertical" | "compact"} [variant] - 메뉴 변형 (Menu에서 자동 전달) / Menu variant (auto-passed from Menu)
+ * @property {"sm" | "md" | "lg"} [size] - 메뉴 크기 (Menu에서 자동 전달) / Menu size (auto-passed from Menu)
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface MenuLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: "default" | "horizontal" | "vertical" | "compact";
+    size?: "sm" | "md" | "lg";
+}
+/**
+ * MenuLabel 컴포넌트 / MenuLabel component
+ * 메뉴 섹션의 레이블을 표시합니다.
+ * Displays a label for a menu section.
+ *
+ * @component
+ * @param {MenuLabelProps} props - MenuLabel 컴포넌트의 props / MenuLabel component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} MenuLabel 컴포넌트 / MenuLabel component
+ */
+declare const MenuLabel: React.ForwardRefExoticComponent<MenuLabelProps & React.RefAttributes<HTMLDivElement>>;
+declare const MenuHorizontal: React.ForwardRefExoticComponent<Omit<MenuProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
+declare const MenuVertical: React.ForwardRefExoticComponent<Omit<MenuProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
+declare const MenuCompact: React.ForwardRefExoticComponent<Omit<MenuProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * ContextMenu 컴포넌트의 props / ContextMenu component props
+ * @typedef {Object} ContextMenuProps
+ * @property {React.ReactNode} children - ContextMenu 내용 / ContextMenu content
+ * @property {boolean} [open] - 제어 모드에서 열림/닫힘 상태 / Open/close state in controlled mode
+ * @property {(open: boolean) => void} [onOpenChange] - 상태 변경 콜백 / State change callback
+ * @property {React.ReactNode} [trigger] - ContextMenu를 열기 위한 트리거 요소 (우클릭 이벤트) / Trigger element to open context menu (right-click event)
+ * @property {"top" | "bottom" | "left" | "right"} [placement="bottom"] - ContextMenu 표시 위치 / ContextMenu display position
+ * @property {"start" | "center" | "end"} [align="start"] - ContextMenu 정렬 / ContextMenu alignment
+ * @property {number} [offset=8] - 트리거와 ContextMenu 사이 간격 (px) / Spacing between trigger and context menu (px)
+ * @property {boolean} [disabled=false] - ContextMenu 비활성화 여부 / Disable context menu
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface ContextMenuProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    trigger?: React.ReactNode;
+    placement?: "top" | "bottom" | "left" | "right";
+    align?: "start" | "center" | "end";
+    offset?: number;
+    disabled?: boolean;
+}
+/**
+ * ContextMenu 컴포넌트 / ContextMenu component
+ *
+ * 우클릭 시 표시되는 컨텍스트 메뉴 컴포넌트입니다.
+ * 트리거 요소에 우클릭 이벤트를 자동으로 연결합니다.
+ *
+ * Context menu component that appears on right-click.
+ * Automatically connects right-click events to the trigger element.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <ContextMenu trigger={<div>우클릭하세요</div>}>
+ *   <div className="p-2">
+ *     <button>항목 1</button>
+ *     <button>항목 2</button>
+ *   </div>
+ * </ContextMenu>
+ *
+ * @example
+ * // 제어 모드 / Controlled mode
+ * const [open, setOpen] = useState(false)
+ * <ContextMenu
+ *   open={open}
+ *   onOpenChange={setOpen}
+ *   trigger={<div>우클릭</div>}
+ * >
+ *   <Menu>
+ *     <MenuItem>복사</MenuItem>
+ *     <MenuItem>삭제</MenuItem>
+ *   </Menu>
+ * </ContextMenu>
+ *
+ * @param {ContextMenuProps} props - ContextMenu 컴포넌트의 props / ContextMenu component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} ContextMenu 컴포넌트 / ContextMenu component
+ */
+declare const ContextMenu: React.ForwardRefExoticComponent<ContextMenuProps & React.RefAttributes<HTMLDivElement>>;
+interface ContextMenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    icon?: React.ReactNode;
+    variant?: "default" | "destructive" | "disabled";
+}
+declare const ContextMenuItem: React.ForwardRefExoticComponent<ContextMenuItemProps & React.RefAttributes<HTMLButtonElement>>;
+interface ContextMenuSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const ContextMenuSeparator: React.ForwardRefExoticComponent<ContextMenuSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+interface ContextMenuLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const ContextMenuLabel: React.ForwardRefExoticComponent<ContextMenuLabelProps & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Command 컴포넌트의 props / Command component props
+ * @typedef {Object} CommandProps
+ * @property {React.ReactNode} children - CommandList, CommandItem 등 / CommandList, CommandItem, etc.
+ * @property {boolean} [open] - 제어 모드에서 열림/닫힘 상태 / Open/close state in controlled mode
+ * @property {(open: boolean) => void} [onOpenChange] - 상태 변경 콜백 / State change callback
+ * @property {string} [placeholder="명령어를 검색하세요..."] - 검색 입력 플레이스홀더 / Search input placeholder
+ * @property {string} [searchValue] - 제어 모드에서 검색 값 / Search value in controlled mode
+ * @property {(value: string) => void} [onSearchChange] - 검색 값 변경 콜백 / Search value change callback
+ * @property {boolean} [disabled=false] - Command 비활성화 여부 / Disable command
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface CommandProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    placeholder?: string;
+    searchValue?: string;
+    onSearchChange?: (value: string) => void;
+    disabled?: boolean;
+}
+/**
+ * Command 컴포넌트 / Command component
+ *
+ * 명령 팔레트(Command Palette) 컴포넌트입니다.
+ * Cmd+K (Mac) 또는 Ctrl+K (Windows)로 열 수 있습니다.
+ * 키보드 네비게이션(Arrow keys, Enter, Escape)을 지원합니다.
+ *
+ * Command Palette component.
+ * Can be opened with Cmd+K (Mac) or Ctrl+K (Windows).
+ * Supports keyboard navigation (Arrow keys, Enter, Escape).
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <Command>
+ *   <CommandInput placeholder="검색..." />
+ *   <CommandList>
+ *     <CommandItem>항목 1</CommandItem>
+ *     <CommandItem>항목 2</CommandItem>
+ *   </CommandList>
+ * </Command>
+ *
+ * @example
+ * // 제어 모드 / Controlled mode
+ * const [open, setOpen] = useState(false)
+ * <Command
+ *   open={open}
+ *   onOpenChange={setOpen}
+ * >
+ *   <CommandList>
+ *     <CommandGroup heading="파일">
+ *       <CommandItem>새 파일</CommandItem>
+ *     </CommandGroup>
+ *   </CommandList>
+ * </Command>
+ *
+ * @param {CommandProps} props - Command 컴포넌트의 props / Command component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} Command 컴포넌트 / Command component
+ */
+declare const Command: React.ForwardRefExoticComponent<CommandProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * CommandInput 컴포넌트의 props / CommandInput component props
+ * @typedef {Object} CommandInputProps
+ * @extends {React.InputHTMLAttributes<HTMLInputElement>}
+ */
+interface CommandInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+}
+declare const CommandInput: React.ForwardRefExoticComponent<CommandInputProps & React.RefAttributes<HTMLInputElement>>;
+interface CommandListProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const CommandList: React.ForwardRefExoticComponent<CommandListProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * CommandItem 컴포넌트의 props / CommandItem component props
+ * @typedef {Object} CommandItemProps
+ * @property {React.ReactNode} [icon] - 항목 아이콘 / Item icon
+ * @property {boolean} [selected=false] - 선택 상태 / Selected state
+ * @property {() => void} [onSelect] - 선택 시 콜백 / Selection callback
+ * @extends {React.ButtonHTMLAttributes<HTMLButtonElement>}
+ */
+interface CommandItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    icon?: React.ReactNode;
+    selected?: boolean;
+    onSelect?: () => void;
+}
+declare const CommandItem: React.ForwardRefExoticComponent<CommandItemProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * CommandGroup 컴포넌트의 props / CommandGroup component props
+ * @typedef {Object} CommandGroupProps
+ * @property {React.ReactNode} [heading] - 그룹 제목 / Group heading
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface CommandGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    heading?: React.ReactNode;
+}
+declare const CommandGroup: React.ForwardRefExoticComponent<CommandGroupProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * CommandSeparator 컴포넌트의 props / CommandSeparator component props
+ * @typedef {Object} CommandSeparatorProps
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface CommandSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const CommandSeparator: React.ForwardRefExoticComponent<CommandSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * CommandEmpty 컴포넌트의 props / CommandEmpty component props
+ * @typedef {Object} CommandEmptyProps
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface CommandEmptyProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const CommandEmpty: React.ForwardRefExoticComponent<CommandEmptyProps & React.RefAttributes<HTMLDivElement>>;
+declare const CommandDialog: React.ForwardRefExoticComponent<CommandProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, ContextMenu, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuSeparator, Menu, MenuCompact, MenuHorizontal, MenuItem, MenuLabel, MenuSeparator, MenuVertical, Tabs, TabsCards, TabsContent, TabsList, TabsPills, TabsTrigger, TabsUnderline };

package/dist/interactive.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Interactive Components Entrypoint
+ *
+ * 상호작용 관련 합성 컴포넌트의 엔트리 포인트입니다.
+ * 아코디언, 탭, 메뉴, 커맨드 등 다중 파트 인터랙티브 컴포넌트를 포함합니다.
+ *
+ * Entry point for interactive composite components.
+ * Includes multi-part interactive components like Accordion, Tabs, Menu, Command.
+ *
+ * @example
+ * import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@hua-labs/ui/interactive';
+ * import { Tabs, TabsList, TabsTrigger, TabsContent } from '@hua-labs/ui/interactive';
+ * import { Command, CommandInput, CommandList, CommandItem } from '@hua-labs/ui/interactive';
+ */
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './components/Accordion';
+export { Tabs, TabsList, TabsTrigger, TabsContent, TabsPills, TabsUnderline, TabsCards } from './components/Tabs';
+export { Menu, MenuItem, MenuSeparator, MenuLabel, MenuHorizontal, MenuVertical, MenuCompact } from './components/Menu';
+export { ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuLabel, ContextMenuGroup } from './components/ContextMenu';
+export { Command, CommandInput, CommandList, CommandItem, CommandGroup, CommandSeparator, CommandEmpty, CommandDialog } from './components/Command';
+//# sourceMappingURL=interactive.d.ts.map

package/dist/interactive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interactive.d.ts","sourceRoot":"","sources":["../src/interactive.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAGH,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAGtG,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAGlH,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,cAAc,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGxH,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAGlI,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC"}