@olwiba/ui 0.2.14 → 0.2.16

package/package.json

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

package/src/app/AppPageHero.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import type { LucideIcon } from 'lucide-react';
+import { cn } from '../lib/utils';
+
+export interface AppPageHeroProps {
+  eyebrow?: ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+  icon?: LucideIcon;
+  action?: ReactNode;
+  children?: ReactNode;
+  compact?: boolean;
+  className?: string;
+}
+
+/**
+ * Rich page header for signed-in product/admin pages.
+ *
+ * Use this when a route needs more visual weight than a simple `PageHeader`,
+ * but still keep product-specific stats, actions, and copy in the consumer.
+ */
+export function AppPageHero({
+  eyebrow,
+  title,
+  description,
+  icon: Icon,
+  action,
+  children,
+  compact = false,
+  className,
+}: AppPageHeroProps) {
+  return (
+    <section
+      className={cn(
+        'relative overflow-hidden rounded-3xl border bg-card/80 p-5 shadow-sm sm:p-6',
+        'before:absolute before:-right-16 before:-top-16 before:size-44 before:rounded-full before:bg-primary/15 before:blur-3xl',
+        'after:absolute after:-bottom-20 after:left-10 after:size-52 after:rounded-full after:bg-primary/10 after:blur-3xl',
+        className,
+      )}
+    >
+      <div className="relative flex flex-col gap-5 sm:flex-row sm:items-start sm:justify-between">
+        <div className="flex min-w-0 gap-4">
+          {Icon && (
+            <div className="flex size-12 shrink-0 items-center justify-center rounded-2xl border bg-background/70 text-primary shadow-sm">
+              <Icon className="size-5" />
+            </div>
+          )}
+          <div className="min-w-0 space-y-2">
+            {eyebrow && (
+              <p className="text-xs font-semibold uppercase tracking-[0.24em] text-primary/80">
+                {eyebrow}
+              </p>
+            )}
+            <h1
+              className={cn(
+                'font-semibold tracking-tight',
+                compact ? 'text-2xl' : 'text-3xl sm:text-4xl',
+              )}
+            >
+              {title}
+            </h1>
+            {description && (
+              <p className="max-w-2xl text-sm leading-6 text-muted-foreground">{description}</p>
+            )}
+          </div>
+        </div>
+        {action && <div className="relative shrink-0 sm:pt-1">{action}</div>}
+      </div>
+      {children && <div className="relative mt-5">{children}</div>}
+    </section>
+  );
+}

package/src/app/AppShell.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import type { LucideIcon } from 'lucide-react';
-import type { ReactNode } from 'react';
+import { useCallback, type ReactNode } from 'react';
 import {
   BellIcon,
   CreditCardIcon,
@@ -249,12 +249,16 @@ function ShellSidebar({
   sidebarPosition: 'viewport' | 'contained';
 }) {
   const fallbackLogo = typeof brand.name === 'string' ? brand.name.slice(0, 1).toUpperCase() : null;
+  const { isMobile, setOpenMobile } = useSidebar();
+  const closeMobileMenu = useCallback(() => {
+    if (isMobile) setOpenMobile(false);
+  }, [isMobile, setOpenMobile]);
 
   return (
     <Sidebar side={side} collapsible={collapsible} sidebarPosition={sidebarPosition}>
       <SidebarHeader className="py-3">
         <SidebarMenu>
-          <SidebarMenuItem>
+          <SidebarMenuItem onClickCapture={closeMobileMenu}>
             <SidebarMenuButton
               asChild
               size="lg"
@@ -295,7 +299,7 @@ function ShellSidebar({
           <SidebarGroupContent className="flex flex-col gap-2">
             {action && (
               <SidebarMenu>
-                <SidebarMenuItem>
+                <SidebarMenuItem onClickCapture={closeMobileMenu}>
                   {action.href ? (
                     <SidebarMenuButton
                       asChild
@@ -328,7 +332,7 @@ function ShellSidebar({
 
             <SidebarMenu>
               {navItems.map((item) => (
-                <SidebarMenuItem key={item.label}>
+                <SidebarMenuItem key={item.label} onClickCapture={closeMobileMenu}>
                   <SidebarMenuButton asChild tooltip={item.label} isActive={item.isActive}>
                     {renderLink({
                       href: item.href,

package/src/index.ts

@@ -29,6 +29,8 @@ export {
   type AppNavItem,
 } from './app/AppShell';
 
+export { AppPageHero, type AppPageHeroProps } from './app/AppPageHero';
+
 export {
   AuthSection,
   type AuthSectionProps,

package/src/marketing/Navbar.tsx

@@ -82,14 +82,19 @@ export function Navbar({
           </div>
         )}
 
-        {/* Mobile drawer — trigger on the right, panel slides in from the left */}
+        {/* Mobile controls + drawer trigger — keep quick toggles visible, with menu last. */}
         <Sheet open={open} onOpenChange={setOpen}>
-          <SheetTrigger asChild>
-            <Button variant="ghost" size="icon" className="col-start-3 justify-self-end md:hidden">
-              <Menu className="size-5" />
-              <span className="sr-only">Open menu</span>
-            </Button>
-          </SheetTrigger>
+          <div className="col-start-3 flex items-center justify-end gap-1 md:hidden">
+            {controls?.map((control, i) => (
+              <React.Fragment key={i}>{control}</React.Fragment>
+            ))}
+            <SheetTrigger asChild>
+              <Button variant="ghost" size="icon">
+                <Menu className="size-5" />
+                <span className="sr-only">Open menu</span>
+              </Button>
+            </SheetTrigger>
+          </div>
           <SheetContent side="left" className="w-72">
             {/* Brand row alone at the top — leaves the top-right corner to the built-in close */}
             <div className="flex items-center pb-4">
@@ -105,13 +110,6 @@ export function Navbar({
                 })}
               </span>
             </div>
-            {controls?.length ? (
-              <div className="mb-4 flex w-full items-center justify-between gap-1">
-                {controls.map((control, i) => (
-                  <React.Fragment key={i}>{control}</React.Fragment>
-                ))}
-              </div>
-            ) : null}
             <Separator />
             <nav className="mt-4 flex flex-col gap-1">
               {navLinks.map((link) => (