@negative-space/modal 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Matheus Bastani
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,15 @@
+# @negative-space/modal
+
+A lightweight Modal component from Negative Space, enabling fully custom interactive UI experiences.
+
+## Installation
+
+    # Using Yarn
+    yarn add @negative-space/modal
+
+    # Using npm
+    npm install @negative-space/modal
+
+## Contributing
+
+Feel free to fork, tweak, and send a pull request!

package/dist/index.d.mts

@@ -0,0 +1,35 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { IconButtonProps } from '@negative-space/button/src/IconButton';
+import { PopoverHandle, FixedPosition, PopoverProps } from '@negative-space/popover';
+import React from 'react';
+
+interface UseModalOptions {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    dismissOnClickOutside?: boolean;
+    dismissOnEscape?: boolean;
+    trapFocus?: boolean;
+    usePortal?: boolean;
+    zIndex?: number;
+    position?: FixedPosition;
+}
+type ModalHandle = PopoverHandle;
+declare function useModal(options?: UseModalOptions): ModalHandle;
+
+interface ModalProps extends Omit<PopoverProps, 'popover' | 'classNames' | 'styles'> {
+    classNames?: Omit<NonNullable<PopoverProps['classNames']>, 'arrow'> & {
+        closeButton?: string;
+        closeIcon?: string;
+    };
+    styles?: Omit<NonNullable<PopoverProps['styles']>, 'arrow'> & {
+        closeButton?: React.CSSProperties;
+        closeIcon?: React.CSSProperties;
+    };
+    hideCloseButton?: boolean;
+    buttonProps?: Omit<IconButtonProps, 'onClick' | 'aria-label' | 'className' | 'style'>;
+    modal: ModalHandle;
+}
+declare const Modal: ({ modal, hideCloseButton, classNames, styles, children, ...popoverProps }: ModalProps) => react_jsx_runtime.JSX.Element;
+
+export { Modal, type ModalHandle, type ModalProps, type UseModalOptions, useModal };

package/dist/index.d.ts

@@ -0,0 +1,35 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { IconButtonProps } from '@negative-space/button/src/IconButton';
+import { PopoverHandle, FixedPosition, PopoverProps } from '@negative-space/popover';
+import React from 'react';
+
+interface UseModalOptions {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    dismissOnClickOutside?: boolean;
+    dismissOnEscape?: boolean;
+    trapFocus?: boolean;
+    usePortal?: boolean;
+    zIndex?: number;
+    position?: FixedPosition;
+}
+type ModalHandle = PopoverHandle;
+declare function useModal(options?: UseModalOptions): ModalHandle;
+
+interface ModalProps extends Omit<PopoverProps, 'popover' | 'classNames' | 'styles'> {
+    classNames?: Omit<NonNullable<PopoverProps['classNames']>, 'arrow'> & {
+        closeButton?: string;
+        closeIcon?: string;
+    };
+    styles?: Omit<NonNullable<PopoverProps['styles']>, 'arrow'> & {
+        closeButton?: React.CSSProperties;
+        closeIcon?: React.CSSProperties;
+    };
+    hideCloseButton?: boolean;
+    buttonProps?: Omit<IconButtonProps, 'onClick' | 'aria-label' | 'className' | 'style'>;
+    modal: ModalHandle;
+}
+declare const Modal: ({ modal, hideCloseButton, classNames, styles, children, ...popoverProps }: ModalProps) => react_jsx_runtime.JSX.Element;
+
+export { Modal, type ModalHandle, type ModalProps, type UseModalOptions, useModal };

package/dist/index.js

