@timeax/form-palette 0.0.18 → 0.0.20

package/dist/index.mjs

@@ -36647,11 +36647,9 @@ var checkboxModule = {
     tags: ["checkbox", "group", "boolean", "tri-state"]
   }
 };
-function capitalizeFirst3(label) {
-  if (!label) return label;
-  return label.charAt(0).toUpperCase() + label.slice(1);
-}
-function normalizeOptions(opts, config3) {
+
+// src/lib/normalise-selects.ts
+function globalNormalizeOptions(opts, config3) {
   if (!opts || !opts.length) return [];
   return opts.map((raw, index2) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
@@ -36678,6 +36676,13 @@ function normalizeOptions(opts, config3) {
     };
   });
 }
+function capitalizeFirst3(label) {
+  if (!label) return label;
+  return label.charAt(0).toUpperCase() + label.slice(1);
+}
+function normalizeOptions(opts, config3) {
+  return globalNormalizeOptions(opts, config3);
+}
 function triggerHeight(size4) {
   switch (size4) {
     case "sm":
@@ -37299,36 +37304,8 @@ function removeSelectValue(current, valueToRemove) {
   const target = String(valueToRemove);
   return current.filter((v) => String(v) !== target);
 }
-function capitalizeFirst4(label) {
-  if (!label) return label;
-  return label.charAt(0).toUpperCase() + label.slice(1);
-}
 function normalizeOptions2(opts, config3) {
-  if (!opts || !opts.length) return [];
-  return opts.map((raw, index2) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
-    const asObj = typeof raw === "string" || typeof raw === "number" ? { label: String(raw), value: raw } : raw;
-    const value = typeof config3.optionValue === "function" ? config3.optionValue(raw) : typeof config3.optionValue === "string" ? asObj[config3.optionValue] : (_c = (_b = (_a = asObj.value) != null ? _a : asObj.id) != null ? _b : asObj.key) != null ? _c : String(index2);
-    let labelNode = typeof config3.optionLabel === "function" ? config3.optionLabel(raw) : typeof config3.optionLabel === "string" ? (_e = (_d = asObj[config3.optionLabel]) != null ? _d : asObj.label) != null ? _e : String(value) : (_f = asObj.label) != null ? _f : String(value);
-    if (config3.autoCap && typeof labelNode === "string") {
-      labelNode = capitalizeFirst4(labelNode);
-    }
-    const labelText = typeof labelNode === "string" ? labelNode : typeof labelNode === "number" ? String(labelNode) : (_g = asObj.labelText) != null ? _g : String(value);
-    const description = typeof config3.optionDescription === "function" ? config3.optionDescription(raw) : typeof config3.optionDescription === "string" ? asObj[config3.optionDescription] : asObj.description;
-    const disabled = typeof config3.optionDisabled === "function" ? config3.optionDisabled(raw) : typeof config3.optionDisabled === "string" ? !!asObj[config3.optionDisabled] : !!asObj.disabled;
-    const icon = typeof config3.optionIcon === "function" ? config3.optionIcon(raw) : typeof config3.optionIcon === "string" ? asObj[config3.optionIcon] : asObj.icon;
-    const key = typeof config3.optionKey === "function" ? config3.optionKey(raw, index2) : typeof config3.optionKey === "string" ? (_i = (_h = asObj[config3.optionKey]) != null ? _h : value) != null ? _i : index2 : (_k = (_j = asObj.key) != null ? _j : value) != null ? _k : index2;
-    return {
-      key: String(key),
-      value,
-      labelNode,
-      labelText,
-      description,
-      disabled,
-      icon,
-      raw
-    };
-  });
+  return globalNormalizeOptions(opts, config3);
 }
 function triggerHeight2(size4) {
   switch (size4) {
@@ -37432,9 +37409,7 @@ var ShadcnMultiSelectVariant = React54.forwardRef(function ShadcnMultiSelectVari
   const filteredItems = React54.useMemo(() => {
     if (!query) return items;
     const q = query.toLowerCase();
-    return items.filter(
-      (it) => it.labelText.toLowerCase().includes(q)
-    );
+    return items.filter((it) => it.labelText.toLowerCase().includes(q));
   }, [items, query]);
   const selectableItems = React54.useMemo(
     () => items.filter((it) => !it.disabled),
@@ -37587,7 +37562,7 @@ var ShadcnMultiSelectVariant = React54.forwardRef(function ShadcnMultiSelectVari
       type: "button",
       disabled: disabledTrigger,
       className: cn(
-        "flex w-full items-center justify-between rounded-md border border-input bg-background px-3 text-left shadow-xs",
+        "flex w-full items-center justify-between rounded-md border border-input bg-surfaces-input px-3 text-left shadow-xs",
         "focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:border-ring",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         heightCls,
@@ -37712,9 +37687,7 @@ var ShadcnMultiSelectVariant = React54.forwardRef(function ShadcnMultiSelectVari
                       }
                     ),
                     filteredItems.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5 text-xs text-muted-foreground", children: emptySearchText != null ? emptySearchText : "No results found" }) : filteredItems.map((item, index2) => {
-                      const selected = selectedValues.has(
-                        item.value
-                      );
+                      const selected = selectedValues.has(item.value);
                       const row = /* @__PURE__ */ jsxs(
                         "button",
                         {
@@ -37845,9 +37818,7 @@ var ShadcnMultiSelectVariant = React54.forwardRef(function ShadcnMultiSelectVari
               /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: cn(
-                    "flex-1 min-w-0 flex items-stretch"
-                  ),
+                  className: cn("flex-1 min-w-0 flex items-stretch"),
                   "data-slot": "select-region",
                   children: MultiSelectCore
                 }
@@ -39566,12 +39537,11 @@ function clampVisible(total, minVisible, maxVisible) {
 function sizeClasses(size4) {
   switch (size4) {
     case "sm":
-      return "text-xs min-h-[2rem]";
+      return "h-8 text-xs";
     case "lg":
-      return "text-sm min-h-[2.75rem]";
-    case "md":
+      return "h-11 text-base";
     default:
-      return "text-sm min-h-[2.5rem]";
+      return "h-9 text-sm";
   }
 }
 function densityPadding(density) {
@@ -39582,7 +39552,7 @@ function densityPadding(density) {
       return "py-3 px-3 gap-3";
     case "comfortable":
     default:
-      return "py-2 px-3 gap-2";
+      return "py-1 px-3 gap-2";
   }
 }
 function defaultMoreLabel(count3) {
@@ -40076,7 +40046,7 @@ function Badge({
     }
   );
 }
-function capitalizeFirst5(label) {
+function capitalizeFirst4(label) {
   if (!label) return label;
   return label.charAt(0).toUpperCase() + label.slice(1);
 }
@@ -40088,7 +40058,7 @@ function normalizeTree(opts, config3, level = 0, parentValue, path = []) {
     const value = typeof config3.optionValue === "function" ? config3.optionValue(raw) : typeof config3.optionValue === "string" ? asObj[config3.optionValue] : (_c = (_b = (_a = asObj.value) != null ? _a : asObj.id) != null ? _b : asObj.key) != null ? _c : String(index2);
     let labelNode = typeof config3.optionLabel === "function" ? config3.optionLabel(raw) : typeof config3.optionLabel === "string" ? (_e = (_d = asObj[config3.optionLabel]) != null ? _d : asObj.label) != null ? _e : String(value) : (_f = asObj.label) != null ? _f : String(value);
     if (config3.autoCap && typeof labelNode === "string") {
-      labelNode = capitalizeFirst5(labelNode);
+      labelNode = capitalizeFirst4(labelNode);
     }
     const labelText = typeof labelNode === "string" ? labelNode : typeof labelNode === "number" ? String(labelNode) : (_g = asObj.labelText) != null ? _g : String(value);
     const description = typeof config3.optionDescription === "function" ? config3.optionDescription(raw) : typeof config3.optionDescription === "string" ? asObj[config3.optionDescription] : asObj.description;
@@ -41417,15 +41387,34 @@ function formatSizeDefault(size4) {
   const mb = kb / 1024;
   return `${mb.toFixed(1)} MB`;
 }
-function sliderHeight2(size4) {
+function triggerHeight4(size4) {
   switch (size4) {
     case "sm":
-      return "min-h-8 text-xs";
+      return "h-8 text-xs";
     case "lg":
-      return "min-h-12 text-base";
-    case "md":
+      return "h-11 text-base";
+    default:
+      return "h-9 text-sm";
+  }
+}
+function chipHeight(size4) {
+  switch (size4) {
+    case "sm":
+      return "h-5";
+    case "lg":
+      return "h-7";
+    default:
+      return "h-6";
+  }
+}
+function pickerBtnSize(size4) {
+  switch (size4) {
+    case "sm":
+      return "h-6 w-6";
+    case "lg":
+      return "h-8 w-8";
     default:
-      return "min-h-10 text-sm";
+      return "h-7 w-7";
   }
 }
 function toArray(v) {
@@ -41502,481 +41491,657 @@ var FileThumbnail = ({ item }) => {
       setPreview(item.url || item.path || null);
     }
   }, [item]);
-  return /* @__PURE__ */ jsx("div", { className: "relative flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-sm border bg-muted/50", children: preview ? /* @__PURE__ */ jsx("img", { src: preview, alt: "", className: "h-full w-full object-cover" }) : /* @__PURE__ */ jsx(File2, { className: "h-4 w-4 text-muted-foreground/50" }) });
+  return /* @__PURE__ */ jsx("div", { className: "relative flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-sm border bg-muted/50", children: preview ? /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: preview,
+      alt: "",
+      className: "h-full w-full object-cover"
+    }
+  ) : /* @__PURE__ */ jsx(File2, { className: "h-4 w-4 text-muted-foreground/50" }) });
 };
-var ShadcnFileVariant = React54.forwardRef(
-  function ShadcnFileVariant2(props, ref) {
-    const {
-      value,
-      onValue,
-      disabled,
-      readOnly,
-      error,
-      size: size4 = "md",
-      density = "comfortable",
-      multiple = false,
-      accept,
-      maxFiles,
-      maxTotalSize,
-      showDropArea = false,
-      dropIcon,
-      dropTitle,
-      dropDescription,
-      renderDropArea,
-      renderFileItem,
-      showCheckboxes,
-      onFilesAdded,
-      customLoader,
-      mergeMode = "append",
-      formatFileName,
-      formatFileSize = formatSizeDefault,
-      placeholder = "Select file...",
-      className,
-      dropAreaClassName,
-      listClassName,
-      leadingIcons,
-      trailingIcons,
-      icon,
-      leadingControl,
-      trailingControl,
-      leadingControlClassName,
-      trailingControlClassName,
-      joinControls = true,
-      extendBoxToControls = true
-    } = props;
-    const items = value != null ? value : [];
-    const isDisabled = !!disabled || !!readOnly;
-    const [dragOver, setDragOver] = React54.useState(false);
-    const [selectedIds, setSelectedIds] = React54.useState(() => /* @__PURE__ */ new Set());
-    const [popoverOpen, setPopoverOpen] = React54.useState(false);
-    const fileInputRef = React54.useRef(null);
-    const heightCls = sliderHeight2(size4);
-    const resolvedLeadingIcons = leadingIcons || (icon ? [icon] : []);
-    const resolvedTrailingIcons = trailingIcons || [];
-    const hasExternalControls = !!leadingControl || !!trailingControl;
-    const COLLAPSE_LIMIT = 2;
-    const emitChange = React54.useCallback(
-      (next, meta) => {
-        onValue == null ? void 0 : onValue(next, { source: "variant", raw: next, nativeEvent: void 0, meta });
-      },
-      [onValue]
-    );
-    const handleAddItems = (incoming, from) => {
-      if (isDisabled) return;
-      let next = multiple ? [...items] : [];
-      const added = [];
-      for (const item of incoming) {
-        if (multiple && maxFiles && next.length >= maxFiles) break;
-        const currentTotalSize = next.reduce((acc, i) => acc + (i.size || 0), 0);
-        if (maxTotalSize && currentTotalSize + (item.size || 0) > maxTotalSize) break;
-        next.push(item);
-        added.push(item);
-      }
-      if (added.length > 0) {
-        onFilesAdded == null ? void 0 : onFilesAdded(added, { source: "variant", raw: added, nativeEvent: void 0, meta: { from } });
-        emitChange(next, { action: "add", from, added });
-      }
-    };
-    const handleRemove = (id) => {
-      const next = items.filter((i) => i.id !== id);
-      emitChange(next, { action: "remove", id });
-      if (selectedIds.has(id)) {
-        const nextSel = new Set(selectedIds);
-        nextSel.delete(id);
-        setSelectedIds(nextSel);
+var ShadcnFileVariant = React54.forwardRef(function ShadcnFileVariant2(props, ref) {
+  const {
+    value,
+    onValue,
+    disabled,
+    readOnly,
+    error,
+    size: size4 = "md",
+    density = "comfortable",
+    multiple = false,
+    accept,
+    maxFiles,
+    maxTotalSize,
+    showDropArea = false,
+    dropIcon,
+    dropTitle,
+    dropDescription,
+    renderDropArea,
+    renderFileItem,
+    showCheckboxes,
+    onFilesAdded,
+    customLoader,
+    mergeMode = "append",
+    formatFileName,
+    formatFileSize = formatSizeDefault,
+    placeholder = "Select file...",
+    className,
+    dropAreaClassName,
+    listClassName,
+    leadingIcons,
+    trailingIcons,
+    icon,
+    leadingControl,
+    trailingControl,
+    leadingControlClassName,
+    trailingControlClassName,
+    joinControls = true,
+    extendBoxToControls = true
+  } = props;
+  const items = value != null ? value : [];
+  const isDisabled = Boolean(disabled || readOnly);
+  const [dragOver, setDragOver] = React54.useState(false);
+  const [selectedIds, setSelectedIds] = React54.useState(
+    () => /* @__PURE__ */ new Set()
+  );
+  const [popoverOpen, setPopoverOpen] = React54.useState(false);
+  const fileInputRef = React54.useRef(null);
+  const heightCls = triggerHeight4(size4);
+  const chipHeightCls = chipHeight(size4);
+  const pickerBtnCls = pickerBtnSize(size4);
+  const resolvedLeadingIcons = leadingIcons || (icon ? [icon] : []);
+  const resolvedTrailingIcons = trailingIcons || [];
+  const hasExternalControls = !!leadingControl || !!trailingControl;
+  const COLLAPSE_LIMIT = 2;
+  const emitChange = React54.useCallback(
+    (next, meta) => {
+      onValue == null ? void 0 : onValue(next, {
+        source: "variant",
+        raw: next,
+        nativeEvent: void 0,
+        meta
+      });
+    },
+    [onValue]
+  );
+  const handleAddItems = (incoming, from) => {
+    if (isDisabled) return;
+    let next = multiple ? [...items] : [];
+    const added = [];
+    for (const item of incoming) {
+      if (multiple && maxFiles && next.length >= maxFiles) break;
+      const currentTotalSize = next.reduce(
+        (acc, i) => acc + (i.size || 0),
+        0
+      );
+      if (maxTotalSize && currentTotalSize + (item.size || 0) > maxTotalSize)
+        break;
+      next.push(item);
+      added.push(item);
+    }
+    if (added.length > 0) {
+      onFilesAdded == null ? void 0 : onFilesAdded(added, {
+        source: "variant",
+        raw: added,
+        nativeEvent: void 0,
+        meta: { from }
+      });
+      emitChange(next, { action: "add", from, added });
+    }
+  };
+  const handleRemove = (id) => {
+    const next = items.filter((i) => i.id !== id);
+    emitChange(next, { action: "remove", id });
+    if (selectedIds.has(id)) {
+      const nextSel = new Set(selectedIds);
+      nextSel.delete(id);
+      setSelectedIds(nextSel);
+    }
+  };
+  const handleBulkRemove = () => {
+    const next = items.filter((i) => !selectedIds.has(i.id));
+    emitChange(next, {
+      action: "bulk-remove",
+      ids: Array.from(selectedIds)
+    });
+    setSelectedIds(/* @__PURE__ */ new Set());
+  };
+  const openPicker = async () => {
+    var _a;
+    if (isDisabled) return;
+    if (customLoader) {
+      try {
+        const result = await customLoader({ multiple, current: items });
+        if (!result) return;
+        const normalized = toArray(result).map(normaliseFileLike);
+        if (mergeMode === "replace" || !multiple) {
+          emitChange(normalized, {
+            action: "set",
+            from: "custom-loader"
+          });
+        } else {
+          handleAddItems(normalized, "custom-loader");
+        }
+      } catch (err) {
+        console.error("Custom loader failed", err);
       }
-    };
-    const handleBulkRemove = () => {
-      const next = items.filter((i) => !selectedIds.has(i.id));
-      emitChange(next, { action: "bulk-remove", ids: Array.from(selectedIds) });
-      setSelectedIds(/* @__PURE__ */ new Set());
-    };
-    const openPicker = async () => {
+      return;
+    }
+    (_a = fileInputRef.current) == null ? void 0 : _a.click();
+  };
+  const onDragOver = (e) => {
+    e.preventDefault();
+    if (!isDisabled) setDragOver(true);
+  };
+  const onDrop = (e) => {
+    var _a;
+    e.preventDefault();
+    setDragOver(false);
+    if (isDisabled || !((_a = e.dataTransfer.files) == null ? void 0 : _a.length)) return;
+    const files = normaliseFromFiles(e.dataTransfer.files);
+    handleAddItems(files, "drop");
+  };
+  const onNativeChange = (e) => {
+    var _a;
+    if ((_a = e.target.files) == null ? void 0 : _a.length) {
+      handleAddItems(normaliseFromFiles(e.target.files), "input");
+    }
+    e.target.value = "";
+  };
+  const FileChip = ({
+    item,
+    condensed = false
+  }) => {
+    const name = formatFileName ? formatFileName(item) : item.name;
+    const [preview, setPreview] = React54.useState(null);
+    const [isOpen, setIsOpen] = React54.useState(false);
+    React54.useEffect(() => {
       var _a;
-      if (isDisabled) return;
-      if (customLoader) {
-        try {
-          const result = await customLoader({ multiple, current: items });
-          if (!result) return;
-          const normalized = toArray(result).map(normaliseFileLike);
-          if (mergeMode === "replace" || !multiple) {
-            emitChange(normalized, { action: "set", from: "custom-loader" });
-          } else {
-            handleAddItems(normalized, "custom-loader");
-          }
-        } catch (err) {
-          console.error("Custom loader failed", err);
-        }
+      const isImage2 = ((_a = item.type) == null ? void 0 : _a.startsWith("image/")) || item.name.match(/\.(jpg|jpeg|png|gif|webp)$/i);
+      if (!isImage2) {
+        setPreview(null);
         return;
       }
-      (_a = fileInputRef.current) == null ? void 0 : _a.click();
-    };
-    const onDragOver = (e) => {
-      e.preventDefault();
-      if (!isDisabled) setDragOver(true);
-    };
-    const onDrop = (e) => {
-      var _a;
-      e.preventDefault();
-      setDragOver(false);
-      if (isDisabled || !((_a = e.dataTransfer.files) == null ? void 0 : _a.length)) return;
-      const files = normaliseFromFiles(e.dataTransfer.files);
-      handleAddItems(files, "drop");
-    };
-    const onNativeChange = (e) => {
-      var _a;
-      if ((_a = e.target.files) == null ? void 0 : _a.length) {
-        handleAddItems(normaliseFromFiles(e.target.files), "input");
+      if (item.file) {
+        const url = URL.createObjectURL(item.file);
+        setPreview(url);
+        return () => URL.revokeObjectURL(url);
       }
-      e.target.value = "";
-    };
-    const FileChip = ({ item, condensed = false }) => {
-      const name = formatFileName ? formatFileName(item) : item.name;
-      const [preview, setPreview] = React54.useState(null);
-      const [isOpen, setIsOpen] = React54.useState(false);
-      React54.useEffect(() => {
-        var _a;
-        const isImage2 = ((_a = item.type) == null ? void 0 : _a.startsWith("image/")) || item.name.match(/\.(jpg|jpeg|png|gif|webp)$/i);
-        if (!isImage2) {
-          setPreview(null);
-          return;
+      if (item.url || item.path) {
+        setPreview(item.url || item.path || null);
+      }
+    }, [item]);
+    return /* @__PURE__ */ jsxs(Popover2, { open: isOpen, onOpenChange: setIsOpen, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger2, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "button",
+          tabIndex: 0,
+          className: cn(
+            "flex items-center gap-1.5 overflow-hidden rounded-sm border bg-muted/60 px-1.5 text-xs transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none cursor-pointer",
+            chipHeightCls,
+            condensed ? "max-w-[120px]" : "max-w-[200px]"
+          ),
+          onPointerDown: (e) => e.stopPropagation(),
+          onClick: (e) => {
+            e.stopPropagation();
+            setIsOpen(true);
+          },
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.stopPropagation();
+              setIsOpen(true);
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsx(File2, { className: "h-3 w-3 text-muted-foreground shrink-0" }),
+            /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: name }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onPointerDown: (e) => e.stopPropagation(),
+                onClick: (e) => {
+                  e.stopPropagation();
+                  handleRemove(item.id);
+                },
+                className: "ml-auto flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-muted-foreground/70 hover:bg-destructive/20 hover:text-destructive focus:outline-none",
+                "aria-label": "Remove file",
+                children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+              }
+            )
+          ]
         }
-        if (item.file) {
-          const url = URL.createObjectURL(item.file);
-          setPreview(url);
-          return () => URL.revokeObjectURL(url);
+      ) }),
+      /* @__PURE__ */ jsxs(
+        PopoverContent2,
+        {
+          className: "w-64 p-0",
+          align: "start",
+          side: "bottom",
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "relative aspect-video w-full flex items-center justify-center bg-muted/30 border-b", children: preview ? /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: preview,
+                alt: item.name,
+                className: "h-full w-full object-contain"
+              }
+            ) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 text-muted-foreground/50", children: [
+              /* @__PURE__ */ jsx(File2, { className: "h-10 w-10" }),
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] uppercase", children: "No Preview" })
+            ] }) }),
+            /* @__PURE__ */ jsxs("div", { className: "p-3", children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "font-medium text-sm truncate",
+                  title: item.name,
+                  children: name
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center justify-between text-xs text-muted-foreground", children: [
+                /* @__PURE__ */ jsx("span", { children: formatFileSize(item.size) }),
+                item.type && /* @__PURE__ */ jsx("span", { className: "uppercase opacity-70", children: item.type.split("/").pop() })
+              ] })
+            ] })
+          ]
         }
-        if (item.url || item.path) {
-          setPreview(item.url || item.path || null);
+      )
+    ] });
+  };
+  const TriggerRegion = React54.useMemo(() => {
+    if (showDropArea) {
+      if (renderDropArea)
+        return renderDropArea({ openPicker, isDragging: dragOver });
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          onClick: openPicker,
+          onDragOver,
+          onDragLeave: () => setDragOver(false),
+          onDrop,
+          className: cn(
+            "group relative flex cursor-pointer flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed px-6 py-8 text-center transition-all duration-200",
+            dragOver ? "border-primary bg-primary/5 ring-4 ring-primary/10" : "border-muted-foreground/25 hover:bg-muted/30 hover:border-muted-foreground/50",
+            isDisabled && "cursor-not-allowed opacity-50",
+            error && "border-destructive/50 bg-destructive/5",
+            dropAreaClassName
+          ),
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "rounded-full bg-surfaces-input p-3 shadow-sm", children: dropIcon != null ? dropIcon : /* @__PURE__ */ jsx(CloudUpload, { className: "h-5 w-5 text-muted-foreground" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: dropTitle != null ? dropTitle : "Click or drag to select" }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: dropDescription != null ? dropDescription : multiple ? "Select files" : "Select a file" })
+            ] })
+          ]
         }
