@telegraph/modal 0.0.11 → 0.0.12

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @telegraph/modal
 
+## 0.0.12
+
+### Patch Changes
+
+- [#136](https://github.com/knocklabs/telegraph/pull/136) [`89ad0f4`](https://github.com/knocklabs/telegraph/commit/89ad0f4b72a3d5e4f60dfda2a7352da1117e69cc) Thanks [@kylemcd](https://github.com/kylemcd)! - fix modal not being able to scroll
+
 ## 0.0.11
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),y=require("@radix-ui/react-dialog"),b=require("@radix-ui/react-visually-hidden"),j=require("@telegraph/button"),m=require("@telegraph/icon"),c=require("@telegraph/layout"),f=require("clsx"),s=require("framer-motion"),g=require("react");function u(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const i in e)if(i!=="default"){const n=Object.getOwnPropertyDescriptor(e,i);Object.defineProperty(r,i,n.get?n:{enumerable:!0,get:()=>e[i]})}}return r.default=e,Object.freeze(r)}const o=u(y),h=u(b),k=({defaultOpen:e,open:r,onOpenChange:i,a11yTitle:n,a11yDescription:l,className:x,children:p,...a})=>t.jsxs(o.Root,{open:r,onOpenChange:i,defaultOpen:e,children:[t.jsxs(h.Root,{children:[t.jsx(o.Title,{children:n}),l&&t.jsx(o.Description,{children:l})]}),t.jsx(s.AnimatePresence,{children:r&&t.jsxs(t.Fragment,{children:[t.jsx(o.Overlay,{asChild:!0,children:t.jsx(c.Box,{as:s.motion.div,onClick:()=>i==null?void 0:i(!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"})}),t.jsx(c.Stack,{className:f("fixed z-modal top-0 left-1/2 -translate-x-1/2","max-h-[calc(100vh-var(--tgph-spacing-32))] shadow-1",x),direction:"column",as:s.motion.div,my:"16",initial:{scale:.8,opacity:0,y:-20,x:"-50%"},animate:{scale:1,opacity:1,y:0,x:"-50%"},exit:{scale:.8,opacity:0,y:-20,x:"-50%"},transition:{duration:.2,bounce:0,type:"spring"},maxW:a.maxW??"140",w:a.w??"full",bg:"surface-1",border:!0,rounded:"4",...a,children:p})]})})]}),q=g.forwardRef(({children:e,...r},i)=>t.jsx(o.Content,{ref:i,...r,asChild:!0,children:t.jsx(c.Stack,{direction:"column",children:e})})),S=({size:e="1",variant:r="ghost",...i})=>t.jsx(o.Close,{asChild:!0,children:t.jsx(j.Button,{icon:{icon:m.Lucide.X,alt:"Close Modal"},variant:r,size:e,...i})}),v=({children:e,...r})=>t.jsx(c.Stack,{direction:"column",px:"6",py:"4",...r,children:e}),w=({children:e,...r})=>t.jsx(c.Stack,{direction:"row",justify:"space-between",align:"center",px:"6",py:"4",borderBottom:!0,...r,children:e}),M=({children:e,...r})=>t.jsx(c.Stack,{direction:"row",align:"center",justify:"end",gap:"2",px:"6",py:"4",borderTop:!0,...r,children:e}),d={};Object.assign(d,{Root:k,Content:q,Close:S,Body:v,Header:w,Footer:M});exports.Modal=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),y=require("@radix-ui/react-dialog"),b=require("@radix-ui/react-visually-hidden"),j=require("@telegraph/button"),m=require("@telegraph/icon"),c=require("@telegraph/layout"),f=require("clsx"),s=require("framer-motion"),g=require("react");function u(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const n=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(r,o,n.get?n:{enumerable:!0,get:()=>e[o]})}}return r.default=e,Object.freeze(r)}const i=u(y),h=u(b),k=({defaultOpen:e,open:r,onOpenChange:o,a11yTitle:n,a11yDescription:l,className:x,children:p,...a})=>t.jsxs(i.Root,{open:r,onOpenChange:o,defaultOpen:e,children:[t.jsxs(h.Root,{children:[t.jsx(i.Title,{children:n}),l&&t.jsx(i.Description,{children:l})]}),t.jsx(s.AnimatePresence,{children:r&&t.jsx(t.Fragment,{children:t.jsxs(i.Overlay,{children:[t.jsx(c.Box,{as:s.motion.div,onClick:()=>o==null?void 0:o(!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"}),t.jsx(c.Stack,{className:f("fixed z-modal top-0 left-1/2 -translate-x-1/2","max-h-[calc(100vh-var(--tgph-spacing-32))] shadow-1",x),direction:"column",as:s.motion.div,my:"16",initial:{scale:.8,opacity:0,y:-20,x:"-50%"},animate:{scale:1,opacity:1,y:0,x:"-50%"},exit:{scale:.8,opacity:0,y:-20,x:"-50%"},transition:{duration:.2,bounce:0,type:"spring"},maxW:a.maxW??"140",w:a.w??"full",bg:"surface-1",border:!0,rounded:"4",...a,children:p})]})})})]}),q=g.forwardRef(({children:e,...r},o)=>t.jsx(i.Content,{ref:o,...r,asChild:!0,children:t.jsx(c.Stack,{direction:"column",children:e})})),S=({size:e="1",variant:r="ghost",...o})=>t.jsx(i.Close,{asChild:!0,children:t.jsx(j.Button,{icon:{icon:m.Lucide.X,alt:"Close Modal"},variant:r,size:e,...o})}),v=({children:e,...r})=>t.jsx(c.Stack,{direction:"column",px:"6",py:"4",...r,children:e}),w=({children:e,...r})=>t.jsx(c.Stack,{direction:"row",justify:"space-between",align:"center",px:"6",py:"4",borderBottom:!0,...r,children:e}),M=({children:e,...r})=>t.jsx(c.Stack,{direction:"row",align:"center",justify:"end",gap:"2",px:"6",py:"4",borderTop:!0,...r,children:e}),d={};Object.assign(d,{Root:k,Content:q,Close:S,Body:v,Header:w,Footer:M});exports.Modal=d;
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Modal/Modal.tsx"],"sourcesContent":["import * as Dialog from \"@radix-ui/react-dialog\";\nimport * as VisuallyHidden from \"@radix-ui/react-visually-hidden\";\nimport { Button } from \"@telegraph/button\";\nimport type {\n  PolymorphicProps,\n  TgphComponentProps,\n  TgphElement,\n} from \"@telegraph/helpers\";\nimport { Lucide } from \"@telegraph/icon\";\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  TgphComponentProps<typeof Stack> & {\n    a11yTitle: string;\n    a11yDescription?: string;\n  };\n\nconst Root = ({\n  defaultOpen,\n  open,\n  onOpenChange,\n  a11yTitle,\n  a11yDescription,\n  className,\n  children,\n  ...props\n}: RootProps) => {\n  return (\n    <Dialog.Root\n      open={open}\n      onOpenChange={onOpenChange}\n      defaultOpen={defaultOpen}\n    >\n      <VisuallyHidden.Root>\n        <Dialog.Title>{a11yTitle}</Dialog.Title>\n        {a11yDescription && (\n          <Dialog.Description>{a11yDescription}</Dialog.Description>\n        )}\n      </VisuallyHidden.Root>\n      <AnimatePresence>\n        {open && (\n          <>\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            <Stack\n              className={clsx(\n                \"fixed z-modal top-0 left-1/2 -translate-x-1/2\",\n                \"max-h-[calc(100vh-var(--tgph-spacing-32))] shadow-1\",\n                className,\n              )}\n              direction=\"column\"\n              as={motion.div}\n              my=\"16\"\n              initial={{ scale: 0.8, opacity: 0, y: -20, x: \"-50%\" }}\n              animate={{ scale: 1, opacity: 1, y: 0, x: \"-50%\" }}\n              exit={{ scale: 0.8, opacity: 0, y: -20, x: \"-50%\" }}\n              transition={{ duration: 0.2, bounce: 0, type: \"spring\" }}\n              maxW={props.maxW ?? \"140\"}\n              w={props.w ?? \"full\"}\n              bg=\"surface-1\"\n              border\n              rounded=\"4\"\n              {...props}\n            >\n              {children}\n            </Stack>\n          </>\n        )}\n      </AnimatePresence>\n    </Dialog.Root>\n  );\n};\n\ntype ContentProps = React.ComponentPropsWithoutRef<typeof Dialog.Content>;\ntype ContentRef = React.ElementRef<typeof Dialog.Content>;\n\nconst Content = React.forwardRef<ContentRef, ContentProps>(\n  ({ children, ...props }, forwardedRef) => {\n    return (\n      <Dialog.Content ref={forwardedRef} {...props} asChild>\n        <Stack direction=\"column\">{children}</Stack>\n      </Dialog.Content>\n    );\n  },\n);\n\ntype CloseProps<T extends TgphElement> = TgphComponentProps<typeof Button<T>> &\n  Omit<React.ComponentPropsWithoutRef<typeof Dialog.Close>, \"color\">;\nconst Close = <T extends TgphElement>({\n  size = \"1\",\n  variant = \"ghost\",\n  ...props\n}: CloseProps<T>) => {\n  return (\n    <Dialog.Close asChild>\n      <Button\n        icon={{ icon: Lucide.X, alt: \"Close Modal\" }}\n        variant={variant}\n        size={size}\n        {...props}\n      />\n    </Dialog.Close>\n  );\n};\n\ntype BodyProps<T extends TgphElement> = PolymorphicProps<T> &\n  TgphComponentProps<typeof Stack<T>>;\n\nconst Body = <T extends TgphElement>({ children, ...props }: BodyProps<T>) => {\n  return (\n    <Stack direction=\"column\" px=\"6\" py=\"4\" {...props}>\n      {children}\n    </Stack>\n  );\n};\n\ntype HeaderProps<T extends TgphElement> = PolymorphicProps<T> &\n  TgphComponentProps<typeof Stack<T>>;\n\nconst Header = <T extends TgphElement>({\n  children,\n  ...props\n}: HeaderProps<T>) => {\n  return (\n    <Stack\n      direction=\"row\"\n      justify=\"space-between\"\n      align=\"center\"\n      px=\"6\"\n      py=\"4\"\n      borderBottom\n      {...props}\n    >\n      {children}\n    </Stack>\n  );\n};\n\ntype FooterProps<T extends TgphElement> = PolymorphicProps<T> &\n  TgphComponentProps<typeof Stack<T>>;\n\nconst Footer = <T extends TgphElement>({\n  children,\n  ...props\n}: FooterProps<T>) => {\n  return (\n    <Stack\n      direction=\"row\"\n      align=\"center\"\n      justify=\"end\"\n      gap=\"2\"\n      px=\"6\"\n      py=\"4\"\n      borderTop\n      {...props}\n    >\n      {children}\n    </Stack>\n  );\n};\n\nconst Modal = {} as {\n  Root: typeof Root;\n  Content: typeof Content;\n  Close: typeof Close;\n  Body: typeof Body;\n  Header: typeof Header;\n  Footer: typeof Footer;\n};\n\nObject.assign(Modal, {\n  Root,\n  Content,\n  Close,\n  Body,\n  Header,\n  Footer,\n});\n\nexport { Modal };\n"],"names":["Root","defaultOpen","open","onOpenChange","a11yTitle","a11yDescription","className","children","props","jsxs","Dialog","VisuallyHidden","jsx","AnimatePresence","Fragment","Box","motion","Stack","clsx","Content","React","forwardedRef","Close","size","variant","Button","Lucide","Body","Header","Footer","Modal"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/Modal/Modal.tsx"],"sourcesContent":["import * as Dialog from \"@radix-ui/react-dialog\";\nimport * as VisuallyHidden from \"@radix-ui/react-visually-hidden\";\nimport { Button } from \"@telegraph/button\";\nimport type {\n  PolymorphicProps,\n  TgphComponentProps,\n  TgphElement,\n} from \"@telegraph/helpers\";\nimport { Lucide } from \"@telegraph/icon\";\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  TgphComponentProps<typeof Stack> & {\n    a11yTitle: string;\n    a11yDescription?: string;\n  };\n\nconst Root = ({\n  defaultOpen,\n  open,\n  onOpenChange,\n  a11yTitle,\n  a11yDescription,\n  className,\n  children,\n  ...props\n}: RootProps) => {\n  return (\n    <Dialog.Root\n      open={open}\n      onOpenChange={onOpenChange}\n      defaultOpen={defaultOpen}\n    >\n      <VisuallyHidden.Root>\n        <Dialog.Title>{a11yTitle}</Dialog.Title>\n        {a11yDescription && (\n          <Dialog.Description>{a11yDescription}</Dialog.Description>\n        )}\n      </VisuallyHidden.Root>\n      <AnimatePresence>\n        {open && (\n          <>\n            <Dialog.Overlay>\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              <Stack\n                className={clsx(\n                  \"fixed z-modal top-0 left-1/2 -translate-x-1/2\",\n                  \"max-h-[calc(100vh-var(--tgph-spacing-32))] shadow-1\",\n                  className,\n                )}\n                direction=\"column\"\n                as={motion.div}\n                my=\"16\"\n                initial={{ scale: 0.8, opacity: 0, y: -20, x: \"-50%\" }}\n                animate={{ scale: 1, opacity: 1, y: 0, x: \"-50%\" }}\n                exit={{ scale: 0.8, opacity: 0, y: -20, x: \"-50%\" }}\n                transition={{ duration: 0.2, bounce: 0, type: \"spring\" }}\n                maxW={props.maxW ?? \"140\"}\n                w={props.w ?? \"full\"}\n                bg=\"surface-1\"\n                border\n                rounded=\"4\"\n                {...props}\n              >\n                {children}\n              </Stack>\n            </Dialog.Overlay>\n          </>\n        )}\n      </AnimatePresence>\n    </Dialog.Root>\n  );\n};\n\ntype ContentProps = React.ComponentPropsWithoutRef<typeof Dialog.Content>;\ntype ContentRef = React.ElementRef<typeof Dialog.Content>;\n\nconst Content = React.forwardRef<ContentRef, ContentProps>(\n  ({ children, ...props }, forwardedRef) => {\n    return (\n      <Dialog.Content ref={forwardedRef} {...props} asChild>\n        <Stack direction=\"column\">{children}</Stack>\n      </Dialog.Content>\n    );\n  },\n);\n\ntype CloseProps<T extends TgphElement> = TgphComponentProps<typeof Button<T>> &\n  Omit<React.ComponentPropsWithoutRef<typeof Dialog.Close>, \"color\">;\nconst Close = <T extends TgphElement>({\n  size = \"1\",\n  variant = \"ghost\",\n  ...props\n}: CloseProps<T>) => {\n  return (\n    <Dialog.Close asChild>\n      <Button\n        icon={{ icon: Lucide.X, alt: \"Close Modal\" }}\n        variant={variant}\n        size={size}\n        {...props}\n      />\n    </Dialog.Close>\n  );\n};\n\ntype BodyProps<T extends TgphElement> = PolymorphicProps<T> &\n  TgphComponentProps<typeof Stack<T>>;\n\nconst Body = <T extends TgphElement>({ children, ...props }: BodyProps<T>) => {\n  return (\n    <Stack direction=\"column\" px=\"6\" py=\"4\" {...props}>\n      {children}\n    </Stack>\n  );\n};\n\ntype HeaderProps<T extends TgphElement> = PolymorphicProps<T> &\n  TgphComponentProps<typeof Stack<T>>;\n\nconst Header = <T extends TgphElement>({\n  children,\n  ...props\n}: HeaderProps<T>) => {\n  return (\n    <Stack\n      direction=\"row\"\n      justify=\"space-between\"\n      align=\"center\"\n      px=\"6\"\n      py=\"4\"\n      borderBottom\n      {...props}\n    >\n      {children}\n    </Stack>\n  );\n};\n\ntype FooterProps<T extends TgphElement> = PolymorphicProps<T> &\n  TgphComponentProps<typeof Stack<T>>;\n\nconst Footer = <T extends TgphElement>({\n  children,\n  ...props\n}: FooterProps<T>) => {\n  return (\n    <Stack\n      direction=\"row\"\n      align=\"center\"\n      justify=\"end\"\n      gap=\"2\"\n      px=\"6\"\n      py=\"4\"\n      borderTop\n      {...props}\n    >\n      {children}\n    </Stack>\n  );\n};\n\nconst Modal = {} as {\n  Root: typeof Root;\n  Content: typeof Content;\n  Close: typeof Close;\n  Body: typeof Body;\n  Header: typeof Header;\n  Footer: typeof Footer;\n};\n\nObject.assign(Modal, {\n  Root,\n  Content,\n  Close,\n  Body,\n  Header,\n  Footer,\n});\n\nexport { Modal };\n"],"names":["Root","defaultOpen","open","onOpenChange","a11yTitle","a11yDescription","className","children","props","jsxs","Dialog","VisuallyHidden","jsx","AnimatePresence","Box","motion","Stack","clsx","Content","React","forwardedRef","Close","size","variant","Button","Lucide","Body","Header","Footer","Modal"],"mappings":"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"}

