@exem-ui/react 0.3.4-next.20261015085356 → 0.3.4-next.20261021004719
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/{chunk-SHNVBKAJ.js → chunk-LDCNEHLQ.js} +1 -3
- package/dist/{chunk-L24IAWPF.mjs → chunk-RXQE5QHI.mjs} +1 -3
- package/dist/flat/index.js +8 -8
- package/dist/flat/index.mjs +1 -1
- package/dist/index.d.mts +114 -31
- package/dist/index.d.ts +114 -31
- package/dist/index.js +242 -270
- package/dist/index.mjs +199 -226
- package/package.json +3 -4
|
@@ -568,9 +568,7 @@ var comboboxVariants = {
|
|
|
568
568
|
list: utils.cn(overlayListVariants.viewport, "p-0 empty:hidden"),
|
|
569
569
|
// Positioner는 transform으로 자체 스타킹 컨텍스트를 만들므로 z-index를 여기(루트 레벨)에 줘야
|
|
570
570
|
// Modal/Sheet(z-50) 위에 팝업이 올라온다. popup의 z-50은 컨텍스트 내부라 루트에선 무효.
|
|
571
|
-
|
|
572
|
-
// TODO(#305): radix 제거(Base UI 이관) 시 pointer-events-auto는 불필요 (z-50은 유지)
|
|
573
|
-
positioner: "z-50 pointer-events-auto",
|
|
571
|
+
positioner: "z-50",
|
|
574
572
|
popup: utils.cn(
|
|
575
573
|
"relative z-50 flex max-h-[var(--available-height)] w-[var(--anchor-width)] min-w-[8rem] max-w-[var(--available-width)] origin-[var(--transform-origin)] flex-col gap-0.5 overflow-hidden rounded-medium border border-border-primary bg-background-overlay p-1 shadow-weak",
|
|
576
574
|
"transition-[transform,scale,opacity] duration-150 data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:scale-95 data-[starting-style]:opacity-0"
|
|
@@ -543,9 +543,7 @@ var comboboxVariants = {
|
|
|
543
543
|
list: cn(overlayListVariants.viewport, "p-0 empty:hidden"),
|
|
544
544
|
// Positioner는 transform으로 자체 스타킹 컨텍스트를 만들므로 z-index를 여기(루트 레벨)에 줘야
|
|
545
545
|
// Modal/Sheet(z-50) 위에 팝업이 올라온다. popup의 z-50은 컨텍스트 내부라 루트에선 무효.
|
|
546
|
-
|
|
547
|
-
// TODO(#305): radix 제거(Base UI 이관) 시 pointer-events-auto는 불필요 (z-50은 유지)
|
|
548
|
-
positioner: "z-50 pointer-events-auto",
|
|
546
|
+
positioner: "z-50",
|
|
549
547
|
popup: cn(
|
|
550
548
|
"relative z-50 flex max-h-[var(--available-height)] w-[var(--anchor-width)] min-w-[8rem] max-w-[var(--available-width)] origin-[var(--transform-origin)] flex-col gap-0.5 overflow-hidden rounded-medium border border-border-primary bg-background-overlay p-1 shadow-weak",
|
|
551
549
|
"transition-[transform,scale,opacity] duration-150 data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:scale-95 data-[starting-style]:opacity-0"
|
package/dist/flat/index.js
CHANGED
|
@@ -1,35 +1,35 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunkLDCNEHLQ_js = require('../chunk-LDCNEHLQ.js');
|
|
4
4
|
require('../chunk-JIFX424V.js');
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
Object.defineProperty(exports, "ConditionalTooltip", {
|
|
9
9
|
enumerable: true,
|
|
10
|
-
get: function () { return
|
|
10
|
+
get: function () { return chunkLDCNEHLQ_js.ConditionalTooltip; }
|
|
11
11
|
});
|
|
12
12
|
Object.defineProperty(exports, "FlatColorPalette", {
|
|
13
13
|
enumerable: true,
|
|
14
|
-
get: function () { return
|
|
14
|
+
get: function () { return chunkLDCNEHLQ_js.FlatColorPalette; }
|
|
15
15
|
});
|
|
16
16
|
Object.defineProperty(exports, "FlatCombobox", {
|
|
17
17
|
enumerable: true,
|
|
18
|
-
get: function () { return
|
|
18
|
+
get: function () { return chunkLDCNEHLQ_js.FlatCombobox; }
|
|
19
19
|
});
|
|
20
20
|
Object.defineProperty(exports, "FlatSegment", {
|
|
21
21
|
enumerable: true,
|
|
22
|
-
get: function () { return
|
|
22
|
+
get: function () { return chunkLDCNEHLQ_js.FlatSegment; }
|
|
23
23
|
});
|
|
24
24
|
Object.defineProperty(exports, "FlatSelect", {
|
|
25
25
|
enumerable: true,
|
|
26
|
-
get: function () { return
|
|
26
|
+
get: function () { return chunkLDCNEHLQ_js.FlatSelect; }
|
|
27
27
|
});
|
|
28
28
|
Object.defineProperty(exports, "FlatTabs", {
|
|
29
29
|
enumerable: true,
|
|
30
|
-
get: function () { return
|
|
30
|
+
get: function () { return chunkLDCNEHLQ_js.FlatTabs; }
|
|
31
31
|
});
|
|
32
32
|
Object.defineProperty(exports, "FlatTooltip", {
|
|
33
33
|
enumerable: true,
|
|
34
|
-
get: function () { return
|
|
34
|
+
get: function () { return chunkLDCNEHLQ_js.FlatTooltip; }
|
|
35
35
|
});
|
package/dist/flat/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { ConditionalTooltip, FlatColorPalette, FlatCombobox, FlatSegment, FlatSelect, FlatTabs, FlatTooltip } from '../chunk-
|
|
1
|
+
export { ConditionalTooltip, FlatColorPalette, FlatCombobox, FlatSegment, FlatSelect, FlatTabs, FlatTooltip } from '../chunk-RXQE5QHI.mjs';
|
|
2
2
|
import '../chunk-HCGCMPIB.mjs';
|
package/dist/index.d.mts
CHANGED
|
@@ -15,7 +15,6 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
|
|
|
15
15
|
import { Combobox as Combobox$1 } from '@base-ui/react/combobox';
|
|
16
16
|
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
|
|
17
17
|
import { Dialog } from '@base-ui/react/dialog';
|
|
18
|
-
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
19
18
|
import { Toaster as Toaster$1, ExternalToast, toast as toast$1 } from 'sonner';
|
|
20
19
|
import '@radix-ui/react-tabs';
|
|
21
20
|
import '@radix-ui/react-select';
|
|
@@ -808,11 +807,11 @@ type ModalComponent = typeof Modal;
|
|
|
808
807
|
type SheetResizeOptions = {
|
|
809
808
|
/** @default true (객체를 전달한 경우) */
|
|
810
809
|
use?: boolean;
|
|
811
|
-
/** 최소 크기(px)
|
|
810
|
+
/** 최소 크기(px) @default 400 */
|
|
812
811
|
minSize?: number;
|
|
813
812
|
/** 최대 크기(px 또는 '80%'). 퍼센트는 뷰포트 기준. @default '80%' */
|
|
814
813
|
maxSize?: number | string;
|
|
815
|
-
/** 기본 크기(px)
|
|
814
|
+
/** 기본 크기(px) @default 800 */
|
|
816
815
|
defaultSize?: number;
|
|
817
816
|
/** 지정 시 localStorage에 크기를 저장/복원 */
|
|
818
817
|
storageKey?: string;
|
|
@@ -820,12 +819,12 @@ type SheetResizeOptions = {
|
|
|
820
819
|
onResize?: (size: number) => void;
|
|
821
820
|
};
|
|
822
821
|
|
|
823
|
-
type SheetSide = '
|
|
824
|
-
type SheetRootProps =
|
|
825
|
-
type SheetTriggerProps =
|
|
826
|
-
type SheetPortalProps =
|
|
827
|
-
type SheetOverlayProps =
|
|
828
|
-
type SheetContentProps =
|
|
822
|
+
type SheetSide = 'right' | 'left';
|
|
823
|
+
type SheetRootProps = Dialog.Root.Props;
|
|
824
|
+
type SheetTriggerProps = Dialog.Trigger.Props;
|
|
825
|
+
type SheetPortalProps = Dialog.Portal.Props;
|
|
826
|
+
type SheetOverlayProps = Dialog.Backdrop.Props;
|
|
827
|
+
type SheetContentProps = Dialog.Popup.Props & {
|
|
829
828
|
/**
|
|
830
829
|
* Sheet가 열리는 방향
|
|
831
830
|
* @default 'right'
|
|
@@ -837,8 +836,8 @@ type SheetContentProps = React__default.ComponentPropsWithoutRef<typeof DialogPr
|
|
|
837
836
|
*/
|
|
838
837
|
resizable?: boolean | SheetResizeOptions;
|
|
839
838
|
};
|
|
840
|
-
type SheetCloseProps =
|
|
841
|
-
type SheetHeaderProps = React__default.
|
|
839
|
+
type SheetCloseProps = Dialog.Close.Props;
|
|
840
|
+
type SheetHeaderProps = React__default.ComponentProps<'div'> & {
|
|
842
841
|
/**
|
|
843
842
|
* 하단 구분선 표시 여부
|
|
844
843
|
* @default true
|
|
@@ -852,38 +851,122 @@ type SheetHeaderProps = React__default.HTMLAttributes<HTMLDivElement> & {
|
|
|
852
851
|
*/
|
|
853
852
|
rightSlot?: React__default.ReactNode;
|
|
854
853
|
};
|
|
855
|
-
type SheetBodyProps = React__default.
|
|
856
|
-
|
|
854
|
+
type SheetBodyProps = React__default.ComponentProps<'div'> & {
|
|
855
|
+
/**
|
|
856
|
+
* 본문을 ScrollArea로 감쌀지 여부. 끄면 스크롤 컨테이너 없이 패딩만 남아
|
|
857
|
+
* 높이를 소비자가 직접 계산할 수 있다. 넘치는 콘텐츠도 잘리지 않는다.
|
|
858
|
+
* @default true
|
|
859
|
+
*/
|
|
860
|
+
scroll?: boolean;
|
|
861
|
+
};
|
|
862
|
+
type SheetFooterProps = React__default.ComponentProps<'div'> & {
|
|
857
863
|
/**
|
|
858
864
|
* 상단 구분선 표시 여부
|
|
859
865
|
* @default true
|
|
860
866
|
*/
|
|
861
867
|
line?: boolean;
|
|
862
868
|
};
|
|
863
|
-
type SheetFooterDescriptionProps = React__default.
|
|
869
|
+
type SheetFooterDescriptionProps = React__default.ComponentProps<'div'> & {
|
|
864
870
|
/** 에러 상태 표시 여부 */
|
|
865
871
|
error?: boolean;
|
|
866
872
|
/** 설명 앞에 표시할 아이콘 요소 */
|
|
867
873
|
icon?: React__default.ReactNode;
|
|
868
874
|
};
|
|
869
|
-
type SheetActionsProps = React__default.
|
|
870
|
-
type SheetTitleProps =
|
|
871
|
-
type SheetDescriptionProps =
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
875
|
+
type SheetActionsProps = React__default.ComponentProps<'div'>;
|
|
876
|
+
type SheetTitleProps = Dialog.Title.Props;
|
|
877
|
+
type SheetDescriptionProps = Dialog.Description.Props;
|
|
878
|
+
/**
|
|
879
|
+
* 화면 가장자리에서 슬라이드되어 열리는 패널 컴포넌트입니다.
|
|
880
|
+
* Base UI Dialog 기반이며 Compound Component 패턴으로 사용합니다.
|
|
881
|
+
*
|
|
882
|
+
* @example
|
|
883
|
+
* ```tsx
|
|
884
|
+
* <Sheet>
|
|
885
|
+
* <Sheet.Trigger>열기</Sheet.Trigger>
|
|
886
|
+
* <Sheet.Content side="right">
|
|
887
|
+
* <Sheet.Header>
|
|
888
|
+
* <Sheet.Title>제목</Sheet.Title>
|
|
889
|
+
* </Sheet.Header>
|
|
890
|
+
* <Sheet.Body>내용</Sheet.Body>
|
|
891
|
+
* <Sheet.Footer>
|
|
892
|
+
* <Sheet.Actions>
|
|
893
|
+
* <Sheet.Close>닫기</Sheet.Close>
|
|
894
|
+
* </Sheet.Actions>
|
|
895
|
+
* </Sheet.Footer>
|
|
896
|
+
* </Sheet.Content>
|
|
897
|
+
* </Sheet>
|
|
898
|
+
* ```
|
|
899
|
+
*
|
|
900
|
+
* @see {@link SheetContentProps} Content props 상세
|
|
901
|
+
* @see https://base-ui.com/react/components/dialog
|
|
902
|
+
*/
|
|
903
|
+
declare function SheetRoot(props: SheetRootProps): react_jsx_runtime.JSX.Element;
|
|
904
|
+
declare namespace SheetRoot {
|
|
905
|
+
var displayName: string;
|
|
906
|
+
}
|
|
907
|
+
declare function SheetTrigger(props: SheetTriggerProps): react_jsx_runtime.JSX.Element;
|
|
908
|
+
declare namespace SheetTrigger {
|
|
909
|
+
var displayName: string;
|
|
910
|
+
}
|
|
911
|
+
declare function SheetPortal(props: SheetPortalProps): react_jsx_runtime.JSX.Element;
|
|
912
|
+
declare namespace SheetPortal {
|
|
913
|
+
var displayName: string;
|
|
914
|
+
}
|
|
915
|
+
declare function SheetOverlay({ className, ...props }: SheetOverlayProps): react_jsx_runtime.JSX.Element;
|
|
916
|
+
declare namespace SheetOverlay {
|
|
917
|
+
var displayName: string;
|
|
918
|
+
}
|
|
919
|
+
declare function SheetContent({ className, children, side: sideProp, resizable, ...props }: SheetContentProps): react_jsx_runtime.JSX.Element;
|
|
920
|
+
declare namespace SheetContent {
|
|
921
|
+
var displayName: string;
|
|
922
|
+
}
|
|
923
|
+
declare function SheetHeader({ className, line, rightSlot, children, ...props }: SheetHeaderProps): react_jsx_runtime.JSX.Element;
|
|
924
|
+
declare namespace SheetHeader {
|
|
925
|
+
var displayName: string;
|
|
926
|
+
}
|
|
927
|
+
declare function SheetBody({ className, children, scroll, ...props }: SheetBodyProps): react_jsx_runtime.JSX.Element;
|
|
928
|
+
declare namespace SheetBody {
|
|
929
|
+
var displayName: string;
|
|
930
|
+
}
|
|
931
|
+
declare function SheetFooter({ className, line, ...props }: SheetFooterProps): react_jsx_runtime.JSX.Element;
|
|
932
|
+
declare namespace SheetFooter {
|
|
933
|
+
var displayName: string;
|
|
934
|
+
}
|
|
935
|
+
declare function SheetFooterDescription({ className, error, icon, children, ...props }: SheetFooterDescriptionProps): react_jsx_runtime.JSX.Element;
|
|
936
|
+
declare namespace SheetFooterDescription {
|
|
937
|
+
var displayName: string;
|
|
938
|
+
}
|
|
939
|
+
declare function SheetActions({ className, ...props }: SheetActionsProps): react_jsx_runtime.JSX.Element;
|
|
940
|
+
declare namespace SheetActions {
|
|
941
|
+
var displayName: string;
|
|
942
|
+
}
|
|
943
|
+
declare function SheetClose(props: SheetCloseProps): react_jsx_runtime.JSX.Element;
|
|
944
|
+
declare namespace SheetClose {
|
|
945
|
+
var displayName: string;
|
|
946
|
+
}
|
|
947
|
+
declare function SheetTitle({ className, ...props }: SheetTitleProps): react_jsx_runtime.JSX.Element;
|
|
948
|
+
declare namespace SheetTitle {
|
|
949
|
+
var displayName: string;
|
|
950
|
+
}
|
|
951
|
+
declare function SheetDescription({ className, ...props }: SheetDescriptionProps): react_jsx_runtime.JSX.Element;
|
|
952
|
+
declare namespace SheetDescription {
|
|
953
|
+
var displayName: string;
|
|
954
|
+
}
|
|
955
|
+
declare const Sheet: typeof SheetRoot & {
|
|
956
|
+
Trigger: typeof SheetTrigger;
|
|
957
|
+
Portal: typeof SheetPortal;
|
|
958
|
+
Close: typeof SheetClose;
|
|
959
|
+
Overlay: typeof SheetOverlay;
|
|
960
|
+
Content: typeof SheetContent;
|
|
961
|
+
Header: typeof SheetHeader;
|
|
962
|
+
Body: typeof SheetBody;
|
|
963
|
+
Footer: typeof SheetFooter;
|
|
964
|
+
FooterDescription: typeof SheetFooterDescription;
|
|
965
|
+
Actions: typeof SheetActions;
|
|
966
|
+
Title: typeof SheetTitle;
|
|
967
|
+
Description: typeof SheetDescription;
|
|
885
968
|
};
|
|
886
|
-
|
|
969
|
+
type SheetComponent = typeof Sheet;
|
|
887
970
|
|
|
888
971
|
type MessageBoxVariant = 'default' | 'critical';
|
|
889
972
|
type MessageBoxRootProps = Dialog.Root.Props;
|
package/dist/index.d.ts
CHANGED
|
@@ -15,7 +15,6 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
|
|
|
15
15
|
import { Combobox as Combobox$1 } from '@base-ui/react/combobox';
|
|
16
16
|
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
|
|
17
17
|
import { Dialog } from '@base-ui/react/dialog';
|
|
18
|
-
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
19
18
|
import { Toaster as Toaster$1, ExternalToast, toast as toast$1 } from 'sonner';
|
|
20
19
|
import '@radix-ui/react-tabs';
|
|
21
20
|
import '@radix-ui/react-select';
|
|
@@ -808,11 +807,11 @@ type ModalComponent = typeof Modal;
|
|
|
808
807
|
type SheetResizeOptions = {
|
|
809
808
|
/** @default true (객체를 전달한 경우) */
|
|
810
809
|
use?: boolean;
|
|
811
|
-
/** 최소 크기(px)
|
|
810
|
+
/** 최소 크기(px) @default 400 */
|
|
812
811
|
minSize?: number;
|
|
813
812
|
/** 최대 크기(px 또는 '80%'). 퍼센트는 뷰포트 기준. @default '80%' */
|
|
814
813
|
maxSize?: number | string;
|
|
815
|
-
/** 기본 크기(px)
|
|
814
|
+
/** 기본 크기(px) @default 800 */
|
|
816
815
|
defaultSize?: number;
|
|
817
816
|
/** 지정 시 localStorage에 크기를 저장/복원 */
|
|
818
817
|
storageKey?: string;
|
|
@@ -820,12 +819,12 @@ type SheetResizeOptions = {
|
|
|
820
819
|
onResize?: (size: number) => void;
|
|
821
820
|
};
|
|
822
821
|
|
|
823
|
-
type SheetSide = '
|
|
824
|
-
type SheetRootProps =
|
|
825
|
-
type SheetTriggerProps =
|
|
826
|
-
type SheetPortalProps =
|
|
827
|
-
type SheetOverlayProps =
|
|
828
|
-
type SheetContentProps =
|
|
822
|
+
type SheetSide = 'right' | 'left';
|
|
823
|
+
type SheetRootProps = Dialog.Root.Props;
|
|
824
|
+
type SheetTriggerProps = Dialog.Trigger.Props;
|
|
825
|
+
type SheetPortalProps = Dialog.Portal.Props;
|
|
826
|
+
type SheetOverlayProps = Dialog.Backdrop.Props;
|
|
827
|
+
type SheetContentProps = Dialog.Popup.Props & {
|
|
829
828
|
/**
|
|
830
829
|
* Sheet가 열리는 방향
|
|
831
830
|
* @default 'right'
|
|
@@ -837,8 +836,8 @@ type SheetContentProps = React__default.ComponentPropsWithoutRef<typeof DialogPr
|
|
|
837
836
|
*/
|
|
838
837
|
resizable?: boolean | SheetResizeOptions;
|
|
839
838
|
};
|
|
840
|
-
type SheetCloseProps =
|
|
841
|
-
type SheetHeaderProps = React__default.
|
|
839
|
+
type SheetCloseProps = Dialog.Close.Props;
|
|
840
|
+
type SheetHeaderProps = React__default.ComponentProps<'div'> & {
|
|
842
841
|
/**
|
|
843
842
|
* 하단 구분선 표시 여부
|
|
844
843
|
* @default true
|
|
@@ -852,38 +851,122 @@ type SheetHeaderProps = React__default.HTMLAttributes<HTMLDivElement> & {
|
|
|
852
851
|
*/
|
|
853
852
|
rightSlot?: React__default.ReactNode;
|
|
854
853
|
};
|
|
855
|
-
type SheetBodyProps = React__default.
|
|
856
|
-
|
|
854
|
+
type SheetBodyProps = React__default.ComponentProps<'div'> & {
|
|
855
|
+
/**
|
|
856
|
+
* 본문을 ScrollArea로 감쌀지 여부. 끄면 스크롤 컨테이너 없이 패딩만 남아
|
|
857
|
+
* 높이를 소비자가 직접 계산할 수 있다. 넘치는 콘텐츠도 잘리지 않는다.
|
|
858
|
+
* @default true
|
|
859
|
+
*/
|
|
860
|
+
scroll?: boolean;
|
|
861
|
+
};
|
|
862
|
+
type SheetFooterProps = React__default.ComponentProps<'div'> & {
|
|
857
863
|
/**
|
|
858
864
|
* 상단 구분선 표시 여부
|
|
859
865
|
* @default true
|
|
860
866
|
*/
|
|
861
867
|
line?: boolean;
|
|
862
868
|
};
|
|
863
|
-
type SheetFooterDescriptionProps = React__default.
|
|
869
|
+
type SheetFooterDescriptionProps = React__default.ComponentProps<'div'> & {
|
|
864
870
|
/** 에러 상태 표시 여부 */
|
|
865
871
|
error?: boolean;
|
|
866
872
|
/** 설명 앞에 표시할 아이콘 요소 */
|
|
867
873
|
icon?: React__default.ReactNode;
|
|
868
874
|
};
|
|
869
|
-
type SheetActionsProps = React__default.
|
|
870
|
-
type SheetTitleProps =
|
|
871
|
-
type SheetDescriptionProps =
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
875
|
+
type SheetActionsProps = React__default.ComponentProps<'div'>;
|
|
876
|
+
type SheetTitleProps = Dialog.Title.Props;
|
|
877
|
+
type SheetDescriptionProps = Dialog.Description.Props;
|
|
878
|
+
/**
|
|
879
|
+
* 화면 가장자리에서 슬라이드되어 열리는 패널 컴포넌트입니다.
|
|
880
|
+
* Base UI Dialog 기반이며 Compound Component 패턴으로 사용합니다.
|
|
881
|
+
*
|
|
882
|
+
* @example
|
|
883
|
+
* ```tsx
|
|
884
|
+
* <Sheet>
|
|
885
|
+
* <Sheet.Trigger>열기</Sheet.Trigger>
|
|
886
|
+
* <Sheet.Content side="right">
|
|
887
|
+
* <Sheet.Header>
|
|
888
|
+
* <Sheet.Title>제목</Sheet.Title>
|
|
889
|
+
* </Sheet.Header>
|
|
890
|
+
* <Sheet.Body>내용</Sheet.Body>
|
|
891
|
+
* <Sheet.Footer>
|
|
892
|
+
* <Sheet.Actions>
|
|
893
|
+
* <Sheet.Close>닫기</Sheet.Close>
|
|
894
|
+
* </Sheet.Actions>
|
|
895
|
+
* </Sheet.Footer>
|
|
896
|
+
* </Sheet.Content>
|
|
897
|
+
* </Sheet>
|
|
898
|
+
* ```
|
|
899
|
+
*
|
|
900
|
+
* @see {@link SheetContentProps} Content props 상세
|
|
901
|
+
* @see https://base-ui.com/react/components/dialog
|
|
902
|
+
*/
|
|
903
|
+
declare function SheetRoot(props: SheetRootProps): react_jsx_runtime.JSX.Element;
|
|
904
|
+
declare namespace SheetRoot {
|
|
905
|
+
var displayName: string;
|
|
906
|
+
}
|
|
907
|
+
declare function SheetTrigger(props: SheetTriggerProps): react_jsx_runtime.JSX.Element;
|
|
908
|
+
declare namespace SheetTrigger {
|
|
909
|
+
var displayName: string;
|
|
910
|
+
}
|
|
911
|
+
declare function SheetPortal(props: SheetPortalProps): react_jsx_runtime.JSX.Element;
|
|
912
|
+
declare namespace SheetPortal {
|
|
913
|
+
var displayName: string;
|
|
914
|
+
}
|
|
915
|
+
declare function SheetOverlay({ className, ...props }: SheetOverlayProps): react_jsx_runtime.JSX.Element;
|
|
916
|
+
declare namespace SheetOverlay {
|
|
917
|
+
var displayName: string;
|
|
918
|
+
}
|
|
919
|
+
declare function SheetContent({ className, children, side: sideProp, resizable, ...props }: SheetContentProps): react_jsx_runtime.JSX.Element;
|
|
920
|
+
declare namespace SheetContent {
|
|
921
|
+
var displayName: string;
|
|
922
|
+
}
|
|
923
|
+
declare function SheetHeader({ className, line, rightSlot, children, ...props }: SheetHeaderProps): react_jsx_runtime.JSX.Element;
|
|
924
|
+
declare namespace SheetHeader {
|
|
925
|
+
var displayName: string;
|
|
926
|
+
}
|
|
927
|
+
declare function SheetBody({ className, children, scroll, ...props }: SheetBodyProps): react_jsx_runtime.JSX.Element;
|
|
928
|
+
declare namespace SheetBody {
|
|
929
|
+
var displayName: string;
|
|
930
|
+
}
|
|
931
|
+
declare function SheetFooter({ className, line, ...props }: SheetFooterProps): react_jsx_runtime.JSX.Element;
|
|
932
|
+
declare namespace SheetFooter {
|
|
933
|
+
var displayName: string;
|
|
934
|
+
}
|
|
935
|
+
declare function SheetFooterDescription({ className, error, icon, children, ...props }: SheetFooterDescriptionProps): react_jsx_runtime.JSX.Element;
|
|
936
|
+
declare namespace SheetFooterDescription {
|
|
937
|
+
var displayName: string;
|
|
938
|
+
}
|
|
939
|
+
declare function SheetActions({ className, ...props }: SheetActionsProps): react_jsx_runtime.JSX.Element;
|
|
940
|
+
declare namespace SheetActions {
|
|
941
|
+
var displayName: string;
|
|
942
|
+
}
|
|
943
|
+
declare function SheetClose(props: SheetCloseProps): react_jsx_runtime.JSX.Element;
|
|
944
|
+
declare namespace SheetClose {
|
|
945
|
+
var displayName: string;
|
|
946
|
+
}
|
|
947
|
+
declare function SheetTitle({ className, ...props }: SheetTitleProps): react_jsx_runtime.JSX.Element;
|
|
948
|
+
declare namespace SheetTitle {
|
|
949
|
+
var displayName: string;
|
|
950
|
+
}
|
|
951
|
+
declare function SheetDescription({ className, ...props }: SheetDescriptionProps): react_jsx_runtime.JSX.Element;
|
|
952
|
+
declare namespace SheetDescription {
|
|
953
|
+
var displayName: string;
|
|
954
|
+
}
|
|
955
|
+
declare const Sheet: typeof SheetRoot & {
|
|
956
|
+
Trigger: typeof SheetTrigger;
|
|
957
|
+
Portal: typeof SheetPortal;
|
|
958
|
+
Close: typeof SheetClose;
|
|
959
|
+
Overlay: typeof SheetOverlay;
|
|
960
|
+
Content: typeof SheetContent;
|
|
961
|
+
Header: typeof SheetHeader;
|
|
962
|
+
Body: typeof SheetBody;
|
|
963
|
+
Footer: typeof SheetFooter;
|
|
964
|
+
FooterDescription: typeof SheetFooterDescription;
|
|
965
|
+
Actions: typeof SheetActions;
|
|
966
|
+
Title: typeof SheetTitle;
|
|
967
|
+
Description: typeof SheetDescription;
|
|
885
968
|
};
|
|
886
|
-
|
|
969
|
+
type SheetComponent = typeof Sheet;
|
|
887
970
|
|
|
888
971
|
type MessageBoxVariant = 'default' | 'critical';
|
|
889
972
|
type MessageBoxRootProps = Dialog.Root.Props;
|