@mcp-b/react-components 0.1.1 → 0.1.2

package/dist/components/Dialog.d.ts

@@ -0,0 +1,120 @@
+import * as React from "react";
+import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
+
+//#region src/components/Dialog.d.ts
+interface DialogProps extends Dialog$1.Root.Props {}
+interface DialogTriggerProps extends Dialog$1.Trigger.Props {}
+interface DialogPortalProps extends Dialog$1.Portal.Props {}
+interface DialogBackdropProps extends Omit<Dialog$1.Backdrop.Props, "className"> {
+  className?: string;
+}
+interface DialogPopupProps extends Omit<Dialog$1.Popup.Props, "className"> {
+  className?: string;
+  /**
+   * The size of the dialog.
+   * @default 'md'
+   */
+  size?: "sm" | "md" | "lg" | "fullscreen";
+}
+interface DialogTitleProps extends Omit<Dialog$1.Title.Props, "className"> {
+  className?: string;
+}
+interface DialogDescriptionProps extends Omit<Dialog$1.Description.Props, "className"> {
+  className?: string;
+}
+interface DialogCloseProps extends Omit<Dialog$1.Close.Props, "className"> {
+  className?: string;
+}
+type DialogOverlayProps = DialogBackdropProps;
+type DialogContentProps = DialogPopupProps & {
+  showCloseButton?: boolean;
+};
+interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+  showCloseButton?: boolean;
+}
+/**
+ * A dialog component for modal interactions.
+ *
+ * @example
+ * ```tsx
+ * <Dialog open={isOpen} onOpenChange={setIsOpen}>
+ *   <DialogPortal>
+ *     <DialogBackdrop />
+ *     <DialogPopup>
+ *       <DialogTitle>Confirm</DialogTitle>
+ *       <DialogDescription>Are you sure?</DialogDescription>
+ *       <DialogClose>Cancel</DialogClose>
+ *     </DialogPopup>
+ *   </DialogPortal>
+ * </Dialog>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/dialog | Base UI Dialog}
+ */
+declare const Dialog: typeof Dialog$1.Root;
+declare function DialogTrigger(props: DialogTriggerProps): React.JSX.Element;
+declare const DialogPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare function DialogBackdrop({
+  className,
+  ref,
+  ...props
+}: DialogBackdropProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare const DialogOverlay: typeof DialogBackdrop;
+declare function DialogPopup({
+  size,
+  className,
+  ref,
+  ...props
+}: DialogPopupProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function DialogContent({
+  children,
+  showCloseButton,
+  ref,
+  ...props
+}: DialogContentProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function DialogHeader({
+  className,
+  ref,
+  ...props
+}: DialogHeaderProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function DialogFooter({
+  className,
+  showCloseButton,
+  children,
+  ref,
+  ...props
+}: DialogFooterProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function DialogTitle({
+  className,
+  ref,
+  ...props
+}: DialogTitleProps & {
+  ref?: React.Ref<HTMLHeadingElement>;
+}): React.JSX.Element;
+declare function DialogDescription({
+  className,
+  ref,
+  ...props
+}: DialogDescriptionProps & {
+  ref?: React.Ref<HTMLParagraphElement>;
+}): React.JSX.Element;
+declare function DialogClose({
+  className,
+  ref,
+  ...props
+}: DialogCloseProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+//#endregion
+export { Dialog, DialogBackdrop, DialogBackdropProps, DialogClose, DialogCloseProps, DialogContent, DialogContentProps, DialogDescription, DialogDescriptionProps, DialogFooter, DialogFooterProps, DialogHeader, DialogHeaderProps, DialogOverlay, DialogOverlayProps, DialogPopup, DialogPopupProps, DialogPortal, DialogPortalProps, DialogProps, DialogTitle, DialogTitleProps, DialogTrigger, DialogTriggerProps };

package/dist/components/Dialog.js

@@ -0,0 +1,114 @@
+import { O as XIcon } from "../icons-BsWc8g4E.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
+//#region src/components/Dialog.tsx
+/**
+* A dialog component for modal interactions.
+*
+* @example
+* ```tsx
+* <Dialog open={isOpen} onOpenChange={setIsOpen}>
+*   <DialogPortal>
+*     <DialogBackdrop />
+*     <DialogPopup>
+*       <DialogTitle>Confirm</DialogTitle>
+*       <DialogDescription>Are you sure?</DialogDescription>
+*       <DialogClose>Cancel</DialogClose>
+*     </DialogPopup>
+*   </DialogPortal>
+* </Dialog>
+* ```
+*
+* @see {@link https://base-ui.com/react/components/dialog | Base UI Dialog}
+*/
+const Dialog = Dialog$1.Root;
+function DialogTrigger(props) {
+	return /* @__PURE__ */ jsx(Dialog$1.Trigger, {
+		"data-slot": "dialog-trigger",
+		...props
+	});
+}
+const DialogPortal = Dialog$1.Portal;
+function DialogBackdrop({ className = "", ref, ...props }) {
+	const classes = ["dialog__backdrop", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Dialog$1.Backdrop, {
+		ref,
+		"data-slot": "dialog-overlay",
+		className: classes,
+		...props
+	});
+}
+const DialogOverlay = DialogBackdrop;
+function DialogPopup({ size = "md", className = "", ref, ...props }) {
+	const classes = [
+		"dialog__popup",
+		size !== "md" && `dialog__popup--${size}`,
+		className
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Dialog$1.Popup, {
+		ref,
+		"data-slot": "dialog-content",
+		className: classes,
+		...props
+	});
+}
+function DialogContent({ children, showCloseButton = true, ref, ...props }) {
+	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogBackdrop, {}), /* @__PURE__ */ jsxs(DialogPopup, {
+		ref,
+		...props,
+		children: [children, showCloseButton ? /* @__PURE__ */ jsxs(DialogClose, {
+			className: "dialog__close--icon",
+			children: [/* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {
+				className: "dialog__close-label",
+				children: "Close"
+			})]
+		}) : null]
+	})] });
+}
+function DialogHeader({ className = "", ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "dialog-header",
+		className: ["dialog__header", className].filter(Boolean).join(" "),
+		...props
+	});
+}
+function DialogFooter({ className = "", showCloseButton = false, children, ref, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "dialog-footer",
+		className: ["dialog__footer", className].filter(Boolean).join(" "),
+		...props,
+		children: [children, showCloseButton ? /* @__PURE__ */ jsx(DialogClose, { children: "Close" }) : null]
+	});
+}
+function DialogTitle({ className = "", ref, ...props }) {
+	const classes = ["dialog__title", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Dialog$1.Title, {
+		ref,
+		"data-slot": "dialog-title",
+		className: classes,
+		...props
+	});
+}
+function DialogDescription({ className = "", ref, ...props }) {
+	const classes = ["dialog__description", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Dialog$1.Description, {
+		ref,
+		"data-slot": "dialog-description",
+		className: classes,
+		...props
+	});
+}
+function DialogClose({ className = "", ref, ...props }) {
+	const classes = ["dialog__close", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Dialog$1.Close, {
+		ref,
+		"data-slot": "dialog-close",
+		className: classes,
+		...props
+	});
+}
+//#endregion
+export { Dialog, DialogBackdrop, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPopup, DialogPortal, DialogTitle, DialogTrigger };

package/dist/components/EnvironmentVariables.d.ts

@@ -0,0 +1,176 @@
+import { r as ButtonProps } from "../Button-QCM8ZKgR.js";
+import * as React from "react";
+
+//#region src/components/EnvironmentVariables.d.ts
+interface EnvironmentVariablesProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Controlled visibility for all variable values. */
+  showValues?: boolean;
+  /** Initial visibility for uncontrolled value reveal state. */
+  defaultShowValues?: boolean;
+  /** Called when the reveal switch changes value visibility. */
+  onShowValuesChange?: (show: boolean) => void;
+  /** Additional class names for layout only; do not override masking styles from apps. */
+  className?: string;
+  /** Header, content, groups, and variable rows. */
+  children?: React.ReactNode;
+}
+/**
+ * A panel displaying environment variables with masked values and per-variable
+ * copy actions. Toggle the reveal switch to show all values at once.
+ *
+ * Built internally for deployment/setup screens. Use it to display known
+ * environment keys and copyable values. Do not treat masking as a security
+ * boundary; do not render secrets for users who are not allowed to see them.
+ *
+ * Sigvelo changes: composes Badge, Button, Switch, and Tooltip; maps copy and
+ * reveal controls to Sigvelo CSS tokens; keeps masking local to the component.
+ *
+ * Values need visible labels and copy buttons need accessible labels. Styling
+ * consumes text, muted text, border, surface, spacing, radius, and focus tokens.
+ * Add shared formats here if multiple apps need them.
+ *
+ * @example
+ * ```tsx
+ * <EnvironmentVariables defaultShowValues={false}>
+ *   <EnvironmentVariablesHeader>
+ *     <EnvironmentVariablesTitle>Server env</EnvironmentVariablesTitle>
+ *     <EnvironmentVariablesToggle />
+ *   </EnvironmentVariablesHeader>
+ *   <EnvironmentVariablesContent>
+ *     <EnvironmentVariable name="DATABASE_URL" value="postgres://localhost/x">
+ *       <EnvironmentVariableName />
+ *       <EnvironmentVariableValue />
+ *       <EnvironmentVariableRequired />
+ *       <EnvironmentVariableCopyButton format="export" />
+ *     </EnvironmentVariable>
+ *   </EnvironmentVariablesContent>
+ * </EnvironmentVariables>
+ * ```
+ */
+declare function EnvironmentVariables({
+  className,
+  showValues,
+  defaultShowValues,
+  onShowValuesChange,
+  children,
+  ref,
+  ...props
+}: EnvironmentVariablesProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface EnvironmentVariablesHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
+declare function EnvironmentVariablesHeader({
+  className,
+  children,
+  ref,
+  ...props
+}: EnvironmentVariablesHeaderProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface EnvironmentVariablesTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}
+declare function EnvironmentVariablesTitle({
+  className,
+  children,
+  ref,
+  ...props
+}: EnvironmentVariablesTitleProps & {
+  ref?: React.Ref<HTMLHeadingElement>;
+}): React.JSX.Element;
+interface EnvironmentVariablesToggleProps extends Omit<React.HTMLAttributes<HTMLLabelElement>, "onChange"> {
+  /** Optional label. Defaults to "Show values". */
+  label?: string;
+}
+declare function EnvironmentVariablesToggle({
+  className,
+  label,
+  ref,
+  ...props
+}: EnvironmentVariablesToggleProps & {
+  ref?: React.Ref<HTMLLabelElement>;
+}): React.JSX.Element;
+interface EnvironmentVariablesContentProps extends React.HTMLAttributes<HTMLDivElement> {}
+declare function EnvironmentVariablesContent({
+  className,
+  children,
+  ref,
+  ...props
+}: EnvironmentVariablesContentProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface EnvironmentVariableGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  label?: string;
+}
+declare function EnvironmentVariableGroup({
+  className,
+  label,
+  children,
+  ref,
+  ...props
+}: EnvironmentVariableGroupProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface EnvironmentVariableProps extends React.HTMLAttributes<HTMLDivElement> {
+  name: string;
+  value: string;
+}
+declare function EnvironmentVariable({
+  className,
+  name,
+  value,
+  children,
+  ref,
+  ...props
+}: EnvironmentVariableProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface EnvironmentVariableNameProps extends React.HTMLAttributes<HTMLSpanElement> {}
+declare function EnvironmentVariableName({
+  className,
+  children,
+  ref,
+  ...props
+}: EnvironmentVariableNameProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+interface EnvironmentVariableValueProps extends React.HTMLAttributes<HTMLSpanElement> {}
+declare function EnvironmentVariableValue({
+  className,
+  children,
+  ref,
+  ...props
+}: EnvironmentVariableValueProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+type EnvironmentVariableCopyFormat = "name" | "value" | "export";
+interface EnvironmentVariableCopyButtonProps extends Omit<ButtonProps, "children" | "variant" | "size" | "color" | "className" | "onClick" | "onError"> {
+  format?: EnvironmentVariableCopyFormat;
+  copyFormat?: EnvironmentVariableCopyFormat;
+  label?: string;
+  className?: string;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  onCopy?: () => void;
+  onError?: (error: Error) => void;
+  timeout?: number;
+}
+declare function EnvironmentVariableCopyButton({
+  className,
+  format,
+  copyFormat,
+  label,
+  onClick,
+  onCopy,
+  onError,
+  timeout,
+  ...props
+}: EnvironmentVariableCopyButtonProps): React.JSX.Element;
+interface EnvironmentVariableRequiredProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color"> {}
+declare function EnvironmentVariableRequired({
+  className,
+  children,
+  ref,
+  ...props
+}: EnvironmentVariableRequiredProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+//#endregion
+export { EnvironmentVariable, EnvironmentVariableCopyButton, EnvironmentVariableCopyButtonProps, EnvironmentVariableCopyFormat, EnvironmentVariableGroup, EnvironmentVariableGroupProps, EnvironmentVariableName, EnvironmentVariableNameProps, EnvironmentVariableProps, EnvironmentVariableRequired, EnvironmentVariableRequiredProps, EnvironmentVariableValue, EnvironmentVariableValueProps, EnvironmentVariables, EnvironmentVariablesContent, EnvironmentVariablesContentProps, EnvironmentVariablesHeader, EnvironmentVariablesHeaderProps, EnvironmentVariablesProps, EnvironmentVariablesTitle, EnvironmentVariablesTitleProps, EnvironmentVariablesToggle, EnvironmentVariablesToggleProps };

package/dist/components/EnvironmentVariables.js

@@ -0,0 +1,221 @@
+import { f as EyeIcon, l as CopyIcon, o as CheckIcon, p as EyeOffIcon } from "../icons-BsWc8g4E.js";
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { Button } from "./Button.js";
+import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
+import { Badge } from "./Badge.js";
+import { Switch, SwitchThumb } from "./Switch.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/EnvironmentVariables.tsx
+const EnvStateContext = React.createContext(null);
+function useEnvStateContext() {
+	const ctx = React.useContext(EnvStateContext);
+	if (!ctx) throw new Error("EnvironmentVariable subcomponents must be used inside <EnvironmentVariables>.");
+	return ctx;
+}
+const VariableContext = React.createContext(null);
+function useVariableContext() {
+	const ctx = React.useContext(VariableContext);
+	if (!ctx) throw new Error("EnvironmentVariableName/Value must be inside <EnvironmentVariable>.");
+	return ctx;
+}
+/**
+* A panel displaying environment variables with masked values and per-variable
+* copy actions. Toggle the reveal switch to show all values at once.
+*
+* Built internally for deployment/setup screens. Use it to display known
+* environment keys and copyable values. Do not treat masking as a security
+* boundary; do not render secrets for users who are not allowed to see them.
+*
+* Sigvelo changes: composes Badge, Button, Switch, and Tooltip; maps copy and
+* reveal controls to Sigvelo CSS tokens; keeps masking local to the component.
+*
+* Values need visible labels and copy buttons need accessible labels. Styling
+* consumes text, muted text, border, surface, spacing, radius, and focus tokens.
+* Add shared formats here if multiple apps need them.
+*
+* @example
+* ```tsx
+* <EnvironmentVariables defaultShowValues={false}>
+*   <EnvironmentVariablesHeader>
+*     <EnvironmentVariablesTitle>Server env</EnvironmentVariablesTitle>
+*     <EnvironmentVariablesToggle />
+*   </EnvironmentVariablesHeader>
+*   <EnvironmentVariablesContent>
+*     <EnvironmentVariable name="DATABASE_URL" value="postgres://localhost/x">
+*       <EnvironmentVariableName />
+*       <EnvironmentVariableValue />
+*       <EnvironmentVariableRequired />
+*       <EnvironmentVariableCopyButton format="export" />
+*     </EnvironmentVariable>
+*   </EnvironmentVariablesContent>
+* </EnvironmentVariables>
+* ```
+*/
+function EnvironmentVariables({ className, showValues, defaultShowValues = false, onShowValuesChange, children, ref, ...props }) {
+	const [internal, setInternal] = React.useState(defaultShowValues);
+	const isControlled = showValues !== void 0;
+	const current = isControlled ? showValues : internal;
+	const setShowValues = React.useCallback((next) => {
+		if (!isControlled) setInternal(next);
+		onShowValuesChange?.(next);
+	}, [isControlled, onShowValuesChange]);
+	const ctxValue = React.useMemo(() => ({
+		showValues: current,
+		setShowValues
+	}), [current, setShowValues]);
+	return /* @__PURE__ */ jsx(EnvStateContext.Provider, {
+		value: ctxValue,
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			className: cx("environment-variables", className),
+			...props,
+			children
+		})
+	});
+}
+function EnvironmentVariablesHeader({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("environment-variables__header", className),
+		...props,
+		children
+	});
+}
+function EnvironmentVariablesTitle({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("h3", {
+		ref,
+		className: cx("environment-variables__title", className),
+		...props,
+		children: children ?? "Environment Variables"
+	});
+}
+function EnvironmentVariablesToggle({ className, label = "Show values", ref, ...props }) {
+	const { showValues, setShowValues } = useEnvStateContext();
+	return /* @__PURE__ */ jsxs("label", {
+		ref,
+		className: cx("environment-variables__toggle", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "environment-variables__toggle-icon",
+				children: showValues ? /* @__PURE__ */ jsx(EyeIcon, {}) : /* @__PURE__ */ jsx(EyeOffIcon, {})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "environment-variables__toggle-label",
+				children: label
+			}),
+			/* @__PURE__ */ jsx(Switch, {
+				checked: showValues,
+				onCheckedChange: setShowValues,
+				size: "sm",
+				children: /* @__PURE__ */ jsx(SwitchThumb, {})
+			})
+		]
+	});
+}
+function EnvironmentVariablesContent({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("environment-variables__content", className),
+		...props,
+		children
+	});
+}
+function EnvironmentVariableGroup({ className, label, children, ref, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cx("environment-variables__group", className),
+		...props,
+		children: [label ? /* @__PURE__ */ jsx("div", {
+			className: "environment-variables__group-label",
+			children: label
+		}) : null, children]
+	});
+}
+function EnvironmentVariable({ className, name, value, children, ref, ...props }) {
+	const ctxValue = React.useMemo(() => ({
+		name,
+		value
+	}), [name, value]);
+	return /* @__PURE__ */ jsx(VariableContext.Provider, {
+		value: ctxValue,
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			className: cx("environment-variables__row", className),
+			...props,
+			children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(EnvironmentVariableName, {}), /* @__PURE__ */ jsx(EnvironmentVariableValue, {})] })
+		})
+	});
+}
+function EnvironmentVariableName({ className, children, ref, ...props }) {
+	const { name } = useVariableContext();
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		className: cx("environment-variables__name", className),
+		...props,
+		children: children ?? name
+	});
+}
+function EnvironmentVariableValue({ className, children, ref, ...props }) {
+	const { value } = useVariableContext();
+	const { showValues } = useEnvStateContext();
+	const masked = "•".repeat(Math.min(value.length, 12));
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		className: cx("environment-variables__value", className),
+		...props,
+		children: children ?? (showValues ? value : masked)
+	});
+}
+function EnvironmentVariableCopyButton({ className, format = "value", copyFormat, label, onClick, onCopy, onError, timeout = 1500, ...props }) {
+	const { name, value } = useVariableContext();
+	const [copied, setCopied] = React.useState(false);
+	const timeoutRef = React.useRef(null);
+	const resolvedFormat = copyFormat ?? format;
+	const text = resolvedFormat === "name" ? name : resolvedFormat === "export" ? `export ${name}="${value}"` : value;
+	const buttonLabel = label ?? `Copy ${resolvedFormat}`;
+	const handleClick = React.useCallback(async (e) => {
+		try {
+			await navigator.clipboard.writeText(text);
+			setCopied(true);
+			onCopy?.();
+			if (timeoutRef.current !== null) window.clearTimeout(timeoutRef.current);
+			timeoutRef.current = window.setTimeout(() => setCopied(false), timeout);
+		} catch (error) {
+			onError?.(error);
+		}
+		onClick?.(e);
+	}, [
+		onClick,
+		onCopy,
+		onError,
+		text,
+		timeout
+	]);
+	React.useEffect(() => () => {
+		if (timeoutRef.current !== null) window.clearTimeout(timeoutRef.current);
+	}, []);
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "icon",
+		"aria-label": buttonLabel,
+		className: cx("environment-variables__copy", className),
+		...props,
+		onClick: handleClick,
+		children: copied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {})
+	}) }), /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(TooltipPositioner, { children: /* @__PURE__ */ jsx(TooltipPopup, { children: copied ? "Copied" : buttonLabel }) }) })] });
+}
+function EnvironmentVariableRequired({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx(Badge, {
+		...props,
+		ref,
+		color: "warning",
+		size: "sm",
+		className: cx("environment-variables__required", className),
+		children: children ?? "Required"
+	});
+}
+//#endregion
+export { EnvironmentVariable, EnvironmentVariableCopyButton, EnvironmentVariableGroup, EnvironmentVariableName, EnvironmentVariableRequired, EnvironmentVariableValue, EnvironmentVariables, EnvironmentVariablesContent, EnvironmentVariablesHeader, EnvironmentVariablesTitle, EnvironmentVariablesToggle };