@parallelworks/ui 0.18.0 → 0.19.1

package/dist/components/AddMenu.js

@@ -0,0 +1,46 @@
+import { useLink } from "./Provider.js";
+import { TOOLTIP_ID } from "./Tooltip.js";
+import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
+import cx from "classnames";
+import { Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/AddMenu.tsx
+var addMenuItemClasses = "flex w-full items-center gap-2 px-3 py-1.5 text-[13px] text-(--theme-app) data-[focus]:bg-(--theme-muted-panel-bg) cursor-pointer";
+function itemButtonProps(item) {
+	if (!item.disabled) return { onClick: item.onSelect };
+	return {
+		"aria-disabled": true,
+		...item.hint ? {
+			"aria-label": `${item.label}. ${item.hint}`,
+			"data-tooltip-id": TOOLTIP_ID,
+			"data-tooltip-content": item.hint
+		} : {}
+	};
+}
+function AddMenu({ items, label, buttonClassName, zClassName = "z-50", children }) {
+	const Link = useLink();
+	return /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsx(MenuButton, {
+		"aria-label": label,
+		title: label,
+		className: buttonClassName,
+		children
+	}), /* @__PURE__ */ jsx(MenuItems, {
+		anchor: "bottom start",
+		className: cx("mt-1 min-w-52 rounded-lg border border-(--theme-border) bg-(--theme-app-bg) py-1 shadow-lg focus:outline-none", zClassName),
+		children: items.map((item) => /* @__PURE__ */ jsxs(Fragment, { children: [item.separatorAbove && /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-(--theme-border)" }), /* @__PURE__ */ jsx(MenuItem, {
+			disabled: item.disabled ?? false,
+			children: item.to && !item.disabled ? /* @__PURE__ */ jsxs(Link, {
+				to: item.to,
+				className: addMenuItemClasses,
+				children: [item.icon, item.label]
+			}) : /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				...itemButtonProps(item),
+				className: cx(addMenuItemClasses, item.disabled && "opacity-50 cursor-not-allowed"),
+				children: [item.icon, item.label]
+			})
+		})] }, item.label))
+	})] });
+}
+//#endregion
+export { AddMenu };

package/dist/components/Avatar.d.ts

@@ -10,4 +10,4 @@ export interface AvatarProps {
 }
 /** Up to two initials: the first and last word of a name split on spaces and dots. */
 export declare function avatarInitials(name: string | undefined): string;
-export declare function Avatar({ src, name, size, status, className, }: AvatarProps): import("react").JSX.Element;
+export declare function Avatar({ src, name, size, status, className }: AvatarProps): import("react").JSX.Element;

package/dist/components/Avatar.js

@@ -0,0 +1,46 @@
+import { useStrings } from "./Provider.js";
+import cx from "classnames";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Avatar.tsx
+var SIZE_CLASSES = {
+	sm: "w-6 h-6 text-xs",
+	md: "w-8 h-8 text-sm",
+	lg: "w-10 h-10 text-base",
+	xl: "w-12 h-12 text-lg",
+	"2xl": "w-16 h-16 text-xl"
+};
+var STATUS_CLASSES = {
+	online: "bg-green-500",
+	offline: "bg-(--theme-muted-text-color)",
+	busy: "bg-red-500",
+	away: "bg-yellow-500"
+};
+/** Up to two initials: the first and last word of a name split on spaces and dots. */
+function avatarInitials(name) {
+	const parts = (name ?? "").split(/[\s.]+/).filter(Boolean);
+	if (parts.length >= 2) return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+	return parts[0]?.[0]?.toUpperCase() || "?";
+}
+function Avatar({ src, name, size = "md", status, className }) {
+	const strings = useStrings();
+	const [erroredUrl, setErroredUrl] = useState(null);
+	const showImage = !!src && erroredUrl !== src;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("relative inline-flex", className),
+		children: [showImage ? /* @__PURE__ */ jsx("img", {
+			src,
+			alt: name || strings.common.userAvatar,
+			onError: () => setErroredUrl(src),
+			className: cx("rounded-full object-cover", SIZE_CLASSES[size])
+		}) : /* @__PURE__ */ jsx("div", {
+			className: cx("rounded-full flex items-center justify-center font-medium", "bg-gradient-to-br from-[var(--gradient-start,var(--theme-element))] to-[var(--gradient-mid,var(--theme-link))] text-white", SIZE_CLASSES[size]),
+			children: avatarInitials(name)
+		}), status && /* @__PURE__ */ jsx("span", {
+			"data-testid": "online-indicator",
+			className: cx("absolute bottom-0 right-0 block rounded-full ring-2 ring-(--theme-app-bg)", STATUS_CLASSES[status], size === "sm" ? "w-1.5 h-1.5" : "w-2.5 h-2.5")
+		})]
+	});
+}
+//#endregion
+export { Avatar, avatarInitials };

