@mastra/playground-ui 68.0.0 → 69.0.0-alpha.1

package/dist/Dialog-OBPu3rl2.js

@@ -0,0 +1,334 @@
+import { t as cn } from "./utils-DQx8TpNT.js";
+import { dialogSurfaceStyle } from "./primitives/raised-surface.es.js";
+import { t as Button } from "./Button-Bi7aXd_G.js";
+import { n as ScrollAreaViewport, t as ScrollArea } from "./scroll-area-9-S7wfSs.js";
+import { Drawer, DrawerContent } from "./components/Drawer.es.js";
+import { useIsMobile } from "./hooks/use-is-mobile.es.js";
+import * as React$1 from "react";
+import { createContext, useContext, useEffect, useId, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+import { Dialog } from "@base-ui/react/dialog";
+import './Dialog.css';// src/ds/components/Dialog/dialog-context.ts
+var DialogContext = createContext({
+	intent: "default",
+	pending: false,
+	isDrawer: false
+});
+function useDialogContext() {
+	return useContext(DialogContext);
+}
+var dialogActionSizeClasses = {
+	sm: "min-h-control-sm",
+	md: "min-h-control-md",
+	lg: "min-h-control-lg"
+};
+var dialogActionLayoutClasses = "h-auto min-w-0 max-w-full whitespace-normal wrap-anywhere max-[22rem]:w-full";
+// src/ds/components/Dialog/dialog-action.tsx
+var ARM_WINDOW_MS = 4e3;
+function HoldAction({ onConfirm, children, disabled, holdSeconds = 1.5, ...props }) {
+	const { intent, pending } = useDialogContext();
+	const [holding, setHolding] = useState(false);
+	const [completed, setCompleted] = useState(false);
+	const [armed, setArmed] = useState(false);
+	const timer = useRef(void 0);
+	const armTimer = useRef(void 0);
+	const active = useRef(false);
+	const hintId = useId();
+	function cancel() {
+		clearTimeout(timer.current);
+		active.current = false;
+		setHolding(false);
+	}
+	function disarm() {
+		clearTimeout(armTimer.current);
+		setArmed(false);
+	}
+	function complete() {
+		setHolding(false);
+		setCompleted(true);
+		disarm();
+		onConfirm();
+	}
+	function start() {
+		if (disabled || active.current) return;
+		active.current = true;
+		setHolding(true);
+		timer.current = setTimeout(complete, holdSeconds * 1e3);
+	}
+	function onClick(event) {
+		event.preventDefault();
+		if (event.detail !== 0 || disabled) return;
+		if (armed) {
+			complete();
+			return;
+		}
+		setArmed(true);
+		armTimer.current = setTimeout(() => setArmed(false), ARM_WINDOW_MS);
+	}
+	useEffect(() => {
+		function onVisibilityChange() {
+			if (document.hidden) cancel();
+		}
+		window.addEventListener("blur", cancel);
+		document.addEventListener("visibilitychange", onVisibilityChange);
+		return () => {
+			clearTimeout(timer.current);
+			clearTimeout(armTimer.current);
+			window.removeEventListener("blur", cancel);
+			document.removeEventListener("visibilitychange", onVisibilityChange);
+		};
+	}, []);
+	function onPointerDown(event) {
+		props.onPointerDown?.(event);
+		if (event.defaultPrevented || event.button !== 0 || !event.isPrimary) return;
+		start();
+	}
+	function onKeyDown(event) {
+		props.onKeyDown?.(event);
+		if (event.defaultPrevented || event.key !== " " && event.key !== "Enter") return;
+		event.preventDefault();
+		if (!event.repeat) start();
+	}
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsxs(Button, {
+			size: "md",
+			...props,
+			className: cn("group/hold relative isolate touch-none overflow-hidden select-none", dialogActionLayoutClasses, dialogActionSizeClasses[props.size ?? "md"], props.className),
+			type: "button",
+			variant: intent === "destructive" ? "destructive-ghost" : "ghost",
+			disabled,
+			"aria-describedby": [props["aria-describedby"], hintId].filter(Boolean).join(" "),
+			"data-holding": holding || void 0,
+			"data-completed": completed || pending || void 0,
+			onClick,
+			onPointerDown,
+			onPointerUp: (event) => {
+				cancel();
+				props.onPointerUp?.(event);
+			},
+			onPointerLeave: (event) => {
+				cancel();
+				props.onPointerLeave?.(event);
+			},
+			onPointerCancel: (event) => {
+				cancel();
+				props.onPointerCancel?.(event);
+			},
+			onKeyDown,
+			onKeyUp: (event) => {
+				if (event.key === " " || event.key === "Enter") {
+					event.preventDefault();
+					cancel();
+				}
+				props.onKeyUp?.(event);
+			},
+			onBlur: (event) => {
+				cancel();
+				props.onBlur?.(event);
+			},
+			children: [/* @__PURE__ */ jsx("span", { children }), /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: cn("pointer-events-none absolute inset-0 flex items-center justify-center px-[inherit] [clip-path:inset(0_100%_0_0)]", "transition-[clip-path] ease-linear motion-reduce:transition-none", "group-data-[holding]/hold:[clip-path:inset(0)] motion-reduce:group-data-[holding]/hold:[clip-path:inset(0_50%_0_0)]", "group-data-[completed]/hold:[clip-path:inset(0)]", intent === "destructive" ? "bg-fill-destructive text-fill-destructive-foreground" : "bg-foreground text-sidebar"),
+				style: { transitionDuration: holding ? `${holdSeconds}s` : "0s" },
+				children
+			})]
+		}),
+		/* @__PURE__ */ jsxs("span", {
+			id: hintId,
+			className: "sr-only",
+			children: [
+				"Hold Space or Enter for ",
+				holdSeconds,
+				" seconds to confirm. Release to cancel. Screen reader users can activate twice."
+			]
+		}),
+		/* @__PURE__ */ jsx("span", {
+			role: "status",
+			className: "sr-only",
+			children: armed ? "Activate again to confirm." : ""
+		})
+	] });
+}
+function DialogAction({ confirmation = "click", holdSeconds = 1.5, onConfirm, disabled, type = "button", ...props }) {
+	const { intent, pending } = useDialogContext();
+	const isDisabled = disabled || pending;
+	if (onConfirm && confirmation === "hold") return /* @__PURE__ */ jsx(HoldAction, {
+		holdSeconds,
+		...props,
+		disabled: isDisabled,
+		onConfirm
+	}, `${isDisabled}-${holdSeconds}`);
+	return /* @__PURE__ */ jsx(Button, {
+		size: "md",
+		...props,
+		className: cn(dialogActionLayoutClasses, dialogActionSizeClasses[props.size ?? "md"], props.className),
+		type,
+		variant: intent === "destructive" ? "destructive" : "primary",
+		disabled: isDisabled,
+		onClick: onConfirm
+	});
+}
+var dialogPopupClassName = [
+	"dialog-popup-motion fixed top-1/2 left-1/2 z-50 flex w-[calc(100%-2rem)] -translate-1/2 flex-col rounded-xl py-3 outline-hidden",
+	"[&>form]:flex [&>form]:min-h-0 [&>form]:flex-1 [&>form]:flex-col [&>form]:gap-0",
+	dialogSurfaceStyle
+].join(" ");
+var dialogContentSizeClasses = {
+	sm: "max-h-[calc(100dvh-4rem)] max-w-sm",
+	md: "max-h-[calc(100dvh-4rem)] max-w-lg",
+	lg: "max-h-[calc(100dvh-4rem)] max-w-2xl",
+	xl: "max-h-[calc(100dvh-4rem)] max-w-4xl",
+	full: "h-[calc(100dvh-2rem)]"
+};
+// src/ds/components/Dialog/dialog.tsx
+var useIsDrawer = () => useIsMobile(640);
+function Dialog$1({ intent = "default", pending = false, open, defaultOpen = false, onOpenChange, disablePointerDismissal, ...props }) {
+	const isDrawer = useIsDrawer();
+	const [uncontrolledOpen, setUncontrolledOpen] = React$1.useState(defaultOpen);
+	const rootProps = {
+		...props,
+		open: open ?? uncontrolledOpen,
+		disablePointerDismissal: disablePointerDismissal ?? intent === "destructive"
+	};
+	function handleOpenChange(nextOpen, details) {
+		if (!nextOpen && pending) {
+			details.cancel();
+			return;
+		}
+		setUncontrolledOpen(nextOpen);
+		onOpenChange?.(nextOpen, details);
+	}
+	return /* @__PURE__ */ jsx(DialogContext.Provider, {
+		value: {
+			intent,
+			pending,
+			isDrawer
+		},
+		children: isDrawer ? /* @__PURE__ */ jsx(Drawer, {
+			...rootProps,
+			onOpenChange: handleOpenChange
+		}) : /* @__PURE__ */ jsx(Dialog.Root, {
+			...rootProps,
+			onOpenChange: handleOpenChange
+		})
+	});
+}
+var DialogTrigger = Dialog.Trigger;
+var DialogPortal = Dialog.Portal;
+var DialogClose = Dialog.Close;
+function DialogOverlay({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Backdrop, {
+		"data-slot": "dialog-overlay",
+		className: cn("dialog-backdrop-motion fixed inset-0 z-50 bg-scrim backdrop-blur-xs", className),
+		...props
+	});
+}
+function DialogContent({ className, children, size = "md", showOverlay = true, showCloseButton = true, overlayClassName, initialFocus, ...props }) {
+	const { intent, pending, isDrawer } = useDialogContext();
+	const closeRef = React$1.useRef(null);
+	const isDestructive = intent === "destructive";
+	const popupProps = {
+		"data-slot": "dialog-content",
+		"data-size": size,
+		"data-intent": intent,
+		role: isDestructive ? "alertdialog" : "dialog",
+		initialFocus: initialFocus ?? (isDestructive && showCloseButton ? closeRef : true),
+		"aria-busy": pending || void 0,
+		...props
+	};
+	const closeButton = showCloseButton && /* @__PURE__ */ jsx(Dialog.Close, {
+		ref: closeRef,
+		disabled: pending,
+		"data-slot": "dialog-close",
+		className: cn("absolute right-4", isDrawer ? "top-1.5" : "top-4"),
+		render: /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "icon-sm",
+			"aria-label": "Close",
+			children: /* @__PURE__ */ jsx(X, {})
+		})
+	});
+	if (isDrawer) return /* @__PURE__ */ jsxs(DrawerContent, {
+		...popupProps,
+		showCloseButton: false,
+		className: cn("pb-3", size === "full" && "h-[calc(85vh+3rem)]", showCloseButton && "[&_[data-slot=dialog-header]]:pr-12", className),
+		children: [
+			children,
+			closeButton,
+			/* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				className: "h-12 shrink-0"
+			})
+		]
+	});
+	return /* @__PURE__ */ jsxs(DialogPortal, { children: [showOverlay && /* @__PURE__ */ jsx(DialogOverlay, { className: overlayClassName }), /* @__PURE__ */ jsxs(Dialog.Popup, {
+		...popupProps,
+		className: cn(dialogPopupClassName, dialogContentSizeClasses[size], showCloseButton && "[&_[data-slot=dialog-header]]:pr-12", className),
+		children: [children, closeButton]
+	})] });
+}
+function DialogHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-header",
+		className: cn("flex min-w-0 shrink-0 flex-col gap-1 px-5 py-2", className),
+		...props
+	});
+}
+function DialogFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-footer",
+		className: cn("flex shrink-0 flex-wrap items-center justify-end gap-2 px-5 py-2", className),
+		...props
+	});
+}
+function DialogBody({ className, layout = "scroll", flush = false, children, ...props }) {
+	const bodyClassName = cn("flex min-w-0 flex-col gap-4 text-body wrap-break-word text-muted-foreground", !flush && "px-5 py-2", className);
+	if (layout === "fill") return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-body",
+		className: cn("min-h-0 flex-1", bodyClassName),
+		...props,
+		children
+	});
+	return /* @__PURE__ */ jsx(ScrollArea, {
+		className: "flex min-h-0 min-w-0 flex-1 flex-col",
+		mask: true,
+		children: /* @__PURE__ */ jsx(ScrollAreaViewport, {
+			className: "h-auto min-h-0",
+			children: /* @__PURE__ */ jsx("div", {
+				"data-slot": "dialog-body",
+				className: bodyClassName,
+				...props,
+				children
+			})
+		})
+	});
+}
+function DialogTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		className: cn("text-heading wrap-break-word text-foreground", className),
+		...props
+	});
+}
+function DialogDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		className: cn("text-body wrap-break-word text-muted-foreground", className),
+		...props
+	});
+}
+function DialogCancel({ disabled, size = "md", ...props }) {
+	const { pending } = useDialogContext();
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		render: /* @__PURE__ */ jsx(Button, {
+			size,
+			variant: "ghost",
+			className: cn(dialogActionLayoutClasses, dialogActionSizeClasses[size]),
+			children: props.children
+		}),
+		...props,
+		disabled: disabled || pending
+	});
+}
+export { DialogContent as a, DialogHeader as c, DialogTitle as d, DialogTrigger as f, dialogActionSizeClasses as h, DialogClose as i, DialogOverlay as l, dialogActionLayoutClasses as m, DialogBody as n, DialogDescription as o, DialogAction as p, DialogCancel as r, DialogFooter as s, Dialog$1 as t, DialogPortal as u };
+
+//# sourceMappingURL=Dialog-OBPu3rl2.js.map

