@ctrl-ui/react 0.8.0

package/dist/dynamic-notification-siri-wave.js

@@ -0,0 +1,82 @@
+//#region src/dynamic-notification-siri-wave.ts
+const DYNAMIC_NOTIFICATION_SIRI_WAVE_GLSL = `
+const float SIRI_PI = 3.14159265359;
+const float SIRI_AMPLITUDE = 0.32;
+const float SIRI_FREQUENCY = 1.1;
+const float SIRI_ABERRATION_FREQUENCY = 1.0;
+const float SIRI_SPEED = 2.4;
+const float SIRI_WAVE_SCALE = 0.6;
+const float SIRI_ABERRATION = 2.6;
+const float SIRI_THICKNESS = 3.0;
+const float SIRI_INTENSITY = 2.0;
+const float SIRI_FALLOFF = 1.7;
+const float SIRI_EDGE_MASK = 0.4;
+const float SIRI_BAND_FILL = 30000.0;
+const float SIRI_BAND_THICKNESS = 0.08;
+const float SIRI_SOFTNESS = 2.5;
+const float SIRI_LOW_AMPLITUDE = 6.0;
+const float SIRI_LOW_INTENSITY = 1.5;
+const float SIRI_MID_ABERRATION = 0.8;
+const float SIRI_MID_ABERRATION_AMPLITUDE = 0.05;
+const float SIRI_MID_SOFTNESS = 0.4;
+const float SIRI_HIGH_ABERRATION = 0.5;
+const float SIRI_HIGH_ABERRATION_AMPLITUDE = 0.06;
+
+vec3 siriSpectrum(int strand) {
+  float x = float(strand);
+  return clamp(vec3(abs(x - 3.0) - 1.0, 2.0 - abs(x - 2.0), 2.0 - abs(x - 4.0)), 0.0, 1.0);
+}
+
+vec3 dynamicNotificationSiriWave(vec2 uv, vec2 resolution, float time, float horizon, float lift) {
+  float aspect = resolution.x / max(resolution.y, 1.0);
+  vec2 p = vec2((uv.x * 2.0 - 1.0) * aspect, (uv.y - horizon + lift * 0.55) * 2.0);
+  float screenY = p.y;
+  p /= max(SIRI_WAVE_SCALE, 0.1);
+
+  float low = clamp(0.45 + 0.45 * sin(time * 0.8) * sin(time * 0.37 + 1.0), 0.0, 1.0);
+  float mid = clamp(0.40 + 0.40 * sin(time * 1.7 + 2.0) * sin(time * 0.53), 0.0, 1.0);
+  float high = clamp(0.30 + 0.30 * sin(time * 2.9 + 4.0) * sin(time * 0.71 + 2.0), 0.0, 1.0);
+  float drift = mod(time, 20.0 * SIRI_PI) * SIRI_SPEED;
+
+  float horizontalPosition = uv.x * 2.0 - 1.0;
+  float envelope = cos(SIRI_PI * 0.5 * min(abs(0.9 * horizontalPosition), 1.0));
+  envelope *= envelope;
+
+  float primaryAmplitude = SIRI_AMPLITUDE + 0.01 * low * SIRI_LOW_AMPLITUDE;
+  float strandAmplitude = primaryAmplitude + mid * SIRI_MID_ABERRATION_AMPLITUDE + high * SIRI_HIGH_ABERRATION_AMPLITUDE;
+  float aberration = SIRI_ABERRATION + mid * SIRI_MID_ABERRATION + high * SIRI_HIGH_ABERRATION;
+  float thickness = 0.01 * SIRI_THICKNESS;
+  float intensity = 0.01 * (SIRI_INTENSITY + low * SIRI_LOW_INTENSITY);
+  float softness = 0.01 * max(0.0, SIRI_SOFTNESS + mid * SIRI_MID_SOFTNESS);
+  float primaryY = primaryAmplitude * envelope * sin(p.x * SIRI_FREQUENCY + drift);
+  float bandAmount = 1e-4 * SIRI_BAND_FILL * intensity;
+
+  vec3 numerator = vec3(0.0);
+  vec3 denominator = vec3(0.0);
+  for (int strand = 0; strand < 4; strand++) {
+    vec3 hue = siriSpectrum(strand);
+    denominator += hue;
+    float phase = mix(-aberration, aberration, float(strand) / 3.0);
+    float strandY = strandAmplitude * envelope * sin(p.x * SIRI_ABERRATION_FREQUENCY + drift + phase);
+    float distanceToStrand = abs(p.y - strandY);
+    float line = intensity / (sqrt(distanceToStrand * distanceToStrand + softness * softness) + thickness);
+    float bandLow = min(primaryY, strandY);
+    float bandHigh = max(primaryY, strandY);
+    float distanceToBand = max(0.0, max(p.y - bandHigh, bandLow - p.y));
+    float band = bandAmount / (distanceToBand + SIRI_BAND_THICKNESS);
+    numerator += hue * (line + band);
+  }
+
+  vec3 color = numerator / max(denominator, vec3(0.0001));
+  float primaryDistance = abs(p.y - primaryY);
+  color += 0.5 * intensity / (sqrt(primaryDistance * primaryDistance + softness * softness) + thickness);
+  color = pow(max(color, 0.0), vec3(1.5));
+
+  float edgeFadePosition = clamp((abs(screenY) - 1.0) / -SIRI_EDGE_MASK, 0.0, 1.0);
+  float edgeFade = edgeFadePosition * edgeFadePosition * (3.0 - 2.0 * edgeFadePosition);
+  color *= edgeFade * exp(-pow(horizontalPosition * SIRI_FALLOFF, 2.0));
+  return color;
+}
+`;
+//#endregion
+export { DYNAMIC_NOTIFICATION_SIRI_WAVE_GLSL };

