@exem-ui/react 0.3.4-next.20260828070546 → 0.3.4-next.20260903042316
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +195 -46
- package/dist/index.d.ts +195 -46
- package/dist/index.js +318 -242
- package/dist/index.mjs +317 -241
- package/package.json +3 -3
package/dist/index.d.mts
CHANGED
|
@@ -13,6 +13,7 @@ import { DayPicker } from 'react-day-picker';
|
|
|
13
13
|
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
|
|
14
14
|
import { Combobox as Combobox$1 } from '@base-ui/react/combobox';
|
|
15
15
|
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
|
|
16
|
+
import { Dialog } from '@base-ui/react/dialog';
|
|
16
17
|
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
17
18
|
import { Toaster as Toaster$1, ExternalToast, toast as toast$1 } from 'sonner';
|
|
18
19
|
import '@radix-ui/react-tabs';
|
|
@@ -640,19 +641,19 @@ declare function ScrollBar({ className, orientation, ...props }: React__default.
|
|
|
640
641
|
declare function ScrollArea({ className, children, onScroll, scrollRef, hideVerticalScrollbar, hideHorizontalScrollbar, disableHorizontalScroll, ...props }: ScrollAreaProps): react_jsx_runtime.JSX.Element;
|
|
641
642
|
|
|
642
643
|
type ModalSize = 'default' | 'fullsize';
|
|
643
|
-
type ModalRootProps =
|
|
644
|
-
type ModalTriggerProps =
|
|
645
|
-
type ModalPortalProps =
|
|
646
|
-
type ModalOverlayProps =
|
|
647
|
-
type ModalContentProps =
|
|
644
|
+
type ModalRootProps = Dialog.Root.Props;
|
|
645
|
+
type ModalTriggerProps = Dialog.Trigger.Props;
|
|
646
|
+
type ModalPortalProps = Dialog.Portal.Props;
|
|
647
|
+
type ModalOverlayProps = Dialog.Backdrop.Props;
|
|
648
|
+
type ModalContentProps = Dialog.Popup.Props & {
|
|
648
649
|
/**
|
|
649
650
|
* 모달 크기
|
|
650
651
|
* @default 'default'
|
|
651
652
|
*/
|
|
652
653
|
size?: ModalSize;
|
|
653
654
|
};
|
|
654
|
-
type ModalCloseProps = Omit<ButtonProps, 'color' | 'variant' | 'background'>;
|
|
655
|
-
type ModalHeaderProps = React__default.
|
|
655
|
+
type ModalCloseProps = Omit<ButtonProps, 'color' | 'variant' | 'background'> & React__default.RefAttributes<HTMLButtonElement>;
|
|
656
|
+
type ModalHeaderProps = React__default.ComponentProps<'div'> & {
|
|
656
657
|
/**
|
|
657
658
|
* 하단 구분선 표시 여부
|
|
658
659
|
* @default false
|
|
@@ -666,46 +667,141 @@ type ModalHeaderProps = React__default.HTMLAttributes<HTMLDivElement> & {
|
|
|
666
667
|
*/
|
|
667
668
|
rightSlot?: React__default.ReactNode;
|
|
668
669
|
};
|
|
669
|
-
type ModalBodyProps = React__default.
|
|
670
|
-
|
|
670
|
+
type ModalBodyProps = React__default.ComponentProps<'div'> & {
|
|
671
|
+
/**
|
|
672
|
+
* 본문을 ScrollArea로 감쌀지 여부. 끄면 스크롤 컨테이너 없이 패딩만 남아
|
|
673
|
+
* 높이를 소비자가 직접 계산할 수 있다. 넘치는 콘텐츠도 잘리지 않는다.
|
|
674
|
+
* @default true
|
|
675
|
+
*/
|
|
676
|
+
scroll?: boolean;
|
|
677
|
+
/**
|
|
678
|
+
* 가로 스크롤 허용 여부. 기본은 꺼져 있어 넓은 콘텐츠도 Body 폭 안에 갇힌다.
|
|
679
|
+
* 넓은 테이블처럼 가로 스크롤이 실제로 필요한 경우에만 켠다.
|
|
680
|
+
* `scroll={false}`면 의미가 없다.
|
|
681
|
+
* @default false
|
|
682
|
+
*/
|
|
683
|
+
horizontalScroll?: boolean;
|
|
684
|
+
};
|
|
685
|
+
type ModalFooterProps = React__default.ComponentProps<'div'> & {
|
|
671
686
|
/**
|
|
672
687
|
* 상단 구분선 표시 여부
|
|
673
688
|
* @default true
|
|
674
689
|
*/
|
|
675
690
|
line?: boolean;
|
|
676
691
|
};
|
|
677
|
-
type ModalFooterDescriptionProps = React__default.
|
|
692
|
+
type ModalFooterDescriptionProps = React__default.ComponentProps<'div'> & {
|
|
678
693
|
/** 에러 상태 표시 여부 */
|
|
679
694
|
error?: boolean;
|
|
680
695
|
/** 설명 앞에 표시할 아이콘 요소 */
|
|
681
696
|
icon?: React__default.ReactNode;
|
|
682
697
|
};
|
|
683
|
-
type ModalActionsProps = React__default.
|
|
684
|
-
type ModalActionProps = Omit<ButtonProps, 'color' | 'variant' | 'background'> & {
|
|
698
|
+
type ModalActionsProps = React__default.ComponentProps<'div'>;
|
|
699
|
+
type ModalActionProps = Omit<ButtonProps, 'color' | 'variant' | 'background'> & React__default.RefAttributes<HTMLButtonElement> & {
|
|
685
700
|
/**
|
|
686
701
|
* 버튼 색상
|
|
687
702
|
* @default 'primary'
|
|
688
703
|
*/
|
|
689
704
|
color?: 'primary' | 'critical';
|
|
690
705
|
};
|
|
691
|
-
type ModalTitleProps =
|
|
692
|
-
type ModalDescriptionProps =
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
706
|
+
type ModalTitleProps = Dialog.Title.Props;
|
|
707
|
+
type ModalDescriptionProps = Dialog.Description.Props;
|
|
708
|
+
/**
|
|
709
|
+
* 사용자 인터랙션이 필요한 오버레이 다이얼로그 컴포넌트입니다.
|
|
710
|
+
* Base UI Dialog 기반이며 Compound Component 패턴으로 하위 컴포넌트와 함께 사용합니다.
|
|
711
|
+
*
|
|
712
|
+
* @example
|
|
713
|
+
* ```tsx
|
|
714
|
+
* <Modal>
|
|
715
|
+
* <Modal.Trigger>열기</Modal.Trigger>
|
|
716
|
+
* <Modal.Content>
|
|
717
|
+
* <Modal.Header>
|
|
718
|
+
* <Modal.Title>제목</Modal.Title>
|
|
719
|
+
* </Modal.Header>
|
|
720
|
+
* <Modal.Body>내용</Modal.Body>
|
|
721
|
+
* <Modal.Footer>
|
|
722
|
+
* <Modal.Actions>
|
|
723
|
+
* <Modal.Close>닫기</Modal.Close>
|
|
724
|
+
* </Modal.Actions>
|
|
725
|
+
* </Modal.Footer>
|
|
726
|
+
* </Modal.Content>
|
|
727
|
+
* </Modal>
|
|
728
|
+
* ```
|
|
729
|
+
*
|
|
730
|
+
* @see {@link ModalContentProps} Content props 상세
|
|
731
|
+
* @see https://base-ui.com/react/components/dialog
|
|
732
|
+
*/
|
|
733
|
+
declare function ModalRoot(props: ModalRootProps): react_jsx_runtime.JSX.Element;
|
|
734
|
+
declare namespace ModalRoot {
|
|
735
|
+
var displayName: string;
|
|
736
|
+
}
|
|
737
|
+
declare function ModalTrigger(props: ModalTriggerProps): react_jsx_runtime.JSX.Element;
|
|
738
|
+
declare namespace ModalTrigger {
|
|
739
|
+
var displayName: string;
|
|
740
|
+
}
|
|
741
|
+
declare function ModalPortal(props: ModalPortalProps): react_jsx_runtime.JSX.Element;
|
|
742
|
+
declare namespace ModalPortal {
|
|
743
|
+
var displayName: string;
|
|
744
|
+
}
|
|
745
|
+
declare function ModalOverlay({ className, ...props }: ModalOverlayProps): react_jsx_runtime.JSX.Element;
|
|
746
|
+
declare namespace ModalOverlay {
|
|
747
|
+
var displayName: string;
|
|
748
|
+
}
|
|
749
|
+
declare function ModalClose({ size, ...props }: ModalCloseProps): react_jsx_runtime.JSX.Element;
|
|
750
|
+
declare namespace ModalClose {
|
|
751
|
+
var displayName: string;
|
|
752
|
+
}
|
|
753
|
+
declare function ModalContent({ className, children, size, ...props }: ModalContentProps): react_jsx_runtime.JSX.Element;
|
|
754
|
+
declare namespace ModalContent {
|
|
755
|
+
var displayName: string;
|
|
756
|
+
}
|
|
757
|
+
declare function ModalHeader({ className, line, rightSlot, children, ...props }: ModalHeaderProps): react_jsx_runtime.JSX.Element;
|
|
758
|
+
declare namespace ModalHeader {
|
|
759
|
+
var displayName: string;
|
|
760
|
+
}
|
|
761
|
+
declare function ModalBody({ className, children, scroll, horizontalScroll, ...props }: ModalBodyProps): react_jsx_runtime.JSX.Element;
|
|
762
|
+
declare namespace ModalBody {
|
|
763
|
+
var displayName: string;
|
|
764
|
+
}
|
|
765
|
+
declare function ModalFooter({ className, line, ...props }: ModalFooterProps): react_jsx_runtime.JSX.Element;
|
|
766
|
+
declare namespace ModalFooter {
|
|
767
|
+
var displayName: string;
|
|
768
|
+
}
|
|
769
|
+
declare function ModalFooterDescription({ className, error, icon, children, ...props }: ModalFooterDescriptionProps): react_jsx_runtime.JSX.Element;
|
|
770
|
+
declare namespace ModalFooterDescription {
|
|
771
|
+
var displayName: string;
|
|
772
|
+
}
|
|
773
|
+
declare function ModalActions({ className, ...props }: ModalActionsProps): react_jsx_runtime.JSX.Element;
|
|
774
|
+
declare namespace ModalActions {
|
|
775
|
+
var displayName: string;
|
|
776
|
+
}
|
|
777
|
+
declare function ModalAction({ color, size, ...props }: ModalActionProps): react_jsx_runtime.JSX.Element;
|
|
778
|
+
declare namespace ModalAction {
|
|
779
|
+
var displayName: string;
|
|
780
|
+
}
|
|
781
|
+
declare function ModalTitle({ className, ...props }: ModalTitleProps): react_jsx_runtime.JSX.Element;
|
|
782
|
+
declare namespace ModalTitle {
|
|
783
|
+
var displayName: string;
|
|
784
|
+
}
|
|
785
|
+
declare function ModalDescription({ className, ...props }: ModalDescriptionProps): react_jsx_runtime.JSX.Element;
|
|
786
|
+
declare namespace ModalDescription {
|
|
787
|
+
var displayName: string;
|
|
788
|
+
}
|
|
789
|
+
declare const Modal: typeof ModalRoot & {
|
|
790
|
+
Trigger: typeof ModalTrigger;
|
|
791
|
+
Portal: typeof ModalPortal;
|
|
792
|
+
Close: typeof ModalClose;
|
|
793
|
+
Overlay: typeof ModalOverlay;
|
|
794
|
+
Content: typeof ModalContent;
|
|
795
|
+
Header: typeof ModalHeader;
|
|
796
|
+
Body: typeof ModalBody;
|
|
797
|
+
Footer: typeof ModalFooter;
|
|
798
|
+
FooterDescription: typeof ModalFooterDescription;
|
|
799
|
+
Actions: typeof ModalActions;
|
|
800
|
+
Action: typeof ModalAction;
|
|
801
|
+
Title: typeof ModalTitle;
|
|
802
|
+
Description: typeof ModalDescription;
|
|
707
803
|
};
|
|
708
|
-
|
|
804
|
+
type ModalComponent = typeof Modal;
|
|
709
805
|
|
|
710
806
|
type SheetResizeOptions = {
|
|
711
807
|
/** @default true (객체를 전달한 경우) */
|
|
@@ -788,30 +884,83 @@ type SheetComponent = typeof DialogPrimitive.Root & {
|
|
|
788
884
|
declare const Sheet: SheetComponent;
|
|
789
885
|
|
|
790
886
|
type MessageBoxVariant = 'default' | 'critical';
|
|
791
|
-
type MessageBoxRootProps =
|
|
792
|
-
type MessageBoxTriggerProps =
|
|
793
|
-
type MessageBoxContentProps =
|
|
887
|
+
type MessageBoxRootProps = Dialog.Root.Props;
|
|
888
|
+
type MessageBoxTriggerProps = Dialog.Trigger.Props;
|
|
889
|
+
type MessageBoxContentProps = Dialog.Popup.Props & {
|
|
794
890
|
/**
|
|
795
891
|
* 메시지 박스 variant
|
|
796
892
|
* @default 'default'
|
|
797
893
|
*/
|
|
798
894
|
variant?: MessageBoxVariant;
|
|
799
895
|
};
|
|
800
|
-
type MessageBoxTitleProps =
|
|
801
|
-
type MessageBoxDescriptionProps =
|
|
802
|
-
type MessageBoxActionsProps = React__default.
|
|
803
|
-
type MessageBoxCancelProps = Omit<ButtonProps, 'color' | 'variant' | 'background'>;
|
|
804
|
-
type MessageBoxActionProps = Omit<ButtonProps, 'color' | 'variant' | 'background'>;
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
896
|
+
type MessageBoxTitleProps = Dialog.Title.Props;
|
|
897
|
+
type MessageBoxDescriptionProps = Dialog.Description.Props;
|
|
898
|
+
type MessageBoxActionsProps = React__default.ComponentProps<'div'>;
|
|
899
|
+
type MessageBoxCancelProps = Omit<ButtonProps, 'color' | 'variant' | 'background'> & React__default.RefAttributes<HTMLButtonElement>;
|
|
900
|
+
type MessageBoxActionProps = Omit<ButtonProps, 'color' | 'variant' | 'background'> & React__default.RefAttributes<HTMLButtonElement>;
|
|
901
|
+
/**
|
|
902
|
+
* 확인/경고 다이얼로그 컴포넌트입니다.
|
|
903
|
+
* Modal보다 단순한 구조로, title + description + 버튼(취소/확인)으로 구성됩니다.
|
|
904
|
+
*
|
|
905
|
+
* @example
|
|
906
|
+
* ```tsx
|
|
907
|
+
* <MessageBox>
|
|
908
|
+
* <MessageBox.Trigger>열기</MessageBox.Trigger>
|
|
909
|
+
* <MessageBox.Content variant="default">
|
|
910
|
+
* <MessageBox.Title>상태를 확인하시겠습니까?</MessageBox.Title>
|
|
911
|
+
* <MessageBox.Description>현재 상태에 대한 추가 확인이 필요합니다.</MessageBox.Description>
|
|
912
|
+
* <MessageBox.Actions>
|
|
913
|
+
* <MessageBox.Cancel>취소</MessageBox.Cancel>
|
|
914
|
+
* <MessageBox.Action>확인</MessageBox.Action>
|
|
915
|
+
* </MessageBox.Actions>
|
|
916
|
+
* </MessageBox.Content>
|
|
917
|
+
* </MessageBox>
|
|
918
|
+
* ```
|
|
919
|
+
*
|
|
920
|
+
* @see https://base-ui.com/react/components/dialog
|
|
921
|
+
*/
|
|
922
|
+
declare function MessageBoxRoot(props: MessageBoxRootProps): react_jsx_runtime.JSX.Element;
|
|
923
|
+
declare namespace MessageBoxRoot {
|
|
924
|
+
var displayName: string;
|
|
925
|
+
}
|
|
926
|
+
declare function MessageBoxTrigger(props: MessageBoxTriggerProps): react_jsx_runtime.JSX.Element;
|
|
927
|
+
declare namespace MessageBoxTrigger {
|
|
928
|
+
var displayName: string;
|
|
929
|
+
}
|
|
930
|
+
declare function MessageBoxContent({ className, children, variant, ...props }: MessageBoxContentProps): react_jsx_runtime.JSX.Element;
|
|
931
|
+
declare namespace MessageBoxContent {
|
|
932
|
+
var displayName: string;
|
|
933
|
+
}
|
|
934
|
+
declare function MessageBoxTitle({ className, ...props }: MessageBoxTitleProps): react_jsx_runtime.JSX.Element;
|
|
935
|
+
declare namespace MessageBoxTitle {
|
|
936
|
+
var displayName: string;
|
|
937
|
+
}
|
|
938
|
+
declare function MessageBoxDescription({ className, ...props }: MessageBoxDescriptionProps): react_jsx_runtime.JSX.Element;
|
|
939
|
+
declare namespace MessageBoxDescription {
|
|
940
|
+
var displayName: string;
|
|
941
|
+
}
|
|
942
|
+
declare function MessageBoxActions({ className, ...props }: MessageBoxActionsProps): react_jsx_runtime.JSX.Element;
|
|
943
|
+
declare namespace MessageBoxActions {
|
|
944
|
+
var displayName: string;
|
|
945
|
+
}
|
|
946
|
+
declare function MessageBoxCancel({ size, ...props }: MessageBoxCancelProps): react_jsx_runtime.JSX.Element;
|
|
947
|
+
declare namespace MessageBoxCancel {
|
|
948
|
+
var displayName: string;
|
|
949
|
+
}
|
|
950
|
+
declare function MessageBoxAction({ size, ...props }: MessageBoxActionProps): react_jsx_runtime.JSX.Element;
|
|
951
|
+
declare namespace MessageBoxAction {
|
|
952
|
+
var displayName: string;
|
|
953
|
+
}
|
|
954
|
+
declare const MessageBox: typeof MessageBoxRoot & {
|
|
955
|
+
Trigger: typeof MessageBoxTrigger;
|
|
956
|
+
Content: typeof MessageBoxContent;
|
|
957
|
+
Title: typeof MessageBoxTitle;
|
|
958
|
+
Description: typeof MessageBoxDescription;
|
|
959
|
+
Actions: typeof MessageBoxActions;
|
|
960
|
+
Cancel: typeof MessageBoxCancel;
|
|
961
|
+
Action: typeof MessageBoxAction;
|
|
813
962
|
};
|
|
814
|
-
|
|
963
|
+
type MessageBoxComponent = typeof MessageBox;
|
|
815
964
|
|
|
816
965
|
declare const containerVariants: (props?: ({
|
|
817
966
|
position?: "fixed" | "absolute" | null | undefined;
|
package/dist/index.d.ts
CHANGED
|
@@ -13,6 +13,7 @@ import { DayPicker } from 'react-day-picker';
|
|
|
13
13
|
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
|
|
14
14
|
import { Combobox as Combobox$1 } from '@base-ui/react/combobox';
|
|
15
15
|
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
|
|
16
|
+
import { Dialog } from '@base-ui/react/dialog';
|
|
16
17
|
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
17
18
|
import { Toaster as Toaster$1, ExternalToast, toast as toast$1 } from 'sonner';
|
|
18
19
|
import '@radix-ui/react-tabs';
|
|
@@ -640,19 +641,19 @@ declare function ScrollBar({ className, orientation, ...props }: React__default.
|
|
|
640
641
|
declare function ScrollArea({ className, children, onScroll, scrollRef, hideVerticalScrollbar, hideHorizontalScrollbar, disableHorizontalScroll, ...props }: ScrollAreaProps): react_jsx_runtime.JSX.Element;
|
|
641
642
|
|
|
642
643
|
type ModalSize = 'default' | 'fullsize';
|
|
643
|
-
type ModalRootProps =
|
|
644
|
-
type ModalTriggerProps =
|
|
645
|
-
type ModalPortalProps =
|
|
646
|
-
type ModalOverlayProps =
|
|
647
|
-
type ModalContentProps =
|
|
644
|
+
type ModalRootProps = Dialog.Root.Props;
|
|
645
|
+
type ModalTriggerProps = Dialog.Trigger.Props;
|
|
646
|
+
type ModalPortalProps = Dialog.Portal.Props;
|
|
647
|
+
type ModalOverlayProps = Dialog.Backdrop.Props;
|
|
648
|
+
type ModalContentProps = Dialog.Popup.Props & {
|
|
648
649
|
/**
|
|
649
650
|
* 모달 크기
|
|
650
651
|
* @default 'default'
|
|
651
652
|
*/
|
|
652
653
|
size?: ModalSize;
|
|
653
654
|
};
|
|
654
|
-
type ModalCloseProps = Omit<ButtonProps, 'color' | 'variant' | 'background'>;
|
|
655
|
-
type ModalHeaderProps = React__default.
|
|
655
|
+
type ModalCloseProps = Omit<ButtonProps, 'color' | 'variant' | 'background'> & React__default.RefAttributes<HTMLButtonElement>;
|
|
656
|
+
type ModalHeaderProps = React__default.ComponentProps<'div'> & {
|
|
656
657
|
/**
|
|
657
658
|
* 하단 구분선 표시 여부
|
|
658
659
|
* @default false
|
|
@@ -666,46 +667,141 @@ type ModalHeaderProps = React__default.HTMLAttributes<HTMLDivElement> & {
|
|
|
666
667
|
*/
|
|
667
668
|
rightSlot?: React__default.ReactNode;
|
|
668
669
|
};
|
|
669
|
-
type ModalBodyProps = React__default.
|
|
670
|
-
|
|
670
|
+
type ModalBodyProps = React__default.ComponentProps<'div'> & {
|
|
671
|
+
/**
|
|
672
|
+
* 본문을 ScrollArea로 감쌀지 여부. 끄면 스크롤 컨테이너 없이 패딩만 남아
|
|
673
|
+
* 높이를 소비자가 직접 계산할 수 있다. 넘치는 콘텐츠도 잘리지 않는다.
|
|
674
|
+
* @default true
|
|
675
|
+
*/
|
|
676
|
+
scroll?: boolean;
|
|
677
|
+
/**
|
|
678
|
+
* 가로 스크롤 허용 여부. 기본은 꺼져 있어 넓은 콘텐츠도 Body 폭 안에 갇힌다.
|
|
679
|
+
* 넓은 테이블처럼 가로 스크롤이 실제로 필요한 경우에만 켠다.
|
|
680
|
+
* `scroll={false}`면 의미가 없다.
|
|
681
|
+
* @default false
|
|
682
|
+
*/
|
|
683
|
+
horizontalScroll?: boolean;
|
|
684
|
+
};
|
|
685
|
+
type ModalFooterProps = React__default.ComponentProps<'div'> & {
|
|
671
686
|
/**
|
|
672
687
|
* 상단 구분선 표시 여부
|
|
673
688
|
* @default true
|
|
674
689
|
*/
|
|
675
690
|
line?: boolean;
|
|
676
691
|
};
|
|
677
|
-
type ModalFooterDescriptionProps = React__default.
|
|
692
|
+
type ModalFooterDescriptionProps = React__default.ComponentProps<'div'> & {
|
|
678
693
|
/** 에러 상태 표시 여부 */
|
|
679
694
|
error?: boolean;
|
|
680
695
|
/** 설명 앞에 표시할 아이콘 요소 */
|
|
681
696
|
icon?: React__default.ReactNode;
|
|
682
697
|
};
|
|
683
|
-
type ModalActionsProps = React__default.
|
|
684
|
-
type ModalActionProps = Omit<ButtonProps, 'color' | 'variant' | 'background'> & {
|
|
698
|
+
type ModalActionsProps = React__default.ComponentProps<'div'>;
|
|
699
|
+
type ModalActionProps = Omit<ButtonProps, 'color' | 'variant' | 'background'> & React__default.RefAttributes<HTMLButtonElement> & {
|
|
685
700
|
/**
|
|
686
701
|
* 버튼 색상
|
|
687
702
|
* @default 'primary'
|
|
688
703
|
*/
|
|
689
704
|
color?: 'primary' | 'critical';
|
|
690
705
|
};
|
|
691
|
-
type ModalTitleProps =
|
|
692
|
-
type ModalDescriptionProps =
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
706
|
+
type ModalTitleProps = Dialog.Title.Props;
|
|
707
|
+
type ModalDescriptionProps = Dialog.Description.Props;
|
|
708
|
+
/**
|
|
709
|
+
* 사용자 인터랙션이 필요한 오버레이 다이얼로그 컴포넌트입니다.
|
|
710
|
+
* Base UI Dialog 기반이며 Compound Component 패턴으로 하위 컴포넌트와 함께 사용합니다.
|
|
711
|
+
*
|
|
712
|
+
* @example
|
|
713
|
+
* ```tsx
|
|
714
|
+
* <Modal>
|
|
715
|
+
* <Modal.Trigger>열기</Modal.Trigger>
|
|
716
|
+
* <Modal.Content>
|
|
717
|
+
* <Modal.Header>
|
|
718
|
+
* <Modal.Title>제목</Modal.Title>
|
|
719
|
+
* </Modal.Header>
|
|
720
|
+
* <Modal.Body>내용</Modal.Body>
|
|
721
|
+
* <Modal.Footer>
|
|
722
|
+
* <Modal.Actions>
|
|
723
|
+
* <Modal.Close>닫기</Modal.Close>
|
|
724
|
+
* </Modal.Actions>
|
|
725
|
+
* </Modal.Footer>
|
|
726
|
+
* </Modal.Content>
|
|
727
|
+
* </Modal>
|
|
728
|
+
* ```
|
|
729
|
+
*
|
|
730
|
+
* @see {@link ModalContentProps} Content props 상세
|
|
731
|
+
* @see https://base-ui.com/react/components/dialog
|
|
732
|
+
*/
|
|
733
|
+
declare function ModalRoot(props: ModalRootProps): react_jsx_runtime.JSX.Element;
|
|
734
|
+
declare namespace ModalRoot {
|
|
735
|
+
var displayName: string;
|
|
736
|
+
}
|
|
737
|
+
declare function ModalTrigger(props: ModalTriggerProps): react_jsx_runtime.JSX.Element;
|
|
738
|
+
declare namespace ModalTrigger {
|
|
739
|
+
var displayName: string;
|
|
740
|
+
}
|
|
741
|
+
declare function ModalPortal(props: ModalPortalProps): react_jsx_runtime.JSX.Element;
|
|
742
|
+
declare namespace ModalPortal {
|
|
743
|
+
var displayName: string;
|
|
744
|
+
}
|
|
745
|
+
declare function ModalOverlay({ className, ...props }: ModalOverlayProps): react_jsx_runtime.JSX.Element;
|
|
746
|
+
declare namespace ModalOverlay {
|
|
747
|
+
var displayName: string;
|
|
748
|
+
}
|
|
749
|
+
declare function ModalClose({ size, ...props }: ModalCloseProps): react_jsx_runtime.JSX.Element;
|
|
750
|
+
declare namespace ModalClose {
|
|
751
|
+
var displayName: string;
|
|
752
|
+
}
|
|
753
|
+
declare function ModalContent({ className, children, size, ...props }: ModalContentProps): react_jsx_runtime.JSX.Element;
|
|
754
|
+
declare namespace ModalContent {
|
|
755
|
+
var displayName: string;
|
|
756
|
+
}
|
|
757
|
+
declare function ModalHeader({ className, line, rightSlot, children, ...props }: ModalHeaderProps): react_jsx_runtime.JSX.Element;
|
|
758
|
+
declare namespace ModalHeader {
|
|
759
|
+
var displayName: string;
|
|
760
|
+
}
|
|
761
|
+
declare function ModalBody({ className, children, scroll, horizontalScroll, ...props }: ModalBodyProps): react_jsx_runtime.JSX.Element;
|
|
762
|
+
declare namespace ModalBody {
|
|
763
|
+
var displayName: string;
|
|
764
|
+
}
|
|
765
|
+
declare function ModalFooter({ className, line, ...props }: ModalFooterProps): react_jsx_runtime.JSX.Element;
|
|
766
|
+
declare namespace ModalFooter {
|
|
767
|
+
var displayName: string;
|
|
768
|
+
}
|
|
769
|
+
declare function ModalFooterDescription({ className, error, icon, children, ...props }: ModalFooterDescriptionProps): react_jsx_runtime.JSX.Element;
|
|
770
|
+
declare namespace ModalFooterDescription {
|
|
771
|
+
var displayName: string;
|
|
772
|
+
}
|
|
773
|
+
declare function ModalActions({ className, ...props }: ModalActionsProps): react_jsx_runtime.JSX.Element;
|
|
774
|
+
declare namespace ModalActions {
|
|
775
|
+
var displayName: string;
|
|
776
|
+
}
|
|
777
|
+
declare function ModalAction({ color, size, ...props }: ModalActionProps): react_jsx_runtime.JSX.Element;
|
|
778
|
+
declare namespace ModalAction {
|
|
779
|
+
var displayName: string;
|
|
780
|
+
}
|
|
781
|
+
declare function ModalTitle({ className, ...props }: ModalTitleProps): react_jsx_runtime.JSX.Element;
|
|
782
|
+
declare namespace ModalTitle {
|
|
783
|
+
var displayName: string;
|
|
784
|
+
}
|
|
785
|
+
declare function ModalDescription({ className, ...props }: ModalDescriptionProps): react_jsx_runtime.JSX.Element;
|
|
786
|
+
declare namespace ModalDescription {
|
|
787
|
+
var displayName: string;
|
|
788
|
+
}
|
|
789
|
+
declare const Modal: typeof ModalRoot & {
|
|
790
|
+
Trigger: typeof ModalTrigger;
|
|
791
|
+
Portal: typeof ModalPortal;
|
|
792
|
+
Close: typeof ModalClose;
|
|
793
|
+
Overlay: typeof ModalOverlay;
|
|
794
|
+
Content: typeof ModalContent;
|
|
795
|
+
Header: typeof ModalHeader;
|
|
796
|
+
Body: typeof ModalBody;
|
|
797
|
+
Footer: typeof ModalFooter;
|
|
798
|
+
FooterDescription: typeof ModalFooterDescription;
|
|
799
|
+
Actions: typeof ModalActions;
|
|
800
|
+
Action: typeof ModalAction;
|
|
801
|
+
Title: typeof ModalTitle;
|
|
802
|
+
Description: typeof ModalDescription;
|
|
707
803
|
};
|
|
708
|
-
|
|
804
|
+
type ModalComponent = typeof Modal;
|
|
709
805
|
|
|
710
806
|
type SheetResizeOptions = {
|
|
711
807
|
/** @default true (객체를 전달한 경우) */
|
|
@@ -788,30 +884,83 @@ type SheetComponent = typeof DialogPrimitive.Root & {
|
|
|
788
884
|
declare const Sheet: SheetComponent;
|
|
789
885
|
|
|
790
886
|
type MessageBoxVariant = 'default' | 'critical';
|
|
791
|
-
type MessageBoxRootProps =
|
|
792
|
-
type MessageBoxTriggerProps =
|
|
793
|
-
type MessageBoxContentProps =
|
|
887
|
+
type MessageBoxRootProps = Dialog.Root.Props;
|
|
888
|
+
type MessageBoxTriggerProps = Dialog.Trigger.Props;
|
|
889
|
+
type MessageBoxContentProps = Dialog.Popup.Props & {
|
|
794
890
|
/**
|
|
795
891
|
* 메시지 박스 variant
|
|
796
892
|
* @default 'default'
|
|
797
893
|
*/
|
|
798
894
|
variant?: MessageBoxVariant;
|
|
799
895
|
};
|
|
800
|
-
type MessageBoxTitleProps =
|
|
801
|
-
type MessageBoxDescriptionProps =
|
|
802
|
-
type MessageBoxActionsProps = React__default.
|
|
803
|
-
type MessageBoxCancelProps = Omit<ButtonProps, 'color' | 'variant' | 'background'>;
|
|
804
|
-
type MessageBoxActionProps = Omit<ButtonProps, 'color' | 'variant' | 'background'>;
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
896
|
+
type MessageBoxTitleProps = Dialog.Title.Props;
|
|
897
|
+
type MessageBoxDescriptionProps = Dialog.Description.Props;
|
|
898
|
+
type MessageBoxActionsProps = React__default.ComponentProps<'div'>;
|
|
899
|
+
type MessageBoxCancelProps = Omit<ButtonProps, 'color' | 'variant' | 'background'> & React__default.RefAttributes<HTMLButtonElement>;
|
|
900
|
+
type MessageBoxActionProps = Omit<ButtonProps, 'color' | 'variant' | 'background'> & React__default.RefAttributes<HTMLButtonElement>;
|
|
901
|
+
/**
|
|
902
|
+
* 확인/경고 다이얼로그 컴포넌트입니다.
|
|
903
|
+
* Modal보다 단순한 구조로, title + description + 버튼(취소/확인)으로 구성됩니다.
|
|
904
|
+
*
|
|
905
|
+
* @example
|
|
906
|
+
* ```tsx
|
|
907
|
+
* <MessageBox>
|
|
908
|
+
* <MessageBox.Trigger>열기</MessageBox.Trigger>
|
|
909
|
+
* <MessageBox.Content variant="default">
|
|
910
|
+
* <MessageBox.Title>상태를 확인하시겠습니까?</MessageBox.Title>
|
|
911
|
+
* <MessageBox.Description>현재 상태에 대한 추가 확인이 필요합니다.</MessageBox.Description>
|
|
912
|
+
* <MessageBox.Actions>
|
|
913
|
+
* <MessageBox.Cancel>취소</MessageBox.Cancel>
|
|
914
|
+
* <MessageBox.Action>확인</MessageBox.Action>
|
|
915
|
+
* </MessageBox.Actions>
|
|
916
|
+
* </MessageBox.Content>
|
|
917
|
+
* </MessageBox>
|
|
918
|
+
* ```
|
|
919
|
+
*
|
|
920
|
+
* @see https://base-ui.com/react/components/dialog
|
|
921
|
+
*/
|
|
922
|
+
declare function MessageBoxRoot(props: MessageBoxRootProps): react_jsx_runtime.JSX.Element;
|
|
923
|
+
declare namespace MessageBoxRoot {
|
|
924
|
+
var displayName: string;
|
|
925
|
+
}
|
|
926
|
+
declare function MessageBoxTrigger(props: MessageBoxTriggerProps): react_jsx_runtime.JSX.Element;
|
|
927
|
+
declare namespace MessageBoxTrigger {
|
|
928
|
+
var displayName: string;
|
|
929
|
+
}
|
|
930
|
+
declare function MessageBoxContent({ className, children, variant, ...props }: MessageBoxContentProps): react_jsx_runtime.JSX.Element;
|
|
931
|
+
declare namespace MessageBoxContent {
|
|
932
|
+
var displayName: string;
|
|
933
|
+
}
|
|
934
|
+
declare function MessageBoxTitle({ className, ...props }: MessageBoxTitleProps): react_jsx_runtime.JSX.Element;
|
|
935
|
+
declare namespace MessageBoxTitle {
|
|
936
|
+
var displayName: string;
|
|
937
|
+
}
|
|
938
|
+
declare function MessageBoxDescription({ className, ...props }: MessageBoxDescriptionProps): react_jsx_runtime.JSX.Element;
|
|
939
|
+
declare namespace MessageBoxDescription {
|
|
940
|
+
var displayName: string;
|
|
941
|
+
}
|
|
942
|
+
declare function MessageBoxActions({ className, ...props }: MessageBoxActionsProps): react_jsx_runtime.JSX.Element;
|
|
943
|
+
declare namespace MessageBoxActions {
|
|
944
|
+
var displayName: string;
|
|
945
|
+
}
|
|
946
|
+
declare function MessageBoxCancel({ size, ...props }: MessageBoxCancelProps): react_jsx_runtime.JSX.Element;
|
|
947
|
+
declare namespace MessageBoxCancel {
|
|
948
|
+
var displayName: string;
|
|
949
|
+
}
|
|
950
|
+
declare function MessageBoxAction({ size, ...props }: MessageBoxActionProps): react_jsx_runtime.JSX.Element;
|
|
951
|
+
declare namespace MessageBoxAction {
|
|
952
|
+
var displayName: string;
|
|
953
|
+
}
|
|
954
|
+
declare const MessageBox: typeof MessageBoxRoot & {
|
|
955
|
+
Trigger: typeof MessageBoxTrigger;
|
|
956
|
+
Content: typeof MessageBoxContent;
|
|
957
|
+
Title: typeof MessageBoxTitle;
|
|
958
|
+
Description: typeof MessageBoxDescription;
|
|
959
|
+
Actions: typeof MessageBoxActions;
|
|
960
|
+
Cancel: typeof MessageBoxCancel;
|
|
961
|
+
Action: typeof MessageBoxAction;
|
|
813
962
|
};
|
|
814
|
-
|
|
963
|
+
type MessageBoxComponent = typeof MessageBox;
|
|
815
964
|
|
|
816
965
|
declare const containerVariants: (props?: ({
|
|
817
966
|
position?: "fixed" | "absolute" | null | undefined;
|