@bergetai/ui 0.12.0 → 0.12.1

package/dist/index.d.cts

@@ -411,14 +411,15 @@ declare function SidebarFooter({ className, ...props }: React$1.ComponentProps<t
  *  against the full 60px rail width. */
 declare function SidebarHeader({ className, ...props }: React$1.ComponentProps<typeof SidebarHeader$1>): react_jsx_runtime.JSX.Element;
 /** Berget brand slot for the sidebar header. Fades between the full logo
- *  (expanded) and the symbol pinned to the icon-rail slot (collapsed).
+ *  (expanded) and the symbol (collapsed icon rail).
  *
  *  Implementation notes — all load-bearing:
- *  - The symbol is pinned to the rail slot (60px, px-3) so it appears in its
- *    final position the moment collapse starts — its glyph lines up with the
- *    leading glyph of the full logo, which fades away beneath it. px-3 on both
- *    layers keeps the logo's left inset identical in both states (12px), so
- *    the mark never shifts when toggling.
+ *  - The symbol glides instead of popping: at pl-5 its box sits pixel-perfect
+ *    under the leading glyph of the full logo (both 35.5x32 at x=20), and its
+ *    padding-left animates to pl-3 (centered in the 60px rail) over 200ms
+ *    linear — exactly matching the sidebar width transition. The mark never
+ *    jumps: collapse fades the logotype out while the symbol glides into its
+ *    gliding position; expand reverses it.
  *  - Both layers stay mounted: display isn't animatable, so unmounting the
  *    symbol on expand would blink it off in one frame while the logotype is
  *    still fading in. visibility+opacity handle hiding instead; visibility is
@@ -427,6 +428,9 @@ declare function SidebarHeader({ className, ...props }: React$1.ComponentProps<t
  *  - The row is overflow-hidden and the logo shrink-0: when the rail narrows,
  *    the fading full logo is clipped at the moving edge instead of being
  *    squeezed (the SVG viewBox would otherwise scale it down).
+ *  - px-5 aligns the logo's left edge with the 20px content line of the
+ *    expanded sidebar (menu icons and group-label text both sit at 20px).
+ *    The fading full logo clips under the shrinking rail edge while fading.
  *
  *  Renders its own SidebarHeader (px-0 — the row owns all horizontal padding,
  *  so its position can't jump when the header's icon-mode padding lands).

package/dist/index.d.ts

@@ -411,14 +411,15 @@ declare function SidebarFooter({ className, ...props }: React$1.ComponentProps<t
  *  against the full 60px rail width. */
 declare function SidebarHeader({ className, ...props }: React$1.ComponentProps<typeof SidebarHeader$1>): react_jsx_runtime.JSX.Element;
 /** Berget brand slot for the sidebar header. Fades between the full logo
- *  (expanded) and the symbol pinned to the icon-rail slot (collapsed).
+ *  (expanded) and the symbol (collapsed icon rail).
  *
  *  Implementation notes — all load-bearing:
- *  - The symbol is pinned to the rail slot (60px, px-3) so it appears in its
- *    final position the moment collapse starts — its glyph lines up with the
- *    leading glyph of the full logo, which fades away beneath it. px-3 on both
- *    layers keeps the logo's left inset identical in both states (12px), so
- *    the mark never shifts when toggling.
+ *  - The symbol glides instead of popping: at pl-5 its box sits pixel-perfect
+ *    under the leading glyph of the full logo (both 35.5x32 at x=20), and its
+ *    padding-left animates to pl-3 (centered in the 60px rail) over 200ms
+ *    linear — exactly matching the sidebar width transition. The mark never
+ *    jumps: collapse fades the logotype out while the symbol glides into its
+ *    gliding position; expand reverses it.
  *  - Both layers stay mounted: display isn't animatable, so unmounting the
  *    symbol on expand would blink it off in one frame while the logotype is
  *    still fading in. visibility+opacity handle hiding instead; visibility is
@@ -427,6 +428,9 @@ declare function SidebarHeader({ className, ...props }: React$1.ComponentProps<t
  *  - The row is overflow-hidden and the logo shrink-0: when the rail narrows,
  *    the fading full logo is clipped at the moving edge instead of being
  *    squeezed (the SVG viewBox would otherwise scale it down).
+ *  - px-5 aligns the logo's left edge with the 20px content line of the
+ *    expanded sidebar (menu icons and group-label text both sit at 20px).
+ *    The fading full logo clips under the shrinking rail edge while fading.
  *
  *  Renders its own SidebarHeader (px-0 — the row owns all horizontal padding,
  *  so its position can't jump when the header's icon-mode padding lands).

package/dist/index.js

@@ -2506,7 +2506,7 @@ function SidebarHeader2({
   );
 }
 function SidebarLogo() {
-  return /* @__PURE__ */ jsx25(SidebarHeader, { className: "px-0", children: /* @__PURE__ */ jsxs14("div", { className: "relative flex h-15 items-center overflow-hidden px-3", children: [
+  return /* @__PURE__ */ jsx25(SidebarHeader, { className: "px-0", children: /* @__PURE__ */ jsxs14("div", { className: "relative flex h-15 items-center overflow-hidden px-5", children: [
     /* @__PURE__ */ jsx25(
       BergetLogo,
       {
@@ -2515,7 +2515,7 @@ function SidebarLogo() {
         className: "shrink-0 transition-[opacity,visibility] duration-150 group-data-[collapsible=icon]:pointer-events-none group-data-[collapsible=icon]:invisible group-data-[collapsible=icon]:opacity-0"
       }
     ),
-    /* @__PURE__ */ jsx25("span", { className: "pointer-events-none invisible absolute inset-y-0 left-0 w-15 flex items-center justify-center px-3 opacity-0 transition-[opacity,visibility] duration-150 group-data-[collapsible=icon]:visible group-data-[collapsible=icon]:opacity-100", children: /* @__PURE__ */ jsx25(BergetLogo, { variant: "symbol", size: 32 }) })
+    /* @__PURE__ */ jsx25("span", { className: "pointer-events-none invisible absolute inset-y-0 left-0 flex w-15 items-center pl-5 opacity-0 transition-[padding-left,opacity,visibility] duration-200 ease-linear group-data-[collapsible=icon]:visible group-data-[collapsible=icon]:pl-3 group-data-[collapsible=icon]:opacity-100", children: /* @__PURE__ */ jsx25(BergetLogo, { variant: "symbol", size: 32 }) })
   ] }) });
 }
 function SidebarPageHeader({ className, ...props }) {