@sero-ai/ui 0.3.0 → 0.3.2

package/dist/components/ai-elements/conversation.js

@@ -0,0 +1,124 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../ui/button";
+import { cn } from "../../lib/utils";
+import { ArrowDownIcon, DownloadIcon } from "lucide-react";
+import { useCallback } from "react";
+import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
+const Conversation = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  StickToBottom,
+  {
+    className: cn("relative flex-1 overflow-y-hidden", className),
+    initial: "smooth",
+    resize: "smooth",
+    role: "log",
+    ...props
+  }
+);
+const ConversationContent = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  StickToBottom.Content,
+  {
+    className: cn("flex flex-col gap-8 p-4", className),
+    ...props
+  }
+);
+const ConversationEmptyState = ({
+  className,
+  title = "No messages yet",
+  description = "Start a conversation to see messages here",
+  icon,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex size-full flex-col items-center justify-center gap-3 p-8 text-center",
+      className
+    ),
+    ...props,
+    children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+      icon && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: icon }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx("h3", { className: "font-medium text-sm", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: description })
+      ] })
+    ] })
+  }
+);
+const ConversationScrollButton = ({
+  className,
+  ...props
+}) => {
+  const { isAtBottom, scrollToBottom } = useStickToBottomContext();
+  const handleScrollToBottom = useCallback(() => {
+    scrollToBottom();
+  }, [scrollToBottom]);
+  return !isAtBottom && /* @__PURE__ */ jsx(
+    Button,
+    {
+      className: cn(
+        "absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full dark:bg-background dark:hover:bg-muted",
+        className
+      ),
+      onClick: handleScrollToBottom,
+      size: "icon",
+      type: "button",
+      variant: "outline",
+      ...props,
+      children: /* @__PURE__ */ jsx(ArrowDownIcon, { className: "size-4" })
+    }
+  );
+};
+const defaultFormatMessage = (message) => {
+  const roleLabel = message.role.charAt(0).toUpperCase() + message.role.slice(1);
+  return `**${roleLabel}:** ${message.content}`;
+};
+const messagesToMarkdown = (messages, formatMessage = defaultFormatMessage) => messages.map((msg, i) => formatMessage(msg, i)).join("\n\n");
+const ConversationDownload = ({
+  messages,
+  filename = "conversation.md",
+  formatMessage = defaultFormatMessage,
+  className,
+  children,
+  ...props
+}) => {
+  const handleDownload = useCallback(() => {
+    const markdown = messagesToMarkdown(messages, formatMessage);
+    const blob = new Blob([markdown], { type: "text/markdown" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = filename;
+    document.body.append(link);
+    link.click();
+    link.remove();
+    URL.revokeObjectURL(url);
+  }, [messages, filename, formatMessage]);
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      className: cn(
+        "absolute top-4 right-4 rounded-full dark:bg-background dark:hover:bg-muted",
+        className
+      ),
+      onClick: handleDownload,
+      size: "icon",
+      type: "button",
+      variant: "outline",
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(DownloadIcon, { className: "size-4" })
+    }
+  );
+};
+export {
+  Conversation,
+  ConversationContent,
+  ConversationDownload,
+  ConversationEmptyState,
+  ConversationScrollButton,
+  messagesToMarkdown
+};

package/dist/components/ai-elements/edge.cjs

