@exem-ui/react 0.3.4-next.20260609073805 → 0.3.4-next.20260609082923

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.
Files changed (7) hide show
  1. package/dist/index.d.mts +86 -1
  2. package/dist/index.d.ts +86 -1
  3. package/dist/index.js +192 -0
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +192 -1
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +3 -3
package/dist/index.d.mts CHANGED
@@ -649,6 +649,91 @@ type ModalComponent = typeof DialogPrimitive.Root & {
649
649
  */
650
650
  declare const Modal: ModalComponent;
651
651
 
652
+ type SheetSide = 'top' | 'right' | 'bottom' | 'left';
653
+ type SheetRootProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;
654
+ type SheetTriggerProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;
655
+ type SheetPortalProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>;
656
+ type SheetOverlayProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>;
657
+ type SheetContentProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
658
+ /**
659
+ * Sheet가 열리는 방향
660
+ * @default 'right'
661
+ */
662
+ side?: SheetSide;
663
+ };
664
+ type SheetCloseProps = ButtonProps;
665
+ type SheetHeaderProps = React__default.HTMLAttributes<HTMLDivElement> & {
666
+ /**
667
+ * 하단 구분선 표시 여부
668
+ * @default true
669
+ */
670
+ line?: boolean;
671
+ /**
672
+ * 헤더 우측 영역(rightSlot).
673
+ * - 미지정(`undefined`): 기본 닫기(X) 버튼을 렌더링하며 클릭 시 Sheet를 닫는다.
674
+ * - `null` / `false`: 우측 영역을 숨긴다.
675
+ * - ReactNode: 전달한 노드를 그대로 렌더링한다. 닫기 동작이 필요하면 `Sheet.Close`로 감싼다.
676
+ */
677
+ rightSlot?: React__default.ReactNode;
678
+ };
679
+ type SheetBodyProps = React__default.HTMLAttributes<HTMLDivElement>;
680
+ type SheetFooterProps = React__default.HTMLAttributes<HTMLDivElement> & {
681
+ /**
682
+ * 상단 구분선 표시 여부
683
+ * @default true
684
+ */
685
+ line?: boolean;
686
+ };
687
+ type SheetFooterDescriptionProps = React__default.HTMLAttributes<HTMLDivElement> & {
688
+ /** 에러 상태 표시 여부 */
689
+ error?: boolean;
690
+ /** 설명 앞에 표시할 아이콘 요소 */
691
+ icon?: React__default.ReactNode;
692
+ };
693
+ type SheetActionsProps = React__default.HTMLAttributes<HTMLDivElement>;
694
+ type SheetTitleProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;
695
+ type SheetDescriptionProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;
696
+ type SheetComponent = typeof DialogPrimitive.Root & {
697
+ Trigger: typeof DialogPrimitive.Trigger;
698
+ Portal: typeof DialogPrimitive.Portal;
699
+ Close: typeof DialogPrimitive.Close;
700
+ Overlay: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetOverlayProps> & React__default.RefAttributes<React__default.ComponentRef<typeof DialogPrimitive.Overlay>>>;
701
+ Content: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetContentProps> & React__default.RefAttributes<React__default.ComponentRef<typeof DialogPrimitive.Content>>>;
702
+ Header: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetHeaderProps> & React__default.RefAttributes<HTMLDivElement>>;
703
+ Body: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetBodyProps> & React__default.RefAttributes<HTMLDivElement>>;
704
+ Footer: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetFooterProps> & React__default.RefAttributes<HTMLDivElement>>;
705
+ FooterDescription: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetFooterDescriptionProps> & React__default.RefAttributes<HTMLDivElement>>;
706
+ Actions: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetActionsProps> & React__default.RefAttributes<HTMLDivElement>>;
707
+ Title: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetTitleProps> & React__default.RefAttributes<React__default.ComponentRef<typeof DialogPrimitive.Title>>>;
708
+ Description: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetDescriptionProps> & React__default.RefAttributes<React__default.ComponentRef<typeof DialogPrimitive.Description>>>;
709
+ };
710
+ /**
711
+ * 화면 가장자리에서 슬라이드되어 열리는 패널 컴포넌트입니다.
712
+ * Radix UI Dialog 기반이며 Compound Component 패턴으로 사용합니다.
713
+ *
714
+ * @example
715
+ * ```tsx
716
+ * <Sheet>
717
+ * <Sheet.Trigger>열기</Sheet.Trigger>
718
+ * <Sheet.Content side="right">
719
+ * <Sheet.Header>
720
+ * <Sheet.Title>제목</Sheet.Title>
721
+ * </Sheet.Header>
722
+ * <Sheet.Body>내용</Sheet.Body>
723
+ * <Sheet.Footer>
724
+ * <Sheet.Actions>
725
+ * <Sheet.Close>닫기</Sheet.Close>
726
+ * <Button>확인</Button>
727
+ * </Sheet.Actions>
728
+ * </Sheet.Footer>
729
+ * </Sheet.Content>
730
+ * </Sheet>
731
+ * ```
732
+ *
733
+ * @see {@link SheetContentProps} Content props 상세
734
+ */
735
+ declare const Sheet: SheetComponent;
736
+
652
737
  type MessageBoxVariant = 'default' | 'critical';