package/dist/Dialog-OBPu3rl2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog-OBPu3rl2.js","names":["_Fragment","Dialog","React","DialogPrimitive"],"sources":["../src/ds/components/Dialog/dialog-context.ts","../src/ds/components/Dialog/dialog-action.tsx","../src/ds/components/Dialog/dialog-shell.ts","../src/ds/components/Dialog/dialog.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport type DialogIntent = 'default' | 'destructive';\n\nexport type DialogContextValue = {\n  intent: DialogIntent;\n  pending: boolean;\n  isDrawer: boolean;\n};\n\nexport const DialogContext = createContext<DialogContextValue>({\n  intent: 'default',\n  pending: false,\n  isDrawer: false,\n});\n\nexport function useDialogContext() {\n  return useContext(DialogContext);\n}\n\nexport const dialogActionSizeClasses = {\n  sm: 'min-h-control-sm',\n  md: 'min-h-control-md',\n  lg: 'min-h-control-lg',\n} as const;\n\nexport const dialogActionLayoutClasses = 'h-auto min-w-0 max-w-full whitespace-normal wrap-anywhere max-[22rem]:w-full';\n","import { useEffect, useId, useRef, useState } from 'react';\nimport type { ComponentProps, KeyboardEvent, MouseEvent, PointerEvent } from 'react';\nimport { dialogActionLayoutClasses, dialogActionSizeClasses, useDialogContext } from './dialog-context';\nimport { Button } from '@/ds/components/Button';\nimport type { TextButtonSize } from '@/ds/components/Button';\nimport { cn } from '@/lib/utils';\n\ntype DialogActionButtonProps = Omit<ComponentProps<typeof Button>, 'onClick' | 'variant' | 'as' | 'type' | 'size'> & {\n  size?: TextButtonSize;\n};\n\ntype DialogConfirmActionProps = DialogActionButtonProps & {\n  type?: 'button';\n  onConfirm: () => void;\n  confirmation?: 'click' | 'hold';\n  holdSeconds?: number;\n};\n\ntype DialogSubmitActionProps = DialogActionButtonProps & {\n  type: 'submit';\n  onConfirm?: never;\n  confirmation?: never;\n  holdSeconds?: never;\n};\n\nexport type DialogActionProps = DialogConfirmActionProps | DialogSubmitActionProps;\n\nconst ARM_WINDOW_MS = 4000;\n\nfunction HoldAction({\n  onConfirm,\n  children,\n  disabled,\n  holdSeconds = 1.5,\n  ...props\n}: Omit<DialogConfirmActionProps, 'confirmation' | 'type'>) {\n  const { intent, pending } = useDialogContext();\n  const [holding, setHolding] = useState(false);\n  const [completed, setCompleted] = useState(false);\n  const [armed, setArmed] = useState(false);\n  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  const armTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  const active = useRef(false);\n  const hintId = useId();\n\n  function cancel() {\n    clearTimeout(timer.current);\n    active.current = false;\n    setHolding(false);\n  }\n\n  function disarm() {\n    clearTimeout(armTimer.current);\n    setArmed(false);\n  }\n\n  function complete() {\n    setHolding(false);\n    setCompleted(true);\n    disarm();\n    onConfirm();\n  }\n\n  function start() {\n    if (disabled || active.current) return;\n    active.current = true;\n    setHolding(true);\n    timer.current = setTimeout(complete, holdSeconds * 1000);\n  }\n\n  function onClick(event: MouseEvent<HTMLButtonElement>) {\n    event.preventDefault();\n    if (event.detail !== 0 || disabled) return;\n    if (armed) {\n      complete();\n      return;\n    }\n    setArmed(true);\n    armTimer.current = setTimeout(() => setArmed(false), ARM_WINDOW_MS);\n  }\n\n  useEffect(() => {\n    function onVisibilityChange() {\n      if (document.hidden) cancel();\n    }\n    window.addEventListener('blur', cancel);\n    document.addEventListener('visibilitychange', onVisibilityChange);\n    return () => {\n      clearTimeout(timer.current);\n      clearTimeout(armTimer.current);\n      window.removeEventListener('blur', cancel);\n      document.removeEventListener('visibilitychange', onVisibilityChange);\n    };\n  }, []);\n\n  function onPointerDown(event: PointerEvent<HTMLButtonElement>) {\n    props.onPointerDown?.(event);\n    if (event.defaultPrevented || event.button !== 0 || !event.isPrimary) return;\n    start();\n  }\n\n  function onKeyDown(event: KeyboardEvent<HTMLButtonElement>) {\n    props.onKeyDown?.(event);\n    if (event.defaultPrevented || (event.key !== ' ' && event.key !== 'Enter')) return;\n    event.preventDefault();\n    if (!event.repeat) start();\n  }\n\n  return (\n    <>\n      <Button\n        size=\"md\"\n        {...props}\n        className={cn(\n          'group/hold relative isolate touch-none overflow-hidden select-none',\n          dialogActionLayoutClasses,\n          dialogActionSizeClasses[props.size ?? 'md'],\n          props.className,\n        )}\n        type=\"button\"\n        variant={intent === 'destructive' ? 'destructive-ghost' : 'ghost'}\n        disabled={disabled}\n        aria-describedby={[props['aria-describedby'], hintId].filter(Boolean).join(' ')}\n        data-holding={holding || undefined}\n        data-completed={completed || pending || undefined}\n        onClick={onClick}\n        onPointerDown={onPointerDown}\n        onPointerUp={event => {\n          cancel();\n          props.onPointerUp?.(event);\n        }}\n        onPointerLeave={event => {\n          cancel();\n          props.onPointerLeave?.(event);\n        }}\n        onPointerCancel={event => {\n          cancel();\n          props.onPointerCancel?.(event);\n        }}\n        onKeyDown={onKeyDown}\n        onKeyUp={event => {\n          if (event.key === ' ' || event.key === 'Enter') {\n            event.preventDefault();\n            cancel();\n          }\n          props.onKeyUp?.(event);\n        }}\n        onBlur={event => {\n          cancel();\n          props.onBlur?.(event);\n        }}\n      >\n        <span>{children}</span>\n        <span\n          aria-hidden=\"true\"\n          className={cn(\n            'pointer-events-none absolute inset-0 flex items-center justify-center px-[inherit] [clip-path:inset(0_100%_0_0)]',\n            'transition-[clip-path] ease-linear motion-reduce:transition-none',\n            'group-data-[holding]/hold:[clip-path:inset(0)] motion-reduce:group-data-[holding]/hold:[clip-path:inset(0_50%_0_0)]',\n            'group-data-[completed]/hold:[clip-path:inset(0)]',\n            intent === 'destructive'\n              ? 'bg-fill-destructive text-fill-destructive-foreground'\n              : 'bg-foreground text-sidebar',\n          )}\n          style={{ transitionDuration: holding ? `${holdSeconds}s` : '0s' }}\n        >\n          {children}\n        </span>\n      </Button>\n      <span id={hintId} className=\"sr-only\">\n        Hold Space or Enter for {holdSeconds} seconds to confirm. Release to cancel. Screen reader users can activate\n        twice.\n      </span>\n      <span role=\"status\" className=\"sr-only\">\n        {armed ? 'Activate again to confirm.' : ''}\n      </span>\n    </>\n  );\n}\n\nexport function DialogAction({\n  confirmation = 'click',\n  holdSeconds = 1.5,\n  onConfirm,\n  disabled,\n  type = 'button',\n  ...props\n}: DialogActionProps) {\n  const { intent, pending } = useDialogContext();\n  const isDisabled = disabled || pending;\n  if (onConfirm && confirmation === 'hold') {\n    return (\n      <HoldAction\n        key={`${isDisabled}-${holdSeconds}`}\n        holdSeconds={holdSeconds}\n        {...props}\n        disabled={isDisabled}\n        onConfirm={onConfirm}\n      />\n    );\n  }\n  return (\n    <Button\n      size=\"md\"\n      {...props}\n      className={cn(dialogActionLayoutClasses, dialogActionSizeClasses[props.size ?? 'md'], props.className)}\n      type={type}\n      variant={intent === 'destructive' ? 'destructive' : 'primary'}\n      disabled={isDisabled}\n      onClick={onConfirm}\n    />\n  );\n}\n","import { dialogSurfaceStyle } from '@/ds/primitives/raised-surface';\n\nexport type DialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';\n\nexport const DIALOG_DRAWER_BREAKPOINT_PX = 640;\n\nconst formFillsShellClassName = '[&>form]:flex [&>form]:min-h-0 [&>form]:flex-1 [&>form]:flex-col [&>form]:gap-0';\n\nexport const dialogPopupClassName = [\n  'dialog-popup-motion fixed top-1/2 left-1/2 z-50 flex w-[calc(100%-2rem)] -translate-1/2 flex-col rounded-xl py-3 outline-hidden',\n  formFillsShellClassName,\n  dialogSurfaceStyle,\n].join(' ');\n\nexport const dialogContentSizeClasses: Record<DialogSize, string> = {\n  sm: 'max-h-[calc(100dvh-4rem)] max-w-sm',\n  md: 'max-h-[calc(100dvh-4rem)] max-w-lg',\n  lg: 'max-h-[calc(100dvh-4rem)] max-w-2xl',\n  xl: 'max-h-[calc(100dvh-4rem)] max-w-4xl',\n  full: 'h-[calc(100dvh-2rem)]',\n};\n","import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\nimport { X } from 'lucide-react';\nimport * as React from 'react';\n\nimport { DialogAction } from './dialog-action';\nimport { DialogContext, dialogActionLayoutClasses, dialogActionSizeClasses, useDialogContext } from './dialog-context';\nimport type { DialogIntent } from './dialog-context';\nimport { DIALOG_DRAWER_BREAKPOINT_PX, dialogContentSizeClasses, dialogPopupClassName } from './dialog-shell';\nimport type { DialogSize } from './dialog-shell';\nimport { Button } from '@/ds/components/Button';\nimport type { TextButtonSize } from '@/ds/components/Button';\nimport { Drawer, DrawerContent } from '@/ds/components/Drawer';\nimport type { DrawerProps } from '@/ds/components/Drawer';\nimport { ScrollArea, ScrollAreaViewport } from '@/ds/components/ScrollArea';\nimport { useIsMobile } from '@/hooks/use-is-mobile';\nimport { cn } from '@/lib/utils';\n\nimport './dialog.css';\n\ntype DialogOpenChangeDetails = Parameters<NonNullable<DialogPrimitive.Root.Props['onOpenChange']>>[1];\ntype DrawerOpenChangeDetails = Parameters<NonNullable<DrawerProps['onOpenChange']>>[1];\n\nexport type DialogProps = Omit<DialogPrimitive.Root.Props, 'handle' | 'onOpenChange'> & {\n  intent?: DialogIntent;\n  pending?: boolean;\n  /** `details` comes from the bottom drawer on phones, where a swipe can also close it. */\n  onOpenChange?: (open: boolean, details: DialogOpenChangeDetails | DrawerOpenChangeDetails) => void;\n};\n\nconst useIsDrawer = () => useIsMobile(DIALOG_DRAWER_BREAKPOINT_PX);\n\n// Below 640px every dialog is a bottom drawer. Open state lives here so crossing the breakpoint keeps it open.\nfunction Dialog({\n  intent = 'default',\n  pending = false,\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  disablePointerDismissal,\n  ...props\n}: DialogProps) {\n  const isDrawer = useIsDrawer();\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);\n  const rootProps = {\n    ...props,\n    open: open ?? uncontrolledOpen,\n    disablePointerDismissal: disablePointerDismissal ?? intent === 'destructive',\n  };\n\n  function handleOpenChange(nextOpen: boolean, details: DialogOpenChangeDetails | DrawerOpenChangeDetails) {\n    if (!nextOpen && pending) {\n      details.cancel();\n      return;\n    }\n    setUncontrolledOpen(nextOpen);\n    onOpenChange?.(nextOpen, details);\n  }\n\n  return (\n    <DialogContext.Provider value={{ intent, pending, isDrawer }}>\n      {isDrawer ? (\n        <Drawer {...rootProps} onOpenChange={handleOpenChange} />\n      ) : (\n        <DialogPrimitive.Root {...rootProps} onOpenChange={handleOpenChange} />\n      )}\n    </DialogContext.Provider>\n  );\n}\n\nconst DialogTrigger = DialogPrimitive.Trigger;\n\nconst DialogPortal = DialogPrimitive.Portal;\n\nconst DialogClose = DialogPrimitive.Close;\n\ntype DialogOverlayProps = Omit<DialogPrimitive.Backdrop.Props, 'className'> & {\n  className?: string;\n};\n\nfunction DialogOverlay({ className, ...props }: DialogOverlayProps) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn('dialog-backdrop-motion fixed inset-0 z-50 bg-scrim backdrop-blur-xs', className)}\n      {...props}\n    />\n  );\n}\n\nexport type { DialogSize };\n\n// No `render` or function `style`: the popup is a Dialog or a Drawer, and their state callbacks differ.\ntype DialogContentProps = Omit<DialogPrimitive.Popup.Props, 'className' | 'render' | 'style'> & {\n  className?: string;\n  style?: React.CSSProperties;\n  size?: DialogSize;\n  showOverlay?: boolean;\n  showCloseButton?: boolean;\n  overlayClassName?: string;\n};\n\nfunction DialogContent({\n  className,\n  children,\n  size = 'md',\n  showOverlay = true,\n  showCloseButton = true,\n  overlayClassName,\n  initialFocus,\n  ...props\n}: DialogContentProps) {\n  const { intent, pending, isDrawer } = useDialogContext();\n  const closeRef = React.useRef<HTMLButtonElement>(null);\n  const isDestructive = intent === 'destructive';\n  const popupProps = {\n    'data-slot': 'dialog-content',\n    'data-size': size,\n    'data-intent': intent,\n    role: isDestructive ? 'alertdialog' : 'dialog',\n    initialFocus: initialFocus ?? (isDestructive && showCloseButton ? closeRef : true),\n    'aria-busy': pending || undefined,\n    ...props,\n  };\n  const closeButton = showCloseButton && (\n    <DialogPrimitive.Close\n      ref={closeRef}\n      disabled={pending}\n      data-slot=\"dialog-close\"\n      className={cn('absolute right-4', isDrawer ? 'top-1.5' : 'top-4')}\n      render={\n        <Button variant=\"ghost\" size=\"icon-sm\" aria-label=\"Close\">\n          <X />\n        </Button>\n      }\n    />\n  );\n\n  if (isDrawer) {\n    return (\n      <DrawerContent\n        {...popupProps}\n        showCloseButton={false}\n        className={cn(\n          'pb-3',\n          size === 'full' && 'h-[calc(85vh+3rem)]',\n          showCloseButton && '[&_[data-slot=dialog-header]]:pr-12',\n          className,\n        )}\n      >\n        {children}\n        {closeButton}\n        {/* Fills the drawer's 3rem swipe bleed below the screen edge; an element so call-site padding can't shrink it. */}\n        <div aria-hidden className=\"h-12 shrink-0\" />\n      </DrawerContent>\n    );\n  }\n\n  return (\n    <DialogPortal>\n      {showOverlay && <DialogOverlay className={overlayClassName} />}\n      <DialogPrimitive.Popup\n        {...popupProps}\n        className={cn(\n          dialogPopupClassName,\n          dialogContentSizeClasses[size],\n          showCloseButton && '[&_[data-slot=dialog-header]]:pr-12',\n          className,\n        )}\n      >\n        {children}\n        {closeButton}\n      </DialogPrimitive.Popup>\n    </DialogPortal>\n  );\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn('flex min-w-0 shrink-0 flex-col gap-1 px-5 py-2', className)}\n      {...props}\n    />\n  );\n}\n\nfunction DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn('flex shrink-0 flex-wrap items-center justify-end gap-2 px-5 py-2', className)}\n      {...props}\n    />\n  );\n}\n\nexport type DialogBodyProps = React.ComponentProps<'div'> & {\n  /** `scroll` fades and scrolls long content; `fill` takes the remaining height and leaves scrolling to its children. */\n  layout?: 'scroll' | 'fill';\n  /** Drops the inset so content such as split panes or code reaches the dialog's edges. */\n  flush?: boolean;\n};\n\nfunction DialogBody({ className, layout = 'scroll', flush = false, children, ...props }: DialogBodyProps) {\n  const bodyClassName = cn(\n    'flex min-w-0 flex-col gap-4 text-body wrap-break-word text-muted-foreground',\n    !flush && 'px-5 py-2',\n    className,\n  );\n  if (layout === 'fill') {\n    return (\n      <div data-slot=\"dialog-body\" className={cn('min-h-0 flex-1', bodyClassName)} {...props}>\n        {children}\n      </div>\n    );\n  }\n  return (\n    <ScrollArea className=\"flex min-h-0 min-w-0 flex-1 flex-col\" mask>\n      <ScrollAreaViewport className=\"h-auto min-h-0\">\n        <div data-slot=\"dialog-body\" className={bodyClassName} {...props}>\n          {children}\n        </div>\n      </ScrollAreaViewport>\n    </ScrollArea>\n  );\n}\n\ntype DialogTitleProps = Omit<DialogPrimitive.Title.Props, 'className'> & {\n  className?: string;\n};\n\nfunction DialogTitle({ className, ...props }: DialogTitleProps) {\n  return <DialogPrimitive.Title className={cn('text-heading wrap-break-word text-foreground', className)} {...props} />;\n}\n\ntype DialogDescriptionProps = Omit<DialogPrimitive.Description.Props, 'className'> & {\n  className?: string;\n};\n\nfunction DialogDescription({ className, ...props }: DialogDescriptionProps) {\n  return (\n    <DialogPrimitive.Description\n      className={cn('text-body wrap-break-word text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n\ntype DialogCancelProps = DialogPrimitive.Close.Props & { size?: TextButtonSize };\n\nfunction DialogCancel({ disabled, size = 'md', ...props }: DialogCancelProps) {\n  const { pending } = useDialogContext();\n  return (\n    <DialogPrimitive.Close\n      render={\n        <Button\n          size={size}\n          variant=\"ghost\"\n          className={cn(dialogActionLayoutClasses, dialogActionSizeClasses[size])}\n          children={props.children}\n        />\n      }\n      {...props}\n      disabled={disabled || pending}\n    />\n  );\n}\n\nexport {\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogTrigger,\n  DialogClose,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogBody,\n  DialogTitle,\n  DialogDescription,\n  DialogCancel,\n  DialogAction,\n};\n"],"mappings":"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"}