-      }, [item]);
-      return /* @__PURE__ */ jsxs(Popover2, { open: isOpen, onOpenChange: setIsOpen, children: [
-        /* @__PURE__ */ jsx(PopoverTrigger2, { asChild: true, children: /* @__PURE__ */ jsxs(
-          "div",
-          {
-            role: "button",
-            tabIndex: 0,
-            className: cn(
-              "flex items-center gap-1.5 overflow-hidden rounded-sm border bg-muted/60 px-1.5 py-0.5 text-xs transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none cursor-pointer",
-              condensed ? "max-w-[120px]" : "max-w-[200px]"
+      );
+    }
+    const hasItems = items.length > 0;
+    const visibleItems = items.slice(0, COLLAPSE_LIMIT);
+    const hiddenCount = items.length - COLLAPSE_LIMIT;
+    const isOverflowing = hiddenCount > 0;
+    const anySelected = selectedIds.size > 0 && showCheckboxes && multiple;
+    return /* @__PURE__ */ jsxs(Popover2, { open: popoverOpen, onOpenChange: setPopoverOpen, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger2, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "relative flex w-full cursor-pointer items-center gap-2 px-3 py-0 transition-all",
+            heightCls,
+            (!joinControls || !hasExternalControls) && "rounded-md border border-input bg-surfaces-input ring-offset-background hover:bg-accent/5 focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+            dragOver && (!joinControls || !hasExternalControls) && "border-primary ring-2 ring-primary/20",
+            isDisabled && "cursor-not-allowed opacity-50",
+            error && (!joinControls || !hasExternalControls) && "border-destructive text-destructive",
+            className
+          ),
+          onDragOver,
+          onDragLeave: () => setDragOver(false),
+          onDrop,
+          children: [
+            resolvedLeadingIcons.map((ico, i) => /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "flex shrink-0 items-center justify-center text-muted-foreground",
+                children: ico
+              },
+              i
+            )),
+            /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center gap-2 overflow-hidden", children: hasItems ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              visibleItems.map((item) => /* @__PURE__ */ jsx(
+                FileChip,
+                {
+                  item,
+                  condensed: multiple
+                },
+                item.id
+              )),
+              isOverflowing && /* @__PURE__ */ jsxs("span", { className: "flex h-5 items-center justify-center rounded-sm bg-muted px-1.5 text-xs font-medium text-muted-foreground", children: [
+                "+",
+                hiddenCount
+              ] })
+            ] }) : /* @__PURE__ */ jsx("span", { className: "truncate text-muted-foreground", children: placeholder }) }),
+            resolvedTrailingIcons.map((ico, i) => /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "flex shrink-0 items-center justify-center text-muted-foreground",
+                children: ico
+              },
+              i
+            )),
+            /* @__PURE__ */ jsx(
+              Button2,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "icon",
+                className: cn(
+                  "shrink-0 text-muted-foreground hover:text-foreground",
+                  pickerBtnCls
+                ),
+                onPointerDown: (e) => e.stopPropagation(),
+                onClick: (e) => {
+                  e.stopPropagation();
+                  openPicker();
+                },
+                children: /* @__PURE__ */ jsx(FolderUp, { className: "h-4 w-4" })
+              }
             ),