package/dist/dynamic-notification.d.ts

@@ -0,0 +1,74 @@
+import { FormSubmitEvent, OpenChangeReason } from "./control-props.js";
+import { Button } from "./ui/button.js";
+import { DynamicNotificationKnobStyle } from "./knob-contracts/dynamic-notification-knobs.js";
+import { DynamicNotificationProps, DynamicNotificationVariant } from "./hooks/use-dynamic-notification.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/dynamic-notification.d.ts
+type DynamicNotificationState = "collapsed" | "thinking" | "expanded";
+declare function useDynamicNotificationContext(): {
+  open: boolean;
+  disabled: boolean;
+  setOpen: (nextOpen: boolean, reason: OpenChangeReason, event: Event, trigger?: Element) => void;
+  reply: string;
+  setReply: (nextValue: string) => void;
+  normalizedReply: string;
+  canSubmit: boolean;
+  clear: () => void;
+  submitReply: () => void;
+  handleReplySubmit: (event: FormSubmitEvent) => void;
+  state: DynamicNotificationState;
+  variant: DynamicNotificationVariant;
+  contentId: string;
+};
+declare function DynamicNotification({ open, defaultOpen, onOpenChange, loading, replyValue, defaultReplyValue, onReplyValueChange, onReply, variant, disabled, className, children, ...props }: DynamicNotificationProps): import("react").JSX.Element;
+type DynamicNotificationIslandProps = ComponentProps<"section"> & {
+  style?: CSSProperties & DynamicNotificationKnobStyle;
+};
+declare function DynamicNotificationIsland({ className, onKeyDown, ...props }: DynamicNotificationIslandProps): import("react").JSX.Element;
+type DynamicNotificationGlassProps = ComponentProps<"canvas"> & {
+  style?: CSSProperties & DynamicNotificationKnobStyle;
+};
+/** Optional upgrade for variant="glass" — CSS fallback stays underneath. */
+declare function DynamicNotificationGlass({ className, ...props }: DynamicNotificationGlassProps): import("react").JSX.Element;
+type DynamicNotificationLiquidProps = ComponentProps<"canvas"> & {
+  style?: CSSProperties & DynamicNotificationKnobStyle;
+};
+/** WebGL transmits nearest scene through surface while keeping distortion concentrated at its edge. */
+declare function DynamicNotificationLiquid({ className, ...props }: DynamicNotificationLiquidProps): import("react").JSX.Element;
+type DynamicNotificationPillProps = ComponentProps<"button"> & {
+  style?: CSSProperties & DynamicNotificationKnobStyle;
+};
+declare function DynamicNotificationPill({ className, children, onClick, ...props }: DynamicNotificationPillProps): import("react").JSX.Element;
+type DynamicNotificationIndicatorProps = ComponentProps<"span"> & {
+  style?: CSSProperties & DynamicNotificationKnobStyle;
+};
+/** Breathing orb marking assistant activity; dynamic-notification.css animates it. */
+declare function DynamicNotificationIndicator({ className, ...props }: DynamicNotificationIndicatorProps): import("react").JSX.Element;
+type DynamicNotificationContentProps = ComponentProps<"div"> & {
+  style?: CSSProperties & DynamicNotificationKnobStyle;
+};
+declare function DynamicNotificationContent({ className, id, ...props }: DynamicNotificationContentProps): import("react").JSX.Element;
+type DynamicNotificationTitleProps = ComponentProps<"div"> & {
+  style?: CSSProperties & DynamicNotificationKnobStyle;
+};
+declare function DynamicNotificationTitle({ className, ...props }: DynamicNotificationTitleProps): import("react").JSX.Element;
+type DynamicNotificationMessageProps = Omit<ComponentProps<"p">, "children"> & {
+  children: string;
+} & {
+  style?: CSSProperties & DynamicNotificationKnobStyle;
+};
+declare function DynamicNotificationMessage({ className, children, ...props }: DynamicNotificationMessageProps): import("react").JSX.Element;
+type DynamicNotificationReplyProps = ComponentProps<"form"> & {
+  style?: CSSProperties & DynamicNotificationKnobStyle;
+};
+declare function DynamicNotificationReply({ className, onSubmit, ...props }: DynamicNotificationReplyProps): import("react").JSX.Element;
+type DynamicNotificationReplyInputProps = ComponentProps<"input"> & {
+  style?: CSSProperties & DynamicNotificationKnobStyle;
+};
+declare function DynamicNotificationReplyInput({ className, onChange, disabled, ...props }: DynamicNotificationReplyInputProps): import("react").JSX.Element;
+type DynamicNotificationReplySubmitProps = ComponentProps<typeof Button>;
+declare function DynamicNotificationReplySubmit({ className, disabled, children, ...props }: DynamicNotificationReplySubmitProps): import("react").JSX.Element;
+type DynamicNotificationCloseProps = ComponentProps<typeof Button>;
+declare function DynamicNotificationClose({ className, children, onClick, ...props }: DynamicNotificationCloseProps): import("react").JSX.Element;
+//#endregion
+export { DynamicNotification, DynamicNotificationClose, DynamicNotificationCloseProps, DynamicNotificationContent, DynamicNotificationContentProps, DynamicNotificationGlass, DynamicNotificationGlassProps, DynamicNotificationIndicator, DynamicNotificationIndicatorProps, DynamicNotificationIsland, DynamicNotificationIslandProps, DynamicNotificationLiquid, DynamicNotificationLiquidProps, DynamicNotificationMessage, DynamicNotificationMessageProps, DynamicNotificationPill, DynamicNotificationPillProps, DynamicNotificationReply, DynamicNotificationReplyInput, DynamicNotificationReplyInputProps, DynamicNotificationReplyProps, DynamicNotificationReplySubmit, DynamicNotificationReplySubmitProps, DynamicNotificationState, DynamicNotificationTitle, DynamicNotificationTitleProps, useDynamicNotificationContext };

