@assure-one/design-system 1.4.0 → 1.4.2

package/dist/index.d.ts

@@ -2384,14 +2384,20 @@ declare const EngagementTimelineStep: React$1.ForwardRefExoticComponent<Engageme
 /**
  * FolderTree — collapsible document tree (Documents panel / mobile sheet).
  * Rows are chevron + folder + name + optional count. Each row has two
- * intents and therefore two DOM elements (skill §4): the body is a
- * `<button>` that selects/opens the folder, and the chevron is a separate
+ * intents and therefore two DOM elements (skill §4): the chevron is a
  * `<button>` that only toggles expansion (so `aria-expanded` is accurate
- * and the two are independently keyboard-reachable).
+ * and is independently keyboard-reachable), and the body is a separate
+ * `<button>` that selects the folder.
+ *
+ * Sizing matches the firm Documents workspace: 12px name rows, a 13px
+ * chevron column, 14px folder glyphs, and a flush-right tabular count pill.
+ * Nesting is drawn VS Code / Linear style — each nested level renders a
+ * single continuous vertical indent guide in the gutter (no per-row elbow
+ * connectors), so stacked siblings form one clean line down the level.
  *
  * Open state is uncontrolled by default (SSR-safe lazy initializer seeded
  * from `defaultOpenIds`) or fully controlled via `openIds` + `onOpenChange`.
- * The active row is tinted with the Pro tone (`bg-pro-bg`).
+ * The active row is tinted with the Pro tone (`bg-pro-bg` / `text-pro-fg`).
  */
 interface FolderNode {
     id: string;

package/dist/index.js

@@ -9772,7 +9772,12 @@ var EngagementTimelineStep = forwardRef(
   }
 );
 EngagementTimelineStep.displayName = "EngagementTimelineStep";