-            onClick: (e) => {
-              e.stopPropagation();
-              setIsOpen(true);
-            },
-            onKeyDown: (e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.stopPropagation();
-                setIsOpen(true);
+            /* @__PURE__ */ jsx(
+              ChevronDown,
+              {
+                className: cn(
+                  "h-4 w-4 shrink-0 text-muted-foreground opacity-50 transition-transform duration-200",
+                  popoverOpen && "rotate-180"
+                )
               }
-            },
-            children: [
-              /* @__PURE__ */ jsx(File2, { className: "h-3 w-3 text-muted-foreground shrink-0" }),
-              /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: name }),
-              /* @__PURE__ */ jsx(
+            )
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        PopoverContent2,
+        {
+          className: "w-(--radix-popover-trigger-width) p-0",
+          align: "start",
+          children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b px-3 py-2 text-xs font-medium text-muted-foreground", children: [
+              /* @__PURE__ */ jsx("span", { children: anySelected ? `${selectedIds.size} selected` : `${items.length} files total` }),
+              anySelected ? /* @__PURE__ */ jsx(
                 "button",
                 {
                   type: "button",
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    handleRemove(item.id);
-                  },
-                  className: "ml-auto flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-muted-foreground/70 hover:bg-destructive/20 hover:text-destructive focus:outline-none",
-                  "aria-label": "Remove file",
-                  children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+                  className: "text-destructive hover:underline",
+                  onClick: handleBulkRemove,
+                  children: "Remove selected"
                 }
-              )
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsxs(PopoverContent2, { className: "w-64 p-0", align: "start", side: "bottom", children: [
-          /* @__PURE__ */ jsx("div", { className: "relative aspect-video w-full flex items-center justify-center bg-muted/30 border-b", children: preview ? /* @__PURE__ */ jsx("img", { src: preview, alt: item.name, className: "h-full w-full object-contain" }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 text-muted-foreground/50", children: [
-            /* @__PURE__ */ jsx(File2, { className: "h-10 w-10" }),
-            /* @__PURE__ */ jsx("span", { className: "text-[10px] uppercase", children: "No Preview" })
-          ] }) }),
-          /* @__PURE__ */ jsxs("div", { className: "p-3", children: [
-            /* @__PURE__ */ jsx("div", { className: "font-medium text-sm truncate", title: item.name, children: name }),
-            /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center justify-between text-xs text-muted-foreground", children: [
-              /* @__PURE__ */ jsx("span", { children: formatFileSize(item.size) }),
-              item.type && /* @__PURE__ */ jsx("span", { className: "uppercase opacity-70", children: item.type.split("/").pop() })
-            ] })
+              ) : items.length > 0 ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "text-muted-foreground hover:text-foreground",
+                  onClick: () => emitChange([], { action: "clear" }),
+                  children: "Clear all"
+                }
+              ) : null
+            ] }),
+            /* @__PURE__ */ jsx(ScrollArea2, { className: "h-auto max-h-[300px] w-full p-1", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+              items.map((item) => {
+                var _a;
+                const selected = selectedIds.has(item.id);
+                const toggle = () => {
+                  const next = new Set(selectedIds);
+                  if (next.has(item.id))
+                    next.delete(item.id);
+                  else next.add(item.id);
+                  setSelectedIds(next);
+                };
+                return /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "group flex items-center gap-3 rounded-md px-2 py-2 text-sm transition-colors hover:bg-muted/50",
+                    children: [
+                      showCheckboxes && multiple && /* @__PURE__ */ jsx(
+                        Checkbox2,
+                        {
+                          checked: selected,
+                          onCheckedChange: toggle,
+                          className: "h-4 w-4 shrink-0"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(FileThumbnail, { item }),
+                      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                        /* @__PURE__ */ jsx("div", { className: "truncate font-medium", children: (_a = formatFileName == null ? void 0 : formatFileName(item)) != null ? _a : item.name }),
+                        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+                          /* @__PURE__ */ jsx("span", { children: formatFileSize(
+                            item.size
+                          ) }),
+                          item.status === "failed" && /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "Failed" })
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        Button2,
+                        {
+                          variant: "ghost",
+                          size: "icon",
+                          className: "h-7 w-7 opacity-0 group-hover:opacity-100",
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            handleRemove(item.id);
+                          },
+                          children: /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5 text-muted-foreground" })
+                        }
+                      )
+                    ]
+                  },
+                  item.id
+                );
+              }),
+              items.length === 0 && /* @__PURE__ */ jsx("div", { className: "py-4 text-center text-xs text-muted-foreground", children: "No files selected" })
+            ] }) }),
+            /* @__PURE__ */ jsx("div", { className: "border-t p-1", children: /* @__PURE__ */ jsxs(
+              Button2,
+              {
+                variant: "secondary",
+                size: "sm",
+                className: "w-full justify-start text-xs",
+                onClick: () => {
+                  setPopoverOpen(false);
+                  openPicker();
+                },
+                children: [
+                  /* @__PURE__ */ jsx(Plus, { className: "mr-2 h-3 w-3" }),
+                  multiple ? "Add files..." : items.length ? "Replace file" : "Add file"
+                ]
+              }
+            ) })
           ] })