package/dist/dynamic-notification.js

@@ -0,0 +1,342 @@
+"use client";
+import { cn } from "./lib/cn.js";
+import { Button } from "./ui/button.js";
+import { createDynamicNotificationGlass } from "./dynamic-notification-glass.js";
+import { createDynamicNotificationLiquid } from "./dynamic-notification-liquid.js";
+import { useDynamicNotification } from "./hooks/use-dynamic-notification.js";
+import { createContext, useContext, useEffect, useId, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/dynamic-notification.tsx
+const DynamicNotificationShellContext = createContext(null);
+const DynamicNotificationReplyContext = createContext(null);
+function resolveNotificationState(open, loading) {
+	if (!open) return "collapsed";
+	if (loading) return "thinking";
+	return "expanded";
+}
+function useDynamicNotificationShellContext() {
+	const context = useContext(DynamicNotificationShellContext);
+	if (!context) throw new Error("DynamicNotification compound components must be rendered inside <DynamicNotification>.");
+	return context;
+}
+function useDynamicNotificationReplyContext() {
+	const context = useContext(DynamicNotificationReplyContext);
+	if (!context) throw new Error("DynamicNotification reply components must be rendered inside <DynamicNotification>.");
+	return context;
+}
+function useDynamicNotificationContext() {
+	const shell = useDynamicNotificationShellContext();
+	const reply = useDynamicNotificationReplyContext();
+	return {
+		...shell,
+		...reply
+	};
+}
+function DynamicNotification({ open, defaultOpen, onOpenChange, loading = false, replyValue, defaultReplyValue, onReplyValueChange, onReply, variant = "surface", disabled = false, className, children, ...props }) {
+	const notification = useDynamicNotification({
+		open,
+		defaultOpen,
+		onOpenChange,
+		replyValue,
+		defaultReplyValue,
+		onReplyValueChange,
+		onReply,
+		disabled
+	});
+	const contentId = useId();
+	const state = resolveNotificationState(notification.open, loading);
+	const shellContext = useMemo(() => ({
+		open: notification.open,
+		disabled: notification.disabled,
+		setOpen: notification.setOpen,
+		state,
+		variant,
+		contentId
+	}), [
+		notification.open,
+		notification.disabled,
+		notification.setOpen,
+		state,
+		variant,
+		contentId
+	]);
+	const replyContext = useMemo(() => ({
+		reply: notification.reply,
+		setReply: notification.setReply,
+		normalizedReply: notification.normalizedReply,
+		canSubmit: notification.canSubmit,
+		clear: notification.clear,
+		submitReply: notification.submitReply,
+		handleReplySubmit: notification.handleReplySubmit
+	}), [
+		notification.reply,
+		notification.setReply,
+		notification.normalizedReply,
+		notification.canSubmit,
+		notification.clear,
+		notification.submitReply,
+		notification.handleReplySubmit
+	]);
+	return /* @__PURE__ */ jsx(DynamicNotificationShellContext.Provider, {
+		value: shellContext,
+		children: /* @__PURE__ */ jsx(DynamicNotificationReplyContext.Provider, {
+			value: replyContext,
+			children: /* @__PURE__ */ jsx("div", {
+				"data-control-ui": "dynamic-notification",
+				"data-control-family": "dynamic-notification",
+				"data-slot": "root",
+				"data-state": state,
+				"data-variant": variant,
+				className: cn("relative flex w-full justify-center", className),
+				...props,
+				children
+			})
+		})
+	});
+}
+function DynamicNotificationIsland({ className, onKeyDown, ...props }) {
+	const { open, setOpen, state, variant } = useDynamicNotificationShellContext();
+	function handleKeyDown(event) {
+		onKeyDown?.(event);
+		if (event.defaultPrevented) return;
+		if (event.key === "Escape" && open) setOpen(false, "escape-key", event.nativeEvent, event.currentTarget);
+	}
+	return /* @__PURE__ */ jsx("section", {
+		"aria-label": "Assistant notification",
+		"aria-busy": state === "thinking" || void 0,
+		"data-control-ui": "dynamic-notification",
+		"data-control-family": "dynamic-notification",
+		"data-slot": "island",
+		"data-state": state,
+		"data-variant": variant,
+		onKeyDown: handleKeyDown,
+		className: cn("relative isolate overflow-hidden", className),
+		...props
+	});
+}
+/** Optional upgrade for variant="glass" — CSS fallback stays underneath. */
+function DynamicNotificationGlass({ className, ...props }) {
+	const canvasRef = useRef(null);
+	useEffect(() => {
+		const canvas = canvasRef.current;
+		if (!canvas) return;
+		return createDynamicNotificationGlass(canvas);
+	}, []);
+	return /* @__PURE__ */ jsx("canvas", {
+		ref: canvasRef,
+		"aria-hidden": "true",
+		tabIndex: -1,
+		"data-control-ui": "dynamic-notification",
+		"data-control-family": "dynamic-notification",
+		"data-slot": "glass",
+		className: cn("pointer-events-none absolute inset-0 -z-10 size-full", className),
+		...props
+	});
+}
+/** WebGL transmits nearest scene through surface while keeping distortion concentrated at its edge. */
+function DynamicNotificationLiquid({ className, ...props }) {
+	const canvasRef = useRef(null);
+	useEffect(() => {
+		const canvas = canvasRef.current;
+		if (!canvas) return;
+		return createDynamicNotificationLiquid(canvas);
+	}, []);
+	return /* @__PURE__ */ jsx("canvas", {
+		ref: canvasRef,
+		"aria-hidden": "true",
+		tabIndex: -1,
+		"data-control-ui": "dynamic-notification",
+		"data-control-family": "dynamic-notification",
+		"data-slot": "liquid",
+		className: cn("pointer-events-none absolute inset-0 -z-10 size-full", className),
+		...props
+	});
+}
+function DynamicNotificationPill({ className, children, onClick, ...props }) {
+	const { contentId, disabled, open, setOpen } = useDynamicNotificationShellContext();
+	function handleClick(event) {
+		onClick?.(event);
+		if (event.defaultPrevented) return;
+		setOpen(true, "trigger-press", event.nativeEvent, event.currentTarget);
+	}
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-expanded": open,
+		"aria-controls": contentId,
+		inert: open,
+		"data-control-ui": "dynamic-notification",
+		"data-control-family": "dynamic-notification",
+		"data-slot": "pill",
+		onClick: handleClick,
+		disabled,
+		className: cn("absolute inset-0 flex cursor-pointer items-center justify-center", className),
+		...props,
+		children
+	});
+}
+/** Breathing orb marking assistant activity; dynamic-notification.css animates it. */
+function DynamicNotificationIndicator({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		"data-control-ui": "dynamic-notification",
+		"data-control-family": "dynamic-notification",
+		"data-slot": "indicator",
+		className: cn("shrink-0", className),
+		...props
+	});
+}
+function DynamicNotificationContent({ className, id, ...props }) {
+	const { contentId, state } = useDynamicNotificationShellContext();
+	return /* @__PURE__ */ jsx("div", {
+		id: id ?? contentId,
+		inert: state !== "expanded",
+		"data-control-ui": "dynamic-notification",
+		"data-control-family": "dynamic-notification",
+		"data-slot": "content",
+		className: cn("flex flex-col", className),
+		...props
+	});
+}
+function DynamicNotificationTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "dynamic-notification",
+		"data-control-family": "dynamic-notification",
+		"data-slot": "title",
+		className: cn("flex-1", className),
+		...props
+	});
+}
+function DynamicNotificationMessage({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"aria-live": "polite",
+		"data-control-ui": "dynamic-notification",
+		"data-control-family": "dynamic-notification",
+		"data-slot": "message",
+		className,
+		...props,
+		children: /* @__PURE__ */ jsx(DynamicNotificationWords, { text: children }, children)
+	});
+}
+function DynamicNotificationWords({ text }) {
+	let wordIndex = 0;
+	return text.split(/(\s+)/).map((part, position) => {
+		if (part.length === 0 || /^\s+$/.test(part)) return part;
+		const style = { "--_dynamic-notification-word-index": `${wordIndex}` };
+		wordIndex += 1;
+		return /* @__PURE__ */ jsx("span", {
+			"data-control-ui": "dynamic-notification",
+			"data-control-family": "dynamic-notification",
+			"data-slot": "word",
+			style,
+			children: part
+		}, position);
+	});
+}
+function DynamicNotificationReply({ className, onSubmit, ...props }) {
+	const { handleReplySubmit } = useDynamicNotificationReplyContext();
+	function handleSubmit(event) {
+		onSubmit?.(event);
+		if (event.defaultPrevented) return;
+		handleReplySubmit(event);
+	}
+	return /* @__PURE__ */ jsx("form", {
+		"data-control-ui": "dynamic-notification",
+		"data-control-family": "dynamic-notification",
+		"data-slot": "reply",
+		onSubmit: handleSubmit,
+		className: cn("flex items-center", className),
+		...props
+	});
+}
+function DynamicNotificationReplyInput({ className, onChange, disabled, ...props }) {
+	const { disabled: contextDisabled, state } = useDynamicNotificationShellContext();
+	const { reply, setReply } = useDynamicNotificationReplyContext();
+	const inputRef = useRef(null);
+	useEffect(() => {
+		if (state !== "expanded") return;
+		const frame = requestAnimationFrame(() => inputRef.current?.focus({ preventScroll: true }));
+		return () => cancelAnimationFrame(frame);
+	}, [state]);
+	function handleChange(event) {
+		onChange?.(event);
+		if (!event.defaultPrevented) setReply(event.currentTarget.value);
+	}
+	return /* @__PURE__ */ jsx("input", {
+		ref: inputRef,
+		type: "text",
+		"aria-label": "Reply",
+		"data-control-ui": "dynamic-notification",
+		"data-control-family": "dynamic-notification",
+		"data-slot": "reply-input",
+		value: reply,
+		onChange: handleChange,
+		disabled: disabled ?? contextDisabled,
+		className: cn("min-w-0 flex-1 disabled:cursor-not-allowed", className),
+		...props
+	});
+}
+function DynamicNotificationReplySubmit({ className, disabled, children, ...props }) {
+	const { canSubmit } = useDynamicNotificationReplyContext();
+	return /* @__PURE__ */ jsx(Button, {
+		"data-control-ui": "dynamic-notification",
+		"data-dynamic-notification-submit": "true",
+		"data-slot": "reply-submit",
+		type: "submit",
+		variant: "solid",
+		size: "lg",
+		iconOnly: true,
+		shape: "circle",
+		"aria-label": "Send reply",
+		disabled: disabled ?? !canSubmit,
+		className: cn("shrink-0", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 16 16",
+			className: "size-4",
+			"aria-hidden": "true",
+			fill: "none",
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M8 12.5v-9M4 7l4-3.5L12 7",
+				stroke: "currentColor",
+				strokeWidth: "1.6",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		})
+	});
+}
+function DynamicNotificationClose({ className, children, onClick, ...props }) {
+	const { setOpen } = useDynamicNotificationShellContext();
+	function handleClick(event) {
+		onClick?.(event);
+		if (event.defaultPrevented) return;
+		setOpen(false, "close-press", event.nativeEvent, event.currentTarget);
+	}
+	return /* @__PURE__ */ jsx(Button, {
+		"data-control-ui": "dynamic-notification",
+		"data-dynamic-notification-close": "true",
+		"data-slot": "close",
+		variant: "quiet",
+		size: "sm",
+		iconOnly: true,
+		shape: "circle",
+		"aria-label": "Dismiss",
+		onClick: handleClick,
+		className: cn("shrink-0", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 16 16",
+			className: "size-3.5",
+			"aria-hidden": "true",
+			fill: "none",
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M4 4 12 12M12 4 4 12",
+				stroke: "currentColor",
+				strokeWidth: "1.4",
+				strokeLinecap: "round"
+			})
+		})
+	});
+}
+//#endregion
+export { DynamicNotification, DynamicNotificationClose, DynamicNotificationContent, DynamicNotificationGlass, DynamicNotificationIndicator, DynamicNotificationIsland, DynamicNotificationLiquid, DynamicNotificationMessage, DynamicNotificationPill, DynamicNotificationReply, DynamicNotificationReplyInput, DynamicNotificationReplySubmit, DynamicNotificationTitle, useDynamicNotificationContext };

