@the-portland-company/shell 0.48.0 → 0.49.0-rc.1

package/dist/app-chrome.cjs

@@ -1939,7 +1939,7 @@ function NavSidebar({
           ]
         }
       ) }) : null,
-      /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: "flex flex-col gap-[var(--sidebar-item-gap,0.25rem)]", children: [
         nav.groupLabel ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-2 pb-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--sidebar-text-muted,var(--muted))]", children: nav.groupLabel }) : null,
         nav.items.map((item, idx) => {
           if (item.kind === "section") {
@@ -2102,10 +2102,19 @@ function NavRow({
   const washActive = variant !== "top";
   const activeClasses = washActive ? "bg-[color:var(--mode-accent-surface,var(--panel-elevated))] text-[color:var(--color-accent)] shadow-sm" : "bg-[color:var(--color-accent)] text-white shadow-sm";
   const wrapperClasses = [
-    "group relative block overflow-hidden rounded-md transition",
+    "group relative block overflow-hidden transition",
+    "rounded-[var(--sidebar-item-radius,0.375rem)]",
     active ? activeClasses : "text-[color:var(--sidebar-text,var(--muted))] hover:text-white"
   ].join(" ");
-  const rowPadding = isSub ? "px-3 py-1.5 text-[13px]" : "px-3 py-2 text-sm";
+  const rowPadding = isSub ? [
+    "px-[calc(var(--sidebar-item-padding-x,0.75rem)*0.75)]",
+    "py-[calc(var(--sidebar-item-padding-y,0.5rem)*0.6)]",
+    "text-[length:calc(var(--sidebar-item-font-size,1rem)*0.875)]"
+  ].join(" ") : [
+    "px-[var(--sidebar-item-padding-x,0.75rem)]",
+    "py-[var(--sidebar-item-padding-y,0.5rem)]",
+    "text-[length:var(--sidebar-item-font-size,1rem)]"
+  ].join(" ");
   const iconSize = isSub ? 16 : 18;
   const iconClass = active && !washActive ? "text-white" : "text-current";
   const inner = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -2130,10 +2139,17 @@ function NavRow({
         }
       )
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `relative z-10 flex items-center gap-3 font-semibold ${rowPadding}`, children: [
-      Icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: iconSize, className: iconClass }) : null,
-      item.label
-    ] })
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        style: { fontWeight: "var(--sidebar-item-font-weight, 400)" },
+        className: `relative z-10 flex items-center gap-3 ${rowPadding}`,
+        children: [
+          Icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: iconSize, className: iconClass }) : null,
+          item.label
+        ]
+      }
+    )
   ] });
   if (item.disabled) {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2194,19 +2210,26 @@ function NavGroup({
               style: { background: NAV_HOVER_GRADIENT }
             }
           ) : null,
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative z-10 flex items-center gap-3 px-3 py-2 text-sm font-semibold", children: [
-            Icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: 18, className: active ? "text-white" : "text-current" }) : null,
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: item.label }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ChevronDown,
-              {
-                className: [
-                  "shrink-0 opacity-80 transition-transform duration-200",
-                  open ? "rotate-180" : ""
-                ].join(" ")
-              }
-            )
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              style: { fontWeight: "var(--sidebar-item-font-weight, 400)" },
+              className: "relative z-10 flex items-center gap-3 px-[var(--sidebar-item-padding-x,0.75rem)] py-[var(--sidebar-item-padding-y,0.5rem)] text-[length:var(--sidebar-item-font-size,1rem)]",
+              children: [
+                Icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: 18, className: active ? "text-white" : "text-current" }) : null,
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: item.label }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ChevronDown,
+                  {
+                    className: [
+                      "shrink-0 opacity-80 transition-transform duration-200",
+                      open ? "rotate-180" : ""
+                    ].join(" ")
+                  }
+                )
+              ]
+            }
+          )
         ]
       }
     ),