@flytedan/flytebot-design-system 0.13.0 → 0.14.0

package/dist/index.cjs

@@ -8673,6 +8673,30 @@ function BudgetReallocator({
     setDraft(spend);
     if (onCancel) onCancel();
   };
+  const trackRef = React39.useRef(null);
+  const chipRef = React39.useRef(null);
+  const [chipLeft, setChipLeft] = React39.useState(null);
+  React39.useLayoutEffect(() => {
+    const track = trackRef.current;
+    if (!dirty || !track) {
+      setChipLeft(null);
+      return;
+    }
+    const measure = () => {
+      const chip = chipRef.current;
+      if (!chip) return;
+      const trackWidth = track.clientWidth;
+      const chipWidth = chip.offsetWidth;
+      const half = chipWidth / 2;
+      const desired = pct / 100 * trackWidth;
+      setChipLeft(Math.min(Math.max(desired, half), Math.max(trackWidth - half, half)));
+    };
+    measure();
+    if (typeof ResizeObserver !== "function") return;
+    const ro = new ResizeObserver(measure);
+    ro.observe(track);
+    return () => ro.disconnect();
+  }, [dirty, pct]);
   return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
     "div",
     {
@@ -8687,9 +8711,20 @@ function BudgetReallocator({
             /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(CsiBadge, { band: nextBand, crp: nextCrp, size: "medium", preview: true })
           ] }) : null
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "fd-slider", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "fd-slider", ref: trackRef, children: [
           /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "fd-slider-fill", style: { width: pct + "%" } }),
-          dirty ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "fd-slider-chip", style: { left: pct + "%", background: delta < 0 ? "var(--danger-solid)" : "var(--ok-solid)" }, children: (delta < 0 ? "\u2212$" : "+$") + Math.abs(delta).toLocaleString() }) : null,
+          dirty ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+            "span",
+            {
+              ref: chipRef,
+              className: "fd-slider-chip",
+              style: {
+                left: chipLeft === null ? pct + "%" : chipLeft,
+                background: delta < 0 ? "var(--danger-solid)" : "var(--ok-solid)"
+              },
+              children: (delta < 0 ? "\u2212$" : "+$") + Math.abs(delta).toLocaleString()
+            }
+          ) : null,
           /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
             "input",
             {
@@ -10857,6 +10892,7 @@ function FileBrowser({
   onMoveFile,
   onOpenFile,
   onRemoveFile,
+  onDeleteFolder,
   onUpload,
   loading = false,
   permissions,
@@ -10868,10 +10904,12 @@ function FileBrowser({
   const canMove = perm.canMove !== false && (!!onMoveFolder || !!onMoveFile);
   const canUpload = perm.canUpload !== false && !!onUpload;
   const canRemoveFile = perm.canRemoveFile !== false && !!onRemoveFile;
+  const canDeleteFolder = perm.canDeleteFolder !== false && !!onDeleteFolder;
   const [createOpen, setCreateOpen] = React48.useState(false);
   const [createName, setCreateName] = React48.useState("");
   const [renameTarget, setRenameTarget] = React48.useState(null);
   const [renameValue, setRenameValue] = React48.useState("");
+  const [deleteTarget, setDeleteTarget] = React48.useState(null);
   const uploadInputRef = React48.useRef(null);
   const crumbFolders = React48.useMemo(() => ancestorsOf(folders, currentFolderId), [folders, currentFolderId]);
   const subfolders = React48.useMemo(() => childrenOf(folders, currentFolderId), [folders, currentFolderId]);
@@ -10907,6 +10945,13 @@ function FileBrowser({
     if (name && renameTarget && onRenameFolder) onRenameFolder(renameTarget.id, name);
     setRenameTarget(null);
   };
+  const openDelete = (folder) => {
+    setDeleteTarget(folder);
+  };
+  const confirmDelete = () => {
+    if (deleteTarget && onDeleteFolder) onDeleteFolder(deleteTarget);
+    setDeleteTarget(null);
+  };
   const content = /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: ["fd-fb", className].filter(Boolean).join(" "), children: [
     /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "fd-fb-head", children: [
       /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("nav", { className: "fd-fb-crumbs", "aria-label": "Folder path", children: [
@@ -11010,7 +11055,8 @@ function FileBrowser({
                       destinations: flattenDestinations(folders, f.id),
                       onPick: (target) => moveIntoFolder({ kind: "folder", id: f.id }, target)
                     }
-                  ) : null
+                  ) : null,
+                  canDeleteFolder ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(IconButton, { icon: "trash-simple", label: "Delete " + f.name, size: "sm", variant: "ghost", onClick: () => openDelete(f) }) : null
                 ] })
               },
               f.id
@@ -11074,7 +11120,20 @@ function FileBrowser({
         "aria-label": "Folder name",
         autoFocus: true
       }
-    ) })
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+      Modal,
+      {
+        open: deleteTarget != null,
+        title: deleteTarget ? "Delete \u201C" + deleteTarget.name + "\u201D?" : "Delete folder?",
+        description: "This can't be undone. The folder must be empty.",
+        onClose: () => setDeleteTarget(null),
+        footer: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_jsx_runtime79.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Button, { variant: "secondary", onClick: () => setDeleteTarget(null), children: "Cancel" }),
+          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Button, { variant: "danger", onClick: confirmDelete, children: "Delete" })
+        ] })
+      }
+    )
   ] });
   if (!canUpload) return content;
   return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Dropzone, { className: "fd-fb-dropzone", onFiles: (picked) => onUpload && onUpload(picked, currentFolderId), label: "Drop files to upload", children: content });