@olwiba/ui 0.0.34 → 0.0.35

package/dist/index.d.ts

@@ -105,6 +105,8 @@ interface AppShellProps {
     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;
@@ -124,7 +126,7 @@ interface AppShellProps {
     /** Which side the sidebar sits on. @default "left" */
     side?: 'left' | 'right';
 }
-declare function AppShell({ brand, navItems, action, user, pageTitle, headerStart, 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,12 +194,17 @@ function ShellSidebar({
     /* @__PURE__ */ jsx(SidebarFooter, { children: /* @__PURE__ */ jsx(NavUser, { user }) })
   ] });
 }
-function ShellHeader({ pageTitle, headerStart }) {
+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 = {
@@ -217,6 +223,7 @@ function AppShell({
   user = defaultUser,
   pageTitle = "Dashboard",
   headerStart,
+  headerEnd,
   renderLink = defaultRenderLink,
   collapsible = "icon",
   sidebarPosition = "viewport",
@@ -244,7 +251,7 @@ function AppShell({
           }
         ),
         /* @__PURE__ */ jsxs(SidebarInset, { className: isContained ? void 0 : "overflow-y-auto", children: [
-          /* @__PURE__ */ jsx(ShellHeader, { pageTitle, headerStart }),
+          /* @__PURE__ */ jsx(ShellHeader, { pageTitle, headerStart, headerEnd }),
           children
         ] })
       ]