@olwiba/ui 0.0.33 → 0.0.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olwiba/ui",
-  "version": "0.0.33",
+  "version": "0.0.35",
   "private": false,
   "type": "module",
   "sideEffects": false,

package/src/app/AppShell.tsx

@@ -87,6 +87,10 @@ export 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;
@@ -203,18 +207,26 @@ function ShellSidebar({
   side: 'left' | 'right';
   sidebarPosition: 'viewport' | 'contained';
 }) {
+  const fallbackLogo = typeof brand.name === 'string' ? brand.name.slice(0, 1).toUpperCase() : null;
+
   return (
     <Sidebar side={side} collapsible={collapsible} sidebarPosition={sidebarPosition}>
       <SidebarHeader>
         <SidebarMenu>
           <SidebarMenuItem>
-            <SidebarMenuButton asChild className="data-[slot=sidebar-menu-button]:!p-1.5">
+            <SidebarMenuButton asChild tooltip={typeof brand.name === 'string' ? brand.name : undefined} className="data-[slot=sidebar-menu-button]:!p-1.5">
               {renderLink({
                 href: brand.href ?? '#',
                 children: (
                   <>
-                    {brand.logo}
-                    <span className="text-base font-semibold">{brand.name}</span>
+                    {brand.logo ?? (
+                      <span className="flex size-4 shrink-0 items-center justify-center text-sm font-semibold">
+                        {fallbackLogo}
+                      </span>
+                    )}
+                    <span className="min-w-0 truncate text-base font-semibold group-data-[collapsible=icon]:hidden">
+                      {brand.name}
+                    </span>
                   </>
                 ),
               })}
@@ -287,13 +299,31 @@ function ShellSidebar({
   );
 }
 
-function ShellHeader({ pageTitle }: { pageTitle: string }) {
+function ShellHeader({
+  pageTitle,
+  headerStart,
+  headerEnd,
+}: {
+  pageTitle: string;
+  headerStart?: ReactNode;
+  headerEnd?: ReactNode;
+}) {
   return (
     <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">
       <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
         <SidebarTrigger className="-ml-1" />
+        {headerStart && (
+          <div className="flex items-center gap-1">
+            {headerStart}
+          </div>
+        )}
         <Separator orientation="vertical" className="mx-2 data-[orientation=vertical]:h-4" />
         <h1 className="text-base font-medium">{pageTitle}</h1>
+        {headerEnd && (
+          <div className="ml-auto flex items-center gap-1">
+            {headerEnd}
+          </div>
+        )}
       </div>
     </header>
   );
@@ -323,6 +353,8 @@ export function AppShell({
   action,
   user = defaultUser,
   pageTitle = 'Dashboard',
+  headerStart,
+  headerEnd,
   renderLink = defaultRenderLink,
   collapsible = 'icon',
   sidebarPosition = 'viewport',
@@ -347,7 +379,7 @@ export function AppShell({
         sidebarPosition={sidebarPosition}
       />
       <SidebarInset className={isContained ? undefined : 'overflow-y-auto'}>
-        <ShellHeader pageTitle={pageTitle} />
+        <ShellHeader pageTitle={pageTitle} headerStart={headerStart} headerEnd={headerEnd} />
         {children}
       </SidebarInset>
     </SidebarProvider>

package/src/components/ThemeSwitchMinimal.tsx

@@ -22,7 +22,12 @@ export function ThemeSwitchMinimal() {
 
   return (
     <Button variant="ghost" size="icon" onClick={toggle} className="size-8" aria-label="Toggle theme">
-      {theme === 'dark' ? <Sun className="size-4" /> : <Moon className="size-4" />}
+      <span
+        key={theme}
+        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"
+      >
+        {theme === 'dark' ? <Sun className="size-4" /> : <Moon className="size-4" />}
+      </span>
     </Button>
   );
 }