package/dist/{chunks/BareModal-BtRiQezg.js → components/BareModal.js}

@@ -78,4 +78,4 @@ function BareModal({ open, onClose, ariaLabel, className, onPanelKeyDown, onPane
 	}), document.body);
 }
 //#endregion
-export { modalPanelClasses as n, BareModal as t };
+export { BareModal, modalPanelClasses };

package/dist/components/Breadcrumbs.d.ts

@@ -20,7 +20,7 @@ interface BreadcrumbContextType {
     claimedPath: React.MutableRefObject<string | null>;
 }
 export declare const useBreadcrumb: () => BreadcrumbContextType;
-export declare function BreadcrumbProvider({ children, }: {
+export declare function BreadcrumbProvider({ children }: {
     children: React.ReactNode;
 }): React.JSX.Element;
 export declare function useSetBreadcrumbs(getBreadcrumbs: (() => IBreadcrumbItem[]) | IBreadcrumbItem[]): void;

package/dist/components/Breadcrumbs.js

@@ -0,0 +1,83 @@
+import React, { createContext, useContext, useEffect, useLayoutEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Breadcrumbs.tsx
+var BreadcrumbContext = createContext({
+	breadcrumbs: [],
+	setBreadcrumbs: () => {},
+	rightsideBreadcrumb: null,
+	setRightsideBreadcrumb: () => {},
+	hidden: false,
+	setHidden: () => {},
+	titleActionSlot: null,
+	setTitleActionSlot: () => {},
+	rightActionSlot: null,
+	setRightActionSlot: () => {},
+	claimedPath: { current: null }
+});
+var useBreadcrumb = () => useContext(BreadcrumbContext);
+function BreadcrumbProvider({ children }) {
+	const [breadcrumbs, setBreadcrumbs] = React.useState([]);
+	const [rightsideBreadcrumb, setRightsideBreadcrumb] = React.useState(null);
+	const [hidden, setHidden] = React.useState(false);
+	const [titleActionSlot, setTitleActionSlot] = React.useState(null);
+	const [rightActionSlot, setRightActionSlot] = React.useState(null);
+	const claimedPath = React.useRef(null);
+	return /* @__PURE__ */ jsx(BreadcrumbContext.Provider, {
+		value: {
+			breadcrumbs,
+			setBreadcrumbs,
+			rightsideBreadcrumb,
+			setRightsideBreadcrumb,
+			hidden,
+			setHidden,
+			titleActionSlot,
+			setTitleActionSlot,
+			rightActionSlot,
+			setRightActionSlot,
+			claimedPath
+		},
+		children
+	});
+}
+function useSetBreadcrumbs(getBreadcrumbs) {
+	const { setBreadcrumbs, claimedPath } = useBreadcrumb();
+	useLayoutEffect(() => {
+		claimedPath.current = window.location.pathname;
+		setBreadcrumbs(typeof getBreadcrumbs === "function" ? getBreadcrumbs() : getBreadcrumbs);
+	}, [
+		getBreadcrumbs,
+		setBreadcrumbs,
+		claimedPath
+	]);
+}
+/**
+* For layout routes that derive breadcrumbs from the URL: applies them only
+* while no page under the layout has set its own for the current path.
+* Without this, a layout re-running its effect (for example when the
+* organization's display name loads) overwrote the page's breadcrumbs.
+*/
+function useSetDefaultBreadcrumbs(getBreadcrumbs) {
+	const { setBreadcrumbs, claimedPath } = useBreadcrumb();
+	useLayoutEffect(() => {
+		if (claimedPath.current === window.location.pathname) return;
+		setBreadcrumbs(typeof getBreadcrumbs === "function" ? getBreadcrumbs() : getBreadcrumbs);
+	}, [
+		getBreadcrumbs,
+		setBreadcrumbs,
+		claimedPath
+	]);
+}
+var EMPTY_BREADCRUMBS = [];
+/** For pages that render their own header instead of the breadcrumb strip. */
+function useClearBreadcrumbs() {
+	useSetBreadcrumbs(EMPTY_BREADCRUMBS);
+}
+function useHideBreadcrumbs(hidden) {
+	const { setHidden } = useBreadcrumb();
+	useEffect(() => {
+		setHidden(hidden);
+		return () => setHidden(false);
+	}, [hidden, setHidden]);
+}
+//#endregion
+export { BreadcrumbProvider, useBreadcrumb, useClearBreadcrumbs, useHideBreadcrumbs, useSetBreadcrumbs, useSetDefaultBreadcrumbs };

package/dist/components/Button.js

@@ -0,0 +1,83 @@
+import { useLink } from "./Provider.js";
+import { AngleRightIcon, LoaderIcon } from "../icons.js";
+import cx from "classnames";
+import { forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Button.tsx
+var Button = forwardRef(({ children, variant = "primary", size = "default", loading, icon, iconPosition = "right", fullWidth = true, className = "", disabled, ...props }, ref) => {
+	const baseClasses = "inline-flex items-center justify-center gap-2 font-semibold rounded-lg transition-all duration-200 cursor-pointer border-none mt-2 disabled:opacity-50 disabled:cursor-not-allowed";
+	const variantClasses = {
+		primary: "bg-gradient-to-br from-[var(--gradient-start,var(--theme-element))] to-[var(--gradient-mid,var(--theme-link))] text-white shadow-[0_4px_14px_0_rgba(59,130,246,0.3)] hover:enabled:-translate-y-0.5 hover:enabled:shadow-[0_6px_20px_0_rgba(59,130,246,0.4)] active:enabled:translate-y-0",
+		secondary: "bg-[var(--theme-muted-panel-bg)] text-[var(--theme-app)] border border-[var(--theme-border)] hover:enabled:bg-[var(--theme-border)]",
+		outline: "bg-transparent text-[var(--theme-app)] border border-[var(--theme-border)] hover:enabled:bg-[var(--theme-muted-panel-bg)] hover:enabled:border-[var(--theme-muted-text-color)]",
+		ghost: "bg-transparent text-[var(--theme-muted-text-color)] hover:enabled:text-[var(--theme-app)] hover:enabled:bg-[var(--theme-muted-panel-bg)]"
+	};
+	const sizeClasses = {
+		sm: "py-2 px-4 text-[0.8125rem]",
+		default: "py-3 px-5 text-sm",
+		lg: "py-4 px-6 text-base"
+	};
+	const widthClass = fullWidth ? "w-full" : "w-auto";
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		type: "button",
+		disabled: disabled || loading,
+		className: cx(baseClasses, variantClasses[variant], sizeClasses[size], widthClass, className),
+		...props,
+		children: loading ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(LoaderIcon, { className: "size-[18px]" }), children] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			icon && iconPosition === "left" && /* @__PURE__ */ jsx("span", {
+				className: "flex items-center",
+				children: icon
+			}),
+			children,
+			icon && iconPosition === "right" && /* @__PURE__ */ jsx("span", {
+				className: "flex items-center",
+				children: icon
+			})
+		] })
+	});
+});
+Button.displayName = "Button";
+function MethodButton({ icon, label, description, href, loading, disabled, className = "", ...props }) {
+	const Link = useLink();
+	const baseClasses = "flex items-center w-full p-4 bg-[var(--theme-muted-panel-bg)] border border-[var(--theme-border)] rounded-xl text-[var(--theme-app)] text-[0.9375rem] font-medium cursor-pointer transition-all duration-200 no-underline mb-3 last:mb-0 hover:bg-[var(--theme-border)] hover:border-[var(--theme-muted-text-color)] hover:-translate-y-0.5 active:translate-y-0";
+	const disabledClasses = "disabled:opacity-60 disabled:cursor-not-allowed disabled:hover:bg-[var(--ds-muted)] disabled:hover:border-[var(--ds-border)] disabled:hover:translate-y-0";
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		icon && /* @__PURE__ */ jsx("span", {
+			className: "size-10 rounded-lg bg-gradient-to-br from-[var(--gradient-start,var(--theme-element))] to-[var(--gradient-mid,var(--theme-link))] flex items-center justify-center shrink-0 mr-4 [&_svg]:size-5 [&_svg]:text-white",
+			children: icon
+		}),
+		/* @__PURE__ */ jsxs("span", {
+			className: "flex-1 text-left",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "block font-semibold text-[var(--theme-app)]",
+				children: label
+			}), description && /* @__PURE__ */ jsx("span", {
+				className: "block text-[0.8125rem] text-[var(--theme-muted-text-color)] font-normal mt-0.5",
+				children: description
+			})]
+		}),
+		loading ? /* @__PURE__ */ jsx(LoaderIcon, { className: "size-5 text-[var(--theme-muted-text-color)] shrink-0 ml-2" }) : /* @__PURE__ */ jsx(AngleRightIcon, { className: "size-5 text-[var(--theme-muted-text-color)] shrink-0 ml-2 transition-all duration-200 group-hover:translate-x-[3px] group-hover:text-[var(--theme-app)]" })
+	] });
+	if (href) {
+		if (href.startsWith("/api/") || href.startsWith("http")) return /* @__PURE__ */ jsx("a", {
+			href,
+			className: cx("group", baseClasses, className),
+			children: content
+		});
+		return /* @__PURE__ */ jsx(Link, {
+			to: href,
+			className: cx("group", baseClasses, className),
+			children: content
+		});
+	}
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: cx("group", baseClasses, disabledClasses, className),
+		disabled: disabled || loading,
+		...props,
+		children: content
+	});
+}
+//#endregion
+export { Button, MethodButton };

