@telegraph/modal 0.0.40 → 0.0.42
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 +14 -0
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.mjs +75 -68
- package/dist/esm/index.mjs.map +1 -1
- package/dist/types/Modal/Modal.d.ts +1 -1
- package/dist/types/Modal/Modal.d.ts.map +1 -1
- package/package.json +7 -10
- package/dist/css/default.css +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @telegraph/modal
|
|
2
2
|
|
|
3
|
+
## 0.0.42
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [[`2057be9`](https://github.com/knocklabs/telegraph/commit/2057be911a46aa77bb252e62cd86ce737b20b309)]:
|
|
8
|
+
- @telegraph/icon@0.0.30
|
|
9
|
+
- @telegraph/button@0.0.48
|
|
10
|
+
|
|
11
|
+
## 0.0.41
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- [#232](https://github.com/knocklabs/telegraph/pull/232) [`1248714`](https://github.com/knocklabs/telegraph/commit/1248714f5af3a1315bc8ae79fa5517cb5cf8fad2) Thanks [@kylemcd](https://github.com/kylemcd)! - update modal background + style engine migration
|
|
16
|
+
|
|
3
17
|
## 0.0.40
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),y=require("@radix-ui/react-dialog"),p=require("@radix-ui/react-visually-hidden"),j=require("@telegraph/button"),f=require("@telegraph/icon"),r=require("@telegraph/layout"),s=require("framer-motion"),m=require("react");function d(e){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const c=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(i,o,c.get?c:{enumerable:!0,get:()=>e[o]})}}return i.default=e,Object.freeze(i)}const n=d(y),b=d(p),g=({defaultOpen:e,open:i,onOpenChange:o,a11yTitle:c,a11yDescription:l,children:x,...a})=>t.jsxs(n.Root,{open:i,onOpenChange:o,defaultOpen:e,children:[t.jsxs(b.Root,{children:[t.jsx(n.Title,{children:c}),l&&t.jsx(n.Description,{children:l})]}),t.jsx(s.AnimatePresence,{children:i&&t.jsx(t.Fragment,{children:t.jsxs(n.Overlay,{children:[t.jsx(r.Box,{as:s.motion.div,onClick:()=>o==null?void 0:o(!1),initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3,bounce:0,type:"spring"},bg:"alpha-black-6",zIndex:"overlay",style:{position:"fixed",inset:"0px"}}),t.jsx(r.Stack,{zIndex:"modal",w:"full",style:{position:"fixed",top:0,left:"50%",maxHeight:"calc(100vh - var(--tgph-spacing-32))",maxWidth:"calc(100vw - var(--tgph-spacing-8))"},children:t.jsx(r.Stack,{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??"160",w:a.w??"full",bg:"surface-1",border:"px",rounded:"4",shadow:"1",...a,children:x})})]})})})]}),h=m.forwardRef(({children:e,...i},o)=>t.jsx(n.Content,{ref:o,...i,asChild:!0,children:t.jsx(r.Stack,{direction:"column",h:"full",...i,children:e})})),v=({size:e="1",variant:i="ghost",...o})=>t.jsx(n.Close,{asChild:!0,children:t.jsx(j.Button,{icon:{icon:f.Lucide.X,alt:"Close Modal"},variant:i,size:e,...o})}),w=({children:e,...i})=>t.jsx(r.Stack,{direction:"column",px:"6",py:"4",...i,children:e}),S=({children:e,...i})=>t.jsx(r.Stack,{direction:"row",justify:"space-between",align:"center",px:"6",py:"4",borderBottom:"px",...i,children:e}),k=({children:e,...i})=>t.jsx(r.Stack,{direction:"row",align:"center",justify:"flex-end",gap:"2",px:"6",py:"4",borderTop:"px",...i,children:e}),u={};Object.assign(u,{Root:g,Content:h,Close:v,Body:w,Header:S,Footer:k});exports.Modal=u;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -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
|
|
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 { 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 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={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 0.3, bounce: 0, type: \"spring\" }}\n bg=\"alpha-black-6\"\n zIndex=\"overlay\"\n style={{\n position: \"fixed\",\n inset: \"0px\",\n }}\n />\n <Stack\n zIndex=\"modal\"\n w=\"full\"\n style={{\n position: \"fixed\",\n top: 0,\n left: \"50%\",\n maxHeight: \"calc(100vh - var(--tgph-spacing-32))\",\n maxWidth: \"calc(100vw - var(--tgph-spacing-8))\",\n }}\n >\n <Stack\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 ?? \"160\"}\n w={props.w ?? \"full\"}\n bg=\"surface-1\"\n border=\"px\"\n rounded=\"4\"\n shadow=\"1\"\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> &\n TgphComponentProps<typeof Stack>;\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\" h=\"full\" {...props}>\n {children}\n </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","children","props","jsxs","Dialog","VisuallyHidden","jsx","AnimatePresence","Box","motion","Stack","Content","React","forwardedRef","Close","size","variant","Button","Lucide","Body","Header","Footer","Modal"],"mappings":"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"}
|
package/dist/esm/index.mjs
CHANGED
|
@@ -1,57 +1,63 @@
|
|
|
1
|
-
import { jsx as t, jsxs as
|
|
1
|
+
import { jsx as t, jsxs as a, Fragment as p } from "react/jsx-runtime";
|
|
2
2
|
import * as e from "@radix-ui/react-dialog";
|
|
3
|
-
import * as
|
|
4
|
-
import { Button as
|
|
5
|
-
import { Lucide as
|
|
6
|
-
import { Stack as
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
className: p,
|
|
17
|
-
children: u,
|
|
3
|
+
import * as u from "@radix-ui/react-visually-hidden";
|
|
4
|
+
import { Button as x } from "@telegraph/button";
|
|
5
|
+
import { Lucide as f } from "@telegraph/icon";
|
|
6
|
+
import { Stack as n, Box as y } from "@telegraph/layout";
|
|
7
|
+
import { AnimatePresence as h, motion as d } from "framer-motion";
|
|
8
|
+
import g from "react";
|
|
9
|
+
const b = ({
|
|
10
|
+
defaultOpen: o,
|
|
11
|
+
open: i,
|
|
12
|
+
onOpenChange: r,
|
|
13
|
+
a11yTitle: s,
|
|
14
|
+
a11yDescription: l,
|
|
15
|
+
children: m,
|
|
18
16
|
...c
|
|
19
|
-
}) => /* @__PURE__ */
|
|
17
|
+
}) => /* @__PURE__ */ a(
|
|
20
18
|
e.Root,
|
|
21
19
|
{
|
|
22
|
-
open:
|
|
23
|
-
onOpenChange:
|
|
24
|
-
defaultOpen:
|
|
20
|
+
open: i,
|
|
21
|
+
onOpenChange: r,
|
|
22
|
+
defaultOpen: o,
|
|
25
23
|
children: [
|
|
26
|
-
/* @__PURE__ */
|
|
27
|
-
/* @__PURE__ */ t(e.Title, { children:
|
|
28
|
-
|
|
24
|
+
/* @__PURE__ */ a(u.Root, { children: [
|
|
25
|
+
/* @__PURE__ */ t(e.Title, { children: s }),
|
|
26
|
+
l && /* @__PURE__ */ t(e.Description, { children: l })
|
|
29
27
|
] }),
|
|
30
|
-
/* @__PURE__ */ t(
|
|
28
|
+
/* @__PURE__ */ t(h, { children: i && /* @__PURE__ */ t(p, { children: /* @__PURE__ */ a(e.Overlay, { children: [
|
|
31
29
|
/* @__PURE__ */ t(
|
|
32
|
-
|
|
30
|
+
y,
|
|
33
31
|
{
|
|
34
32
|
as: d.div,
|
|
35
|
-
onClick: () =>
|
|
36
|
-
initial: {
|
|
37
|
-
animate: {
|
|
38
|
-
exit: {
|
|
33
|
+
onClick: () => r == null ? void 0 : r(!1),
|
|
34
|
+
initial: { opacity: 0 },
|
|
35
|
+
animate: { opacity: 1 },
|
|
36
|
+
exit: { opacity: 0 },
|
|
39
37
|
transition: { duration: 0.3, bounce: 0, type: "spring" },
|
|
40
|
-
|
|
38
|
+
bg: "alpha-black-6",
|
|
39
|
+
zIndex: "overlay",
|
|
40
|
+
style: {
|
|
41
|
+
position: "fixed",
|
|
42
|
+
inset: "0px"
|
|
43
|
+
}
|
|
41
44
|
}
|
|
42
45
|
),
|
|
43
46
|
/* @__PURE__ */ t(
|
|
44
|
-
|
|
47
|
+
n,
|
|
45
48
|
{
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
49
|
+
zIndex: "modal",
|
|
50
|
+
w: "full",
|
|
51
|
+
style: {
|
|
52
|
+
position: "fixed",
|
|
53
|
+
top: 0,
|
|
54
|
+
left: "50%",
|
|
55
|
+
maxHeight: "calc(100vh - var(--tgph-spacing-32))",
|
|
56
|
+
maxWidth: "calc(100vw - var(--tgph-spacing-8))"
|
|
57
|
+
},
|
|
51
58
|
children: /* @__PURE__ */ t(
|
|
52
|
-
|
|
59
|
+
n,
|
|
53
60
|
{
|
|
54
|
-
className: s("shadow-1", p),
|
|
55
61
|
direction: "column",
|
|
56
62
|
as: d.div,
|
|
57
63
|
my: "16",
|
|
@@ -64,8 +70,9 @@ const v = ({
|
|
|
64
70
|
bg: "surface-1",
|
|
65
71
|
border: "px",
|
|
66
72
|
rounded: "4",
|
|
73
|
+
shadow: "1",
|
|
67
74
|
...c,
|
|
68
|
-
children:
|
|
75
|
+
children: m
|
|
69
76
|
}
|
|
70
77
|
)
|
|
71
78
|
}
|
|
@@ -73,25 +80,25 @@ const v = ({
|
|
|
73
80
|
] }) }) })
|
|
74
81
|
]
|
|
75
82
|
}
|
|
76
|
-
),
|
|
77
|
-
({ children:
|
|
78
|
-
),
|
|
79
|
-
size:
|
|
80
|
-
variant:
|
|
81
|
-
...
|
|
83
|
+
), w = g.forwardRef(
|
|
84
|
+
({ children: o, ...i }, r) => /* @__PURE__ */ t(e.Content, { ref: r, ...i, asChild: !0, children: /* @__PURE__ */ t(n, { direction: "column", h: "full", ...i, children: o }) })
|
|
85
|
+
), v = ({
|
|
86
|
+
size: o = "1",
|
|
87
|
+
variant: i = "ghost",
|
|
88
|
+
...r
|
|
82
89
|
}) => /* @__PURE__ */ t(e.Close, { asChild: !0, children: /* @__PURE__ */ t(
|
|
83
|
-
|
|
90
|
+
x,
|
|
84
91
|
{
|
|
85
|
-
icon: { icon:
|
|
86
|
-
variant:
|
|
87
|
-
size:
|
|
88
|
-
...
|
|
92
|
+
icon: { icon: f.X, alt: "Close Modal" },
|
|
93
|
+
variant: i,
|
|
94
|
+
size: o,
|
|
95
|
+
...r
|
|
89
96
|
}
|
|
90
|
-
) }),
|
|
91
|
-
children:
|
|
92
|
-
...
|
|
97
|
+
) }), j = ({ children: o, ...i }) => /* @__PURE__ */ t(n, { direction: "column", px: "6", py: "4", ...i, children: o }), R = ({
|
|
98
|
+
children: o,
|
|
99
|
+
...i
|
|
93
100
|
}) => /* @__PURE__ */ t(
|
|
94
|
-
|
|
101
|
+
n,
|
|
95
102
|
{
|
|
96
103
|
direction: "row",
|
|
97
104
|
justify: "space-between",
|
|
@@ -99,14 +106,14 @@ const v = ({
|
|
|
99
106
|
px: "6",
|
|
100
107
|
py: "4",
|
|
101
108
|
borderBottom: "px",
|
|
102
|
-
...
|
|
103
|
-
children:
|
|
109
|
+
...i,
|
|
110
|
+
children: o
|
|
104
111
|
}
|
|
105
112
|
), B = ({
|
|
106
|
-
children:
|
|
107
|
-
...
|
|
113
|
+
children: o,
|
|
114
|
+
...i
|
|
108
115
|
}) => /* @__PURE__ */ t(
|
|
109
|
-
|
|
116
|
+
n,
|
|
110
117
|
{
|
|
111
118
|
direction: "row",
|
|
112
119
|
align: "center",
|
|
@@ -115,19 +122,19 @@ const v = ({
|
|
|
115
122
|
px: "6",
|
|
116
123
|
py: "4",
|
|
117
124
|
borderTop: "px",
|
|
118
|
-
...
|
|
119
|
-
children:
|
|
125
|
+
...i,
|
|
126
|
+
children: o
|
|
120
127
|
}
|
|
121
|
-
),
|
|
122
|
-
Object.assign(
|
|
123
|
-
Root:
|
|
124
|
-
Content:
|
|
125
|
-
Close:
|
|
126
|
-
Body:
|
|
128
|
+
), k = {};
|
|
129
|
+
Object.assign(k, {
|
|
130
|
+
Root: b,
|
|
131
|
+
Content: w,
|
|
132
|
+
Close: v,
|
|
133
|
+
Body: j,
|
|
127
134
|
Header: R,
|
|
128
135
|
Footer: B
|
|
129
136
|
});
|
|
130
137
|
export {
|
|
131
|
-
|
|
138
|
+
k as Modal
|
|
132
139
|
};
|
|
133
140
|
//# sourceMappingURL=index.mjs.map
|
package/dist/esm/index.mjs.map
CHANGED
|
@@ -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
|
|
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 { 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 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={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 0.3, bounce: 0, type: \"spring\" }}\n bg=\"alpha-black-6\"\n zIndex=\"overlay\"\n style={{\n position: \"fixed\",\n inset: \"0px\",\n }}\n />\n <Stack\n zIndex=\"modal\"\n w=\"full\"\n style={{\n position: \"fixed\",\n top: 0,\n left: \"50%\",\n maxHeight: \"calc(100vh - var(--tgph-spacing-32))\",\n maxWidth: \"calc(100vw - var(--tgph-spacing-8))\",\n }}\n >\n <Stack\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 ?? \"160\"}\n w={props.w ?? \"full\"}\n bg=\"surface-1\"\n border=\"px\"\n rounded=\"4\"\n shadow=\"1\"\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> &\n TgphComponentProps<typeof Stack>;\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\" h=\"full\" {...props}>\n {children}\n </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","children","props","jsxs","Dialog","VisuallyHidden","jsx","AnimatePresence","Box","motion","Stack","Content","React","forwardedRef","Close","size","variant","Button","Lucide","Body","Header","Footer","Modal"],"mappings":"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"}
|
|
@@ -7,7 +7,7 @@ type RootProps = Omit<React.ComponentPropsWithoutRef<typeof Dialog.Root>, "modal
|
|
|
7
7
|
a11yTitle: string;
|
|
8
8
|
a11yDescription?: string;
|
|
9
9
|
};
|
|
10
|
-
declare const Root: ({ defaultOpen, open, onOpenChange, a11yTitle, a11yDescription,
|
|
10
|
+
declare const Root: ({ defaultOpen, open, onOpenChange, a11yTitle, a11yDescription, children, ...props }: RootProps) => import("react/jsx-runtime").JSX.Element;
|
|
11
11
|
type ContentProps = React.ComponentPropsWithoutRef<typeof Dialog.Content> & TgphComponentProps<typeof Stack>;
|
|
12
12
|
declare const Content: React.ForwardRefExoticComponent<Omit<ContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
13
13
|
type CloseProps<T extends TgphElement> = TgphComponentProps<typeof Button<T>> & Omit<React.ComponentPropsWithoutRef<typeof Dialog.Close>, "color">;
|
|
@@ -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;
|
|
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;AAE/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,wFAQP,SAAS,4CAmEX,CAAC;AAEF,KAAK,YAAY,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,MAAM,CAAC,OAAO,CAAC,GACvE,kBAAkB,CAAC,OAAO,KAAK,CAAC,CAAC;AAGnC,QAAA,MAAM,OAAO,kGAUZ,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,GAAI,CAAC,SAAS,WAAW,+BAIjC,UAAU,CAAC,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,GAAI,CAAC,SAAS,WAAW,0BAA0B,SAAS,CAAC,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,GAAI,CAAC,SAAS,WAAW,0BAGlC,WAAW,CAAC,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,GAAI,CAAC,SAAS,WAAW,0BAGlC,WAAW,CAAC,CAAC,CAAC,4CAehB,CAAC;AAEF,QAAA,MAAM,KAAK,EAAS;IAClB,IAAI,EAAE,OAAO,IAAI,CAAC;IAClB,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,KAAK,EAAE,OAAO,KAAK,CAAC;IACpB,IAAI,EAAE,OAAO,IAAI,CAAC;IAClB,MAAM,EAAE,OAAO,MAAM,CAAC;IACtB,MAAM,EAAE,OAAO,MAAM,CAAC;CACvB,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.
|
|
3
|
+
"version": "0.0.42",
|
|
4
4
|
"repository": "https://github.com/knocklabs/telegraph/tree/main/packages/modal",
|
|
5
5
|
"author": "@knocklabs",
|
|
6
6
|
"license": "MIT",
|
|
@@ -11,10 +11,8 @@
|
|
|
11
11
|
".": {
|
|
12
12
|
"import": "./dist/esm/index.mjs",
|
|
13
13
|
"require": "./dist/cjs/index.js",
|
|
14
|
-
"types": "./dist/types/index.d.ts"
|
|
15
|
-
|
|
16
|
-
},
|
|
17
|
-
"./default.css": "./dist/css/default.css"
|
|
14
|
+
"types": "./dist/types/index.d.ts"
|
|
15
|
+
}
|
|
18
16
|
},
|
|
19
17
|
"files": [
|
|
20
18
|
"dist",
|
|
@@ -33,11 +31,11 @@
|
|
|
33
31
|
"dependencies": {
|
|
34
32
|
"@radix-ui/react-dialog": "^1.0.5",
|
|
35
33
|
"@radix-ui/react-visually-hidden": "^1.1.0",
|
|
36
|
-
"@telegraph/button": "^0.0.
|
|
34
|
+
"@telegraph/button": "^0.0.48",
|
|
37
35
|
"@telegraph/helpers": "^0.0.6",
|
|
38
|
-
"@telegraph/icon": "^0.0.
|
|
36
|
+
"@telegraph/icon": "^0.0.30",
|
|
39
37
|
"@telegraph/layout": "^0.0.28",
|
|
40
|
-
"
|
|
38
|
+
"@telegraph/style-engine": "^0.0.4",
|
|
41
39
|
"framer-motion": "^11.1.9"
|
|
42
40
|
},
|
|
43
41
|
"devDependencies": {
|
|
@@ -45,13 +43,12 @@
|
|
|
45
43
|
"@knocklabs/prettier-config": "^0.0.1",
|
|
46
44
|
"@knocklabs/typescript-config": "^0.0.2",
|
|
47
45
|
"@telegraph/postcss-config": "^0.0.20",
|
|
48
|
-
"@telegraph/tailwind-config": "^0.0.11",
|
|
49
46
|
"@telegraph/vite-config": "^0.0.11",
|
|
50
47
|
"@types/react": "^18.2.48",
|
|
51
48
|
"eslint": "^8.56.0",
|
|
52
49
|
"react": "^18.2.0",
|
|
53
50
|
"react-dom": "^18.3.1",
|
|
54
|
-
"typescript": "^5.
|
|
51
|
+
"typescript": "^5.5.4",
|
|
55
52
|
"vite": "^5.3.5"
|
|
56
53
|
},
|
|
57
54
|
"peerDependencies": {
|
package/dist/css/default.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.tgph :is(.fixed){position:fixed}.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(.w-full){width:var(--tgph-spacing-full)}.tgph :is(.max-w-\[calc\(100vw-var\(--tgph-spacing-8\)\)\]){max-width:calc(100vw - var(--tgph-spacing-8))}.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}
|