653
738
  type MessageBoxRootProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;
654
739
  type MessageBoxTriggerProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;
@@ -931,4 +1016,4 @@ declare const buttonize: (fn: (e: React__default.MouseEvent<HTMLElement> | React
931
1016
  onKeyDown: (event: React__default.KeyboardEvent<HTMLDivElement>) => void;
932
1017
  };
933
1018
 
934
- export { Avatar, type AvatarComponent, type AvatarProps, Badge, type BadgeComponent, type BadgeProps, Breadcrumb, type BreadcrumbComponent, type BreadcrumbEllipsisProps, type BreadcrumbItemProps, type BreadcrumbLinkProps, type BreadcrumbListProps, type BreadcrumbPageProps, type BreadcrumbPathProps, type BreadcrumbRootProps, type BreadcrumbSeparatorProps, Button, type ButtonComponent, ButtonGroup, type ButtonGroupComponent, type ButtonGroupItem, type ButtonGroupProps, type ButtonProps, Checkbox, type CheckboxComponent, type CheckboxProps, DatePicker, type DatePickerProps, DoubleTag, type DoubleTagProps, Dropdown, type DropdownComponent, type DropdownContentProps, type DropdownGroupProps, type DropdownItemProps, type DropdownLabelProps, type DropdownRootProps, type DropdownSeparatorProps, type DropdownTriggerProps, type ExtendedExternalToast, IconButton, type IconButtonComponent, type IconButtonProps, Loading, type LoadingComponent, type LoadingProps, MessageBox, type MessageBoxActionProps, type MessageBoxActionsProps, type MessageBoxCancelProps, type MessageBoxComponent, type MessageBoxContentProps, type MessageBoxDescriptionProps, type MessageBoxRootProps, type MessageBoxTitleProps, type MessageBoxTriggerProps, type MessageBoxVariant, Modal, type ModalActionProps, type ModalActionsProps, type ModalBodyProps, type ModalCloseProps, type ModalComponent, type ModalContentProps, type ModalDescriptionProps, type ModalFooterDescriptionProps, type ModalFooterProps, type ModalHeaderProps, type ModalOverlayProps, type ModalPortalProps, type ModalRootProps, type ModalTitleProps, type ModalTriggerProps, Progress, type ProgressComponent, type ProgressProps, Radio, type RadioComponent, type RadioItemProps, type RadioRootProps, ScrollArea, type ScrollAreaProps, ScrollBar, type Options as SonnerToastOptions, Star, type StarComponent, type StarProps, Switch, type SwitchComponent, type SwitchProps, Tag, type TagColor, type TagComponent, type TagProps, TextArea, type TextAreaComponent, type TextAreaDescriptionProps, type TextAreaFieldProps, type TextAreaLabelProps, type TextAreaRootProps, TextField, type TextFieldComponent, type TextFieldDescriptionProps, type TextFieldInputProps, type TextFieldLabelProps, type TextFieldRootProps, type ToastAction, type ToastInput, type ToastOptions, ToastProvider, type ToastProviderProps, Toaster, type ToasterActionProps, type ToasterComponent, type ToasterContainerProps, type ToasterDescriptionProps, type ToasterIconProps, type ToasterRootProps, type ToasterTitleProps, buttonize, toast, useToast };
1019
+ export { Avatar, type AvatarComponent, type AvatarProps, Badge, type BadgeComponent, type BadgeProps, Breadcrumb, type BreadcrumbComponent, type BreadcrumbEllipsisProps, type BreadcrumbItemProps, type BreadcrumbLinkProps, type BreadcrumbListProps, type BreadcrumbPageProps, type BreadcrumbPathProps, type BreadcrumbRootProps, type BreadcrumbSeparatorProps, Button, type ButtonComponent, ButtonGroup, type ButtonGroupComponent, type ButtonGroupItem, type ButtonGroupProps, type ButtonProps, Checkbox, type CheckboxComponent, type CheckboxProps, DatePicker, type DatePickerProps, DoubleTag, type DoubleTagProps, Dropdown, type DropdownComponent, type DropdownContentProps, type DropdownGroupProps, type DropdownItemProps, type DropdownLabelProps, type DropdownRootProps, type DropdownSeparatorProps, type DropdownTriggerProps, type ExtendedExternalToast, IconButton, type IconButtonComponent, type IconButtonProps, Loading, type LoadingComponent, type LoadingProps, MessageBox, type MessageBoxActionProps, type MessageBoxActionsProps, type MessageBoxCancelProps, type MessageBoxComponent, type MessageBoxContentProps, type MessageBoxDescriptionProps, type MessageBoxRootProps, type MessageBoxTitleProps, type MessageBoxTriggerProps, type MessageBoxVariant, Modal, type ModalActionProps, type ModalActionsProps, type ModalBodyProps, type ModalCloseProps, type ModalComponent, type ModalContentProps, type ModalDescriptionProps, type ModalFooterDescriptionProps, type ModalFooterProps, type ModalHeaderProps, type ModalOverlayProps, type ModalPortalProps, type ModalRootProps, type ModalTitleProps, type ModalTriggerProps, Progress, type ProgressComponent, type ProgressProps, Radio, type RadioComponent, type RadioItemProps, type RadioRootProps, ScrollArea, type ScrollAreaProps, ScrollBar, Sheet, type SheetActionsProps, type SheetBodyProps, type SheetCloseProps, type SheetComponent, type SheetContentProps, type SheetDescriptionProps, type SheetFooterDescriptionProps, type SheetFooterProps, type SheetHeaderProps, type SheetOverlayProps, type SheetPortalProps, type SheetRootProps, type SheetSide, type SheetTitleProps, type SheetTriggerProps, type Options as SonnerToastOptions, Star, type StarComponent, type StarProps, Switch, type SwitchComponent, type SwitchProps, Tag, type TagColor, type TagComponent, type TagProps, TextArea, type TextAreaComponent, type TextAreaDescriptionProps, type TextAreaFieldProps, type TextAreaLabelProps, type TextAreaRootProps, TextField, type TextFieldComponent, type TextFieldDescriptionProps, type TextFieldInputProps, type TextFieldLabelProps, type TextFieldRootProps, type ToastAction, type ToastInput, type ToastOptions, ToastProvider, type ToastProviderProps, Toaster, type ToasterActionProps, type ToasterComponent, type ToasterContainerProps, type ToasterDescriptionProps, type ToasterIconProps, type ToasterRootProps, type ToasterTitleProps, buttonize, toast, useToast };
package/dist/index.d.ts CHANGED
@@ -649,6 +649,91 @@ type ModalComponent = typeof DialogPrimitive.Root & {
649
649
  */
650
650
  declare const Modal: ModalComponent;
651
651
 
652
+ type SheetSide = 'top' | 'right' | 'bottom' | 'left';
653
+ type SheetRootProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;
654
+ type SheetTriggerProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;
655
+ type SheetPortalProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>;
656
+ type SheetOverlayProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>;
657
+ type SheetContentProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
658
+ /**
659
+ * Sheet가 열리는 방향
660
+ * @default 'right'
661
+ */
662
+ side?: SheetSide;
663
+ };
664
+ type SheetCloseProps = ButtonProps;
665
+ type SheetHeaderProps = React__default.HTMLAttributes<HTMLDivElement> & {
666
+ /**
667
+ * 하단 구분선 표시 여부
668
+ * @default true
669
+ */
670
+ line?: boolean;
671
+ /**
672
+ * 헤더 우측 영역(rightSlot).
673
+ * - 미지정(`undefined`): 기본 닫기(X) 버튼을 렌더링하며 클릭 시 Sheet를 닫는다.
674
+ * - `null` / `false`: 우측 영역을 숨긴다.
675
+ * - ReactNode: 전달한 노드를 그대로 렌더링한다. 닫기 동작이 필요하면 `Sheet.Close`로 감싼다.
676
+ */
677
+ rightSlot?: React__default.ReactNode;
678
+ };
679
+ type SheetBodyProps = React__default.HTMLAttributes<HTMLDivElement>;
680
+ type SheetFooterProps = React__default.HTMLAttributes<HTMLDivElement> & {
681
+ /**
682
+ * 상단 구분선 표시 여부
683
+ * @default true
684
+ */
685
+ line?: boolean;
686
+ };
687
+ type SheetFooterDescriptionProps = React__default.HTMLAttributes<HTMLDivElement> & {
688
+ /** 에러 상태 표시 여부 */
689
+ error?: boolean;
690
+ /** 설명 앞에 표시할 아이콘 요소 */
691
+ icon?: React__default.ReactNode;
692
+ };
693
+ type SheetActionsProps = React__default.HTMLAttributes<HTMLDivElement>;
694
+ type SheetTitleProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;
695
+ type SheetDescriptionProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;
696
+ type SheetComponent = typeof DialogPrimitive.Root & {
697
+ Trigger: typeof DialogPrimitive.Trigger;
698
+ Portal: typeof DialogPrimitive.Portal;
699
+ Close: typeof DialogPrimitive.Close;
700
+ Overlay: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetOverlayProps> & React__default.RefAttributes<React__default.ComponentRef<typeof DialogPrimitive.Overlay>>>;
701
+ Content: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetContentProps> & React__default.RefAttributes<React__default.ComponentRef<typeof DialogPrimitive.Content>>>;
702
+ Header: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetHeaderProps> & React__default.RefAttributes<HTMLDivElement>>;
703
+ Body: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetBodyProps> & React__default.RefAttributes<HTMLDivElement>>;
704
+ Footer: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetFooterProps> & React__default.RefAttributes<HTMLDivElement>>;
705
+ FooterDescription: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetFooterDescriptionProps> & React__default.RefAttributes<HTMLDivElement>>;
706
+ Actions: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetActionsProps> & React__default.RefAttributes<HTMLDivElement>>;
707
+ Title: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetTitleProps> & React__default.RefAttributes<React__default.ComponentRef<typeof DialogPrimitive.Title>>>;
708
+ Description: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetDescriptionProps> & React__default.RefAttributes<React__default.ComponentRef<typeof DialogPrimitive.Description>>>;
709
+ };
710
+ /**
711
+ * 화면 가장자리에서 슬라이드되어 열리는 패널 컴포넌트입니다.
712
+ * Radix UI Dialog 기반이며 Compound Component 패턴으로 사용합니다.
713
+ *
714
+ * @example
715
+ * ```tsx
716
+ * <Sheet>
717
+ * <Sheet.Trigger>열기</Sheet.Trigger>
718
+ * <Sheet.Content side="right">
719
+ * <Sheet.Header>
720
+ * <Sheet.Title>제목</Sheet.Title>
721
+ * </Sheet.Header>
722
+ * <Sheet.Body>내용</Sheet.Body>
723
+ * <Sheet.Footer>
724
+ * <Sheet.Actions>
725
+ * <Sheet.Close>닫기</Sheet.Close>
726
+ * <Button>확인</Button>
727
+ * </Sheet.Actions>
728
+ * </Sheet.Footer>
729
+ * </Sheet.Content>
730
+ * </Sheet>
731
+ * ```
732
+ *
733
+ * @see {@link SheetContentProps} Content props 상세
734
+ */
735
+ declare const Sheet: SheetComponent;
736
+
652
737
  type MessageBoxVariant = 'default' | 'critical';
653
738
  type MessageBoxRootProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;
654
739
  type MessageBoxTriggerProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;
@@ -931,4 +1016,4 @@ declare const buttonize: (fn: (e: React__default.MouseEvent<HTMLElement> | React
931
1016
  onKeyDown: (event: React__default.KeyboardEvent<HTMLDivElement>) => void;
932
1017
  };
933
1018
 
934
- export { Avatar, type AvatarComponent, type AvatarProps, Badge, type BadgeComponent, type BadgeProps, Breadcrumb, type BreadcrumbComponent, type BreadcrumbEllipsisProps, type BreadcrumbItemProps, type BreadcrumbLinkProps, type BreadcrumbListProps, type BreadcrumbPageProps, type BreadcrumbPathProps, type BreadcrumbRootProps, type BreadcrumbSeparatorProps, Button, type ButtonComponent, ButtonGroup, type ButtonGroupComponent, type ButtonGroupItem, type ButtonGroupProps, type ButtonProps, Checkbox, type CheckboxComponent, type CheckboxProps, DatePicker, type DatePickerProps, DoubleTag, type DoubleTagProps, Dropdown, type DropdownComponent, type DropdownContentProps, type DropdownGroupProps, type DropdownItemProps, type DropdownLabelProps, type DropdownRootProps, type DropdownSeparatorProps, type DropdownTriggerProps, type ExtendedExternalToast, IconButton, type IconButtonComponent, type IconButtonProps, Loading, type LoadingComponent, type LoadingProps, MessageBox, type MessageBoxActionProps, type MessageBoxActionsProps, type MessageBoxCancelProps, type MessageBoxComponent, type MessageBoxContentProps, type MessageBoxDescriptionProps, type MessageBoxRootProps, type MessageBoxTitleProps, type MessageBoxTriggerProps, type MessageBoxVariant, Modal, type ModalActionProps, type ModalActionsProps, type ModalBodyProps, type ModalCloseProps, type ModalComponent, type ModalContentProps, type ModalDescriptionProps, type ModalFooterDescriptionProps, type ModalFooterProps, type ModalHeaderProps, type ModalOverlayProps, type ModalPortalProps, type ModalRootProps, type ModalTitleProps, type ModalTriggerProps, Progress, type ProgressComponent, type ProgressProps, Radio, type RadioComponent, type RadioItemProps, type RadioRootProps, ScrollArea, type ScrollAreaProps, ScrollBar, type Options as SonnerToastOptions, Star, type StarComponent, type StarProps, Switch, type SwitchComponent, type SwitchProps, Tag, type TagColor, type TagComponent, type TagProps, TextArea, type TextAreaComponent, type TextAreaDescriptionProps, type TextAreaFieldProps, type TextAreaLabelProps, type TextAreaRootProps, TextField, type TextFieldComponent, type TextFieldDescriptionProps, type TextFieldInputProps, type TextFieldLabelProps, type TextFieldRootProps, type ToastAction, type ToastInput, type ToastOptions, ToastProvider, type ToastProviderProps, Toaster, type ToasterActionProps, type ToasterComponent, type ToasterContainerProps, type ToasterDescriptionProps, type ToasterIconProps, type ToasterRootProps, type ToasterTitleProps, buttonize, toast, useToast };
1019
+ export { Avatar, type AvatarComponent, type AvatarProps, Badge, type BadgeComponent, type BadgeProps, Breadcrumb, type BreadcrumbComponent, type BreadcrumbEllipsisProps, type BreadcrumbItemProps, type BreadcrumbLinkProps, type BreadcrumbListProps, type BreadcrumbPageProps, type BreadcrumbPathProps, type BreadcrumbRootProps, type BreadcrumbSeparatorProps, Button, type ButtonComponent, ButtonGroup, type ButtonGroupComponent, type ButtonGroupItem, type ButtonGroupProps, type ButtonProps, Checkbox, type CheckboxComponent, type CheckboxProps, DatePicker, type DatePickerProps, DoubleTag, type DoubleTagProps, Dropdown, type DropdownComponent, type DropdownContentProps, type DropdownGroupProps, type DropdownItemProps, type DropdownLabelProps, type DropdownRootProps, type DropdownSeparatorProps, type DropdownTriggerProps, type ExtendedExternalToast, IconButton, type IconButtonComponent, type IconButtonProps, Loading, type LoadingComponent, type LoadingProps, MessageBox, type MessageBoxActionProps, type MessageBoxActionsProps, type MessageBoxCancelProps, type MessageBoxComponent, type MessageBoxContentProps, type MessageBoxDescriptionProps, type MessageBoxRootProps, type MessageBoxTitleProps, type MessageBoxTriggerProps, type MessageBoxVariant, Modal, type ModalActionProps, type ModalActionsProps, type ModalBodyProps, type ModalCloseProps, type ModalComponent, type ModalContentProps, type ModalDescriptionProps, type ModalFooterDescriptionProps, type ModalFooterProps, type ModalHeaderProps, type ModalOverlayProps, type ModalPortalProps, type ModalRootProps, type ModalTitleProps, type ModalTriggerProps, Progress, type ProgressComponent, type ProgressProps, Radio, type RadioComponent, type RadioItemProps, type RadioRootProps, ScrollArea, type ScrollAreaProps, ScrollBar, Sheet, type SheetActionsProps, type SheetBodyProps, type SheetCloseProps, type SheetComponent, type SheetContentProps, type SheetDescriptionProps, type SheetFooterDescriptionProps, type SheetFooterProps, type SheetHeaderProps, type SheetOverlayProps, type SheetPortalProps, type SheetRootProps, type SheetSide, type SheetTitleProps, type SheetTriggerProps, type Options as SonnerToastOptions, Star, type StarComponent, type StarProps, Switch, type SwitchComponent, type SwitchProps, Tag, type TagColor, type TagComponent, type TagProps, TextArea, type TextAreaComponent, type TextAreaDescriptionProps, type TextAreaFieldProps, type TextAreaLabelProps, type TextAreaRootProps, TextField, type TextFieldComponent, type TextFieldDescriptionProps, type TextFieldInputProps, type TextFieldLabelProps, type TextFieldRootProps, type ToastAction, type ToastInput, type ToastOptions, ToastProvider, type ToastProviderProps, Toaster, type ToasterActionProps, type ToasterComponent, type ToasterContainerProps, type ToasterDescriptionProps, type ToasterIconProps, type ToasterRootProps, type ToasterTitleProps, buttonize, toast, useToast };
package/dist/index.js CHANGED
@@ -1910,6 +1910,197 @@ Modal.Actions.displayName = "Modal.Actions";
1910
1910
  Modal.Action.displayName = "Modal.Action";
1911
1911
  Modal.Title.displayName = "Modal.Title";
1912
1912
  Modal.Description.displayName = "Modal.Description";
1913
+ var SHEET_EDGE_GAP = "[--sheet-edge-gap:40px]";
1914
+ var SHEET_SIDE_CLASSES = {
1915
+ right: "inset-y-0 right-0 h-full w-[800px] max-w-[calc(100vw-var(--sheet-edge-gap))] border-l data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right",
1916
+ left: "inset-y-0 left-0 h-full w-[800px] max-w-[calc(100vw-var(--sheet-edge-gap))] border-r data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left",
1917
+ top: "inset-x-0 top-0 w-full h-auto max-h-[calc(100vh-var(--sheet-edge-gap))] border-b data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top",
1918
+ bottom: "inset-x-0 bottom-0 w-full h-auto max-h-[calc(100vh-var(--sheet-edge-gap))] border-t data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom"
1919
+ };
1920
+ var SheetContext = React.createContext({ side: "right" });
1921
+ var Sheet = DialogPrimitive__namespace.Root;
1922
+ Sheet.Trigger = DialogPrimitive__namespace.Trigger;
1923
+ Sheet.Portal = DialogPrimitive__namespace.Portal;
1924
+ Sheet.Close = DialogPrimitive__namespace.Close;
1925
+ Sheet.Overlay = React.forwardRef(
1926
+ ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
1927
+ DialogPrimitive__namespace.Overlay,
1928
+ {
1929
+ ref,
1930
+ className: utils.cn(
1931
+ "fixed inset-0 z-50 bg-component-dim data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
1932
+ className
1933
+ ),
1934
+ ...props
1935
+ }
1936
+ )
1937
+ );
1938
+ Sheet.Content = React.forwardRef(
1939
+ ({ className, children, side = "right", onInteractOutside, ...props }, ref) => {
1940
+ const shouldPreventDismissForSelect = (target) => {
1941
+ const isSelectOpen = Boolean(
1942
+ document.querySelector('[data-radix-select-content][data-state="open"]')
1943
+ );
1944
+ if (isSelectOpen) {
1945
+ return true;
1946
+ }
1947
+ if (!(target instanceof Element)) {
1948
+ return false;
1949
+ }
1950
+ return Boolean(
1951
+ target.closest("[data-radix-select-content]") || target.closest("[data-radix-select-viewport]")
1952
+ );
1953
+ };
1954
+ const handleInteractOutside = (event) => {
1955
+ if (shouldPreventDismissForSelect(event.target)) {
1956
+ event.preventDefault();
1957
+ }
1958
+ onInteractOutside?.(event);
1959
+ };
1960
+ return /* @__PURE__ */ jsxRuntime.jsx(SheetContext.Provider, { value: { side }, children: /* @__PURE__ */ jsxRuntime.jsxs(Sheet.Portal, { children: [
1961
+ /* @__PURE__ */ jsxRuntime.jsx(Sheet.Overlay, {}),
1962
+ /* @__PURE__ */ jsxRuntime.jsx(
1963
+ DialogPrimitive__namespace.Content,
1964
+ {
1965
+ ref,
1966
+ className: utils.cn(
1967
+ // 공통 스타일 (Modal Content 토큰, radius 제외)
1968
+ "fixed z-50 flex flex-col border-border-primary bg-elevation-elevation-0 shadow-strong data-[state=open]:duration-300 data-[state=closed]:duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
1969
+ // 가장자리 여백 CSS 변수 정의 (side 클래스의 max-w/max-h가 참조)
1970
+ SHEET_EDGE_GAP,
1971
+ // side별 위치/크기/슬라이드
1972
+ SHEET_SIDE_CLASSES[side],
1973
+ className
1974
+ ),
1975
+ ...props,
1976
+ onInteractOutside: handleInteractOutside,
1977
+ children
1978
+ }
1979
+ )
1980
+ ] }) });
1981
+ }
1982
+ );
1983
+ Sheet.Header = React.forwardRef(
1984
+ ({ className, line = true, rightSlot, children, ...props }, ref) => {
1985
+ const rightElement = rightSlot === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
1986
+ DialogPrimitive__namespace.Close,
1987
+ {
1988
+ className: utils.cn(
1989
+ "flex shrink-0 items-center justify-center size-8 rounded-medium text-icon-secondary transition-colors hover:bg-elevation-elevation-2 focus:outline-none disabled:pointer-events-none"
1990
+ ),
1991
+ children: /* @__PURE__ */ jsxRuntime.jsx(chunkTAZFRRWT_js.X, { type: "regular", size: 20 })
1992
+ }
1993
+ ) : rightSlot;
1994
+ return /* @__PURE__ */ jsxRuntime.jsxs(
1995
+ "div",
1996
+ {
1997
+ ref,
1998
+ className: utils.cn(
1999
+ "flex shrink-0 flex-row items-center gap-2 h-12 pl-4 pr-2",
2000
+ line && "border-b border-border-primary",
2001
+ className
2002
+ ),
2003
+ ...props,
2004
+ children: [
2005
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1 flex-row items-center gap-1", children }),
2006
+ rightElement ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 flex-row items-center", children: rightElement }) : null
2007
+ ]
2008
+ }
2009
+ );
2010
+ }
2011
+ );
2012
+ Sheet.Body = React.forwardRef(
2013
+ ({ className, children, ...props }, ref) => {
2014
+ const { side } = React.useContext(SheetContext);
2015
+ const disableHorizontalScroll = side === "left" || side === "right";
2016
+ return /* @__PURE__ */ jsxRuntime.jsx(
2017
+ "div",
2018
+ {
2019
+ ref,
2020
+ className: utils.cn(
2021
+ "flex-1 flex flex-col min-h-0 h-full",
2022
+ "[&_[data-slot=scroll-area-viewport]>div]:h-full"
2023
+ ),
2024
+ ...props,
2025
+ children: /* @__PURE__ */ jsxRuntime.jsx(
2026
+ ScrollArea,
2027
+ {
2028
+ className: "h-full flex flex-col",
2029
+ disableHorizontalScroll,
2030
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("p-4", className), children })
2031
+ }
2032
+ )
2033
+ }
2034
+ );
2035
+ }
2036
+ );
2037
+ Sheet.Footer = React.forwardRef(
2038
+ ({ className, line = true, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
2039
+ "div",
2040
+ {
2041
+ ref,
2042
+ className: utils.cn(
2043
+ "flex flex-row items-center justify-between h-14 gap-3 px-4 py-3",
2044
+ line && "border-t border-border-primary",
2045
+ className
2046
+ ),
2047
+ ...props
2048
+ }
2049
+ )
2050
+ );
2051
+ Sheet.FooterDescription = React.forwardRef(
2052
+ ({ className, error = false, icon, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
2053
+ "div",
2054
+ {
2055
+ ref,
2056
+ className: utils.cn(
2057
+ "flex flex-row items-center gap-1 text-body-3",
2058
+ error ? "text-text-critical" : "text-text-tertiary",
2059
+ className
2060
+ ),
2061
+ ...props,
2062
+ children: [
2063
+ icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 size-4 items-center justify-center [&>svg]:size-4", children: icon }),
2064
+ children
2065
+ ]
2066
+ }
2067
+ )
2068
+ );
2069
+ Sheet.Actions = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: utils.cn("ml-auto flex flex-row items-center gap-2", className), ...props }));
2070
+ Sheet.Title = React.forwardRef(
2071
+ ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
2072
+ DialogPrimitive__namespace.Title,
2073
+ {
2074
+ ref,
2075
+ className: utils.cn(
2076
+ "text-body-1 font-semibold leading-none tracking-tight text-text-primary",
2077
+ className
2078
+ ),
2079
+ ...props
2080
+ }
2081
+ )
2082
+ );
2083
+ Sheet.Description = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
2084
+ DialogPrimitive__namespace.Description,
2085
+ {
2086
+ ref,
2087
+ className: utils.cn("text-body-2 text-text-tertiary", className),
2088
+ ...props
2089
+ }
2090
+ ));
2091
+ Sheet.displayName = "Sheet";
2092
+ Sheet.Trigger.displayName = "Sheet.Trigger";
2093
+ Sheet.Portal.displayName = "Sheet.Portal";
2094
+ Sheet.Close.displayName = "Sheet.Close";
2095
+ Sheet.Overlay.displayName = "Sheet.Overlay";
2096
+ Sheet.Content.displayName = "Sheet.Content";
2097
+ Sheet.Header.displayName = "Sheet.Header";
2098
+ Sheet.Body.displayName = "Sheet.Body";
2099
+ Sheet.Footer.displayName = "Sheet.Footer";
2100
+ Sheet.FooterDescription.displayName = "Sheet.FooterDescription";
2101
+ Sheet.Actions.displayName = "Sheet.Actions";
2102
+ Sheet.Title.displayName = "Sheet.Title";
2103
+ Sheet.Description.displayName = "Sheet.Description";
1913
2104
  var MessageBoxContext = React.createContext({ variant: "default" });
1914
2105
  var MessageBoxRoot = (props) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { ...props });
1915
2106
  var MessageBox = MessageBoxRoot;
@@ -2497,6 +2688,7 @@ exports.Progress = Progress;
2497
2688
  exports.Radio = Radio;
2498
2689
  exports.ScrollArea = ScrollArea;
2499
2690
  exports.ScrollBar = ScrollBar;
2691
+ exports.Sheet = Sheet;
2500
2692
  exports.Star = Star;
2501
2693
  exports.Switch = Switch;
2502
2694
  exports.Tag = Tag;