@telegraph/modal 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# @telegraph/modal
+
+## 0.0.1
+
+### Patch Changes
+
+- [#86](https://github.com/knocklabs/telegraph/pull/86) [`0944c50`](https://github.com/knocklabs/telegraph/commit/0944c50e3043ab010405db468733a78c618777d0) Thanks [@kylemcd](https://github.com/kylemcd)! - Layout component improvements + early modal version
+
+- Updated dependencies [[`0944c50`](https://github.com/knocklabs/telegraph/commit/0944c50e3043ab010405db468733a78c618777d0)]:
+  - @telegraph/layout@0.0.7

package/README.md

@@ -0,0 +1,32 @@
+![Telegraph by Knock](https://github.com/knocklabs/telegraph/assets/29106675/9b5022e3-b02c-4582-ba57-3d6171e45e44)
+
+[![npm version](https://img.shields.io/npm/v/@telegraph/modal.svg)](https://www.npmjs.com/package/@telegraph/modal)
+
+# @telegraph/modal
+
+> A modal component
+
+## Installation Instructions
+
+```
+npm install @telegraph/modal
+```
+
+### Add stylesheet
+
+Pick one:
+
+Via CSS (preferred):
+
+```
+@import "@telegraph/modal"
+```
+
+Via Javascript:
+
+```
+import "@telegraph/modal/default.css"
+```
+
+> Then, include `className="tgph"` on the farthest parent element wrapping the telegraph components
+

package/dist/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),y=require("@radix-ui/react-dialog"),s=require("@telegraph/layout"),u=require("clsx"),c=require("framer-motion"),l=require("react");function m(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,o.get?o:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const a=m(y),x=l.forwardRef(({portal:r={enabled:!0},open:e,onOpenChange:t,className:o,...n},f)=>{const b=r.enabled?a.Portal:l.Fragment;return i.jsx(a.Root,{open:e,onOpenChange:t,children:i.jsx(c.AnimatePresence,{children:e&&i.jsxs(b,{...r,forceMount:!0,children:[i.jsx(a.Overlay,{asChild:!0,children:i.jsx(s.Box,{as:c.motion.div,onClick:()=>t==null?void 0:t(!1),initial:{backdropFilter:"blur(0px)",opacity:0},animate:{backdropFilter:"blur(4px)",opacity:1},exit:{backdropFilter:"blur(0px)",opacity:0},transition:{duration:.3,bounce:0,type:"spring"},className:"fixed inset-0 bg-alpha-black-4 z-overlay"})}),i.jsx(a.Content,{onEscapeKeyDown:()=>t==null?void 0:t(!1),onPointerDownOutside:()=>t==null?void 0:t(!1),ref:f,asChild:!0,children:i.jsx(s.Stack,{className:u("absolute z-modal top-0 left-1/2 transform -translate-x-1/2 max-h-[calc(100vh-var(--tgph-spacing-32))] shadow-1",o),direction:"column",as:c.motion.div,bg:"surface-1",rounded:"4",my:"16",initial:{scale:.8,opacity:0,y:-20},animate:{scale:1,opacity:1,y:0},exit:{scale:.8,opacity:0,y:-20},transition:{duration:.2,bounce:0,type:"spring"},border:!0,children:n.children})})]})})})}),j=l.forwardRef(({p:r="4",className:e,...t},o)=>i.jsx(s.Box,{className:u(e,"overflow-y-auto"),p:r,...t,ref:o})),d={};Object.assign(d,{Root:x,Content:j});exports.Modal=d;
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/Modal/Modal.tsx"],"sourcesContent":["import * as Dialog from \"@radix-ui/react-dialog\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport clsx from \"clsx\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport React from \"react\";\n\ntype RootProps = Omit<\n  React.ComponentPropsWithoutRef<typeof Dialog.Root>,\n  \"modal\"\n> &\n  React.ComponentPropsWithoutRef<typeof Stack> & {\n    portal?: {\n      enabled?: boolean;\n      container?: HTMLElement;\n    };\n  };\n\ntype RootRef = React.ElementRef<typeof Dialog.Content>;\n\nconst Root = React.forwardRef<RootRef, RootProps>(\n  (\n    { portal = { enabled: true }, open, onOpenChange, className, ...props },\n    forwardedRef,\n  ) => {\n    const Portal = portal.enabled ? Dialog.Portal : React.Fragment;\n    return (\n      <Dialog.Root open={open} onOpenChange={onOpenChange}>\n        <AnimatePresence>\n          {open && (\n            <Portal {...portal} forceMount>\n              <Dialog.Overlay asChild>\n                <Box\n                  as={motion.div}\n                  onClick={() => onOpenChange?.(false)}\n                  initial={{ backdropFilter: \"blur(0px)\", opacity: 0 }}\n                  animate={{ backdropFilter: \"blur(4px)\", opacity: 1 }}\n                  exit={{ backdropFilter: \"blur(0px)\", opacity: 0 }}\n                  transition={{ duration: 0.3, bounce: 0, type: \"spring\" }}\n                  className=\"fixed inset-0 bg-alpha-black-4 z-overlay\"\n                />\n              </Dialog.Overlay>\n              <Dialog.Content\n                onEscapeKeyDown={() => onOpenChange?.(false)}\n                onPointerDownOutside={() => onOpenChange?.(false)}\n                ref={forwardedRef}\n                asChild\n              >\n                <Stack\n                  className={clsx(\n                    \"absolute z-modal top-0 left-1/2 transform -translate-x-1/2 max-h-[calc(100vh-var(--tgph-spacing-32))] shadow-1\",\n                    className,\n                  )}\n                  direction=\"column\"\n                  as={motion.div}\n                  bg=\"surface-1\"\n                  rounded=\"4\"\n                  my=\"16\"\n                  initial={{ scale: 0.8, opacity: 0, y: -20 }}\n                  animate={{ scale: 1, opacity: 1, y: 0 }}\n                  exit={{ scale: 0.8, opacity: 0, y: -20 }}\n                  transition={{ duration: 0.2, bounce: 0, type: \"spring\" }}\n                  border\n                >\n                  {props.children}\n                </Stack>\n              </Dialog.Content>\n            </Portal>\n          )}\n        </AnimatePresence>\n      </Dialog.Root>\n    );\n  },\n);\n\ntype ContentProps = React.ComponentProps<typeof Box>;\ntype ContentRef = React.ElementRef<typeof Box>;\n\nconst Content: React.FC<typeof Box> = React.forwardRef<\n  ContentRef,\n  ContentProps\n>(({ p = \"4\", className, ...props }, forwardedRef) => {\n  return (\n    <Box\n      className={clsx(className, \"overflow-y-auto\")}\n      p={p}\n      {...props}\n      ref={forwardedRef}\n    />\n  );\n});\n\nconst Modal = {} as {\n  Root: typeof Root;\n  Content: typeof Content;\n};\n\nObject.assign(Modal, {\n  Root,\n  Content,\n});\n\nexport { Modal };\n"],"names":["Root","React","portal","open","onOpenChange","className","props","forwardedRef","Portal","Dialog","jsx","AnimatePresence","jsxs","Box","motion","Stack","clsx","Content","p","Modal"],"mappings":"khBAmBMA,EAAOC,EAAM,WACjB,CACE,CAAE,OAAAC,EAAS,CAAE,QAAS,EAAQ,EAAA,KAAAC,EAAM,aAAAC,EAAc,UAAAC,EAAW,GAAGC,CAAA,EAChEC,IACG,CACH,MAAMC,EAASN,EAAO,QAAUO,EAAO,OAASR,EAAM,SACtD,OACGS,EAAA,IAAAD,EAAO,KAAP,CAAY,KAAAN,EAAY,aAAAC,EACvB,SAAAM,EAAAA,IAACC,EACE,gBAAA,CAAA,SAAAR,GACES,EAAA,KAAAJ,EAAA,CAAQ,GAAGN,EAAQ,WAAU,GAC5B,SAAA,CAAAQ,EAAA,IAACD,EAAO,QAAP,CAAe,QAAO,GACrB,SAAAC,EAAA,IAACG,EAAA,IAAA,CACC,GAAIC,EAAO,OAAA,IACX,QAAS,IAAMV,GAAA,YAAAA,EAAe,IAC9B,QAAS,CAAE,eAAgB,YAAa,QAAS,CAAE,EACnD,QAAS,CAAE,eAAgB,YAAa,QAAS,CAAE,EACnD,KAAM,CAAE,eAAgB,YAAa,QAAS,CAAE,EAChD,WAAY,CAAE,SAAU,GAAK,OAAQ,EAAG,KAAM,QAAS,EACvD,UAAU,0CAAA,CAAA,EAEd,EACAM,EAAA,IAACD,EAAO,QAAP,CACC,gBAAiB,IAAML,GAAA,YAAAA,EAAe,IACtC,qBAAsB,IAAMA,GAAA,YAAAA,EAAe,IAC3C,IAAKG,EACL,QAAO,GAEP,SAAAG,EAAA,IAACK,EAAA,MAAA,CACC,UAAWC,EACT,iHACAX,CACF,EACA,UAAU,SACV,GAAIS,EAAO,OAAA,IACX,GAAG,YACH,QAAQ,IACR,GAAG,KACH,QAAS,CAAE,MAAO,GAAK,QAAS,EAAG,EAAG,GAAI,EAC1C,QAAS,CAAE,MAAO,EAAG,QAAS,EAAG,EAAG,CAAE,EACtC,KAAM,CAAE,MAAO,GAAK,QAAS,EAAG,EAAG,GAAI,EACvC,WAAY,CAAE,SAAU,GAAK,OAAQ,EAAG,KAAM,QAAS,EACvD,OAAM,GAEL,SAAMR,EAAA,QAAA,CACT,CAAA,CACF,CAAA,EACF,EAEJ,CACF,CAAA,CAEJ,CACF,EAKMW,EAAgChB,EAAM,WAG1C,CAAC,CAAE,EAAAiB,EAAI,IAAK,UAAAb,EAAW,GAAGC,CAAM,EAAGC,IAEjCG,EAAA,IAACG,EAAA,IAAA,CACC,UAAWG,EAAKX,EAAW,iBAAiB,EAC5C,EAAAa,EACC,GAAGZ,EACJ,IAAKC,CAAA,CAAA,CAGV,EAEKY,EAAQ,CAAC,EAKf,OAAO,OAAOA,EAAO,CACnB,KAAAnB,EACA,QAAAiB,CACF,CAAC"}

package/dist/css/default.css

@@ -0,0 +1 @@
+.tgph :is(.fixed){position:fixed}.tgph :is(.absolute){position:absolute}.tgph :is(.inset-0){inset:var(--tgph-spacing-0)}.tgph :is(.left-1\/2){left:50%}.tgph :is(.top-0){top:var(--tgph-spacing-0)}.tgph :is(.z-modal){z-index:var(--tgph-zIndex-modal)}.tgph :is(.z-overlay){z-index:var(--tgph-zIndex-overlay)}.tgph :is(.max-h-\[calc\(100vh-var\(--tgph-spacing-32\)\)\]){max-height:calc(100vh - var(--tgph-spacing-32))}.tgph :is(.-translate-x-1\/2){--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.tgph :is(.transform){transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.tgph :is(.overflow-y-auto){overflow-y:auto}.tgph :is(.border){border-width:1px}.tgph :is(.bg-alpha-black-4){background-color:var(--tgph-alpha-black-4)}.tgph :is(.shadow-1){--tw-shadow: var(--tgph-shadow-1);--tw-shadow-colored: var(--tgph-shadow-1);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.tgph :is(.blur){--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.tgph :is(.transition){transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}

package/dist/esm/index.mjs

@@ -0,0 +1,70 @@
+import { jsx as t, jsxs as b } from "react/jsx-runtime";
+import * as o from "@radix-ui/react-dialog";
+import { Box as e, Stack as y } from "@telegraph/layout";
+import d from "clsx";
+import { AnimatePresence as x, motion as s } from "framer-motion";
+import c from "react";
+const p = c.forwardRef(
+  ({ portal: i = { enabled: !0 }, open: a, onOpenChange: r, className: l, ...m }, f) => {
+    const u = i.enabled ? o.Portal : c.Fragment;
+    return /* @__PURE__ */ t(o.Root, { open: a, onOpenChange: r, children: /* @__PURE__ */ t(x, { children: a && /* @__PURE__ */ b(u, { ...i, forceMount: !0, children: [
+      /* @__PURE__ */ t(o.Overlay, { asChild: !0, children: /* @__PURE__ */ t(
+        e,
+        {
+          as: s.div,
+          onClick: () => r == null ? void 0 : r(!1),
+          initial: { backdropFilter: "blur(0px)", opacity: 0 },
+          animate: { backdropFilter: "blur(4px)", opacity: 1 },
+          exit: { backdropFilter: "blur(0px)", opacity: 0 },
+          transition: { duration: 0.3, bounce: 0, type: "spring" },
+          className: "fixed inset-0 bg-alpha-black-4 z-overlay"
+        }
+      ) }),
+      /* @__PURE__ */ t(
+        o.Content,
+        {
+          onEscapeKeyDown: () => r == null ? void 0 : r(!1),
+          onPointerDownOutside: () => r == null ? void 0 : r(!1),
+          ref: f,
+          asChild: !0,
+          children: /* @__PURE__ */ t(
+            y,
+            {
+              className: d(
+                "absolute z-modal top-0 left-1/2 transform -translate-x-1/2 max-h-[calc(100vh-var(--tgph-spacing-32))] shadow-1",
+                l
+              ),
+              direction: "column",
+              as: s.div,
+              bg: "surface-1",
+              rounded: "4",
+              my: "16",
+              initial: { scale: 0.8, opacity: 0, y: -20 },
+              animate: { scale: 1, opacity: 1, y: 0 },
+              exit: { scale: 0.8, opacity: 0, y: -20 },
+              transition: { duration: 0.2, bounce: 0, type: "spring" },
+              border: !0,
+              children: m.children
+            }
+          )
+        }
+      )
+    ] }) }) });
+  }
+), v = c.forwardRef(({ p: i = "4", className: a, ...r }, l) => /* @__PURE__ */ t(
+  e,
+  {
+    className: d(a, "overflow-y-auto"),
+    p: i,
+    ...r,
+    ref: l
+  }
+)), k = {};
+Object.assign(k, {
+  Root: p,
+  Content: v
+});
+export {
+  k as Modal
+};
+//# sourceMappingURL=index.mjs.map

package/dist/esm/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../src/Modal/Modal.tsx"],"sourcesContent":["import * as Dialog from \"@radix-ui/react-dialog\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport clsx from \"clsx\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport React from \"react\";\n\ntype RootProps = Omit<\n  React.ComponentPropsWithoutRef<typeof Dialog.Root>,\n  \"modal\"\n> &\n  React.ComponentPropsWithoutRef<typeof Stack> & {\n    portal?: {\n      enabled?: boolean;\n      container?: HTMLElement;\n    };\n  };\n\ntype RootRef = React.ElementRef<typeof Dialog.Content>;\n\nconst Root = React.forwardRef<RootRef, RootProps>(\n  (\n    { portal = { enabled: true }, open, onOpenChange, className, ...props },\n    forwardedRef,\n  ) => {\n    const Portal = portal.enabled ? Dialog.Portal : React.Fragment;\n    return (\n      <Dialog.Root open={open} onOpenChange={onOpenChange}>\n        <AnimatePresence>\n          {open && (\n            <Portal {...portal} forceMount>\n              <Dialog.Overlay asChild>\n                <Box\n                  as={motion.div}\n                  onClick={() => onOpenChange?.(false)}\n                  initial={{ backdropFilter: \"blur(0px)\", opacity: 0 }}\n                  animate={{ backdropFilter: \"blur(4px)\", opacity: 1 }}\n                  exit={{ backdropFilter: \"blur(0px)\", opacity: 0 }}\n                  transition={{ duration: 0.3, bounce: 0, type: \"spring\" }}\n                  className=\"fixed inset-0 bg-alpha-black-4 z-overlay\"\n                />\n              </Dialog.Overlay>\n              <Dialog.Content\n                onEscapeKeyDown={() => onOpenChange?.(false)}\n                onPointerDownOutside={() => onOpenChange?.(false)}\n                ref={forwardedRef}\n                asChild\n              >\n                <Stack\n                  className={clsx(\n                    \"absolute z-modal top-0 left-1/2 transform -translate-x-1/2 max-h-[calc(100vh-var(--tgph-spacing-32))] shadow-1\",\n                    className,\n                  )}\n                  direction=\"column\"\n                  as={motion.div}\n                  bg=\"surface-1\"\n                  rounded=\"4\"\n                  my=\"16\"\n                  initial={{ scale: 0.8, opacity: 0, y: -20 }}\n                  animate={{ scale: 1, opacity: 1, y: 0 }}\n                  exit={{ scale: 0.8, opacity: 0, y: -20 }}\n                  transition={{ duration: 0.2, bounce: 0, type: \"spring\" }}\n                  border\n                >\n                  {props.children}\n                </Stack>\n              </Dialog.Content>\n            </Portal>\n          )}\n        </AnimatePresence>\n      </Dialog.Root>\n    );\n  },\n);\n\ntype ContentProps = React.ComponentProps<typeof Box>;\ntype ContentRef = React.ElementRef<typeof Box>;\n\nconst Content: React.FC<typeof Box> = React.forwardRef<\n  ContentRef,\n  ContentProps\n>(({ p = \"4\", className, ...props }, forwardedRef) => {\n  return (\n    <Box\n      className={clsx(className, \"overflow-y-auto\")}\n      p={p}\n      {...props}\n      ref={forwardedRef}\n    />\n  );\n});\n\nconst Modal = {} as {\n  Root: typeof Root;\n  Content: typeof Content;\n};\n\nObject.assign(Modal, {\n  Root,\n  Content,\n});\n\nexport { Modal };\n"],"names":["Root","React","portal","open","onOpenChange","className","props","forwardedRef","Portal","Dialog","jsx","AnimatePresence","jsxs","Box","motion","Stack","clsx","Content","p","Modal"],"mappings":";;;;;;AAmBA,MAAMA,IAAOC,EAAM;AAAA,EACjB,CACE,EAAE,QAAAC,IAAS,EAAE,SAAS,GAAQ,GAAA,MAAAC,GAAM,cAAAC,GAAc,WAAAC,GAAW,GAAGC,EAAA,GAChEC,MACG;AACH,UAAMC,IAASN,EAAO,UAAUO,EAAO,SAASR,EAAM;AACtD,WACG,gBAAAS,EAAAD,EAAO,MAAP,EAAY,MAAAN,GAAY,cAAAC,GACvB,UAAA,gBAAAM,EAACC,GACE,EAAA,UAAAR,KACE,gBAAAS,EAAAJ,GAAA,EAAQ,GAAGN,GAAQ,YAAU,IAC5B,UAAA;AAAA,MAAA,gBAAAQ,EAACD,EAAO,SAAP,EAAe,SAAO,IACrB,UAAA,gBAAAC;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,IAAIC,EAAO;AAAA,UACX,SAAS,MAAMV,KAAA,gBAAAA,EAAe;AAAA,UAC9B,SAAS,EAAE,gBAAgB,aAAa,SAAS,EAAE;AAAA,UACnD,SAAS,EAAE,gBAAgB,aAAa,SAAS,EAAE;AAAA,UACnD,MAAM,EAAE,gBAAgB,aAAa,SAAS,EAAE;AAAA,UAChD,YAAY,EAAE,UAAU,KAAK,QAAQ,GAAG,MAAM,SAAS;AAAA,UACvD,WAAU;AAAA,QAAA;AAAA,MAAA,GAEd;AAAA,MACA,gBAAAM;AAAA,QAACD,EAAO;AAAA,QAAP;AAAA,UACC,iBAAiB,MAAML,KAAA,gBAAAA,EAAe;AAAA,UACtC,sBAAsB,MAAMA,KAAA,gBAAAA,EAAe;AAAA,UAC3C,KAAKG;AAAA,UACL,SAAO;AAAA,UAEP,UAAA,gBAAAG;AAAA,YAACK;AAAA,YAAA;AAAA,cACC,WAAWC;AAAA,gBACT;AAAA,gBACAX;AAAA,cACF;AAAA,cACA,WAAU;AAAA,cACV,IAAIS,EAAO;AAAA,cACX,IAAG;AAAA,cACH,SAAQ;AAAA,cACR,IAAG;AAAA,cACH,SAAS,EAAE,OAAO,KAAK,SAAS,GAAG,GAAG,IAAI;AAAA,cAC1C,SAAS,EAAE,OAAO,GAAG,SAAS,GAAG,GAAG,EAAE;AAAA,cACtC,MAAM,EAAE,OAAO,KAAK,SAAS,GAAG,GAAG,IAAI;AAAA,cACvC,YAAY,EAAE,UAAU,KAAK,QAAQ,GAAG,MAAM,SAAS;AAAA,cACvD,QAAM;AAAA,cAEL,UAAMR,EAAA;AAAA,YAAA;AAAA,UACT;AAAA,QAAA;AAAA,MACF;AAAA,IAAA,GACF,GAEJ,EACF,CAAA;AAAA,EAEJ;AACF,GAKMW,IAAgChB,EAAM,WAG1C,CAAC,EAAE,GAAAiB,IAAI,KAAK,WAAAb,GAAW,GAAGC,EAAM,GAAGC,MAEjC,gBAAAG;AAAA,EAACG;AAAA,EAAA;AAAA,IACC,WAAWG,EAAKX,GAAW,iBAAiB;AAAA,IAC5C,GAAAa;AAAA,IACC,GAAGZ;AAAA,IACJ,KAAKC;AAAA,EAAA;AAAA,CAGV,GAEKY,IAAQ,CAAC;AAKf,OAAO,OAAOA,GAAO;AAAA,EACnB,MAAAnB;AAAA,EACA,SAAAiB;AACF,CAAC;"}

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

@@ -0,0 +1,17 @@
+import * as Dialog from "@radix-ui/react-dialog";
+import { Box, Stack } from "@telegraph/layout";
+import React from "react";
+type RootProps = Omit<React.ComponentPropsWithoutRef<typeof Dialog.Root>, "modal"> & React.ComponentPropsWithoutRef<typeof Stack> & {
+    portal?: {
+        enabled?: boolean;
+        container?: HTMLElement;
+    };
+};
+declare const Root: React.ForwardRefExoticComponent<Omit<RootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Content: React.FC<typeof Box>;
+declare const Modal: {
+    Root: typeof Root;
+    Content: typeof Content;
+};
+export { Modal };
+//# sourceMappingURL=Modal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAG/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,KAAK,SAAS,GAAG,IAAI,CACnB,KAAK,CAAC,wBAAwB,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,EAClD,OAAO,CACR,GACC,KAAK,CAAC,wBAAwB,CAAC,OAAO,KAAK,CAAC,GAAG;IAC7C,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,SAAS,CAAC,EAAE,WAAW,CAAC;KACzB,CAAC;CACH,CAAC;AAIJ,QAAA,MAAM,IAAI,+FAqDT,CAAC;AAKF,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,OAAO,GAAG,CAYhC,CAAC;AAEH,QAAA,MAAM,KAAK;UACH,WAAW;aACR,cAAc;CACxB,CAAC;AAOF,OAAO,EAAE,KAAK,EAAE,CAAC"}

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

@@ -0,0 +1,2 @@
+export { Modal } from "./Modal";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export { Modal } from "./Modal";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@telegraph/modal",
+  "version": "0.0.1",
+  "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/modal",
+  "author": "@knocklabs",
+  "license": "MIT",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.mjs",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/cjs/index.js",
+      "types": "./dist/types/index.d.ts",
+      "default": "./dist/css/default.css"
+    },
+    "./default.css": "./dist/css/default.css"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "prettier": "@knocklabs/prettier-config",
+  "scripts": {
+    "clean": "rm -rf dist",
+    "dev": "vite build --watch --emptyOutDir false",
+    "build": "yarn clean && vite build",
+    "//test": "vitest run",
+    "//test:watch": "vitest",
+    "coverage": "vitest run --coverage",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "format": "prettier \"src/**/*.{js,ts,tsx}\" --write",
+    "format:check": "prettier \"src/**/*.{js,ts,tsx}\" --check",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@telegraph/layout": "^0.0.7",
+    "clsx": "^2.1.0",
+    "framer-motion": "^11.1.9"
+  },
+  "devDependencies": {
+    "@knocklabs/eslint-config": "^0.0.3",
+    "@knocklabs/prettier-config": "^0.0.1",
+    "@knocklabs/typescript-config": "^0.0.2",
+    "@telegraph/postcss-config": "^0.0.13",
+    "@telegraph/tailwind-config": "^0.0.11",
+    "@telegraph/vite-config": "^0.0.8",
+    "@telegraph/vitest-config": "^0.0.6",
+    "@types/react": "^18.2.48",
+    "eslint": "^8.56.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.7",
+    "vitest": "^1.2.2"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}