@lovett/ui 0.2.8 → 0.2.10

package/dist/index.js

@@ -1330,7 +1330,11 @@ var Ctx = createContext({ collapsed: false, nested: false });
 function SidebarNavRoot({ collapsed = false, className, children, ...rest }) {
   return /* @__PURE__ */ jsx(Ctx.Provider, { value: { collapsed, nested: false }, children: /* @__PURE__ */ jsx("nav", { className: cn("flex flex-col gap-0.5", className), ...rest, children }) });
 }
-var ROW_BASE = "relative flex h-9 w-full items-center gap-3 rounded-[var(--radius-md)] px-2.5 text-left text-sm font-medium outline-none transition-colors focus-visible:[box-shadow:var(--ring-focus)]";
+var ROW_BASE = "relative flex h-9 w-full items-center gap-3 overflow-hidden whitespace-nowrap rounded-[var(--radius-md)] px-3 text-left text-sm font-medium outline-none transition-colors focus-visible:[box-shadow:var(--ring-focus)]";
+var FADE = "transition-opacity duration-[var(--dur-fast)] ease-[var(--ease-out)] motion-reduce:transition-none";
+function fadeClass(collapsed) {
+  return cn(FADE, collapsed ? "opacity-0" : "opacity-100");
+}
 var ROW_REST = "text-[rgb(var(--sidebar-text))] hover:bg-[rgb(var(--sidebar-surface-hover))] hover:text-[rgb(var(--sidebar-text-bright))]";
 var ROW_ACTIVE = "bg-[rgb(var(--sidebar-surface-active))] text-[rgb(var(--sidebar-text-bright))]";
 function ActiveBar() {
@@ -1362,28 +1366,17 @@ function SidebarNavItem({
   const rowClass = cn(
     ROW_BASE,
     active ? ROW_ACTIVE : ROW_REST,
-    collapsed && "justify-center px-0",
-    nested && !collapsed && "h-8 pl-[2.375rem] text-[13px]",
+    // A nested row is a step shorter and a step smaller; it keeps its icon.
+    nested && "h-8 gap-2.5 px-2 text-[13px]",
     className
   );
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
     active && !nested && /* @__PURE__ */ jsx(ActiveBar, {}),
-    (!nested || collapsed) && /* @__PURE__ */ jsx(RowIcon, { icon }),
-    nested && !collapsed && // The connector: a dot on the group's rail, filled when active.
-    /* @__PURE__ */ jsx(
-      "span",
-      {
-        "aria-hidden": "true",
-        className: cn(
-          "absolute left-[1.0625rem] top-1/2 h-1.5 w-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full transition-colors",
-          active ? "bg-[rgb(var(--accent))]" : "bg-[rgb(var(--sidebar-rail))]"
-        )
-      }
-    ),
-    !collapsed && /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: label }),
-    !collapsed && badge !== void 0 && badge !== null && /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(RowIcon, { icon }),
+    /* @__PURE__ */ jsx("span", { className: cn("flex-1 truncate", fadeClass(collapsed)), children: label }),
+    badge !== void 0 && badge !== null && /* @__PURE__ */ jsxs(Fragment, { children: [
       " ",
-      /* @__PURE__ */ jsx(RowBadge, { children: badge })
+      /* @__PURE__ */ jsx("span", { className: fadeClass(collapsed), children: /* @__PURE__ */ jsx(RowBadge, { children: badge }) })
     ] })
   ] });
   const shared = {
@@ -1404,6 +1397,15 @@ function SidebarNavItem({
   }
   return /* @__PURE__ */ jsx("a", { ...rest, ...shared, children: content });
 }
+var GroupHeader = forwardRef(function GroupHeader2({ collapsed, disclosureOpen, disclosureControls, ...props }, ref) {
+  const disclosure = collapsed ? {} : {
+    "aria-haspopup": void 0,
+    "data-state": void 0,
+    "aria-expanded": disclosureOpen,
+    "aria-controls": disclosureControls
+  };
+  return /* @__PURE__ */ jsx("button", { ref, type: "button", ...props, ...disclosure });
+});
 function SidebarNavGroup({
   id,
   icon,
@@ -1425,71 +1427,73 @@ function SidebarNavGroup({
   const reactId = useId();
   const bodyId = `sidebar-group-${id}-${reactId}`;
   const labelId = `${bodyId}-label`;
-  if (collapsed) {
-    return /* @__PURE__ */ jsxs(Popover, { children: [
-      /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          title: label,
-          className: cn(ROW_BASE, "justify-center px-0", active ? ROW_ACTIVE : ROW_REST),
-          children: [
-            active && /* @__PURE__ */ jsx(ActiveBar, {}),
-            /* @__PURE__ */ jsx(RowIcon, { icon })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsx(Popover.Content, { side: "right", align: "start", offset: 8, "aria-label": label, className: "min-w-[13rem] p-1.5", children: /* @__PURE__ */ jsxs(Ctx.Provider, { value: { collapsed: false, nested: false }, children: [
+  const [flyoutOpen, setFlyoutOpen] = useState(false);
+  useEffect(() => {
+    if (!collapsed) setFlyoutOpen(false);
+  }, [collapsed]);
+  const header = /* @__PURE__ */ jsxs(
+    GroupHeader,
+    {
+      collapsed,
+      disclosureOpen: open,
+      disclosureControls: bodyId,
+      onClick: (event) => {
+        if (collapsed) return;
+        event.preventDefault();
+        setOpen(!open);
+      },
+      id: labelId,
+      title: collapsed ? label : void 0,
+      className: cn(ROW_BASE, active && (!open || collapsed) ? ROW_ACTIVE : ROW_REST),
+      children: [
+        active && (!open || collapsed) && /* @__PURE__ */ jsx(ActiveBar, {}),
+        /* @__PURE__ */ jsx(RowIcon, { icon }),
+        /* @__PURE__ */ jsx("span", { id: `${labelId}-text`, className: cn("flex-1 truncate", fadeClass(collapsed)), children: label }),
+        badge !== void 0 && badge !== null && /* @__PURE__ */ jsxs(Fragment, { children: [
+          " ",
+          /* @__PURE__ */ jsx("span", { className: fadeClass(collapsed), children: /* @__PURE__ */ jsx(RowBadge, { children: badge }) })
+        ] }),
         /* @__PURE__ */ jsx(
-          "p",
+          ChevronDown,
           {
-            id: labelId,
-            className: "px-2.5 pb-1 pt-1 text-[11px] font-semibold text-[rgb(var(--text-tertiary))]",
-            children: label
+            "aria-hidden": "true",
+            className: cn(
+              "h-3.5 w-3.5 shrink-0 text-[rgb(var(--sidebar-text-dim))] transition-[transform,opacity] duration-[var(--dur-fast)] ease-[var(--ease-out)] motion-reduce:transition-none",
+              collapsed ? "opacity-0" : "opacity-100"
+            ),
+            style: { transform: open && !collapsed ? "rotate(180deg)" : "rotate(0deg)" }
           }
-        ),
-        /* @__PURE__ */ jsx("div", { role: "group", "aria-labelledby": labelId, className: "flex flex-col gap-0.5", children })
-      ] }) })
-    ] });
-  }
+        )
+      ]
+    }
+  );
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: () => setOpen(!open),
-        "aria-expanded": open,
-        "aria-controls": bodyId,
-        id: labelId,
-        className: cn(ROW_BASE, active && !open ? ROW_ACTIVE : ROW_REST),
-        children: [
-          active && !open && /* @__PURE__ */ jsx(ActiveBar, {}),
-          /* @__PURE__ */ jsx(RowIcon, { icon }),
-          /* @__PURE__ */ jsx("span", { id: `${labelId}-text`, className: "flex-1 truncate", children: label }),
-          badge !== void 0 && badge !== null && /* @__PURE__ */ jsxs(Fragment, { children: [
-            " ",
-            /* @__PURE__ */ jsx(RowBadge, { children: badge })
-          ] }),
-          /* @__PURE__ */ jsx(
-            ChevronDown,
-            {
-              "aria-hidden": "true",
-              className: "h-3.5 w-3.5 shrink-0 text-[rgb(var(--sidebar-text-dim))] transition-transform duration-150 ease-out motion-reduce:transition-none",
-              style: { transform: open ? "rotate(180deg)" : "rotate(0deg)" }
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "ds-sidebar-group-body", "data-open": open ? "true" : "false", children: /* @__PURE__ */ jsx("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ jsx(Ctx.Provider, { value: { collapsed: false, nested: true }, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs(Popover, { open: collapsed && flyoutOpen, onOpenChange: setFlyoutOpen, children: [
+      /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: header }),
+      /* @__PURE__ */ jsx(
+        Popover.Content,
+        {
+          side: "right",
+          align: "start",
+          offset: 8,
+          "aria-label": label,
+          className: "min-w-[13rem] p-1.5",
+          children: /* @__PURE__ */ jsxs(Ctx.Provider, { value: { collapsed: false, nested: false }, children: [
+            /* @__PURE__ */ jsx("p", { className: "px-2.5 pb-1 pt-1 text-[11px] font-semibold text-[rgb(var(--text-tertiary))]", children: label }),
+            /* @__PURE__ */ jsx("div", { role: "group", "aria-label": label, className: "flex flex-col gap-0.5", children })
+          ] })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "ds-sidebar-group-body", "data-open": open && !collapsed ? "true" : "false", children: /* @__PURE__ */ jsx("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ jsx(Ctx.Provider, { value: { collapsed: false, nested: true }, children: /* @__PURE__ */ jsx(
       "div",
       {
         id: bodyId,
         role: "group",
         "aria-labelledby": `${labelId}-text`,
-        className: "relative flex flex-col gap-0.5 py-0.5 before:absolute before:bottom-1 before:left-[1.0625rem] before:top-1 before:w-px before:-translate-x-1/2 before:bg-[rgb(var(--sidebar-rail))]",
-        inert: !open,
-        "aria-hidden": !open,
+        className: "ml-[calc(1.25rem-0.5px)] flex flex-col gap-0.5 border-l border-[rgb(var(--sidebar-rail))] py-1 pl-2",
+        inert: !open || collapsed,
+        "aria-hidden": !open || collapsed,
         children
       }
     ) }) }) })