@exem-ui/react 0.3.4-next.20260612055041 → 0.3.4-next.20260615013551

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 +7 -56
  2. package/dist/index.d.ts +7 -56
  3. package/dist/index.js +28 -12
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +28 -12
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +3 -3
package/dist/index.d.mts CHANGED
@@ -617,8 +617,8 @@ type ModalActionProps = Omit<ButtonProps, 'color' | 'variant'> & {
617
617
  type ModalTitleProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;
618
618
  type ModalDescriptionProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;
619
619
  type ModalComponent = typeof DialogPrimitive.Root & {
620
- Trigger: typeof DialogPrimitive.Trigger;
621
- Portal: typeof DialogPrimitive.Portal;
620
+ Trigger: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<ModalTriggerProps> & React__default.RefAttributes<React__default.ElementRef<typeof DialogPrimitive.Trigger>>>;
621
+ Portal: React__default.FC<ModalPortalProps>;
622
622
  Close: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<ModalCloseProps> & React__default.RefAttributes<HTMLButtonElement>>;
623
623
  Overlay: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<ModalOverlayProps> & React__default.RefAttributes<React__default.ElementRef<typeof DialogPrimitive.Overlay>>>;
624
624
  Content: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<ModalContentProps> & React__default.RefAttributes<React__default.ElementRef<typeof DialogPrimitive.Content>>>;
@@ -631,30 +631,6 @@ type ModalComponent = typeof DialogPrimitive.Root & {
631
631
  Title: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<ModalTitleProps> & React__default.RefAttributes<React__default.ElementRef<typeof DialogPrimitive.Title>>>;
632
632
  Description: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<ModalDescriptionProps> & React__default.RefAttributes<React__default.ElementRef<typeof DialogPrimitive.Description>>>;
633
633
  };
634
- /**
635
- * 사용자 인터랙션이 필요한 오버레이 다이얼로그 컴포넌트입니다.
636
- * Compound Component 패턴으로 하위 컴포넌트와 함께 사용합니다.
637
- *
638
- * @example
639
- * ```tsx
640
- * <Modal>
641
- * <Modal.Trigger>열기</Modal.Trigger>
642
- * <Modal.Content size="medium">
643
- * <Modal.Header>
644
- * <Modal.Title>제목</Modal.Title>
645
- * </Modal.Header>
646
- * <Modal.Body>내용</Modal.Body>
647
- * <Modal.Footer>
648
- * <Modal.Actions>
649
- * <Modal.Close>닫기</Modal.Close>
650
- * </Modal.Actions>
651
- * </Modal.Footer>
652
- * </Modal.Content>
653
- * </Modal>
654
- * ```
655
- *
656
- * @see {@link ModalContentProps} Content props 상세
657
- */
658
634
  declare const Modal: ModalComponent;
659
635
 
660
636
  type SheetSide = 'top' | 'right' | 'bottom' | 'left';
@@ -669,7 +645,7 @@ type SheetContentProps = React__default.ComponentPropsWithoutRef<typeof DialogPr
669
645
  */
670
646
  side?: SheetSide;
671
647
  };
672
- type SheetCloseProps = ButtonProps;
648
+ type SheetCloseProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;
673
649
  type SheetHeaderProps = React__default.HTMLAttributes<HTMLDivElement> & {
674
650
  /**
675
651
  * 하단 구분선 표시 여부
@@ -702,9 +678,9 @@ type SheetActionsProps = React__default.HTMLAttributes<HTMLDivElement>;
702
678
  type SheetTitleProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;
703
679
  type SheetDescriptionProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;
704
680
  type SheetComponent = typeof DialogPrimitive.Root & {
705
- Trigger: typeof DialogPrimitive.Trigger;
706
- Portal: typeof DialogPrimitive.Portal;
707
- Close: typeof DialogPrimitive.Close;
681
+ Trigger: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetTriggerProps> & React__default.RefAttributes<React__default.ComponentRef<typeof DialogPrimitive.Trigger>>>;
682
+ Portal: React__default.FC<SheetPortalProps>;
683
+ Close: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetCloseProps> & React__default.RefAttributes<React__default.ComponentRef<typeof DialogPrimitive.Close>>>;
708
684
  Overlay: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetOverlayProps> & React__default.RefAttributes<React__default.ComponentRef<typeof DialogPrimitive.Overlay>>>;
709
685
  Content: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetContentProps> & React__default.RefAttributes<React__default.ComponentRef<typeof DialogPrimitive.Content>>>;
710
686
  Header: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetHeaderProps> & React__default.RefAttributes<HTMLDivElement>>;
@@ -715,31 +691,6 @@ type SheetComponent = typeof DialogPrimitive.Root & {
715
691
  Title: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetTitleProps> & React__default.RefAttributes<React__default.ComponentRef<typeof DialogPrimitive.Title>>>;
716
692
  Description: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetDescriptionProps> & React__default.RefAttributes<React__default.ComponentRef<typeof DialogPrimitive.Description>>>;
717
693
  };
718
- /**
719
- * 화면 가장자리에서 슬라이드되어 열리는 패널 컴포넌트입니다.
720
- * Radix UI Dialog 기반이며 Compound Component 패턴으로 사용합니다.
721
- *
722
- * @example
723
- * ```tsx
724
- * <Sheet>
725
- * <Sheet.Trigger>열기</Sheet.Trigger>
726
- * <Sheet.Content side="right">
727
- * <Sheet.Header>
728
- * <Sheet.Title>제목</Sheet.Title>
729
- * </Sheet.Header>
730
- * <Sheet.Body>내용</Sheet.Body>
731
- * <Sheet.Footer>
732
- * <Sheet.Actions>
733
- * <Sheet.Close>닫기</Sheet.Close>
734
- * <Button>확인</Button>
735
- * </Sheet.Actions>
736
- * </Sheet.Footer>
737
- * </Sheet.Content>
738
- * </Sheet>
739
- * ```
740
- *
741
- * @see {@link SheetContentProps} Content props 상세
742
- */
743
694
  declare const Sheet: SheetComponent;
744
695
 
745
696
  type MessageBoxVariant = 'default' | 'critical';
@@ -758,7 +709,7 @@ type MessageBoxActionsProps = React__default.HTMLAttributes<HTMLDivElement>;
758
709
  type MessageBoxCancelProps = Omit<ButtonProps, 'color' | 'variant'>;
759
710
  type MessageBoxActionProps = Omit<ButtonProps, 'color' | 'variant'>;
760
711
  type MessageBoxComponent = React__default.FC<MessageBoxRootProps> & {
761
- Trigger: typeof DialogPrimitive.Trigger;
712
+ Trigger: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<MessageBoxTriggerProps> & React__default.RefAttributes<React__default.ElementRef<typeof DialogPrimitive.Trigger>>>;
762
713
  Content: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<MessageBoxContentProps> & React__default.RefAttributes<React__default.ElementRef<typeof DialogPrimitive.Content>>>;
763
714
  Title: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<MessageBoxTitleProps> & React__default.RefAttributes<React__default.ElementRef<typeof DialogPrimitive.Title>>>;
764
715
  Description: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<MessageBoxDescriptionProps> & React__default.RefAttributes<React__default.ElementRef<typeof DialogPrimitive.Description>>>;
package/dist/index.d.ts CHANGED
@@ -617,8 +617,8 @@ type ModalActionProps = Omit<ButtonProps, 'color' | 'variant'> & {
617
617
  type ModalTitleProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;
618
618
  type ModalDescriptionProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;
619
619
  type ModalComponent = typeof DialogPrimitive.Root & {
620
- Trigger: typeof DialogPrimitive.Trigger;
621
- Portal: typeof DialogPrimitive.Portal;
620
+ Trigger: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<ModalTriggerProps> & React__default.RefAttributes<React__default.ElementRef<typeof DialogPrimitive.Trigger>>>;
621
+ Portal: React__default.FC<ModalPortalProps>;
622
622
  Close: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<ModalCloseProps> & React__default.RefAttributes<HTMLButtonElement>>;
623
623
  Overlay: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<ModalOverlayProps> & React__default.RefAttributes<React__default.ElementRef<typeof DialogPrimitive.Overlay>>>;
624
624
  Content: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<ModalContentProps> & React__default.RefAttributes<React__default.ElementRef<typeof DialogPrimitive.Content>>>;
@@ -631,30 +631,6 @@ type ModalComponent = typeof DialogPrimitive.Root & {
631
631
  Title: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<ModalTitleProps> & React__default.RefAttributes<React__default.ElementRef<typeof DialogPrimitive.Title>>>;
632
632
  Description: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<ModalDescriptionProps> & React__default.RefAttributes<React__default.ElementRef<typeof DialogPrimitive.Description>>>;
633
633
  };
634
- /**
635
- * 사용자 인터랙션이 필요한 오버레이 다이얼로그 컴포넌트입니다.
636
- * Compound Component 패턴으로 하위 컴포넌트와 함께 사용합니다.
637
- *
638
- * @example
639
- * ```tsx
640
- * <Modal>
641
- * <Modal.Trigger>열기</Modal.Trigger>
642
- * <Modal.Content size="medium">
643
- * <Modal.Header>
644
- * <Modal.Title>제목</Modal.Title>
645
- * </Modal.Header>
646
- * <Modal.Body>내용</Modal.Body>
647
- * <Modal.Footer>
648
- * <Modal.Actions>
649
- * <Modal.Close>닫기</Modal.Close>
650
- * </Modal.Actions>
651
- * </Modal.Footer>
652
- * </Modal.Content>
653
- * </Modal>
654
- * ```
655
- *
656
- * @see {@link ModalContentProps} Content props 상세
657
- */
658
634
  declare const Modal: ModalComponent;
659
635
 
660
636
  type SheetSide = 'top' | 'right' | 'bottom' | 'left';
@@ -669,7 +645,7 @@ type SheetContentProps = React__default.ComponentPropsWithoutRef<typeof DialogPr
669
645
  */
670
646
  side?: SheetSide;
671
647
  };
672
- type SheetCloseProps = ButtonProps;
648
+ type SheetCloseProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;
673
649
  type SheetHeaderProps = React__default.HTMLAttributes<HTMLDivElement> & {
674
650
  /**
675
651
  * 하단 구분선 표시 여부
@@ -702,9 +678,9 @@ type SheetActionsProps = React__default.HTMLAttributes<HTMLDivElement>;
702
678
  type SheetTitleProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;
703
679
  type SheetDescriptionProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;
704
680
  type SheetComponent = typeof DialogPrimitive.Root & {
705
- Trigger: typeof DialogPrimitive.Trigger;
706
- Portal: typeof DialogPrimitive.Portal;
707
- Close: typeof DialogPrimitive.Close;
681
+ Trigger: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetTriggerProps> & React__default.RefAttributes<React__default.ComponentRef<typeof DialogPrimitive.Trigger>>>;
682
+ Portal: React__default.FC<SheetPortalProps>;
683
+ Close: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetCloseProps> & React__default.RefAttributes<React__default.ComponentRef<typeof DialogPrimitive.Close>>>;
708
684
  Overlay: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetOverlayProps> & React__default.RefAttributes<React__default.ComponentRef<typeof DialogPrimitive.Overlay>>>;
709
685
  Content: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetContentProps> & React__default.RefAttributes<React__default.ComponentRef<typeof DialogPrimitive.Content>>>;
710
686
  Header: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetHeaderProps> & React__default.RefAttributes<HTMLDivElement>>;
@@ -715,31 +691,6 @@ type SheetComponent = typeof DialogPrimitive.Root & {
715
691
  Title: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetTitleProps> & React__default.RefAttributes<React__default.ComponentRef<typeof DialogPrimitive.Title>>>;
716
692
  Description: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetDescriptionProps> & React__default.RefAttributes<React__default.ComponentRef<typeof DialogPrimitive.Description>>>;
717
693
  };
718
- /**
719
- * 화면 가장자리에서 슬라이드되어 열리는 패널 컴포넌트입니다.
720
- * Radix UI Dialog 기반이며 Compound Component 패턴으로 사용합니다.
721
- *
722
- * @example
723
- * ```tsx
724
- * <Sheet>
725
- * <Sheet.Trigger>열기</Sheet.Trigger>
726
- * <Sheet.Content side="right">
727
- * <Sheet.Header>
728
- * <Sheet.Title>제목</Sheet.Title>
729
- * </Sheet.Header>
730
- * <Sheet.Body>내용</Sheet.Body>
731
- * <Sheet.Footer>
732
- * <Sheet.Actions>
733
- * <Sheet.Close>닫기</Sheet.Close>
734
- * <Button>확인</Button>
735
- * </Sheet.Actions>
736
- * </Sheet.Footer>
737
- * </Sheet.Content>
738
- * </Sheet>
739
- * ```
740
- *
741
- * @see {@link SheetContentProps} Content props 상세
742
- */
743
694
  declare const Sheet: SheetComponent;
744
695
 
745
696
  type MessageBoxVariant = 'default' | 'critical';
@@ -758,7 +709,7 @@ type MessageBoxActionsProps = React__default.HTMLAttributes<HTMLDivElement>;
758
709
  type MessageBoxCancelProps = Omit<ButtonProps, 'color' | 'variant'>;
759
710
  type MessageBoxActionProps = Omit<ButtonProps, 'color' | 'variant'>;
760
711
  type MessageBoxComponent = React__default.FC<MessageBoxRootProps> & {
761
- Trigger: typeof DialogPrimitive.Trigger;
712
+ Trigger: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<MessageBoxTriggerProps> & React__default.RefAttributes<React__default.ElementRef<typeof DialogPrimitive.Trigger>>>;
762
713
  Content: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<MessageBoxContentProps> & React__default.RefAttributes<React__default.ElementRef<typeof DialogPrimitive.Content>>>;
763
714
  Title: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<MessageBoxTitleProps> & React__default.RefAttributes<React__default.ElementRef<typeof DialogPrimitive.Title>>>;
764
715
  Description: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<MessageBoxDescriptionProps> & React__default.RefAttributes<React__default.ElementRef<typeof DialogPrimitive.Description>>>;
package/dist/index.js CHANGED
@@ -1682,10 +1682,19 @@ var MODAL_PADDING = {
1682
1682
  body: "px-4 pb-4",
1683
1683
  footer: "px-4 py-3"
1684
1684
  };
1685
+ var MODAL_EDGE_GAP = {
1686
+ small: "[--modal-edge-gap:16px]",
1687
+ medium: "[--modal-edge-gap:16px]",
1688
+ large: "[--modal-edge-gap:40px]",
1689
+ xlarge: "[--modal-edge-gap:40px]"
1690
+ };
1685
1691
  var ModalContext = React.createContext({ size: "medium" });
1686
- var Modal = DialogPrimitive__namespace.Root;
1687
- Modal.Trigger = DialogPrimitive__namespace.Trigger;
1688
- Modal.Portal = DialogPrimitive__namespace.Portal;
1692
+ var ModalRoot = (props) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { ...props });
1693
+ var Modal = ModalRoot;
1694
+ Modal.Trigger = React.forwardRef(
1695
+ (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Trigger, { ref, ...props })
1696
+ );
1697
+ Modal.Portal = (props) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Portal, { ...props });
1689
1698
  Modal.Close = React.forwardRef(({ size, ...props }, ref) => {
1690
1699
  const { size: modalSize } = React.useContext(ModalContext);
1691
1700
  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1716,10 +1725,10 @@ Modal.Content = React.forwardRef(
1716
1725
  ({ className, children, size = "medium", onInteractOutside, onFocusOutside, ...props }, ref) => {
1717
1726
  const isFullSize = size === "fullsize";
1718
1727
  const sizeWidthMap = {
1719
- small: "max-w-[640px]",
1720
- medium: "max-w-[800px]",
1721
- large: "max-w-[960px]",
1722
- xlarge: "max-w-[1120px]"
1728
+ small: "max-w-[min(640px,calc(100vw-var(--modal-edge-gap)))]",
1729
+ medium: "max-w-[min(800px,calc(100vw-var(--modal-edge-gap)))]",
1730
+ large: "max-w-[min(960px,calc(100vw-var(--modal-edge-gap)))]",
1731
+ xlarge: "max-w-[min(1120px,calc(100vw-var(--modal-edge-gap)))]"
1723
1732
  };
1724
1733
  const shouldPreventDismissForSelect = (target) => {
1725
1734
  const isSelectOpen = Boolean(
@@ -1755,6 +1764,8 @@ Modal.Content = React.forwardRef(
1755
1764
  // 일반 모달일 때
1756
1765
  utils.cn(
1757
1766
  "left-[50%] top-[50%] w-full max-h-[90vh] translate-x-[-50%] translate-y-[-50%] shadow-strong data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
1767
+ // max-width 계산에서 참조하는 --modal-edge-gap 변수를 같은 요소에 정의
1768
+ MODAL_EDGE_GAP[size],
1758
1769
  sizeWidthMap[size]
1759
1770
  )
1760
1771
  ),
@@ -1927,10 +1938,15 @@ var SHEET_SIDE_CLASSES = {
1927
1938
  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"
1928
1939
  };
1929
1940
  var SheetContext = React.createContext({ side: "right" });
1930
- var Sheet = DialogPrimitive__namespace.Root;
1931
- Sheet.Trigger = DialogPrimitive__namespace.Trigger;
1932
- Sheet.Portal = DialogPrimitive__namespace.Portal;
1933
- Sheet.Close = DialogPrimitive__namespace.Close;
1941
+ var SheetRoot = (props) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { ...props });
1942
+ var Sheet = SheetRoot;
1943
+ Sheet.Trigger = React.forwardRef(
1944
+ (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Trigger, { ref, ...props })
1945
+ );
1946
+ Sheet.Portal = (props) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Portal, { ...props });
1947
+ Sheet.Close = React.forwardRef(
1948
+ (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { ref, ...props })
1949
+ );
1934
1950
  Sheet.Overlay = React.forwardRef(
1935
1951
  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
1936
1952
  DialogPrimitive__namespace.Overlay,
@@ -2113,7 +2129,7 @@ Sheet.Description.displayName = "Sheet.Description";
2113
2129
  var MessageBoxContext = React.createContext({ variant: "default" });
2114
2130
  var MessageBoxRoot = (props) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { ...props });
2115
2131
  var MessageBox = MessageBoxRoot;
2116
- MessageBox.Trigger = DialogPrimitive__namespace.Trigger;
2132
+ MessageBox.Trigger = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Trigger, { ref, ...props }));
2117
2133
  MessageBox.Content = React.forwardRef(({ className, children, variant = "default", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(MessageBoxContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Portal, { children: [
2118
2134
  /* @__PURE__ */ jsxRuntime.jsx(
2119
2135
  DialogPrimitive__namespace.Overlay,