-        ] })
-      ] });
-    };
-    const TriggerRegion = React54.useMemo(() => {
-      if (showDropArea) {
-        if (renderDropArea) return renderDropArea({ openPicker, isDragging: dragOver });
-        return /* @__PURE__ */ jsxs(
-          "div",
+        }
+      )
+    ] });
+  }, [
+    showDropArea,
+    items,
+    multiple,
+    dragOver,
+    isDisabled,
+    placeholder,
+    joinControls,
+    hasExternalControls,
+    resolvedLeadingIcons,
+    resolvedTrailingIcons,
+    popoverOpen,
+    COLLAPSE_LIMIT,
+    heightCls,
+    chipHeightCls,
+    pickerBtnCls,
+    openPicker,
+    onDragOver,
+    onDrop,
+    renderDropArea,
+    className,
+    error,
+    dropAreaClassName,
+    dropIcon,
+    dropTitle,
+    dropDescription,
+    selectedIds,
+    showCheckboxes,
+    handleBulkRemove,
+    emitChange,
+    formatFileName,
+    formatFileSize,
+    handleRemove
+  ]);
+  const showExternalList = multiple && showDropArea && items.length > 0;
+  const anySelectedExternal = selectedIds.size > 0 && showCheckboxes && multiple;
+  const ExternalFileList = showExternalList ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    (anySelectedExternal || items.length > 0) && /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center justify-between px-1 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        items.length,
+        " files"
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        anySelectedExternal && /* @__PURE__ */ jsx(
+          "button",
           {
-            onClick: openPicker,
-            onDragOver,
-            onDragLeave: () => setDragOver(false),
-            onDrop,
-            className: cn(
-              "group relative flex cursor-pointer flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed px-6 py-8 text-center transition-all duration-200",
-              dragOver ? "border-primary bg-primary/5 ring-4 ring-primary/10" : "border-muted-foreground/25 hover:bg-muted/30 hover:border-muted-foreground/50",
-              isDisabled && "cursor-not-allowed opacity-50",
-              error && "border-destructive/50 bg-destructive/5",
-              dropAreaClassName
-            ),
-            children: [
-              /* @__PURE__ */ jsx("div", { className: "rounded-full bg-surfaces-input p-3 shadow-sm", children: dropIcon != null ? dropIcon : /* @__PURE__ */ jsx(CloudUpload, { className: "h-5 w-5 text-muted-foreground" }) }),
-              /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-                /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: dropTitle != null ? dropTitle : "Click or drag to select" }),
-                /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: dropDescription != null ? dropDescription : multiple ? "Select files" : "Select a file" })
-              ] })
-            ]
+            type: "button",
+            onClick: handleBulkRemove,
+            className: "text-destructive hover:underline",
+            children: "Remove selected"
           }
