@spark-ui/components
Version:
Spark (Leboncoin design system) components.
314 lines (295 loc) • 8.83 kB
JavaScript
import {
IconButton
} from "./chunk-QLOIAU3C.mjs";
import {
Icon
} from "./chunk-AESXFMCC.mjs";
// src/dialog/Dialog.tsx
import { Dialog as RadixDialog } from "radix-ui";
import { useEffect, useRef } from "react";
// src/dialog/DialogContext.tsx
import { createContext, useContext, useState } from "react";
import { jsx } from "react/jsx-runtime";
var DialogContext = createContext(null);
var DialogProvider = ({ children: childrenProp }) => {
const [isFullScreen, setIsFullScreen] = useState(false);
return /* @__PURE__ */ jsx(
DialogContext.Provider,
{
value: {
isFullScreen,
setIsFullScreen
},
children: childrenProp
}
);
};
var useDialog = () => {
const context = useContext(DialogContext);
if (!context) {
throw Error("useDialog must be used within a Dialog provider");
}
return context;
};
// src/dialog/Dialog.tsx
import { jsx as jsx2 } from "react/jsx-runtime";
var Dialog = ({ children, ...rest }) => {
const open = rest.open;
const activeElementRef = useRef(null);
function handleActiveElementFocus() {
if (open && document.activeElement) {
activeElementRef.current = document.activeElement;
}
if (!open) {
setTimeout(() => {
if (!(activeElementRef.current instanceof HTMLElement)) return;
activeElementRef.current.focus();
}, 0);
}
}
useEffect(handleActiveElementFocus, [open]);
return /* @__PURE__ */ jsx2(DialogProvider, { children: /* @__PURE__ */ jsx2(RadixDialog.Root, { ...rest, children }) });
};
Dialog.displayName = "Dialog.Root";
// src/dialog/DialogBody.styles.ts
import { cva } from "class-variance-authority";
var dialogBodyStyles = cva(
["grow", "overflow-y-auto", "outline-hidden", "focus-visible:u-outline"],
{
variants: {
inset: {
true: "",
false: "px-xl py-lg"
}
}
}
);
// src/dialog/DialogBody.tsx
import { jsx as jsx3 } from "react/jsx-runtime";
var Body = ({
children,
className,
inset = false,
ref,
...rest
}) => /* @__PURE__ */ jsx3("div", { ref, className: dialogBodyStyles({ inset, className }), ...rest, children });
Body.displayName = "Dialog.Body";
// src/dialog/DialogClose.tsx
import { Dialog as RadixDialog2 } from "radix-ui";
import { jsx as jsx4 } from "react/jsx-runtime";
var Close = (props) => /* @__PURE__ */ jsx4(RadixDialog2.Close, { ...props });
Close.displayName = "Dialog.Close";
// src/dialog/DialogCloseButton.tsx
import { Close as CloseSVG } from "@spark-ui/icons/Close";
import { cx } from "class-variance-authority";
import { jsx as jsx5 } from "react/jsx-runtime";
var Root = ({
"aria-label": ariaLabel,
className,
size = "md",
intent = "neutral",
design = "ghost",
children = /* @__PURE__ */ jsx5(CloseSVG, {}),
ref,
...rest
}) => {
return /* @__PURE__ */ jsx5(
Close,
{
"data-part": "close",
ref,
className: cx(["absolute", "top-md", "right-xl"], className),
asChild: true,
...rest,
children: /* @__PURE__ */ jsx5(IconButton, { intent, size, design, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx5(Icon, { children }) })
}
);
};
var CloseButton = Object.assign(Root, {
id: "CloseButton"
});
Root.displayName = "Dialog.CloseButton";
// src/dialog/DialogContent.tsx
import { Dialog as RadixDialog3 } from "radix-ui";
import { useEffect as useEffect2 } from "react";
// src/dialog/DialogContent.styles.tsx
import { cva as cva2 } from "class-variance-authority";
var dialogContentStyles = cva2(
[
"z-modal flex flex-col bg-surface group",
"focus-visible:outline-hidden focus-visible:u-outline",
"[&:not(:has(footer))]:pb-lg",
"[&:not(:has(header))]:pt-lg"
],
{
variants: {
size: {
fullscreen: "fixed size-full top-0 left-0",
sm: "max-w-sz-480",
md: "max-w-sz-672",
lg: "max-w-sz-864"
},
isNarrow: {
true: [],
false: []
}
},
compoundVariants: [
{
size: ["sm", "md", "lg"],
class: [
"fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
"max-h-[80%]",
"shadow-md rounded-lg",
"data-[state=open]:animate-fade-in",
"data-[state=closed]:animate-fade-out"
]
},
{
size: ["sm", "md", "lg"],
isNarrow: false,
class: ["w-full"]
}
],
defaultVariants: {
size: "md",
isNarrow: false
}
}
);
// src/dialog/DialogContent.tsx
import { jsx as jsx6 } from "react/jsx-runtime";
var Content = ({
children,
className,
isNarrow = false,
size = "md",
onInteractOutside,
ref,
...rest
}) => {
const { setIsFullScreen } = useDialog();
useEffect2(() => {
if (size === "fullscreen") setIsFullScreen(true);
return () => setIsFullScreen(false);
}, [setIsFullScreen, size]);
return /* @__PURE__ */ jsx6(
RadixDialog3.Content,
{
"data-spark-component": "dialog-content",
ref,
className: dialogContentStyles({
className,
isNarrow,
size
}),
onInteractOutside: (e) => {
const isForegroundElement = e.target.closest(".z-toast, .z-popover");
if (isForegroundElement) {
e.preventDefault();
}
onInteractOutside?.(e);
},
...rest,
children
}
);
};
Content.displayName = "Dialog.Content";
// src/dialog/DialogDescription.tsx
import { Dialog as RadixDialog4 } from "radix-ui";
import { jsx as jsx7 } from "react/jsx-runtime";
var Description = (props) => /* @__PURE__ */ jsx7(RadixDialog4.Description, { ...props });
Description.displayName = "Dialog.Description";
// src/dialog/DialogFooter.tsx
import { cx as cx2 } from "class-variance-authority";
import { jsx as jsx8 } from "react/jsx-runtime";
var Footer = ({ children, className, ref, ...rest }) => /* @__PURE__ */ jsx8("footer", { ref, className: cx2(className, ["px-xl", "py-lg"]), ...rest, children });
Footer.displayName = "Dialog.Footer";
// src/dialog/DialogHeader.tsx
import { cx as cx3 } from "class-variance-authority";
import { jsx as jsx9 } from "react/jsx-runtime";
var Header = ({ children, className, ref, ...rest }) => /* @__PURE__ */ jsx9("header", { ref, className: cx3(className, ["px-xl", "py-lg"]), ...rest, children });
Header.displayName = "Dialog.Header";
// src/dialog/DialogOverlay.tsx
import { cx as cx4 } from "class-variance-authority";
import { Dialog as RadixDialog5 } from "radix-ui";
import { jsx as jsx10 } from "react/jsx-runtime";
var Overlay = ({ className, ref, ...rest }) => {
const { isFullScreen } = useDialog();
return /* @__PURE__ */ jsx10(
RadixDialog5.Overlay,
{
ref,
className: cx4(
isFullScreen ? "hidden" : "fixed",
["top-0", "left-0", "w-screen", "h-screen", "z-overlay"],
["bg-overlay/dim-3"],
["data-[state=open]:animate-fade-in"],
["data-[state=closed]:animate-fade-out"],
className
),
...rest
}
);
};
Overlay.displayName = "Dialog.Overlay";
// src/dialog/DialogPortal.tsx
import { Dialog as RadixDialog6 } from "radix-ui";
import { jsx as jsx11 } from "react/jsx-runtime";
var Portal = ({ children, ...rest }) => /* @__PURE__ */ jsx11(RadixDialog6.Portal, { ...rest, children });
Portal.displayName = "Dialog.Portal";
// src/dialog/DialogTitle.tsx
import { cx as cx5 } from "class-variance-authority";
import { Dialog as RadixDialog7 } from "radix-ui";
import { jsx as jsx12 } from "react/jsx-runtime";
var Title = ({ className, ref, ...others }) => {
return /* @__PURE__ */ jsx12(
RadixDialog7.Title,
{
ref,
className: cx5(
"text-headline-1 text-on-surface",
"group-has-data-[part=close]:pr-3xl",
className
),
...others
}
);
};
Title.displayName = "Dialog.Title";
// src/dialog/DialogTrigger.tsx
import { Dialog as RadixDialog8 } from "radix-ui";
import { jsx as jsx13 } from "react/jsx-runtime";
var Trigger = (props) => /* @__PURE__ */ jsx13(RadixDialog8.Trigger, { ...props });
Trigger.displayName = "Dialog.Trigger";
// src/dialog/index.ts
var Dialog2 = Object.assign(Dialog, {
Trigger,
Portal,
Overlay,
Content,
Header,
Body,
Footer,
Close,
CloseButton,
Title,
Description
});
Dialog2.displayName = "Dialog";
Dialog2.Trigger.displayName = "Dialog.Trigger";
Trigger.displayName = "Dialog.Trigger";
Portal.displayName = "Dialog.Portal";
Overlay.displayName = "Dialog.Overlay";
Content.displayName = "Dialog.Content";
Header.displayName = "Dialog.Header";
Body.displayName = "Dialog.Body";
Footer.displayName = "Dialog.Footer";
CloseButton.displayName = "Dialog.CloseButton";
Title.displayName = "Dialog.Title";
Description.displayName = "Dialog.Description";
export {
Dialog2 as Dialog
};
//# sourceMappingURL=chunk-IAR55N4Y.mjs.map