@telegraph/modal 0.0.2 → 0.0.4

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @telegraph/modal
 
+## 0.0.4
+
+### Patch Changes
+
+- [#100](https://github.com/knocklabs/telegraph/pull/100) [`3bd1027`](https://github.com/knocklabs/telegraph/commit/3bd102788a44385cd9c5804511bd1610f4f57b6a) Thanks [@kylemcd](https://github.com/kylemcd)! - update modal button sizes to match design system correctly
+
+## 0.0.3
+
+### Patch Changes
+
+- [#98](https://github.com/knocklabs/telegraph/pull/98) [`1e06a4e`](https://github.com/knocklabs/telegraph/commit/1e06a4e505ec5a2d6bdebf3d6355fa9c7f8d12fa) Thanks [@kylemcd](https://github.com/kylemcd)! - updates to modal component for production use
+
+- Updated dependencies [[`1e06a4e`](https://github.com/knocklabs/telegraph/commit/1e06a4e505ec5a2d6bdebf3d6355fa9c7f8d12fa)]:
+  - @telegraph/layout@0.0.9
+  - @telegraph/icon@0.0.9
+  - @telegraph/button@0.0.16
+
 ## 0.0.2
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -1,2 +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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),b=require("@radix-ui/react-dialog"),j=require("@radix-ui/react-visually-hidden"),m=require("@telegraph/button"),g=require("@telegraph/icon"),c=require("@telegraph/layout"),h=require("clsx"),l=require("framer-motion"),n=require("react");function d(t){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const e in t)if(e!=="default"){const i=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(o,e,i.get?i:{enumerable:!0,get:()=>t[e]})}}return o.default=t,Object.freeze(o)}const a=d(b),w=d(j),k=n.forwardRef(({defaultOpen:t,open:o,onOpenChange:e,a11yTitle:i,a11yDescription:u,className:x,children:p,...s},y)=>r.jsxs(a.Root,{open:o,onOpenChange:e,defaultOpen:t,children:[r.jsxs(w.Root,{children:[r.jsx(a.Title,{children:i}),u&&r.jsx(a.Description,{children:u})]}),r.jsx(l.AnimatePresence,{children:o&&r.jsxs(r.Fragment,{children:[r.jsx(a.Overlay,{asChild:!0,children:r.jsx(c.Box,{as:l.motion.div,onClick:()=>e==null?void 0:e(!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"})}),r.jsx(c.Stack,{className:h("absolute 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:l.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:s.maxW??"140",w:s.w??"full",bg:"surface-1",border:!0,rounded:"4",...s,ref:y,children:p})]})})]})),R=n.forwardRef(({children:t,...o},e)=>r.jsx(a.Content,{ref:e,...o,asChild:!0,children:r.jsx(c.Stack,{direction:"column",children:t})})),q=n.forwardRef(({size:t="1",variant:o="ghost",...e},i)=>r.jsx(a.Close,{asChild:!0,children:r.jsx(m.Button,{icon:{icon:g.Lucide.X,alt:"Close Modal"},variant:o,size:t,...e,ref:i})})),S=n.forwardRef(({children:t,...o},e)=>r.jsx(c.Stack,{direction:"column",px:"6",py:"4",...o,ref:e,children:t})),v=n.forwardRef(({children:t,...o},e)=>r.jsx(c.Stack,{direction:"row",justify:"space-between",align:"center",px:"6",py:"4",borderBottom:!0,...o,ref:e,children:t})),M=n.forwardRef(({children:t,...o},e)=>r.jsx(c.Stack,{direction:"row",align:"center",justify:"end",gap:"2",px:"6",py:"4",borderTop:!0,...o,ref:e,children:t})),f={};Object.assign(f,{Root:k,Content:R,Close:q,Body:S,Header:v,Footer:M});exports.Modal=f;
 //# 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 { 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"}
+{"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 { 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  React.ComponentPropsWithoutRef<typeof Stack> & {\n    a11yTitle: string;\n    a11yDescription?: string;\n  };\n\ntype RootRef = HTMLDivElement;\n\nconst Root = React.forwardRef<RootRef, RootProps>(\n  (\n    {\n      defaultOpen,\n      open,\n      onOpenChange,\n      a11yTitle,\n      a11yDescription,\n      className,\n      children,\n      ...props\n    },\n    forwardedRef,\n  ) => {\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                  \"absolute 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                ref={forwardedRef}\n              >\n                {children}\n              </Stack>\n            </>\n          )}\n        </AnimatePresence>\n      </Dialog.Root>\n    );\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 = Omit<\n  React.ComponentPropsWithoutRef<typeof Dialog.Close>,\n  \"color\"\n> &\n  React.ComponentPropsWithoutRef<typeof Button>;\ntype CloseRef = React.ElementRef<typeof Button>;\n\nconst Close = React.forwardRef<CloseRef, CloseProps>(\n  ({ size = \"1\", variant = \"ghost\", ...props }, forwardedRef) => {\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          ref={forwardedRef}\n        />\n      </Dialog.Close>\n    );\n  },\n);\n\ntype BodyProps = React.ComponentPropsWithoutRef<typeof Stack>;\ntype BodyRef = React.ElementRef<typeof Stack>;\n\nconst Body: React.FC<BodyProps> = React.forwardRef<BodyRef, BodyProps>(\n  ({ children, ...props }, forwardedRef) => {\n    return (\n      <Stack direction=\"column\" px=\"6\" py=\"4\" {...props} ref={forwardedRef}>\n        {children}\n      </Stack>\n    );\n  },\n);\n\ntype HeaderProps = React.ComponentPropsWithoutRef<typeof Stack>;\ntype HeaderRef = React.ElementRef<typeof Stack>;\n\nconst Header: React.FC<HeaderProps> = React.forwardRef<HeaderRef, HeaderProps>(\n  ({ children, ...props }, forwardedRef) => {\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        ref={forwardedRef}\n      >\n        {children}\n      </Stack>\n    );\n  },\n);\n\ntype FooterProps = React.ComponentPropsWithoutRef<typeof Stack>;\ntype FooterRef = React.ElementRef<typeof Stack>;\n\nconst Footer: React.FC<FooterProps> = React.forwardRef<FooterRef, FooterProps>(\n  ({ children, ...props }, forwardedRef) => {\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        ref={forwardedRef}\n      >\n        {children}\n      </Stack>\n    );\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","React","defaultOpen","open","onOpenChange","a11yTitle","a11yDescription","className","children","props","forwardedRef","jsxs","Dialog","VisuallyHidden","jsx","AnimatePresence","Fragment","Box","motion","Stack","clsx","Content","Close","size","variant","Button","Lucide","Body","Header","Footer","Modal"],"mappings":"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"}

package/dist/css/default.css

@@ -1 +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}
+.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(.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(.outline){outline-style:solid}.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

@@ -1,70 +1,131 @@
-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,
+import { jsxs as d, jsx as t, Fragment as x } from "react/jsx-runtime";
+import * as i from "@radix-ui/react-dialog";
+import * as y from "@radix-ui/react-visually-hidden";
+import { Button as b } from "@telegraph/button";
+import { Lucide as h } from "@telegraph/icon";
+import { Box as w, Stack as c } from "@telegraph/layout";
+import R from "clsx";
+import { AnimatePresence as g, motion as f } from "framer-motion";
+import a from "react";
+const k = a.forwardRef(
+  ({
+    defaultOpen: e,
+    open: o,
+    onOpenChange: r,
+    a11yTitle: l,
+    a11yDescription: s,
+    className: m,
+    children: u,
+    ...n
+  }, p) => /* @__PURE__ */ d(
+    i.Root,
+    {
+      open: o,
+      onOpenChange: r,
+      defaultOpen: e,
+      children: [
+        /* @__PURE__ */ d(y.Root, { children: [
+          /* @__PURE__ */ t(i.Title, { children: l }),
+          s && /* @__PURE__ */ t(i.Description, { children: s })
+        ] }),
+        /* @__PURE__ */ t(g, { children: o && /* @__PURE__ */ d(x, { children: [
+          /* @__PURE__ */ t(i.Overlay, { asChild: !0, children: /* @__PURE__ */ t(
+            w,
             {
-              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
+              as: f.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(
+            c,
+            {
+              className: R(
+                "absolute z-modal top-0 left-1/2 -translate-x-1/2",
+                "max-h-[calc(100vh-var(--tgph-spacing-32))] shadow-1",
+                m
               ),
               direction: "column",
-              as: s.div,
-              bg: "surface-1",
-              rounded: "4",
+              as: f.div,
               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 },
+              initial: { scale: 0.8, opacity: 0, y: -20, x: "-50%" },
+              animate: { scale: 1, opacity: 1, y: 0, x: "-50%" },
+              exit: { scale: 0.8, opacity: 0, y: -20, x: "-50%" },
               transition: { duration: 0.2, bounce: 0, type: "spring" },
+              maxW: n.maxW ?? "140",
+              w: n.w ?? "full",
+              bg: "surface-1",
               border: !0,
-              children: m.children
+              rounded: "4",
+              ...n,
+              ref: p,
+              children: u
             }
           )
-        }
-      )
-    ] }) }) });
-  }
-), 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
+        ] }) })
+      ]
+    }
+  )
+), v = a.forwardRef(
+  ({ children: e, ...o }, r) => /* @__PURE__ */ t(i.Content, { ref: r, ...o, asChild: !0, children: /* @__PURE__ */ t(c, { direction: "column", children: e }) })
+), j = a.forwardRef(
+  ({ size: e = "1", variant: o = "ghost", ...r }, l) => /* @__PURE__ */ t(i.Close, { asChild: !0, children: /* @__PURE__ */ t(
+    b,
+    {
+      icon: { icon: h.X, alt: "Close Modal" },
+      variant: o,
+      size: e,
+      ...r,
+      ref: l
+    }
+  ) })
+), F = a.forwardRef(
+  ({ children: e, ...o }, r) => /* @__PURE__ */ t(c, { direction: "column", px: "6", py: "4", ...o, ref: r, children: e })
+), B = a.forwardRef(
+  ({ children: e, ...o }, r) => /* @__PURE__ */ t(
+    c,
+    {
+      direction: "row",
+      justify: "space-between",
+      align: "center",
+      px: "6",
+      py: "4",
+      borderBottom: !0,
+      ...o,
+      ref: r,
+      children: e
+    }
+  )
+), C = a.forwardRef(
+  ({ children: e, ...o }, r) => /* @__PURE__ */ t(
+    c,
+    {
+      direction: "row",
+      align: "center",
+      justify: "end",
+      gap: "2",
+      px: "6",
+      py: "4",
+      borderTop: !0,
+      ...o,
+      ref: r,
+      children: e
+    }
+  )
+), z = {};
+Object.assign(z, {
+  Root: k,
+  Content: v,
+  Close: j,
+  Body: F,
+  Header: B,
+  Footer: C
 });
 export {
-  k as Modal
+  z as Modal
 };
 //# sourceMappingURL=index.mjs.map

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 { 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;"}
+{"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 { 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  React.ComponentPropsWithoutRef<typeof Stack> & {\n    a11yTitle: string;\n    a11yDescription?: string;\n  };\n\ntype RootRef = HTMLDivElement;\n\nconst Root = React.forwardRef<RootRef, RootProps>(\n  (\n    {\n      defaultOpen,\n      open,\n      onOpenChange,\n      a11yTitle,\n      a11yDescription,\n      className,\n      children,\n      ...props\n    },\n    forwardedRef,\n  ) => {\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                  \"absolute 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                ref={forwardedRef}\n              >\n                {children}\n              </Stack>\n            </>\n          )}\n        </AnimatePresence>\n      </Dialog.Root>\n    );\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 = Omit<\n  React.ComponentPropsWithoutRef<typeof Dialog.Close>,\n  \"color\"\n> &\n  React.ComponentPropsWithoutRef<typeof Button>;\ntype CloseRef = React.ElementRef<typeof Button>;\n\nconst Close = React.forwardRef<CloseRef, CloseProps>(\n  ({ size = \"1\", variant = \"ghost\", ...props }, forwardedRef) => {\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          ref={forwardedRef}\n        />\n      </Dialog.Close>\n    );\n  },\n);\n\ntype BodyProps = React.ComponentPropsWithoutRef<typeof Stack>;\ntype BodyRef = React.ElementRef<typeof Stack>;\n\nconst Body: React.FC<BodyProps> = React.forwardRef<BodyRef, BodyProps>(\n  ({ children, ...props }, forwardedRef) => {\n    return (\n      <Stack direction=\"column\" px=\"6\" py=\"4\" {...props} ref={forwardedRef}>\n        {children}\n      </Stack>\n    );\n  },\n);\n\ntype HeaderProps = React.ComponentPropsWithoutRef<typeof Stack>;\ntype HeaderRef = React.ElementRef<typeof Stack>;\n\nconst Header: React.FC<HeaderProps> = React.forwardRef<HeaderRef, HeaderProps>(\n  ({ children, ...props }, forwardedRef) => {\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        ref={forwardedRef}\n      >\n        {children}\n      </Stack>\n    );\n  },\n);\n\ntype FooterProps = React.ComponentPropsWithoutRef<typeof Stack>;\ntype FooterRef = React.ElementRef<typeof Stack>;\n\nconst Footer: React.FC<FooterProps> = React.forwardRef<FooterRef, FooterProps>(\n  ({ children, ...props }, forwardedRef) => {\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        ref={forwardedRef}\n      >\n        {children}\n      </Stack>\n    );\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","React","defaultOpen","open","onOpenChange","a11yTitle","a11yDescription","className","children","props","forwardedRef","jsxs","Dialog","VisuallyHidden","jsx","AnimatePresence","Fragment","Box","motion","Stack","clsx","Content","Close","size","variant","Button","Lucide","Body","Header","Footer","Modal"],"mappings":"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"}

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