-        );
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => emitChange([], { action: "clear" }),
+            className: "hover:text-foreground",
+            children: "Clear all"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(ScrollArea2, { className: cn("mt-1 w-full", listClassName), children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: items.map((item, index2) => {
+      var _a;
+      const selected = selectedIds.has(item.id);
+      const toggle = () => {
+        const next = new Set(selectedIds);
+        if (next.has(item.id)) next.delete(item.id);
+        else next.add(item.id);
+        setSelectedIds(next);
+      };
+      if (renderFileItem) {
+        return renderFileItem({
+          item,
+          index: index2,
+          selected,
+          toggleSelected: toggle,
+          remove: () => handleRemove(item.id)
+        });
       }
-      const hasItems = items.length > 0;
-      const visibleItems = items.slice(0, COLLAPSE_LIMIT);
-      const hiddenCount = items.length - COLLAPSE_LIMIT;
-      const isOverflowing = hiddenCount > 0;
-      const anySelected = selectedIds.size > 0 && showCheckboxes && multiple;
-      return /* @__PURE__ */ jsxs(Popover2, { open: popoverOpen, onOpenChange: setPopoverOpen, children: [
-        /* @__PURE__ */ jsx(PopoverTrigger2, { asChild: true, children: /* @__PURE__ */ jsxs(
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "group relative flex items-center gap-3 rounded-lg border bg-card p-2 pr-3 transition-all hover:bg-muted/30",
+          children: [
+            showCheckboxes && /* @__PURE__ */ jsx(
+              Checkbox2,
+              {
+                checked: selected,
+                onCheckedChange: toggle,
+                className: "ml-1"
+              }
+            ),
+            /* @__PURE__ */ jsx(FileThumbnail, { item }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [
+              /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between gap-2", children: /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-foreground", children: (_a = formatFileName == null ? void 0 : formatFileName(item)) != null ? _a : item.name }) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+                /* @__PURE__ */ jsx("span", { children: formatFileSize(item.size) }),
+                item.status === "loading" && /* @__PURE__ */ jsx("span", { className: "flex items-center gap-1 text-primary", children: /* @__PURE__ */ jsx(LoaderCircle, { className: "h-3 w-3 animate-spin" }) }),
+                item.status === "failed" && /* @__PURE__ */ jsx("span", { className: "flex items-center gap-1 text-destructive", children: /* @__PURE__ */ jsx(CircleAlert, { className: "h-3 w-3" }) }),
+                item.status === "done" && /* @__PURE__ */ jsx(CircleCheck, { className: "h-3 w-3 text-emerald-500" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleRemove(item.id),
+                className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-muted-foreground/70 opacity-0 transition-all hover:bg-destructive/10 hover:text-destructive group-hover:opacity-100",
+                children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" })
+              }
+            )
+          ]
+        },
+        item.id
+      );
+    }) }) })
+  ] }) : null;
+  const joinedBox = joinControls && extendBoxToControls && !showDropArea;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn("w-full", className),
+      "aria-disabled": isDisabled,
+      "aria-invalid": !!error,
+      children: [
+        /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
-              "relative flex w-full cursor-pointer items-center gap-2 px-3 transition-all",
-              heightCls,
-              (!joinControls || !hasExternalControls) && "rounded-md border border-input bg-surfaces-input ring-offset-background hover:bg-accent/5 focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
-              dragOver && "border-primary ring-2 ring-primary/20",
-              isDisabled && "cursor-not-allowed opacity-50",
-              error && "border-destructive text-destructive",
-              className
+              "flex w-full",
+              joinedBox ? "items-stretch rounded-md border border-input bg-surfaces-input shadow-xs ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2" : "items-start gap-2",
+              // ✅ if the wrapper owns the border, apply border-state feedback here too
+              joinedBox && dragOver && "border-primary ring-2 ring-primary/20",
+              joinedBox && error && "border-destructive"
             ),