package/dist/components/Callout.js

@@ -0,0 +1,23 @@
+import { AlertIcon, InfoIcon } from "../icons.js";
+import cx from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Callout.tsx
+function CalloutIcon({ type }) {
+	if (type === "warning" || type === "error") return /* @__PURE__ */ jsx(AlertIcon, { className: "h-6 w-6 mr-4 text-lg" });
+	else return /* @__PURE__ */ jsx(InfoIcon, { className: "h-6 w-6 mr-4 text-lg" });
+}
+function Callout({ type, className = "", children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cx(className, type === "warning" && "bg-orange-100 border-orange-500 text-orange-700", type === "error" && "bg-red-100 border-red-500 text-red-700", type === "info" && "bg-blue-100 border-blue-500 text-blue-700", "border-t-4 rounded-b px-4 py-3 shadow-md my-4"),
+		role: "alert",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "py-1",
+				children: /* @__PURE__ */ jsx(CalloutIcon, { type })
+			}), /* @__PURE__ */ jsx("div", { children })]
+		})
+	});
+}
+//#endregion
+export { Callout as default };

package/dist/components/Card.js

@@ -0,0 +1,31 @@
+import cx from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Card.tsx
+function Card({ children, className = "", wide, compact, interactive, authShadow }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("w-full bg-[var(--theme-card-bg)] backdrop-blur-xl border border-[var(--theme-border)] rounded-2xl", authShadow ? "shadow-[var(--theme-auth-shadow)]" : "shadow-[var(--theme-shadow)]", wide && "max-w-[560px] p-8", compact && "max-w-[400px] p-6", !wide && !compact && "max-w-[520px] p-10", interactive && "ds-card-interactive cursor-pointer", className),
+		children
+	});
+}
+function CardHeader({ badge, title, description, className = "", align = "center" }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(align === "center" ? "text-center" : "text-left", "mb-6", className),
+		children: [
+			badge && /* @__PURE__ */ jsx("div", {
+				className: "inline-flex items-center gap-1.5 py-1.5 px-3 text-xs font-medium bg-[var(--theme-muted-panel-bg)] border border-[var(--theme-border)] rounded-full text-[var(--theme-muted-text-color)] mb-4 transition-colors duration-200",
+				children: badge
+			}),
+			/* @__PURE__ */ jsx("h1", {
+				className: "text-2xl font-bold tracking-tight text-[var(--theme-app)]",
+				style: { letterSpacing: "-0.025em" },
+				children: title
+			}),
+			description && /* @__PURE__ */ jsx("p", {
+				className: "text-[var(--theme-muted-text-color)] text-sm leading-relaxed mt-2",
+				children: description
+			})
+		]
+	});
+}
+//#endregion
+export { Card, CardHeader };

