@shipfox/react-ui 0.5.0 → 0.6.0
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/.storybook/preview.tsx +11 -0
- package/.turbo/turbo-build.log +16 -3
- package/.turbo/turbo-check.log +2 -2
- package/.turbo/turbo-type.log +1 -1
- package/CHANGELOG.md +8 -0
- package/README.md +16 -0
- package/dist/build-css-entry.js +5 -0
- package/dist/build-css-entry.js.map +1 -0
- package/dist/components/code-block/code-block-footer.d.ts.map +1 -1
- package/dist/components/code-block/code-block-footer.js +29 -15
- package/dist/components/code-block/code-block-footer.js.map +1 -1
- package/dist/components/dynamic-item/dynamic-item.stories.js +1 -1
- package/dist/components/dynamic-item/dynamic-item.stories.js.map +1 -1
- package/dist/components/icon/icon.d.ts +1 -0
- package/dist/components/icon/icon.d.ts.map +1 -1
- package/dist/components/icon/icon.js +3 -2
- package/dist/components/icon/icon.js.map +1 -1
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +1 -0
- package/dist/components/index.js.map +1 -1
- package/dist/components/modal/index.d.ts +3 -0
- package/dist/components/modal/index.d.ts.map +1 -0
- package/dist/components/modal/index.js +3 -0
- package/dist/components/modal/index.js.map +1 -0
- package/dist/components/modal/modal.d.ts +37 -0
- package/dist/components/modal/modal.d.ts.map +1 -0
- package/dist/components/modal/modal.js +262 -0
- package/dist/components/modal/modal.js.map +1 -0
- package/dist/components/modal/modal.stories.js +497 -0
- package/dist/components/modal/modal.stories.js.map +1 -0
- package/dist/components/moving-border/index.d.ts +2 -0
- package/dist/components/moving-border/index.d.ts.map +1 -0
- package/dist/components/moving-border/index.js +3 -0
- package/dist/components/moving-border/index.js.map +1 -0
- package/dist/components/typography/text.d.ts.map +1 -1
- package/dist/components/typography/text.js +1 -1
- package/dist/components/typography/text.js.map +1 -1
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.js +1 -0
- package/dist/hooks/index.js.map +1 -1
- package/dist/hooks/useMediaQuery.d.ts +2 -0
- package/dist/hooks/useMediaQuery.d.ts.map +1 -0
- package/dist/hooks/useMediaQuery.js +74 -0
- package/dist/hooks/useMediaQuery.js.map +1 -0
- package/dist/styles.css +1 -0
- package/index.css +1 -1
- package/package.json +11 -7
- package/src/build-css-entry.ts +3 -0
- package/src/components/code-block/code-block-footer.tsx +37 -30
- package/src/components/dynamic-item/dynamic-item.stories.tsx +1 -1
- package/src/components/icon/icon.tsx +2 -0
- package/src/components/index.ts +1 -0
- package/src/components/modal/index.ts +23 -0
- package/src/components/modal/modal.stories.tsx +384 -0
- package/src/components/modal/modal.tsx +309 -0
- package/src/components/moving-border/index.ts +1 -0
- package/src/components/typography/text.tsx +9 -1
- package/src/hooks/index.ts +1 -0
- package/src/hooks/useMediaQuery.ts +87 -0
- package/tsconfig.build.json +7 -1
- package/vite.css.config.ts +30 -0
|
@@ -0,0 +1,262 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
3
|
+
import { cva } from 'class-variance-authority';
|
|
4
|
+
import { Button } from '../../components/button/index.js';
|
|
5
|
+
import { Icon } from '../../components/icon/index.js';
|
|
6
|
+
import { Text } from '../../components/typography/index.js';
|
|
7
|
+
import { motion } from 'framer-motion';
|
|
8
|
+
import { useMediaQuery } from '../../hooks/useMediaQuery.js';
|
|
9
|
+
import { createContext, useContext } from 'react';
|
|
10
|
+
import { cn } from '../../utils/cn.js';
|
|
11
|
+
import { Drawer as VaulDrawer } from 'vaul';
|
|
12
|
+
const modalDefaultTransition = {
|
|
13
|
+
type: 'spring',
|
|
14
|
+
stiffness: 300,
|
|
15
|
+
damping: 30
|
|
16
|
+
};
|
|
17
|
+
const ModalContext = /*#__PURE__*/ createContext(null);
|
|
18
|
+
function useModalContext() {
|
|
19
|
+
const context = useContext(ModalContext);
|
|
20
|
+
if (!context) {
|
|
21
|
+
throw new Error('Modal components must be used within a Modal component');
|
|
22
|
+
}
|
|
23
|
+
return context;
|
|
24
|
+
}
|
|
25
|
+
const modalOverlayVariants = cva('fixed inset-0 z-40 bg-background-backdrop-backdrop data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0');
|
|
26
|
+
const modalContentVariants = cva('fixed left-1/2 top-1/2 z-50 flex flex-col overflow-clip bg-background-neutral-base rounded-16 w-full max-w-[576px] -translate-x-1/2 -translate-y-1/2 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 shadow-tooltip');
|
|
27
|
+
function Modal({ breakpoint = '(min-width: 768px)', children, ...props }) {
|
|
28
|
+
const isDesktop = useMediaQuery(breakpoint);
|
|
29
|
+
const contextValue = {
|
|
30
|
+
breakpoint,
|
|
31
|
+
isDesktop
|
|
32
|
+
};
|
|
33
|
+
const Root = isDesktop ? DialogPrimitive.Root : VaulDrawer.Root;
|
|
34
|
+
return /*#__PURE__*/ _jsx(ModalContext.Provider, {
|
|
35
|
+
value: contextValue,
|
|
36
|
+
children: /*#__PURE__*/ _jsx(Root, {
|
|
37
|
+
...props,
|
|
38
|
+
children: children
|
|
39
|
+
})
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
function ModalTrigger(props) {
|
|
43
|
+
const { isDesktop } = useModalContext();
|
|
44
|
+
if (isDesktop) {
|
|
45
|
+
return /*#__PURE__*/ _jsx(DialogPrimitive.Trigger, {
|
|
46
|
+
...props
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
return /*#__PURE__*/ _jsx(VaulDrawer.Trigger, {
|
|
50
|
+
...props
|
|
51
|
+
});
|
|
52
|
+
}
|
|
53
|
+
function ModalPortal(props) {
|
|
54
|
+
const { isDesktop } = useModalContext();
|
|
55
|
+
if (isDesktop) {
|
|
56
|
+
return /*#__PURE__*/ _jsx(DialogPrimitive.Portal, {
|
|
57
|
+
...props
|
|
58
|
+
});
|
|
59
|
+
}
|
|
60
|
+
return /*#__PURE__*/ _jsx(VaulDrawer.Portal, {
|
|
61
|
+
...props
|
|
62
|
+
});
|
|
63
|
+
}
|
|
64
|
+
function ModalClose(props) {
|
|
65
|
+
const { isDesktop } = useModalContext();
|
|
66
|
+
if (isDesktop) {
|
|
67
|
+
return /*#__PURE__*/ _jsx(DialogPrimitive.Close, {
|
|
68
|
+
...props
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
return /*#__PURE__*/ _jsx(VaulDrawer.Close, {
|
|
72
|
+
...props
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
function ModalOverlay({ className, animated = true, transition = modalDefaultTransition, ...props }) {
|
|
76
|
+
const { isDesktop } = useModalContext();
|
|
77
|
+
if (!isDesktop) {
|
|
78
|
+
return /*#__PURE__*/ _jsx(VaulDrawer.Overlay, {
|
|
79
|
+
className: cn(modalOverlayVariants(), className),
|
|
80
|
+
...props
|
|
81
|
+
});
|
|
82
|
+
}
|
|
83
|
+
if (animated) {
|
|
84
|
+
return /*#__PURE__*/ _jsx(DialogPrimitive.Overlay, {
|
|
85
|
+
className: cn(modalOverlayVariants(), className),
|
|
86
|
+
asChild: true,
|
|
87
|
+
...props,
|
|
88
|
+
children: /*#__PURE__*/ _jsx(motion.div, {
|
|
89
|
+
initial: {
|
|
90
|
+
opacity: 0
|
|
91
|
+
},
|
|
92
|
+
animate: {
|
|
93
|
+
opacity: 1
|
|
94
|
+
},
|
|
95
|
+
exit: {
|
|
96
|
+
opacity: 0
|
|
97
|
+
},
|
|
98
|
+
transition: transition
|
|
99
|
+
})
|
|
100
|
+
});
|
|
101
|
+
}
|
|
102
|
+
return /*#__PURE__*/ _jsx(DialogPrimitive.Overlay, {
|
|
103
|
+
className: cn(modalOverlayVariants(), className),
|
|
104
|
+
...props
|
|
105
|
+
});
|
|
106
|
+
}
|
|
107
|
+
function ModalContent({ className, children, animated = true, transition = modalDefaultTransition, ...props }) {
|
|
108
|
+
const { isDesktop } = useModalContext();
|
|
109
|
+
if (!isDesktop) {
|
|
110
|
+
return /*#__PURE__*/ _jsxs(ModalPortal, {
|
|
111
|
+
children: [
|
|
112
|
+
/*#__PURE__*/ _jsx(ModalOverlay, {
|
|
113
|
+
animated: animated,
|
|
114
|
+
transition: transition
|
|
115
|
+
}),
|
|
116
|
+
/*#__PURE__*/ _jsx(VaulDrawer.Content, {
|
|
117
|
+
className: cn('fixed bottom-0 left-0 right-0 z-50 flex flex-col bg-background-neutral-base rounded-t-16 max-h-[85vh] shadow-tooltip', className),
|
|
118
|
+
...props,
|
|
119
|
+
children: /*#__PURE__*/ _jsxs("div", {
|
|
120
|
+
className: "relative w-full h-full flex flex-col min-h-0",
|
|
121
|
+
children: [
|
|
122
|
+
/*#__PURE__*/ _jsx("div", {
|
|
123
|
+
className: "pointer-events-none absolute inset-0 shadow-separator-inset rounded-t-16"
|
|
124
|
+
}),
|
|
125
|
+
/*#__PURE__*/ _jsx("div", {
|
|
126
|
+
className: "flex items-center justify-center pt-8 pb-8 shrink-0",
|
|
127
|
+
children: /*#__PURE__*/ _jsx("div", {
|
|
128
|
+
className: "bg-foreground-neutral-subtle w-32 h-4 rounded-full opacity-40"
|
|
129
|
+
})
|
|
130
|
+
}),
|
|
131
|
+
children
|
|
132
|
+
]
|
|
133
|
+
})
|
|
134
|
+
})
|
|
135
|
+
]
|
|
136
|
+
});
|
|
137
|
+
}
|
|
138
|
+
const baseClasses = cn(modalContentVariants(), className);
|
|
139
|
+
return /*#__PURE__*/ _jsxs(ModalPortal, {
|
|
140
|
+
children: [
|
|
141
|
+
/*#__PURE__*/ _jsx(ModalOverlay, {
|
|
142
|
+
animated: animated,
|
|
143
|
+
transition: transition
|
|
144
|
+
}),
|
|
145
|
+
/*#__PURE__*/ _jsx(DialogPrimitive.Content, {
|
|
146
|
+
className: baseClasses,
|
|
147
|
+
...props,
|
|
148
|
+
children: /*#__PURE__*/ _jsxs("div", {
|
|
149
|
+
className: "relative size-full",
|
|
150
|
+
children: [
|
|
151
|
+
/*#__PURE__*/ _jsx("div", {
|
|
152
|
+
className: "pointer-events-none absolute inset-0 shadow-separator-inset rounded-16"
|
|
153
|
+
}),
|
|
154
|
+
children
|
|
155
|
+
]
|
|
156
|
+
})
|
|
157
|
+
})
|
|
158
|
+
]
|
|
159
|
+
});
|
|
160
|
+
}
|
|
161
|
+
function ModalHeader({ className, title, showEscIndicator = true, showClose = true, children, ...props }) {
|
|
162
|
+
const { isDesktop } = useModalContext();
|
|
163
|
+
return /*#__PURE__*/ _jsxs("div", {
|
|
164
|
+
className: "flex flex-col w-full shrink-0",
|
|
165
|
+
...props,
|
|
166
|
+
children: [
|
|
167
|
+
/*#__PURE__*/ _jsxs("div", {
|
|
168
|
+
className: "bg-background-neutral-base flex items-center justify-center gap-20 overflow-clip px-24 py-16 w-full",
|
|
169
|
+
children: [
|
|
170
|
+
title ? /*#__PURE__*/ _jsx(Text, {
|
|
171
|
+
size: "lg",
|
|
172
|
+
className: "flex-1 overflow-ellipsis overflow-hidden whitespace-nowrap",
|
|
173
|
+
children: title
|
|
174
|
+
}) : /*#__PURE__*/ _jsx("div", {
|
|
175
|
+
className: "flex-1",
|
|
176
|
+
children: children
|
|
177
|
+
}),
|
|
178
|
+
/*#__PURE__*/ _jsxs("div", {
|
|
179
|
+
className: "flex items-center gap-8",
|
|
180
|
+
children: [
|
|
181
|
+
isDesktop && showEscIndicator && /*#__PURE__*/ _jsx("kbd", {
|
|
182
|
+
className: "flex items-center justify-center rounded-8 border border-border-neutral-base shadow-button-neutral bg-background-field-base text-xs text-foreground-neutral-subtle px-4",
|
|
183
|
+
children: "esc"
|
|
184
|
+
}),
|
|
185
|
+
showClose && /*#__PURE__*/ _jsx(ModalClose, {
|
|
186
|
+
asChild: true,
|
|
187
|
+
children: /*#__PURE__*/ _jsx(Button, {
|
|
188
|
+
variant: "transparent",
|
|
189
|
+
size: "xs",
|
|
190
|
+
className: "rounded-4 p-2 cursor-pointer bg-transparent border-none text-foreground-neutral-muted hover:text-foreground-neutral-base hover:bg-background-components-hover transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-background-accent-blue-base focus-visible:ring-offset-2 w-24 h-24",
|
|
191
|
+
children: /*#__PURE__*/ _jsx(Icon, {
|
|
192
|
+
name: "close"
|
|
193
|
+
})
|
|
194
|
+
})
|
|
195
|
+
})
|
|
196
|
+
]
|
|
197
|
+
})
|
|
198
|
+
]
|
|
199
|
+
}),
|
|
200
|
+
/*#__PURE__*/ _jsx("div", {
|
|
201
|
+
className: "bg-border-neutral-strong h-[1px] w-full"
|
|
202
|
+
})
|
|
203
|
+
]
|
|
204
|
+
});
|
|
205
|
+
}
|
|
206
|
+
function ModalBody({ className, children, ...props }) {
|
|
207
|
+
const { isDesktop } = useModalContext();
|
|
208
|
+
return /*#__PURE__*/ _jsx("div", {
|
|
209
|
+
className: cn('bg-background-neutral-base flex flex-col items-start px-24 pb-24 pt-16 w-full', isDesktop ? 'overflow-clip' : 'overflow-y-auto overflow-x-clip flex-1', className),
|
|
210
|
+
...props,
|
|
211
|
+
children: children
|
|
212
|
+
});
|
|
213
|
+
}
|
|
214
|
+
function ModalFooter({ className, children, ...props }) {
|
|
215
|
+
return /*#__PURE__*/ _jsxs("div", {
|
|
216
|
+
className: "flex flex-col w-full shrink-0",
|
|
217
|
+
...props,
|
|
218
|
+
children: [
|
|
219
|
+
/*#__PURE__*/ _jsx("div", {
|
|
220
|
+
className: "bg-border-neutral-strong h-[1px] w-full"
|
|
221
|
+
}),
|
|
222
|
+
/*#__PURE__*/ _jsx("div", {
|
|
223
|
+
className: "bg-background-neutral-base flex items-end justify-end gap-20 overflow-clip px-24 py-16 w-full",
|
|
224
|
+
children: /*#__PURE__*/ _jsx("div", {
|
|
225
|
+
className: cn('flex items-center gap-16', className),
|
|
226
|
+
children: children
|
|
227
|
+
})
|
|
228
|
+
})
|
|
229
|
+
]
|
|
230
|
+
});
|
|
231
|
+
}
|
|
232
|
+
function ModalTitle({ className, ...props }) {
|
|
233
|
+
const { isDesktop } = useModalContext();
|
|
234
|
+
const titleClassName = cn('font-medium text-lg leading-20 overflow-ellipsis overflow-hidden text-foreground-neutral-base', className);
|
|
235
|
+
if (!isDesktop) {
|
|
236
|
+
return /*#__PURE__*/ _jsx(VaulDrawer.Title, {
|
|
237
|
+
className: titleClassName,
|
|
238
|
+
...props
|
|
239
|
+
});
|
|
240
|
+
}
|
|
241
|
+
return /*#__PURE__*/ _jsx(DialogPrimitive.Title, {
|
|
242
|
+
className: titleClassName,
|
|
243
|
+
...props
|
|
244
|
+
});
|
|
245
|
+
}
|
|
246
|
+
function ModalDescription({ className, ...props }) {
|
|
247
|
+
const { isDesktop } = useModalContext();
|
|
248
|
+
const descClassName = cn('text-sm leading-20 text-foreground-neutral-subtle', className);
|
|
249
|
+
if (!isDesktop) {
|
|
250
|
+
return /*#__PURE__*/ _jsx(VaulDrawer.Description, {
|
|
251
|
+
className: descClassName,
|
|
252
|
+
...props
|
|
253
|
+
});
|
|
254
|
+
}
|
|
255
|
+
return /*#__PURE__*/ _jsx(DialogPrimitive.Description, {
|
|
256
|
+
className: descClassName,
|
|
257
|
+
...props
|
|
258
|
+
});
|
|
259
|
+
}
|
|
260
|
+
export { Modal, ModalPortal, ModalOverlay, ModalTrigger, ModalClose, ModalContent, ModalHeader, ModalBody, ModalFooter, ModalTitle, ModalDescription, modalContentVariants, modalOverlayVariants, modalDefaultTransition };
|
|
261
|
+
|
|
262
|
+
//# sourceMappingURL=modal.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/modal/modal.tsx"],"sourcesContent":["import * as DialogPrimitive from '@radix-ui/react-dialog';\nimport {cva} from 'class-variance-authority';\nimport {Button} from 'components/button';\nimport {Icon} from 'components/icon';\nimport {Text} from 'components/typography';\nimport {motion, type Transition} from 'framer-motion';\nimport {useMediaQuery} from 'hooks/useMediaQuery';\nimport {type ComponentProps, createContext, useContext} from 'react';\nimport {cn} from 'utils/cn';\nimport {Drawer as VaulDrawer} from 'vaul';\n\nconst modalDefaultTransition: Transition = {\n type: 'spring',\n stiffness: 300,\n damping: 30,\n};\n\ntype ModalContextValue = {\n breakpoint: string;\n isDesktop: boolean;\n};\n\nconst ModalContext = createContext<ModalContextValue | null>(null);\n\nfunction useModalContext() {\n const context = useContext(ModalContext);\n if (!context) {\n throw new Error('Modal components must be used within a Modal component');\n }\n return context;\n}\n\nconst modalOverlayVariants = cva(\n 'fixed inset-0 z-40 bg-background-backdrop-backdrop data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n);\n\nconst modalContentVariants = cva(\n 'fixed left-1/2 top-1/2 z-50 flex flex-col overflow-clip bg-background-neutral-base rounded-16 w-full max-w-[576px] -translate-x-1/2 -translate-y-1/2 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 shadow-tooltip',\n);\n\nfunction Modal({\n breakpoint = '(min-width: 768px)',\n children,\n ...props\n}: ComponentProps<typeof DialogPrimitive.Root> & {breakpoint?: string}) {\n const isDesktop = useMediaQuery(breakpoint);\n\n const contextValue: ModalContextValue = {\n breakpoint,\n isDesktop,\n };\n\n const Root = isDesktop ? DialogPrimitive.Root : VaulDrawer.Root;\n\n return (\n <ModalContext.Provider value={contextValue}>\n <Root {...props}>{children}</Root>\n </ModalContext.Provider>\n );\n}\n\nfunction ModalTrigger(props: ComponentProps<typeof DialogPrimitive.Trigger>) {\n const {isDesktop} = useModalContext();\n\n if (isDesktop) {\n return <DialogPrimitive.Trigger {...props} />;\n }\n\n return <VaulDrawer.Trigger {...props} />;\n}\n\nfunction ModalPortal(props: ComponentProps<typeof DialogPrimitive.Portal>) {\n const {isDesktop} = useModalContext();\n\n if (isDesktop) {\n return <DialogPrimitive.Portal {...props} />;\n }\n\n return <VaulDrawer.Portal {...props} />;\n}\n\nfunction ModalClose(props: ComponentProps<typeof DialogPrimitive.Close>) {\n const {isDesktop} = useModalContext();\n\n if (isDesktop) {\n return <DialogPrimitive.Close {...props} />;\n }\n\n return <VaulDrawer.Close {...props} />;\n}\n\ntype ModalOverlayProps = ComponentProps<typeof DialogPrimitive.Overlay> & {\n animated?: boolean;\n transition?: Transition;\n};\n\nfunction ModalOverlay({\n className,\n animated = true,\n transition = modalDefaultTransition,\n ...props\n}: ModalOverlayProps) {\n const {isDesktop} = useModalContext();\n\n if (!isDesktop) {\n return <VaulDrawer.Overlay className={cn(modalOverlayVariants(), className)} {...props} />;\n }\n\n if (animated) {\n return (\n <DialogPrimitive.Overlay className={cn(modalOverlayVariants(), className)} asChild {...props}>\n <motion.div\n initial={{opacity: 0}}\n animate={{opacity: 1}}\n exit={{opacity: 0}}\n transition={transition}\n />\n </DialogPrimitive.Overlay>\n );\n }\n\n return <DialogPrimitive.Overlay className={cn(modalOverlayVariants(), className)} {...props} />;\n}\n\ntype ModalContentProps = ComponentProps<typeof DialogPrimitive.Content> & {\n animated?: boolean;\n transition?: Transition;\n};\n\nfunction ModalContent({\n className,\n children,\n animated = true,\n transition = modalDefaultTransition,\n ...props\n}: ModalContentProps) {\n const {isDesktop} = useModalContext();\n\n if (!isDesktop) {\n return (\n <ModalPortal>\n <ModalOverlay animated={animated} transition={transition} />\n <VaulDrawer.Content\n className={cn(\n 'fixed bottom-0 left-0 right-0 z-50 flex flex-col bg-background-neutral-base rounded-t-16 max-h-[85vh] shadow-tooltip',\n className,\n )}\n {...props}\n >\n <div className=\"relative w-full h-full flex flex-col min-h-0\">\n <div className=\"pointer-events-none absolute inset-0 shadow-separator-inset rounded-t-16\" />\n <div className=\"flex items-center justify-center pt-8 pb-8 shrink-0\">\n <div className=\"bg-foreground-neutral-subtle w-32 h-4 rounded-full opacity-40\" />\n </div>\n {children}\n </div>\n </VaulDrawer.Content>\n </ModalPortal>\n );\n }\n\n const baseClasses = cn(modalContentVariants(), className);\n\n return (\n <ModalPortal>\n <ModalOverlay animated={animated} transition={transition} />\n <DialogPrimitive.Content className={baseClasses} {...props}>\n <div className=\"relative size-full\">\n <div className=\"pointer-events-none absolute inset-0 shadow-separator-inset rounded-16\" />\n {children}\n </div>\n </DialogPrimitive.Content>\n </ModalPortal>\n );\n}\n\ntype ModalHeaderProps = ComponentProps<'div'> & {\n title?: string;\n showEscIndicator?: boolean;\n showClose?: boolean;\n};\n\nfunction ModalHeader({\n className,\n title,\n showEscIndicator = true,\n showClose = true,\n children,\n ...props\n}: ModalHeaderProps) {\n const {isDesktop} = useModalContext();\n\n return (\n <div className=\"flex flex-col w-full shrink-0\" {...props}>\n <div className=\"bg-background-neutral-base flex items-center justify-center gap-20 overflow-clip px-24 py-16 w-full\">\n {title ? (\n <Text size=\"lg\" className=\"flex-1 overflow-ellipsis overflow-hidden whitespace-nowrap\">\n {title}\n </Text>\n ) : (\n <div className=\"flex-1\">{children}</div>\n )}\n <div className=\"flex items-center gap-8\">\n {isDesktop && showEscIndicator && (\n <kbd className=\"flex items-center justify-center rounded-8 border border-border-neutral-base shadow-button-neutral bg-background-field-base text-xs text-foreground-neutral-subtle px-4\">\n esc\n </kbd>\n )}\n {showClose && (\n <ModalClose asChild>\n <Button\n variant=\"transparent\"\n size=\"xs\"\n className=\"rounded-4 p-2 cursor-pointer bg-transparent border-none text-foreground-neutral-muted hover:text-foreground-neutral-base hover:bg-background-components-hover transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-background-accent-blue-base focus-visible:ring-offset-2 w-24 h-24\"\n >\n <Icon name=\"close\" />\n </Button>\n </ModalClose>\n )}\n </div>\n </div>\n <div className=\"bg-border-neutral-strong h-[1px] w-full\" />\n </div>\n );\n}\n\nfunction ModalBody({className, children, ...props}: ComponentProps<'div'>) {\n const {isDesktop} = useModalContext();\n\n return (\n <div\n className={cn(\n 'bg-background-neutral-base flex flex-col items-start px-24 pb-24 pt-16 w-full',\n isDesktop ? 'overflow-clip' : 'overflow-y-auto overflow-x-clip flex-1',\n className,\n )}\n {...props}\n >\n {children}\n </div>\n );\n}\n\nfunction ModalFooter({className, children, ...props}: ComponentProps<'div'>) {\n return (\n <div className=\"flex flex-col w-full shrink-0\" {...props}>\n <div className=\"bg-border-neutral-strong h-[1px] w-full\" />\n <div className=\"bg-background-neutral-base flex items-end justify-end gap-20 overflow-clip px-24 py-16 w-full\">\n <div className={cn('flex items-center gap-16', className)}>{children}</div>\n </div>\n </div>\n );\n}\n\ntype ModalTitleProps = ComponentProps<typeof DialogPrimitive.Title>;\n\nfunction ModalTitle({className, ...props}: ModalTitleProps) {\n const {isDesktop} = useModalContext();\n\n const titleClassName = cn(\n 'font-medium text-lg leading-20 overflow-ellipsis overflow-hidden text-foreground-neutral-base',\n className,\n );\n\n if (!isDesktop) {\n return <VaulDrawer.Title className={titleClassName} {...props} />;\n }\n\n return <DialogPrimitive.Title className={titleClassName} {...props} />;\n}\n\ntype ModalDescriptionProps = ComponentProps<typeof DialogPrimitive.Description>;\n\nfunction ModalDescription({className, ...props}: ModalDescriptionProps) {\n const {isDesktop} = useModalContext();\n\n const descClassName = cn('text-sm leading-20 text-foreground-neutral-subtle', className);\n\n if (!isDesktop) {\n return <VaulDrawer.Description className={descClassName} {...props} />;\n }\n\n return <DialogPrimitive.Description className={descClassName} {...props} />;\n}\n\nexport {\n Modal,\n ModalPortal,\n ModalOverlay,\n ModalTrigger,\n ModalClose,\n ModalContent,\n ModalHeader,\n ModalBody,\n ModalFooter,\n ModalTitle,\n ModalDescription,\n modalContentVariants,\n modalOverlayVariants,\n modalDefaultTransition,\n};\n\nexport type {\n ModalContentProps,\n ModalHeaderProps,\n ModalOverlayProps,\n ModalTitleProps,\n ModalDescriptionProps,\n};\n"],"names":["DialogPrimitive","cva","Button","Icon","Text","motion","useMediaQuery","createContext","useContext","cn","Drawer","VaulDrawer","modalDefaultTransition","type","stiffness","damping","ModalContext","useModalContext","context","Error","modalOverlayVariants","modalContentVariants","Modal","breakpoint","children","props","isDesktop","contextValue","Root","Provider","value","ModalTrigger","Trigger","ModalPortal","Portal","ModalClose","Close","ModalOverlay","className","animated","transition","Overlay","asChild","div","initial","opacity","animate","exit","ModalContent","Content","baseClasses","ModalHeader","title","showEscIndicator","showClose","size","kbd","variant","name","ModalBody","ModalFooter","ModalTitle","titleClassName","Title","ModalDescription","descClassName","Description"],"mappings":"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"}
|