-            onDragOver,
-            onDragLeave: () => setDragOver(false),
-            onDrop,
             children: [
-              resolvedLeadingIcons.map((ico, i) => /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center justify-center text-muted-foreground", children: ico }, i)),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center gap-2 overflow-hidden", children: hasItems ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                visibleItems.map((item) => /* @__PURE__ */ jsx(FileChip, { item, condensed: multiple }, item.id)),
-                isOverflowing && /* @__PURE__ */ jsxs("span", { className: "flex h-5 items-center justify-center rounded-sm bg-muted px-1.5 text-xs font-medium text-muted-foreground", children: [
-                  "+",
-                  hiddenCount
-                ] })
-              ] }) : /* @__PURE__ */ jsx("span", { className: "truncate text-muted-foreground", children: placeholder }) }),
-              resolvedTrailingIcons.map((ico, i) => /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center justify-center text-muted-foreground", children: ico }, i)),
-              /* @__PURE__ */ jsx(
-                Button2,
+              leadingControl && /* @__PURE__ */ jsx(
+                "div",
                 {
-                  type: "button",
-                  variant: "ghost",
-                  size: "icon",
-                  className: "h-6 w-6 shrink-0 text-muted-foreground hover:text-foreground",
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    openPicker();
-                  },
-                  children: /* @__PURE__ */ jsx(FolderUp, { className: "h-4 w-4" })
+                  className: cn(
+                    "flex items-center",
+                    joinControls && !showDropArea && "border-r bg-muted/50 px-3",
+                    leadingControlClassName
+                  ),
+                  children: leadingControl
                 }
               ),
-              /* @__PURE__ */ jsx(ChevronDown, { className: cn("h-4 w-4 shrink-0 text-muted-foreground opacity-50 transition-transform duration-200", popoverOpen && "rotate-180") })
+              /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: TriggerRegion }),
+              trailingControl && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "flex items-center",
+                    joinControls && !showDropArea && "border-l bg-muted/50 px-3",
+                    trailingControlClassName
+                  ),
+                  children: trailingControl
+                }
+              )
             ]
           }
