@spark-ui/components 13.0.3-beta.0 → 13.0.3
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/accordion/index.d.mts +2 -2
- package/dist/accordion/index.d.ts +2 -2
- package/dist/accordion/index.js +5 -5
- package/dist/accordion/index.js.map +1 -1
- package/dist/accordion/index.mjs +5 -5
- package/dist/accordion/index.mjs.map +1 -1
- package/dist/alert-dialog/index.d.mts +1 -1
- package/dist/alert-dialog/index.d.ts +1 -1
- package/dist/alert-dialog/index.js +15 -10
- package/dist/alert-dialog/index.js.map +1 -1
- package/dist/alert-dialog/index.mjs +15 -10
- package/dist/alert-dialog/index.mjs.map +1 -1
- package/dist/avatar/index.mjs +2 -2
- package/dist/carousel/index.mjs +2 -2
- package/dist/collapsible/index.d.mts +1 -1
- package/dist/collapsible/index.d.ts +1 -1
- package/dist/collapsible/index.js +3 -3
- package/dist/collapsible/index.js.map +1 -1
- package/dist/collapsible/index.mjs +3 -3
- package/dist/collapsible/index.mjs.map +1 -1
- package/dist/combobox/index.mjs +3 -3
- package/dist/dialog/index.mjs +2 -2
- package/dist/docgen.json +3098 -3129
- package/dist/drawer/index.d.mts +29 -37
- package/dist/drawer/index.d.ts +29 -37
- package/dist/drawer/index.js +89 -125
- package/dist/drawer/index.js.map +1 -1
- package/dist/drawer/index.mjs +89 -127
- package/dist/drawer/index.mjs.map +1 -1
- package/dist/dropdown/index.mjs +2 -2
- package/dist/file-upload/index.mjs +3 -3
- package/dist/pagination/index.mjs +3 -3
- package/dist/popover/index.mjs +1 -1
- package/dist/scrolling-list/index.mjs +3 -3
- package/dist/snackbar/index.mjs +3 -3
- package/dist/stepper/index.mjs +2 -2
- package/dist/tabs/index.mjs +3 -3
- package/dist/toast/index.d.mts +1 -1
- package/dist/toast/index.d.ts +1 -1
- package/dist/toast/index.js +3 -3
- package/dist/toast/index.js.map +1 -1
- package/dist/toast/index.mjs +6 -6
- package/dist/toast/index.mjs.map +1 -1
- package/package.json +6 -6
- package/dist/DialogTrigger-8oDlAJjU.d.mts +0 -142
- package/dist/DialogTrigger-8oDlAJjU.d.ts +0 -142
- package/dist/DialogTrigger-woU7vsJi.d.mts +0 -142
- package/dist/DialogTrigger-woU7vsJi.d.ts +0 -142
- package/dist/chunk-2BSBKLHG.mjs +0 -358
- package/dist/chunk-2BSBKLHG.mjs.map +0 -1
- package/dist/chunk-D7YBYT5H.mjs +0 -308
- package/dist/chunk-D7YBYT5H.mjs.map +0 -1
- package/dist/chunk-HEKSVWYW.mjs +0 -800
- package/dist/chunk-HEKSVWYW.mjs.map +0 -1
- package/dist/chunk-TKAU6SMC.mjs +0 -197
- package/dist/chunk-TKAU6SMC.mjs.map +0 -1
- package/dist/chunk-WA56YHV3.mjs +0 -358
- package/dist/chunk-WA56YHV3.mjs.map +0 -1
- package/dist/chunk-WLI4EPS6.mjs +0 -358
- package/dist/chunk-WLI4EPS6.mjs.map +0 -1
- package/dist/chunk-XYK6V3JF.mjs +0 -53
- package/dist/chunk-XYK6V3JF.mjs.map +0 -1
- package/dist/index-BRKaV3lI.d.mts +0 -93
- package/dist/index-BRKaV3lI.d.ts +0 -93
- package/dist/index-Cw_DIfiq.d.mts +0 -93
- package/dist/index-Cw_DIfiq.d.ts +0 -93
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/dialog/Dialog.tsx","../src/dialog/DialogContext.tsx","../src/dialog/DialogBody.tsx","../src/dialog/DialogClose.tsx","../src/dialog/DialogCloseButton.tsx","../src/dialog/DialogContent.tsx","../src/dialog/DialogContent.styles.tsx","../src/dialog/DialogDescription.tsx","../src/dialog/DialogFooter.tsx","../src/dialog/DialogHeader.tsx","../src/dialog/DialogOverlay.tsx","../src/dialog/DialogPortal.tsx","../src/dialog/DialogTitle.tsx","../src/dialog/DialogTrigger.tsx","../src/dialog/index.ts"],"sourcesContent":["import { Dialog as RadixDialog } from 'radix-ui'\nimport { type ReactElement, useEffect, useRef } from 'react'\n\nimport { DialogProvider } from './DialogContext'\n\nexport interface DialogProps {\n /**\n * Children of the component.\n */\n children?: RadixDialog.DialogProps['children']\n /**\n * Specifies if the dialog is open or not.\n */\n open?: RadixDialog.DialogProps['open']\n /**\n * Default open state.\n */\n defaultOpen?: RadixDialog.DialogProps['defaultOpen']\n /**\n * Handler executen on every dialog open state change.\n */\n onOpenChange?: RadixDialog.DialogProps['onOpenChange']\n /**\n * Specifies if the dialog is a modal.\n */\n modal?: RadixDialog.DialogProps['modal']\n /**\n * Specifies if the dialog should have a fade animation on its body (in case it is scrollable).\n */\n withFade?: boolean\n}\n\nexport const Dialog = ({ children, withFade = false, ...rest }: DialogProps): ReactElement => {\n const open = rest.open\n const activeElementRef = useRef<Element>(null)\n\n /**\n * This function captures the active element when the Dialog is opened\n * and sets focus back to it when the Dialog is closed.\n */\n function handleActiveElementFocus() {\n if (open && document.activeElement) {\n activeElementRef.current = document.activeElement\n }\n\n if (!open) {\n setTimeout(() => {\n if (!(activeElementRef.current instanceof HTMLElement)) return\n activeElementRef.current.focus()\n }, 0)\n }\n }\n\n useEffect(handleActiveElementFocus, [open])\n\n return (\n <DialogProvider withFade={withFade}>\n <RadixDialog.Root {...rest}>{children}</RadixDialog.Root>\n </DialogProvider>\n )\n}\n\nDialog.displayName = 'Dialog.Root'\n","import { createContext, type ReactNode, useContext, useState } from 'react'\n\nexport interface DialogContextState {\n isFullScreen: boolean\n setIsFullScreen: (value: boolean) => void\n withFade: boolean\n}\n\nconst DialogContext = createContext<DialogContextState | null>(null)\n\nexport const DialogProvider = ({\n children: childrenProp,\n withFade = false,\n}: {\n children: ReactNode\n withFade?: boolean\n}) => {\n const [isFullScreen, setIsFullScreen] = useState(false)\n\n return (\n <DialogContext.Provider\n value={{\n isFullScreen,\n setIsFullScreen,\n withFade,\n }}\n >\n {childrenProp}\n </DialogContext.Provider>\n )\n}\n\nexport const useDialog = () => {\n const context = useContext(DialogContext)\n\n if (!context) {\n throw Error('useDialog must be used within a Dialog provider')\n }\n\n return context\n}\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { useScrollOverflow } from '@spark-ui/hooks/use-scroll-overflow'\nimport { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref, useRef } from 'react'\n\nimport { useDialog } from './DialogContext'\n\nexport interface BodyProps {\n children: ReactNode\n className?: string\n tabIndex?: number\n ref?: Ref<HTMLDivElement>\n inset?: boolean\n}\n\nexport const Body = ({\n children,\n className,\n inset = false,\n ref: forwardedRef,\n ...rest\n}: BodyProps): ReactElement => {\n const scrollAreaRef = useRef<HTMLDivElement>(null)\n const ref = useMergeRefs(forwardedRef, scrollAreaRef)\n\n const { withFade } = useDialog()\n\n const overflow = useScrollOverflow(scrollAreaRef)\n\n return (\n <div\n data-spark-component=\"dialog-body\"\n ref={ref}\n className={cx(\n 'focus-visible:u-outline relative grow overflow-y-auto outline-hidden',\n 'transition-all duration-300',\n {\n ['px-xl py-lg']: !inset,\n },\n className\n )}\n style={{\n ...(withFade && {\n maskImage:\n 'linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))',\n maskSize: `100% calc(100% + ${overflow.top ? '0px' : '44px'} + ${overflow.bottom ? '0px' : '44px'})`,\n maskPosition: `0 ${overflow.top ? '0px' : '-44px'}`,\n }),\n }}\n {...rest}\n >\n {children}\n </div>\n )\n}\n\nBody.displayName = 'Dialog.Body'\n","import { Dialog as RadixDialog } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type CloseProps = RadixDialog.DialogCloseProps & {\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const Close = (props: CloseProps) => <RadixDialog.Close {...props} />\n\nClose.displayName = 'Dialog.Close'\n","import { Close as CloseSVG } from '@spark-ui/icons/Close'\nimport { cx } from 'class-variance-authority'\n\nimport { Icon } from '../icon'\nimport { IconButton, type IconButtonProps } from '../icon-button'\nimport { Close, CloseProps } from './DialogClose'\n\nexport type CloseButtonProps = CloseProps &\n Pick<IconButtonProps, 'size' | 'intent' | 'design' | 'aria-label'>\n\nconst Root = ({\n 'aria-label': ariaLabel,\n className,\n size = 'md',\n intent = 'neutral',\n design = 'ghost',\n children = <CloseSVG />,\n ref,\n ...rest\n}: CloseButtonProps) => {\n return (\n <Close\n data-spark-component=\"dialog-close-button\"\n data-part=\"close\"\n ref={ref}\n className={cx(['absolute', 'top-md', 'right-xl'], className)}\n asChild\n {...rest}\n >\n <IconButton intent={intent} size={size} design={design} aria-label={ariaLabel}>\n <Icon>{children}</Icon>\n </IconButton>\n </Close>\n )\n}\n\nexport const CloseButton = Object.assign(Root, {\n id: 'CloseButton',\n})\n\nRoot.displayName = 'Dialog.CloseButton'\n","import { Dialog as RadixDialog } from 'radix-ui'\nimport { type ReactElement, Ref, useEffect } from 'react'\n\nimport { dialogContentStyles, type DialogContentStylesProps } from './DialogContent.styles'\nimport { useDialog } from './DialogContext'\n\nexport interface ContentProps extends RadixDialog.DialogContentProps, DialogContentStylesProps {\n /**\n * When set to true, the content will adjust its width to fit the content rather than taking up the full available width.\n */\n isNarrow?: boolean\n ref?: Ref<HTMLDivElement>\n}\n\nexport const Content = ({\n children,\n className,\n isNarrow = false,\n size = 'md',\n onInteractOutside,\n ref,\n ...rest\n}: ContentProps): ReactElement => {\n const { setIsFullScreen } = useDialog()\n\n useEffect(() => {\n if (size === 'fullscreen') setIsFullScreen(true)\n\n return () => setIsFullScreen(false)\n }, [setIsFullScreen, size])\n\n return (\n <RadixDialog.Content\n data-spark-component=\"dialog-content\"\n ref={ref}\n className={dialogContentStyles({\n className,\n isNarrow,\n size,\n })}\n onInteractOutside={e => {\n const isForegroundElement = (e.target as HTMLElement).closest('.z-toast, .z-popover')\n\n /**\n * The focus trap of the dialog applies `pointer-events-none` on the body of the page in the background, but\n * some components with an higher z-index have `pointer-events-auto` applied on them to remain interactive and ignore the focust trap (ex: a Snackbar with actions).\n *\n * Clicking on the snackbar will be considered as an \"outside click\" and close the dialog. We want to prevent this.\n */\n if (isForegroundElement) {\n e.preventDefault()\n }\n\n onInteractOutside?.(e)\n }}\n {...rest}\n >\n {children}\n </RadixDialog.Content>\n )\n}\n\nContent.displayName = 'Dialog.Content'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const dialogContentStyles = cva(\n [\n 'z-modal flex flex-col bg-surface group',\n 'focus-visible:outline-hidden focus-visible:u-outline',\n '[&:not(:has(footer))]:pb-lg',\n '[&:not(:has(header))]:pt-lg',\n ],\n {\n variants: {\n size: {\n fullscreen: 'fixed size-full top-0 left-0',\n sm: 'max-w-sz-480',\n md: 'max-w-sz-672',\n lg: 'max-w-sz-864',\n },\n isNarrow: {\n true: [],\n false: [],\n },\n },\n compoundVariants: [\n {\n size: ['sm', 'md', 'lg'],\n class: [\n 'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',\n 'max-h-[80%]',\n 'shadow-md rounded-lg',\n 'data-[state=open]:animate-fade-in',\n 'data-[state=closed]:animate-fade-out',\n ],\n },\n {\n size: ['sm', 'md', 'lg'],\n isNarrow: false,\n class: ['w-full'],\n },\n ],\n defaultVariants: {\n size: 'md',\n isNarrow: false,\n },\n }\n)\n\nexport type DialogContentStylesProps = VariantProps<typeof dialogContentStyles>\n","import { Dialog as RadixDialog } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type DescriptionProps = RadixDialog.DialogDescriptionProps & {\n ref?: Ref<HTMLParagraphElement>\n}\n\nexport const Description = (props: DescriptionProps) => (\n <RadixDialog.Description data-spark-component=\"dialog-description\" {...props} />\n)\n\nDescription.displayName = 'Dialog.Description'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface FooterProps {\n children: ReactNode\n className?: string\n ref?: Ref<HTMLDivElement>\n}\n\nexport const Footer = ({ children, className, ref, ...rest }: FooterProps): ReactElement => (\n <footer\n data-spark-component=\"dialog-footer\"\n ref={ref}\n className={cx(className, ['px-xl', 'py-lg'])}\n {...rest}\n >\n {children}\n </footer>\n)\n\nFooter.displayName = 'Dialog.Footer'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface HeaderProps {\n children: ReactNode\n className?: string\n ref?: Ref<HTMLDivElement>\n}\n\nexport const Header = ({ children, className, ref, ...rest }: HeaderProps): ReactElement => (\n <header\n data-spark-component=\"dialog-header\"\n ref={ref}\n className={cx(className, ['px-xl', 'py-lg'])}\n {...rest}\n >\n {children}\n </header>\n)\n\nHeader.displayName = 'Dialog.Header'\n","import { cx } from 'class-variance-authority'\nimport { Dialog as RadixDialog } from 'radix-ui'\nimport { type ReactElement, Ref } from 'react'\n\nimport { useDialog } from './DialogContext'\n\nexport type OverlayProps = RadixDialog.DialogOverlayProps & {\n ref?: Ref<HTMLDivElement>\n}\n\nexport const Overlay = ({ className, ref, ...rest }: OverlayProps): ReactElement | null => {\n const { isFullScreen } = useDialog()\n\n return (\n <RadixDialog.Overlay\n data-spark-component=\"dialog-overlay\"\n ref={ref}\n className={cx(\n isFullScreen ? 'hidden' : 'fixed',\n ['top-0', 'left-0', 'w-screen', 'h-screen', 'z-overlay'],\n ['bg-overlay/dim-1'],\n ['data-[state=open]:animate-fade-in'],\n ['data-[state=closed]:animate-fade-out'],\n className\n )}\n {...rest}\n />\n )\n}\n\nOverlay.displayName = 'Dialog.Overlay'\n","import { Dialog as RadixDialog } from 'radix-ui'\nimport { type ReactElement } from 'react'\n\nexport type PortalProps = RadixDialog.DialogPortalProps\n\nexport const Portal = ({ children, ...rest }: PortalProps): ReactElement => (\n <RadixDialog.Portal {...rest}>{children}</RadixDialog.Portal>\n)\n\nPortal.displayName = 'Dialog.Portal'\n","import { cx } from 'class-variance-authority'\nimport { Dialog as RadixDialog } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type TitleProps = RadixDialog.DialogTitleProps & {\n ref?: Ref<HTMLHeadingElement>\n}\n\nexport const Title = ({ className, ref, ...others }: TitleProps) => {\n return (\n <RadixDialog.Title\n data-spark-component=\"dialog-title\"\n ref={ref}\n className={cx(\n 'text-headline-1 text-on-surface',\n 'group-has-data-[part=close]:pr-3xl',\n className\n )}\n {...others}\n />\n )\n}\n\nTitle.displayName = 'Dialog.Title'\n","import { Dialog as RadixDialog } from 'radix-ui'\nimport { type ReactElement, ReactNode, Ref } from 'react'\n\nexport interface TriggerProps {\n /**\n * Children of the component.\n */\n children?: ReactNode\n /**\n * Change the component to the HTML tag or custom component of the only child.\n */\n asChild?: RadixDialog.DialogTriggerProps['asChild']\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const Trigger = (props: TriggerProps): ReactElement => (\n <RadixDialog.Trigger data-spark-component=\"dialog-trigger\" {...props} />\n)\n\nTrigger.displayName = 'Dialog.Trigger'\n","import { Dialog as Root } from './Dialog'\nimport { Body } from './DialogBody'\nimport { Close } from './DialogClose'\nimport { CloseButton } from './DialogCloseButton'\nimport { Content } from './DialogContent'\nimport { Description } from './DialogDescription' // aria-describedby\nimport { Footer } from './DialogFooter'\nimport { Header } from './DialogHeader'\nimport { Overlay } from './DialogOverlay'\nimport { Portal } from './DialogPortal'\nimport { Title } from './DialogTitle' // aria-labelledby\nimport { Trigger } from './DialogTrigger'\n\nexport const Dialog: typeof Root & {\n Trigger: typeof Trigger\n Portal: typeof Portal\n Overlay: typeof Overlay\n Content: typeof Content\n Header: typeof Header\n Body: typeof Body\n Footer: typeof Footer\n Close: typeof Close\n CloseButton: typeof CloseButton\n Title: typeof Title\n Description: typeof Description\n} = Object.assign(Root, {\n Trigger,\n Portal,\n Overlay,\n Content,\n Header,\n Body,\n Footer,\n Close,\n CloseButton,\n Title,\n Description,\n})\n\nDialog.displayName = 'Dialog'\nDialog.Trigger.displayName = 'Dialog.Trigger'\nTrigger.displayName = 'Dialog.Trigger'\nPortal.displayName = 'Dialog.Portal'\nOverlay.displayName = 'Dialog.Overlay'\nContent.displayName = 'Dialog.Content'\nHeader.displayName = 'Dialog.Header'\nBody.displayName = 'Dialog.Body'\nFooter.displayName = 'Dialog.Footer'\nCloseButton.displayName = 'Dialog.CloseButton'\nTitle.displayName = 'Dialog.Title'\nDescription.displayName = 'Dialog.Description'\n\nexport { type DialogProps } from './Dialog'\nexport { type ContentProps as DialogContentProps } from './DialogContent'\nexport { type HeaderProps as DialogHeaderProps } from './DialogHeader'\nexport { type BodyProps as DialogBodyProps } from './DialogBody'\nexport { type FooterProps as DialogFooterProps } from './DialogFooter'\nexport { type TriggerProps as DialogTriggerProps } from './DialogTrigger'\nexport { type OverlayProps as DialogOverlayProps } from './DialogOverlay'\nexport { type PortalProps as DialogPortalProps } from './DialogPortal'\nexport { type TitleProps as DialogTitleProps } from './DialogTitle'\nexport { type DescriptionProps as DialogDescriptionProps } from './DialogDescription'\nexport { type CloseProps as DialogCloseProps } from './DialogClose'\nexport { type CloseButtonProps as DialogCloseButtonProps } from './DialogCloseButton'\n"],"mappings":"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","names":["jsx","useRef","jsx","useRef","RadixDialog","jsx","cx","jsx","cx","RadixDialog","useEffect","jsx","useEffect","RadixDialog","RadixDialog","jsx","cx","jsx","cx","jsx","cx","RadixDialog","jsx","RadixDialog","cx","RadixDialog","jsx","cx","RadixDialog","jsx","RadixDialog","jsx","Dialog"]}
|
package/dist/chunk-WLI4EPS6.mjs
DELETED
|
@@ -1,358 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
IconButton
|
|
3
|
-
} from "./chunk-DCXWGQVZ.mjs";
|
|
4
|
-
import {
|
|
5
|
-
Icon
|
|
6
|
-
} from "./chunk-UMUMFMFB.mjs";
|
|
7
|
-
|
|
8
|
-
// src/dialog/Dialog.tsx
|
|
9
|
-
import { Dialog as RadixDialog } from "radix-ui";
|
|
10
|
-
import { useEffect, useRef } from "react";
|
|
11
|
-
|
|
12
|
-
// src/dialog/DialogContext.tsx
|
|
13
|
-
import { createContext, useContext, useState } from "react";
|
|
14
|
-
import { jsx } from "react/jsx-runtime";
|
|
15
|
-
var DialogContext = createContext(null);
|
|
16
|
-
var DialogProvider = ({
|
|
17
|
-
children: childrenProp,
|
|
18
|
-
withFade = false
|
|
19
|
-
}) => {
|
|
20
|
-
const [isFullScreen, setIsFullScreen] = useState(false);
|
|
21
|
-
return /* @__PURE__ */ jsx(
|
|
22
|
-
DialogContext.Provider,
|
|
23
|
-
{
|
|
24
|
-
value: {
|
|
25
|
-
isFullScreen,
|
|
26
|
-
setIsFullScreen,
|
|
27
|
-
withFade
|
|
28
|
-
},
|
|
29
|
-
children: childrenProp
|
|
30
|
-
}
|
|
31
|
-
);
|
|
32
|
-
};
|
|
33
|
-
var useDialog = () => {
|
|
34
|
-
const context = useContext(DialogContext);
|
|
35
|
-
if (!context) {
|
|
36
|
-
throw Error("useDialog must be used within a Dialog provider");
|
|
37
|
-
}
|
|
38
|
-
return context;
|
|
39
|
-
};
|
|
40
|
-
|
|
41
|
-
// src/dialog/Dialog.tsx
|
|
42
|
-
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
43
|
-
var Dialog = ({ children, withFade = false, ...rest }) => {
|
|
44
|
-
const open = rest.open;
|
|
45
|
-
const activeElementRef = useRef(null);
|
|
46
|
-
function handleActiveElementFocus() {
|
|
47
|
-
if (open && document.activeElement) {
|
|
48
|
-
activeElementRef.current = document.activeElement;
|
|
49
|
-
}
|
|
50
|
-
if (!open) {
|
|
51
|
-
setTimeout(() => {
|
|
52
|
-
if (!(activeElementRef.current instanceof HTMLElement)) return;
|
|
53
|
-
activeElementRef.current.focus();
|
|
54
|
-
}, 0);
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
useEffect(handleActiveElementFocus, [open]);
|
|
58
|
-
return /* @__PURE__ */ jsx2(DialogProvider, { withFade, children: /* @__PURE__ */ jsx2(RadixDialog.Root, { ...rest, children }) });
|
|
59
|
-
};
|
|
60
|
-
Dialog.displayName = "Dialog.Root";
|
|
61
|
-
|
|
62
|
-
// src/dialog/DialogBody.tsx
|
|
63
|
-
import { useMergeRefs } from "@spark-ui/hooks/use-merge-refs";
|
|
64
|
-
import { useScrollOverflow } from "@spark-ui/hooks/use-scroll-overflow";
|
|
65
|
-
import { cx } from "class-variance-authority";
|
|
66
|
-
import { useRef as useRef2 } from "react";
|
|
67
|
-
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
68
|
-
var Body = ({
|
|
69
|
-
children,
|
|
70
|
-
className,
|
|
71
|
-
inset = false,
|
|
72
|
-
ref: forwardedRef,
|
|
73
|
-
...rest
|
|
74
|
-
}) => {
|
|
75
|
-
const scrollAreaRef = useRef2(null);
|
|
76
|
-
const ref = useMergeRefs(forwardedRef, scrollAreaRef);
|
|
77
|
-
const { withFade } = useDialog();
|
|
78
|
-
const { overflow } = useScrollOverflow(scrollAreaRef);
|
|
79
|
-
return /* @__PURE__ */ jsx3(
|
|
80
|
-
"div",
|
|
81
|
-
{
|
|
82
|
-
"data-spark-component": "dialog-body",
|
|
83
|
-
ref,
|
|
84
|
-
className: cx(
|
|
85
|
-
"focus-visible:u-outline relative grow overflow-y-auto outline-hidden",
|
|
86
|
-
"transition-all duration-300",
|
|
87
|
-
{
|
|
88
|
-
["px-xl py-lg"]: !inset
|
|
89
|
-
},
|
|
90
|
-
className
|
|
91
|
-
),
|
|
92
|
-
style: {
|
|
93
|
-
...withFade && {
|
|
94
|
-
maskImage: "linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))",
|
|
95
|
-
maskSize: `100% calc(100% + ${overflow.top ? "0px" : "44px"} + ${overflow.bottom ? "0px" : "44px"})`,
|
|
96
|
-
maskPosition: `0 ${overflow.top ? "0px" : "-44px"}`
|
|
97
|
-
}
|
|
98
|
-
},
|
|
99
|
-
...rest,
|
|
100
|
-
children
|
|
101
|
-
}
|
|
102
|
-
);
|
|
103
|
-
};
|
|
104
|
-
Body.displayName = "Dialog.Body";
|
|
105
|
-
|
|
106
|
-
// src/dialog/DialogClose.tsx
|
|
107
|
-
import { Dialog as RadixDialog2 } from "radix-ui";
|
|
108
|
-
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
109
|
-
var Close = (props) => /* @__PURE__ */ jsx4(RadixDialog2.Close, { ...props });
|
|
110
|
-
Close.displayName = "Dialog.Close";
|
|
111
|
-
|
|
112
|
-
// src/dialog/DialogCloseButton.tsx
|
|
113
|
-
import { Close as CloseSVG } from "@spark-ui/icons/Close";
|
|
114
|
-
import { cx as cx2 } from "class-variance-authority";
|
|
115
|
-
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
116
|
-
var Root = ({
|
|
117
|
-
"aria-label": ariaLabel,
|
|
118
|
-
className,
|
|
119
|
-
size = "md",
|
|
120
|
-
intent = "neutral",
|
|
121
|
-
design = "ghost",
|
|
122
|
-
children = /* @__PURE__ */ jsx5(CloseSVG, {}),
|
|
123
|
-
ref,
|
|
124
|
-
...rest
|
|
125
|
-
}) => {
|
|
126
|
-
return /* @__PURE__ */ jsx5(
|
|
127
|
-
Close,
|
|
128
|
-
{
|
|
129
|
-
"data-spark-component": "dialog-close-button",
|
|
130
|
-
"data-part": "close",
|
|
131
|
-
ref,
|
|
132
|
-
className: cx2(["absolute", "top-md", "right-xl"], className),
|
|
133
|
-
asChild: true,
|
|
134
|
-
...rest,
|
|
135
|
-
children: /* @__PURE__ */ jsx5(IconButton, { intent, size, design, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx5(Icon, { children }) })
|
|
136
|
-
}
|
|
137
|
-
);
|
|
138
|
-
};
|
|
139
|
-
var CloseButton = Object.assign(Root, {
|
|
140
|
-
id: "CloseButton"
|
|
141
|
-
});
|
|
142
|
-
Root.displayName = "Dialog.CloseButton";
|
|
143
|
-
|
|
144
|
-
// src/dialog/DialogContent.tsx
|
|
145
|
-
import { Dialog as RadixDialog3 } from "radix-ui";
|
|
146
|
-
import { useEffect as useEffect2 } from "react";
|
|
147
|
-
|
|
148
|
-
// src/dialog/DialogContent.styles.tsx
|
|
149
|
-
import { cva } from "class-variance-authority";
|
|
150
|
-
var dialogContentStyles = cva(
|
|
151
|
-
[
|
|
152
|
-
"z-modal flex flex-col bg-surface group",
|
|
153
|
-
"focus-visible:outline-hidden focus-visible:u-outline",
|
|
154
|
-
"[&:not(:has(footer))]:pb-lg",
|
|
155
|
-
"[&:not(:has(header))]:pt-lg"
|
|
156
|
-
],
|
|
157
|
-
{
|
|
158
|
-
variants: {
|
|
159
|
-
size: {
|
|
160
|
-
fullscreen: "fixed size-full top-0 left-0",
|
|
161
|
-
sm: "max-w-sz-480",
|
|
162
|
-
md: "max-w-sz-672",
|
|
163
|
-
lg: "max-w-sz-864"
|
|
164
|
-
},
|
|
165
|
-
isNarrow: {
|
|
166
|
-
true: [],
|
|
167
|
-
false: []
|
|
168
|
-
}
|
|
169
|
-
},
|
|
170
|
-
compoundVariants: [
|
|
171
|
-
{
|
|
172
|
-
size: ["sm", "md", "lg"],
|
|
173
|
-
class: [
|
|
174
|
-
"fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
|
|
175
|
-
"max-h-[80%]",
|
|
176
|
-
"shadow-md rounded-lg",
|
|
177
|
-
"data-[state=open]:animate-fade-in",
|
|
178
|
-
"data-[state=closed]:animate-fade-out"
|
|
179
|
-
]
|
|
180
|
-
},
|
|
181
|
-
{
|
|
182
|
-
size: ["sm", "md", "lg"],
|
|
183
|
-
isNarrow: false,
|
|
184
|
-
class: ["w-full"]
|
|
185
|
-
}
|
|
186
|
-
],
|
|
187
|
-
defaultVariants: {
|
|
188
|
-
size: "md",
|
|
189
|
-
isNarrow: false
|
|
190
|
-
}
|
|
191
|
-
}
|
|
192
|
-
);
|
|
193
|
-
|
|
194
|
-
// src/dialog/DialogContent.tsx
|
|
195
|
-
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
196
|
-
var Content = ({
|
|
197
|
-
children,
|
|
198
|
-
className,
|
|
199
|
-
isNarrow = false,
|
|
200
|
-
size = "md",
|
|
201
|
-
onInteractOutside,
|
|
202
|
-
ref,
|
|
203
|
-
...rest
|
|
204
|
-
}) => {
|
|
205
|
-
const { setIsFullScreen } = useDialog();
|
|
206
|
-
useEffect2(() => {
|
|
207
|
-
if (size === "fullscreen") setIsFullScreen(true);
|
|
208
|
-
return () => setIsFullScreen(false);
|
|
209
|
-
}, [setIsFullScreen, size]);
|
|
210
|
-
return /* @__PURE__ */ jsx6(
|
|
211
|
-
RadixDialog3.Content,
|
|
212
|
-
{
|
|
213
|
-
"data-spark-component": "dialog-content",
|
|
214
|
-
ref,
|
|
215
|
-
className: dialogContentStyles({
|
|
216
|
-
className,
|
|
217
|
-
isNarrow,
|
|
218
|
-
size
|
|
219
|
-
}),
|
|
220
|
-
onInteractOutside: (e) => {
|
|
221
|
-
const isForegroundElement = e.target.closest(".z-toast, .z-popover");
|
|
222
|
-
if (isForegroundElement) {
|
|
223
|
-
e.preventDefault();
|
|
224
|
-
}
|
|
225
|
-
onInteractOutside?.(e);
|
|
226
|
-
},
|
|
227
|
-
...rest,
|
|
228
|
-
children
|
|
229
|
-
}
|
|
230
|
-
);
|
|
231
|
-
};
|
|
232
|
-
Content.displayName = "Dialog.Content";
|
|
233
|
-
|
|
234
|
-
// src/dialog/DialogDescription.tsx
|
|
235
|
-
import { Dialog as RadixDialog4 } from "radix-ui";
|
|
236
|
-
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
237
|
-
var Description = (props) => /* @__PURE__ */ jsx7(RadixDialog4.Description, { "data-spark-component": "dialog-description", ...props });
|
|
238
|
-
Description.displayName = "Dialog.Description";
|
|
239
|
-
|
|
240
|
-
// src/dialog/DialogFooter.tsx
|
|
241
|
-
import { cx as cx3 } from "class-variance-authority";
|
|
242
|
-
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
243
|
-
var Footer = ({ children, className, ref, ...rest }) => /* @__PURE__ */ jsx8(
|
|
244
|
-
"footer",
|
|
245
|
-
{
|
|
246
|
-
"data-spark-component": "dialog-footer",
|
|
247
|
-
ref,
|
|
248
|
-
className: cx3(className, ["px-xl", "py-lg"]),
|
|
249
|
-
...rest,
|
|
250
|
-
children
|
|
251
|
-
}
|
|
252
|
-
);
|
|
253
|
-
Footer.displayName = "Dialog.Footer";
|
|
254
|
-
|
|
255
|
-
// src/dialog/DialogHeader.tsx
|
|
256
|
-
import { cx as cx4 } from "class-variance-authority";
|
|
257
|
-
import { jsx as jsx9 } from "react/jsx-runtime";
|
|
258
|
-
var Header = ({ children, className, ref, ...rest }) => /* @__PURE__ */ jsx9(
|
|
259
|
-
"header",
|
|
260
|
-
{
|
|
261
|
-
"data-spark-component": "dialog-header",
|
|
262
|
-
ref,
|
|
263
|
-
className: cx4(className, ["px-xl", "py-lg"]),
|
|
264
|
-
...rest,
|
|
265
|
-
children
|
|
266
|
-
}
|
|
267
|
-
);
|
|
268
|
-
Header.displayName = "Dialog.Header";
|
|
269
|
-
|
|
270
|
-
// src/dialog/DialogOverlay.tsx
|
|
271
|
-
import { cx as cx5 } from "class-variance-authority";
|
|
272
|
-
import { Dialog as RadixDialog5 } from "radix-ui";
|
|
273
|
-
import { jsx as jsx10 } from "react/jsx-runtime";
|
|
274
|
-
var Overlay = ({ className, ref, ...rest }) => {
|
|
275
|
-
const { isFullScreen } = useDialog();
|
|
276
|
-
return /* @__PURE__ */ jsx10(
|
|
277
|
-
RadixDialog5.Overlay,
|
|
278
|
-
{
|
|
279
|
-
"data-spark-component": "dialog-overlay",
|
|
280
|
-
ref,
|
|
281
|
-
className: cx5(
|
|
282
|
-
isFullScreen ? "hidden" : "fixed",
|
|
283
|
-
["top-0", "left-0", "w-screen", "h-screen", "z-overlay"],
|
|
284
|
-
["bg-overlay/dim-1"],
|
|
285
|
-
["data-[state=open]:animate-fade-in"],
|
|
286
|
-
["data-[state=closed]:animate-fade-out"],
|
|
287
|
-
className
|
|
288
|
-
),
|
|
289
|
-
...rest
|
|
290
|
-
}
|
|
291
|
-
);
|
|
292
|
-
};
|
|
293
|
-
Overlay.displayName = "Dialog.Overlay";
|
|
294
|
-
|
|
295
|
-
// src/dialog/DialogPortal.tsx
|
|
296
|
-
import { Dialog as RadixDialog6 } from "radix-ui";
|
|
297
|
-
import { jsx as jsx11 } from "react/jsx-runtime";
|
|
298
|
-
var Portal = ({ children, ...rest }) => /* @__PURE__ */ jsx11(RadixDialog6.Portal, { ...rest, children });
|
|
299
|
-
Portal.displayName = "Dialog.Portal";
|
|
300
|
-
|
|
301
|
-
// src/dialog/DialogTitle.tsx
|
|
302
|
-
import { cx as cx6 } from "class-variance-authority";
|
|
303
|
-
import { Dialog as RadixDialog7 } from "radix-ui";
|
|
304
|
-
import { jsx as jsx12 } from "react/jsx-runtime";
|
|
305
|
-
var Title = ({ className, ref, ...others }) => {
|
|
306
|
-
return /* @__PURE__ */ jsx12(
|
|
307
|
-
RadixDialog7.Title,
|
|
308
|
-
{
|
|
309
|
-
"data-spark-component": "dialog-title",
|
|
310
|
-
ref,
|
|
311
|
-
className: cx6(
|
|
312
|
-
"text-headline-1 text-on-surface",
|
|
313
|
-
"group-has-data-[part=close]:pr-3xl",
|
|
314
|
-
className
|
|
315
|
-
),
|
|
316
|
-
...others
|
|
317
|
-
}
|
|
318
|
-
);
|
|
319
|
-
};
|
|
320
|
-
Title.displayName = "Dialog.Title";
|
|
321
|
-
|
|
322
|
-
// src/dialog/DialogTrigger.tsx
|
|
323
|
-
import { Dialog as RadixDialog8 } from "radix-ui";
|
|
324
|
-
import { jsx as jsx13 } from "react/jsx-runtime";
|
|
325
|
-
var Trigger = (props) => /* @__PURE__ */ jsx13(RadixDialog8.Trigger, { "data-spark-component": "dialog-trigger", ...props });
|
|
326
|
-
Trigger.displayName = "Dialog.Trigger";
|
|
327
|
-
|
|
328
|
-
// src/dialog/index.ts
|
|
329
|
-
var Dialog2 = Object.assign(Dialog, {
|
|
330
|
-
Trigger,
|
|
331
|
-
Portal,
|
|
332
|
-
Overlay,
|
|
333
|
-
Content,
|
|
334
|
-
Header,
|
|
335
|
-
Body,
|
|
336
|
-
Footer,
|
|
337
|
-
Close,
|
|
338
|
-
CloseButton,
|
|
339
|
-
Title,
|
|
340
|
-
Description
|
|
341
|
-
});
|
|
342
|
-
Dialog2.displayName = "Dialog";
|
|
343
|
-
Dialog2.Trigger.displayName = "Dialog.Trigger";
|
|
344
|
-
Trigger.displayName = "Dialog.Trigger";
|
|
345
|
-
Portal.displayName = "Dialog.Portal";
|
|
346
|
-
Overlay.displayName = "Dialog.Overlay";
|
|
347
|
-
Content.displayName = "Dialog.Content";
|
|
348
|
-
Header.displayName = "Dialog.Header";
|
|
349
|
-
Body.displayName = "Dialog.Body";
|
|
350
|
-
Footer.displayName = "Dialog.Footer";
|
|
351
|
-
CloseButton.displayName = "Dialog.CloseButton";
|
|
352
|
-
Title.displayName = "Dialog.Title";
|
|
353
|
-
Description.displayName = "Dialog.Description";
|
|
354
|
-
|
|
355
|
-
export {
|
|
356
|
-
Dialog2 as Dialog
|
|
357
|
-
};
|
|
358
|
-
//# sourceMappingURL=chunk-WLI4EPS6.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/dialog/Dialog.tsx","../src/dialog/DialogContext.tsx","../src/dialog/DialogBody.tsx","../src/dialog/DialogClose.tsx","../src/dialog/DialogCloseButton.tsx","../src/dialog/DialogContent.tsx","../src/dialog/DialogContent.styles.tsx","../src/dialog/DialogDescription.tsx","../src/dialog/DialogFooter.tsx","../src/dialog/DialogHeader.tsx","../src/dialog/DialogOverlay.tsx","../src/dialog/DialogPortal.tsx","../src/dialog/DialogTitle.tsx","../src/dialog/DialogTrigger.tsx","../src/dialog/index.ts"],"sourcesContent":["import { Dialog as RadixDialog } from 'radix-ui'\nimport { type ReactElement, useEffect, useRef } from 'react'\n\nimport { DialogProvider } from './DialogContext'\n\nexport interface DialogProps {\n /**\n * Children of the component.\n */\n children?: RadixDialog.DialogProps['children']\n /**\n * Specifies if the dialog is open or not.\n */\n open?: RadixDialog.DialogProps['open']\n /**\n * Default open state.\n */\n defaultOpen?: RadixDialog.DialogProps['defaultOpen']\n /**\n * Handler executen on every dialog open state change.\n */\n onOpenChange?: RadixDialog.DialogProps['onOpenChange']\n /**\n * Specifies if the dialog is a modal.\n */\n modal?: RadixDialog.DialogProps['modal']\n /**\n * Specifies if the dialog should have a fade animation on its body (in case it is scrollable).\n */\n withFade?: boolean\n}\n\nexport const Dialog = ({ children, withFade = false, ...rest }: DialogProps): ReactElement => {\n const open = rest.open\n const activeElementRef = useRef<Element>(null)\n\n /**\n * This function captures the active element when the Dialog is opened\n * and sets focus back to it when the Dialog is closed.\n */\n function handleActiveElementFocus() {\n if (open && document.activeElement) {\n activeElementRef.current = document.activeElement\n }\n\n if (!open) {\n setTimeout(() => {\n if (!(activeElementRef.current instanceof HTMLElement)) return\n activeElementRef.current.focus()\n }, 0)\n }\n }\n\n useEffect(handleActiveElementFocus, [open])\n\n return (\n <DialogProvider withFade={withFade}>\n <RadixDialog.Root {...rest}>{children}</RadixDialog.Root>\n </DialogProvider>\n )\n}\n\nDialog.displayName = 'Dialog.Root'\n","import { createContext, type ReactNode, useContext, useState } from 'react'\n\nexport interface DialogContextState {\n isFullScreen: boolean\n setIsFullScreen: (value: boolean) => void\n withFade: boolean\n}\n\nconst DialogContext = createContext<DialogContextState | null>(null)\n\nexport const DialogProvider = ({\n children: childrenProp,\n withFade = false,\n}: {\n children: ReactNode\n withFade?: boolean\n}) => {\n const [isFullScreen, setIsFullScreen] = useState(false)\n\n return (\n <DialogContext.Provider\n value={{\n isFullScreen,\n setIsFullScreen,\n withFade,\n }}\n >\n {childrenProp}\n </DialogContext.Provider>\n )\n}\n\nexport const useDialog = () => {\n const context = useContext(DialogContext)\n\n if (!context) {\n throw Error('useDialog must be used within a Dialog provider')\n }\n\n return context\n}\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { useScrollOverflow } from '@spark-ui/hooks/use-scroll-overflow'\nimport { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref, useRef } from 'react'\n\nimport { useDialog } from './DialogContext'\n\nexport interface BodyProps {\n children: ReactNode\n className?: string\n tabIndex?: number\n ref?: Ref<HTMLDivElement>\n inset?: boolean\n}\n\nexport const Body = ({\n children,\n className,\n inset = false,\n ref: forwardedRef,\n ...rest\n}: BodyProps): ReactElement => {\n const scrollAreaRef = useRef<HTMLDivElement>(null)\n const ref = useMergeRefs(forwardedRef, scrollAreaRef)\n\n const { withFade } = useDialog()\n\n const { overflow } = useScrollOverflow(scrollAreaRef)\n\n return (\n <div\n data-spark-component=\"dialog-body\"\n ref={ref}\n className={cx(\n 'focus-visible:u-outline relative grow overflow-y-auto outline-hidden',\n 'transition-all duration-300',\n {\n ['px-xl py-lg']: !inset,\n },\n className\n )}\n style={{\n ...(withFade && {\n maskImage:\n 'linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))',\n maskSize: `100% calc(100% + ${overflow.top ? '0px' : '44px'} + ${overflow.bottom ? '0px' : '44px'})`,\n maskPosition: `0 ${overflow.top ? '0px' : '-44px'}`,\n }),\n }}\n {...rest}\n >\n {children}\n </div>\n )\n}\n\nBody.displayName = 'Dialog.Body'\n","import { Dialog as RadixDialog } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type CloseProps = RadixDialog.DialogCloseProps & {\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const Close = (props: CloseProps) => <RadixDialog.Close {...props} />\n\nClose.displayName = 'Dialog.Close'\n","import { Close as CloseSVG } from '@spark-ui/icons/Close'\nimport { cx } from 'class-variance-authority'\n\nimport { Icon } from '../icon'\nimport { IconButton, type IconButtonProps } from '../icon-button'\nimport { Close, CloseProps } from './DialogClose'\n\nexport type CloseButtonProps = CloseProps &\n Pick<IconButtonProps, 'size' | 'intent' | 'design' | 'aria-label'>\n\nconst Root = ({\n 'aria-label': ariaLabel,\n className,\n size = 'md',\n intent = 'neutral',\n design = 'ghost',\n children = <CloseSVG />,\n ref,\n ...rest\n}: CloseButtonProps) => {\n return (\n <Close\n data-spark-component=\"dialog-close-button\"\n data-part=\"close\"\n ref={ref}\n className={cx(['absolute', 'top-md', 'right-xl'], className)}\n asChild\n {...rest}\n >\n <IconButton intent={intent} size={size} design={design} aria-label={ariaLabel}>\n <Icon>{children}</Icon>\n </IconButton>\n </Close>\n )\n}\n\nexport const CloseButton = Object.assign(Root, {\n id: 'CloseButton',\n})\n\nRoot.displayName = 'Dialog.CloseButton'\n","import { Dialog as RadixDialog } from 'radix-ui'\nimport { type ReactElement, Ref, useEffect } from 'react'\n\nimport { dialogContentStyles, type DialogContentStylesProps } from './DialogContent.styles'\nimport { useDialog } from './DialogContext'\n\nexport interface ContentProps extends RadixDialog.DialogContentProps, DialogContentStylesProps {\n /**\n * When set to true, the content will adjust its width to fit the content rather than taking up the full available width.\n */\n isNarrow?: boolean\n ref?: Ref<HTMLDivElement>\n}\n\nexport const Content = ({\n children,\n className,\n isNarrow = false,\n size = 'md',\n onInteractOutside,\n ref,\n ...rest\n}: ContentProps): ReactElement => {\n const { setIsFullScreen } = useDialog()\n\n useEffect(() => {\n if (size === 'fullscreen') setIsFullScreen(true)\n\n return () => setIsFullScreen(false)\n }, [setIsFullScreen, size])\n\n return (\n <RadixDialog.Content\n data-spark-component=\"dialog-content\"\n ref={ref}\n className={dialogContentStyles({\n className,\n isNarrow,\n size,\n })}\n onInteractOutside={e => {\n const isForegroundElement = (e.target as HTMLElement).closest('.z-toast, .z-popover')\n\n /**\n * The focus trap of the dialog applies `pointer-events-none` on the body of the page in the background, but\n * some components with an higher z-index have `pointer-events-auto` applied on them to remain interactive and ignore the focust trap (ex: a Snackbar with actions).\n *\n * Clicking on the snackbar will be considered as an \"outside click\" and close the dialog. We want to prevent this.\n */\n if (isForegroundElement) {\n e.preventDefault()\n }\n\n onInteractOutside?.(e)\n }}\n {...rest}\n >\n {children}\n </RadixDialog.Content>\n )\n}\n\nContent.displayName = 'Dialog.Content'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const dialogContentStyles = cva(\n [\n 'z-modal flex flex-col bg-surface group',\n 'focus-visible:outline-hidden focus-visible:u-outline',\n '[&:not(:has(footer))]:pb-lg',\n '[&:not(:has(header))]:pt-lg',\n ],\n {\n variants: {\n size: {\n fullscreen: 'fixed size-full top-0 left-0',\n sm: 'max-w-sz-480',\n md: 'max-w-sz-672',\n lg: 'max-w-sz-864',\n },\n isNarrow: {\n true: [],\n false: [],\n },\n },\n compoundVariants: [\n {\n size: ['sm', 'md', 'lg'],\n class: [\n 'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',\n 'max-h-[80%]',\n 'shadow-md rounded-lg',\n 'data-[state=open]:animate-fade-in',\n 'data-[state=closed]:animate-fade-out',\n ],\n },\n {\n size: ['sm', 'md', 'lg'],\n isNarrow: false,\n class: ['w-full'],\n },\n ],\n defaultVariants: {\n size: 'md',\n isNarrow: false,\n },\n }\n)\n\nexport type DialogContentStylesProps = VariantProps<typeof dialogContentStyles>\n","import { Dialog as RadixDialog } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type DescriptionProps = RadixDialog.DialogDescriptionProps & {\n ref?: Ref<HTMLParagraphElement>\n}\n\nexport const Description = (props: DescriptionProps) => (\n <RadixDialog.Description data-spark-component=\"dialog-description\" {...props} />\n)\n\nDescription.displayName = 'Dialog.Description'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface FooterProps {\n children: ReactNode\n className?: string\n ref?: Ref<HTMLDivElement>\n}\n\nexport const Footer = ({ children, className, ref, ...rest }: FooterProps): ReactElement => (\n <footer\n data-spark-component=\"dialog-footer\"\n ref={ref}\n className={cx(className, ['px-xl', 'py-lg'])}\n {...rest}\n >\n {children}\n </footer>\n)\n\nFooter.displayName = 'Dialog.Footer'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface HeaderProps {\n children: ReactNode\n className?: string\n ref?: Ref<HTMLDivElement>\n}\n\nexport const Header = ({ children, className, ref, ...rest }: HeaderProps): ReactElement => (\n <header\n data-spark-component=\"dialog-header\"\n ref={ref}\n className={cx(className, ['px-xl', 'py-lg'])}\n {...rest}\n >\n {children}\n </header>\n)\n\nHeader.displayName = 'Dialog.Header'\n","import { cx } from 'class-variance-authority'\nimport { Dialog as RadixDialog } from 'radix-ui'\nimport { type ReactElement, Ref } from 'react'\n\nimport { useDialog } from './DialogContext'\n\nexport type OverlayProps = RadixDialog.DialogOverlayProps & {\n ref?: Ref<HTMLDivElement>\n}\n\nexport const Overlay = ({ className, ref, ...rest }: OverlayProps): ReactElement | null => {\n const { isFullScreen } = useDialog()\n\n return (\n <RadixDialog.Overlay\n data-spark-component=\"dialog-overlay\"\n ref={ref}\n className={cx(\n isFullScreen ? 'hidden' : 'fixed',\n ['top-0', 'left-0', 'w-screen', 'h-screen', 'z-overlay'],\n ['bg-overlay/dim-1'],\n ['data-[state=open]:animate-fade-in'],\n ['data-[state=closed]:animate-fade-out'],\n className\n )}\n {...rest}\n />\n )\n}\n\nOverlay.displayName = 'Dialog.Overlay'\n","import { Dialog as RadixDialog } from 'radix-ui'\nimport { type ReactElement } from 'react'\n\nexport type PortalProps = RadixDialog.DialogPortalProps\n\nexport const Portal = ({ children, ...rest }: PortalProps): ReactElement => (\n <RadixDialog.Portal {...rest}>{children}</RadixDialog.Portal>\n)\n\nPortal.displayName = 'Dialog.Portal'\n","import { cx } from 'class-variance-authority'\nimport { Dialog as RadixDialog } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type TitleProps = RadixDialog.DialogTitleProps & {\n ref?: Ref<HTMLHeadingElement>\n}\n\nexport const Title = ({ className, ref, ...others }: TitleProps) => {\n return (\n <RadixDialog.Title\n data-spark-component=\"dialog-title\"\n ref={ref}\n className={cx(\n 'text-headline-1 text-on-surface',\n 'group-has-data-[part=close]:pr-3xl',\n className\n )}\n {...others}\n />\n )\n}\n\nTitle.displayName = 'Dialog.Title'\n","import { Dialog as RadixDialog } from 'radix-ui'\nimport { type ReactElement, ReactNode, Ref } from 'react'\n\nexport interface TriggerProps {\n /**\n * Children of the component.\n */\n children?: ReactNode\n /**\n * Change the component to the HTML tag or custom component of the only child.\n */\n asChild?: RadixDialog.DialogTriggerProps['asChild']\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const Trigger = (props: TriggerProps): ReactElement => (\n <RadixDialog.Trigger data-spark-component=\"dialog-trigger\" {...props} />\n)\n\nTrigger.displayName = 'Dialog.Trigger'\n","import { Dialog as Root } from './Dialog'\nimport { Body } from './DialogBody'\nimport { Close } from './DialogClose'\nimport { CloseButton } from './DialogCloseButton'\nimport { Content } from './DialogContent'\nimport { Description } from './DialogDescription' // aria-describedby\nimport { Footer } from './DialogFooter'\nimport { Header } from './DialogHeader'\nimport { Overlay } from './DialogOverlay'\nimport { Portal } from './DialogPortal'\nimport { Title } from './DialogTitle' // aria-labelledby\nimport { Trigger } from './DialogTrigger'\n\nexport const Dialog: typeof Root & {\n Trigger: typeof Trigger\n Portal: typeof Portal\n Overlay: typeof Overlay\n Content: typeof Content\n Header: typeof Header\n Body: typeof Body\n Footer: typeof Footer\n Close: typeof Close\n CloseButton: typeof CloseButton\n Title: typeof Title\n Description: typeof Description\n} = Object.assign(Root, {\n Trigger,\n Portal,\n Overlay,\n Content,\n Header,\n Body,\n Footer,\n Close,\n CloseButton,\n Title,\n Description,\n})\n\nDialog.displayName = 'Dialog'\nDialog.Trigger.displayName = 'Dialog.Trigger'\nTrigger.displayName = 'Dialog.Trigger'\nPortal.displayName = 'Dialog.Portal'\nOverlay.displayName = 'Dialog.Overlay'\nContent.displayName = 'Dialog.Content'\nHeader.displayName = 'Dialog.Header'\nBody.displayName = 'Dialog.Body'\nFooter.displayName = 'Dialog.Footer'\nCloseButton.displayName = 'Dialog.CloseButton'\nTitle.displayName = 'Dialog.Title'\nDescription.displayName = 'Dialog.Description'\n\nexport { type DialogProps } from './Dialog'\nexport { type ContentProps as DialogContentProps } from './DialogContent'\nexport { type HeaderProps as DialogHeaderProps } from './DialogHeader'\nexport { type BodyProps as DialogBodyProps } from './DialogBody'\nexport { type FooterProps as DialogFooterProps } from './DialogFooter'\nexport { type TriggerProps as DialogTriggerProps } from './DialogTrigger'\nexport { type OverlayProps as DialogOverlayProps } from './DialogOverlay'\nexport { type PortalProps as DialogPortalProps } from './DialogPortal'\nexport { type TitleProps as DialogTitleProps } from './DialogTitle'\nexport { type DescriptionProps as DialogDescriptionProps } from './DialogDescription'\nexport { type CloseProps as DialogCloseProps } from './DialogClose'\nexport { type CloseButtonProps as DialogCloseButtonProps } from './DialogCloseButton'\n"],"mappings":"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","names":["jsx","useRef","jsx","useRef","RadixDialog","jsx","cx","jsx","cx","RadixDialog","useEffect","jsx","useEffect","RadixDialog","RadixDialog","jsx","cx","jsx","cx","jsx","cx","RadixDialog","jsx","RadixDialog","cx","RadixDialog","jsx","cx","RadixDialog","jsx","RadixDialog","jsx","Dialog"]}
|
package/dist/chunk-XYK6V3JF.mjs
DELETED
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
Button
|
|
3
|
-
} from "./chunk-HEKSVWYW.mjs";
|
|
4
|
-
|
|
5
|
-
// src/icon-button/IconButton.styles.tsx
|
|
6
|
-
import { makeVariants } from "@spark-ui/internal-utils";
|
|
7
|
-
import { cva } from "class-variance-authority";
|
|
8
|
-
var iconButtonStyles = cva(["pl-0 pr-0"], {
|
|
9
|
-
variants: {
|
|
10
|
-
/**
|
|
11
|
-
* Sets the size of the icon.
|
|
12
|
-
*/
|
|
13
|
-
size: makeVariants({
|
|
14
|
-
sm: ["text-body-1"],
|
|
15
|
-
md: ["text-body-1"],
|
|
16
|
-
lg: ["text-display-3"]
|
|
17
|
-
})
|
|
18
|
-
}
|
|
19
|
-
});
|
|
20
|
-
|
|
21
|
-
// src/icon-button/IconButton.tsx
|
|
22
|
-
import { jsx } from "react/jsx-runtime";
|
|
23
|
-
var IconButton = ({
|
|
24
|
-
design = "filled",
|
|
25
|
-
disabled = false,
|
|
26
|
-
intent = "main",
|
|
27
|
-
shape = "rounded",
|
|
28
|
-
size = "md",
|
|
29
|
-
className,
|
|
30
|
-
ref,
|
|
31
|
-
...others
|
|
32
|
-
}) => {
|
|
33
|
-
return /* @__PURE__ */ jsx(
|
|
34
|
-
Button,
|
|
35
|
-
{
|
|
36
|
-
"data-spark-component": "icon-button",
|
|
37
|
-
ref,
|
|
38
|
-
className: iconButtonStyles({ size, className }),
|
|
39
|
-
design,
|
|
40
|
-
disabled,
|
|
41
|
-
intent,
|
|
42
|
-
shape,
|
|
43
|
-
size,
|
|
44
|
-
...others
|
|
45
|
-
}
|
|
46
|
-
);
|
|
47
|
-
};
|
|
48
|
-
IconButton.displayName = "IconButton";
|
|
49
|
-
|
|
50
|
-
export {
|
|
51
|
-
IconButton
|
|
52
|
-
};
|
|
53
|
-
//# sourceMappingURL=chunk-XYK6V3JF.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/icon-button/IconButton.styles.tsx","../src/icon-button/IconButton.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\n// override the Button component's px-lg padding by using a more specific class selector (pl-0 pr-0)\nexport const iconButtonStyles = cva(['pl-0 pr-0'], {\n variants: {\n /**\n * Sets the size of the icon.\n */\n size: makeVariants<'size', ['sm', 'md', 'lg']>({\n sm: ['text-body-1'],\n md: ['text-body-1'],\n lg: ['text-display-3'],\n }),\n },\n})\n\nexport type IconButtonStylesProps = VariantProps<typeof iconButtonStyles>\n","import { Ref } from 'react'\n\nimport { Button, ButtonProps } from '../button'\nimport { iconButtonStyles } from './IconButton.styles'\n\nexport interface IconButtonProps extends Omit<ButtonProps, 'loadingText'> {\n 'aria-label': string\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const IconButton = ({\n design = 'filled',\n disabled = false,\n intent = 'main',\n shape = 'rounded',\n size = 'md',\n className,\n ref,\n ...others\n}: IconButtonProps) => {\n return (\n <Button\n data-spark-component=\"icon-button\"\n ref={ref}\n className={iconButtonStyles({ size, className })}\n design={design}\n disabled={disabled}\n intent={intent}\n shape={shape}\n size={size}\n {...others}\n />\n )\n}\n\nIconButton.displayName = 'IconButton'\n"],"mappings":";;;;;AAAA,SAAS,oBAAoB;AAC7B,SAAS,WAAyB;AAG3B,IAAM,mBAAmB,IAAI,CAAC,WAAW,GAAG;AAAA,EACjD,UAAU;AAAA;AAAA;AAAA;AAAA,IAIR,MAAM,aAAyC;AAAA,MAC7C,IAAI,CAAC,aAAa;AAAA,MAClB,IAAI,CAAC,aAAa;AAAA,MAClB,IAAI,CAAC,gBAAgB;AAAA,IACvB,CAAC;AAAA,EACH;AACF,CAAC;;;ACMG;AAXG,IAAM,aAAa,CAAC;AAAA,EACzB,SAAS;AAAA,EACT,WAAW;AAAA,EACX,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAuB;AACrB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,wBAAqB;AAAA,MACrB;AAAA,MACA,WAAW,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAAA,MAC/C;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,WAAW,cAAc;","names":[]}
|
|
@@ -1,93 +0,0 @@
|
|
|
1
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { Popover as Popover$2 } from 'radix-ui';
|
|
3
|
-
import { Ref, ReactNode, ReactElement } from 'react';
|
|
4
|
-
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
5
|
-
import { VariantProps } from 'class-variance-authority';
|
|
6
|
-
|
|
7
|
-
type PopoverIntent = 'surface' | 'main' | 'support' | 'accent' | 'basic' | 'success' | 'alert' | 'danger' | 'info' | 'neutral';
|
|
8
|
-
|
|
9
|
-
type PopoverProps = Popover$2.PopoverProps & {
|
|
10
|
-
intent?: PopoverIntent;
|
|
11
|
-
};
|
|
12
|
-
declare const Popover$1: {
|
|
13
|
-
({ children, intent, modal, ...rest }: PopoverProps): react_jsx_runtime.JSX.Element;
|
|
14
|
-
displayName: string;
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
type AnchorProps = Popover$2.PopoverAnchorProps & {
|
|
18
|
-
ref?: Ref<HTMLDivElement>;
|
|
19
|
-
};
|
|
20
|
-
declare const Anchor: {
|
|
21
|
-
({ asChild, children, ref, ...rest }: AnchorProps): react_jsx_runtime.JSX.Element;
|
|
22
|
-
displayName: string;
|
|
23
|
-
};
|
|
24
|
-
|
|
25
|
-
type ArrowProps = Popover$2.PopoverArrowProps & {
|
|
26
|
-
ref?: Ref<SVGSVGElement>;
|
|
27
|
-
};
|
|
28
|
-
declare const Arrow: {
|
|
29
|
-
({ asChild, width, height, className, ref, ...rest }: ArrowProps): react_jsx_runtime.JSX.Element;
|
|
30
|
-
displayName: string;
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
type CloseButtonProps = Popover$2.PopoverCloseProps & {
|
|
34
|
-
'aria-label': string;
|
|
35
|
-
ref?: Ref<HTMLButtonElement>;
|
|
36
|
-
};
|
|
37
|
-
declare const CloseButton: {
|
|
38
|
-
({ "aria-label": ariaLabel, className, ref, ...rest }: CloseButtonProps): react_jsx_runtime.JSX.Element;
|
|
39
|
-
displayName: string;
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
declare const styles: (props?: ({
|
|
43
|
-
intent?: "main" | "surface" | "support" | "accent" | "basic" | "success" | "alert" | "danger" | "info" | "neutral" | null | undefined;
|
|
44
|
-
matchTriggerWidth?: boolean | null | undefined;
|
|
45
|
-
enforceBoundaries?: boolean | null | undefined;
|
|
46
|
-
inset?: boolean | null | undefined;
|
|
47
|
-
elevation?: "popover" | "dropdown" | null | undefined;
|
|
48
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
49
|
-
type StylesProps = VariantProps<typeof styles>;
|
|
50
|
-
|
|
51
|
-
type ContentProps = Popover$2.PopoverContentProps & StylesProps & {
|
|
52
|
-
ref?: Ref<HTMLDivElement>;
|
|
53
|
-
};
|
|
54
|
-
declare const Content: {
|
|
55
|
-
({ className, children, matchTriggerWidth, align, arrowPadding, asChild, avoidCollisions, "aria-labelledby": ariaLabelledBy, collisionBoundary, collisionPadding, hideWhenDetached, side, sideOffset, sticky, inset, elevation, ref, ...rest }: ContentProps): react_jsx_runtime.JSX.Element;
|
|
56
|
-
displayName: string;
|
|
57
|
-
};
|
|
58
|
-
|
|
59
|
-
interface HeaderProps {
|
|
60
|
-
children: ReactNode;
|
|
61
|
-
className?: string;
|
|
62
|
-
ref?: Ref<HTMLDivElement>;
|
|
63
|
-
}
|
|
64
|
-
declare const Header: {
|
|
65
|
-
({ children, className, ref, ...rest }: HeaderProps): react_jsx_runtime.JSX.Element;
|
|
66
|
-
displayName: string;
|
|
67
|
-
};
|
|
68
|
-
|
|
69
|
-
type PortalProps = Popover$2.PopoverPortalProps;
|
|
70
|
-
declare const Portal: {
|
|
71
|
-
({ children, ...rest }: PortalProps): ReactElement;
|
|
72
|
-
displayName: string;
|
|
73
|
-
};
|
|
74
|
-
|
|
75
|
-
type TriggerProps = Popover$2.PopoverTriggerProps & {
|
|
76
|
-
ref?: Ref<HTMLButtonElement>;
|
|
77
|
-
};
|
|
78
|
-
declare const Trigger: {
|
|
79
|
-
({ asChild, children, ref, ...rest }: TriggerProps): react_jsx_runtime.JSX.Element;
|
|
80
|
-
displayName: string;
|
|
81
|
-
};
|
|
82
|
-
|
|
83
|
-
declare const Popover: typeof Popover$1 & {
|
|
84
|
-
Anchor: typeof Anchor;
|
|
85
|
-
Arrow: typeof Arrow;
|
|
86
|
-
CloseButton: typeof CloseButton;
|
|
87
|
-
Content: typeof Content;
|
|
88
|
-
Header: typeof Header;
|
|
89
|
-
Portal: typeof Portal;
|
|
90
|
-
Trigger: typeof Trigger;
|
|
91
|
-
};
|
|
92
|
-
|
|
93
|
-
export { type ContentProps as C, Popover as P };
|