@ctrl-ui/react 0.8.19 → 0.8.21

package/dist/ui/sidebar.js

@@ -3,10 +3,12 @@ import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { Button } from "./button.js";
 import { ScrollArea } from "./scroll-area.js";
+import { Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerHeader, DrawerTitle } from "./drawer.js";
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from "./sheet.js";
 import { SidebarProvider, SidebarSurfaceContext, useSidebar, useSidebarElements, useSidebarSurface } from "./sidebar-provider.js";
 import { SidebarResizeRail } from "./sidebar-resize-rail.js";
 import { SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, sidebarMenuButtonSizes, sidebarMenuButtonVariants } from "./sidebar-menu.js";
+import { SidebarMobileNav, SidebarMobileNavItem, SidebarMobileTrigger } from "./sidebar-mobile.js";
 import { useState } from "react";
 import { useRender } from "@base-ui/react/use-render";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -34,12 +36,13 @@ function Sidebar({ side = "left", collapsible = "offcanvas", ...props }) {
 		})
 	});
 }
-function SidebarSurface({ variant, label = "Navigation", ref, className, children, style, railContainerRef, ...props }) {
+function SidebarSurface({ variant, mobileVariant = "sheet", label = "Navigation", ref, className, children, style, railContainerRef, ...props }) {
 	const { side, collapsible } = useSidebarSurface();
-	const { offcanvasRef, triggerRef } = useSidebarElements();
+	const { offcanvasRef } = useSidebarElements();
 	const skin = useSkin();
-	const { isMobile, state, openMobile, setOpenMobile, layout, sidebarId } = useSidebar();
+	const { isMobile, state, layout, sidebarId } = useSidebar();
 	const resolvedVariant = variant ?? skin.sidebarLayout ?? "sidebar";
+	const padded = resolvedVariant === "floating" || resolvedVariant === "inset";
 	const container = useRender({
 		defaultTagName: "div",
 		ref: collapsible === "offcanvas" ? [ref ?? null, offcanvasRef] : ref,
@@ -50,7 +53,7 @@ function SidebarSurface({ variant, label = "Navigation", ref, className, childre
 			"data-control-family": "sidebar",
 			"data-slot": "container",
 			tabIndex: -1,
-			className: cn(layout === "contained" ? "absolute h-full" : "fixed h-svh", "inset-y-0 z-10 hidden w-(--sidebar-width) lg:flex", side === "left" ? "start-0" : "end-0", resolvedVariant === "floating" || resolvedVariant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)", className),
+			className: cn(layout === "contained" ? "absolute h-full" : "fixed h-svh", "inset-y-0 z-10 hidden w-(--sidebar-width) lg:flex", side === "left" ? "start-0" : "end-0", padded ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)", className),
 			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 				"data-control-ui": "sidebar",
 				"data-control-family": "sidebar",
@@ -64,6 +67,16 @@ function SidebarSurface({ variant, label = "Navigation", ref, className, childre
 			})] })
 		}
 	});
+	if (isMobile && (collapsible !== "none" || mobileVariant === "drawer")) return /* @__PURE__ */ jsx(SidebarMobileSurface, {
+		...props,
+		ref,
+		mobileVariant,
+		label,
+		variant: resolvedVariant,
+		className,
+		style,
+		children
+	});
 	if (collapsible === "none") return /* @__PURE__ */ jsxs("div", {
 		ref,
 		"data-control-ui": "sidebar",
@@ -80,46 +93,6 @@ function SidebarSurface({ variant, label = "Navigation", ref, className, childre
 			className: "contents"
 		})]
 	});
