@mindlogic-ai/logician-ui 3.0.0-alpha.6 → 3.0.0-alpha.7

package/dist/components/Modal/Modal.d.ts

@@ -1,3 +1,3 @@
 import { ModalProps } from './Modal.types';
-export declare const Modal: ({ children, open, onOpenChange, ...rest }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Modal: ({ children, open, onOpenChange, portalProps, ...rest }: ModalProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Modal.d.ts.map

package/dist/components/Modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,eAAO,MAAM,KAAK,GAAI,2CAKnB,UAAU,4CAYZ,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,eAAO,MAAM,KAAK,GAAI,wDAMnB,UAAU,4CAeZ,CAAC"}

package/dist/components/Modal/Modal.js

@@ -4,8 +4,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('@chakra-ui/react');
 
-const Modal = ({ children, open, onOpenChange, ...rest }) => {
-    return (jsxRuntime.jsx(react.Dialog.Root, { open: open, onOpenChange: onOpenChange, placement: "center", closeOnInteractOutside: true, ...rest, children: children }));
+const Modal = ({ children, open, onOpenChange, portalProps, ...rest }) => {
+    return (jsxRuntime.jsx(react.Dialog.Root, { open: open, onOpenChange: onOpenChange, placement: "center", closeOnInteractOutside: true, ...rest, children: jsxRuntime.jsxs(react.Portal, { ...portalProps, children: [jsxRuntime.jsx(react.Dialog.Backdrop, {}), children] }) }));
 };
 
 exports.Modal = Modal;

package/dist/components/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":[null],"names":["_jsx","Dialog"],"mappings":";;;;;;AAKO,MAAM,KAAK,GAAG,CAAC,EACpB,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,GAAG,IAAI,EACI,KAAI;IACf,QACEA,cAAA,CAACC,YAAM,CAAC,IAAI,IACV,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAC,QAAQ,EAClB,sBAAsB,EAAA,IAAA,EAAA,GAClB,IAAI,EAAA,QAAA,EAEP,QAAQ,EAAA,CACG;AAElB;;;;"}
+{"version":3,"file":"Modal.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":[null],"names":["_jsx","Dialog","_jsxs","Portal"],"mappings":";;;;;;AAKO,MAAM,KAAK,GAAG,CAAC,EACpB,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,GAAG,IAAI,EACI,KAAI;AACf,IAAA,QACEA,cAAA,CAACC,YAAM,CAAC,IAAI,IACV,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAC,QAAQ,EAClB,sBAAsB,EAAA,IAAA,EAAA,GAClB,IAAI,EAAA,QAAA,EAERC,eAAA,CAACC,YAAM,EAAA,EAAA,GAAK,WAAW,EAAA,QAAA,EAAA,CACrBH,cAAA,CAACC,YAAM,CAAC,QAAQ,EAAA,EAAA,CAAG,EAClB,QAAQ,CAAA,EAAA,CACF,EAAA,CACG;AAElB;;;;"}

package/dist/components/Modal/Modal.mjs

@@ -1,9 +1,9 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { Dialog } from '@chakra-ui/react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Dialog, Portal } from '@chakra-ui/react';
 
-const Modal = ({ children, open, onOpenChange, ...rest }) => {
-    return (jsx(Dialog.Root, { open: open, onOpenChange: onOpenChange, placement: "center", closeOnInteractOutside: true, ...rest, children: children }));
+const Modal = ({ children, open, onOpenChange, portalProps, ...rest }) => {
+    return (jsx(Dialog.Root, { open: open, onOpenChange: onOpenChange, placement: "center", closeOnInteractOutside: true, ...rest, children: jsxs(Portal, { ...portalProps, children: [jsx(Dialog.Backdrop, {}), children] }) }));
 };
 
 export { Modal };

package/dist/components/Modal/Modal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.mjs","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAKO,MAAM,KAAK,GAAG,CAAC,EACpB,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,GAAG,IAAI,EACI,KAAI;IACf,QACEA,GAAA,CAAC,MAAM,CAAC,IAAI,IACV,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAC,QAAQ,EAClB,sBAAsB,EAAA,IAAA,EAAA,GAClB,IAAI,EAAA,QAAA,EAEP,QAAQ,EAAA,CACG;AAElB;;;;"}
+{"version":3,"file":"Modal.mjs","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":";;;;AAKO,MAAM,KAAK,GAAG,CAAC,EACpB,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,GAAG,IAAI,EACI,KAAI;AACf,IAAA,QACEA,GAAA,CAAC,MAAM,CAAC,IAAI,IACV,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAC,QAAQ,EAClB,sBAAsB,EAAA,IAAA,EAAA,GAClB,IAAI,EAAA,QAAA,EAERC,IAAA,CAAC,MAAM,EAAA,EAAA,GAAK,WAAW,EAAA,QAAA,EAAA,CACrBD,GAAA,CAAC,MAAM,CAAC,QAAQ,EAAA,EAAA,CAAG,EAClB,QAAQ,CAAA,EAAA,CACF,EAAA,CACG;AAElB;;;;"}

package/dist/components/Modal/Modal.types.d.ts

@@ -1,3 +1,5 @@
-import { Dialog } from '@chakra-ui/react';
-export type ModalProps = Dialog.RootProps;
+import { Dialog, PortalProps } from '@chakra-ui/react';
+export type ModalProps = Dialog.RootProps & {
+    portalProps?: PortalProps;
+};
 //# sourceMappingURL=Modal.types.d.ts.map

package/dist/components/Modal/Modal.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.types.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,SAAS,CAAC"}
+{"version":3,"file":"Modal.types.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEvD,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,SAAS,GAAG;IAG1C,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mindlogic-ai/logician-ui",
-  "version": "3.0.0-alpha.6",
+  "version": "3.0.0-alpha.7",
   "description": "A comprehensive React design system built on Chakra UI",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/components/Modal/Modal.stories.tsx

@@ -5,7 +5,6 @@
  *
  * ## 주요 구성 요소
  * - Modal (Dialog.Root): 모달의 루트 컨테이너
- * - ModalOverlay (Dialog.Backdrop): 모달 뒤의 어두운 배경
  * - ModalContent (Dialog.Content): 모달의 실제 콘텐츠 영역
  * - ModalHeader (Dialog.Header): 모달 헤더
  * - ModalCloseButton (Dialog.CloseTrigger + CloseButton): 닫기 버튼
@@ -28,7 +27,6 @@ import {
   ModalContent,
   ModalFooter,
   ModalHeader,
-  ModalOverlay,
 } from '.';
 import { Button } from '../Button';
 import { ButtonVariant } from '../Button/Button.types';
@@ -69,7 +67,6 @@ export const Default: Story = {
       <>
         <Button onClick={() => setIsOpen(true)}>Open Confirm Modal</Button>
         <Modal {...args} open={isOpen} onOpenChange={(e) => setIsOpen(e.open)}>
-          <ModalOverlay />
           <ModalContent>
             {args.headerTitle && <ModalHeader>{args.headerTitle}</ModalHeader>}
             {args.hasCloseButton && <ModalCloseButton />}
@@ -101,7 +98,6 @@ export const WithHeader: Story = {
       <>
         <Button onClick={() => setIsOpen(true)}>Open Confirm Modal</Button>
         <Modal {...args} open={isOpen} onOpenChange={(e) => setIsOpen(e.open)}>
-          <ModalOverlay />
           <ModalContent>
             {args.headerTitle && <ModalHeader>{args.headerTitle}</ModalHeader>}
             {args.hasCloseButton && <ModalCloseButton />}
@@ -134,7 +130,6 @@ export const WithFooterButton: Story = {
       <>
         <Button onClick={() => setIsOpen(true)}>Open Confirm Modal</Button>
         <Modal {...args} open={isOpen} onOpenChange={(e) => setIsOpen(e.open)}>
-          <ModalOverlay />
           <ModalContent>
             {args.headerTitle && <ModalHeader>{args.headerTitle}</ModalHeader>}
             {args.hasCloseButton && <ModalCloseButton />}
@@ -169,7 +164,6 @@ export const TwoButtons: Story = {
       <>
         <Button onClick={() => setIsOpen(true)}>Open Confirm Modal</Button>
         <Modal {...args} open={isOpen} onOpenChange={(e) => setIsOpen(e.open)}>
-          <ModalOverlay />
           <ModalContent>
             {args.headerTitle && <ModalHeader>{args.headerTitle}</ModalHeader>}
             {args.hasCloseButton && <ModalCloseButton />}
@@ -208,7 +202,6 @@ export const WithCloseButton: Story = {
       <>
         <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
         <Modal {...args} open={isOpen} onOpenChange={(e) => setIsOpen(e.open)}>
-          <ModalOverlay />
           <ModalContent>
             <ModalHeader>{args.headerTitle}</ModalHeader>
             {/* ModalCloseButton: Dialog.CloseTrigger + CloseButton 조합 */}
@@ -241,7 +234,6 @@ export const WithoutCloseButton: Story = {
       <>
         <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
         <Modal {...args} open={isOpen} onOpenChange={(e) => setIsOpen(e.open)}>
-          <ModalOverlay />
           <ModalContent>
             <ModalHeader>{args.headerTitle}</ModalHeader>
             {/* ModalCloseButton이 없음 - 닫기 버튼 X 아이콘이 표시되지 않음 */}
@@ -265,7 +257,6 @@ export const WithoutHeader: Story = {
       <>
         <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
         <Modal {...args} open={isOpen} onOpenChange={(e) => setIsOpen(e.open)}>
-          <ModalOverlay />
           <ModalContent>
             <ModalCloseButton />
             <ModalBody>
@@ -297,7 +288,6 @@ export const WithoutFooter: Story = {
       <>
         <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
         <Modal {...args} open={isOpen} onOpenChange={(e) => setIsOpen(e.open)}>
-          <ModalOverlay />
           <ModalContent>
             <ModalHeader>{args.headerTitle}</ModalHeader>
             <ModalCloseButton />
@@ -328,7 +318,6 @@ export const FullFeatured: Story = {
       <>
         <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
         <Modal {...args} open={isOpen} onOpenChange={(e) => setIsOpen(e.open)}>
-          <ModalOverlay />
           <ModalContent>
             <ModalHeader>{args.headerTitle}</ModalHeader>
             <ModalCloseButton />
@@ -363,7 +352,6 @@ export const MinimalModal: Story = {
       <>
         <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
         <Modal {...args} open={isOpen} onOpenChange={(e) => setIsOpen(e.open)}>
-          <ModalOverlay />
           <ModalContent>
             <ModalBody>
               헤더, 푸터, 닫기 버튼이 모두 없는 가장 단순한 형태의 모달입니다.
@@ -401,7 +389,6 @@ export const DifferentSizes: Story = {
           onOpenChange={(e) => !e.open && setOpenSize(null)}
           size={openSize as any}
         >
-          <ModalOverlay />
           <ModalContent>
             <ModalHeader>Modal Size: {openSize?.toUpperCase()}</ModalHeader>
             <ModalCloseButton />
@@ -439,7 +426,6 @@ export const DifferentPlacements: Story = {
           onOpenChange={(e) => !e.open && setOpenPlacement(null)}
           placement={openPlacement as any}
         >
-          <ModalOverlay />
           <ModalContent>
             <ModalHeader>
               Placement: {openPlacement?.charAt(0).toUpperCase()}
@@ -460,34 +446,6 @@ export const DifferentPlacements: Story = {
   },
 };
 
-export const WithoutOverlay: Story = {
-  args: {
-    headerTitle: 'Modal without Overlay',
-  },
-  render: (args) => {
-    const [isOpen, setIsOpen] = useState(false);
-
-    return (
-      <>
-        <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
-        <Modal {...args} open={isOpen} onOpenChange={(e) => setIsOpen(e.open)}>
-          <ModalContent>
-            <ModalHeader>{args.headerTitle}</ModalHeader>
-            <ModalCloseButton />
-            <ModalBody>
-              이 모달은 Overlay(배경 어둡게 처리)가 없습니다. 뒤의 콘텐츠를 볼 수
-              있습니다.
-            </ModalBody>
-            <ModalFooter>
-              <Button onClick={() => setIsOpen(false)}>Close</Button>
-            </ModalFooter>
-          </ModalContent>
-        </Modal>
-      </>
-    );
-  },
-};
-
 export const PreventOutsideClick: Story = {
   args: {
     headerTitle: 'Cannot Close by Outside Click',
@@ -504,7 +462,6 @@ export const PreventOutsideClick: Story = {
           onOpenChange={(e) => setIsOpen(e.open)}
           closeOnInteractOutside={false}
         >
-          <ModalOverlay />
           <ModalContent>
             <ModalHeader>{args.headerTitle}</ModalHeader>
             <ModalCloseButton />

package/src/components/Modal/Modal.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Dialog } from '@chakra-ui/react';
+import { Dialog, Portal } from '@chakra-ui/react';
 
 import { ModalProps } from './Modal.types';
 
@@ -7,6 +7,7 @@ export const Modal = ({
   children,
   open,
   onOpenChange,
+  portalProps,
   ...rest
 }: ModalProps) => {
   return (
@@ -17,7 +18,10 @@ export const Modal = ({
       closeOnInteractOutside
       {...rest}
     >
-      {children}
+      <Portal {...portalProps}>
+        <Dialog.Backdrop />
+        {children}
+      </Portal>
     </Dialog.Root>
   );
 };

package/src/components/Modal/Modal.types.ts

@@ -1,3 +1,7 @@
-import { Dialog } from '@chakra-ui/react';
+import { Dialog, PortalProps } from '@chakra-ui/react';
 
-export type ModalProps = Dialog.RootProps;
+export type ModalProps = Dialog.RootProps & {
+  // Allows passing props to the Portal component for more control over where the modal is rendered
+  // Added for backwards compatibility.
+  portalProps?: PortalProps;
+};