@@ -0,0 +1,116 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }var _jsxruntime = require('react/jsx-runtime');
+
+
+
+
+
+
+var _react = require('@xyflow/react');
+const Temporary = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition
+}) => {
+  const [edgePath] = _react.getSimpleBezierPath.call(void 0, {
+    sourcePosition,
+    sourceX,
+    sourceY,
+    targetPosition,
+    targetX,
+    targetY
+  });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _react.BaseEdge,
+    {
+      className: "stroke-1 stroke-ring",
+      id,
+      path: edgePath,
+      style: {
+        strokeDasharray: "5, 5"
+      }
+    }
+  );
+};
+const getHandleCoordsByPosition = (node, handlePosition) => {
+  const handleType = handlePosition === _react.Position.Left ? "target" : "source";
+  const handle = _optionalChain([node, 'access', _ => _.internals, 'access', _2 => _2.handleBounds, 'optionalAccess', _3 => _3[handleType], 'optionalAccess', _4 => _4.find, 'call', _5 => _5(
+    (h) => h.position === handlePosition
+  )]);
+  if (!handle) {
+    return [0, 0];
+  }
+  let offsetX = handle.width / 2;
+  let offsetY = handle.height / 2;
+  switch (handlePosition) {
+    case _react.Position.Left: {
+      offsetX = 0;
+      break;
+    }
+    case _react.Position.Right: {
+      offsetX = handle.width;
+      break;
+    }
+    case _react.Position.Top: {
+      offsetY = 0;
+      break;
+    }
+    case _react.Position.Bottom: {
+      offsetY = handle.height;
+      break;
+    }
+    default: {
+      throw new Error(`Invalid handle position: ${handlePosition}`);
+    }
+  }
+  const x = node.internals.positionAbsolute.x + handle.x + offsetX;
+  const y = node.internals.positionAbsolute.y + handle.y + offsetY;
+  return [x, y];
+};
+const getEdgeParams = (source, target) => {
+  const sourcePos = _react.Position.Right;
+  const [sx, sy] = getHandleCoordsByPosition(source, sourcePos);
+  const targetPos = _react.Position.Left;
+  const [tx, ty] = getHandleCoordsByPosition(target, targetPos);
+  return {
+    sourcePos,
+    sx,
+    sy,
+    targetPos,
+    tx,
+    ty
+  };
+};
+const Animated = ({ id, source, target, markerEnd, style }) => {
+  const sourceNode = _react.useInternalNode.call(void 0, source);
+  const targetNode = _react.useInternalNode.call(void 0, target);
+  if (!(sourceNode && targetNode)) {
+    return null;
+  }
+  const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(
+    sourceNode,
+    targetNode
+  );
+  const [edgePath] = _react.getBezierPath.call(void 0, {
+    sourcePosition: sourcePos,
+    sourceX: sx,
+    sourceY: sy,
+    targetPosition: targetPos,
+    targetX: tx,
+    targetY: ty
+  });
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.BaseEdge, { id, markerEnd, path: edgePath, style }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { fill: "var(--primary)", r: "4", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "animateMotion", { dur: "2s", path: edgePath, repeatCount: "indefinite" }) })
+  ] });
+};
+const Edge = {
+  Animated,
+  Temporary
+};
+
+
+exports.Edge = Edge;

package/dist/components/ai-elements/edge.d.cts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { EdgeProps } from '@xyflow/react';
+
+declare const Edge: {
+    Animated: ({ id, source, target, markerEnd, style }: EdgeProps) => react_jsx_runtime.JSX.Element | null;
+    Temporary: ({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, }: EdgeProps) => react_jsx_runtime.JSX.Element;
+};
+
+export { Edge };

package/dist/components/ai-elements/edge.d.ts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { EdgeProps } from '@xyflow/react';
+
+declare const Edge: {
+    Animated: ({ id, source, target, markerEnd, style }: EdgeProps) => react_jsx_runtime.JSX.Element | null;
+    Temporary: ({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, }: EdgeProps) => react_jsx_runtime.JSX.Element;
+};
+
+export { Edge };

package/dist/components/ai-elements/edge.js

