@invana/ui 0.0.16 → 0.0.18

package/dist/index.cjs

@@ -3155,6 +3155,110 @@ function PanelContent({
     footerContent ? /* @__PURE__ */ jsxRuntime.jsx(CardFooter, { className: footerClassName, children: footerContent }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {})
   ] }) });
 }
+function PanelStack({
+  sections,
+  headerHeight = 35,
+  withHandle = false,
+  className,
+  headerClassName,
+  bodyClassName
+}) {
+  const refs = React23__namespace.useRef({});
+  const [collapsed, setCollapsed] = React23__namespace.useState(
+    () => Object.fromEntries(sections.map((s) => [s.id, !!s.defaultCollapsed]))
+  );
+  const didInit = React23__namespace.useRef(false);
+  React23__namespace.useLayoutEffect(() => {
+    if (didInit.current) return;
+    didInit.current = true;
+    for (const section of sections) {
+      if (section.defaultCollapsed) refs.current[section.id]?.collapse();
+    }
+  }, []);
+  const toggle = (id) => {
+    const ref = refs.current[id];
+    if (!ref) return;
+    if (ref.isCollapsed()) ref.expand();
+    else ref.collapse();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ResizablePanelGroup,
+    {
+      orientation: "vertical",
+      className: cn("h-full w-full", className),
+      children: sections.map((section, index) => {
+        const Icon = section.icon;
+        const isCollapsed = collapsed[section.id];
+        return /* @__PURE__ */ jsxRuntime.jsxs(React23__namespace.Fragment, { children: [
+          index > 0 && /* @__PURE__ */ jsxRuntime.jsx(ResizableHandle, { withHandle }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            ResizablePanel,
+            {
+              collapsible: true,
+              collapsedSize: `${headerHeight}px`,
+              minSize: section.minSize ?? `${headerHeight + 64}px`,
+              defaultSize: section.defaultSize,
+              panelRef: (ref) => {
+                refs.current[section.id] = ref;
+              },
+              onResize: (size) => {
+                const next = size.inPixels <= headerHeight + 1;
+                setCollapsed(
+                  (prev) => prev[section.id] === next ? prev : { ...prev, [section.id]: next }
+                );
+              },
+              className: "flex flex-col overflow-hidden",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    style: { height: headerHeight },
+                    className: cn(
+                      "flex shrink-0 items-center pr-2 text-muted-foreground",
+                      headerClassName
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => toggle(section.id),
+                          "aria-expanded": !isCollapsed,
+                          className: cn(
+                            "flex h-full min-w-0 flex-1 items-center gap-1 pl-2 text-left",
+                            "transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                          ),
+                          children: [
+                            isCollapsed ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4 shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4 shrink-0" }),
+                            Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-3.5 w-3.5 shrink-0" }),
+                            typeof section.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-xs font-semibold uppercase tracking-wide", children: section.title }) : (
+                              // Custom node: rendered as-is so the consumer owns the
+                              // styling (icon, casing, colour, badges…).
+                              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex min-w-0 flex-1 items-center", children: section.title })
+                            )
+                          ]
+                        }
+                      ),
+                      section.actions && !isCollapsed && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1 pl-2", children: section.actions })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn("min-h-0 flex-1 overflow-auto", bodyClassName),
+                    hidden: isCollapsed,
+                    children: section.content
+                  }
+                )
+              ]
+            }
+          )
+        ] }, section.id);
+      })
+    }
+  );
+}
 function OptionRow({ option }) {
   const Icon = option.icon;
   return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-col gap-0.5", children: [
@@ -4077,6 +4181,7 @@ exports.PaginationLink = PaginationLink;
 exports.PaginationNext = PaginationNext;
 exports.PaginationPrevious = PaginationPrevious;
 exports.PanelContent = PanelContent;
+exports.PanelStack = PanelStack;
 exports.Popover = Popover;
 exports.PopoverContent = PopoverContent;
 exports.PopoverTrigger = PopoverTrigger;