@clickhouse/click-ui 0.2.0-rc.1 → 0.2.0-rc.2
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/dist/cjs/components/Dialog/index.cjs +10 -1
- package/dist/cjs/components/Dialog/index.cjs.map +1 -1
- package/dist/esm/components/Dialog/index.js +10 -1
- package/dist/esm/components/Dialog/index.js.map +1 -1
- package/dist/types/components/Dialog/Dialog.d.ts +1 -1
- package/dist/types/components/Dialog/Dialog.types.d.ts +1 -0
- package/package.json +1 -1
|
@@ -107,16 +107,24 @@ const TitleArea = styledComponents.styled.div.withConfig({
|
|
|
107
107
|
}) => $onlyClose ? "flex-end" : "space-between", ({
|
|
108
108
|
theme
|
|
109
109
|
}) => theme.sizes[9]);
|
|
110
|
-
const Title = styledComponents.styled.
|
|
110
|
+
const Title = styledComponents.styled(RadixDialog__namespace.Title).withConfig({
|
|
111
111
|
componentId: "sc-1wr6otn-4"
|
|
112
112
|
})(["font:", ";padding:0;margin:0;"], ({
|
|
113
113
|
theme
|
|
114
114
|
}) => theme.click.dialog.typography.title.default);
|
|
115
|
+
const Description = styledComponents.styled(RadixDialog__namespace.Description).withConfig({
|
|
116
|
+
componentId: "sc-1wr6otn-5"
|
|
117
|
+
})(["font:", ";color:", ";padding:0;margin:0;"], ({
|
|
118
|
+
theme
|
|
119
|
+
}) => theme.click.dialog.typography.description.default, ({
|
|
120
|
+
theme
|
|
121
|
+
}) => theme.click.dialog.color.description.default);
|
|
115
122
|
const CloseButton = ({
|
|
116
123
|
onClose
|
|
117
124
|
}) => /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CrossButton.CrossButton, { onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "cross", size: "lg" }) }) });
|
|
118
125
|
const DialogContent = ({
|
|
119
126
|
title,
|
|
127
|
+
description,
|
|
120
128
|
children,
|
|
121
129
|
showClose,
|
|
122
130
|
onClose,
|
|
@@ -136,6 +144,7 @@ const DialogContent = ({
|
|
|
136
144
|
] }),
|
|
137
145
|
/* @__PURE__ */ jsxRuntime.jsx(Spacer.Spacer, { size: "sm" })
|
|
138
146
|
] }),
|
|
147
|
+
description && /* @__PURE__ */ jsxRuntime.jsx(Description, { children: description }),
|
|
139
148
|
children
|
|
140
149
|
] })
|
|
141
150
|
] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import * as RadixDialog from '@radix-ui/react-dialog';\nimport { keyframes, styled } from 'styled-components';\nimport { Button, ButtonProps } from '@/components/Button';\nimport { Icon } from '@/components/Icon';\nimport { Spacer } from '@/components/Spacer';\nimport { CrossButton } from '@/components/CrossButton';\nimport { DialogContentProps, DialogProps, DialogTriggerProps } from './Dialog.types';\n\nexport const Dialog = ({ children, ...props }: DialogProps) => {\n return <RadixDialog.Root {...props}>{children}</RadixDialog.Root>;\n};\n\n// Dialog Trigger\nconst Trigger = styled(RadixDialog.Trigger)`\n width: fit-content;\n background: transparent;\n border: none;\n cursor: pointer;\n`;\n\nconst DialogTrigger = ({ children, asChild, ...props }: DialogTriggerProps) => {\n if (asChild) {\n // Pass all props to RadixDialog.Trigger, no styled wrapper\n return (\n <RadixDialog.Trigger\n asChild\n {...props}\n >\n {children}\n </RadixDialog.Trigger>\n );\n }\n // Use styled Trigger if not asChild\n return <Trigger {...props}>{children}</Trigger>;\n};\n\nDialogTrigger.displayName = 'DialogTrigger';\nDialog.Trigger = DialogTrigger;\n\nconst DialogClose = ({ label = 'Close', type = 'secondary', ...props }: ButtonProps) => (\n <RadixDialog.Close asChild>\n <Button\n type={type}\n label={label}\n {...props}\n />\n </RadixDialog.Close>\n);\n\nDialogClose.displayName = 'DialogClose';\nDialog.Close = DialogClose;\n\n// Dialog Content\nconst overlayShow = keyframes({\n '0%': { opacity: 0 },\n '100%': { opacity: 1 },\n});\n\nconst contentShow = keyframes({\n '0%': { opacity: 0, transform: 'translate(-50%, -48%) scale(.96)' },\n '100%': { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },\n});\n\nconst DialogOverlay = styled(RadixDialog.Overlay)`\n background-color: ${({ theme }) => theme.click.dialog.color.opaqueBackground.default};\n position: fixed;\n inset: 0;\n animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);\n`;\n\nconst ContentArea = styled(RadixDialog.Content)<{ $reducePadding?: boolean }>`\n background: ${({ theme }) => theme.click.dialog.color.background.default};\n border-radius: ${({ theme }) => theme.click.dialog.radii.all};\n padding-block: ${({ theme, $reducePadding = false }) =>\n $reducePadding ? theme.sizes[4] : theme.click.dialog.space.y};\n padding-inline: ${({ theme, $reducePadding = false }) =>\n $reducePadding ? theme.sizes[4] : theme.click.dialog.space.x};\n box-shadow: ${({ theme }) => theme.click.dialog.shadow.default};\n border: 1px solid ${({ theme }) => theme.click.global.color.stroke.default};\n width: 75%;\n max-width: 670px;\n position: fixed;\n top: 50%;\n left: 50%;\n max-height: 75%;\n overflow: auto;\n transform: translate(-50%, -50%);\n animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);\n outline: none;\n\n @media (max-width: ${({ theme }) => theme.breakpoint.sizes.sm}) {\n max-height: 100%;\n border-radius: 0;\n width: 100%;\n }\n`;\n\nconst TitleArea = styled.div<{ $onlyClose?: boolean }>`\n display: flex;\n justify-content: ${({ $onlyClose }) => ($onlyClose ? 'flex-end' : 'space-between')};\n align-items: center;\n min-height: ${({ theme }) => theme.sizes[9]}; // 32px\n`;\n\nconst Title = styled.h2`\n font: ${({ theme }) => theme.click.dialog.typography.title.default};\n padding: 0;\n margin: 0;\n`;\n\nconst CloseButton = ({ onClose }: { onClose?: () => void }) => (\n <RadixDialog.Close asChild>\n <CrossButton onClick={onClose}>\n <Icon\n name=\"cross\"\n size=\"lg\"\n />\n </CrossButton>\n </RadixDialog.Close>\n);\n\nconst DialogContent = ({\n title,\n children,\n showClose,\n onClose,\n forceMount,\n container,\n showOverlay = true,\n reducePadding = false,\n ...props\n}: DialogContentProps) => {\n return (\n <RadixDialog.Portal\n forceMount={forceMount}\n container={container}\n >\n {showOverlay && <DialogOverlay />}\n <ContentArea\n data-testid=\"click-dialog-contentarea\"\n $reducePadding={reducePadding}\n {...props}\n >\n {(title || showClose) && (\n <>\n <TitleArea $onlyClose={!!showClose && !title}>\n {title && <Title data-testid=\"click-dialog-title\">{title}</Title>}\n {showClose && (\n <CloseButton\n data-testid=\"click-dialog-close\"\n onClose={onClose}\n />\n )}\n </TitleArea>\n <Spacer size=\"sm\" />\n </>\n )}\n\n {children}\n </ContentArea>\n </RadixDialog.Portal>\n );\n};\n\nDialogContent.displayName = 'DialogContent';\nDialog.Content = DialogContent;\n"],"names":["Dialog","children","props","RadixDialog","Trigger","styled","withConfig","componentId","DialogTrigger","asChild","jsx","displayName","DialogClose","label","type","Button","Close","overlayShow","keyframes","opacity","contentShow","transform","DialogOverlay","Overlay","theme","click","dialog","color","opaqueBackground","default","ContentArea","Content","background","radii","all","$reducePadding","sizes","space","y","x","shadow","global","stroke","breakpoint","sm","TitleArea","div","$onlyClose","Title","h2","typography","title","CloseButton","onClose","CrossButton","Icon","DialogContent","showClose","forceMount","container","showOverlay","reducePadding","jsxs","Fragment","Spacer"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import * as RadixDialog from '@radix-ui/react-dialog';\nimport { keyframes, styled } from 'styled-components';\nimport { Button, ButtonProps } from '@/components/Button';\nimport { Icon } from '@/components/Icon';\nimport { Spacer } from '@/components/Spacer';\nimport { CrossButton } from '@/components/CrossButton';\nimport { DialogContentProps, DialogProps, DialogTriggerProps } from './Dialog.types';\n\nexport const Dialog = ({ children, ...props }: DialogProps) => {\n return <RadixDialog.Root {...props}>{children}</RadixDialog.Root>;\n};\n\n// Dialog Trigger\nconst Trigger = styled(RadixDialog.Trigger)`\n width: fit-content;\n background: transparent;\n border: none;\n cursor: pointer;\n`;\n\nconst DialogTrigger = ({ children, asChild, ...props }: DialogTriggerProps) => {\n if (asChild) {\n // Pass all props to RadixDialog.Trigger, no styled wrapper\n return (\n <RadixDialog.Trigger\n asChild\n {...props}\n >\n {children}\n </RadixDialog.Trigger>\n );\n }\n // Use styled Trigger if not asChild\n return <Trigger {...props}>{children}</Trigger>;\n};\n\nDialogTrigger.displayName = 'DialogTrigger';\nDialog.Trigger = DialogTrigger;\n\nconst DialogClose = ({ label = 'Close', type = 'secondary', ...props }: ButtonProps) => (\n <RadixDialog.Close asChild>\n <Button\n type={type}\n label={label}\n {...props}\n />\n </RadixDialog.Close>\n);\n\nDialogClose.displayName = 'DialogClose';\nDialog.Close = DialogClose;\n\n// Dialog Content\nconst overlayShow = keyframes({\n '0%': { opacity: 0 },\n '100%': { opacity: 1 },\n});\n\nconst contentShow = keyframes({\n '0%': { opacity: 0, transform: 'translate(-50%, -48%) scale(.96)' },\n '100%': { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },\n});\n\nconst DialogOverlay = styled(RadixDialog.Overlay)`\n background-color: ${({ theme }) => theme.click.dialog.color.opaqueBackground.default};\n position: fixed;\n inset: 0;\n animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);\n`;\n\nconst ContentArea = styled(RadixDialog.Content)<{ $reducePadding?: boolean }>`\n background: ${({ theme }) => theme.click.dialog.color.background.default};\n border-radius: ${({ theme }) => theme.click.dialog.radii.all};\n padding-block: ${({ theme, $reducePadding = false }) =>\n $reducePadding ? theme.sizes[4] : theme.click.dialog.space.y};\n padding-inline: ${({ theme, $reducePadding = false }) =>\n $reducePadding ? theme.sizes[4] : theme.click.dialog.space.x};\n box-shadow: ${({ theme }) => theme.click.dialog.shadow.default};\n border: 1px solid ${({ theme }) => theme.click.global.color.stroke.default};\n width: 75%;\n max-width: 670px;\n position: fixed;\n top: 50%;\n left: 50%;\n max-height: 75%;\n overflow: auto;\n transform: translate(-50%, -50%);\n animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);\n outline: none;\n\n @media (max-width: ${({ theme }) => theme.breakpoint.sizes.sm}) {\n max-height: 100%;\n border-radius: 0;\n width: 100%;\n }\n`;\n\nconst TitleArea = styled.div<{ $onlyClose?: boolean }>`\n display: flex;\n justify-content: ${({ $onlyClose }) => ($onlyClose ? 'flex-end' : 'space-between')};\n align-items: center;\n min-height: ${({ theme }) => theme.sizes[9]}; // 32px\n`;\n\nconst Title = styled(RadixDialog.Title)`\n font: ${({ theme }) => theme.click.dialog.typography.title.default};\n padding: 0;\n margin: 0;\n`;\n\nconst Description = styled(RadixDialog.Description)`\n font: ${({ theme }) => theme.click.dialog.typography.description.default};\n color: ${({ theme }) => theme.click.dialog.color.description.default};\n padding: 0;\n margin: 0;\n`;\n\nconst CloseButton = ({ onClose }: { onClose?: () => void }) => (\n <RadixDialog.Close asChild>\n <CrossButton onClick={onClose}>\n <Icon\n name=\"cross\"\n size=\"lg\"\n />\n </CrossButton>\n </RadixDialog.Close>\n);\n\nconst DialogContent = ({\n title,\n description,\n children,\n showClose,\n onClose,\n forceMount,\n container,\n showOverlay = true,\n reducePadding = false,\n ...props\n}: DialogContentProps) => {\n return (\n <RadixDialog.Portal\n forceMount={forceMount}\n container={container}\n >\n {showOverlay && <DialogOverlay />}\n <ContentArea\n data-testid=\"click-dialog-contentarea\"\n $reducePadding={reducePadding}\n {...props}\n >\n {(title || showClose) && (\n <>\n <TitleArea $onlyClose={!!showClose && !title}>\n {title && <Title data-testid=\"click-dialog-title\">{title}</Title>}\n {showClose && (\n <CloseButton\n data-testid=\"click-dialog-close\"\n onClose={onClose}\n />\n )}\n </TitleArea>\n <Spacer size=\"sm\" />\n </>\n )}\n {description && <Description>{description}</Description>}\n {children}\n </ContentArea>\n </RadixDialog.Portal>\n );\n};\n\nDialogContent.displayName = 'DialogContent';\nDialog.Content = DialogContent;\n"],"names":["Dialog","children","props","RadixDialog","Trigger","styled","withConfig","componentId","DialogTrigger","asChild","jsx","displayName","DialogClose","label","type","Button","Close","overlayShow","keyframes","opacity","contentShow","transform","DialogOverlay","Overlay","theme","click","dialog","color","opaqueBackground","default","ContentArea","Content","background","radii","all","$reducePadding","sizes","space","y","x","shadow","global","stroke","breakpoint","sm","TitleArea","div","$onlyClose","Title","typography","title","Description","description","CloseButton","onClose","CrossButton","Icon","DialogContent","showClose","forceMount","container","showOverlay","reducePadding","jsxs","Fragment","Spacer"],"mappings":"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"}
|
|
@@ -83,16 +83,24 @@ const TitleArea = styled.div.withConfig({
|
|
|
83
83
|
}) => $onlyClose ? "flex-end" : "space-between", ({
|
|
84
84
|
theme
|
|
85
85
|
}) => theme.sizes[9]);
|
|
86
|
-
const Title = styled.
|
|
86
|
+
const Title = styled(RadixDialog.Title).withConfig({
|
|
87
87
|
componentId: "sc-1wr6otn-4"
|
|
88
88
|
})(["font:", ";padding:0;margin:0;"], ({
|
|
89
89
|
theme
|
|
90
90
|
}) => theme.click.dialog.typography.title.default);
|
|
91
|
+
const Description = styled(RadixDialog.Description).withConfig({
|
|
92
|
+
componentId: "sc-1wr6otn-5"
|
|
93
|
+
})(["font:", ";color:", ";padding:0;margin:0;"], ({
|
|
94
|
+
theme
|
|
95
|
+
}) => theme.click.dialog.typography.description.default, ({
|
|
96
|
+
theme
|
|
97
|
+
}) => theme.click.dialog.color.description.default);
|
|
91
98
|
const CloseButton = ({
|
|
92
99
|
onClose
|
|
93
100
|
}) => /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(CrossButton, { onClick: onClose, children: /* @__PURE__ */ jsx(SvgImage, { name: "cross", size: "lg" }) }) });
|
|
94
101
|
const DialogContent = ({
|
|
95
102
|
title,
|
|
103
|
+
description,
|
|
96
104
|
children,
|
|
97
105
|
showClose,
|
|
98
106
|
onClose,
|
|
@@ -112,6 +120,7 @@ const DialogContent = ({
|
|
|
112
120
|
] }),
|
|
113
121
|
/* @__PURE__ */ jsx(Spacer, { size: "sm" })
|
|
114
122
|
] }),
|
|
123
|
+
description && /* @__PURE__ */ jsx(Description, { children: description }),
|
|
115
124
|
children
|
|
116
125
|
] })
|
|
117
126
|
] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import * as RadixDialog from '@radix-ui/react-dialog';\nimport { keyframes, styled } from 'styled-components';\nimport { Button, ButtonProps } from '@/components/Button';\nimport { Icon } from '@/components/Icon';\nimport { Spacer } from '@/components/Spacer';\nimport { CrossButton } from '@/components/CrossButton';\nimport { DialogContentProps, DialogProps, DialogTriggerProps } from './Dialog.types';\n\nexport const Dialog = ({ children, ...props }: DialogProps) => {\n return <RadixDialog.Root {...props}>{children}</RadixDialog.Root>;\n};\n\n// Dialog Trigger\nconst Trigger = styled(RadixDialog.Trigger)`\n width: fit-content;\n background: transparent;\n border: none;\n cursor: pointer;\n`;\n\nconst DialogTrigger = ({ children, asChild, ...props }: DialogTriggerProps) => {\n if (asChild) {\n // Pass all props to RadixDialog.Trigger, no styled wrapper\n return (\n <RadixDialog.Trigger\n asChild\n {...props}\n >\n {children}\n </RadixDialog.Trigger>\n );\n }\n // Use styled Trigger if not asChild\n return <Trigger {...props}>{children}</Trigger>;\n};\n\nDialogTrigger.displayName = 'DialogTrigger';\nDialog.Trigger = DialogTrigger;\n\nconst DialogClose = ({ label = 'Close', type = 'secondary', ...props }: ButtonProps) => (\n <RadixDialog.Close asChild>\n <Button\n type={type}\n label={label}\n {...props}\n />\n </RadixDialog.Close>\n);\n\nDialogClose.displayName = 'DialogClose';\nDialog.Close = DialogClose;\n\n// Dialog Content\nconst overlayShow = keyframes({\n '0%': { opacity: 0 },\n '100%': { opacity: 1 },\n});\n\nconst contentShow = keyframes({\n '0%': { opacity: 0, transform: 'translate(-50%, -48%) scale(.96)' },\n '100%': { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },\n});\n\nconst DialogOverlay = styled(RadixDialog.Overlay)`\n background-color: ${({ theme }) => theme.click.dialog.color.opaqueBackground.default};\n position: fixed;\n inset: 0;\n animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);\n`;\n\nconst ContentArea = styled(RadixDialog.Content)<{ $reducePadding?: boolean }>`\n background: ${({ theme }) => theme.click.dialog.color.background.default};\n border-radius: ${({ theme }) => theme.click.dialog.radii.all};\n padding-block: ${({ theme, $reducePadding = false }) =>\n $reducePadding ? theme.sizes[4] : theme.click.dialog.space.y};\n padding-inline: ${({ theme, $reducePadding = false }) =>\n $reducePadding ? theme.sizes[4] : theme.click.dialog.space.x};\n box-shadow: ${({ theme }) => theme.click.dialog.shadow.default};\n border: 1px solid ${({ theme }) => theme.click.global.color.stroke.default};\n width: 75%;\n max-width: 670px;\n position: fixed;\n top: 50%;\n left: 50%;\n max-height: 75%;\n overflow: auto;\n transform: translate(-50%, -50%);\n animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);\n outline: none;\n\n @media (max-width: ${({ theme }) => theme.breakpoint.sizes.sm}) {\n max-height: 100%;\n border-radius: 0;\n width: 100%;\n }\n`;\n\nconst TitleArea = styled.div<{ $onlyClose?: boolean }>`\n display: flex;\n justify-content: ${({ $onlyClose }) => ($onlyClose ? 'flex-end' : 'space-between')};\n align-items: center;\n min-height: ${({ theme }) => theme.sizes[9]}; // 32px\n`;\n\nconst Title = styled.h2`\n font: ${({ theme }) => theme.click.dialog.typography.title.default};\n padding: 0;\n margin: 0;\n`;\n\nconst CloseButton = ({ onClose }: { onClose?: () => void }) => (\n <RadixDialog.Close asChild>\n <CrossButton onClick={onClose}>\n <Icon\n name=\"cross\"\n size=\"lg\"\n />\n </CrossButton>\n </RadixDialog.Close>\n);\n\nconst DialogContent = ({\n title,\n children,\n showClose,\n onClose,\n forceMount,\n container,\n showOverlay = true,\n reducePadding = false,\n ...props\n}: DialogContentProps) => {\n return (\n <RadixDialog.Portal\n forceMount={forceMount}\n container={container}\n >\n {showOverlay && <DialogOverlay />}\n <ContentArea\n data-testid=\"click-dialog-contentarea\"\n $reducePadding={reducePadding}\n {...props}\n >\n {(title || showClose) && (\n <>\n <TitleArea $onlyClose={!!showClose && !title}>\n {title && <Title data-testid=\"click-dialog-title\">{title}</Title>}\n {showClose && (\n <CloseButton\n data-testid=\"click-dialog-close\"\n onClose={onClose}\n />\n )}\n </TitleArea>\n <Spacer size=\"sm\" />\n </>\n )}\n\n {children}\n </ContentArea>\n </RadixDialog.Portal>\n );\n};\n\nDialogContent.displayName = 'DialogContent';\nDialog.Content = DialogContent;\n"],"names":["Dialog","children","props","Trigger","styled","RadixDialog","withConfig","componentId","DialogTrigger","asChild","displayName","DialogClose","label","type","Close","overlayShow","keyframes","opacity","contentShow","transform","DialogOverlay","Overlay","theme","click","dialog","color","opaqueBackground","default","ContentArea","Content","background","radii","all","$reducePadding","sizes","space","y","x","shadow","global","stroke","breakpoint","sm","TitleArea","div","$onlyClose","Title","h2","typography","title","CloseButton","onClose","Icon","DialogContent","showClose","forceMount","container","showOverlay","reducePadding"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import * as RadixDialog from '@radix-ui/react-dialog';\nimport { keyframes, styled } from 'styled-components';\nimport { Button, ButtonProps } from '@/components/Button';\nimport { Icon } from '@/components/Icon';\nimport { Spacer } from '@/components/Spacer';\nimport { CrossButton } from '@/components/CrossButton';\nimport { DialogContentProps, DialogProps, DialogTriggerProps } from './Dialog.types';\n\nexport const Dialog = ({ children, ...props }: DialogProps) => {\n return <RadixDialog.Root {...props}>{children}</RadixDialog.Root>;\n};\n\n// Dialog Trigger\nconst Trigger = styled(RadixDialog.Trigger)`\n width: fit-content;\n background: transparent;\n border: none;\n cursor: pointer;\n`;\n\nconst DialogTrigger = ({ children, asChild, ...props }: DialogTriggerProps) => {\n if (asChild) {\n // Pass all props to RadixDialog.Trigger, no styled wrapper\n return (\n <RadixDialog.Trigger\n asChild\n {...props}\n >\n {children}\n </RadixDialog.Trigger>\n );\n }\n // Use styled Trigger if not asChild\n return <Trigger {...props}>{children}</Trigger>;\n};\n\nDialogTrigger.displayName = 'DialogTrigger';\nDialog.Trigger = DialogTrigger;\n\nconst DialogClose = ({ label = 'Close', type = 'secondary', ...props }: ButtonProps) => (\n <RadixDialog.Close asChild>\n <Button\n type={type}\n label={label}\n {...props}\n />\n </RadixDialog.Close>\n);\n\nDialogClose.displayName = 'DialogClose';\nDialog.Close = DialogClose;\n\n// Dialog Content\nconst overlayShow = keyframes({\n '0%': { opacity: 0 },\n '100%': { opacity: 1 },\n});\n\nconst contentShow = keyframes({\n '0%': { opacity: 0, transform: 'translate(-50%, -48%) scale(.96)' },\n '100%': { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },\n});\n\nconst DialogOverlay = styled(RadixDialog.Overlay)`\n background-color: ${({ theme }) => theme.click.dialog.color.opaqueBackground.default};\n position: fixed;\n inset: 0;\n animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);\n`;\n\nconst ContentArea = styled(RadixDialog.Content)<{ $reducePadding?: boolean }>`\n background: ${({ theme }) => theme.click.dialog.color.background.default};\n border-radius: ${({ theme }) => theme.click.dialog.radii.all};\n padding-block: ${({ theme, $reducePadding = false }) =>\n $reducePadding ? theme.sizes[4] : theme.click.dialog.space.y};\n padding-inline: ${({ theme, $reducePadding = false }) =>\n $reducePadding ? theme.sizes[4] : theme.click.dialog.space.x};\n box-shadow: ${({ theme }) => theme.click.dialog.shadow.default};\n border: 1px solid ${({ theme }) => theme.click.global.color.stroke.default};\n width: 75%;\n max-width: 670px;\n position: fixed;\n top: 50%;\n left: 50%;\n max-height: 75%;\n overflow: auto;\n transform: translate(-50%, -50%);\n animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);\n outline: none;\n\n @media (max-width: ${({ theme }) => theme.breakpoint.sizes.sm}) {\n max-height: 100%;\n border-radius: 0;\n width: 100%;\n }\n`;\n\nconst TitleArea = styled.div<{ $onlyClose?: boolean }>`\n display: flex;\n justify-content: ${({ $onlyClose }) => ($onlyClose ? 'flex-end' : 'space-between')};\n align-items: center;\n min-height: ${({ theme }) => theme.sizes[9]}; // 32px\n`;\n\nconst Title = styled(RadixDialog.Title)`\n font: ${({ theme }) => theme.click.dialog.typography.title.default};\n padding: 0;\n margin: 0;\n`;\n\nconst Description = styled(RadixDialog.Description)`\n font: ${({ theme }) => theme.click.dialog.typography.description.default};\n color: ${({ theme }) => theme.click.dialog.color.description.default};\n padding: 0;\n margin: 0;\n`;\n\nconst CloseButton = ({ onClose }: { onClose?: () => void }) => (\n <RadixDialog.Close asChild>\n <CrossButton onClick={onClose}>\n <Icon\n name=\"cross\"\n size=\"lg\"\n />\n </CrossButton>\n </RadixDialog.Close>\n);\n\nconst DialogContent = ({\n title,\n description,\n children,\n showClose,\n onClose,\n forceMount,\n container,\n showOverlay = true,\n reducePadding = false,\n ...props\n}: DialogContentProps) => {\n return (\n <RadixDialog.Portal\n forceMount={forceMount}\n container={container}\n >\n {showOverlay && <DialogOverlay />}\n <ContentArea\n data-testid=\"click-dialog-contentarea\"\n $reducePadding={reducePadding}\n {...props}\n >\n {(title || showClose) && (\n <>\n <TitleArea $onlyClose={!!showClose && !title}>\n {title && <Title data-testid=\"click-dialog-title\">{title}</Title>}\n {showClose && (\n <CloseButton\n data-testid=\"click-dialog-close\"\n onClose={onClose}\n />\n )}\n </TitleArea>\n <Spacer size=\"sm\" />\n </>\n )}\n {description && <Description>{description}</Description>}\n {children}\n </ContentArea>\n </RadixDialog.Portal>\n );\n};\n\nDialogContent.displayName = 'DialogContent';\nDialog.Content = DialogContent;\n"],"names":["Dialog","children","props","Trigger","styled","RadixDialog","withConfig","componentId","DialogTrigger","asChild","displayName","DialogClose","label","type","Close","overlayShow","keyframes","opacity","contentShow","transform","DialogOverlay","Overlay","theme","click","dialog","color","opaqueBackground","default","ContentArea","Content","background","radii","all","$reducePadding","sizes","space","y","x","shadow","global","stroke","breakpoint","sm","TitleArea","div","$onlyClose","Title","typography","title","Description","description","CloseButton","onClose","Icon","DialogContent","showClose","forceMount","container","showOverlay","reducePadding"],"mappings":"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"}
|
|
@@ -11,7 +11,7 @@ export declare const Dialog: {
|
|
|
11
11
|
displayName: string;
|
|
12
12
|
};
|
|
13
13
|
Content: {
|
|
14
|
-
({ title, children, showClose, onClose, forceMount, container, showOverlay, reducePadding, ...props }: DialogContentProps): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
({ title, description, children, showClose, onClose, forceMount, container, showOverlay, reducePadding, ...props }: DialogContentProps): import("react/jsx-runtime").JSX.Element;
|
|
15
15
|
displayName: string;
|
|
16
16
|
};
|
|
17
17
|
};
|
|
@@ -13,6 +13,7 @@ export interface DialogTriggerProps extends React.ComponentPropsWithoutRef<'butt
|
|
|
13
13
|
}
|
|
14
14
|
export interface DialogContentProps extends RadixDialog.DialogContentProps {
|
|
15
15
|
children: ReactNode;
|
|
16
|
+
description?: string;
|
|
16
17
|
showClose?: boolean;
|
|
17
18
|
forceMount?: true;
|
|
18
19
|
container?: HTMLElement | null;
|