-        ) }),
+        ),
+        ExternalFileList,
         /* @__PURE__ */ jsx(
-          PopoverContent2,
+          "input",
           {
-            className: "w-(--radix-popover-trigger-width) p-0",
-            align: "start",
-            children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b px-3 py-2 text-xs font-medium text-muted-foreground", children: [
-                /* @__PURE__ */ jsx("span", { children: anySelected ? `${selectedIds.size} selected` : `${items.length} files total` }),
-                anySelected ? /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    className: "text-destructive hover:underline",
-                    onClick: handleBulkRemove,
-                    children: "Remove selected"
-                  }
-                ) : items.length > 0 && /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    className: "text-muted-foreground hover:text-foreground",
-                    onClick: () => emitChange([], { action: "clear" }),
-                    children: "Clear all"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx(ScrollArea2, { className: "h-auto max-h-[300px] w-full p-1", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-                items.map((item) => {
-                  var _a;
-                  const selected = selectedIds.has(item.id);
-                  const toggle = () => {
-                    const next = new Set(selectedIds);
-                    if (next.has(item.id)) next.delete(item.id);
-                    else next.add(item.id);
-                    setSelectedIds(next);
-                  };
-                  return /* @__PURE__ */ jsxs("div", { className: "group flex items-center gap-3 rounded-md px-2 py-2 text-sm transition-colors hover:bg-muted/50", children: [
-                    showCheckboxes && multiple && /* @__PURE__ */ jsx(Checkbox2, { checked: selected, onCheckedChange: toggle, className: "h-4 w-4 shrink-0" }),
-                    /* @__PURE__ */ jsx(FileThumbnail, { item }),
-                    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-                      /* @__PURE__ */ jsx("div", { className: "truncate font-medium", children: (_a = formatFileName == null ? void 0 : formatFileName(item)) != null ? _a : item.name }),
-                      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
-                        /* @__PURE__ */ jsx("span", { children: formatFileSize(item.size) }),
-                        item.status === "failed" && /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "Failed" })
-                      ] })
-                    ] }),
-                    /* @__PURE__ */ jsx(
-                      Button2,
-                      {
-                        variant: "ghost",
-                        size: "icon",
-                        className: "h-7 w-7 opacity-0 group-hover:opacity-100",
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          handleRemove(item.id);
-                        },
-                        children: /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5 text-muted-foreground" })
-                      }
-                    )
-                  ] }, item.id);
-                }),
-                items.length === 0 && /* @__PURE__ */ jsx("div", { className: "py-4 text-center text-xs text-muted-foreground", children: "No files selected" })
-              ] }) }),
-              /* @__PURE__ */ jsx("div", { className: "border-t p-1", children: /* @__PURE__ */ jsxs(
-                Button2,
-                {
-                  variant: "secondary",
-                  size: "sm",
-                  className: "w-full justify-start text-xs",
-                  onClick: () => {
-                    setPopoverOpen(false);
-                    openPicker();
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(Plus, { className: "mr-2 h-3 w-3" }),
-                    multiple ? "Add files..." : items.length ? "Replace file" : "Add file"
-                  ]
-                }
-              ) })
-            ] })
+            ref: fileInputRef,
+            type: "file",
+            className: "hidden",
+            multiple,
+            accept: Array.isArray(accept) ? accept.join(",") : accept,
+            onChange: onNativeChange
           }
         )
