@olwiba/ui 0.0.33 → 0.0.35

package/dist/index.d.ts

@@ -103,6 +103,10 @@ interface AppShellProps {
     user?: AppShellUser;
     /** Text shown in the top header bar */
     pageTitle?: string;
+    /** Slot rendered at the start of the top header bar, after the sidebar trigger. */
+    headerStart?: ReactNode;
+    /** Slot rendered at the end of the top header bar. */
+    headerEnd?: ReactNode;
     /** Override link rendering for SPA navigation. Defaults to a native <a>. */
     renderLink?: AppShellRenderLink;
     children?: ReactNode;
@@ -122,7 +126,7 @@ interface AppShellProps {
     /** Which side the sidebar sits on. @default "left" */
     side?: 'left' | 'right';
 }
-declare function AppShell({ brand, navItems, action, user, pageTitle, renderLink, collapsible, sidebarPosition, side, children, }?: AppShellProps): react_jsx_runtime.JSX.Element;
+declare function AppShell({ brand, navItems, action, user, pageTitle, headerStart, headerEnd, renderLink, collapsible, sidebarPosition, side, children, }?: AppShellProps): react_jsx_runtime.JSX.Element;
 
 interface AuthFormProps {
     /** Controls form title, fields, and footer text. @default 'signin' */

package/dist/index.js

@@ -147,12 +147,13 @@ function ShellSidebar({
   side,
   sidebarPosition
 }) {
+  const fallbackLogo = typeof brand.name === "string" ? brand.name.slice(0, 1).toUpperCase() : null;
   return /* @__PURE__ */ jsxs(Sidebar, { side, collapsible, sidebarPosition, children: [
-    /* @__PURE__ */ jsx(SidebarHeader, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarMenuButton, { asChild: true, className: "data-[slot=sidebar-menu-button]:!p-1.5", children: renderLink({
+    /* @__PURE__ */ jsx(SidebarHeader, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarMenuButton, { asChild: true, tooltip: typeof brand.name === "string" ? brand.name : void 0, className: "data-[slot=sidebar-menu-button]:!p-1.5", children: renderLink({
       href: brand.href ?? "#",
       children: /* @__PURE__ */ jsxs(Fragment, { children: [
-        brand.logo,
-        /* @__PURE__ */ jsx("span", { className: "text-base font-semibold", children: brand.name })
+        brand.logo ?? /* @__PURE__ */ jsx("span", { className: "flex size-4 shrink-0 items-center justify-center text-sm font-semibold", children: fallbackLogo }),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-base font-semibold group-data-[collapsible=icon]:hidden", children: brand.name })
       ] })
     }) }) }) }) }),
     /* @__PURE__ */ jsx(SidebarContent, { children: /* @__PURE__ */ jsx(SidebarGroup, { children: /* @__PURE__ */ jsxs(SidebarGroupContent, { className: "flex flex-col gap-2", children: [
@@ -193,11 +194,17 @@ function ShellSidebar({
     /* @__PURE__ */ jsx(SidebarFooter, { children: /* @__PURE__ */ jsx(NavUser, { user }) })
   ] });
 }
-function ShellHeader({ pageTitle }) {
+function ShellHeader({
+  pageTitle,
+  headerStart,
+  headerEnd
+}) {
   return /* @__PURE__ */ jsx("header", { className: "flex h-12 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6", children: [
     /* @__PURE__ */ jsx(SidebarTrigger, { className: "-ml-1" }),
+    headerStart && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: headerStart }),
     /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "mx-2 data-[orientation=vertical]:h-4" }),
-    /* @__PURE__ */ jsx("h1", { className: "text-base font-medium", children: pageTitle })
+    /* @__PURE__ */ jsx("h1", { className: "text-base font-medium", children: pageTitle }),
+    headerEnd && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center gap-1", children: headerEnd })
   ] }) });
 }
 var defaultBrand = {
@@ -215,6 +222,8 @@ function AppShell({
   action,
   user = defaultUser,
   pageTitle = "Dashboard",
+  headerStart,
+  headerEnd,
   renderLink = defaultRenderLink,
   collapsible = "icon",
   sidebarPosition = "viewport",
@@ -242,7 +251,7 @@ function AppShell({
           }
         ),
         /* @__PURE__ */ jsxs(SidebarInset, { className: isContained ? void 0 : "overflow-y-auto", children: [
-          /* @__PURE__ */ jsx(ShellHeader, { pageTitle }),
+          /* @__PURE__ */ jsx(ShellHeader, { pageTitle, headerStart, headerEnd }),
           children
         ] })
       ]
@@ -1273,7 +1282,14 @@ function ThemeSwitchMinimal() {
     localStorage.setItem("theme", next);
     document.documentElement.classList.toggle("dark", next === "dark");
   };
-  return /* @__PURE__ */ jsx(Button$1, { variant: "ghost", size: "icon", onClick: toggle, className: "size-8", "aria-label": "Toggle theme", children: theme === "dark" ? /* @__PURE__ */ jsx(Sun, { className: "size-4" }) : /* @__PURE__ */ jsx(Moon, { className: "size-4" }) });
+  return /* @__PURE__ */ jsx(Button$1, { variant: "ghost", size: "icon", onClick: toggle, className: "size-8", "aria-label": "Toggle theme", children: /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "inline-flex size-4 items-center justify-center animate-in fade-in zoom-in-75 spin-in-90 duration-200 motion-reduce:animate-none",
+      children: theme === "dark" ? /* @__PURE__ */ jsx(Sun, { className: "size-4" }) : /* @__PURE__ */ jsx(Moon, { className: "size-4" })
+    },
+    theme
+  ) });
 }
 var defaultRenderLink7 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
 function Navbar({