package/dist/components/CollapsiblePanel.js

@@ -0,0 +1,77 @@
+import { AngleRightIcon } from "../icons.js";
+import cx from "classnames";
+import React, { useCallback } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import AnimateHeight from "react-animate-height";
+//#region src/components/CollapsiblePanel.tsx
+var noop = () => {};
+function ControlledCollapsiblePanel({ title = "", children, open, setOpen, onClick = noop, wrapperElement, customizedButton = null, titleAction, className }) {
+	const toggleOpen = useCallback(() => {
+		if (onClick) onClick();
+		setOpen?.((open) => !open);
+	}, [setOpen, onClick]);
+	const contentId = React.useId();
+	const Wrapper = wrapperElement ? wrapperElement : React.Fragment;
+	return React.isValidElement(title) ? /* @__PURE__ */ jsxs(Fragment$1, { children: [title, /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsx(AnimateHeight, {
+		duration: 300,
+		height: open ? "auto" : 0,
+		children
+	}) })] }) : /* @__PURE__ */ jsxs("div", {
+		className: cx("border border-solid rounded-2xl border-(--theme-border) bg-(--theme-panel-bg) text-(--theme-panel) mb-1 w-full", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cx(!open && "text-(--theme-muted-text-color)", "w-full flex items-center transform ease-in transition text-sm py-3 px-2 cursor-pointer"),
+			children: [
+				/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					"aria-expanded": !!open,
+					"aria-controls": contentId,
+					className: cx("flex items-center text-left cursor-pointer", !titleAction && "w-full"),
+					onClick: toggleOpen,
+					children: [/* @__PURE__ */ jsx(AngleRightIcon, { className: cx(open && "transform rotate-90", "px-1 ml-1 text-[1.25rem] transition ease-in") }), /* @__PURE__ */ jsx("span", {
+						className: "px-2 font-bold select-none",
+						children: title?.toString()
+					})]
+				}),
+				titleAction,
+				/* @__PURE__ */ jsx("div", {
+					className: "ml-auto",
+					children: customizedButton
+				})
+			]
+		}), /* @__PURE__ */ jsx(AnimateHeight, {
+			id: contentId,
+			duration: 300,
+			height: open ? "auto" : 0,
+			children
+		})]
+	});
+}
+function UncontrolledCollapsiblePanel({ title, children, onClick, wrapperElement, initialState = true, className, customizedButton = null }) {
+	const [open, setOpen] = React.useState(initialState);
+	const passTitle = typeof title === "function" ? title(open, setOpen) : title;
+	return /* @__PURE__ */ jsx(ControlledCollapsiblePanel, {
+		title: passTitle,
+		open,
+		setOpen,
+		onClick,
+		wrapperElement,
+		className,
+		customizedButton,
+		children
+	});
+}
+function MaybeCollapsible({ className, initialState, children, title, customizedButton, collapsible }) {
+	if (collapsible) return /* @__PURE__ */ jsx(UncontrolledCollapsiblePanel, {
+		className,
+		initialState,
+		title,
+		customizedButton,
+		children
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		children
+	});
+}
+//#endregion
+export { ControlledCollapsiblePanel, MaybeCollapsible, UncontrolledCollapsiblePanel };