-	if (isMobile) {
-		const mobileSheetStyle = {
-			"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
-			...style
-		};
-		return /* @__PURE__ */ jsx(Sheet, {
-			open: openMobile,
-			onOpenChange: setOpenMobile,
-			children: /* @__PURE__ */ jsxs(SheetContent, {
-				side,
-				finalFocus: triggerRef,
-				className: "w-(--sidebar-width) gap-0 p-0",
-				style: mobileSheetStyle,
-				children: [/* @__PURE__ */ jsx(SheetHeader, {
-					className: "sr-only",
-					children: /* @__PURE__ */ jsx(SheetTitle, { children: label })
-				}), /* @__PURE__ */ jsx("div", {
-					ref,
-					id: sidebarId,
-					"data-control-ui": "sidebar",
-					"data-control-family": "sidebar",
-					"data-slot": "root",
-					"data-surface": "panel",
-					"data-variant": resolvedVariant,
-					"data-mobile": "",
-					"data-side": side,
-					className: cn("flex min-h-0 flex-1 flex-col", className),
-					style,
-					...props,
-					children: /* @__PURE__ */ jsx("div", {
-						"data-control-ui": "sidebar",
-						"data-control-family": "sidebar",
-						"data-slot": "inner",
-						className: "flex min-h-0 flex-1 flex-col",
-						children
-					})
-				})]
-			})
-		});
-	}
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("group peer hidden lg:block", side === "right" && "order-last"),
 		"data-control-ui": "sidebar",
@@ -135,13 +108,87 @@ function SidebarSurface({ variant, label = "Navigation", ref, className, childre
 			"data-control-ui": "sidebar",
 			"data-control-family": "sidebar",
 			"data-slot": "gap",
-			className: cn("relative w-(--sidebar-width)", "group-data-[collapsible=offcanvas]:w-0", resolvedVariant === "floating" || resolvedVariant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)")
+			className: cn("relative w-(--sidebar-width)", "group-data-[collapsible=offcanvas]:w-0", padded ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)")
 		}), container]
 	});
 }
