@spark-ui/components
Version:
Spark (Leboncoin design system) components.
1,451 lines (1,398 loc) • 42.4 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/alert-dialog/index.ts
var alert_dialog_exports = {};
__export(alert_dialog_exports, {
AlertDialog: () => AlertDialog2,
useAlertDialog: () => useAlertDialog
});
module.exports = __toCommonJS(alert_dialog_exports);
// src/dialog/Dialog.tsx
var import_radix_ui = require("radix-ui");
var import_react2 = require("react");
// src/dialog/DialogContext.tsx
var import_react = require("react");
var import_jsx_runtime = require("react/jsx-runtime");
var DialogContext = (0, import_react.createContext)(null);
var DialogProvider = ({ children: childrenProp }) => {
const [isFullScreen, setIsFullScreen] = (0, import_react.useState)(false);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
DialogContext.Provider,
{
value: {
isFullScreen,
setIsFullScreen
},
children: childrenProp
}
);
};
var useDialog = () => {
const context = (0, import_react.useContext)(DialogContext);
if (!context) {
throw Error("useDialog must be used within a Dialog provider");
}
return context;
};
// src/dialog/Dialog.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var Dialog = ({ children, ...rest }) => {
const open = rest.open;
const activeElementRef = (0, import_react2.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);
}
}
(0, import_react2.useEffect)(handleActiveElementFocus, [open]);
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DialogProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_radix_ui.Dialog.Root, { ...rest, children }) });
};
Dialog.displayName = "Dialog.Root";
// src/dialog/DialogBody.styles.ts
var import_class_variance_authority = require("class-variance-authority");
var dialogBodyStyles = (0, import_class_variance_authority.cva)(
["grow", "overflow-y-auto", "outline-hidden", "focus-visible:u-outline"],
{
variants: {
inset: {
true: "",
false: "px-xl py-lg"
}
}
}
);
// src/dialog/DialogBody.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
var Body = ({
children,
className,
inset = false,
ref,
...rest
}) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref, className: dialogBodyStyles({ inset, className }), ...rest, children });
Body.displayName = "Dialog.Body";
// src/dialog/DialogClose.tsx
var import_radix_ui2 = require("radix-ui");
var import_jsx_runtime4 = require("react/jsx-runtime");
var Close = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_radix_ui2.Dialog.Close, { ...props });
Close.displayName = "Dialog.Close";
// src/dialog/DialogCloseButton.tsx
var import_Close = require("@spark-ui/icons/Close");
var import_class_variance_authority7 = require("class-variance-authority");
// src/icon/Icon.tsx
var import_react4 = require("react");
// src/slot/Slot.tsx
var import_radix_ui3 = require("radix-ui");
var import_react3 = require("react");
var import_jsx_runtime5 = require("react/jsx-runtime");
var Slottable = import_radix_ui3.Slot.Slottable;
var Slot = ({ ref, ...props }) => {
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_radix_ui3.Slot.Root, { ref, ...props });
};
var wrapPolymorphicSlot = (asChild, children, callback) => {
if (!asChild) return callback(children);
return (0, import_react3.isValidElement)(children) ? (0, import_react3.cloneElement)(
children,
void 0,
callback(children.props.children)
) : null;
};
// src/visually-hidden/VisuallyHidden.tsx
var import_jsx_runtime6 = require("react/jsx-runtime");
var VisuallyHidden = ({ asChild = false, ref, ...props }) => {
const Component = asChild ? Slot : "span";
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
Component,
{
...props,
ref,
style: {
// See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
position: "absolute",
border: 0,
width: 1,
height: 1,
padding: 0,
margin: -1,
overflow: "hidden",
clip: "rect(0, 0, 0, 0)",
whiteSpace: "nowrap",
wordWrap: "normal",
...props.style
}
}
);
};
VisuallyHidden.displayName = "VisuallyHidden";
// src/icon/Icon.styles.tsx
var import_internal_utils = require("@spark-ui/internal-utils");
var import_class_variance_authority2 = require("class-variance-authority");
var iconStyles = (0, import_class_variance_authority2.cva)(["fill-current shrink-0"], {
variants: {
/**
* Color scheme of the icon.
*/
intent: (0, import_internal_utils.makeVariants)({
current: ["text-current"],
main: ["text-main"],
support: ["text-support"],
accent: ["text-accent"],
basic: ["text-basic"],
success: ["text-success"],
alert: ["text-alert"],
error: ["text-error"],
info: ["text-info"],
neutral: ["text-neutral"]
}),
/**
* Sets the size of the icon.
*/
size: (0, import_internal_utils.makeVariants)({
current: ["u-current-font-size"],
sm: ["w-sz-16", "h-sz-16"],
md: ["w-sz-24", "h-sz-24"],
lg: ["w-sz-32", "h-sz-32"],
xl: ["w-sz-40", "h-sz-40"]
})
}
});
// src/icon/Icon.tsx
var import_jsx_runtime7 = require("react/jsx-runtime");
var Icon = ({
label,
className,
size = "current",
intent = "current",
children,
...others
}) => {
const child = import_react4.Children.only(children);
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
(0, import_react4.cloneElement)(child, {
className: iconStyles({ className, size, intent }),
"data-spark-component": "icon",
"aria-hidden": "true",
focusable: "false",
...others
}),
label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(VisuallyHidden, { children: label })
] });
};
Icon.displayName = "Icon";
// src/button/Button.tsx
var import_class_variance_authority5 = require("class-variance-authority");
var import_react5 = require("react");
// src/spinner/Spinner.styles.tsx
var import_internal_utils2 = require("@spark-ui/internal-utils");
var import_class_variance_authority3 = require("class-variance-authority");
var defaultVariants = {
intent: "current",
size: "current",
isBackgroundVisible: false
};
var spinnerStyles = (0, import_class_variance_authority3.cva)(
["inline-block", "border-solid", "rounded-full", "border-md", "animate-spin"],
{
variants: {
/**
* Use `size` prop to set the size of the spinner. If you want to set the full size for the spinner, don't forget to add a wrapping container with its own size.
*/
size: {
current: ["u-current-font-size"],
sm: ["w-sz-20", "h-sz-20"],
md: ["w-sz-28", "h-sz-28"],
full: ["w-full", "h-full"]
},
/**
* Color scheme of the spinner.
*/
intent: (0, import_internal_utils2.makeVariants)({
current: ["border-current"],
main: ["border-main"],
support: ["border-support"],
accent: ["border-accent"],
basic: ["border-basic"],
success: ["border-success"],
alert: ["border-alert"],
error: ["border-error"],
info: ["border-info"],
neutral: ["border-neutral"]
}),
/**
* Size of the button.
*/
isBackgroundVisible: {
true: ["border-b-neutral-container", "border-l-neutral-container"],
false: ["border-b-transparent", "border-l-transparent"]
}
},
defaultVariants
}
);
// src/spinner/Spinner.tsx
var import_jsx_runtime8 = require("react/jsx-runtime");
var Spinner = ({
className,
size = "current",
intent = "current",
label,
isBackgroundVisible,
ref,
...others
}) => {
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
"span",
{
role: "status",
"data-spark-component": "spinner",
ref,
className: spinnerStyles({ className, size, intent, isBackgroundVisible }),
...others,
children: label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(VisuallyHidden, { children: label })
}
);
};
// src/button/Button.styles.tsx
var import_internal_utils8 = require("@spark-ui/internal-utils");
var import_class_variance_authority4 = require("class-variance-authority");
// src/button/variants/filled.ts
var import_internal_utils3 = require("@spark-ui/internal-utils");
var filledVariants = [
// Main
{
intent: "main",
design: "filled",
class: (0, import_internal_utils3.tw)([
"bg-main",
"text-on-main",
"hover:bg-main-hovered",
"enabled:active:bg-main-hovered",
"focus-visible:bg-main-hovered"
])
},
// Support
{
intent: "support",
design: "filled",
class: (0, import_internal_utils3.tw)([
"bg-support",
"text-on-support",
"hover:bg-support-hovered",
"enabled:active:bg-support-hovered",
"focus-visible:bg-support-hovered"
])
},
// Accent
{
intent: "accent",
design: "filled",
class: (0, import_internal_utils3.tw)([
"bg-accent",
"text-on-accent",
"hover:bg-accent-hovered",
"enabled:active:bg-accent-hovered",
"focus-visible:bg-accent-hovered"
])
},
// Basic
{
intent: "basic",
design: "filled",
class: (0, import_internal_utils3.tw)([
"bg-basic",
"text-on-basic",
"hover:bg-basic-hovered",
"enabled:active:bg-basic-hovered",
"focus-visible:bg-basic-hovered"
])
},
// Success
{
intent: "success",
design: "filled",
class: (0, import_internal_utils3.tw)([
"bg-success",
"text-on-success",
"hover:bg-success-hovered",
"enabled:active:bg-success-hovered",
"focus-visible:bg-success-hovered"
])
},
// Alert
{
intent: "alert",
design: "filled",
class: (0, import_internal_utils3.tw)([
"bg-alert",
"text-on-alert",
"hover:bg-alert-hovered",
"enabled:active:bg-alert-hovered",
"focus-visible:bg-alert-hovered"
])
},
// Danger
{
intent: "danger",
design: "filled",
class: (0, import_internal_utils3.tw)([
"text-on-error bg-error",
"hover:bg-error-hovered enabled:active:bg-error-hovered",
"focus-visible:bg-error-hovered"
])
},
// Info
{
intent: "info",
design: "filled",
class: (0, import_internal_utils3.tw)([
"text-on-error bg-info",
"hover:bg-info-hovered enabled:active:bg-info-hovered",
"focus-visible:bg-info-hovered"
])
},
// Neutral
{
intent: "neutral",
design: "filled",
class: (0, import_internal_utils3.tw)([
"bg-neutral",
"text-on-neutral",
"hover:bg-neutral-hovered",
"enabled:active:bg-neutral-hovered",
"focus-visible:bg-neutral-hovered"
])
},
// Surface
{
intent: "surface",
design: "filled",
class: (0, import_internal_utils3.tw)([
"bg-surface",
"text-on-surface",
"hover:bg-surface-hovered",
"enabled:active:bg-surface-hovered",
"focus-visible:bg-surface-hovered"
])
}
];
// src/button/variants/ghost.ts
var import_internal_utils4 = require("@spark-ui/internal-utils");
var ghostVariants = [
{
intent: "main",
design: "ghost",
class: (0, import_internal_utils4.tw)([
"text-main",
"hover:bg-main/dim-5",
"enabled:active:bg-main/dim-5",
"focus-visible:bg-main/dim-5"
])
},
{
intent: "support",
design: "ghost",
class: (0, import_internal_utils4.tw)([
"text-support",
"hover:bg-support/dim-5",
"enabled:active:bg-support/dim-5",
"focus-visible:bg-support/dim-5"
])
},
{
intent: "accent",
design: "ghost",
class: (0, import_internal_utils4.tw)([
"text-accent",
"hover:bg-accent/dim-5",
"enabled:active:bg-accent/dim-5",
"focus-visible:bg-accent/dim-5"
])
},
{
intent: "basic",
design: "ghost",
class: (0, import_internal_utils4.tw)([
"text-basic",
"hover:bg-basic/dim-5",
"enabled:active:bg-basic/dim-5",
"focus-visible:bg-basic/dim-5"
])
},
{
intent: "success",
design: "ghost",
class: (0, import_internal_utils4.tw)([
"text-success",
"hover:bg-success/dim-5",
"enabled:active:bg-success/dim-5",
"focus-visible:bg-success/dim-5"
])
},
{
intent: "alert",
design: "ghost",
class: (0, import_internal_utils4.tw)([
"text-alert",
"hover:bg-alert/dim-5",
"enabled:active:bg-alert/dim-5",
"focus-visible:bg-alert/dim-5"
])
},
{
intent: "danger",
design: "ghost",
class: (0, import_internal_utils4.tw)([
"text-error",
"hover:bg-error/dim-5",
"enabled:active:bg-error/dim-5",
"focus-visible:bg-error/dim-5"
])
},
{
intent: "info",
design: "ghost",
class: (0, import_internal_utils4.tw)([
"text-info",
"hover:bg-info/dim-5",
"enabled:active:bg-info/dim-5",
"focus-visible:bg-info/dim-5"
])
},
{
intent: "neutral",
design: "ghost",
class: (0, import_internal_utils4.tw)([
"text-neutral",
"hover:bg-neutral/dim-5",
"enabled:active:bg-neutral/dim-5",
"focus-visible:bg-neutral/dim-5"
])
},
{
intent: "surface",
design: "ghost",
class: (0, import_internal_utils4.tw)([
"text-surface",
"hover:bg-surface/dim-5",
"enabled:active:bg-surface/dim-5",
"focus-visible:bg-surface/dim-5"
])
}
];
// src/button/variants/outlined.ts
var import_internal_utils5 = require("@spark-ui/internal-utils");
var outlinedVariants = [
{
intent: "main",
design: "outlined",
class: (0, import_internal_utils5.tw)([
"hover:bg-main/dim-5",
"enabled:active:bg-main/dim-5",
"focus-visible:bg-main/dim-5",
"text-main"
])
},
{
intent: "support",
design: "outlined",
class: (0, import_internal_utils5.tw)([
"hover:bg-support/dim-5",
"enabled:active:bg-support/dim-5",
"focus-visible:bg-support/dim-5",
"text-support"
])
},
{
intent: "accent",
design: "outlined",
class: (0, import_internal_utils5.tw)([
"hover:bg-accent/dim-5",
"enabled:active:bg-accent/dim-5",
"focus-visible:bg-accent/dim-5",
"text-accent"
])
},
{
intent: "basic",
design: "outlined",
class: (0, import_internal_utils5.tw)([
"hover:bg-basic/dim-5",
"enabled:active:bg-basic/dim-5",
"focus-visible:bg-basic/dim-5",
"text-basic"
])
},
{
intent: "success",
design: "outlined",
class: (0, import_internal_utils5.tw)([
"hover:bg-success/dim-5",
"enabled:active:bg-success/dim-5",
"focus-visible:bg-success/dim-5",
"text-success"
])
},
{
intent: "alert",
design: "outlined",
class: (0, import_internal_utils5.tw)([
"hover:bg-alert/dim-5",
"enabled:active:bg-alert/dim-5",
"focus-visible:bg-alert/dim-5",
"text-alert"
])
},
{
intent: "danger",
design: "outlined",
class: (0, import_internal_utils5.tw)([
"hover:bg-error/dim-5",
"enabled:active:bg-error/dim-5",
"focus-visible:bg-error/dim-5",
"text-error"
])
},
{
intent: "info",
design: "outlined",
class: (0, import_internal_utils5.tw)([
"hover:bg-info/dim-5",
"enabled:active:bg-info/dim-5",
"focus-visible:bg-info/dim-5",
"text-info"
])
},
{
intent: "neutral",
design: "outlined",
class: (0, import_internal_utils5.tw)([
"hover:bg-neutral/dim-5",
"enabled:active:bg-neutral/dim-5",
"focus-visible:bg-neutral/dim-5",
"text-neutral"
])
},
{
intent: "surface",
design: "outlined",
class: (0, import_internal_utils5.tw)([
"hover:bg-surface/dim-5",
"enabled:active:bg-surface/dim-5",
"focus-visible:bg-surface/dim-5",
"text-surface"
])
}
];
// src/button/variants/tinted.ts
var import_internal_utils6 = require("@spark-ui/internal-utils");
var tintedVariants = [
{
intent: "main",
design: "tinted",
class: (0, import_internal_utils6.tw)([
"bg-main-container",
"text-on-main-container",
"hover:bg-main-container-hovered",
"enabled:active:bg-main-container-hovered",
"focus-visible:bg-main-container-hovered"
])
},
{
intent: "support",
design: "tinted",
class: (0, import_internal_utils6.tw)([
"bg-support-container",
"text-on-support-container",
"hover:bg-support-container-hovered",
"enabled:active:bg-support-container-hovered",
"focus-visible:bg-support-container-hovered"
])
},
{
intent: "accent",
design: "tinted",
class: (0, import_internal_utils6.tw)([
"bg-accent-container",
"text-on-accent-container",
"hover:bg-accent-container-hovered",
"enabled:active:bg-accent-container-hovered",
"focus-visible:bg-accent-container-hovered"
])
},
{
intent: "basic",
design: "tinted",
class: (0, import_internal_utils6.tw)([
"bg-basic-container",
"text-on-basic-container",
"hover:bg-basic-container-hovered",
"enabled:active:bg-basic-container-hovered",
"focus-visible:bg-basic-container-hovered"
])
},
{
intent: "success",
design: "tinted",
class: (0, import_internal_utils6.tw)([
"bg-success-container",
"text-on-success-container",
"hover:bg-success-container-hovered",
"enabled:active:bg-success-container-hovered",
"focus-visible:bg-success-container-hovered"
])
},
{
intent: "alert",
design: "tinted",
class: (0, import_internal_utils6.tw)([
"bg-alert-container",
"text-on-alert-container",
"hover:bg-alert-container-hovered",
"enabled:active:bg-alert-container-hovered",
"focus-visible:bg-alert-container-hovered"
])
},
{
intent: "danger",
design: "tinted",
class: (0, import_internal_utils6.tw)([
"bg-error-container",
"text-on-error-container",
"hover:bg-error-container-hovered",
"enabled:active:bg-error-container-hovered",
"focus-visible:bg-error-container-hovered"
])
},
{
intent: "info",
design: "tinted",
class: (0, import_internal_utils6.tw)([
"bg-info-container",
"text-on-info-container",
"hover:bg-info-container-hovered",
"enabled:active:bg-info-container-hovered",
"focus-visible:bg-info-container-hovered"
])
},
{
intent: "neutral",
design: "tinted",
class: (0, import_internal_utils6.tw)([
"bg-neutral-container",
"text-on-neutral-container",
"hover:bg-neutral-container-hovered",
"enabled:active:bg-neutral-container-hovered",
"focus-visible:bg-neutral-container-hovered"
])
},
{
intent: "surface",
design: "tinted",
class: (0, import_internal_utils6.tw)([
"bg-surface",
"text-on-surface",
"hover:bg-surface-hovered",
"enabled:active:bg-surface-hovered",
"focus-visible:bg-surface-hovered"
])
}
];
// src/button/variants/contrast.ts
var import_internal_utils7 = require("@spark-ui/internal-utils");
var contrastVariants = [
{
intent: "main",
design: "contrast",
class: (0, import_internal_utils7.tw)([
"text-main",
"hover:bg-main-container-hovered",
"enabled:active:bg-main-container-hovered",
"focus-visible:bg-main-container-hovered"
])
},
{
intent: "support",
design: "contrast",
class: (0, import_internal_utils7.tw)([
"text-support",
"hover:bg-support-container-hovered",
"enabled:active:bg-support-container-hovered",
"focus-visible:bg-support-container-hovered"
])
},
{
intent: "accent",
design: "contrast",
class: (0, import_internal_utils7.tw)([
"text-accent",
"hover:bg-accent-container-hovered",
"enabled:active:bg-accent-container-hovered",
"focus-visible:bg-accent-container-hovered"
])
},
{
intent: "basic",
design: "contrast",
class: (0, import_internal_utils7.tw)([
"text-basic",
"hover:bg-basic-container-hovered",
"enabled:active:bg-basic-container-hovered",
"focus-visible:bg-basic-container-hovered"
])
},
{
intent: "success",
design: "contrast",
class: (0, import_internal_utils7.tw)([
"text-success",
"hover:bg-success-container-hovered",
"enabled:active:bg-success-container-hovered",
"focus-visible:bg-success-container-hovered"
])
},
{
intent: "alert",
design: "contrast",
class: (0, import_internal_utils7.tw)([
"text-alert",
"hover:bg-alert-container-hovered",
"enabled:active:bg-alert-container-hovered",
"focus-visible:bg-alert-container-hovered"
])
},
{
intent: "danger",
design: "contrast",
class: (0, import_internal_utils7.tw)([
"text-error",
"hover:bg-error-container-hovered",
"enabled:active:bg-error-container-hovered",
"focus-visible:bg-error-container-hovered"
])
},
{
intent: "info",
design: "contrast",
class: (0, import_internal_utils7.tw)([
"text-info",
"hover:bg-info-container-hovered",
"enabled:active:bg-info-container-hovered",
"focus-visible:bg-info-container-hovered"
])
},
{
intent: "neutral",
design: "contrast",
class: (0, import_internal_utils7.tw)([
"text-neutral",
"hover:bg-neutral-container-hovered",
"enabled:active:bg-neutral-container-hovered",
"focus-visible:bg-neutral-container-hovered"
])
},
{
intent: "surface",
design: "contrast",
class: (0, import_internal_utils7.tw)([
"text-on-surface",
"hover:bg-surface-hovered",
"enabled:active:bg-surface-hovered",
"focus-visible:bg-surface-hovered"
])
}
];
// src/button/Button.styles.tsx
var buttonStyles = (0, import_class_variance_authority4.cva)(
[
"u-shadow-border-transition",
"box-border inline-flex items-center justify-center gap-md whitespace-nowrap",
"px-lg",
"text-body-1 font-bold",
"focus-visible:u-outline"
],
{
variants: {
/**
* Main style of the button.
*
* - `filled`: Button will be plain.
*
* - `outlined`: Button will be transparent with an outline.
*
* - `tinted`: Button will be filled but using a lighter color scheme.
*
* - `ghost`: Button will look like a link. No borders, plain text.
*
* - `contrast`: Button will be surface filled. No borders, plain text.
*
*/
design: (0, import_internal_utils8.makeVariants)({
filled: [],
outlined: ["bg-transparent", "border-sm", "border-current"],
tinted: [],
ghost: [],
contrast: ["bg-surface"]
}),
/**
* Color scheme of the button.
*/
intent: (0, import_internal_utils8.makeVariants)({
main: [],
support: [],
accent: [],
basic: [],
success: [],
alert: [],
danger: [],
info: [],
neutral: [],
surface: []
}),
/**
* Size of the button.
*/
size: (0, import_internal_utils8.makeVariants)({
sm: ["min-w-sz-32", "h-sz-32"],
md: ["min-w-sz-44", "h-sz-44"],
lg: ["min-w-sz-56", "h-sz-56"]
}),
/**
* Shape of the button.
*/
shape: (0, import_internal_utils8.makeVariants)({
rounded: ["rounded-lg"],
square: ["rounded-0"],
pill: ["rounded-full"]
}),
/**
* Disable the button, preventing user interaction and adding opacity.
*/
disabled: {
true: ["cursor-not-allowed", "opacity-dim-3"],
false: ["cursor-pointer"]
}
},
compoundVariants: [
...filledVariants,
...outlinedVariants,
...tintedVariants,
...ghostVariants,
...contrastVariants
],
defaultVariants: {
design: "filled",
intent: "main",
size: "md",
shape: "rounded"
}
}
);
// src/button/Button.tsx
var import_jsx_runtime9 = require("react/jsx-runtime");
var blockedEventHandlers = [
"onClick",
"onMouseDown",
"onMouseUp",
"onMouseEnter",
"onMouseLeave",
"onMouseOver",
"onMouseOut",
"onKeyDown",
"onKeyPress",
"onKeyUp",
"onSubmit"
];
var Button = ({
children,
design = "filled",
disabled = false,
intent = "main",
isLoading = false,
loadingLabel,
loadingText,
shape = "rounded",
size = "md",
asChild,
className,
ref,
...others
}) => {
const Component = asChild ? Slot : "button";
const shouldNotInteract = !!disabled || isLoading;
const disabledEventHandlers = (0, import_react5.useMemo)(() => {
const result = {};
if (shouldNotInteract) {
blockedEventHandlers.forEach((eventHandler) => result[eventHandler] = void 0);
}
return result;
}, [shouldNotInteract]);
const spinnerProps = {
size: "current",
className: loadingText ? "inline-block" : "absolute",
...loadingLabel && { "aria-label": loadingLabel }
};
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
Component,
{
"data-spark-component": "button",
...Component === "button" && { type: "button" },
ref,
className: buttonStyles({
className,
design,
disabled: shouldNotInteract,
intent,
shape,
size
}),
disabled: !!disabled,
"aria-busy": isLoading,
"aria-live": isLoading ? "assertive" : "off",
...others,
...disabledEventHandlers,
children: wrapPolymorphicSlot(
asChild,
children,
(slotted) => isLoading ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Spinner, { ...spinnerProps }),
loadingText && loadingText,
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
"div",
{
"aria-hidden": true,
className: (0, import_class_variance_authority5.cx)("gap-md", loadingText ? "hidden" : "inline-flex opacity-0"),
children: slotted
}
)
] }) : slotted
)
}
);
};
Button.displayName = "Button";
// src/icon-button/IconButton.styles.tsx
var import_internal_utils9 = require("@spark-ui/internal-utils");
var import_class_variance_authority6 = require("class-variance-authority");
var iconButtonStyles = (0, import_class_variance_authority6.cva)(["pl-0 pr-0"], {
variants: {
/**
* Sets the size of the icon.
*/
size: (0, import_internal_utils9.makeVariants)({
sm: ["text-body-1"],
md: ["text-body-1"],
lg: ["text-display-3"]
})
}
});
// src/icon-button/IconButton.tsx
var import_jsx_runtime10 = require("react/jsx-runtime");
var IconButton = ({
design = "filled",
disabled = false,
intent = "main",
shape = "rounded",
size = "md",
className,
ref,
...others
}) => {
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
Button,
{
ref,
className: iconButtonStyles({ size, className }),
design,
disabled,
intent,
shape,
size,
...others
}
);
};
IconButton.displayName = "IconButton";
// src/dialog/DialogCloseButton.tsx
var import_jsx_runtime11 = require("react/jsx-runtime");
var Root = ({
"aria-label": ariaLabel,
className,
size = "md",
intent = "neutral",
design = "ghost",
children = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Close.Close, {}),
ref,
...rest
}) => {
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
Close,
{
"data-part": "close",
ref,
className: (0, import_class_variance_authority7.cx)(["absolute", "top-md", "right-xl"], className),
asChild: true,
...rest,
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconButton, { intent, size, design, "aria-label": ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { children }) })
}
);
};
var CloseButton = Object.assign(Root, {
id: "CloseButton"
});
Root.displayName = "Dialog.CloseButton";
// src/dialog/DialogContent.tsx
var import_radix_ui4 = require("radix-ui");
var import_react6 = require("react");
// src/dialog/DialogContent.styles.tsx
var import_class_variance_authority8 = require("class-variance-authority");
var dialogContentStyles = (0, import_class_variance_authority8.cva)(
[
"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
var import_jsx_runtime12 = require("react/jsx-runtime");
var Content = ({
children,
className,
isNarrow = false,
size = "md",
onInteractOutside,
ref,
...rest
}) => {
const { setIsFullScreen } = useDialog();
(0, import_react6.useEffect)(() => {
if (size === "fullscreen") setIsFullScreen(true);
return () => setIsFullScreen(false);
}, [setIsFullScreen, size]);
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
import_radix_ui4.Dialog.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
var import_radix_ui5 = require("radix-ui");
var import_jsx_runtime13 = require("react/jsx-runtime");
var Description = (props) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_radix_ui5.Dialog.Description, { ...props });
Description.displayName = "Dialog.Description";
// src/dialog/DialogFooter.tsx
var import_class_variance_authority9 = require("class-variance-authority");
var import_jsx_runtime14 = require("react/jsx-runtime");
var Footer = ({ children, className, ref, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("footer", { ref, className: (0, import_class_variance_authority9.cx)(className, ["px-xl", "py-lg"]), ...rest, children });
Footer.displayName = "Dialog.Footer";
// src/dialog/DialogHeader.tsx
var import_class_variance_authority10 = require("class-variance-authority");
var import_jsx_runtime15 = require("react/jsx-runtime");
var Header = ({ children, className, ref, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("header", { ref, className: (0, import_class_variance_authority10.cx)(className, ["px-xl", "py-lg"]), ...rest, children });
Header.displayName = "Dialog.Header";
// src/dialog/DialogOverlay.tsx
var import_class_variance_authority11 = require("class-variance-authority");
var import_radix_ui6 = require("radix-ui");
var import_jsx_runtime16 = require("react/jsx-runtime");
var Overlay = ({ className, ref, ...rest }) => {
const { isFullScreen } = useDialog();
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
import_radix_ui6.Dialog.Overlay,
{
ref,
className: (0, import_class_variance_authority11.cx)(
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
var import_radix_ui7 = require("radix-ui");
var import_jsx_runtime17 = require("react/jsx-runtime");
var Portal = ({ children, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_radix_ui7.Dialog.Portal, { ...rest, children });
Portal.displayName = "Dialog.Portal";
// src/dialog/DialogTitle.tsx
var import_class_variance_authority12 = require("class-variance-authority");
var import_radix_ui8 = require("radix-ui");
var import_jsx_runtime18 = require("react/jsx-runtime");
var Title = ({ className, ref, ...others }) => {
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
import_radix_ui8.Dialog.Title,
{
ref,
className: (0, import_class_variance_authority12.cx)(
"text-headline-1 text-on-surface",
"group-has-data-[part=close]:pr-3xl",
className
),
...others
}
);
};
Title.displayName = "Dialog.Title";
// src/dialog/DialogTrigger.tsx
var import_radix_ui9 = require("radix-ui");
var import_jsx_runtime19 = require("react/jsx-runtime");
var Trigger = (props) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_radix_ui9.Dialog.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";
// src/alert-dialog/AlertDialog.tsx
var import_jsx_runtime20 = require("react/jsx-runtime");
var AlertDialog = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Dialog2, { "data-spark-component": "alert-dialog", ...props, modal: true });
};
AlertDialog.displayName = "AlertDialog";
// src/alert-dialog/AlertDialogAction.tsx
var import_jsx_runtime21 = require("react/jsx-runtime");
var AlertDialogAction = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Dialog2.Close, { "data-spark-component": "alert-dialog-action", ...props });
};
AlertDialogAction.displayName = "AlertDialog.Action";
// src/alert-dialog/AlertDialogBody.tsx
var import_jsx_runtime22 = require("react/jsx-runtime");
var AlertDialogBody = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Dialog2.Body, { "data-spark-component": "alert-dialog-body", ...props });
};
AlertDialogBody.displayName = "AlertDialog.Body";
// src/alert-dialog/AlertDialogCancel.tsx
var import_use_merge_refs = require("@spark-ui/hooks/use-merge-refs");
// src/alert-dialog/AlertDialogContext.ts
var import_react7 = require("react");
var AlertDialogContext = (0, import_react7.createContext)(null);
var useAlertDialog = () => {
const context = (0, import_react7.useContext)(AlertDialogContext);
if (!context) {
throw Error("useAlertDialog must be used within a RadioGroup provider");
}
return context;
};
// src/alert-dialog/AlertDialogCancel.tsx
var import_jsx_runtime23 = require("react/jsx-runtime");
var AlertDialogCancel = ({ ref: forwardedRef, ...props }) => {
const { cancelRef } = useAlertDialog();
const ref = (0, import_use_merge_refs.useMergeRefs)(forwardedRef, cancelRef);
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Dialog2.Close, { ref, "data-spark-component": "alert-dialog-cancel", ...props });
};
AlertDialogCancel.displayName = "AlertDialog.Cancel";
// src/alert-dialog/AlertDialogContent.tsx
var import_class_variance_authority13 = require("class-variance-authority");
var import_internal = require("radix-ui/internal");
var import_react8 = require("react");
var import_jsx_runtime24 = require("react/jsx-runtime");
var AlertDialogContent = ({
className,
onOpenAutoFocus,
ref,
...others
}) => {
const cancelRef = (0, import_react8.useRef)(null);
const value = (0, import_react8.useMemo)(() => {
return { cancelRef };
}, []);
const handleOpenAutoFocus = (event) => {
event.preventDefault();
cancelRef.current?.focus({ preventScroll: true });
};
const handlePointerDownOutside = (event) => {
event.preventDefault();
};
const handleInteractOutside = (event) => {
event.preventDefault();
};
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AlertDialogContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
Dialog2.Content,
{
ref,
"data-spark-component": "alert-dialog-content",
...others,
className: (0, import_class_variance_authority13.cx)(className, "min-w-sz-288"),
role: "alertdialog",
size: "md",
onOpenAutoFocus: (0, import_internal.composeEventHandlers)(onOpenAutoFocus, handleOpenAutoFocus),
onPointerDownOutside: handlePointerDownOutside,
onInteractOutside: handleInteractOutside,
isNarrow: true
}
) });
};
AlertDialogContent.displayName = "AlertDialog.Content";
// src/alert-dialog/AlertDialogDescription.tsx
var import_jsx_runtime25 = require("react/jsx-runtime");
var AlertDialogDescription = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Dialog2.Description, { "data-spark-component": "alert-dialog-description", ...props });
};
AlertDialogDescription.displayName = "AlertDialog.Description";
// src/alert-dialog/AlertDialogFooter.tsx
var import_jsx_runtime26 = require("react/jsx-runtime");
var AlertDialogFooter = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Dialog2.Footer, { "data-spark-component": "alert-dialog-footer", ...props });
};
AlertDialogFooter.displayName = "AlertDialog.Footer";
// src/alert-dialog/AlertDialogHeader.tsx
var import_jsx_runtime27 = require("react/jsx-runtime");
var AlertDialogHeader = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Dialog2.Header, { "data-spark-component": "alert-dialog-header", ...props });
};
AlertDialogHeader.displayName = "AlertDialog.Header";
// src/alert-dialog/AlertDialogOverlay.tsx
var import_jsx_runtime28 = require("react/jsx-runtime");
var AlertDialogOverlay = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Dialog2.Overlay, { "data-spark-component": "alert-dialog-overlay", ...props });
};
AlertDialogOverlay.displayName = "AlertDialog.Overlay";
// src/alert-dialog/AlertDialogPortal.tsx
var import_jsx_runtime29 = require("react/jsx-runtime");
var AlertDialogPortal = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Dialog2.Portal, { "data-spark-component": "alert-dialog-portal", ...props });
};
AlertDialogPortal.displayName = "AlertDialog.Portal";
// src/alert-dialog/AlertDialogTitle.tsx
var import_jsx_runtime30 = require("react/jsx-runtime");
var AlertDialogTitle = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Dialog2.Title, { "data-spark-component": "alert-dialog-title", ...props });
};
AlertDialogTitle.displayName = "AlertDialog.Title";
// src/alert-dialog/AlertDialogTrigger.tsx
var import_jsx_runtime31 = require("react/jsx-runtime");
var AlertDialogTrigger = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Dialog2.Trigger, { "data-spark-component": "alert-dialog-title", ...props });
};
AlertDialogTrigger.displayName = "AlertDialog.Trigger";
// src/alert-dialog/index.ts
var AlertDialog2 = Object.assign(AlertDialog, {
Action: AlertDialogAction,
Body: AlertDialogBody,
Cancel: AlertDialogCancel,
Content: AlertDialogContent,
Description: AlertDialogDescription,
Footer: AlertDialogFooter,
Header: AlertDialogHeader,
Overlay: AlertDialogOverlay,
Portal: AlertDialogPortal,
Title: AlertDialogTitle,
Trigger: AlertDialogTrigger
});
AlertDialog2.displayName = "AlertDialog";
AlertDialog2.Action.displayName = "AlertDialog.Action";
AlertDialog2.Body.displayName = "AlertDialog.Body";
AlertDialog2.Cancel.displayName = "AlertDialog.Cancel";
AlertDialog2.Content.displayName = "AlertDialog.Content";
AlertDialog2.Description.displayName = "AlertDialog.Description";
AlertDialog2.Footer.displayName = "AlertDialog.Footer";
AlertDialog2.Header.displayName = "AlertDialog.Header";
AlertDialog2.Overlay.displayName = "AlertDialog.Overlay";
AlertDialog2.Portal.displayName = "AlertDialog.Portal";
AlertDialog2.Title.displayName = "AlertDialog.Title";
AlertDialog2.Trigger.displayName = "AlertDialog.Trigger";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
AlertDialog,
useAlertDialog
});
//# sourceMappingURL=index.js.map