package/dist/components/ConfirmModal.js

@@ -0,0 +1,74 @@
+import { useStrings } from "./Provider.js";
+import { BareModal, modalPanelClasses } from "./BareModal.js";
+import { dangerButtonClasses, ghostButtonClasses, primaryButtonClasses } from "./ghostButton.js";
+import cx from "classnames";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ConfirmModal.tsx
+function ConfirmModal({ open, onClose, title, description, children, confirmLabel, onConfirm, confirmDisabled = false, destructive = false, align = "top", cancelLabel, closeOnConfirm = true }) {
+	const strings = useStrings();
+	const [pending, setPending] = useState(false);
+	const firedRef = useRef(false);
+	useEffect(() => {
+		if (open) firedRef.current = false;
+	}, [open]);
+	const onCloseRef = useRef(onClose);
+	onCloseRef.current = onClose;
+	const runConfirm = useCallback(async () => {
+		if (firedRef.current) return;
+		firedRef.current = true;
+		setPending(true);
+		try {
+			await onConfirm();
+			if (closeOnConfirm) onCloseRef.current();
+			else firedRef.current = false;
+		} catch (error) {
+			firedRef.current = false;
+			throw error;
+		} finally {
+			setPending(false);
+		}
+	}, [onConfirm, closeOnConfirm]);
+	return /* @__PURE__ */ jsxs(BareModal, {
+		open,
+		onClose,
+		ariaLabel: title,
+		align,
+		preventClose: pending,
+		className: cx(modalPanelClasses, "w-[480px] max-w-full"),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "px-5 pt-5",
+			children: [
+				/* @__PURE__ */ jsx("h2", {
+					className: "text-lg font-semibold text-(--theme-app)",
+					children: title
+				}),
+				description !== null && description !== void 0 && /* @__PURE__ */ jsx("p", {
+					className: "mt-1.5 text-sm text-(--theme-muted-text-color)",
+					children: description
+				}),
+				children !== null && children !== void 0 && /* @__PURE__ */ jsx("div", {
+					className: "mt-4",
+					children
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "mt-5 flex items-center justify-end gap-2 border-t border-(--theme-border) px-5 py-3",
+			children: [/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onClose,
+				disabled: pending,
+				className: cx(ghostButtonClasses, pending && "cursor-wait"),
+				children: cancelLabel ?? strings.modal.cancel
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: runConfirm,
+				disabled: confirmDisabled || pending,
+				className: cx(destructive ? dangerButtonClasses : primaryButtonClasses, "disabled:cursor-not-allowed disabled:opacity-50", pending && "cursor-wait"),
+				children: confirmLabel
+			})]
+		})]
+	});
+}
+//#endregion
+export { ConfirmModal };

