raft-ui
Version:
React UI components for Raft.
862 lines (856 loc) • 26.1 kB
JavaScript
import { cn } from "./cn.mjs";
import { Dialog } from "@base-ui/react/dialog";
import { X } from "lucide-react";
import { tv } from "tailwind-variants/lite";
import { createContext, use } from "react";
import { Button } from "@base-ui/react/button";
import { mergeProps } from "@base-ui/react/merge-props";
import { useRender } from "@base-ui/react/use-render";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
//#region src/lib/tv.ts
const tv$1 = ((options) => {
const recipe = tv(options);
const wrappedRecipe = ((props) => {
const result = recipe(props);
if (result == null || typeof result === "string") return cn(result);
return Object.fromEntries(Object.entries(result).map(([slotName, slot]) => [slotName, (slotProps) => cn(slot(slotProps))]));
});
return Object.assign(wrappedRecipe, recipe);
});
//#endregion
//#region src/lib/theme/theme-context.ts
const ThemeContext = createContext("brutal");
const ThemeStateContext = createContext({
theme: "brutal",
setTheme: () => void 0,
mode: "light",
resolvedMode: "light"
});
//#endregion
//#region src/lib/theme/use-theme.ts
/** Read the active style family for theme-aware component recipes. */
function useThemeFamily() {
return use(ThemeContext);
}
/** Read and update the application-level RUI theme selection. */
function useTheme() {
return use(ThemeStateContext);
}
//#endregion
//#region src/lib/theme/theme-scope.ts
function resolveThemeScopeProps({ className, "data-theme": _dataTheme, ...props }, { theme, resolvedMode }) {
const modeClassName = theme === "elegant" ? resolvedMode : void 0;
const resolvedClassName = typeof className === "function" && modeClassName ? (state) => cn(className(state), modeClassName) : typeof className === "string" && modeClassName ? cn(className, modeClassName) : className ?? modeClassName;
return {
...props,
"data-theme": theme,
className: resolvedClassName
};
}
function useThemeScopeProps(props) {
return resolveThemeScopeProps(props, useTheme());
}
//#endregion
//#region src/lib/default-native-button.ts
function defaultNativeButton(render) {
if (!render || typeof render !== "object" || !("type" in render)) return;
const element = render;
if (typeof element.type === "string") return element.type === "button";
}
//#endregion
//#region src/components/spinner/spinner.tsx
const ELEGANT_SPINNER_STYLE = `
@keyframes raft-elegant-spinner-spin {
to {
transform: rotate(360deg);
}
}
@keyframes raft-elegant-spinner-dash {
0% {
stroke-dasharray: 1 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90 150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90 150;
stroke-dashoffset: -124;
}
}
[data-slot="spinner"] [data-spinner-ring] {
animation: raft-elegant-spinner-spin 1600ms linear infinite;
transform-box: fill-box;
transform-origin: center;
will-change: transform;
}
[data-slot="spinner"] [data-spinner-arc] {
animation: raft-elegant-spinner-dash 1400ms cubic-bezier(0.42, 0, 0.58, 1) infinite;
stroke-dasharray: 1 150;
stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: reduce) {
[data-slot="spinner"] [data-spinner-ring] {
animation-duration: 2400ms;
will-change: auto;
}
[data-slot="spinner"] [data-spinner-arc] {
animation: none;
stroke-dasharray: 72 150;
stroke-dashoffset: -30;
}
}
`;
const spinner = tv$1({
slots: {
root: ["relative inline-flex shrink-0 items-center justify-center", "leading-none text-current"],
ring: "block size-full shrink-0"
},
variants: {
theme: {
brutal: {},
elegant: {}
},
size: {
xs: {},
sm: {},
md: {},
lg: {}
},
variant: {
default: {},
inverse: {}
}
},
defaultVariants: { size: "sm" },
compoundVariants: [
{
theme: "brutal",
size: "xs",
class: { root: "size-2.5" }
},
{
theme: "brutal",
size: "sm",
class: { root: "size-4" }
},
{
theme: "brutal",
size: "md",
class: { root: "size-5" }
},
{
theme: "brutal",
size: "lg",
class: { root: "size-8" }
},
{
theme: "brutal",
variant: "default",
class: {
root: "text-black",
ring: "animate-spin rounded-full border-2 border-current/20 border-t-current"
}
},
{
theme: "brutal",
variant: "inverse",
class: {
root: "text-white",
ring: "animate-spin rounded-full border-2 border-current/40 border-t-current"
}
},
{
theme: "elegant",
size: "xs",
class: { root: "size-3.5" }
},
{
theme: "elegant",
size: "sm",
class: { root: "size-3.5" }
},
{
theme: "elegant",
size: "md",
class: { root: "size-4.5" }
},
{
theme: "elegant",
size: "lg",
class: { root: "size-4.5" }
}
]
});
const spinnerStyle = /* @__PURE__ */ jsx("style", {
href: "raft-ui-spinner",
precedence: "default",
children: ELEGANT_SPINNER_STYLE
});
function Spinner({ size = "sm", variant = "default", className, render, ...props }) {
const theme = useThemeFamily();
const { root, ring } = spinner({
theme,
size,
variant
});
const children = theme === "elegant" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [spinnerStyle, /* @__PURE__ */ jsxs("svg", {
"data-spinner-ring": "",
"aria-hidden": "true",
className: ring(),
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 24 24",
children: [/* @__PURE__ */ jsx("circle", {
className: "opacity-20",
cx: "12",
cy: "12",
r: "10",
stroke: "currentColor",
strokeWidth: "2.5"
}), /* @__PURE__ */ jsx("circle", {
"data-spinner-arc": "",
className: "opacity-80",
cx: "12",
cy: "12",
r: "10",
fill: "none",
pathLength: "150",
stroke: "currentColor",
strokeLinecap: "round",
strokeWidth: "2.5"
})]
})] }) : /* @__PURE__ */ jsx("span", {
"data-spinner-ring": "",
"aria-hidden": "true",
className: ring()
});
const defaultProps = {
role: "status",
"aria-label": "Loading",
className: root({ className }),
children
};
return useRender({
defaultTagName: "span",
render,
props: mergeProps(defaultProps, props),
state: {
slot: "spinner",
size
}
});
}
//#endregion
//#region src/components/button/button.tsx
const buttonVariants = tv$1({
slots: {
root: [
"relative inline-flex shrink-0 items-center justify-center",
"font-heading whitespace-nowrap select-none",
"rounded-none",
"shadow-raft-sm transition-all duration-100",
"outline-[1px] outline-offset-2 outline-transparent focus-visible:outline-transparent",
"data-[loading=true]:cursor-wait",
"disabled:pointer-events-none disabled:opacity-40 aria-disabled:opacity-40 aria-disabled:cursor-not-allowed data-[loading=true]:opacity-100",
"disabled:transform-none aria-disabled:transform-none",
"aria-disabled:hover:translate-none",
"aria-disabled:active:translate-none aria-disabled:active:scale-none",
"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
],
content: "relative z-10 inline-flex items-center justify-center gap-[inherit] data-[loading=true]:invisible",
loadingIndicator: "pointer-events-none absolute inset-0 z-10 flex items-center justify-center"
},
variants: {
theme: {
brutal: { root: ["border-2 font-bold"] },
elegant: { root: [
"overflow-clip border-0 font-sans font-medium antialiased",
"focus-visible:ring-2 focus-visible:ring-[color-mix(in_oklch,var(--button-focus-ring,var(--primary-400))_80%,transparent)] focus-visible:ring-offset-1 focus-visible:ring-offset-layer-canvas-muted",
"shadow-[inset_0_1px_0.5px_oklch(1_0_0/0.05),0_0_0_1px_var(--line-muted)]",
"before:pointer-events-none before:absolute before:inset-0 before:z-0 before:rounded-[inherit]",
"active:scale-[0.985]"
] }
},
variant: {
primary: { root: ["border-line-strong bg-primary-400 text-primary-950", "hover:bg-primary-500"] },
default: { root: ["border-line-strong bg-layer-panel text-foreground", "hover:bg-layer-panel"] },
information: { root: ["border-line-strong bg-info text-foreground-inverse", "hover:bg-info"] },
muted: { root: ["border-line-strong bg-secondary-400 text-secondary-950", "hover:bg-secondary-400"] },
accent: { root: ["border-line-strong bg-accent-400 text-accent-950", "hover:bg-accent-500"] },
warning: { root: ["border-line-strong bg-warning text-warning-foreground", "hover:bg-warning"] },
success: { root: ["border-line-strong bg-success text-success-foreground", "hover:bg-success"] },
outline: { root: [
"border-line-strong bg-transparent text-foreground",
"hover:bg-fill-muted",
"aria-disabled:hover:bg-layer-panel",
"shadow-none"
] },
ghost: { root: [
"border-transparent bg-transparent text-foreground-strong shadow-none",
"hover:border-line-strong hover:bg-fill-muted",
"aria-disabled:hover:border-transparent aria-disabled:hover:bg-transparent"
] },
link: { root: [
"border-transparent bg-transparent text-foreground shadow-none underline-offset-4",
"hover:underline",
"aria-disabled:hover:no-underline"
] },
"danger-secondary": { root: ["border-line-strong bg-danger-soft text-danger", "hover:bg-danger-soft"] },
danger: { root: ["border-line-strong bg-danger text-danger-foreground", "hover:border-danger-hover hover:bg-danger-hover"] },
"danger-outline": { root: [
"border-line-strong bg-transparent text-danger",
"hover:bg-fill-muted",
"aria-disabled:hover:bg-transparent",
"shadow-none"
] }
},
size: {
xs: { root: [
"h-6 gap-1 px-2 py-0 text-[11px]",
"has-data-[icon=inline-start]:pl-1.5 has-data-[icon=inline-end]:pr-1.5",
"**:data-icon:size-[1em]",
"[&_svg:not([class*='size-'])]:size-3"
] },
sm: { root: [
"h-7 gap-[5px] px-2.5 py-0 text-xs",
"has-data-[icon=inline-start]:pl-2 has-data-[icon=inline-end]:pr-2",
"**:data-icon:size-[1em]",
"[&_svg:not([class*='size-'])]:size-3.5"
] },
md: { root: [
"h-8 gap-[5.5px] px-3 py-0 text-sm",
"has-data-[icon=inline-start]:pl-2.5 has-data-[icon=inline-end]:pr-2.5",
"**:data-icon:size-[1em]"
] },
lg: { root: [
"gap-1.5 px-3.5 py-0 text-base",
"has-data-[icon=inline-start]:pl-3 has-data-[icon=inline-end]:pr-3",
"**:data-icon:size-[1em]"
] },
inline: { root: ["h-auto gap-1 border-0 p-0 align-baseline leading-[inherit] whitespace-normal", "**:data-icon:size-[1em]"] },
"icon-xs": { root: ["size-6 p-0 text-[11px]", "[&_svg:not([class*='size-'])]:size-3"] },
"icon-sm": { root: ["size-7 p-0 text-xs", "[&_svg:not([class*='size-'])]:size-3.5"] },
"icon-md": { root: "size-8 p-0 text-sm" },
"icon-lg": { root: "p-0 text-sm" }
}
},
defaultVariants: {
variant: "default",
size: "md"
},
compoundVariants: [
{
theme: "elegant",
size: "xs",
class: { root: "rounded-sm" }
},
{
theme: "elegant",
size: "icon-xs",
class: { root: "rounded-sm" }
},
{
theme: "elegant",
size: "sm",
class: { root: "rounded-sm" }
},
{
theme: "elegant",
size: "icon-sm",
class: { root: "rounded-sm" }
},
{
theme: "elegant",
size: "md",
class: { root: "rounded-md" }
},
{
theme: "elegant",
size: "icon-md",
class: { root: "rounded-md" }
},
{
theme: "elegant",
size: "lg",
class: { root: "h-9 rounded-md" }
},
{
theme: "elegant",
size: "icon-lg",
class: { root: "size-9 rounded-md" }
},
{
theme: "elegant",
variant: [
"default",
"primary",
"outline",
"information",
"muted",
"accent",
"warning",
"danger",
"danger-secondary",
"danger-outline"
],
class: { root: "dark:shadow-raft-xs" }
},
{
theme: "elegant",
variant: ["default", "outline"],
class: { root: "[--button-focus-ring:var(--foreground)]" }
},
{
theme: "elegant",
variant: [
"ghost",
"link",
"muted"
],
class: { root: "[--button-focus-ring:var(--line-hairline)]" }
},
{
theme: "elegant",
variant: [
"danger-secondary",
"danger",
"danger-outline"
],
class: { root: "[--button-focus-ring:var(--danger)]" }
},
{
theme: "brutal",
variant: "primary",
class: { root: "bg-brutal-yellow text-foreground-strong hover:bg-brutal-yellow" }
},
{
theme: "brutal",
variant: "default",
class: { root: "bg-layer-panel text-foreground-strong hover:bg-layer-panel" }
},
{
theme: "brutal",
variant: "outline",
class: { root: "bg-layer-panel text-foreground-strong shadow-raft-sm hover:bg-layer-panel" }
},
{
theme: "brutal",
variant: "information",
class: { root: "bg-brutal-cyan text-foreground-strong hover:bg-brutal-cyan" }
},
{
theme: "brutal",
variant: "muted",
class: { root: "bg-brutal-stone text-foreground-strong hover:bg-brutal-stone" }
},
{
theme: "brutal",
variant: "accent",
class: { root: "bg-brutal-pink text-foreground-strong hover:bg-brutal-pink" }
},
{
theme: "brutal",
variant: "danger",
class: { root: "bg-brutal-red text-foreground-strong hover:border-line-strong hover:bg-brutal-red" }
},
{
theme: "brutal",
variant: "danger-secondary",
class: { root: "text-[color-mix(in_oklab,var(--danger)_72%,transparent)] hover:border-line-strong" }
},
{
theme: "brutal",
variant: "warning",
class: { root: "bg-brutal-orange text-foreground-strong hover:bg-brutal-orange" }
},
{
theme: "brutal",
variant: "success",
class: { root: "bg-brutal-lime text-foreground-strong hover:bg-brutal-lime" }
},
{
theme: "brutal",
size: "lg",
class: { root: ["h-10 px-4 text-sm", "has-data-[icon=inline-start]:pl-3.5 has-data-[icon=inline-end]:pr-3.5"] }
},
{
theme: "brutal",
size: "icon-lg",
class: { root: "size-10" }
},
{
theme: "elegant",
variant: "default",
class: { root: [
"bg-foreground text-foreground-inverse",
"dark:bg-ink",
"shadow-[inset_0_1px_0.5px_oklch(1_0_0/0.12),0_0_0_1px_var(--foreground)]",
"before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0/8%)_0%,oklab(0%_0_0/0%)_100%)]",
"hover:bg-[oklch(0.31_0.006_106.42)] dark:hover:bg-foreground-strong",
"aria-disabled:hover:bg-foreground aria-disabled:dark:hover:bg-ink"
] }
},
{
theme: "elegant",
variant: "primary",
class: { root: [
"bg-primary-soft text-primary-strong",
"[--button-focus-ring:var(--primary-strong)]",
"shadow-[inset_0_1px_0.5px_oklch(1_0_0/0.04),0_0_0_1px_var(--primary-edge)]",
"before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0/4%)_0%,oklab(0%_0_0/0%)_100%)]",
"hover:bg-primary-hover",
"aria-disabled:hover:bg-primary-soft"
] }
},
{
theme: "elegant",
variant: "outline",
class: { root: [
"bg-layer-panel text-foreground dark:text-foreground-muted",
"shadow-[inset_0_1px_0.5px_oklch(1_0_0/0.05),0_0_0_1px_var(--line-muted)]",
"before:bg-[linear-gradient(in_oklab_180deg,oklab(0%_0_0/0%)_30%,oklab(0%_0_0/1%)_100%)]",
"hover:bg-fill-muted",
"dark:bg-fill-muted dark:hover:bg-fill-strong",
"aria-disabled:hover:bg-layer-panel aria-disabled:dark:hover:bg-fill-muted"
] }
},
{
theme: "elegant",
variant: "ghost",
class: { root: [
"bg-transparent text-foreground-muted shadow-none",
"hover:bg-ink-4",
"aria-disabled:hover:border-transparent aria-disabled:hover:bg-transparent"
] }
},
{
theme: "elegant",
variant: "danger-secondary",
class: { root: [
"bg-danger-soft text-danger",
"dark:bg-[oklch(0.37_0.06_27)] dark:text-[oklch(0.8_0.17_22)]",
"shadow-[inset_0_1px_0.5px_oklch(1_0_0/0.08),0_0_0_1px_var(--danger-muted)]",
"before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0/4%)_0%,oklab(0%_0_0/0%)_100%)]",
"hover:bg-danger-muted",
"dark:hover:bg-[oklch(0.4_0.07_27)]",
"aria-disabled:hover:bg-danger-soft aria-disabled:dark:hover:bg-[oklch(0.37_0.06_27)]"
] }
},
{
theme: "elegant",
variant: "danger",
class: { root: [
"bg-danger text-danger-foreground",
"dark:bg-[oklch(0.58_0.21_27)] dark:text-[oklch(0.985_0.004_106.42)]",
"shadow-[inset_0_1px_0.5px_oklch(1_0_0/0.12),0_0_0_1px_var(--danger)]",
"before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0/10%)_0%,oklab(0%_0_0/0%)_100%)]",
"hover:bg-danger-hover",
"dark:hover:bg-[oklch(0.61_0.21_27)]",
"aria-disabled:hover:border-line-strong aria-disabled:hover:bg-danger aria-disabled:dark:hover:bg-[oklch(0.58_0.21_27)]"
] }
},
{
theme: "elegant",
variant: "danger-outline",
class: { root: [
"bg-layer-panel text-danger",
"dark:bg-fill-muted dark:text-[oklch(0.78_0.19_25)]",
"shadow-[inset_0_1px_0.5px_oklch(1_0_0/0.025),0_0_0_1px_var(--danger-muted)]",
"hover:bg-danger-soft",
"dark:hover:bg-fill-strong",
"aria-disabled:hover:bg-layer-panel aria-disabled:dark:hover:bg-fill-muted"
] }
},
{
theme: "elegant",
variant: "accent",
class: { root: [
"bg-accent-soft text-accent-strong",
"[--button-focus-ring:var(--accent-strong)]",
"shadow-[inset_0_1px_0.5px_oklch(1_0_0/0.04),0_0_0_1px_color-mix(in_srgb-linear,var(--accent-strong)_28%,transparent)]",
"before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0/4%)_0%,oklab(0%_0_0/0%)_100%)]",
"hover:bg-accent-hover",
"aria-disabled:hover:bg-accent-soft"
] }
},
{
theme: "elegant",
variant: "warning",
class: { root: [
"bg-warning text-[oklch(0.25_0.05_50)]",
"dark:bg-[oklch(0.66_0.17_46)]",
"[--button-focus-ring:var(--warning)]",
"shadow-[inset_0_1px_0.5px_oklch(1_0_0/0.14),0_0_0_1px_var(--warning)]",
"before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0/10%)_0%,oklab(0%_0_0/0%)_100%)]",
"hover:bg-warning-hover",
"dark:hover:bg-[oklch(0.69_0.17_46)]",
"aria-disabled:hover:bg-warning aria-disabled:dark:hover:bg-[oklch(0.66_0.17_46)]"
] }
},
{
theme: "elegant",
variant: "link",
class: { root: "bg-transparent text-foreground-muted shadow-none" }
},
{
theme: "elegant",
variant: "information",
class: { root: [
"bg-info text-foreground-inverse",
"dark:bg-info-strong",
"[--button-focus-ring:var(--info)]",
"shadow-[inset_0_1px_0.5px_oklch(1_0_0/0.12),0_0_0_1px_var(--info)]",
"before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0/8%)_0%,oklab(0%_0_0/0%)_100%)]",
"hover:bg-info-hover",
"dark:hover:bg-info",
"aria-disabled:hover:bg-info aria-disabled:dark:hover:bg-info-strong"
] }
},
{
theme: "elegant",
variant: "muted",
class: { root: [
"bg-fill-muted text-foreground-muted dark:text-foreground-placeholder",
"shadow-[inset_0_1px_0.5px_oklch(1_0_0/0.05),0_0_0_1px_var(--line-muted)]",
"before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0/5%)_0%,oklab(0%_0_0/1%)_100%)]",
"hover:bg-fill-strong",
"dark:bg-layer-panel",
"dark:hover:bg-fill-muted",
"aria-disabled:hover:bg-fill-muted aria-disabled:dark:hover:bg-layer-panel"
] }
},
{
theme: "brutal",
variant: [
"primary",
"default",
"information",
"muted",
"accent",
"warning",
"outline",
"danger-secondary",
"danger"
],
class: { root: [
"hover:-translate-y-px hover:shadow-raft-md",
"active:translate-px",
"active:shadow-raft-xs",
"aria-disabled:hover:shadow-raft-sm aria-disabled:active:shadow-raft-sm"
] }
},
{
theme: "brutal",
variant: "danger-outline",
class: { root: ["hover:-translate-y-px", "active:translate-px"] }
}
]
});
function Button$1({ variant, size, loading = false, loadingLabel = "Loading", disabled, className, children, render, nativeButton, ...props }) {
const theme = useThemeFamily();
const { root, content, loadingIndicator } = buttonVariants({
theme,
variant,
size
});
return /* @__PURE__ */ jsxs(Button, {
...props,
render,
nativeButton: nativeButton ?? defaultNativeButton(render),
"data-slot": "button",
className: root({ className }),
"data-loading": loading ? "true" : void 0,
disabled: disabled || loading,
...loading ? { "aria-disabled": true } : {},
children: [loading ? /* @__PURE__ */ jsx("span", {
"data-slot": "button-loading-indicator",
className: loadingIndicator(),
children: /* @__PURE__ */ jsx(Spinner, { "aria-label": loadingLabel })
}) : null, /* @__PURE__ */ jsx("span", {
"data-slot": "button-content",
"data-loading": loading ? "true" : void 0,
className: content(),
children
})]
});
}
//#endregion
//#region src/components/dialog/dialog.tsx
const dialog = tv$1({
slots: {
overlay: [
"fixed inset-0 z-50",
"transition-opacity duration-150 ease-out",
"data-starting-style:opacity-0 data-ending-style:opacity-0"
],
content: [
"fixed top-1/2 left-1/2 z-50 flex w-[calc(100%-2rem)] -translate-1/2 flex-col",
"max-h-[calc(100dvh-2rem)]",
"origin-center transform-gpu outline-none transition-[opacity,transform] duration-150 ease-out",
"data-starting-style:scale-[.98] data-starting-style:opacity-0",
"data-ending-style:opacity-0"
],
header: ["grid shrink-0 grid-cols-[minmax(0,1fr)_max-content] items-center gap-3 min-w-0"],
body: ["min-w-0 flex-1 overflow-y-auto"],
footer: ["flex shrink-0 items-center justify-end gap-3"],
title: ["m-0 min-w-0 text-foreground"],
description: ["m-0 text-foreground-muted"]
},
variants: {
size: {
sm: { content: ["max-w-sm"] },
md: { content: ["max-w-md"] },
lg: { content: ["max-w-lg"] }
},
layer: {
0: {
overlay: [],
content: []
},
1: {
overlay: ["z-60"],
content: ["z-60"]
}
},
theme: {
brutal: {
overlay: ["bg-layer-backdrop"],
content: ["gap-4 border-2 border-line-strong bg-layer-panel px-6 py-4 shadow-raft-xl"],
body: ["py-2 font-medium"],
title: ["font-heading text-lg leading-none font-bold uppercase"],
description: ["font-sans text-sm leading-5 text-foreground-strong/60"]
},
elegant: {
overlay: ["bg-layer-backdrop backdrop-blur-[2px]"],
content: ["overflow-clip rounded-lg bg-layer-popover shadow-raft-xl"],
header: ["px-6 py-3"],
body: ["px-6 py-5 dark:pt-2.5"],
footer: ["px-6 py-3"],
title: ["font-sans text-base leading-6 font-bold uppercase tracking-[0.025em]"],
description: ["font-sans text-sm leading-5 text-foreground-hint"]
}
}
},
defaultVariants: { size: "md" }
});
function Dialog$1(props) {
return /* @__PURE__ */ jsx(Dialog.Root, {
"data-slot": "dialog",
...props
});
}
function DialogTrigger(props) {
return /* @__PURE__ */ jsx(Dialog.Trigger, {
"data-slot": "dialog-trigger",
...props
});
}
function DialogPortal(props) {
return /* @__PURE__ */ jsx(Dialog.Portal, {
"data-slot": "dialog-portal",
...useThemeScopeProps(props)
});
}
function DialogOverlay({ className, layer, ...props }) {
const theme = useThemeFamily();
const { overlay } = dialog({
theme,
layer
});
return /* @__PURE__ */ jsx(Dialog.Backdrop, {
"data-slot": "dialog-overlay",
className: overlay({ className }),
...props
});
}
function DialogContent({ className, children, portalProps, overlay, size, layer, ...props }) {
const theme = useThemeFamily();
const { content } = dialog({
theme,
size,
layer
});
const overlayProps = typeof overlay === "object" ? overlay : {};
return /* @__PURE__ */ jsxs(DialogPortal, {
...portalProps,
children: [overlay === false ? null : /* @__PURE__ */ jsx(DialogOverlay, {
layer,
...overlayProps
}), /* @__PURE__ */ jsx(Dialog.Popup, {
"data-slot": "dialog-content",
className: content({ className }),
...props,
children
})]
});
}
function DialogClose({ className, variant, size, children, render, "aria-label": ariaLabel, ...props }) {
const isBrutal = useThemeFamily() === "brutal";
if (render) return /* @__PURE__ */ jsx(Dialog.Close, {
"data-slot": "dialog-close",
render,
"aria-label": ariaLabel,
...props,
children
});
return /* @__PURE__ */ jsx(Dialog.Close, {
"data-slot": "dialog-close",
render: /* @__PURE__ */ jsx(Button$1, {
variant: variant ?? (isBrutal ? "outline" : "ghost"),
size: size ?? (isBrutal ? "icon-md" : "icon-sm"),
"aria-label": ariaLabel ?? "Close",
className: isBrutal ? className : cn("p-0 text-foreground-placeholder hover:border-transparent hover:bg-transparent hover:text-foreground-strong", className)
}),
...props,
children: children ?? /* @__PURE__ */ jsx(X, { className: isBrutal ? "size-5" : "size-4" })
});
}
function DialogHeader({ className, ...props }) {
const theme = useThemeFamily();
const { header } = dialog({ theme });
return /* @__PURE__ */ jsx("div", {
"data-slot": "dialog-header",
className: header({ className }),
...props
});
}
function DialogBody({ className, ...props }) {
const theme = useThemeFamily();
const { body } = dialog({ theme });
return /* @__PURE__ */ jsx("div", {
"data-slot": "dialog-body",
className: body({ className }),
...props
});
}
function DialogFooter({ className, ...props }) {
const theme = useThemeFamily();
const { footer } = dialog({ theme });
return /* @__PURE__ */ jsx("div", {
"data-slot": "dialog-footer",
className: footer({ className }),
...props
});
}
function DialogTitle({ className, ...props }) {
const theme = useThemeFamily();
const { title } = dialog({ theme });
return /* @__PURE__ */ jsx(Dialog.Title, {
"data-slot": "dialog-title",
className: title({ className }),
...props
});
}
function DialogDescription({ className, ...props }) {
const theme = useThemeFamily();
const { description } = dialog({ theme });
return /* @__PURE__ */ jsx(Dialog.Description, {
"data-slot": "dialog-description",
className: description({ className }),
...props
});
}
//#endregion
export { tv$1 as S, useThemeScopeProps as _, DialogDescription as a, ThemeContext as b, DialogOverlay as c, DialogTrigger as d, Button$1 as f, resolveThemeScopeProps as g, defaultNativeButton as h, DialogContent as i, DialogPortal as l, Spinner as m, DialogBody as n, DialogFooter as o, buttonVariants as p, DialogClose as r, DialogHeader as s, Dialog$1 as t, DialogTitle as u, useTheme as v, ThemeStateContext as x, useThemeFamily as y };