@olwiba/ui 0.2.23 → 0.2.25

package/dist/index.js

@@ -2,7 +2,7 @@ import { cn } from './chunk-AMWLSHD6.js';
 export { MdxContent, cn } from './chunk-AMWLSHD6.js';
 import * as React21 from 'react';
 import { useRef, useEffect, useState, useCallback } from 'react';
-import { Button as Button$1, Card as Card$1, Input as Input$1, Textarea as Textarea$1, Checkbox as Checkbox$1, Switch as Switch$1, useIsMobile, UIVariantProvider, Badge as Badge$1, SidebarProvider, SidebarInset, cn as cn$1, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, Avatar, AvatarImage, AvatarFallback, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, Dialog, DialogTrigger, Progress, useUIVariant, Separator, Accordion, AccordionItem, AccordionTrigger, AccordionContent, Label, Sheet, SheetTrigger, SheetContent, StatusIndicator, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandSeparator, CommandGroup, CommandItem, TooltipProvider, Tooltip, TooltipTrigger, TooltipContent, ContextMenu as ContextMenu$1, ContextMenuTrigger, ContextMenuContent, AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, CommandShortcut, Popover, PopoverTrigger, PopoverContent, Spinner, useSidebar, Sidebar, SidebarHeader, SidebarMenu, SidebarMenuItem, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarMenuButton, SidebarFooter, SidebarTrigger, CardHeader, CardTitle, CardDescription, CardContent, InputOTP, InputOTPGroup, InputOTPSlot, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose, ContextMenuSeparator, ContextMenuLabel, ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent, ContextMenuItem, ContextMenuShortcut, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup } from '@olwiba/cn';
+import { Button as Button$1, Card as Card$1, Input as Input$1, Textarea as Textarea$1, Checkbox as Checkbox$1, Switch as Switch$1, useIsMobile, UIVariantProvider, Badge as Badge$1, SidebarProvider, SidebarInset, cn as cn$1, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, Avatar, AvatarImage, AvatarFallback, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, Dialog, DialogTrigger, Progress, useUIVariant, Separator, Accordion, AccordionItem, AccordionTrigger, AccordionContent, Label, Sheet, SheetTrigger, SheetContent, StatusIndicator, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandSeparator, CommandGroup, CommandItem, TooltipProvider, Tooltip, TooltipTrigger, TooltipContent, ContextMenu as ContextMenu$1, ContextMenuTrigger, ContextMenuContent, AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, CommandShortcut, Spinner, Popover, PopoverTrigger, PopoverContent, useSidebar, Sidebar, SidebarHeader, SidebarMenu, SidebarMenuItem, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarMenuButton, SidebarFooter, SidebarTrigger, CardHeader, CardTitle, CardDescription, CardContent, InputOTP, InputOTPGroup, InputOTPSlot, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose, ContextMenuSeparator, ContextMenuLabel, ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent, ContextMenuItem, ContextMenuShortcut, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup } from '@olwiba/cn';
 export { CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Enchanted } from '@olwiba/cn';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Search, ArrowUp, ArrowDown, ArrowUpDown, ChevronLeft, ChevronRight, MoreHorizontal, UserPlus, Download, CreditCard, Check, Loader2, ArrowLeft, ArrowUpRight, X, Sparkles, RefreshCw, ArrowRight, Minus, Quote, Star, Twitter, Github, Linkedin, Mail, MessageSquare, ChevronDown, Send, Menu, UploadCloud, File, CheckCircle2, AlertCircle, Bell, Inbox, Activity, TrendingUp, TrendingDown, LayoutGrid, List, Sun, Moon, Palette, AlertTriangle, Rocket, Info, Layers, BirdIcon, MoreVerticalIcon, CreditCardIcon, BellIcon, SettingsIcon, LogOutIcon, ShieldCheck, Building2 } from 'lucide-react';