@@ -1,17 +1,69 @@
 import * as Dialog from "@radix-ui/react-dialog";
-import { Box, Stack } from "@telegraph/layout";
+import { Lucide } from "@telegraph/icon";
+import { 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;
-    };
+    a11yTitle: string;
+    a11yDescription?: string;
 };
 declare const Root: React.ForwardRefExoticComponent<Omit<RootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const Content: React.FC<typeof Box>;
+declare const Content: React.ForwardRefExoticComponent<Omit<Dialog.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Close: React.ForwardRefExoticComponent<(Omit<Omit<Omit<Dialog.DialogCloseProps & React.RefAttributes<HTMLButtonElement>, "ref">, "color"> & Omit<import("@telegraph/helpers").AsProp<React.ElementType<any, keyof React.JSX.IntrinsicElements>> & Omit<any, "as"> & {
+    leadingIcon?: ({
+        icon: React.ForwardRefExoticComponent<Omit<Lucide.LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+        alt: string;
+        size?: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | undefined;
+        variant?: "primary" | "secondary" | undefined;
+        color?: "white" | "disabled" | "default" | "gray" | "accent" | "beige" | "blue" | "green" | "yellow" | "purple" | "red" | undefined;
+    } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<SVGSVGElement>) | undefined;
+    trailingIcon?: ({
+        icon: React.ForwardRefExoticComponent<Omit<Lucide.LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+        alt: string;
+        size?: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | undefined;
+        variant?: "primary" | "secondary" | undefined;
+        color?: "white" | "disabled" | "default" | "gray" | "accent" | "beige" | "blue" | "green" | "yellow" | "purple" | "red" | undefined;
+    } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<SVGSVGElement>) | undefined;
+    icon?: undefined;
+} & {
+    variant?: "ghost" | "solid" | "soft" | "outline" | undefined;
+    size?: "1" | "2" | "3" | undefined;
+    color?: "gray" | "accent" | "blue" | "green" | "yellow" | "purple" | "red" | undefined;
+    state?: "disabled" | "loading" | "default" | "error" | "success" | "warning" | undefined;
+    active?: boolean | undefined;
+} & {
+    ref?: (string | React.Ref<HTMLButtonElement>) | undefined;
+}, "ref">, "ref"> | Omit<Omit<Omit<Dialog.DialogCloseProps & React.RefAttributes<HTMLButtonElement>, "ref">, "color"> & Omit<import("@telegraph/helpers").AsProp<React.ElementType<any, keyof React.JSX.IntrinsicElements>> & Omit<any, "as"> & {
+    icon?: ({
+        icon: React.ForwardRefExoticComponent<Omit<Lucide.LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+        alt: string;
+        size?: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | undefined;
+        variant?: "primary" | "secondary" | undefined;
+        color?: "white" | "disabled" | "default" | "gray" | "accent" | "beige" | "blue" | "green" | "yellow" | "purple" | "red" | undefined;
+    } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<SVGSVGElement>) | undefined;
+    leadingIcon?: undefined;
+    trailingIcon?: undefined;
+} & {
+    variant?: "ghost" | "solid" | "soft" | "outline" | undefined;
+    size?: "1" | "2" | "3" | undefined;
+    color?: "gray" | "accent" | "blue" | "green" | "yellow" | "purple" | "red" | undefined;
+    state?: "disabled" | "loading" | "default" | "error" | "success" | "warning" | undefined;
+    active?: boolean | undefined;
+} & {
+    ref?: (string | React.Ref<HTMLButtonElement>) | undefined;
+}, "ref">, "ref">) & React.RefAttributes<HTMLButtonElement>>;
+type BodyProps = React.ComponentPropsWithoutRef<typeof Stack>;
+declare const Body: React.FC<BodyProps>;
+type HeaderProps = React.ComponentPropsWithoutRef<typeof Stack>;
+declare const Header: React.FC<HeaderProps>;
+type FooterProps = React.ComponentPropsWithoutRef<typeof Stack>;
+declare const Footer: React.FC<FooterProps>;
 declare const Modal: {
     Root: typeof Root;
     Content: typeof Content;
+    Close: typeof Close;
+    Body: typeof Body;
+    Header: typeof Header;
+    Footer: typeof Footer;
 };
 export { Modal };
 //# sourceMappingURL=Modal.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,wBAAwB,CAAC;AAGjD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAO,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,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAIJ,QAAA,MAAM,IAAI,+FAqET,CAAC;AAKF,QAAA,MAAM,OAAO,qJAQZ,CAAC;AASF,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4DAcV,CAAC;AAEF,KAAK,SAAS,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,KAAK,CAAC,CAAC;AAG9D,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAQ7B,CAAC;AAEF,KAAK,WAAW,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,KAAK,CAAC,CAAC;AAGhE,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAiBjC,CAAC;AAEF,KAAK,WAAW,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,KAAK,CAAC,CAAC;AAGhE,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAkBjC,CAAC;AAEF,QAAA,MAAM,KAAK;UACH,WAAW;aACR,cAAc;WAChB,YAAY;UACb,WAAW;YACT,aAAa;YACb,aAAa;CACtB,CAAC;AAWF,OAAO,EAAE,KAAK,EAAE,CAAC"}

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

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Modal as TelegraphModal } from "./Modal";
+declare const meta: Meta<typeof TelegraphModal.Root>;
+export default meta;
+type Story = StoryObj<typeof TelegraphModal.Root>;
+export declare const Modal: Story;
+//# sourceMappingURL=Modal.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.stories.d.ts","sourceRoot":"","sources":["../../../src/Modal/Modal.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKvD,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,SAAS,CAAC;AAElD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAAC,IAAI,CAG1C,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,CAAC;AAElD,eAAO,MAAM,KAAK,EAAE,KA6BnB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telegraph/modal",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/modal",
   "author": "@knocklabs",
   "license": "MIT",
@@ -35,7 +35,10 @@
   },
   "dependencies": {
     "@radix-ui/react-dialog": "^1.0.5",
-    "@telegraph/layout": "^0.0.8",
+    "@radix-ui/react-visually-hidden": "^1.0.3",
+    "@telegraph/button": "^0.0.16",
+    "@telegraph/icon": "^0.0.9",
+    "@telegraph/layout": "^0.0.9",
     "clsx": "^2.1.0",
     "framer-motion": "^11.1.9"
   },
@@ -43,9 +46,9 @@
     "@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/postcss-config": "^0.0.14",
     "@telegraph/tailwind-config": "^0.0.11",
-    "@telegraph/vite-config": "^0.0.8",
+    "@telegraph/vite-config": "^0.0.9",
     "@telegraph/vitest-config": "^0.0.6",
     "@types/react": "^18.2.48",
     "eslint": "^8.56.0",