@sero-ai/ui 0.3.0 → 0.3.2

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

@@ -0,0 +1,45 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLAttributes, ComponentProps } from 'react';
+import { Badge } from '../ui/badge.js';
+import { Button } from '../ui/button.js';
+import { Switch } from '../ui/switch.js';
+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 };

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

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

package/dist/components/ai-elements/file-tree.cjs

@@ -0,0 +1,217 @@
+"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 _collapsible = require('../ui/collapsible');
+var _utils = require('../../lib/utils');
+
+
+
+
+
+var _lucidereact = require('lucide-react');
+
+
+
+
+
+
+var _react = require('react');
+const noop = () => {
+};
+const FileTreeContext = _react.createContext.call(void 0, {
+  // oxlint-disable-next-line eslint-plugin-unicorn(no-new-builtin)
+  expandedPaths: /* @__PURE__ */ new Set(),
+  togglePath: noop
+});
+const FileTree = ({
+  expanded: controlledExpanded,
+  defaultExpanded = /* @__PURE__ */ new Set(),
+  selectedPath,
+  onSelect,
+  onExpandedChange,
+  className,
+  children,
+  ...props
+}) => {
+  const [internalExpanded, setInternalExpanded] = _react.useState.call(void 0, defaultExpanded);
+  const expandedPaths = _nullishCoalesce(controlledExpanded, () => ( internalExpanded));
+  const togglePath = _react.useCallback.call(void 0, 
+    (path) => {
+      const newExpanded = new Set(expandedPaths);
+      if (newExpanded.has(path)) {
+        newExpanded.delete(path);
+      } else {
+        newExpanded.add(path);
+      }
+      setInternalExpanded(newExpanded);
+      _optionalChain([onExpandedChange, 'optionalCall', _ => _(newExpanded)]);
+    },
+    [expandedPaths, onExpandedChange]
+  );
+  const contextValue = _react.useMemo.call(void 0, 
+    () => ({ expandedPaths, onSelect, selectedPath, togglePath }),
+    [expandedPaths, onSelect, selectedPath, togglePath]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FileTreeContext.Provider, { value: contextValue, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: _utils.cn.call(void 0, 
+        "rounded-lg border bg-background font-mono text-sm",
+        className
+      ),
+      role: "tree",
+      ...props,
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "p-2", children })
+    }
+  ) });
+};
+const FileTreeFolderContext = _react.createContext.call(void 0, {
+  isExpanded: false,
+  name: "",
+  path: ""
+});
+const FileTreeFolder = ({
+  path,
+  name,
+  className,
+  children,
+  ...props
+}) => {
+  const { expandedPaths, togglePath, selectedPath, onSelect } = _react.use.call(void 0, FileTreeContext);
+  const isExpanded = expandedPaths.has(path);
+  const isSelected = selectedPath === path;
+  const handleOpenChange = _react.useCallback.call(void 0, () => {
+    togglePath(path);
+  }, [togglePath, path]);
+  const handleSelect = _react.useCallback.call(void 0, () => {
+    _optionalChain([onSelect, 'optionalCall', _2 => _2(path)]);
+  }, [onSelect, path]);
+  const folderContextValue = _react.useMemo.call(void 0, 
+    () => ({ isExpanded, name, path }),
+    [isExpanded, name, path]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FileTreeFolderContext.Provider, { value: folderContextValue, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _collapsible.Collapsible, { onOpenChange: handleOpenChange, open: isExpanded, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      className: _utils.cn.call(void 0, "", className),
+      role: "treeitem",
+      tabIndex: 0,
+      ...props,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _collapsible.CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          "button",
+          {
+            className: _utils.cn.call(void 0, 
+              "flex w-full items-center gap-1 rounded px-2 py-1 text-left transition-colors hover:bg-muted/50",
+              isSelected && "bg-muted"
+            ),
+            onClick: handleSelect,
+            type: "button",
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                _lucidereact.ChevronRightIcon,
+                {
+                  className: _utils.cn.call(void 0, 
+                    "size-4 shrink-0 text-muted-foreground transition-transform",
+                    isExpanded && "rotate-90"
+                  )
+                }
+              ),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FileTreeIcon, { children: isExpanded ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.FolderOpenIcon, { className: "size-4 text-blue-500" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.FolderIcon, { className: "size-4 text-blue-500" }) }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FileTreeName, { children: name })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _collapsible.CollapsibleContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "ml-4 border-l pl-2", children }) })
+      ]
+    }
+  ) }) });
+};
+const FileTreeFileContext = _react.createContext.call(void 0, {
+  name: "",
+  path: ""
+});
+const FileTreeFile = ({
+  path,
+  name,
+  icon,
+  className,
+  children,
+  ...props
+}) => {
+  const { selectedPath, onSelect } = _react.use.call(void 0, FileTreeContext);
+  const isSelected = selectedPath === path;
+  const handleClick = _react.useCallback.call(void 0, () => {
+    _optionalChain([onSelect, 'optionalCall', _3 => _3(path)]);
+  }, [onSelect, path]);
+  const handleKeyDown = _react.useCallback.call(void 0, 
+    (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        _optionalChain([onSelect, 'optionalCall', _4 => _4(path)]);
+      }
+    },
+    [onSelect, path]
+  );
+  const fileContextValue = _react.useMemo.call(void 0, () => ({ name, path }), [name, path]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FileTreeFileContext.Provider, { value: fileContextValue, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: _utils.cn.call(void 0, 
+        "flex cursor-pointer items-center gap-1 rounded px-2 py-1 transition-colors hover:bg-muted/50",
+        isSelected && "bg-muted",
+        className
+      ),
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      role: "treeitem",
+      tabIndex: 0,
+      ...props,
+      children: _nullishCoalesce(children, () => ( /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "size-4" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FileTreeIcon, { children: _nullishCoalesce(icon, () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.FileIcon, { className: "size-4 text-muted-foreground" }))) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FileTreeName, { children: name })
+      ] })))
+    }
+  ) });
+};
+const FileTreeIcon = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _utils.cn.call(void 0, "shrink-0", className), ...props, children });
+const FileTreeName = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _utils.cn.call(void 0, "truncate", className), ...props, children });
+const stopPropagation = (e) => e.stopPropagation();
+const FileTreeActions = ({
+  className,
+  children,
+  ...props
+}) => (
+  // biome-ignore lint/a11y/noNoninteractiveElementInteractions: stopPropagation required for nested interactions
+  // biome-ignore lint/a11y/useSemanticElements: fieldset doesn't fit this UI pattern
+  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: _utils.cn.call(void 0, "ml-auto flex items-center gap-1", className),
+      onClick: stopPropagation,
+      onKeyDown: stopPropagation,
+      role: "group",
+      ...props,
+      children
+    }
+  )
+);
+
+
+
+
+
+
+
+exports.FileTree = FileTree; exports.FileTreeActions = FileTreeActions; exports.FileTreeFile = FileTreeFile; exports.FileTreeFolder = FileTreeFolder; exports.FileTreeIcon = FileTreeIcon; exports.FileTreeName = FileTreeName;