@@ -0,0 +1,116 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  BaseEdge,
+  getBezierPath,
+  getSimpleBezierPath,
+  Position,
+  useInternalNode
+} from "@xyflow/react";
+const Temporary = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition
+}) => {
+  const [edgePath] = getSimpleBezierPath({
+    sourcePosition,
+    sourceX,
+    sourceY,
+    targetPosition,
+    targetX,
+    targetY
+  });
+  return /* @__PURE__ */ jsx(
+    BaseEdge,
+    {
+      className: "stroke-1 stroke-ring",
+      id,
+      path: edgePath,
+      style: {
+        strokeDasharray: "5, 5"
+      }
+    }
+  );
+};
+const getHandleCoordsByPosition = (node, handlePosition) => {
+  const handleType = handlePosition === Position.Left ? "target" : "source";
+  const handle = node.internals.handleBounds?.[handleType]?.find(
+    (h) => h.position === handlePosition
+  );
+  if (!handle) {
+    return [0, 0];
+  }
+  let offsetX = handle.width / 2;
+  let offsetY = handle.height / 2;
+  switch (handlePosition) {
+    case Position.Left: {
+      offsetX = 0;
+      break;
+    }
+    case Position.Right: {
+      offsetX = handle.width;
+      break;
+    }
+    case Position.Top: {
+      offsetY = 0;
+      break;
+    }
+    case Position.Bottom: {
+      offsetY = handle.height;
+      break;
+    }
+    default: {
+      throw new Error(`Invalid handle position: ${handlePosition}`);
+    }
+  }
+  const x = node.internals.positionAbsolute.x + handle.x + offsetX;
+  const y = node.internals.positionAbsolute.y + handle.y + offsetY;
+  return [x, y];
+};
+const getEdgeParams = (source, target) => {
+  const sourcePos = Position.Right;
+  const [sx, sy] = getHandleCoordsByPosition(source, sourcePos);
+  const targetPos = Position.Left;
+  const [tx, ty] = getHandleCoordsByPosition(target, targetPos);
+  return {
+    sourcePos,
+    sx,
+    sy,
+    targetPos,
+    tx,
+    ty
+  };
+};
+const Animated = ({ id, source, target, markerEnd, style }) => {
+  const sourceNode = useInternalNode(source);
+  const targetNode = useInternalNode(target);
+  if (!(sourceNode && targetNode)) {
+    return null;
+  }
+  const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(
+    sourceNode,
+    targetNode
+  );
+  const [edgePath] = getBezierPath({
+    sourcePosition: sourcePos,
+    sourceX: sx,
+    sourceY: sy,
+    targetPosition: targetPos,
+    targetX: tx,
+    targetY: ty
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(BaseEdge, { id, markerEnd, path: edgePath, style }),
+    /* @__PURE__ */ jsx("circle", { fill: "var(--primary)", r: "4", children: /* @__PURE__ */ jsx("animateMotion", { dur: "2s", path: edgePath, repeatCount: "indefinite" }) })
+  ] });
+};
+const Edge = {
+  Animated,
+  Temporary
+};
+export {
+  Edge
+};

package/dist/components/ai-elements/environment-variables.cjs

