@telegraph/modal 0.0.20 → 0.0.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # @telegraph/modal
2
2
 
3
+ ## 0.0.22
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [[`29d94d5`](https://github.com/knocklabs/telegraph/commit/29d94d5dba8a085363db70f8979a6687fc2fd33d)]:
8
+ - @telegraph/layout@0.0.19
9
+ - @telegraph/icon@0.0.20
10
+ - @telegraph/button@0.0.31
11
+
12
+ ## 0.0.21
13
+
14
+ ### Patch Changes
15
+
16
+ - [#162](https://github.com/knocklabs/telegraph/pull/162) [`5baffd9`](https://github.com/knocklabs/telegraph/commit/5baffd925a0abcd5c1cc0cbe75ec865271c30375) Thanks [@kylemcd](https://github.com/kylemcd)! - fixes issues stemming from the change to the new style engine
17
+
18
+ - Updated dependencies [[`5baffd9`](https://github.com/knocklabs/telegraph/commit/5baffd925a0abcd5c1cc0cbe75ec865271c30375), [`1c2ac3b`](https://github.com/knocklabs/telegraph/commit/1c2ac3bed11f2811423587b5189db286359df062)]:
19
+ - @telegraph/layout@0.0.18
20
+ - @telegraph/button@0.0.30
21
+ - @telegraph/icon@0.0.19
22
+
3
23
  ## 0.0.20
4
24
 
5
25
  ### Patch Changes
package/dist/cjs/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),y=require("@radix-ui/react-dialog"),j=require("@radix-ui/react-visually-hidden"),b=require("@telegraph/button"),f=require("@telegraph/icon"),o=require("@telegraph/layout"),u=require("clsx"),s=require("framer-motion"),g=require("react");function d(t){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const i in t)if(i!=="default"){const n=Object.getOwnPropertyDescriptor(t,i);Object.defineProperty(r,i,n.get?n:{enumerable:!0,get:()=>t[i]})}}return r.default=t,Object.freeze(r)}const c=d(y),h=d(j),k=({defaultOpen:t,open:r,onOpenChange:i,a11yTitle:n,a11yDescription:l,className:p,children:m,...a})=>e.jsxs(c.Root,{open:r,onOpenChange:i,defaultOpen:t,children:[e.jsxs(h.Root,{children:[e.jsx(c.Title,{children:n}),l&&e.jsx(c.Description,{children:l})]}),e.jsx(s.AnimatePresence,{children:r&&e.jsx(e.Fragment,{children:e.jsxs(c.Overlay,{children:[e.jsx(o.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"}),e.jsx(o.Stack,{className:u("fixed z-modal top-0 left-1/2 -translate-x-1/2","w-full","max-h-[calc(100vh-var(--tgph-spacing-32))] max-w-[calc(100vw-var(--tgph-spacing-8))]"),children:e.jsx(o.Stack,{className:u("shadow-1",p),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:m})})]})})})]}),w=g.forwardRef(({children:t,...r},i)=>e.jsx(c.Content,{ref:i,...r,asChild:!0,children:e.jsx(o.Stack,{direction:"column",children:t})})),v=({size:t="1",variant:r="ghost",...i})=>e.jsx(c.Close,{asChild:!0,children:e.jsx(b.Button,{icon:{icon:f.Lucide.X,alt:"Close Modal"},variant:r,size:t,...i})}),S=({children:t,...r})=>e.jsx(o.Stack,{direction:"column",px:"6",py:"4",...r,children:t}),q=({children:t,...r})=>e.jsx(o.Stack,{direction:"row",justify:"space-between",align:"center",px:"6",py:"4",borderBottom:!0,...r,children:t}),M=({children:t,...r})=>e.jsx(o.Stack,{direction:"row",align:"center",justify:"end",gap:"2",px:"6",py:"4",borderTop:!0,...r,children:t}),x={};Object.assign(x,{Root:k,Content:w,Close:v,Body:S,Header:q,Footer:M});exports.Modal=x;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),y=require("@radix-ui/react-dialog"),j=require("@radix-ui/react-visually-hidden"),b=require("@telegraph/button"),f=require("@telegraph/icon"),o=require("@telegraph/layout"),u=require("clsx"),s=require("framer-motion"),g=require("react");function d(t){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const i in t)if(i!=="default"){const n=Object.getOwnPropertyDescriptor(t,i);Object.defineProperty(r,i,n.get?n:{enumerable:!0,get:()=>t[i]})}}return r.default=t,Object.freeze(r)}const c=d(y),h=d(j),k=({defaultOpen:t,open:r,onOpenChange:i,a11yTitle:n,a11yDescription:l,className:p,children:m,...a})=>e.jsxs(c.Root,{open:r,onOpenChange:i,defaultOpen:t,children:[e.jsxs(h.Root,{children:[e.jsx(c.Title,{children:n}),l&&e.jsx(c.Description,{children:l})]}),e.jsx(s.AnimatePresence,{children:r&&e.jsx(e.Fragment,{children:e.jsxs(c.Overlay,{children:[e.jsx(o.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"}),e.jsx(o.Stack,{className:u("fixed z-modal top-0 left-1/2 -translate-x-1/2","w-full","max-h-[calc(100vh-var(--tgph-spacing-32))] max-w-[calc(100vw-var(--tgph-spacing-8))]"),children:e.jsx(o.Stack,{className:u("shadow-1",p),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:m})})]})})})]}),w=g.forwardRef(({children:t,...r},i)=>e.jsx(c.Content,{ref:i,...r,asChild:!0,children:e.jsx(o.Stack,{direction:"column",children:t})})),v=({size:t="1",variant:r="ghost",...i})=>e.jsx(c.Close,{asChild:!0,children:e.jsx(b.Button,{icon:{icon:f.Lucide.X,alt:"Close Modal"},variant:r,size:t,...i})}),S=({children:t,...r})=>e.jsx(o.Stack,{direction:"column",px:"6",py:"4",...r,children:t}),q=({children:t,...r})=>e.jsx(o.Stack,{direction:"row",justify:"space-between",align:"center",px:"6",py:"4",borderBottom:"px",...r,children:t}),M=({children:t,...r})=>e.jsx(o.Stack,{direction:"row",align:"center",justify:"flex-end",gap:"2",px:"6",py:"4",borderTop:"px",...r,children:t}),x={};Object.assign(x,{Root:k,Content:w,Close:v,Body:S,Header:q,Footer:M});exports.Modal=x;
2
2
  //# sourceMappingURL=index.js.map
@@ -1 +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>\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 \"w-full\",\n \"max-h-[calc(100vh-var(--tgph-spacing-32))] max-w-[calc(100vw-var(--tgph-spacing-8))]\",\n )}\n >\n <Stack\n className={clsx(\"shadow-1\", className)}\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 </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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"}
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>\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 \"w-full\",\n \"max-h-[calc(100vh-var(--tgph-spacing-32))] max-w-[calc(100vw-var(--tgph-spacing-8))]\",\n )}\n >\n <Stack\n className={clsx(\"shadow-1\", className)}\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 </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>;\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>;\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=\"px\"\n {...props}\n >\n {children}\n </Stack>\n );\n};\n\ntype FooterProps<T extends TgphElement> = PolymorphicProps<T> &\n TgphComponentProps<typeof Stack>;\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=\"flex-end\"\n gap=\"2\"\n px=\"6\"\n py=\"4\"\n borderTop=\"px\"\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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"}
@@ -98,7 +98,7 @@ const v = ({
98
98
  align: "center",
99
99
  px: "6",
100
100
  py: "4",
101
- borderBottom: !0,
101
+ borderBottom: "px",
102
102
  ...r,
103
103
  children: i
104
104
  }
@@ -110,11 +110,11 @@ const v = ({
110
110
  {
111
111
  direction: "row",
112
112
  align: "center",
113
- justify: "end",
113
+ justify: "flex-end",
114
114
  gap: "2",
115
115
  px: "6",
116
116
  py: "4",
117
- borderTop: !0,
117
+ borderTop: "px",
118
118
  ...r,
119
119
  children: i
120
120
  }
@@ -1 +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>\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 \"w-full\",\n \"max-h-[calc(100vh-var(--tgph-spacing-32))] max-w-[calc(100vw-var(--tgph-spacing-8))]\",\n )}\n >\n <Stack\n className={clsx(\"shadow-1\", className)}\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 </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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"}
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>\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 \"w-full\",\n \"max-h-[calc(100vh-var(--tgph-spacing-32))] max-w-[calc(100vw-var(--tgph-spacing-8))]\",\n )}\n >\n <Stack\n className={clsx(\"shadow-1\", className)}\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 </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>;\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>;\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=\"px\"\n {...props}\n >\n {children}\n </Stack>\n );\n};\n\ntype FooterProps<T extends TgphElement> = PolymorphicProps<T> &\n TgphComponentProps<typeof Stack>;\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=\"flex-end\"\n gap=\"2\"\n px=\"6\"\n py=\"4\"\n borderTop=\"px\"\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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"}
@@ -11,11 +11,11 @@ declare const Root: ({ defaultOpen, open, onOpenChange, a11yTitle, a11yDescripti
11
11
  declare const Content: React.ForwardRefExoticComponent<Omit<Dialog.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
12
12
  type CloseProps<T extends TgphElement> = TgphComponentProps<typeof Button<T>> & Omit<React.ComponentPropsWithoutRef<typeof Dialog.Close>, "color">;
13
13
  declare const Close: <T extends TgphElement>({ size, variant, ...props }: CloseProps<T>) => import("react/jsx-runtime").JSX.Element;
14
- type BodyProps<T extends TgphElement> = PolymorphicProps<T> & TgphComponentProps<typeof Stack<T>>;
14
+ type BodyProps<T extends TgphElement> = PolymorphicProps<T> & TgphComponentProps<typeof Stack>;
15
15
  declare const Body: <T extends TgphElement>({ children, ...props }: BodyProps<T>) => import("react/jsx-runtime").JSX.Element;
16
- type HeaderProps<T extends TgphElement> = PolymorphicProps<T> & TgphComponentProps<typeof Stack<T>>;
16
+ type HeaderProps<T extends TgphElement> = PolymorphicProps<T> & TgphComponentProps<typeof Stack>;
17
17
  declare const Header: <T extends TgphElement>({ children, ...props }: HeaderProps<T>) => import("react/jsx-runtime").JSX.Element;
18
- type FooterProps<T extends TgphElement> = PolymorphicProps<T> & TgphComponentProps<typeof Stack<T>>;
18
+ type FooterProps<T extends TgphElement> = PolymorphicProps<T> & TgphComponentProps<typeof Stack>;
19
19
  declare const Footer: <T extends TgphElement>({ children, ...props }: FooterProps<T>) => import("react/jsx-runtime").JSX.Element;
20
20
  declare const Modal: {
21
21
  Root: typeof Root;
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,wBAAwB,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,KAAK,EACV,gBAAgB,EAChB,kBAAkB,EAClB,WAAW,EACZ,MAAM,oBAAoB,CAAC;AAE5B,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,kBAAkB,CAAC,OAAO,KAAK,CAAC,GAAG;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEJ,QAAA,MAAM,IAAI,mGASP,SAAS,4CA0DX,CAAC;AAKF,QAAA,MAAM,OAAO,qJAQZ,CAAC;AAEF,KAAK,UAAU,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC,GAC3E,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,MAAM,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;AACrE,QAAA,MAAM,KAAK,uDAIR,WAAW,CAAC,CAAC,4CAWf,CAAC;AAEF,KAAK,SAAS,CAAC,CAAC,SAAS,WAAW,IAAI,gBAAgB,CAAC,CAAC,CAAC,GACzD,kBAAkB,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;AAEtC,QAAA,MAAM,IAAI,kDAAmD,UAAU,CAAC,CAAC,4CAMxE,CAAC;AAEF,KAAK,WAAW,CAAC,CAAC,SAAS,WAAW,IAAI,gBAAgB,CAAC,CAAC,CAAC,GAC3D,kBAAkB,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;AAEtC,QAAA,MAAM,MAAM,kDAGT,YAAY,CAAC,CAAC,4CAchB,CAAC;AAEF,KAAK,WAAW,CAAC,CAAC,SAAS,WAAW,IAAI,gBAAgB,CAAC,CAAC,CAAC,GAC3D,kBAAkB,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;AAEtC,QAAA,MAAM,MAAM,kDAGT,YAAY,CAAC,CAAC,4CAehB,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"}
1
+ {"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,wBAAwB,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,KAAK,EACV,gBAAgB,EAChB,kBAAkB,EAClB,WAAW,EACZ,MAAM,oBAAoB,CAAC;AAE5B,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,kBAAkB,CAAC,OAAO,KAAK,CAAC,GAAG;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEJ,QAAA,MAAM,IAAI,mGASP,SAAS,4CA0DX,CAAC;AAKF,QAAA,MAAM,OAAO,qJAQZ,CAAC;AAEF,KAAK,UAAU,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC,GAC3E,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,MAAM,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;AACrE,QAAA,MAAM,KAAK,uDAIR,WAAW,CAAC,CAAC,4CAWf,CAAC;AAEF,KAAK,SAAS,CAAC,CAAC,SAAS,WAAW,IAAI,gBAAgB,CAAC,CAAC,CAAC,GACzD,kBAAkB,CAAC,OAAO,KAAK,CAAC,CAAC;AAEnC,QAAA,MAAM,IAAI,kDAAmD,UAAU,CAAC,CAAC,4CAMxE,CAAC;AAEF,KAAK,WAAW,CAAC,CAAC,SAAS,WAAW,IAAI,gBAAgB,CAAC,CAAC,CAAC,GAC3D,kBAAkB,CAAC,OAAO,KAAK,CAAC,CAAC;AAEnC,QAAA,MAAM,MAAM,kDAGT,YAAY,CAAC,CAAC,4CAchB,CAAC;AAEF,KAAK,WAAW,CAAC,CAAC,SAAS,WAAW,IAAI,gBAAgB,CAAC,CAAC,CAAC,GAC3D,kBAAkB,CAAC,OAAO,KAAK,CAAC,CAAC;AAEnC,QAAA,MAAM,MAAM,kDAGT,YAAY,CAAC,CAAC,4CAehB,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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@telegraph/modal",
3
- "version": "0.0.20",
3
+ "version": "0.0.22",
4
4
  "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/modal",
5
5
  "author": "@knocklabs",
6
6
  "license": "MIT",
@@ -36,9 +36,9 @@
36
36
  "dependencies": {
37
37
  "@radix-ui/react-dialog": "^1.0.5",
38
38
  "@radix-ui/react-visually-hidden": "^1.1.0",
39
- "@telegraph/button": "^0.0.29",
40
- "@telegraph/icon": "^0.0.18",
41
- "@telegraph/layout": "^0.0.17",
39
+ "@telegraph/button": "^0.0.31",
40
+ "@telegraph/icon": "^0.0.20",
41
+ "@telegraph/layout": "^0.0.19",
42
42
  "clsx": "^2.1.0",
43
43
  "framer-motion": "^11.1.9"
44
44
  },
@@ -48,7 +48,7 @@
48
48
  "@knocklabs/typescript-config": "^0.0.2",
49
49
  "@telegraph/postcss-config": "^0.0.17",
50
50
  "@telegraph/tailwind-config": "^0.0.11",
51
- "@telegraph/vite-config": "^0.0.9",
51
+ "@telegraph/vite-config": "^0.0.10",
52
52
  "@telegraph/vitest-config": "^0.0.6",
53
53
  "@types/react": "^18.2.48",
54
54
  "eslint": "^8.56.0",