@@ -302,7 +302,7 @@ function NavUser({ user }) {
         children: [
           /* @__PURE__ */ jsxs(Avatar, { mode: avatarMode, size: "sm", children: [
             user.avatar && /* @__PURE__ */ jsx(AvatarImage, { src: user.avatar, alt: user.name }),
-            /* @__PURE__ */ jsx(AvatarFallback, { className: "text-white", style: identityTint, children: /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx(AvatarFallback, { className: "text-white", style: identityTint, children: user.avatarFallback ?? /* @__PURE__ */ jsx(
               BirdIcon,
               {
                 "aria-hidden": true,
@@ -329,7 +329,7 @@ function NavUser({ user }) {
           /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "p-0 font-normal", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-1 py-1.5 text-left text-sm", children: [
             /* @__PURE__ */ jsxs(Avatar, { mode: avatarMode, size: "sm", children: [
               user.avatar && /* @__PURE__ */ jsx(AvatarImage, { src: user.avatar, alt: user.name }),
-              /* @__PURE__ */ jsx(AvatarFallback, { className: "text-white", style: identityTint, children: /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(AvatarFallback, { className: "text-white", style: identityTint, children: user.avatarFallback ?? /* @__PURE__ */ jsx(
                 BirdIcon,
                 {
                   "aria-hidden": true,
@@ -379,7 +379,10 @@ function ShellSidebar({
   renderLink,
   collapsible,
   side,
-  sidebarPosition
+  sidebarPosition,
+  sidebarContentKey,
+  sidebarContentClassName,
+  sidebarFooterStart
 }) {
   const fallbackLogo = typeof brand.name === "string" ? brand.name.slice(0, 1).toUpperCase() : null;
   const { isMobile, setOpenMobile } = useSidebar();
@@ -387,59 +390,83 @@ function ShellSidebar({
     if (isMobile) setOpenMobile(false);
   }, [isMobile, setOpenMobile]);
   return /* @__PURE__ */ jsxs(Sidebar, { side, collapsible, sidebarPosition, children: [
-    /* @__PURE__ */ jsx(SidebarHeader, { className: "py-3", children: /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { onClickCapture: closeMobileMenu, children: /* @__PURE__ */ jsxs(
-      "div",
+    /* @__PURE__ */ jsx(
+      SidebarHeader,
       {
-        className: cn$1(
-          "flex items-center gap-2 overflow-hidden rounded-md p-2 text-left",
-          RAIL_SQUARE
-        ),
-        children: [
-          brand.logo ? (
-            // Neutral slot: the consumer's logo owns its own chrome
-            // (background, radius). Sized to fill the collapsed icon rail.
-            /* @__PURE__ */ jsx("span", { className: "flex size-8 shrink-0 items-center justify-center [&>svg]:size-5", children: brand.logo })
-          ) : /* @__PURE__ */ jsx("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-primary text-sm font-semibold text-primary-foreground", children: fallbackLogo }),
-          /* @__PURE__ */ jsx("span", { className: "min-w-0 whitespace-nowrap text-base font-semibold leading-none [text-box-edge:ex_alphabetic] [text-box-trim:trim-both] 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: [
-      action && /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { onClickCapture: closeMobileMenu, children: action.href ? /* @__PURE__ */ jsx(
-        SidebarMenuButton,
-        {
-          asChild: true,
-          tooltip: action.label,
-          className: "min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground",
-          children: renderLink({
-            href: action.href,
+        className: cn$1("py-3", sidebarContentClassName),
+        children: /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { onClickCapture: closeMobileMenu, children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn$1(
+              "flex items-center gap-2 overflow-hidden rounded-md p-2 text-left",
+              RAIL_SQUARE
+            ),
+            children: [
+              brand.logo ? (
+                // Neutral slot: the consumer's logo owns its own chrome
+                // (background, radius). Sized to fill the collapsed icon rail.
+                /* @__PURE__ */ jsx("span", { className: "flex size-8 shrink-0 items-center justify-center [&>svg]:size-5", children: brand.logo })
+              ) : /* @__PURE__ */ jsx("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-primary text-sm font-semibold text-primary-foreground", children: fallbackLogo }),
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 whitespace-nowrap text-base font-semibold leading-none [text-box-edge:ex_alphabetic] [text-box-trim:trim-both] group-data-[collapsible=icon]:hidden", children: brand.name })
+            ]
+          }
+        ) }) })
+      },
+      `${sidebarContentKey ?? "default"}-header`
+    ),
+    /* @__PURE__ */ jsx(
+      SidebarContent,
+      {
+        className: sidebarContentClassName,
+        children: /* @__PURE__ */ jsx(SidebarGroup, { children: /* @__PURE__ */ jsxs(SidebarGroupContent, { className: "flex flex-col gap-2", children: [
+          action && /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { onClickCapture: closeMobileMenu, children: action.href ? /* @__PURE__ */ jsx(
+            SidebarMenuButton,
+            {
+              asChild: true,
+              tooltip: action.label,
+              className: "min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground",
+              children: renderLink({
+                href: action.href,
+                children: /* @__PURE__ */ jsxs(Fragment, { children: [
+                  action.icon && /* @__PURE__ */ jsx(action.icon, {}),
+                  /* @__PURE__ */ jsx("span", { children: action.label })
+                ] })
+              })
+            }
+          ) : /* @__PURE__ */ jsxs(
+            SidebarMenuButton,
+            {
+              tooltip: action.label,
+              onClick: action.onClick,
+              className: "min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground",
+              children: [
+                action.icon && /* @__PURE__ */ jsx(action.icon, {}),
+                /* @__PURE__ */ jsx("span", { children: action.label })
+              ]
+            }
+          ) }) }),
+          /* @__PURE__ */ jsx(SidebarMenu, { children: navItems.map((item) => /* @__PURE__ */ jsx(SidebarMenuItem, { onClickCapture: closeMobileMenu, children: /* @__PURE__ */ jsx(SidebarMenuButton, { asChild: true, tooltip: item.label, isActive: item.isActive, children: renderLink({
+            href: item.href,
             children: /* @__PURE__ */ jsxs(Fragment, { children: [
-              action.icon && /* @__PURE__ */ jsx(action.icon, {}),
-              /* @__PURE__ */ jsx("span", { children: action.label })
+              /* @__PURE__ */ jsx(item.icon, {}),
+              /* @__PURE__ */ jsx("span", { children: item.label })
             ] })
-          })
-        }
-      ) : /* @__PURE__ */ jsxs(
-        SidebarMenuButton,
-        {
-          tooltip: action.label,
-          onClick: action.onClick,
-          className: "min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground",
-          children: [
-            action.icon && /* @__PURE__ */ jsx(action.icon, {}),
-            /* @__PURE__ */ jsx("span", { children: action.label })
-          ]
-        }
-      ) }) }),
-      /* @__PURE__ */ jsx(SidebarMenu, { children: navItems.map((item) => /* @__PURE__ */ jsx(SidebarMenuItem, { onClickCapture: closeMobileMenu, children: /* @__PURE__ */ jsx(SidebarMenuButton, { asChild: true, tooltip: item.label, isActive: item.isActive, children: renderLink({
-        href: item.href,
-        children: /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(item.icon, {}),
-          /* @__PURE__ */ jsx("span", { children: item.label })
-        ] })
-      }) }) }, item.label)) })
-    ] }) }) }),
-    /* @__PURE__ */ jsx(SidebarFooter, { children: /* @__PURE__ */ jsx(NavUser, { user }) })
+          }) }) }, item.label)) })
+        ] }) })
+      },
+      `${sidebarContentKey ?? "default"}-content`
+    ),
+    /* @__PURE__ */ jsxs(
+      SidebarFooter,
+      {
+        className: sidebarContentClassName,
+        children: [
+          sidebarFooterStart,
+          /* @__PURE__ */ jsx(NavUser, { user })
+        ]
+      },
+      `${sidebarContentKey ?? "default"}-footer`
+    )
   ] });
 }
 function ShellHeader({
@@ -449,13 +476,19 @@ function ShellHeader({
   headerEnd,
   renderLink
 }) {
+  const { isMobile, setOpen, setOpenMobile } = useSidebar();
+  const expandSidebar = useCallback(() => {
+    if (isMobile) setOpenMobile(true);
+    else setOpen(true);
+  }, [isMobile, setOpen, setOpenMobile]);
+  const headerStartContent = typeof headerStart === "function" ? headerStart({ expandSidebar }) : headerStart;
   const source = breadcrumbs?.length ? breadcrumbs : pageTitle ? [pageTitle] : [];
   const trail = source.map(
     (crumb) => typeof crumb === "string" ? { label: crumb, href: void 0 } : crumb
   );
   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 }),
+    headerStartContent && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: headerStartContent }),
     trail.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "mx-2 data-[orientation=vertical]:h-4" }),
       /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: "flex min-w-0 items-center gap-1.5 text-sm", children: trail.map((crumb, index) => {
@@ -513,6 +546,9 @@ function AppShell({
   renderLink = defaultRenderLink,
   collapsible = "icon",
   sidebarPosition = "viewport",
+  sidebarContentKey,
+  sidebarContentClassName,
+  sidebarFooterStart,
   side = "left",
   contentClassName = "p-6",
   children
@@ -534,7 +570,10 @@ function AppShell({
             renderLink,
             collapsible,
             side,
-            sidebarPosition
+            sidebarPosition,
+            sidebarContentKey,
+            sidebarContentClassName,
+            sidebarFooterStart
           }
         ),
         /* @__PURE__ */ jsxs(SidebarInset, { className: "overflow-y-auto", children: [
@@ -667,7 +706,7 @@ function AppFooter({ start, end, children, className, ...props }) {
     {
       ...props,
       className: cn(
-        "border-t px-4 py-3 text-xs text-muted-foreground sm:px-6",
+        "border-t bg-background px-4 py-3 text-xs text-muted-foreground sm:px-6",
         className
       ),
       children: /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center justify-between gap-3", children: [
@@ -923,6 +962,7 @@ function DataTable({
   selectable = false,
   onSelectionChange,
   pageSize = 10,
+  pagination,
   toolbar,
   onRowClick,
   emptyMessage = "No results.",
@@ -949,8 +989,11 @@ function DataTable({
     },
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
-    ...pageSize > 0 ? { getPaginationRowModel: getPaginationRowModel() } : {},
-    initialState: pageSize > 0 ? { pagination: { pageSize } } : void 0,
+    // Server-paginated tables must not slice: `data` is already the page, and
+    // running the client model over it would paginate a single page again.
+    ...pageSize > 0 && !pagination ? { getPaginationRowModel: getPaginationRowModel() } : {},
+    ...pagination ? { manualPagination: true } : {},
+    initialState: pageSize > 0 && !pagination ? { pagination: { pageSize } } : void 0,
     enableRowSelection: selectable
   });
   React21.useEffect(() => {
@@ -958,6 +1001,12 @@ function DataTable({
     onSelectionChange(table.getSelectedRowModel().rows.map((r) => r.original));
   }, [rowSelection]);
   const rows = table.getRowModel().rows;
+  const canPrevious = pagination ? pagination.hasPrevious ?? pagination.pageIndex > 0 : table.getCanPreviousPage();
+  const canNext = pagination ? pagination.hasNext ?? (pagination.pageCount !== void 0 && pagination.pageIndex < pagination.pageCount - 1) : table.getCanNextPage();
+  const goPrevious = () => pagination ? pagination.onPageChange(pagination.pageIndex - 1) : table.previousPage();
+  const goNext = () => pagination ? pagination.onPageChange(pagination.pageIndex + 1) : table.nextPage();
+  const showPager = pagination ? canPrevious || canNext : pageSize > 0 && table.getPageCount() > 1;
+  const pageLabel = pagination ? pagination.pageCount !== void 0 ? `Page ${pagination.pageIndex + 1} of ${pagination.pageCount}` : `Page ${pagination.pageIndex + 1}` : `Page ${table.getState().pagination.pageIndex + 1} of ${table.getPageCount()}`;
   return /* @__PURE__ */ jsxs("div", { className: cn$1("space-y-4", className), children: [
     (searchKey || toolbar) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
       searchKey ? /* @__PURE__ */ jsxs("div", { className: "relative max-w-sm flex-1", children: [
@@ -1013,18 +1062,18 @@ function DataTable({
         row.id
       )) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: allColumns.length, className: "h-24 text-center text-muted-foreground", children: emptyMessage }) }) })
     ] }) }),
-    (selectable || pageSize > 0 && table.getPageCount() > 1) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+    (selectable || showPager) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
         selectable && `${table.getFilteredSelectedRowModel().rows.length} of ${table.getFilteredRowModel().rows.length} selected`,
-        selectable && pageSize > 0 && table.getPageCount() > 1 && " \xB7 ",
-        pageSize > 0 && table.getPageCount() > 1 && `Page ${table.getState().pagination.pageIndex + 1} of ${table.getPageCount()}`
+        selectable && showPager && " \xB7 ",
+        showPager && pageLabel
       ] }),
-      pageSize > 0 && table.getPageCount() > 1 && /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), children: [
+      showPager && /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: goPrevious, disabled: !canPrevious, children: [
           /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" }),
           " Previous"
         ] }),
-        /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), children: [
+        /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: goNext, disabled: !canNext, children: [
           "Next ",
           /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
         ] })
@@ -1314,19 +1363,55 @@ function OnboardingWizard({
     ] })
   ] });
 }