@@ -0,0 +1,227 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
+var _jsxruntime = require('react/jsx-runtime');
+var _badge = require('../ui/badge');
+var _button = require('../ui/button');
+var _switch = require('../ui/switch');
+var _utils = require('../../lib/utils');
+var _lucidereact = require('lucide-react');
+
+
+
+
+
+
+
+
+var _react = require('react');
+const noop = () => {
+};
+const EnvironmentVariablesContext = _react.createContext.call(void 0, {
+  setShowValues: noop,
+  showValues: false
+});
+const EnvironmentVariables = ({
+  showValues: controlledShowValues,
+  defaultShowValues = false,
+  onShowValuesChange,
+  className,
+  children,
+  ...props
+}) => {
+  const [internalShowValues, setInternalShowValues] = _react.useState.call(void 0, defaultShowValues);
+  const showValues = _nullishCoalesce(controlledShowValues, () => ( internalShowValues));
+  const setShowValues = _react.useCallback.call(void 0, 
+    (show) => {
+      setInternalShowValues(show);
+      _optionalChain([onShowValuesChange, 'optionalCall', _ => _(show)]);
+    },
+    [onShowValuesChange]
+  );
+  const contextValue = _react.useMemo.call(void 0, 
+    () => ({ setShowValues, showValues }),
+    [setShowValues, showValues]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EnvironmentVariablesContext.Provider, { value: contextValue, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: _utils.cn.call(void 0, "rounded-lg border bg-background", className),
+      ...props,
+      children
+    }
+  ) });
+};
+const EnvironmentVariablesHeader = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "div",
+  {
+    className: _utils.cn.call(void 0, 
+      "flex items-center justify-between border-b px-4 py-3",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+const EnvironmentVariablesTitle = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: _utils.cn.call(void 0, "font-medium text-sm", className), ...props, children: _nullishCoalesce(children, () => ( "Environment Variables")) });
+const EnvironmentVariablesToggle = ({
+  className,
+  ...props
+}) => {
+  const { showValues, setShowValues } = _react.use.call(void 0, EnvironmentVariablesContext);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _utils.cn.call(void 0, "flex items-center gap-2", className), children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-muted-foreground text-xs", children: showValues ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.EyeIcon, { size: 14 }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.EyeOffIcon, { size: 14 }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _switch.Switch,
+      {
+        "aria-label": "Toggle value visibility",
+        checked: showValues,
+        onCheckedChange: setShowValues,
+        ...props
+      }
+    )
+  ] });
+};
+const EnvironmentVariablesContent = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _utils.cn.call(void 0, "divide-y", className), ...props, children });
+const EnvironmentVariableContext = _react.createContext.call(void 0, {
+  name: "",
+  value: ""
+});
+const EnvironmentVariable = ({
+  name,
+  value,
+  className,
+  children,
+  ...props
+}) => {
+  const envVarContextValue = _react.useMemo.call(void 0, () => ({ name, value }), [name, value]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EnvironmentVariableContext.Provider, { value: envVarContextValue, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: _utils.cn.call(void 0, 
+        "flex items-center justify-between gap-4 px-4 py-3",
+        className
+      ),
+      ...props,
+      children: _nullishCoalesce(children, () => ( /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center gap-2", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EnvironmentVariableName, {}) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EnvironmentVariableValue, {})
+      ] })))
+    }
+  ) });
+};
+const EnvironmentVariableGroup = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _utils.cn.call(void 0, "flex items-center gap-2", className), ...props, children });
+const EnvironmentVariableName = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { name } = _react.use.call(void 0, EnvironmentVariableContext);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _utils.cn.call(void 0, "font-mono text-sm", className), ...props, children: _nullishCoalesce(children, () => ( name)) });
+};
+const EnvironmentVariableValue = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { value } = _react.use.call(void 0, EnvironmentVariableContext);
+  const { showValues } = _react.use.call(void 0, EnvironmentVariablesContext);
+  const displayValue = showValues ? value : "\u2022".repeat(Math.min(value.length, 20));
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "span",
+    {
+      className: _utils.cn.call(void 0, 
+        "font-mono text-muted-foreground text-sm",
+        !showValues && "select-none",
+        className
+      ),
+      ...props,
+      children: _nullishCoalesce(children, () => ( displayValue))
+    }
+  );
+};
+const EnvironmentVariableCopyButton = ({
+  onCopy,
+  onError,
+  timeout = 2e3,
+  copyFormat = "value",
+  children,
+  className,
+  ...props
+}) => {
+  const [isCopied, setIsCopied] = _react.useState.call(void 0, false);
+  const timeoutRef = _react.useRef.call(void 0, 0);
+  const { name, value } = _react.use.call(void 0, EnvironmentVariableContext);
+  const getTextToCopy = _react.useCallback.call(void 0, () => {
+    const formatMap = {
+      export: () => `export ${name}="${value}"`,
+      name: () => name,
+      value: () => value
+    };
+    return formatMap[copyFormat]();
+  }, [name, value, copyFormat]);
+  const copyToClipboard = _react.useCallback.call(void 0, async () => {
+    if (typeof window === "undefined" || !_optionalChain([navigator, 'optionalAccess', _2 => _2.clipboard, 'optionalAccess', _3 => _3.writeText])) {
+      _optionalChain([onError, 'optionalCall', _4 => _4(new Error("Clipboard API not available"))]);
+      return;
+    }
+    try {
+      await navigator.clipboard.writeText(getTextToCopy());
+      setIsCopied(true);
+      _optionalChain([onCopy, 'optionalCall', _5 => _5()]);
+      timeoutRef.current = window.setTimeout(() => setIsCopied(false), timeout);
+    } catch (error) {
+      _optionalChain([onError, 'optionalCall', _6 => _6(error)]);
+    }
+  }, [getTextToCopy, onCopy, onError, timeout]);
+  _react.useEffect.call(void 0, 
+    () => () => {
+      window.clearTimeout(timeoutRef.current);
+    },
+    []
+  );
+  const Icon = isCopied ? _lucidereact.CheckIcon : _lucidereact.CopyIcon;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _button.Button,
+    {
+      className: _utils.cn.call(void 0, "size-6 shrink-0", className),
+      onClick: copyToClipboard,
+      size: "icon",
+      variant: "ghost",
+      ...props,
+      children: _nullishCoalesce(children, () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { size: 12 })))
+    }
+  );
+};
+const EnvironmentVariableRequired = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _badge.Badge, { className: _utils.cn.call(void 0, "text-xs", className), variant: "secondary", ...props, children: _nullishCoalesce(children, () => ( "Required")) });
+
+
+
+
+
+
+
+
+
+
+
+
+exports.EnvironmentVariable = EnvironmentVariable; exports.EnvironmentVariableCopyButton = EnvironmentVariableCopyButton; exports.EnvironmentVariableGroup = EnvironmentVariableGroup; exports.EnvironmentVariableName = EnvironmentVariableName; exports.EnvironmentVariableRequired = EnvironmentVariableRequired; exports.EnvironmentVariableValue = EnvironmentVariableValue; exports.EnvironmentVariables = EnvironmentVariables; exports.EnvironmentVariablesContent = EnvironmentVariablesContent; exports.EnvironmentVariablesHeader = EnvironmentVariablesHeader; exports.EnvironmentVariablesTitle = EnvironmentVariablesTitle; exports.EnvironmentVariablesToggle = EnvironmentVariablesToggle;