package/dist/esm/index.mjs

@@ -1,4 +1,4 @@
-import { jsx as t, jsxs as l, Fragment as p } from "react/jsx-runtime";
+import { jsx as t, jsxs as l, Fragment as u } from "react/jsx-runtime";
 import * as e from "@radix-ui/react-dialog";
 import * as x from "@radix-ui/react-visually-hidden";
 import { Button as f } from "@telegraph/button";
@@ -14,7 +14,7 @@ const k = ({
   a11yTitle: d,
   a11yDescription: n,
   className: m,
-  children: u,
+  children: p,
   ...c
 }) => /* @__PURE__ */ l(
   e.Root,
@@ -27,8 +27,8 @@ const k = ({
         /* @__PURE__ */ t(e.Title, { children: d }),
         n && /* @__PURE__ */ t(e.Description, { children: n })
       ] }),
-      /* @__PURE__ */ t(g, { children: r && /* @__PURE__ */ l(p, { children: [
-        /* @__PURE__ */ t(e.Overlay, { asChild: !0, children: /* @__PURE__ */ t(
+      /* @__PURE__ */ t(g, { children: r && /* @__PURE__ */ t(u, { children: /* @__PURE__ */ l(e.Overlay, { children: [
+        /* @__PURE__ */ t(
           b,
           {
             as: s.div,
@@ -39,7 +39,7 @@ const k = ({
             transition: { duration: 0.3, bounce: 0, type: "spring" },
             className: "fixed inset-0 bg-alpha-black-4 z-overlay"
           }
-        ) }),
+        ),
         /* @__PURE__ */ t(
           a,
           {
@@ -61,10 +61,10 @@ const k = ({
             border: !0,
             rounded: "4",
             ...c,
-            children: u
+            children: p
           }
         )
-      ] }) })
+      ] }) }) })
     ]
   }
 ), v = w.forwardRef(

package/dist/esm/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Modal/Modal.tsx"],"sourcesContent":["import * as Dialog from \"@radix-ui/react-dialog\";\nimport * as VisuallyHidden from \"@radix-ui/react-visually-hidden\";\nimport { Button } from \"@telegraph/button\";\nimport type {\n  PolymorphicProps,\n  TgphComponentProps,\n  TgphElement,\n} from \"@telegraph/helpers\";\nimport { Lucide } from \"@telegraph/icon\";\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  TgphComponentProps<typeof Stack> & {\n    a11yTitle: string;\n    a11yDescription?: string;\n  };\n\nconst Root = ({\n  defaultOpen,\n  open,\n  onOpenChange,\n  a11yTitle,\n  a11yDescription,\n  className,\n  children,\n  ...props\n}: RootProps) => {\n  return (\n    <Dialog.Root\n      open={open}\n      onOpenChange={onOpenChange}\n      defaultOpen={defaultOpen}\n    >\n      <VisuallyHidden.Root>\n        <Dialog.Title>{a11yTitle}</Dialog.Title>\n        {a11yDescription && (\n          <Dialog.Description>{a11yDescription}</Dialog.Description>\n        )}\n      </VisuallyHidden.Root>\n      <AnimatePresence>\n        {open && (\n          <>\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            <Stack\n              className={clsx(\n                \"fixed z-modal top-0 left-1/2 -translate-x-1/2\",\n                \"max-h-[calc(100vh-var(--tgph-spacing-32))] shadow-1\",\n                className,\n              )}\n              direction=\"column\"\n              as={motion.div}\n              my=\"16\"\n              initial={{ scale: 0.8, opacity: 0, y: -20, x: \"-50%\" }}\n              animate={{ scale: 1, opacity: 1, y: 0, x: \"-50%\" }}\n              exit={{ scale: 0.8, opacity: 0, y: -20, x: \"-50%\" }}\n              transition={{ duration: 0.2, bounce: 0, type: \"spring\" }}\n              maxW={props.maxW ?? \"140\"}\n              w={props.w ?? \"full\"}\n              bg=\"surface-1\"\n              border\n              rounded=\"4\"\n              {...props}\n            >\n              {children}\n            </Stack>\n          </>\n        )}\n      </AnimatePresence>\n    </Dialog.Root>\n  );\n};\n\ntype ContentProps = React.ComponentPropsWithoutRef<typeof Dialog.Content>;\ntype ContentRef = React.ElementRef<typeof Dialog.Content>;\n\nconst Content = React.forwardRef<ContentRef, ContentProps>(\n  ({ children, ...props }, forwardedRef) => {\n    return (\n      <Dialog.Content ref={forwardedRef} {...props} asChild>\n        <Stack direction=\"column\">{children}</Stack>\n      </Dialog.Content>\n    );\n  },\n);\n\ntype CloseProps<T extends TgphElement> = TgphComponentProps<typeof Button<T>> &\n  Omit<React.ComponentPropsWithoutRef<typeof Dialog.Close>, \"color\">;\nconst Close = <T extends TgphElement>({\n  size = \"1\",\n  variant = \"ghost\",\n  ...props\n}: CloseProps<T>) => {\n  return (\n    <Dialog.Close asChild>\n      <Button\n        icon={{ icon: Lucide.X, alt: \"Close Modal\" }}\n        variant={variant}\n        size={size}\n        {...props}\n      />\n    </Dialog.Close>\n  );\n};\n\ntype BodyProps<T extends TgphElement> = PolymorphicProps<T> &\n  TgphComponentProps<typeof Stack<T>>;\n\nconst Body = <T extends TgphElement>({ children, ...props }: BodyProps<T>) => {\n  return (\n    <Stack direction=\"column\" px=\"6\" py=\"4\" {...props}>\n      {children}\n    </Stack>\n  );\n};\n\ntype HeaderProps<T extends TgphElement> = PolymorphicProps<T> &\n  TgphComponentProps<typeof Stack<T>>;\n\nconst Header = <T extends TgphElement>({\n  children,\n  ...props\n}: HeaderProps<T>) => {\n  return (\n    <Stack\n      direction=\"row\"\n      justify=\"space-between\"\n      align=\"center\"\n      px=\"6\"\n      py=\"4\"\n      borderBottom\n      {...props}\n    >\n      {children}\n    </Stack>\n  );\n};\n\ntype FooterProps<T extends TgphElement> = PolymorphicProps<T> &\n  TgphComponentProps<typeof Stack<T>>;\n\nconst Footer = <T extends TgphElement>({\n  children,\n  ...props\n}: FooterProps<T>) => {\n  return (\n    <Stack\n      direction=\"row\"\n      align=\"center\"\n      justify=\"end\"\n      gap=\"2\"\n      px=\"6\"\n      py=\"4\"\n      borderTop\n      {...props}\n    >\n      {children}\n    </Stack>\n  );\n};\n\nconst Modal = {} as {\n  Root: typeof Root;\n  Content: typeof Content;\n  Close: typeof Close;\n  Body: typeof Body;\n  Header: typeof Header;\n  Footer: typeof Footer;\n};\n\nObject.assign(Modal, {\n  Root,\n  Content,\n  Close,\n  Body,\n  Header,\n  Footer,\n});\n\nexport { Modal };\n"],"names":["Root","defaultOpen","open","onOpenChange","a11yTitle","a11yDescription","className","children","props","jsxs","Dialog","VisuallyHidden","jsx","AnimatePresence","Fragment","Box","motion","Stack","clsx","Content","React","forwardedRef","Close","size","variant","Button","Lucide","Body","Header","Footer","Modal"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/Modal/Modal.tsx"],"sourcesContent":["import * as Dialog from \"@radix-ui/react-dialog\";\nimport * as VisuallyHidden from \"@radix-ui/react-visually-hidden\";\nimport { Button } from \"@telegraph/button\";\nimport type {\n  PolymorphicProps,\n  TgphComponentProps,\n  TgphElement,\n} from \"@telegraph/helpers\";\nimport { Lucide } from \"@telegraph/icon\";\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  TgphComponentProps<typeof Stack> & {\n    a11yTitle: string;\n    a11yDescription?: string;\n  };\n\nconst Root = ({\n  defaultOpen,\n  open,\n  onOpenChange,\n  a11yTitle,\n  a11yDescription,\n  className,\n  children,\n  ...props\n}: RootProps) => {\n  return (\n    <Dialog.Root\n      open={open}\n      onOpenChange={onOpenChange}\n      defaultOpen={defaultOpen}\n    >\n      <VisuallyHidden.Root>\n        <Dialog.Title>{a11yTitle}</Dialog.Title>\n        {a11yDescription && (\n          <Dialog.Description>{a11yDescription}</Dialog.Description>\n        )}\n      </VisuallyHidden.Root>\n      <AnimatePresence>\n        {open && (\n          <>\n            <Dialog.Overlay>\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              <Stack\n                className={clsx(\n                  \"fixed z-modal top-0 left-1/2 -translate-x-1/2\",\n                  \"max-h-[calc(100vh-var(--tgph-spacing-32))] shadow-1\",\n                  className,\n                )}\n                direction=\"column\"\n                as={motion.div}\n                my=\"16\"\n                initial={{ scale: 0.8, opacity: 0, y: -20, x: \"-50%\" }}\n                animate={{ scale: 1, opacity: 1, y: 0, x: \"-50%\" }}\n                exit={{ scale: 0.8, opacity: 0, y: -20, x: \"-50%\" }}\n                transition={{ duration: 0.2, bounce: 0, type: \"spring\" }}\n                maxW={props.maxW ?? \"140\"}\n                w={props.w ?? \"full\"}\n                bg=\"surface-1\"\n                border\n                rounded=\"4\"\n                {...props}\n              >\n                {children}\n              </Stack>\n            </Dialog.Overlay>\n          </>\n        )}\n      </AnimatePresence>\n    </Dialog.Root>\n  );\n};\n\ntype ContentProps = React.ComponentPropsWithoutRef<typeof Dialog.Content>;\ntype ContentRef = React.ElementRef<typeof Dialog.Content>;\n\nconst Content = React.forwardRef<ContentRef, ContentProps>(\n  ({ children, ...props }, forwardedRef) => {\n    return (\n      <Dialog.Content ref={forwardedRef} {...props} asChild>\n        <Stack direction=\"column\">{children}</Stack>\n      </Dialog.Content>\n    );\n  },\n);\n\ntype CloseProps<T extends TgphElement> = TgphComponentProps<typeof Button<T>> &\n  Omit<React.ComponentPropsWithoutRef<typeof Dialog.Close>, \"color\">;\nconst Close = <T extends TgphElement>({\n  size = \"1\",\n  variant = \"ghost\",\n  ...props\n}: CloseProps<T>) => {\n  return (\n    <Dialog.Close asChild>\n      <Button\n        icon={{ icon: Lucide.X, alt: \"Close Modal\" }}\n        variant={variant}\n        size={size}\n        {...props}\n      />\n    </Dialog.Close>\n  );\n};\n\ntype BodyProps<T extends TgphElement> = PolymorphicProps<T> &\n  TgphComponentProps<typeof Stack<T>>;\n\nconst Body = <T extends TgphElement>({ children, ...props }: BodyProps<T>) => {\n  return (\n    <Stack direction=\"column\" px=\"6\" py=\"4\" {...props}>\n      {children}\n    </Stack>\n  );\n};\n\ntype HeaderProps<T extends TgphElement> = PolymorphicProps<T> &\n  TgphComponentProps<typeof Stack<T>>;\n\nconst Header = <T extends TgphElement>({\n  children,\n  ...props\n}: HeaderProps<T>) => {\n  return (\n    <Stack\n      direction=\"row\"\n      justify=\"space-between\"\n      align=\"center\"\n      px=\"6\"\n      py=\"4\"\n      borderBottom\n      {...props}\n    >\n      {children}\n    </Stack>\n  );\n};\n\ntype FooterProps<T extends TgphElement> = PolymorphicProps<T> &\n  TgphComponentProps<typeof Stack<T>>;\n\nconst Footer = <T extends TgphElement>({\n  children,\n  ...props\n}: FooterProps<T>) => {\n  return (\n    <Stack\n      direction=\"row\"\n      align=\"center\"\n      justify=\"end\"\n      gap=\"2\"\n      px=\"6\"\n      py=\"4\"\n      borderTop\n      {...props}\n    >\n      {children}\n    </Stack>\n  );\n};\n\nconst Modal = {} as {\n  Root: typeof Root;\n  Content: typeof Content;\n  Close: typeof Close;\n  Body: typeof Body;\n  Header: typeof Header;\n  Footer: typeof Footer;\n};\n\nObject.assign(Modal, {\n  Root,\n  Content,\n  Close,\n  Body,\n  Header,\n  Footer,\n});\n\nexport { Modal };\n"],"names":["Root","defaultOpen","open","onOpenChange","a11yTitle","a11yDescription","className","children","props","jsxs","Dialog","VisuallyHidden","jsx","AnimatePresence","Box","motion","Stack","clsx","Content","React","forwardedRef","Close","size","variant","Button","Lucide","Body","Header","Footer","Modal"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telegraph/modal",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/modal",
   "author": "@knocklabs",
   "license": "MIT",