-function EmptyState({ icon: Icon, title, description, action, className, ...props }) {
+function EmptyState({
+  icon: Icon,
+  title,
+  description,
+  eyebrow,
+  action,
+  secondaryAction,
+  variant = "plain",
+  compact = false,
+  fill = false,
+  className,
+  ...props
+}) {
+  const card = variant === "card";
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn$1("flex flex-col items-center justify-center gap-3 py-12 text-center", className),
+      className: cn$1(
+        "relative flex flex-col items-center justify-center overflow-hidden text-center",
+        !card && "gap-3 py-12",
+        card && "min-h-72 rounded-xl border border-dashed bg-card/80 p-8 shadow-sm sm:p-10",
+        card && compact && "min-h-0 p-5 sm:p-6",
+        fill && "min-h-0 w-full flex-1",
+        className
+      ),
       ...props,
       children: [
-        Icon && /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-2xl border bg-muted", children: /* @__PURE__ */ jsx(Icon, { className: "size-6 text-muted-foreground" }) }),
-        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ jsx("h3", { className: "font-semibold", children: title }),
-          description && /* @__PURE__ */ jsx("p", { className: "max-w-xs text-sm text-muted-foreground", children: description })
-        ] }),
-        action
+        card && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-10 top-0 h-24 rounded-full bg-primary/10 blur-3xl" }),
+        /* @__PURE__ */ jsxs("div", { className: cn$1("relative flex flex-col items-center", card ? "gap-4" : "gap-3"), children: [
+          Icon && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn$1(
+                "flex size-12 items-center justify-center rounded-2xl border",
+                card ? "bg-background text-primary shadow-sm" : "bg-muted text-muted-foreground"
+              ),
+              children: /* @__PURE__ */ jsx(Icon, { className: card ? "size-5" : "size-6" })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: cn$1(card ? "max-w-md space-y-2" : "max-w-xs space-y-1"), children: [
+            eyebrow && /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground", children: eyebrow }),
+            /* @__PURE__ */ jsx("h3", { className: cn$1("font-semibold", card && "text-xl tracking-tight"), children: title }),
+            description && /* @__PURE__ */ jsx("div", { className: cn$1("text-sm text-muted-foreground", card && "leading-6"), children: description })
+          ] }),
+          (action || secondaryAction) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3 sm:flex-row", children: [
+            action,
+            secondaryAction
+          ] })
+        ] })
       ]
     }
   );