@@ -0,0 +1,74 @@
+'use strict';
+
+var IconButton = require('@negative-space/button/src/IconButton');
+var popover = require('@negative-space/popover');
+var system = require('@negative-space/system');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/Modal.tsx
+var Modal = ({
+  modal,
+  hideCloseButton,
+  classNames,
+  styles,
+  children,
+  ...popoverProps
+}) => {
+  const { global } = system.useNSUI();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    popover.Popover,
+    {
+      ...popoverProps,
+      popover: modal,
+      role: "dialog",
+      classNames: {
+        root: system.cn(`${global.prefixCls}-modal`, classNames?.root),
+        content: system.cn(`${global.prefixCls}-modal-content`, classNames?.content),
+        overlay: system.cn(`${global.prefixCls}-modal-overlay`, classNames?.overlay)
+      },
+      styles: {
+        root: { ...styles?.root },
+        content: { ...styles?.content },
+        overlay: { ...styles?.overlay }
+      },
+      children: [
+        !hideCloseButton && /* @__PURE__ */ jsxRuntime.jsx(
+          IconButton.IconButton,
+          {
+            ...modal.triggerProps,
+            "aria-label": "close",
+            onClick: modal.close,
+            className: system.cn(`${global.prefixCls}-modal-close-button`, classNames?.closeButton),
+            style: styles?.closeButton,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              system.X,
+              {
+                className: system.cn(`${global.prefixCls}-modal-close`, classNames?.closeIcon),
+                style: { position: "absolute", right: "0.5rem", top: "0.5rem", ...styles?.closeIcon }
+              }
+            )
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+function useModal(options = {}) {
+  const { position = "center", ...rest } = options;
+  return popover.usePopover({
+    ...rest,
+    overlay: true,
+    showArrow: false,
+    trigger: "click",
+    trapFocus: true,
+    usePortal: true,
+    zIndex: 9999,
+    fixedPosition: position
+  });
+}
+
+exports.Modal = Modal;
+exports.useModal = useModal;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Modal.tsx","../src/useModal.ts"],"names":["useNSUI","jsxs","Popover","cn","jsx","IconButton","X","usePopover"],"mappings":";;;;;;;;AAqBO,IAAM,QAAQ,CAAC;AAAA,EACpB,KAAA;AAAA,EACA,eAAA;AAAA,EACA,UAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAkB;AAChB,EAAA,MAAM,EAAE,MAAA,EAAO,GAAIA,cAAA,EAAQ;AAE3B,EAAA,uBACEC,eAAA;AAAA,IAACC,eAAA;AAAA,IAAA;AAAA,MACE,GAAG,YAAA;AAAA,MACJ,OAAA,EAAS,KAAA;AAAA,MACT,IAAA,EAAK,QAAA;AAAA,MACL,UAAA,EAAY;AAAA,QACV,MAAMC,SAAA,CAAG,CAAA,EAAG,OAAO,SAAS,CAAA,MAAA,CAAA,EAAU,YAAY,IAAI,CAAA;AAAA,QACtD,SAASA,SAAA,CAAG,CAAA,EAAG,OAAO,SAAS,CAAA,cAAA,CAAA,EAAkB,YAAY,OAAO,CAAA;AAAA,QACpE,SAASA,SAAA,CAAG,CAAA,EAAG,OAAO,SAAS,CAAA,cAAA,CAAA,EAAkB,YAAY,OAAO;AAAA,OACtE;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,IAAA,EAAM,EAAE,GAAG,MAAA,EAAQ,IAAA,EAAK;AAAA,QACxB,OAAA,EAAS,EAAE,GAAG,MAAA,EAAQ,OAAA,EAAQ;AAAA,QAC9B,OAAA,EAAS,EAAE,GAAG,MAAA,EAAQ,OAAA;AAAQ,OAChC;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,CAAC,eAAA,oBACAC,cAAA;AAAA,UAACC,qBAAA;AAAA,UAAA;AAAA,YACE,GAAG,KAAA,CAAM,YAAA;AAAA,YACV,YAAA,EAAW,OAAA;AAAA,YACX,SAAS,KAAA,CAAM,KAAA;AAAA,YACf,WAAWF,SAAA,CAAG,CAAA,EAAG,OAAO,SAAS,CAAA,mBAAA,CAAA,EAAuB,YAAY,WAAW,CAAA;AAAA,YAC/E,OAAO,MAAA,EAAQ,WAAA;AAAA,YAEf,QAAA,kBAAAC,cAAA;AAAA,cAACE,QAAA;AAAA,cAAA;AAAA,gBACC,WAAWH,SAAA,CAAG,CAAA,EAAG,OAAO,SAAS,CAAA,YAAA,CAAA,EAAgB,YAAY,SAAS,CAAA;AAAA,gBACtE,KAAA,EAAO,EAAE,QAAA,EAAU,UAAA,EAAY,KAAA,EAAO,UAAU,GAAA,EAAK,QAAA,EAAU,GAAG,MAAA,EAAQ,SAAA;AAAU;AAAA;AACtF;AAAA,SACF;AAAA,QAED;AAAA;AAAA;AAAA,GACH;AAEJ;ACzCO,SAAS,QAAA,CAAS,OAAA,GAA2B,EAAC,EAAgB;AACnE,EAAA,MAAM,EAAE,QAAA,GAAW,QAAA,EAAU,GAAG,MAAK,GAAI,OAAA;AAEzC,EAAA,OAAOI,kBAAA,CAAW;AAAA,IAChB,GAAG,IAAA;AAAA,IACH,OAAA,EAAS,IAAA;AAAA,IACT,SAAA,EAAW,KAAA;AAAA,IACX,OAAA,EAAS,OAAA;AAAA,IACT,SAAA,EAAW,IAAA;AAAA,IACX,SAAA,EAAW,IAAA;AAAA,IACX,MAAA,EAAQ,IAAA;AAAA,IACR,aAAA,EAAe;AAAA,GACY,CAAA;AAC/B","file":"index.js","sourcesContent":["import { IconButton, type IconButtonProps } from '@negative-space/button/src/IconButton'\nimport { Popover, type PopoverProps } from '@negative-space/popover'\nimport { cn, useNSUI, X } from '@negative-space/system'\nimport React from 'react'\n\nimport { type ModalHandle } from './useModal'\n\nexport interface ModalProps extends Omit<PopoverProps, 'popover' | 'classNames' | 'styles'> {\n  classNames?: Omit<NonNullable<PopoverProps['classNames']>, 'arrow'> & {\n    closeButton?: string\n    closeIcon?: string\n  }\n  styles?: Omit<NonNullable<PopoverProps['styles']>, 'arrow'> & {\n    closeButton?: React.CSSProperties\n    closeIcon?: React.CSSProperties\n  }\n  hideCloseButton?: boolean\n  buttonProps?: Omit<IconButtonProps, 'onClick' | 'aria-label' | 'className' | 'style'>\n  modal: ModalHandle\n}\n\nexport const Modal = ({\n  modal,\n  hideCloseButton,\n  classNames,\n  styles,\n  children,\n  ...popoverProps\n}: ModalProps) => {\n  const { global } = useNSUI()\n\n  return (\n    <Popover\n      {...popoverProps}\n      popover={modal}\n      role=\"dialog\"\n      classNames={{\n        root: cn(`${global.prefixCls}-modal`, classNames?.root),\n        content: cn(`${global.prefixCls}-modal-content`, classNames?.content),\n        overlay: cn(`${global.prefixCls}-modal-overlay`, classNames?.overlay)\n      }}\n      styles={{\n        root: { ...styles?.root },\n        content: { ...styles?.content },\n        overlay: { ...styles?.overlay }\n      }}\n    >\n      {!hideCloseButton && (\n        <IconButton\n          {...modal.triggerProps}\n          aria-label=\"close\"\n          onClick={modal.close}\n          className={cn(`${global.prefixCls}-modal-close-button`, classNames?.closeButton)}\n          style={styles?.closeButton}\n        >\n          <X\n            className={cn(`${global.prefixCls}-modal-close`, classNames?.closeIcon)}\n            style={{ position: 'absolute', right: '0.5rem', top: '0.5rem', ...styles?.closeIcon }}\n          />\n        </IconButton>\n      )}\n      {children}\n    </Popover>\n  )\n}\n","import {\n  type FixedPosition,\n  type PopoverHandle,\n  usePopover,\n  type UsePopoverOptions\n} from '@negative-space/popover'\n\nexport type { FixedPosition as ModalPosition }\n\nexport interface UseModalOptions {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n  dismissOnClickOutside?: boolean\n  dismissOnEscape?: boolean\n  trapFocus?: boolean\n  usePortal?: boolean\n  zIndex?: number\n  position?: FixedPosition\n}\n\nexport type ModalHandle = PopoverHandle\n\nexport function useModal(options: UseModalOptions = {}): ModalHandle {\n  const { position = 'center', ...rest } = options\n\n  return usePopover({\n    ...rest,\n    overlay: true,\n    showArrow: false,\n    trigger: 'click',\n    trapFocus: true,\n    usePortal: true,\n    zIndex: 9999,\n    fixedPosition: position\n  } satisfies UsePopoverOptions)\n}\n"]}

package/dist/index.mjs

@@ -0,0 +1,71 @@
+import { IconButton } from '@negative-space/button/src/IconButton';
+import { Popover, usePopover } from '@negative-space/popover';
+import { useNSUI, cn, X } from '@negative-space/system';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/Modal.tsx
+var Modal = ({
+  modal,
+  hideCloseButton,
+  classNames,
+  styles,
+  children,
+  ...popoverProps
+}) => {
+  const { global } = useNSUI();
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      ...popoverProps,
+      popover: modal,
+      role: "dialog",
+      classNames: {
+        root: cn(`${global.prefixCls}-modal`, classNames?.root),
+        content: cn(`${global.prefixCls}-modal-content`, classNames?.content),
+        overlay: cn(`${global.prefixCls}-modal-overlay`, classNames?.overlay)
+      },
+      styles: {
+        root: { ...styles?.root },
+        content: { ...styles?.content },
+        overlay: { ...styles?.overlay }
+      },
+      children: [
+        !hideCloseButton && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            ...modal.triggerProps,
+            "aria-label": "close",
+            onClick: modal.close,
+            className: cn(`${global.prefixCls}-modal-close-button`, classNames?.closeButton),
+            style: styles?.closeButton,
+            children: /* @__PURE__ */ jsx(
+              X,
+              {
+                className: cn(`${global.prefixCls}-modal-close`, classNames?.closeIcon),
+                style: { position: "absolute", right: "0.5rem", top: "0.5rem", ...styles?.closeIcon }
+              }
+            )
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+function useModal(options = {}) {
+  const { position = "center", ...rest } = options;
+  return usePopover({
+    ...rest,
+    overlay: true,
+    showArrow: false,
+    trigger: "click",
+    trapFocus: true,
+    usePortal: true,
+    zIndex: 9999,
+    fixedPosition: position
+  });
+}
+
+export { Modal, useModal };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Modal.tsx","../src/useModal.ts"],"names":[],"mappings":";;;;;;AAqBO,IAAM,QAAQ,CAAC;AAAA,EACpB,KAAA;AAAA,EACA,eAAA;AAAA,EACA,UAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAkB;AAChB,EAAA,MAAM,EAAE,MAAA,EAAO,GAAI,OAAA,EAAQ;AAE3B,EAAA,uBACE,IAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACE,GAAG,YAAA;AAAA,MACJ,OAAA,EAAS,KAAA;AAAA,MACT,IAAA,EAAK,QAAA;AAAA,MACL,UAAA,EAAY;AAAA,QACV,MAAM,EAAA,CAAG,CAAA,EAAG,OAAO,SAAS,CAAA,MAAA,CAAA,EAAU,YAAY,IAAI,CAAA;AAAA,QACtD,SAAS,EAAA,CAAG,CAAA,EAAG,OAAO,SAAS,CAAA,cAAA,CAAA,EAAkB,YAAY,OAAO,CAAA;AAAA,QACpE,SAAS,EAAA,CAAG,CAAA,EAAG,OAAO,SAAS,CAAA,cAAA,CAAA,EAAkB,YAAY,OAAO;AAAA,OACtE;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,IAAA,EAAM,EAAE,GAAG,MAAA,EAAQ,IAAA,EAAK;AAAA,QACxB,OAAA,EAAS,EAAE,GAAG,MAAA,EAAQ,OAAA,EAAQ;AAAA,QAC9B,OAAA,EAAS,EAAE,GAAG,MAAA,EAAQ,OAAA;AAAQ,OAChC;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,CAAC,eAAA,oBACA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACE,GAAG,KAAA,CAAM,YAAA;AAAA,YACV,YAAA,EAAW,OAAA;AAAA,YACX,SAAS,KAAA,CAAM,KAAA;AAAA,YACf,WAAW,EAAA,CAAG,CAAA,EAAG,OAAO,SAAS,CAAA,mBAAA,CAAA,EAAuB,YAAY,WAAW,CAAA;AAAA,YAC/E,OAAO,MAAA,EAAQ,WAAA;AAAA,YAEf,QAAA,kBAAA,GAAA;AAAA,cAAC,CAAA;AAAA,cAAA;AAAA,gBACC,WAAW,EAAA,CAAG,CAAA,EAAG,OAAO,SAAS,CAAA,YAAA,CAAA,EAAgB,YAAY,SAAS,CAAA;AAAA,gBACtE,KAAA,EAAO,EAAE,QAAA,EAAU,UAAA,EAAY,KAAA,EAAO,UAAU,GAAA,EAAK,QAAA,EAAU,GAAG,MAAA,EAAQ,SAAA;AAAU;AAAA;AACtF;AAAA,SACF;AAAA,QAED;AAAA;AAAA;AAAA,GACH;AAEJ;ACzCO,SAAS,QAAA,CAAS,OAAA,GAA2B,EAAC,EAAgB;AACnE,EAAA,MAAM,EAAE,QAAA,GAAW,QAAA,EAAU,GAAG,MAAK,GAAI,OAAA;AAEzC,EAAA,OAAO,UAAA,CAAW;AAAA,IAChB,GAAG,IAAA;AAAA,IACH,OAAA,EAAS,IAAA;AAAA,IACT,SAAA,EAAW,KAAA;AAAA,IACX,OAAA,EAAS,OAAA;AAAA,IACT,SAAA,EAAW,IAAA;AAAA,IACX,SAAA,EAAW,IAAA;AAAA,IACX,MAAA,EAAQ,IAAA;AAAA,IACR,aAAA,EAAe;AAAA,GACY,CAAA;AAC/B","file":"index.mjs","sourcesContent":["import { IconButton, type IconButtonProps } from '@negative-space/button/src/IconButton'\nimport { Popover, type PopoverProps } from '@negative-space/popover'\nimport { cn, useNSUI, X } from '@negative-space/system'\nimport React from 'react'\n\nimport { type ModalHandle } from './useModal'\n\nexport interface ModalProps extends Omit<PopoverProps, 'popover' | 'classNames' | 'styles'> {\n  classNames?: Omit<NonNullable<PopoverProps['classNames']>, 'arrow'> & {\n    closeButton?: string\n    closeIcon?: string\n  }\n  styles?: Omit<NonNullable<PopoverProps['styles']>, 'arrow'> & {\n    closeButton?: React.CSSProperties\n    closeIcon?: React.CSSProperties\n  }\n  hideCloseButton?: boolean\n  buttonProps?: Omit<IconButtonProps, 'onClick' | 'aria-label' | 'className' | 'style'>\n  modal: ModalHandle\n}\n\nexport const Modal = ({\n  modal,\n  hideCloseButton,\n  classNames,\n  styles,\n  children,\n  ...popoverProps\n}: ModalProps) => {\n  const { global } = useNSUI()\n\n  return (\n    <Popover\n      {...popoverProps}\n      popover={modal}\n      role=\"dialog\"\n      classNames={{\n        root: cn(`${global.prefixCls}-modal`, classNames?.root),\n        content: cn(`${global.prefixCls}-modal-content`, classNames?.content),\n        overlay: cn(`${global.prefixCls}-modal-overlay`, classNames?.overlay)\n      }}\n      styles={{\n        root: { ...styles?.root },\n        content: { ...styles?.content },\n        overlay: { ...styles?.overlay }\n      }}\n    >\n      {!hideCloseButton && (\n        <IconButton\n          {...modal.triggerProps}\n          aria-label=\"close\"\n          onClick={modal.close}\n          className={cn(`${global.prefixCls}-modal-close-button`, classNames?.closeButton)}\n          style={styles?.closeButton}\n        >\n          <X\n            className={cn(`${global.prefixCls}-modal-close`, classNames?.closeIcon)}\n            style={{ position: 'absolute', right: '0.5rem', top: '0.5rem', ...styles?.closeIcon }}\n          />\n        </IconButton>\n      )}\n      {children}\n    </Popover>\n  )\n}\n","import {\n  type FixedPosition,\n  type PopoverHandle,\n  usePopover,\n  type UsePopoverOptions\n} from '@negative-space/popover'\n\nexport type { FixedPosition as ModalPosition }\n\nexport interface UseModalOptions {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n  dismissOnClickOutside?: boolean\n  dismissOnEscape?: boolean\n  trapFocus?: boolean\n  usePortal?: boolean\n  zIndex?: number\n  position?: FixedPosition\n}\n\nexport type ModalHandle = PopoverHandle\n\nexport function useModal(options: UseModalOptions = {}): ModalHandle {\n  const { position = 'center', ...rest } = options\n\n  return usePopover({\n    ...rest,\n    overlay: true,\n    showArrow: false,\n    trigger: 'click',\n    trapFocus: true,\n    usePortal: true,\n    zIndex: 9999,\n    fixedPosition: position\n  } satisfies UsePopoverOptions)\n}\n"]}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@negative-space/modal",
+  "version": "1.0.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "A lightweight Modal component from Negative Space, enabling fully custom interactive UI experiences",
+  "keywords": [
+    "components",
+    "feedback",
+    "modal",
+    "negative-space",
+    "nsui",
+    "react",
+    "ui"
+  ],
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/negative-space-ui/nsui",
+    "directory": "packages/ui/modal"
+  },
+  "bugs": {
+    "url": "https://github.com/negative-space-ui/nsui/issues"
+  },
+  "dependencies": {
+    "@negative-space/button": "2.5.0",
+    "@negative-space/popover": "1.0.0",
+    "@negative-space/system": "1.3.0"
+  },
+  "peerDependencies": {
+    "react": "^19.2.3"
+  },
+  "clean-package": "../../../../clean-package.config.json",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsup",
+    "clean": "rimraf dist .turbo",
+    "dev": "pnpm build:fast --watch",
+    "lint": "eslint . --ext ts,tsx",
+    "typecheck": "tsc --noEmit"
+  }
+}