package/dist/components/ai-elements/environment-variables.d.cts

@@ -0,0 +1,45 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLAttributes, ComponentProps } from 'react';
+import { Badge } from '../ui/badge.cjs';
+import { Button } from '../ui/button.cjs';
+import { Switch } from '../ui/switch.cjs';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import 'radix-ui';
+
+type EnvironmentVariablesProps = HTMLAttributes<HTMLDivElement> & {
+    showValues?: boolean;
+    defaultShowValues?: boolean;
+    onShowValuesChange?: (show: boolean) => void;
+};
+declare const EnvironmentVariables: ({ showValues: controlledShowValues, defaultShowValues, onShowValuesChange, className, children, ...props }: EnvironmentVariablesProps) => react_jsx_runtime.JSX.Element;
+type EnvironmentVariablesHeaderProps = HTMLAttributes<HTMLDivElement>;
+declare const EnvironmentVariablesHeader: ({ className, children, ...props }: EnvironmentVariablesHeaderProps) => react_jsx_runtime.JSX.Element;
+type EnvironmentVariablesTitleProps = HTMLAttributes<HTMLHeadingElement>;
+declare const EnvironmentVariablesTitle: ({ className, children, ...props }: EnvironmentVariablesTitleProps) => react_jsx_runtime.JSX.Element;
+type EnvironmentVariablesToggleProps = ComponentProps<typeof Switch>;
+declare const EnvironmentVariablesToggle: ({ className, ...props }: EnvironmentVariablesToggleProps) => react_jsx_runtime.JSX.Element;
+type EnvironmentVariablesContentProps = HTMLAttributes<HTMLDivElement>;
+declare const EnvironmentVariablesContent: ({ className, children, ...props }: EnvironmentVariablesContentProps) => react_jsx_runtime.JSX.Element;
+type EnvironmentVariableProps = HTMLAttributes<HTMLDivElement> & {
+    name: string;
+    value: string;
+};
+declare const EnvironmentVariable: ({ name, value, className, children, ...props }: EnvironmentVariableProps) => react_jsx_runtime.JSX.Element;
+type EnvironmentVariableGroupProps = HTMLAttributes<HTMLDivElement>;
+declare const EnvironmentVariableGroup: ({ className, children, ...props }: EnvironmentVariableGroupProps) => react_jsx_runtime.JSX.Element;
+type EnvironmentVariableNameProps = HTMLAttributes<HTMLSpanElement>;
+declare const EnvironmentVariableName: ({ className, children, ...props }: EnvironmentVariableNameProps) => react_jsx_runtime.JSX.Element;
+type EnvironmentVariableValueProps = HTMLAttributes<HTMLSpanElement>;
+declare const EnvironmentVariableValue: ({ className, children, ...props }: EnvironmentVariableValueProps) => react_jsx_runtime.JSX.Element;
+type EnvironmentVariableCopyButtonProps = ComponentProps<typeof Button> & {
+    onCopy?: () => void;
+    onError?: (error: Error) => void;
+    timeout?: number;
+    copyFormat?: "name" | "value" | "export";
+};
+declare const EnvironmentVariableCopyButton: ({ onCopy, onError, timeout, copyFormat, children, className, ...props }: EnvironmentVariableCopyButtonProps) => react_jsx_runtime.JSX.Element;
+type EnvironmentVariableRequiredProps = ComponentProps<typeof Badge>;
+declare const EnvironmentVariableRequired: ({ className, children, ...props }: EnvironmentVariableRequiredProps) => react_jsx_runtime.JSX.Element;
+
+export { EnvironmentVariable, EnvironmentVariableCopyButton, type EnvironmentVariableCopyButtonProps, EnvironmentVariableGroup, type EnvironmentVariableGroupProps, EnvironmentVariableName, type EnvironmentVariableNameProps, type EnvironmentVariableProps, EnvironmentVariableRequired, type EnvironmentVariableRequiredProps, EnvironmentVariableValue, type EnvironmentVariableValueProps, EnvironmentVariables, EnvironmentVariablesContent, type EnvironmentVariablesContentProps, EnvironmentVariablesHeader, type EnvironmentVariablesHeaderProps, type EnvironmentVariablesProps, EnvironmentVariablesTitle, type EnvironmentVariablesTitleProps, EnvironmentVariablesToggle, type EnvironmentVariablesToggleProps };