@@ -4126,6 +4211,51 @@ function CommandMenu({
     ] })
   ] });
 }
+function LoadMore({
+  hasNextPage,
+  isFetchingNextPage,
+  fetchNextPage,
+  auto = true,
+  label = "more",
+  rootMargin = "400px",
+  className,
+  ...props
+}) {
+  const sentinelRef = React21.useRef(null);
+  const stateRef = React21.useRef({ hasNextPage, isFetchingNextPage, fetchNextPage });
+  stateRef.current = { hasNextPage, isFetchingNextPage, fetchNextPage };
+  React21.useEffect(() => {
+    if (!auto) return;
+    const node = sentinelRef.current;
+    if (!node) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry?.isIntersecting) return;
+        const state = stateRef.current;
+        if (state.hasNextPage && !state.isFetchingNextPage) void state.fetchNextPage();
+      },
+      { rootMargin }
+    );
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [auto, rootMargin]);
+  if (!hasNextPage) return null;
+  return /* @__PURE__ */ jsx("div", { ref: sentinelRef, className: cn$1("flex justify-center py-4", className), ...props, children: auto ? /* @__PURE__ */ jsx("span", { className: "flex h-9 items-center text-sm text-muted-foreground", "aria-live": "polite", children: isFetchingNextPage && /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Spinner, { className: "mr-2 size-4" }),
+    " Loading more\u2026"
+  ] }) }) : /* @__PURE__ */ jsx(
+    Button$1,
+    {
+      variant: "outline",
+      onClick: () => void fetchNextPage(),
+      disabled: isFetchingNextPage,
+      children: isFetchingNextPage ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Spinner, { className: "mr-2 size-4" }),
+        " Loading\u2026"
+      ] }) : `Load more ${label}`
+    }
+  ) });
+}
 function DataView({
   items,
   getRowId,
@@ -4208,6 +4338,9 @@ function Chart({
   height = 300,
   grid = true,
   legend,
+  stacked = false,
+  xTickFormatter,
+  yDomain,
   valueFormatter = (v) => String(v),
   className
 }) {
@@ -4250,12 +4383,13 @@ function Chart({
     if (type === "bar") {
       chart = /* @__PURE__ */ jsxs(BarChart, { data, barCategoryGap: "25%", children: [
         gridEl,
-        /* @__PURE__ */ jsx(XAxis, { dataKey: xKey, ...axisProps }),
-        /* @__PURE__ */ jsx(YAxis, { ...axisProps, width: 48, tickFormatter: valueFormatter }),
+        /* @__PURE__ */ jsx(XAxis, { dataKey: xKey, ...axisProps, tickFormatter: xTickFormatter }),
+        /* @__PURE__ */ jsx(YAxis, { ...axisProps, width: 48, domain: yDomain, tickFormatter: valueFormatter }),
         tooltip,
         series.map((s, i) => /* @__PURE__ */ jsx(
           Bar,
           {
+            stackId: stacked ? "stack" : void 0,
             dataKey: s.key,
             name: s.label ?? s.key,
             fill: seriesColor(s, i),
@@ -4268,8 +4402,8 @@ function Chart({
     } else if (type === "area") {
       chart = /* @__PURE__ */ jsxs(AreaChart, { data, children: [
         gridEl,
-        /* @__PURE__ */ jsx(XAxis, { dataKey: xKey, ...axisProps }),
-        /* @__PURE__ */ jsx(YAxis, { ...axisProps, width: 48, tickFormatter: valueFormatter }),
+        /* @__PURE__ */ jsx(XAxis, { dataKey: xKey, ...axisProps, tickFormatter: xTickFormatter }),
+        /* @__PURE__ */ jsx(YAxis, { ...axisProps, width: 48, domain: yDomain, tickFormatter: valueFormatter }),
         tooltip,
         series.map((s, i) => /* @__PURE__ */ jsx(
           Area,
@@ -4277,10 +4411,11 @@ function Chart({
             type: "monotone",
             dataKey: s.key,
             name: s.label ?? s.key,
+            stackId: stacked ? "stack" : void 0,
             stroke: seriesColor(s, i),
             strokeWidth: 2,
             fill: seriesColor(s, i),
-            fillOpacity: 0.12,
+            fillOpacity: stacked ? 0.35 : 0.12,
             dot: false,
             activeDot: { r: 4 }
           },
@@ -4290,8 +4425,8 @@ function Chart({
     } else {
       chart = /* @__PURE__ */ jsxs(LineChart, { data, children: [
         gridEl,
-        /* @__PURE__ */ jsx(XAxis, { dataKey: xKey, ...axisProps }),
-        /* @__PURE__ */ jsx(YAxis, { ...axisProps, width: 48, tickFormatter: valueFormatter }),
+        /* @__PURE__ */ jsx(XAxis, { dataKey: xKey, ...axisProps, tickFormatter: xTickFormatter }),
+        /* @__PURE__ */ jsx(YAxis, { ...axisProps, width: 48, domain: yDomain, tickFormatter: valueFormatter }),
         tooltip,
         series.map((s, i) => /* @__PURE__ */ jsx(
           Line,
@@ -4518,9 +4653,18 @@ function NotificationToast({
     ] })
   ] }) });
 }
+function defaultDuration(variant, hasAction) {
+  if (variant === "error") return 1e4;
+  if (variant === "warning") return 8e3;
+  if (hasAction) return 8e3;
+  return void 0;
+}
 function notify(options) {
   const { duration, ...toastProps } = options;
-  return toast.custom((id) => /* @__PURE__ */ jsx(NotificationToast, { ...toastProps, onDismiss: () => toast.dismiss(id) }), { duration });
+  const resolved = duration ?? defaultDuration(toastProps.variant, Boolean(toastProps.action || toastProps.secondaryAction));
+  return toast.custom((id) => /* @__PURE__ */ jsx(NotificationToast, { ...toastProps, onDismiss: () => toast.dismiss(id) }), {
+    duration: resolved
+  });
 }
 function NotificationsPopover({
   notifications,
@@ -5455,18 +5599,21 @@ function PostList({
   posts,
   renderLink,
   emptyMessage = "No posts published yet.",
-  columns = 3,
+  columns,
   className
 }) {
   if (posts.length === 0) {
     return /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground italic", children: emptyMessage });
   }
+  const resolvedColumns = columns ?? (posts.length < 3 ? 2 : 3);
+  const balancedShortListClassName = columns === void 0 ? posts.length === 1 ? "mx-auto w-full max-w-md sm:grid-cols-1" : posts.length === 2 ? "mx-auto w-full max-w-3xl" : void 0 : void 0;
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: cn$1(
         "grid grid-cols-1 gap-x-8 gap-y-14 sm:grid-cols-2",
-        columns === 3 && "lg:grid-cols-3",
+        resolvedColumns === 3 && "lg:grid-cols-3",
+        balancedShortListClassName,
         className
       ),
       children: posts.map((post) => /* @__PURE__ */ jsx(PostCard, { ...post, renderLink }, post.slug))
@@ -5684,6 +5831,6 @@ function usePagination(total, pageSize) {
   return { page, pageSize, totalPages, offset, hasPrev: page > 1, hasNext: page < totalPages, goTo, next, prev };
 }
 
-export { ActivityFeed, AnimatedPill, AnimatedSwap, AppContent, AppFooter, AppGrid, AppGridCell, AppPageHero, AppScreen, AppShell, AuthSection, Badge, BillingPanel, BrandColorSwitchMinimal, Button, Card, Carousel, ChangelogCard, ChangelogList, Chart, Checkbox, CommandMenu, ComparisonSection, ConfirmDialog, ContactSection, ContextMenu, CountUp, CountdownTimer, CtaSection, DataTable, DataView, DevBanner, Dock, EmptyState, ErrorPage, FadeIn, FaqSection, FeatureCard, FeatureMarqueeSection, FeaturesSection, FileUpload, FlowBracket, FlowConnector, Footer, FullPageSpinner, GlassCard, Grid, GridItem, GroupedFeaturesSection, HeroSection, ImageCard, Input, LogoStrip, MarketingSurfaceProvider, MediaCard, ModeSwitchMinimal, Navbar, NewsletterSection, NotificationToast, NotificationsPopover, OlwibaUIProvider, OnboardingWizard, Overlay, PageHeader, PageTransition, PhoneFrame, PostCard, PostList, PricingCard, PricingSection, PublicPageFrame, QualificationSection, RegisterHotkeys, RootErrorFallback, Section, SectionTitle, SettingsSection, Sortable, Spotlight, Stack, StaggerChildren, StatCard, StatsSection, StepsSection, Suspensed, Switch, TeamMembersPanel, TeamSection, TechStackSection, TestimonialCard, TestimonialsSection, Textarea, ThemeColorUpdater, ThemeSwitchMinimal, Underlay, UpdateBanner, UpgradePrompt, VersionBanner, ViewToggle, marketingSectionSpacing, notify, useConfirm, useControlledOpen, useCopyToClipboard, useDebounce, useIntersectionObserver, useLocalStorage, useMarketingSurface, useMediaQuery, useMounted, useOlwibaUI, usePagination, useScrolledPast, useSectionSurface, useUIMode, useViewMode };
+export { ActivityFeed, AnimatedPill, AnimatedSwap, AppContent, AppFooter, AppGrid, AppGridCell, AppPageHero, AppScreen, AppShell, AuthSection, Badge, BillingPanel, BrandColorSwitchMinimal, Button, Card, Carousel, ChangelogCard, ChangelogList, Chart, Checkbox, CommandMenu, ComparisonSection, ConfirmDialog, ContactSection, ContextMenu, CountUp, CountdownTimer, CtaSection, DataTable, DataView, DevBanner, Dock, EmptyState, ErrorPage, FadeIn, FaqSection, FeatureCard, FeatureMarqueeSection, FeaturesSection, FileUpload, FlowBracket, FlowConnector, Footer, FullPageSpinner, GlassCard, Grid, GridItem, GroupedFeaturesSection, HeroSection, ImageCard, Input, LoadMore, LogoStrip, MarketingSurfaceProvider, MediaCard, ModeSwitchMinimal, Navbar, NewsletterSection, NotificationToast, NotificationsPopover, OlwibaUIProvider, OnboardingWizard, Overlay, PageHeader, PageTransition, PhoneFrame, PostCard, PostList, PricingCard, PricingSection, PublicPageFrame, QualificationSection, RegisterHotkeys, RootErrorFallback, Section, SectionTitle, SettingsSection, Sortable, Spotlight, Stack, StaggerChildren, StatCard, StatsSection, StepsSection, Suspensed, Switch, TeamMembersPanel, TeamSection, TechStackSection, TestimonialCard, TestimonialsSection, Textarea, ThemeColorUpdater, ThemeSwitchMinimal, Underlay, UpdateBanner, UpgradePrompt, VersionBanner, ViewToggle, marketingSectionSpacing, notify, useConfirm, useControlledOpen, useCopyToClipboard, useDebounce, useIntersectionObserver, useLocalStorage, useMarketingSurface, useMediaQuery, useMounted, useOlwibaUI, usePagination, useScrolledPast, useSectionSurface, useUIMode, useViewMode };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map