@luxfi/ui 8.0.0 → 8.1.0

package/dist/code-explorer.js

@@ -0,0 +1,707 @@
+"use client";
+import { Box, sx, cn, variants, css, ScrollArea } from '@hanzo/ui';
+import * as React2 from 'react';
+import React2__default from 'react';
+import { FolderOpen, Folder, ChevronDown, ChevronRight, Search, X, File, FileImage, FileText, FileCode } from 'lucide-react';
+import { styled, View, Input as Input$1 } from '@hanzo/gui';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var SKELETON_CLASSES = "lux-skeleton rounded-sm";
+var Skeleton = React2.forwardRef(
+  function Skeleton2(props, ref) {
+    const { loading = true, asChild, className, children, style, ...rest } = props;
+    if (!loading) {
+      if (asChild && React2.isValidElement(children)) return children;
+      return /* @__PURE__ */ jsx(Box, { ref, className, style, ...rest, children });
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-loading": true,
+        ...sx(
+          SKELETON_CLASSES,
+          asChild || children ? "[&_*]:invisible" : "min-h-5",
+          className
+        ),
+        style,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+React2.forwardRef(
+  function SkeletonCircle2(props, ref) {
+    const { size = 40, loading = true, className, ...rest } = props;
+    const dimension = typeof size === "number" ? `${size}px` : size;
+    return /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        ref,
+        loading,
+        ...sx("rounded-full shrink-0", className),
+        style: { width: dimension, height: dimension, ...rest.style },
+        ...rest
+      }
+    );
+  }
+);
+React2.forwardRef(
+  function SkeletonText2(props, ref) {
+    const { noOfLines = 3, loading = true, className, ...rest } = props;
+    return /* @__PURE__ */ jsx(Box, { ref, className: cn("flex w-full flex-col gap-2", className), ...rest, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        loading,
+        ...sx(cn("h-4", index === noOfLines - 1 && "max-w-[80%]"))
+      },
+      index
+    )) });
+  }
+);
+var SpinnerFrame = styled(View, {
+  name: "ButtonSpinner",
+  render: /* @__PURE__ */ jsx("span", {}),
+  width: 16,
+  height: 16,
+  borderRadius: 1e3,
+  borderWidth: 2,
+  borderColor: "currentColor",
+  borderBottomColor: "transparent",
+  borderLeftColor: "transparent"
+});
+function Spinner({ className }) {
+  return /* @__PURE__ */ jsx(
+    SpinnerFrame,
+    {
+      role: "status",
+      "aria-label": "Loading",
+      className: [
+        "animate-spin",
+        className
+      ].filter(Boolean).join(" ")
+    }
+  );
+}
+var ButtonFrame = styled(View, {
+  name: "LuxButton",
+  render: /* @__PURE__ */ jsx("button", { type: "button" }),
+  role: "button",
+  tabIndex: 0,
+  cursor: "pointer",
+  userSelect: "none",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 0,
+  overflow: "hidden",
+  borderRadius: 6,
+  // Whitespace nowrap via className since hanzogui doesn't have a direct token
+  // Transition via className
+  variants: {
+    size: {
+      "2xs": { paddingHorizontal: 8, height: 20, minWidth: 20, fontSize: 12, borderRadius: 4, gap: 4 },
+      xs: { paddingHorizontal: 8, height: 24, minWidth: 24, fontSize: 14, borderRadius: 4, gap: 4 },
+      sm: { paddingHorizontal: 12, height: 32, minWidth: 32, fontSize: 14, borderRadius: 6, gap: 4 },
+      md: { paddingHorizontal: 12, height: 40, minWidth: 40, fontSize: 16, borderRadius: 6, gap: 8 }
+    },
+    disabled: {
+      true: {
+        opacity: 0.2,
+        cursor: "not-allowed",
+        pointerEvents: "none"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var VARIANT_CLASSES = {
+  solid: [
+    "bg-[var(--color-button-solid-bg)] text-[var(--color-button-solid-text)]",
+    "hover:bg-[var(--color-hover)]",
+    "data-[expanded]:bg-[var(--color-hover)]"
+  ].join(" "),
+  solid_danger: [
+    "bg-[var(--color-button-danger-bg)] text-[var(--color-button-danger-fg)]",
+    "hover:bg-[var(--color-button-danger-bg-hover)]",
+    "data-[expanded]:bg-[var(--color-button-danger-bg-hover)]"
+  ].join(" "),
+  outline: [
+    "border-2 border-solid bg-transparent",
+    "text-[var(--color-button-outline-fg)] border-[var(--color-button-outline-fg)]",
+    "hover:bg-transparent hover:text-[var(--color-hover)] hover:border-[var(--color-hover)]"
+  ].join(" "),
+  outline_danger: [
+    "border-2 border-solid bg-transparent",
+    "text-[var(--color-button-danger-bg)] border-[var(--color-button-danger-bg)]",
+    "hover:bg-transparent hover:text-[var(--color-button-danger-bg-hover)] hover:border-[var(--color-button-danger-bg-hover)]"
+  ].join(" "),
+  dropdown: [
+    "border-2 border-solid bg-transparent",
+    "text-[var(--color-button-dropdown-fg)] border-[var(--color-button-dropdown-border)]",
+    "hover:bg-transparent hover:text-[var(--color-hover)] hover:border-[var(--color-hover)]",
+    "data-[expanded]:bg-transparent data-[expanded]:text-[var(--color-hover)] data-[expanded]:border-[var(--color-hover)]",
+    "data-[selected]:bg-[var(--color-selected-control-bg)] data-[selected]:text-[var(--color-selected-control-text)] data-[selected]:border-transparent",
+    "data-[selected]:hover:bg-[var(--color-selected-control-bg)]",
+    "data-[selected]:hover:text-[var(--color-hover)] data-[selected]:hover:border-transparent",
+    "data-[selected]:data-[expanded]:text-[var(--color-hover)]"
+  ].join(" "),
+  header: [
+    "bg-transparent border-2 border-solid",
+    "text-[var(--color-button-header-fg)] border-[var(--color-button-header-border)]",
+    "hover:bg-transparent hover:text-[var(--color-hover)] hover:border-[var(--color-hover)]",
+    "data-[selected]:bg-[var(--color-button-header-bg-selected)]",
+    "data-[selected]:text-[var(--color-button-header-fg-selected)] data-[selected]:border-transparent data-[selected]:border-0",
+    "data-[selected]:hover:bg-[var(--color-button-header-bg-selected)] data-[selected]:hover:text-[var(--color-hover)]",
+    "data-[selected]:data-[expanded]:text-[var(--color-hover)]",
+    "data-[selected]:data-[highlighted]:bg-[var(--color-button-header-bg-highlighted)]",
+    "data-[selected]:data-[highlighted]:text-[var(--color-button-header-fg-highlighted)]",
+    "data-[selected]:data-[highlighted]:border-transparent data-[selected]:data-[highlighted]:border-0",
+    "data-[selected]:data-[highlighted]:hover:bg-[var(--color-button-header-bg-highlighted)]",
+    "data-[selected]:data-[highlighted]:hover:text-[var(--color-hover)]",
+    "data-[selected]:data-[highlighted]:data-[expanded]:text-[var(--color-hover)]"
+  ].join(" "),
+  hero: [
+    "bg-[var(--color-button-hero-bg)] text-[var(--color-button-hero-fg)]",
+    "hover:bg-[var(--color-button-hero-bg-hover)] hover:text-[var(--color-button-hero-fg-hover)]",
+    "data-[selected]:bg-[var(--color-button-hero-bg-selected)] data-[selected]:text-[var(--color-button-hero-fg-selected)]",
+    "data-[selected]:hover:bg-[var(--color-button-hero-bg-selected)] data-[selected]:hover:text-[var(--color-hover)]",
+    "data-[selected]:data-[expanded]:text-[var(--color-hover)]"
+  ].join(" "),
+  segmented: [
+    "bg-transparent border-2 border-solid rounded-none",
+    "text-[var(--color-button-segmented-fg)] border-[var(--color-selected-control-bg)]",
+    "hover:text-[var(--color-hover)]",
+    "data-[selected]:bg-[var(--color-selected-control-bg)] data-[selected]:text-[var(--color-selected-control-text)]",
+    "data-[selected]:hover:bg-[var(--color-selected-control-bg)] data-[selected]:hover:text-[var(--color-selected-control-text)]",
+    "[&:not(:last-child)]:border-r-0 data-[selected]:[&:not(:last-child)]:border-r-2",
+    "data-[selected]+*:border-l-0",
+    "first:rounded-l-md last:rounded-r-md"
+  ].join(" "),
+  plain: "bg-transparent text-inherit border-none hover:bg-transparent",
+  subtle: [
+    "bg-[var(--color-button-subtle-bg)] text-[var(--color-button-subtle-fg)]",
+    "hover:bg-[var(--color-button-subtle-bg)] hover:text-[var(--color-hover)]",
+    "disabled:bg-[var(--color-button-subtle-bg)] disabled:text-[var(--color-button-subtle-fg)]"
+  ].join(" "),
+  link: [
+    "bg-transparent text-[var(--color-link-primary)] border-none font-normal",
+    "px-0 h-auto",
+    "hover:bg-transparent hover:text-[var(--color-link-primary-hover)]",
+    "disabled:text-[var(--color-text-secondary)]"
+  ].join(" "),
+  icon_secondary: [
+    "bg-transparent text-[var(--color-icon-secondary)] border-none",
+    "hover:text-[var(--color-hover)]",
+    "data-[selected]:bg-[var(--color-selected-control-bg)] data-[selected]:text-[var(--color-selected-control-text)]",
+    "data-[selected]:hover:bg-[var(--color-selected-control-bg)] data-[selected]:hover:text-[var(--color-hover)]",
+    "data-[selected]:data-[expanded]:text-[var(--color-hover)]",
+    "data-[expanded]:text-[var(--color-hover)]"
+  ].join(" "),
+  icon_background: [
+    "bg-[var(--color-button-icon-background-bg)] text-[var(--color-icon-secondary)] border-none",
+    "hover:text-[var(--color-hover)]",
+    "data-[selected]:bg-[var(--color-selected-control-bg)] data-[selected]:text-[var(--color-selected-control-text)]",
+    "data-[selected]:hover:bg-[var(--color-selected-control-bg)] data-[selected]:hover:text-[var(--color-hover)]",
+    "data-[selected]:data-[expanded]:text-[var(--color-hover)]",
+    "data-[expanded]:text-[var(--color-hover)]"
+  ].join(" "),
+  pagination: [
+    "border-2 border-solid bg-transparent",
+    "text-[var(--color-button-pagination-fg)] border-[var(--color-button-pagination-border)]",
+    "hover:bg-transparent hover:text-[var(--color-hover)] hover:border-[var(--color-hover)]",
+    "data-[selected]:bg-[var(--color-selected-control-bg)] data-[selected]:text-[var(--color-selected-control-text)] data-[selected]:border-transparent",
+    "data-[selected]:hover:bg-[var(--color-selected-control-bg)]",
+    "data-[selected]:hover:text-[var(--color-selected-control-text)] data-[selected]:hover:border-transparent"
+  ].join(" ")
+};
+var BASE_CLASSES = "font-semibold whitespace-nowrap transition-colors duration-150";
+var SP = 4;
+function buildShimStyle(props) {
+  const s = { ...props.style };
+  if (props.mt !== void 0) s.marginTop = typeof props.mt === "number" ? `${props.mt * SP}px` : props.mt;
+  if (props.ml !== void 0) s.marginLeft = typeof props.ml === "number" ? `${props.ml * SP}px` : props.ml;
+  if (props.mr !== void 0) s.marginRight = typeof props.mr === "number" ? `${props.mr * SP}px` : props.mr;
+  if (props.px !== void 0) {
+    const v = typeof props.px === "number" ? `${props.px * SP}px` : props.px;
+    s.paddingLeft = v;
+    s.paddingRight = v;
+  }
+  if (props.py !== void 0) {
+    const v = typeof props.py === "number" ? `${props.py * SP}px` : props.py;
+    s.paddingTop = v;
+    s.paddingBottom = v;
+  }
+  if (props.fontWeight !== void 0) s.fontWeight = props.fontWeight;
+  if (props.gap !== void 0) s.gap = typeof props.gap === "number" ? `${props.gap * SP}px` : props.gap;
+  if (props.flexShrink !== void 0) s.flexShrink = props.flexShrink;
+  if (props.columnGap !== void 0) s.columnGap = typeof props.columnGap === "number" ? `${props.columnGap * SP}px` : props.columnGap;
+  if (props.gridColumn !== void 0) s.gridColumn = typeof props.gridColumn === "number" ? String(props.gridColumn) : props.gridColumn;
+  if (props.gridRow) s.gridRow = props.gridRow;
+  if (props.justifySelf) s.justifySelf = props.justifySelf;
+  if (props.alignSelf) s.alignSelf = props.alignSelf;
+  if (props.h) s.height = props.h;
+  if (props.w) s.width = props.w;
+  if (props.display) s.display = props.display;
+  if (props.borderBottomRightRadius !== void 0) s.borderBottomRightRadius = typeof props.borderBottomRightRadius === "number" ? `${props.borderBottomRightRadius}px` : props.borderBottomRightRadius;
+  if (props.borderTopRightRadius !== void 0) s.borderTopRightRadius = typeof props.borderTopRightRadius === "number" ? `${props.borderTopRightRadius}px` : props.borderTopRightRadius;
+  return Object.keys(s).length > 0 ? s : void 0;
+}
+var Button = React2.forwardRef(
+  function Button2(props, ref) {
+    const {
+      className,
+      variant = "solid",
+      size = "md",
+      asChild = false,
+      loading = false,
+      loadingText,
+      loadingSkeleton = false,
+      expanded,
+      selected,
+      highlighted,
+      disabled,
+      children,
+      style: styleProp,
+      // Strip Chakra style props
+      mt,
+      ml,
+      mr,
+      px,
+      py,
+      fontWeight,
+      gap,
+      flexShrink,
+      columnGap,
+      gridColumn,
+      gridRow,
+      justifySelf,
+      alignSelf,
+      textStyle: _textStyle,
+      h,
+      w,
+      display,
+      borderBottomRightRadius,
+      borderTopRightRadius,
+      ...rest
+    } = props;
+    const mergedStyle = buildShimStyle({
+      style: styleProp,
+      mt,
+      ml,
+      mr,
+      px,
+      py,
+      fontWeight,
+      gap,
+      flexShrink,
+      columnGap,
+      gridColumn,
+      gridRow,
+      justifySelf,
+      alignSelf,
+      h,
+      w,
+      display,
+      borderBottomRightRadius,
+      borderTopRightRadius
+    });
+    const dataAttrs = {};
+    if (expanded) dataAttrs["data-expanded"] = true;
+    if (selected) dataAttrs["data-selected"] = true;
+    if (highlighted) dataAttrs["data-highlighted"] = true;
+    if (loadingSkeleton) dataAttrs["data-loading-skeleton"] = true;
+    const isDisabled = !loadingSkeleton && (loading || disabled);
+    const inner = loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Spinner, {}),
+      loadingText != null && /* @__PURE__ */ jsx("span", { style: { marginLeft: 8 }, children: loadingText })
+    ] }) : children;
+    const variantClass = VARIANT_CLASSES[variant] ?? VARIANT_CLASSES.solid;
+    const combinedClassName = [BASE_CLASSES, variantClass, className].filter(Boolean).join(" ");
+    const button = /* @__PURE__ */ jsx(
+      ButtonFrame,
+      {
+        ref,
+        size,
+        disabled: isDisabled || void 0,
+        asChild: asChild || void 0,
+        className: combinedClassName,
+        style: mergedStyle,
+        ...dataAttrs,
+        ...rest,
+        children: inner
+      }
+    );
+    if (loadingSkeleton) {
+      return /* @__PURE__ */ jsx(Skeleton, { loading: loadingSkeleton, asChild: true, ref, children: button });
+    }
+    return button;
+  }
+);
+React2.forwardRef(
+  function ButtonGroup2(props, ref) {
+    const { className, ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        ref,
+        className: ["inline-flex", className].filter(Boolean).join(" "),
+        role: "group",
+        ...rest
+      }
+    );
+  }
+);
+React2.forwardRef(
+  function ButtonGroupRadio2(props, ref) {
+    const {
+      children,
+      onChange,
+      variant = "segmented",
+      defaultValue,
+      loading = false,
+      equalWidth = false,
+      className,
+      ...rest
+    } = props;
+    const firstChildValue = React2.useMemo(() => {
+      const firstChild = Array.isArray(children) ? children[0] : void 0;
+      return typeof firstChild?.props.value === "string" ? firstChild.props.value : void 0;
+    }, [children]);
+    const [value, setValue] = React2.useState(defaultValue ?? firstChildValue);
+    const handleItemClick = React2.useCallback((event) => {
+      const v = event.currentTarget.value;
+      setValue(v);
+      onChange?.(v);
+    }, [onChange]);
+    const clonedChildren = React2.Children.map(children, (child) => {
+      return React2.cloneElement(child, {
+        onClick: handleItemClick,
+        selected: value === child.props.value,
+        variant
+      });
+    });
+    const childrenLength = React2.Children.count(children);
+    return /* @__PURE__ */ jsx(Skeleton, { loading, children: /* @__PURE__ */ jsx(
+      Box,
+      {
+        ref,
+        className: [
+          "inline-flex gap-0",
+          equalWidth ? "grid" : "",
+          className
+        ].filter(Boolean).join(" "),
+        style: equalWidth ? { gridTemplateColumns: `repeat(${childrenLength}, 1fr)` } : void 0,
+        role: "group",
+        ...rest,
+        children: clonedChildren
+      }
+    ) });
+  }
+);
+var SIZE = {
+  xs: { height: 24, paddingHorizontal: 8, fontSize: "$1", borderRadius: 4 },
+  sm: { height: 32, paddingHorizontal: 12, fontSize: "$3", borderRadius: 6 },
+  md: { height: 40, paddingHorizontal: 16, fontSize: "$5", borderRadius: 6 },
+  lg: { height: 48, paddingHorizontal: 16, fontSize: "$6", borderRadius: 8 },
+  "2xl": { height: 56, paddingHorizontal: 16, fontSize: "$7", borderRadius: 8 }
+};
+var VARIANT = {
+  outline: { borderWidth: 1, borderStyle: "solid" },
+  filled: { borderWidth: 0, backgroundColor: "var(--color-input-filled-bg)" },
+  unstyled: { borderWidth: 0, backgroundColor: "transparent", padding: 0, height: "auto" }
+};
+var CONTROL = {
+  width: "100%",
+  outlineWidth: 0,
+  backgroundColor: "var(--color-input-bg)",
+  color: "var(--color-input-fg)",
+  borderColor: "var(--color-input-border)",
+  hoverStyle: { borderColor: "var(--color-input-border-hover)" },
+  focusStyle: { borderColor: "var(--color-input-border-focus)" },
+  disabledStyle: { opacity: 0.4, cursor: "not-allowed" }
+};
+var Input = React2__default.forwardRef(
+  ({ size = "md", variant = "outline", className, onChange, onChangeText, ...rest }, ref) => {
+    const handleChange = React2__default.useCallback(
+      (event) => {
+        onChange?.(event);
+        onChangeText?.(event.target.value);
+      },
+      [onChange, onChangeText]
+    );
+    return /* @__PURE__ */ jsx(
+      Input$1,
+      {
+        ref,
+        unstyled: true,
+        className: className ? `lux-control ${className}` : "lux-control",
+        ...CONTROL,
+        ...SIZE[size],
+        ...VARIANT[variant],
+        ...rest,
+        onChange: handleChange
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+var codeExplorerVariants = variants(
+  "relative flex flex-col overflow-hidden rounded-lg border bg-background",
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        default: "text-sm",
+        lg: "text-base"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var getFileIcon = (fileName, isFolder = false) => {
+  if (isFolder) return Folder;
+  const ext = fileName.split(".").pop()?.toLowerCase();
+  switch (ext) {
+    case "js":
+    case "jsx":
+    case "ts":
+    case "tsx":
+    case "vue":
+    case "svelte":
+      return FileCode;
+    case "json":
+    case "xml":
+    case "yaml":
+    case "yml":
+    case "toml":
+    case "ini":
+      return FileText;
+    case "png":
+    case "jpg":
+    case "jpeg":
+    case "gif":
+    case "svg":
+    case "webp":
+    case "ico":
+      return FileImage;
+    default:
+      return File;
+  }
+};
+var formatFileSize = (bytes) => {
+  if (!bytes) return "";
+  const units = ["B", "KB", "MB", "GB"];
+  let size = bytes;
+  let unitIndex = 0;
+  while (size >= 1024 && unitIndex < units.length - 1) {
+    size /= 1024;
+    unitIndex++;
+  }
+  return `${size.toFixed(1)} ${units[unitIndex]}`;
+};
+var formatModifiedDate = (date) => {
+  if (!date) return "";
+  const now = /* @__PURE__ */ new Date();
+  const diff = now.getTime() - date.getTime();
+  const days = Math.floor(diff / (1e3 * 60 * 60 * 24));
+  if (days === 0) return "Today";
+  if (days === 1) return "Yesterday";
+  if (days < 7) return `${days} days ago`;
+  if (days < 30) return `${Math.floor(days / 7)} weeks ago`;
+  if (days < 365) return `${Math.floor(days / 30)} months ago`;
+  return `${Math.floor(days / 365)} years ago`;
+};
+var CodeExplorer = React2.forwardRef(
+  ({
+    className,
+    size,
+    files,
+    onFileSelect,
+    onFolderToggle,
+    selectedFile,
+    showSearch = true,
+    showFileIcons = true,
+    showFileSize = false,
+    showModifiedDate = false,
+    height = "400px",
+    defaultExpanded = [],
+    searchPlaceholder = "Search files...",
+    emptyMessage = "No files found",
+    ...props
+  }, ref) => {
+    const [searchTerm, setSearchTerm] = React2.useState("");
+    const [expandedFolders, setExpandedFolders] = React2.useState(
+      new Set(defaultExpanded)
+    );
+    const buildFileTree = React2.useCallback(
+      (nodes) => {
+        return nodes.map((node) => ({
+          ...node,
+          isExpanded: expandedFolders.has(node.id),
+          children: node.children ? buildFileTree(node.children) : void 0
+        }));
+      },
+      [expandedFolders]
+    );
+    const filterFiles = React2.useCallback(
+      (nodes, term) => {
+        if (!term) return nodes;
+        const filtered = [];
+        for (const node of nodes) {
+          if (node.name.toLowerCase().includes(term.toLowerCase())) {
+            filtered.push(node);
+          } else if (node.type === "folder" && node.children) {
+            const filteredChildren = filterFiles(node.children, term);
+            if (filteredChildren.length > 0) {
+              filtered.push({
+                ...node,
+                children: filteredChildren,
+                isExpanded: true
+                // Auto-expand folders with matches
+              });
+            }
+          }
+        }
+        return filtered;
+      },
+      []
+    );
+    const processedFiles = React2.useMemo(() => {
+      const withExpansion = buildFileTree(files);
+      return searchTerm ? filterFiles(withExpansion, searchTerm) : withExpansion;
+    }, [files, searchTerm, buildFileTree, filterFiles]);
+    const toggleFolder = React2.useCallback(
+      (folder) => {
+        setExpandedFolders((prev) => {
+          const newSet = new Set(prev);
+          if (newSet.has(folder.id)) {
+            newSet.delete(folder.id);
+          } else {
+            newSet.add(folder.id);
+          }
+          return newSet;
+        });
+        onFolderToggle?.(folder);
+      },
+      [onFolderToggle]
+    );
+    const renderFileNode = React2.useCallback(
+      (node, depth = 0) => {
+        const Icon = showFileIcons ? getFileIcon(node.name, node.type === "folder") : null;
+        const FolderIcon = node.type === "folder" && node.isExpanded ? FolderOpen : Folder;
+        const isSelected = selectedFile === node.id || selectedFile === node.path;
+        return /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              className: cn(
+                "flex items-center gap-2 px-2 py-1 hover:bg-muted/50 cursor-pointer transition-colors",
+                isSelected && "bg-muted",
+                "rounded-sm"
+              ),
+              style: { paddingLeft: `${depth * 16 + 8}px` },
+              onClick: () => {
+                if (node.type === "folder") {
+                  toggleFolder(node);
+                } else {
+                  onFileSelect?.(node);
+                }
+              },
+              children: [
+                node.type === "folder" && /* @__PURE__ */ jsx(Box, { className: "w-4 h-4 flex items-center justify-center", children: node.isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { style: css("h-3 w-3") }) : /* @__PURE__ */ jsx(ChevronRight, { style: css("h-3 w-3") }) }),
+                showFileIcons && /* @__PURE__ */ jsx(Box, { className: "w-4 h-4 flex items-center justify-center flex-shrink-0", children: node.type === "folder" ? /* @__PURE__ */ jsx(FolderIcon, { style: css("h-4 w-4 text-[var(--color-link-primary)]") }) : Icon ? /* @__PURE__ */ jsx(Icon, { style: css("h-4 w-4 text-muted-foreground") }) : null }),
+                /* @__PURE__ */ jsx(Box, { tag: "span", className: "flex-1 truncate", children: node.name }),
+                showFileSize && node.type === "file" && node.size && /* @__PURE__ */ jsx(Box, { tag: "span", className: "text-xs text-muted-foreground flex-shrink-0", children: formatFileSize(node.size) }),
+                showModifiedDate && node.modified && /* @__PURE__ */ jsx(Box, { tag: "span", className: "text-xs text-muted-foreground flex-shrink-0", children: formatModifiedDate(node.modified) })
+              ]
+            }
+          ),
+          node.type === "folder" && node.isExpanded && node.children && /* @__PURE__ */ jsx("div", { children: node.children.map((child) => renderFileNode(child, depth + 1)) })
+        ] }, node.id);
+      },
+      [
+        showFileIcons,
+        showFileSize,
+        showModifiedDate,
+        selectedFile,
+        toggleFolder,
+        onFileSelect
+      ]
+    );
+    const clearSearch = () => {
+      setSearchTerm("");
+    };
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        ref,
+        className: cn(codeExplorerVariants({ size }), className),
+        style: { height },
+        ...props,
+        children: [
+          showSearch && /* @__PURE__ */ jsx(Box, { className: "flex items-center gap-2 border-b px-4 py-2", children: /* @__PURE__ */ jsxs(Box, { className: "relative flex-1", children: [
+            /* @__PURE__ */ jsx(Search, { style: css("absolute left-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground") }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                value: searchTerm,
+                onChange: (e) => setSearchTerm(e.target.value),
+                placeholder: searchPlaceholder,
+                ...sx("pl-8 pr-8 h-8")
+              }
+            ),
+            searchTerm && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                onClick: clearSearch,
+                ...sx("absolute right-1 top-1/2 transform -translate-y-1/2 h-6 w-6 p-0"),
+                children: /* @__PURE__ */ jsx(X, { style: css("h-3 w-3") })
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsx(ScrollArea, { ...sx("flex-1"), children: /* @__PURE__ */ jsx(Box, { className: "p-2", children: processedFiles.length === 0 ? /* @__PURE__ */ jsx(Box, { className: "flex items-center justify-center h-24 text-muted-foreground", children: searchTerm ? `No files match "${searchTerm}"` : emptyMessage }) : /* @__PURE__ */ jsx(Box, { className: "space-y-0.5", children: processedFiles.map((node) => renderFileNode(node, 0)) }) }) }),
+          /* @__PURE__ */ jsxs(Box, { className: "border-t px-4 py-2 text-xs text-muted-foreground", children: [
+            (() => {
+              const countFiles = (nodes) => {
+                let files2 = 0;
+                let folders = 0;
+                for (const node of nodes) {
+                  if (node.type === "file") {
+                    files2++;
+                  } else {
+                    folders++;
+                    if (node.children) {
+                      const childCounts = countFiles(node.children);
+                      files2 += childCounts.files;
+                      folders += childCounts.folders;
+                    }
+                  }
+                }
+                return { files: files2, folders };
+              };
+              const { files: fileCount, folders: folderCount } = countFiles(processedFiles);
+              const parts = [];
+              if (fileCount > 0)
+                parts.push(`${fileCount} file${fileCount === 1 ? "" : "s"}`);
+              if (folderCount > 0)
+                parts.push(`${folderCount} folder${folderCount === 1 ? "" : "s"}`);
+              return parts.join(", ") || "Empty";
+            })(),
+            searchTerm && /* @__PURE__ */ jsx("span", { children: " (filtered)" })
+          ] })
+        ]
+      }
+    );
+  }
+);
+CodeExplorer.displayName = "CodeExplorer";
+
+export { CodeExplorer, codeExplorerVariants };