package/dist/environment-variables.d.ts

@@ -0,0 +1,124 @@
+import { Button } from "./ui/button.js";
+import { EnvironmentVariableRow, EnvironmentVariablesController, UseEnvironmentVariablesOptions } from "./hooks/use-environment-variables.js";
+import { EnvironmentVariablesKnobStyle } from "./knob-contracts/environment-variables-knobs.js";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
+//#region src/environment-variables.d.ts
+type EnvironmentVariablesRowErrors = Record<number, {
+  key?: ReactNode;
+  value?: ReactNode;
+}>;
+type EnvironmentVariablesSubmitPayload<TRow extends EnvironmentVariableRow = EnvironmentVariableRow> = {
+  rows: TRow[];
+  variables: Record<string, string>;
+  envFileText: string;
+  reset: () => void;
+};
+type EnvironmentVariablesRootProps<TRow extends EnvironmentVariableRow = EnvironmentVariableRow> = Omit<ComponentProps<"form">, "onSubmit"> & {
+  editor: EnvironmentVariablesController<TRow>;
+  disabled?: boolean;
+  readOnly?: boolean;
+  rowErrors?: EnvironmentVariablesRowErrors;
+  keyLabel?: ReactNode;
+  valueLabel?: ReactNode;
+  keyPlaceholder?: string;
+  valuePlaceholder?: string;
+  duplicateKeyMessage?: ReactNode;
+  onSubmit?: (payload: EnvironmentVariablesSubmitPayload<TRow>) => void | Promise<void>;
+} & {
+  style?: CSSProperties & EnvironmentVariablesKnobStyle;
+};
+declare function EnvironmentVariablesRoot<TRow extends EnvironmentVariableRow = EnvironmentVariableRow>({ editor, disabled, readOnly, rowErrors, keyLabel, valueLabel, keyPlaceholder, valuePlaceholder, duplicateKeyMessage, onSubmit, className, children, ...props }: EnvironmentVariablesRootProps<TRow>): import("react").JSX.Element;
+type EnvironmentVariablesProps<TRow extends EnvironmentVariableRow = EnvironmentVariableRow> = Omit<EnvironmentVariablesRootProps<TRow>, "editor"> & UseEnvironmentVariablesOptions<TRow> & {
+  editor?: EnvironmentVariablesController<TRow>;
+  title?: ReactNode;
+  description?: ReactNode;
+  error?: ReactNode;
+  submitLabel?: ReactNode;
+  resetLabel?: ReactNode;
+  addLabel?: ReactNode;
+  hideDefaultActions?: boolean;
+};
+declare function EnvironmentVariablesComponent<TRow extends EnvironmentVariableRow = EnvironmentVariableRow>({ editor: providedEditor, initialRows, rows, onRowsChange, createDefaultRow, createRow, getEditableRows, getPreservedRows, maxUploadSize, title, description, error, submitLabel, resetLabel, addLabel, hideDefaultActions, children, onSubmit, ...props }: EnvironmentVariablesProps<TRow>): import("react").JSX.Element;
+type EnvironmentVariablesHeaderProps = ComponentProps<"div"> & {
+  title?: ReactNode;
+  description?: ReactNode;
+} & {
+  style?: CSSProperties & EnvironmentVariablesKnobStyle;
+};
+declare function EnvironmentVariablesHeader({ title, description, className, children, ...props }: EnvironmentVariablesHeaderProps): import("react").JSX.Element | null;
+type EnvironmentVariablesToolbarProps = ComponentProps<"div"> & {
+  style?: CSSProperties & EnvironmentVariablesKnobStyle;
+};
+declare function EnvironmentVariablesToolbar({ className, children, ...props }: EnvironmentVariablesToolbarProps): import("react").JSX.Element | null;
+type EnvironmentVariablesUploadButtonProps = ComponentProps<typeof Button> & {
+  inputLabel?: string;
+};
+declare function EnvironmentVariablesUploadButton({ inputLabel, children, variant, size, disabled, onClick, ...props }: EnvironmentVariablesUploadButtonProps): import("react").JSX.Element;
+type EnvironmentVariablesRowsProps = ComponentProps<"div"> & {
+  rowErrors?: EnvironmentVariablesRowErrors;
+} & {
+  style?: CSSProperties & EnvironmentVariablesKnobStyle;
+};
+declare function EnvironmentVariablesRows({ rowErrors, className, children, ...props }: EnvironmentVariablesRowsProps): import("react").JSX.Element;
+type EnvironmentVariablesRowProps = Omit<ComponentProps<"div">, "children"> & {
+  row: EnvironmentVariableRow;
+  index: number;
+  rowErrors?: EnvironmentVariablesRowErrors;
+} & {
+  style?: CSSProperties & EnvironmentVariablesKnobStyle;
+};
+declare function EnvironmentVariablesRow({ row, index, rowErrors, className, ...props }: EnvironmentVariablesRowProps): import("react").JSX.Element;
+type EnvironmentVariablesAddButtonProps = ComponentProps<typeof Button>;
+declare function EnvironmentVariablesAddButton({ children, variant, size, disabled, onClick, ...props }: EnvironmentVariablesAddButtonProps): import("react").JSX.Element | null;
+type EnvironmentVariablesResetButtonProps = ComponentProps<typeof Button>;
+declare function EnvironmentVariablesResetButton({ children, variant, size, disabled, onClick, ...props }: EnvironmentVariablesResetButtonProps): import("react").JSX.Element | null;
+type EnvironmentVariablesSubmitButtonProps = ComponentProps<typeof Button>;
+declare function EnvironmentVariablesSubmitButton({ children, variant, tone, size, disabled, ...props }: EnvironmentVariablesSubmitButtonProps): import("react").JSX.Element | null;
+type EnvironmentVariablesActionsProps = ComponentProps<"div"> & {
+  style?: CSSProperties & EnvironmentVariablesKnobStyle;
+};
+declare function EnvironmentVariablesActions({ className, ...props }: EnvironmentVariablesActionsProps): import("react").JSX.Element;
+type EnvironmentVariablesMessageProps = Omit<ComponentProps<"div">, "style"> & {
+  error?: ReactNode;
+  style?: CSSProperties & EnvironmentVariablesKnobStyle;
+};
+declare function EnvironmentVariablesMessage({ error, className, children, ...props }: EnvironmentVariablesMessageProps): import("react").JSX.Element | null;
+type EnvironmentVariablesDuplicateKeysErrorProps = Omit<EnvironmentVariablesMessageProps, "error"> & {
+  message?: ReactNode;
+};
+declare function EnvironmentVariablesDuplicateKeysError({ message, ...props }: EnvironmentVariablesDuplicateKeysErrorProps): import("react").JSX.Element | null;
+type EnvironmentVariablesUploadErrorProps = Omit<EnvironmentVariablesMessageProps, "error">;
+declare function EnvironmentVariablesUploadError(props: EnvironmentVariablesUploadErrorProps): import("react").JSX.Element;
+type EnvironmentVariablesReadOnlyListProps = ComponentProps<"div"> & {
+  rows?: readonly EnvironmentVariableRow[];
+  emptyMessage?: ReactNode;
+} & {
+  style?: CSSProperties & EnvironmentVariablesKnobStyle;
+};
+declare function EnvironmentVariablesReadOnlyList({ rows, emptyMessage, className, children, ...props }: EnvironmentVariablesReadOnlyListProps): import("react").JSX.Element;
+type EnvironmentVariablesReadOnlyItemProps = Omit<ComponentProps<"div">, "style"> & {
+  name: ReactNode;
+  value?: ReactNode;
+  revealed?: boolean;
+  style?: CSSProperties & EnvironmentVariablesKnobStyle;
+};
+declare function EnvironmentVariablesReadOnlyItem({ name, value, revealed, className, ...props }: EnvironmentVariablesReadOnlyItemProps): import("react").JSX.Element;
+declare const EnvironmentVariables: typeof EnvironmentVariablesComponent & {
+  Root: typeof EnvironmentVariablesRoot;
+  Header: typeof EnvironmentVariablesHeader;
+  Toolbar: typeof EnvironmentVariablesToolbar;
+  UploadButton: typeof EnvironmentVariablesUploadButton;
+  UploadError: typeof EnvironmentVariablesUploadError;
+  Rows: typeof EnvironmentVariablesRows;
+  Row: typeof EnvironmentVariablesRow;
+  AddButton: typeof EnvironmentVariablesAddButton;
+  ResetButton: typeof EnvironmentVariablesResetButton;
+  SubmitButton: typeof EnvironmentVariablesSubmitButton;
+  Actions: typeof EnvironmentVariablesActions;
+  Message: typeof EnvironmentVariablesMessage;
+  DuplicateKeysError: typeof EnvironmentVariablesDuplicateKeysError;
+  ReadOnlyList: typeof EnvironmentVariablesReadOnlyList;
+  ReadOnlyItem: typeof EnvironmentVariablesReadOnlyItem;
+};
+//#endregion
+export { EnvironmentVariables, EnvironmentVariablesActions, EnvironmentVariablesActionsProps, EnvironmentVariablesAddButton, EnvironmentVariablesAddButtonProps, EnvironmentVariablesDuplicateKeysError, EnvironmentVariablesDuplicateKeysErrorProps, EnvironmentVariablesHeader, EnvironmentVariablesHeaderProps, EnvironmentVariablesMessage, EnvironmentVariablesMessageProps, EnvironmentVariablesProps, EnvironmentVariablesReadOnlyItem, EnvironmentVariablesReadOnlyItemProps, EnvironmentVariablesReadOnlyList, EnvironmentVariablesReadOnlyListProps, EnvironmentVariablesResetButton, EnvironmentVariablesResetButtonProps, EnvironmentVariablesRoot, EnvironmentVariablesRootProps, EnvironmentVariablesRow, EnvironmentVariablesRowErrors, EnvironmentVariablesRowProps, EnvironmentVariablesRows, EnvironmentVariablesRowsProps, EnvironmentVariablesSubmitButton, EnvironmentVariablesSubmitButtonProps, EnvironmentVariablesSubmitPayload, EnvironmentVariablesToolbar, EnvironmentVariablesToolbarProps, EnvironmentVariablesUploadButton, EnvironmentVariablesUploadButtonProps, EnvironmentVariablesUploadError, EnvironmentVariablesUploadErrorProps };