package/dist/components/CopyToClipboard.js

@@ -0,0 +1,81 @@
+import { useNotify, useStrings } from "./Provider.js";
+import { CheckIcon, ClipboardIcon, CopyIcon, HiddenFalseIcon, HiddenTrueIcon } from "../icons.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/CopyToClipboard.tsx
+function CopyToClipboard({ as = "div", text, className, children, showIcon = true }) {
+	const notify = useNotify();
+	const strings = useStrings();
+	const handleCopy = async () => {
+		try {
+			await navigator.clipboard.writeText(text);
+			notify.info("Copied to clipboard");
+		} catch {
+			notify.error("Failed to copy to clipboard");
+		}
+	};
+	return /* @__PURE__ */ jsxs(as, {
+		className,
+		onClick: handleCopy,
+		...as === "button" ? { type: "button" } : {
+			role: "button",
+			"aria-label": strings.common.copy,
+			tabIndex: 0,
+			onKeyDown: (e) => {
+				if (e.key === "Enter" || e.key === " ") {
+					e.preventDefault();
+					handleCopy();
+				}
+			}
+		},
+		children: [showIcon && /* @__PURE__ */ jsx(ClipboardIcon, {}), children]
+	});
+}
+function CopyCodeBlock({ textToCopy, children, secret = false, isRevealed = false, onRevealToggle }) {
+	const notify = useNotify();
+	const [copied, setCopied] = useState(false);
+	const handleCopy = async () => {
+		if (copied) return;
+		try {
+			await navigator.clipboard.writeText(textToCopy);
+			setCopied(true);
+			notify.info("Copied to clipboard");
+			setTimeout(() => setCopied(false), 2e3);
+		} catch {
+			notify.error("Failed to copy to clipboard");
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "group relative",
+		role: "none",
+		onClick: handleCopy,
+		children: [/* @__PURE__ */ jsx("pre", {
+			className: `p-4 theme-hover border rounded-lg text-left font-mono text-sm overflow-x-auto ${secret ? "pr-24" : "pr-12"}`,
+			children
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "absolute top-0 right-0 bottom-0 flex items-center gap-1 pl-8 pr-2 bg-gradient-to-l from-[var(--color-panel)] from-70% to-transparent rounded-r-lg",
+			children: [secret && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: (e) => {
+					e.stopPropagation();
+					onRevealToggle?.();
+				},
+				className: "p-2 rounded-md opacity-0 group-hover:opacity-100 transition-all duration-150",
+				"aria-label": isRevealed ? "Hide secret" : "Reveal secret",
+				title: isRevealed ? "Hide secret" : "Reveal secret",
+				children: isRevealed ? /* @__PURE__ */ jsx(HiddenFalseIcon, {}) : /* @__PURE__ */ jsx(HiddenTrueIcon, {})
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: (e) => {
+					e.stopPropagation();
+					handleCopy();
+				},
+				className: "p-2 rounded-md opacity-0 group-hover:opacity-100 transition-all duration-150",
+				"aria-label": copied ? "Copied" : "Copy to clipboard",
+				children: copied ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-green-400" }) : /* @__PURE__ */ jsx(CopyIcon, {})
+			})]
+		})]
+	});
+}
+//#endregion
+export { CopyCodeBlock, CopyToClipboard as default };