package/dist/components/ai-elements/file-tree.d.cts

@@ -0,0 +1,30 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLAttributes, ReactNode } from 'react';
+
+type FileTreeProps = HTMLAttributes<HTMLDivElement> & {
+    expanded?: Set<string>;
+    defaultExpanded?: Set<string>;
+    selectedPath?: string;
+    onSelect?: (path: string) => void;
+    onExpandedChange?: (expanded: Set<string>) => void;
+};
+declare const FileTree: ({ expanded: controlledExpanded, defaultExpanded, selectedPath, onSelect, onExpandedChange, className, children, ...props }: FileTreeProps) => react_jsx_runtime.JSX.Element;
+type FileTreeFolderProps = HTMLAttributes<HTMLDivElement> & {
+    path: string;
+    name: string;
+};
+declare const FileTreeFolder: ({ path, name, className, children, ...props }: FileTreeFolderProps) => react_jsx_runtime.JSX.Element;
+type FileTreeFileProps = HTMLAttributes<HTMLDivElement> & {
+    path: string;
+    name: string;
+    icon?: ReactNode;
+};
+declare const FileTreeFile: ({ path, name, icon, className, children, ...props }: FileTreeFileProps) => react_jsx_runtime.JSX.Element;
+type FileTreeIconProps = HTMLAttributes<HTMLSpanElement>;
+declare const FileTreeIcon: ({ className, children, ...props }: FileTreeIconProps) => react_jsx_runtime.JSX.Element;
+type FileTreeNameProps = HTMLAttributes<HTMLSpanElement>;
+declare const FileTreeName: ({ className, children, ...props }: FileTreeNameProps) => react_jsx_runtime.JSX.Element;
+type FileTreeActionsProps = HTMLAttributes<HTMLDivElement>;
+declare const FileTreeActions: ({ className, children, ...props }: FileTreeActionsProps) => react_jsx_runtime.JSX.Element;
+
+export { FileTree, FileTreeActions, type FileTreeActionsProps, FileTreeFile, type FileTreeFileProps, FileTreeFolder, type FileTreeFolderProps, FileTreeIcon, type FileTreeIconProps, FileTreeName, type FileTreeNameProps, type FileTreeProps };

package/dist/components/ai-elements/file-tree.d.ts

@@ -0,0 +1,30 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLAttributes, ReactNode } from 'react';
+
+type FileTreeProps = HTMLAttributes<HTMLDivElement> & {
+    expanded?: Set<string>;
+    defaultExpanded?: Set<string>;
+    selectedPath?: string;
+    onSelect?: (path: string) => void;
+    onExpandedChange?: (expanded: Set<string>) => void;
+};
+declare const FileTree: ({ expanded: controlledExpanded, defaultExpanded, selectedPath, onSelect, onExpandedChange, className, children, ...props }: FileTreeProps) => react_jsx_runtime.JSX.Element;
+type FileTreeFolderProps = HTMLAttributes<HTMLDivElement> & {
+    path: string;
+    name: string;
+};
+declare const FileTreeFolder: ({ path, name, className, children, ...props }: FileTreeFolderProps) => react_jsx_runtime.JSX.Element;
+type FileTreeFileProps = HTMLAttributes<HTMLDivElement> & {
+    path: string;
+    name: string;
+    icon?: ReactNode;
+};
+declare const FileTreeFile: ({ path, name, icon, className, children, ...props }: FileTreeFileProps) => react_jsx_runtime.JSX.Element;
+type FileTreeIconProps = HTMLAttributes<HTMLSpanElement>;
+declare const FileTreeIcon: ({ className, children, ...props }: FileTreeIconProps) => react_jsx_runtime.JSX.Element;
+type FileTreeNameProps = HTMLAttributes<HTMLSpanElement>;
+declare const FileTreeName: ({ className, children, ...props }: FileTreeNameProps) => react_jsx_runtime.JSX.Element;
+type FileTreeActionsProps = HTMLAttributes<HTMLDivElement>;
+declare const FileTreeActions: ({ className, children, ...props }: FileTreeActionsProps) => react_jsx_runtime.JSX.Element;
+
+export { FileTree, FileTreeActions, type FileTreeActionsProps, FileTreeFile, type FileTreeFileProps, FileTreeFolder, type FileTreeFolderProps, FileTreeIcon, type FileTreeIconProps, FileTreeName, type FileTreeNameProps, type FileTreeProps };