-      ] });
-    }, [
-      showDropArea,
-      items,
-      multiple,
-      dragOver,
-      isDisabled,
-      placeholder,
-      joinControls,
-      hasExternalControls,
-      resolvedLeadingIcons,
-      resolvedTrailingIcons,
-      popoverOpen,
-      COLLAPSE_LIMIT,
-      heightCls,
-      openPicker,
-      onDragOver,
-      onDrop,
-      renderDropArea,
-      className,
-      error,
-      dropAreaClassName,
-      dropIcon,
-      dropTitle,
-      dropDescription,
-      selectedIds,
-      showCheckboxes,
-      handleBulkRemove,
-      emitChange,
-      formatFileName,
-      formatFileSize,
-      handleRemove
-    ]);
-    const showExternalList = multiple && showDropArea && items.length > 0;
-    const anySelectedExternal = selectedIds.size > 0 && showCheckboxes && multiple;
-    const ExternalFileList = showExternalList ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      (anySelectedExternal || items.length > 0) && /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center justify-between px-1 text-xs text-muted-foreground", children: [
-        /* @__PURE__ */ jsxs("span", { children: [
-          items.length,
-          " files"
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-          anySelectedExternal && /* @__PURE__ */ jsx("button", { type: "button", onClick: handleBulkRemove, className: "text-destructive hover:underline", children: "Remove selected" }),
-          /* @__PURE__ */ jsx("button", { type: "button", onClick: () => emitChange([], { action: "clear" }), className: "hover:text-foreground", children: "Clear all" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx(ScrollArea2, { className: cn("mt-1 w-full", listClassName), children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: items.map((item, index2) => {
-        var _a;
-        const selected = selectedIds.has(item.id);
-        const toggle = () => {
-          const next = new Set(selectedIds);
-          if (next.has(item.id)) next.delete(item.id);
-          else next.add(item.id);
-          setSelectedIds(next);
-        };
-        if (renderFileItem) {
-          return renderFileItem({ item, index: index2, selected, toggleSelected: toggle, remove: () => handleRemove(item.id) });
-        }
-        return /* @__PURE__ */ jsxs("div", { className: "group relative flex items-center gap-3 rounded-lg border bg-card p-2 pr-3 transition-all hover:bg-muted/30", children: [
-          showCheckboxes && /* @__PURE__ */ jsx(Checkbox2, { checked: selected, onCheckedChange: toggle, className: "ml-1" }),
-          /* @__PURE__ */ jsx(FileThumbnail, { item }),
-          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [
-            /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between gap-2", children: /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-foreground", children: (_a = formatFileName == null ? void 0 : formatFileName(item)) != null ? _a : item.name }) }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
-              /* @__PURE__ */ jsx("span", { children: formatFileSize(item.size) }),
-              item.status === "loading" && /* @__PURE__ */ jsx("span", { className: "flex items-center gap-1 text-primary", children: /* @__PURE__ */ jsx(LoaderCircle, { className: "h-3 w-3 animate-spin" }) }),
-              item.status === "failed" && /* @__PURE__ */ jsx("span", { className: "flex items-center gap-1 text-destructive", children: /* @__PURE__ */ jsx(CircleAlert, { className: "h-3 w-3" }) }),
-              item.status === "done" && /* @__PURE__ */ jsx(CircleCheck, { className: "h-3 w-3 text-emerald-500" })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx("button", { type: "button", onClick: () => handleRemove(item.id), className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-muted-foreground/70 opacity-0 transition-all hover:bg-destructive/10 hover:text-destructive group-hover:opacity-100", children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" }) })
-        ] }, item.id);
-      }) }) })
-    ] }) : null;
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        className: cn("w-full", className),
-        "aria-disabled": isDisabled,
-        "aria-invalid": !!error,
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: cn(
-            "flex w-full",
-            joinControls && extendBoxToControls && !showDropArea ? "items-stretch rounded-md border border-input bg-surfaces-input shadow-xs ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2" : "items-start gap-2"
-          ), children: [
-            leadingControl && /* @__PURE__ */ jsx("div", { className: cn(
-              "flex items-center",
-              joinControls && !showDropArea && "border-r bg-muted/50 px-3",
-              leadingControlClassName
-            ), children: leadingControl }),
-            /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: TriggerRegion }),
-            trailingControl && /* @__PURE__ */ jsx("div", { className: cn(
-              "flex items-center",
-              joinControls && !showDropArea && "border-l bg-muted/50 px-3",
-              trailingControlClassName
-            ), children: trailingControl })
-          ] }),
-          ExternalFileList,
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              ref: fileInputRef,
-              type: "file",
-              className: "hidden",
-              multiple,
-              accept: Array.isArray(accept) ? accept.join(",") : accept,
-              onChange: onNativeChange
-            }
-          )
-        ]
-      }
-    );
-  }
-);
+      ]
+    }
+  );
+});
 ShadcnFileVariant.displayName = "ShadcnFileVariant";
 var file_default = ShadcnFileVariant;
 
@@ -43142,7 +43307,7 @@ function normalizeValue(val, multiple) {
   if (Array.isArray(val)) return val[0] || "";
   return val || "";
 }
-function capitalizeFirst6(label) {
+function capitalizeFirst5(label) {
   if (!label) return label;
   return label.charAt(0).toUpperCase() + label.slice(1);
 }
@@ -43168,7 +43333,7 @@ function normalizeOption(input, {
       label2 = String(rawValue != null ? rawValue : value2);
     }
     if (autoCap && typeof label2 === "string") {
-      label2 = capitalizeFirst6(label2);
+      label2 = capitalizeFirst5(label2);
     }
     const icon = optionIcon != null ? anyInput[optionIcon] : (_b = anyInput.icon) != null ? _b : void 0;
     const disabled = optionDisabled != null ? !!anyInput[optionDisabled] : !!anyInput.disabled;
@@ -43190,7 +43355,7 @@ function normalizeOption(input, {
     const value2 = String(input);
     let label2 = value2;
     if (autoCap && typeof label2 === "string") {
-      label2 = capitalizeFirst6(label2);
+      label2 = capitalizeFirst5(label2);
     }
     return {
       ui: {
@@ -43204,7 +43369,7 @@ function normalizeOption(input, {
   const value = String(baseValue);
   let label = anyInput.label != null ? anyInput.label : String(value);
   if (autoCap && typeof label === "string") {
-    label = capitalizeFirst6(label);
+    label = capitalizeFirst5(label);
   }
   return {
     ui: {