-var INDENT = 18;
+var ROW_BASE = "group/row flex w-full items-center gap-1.5 rounded-lg px-2.5 py-1 text-left text-[12px] font-medium transition-colors duration-[120ms] motion-reduce:transition-none";
+var ROW_INACTIVE = "text-fg-2 hover:bg-surface-2 hover:text-fg";
+var ROW_ACTIVE = "bg-pro-bg text-pro-fg font-semibold";
+var BADGE_BASE = "ml-auto min-w-[18px] rounded-full px-[5px] py-px text-center text-[10px] font-[650] tabular-nums";
+var BADGE_INACTIVE = "bg-surface-2 text-fg-4";
+var BADGE_ACTIVE = "bg-pro-bg text-pro-fg";
 var FolderTree = forwardRef(function FolderTree2({ nodes, activeId, onSelect, defaultOpenIds, openIds, onOpenChange, className, ...props }, ref) {
   const isControlled = openIds !== void 0;
   const [internalOpen, setInternalOpen] = useState(() => new Set(defaultOpenIds ?? []));
@@ -9791,59 +9796,62 @@ var FolderTree = forwardRef(function FolderTree2({ nodes, activeId, onSelect, de
     const hasChildren = Boolean(node.children?.length);
     const isOpen = open.has(node.id);
     const isActive = activeId === node.id;
-    return /* @__PURE__ */ jsxs("li", { children: [
-      /* @__PURE__ */ jsxs(
-        "div",
+    return /* @__PURE__ */ jsxs("li", { className: "relative", children: [
+      depth > 0 && /* @__PURE__ */ jsx(
+        "span",
         {
-          className: cn(
-            "group/row flex items-stretch rounded-[var(--radius-icon)]",
-            isActive ? "bg-pro-bg" : "hover:bg-bg-2"
-          ),
-          children: [
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                "aria-expanded": hasChildren ? isOpen : void 0,
-                "aria-label": isOpen ? `Collapse ${node.name}` : `Expand ${node.name}`,
-                onClick: () => hasChildren && toggle(node.id),
-                disabled: !hasChildren,
-                className: "flex w-6 shrink-0 items-center justify-center self-stretch text-fg-4 disabled:opacity-0",
-                style: { marginLeft: depth * INDENT },
-                tabIndex: hasChildren ? 0 : -1,
-                children: /* @__PURE__ */ jsx(
-                  ChevronRightIcon,
-                  {
-                    className: cn(
-                      "size-3.5 transition-transform duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
-                      isOpen && "rotate-90"
-                    ),
-                    "aria-hidden": "true"
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              "button",
-              {
-                type: "button",
-                onClick: () => onSelect?.(node.id),
-                "aria-current": isActive ? "true" : void 0,
-                className: cn(
-                  "flex min-w-0 flex-1 items-center gap-2 py-1.5 pr-2 text-left text-sm focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-focus-ring)]",
-                  isActive ? "text-pro-fg font-medium" : "text-fg-2"
-                ),
-                children: [
-                  /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "shrink-0 [&_svg]:size-4", children: isOpen && hasChildren ? /* @__PURE__ */ jsx(FolderOpenIcon, {}) : /* @__PURE__ */ jsx(FolderClosedIcon, {}) }),
-                  /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: node.name }),
-                  node.count != null && /* @__PURE__ */ jsx("span", { className: "text-fg-4 shrink-0 text-xs tabular-nums", children: node.count })
-                ]
-              }
-            )
-          ]
+          "aria-hidden": true,
+          className: "pointer-events-none absolute left-[-11px] top-0 bottom-0 w-px bg-[color:var(--color-rule-strong)]"
         }
       ),
-      hasChildren && isOpen && /* @__PURE__ */ jsx("ul", { className: "flex flex-col", children: node.children.map((child) => renderNode(child, depth + 1)) })
+      /* @__PURE__ */ jsxs("div", { className: cn(ROW_BASE, isActive ? ROW_ACTIVE : ROW_INACTIVE), children: [
+        hasChildren ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-expanded": isOpen,
+            "aria-label": isOpen ? `Collapse ${node.name}` : `Expand ${node.name}`,
+            onClick: (e) => {
+              e.stopPropagation();
+              toggle(node.id);
+            },
+            className: cn(
+              "shrink-0 text-fg-4 transition-transform duration-[150ms] motion-reduce:transition-none",
+              isOpen && "rotate-90"
+            ),
+            children: /* @__PURE__ */ jsx(ChevronRightIcon, { size: 13, "aria-hidden": "true" })
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: "w-[13px] shrink-0", "aria-hidden": true }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => onSelect?.(node.id),
+            "aria-current": isActive ? "true" : void 0,
+            className: "flex min-w-0 flex-1 items-center gap-1.5 text-left text-[12px] focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-focus-ring)]",
+            children: [
+              isOpen && hasChildren ? /* @__PURE__ */ jsx(
+                FolderOpenIcon,
+                {
+                  size: 14,
+                  "aria-hidden": "true",
+                  className: cn("shrink-0", isActive ? "text-pro-fg" : "text-fg-3")
+                }
+              ) : /* @__PURE__ */ jsx(
+                FolderClosedIcon,
+                {
+                  size: 14,
+                  "aria-hidden": "true",
+                  className: cn("shrink-0", isActive ? "text-pro-fg" : "text-fg-3")
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: node.name })
+            ]
+          }
+        ),
+        node.count != null && /* @__PURE__ */ jsx("span", { className: cn(BADGE_BASE, isActive ? BADGE_ACTIVE : BADGE_INACTIVE), children: node.count })
+      ] }),
+      hasChildren && isOpen && /* @__PURE__ */ jsx("ul", { className: "relative flex flex-col pl-[22px]", children: node.children.map((child) => renderNode(child, depth + 1)) })
     ] }, node.id);
   };
   return /* @__PURE__ */ jsx("div", { ref, className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsx("ul", { className: "flex flex-col", children: nodes.map((node) => renderNode(node, 0)) }) });