@likelion-design/ui 0.1.8 → 1.0.0

package/dist/index.d.mts

@@ -1,5 +1,245 @@
-export { ActionButton, ActionButtonProps, Button, ButtonProps, ButtonShape, ButtonSize, ButtonState, ButtonVariant, IconButton, IconButtonProps, IconButtonSize, IconButtonState, IconButtonType, IconButtonVariant } from './Button.mjs';
-export { Header, HeaderProps } from './Header.mjs';
-export { Page } from './Page.mjs';
-import 'react/jsx-runtime';
-import 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type ButtonSize = "xlarge" | "large" | "medium" | "small";
+type ButtonColor = "primary" | "neutral" | "secondary";
+type ButtonType = "solid" | "outline" | "ghost" | "weak";
+type ButtonState = "enabled" | "hovered" | "loading" | "disabled";
+interface ActionButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
+    /** 버튼 크기 */
+    size?: ButtonSize;
+    /** 버튼 색상 (primary, neutral, secondary) */
+    color?: ButtonColor;
+    /** 버튼 타입 (solid, outline, ghost, weak) */
+    type?: ButtonType;
+    /** 버튼 상태 */
+    state?: ButtonState;
+    /** 버튼 텍스트 */
+    label: React.ReactNode;
+    /** Prefix 아이콘 */
+    prefixIcon?: React.ReactNode;
+    /** Suffix 아이콘 */
+    suffixIcon?: React.ReactNode;
+    /** 로딩 상태일 때 표시할 스피너 */
+    loading?: boolean;
+}
+/** ActionButton 컴포넌트는 사용자가 어떠한 액션을 트리거하거나 이벤트를 실행할 때 사용한다. */
+declare const ActionButton: ({ size, color, type, state, label, prefixIcon, suffixIcon, loading, className, disabled, ...props }: ActionButtonProps) => react_jsx_runtime.JSX.Element;
+
+type IconButtonSize = "xlarge" | "large" | "medium" | "small";
+/** 버튼 색상. solid/outline: primary | neutral | secondary. weak: primary | neutral-dark | neutral-light */
+type IconButtonColor = "primary" | "neutral" | "secondary" | "neutral-dark" | "neutral-light";
+/** 버튼 타입. weak일 때 color로 primary / neutral-dark / neutral-light 구분 */
+type IconButtonType = "solid" | "outline" | "weak";
+type IconButtonState = "enabled" | "hovered" | "disabled";
+/** 기본 색상에 없는 커스텀 색상 (inline style로 적용, 클래스보다 우선) */
+interface IconButtonCustomColor {
+    /** 배경색 */
+    background?: string;
+    /** 아이콘(전경) 색상 */
+    color?: string;
+}
+interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
+    /** 버튼 크기 */
+    size?: IconButtonSize;
+    /** 버튼 색상. 기본 세트: primary, neutral, secondary 등. 없으면 customColor 또는 style로 지정 */
+    color?: IconButtonColor;
+    /** 버튼 타입 (solid, outline, weak) */
+    type?: IconButtonType;
+    /** 버튼 상태 */
+    state?: IconButtonState;
+    /** 아이콘 (Heroicons 또는 React 컴포넌트) */
+    icon: React.ReactNode;
+    /** 아이콘에 대한 접근성 라벨 */
+    "aria-label": string;
+    /** button 요소의 type (submit 등). 기본값 button */
+    htmlType?: "button" | "submit" | "reset";
+    /**
+     * 기본 팔레트에 없는 색상 사용 시.
+     * 지정 시 inline style로 적용되어 클래스 스타일보다 우선합니다.
+     * hover/disabled는 적용되지 않으므로, 필요 시 style prop으로 보완하세요.
+     */
+    customColor?: IconButtonCustomColor;
+}
+/** IconButton 컴포넌트는 텍스트 레이블 없이 아이콘만으로 액션을 전달하는 버튼 컴포넌트이다. */
+declare const IconButton: ({ size, color, type, state, icon, className, disabled, htmlType, style: propsStyle, customColor, ...props }: IconButtonProps) => react_jsx_runtime.JSX.Element;
+
+type TabType = "round" | "text";
+type TabSize = "large" | "medium";
+interface TabProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
+    /** 탭 타입 (round 또는 text) */
+    type?: TabType;
+    /** 탭 크기 */
+    size?: TabSize;
+    /** 배지 표시 여부 */
+    badge?: boolean;
+    /** 탭 라벨 */
+    label: React.ReactNode;
+    /** 탭 값 (Tab.Group에서 사용 시 식별자) */
+    value?: string;
+    /** 다크 모드 여부 */
+    mode?: boolean;
+    /** 선택된 상태 (탭 그룹에서 사용 시 부모 컴포넌트가 관리, 예: 기본 탭이 '설명'이면 selected={true}) */
+    selected?: boolean;
+    /** 비활성화 상태 */
+    disabled?: boolean;
+}
+/** Tab 컴포넌트는 사용자가 여러 옵션 중 하나를 선택할 때 사용하는 탭 컴포넌트이다. */
+declare const Tab: ({ type, size, badge, label, mode, className, selected, disabled, onClick, ...props }: TabProps) => react_jsx_runtime.JSX.Element;
+interface TabGroupProps {
+    /** 선택된 탭 값 (controlled) */
+    value?: string;
+    /** 초기 선택 탭 값 (uncontrolled) */
+    defaultValue?: string;
+    /** 선택 변경 핸들러 */
+    onChange?: (value: string) => void;
+    /** 탭 타입 (컨테이너 스타일: Round일 때 gap, Text일 때 하단 보더) */
+    type?: TabType;
+    /** 탭 크기 (컨테이너 gap 등) */
+    size?: TabSize;
+    /** 다크 모드 */
+    mode?: boolean;
+    /** 비활성화 상태 */
+    disabled?: boolean;
+    /** 자식 Tab 컴포넌트들 */
+    children: React.ReactNode;
+    /** 추가 CSS 클래스명 */
+    className?: string;
+}
+/** Tab.Group은 여러 Tab을 그룹화하여 단일 선택을 관리한다. */
+declare const TabGroup: {
+    ({ value: valueProp, defaultValue, onChange, type, size, mode, disabled, children, className, }: TabGroupProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type ChipType = "solid" | "outline" | "weak";
+type ChipSize = "medium" | "small";
+type ChipVariant = "primary" | "neutral";
+interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onChange"> {
+    /** Chip 타입 (solid, outline, weak) */
+    type?: ChipType;
+    /** Chip 크기 */
+    size?: ChipSize;
+    /** Chip variant (primary, neutral) */
+    variant?: ChipVariant;
+    /** Chip 값 (각 Chip을 구분하는 고유 값) */
+    value: string;
+    /** Chip 클릭 핸들러 (클릭 시 해당 Chip의 value를 전달) */
+    onChange?: (value: string) => void;
+    /** Chip 선택 상태 (controlled 모드) */
+    checked?: boolean;
+    /** Chip 초기 선택 상태 (uncontrolled 모드) */
+    defaultChecked?: boolean;
+    /** 단일 선택 그룹에서 선택된 값 (checked prop이 없을 때 자동으로 checked 계산) */
+    selectedValue?: string | null;
+    /** 다중 선택 그룹에서 선택된 값들 (checked prop이 없을 때 자동으로 checked 계산) */
+    selectedValues?: string[];
+    /** Chip 라벨 */
+    label: React.ReactNode;
+    /** Prefix 아이콘 */
+    prefixIcon?: React.ReactNode;
+    /** Suffix 아이콘 */
+    suffixIcon?: React.ReactNode;
+    /** Close 버튼 표시 여부 */
+    showClose?: boolean;
+    /** Close 버튼 클릭 핸들러 */
+    onClose?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+/** Chip 컴포넌트는 사용자가 직접 선택, 추가, 삭제할 수 있는 인터랙티브한 컴포넌트다. */
+declare const Chip: ({ type, size, variant, value, onChange, checked: checkedProp, defaultChecked, selectedValue, selectedValues, label, prefixIcon, suffixIcon, showClose, onClose, className, disabled, onClick, ...props }: ChipProps) => react_jsx_runtime.JSX.Element;
+interface ChipGroupProps {
+    /** 선택된 값 (controlled) - 단일: string, 다중: string[] */
+    value?: string | string[];
+    /** 초기 선택 값 (uncontrolled) */
+    defaultValue?: string | string[];
+    /** 선택 변경 시 호출 (클릭한 Chip의 value 전달) */
+    onChange?: (value: string) => void;
+    /** 다중 선택 여부 */
+    multiple?: boolean;
+    /** Chip 타입 */
+    type?: ChipType;
+    /** Chip 크기 */
+    size?: ChipSize;
+    /** Chip variant */
+    variant?: ChipVariant;
+    /** 전체 비활성화 */
+    disabled?: boolean;
+    /** 자식 Chip 컴포넌트들 */
+    children: React.ReactNode;
+    /** 추가 CSS 클래스명 */
+    className?: string;
+}
+/** Chip.Group은 여러 Chip을 그룹화하여 단일/다중 선택을 관리한다. */
+declare const ChipGroup: {
+    ({ value: valueProp, defaultValue, onChange, multiple, type, size, variant, disabled, children, className, }: ChipGroupProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type DialogAlign = "center" | "left";
+type DialogFooterLayout = "horizontal" | "vertical";
+type DialogVariant = "alert" | "confirm";
+type DialogActionColor = ButtonColor;
+type DialogActionType = ButtonType;
+type DialogActionSize = Exclude<ButtonSize, "xlarge">;
+interface DialogProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Dialog 표시 여부 */
+    open?: boolean;
+    /** Dialog 타입 */
+    variant?: DialogVariant;
+    /** 타이틀 정렬 */
+    align?: DialogAlign;
+    /** 타이틀 */
+    title?: React.ReactNode;
+    /** 설명 텍스트 */
+    description?: React.ReactNode;
+    /** 아이콘 */
+    icon?: React.ReactNode;
+    /** 하단 액션 영역 */
+    actionItems?: DialogActionItem[];
+    /** 액션 레이아웃 */
+    footerLayout?: DialogFooterLayout;
+    /** 액션 클릭 시 닫기 핸들러 (internal) */
+    onActionClose?: () => void;
+}
+interface DialogActionItem {
+    /** 버튼 라벨 */
+    label: string;
+    /** 버튼 색상 */
+    color?: DialogActionColor;
+    /** 버튼 타입 */
+    type?: DialogActionType;
+    /** 버튼 크기 */
+    size?: DialogActionSize;
+    /** Prefix 아이콘 */
+    prefixIcon?: React.ReactNode;
+    /** Suffix 아이콘 */
+    suffixIcon?: React.ReactNode;
+    /** 로딩 상태 */
+    loading?: boolean;
+    /** 비활성화 */
+    disabled?: boolean;
+    /** 클릭 핸들러 */
+    onClick?: () => void;
+    /** 클릭 시 다이얼로그 닫기 */
+    closeOnClick?: boolean;
+}
+interface DialogOpenOptions extends Omit<DialogProps, "open" | "onActionClose"> {
+    /** 닫힐 때 호출 */
+    onClose?: () => void;
+    /** 오버레이 클릭 시 닫기 */
+    closeOnOverlayClick?: boolean;
+    /** ESC 키로 닫기 */
+    closeOnEsc?: boolean;
+}
+/** Dialog 컴포넌트는 중요한 정보를 전달하고 확인을 받는 모달 레이아웃이다. */
+declare const Dialog: ({ open, variant, align, title, description, icon, actionItems, footerLayout, onActionClose, className, ...props }: DialogProps) => react_jsx_runtime.JSX.Element | null;
+/**
+ * Dialog를 가장 간편하게 쓰기 위한 훅
+ */
+declare function useDialog(): {
+    openDialog: (options: DialogOpenOptions) => void;
+    closeDialog: () => void;
+    DialogContainer: () => React.ReactPortal | null;
+};
+
+export { ActionButton, type ActionButtonProps, ActionButton as Button, type ButtonColor, type ActionButtonProps as ButtonProps, type ButtonSize, type ButtonState, type ButtonType, Chip, ChipGroup, type ChipGroupProps, type ChipProps, type ChipSize, type ChipType, type ChipVariant, Dialog, type DialogActionColor, type DialogActionItem, type DialogActionSize, type DialogActionType, type DialogAlign, type DialogFooterLayout, type DialogOpenOptions, type DialogProps, type DialogVariant, IconButton, type IconButtonColor, type IconButtonProps, type IconButtonSize, type IconButtonState, type IconButtonType, Tab, TabGroup, type TabGroupProps, type TabProps, type TabSize, type TabType, useDialog };

package/dist/index.d.ts

@@ -1,5 +1,245 @@
-export { ActionButton, ActionButtonProps, Button, ButtonProps, ButtonShape, ButtonSize, ButtonState, ButtonVariant, IconButton, IconButtonProps, IconButtonSize, IconButtonState, IconButtonType, IconButtonVariant } from './Button.js';
-export { Header, HeaderProps } from './Header.js';
-export { Page } from './Page.js';
-import 'react/jsx-runtime';
-import 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type ButtonSize = "xlarge" | "large" | "medium" | "small";
+type ButtonColor = "primary" | "neutral" | "secondary";
+type ButtonType = "solid" | "outline" | "ghost" | "weak";
+type ButtonState = "enabled" | "hovered" | "loading" | "disabled";
+interface ActionButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
+    /** 버튼 크기 */
+    size?: ButtonSize;
+    /** 버튼 색상 (primary, neutral, secondary) */
+    color?: ButtonColor;
+    /** 버튼 타입 (solid, outline, ghost, weak) */
+    type?: ButtonType;
+    /** 버튼 상태 */
+    state?: ButtonState;
+    /** 버튼 텍스트 */
+    label: React.ReactNode;
+    /** Prefix 아이콘 */
+    prefixIcon?: React.ReactNode;
+    /** Suffix 아이콘 */
+    suffixIcon?: React.ReactNode;
+    /** 로딩 상태일 때 표시할 스피너 */
+    loading?: boolean;
+}
+/** ActionButton 컴포넌트는 사용자가 어떠한 액션을 트리거하거나 이벤트를 실행할 때 사용한다. */
+declare const ActionButton: ({ size, color, type, state, label, prefixIcon, suffixIcon, loading, className, disabled, ...props }: ActionButtonProps) => react_jsx_runtime.JSX.Element;
+
+type IconButtonSize = "xlarge" | "large" | "medium" | "small";
+/** 버튼 색상. solid/outline: primary | neutral | secondary. weak: primary | neutral-dark | neutral-light */
+type IconButtonColor = "primary" | "neutral" | "secondary" | "neutral-dark" | "neutral-light";
+/** 버튼 타입. weak일 때 color로 primary / neutral-dark / neutral-light 구분 */
+type IconButtonType = "solid" | "outline" | "weak";
+type IconButtonState = "enabled" | "hovered" | "disabled";
+/** 기본 색상에 없는 커스텀 색상 (inline style로 적용, 클래스보다 우선) */
+interface IconButtonCustomColor {
+    /** 배경색 */
+    background?: string;
+    /** 아이콘(전경) 색상 */
+    color?: string;
+}
+interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
+    /** 버튼 크기 */
+    size?: IconButtonSize;
+    /** 버튼 색상. 기본 세트: primary, neutral, secondary 등. 없으면 customColor 또는 style로 지정 */
+    color?: IconButtonColor;
+    /** 버튼 타입 (solid, outline, weak) */
+    type?: IconButtonType;
+    /** 버튼 상태 */
+    state?: IconButtonState;
+    /** 아이콘 (Heroicons 또는 React 컴포넌트) */
+    icon: React.ReactNode;
+    /** 아이콘에 대한 접근성 라벨 */
+    "aria-label": string;
+    /** button 요소의 type (submit 등). 기본값 button */
+    htmlType?: "button" | "submit" | "reset";
+    /**
+     * 기본 팔레트에 없는 색상 사용 시.
+     * 지정 시 inline style로 적용되어 클래스 스타일보다 우선합니다.
+     * hover/disabled는 적용되지 않으므로, 필요 시 style prop으로 보완하세요.
+     */
+    customColor?: IconButtonCustomColor;
+}
+/** IconButton 컴포넌트는 텍스트 레이블 없이 아이콘만으로 액션을 전달하는 버튼 컴포넌트이다. */
+declare const IconButton: ({ size, color, type, state, icon, className, disabled, htmlType, style: propsStyle, customColor, ...props }: IconButtonProps) => react_jsx_runtime.JSX.Element;
+
+type TabType = "round" | "text";
+type TabSize = "large" | "medium";
+interface TabProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
+    /** 탭 타입 (round 또는 text) */
+    type?: TabType;
+    /** 탭 크기 */
+    size?: TabSize;
+    /** 배지 표시 여부 */
+    badge?: boolean;
+    /** 탭 라벨 */
+    label: React.ReactNode;
+    /** 탭 값 (Tab.Group에서 사용 시 식별자) */
+    value?: string;
+    /** 다크 모드 여부 */
+    mode?: boolean;
+    /** 선택된 상태 (탭 그룹에서 사용 시 부모 컴포넌트가 관리, 예: 기본 탭이 '설명'이면 selected={true}) */
+    selected?: boolean;
+    /** 비활성화 상태 */
+    disabled?: boolean;
+}
+/** Tab 컴포넌트는 사용자가 여러 옵션 중 하나를 선택할 때 사용하는 탭 컴포넌트이다. */
+declare const Tab: ({ type, size, badge, label, mode, className, selected, disabled, onClick, ...props }: TabProps) => react_jsx_runtime.JSX.Element;
+interface TabGroupProps {
+    /** 선택된 탭 값 (controlled) */
+    value?: string;
+    /** 초기 선택 탭 값 (uncontrolled) */
+    defaultValue?: string;
+    /** 선택 변경 핸들러 */
+    onChange?: (value: string) => void;
+    /** 탭 타입 (컨테이너 스타일: Round일 때 gap, Text일 때 하단 보더) */
+    type?: TabType;
+    /** 탭 크기 (컨테이너 gap 등) */
+    size?: TabSize;
+    /** 다크 모드 */
+    mode?: boolean;
+    /** 비활성화 상태 */
+    disabled?: boolean;
+    /** 자식 Tab 컴포넌트들 */
+    children: React.ReactNode;
+    /** 추가 CSS 클래스명 */
+    className?: string;
+}
+/** Tab.Group은 여러 Tab을 그룹화하여 단일 선택을 관리한다. */
+declare const TabGroup: {
+    ({ value: valueProp, defaultValue, onChange, type, size, mode, disabled, children, className, }: TabGroupProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type ChipType = "solid" | "outline" | "weak";
+type ChipSize = "medium" | "small";
+type ChipVariant = "primary" | "neutral";
+interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onChange"> {
+    /** Chip 타입 (solid, outline, weak) */
+    type?: ChipType;
+    /** Chip 크기 */
+    size?: ChipSize;
+    /** Chip variant (primary, neutral) */
+    variant?: ChipVariant;
+    /** Chip 값 (각 Chip을 구분하는 고유 값) */
+    value: string;
+    /** Chip 클릭 핸들러 (클릭 시 해당 Chip의 value를 전달) */
+    onChange?: (value: string) => void;
+    /** Chip 선택 상태 (controlled 모드) */
+    checked?: boolean;
+    /** Chip 초기 선택 상태 (uncontrolled 모드) */
+    defaultChecked?: boolean;
+    /** 단일 선택 그룹에서 선택된 값 (checked prop이 없을 때 자동으로 checked 계산) */
+    selectedValue?: string | null;
+    /** 다중 선택 그룹에서 선택된 값들 (checked prop이 없을 때 자동으로 checked 계산) */
+    selectedValues?: string[];
+    /** Chip 라벨 */
+    label: React.ReactNode;
+    /** Prefix 아이콘 */
+    prefixIcon?: React.ReactNode;
+    /** Suffix 아이콘 */
+    suffixIcon?: React.ReactNode;
+    /** Close 버튼 표시 여부 */
+    showClose?: boolean;
+    /** Close 버튼 클릭 핸들러 */
+    onClose?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+/** Chip 컴포넌트는 사용자가 직접 선택, 추가, 삭제할 수 있는 인터랙티브한 컴포넌트다. */
+declare const Chip: ({ type, size, variant, value, onChange, checked: checkedProp, defaultChecked, selectedValue, selectedValues, label, prefixIcon, suffixIcon, showClose, onClose, className, disabled, onClick, ...props }: ChipProps) => react_jsx_runtime.JSX.Element;
+interface ChipGroupProps {
+    /** 선택된 값 (controlled) - 단일: string, 다중: string[] */
+    value?: string | string[];
+    /** 초기 선택 값 (uncontrolled) */
+    defaultValue?: string | string[];
+    /** 선택 변경 시 호출 (클릭한 Chip의 value 전달) */
+    onChange?: (value: string) => void;
+    /** 다중 선택 여부 */
+    multiple?: boolean;
+    /** Chip 타입 */
+    type?: ChipType;
+    /** Chip 크기 */
+    size?: ChipSize;
+    /** Chip variant */
+    variant?: ChipVariant;
+    /** 전체 비활성화 */
+    disabled?: boolean;
+    /** 자식 Chip 컴포넌트들 */
+    children: React.ReactNode;
+    /** 추가 CSS 클래스명 */
+    className?: string;
+}
+/** Chip.Group은 여러 Chip을 그룹화하여 단일/다중 선택을 관리한다. */
+declare const ChipGroup: {
+    ({ value: valueProp, defaultValue, onChange, multiple, type, size, variant, disabled, children, className, }: ChipGroupProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type DialogAlign = "center" | "left";
+type DialogFooterLayout = "horizontal" | "vertical";
+type DialogVariant = "alert" | "confirm";
+type DialogActionColor = ButtonColor;
+type DialogActionType = ButtonType;
+type DialogActionSize = Exclude<ButtonSize, "xlarge">;
+interface DialogProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Dialog 표시 여부 */
+    open?: boolean;
+    /** Dialog 타입 */
+    variant?: DialogVariant;
+    /** 타이틀 정렬 */
+    align?: DialogAlign;
+    /** 타이틀 */
+    title?: React.ReactNode;
+    /** 설명 텍스트 */
+    description?: React.ReactNode;
+    /** 아이콘 */
+    icon?: React.ReactNode;
+    /** 하단 액션 영역 */
+    actionItems?: DialogActionItem[];
+    /** 액션 레이아웃 */
+    footerLayout?: DialogFooterLayout;
+    /** 액션 클릭 시 닫기 핸들러 (internal) */
+    onActionClose?: () => void;
+}
+interface DialogActionItem {
+    /** 버튼 라벨 */
+    label: string;
+    /** 버튼 색상 */
+    color?: DialogActionColor;
+    /** 버튼 타입 */
+    type?: DialogActionType;
+    /** 버튼 크기 */
+    size?: DialogActionSize;
+    /** Prefix 아이콘 */
+    prefixIcon?: React.ReactNode;
+    /** Suffix 아이콘 */
+    suffixIcon?: React.ReactNode;
+    /** 로딩 상태 */
+    loading?: boolean;
+    /** 비활성화 */
+    disabled?: boolean;
+    /** 클릭 핸들러 */
+    onClick?: () => void;
+    /** 클릭 시 다이얼로그 닫기 */
+    closeOnClick?: boolean;
+}
+interface DialogOpenOptions extends Omit<DialogProps, "open" | "onActionClose"> {
+    /** 닫힐 때 호출 */
+    onClose?: () => void;
+    /** 오버레이 클릭 시 닫기 */
+    closeOnOverlayClick?: boolean;
+    /** ESC 키로 닫기 */
+    closeOnEsc?: boolean;
+}
+/** Dialog 컴포넌트는 중요한 정보를 전달하고 확인을 받는 모달 레이아웃이다. */
+declare const Dialog: ({ open, variant, align, title, description, icon, actionItems, footerLayout, onActionClose, className, ...props }: DialogProps) => react_jsx_runtime.JSX.Element | null;
+/**
+ * Dialog를 가장 간편하게 쓰기 위한 훅
+ */
+declare function useDialog(): {
+    openDialog: (options: DialogOpenOptions) => void;
+    closeDialog: () => void;
+    DialogContainer: () => React.ReactPortal | null;
+};
+
+export { ActionButton, type ActionButtonProps, ActionButton as Button, type ButtonColor, type ActionButtonProps as ButtonProps, type ButtonSize, type ButtonState, type ButtonType, Chip, ChipGroup, type ChipGroupProps, type ChipProps, type ChipSize, type ChipType, type ChipVariant, Dialog, type DialogActionColor, type DialogActionItem, type DialogActionSize, type DialogActionType, type DialogAlign, type DialogFooterLayout, type DialogOpenOptions, type DialogProps, type DialogVariant, IconButton, type IconButtonColor, type IconButtonProps, type IconButtonSize, type IconButtonState, type IconButtonType, Tab, TabGroup, type TabGroupProps, type TabProps, type TabSize, type TabType, useDialog };

package/dist/index.js

@@ -1,2 +1,2 @@
-"use strict";var C=Object.create;var u=Object.defineProperty,L=Object.defineProperties,M=Object.getOwnPropertyDescriptor,T=Object.getOwnPropertyDescriptors,$=Object.getOwnPropertyNames,m=Object.getOwnPropertySymbols,j=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty,S=Object.prototype.propertyIsEnumerable;var z=(o,t,r)=>t in o?u(o,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):o[t]=r,f=(o,t)=>{for(var r in t||(t={}))_.call(t,r)&&z(o,r,t[r]);if(m)for(var r of m(t))S.call(t,r)&&z(o,r,t[r]);return o},v=(o,t)=>L(o,T(t));var h=(o,t)=>{var r={};for(var n in o)_.call(o,n)&&t.indexOf(n)<0&&(r[n]=o[n]);if(o!=null&&m)for(var n of m(o))t.indexOf(n)<0&&S.call(o,n)&&(r[n]=o[n]);return r};var F=(o,t)=>{for(var r in t)u(o,r,{get:t[r],enumerable:!0})},N=(o,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let c of $(t))!_.call(o,c)&&c!==r&&u(o,c,{get:()=>t[c],enumerable:!(n=M(t,c))||n.enumerable});return o};var U=(o,t,r)=>(r=o!=null?C(j(o)):{},N(t||!o||!o.__esModule?u(r,"default",{value:o,enumerable:!0}):r,o)),D=o=>N(u({},"__esModule",{value:!0}),o);var W={};F(W,{ActionButton:()=>H,Button:()=>d,Header:()=>y,IconButton:()=>A,Page:()=>P});module.exports=D(W);var i=require("react/jsx-runtime"),H=x=>{var p=x,{size:o="medium",variant:t="primary",shape:r="solid",state:n="enabled",children:c,prefixIcon:b,suffixIcon:l,loading:s=!1,className:k="",disabled:B}=p,g=h(p,["size","variant","shape","state","children","prefixIcon","suffixIcon","loading","className","disabled"]);let w=B||n==="disabled"||s,R=s?"loading":n,V=["action-button",`action-button--${o}`,`action-button--${t}`,`action-button--${r}`,`action-button--${R}`,k].filter(Boolean).join(" ");return(0,i.jsxs)("button",v(f({type:"button",className:V,disabled:w},g),{children:[(0,i.jsxs)("span",{className:"action-button__content",children:[b&&(0,i.jsx)("span",{className:"action-button__prefix-icon",children:b}),(0,i.jsx)("span",{className:"action-button__label",children:c}),l&&(0,i.jsx)("span",{className:"action-button__suffix-icon",children:l})]}),s&&(0,i.jsx)("span",{className:"action-button__spinner","aria-hidden":"true",children:(0,i.jsx)("svg",{className:"action-button__spinner-svg",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,i.jsxs)("circle",{className:"action-button__spinner-circle",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4",strokeLinecap:"round",strokeDasharray:"32",strokeDashoffset:"32",children:[(0,i.jsx)("animate",{attributeName:"stroke-dasharray",dur:"2s",values:"0 40;40 40;0 40",repeatCount:"indefinite"}),(0,i.jsx)("animate",{attributeName:"stroke-dashoffset",dur:"2s",values:"0;-40;-80",repeatCount:"indefinite"})]})})})]}))},d=b=>{var l=b,{primary:o=!1,size:t="medium",backgroundColor:r,label:n}=l,c=h(l,["primary","size","backgroundColor","label"]);let s=o?"storybook-button--primary":"storybook-button--secondary";return(0,i.jsx)("button",v(f({type:"button",className:["storybook-button",`storybook-button--${t}`,s].join(" "),style:{backgroundColor:r}},c),{children:n}))},A=B=>{var g=B,{size:o="large",variant:t="primary",iconType:r="solid",state:n="enabled",icon:c,className:b="",disabled:l,type:s="button"}=g,k=h(g,["size","variant","iconType","state","icon","className","disabled","type"]);let x=l||n==="disabled",p=r==="weak"&&x?"enabled":n,w=["icon-button",`icon-button--${o}`,`icon-button--${t}`,`icon-button--${r}`,`icon-button--${p}`,b].filter(Boolean).join(" ");return(0,i.jsx)("button",v(f({type:s,className:w,disabled:x},k),{children:(0,i.jsx)("span",{className:"icon-button__icon",children:c})}))};var a=require("react/jsx-runtime"),y=({user:o,onLogin:t,onLogout:r,onCreateAccount:n})=>(0,a.jsx)("header",{children:(0,a.jsxs)("div",{className:"storybook-header",children:[(0,a.jsxs)("div",{children:[(0,a.jsx)("svg",{width:"32",height:"32",viewBox:"0 0 32 32",xmlns:"http://www.w3.org/2000/svg",children:(0,a.jsxs)("g",{fill:"none",fillRule:"evenodd",children:[(0,a.jsx)("path",{d:"M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z",fill:"#FFF"}),(0,a.jsx)("path",{d:"M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z",fill:"#555AB9"}),(0,a.jsx)("path",{d:"M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z",fill:"#91BAF8"})]})}),(0,a.jsx)("h1",{children:"Acme"})]}),(0,a.jsx)("div",{children:o?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)("span",{className:"welcome",children:["Welcome, ",(0,a.jsx)("b",{children:o.name}),"!"]}),(0,a.jsx)(d,{size:"small",onClick:r,label:"Log out"})]}):(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(d,{size:"small",onClick:t,label:"Log in"}),(0,a.jsx)(d,{primary:!0,size:"small",onClick:n,label:"Sign up"})]})})]})});var I=U(require("react"));var e=require("react/jsx-runtime"),P=()=>{let[o,t]=I.default.useState();return(0,e.jsxs)("article",{children:[(0,e.jsx)(y,{user:o,onLogin:()=>t({name:"Jane Doe"}),onLogout:()=>t(void 0),onCreateAccount:()=>t({name:"Jane Doe"})}),(0,e.jsxs)("section",{className:"storybook-page",children:[(0,e.jsx)("h2",{children:"Pages in Storybook"}),(0,e.jsxs)("p",{children:["We recommend building UIs with a"," ",(0,e.jsx)("a",{href:"https://componentdriven.org",target:"_blank",rel:"noopener noreferrer",children:(0,e.jsx)("strong",{children:"component-driven"})})," ","process starting with atomic components and ending with pages."]}),(0,e.jsx)("p",{children:"Render pages with mock data. This makes it easy to build and review page states without needing to navigate to them in your app. Here are some handy patterns for managing page data in Storybook:"}),(0,e.jsxs)("ul",{children:[(0,e.jsx)("li",{children:'Use a higher-level connected component. Storybook helps you compose such data from the "args" of child component stories'}),(0,e.jsx)("li",{children:"Assemble data in the page component from your services. You can mock these services out using Storybook."})]}),(0,e.jsxs)("p",{children:["Get a guided tutorial on component-driven development at"," ",(0,e.jsx)("a",{href:"https://storybook.js.org/tutorials/",target:"_blank",rel:"noopener noreferrer",children:"Storybook tutorials"}),". Read more in the"," ",(0,e.jsx)("a",{href:"https://storybook.js.org/docs",target:"_blank",rel:"noopener noreferrer",children:"docs"}),"."]}),(0,e.jsxs)("div",{className:"tip-wrapper",children:[(0,e.jsx)("span",{className:"tip",children:"Tip"})," Adjust the width of the canvas with the"," ",(0,e.jsx)("svg",{width:"10",height:"10",viewBox:"0 0 12 12",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("g",{fill:"none",fillRule:"evenodd",children:(0,e.jsx)("path",{d:"M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z",id:"a",fill:"#999"})})}),"Viewports addon in the toolbar"]})]})]})};0&&(module.exports={ActionButton,Button,Header,IconButton,Page});
+"use strict";var xo=Object.create;var O=Object.defineProperty,yo=Object.defineProperties,vo=Object.getOwnPropertyDescriptor,Io=Object.getOwnPropertyDescriptors,ko=Object.getOwnPropertyNames,$=Object.getOwnPropertySymbols,wo=Object.getPrototypeOf,J=Object.prototype.hasOwnProperty,ro=Object.prototype.propertyIsEnumerable;var ao=(o,e,t)=>e in o?O(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t,h=(o,e)=>{for(var t in e||(e={}))J.call(e,t)&&ao(o,t,e[t]);if($)for(var t of $(e))ro.call(e,t)&&ao(o,t,e[t]);return o},k=(o,e)=>yo(o,Io(e));var y=(o,e)=>{var t={};for(var a in o)J.call(o,a)&&e.indexOf(a)<0&&(t[a]=o[a]);if(o!=null&&$)for(var a of $(o))e.indexOf(a)<0&&ro.call(o,a)&&(t[a]=o[a]);return t};var _o=(o,e)=>{for(var t in e)O(o,t,{get:e[t],enumerable:!0})},io=(o,e,t,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of ko(e))!J.call(o,i)&&i!==t&&O(o,i,{get:()=>e[i],enumerable:!(a=vo(e,i))||a.enumerable});return o};var F=(o,e,t)=>(t=o!=null?xo(wo(o)):{},io(e||!o||!o.__esModule?O(t,"default",{value:o,enumerable:!0}):t,o)),Co=o=>io(O({},"__esModule",{value:!0}),o);var Do={};_o(Do,{ActionButton:()=>U,Button:()=>U,Chip:()=>V,ChipGroup:()=>q,Dialog:()=>X,IconButton:()=>co,Tab:()=>j,TabGroup:()=>W,useDialog:()=>to});module.exports=Co(Do);var no=F(require("react"));var D=l=>{var n=l,{variant:o,decoration:e="none",as:t,children:a,className:i=""}=n,c=y(n,["variant","decoration","as","children","className"]);let s=(()=>{if(o.startsWith("heading-")){let u=o.split("-")[1];return u.startsWith("d")?"h1":u}return o.startsWith("subtitle-")?"h3":"p"})(),r=t||s,b=["typography",`typography--${o}`,e!=="none"&&`typography--decoration-${e}`,i].filter(Boolean).join(" ");return no.default.createElement(r,h({className:b},c),a)};var w=require("react/jsx-runtime"),U=u=>{var m=u,{size:o="medium",color:e="primary",type:t="solid",state:a="enabled",label:i,prefixIcon:c,suffixIcon:l,loading:n=!1,className:s="",disabled:r}=m,b=y(m,["size","color","type","state","label","prefixIcon","suffixIcon","loading","className","disabled"]);let f=r||a==="disabled",g=a;t==="ghost"?(a==="hovered"||a==="loading"||n)&&(g="enabled"):g=n?"loading":a;let p=["action-button",`action-button--${o}`,`action-button--${e}`,`action-button--${t}`,`action-button--${g}`,s].filter(Boolean).join(" "),x=o==="xlarge"?"heading-h6":o==="large"||o==="medium"?"subtitle-p2":"subtitle-p3";return(0,w.jsxs)("button",k(h({type:"button",className:p,disabled:f},b),{children:[(0,w.jsxs)("span",{className:"action-button__content",children:[c&&(0,w.jsx)("span",{className:"action-button__prefix-icon",children:c}),(0,w.jsx)("p",{className:"action-button__label",children:(0,w.jsx)(D,{variant:x,children:i})}),l&&(0,w.jsx)("span",{className:"action-button__suffix-icon",children:l})]}),n&&t!=="ghost"&&(0,w.jsx)("span",{className:"action-button__spinner","aria-hidden":"true",children:(0,w.jsx)("svg",{className:"action-button__spinner-svg",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,w.jsxs)("circle",{className:"action-button__spinner-circle",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4",strokeLinecap:"round",strokeDasharray:"32",strokeDashoffset:"32",children:[(0,w.jsx)("animate",{attributeName:"stroke-dasharray",dur:"2s",values:"0 40;40 40;0 40",repeatCount:"indefinite"}),(0,w.jsx)("animate",{attributeName:"stroke-dashoffset",dur:"2s",values:"0;-40;-80",repeatCount:"indefinite"})]})})})]}))};var Y=require("react/jsx-runtime"),co=u=>{var m=u,{size:o="large",color:e="primary",type:t="solid",state:a="enabled",icon:i,className:c="",disabled:l,htmlType:n="button",style:s,customColor:r}=m,b=y(m,["size","color","type","state","icon","className","disabled","htmlType","style","customColor"]);let f=l||a==="disabled",g=t==="weak",p=g&&f?"enabled":a,x=r?"":g?`icon-button--weak-${e}`:`icon-button--${e}`,B=g?"icon-button--weak":`icon-button--${t}`,S=["icon-button",`icon-button--${o}`,x,B,`icon-button--${p}`,c].filter(Boolean).join(" "),d=g&&f,v=h(h({},(r==null?void 0:r.background)&&{backgroundColor:r.background}),(r==null?void 0:r.color)&&{color:r.color});return(0,Y.jsx)("button",k(h({type:n,className:S,disabled:f,style:h(h(h({},s),v),d?{opacity:0,pointerEvents:"none"}:{})},b),{children:(0,Y.jsx)("span",{className:"icon-button__icon",children:i})}))};var z=F(require("react"));var Z=require("react/jsx-runtime"),lo=l=>{var n=l,{type:o="number",variant:e="primary",value:t,maxValue:a=99,className:i=""}=n,c=y(n,["type","variant","value","maxValue","className"]);let s=["badge",`badge--${e}`,`badge--${o}`,i].filter(Boolean).join(" "),r=o==="number"&&t!==void 0?typeof t=="number"&&t>a?`${a}+`:String(t):null;return(0,Z.jsx)("span",k(h({className:s},c),{children:o==="number"&&r&&(0,Z.jsx)(D,{variant:"subtitle-p3",as:"span",children:r})}))};var M=require("react/jsx-runtime"),j=b=>{var u=b,{type:o="round",size:e="large",badge:t=!1,label:a,mode:i=!1,className:c="",selected:l,disabled:n=!1,onClick:s}=u,r=y(u,["type","size","badge","label","mode","className","selected","disabled","onClick"]);let[m,f]=(0,z.useState)(!1),g=l!==void 0,p=g?l:m,x=d=>{n||(g||f(v=>!v),s==null||s(d))},B=n?"disabled":p?"pressed":"enabled",S=["tab",`tab--${o}`,`tab--${e}`,`tab--${B}`,i&&"tab--dark",c].filter(Boolean).join(" ");return(0,M.jsxs)("button",k(h({type:"button",className:S,"aria-pressed":p,disabled:n,onClick:x},r),{children:[(0,M.jsx)("span",{className:"tab__label",children:a}),t&&(0,M.jsx)(lo,{type:"dot",variant:"primary",className:"tab__badge","aria-label":"\uC54C\uB9BC"})]}))},W=({value:o,defaultValue:e,onChange:t,type:a="round",size:i="large",mode:c=!1,disabled:l=!1,children:n,className:s=""})=>{let[r,b]=z.default.useState(e),u=o!==void 0,m=u?o:r,f=["tab-group",`tab-group--${a}`,`tab-group--${i}`,c&&"tab-group--dark",l&&"tab-group--disabled",s].filter(Boolean).join(" "),g=z.default.Children.map(n,p=>{var x,B,S;if(z.default.isValidElement(p)&&p.type===j){let d=p.props.value;if(d===void 0)return console.warn("Tab.Group \uB0B4\uBD80\uC758 Tab\uC740 value prop\uC774 \uD544\uC694\uD569\uB2C8\uB2E4."),p;let v=m===d;return z.default.cloneElement(p,{type:(x=p.props.type)!=null?x:a,size:(B=p.props.size)!=null?B:i,mode:(S=p.props.mode)!=null?S:c,selected:v,disabled:l||p.props.disabled,role:"tab","aria-selected":v,onClick:T=>{var _,A;u||b(d),t==null||t(d),(A=(_=p.props).onClick)==null||A.call(_,T)}})}return p});return(0,M.jsx)("div",{className:f,role:"tablist",children:g})};W.displayName="TabGroup";j.Group=W;var P=F(require("react"));var L=F(require("react"),1);function Bo(i,a){var c=i,{title:o,titleId:e}=c,t=y(c,["title","titleId"]);return L.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor","aria-hidden":"true","data-slot":"icon",ref:a,"aria-labelledby":e},t),o?L.createElement("title",{id:e},o):null,L.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"m4.5 12.75 6 6 9-13.5"}))}var So=L.forwardRef(Bo),oo=So;var C=require("react/jsx-runtime"),V=S=>{var d=S,{type:o="solid",size:e="medium",variant:t="primary",value:a,onChange:i,checked:c,defaultChecked:l=!1,selectedValue:n,selectedValues:s,label:r,prefixIcon:b,suffixIcon:u,showClose:m=!1,onClose:f,className:g="",disabled:p,onClick:x}=d,B=y(d,["type","size","variant","value","onChange","checked","defaultChecked","selectedValue","selectedValues","label","prefixIcon","suffixIcon","showClose","onClose","className","disabled","onClick"]);let[v,T]=P.default.useState(l),_=c!==void 0,A=P.default.useMemo(()=>_?c:n!=null?n===a:s!==void 0?s.includes(a):v,[_,c,n,s,a,v]),R=b||o==="outline"&&A&&!b&&(0,C.jsx)(oo,{className:"chip__check-icon",style:{width:e==="small"?"14px":"16px",height:e==="small"?"14px":"16px"}}),E=!!R,eo=!!(u||m),uo=E&&eo?"chip--has-prefix-suffix":E?"chip--has-prefix":eo?"chip--has-suffix":"chip--no-icon",mo=["chip",`chip--${o}`,`chip--${e}`,`chip--${t}`,uo,A&&"chip--checked",p&&"chip--disabled",g].filter(Boolean).join(" "),go=H=>{p||(!_&&n===void 0&&s===void 0&&T(bo=>!bo),i&&i(a),x==null||x(H))},ho=H=>{H.stopPropagation(),f&&!p&&f(H)};return(0,C.jsxs)("button",k(h({type:"button",className:mo,disabled:p,onClick:go,"aria-pressed":A},B),{children:[R&&(0,C.jsx)("span",{className:"chip__prefix-icon",children:R}),(0,C.jsx)(D,{variant:e==="small"?"body-p3":"body-p2",children:r}),u&&!m&&(0,C.jsx)("span",{className:"chip__suffix-icon",children:u}),m&&(0,C.jsx)("button",{type:"button",className:"chip__close-button",onClick:ho,disabled:p,"aria-label":"Close",children:(0,C.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:(0,C.jsx)("path",{d:"M8 1C11.866 1 15 4.13401 15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1ZM10.7803 5.21973C10.4874 4.92683 10.0126 4.92683 9.71973 5.21973L8 6.93945L6.28027 5.21973C5.98738 4.92683 5.51262 4.92683 5.21973 5.21973C4.92683 5.51262 4.92683 5.98738 5.21973 6.28027L6.93945 8L5.21973 9.71973C4.92683 10.0126 4.92683 10.4874 5.21973 10.7803C5.51262 11.0732 5.98738 11.0732 6.28027 10.7803L8 9.06055L9.71973 10.7803C10.0126 11.0732 10.4874 11.0732 10.7803 10.7803C11.0732 10.4874 11.0732 10.0126 10.7803 9.71973L9.06055 8L10.7803 6.28027C11.0732 5.98738 11.0732 5.51262 10.7803 5.21973Z",fill:"currentColor",fillOpacity:"0.56"})})})]}))},q=({value:o,defaultValue:e,onChange:t,multiple:a=!1,type:i="solid",size:c="medium",variant:l="primary",disabled:n=!1,children:s,className:r=""})=>{let[b,u]=P.default.useState(()=>e!=null?e:a?[]:""),m=o!==void 0,f=m?o:b,g=d=>{if(a){let v=Array.isArray(f)?f:[],T=v.includes(d)?v.filter(_=>_!==d):[...v,d];m||u(T),t==null||t(d)}else m||u(d),t==null||t(d)},p=a?void 0:f,x=a?f:void 0,B=["chip-group",r].filter(Boolean).join(" "),S=P.default.Children.map(s,d=>{var v,T,_;return P.default.isValidElement(d)&&d.type===V?d.props.value===void 0?(console.warn("Chip.Group \uB0B4\uBD80\uC758 Chip\uC740 value prop\uC774 \uD544\uC694\uD569\uB2C8\uB2E4."),d):P.default.cloneElement(d,{type:(v=d.props.type)!=null?v:i,size:(T=d.props.size)!=null?T:c,variant:(_=d.props.variant)!=null?_:l,selectedValue:p,selectedValues:x,onChange:K=>{var R,E;g(K),(E=(R=d.props).onChange)==null||E.call(R,K)},disabled:n||d.props.disabled}):d});return(0,C.jsx)("div",{className:B,children:S})};q.displayName="ChipGroup";V.Group=q;var G=F(require("react")),fo=require("react-dom");var N=require("react"),so=(0,N.createContext)(null),ht=so.Provider;function Q(o){return(0,N.useSyncExternalStore)(i=>{let c=window.matchMedia(o);return c.addEventListener("change",i),()=>c.removeEventListener("change",i)},()=>window.matchMedia(o).matches,()=>!1)}function po(){var c,l,n,s;let o=(0,N.useContext)(so),e=Q("(min-width: 375px) and (max-width: 743px)"),t=Q("(min-width: 744px) and (max-width: 1279px)"),a=Q("(min-width: 1280px)"),i=Q("(max-width: 743px)");return{isMobile:(c=o==null?void 0:o.isMobile)!=null?c:e,isTablet:(l=o==null?void 0:o.isTablet)!=null?l:t,isDesktop:(n=o==null?void 0:o.isDesktop)!=null?n:a,isUnderTablet:(s=o==null?void 0:o.isUnderTablet)!=null?s:i}}var I=require("react/jsx-runtime"),X=u=>{var m=u,{open:o=!0,variant:e="confirm",align:t,title:a,description:i,icon:c,actionItems:l,footerLayout:n="horizontal",onActionClose:s,className:r=""}=m,b=y(m,["open","variant","align","title","description","icon","actionItems","footerLayout","onActionClose","className"]);let{isUnderTablet:f}=po();if(!o)return null;let g=t!=null?t:e==="alert"?"left":"center";console.log(e,f);let p=["dialog",`dialog--${e}`,`dialog--${g}`,f?"is-mobile":"",r].filter(Boolean).join(" "),x=["dialog__footer",`dialog__footer--${n}`].filter(Boolean).join(" ");return(0,I.jsxs)("div",k(h({className:p},b),{children:[(c||a)&&(0,I.jsxs)("div",{className:"dialog__header",children:[c&&(0,I.jsx)("span",{className:"dialog__icon",children:c}),a&&(0,I.jsx)(D,{variant:f?"subtitle-p1":"heading-h6",children:a})]}),i&&(0,I.jsx)("div",{className:"dialog__body",children:(0,I.jsx)("div",{className:"body-p2",children:i})}),l&&l.length>0&&(0,I.jsx)("div",{className:x,children:To(f,e,l,n,s)})]}))},To=(o,e,t,a,i)=>{let c=a==="vertical"?"dialog__actions--vertical":"dialog__actions--horizontal",l=e==="confirm"?"100%":"auto",n=e==="alert"?o?"small":"medium":"large",s=e==="alert"?"outline":"solid";return(0,I.jsx)("div",{className:`dialog__actions ${c}`,children:t.map((r,b)=>{var m,f,g;let u=()=>{var p,x;(p=r.onClick)==null||p.call(r),((x=r.closeOnClick)==null||x)&&i&&i()};return(0,I.jsx)(U,{size:(m=r.size)!=null?m:n,color:(f=r.color)!=null?f:"neutral",type:(g=r.type)!=null?g:s,label:r.label,prefixIcon:r.prefixIcon,suffixIcon:r.suffixIcon,loading:r.loading,disabled:r.disabled,onClick:u,style:{width:l}},`${r.label}-${b}`)})})};function to(){let[o,e]=G.default.useState(null),t=G.default.useRef(void 0),a=l=>{e(l)},i=()=>{var l;(l=t.current)==null||l.call(t),e(null)};return G.default.useEffect(()=>{var s;if(!((s=o==null?void 0:o.closeOnEsc)!=null?s:!0))return;let n=r=>{r.key==="Escape"&&i()};return window.addEventListener("keydown",n),()=>window.removeEventListener("keydown",n)},[o==null?void 0:o.closeOnEsc]),G.default.useEffect(()=>{t.current=o==null?void 0:o.onClose},[o==null?void 0:o.onClose]),{openDialog:a,closeDialog:i,DialogContainer:()=>{if(!o)return null;let u=o,{actionItems:l,footerLayout:n="horizontal",closeOnOverlayClick:s=!0}=u,r=y(u,["actionItems","footerLayout","closeOnOverlayClick"]),b=(0,I.jsxs)("div",{className:"dialog-overlay",role:"presentation",children:[(0,I.jsx)("button",{type:"button",className:"dialog-overlay__backdrop","aria-label":"Close dialog",onClick:s?i:void 0}),(0,I.jsx)("div",{className:"dialog-overlay__content",role:"dialog","aria-modal":"true",children:(0,I.jsx)(X,k(h({},r),{open:!0,actionItems:l,footerLayout:n,onActionClose:i}))})]});return(0,fo.createPortal)(b,document.body)}}}0&&(module.exports={ActionButton,Button,Chip,ChipGroup,Dialog,IconButton,Tab,TabGroup,useDialog});
 //# sourceMappingURL=index.js.map