+function SidebarMobileSurface({ mobileVariant, label, variant, ref, className, children, style, ...props }) {
+	const { side } = useSidebarSurface();
+	const { openMobile, setOpenMobile, sidebarId } = useSidebar();
+	const { activeTriggerRef, triggerRef, insetRef } = useSidebarElements();
+	function finalFocus() {
+		const trigger = activeTriggerRef.current ?? triggerRef.current;
+		return trigger?.isConnected && trigger.checkVisibility() ? trigger : insetRef.current;
+	}
+	const mobileContent = /* @__PURE__ */ jsx("div", {
+		ref,
+		id: sidebarId,
+		"data-control-ui": "sidebar",
+		"data-control-family": "sidebar",
+		"data-slot": "root",
+		"data-surface": "panel",
+		"data-variant": variant,
+		"data-mobile": "",
+		"data-side": side,
+		className: cn("flex min-h-0 flex-1 flex-col", className),
+		style,
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-control-ui": "sidebar",
+			"data-control-family": "sidebar",
+			"data-slot": "inner",
+			className: "flex min-h-0 flex-1 flex-col",
+			children
+		})
+	});
+	if (mobileVariant === "drawer") return /* @__PURE__ */ jsx(Drawer, {
+		open: openMobile,
+		onOpenChange: setOpenMobile,
+		children: /* @__PURE__ */ jsxs(DrawerContent, {
+			side: "bottom",
+			finalFocus,
+			className: "max-h-[85dvh]",
+			children: [
+				/* @__PURE__ */ jsx(DrawerHeader, {
+					className: "sr-only",
+					children: /* @__PURE__ */ jsx(DrawerTitle, { children: label })
+				}),
+				/* @__PURE__ */ jsx(DrawerBody, {
+					padding: "none",
+					children: mobileContent
+				}),
+				/* @__PURE__ */ jsx(DrawerFooter, { children: /* @__PURE__ */ jsx(DrawerClose, {
+					render: /* @__PURE__ */ jsx(Button, {
+						variant: "surface",
+						size: "lg"
+					}),
+					children: "Close menu"
+				}) })
+			]
+		})
+	});
+	const mobileSheetStyle = {
+		"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+		...style
+	};
+	return /* @__PURE__ */ jsx(Sheet, {
+		open: openMobile,
+		onOpenChange: setOpenMobile,
+		children: /* @__PURE__ */ jsxs(SheetContent, {
+			side,
+			finalFocus,
+			className: "w-(--sidebar-width) gap-0 p-0",
+			style: mobileSheetStyle,
+			children: [/* @__PURE__ */ jsx(SheetHeader, {
+				className: "sr-only",
+				children: /* @__PURE__ */ jsx(SheetTitle, { children: label })
+			}), mobileContent]
+		})
+	});
+}
 function SidebarTrigger({ className, onClick, size = "sm", label = "Toggle sidebar", ref, ...props }) {
 	const { toggleSidebar, isMobile, openMobile, open, keyboardShortcut, sidebarId } = useSidebar();
-	const { triggerRef, railRef } = useSidebarElements();
+	const { triggerRef, activeTriggerRef, railRef } = useSidebarElements();
 	const shortcutKey = keyboardShortcut?.toUpperCase();
 	return useRender({
 		defaultTagName: "button",
@@ -162,6 +209,7 @@ function SidebarTrigger({ className, onClick, size = "sm", label = "Toggle sideb
 			onClick: (event) => {
 				onClick?.(event);
 				if (event.defaultPrevented) return;
+				activeTriggerRef.current = event.currentTarget;
 				toggleSidebar();
 				if (isMobile || open) return;
 				const trigger = event.currentTarget;
@@ -229,7 +277,7 @@ function SidebarInset({ className, render, ref, ...props }) {
 			"data-control-ui": "sidebar",
 			"data-control-family": "sidebar",
 			"data-slot": "inset",
-			className: cn("relative flex min-w-0 w-full flex-1 flex-col", className)
+			className: cn("relative flex min-h-0 min-w-0 w-full flex-1 flex-col", className)
 		}
 	});
 }
@@ -252,11 +300,15 @@ function SidebarFooter({ className, ...props }) {
 	});
 }
 function SidebarContent({ className, children, ...props }) {
+	const { state, isMobile } = useSidebar();
+	const { collapsible } = useSidebarSurface();
+	const iconOnly = !isMobile && state === "collapsed" && collapsible === "icon";
 	return /* @__PURE__ */ jsx(ScrollArea, {
 		"data-control-ui": "sidebar",
 		"data-slot": "content",
 		className: cn("min-h-0 flex-1 group-data-[collapsible=icon]:overflow-hidden", className),
 		lockAxis: "x",
+		scrollbarGutter: iconOnly ? "auto" : void 0,
 		viewportClassName: "overscroll-y-contain",
 		...props,
 		children: /* @__PURE__ */ jsx("div", {
@@ -269,4 +321,4 @@ function SidebarContent({ className, children, ...props }) {
 	});
 }
 //#endregion
-export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarProvider, SidebarRail, SidebarTrigger, sidebarMenuButtonSizes, sidebarMenuButtonVariants, useSidebar };
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMobileNav, SidebarMobileNavItem, SidebarMobileTrigger, SidebarProvider, SidebarRail, SidebarTrigger, sidebarMenuButtonSizes, sidebarMenuButtonVariants, useSidebar };

package/dist/ui/toolbar.d.ts

@@ -3,10 +3,12 @@ import { Toolbar as Toolbar$1 } from "@base-ui/react/toolbar";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/toolbar.d.ts
 export type ToolbarVariant = "default" | "inverse" | "floating";
+export type ToolbarChrome = "standalone" | "embedded";
 export type ToolbarLinkVariant = "default" | "track";
 export type ToolbarProps = Omit<ComponentProps<"div">, "style"> & {
   orientation?: "horizontal" | "vertical";
   variant?: ToolbarVariant;
+  chrome?: ToolbarChrome;
   style?: CSSProperties & ToolbarKnobStyle;
 };
 export type ToolbarButtonProps = Omit<ComponentProps<"button">, "style"> & {
@@ -28,7 +30,7 @@ export type ToolbarSeparatorProps = Omit<ComponentProps<"div">, "style"> & {
 export type ToolbarInputProps = Omit<ComponentProps<"input">, "style"> & {
   style?: CSSProperties & ToolbarKnobStyle;
 };
-export declare function Toolbar({ orientation, variant, className, children, ...props }: ToolbarProps): import("react").JSX.Element;
+export declare function Toolbar({ orientation, variant, chrome, className, children, ...props }: ToolbarProps): import("react").JSX.Element;
 type RefinedToolbarButtonProps = ToolbarButtonProps & Pick<ComponentProps<typeof Toolbar$1.Button>, "render">;
 export declare function ToolbarButton({ iconOnly, className, ...props }: RefinedToolbarButtonProps): import("react").JSX.Element;
 type RefinedToolbarLinkProps = ToolbarLinkProps & Pick<ComponentProps<typeof Toolbar$1.Link>, "render">;

package/dist/ui/toolbar.js

@@ -3,13 +3,14 @@ import { cn } from "../lib/cn.js";
 import { Toolbar as Toolbar$1 } from "@base-ui/react/toolbar";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/toolbar.tsx
-function Toolbar({ orientation = "horizontal", variant = "default", className, children, ...props }) {
+function Toolbar({ orientation = "horizontal", variant = "default", chrome = "standalone", className, children, ...props }) {
 	return /* @__PURE__ */ jsxs(Toolbar$1.Root, {
 		orientation,
 		"data-control-ui": "toolbar",
 		"data-control-family": "toolbar",
 		"data-slot": "root",
 		"data-variant": variant,
+		"data-chrome": chrome,
 		className: cn("group/toolbar inline-flex", orientation === "vertical" ? "flex-col items-stretch" : "items-center", className),
 		...props,
 		children: [variant === "floating" && /* @__PURE__ */ jsx("div", {

package/dist/ui/typography.d.ts

@@ -14,7 +14,9 @@ declare const sizeClassNames: {
 };
 declare const toneClassNames: {
   readonly default: undefined;
+  readonly foreground: "text-foreground";
   readonly muted: "text-muted-foreground";
+  readonly primary: "text-primary-text";
   readonly destructive: "text-destructive-text";
 };
 declare const weightClassNames: {
@@ -29,10 +31,11 @@ export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 export type HeadingProps = ComponentProps<"h1"> & {
   level: HeadingLevel;
   size?: TypeSize;
+  weight?: TextWeight;
   tone?: TypeTone;
 };
-export declare function Heading({ level, size, tone, className, ...props }: HeadingProps): import("react").JSX.Element;
-export type TextTag = "p" | "span" | "div" | "small" | "strong" | "em" | "li" | "dt" | "dd" | "figcaption" | "legend" | "blockquote";
+export declare function Heading({ level, size, weight, tone, className, ...props }: HeadingProps): import("react").JSX.Element;
+export type TextTag = "p" | "span" | "div" | "small" | "strong" | "em" | "code" | "li" | "dt" | "dd" | "figcaption" | "legend" | "blockquote";
 export type TextProps = HTMLAttributes<HTMLElement> & {
   ref?: Ref<HTMLElement>;
   as?: TextTag;

package/dist/ui/typography.js

@@ -15,7 +15,9 @@ const sizeClassNames = {
 };
 const toneClassNames = {
 	default: void 0,
+	foreground: "text-foreground",
 	muted: "text-muted-foreground",
+	primary: "text-primary-text",
 	destructive: "text-destructive-text"
 };
 const weightClassNames = {
@@ -31,13 +33,13 @@ const headingSizeByLevel = {
 	5: "heading-4",
 	6: "heading-4"
 };
-function Heading({ level, size = headingSizeByLevel[level], tone = "default", className, ...props }) {
+function Heading({ level, size = headingSizeByLevel[level], weight, tone = "default", className, ...props }) {
 	const Tag = `h${level}`;
 	return /* @__PURE__ */ jsx(Tag, {
 		"data-control-ui": "typography",
 		"data-control-family": "typography",
 		"data-slot": "heading",
-		className: cn(sizeClassNames[size], toneClassNames[tone], className),
+		className: cn(sizeClassNames[size], weight ? weightClassNames[weight] : void 0, toneClassNames[tone], className),
 		...props
 	});
 }
@@ -47,7 +49,7 @@ function attachRef(ref, node) {
 }
 function Text({ as: Tag = "span", size = "body", weight, tone = "default", className, ref, ...props }) {
 	return /* @__PURE__ */ jsx(Tag, {
-		ref: (node) => attachRef(ref, node),
+		ref: ref ? (node) => attachRef(ref, node) : void 0,
 		"data-control-ui": "typography",
 		"data-control-family": "typography",
 		"data-slot": "text",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctrl-ui/react",
-  "version": "0.8.19",
+  "version": "0.8.21",
   "description": "Control UI components, blocks, and primitives with neutral defaults and consumer-owned themes.",
   "license": "MIT",
   "repository": {
@@ -45,6 +45,7 @@
     "@tiptap/pm": "3.31.4",
     "@tiptap/react": "3.31.4",
     "@tiptap/starter-kit": "3.31.4",
+    "@xyflow/react": "^12.12.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
@@ -100,6 +101,9 @@
     "@tiptap/starter-kit": {
       "optional": true
     },
+    "@xyflow/react": {
+      "optional": true
+    },
     "cmdk": {
       "optional": true
     },

package/dist/environment-variables.d.ts

@@ -1,125 +0,0 @@
-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
-export type EnvironmentVariablesRowErrors = Record<number, {
-  key?: ReactNode;
-  value?: ReactNode;
-}>;
-export type EnvironmentVariablesSubmitPayload<TRow extends EnvironmentVariableRow = EnvironmentVariableRow> = {
-  rows: TRow[];
-  variables: Record<string, string>;
-  envFileText: string;
-  reset: () => void;
-};
-export 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;
-  revealValueLabel?: (key: string) => string;
-  onSubmit?: (payload: EnvironmentVariablesSubmitPayload<TRow>) => void | Promise<void>;
-} & {
-  style?: CSSProperties & EnvironmentVariablesKnobStyle;
-};
-export declare function EnvironmentVariablesRoot<TRow extends EnvironmentVariableRow = EnvironmentVariableRow>({ editor, disabled, readOnly, rowErrors, keyLabel, valueLabel, keyPlaceholder, valuePlaceholder, duplicateKeyMessage, revealValueLabel, onSubmit, className, children, ...props }: EnvironmentVariablesRootProps<TRow>): import("react").JSX.Element;
-export 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;
-export type EnvironmentVariablesHeaderProps = ComponentProps<"div"> & {
-  title?: ReactNode;
-  description?: ReactNode;
-} & {
-  style?: CSSProperties & EnvironmentVariablesKnobStyle;
-};
-export declare function EnvironmentVariablesHeader({ title, description, className, children, ...props }: EnvironmentVariablesHeaderProps): import("react").JSX.Element | null;
-export type EnvironmentVariablesToolbarProps = ComponentProps<"div"> & {
-  style?: CSSProperties & EnvironmentVariablesKnobStyle;
-};
-export declare function EnvironmentVariablesToolbar({ className, children, ...props }: EnvironmentVariablesToolbarProps): import("react").JSX.Element | null;
-export type EnvironmentVariablesUploadButtonProps = ComponentProps<typeof Button> & {
-  inputLabel?: string;
-};
-export declare function EnvironmentVariablesUploadButton({ inputLabel, children, variant, size, disabled, onClick, ...props }: EnvironmentVariablesUploadButtonProps): import("react").JSX.Element;
-export type EnvironmentVariablesRowsProps = ComponentProps<"div"> & {
-  rowErrors?: EnvironmentVariablesRowErrors;
-} & {
-  style?: CSSProperties & EnvironmentVariablesKnobStyle;
-};
-export declare function EnvironmentVariablesRows({ rowErrors, className, children, ...props }: EnvironmentVariablesRowsProps): import("react").JSX.Element;
-export type EnvironmentVariablesRowProps = Omit<ComponentProps<"div">, "children"> & {
-  row: EnvironmentVariableRow;
-  index: number;
-  rowErrors?: EnvironmentVariablesRowErrors;
-} & {
-  style?: CSSProperties & EnvironmentVariablesKnobStyle;
-};
-export declare function EnvironmentVariablesRow({ row, index, rowErrors, className, ...props }: EnvironmentVariablesRowProps): import("react").JSX.Element;
-export type EnvironmentVariablesAddButtonProps = ComponentProps<typeof Button>;
-export declare function EnvironmentVariablesAddButton({ children, variant, size, disabled, onClick, ...props }: EnvironmentVariablesAddButtonProps): import("react").JSX.Element | null;
-export type EnvironmentVariablesResetButtonProps = ComponentProps<typeof Button>;
-export declare function EnvironmentVariablesResetButton({ children, variant, size, disabled, onClick, ...props }: EnvironmentVariablesResetButtonProps): import("react").JSX.Element | null;
-export type EnvironmentVariablesSubmitButtonProps = ComponentProps<typeof Button>;
-export declare function EnvironmentVariablesSubmitButton({ children, variant, tone, size, disabled, ...props }: EnvironmentVariablesSubmitButtonProps): import("react").JSX.Element | null;
-export type EnvironmentVariablesActionsProps = ComponentProps<"div"> & {
-  style?: CSSProperties & EnvironmentVariablesKnobStyle;
-};
-export declare function EnvironmentVariablesActions({ className, ...props }: EnvironmentVariablesActionsProps): import("react").JSX.Element;
-export type EnvironmentVariablesMessageProps = Omit<ComponentProps<"div">, "style"> & {
-  error?: ReactNode;
-  style?: CSSProperties & EnvironmentVariablesKnobStyle;
-};
-export declare function EnvironmentVariablesMessage({ error, className, children, ...props }: EnvironmentVariablesMessageProps): import("react").JSX.Element | null;
-export type EnvironmentVariablesDuplicateKeysErrorProps = Omit<EnvironmentVariablesMessageProps, "error"> & {
-  message?: ReactNode;
-};
-export declare function EnvironmentVariablesDuplicateKeysError({ message, ...props }: EnvironmentVariablesDuplicateKeysErrorProps): import("react").JSX.Element | null;
-export type EnvironmentVariablesUploadErrorProps = Omit<EnvironmentVariablesMessageProps, "error">;
-export declare function EnvironmentVariablesUploadError(props: EnvironmentVariablesUploadErrorProps): import("react").JSX.Element;
-export type EnvironmentVariablesReadOnlyListProps = ComponentProps<"div"> & {
-  rows?: readonly EnvironmentVariableRow[];
-  emptyMessage?: ReactNode;
-} & {
-  style?: CSSProperties & EnvironmentVariablesKnobStyle;
-};
-export declare function EnvironmentVariablesReadOnlyList({ rows, emptyMessage, className, children, ...props }: EnvironmentVariablesReadOnlyListProps): import("react").JSX.Element;
-export type EnvironmentVariablesReadOnlyItemProps = Omit<ComponentProps<"div">, "style"> & {
-  name: ReactNode;
-  value?: ReactNode;
-  revealed?: boolean;
-  hiddenValueLabel?: string;
-  style?: CSSProperties & EnvironmentVariablesKnobStyle;
-};
-export declare function EnvironmentVariablesReadOnlyItem({ name, value, revealed, hiddenValueLabel, className, ...props }: EnvironmentVariablesReadOnlyItemProps): import("react").JSX.Element;
-export 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