@olwiba/ui 0.2.20 → 0.2.22

package/dist/index.d.ts

@@ -34,7 +34,7 @@ interface OlwibaUIProviderProps {
      */
     mode?: UIMode;
 }
-declare function OlwibaUIProvider({ children, isMobile: isMobileProp, mode: initialMode }: OlwibaUIProviderProps): react_jsx_runtime.JSX.Element;
+declare function OlwibaUIProvider({ children, isMobile: isMobileProp, mode: modeProp }: OlwibaUIProviderProps): react_jsx_runtime.JSX.Element;
 declare function useOlwibaUI(): OlwibaUIContextValue;
 /** Returns just the current UI mode from context. */
 declare function useUIMode(): UIMode;
@@ -231,6 +231,7 @@ interface AppShellUser {
     onSignOut?: () => void;
     onBilling?: () => void;
     onNotifications?: () => void;
+    onSettings?: () => void;
 }
 interface AppShellBrand {
     name: ReactNode;

package/dist/index.js

@@ -5,7 +5,7 @@ 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, 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, SidebarProvider, SidebarInset, CardHeader, CardTitle, CardDescription, CardContent, InputOTP, InputOTPGroup, InputOTPSlot, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose, ContextMenuSeparator, ContextMenuLabel, ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent, ContextMenuItem, ContextMenuShortcut, useSidebar, Sidebar, SidebarHeader, SidebarMenu, SidebarMenuItem, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarMenuButton, SidebarFooter, SidebarTrigger, 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, ShieldCheck, Building2, MoreVerticalIcon, CreditCardIcon, BellIcon, LogOutIcon } from 'lucide-react';
+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, ShieldCheck, Building2, BirdIcon, MoreVerticalIcon, CreditCardIcon, BellIcon, SettingsIcon, LogOutIcon } from 'lucide-react';
 import { useReactTable, getPaginationRowModel, getSortedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
 import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter } from '@dnd-kit/core';
 import { sortableKeyboardCoordinates, SortableContext, rectSortingStrategy, horizontalListSortingStrategy, verticalListSortingStrategy, arrayMove, useSortable } from '@dnd-kit/sortable';
@@ -19,10 +19,11 @@ var OlwibaUIContext = React21.createContext({
   setMode: () => {
   }
 });
-function OlwibaUIProvider({ children, isMobile: isMobileProp, mode: initialMode = "default" }) {
+function OlwibaUIProvider({ children, isMobile: isMobileProp, mode: modeProp }) {
   const detectedMobile = useIsMobile();
   const isMobile = isMobileProp ?? detectedMobile;
-  const [mode, setMode] = React21.useState(initialMode);
+  const [uncontrolledMode, setMode] = React21.useState("default");
+  const mode = modeProp ?? uncontrolledMode;
   const variant = mode !== "default" ? mode : void 0;
   return /* @__PURE__ */ jsx(OlwibaUIContext.Provider, { value: { isMobile, mode, setMode }, children: /* @__PURE__ */ jsx(UIVariantProvider, { mode: variant, children }) });
 }
@@ -262,20 +263,23 @@ function PublicPageFrame({
   return /* @__PURE__ */ jsx("div", { className: cn("min-h-screen", surfaceMap[surface], className), ...props, children: /* @__PURE__ */ jsx("div", { className: cn("flex flex-col", spacingMap2[spacing], maxWidthMap2[maxWidth]), children }) });
 }
 var RAIL_SQUARE = "group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!min-w-8 group-data-[collapsible=icon]:!max-w-8 group-data-[collapsible=icon]:!p-0 group-data-[collapsible=icon]:transition-[width,height]";
-function initialsOf(source) {
-  const base = source.includes("@") ? source.split("@")[0] ?? source : source;
-  const words = base.split(/[\s._-]+/).filter(Boolean);
-  if (words.length >= 2) return (words[0][0] + words[1][0]).toUpperCase();
-  return (words[0] ?? base).slice(0, 2).toUpperCase();
-}
 function identityGradient(seed) {
-  let hash = 0;
+  let hash = 2166136261;
   for (let i = 0; i < seed.length; i += 1) {
-    hash = hash * 31 + seed.charCodeAt(i) | 0;
+    hash ^= seed.charCodeAt(i);
+    hash = Math.imul(hash, 16777619);
   }
-  const hue = Math.abs(hash) % 360;
+  hash >>>= 0;
+  const firstHue = hash % 360;
+  const secondHue = (firstHue + 55 + (hash >>> 8) % 70) % 360;
+  const thirdHue = (firstHue + 190 + (hash >>> 16) % 110) % 360;
+  const angleHash = Math.imul(hash ^ hash >>> 15, 2246822519) >>> 0;
+  const angle = angleHash % 360;
   return {
-    backgroundImage: `linear-gradient(135deg, oklch(0.62 0.15 ${hue}), oklch(0.52 0.16 ${(hue + 28) % 360}))`,
+    backgroundImage: [
+      `radial-gradient(circle at 28% 18%, oklch(0.94 0.06 ${thirdHue} / 0.78), transparent 34%)`,
+      `linear-gradient(${angle}deg, oklch(0.68 0.18 ${firstHue}), oklch(0.55 0.2 ${secondHue}) 52%, oklch(0.62 0.18 ${thirdHue}))`
+    ].join(", "),
     color: "oklch(0.98 0 0)"
   };
 }
@@ -283,8 +287,8 @@ function NavUser({ user }) {
   const { isMobile } = useSidebar();
   const uiMode = useUIMode();
   const avatarMode = uiMode !== "default" ? uiMode : void 0;
-  const initials = initialsOf(user.name ?? user.email);
-  const identityTint = identityGradient(user.email);
+  const identitySeed = `${user.name?.trim().toLocaleLowerCase() ?? ""}|${user.email.toLocaleLowerCase()}`;
+  const identityTint = identityGradient(identitySeed);
   return /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
     /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       SidebarMenuButton,
@@ -298,7 +302,13 @@ 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: "font-medium", style: identityTint, children: initials })
+            /* @__PURE__ */ jsx(AvatarFallback, { className: "text-white", style: identityTint, children: /* @__PURE__ */ jsx(
+              BirdIcon,
+              {
+                "aria-hidden": true,
+                className: "size-5 drop-shadow-[0_1px_1px_rgb(0_0_0/0.3)]"
+              }
+            ) })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
             /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: user.name ?? user.email }),
@@ -319,14 +329,20 @@ 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: "font-medium", style: identityTint, children: initials })
+              /* @__PURE__ */ jsx(AvatarFallback, { className: "text-white", style: identityTint, children: /* @__PURE__ */ jsx(
+                BirdIcon,
+                {
+                  "aria-hidden": true,
+                  className: "size-5 drop-shadow-[0_1px_1px_rgb(0_0_0/0.3)]"
+                }
+              ) })
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
               /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: user.name ?? user.email }),
               /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-muted-foreground", children: user.email })
             ] })
           ] }) }),
-          (user.onBilling || user.onNotifications) && /* @__PURE__ */ jsxs(Fragment, { children: [
+          (user.onBilling || user.onNotifications || user.onSettings) && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
             /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
               user.onBilling && /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: user.onBilling, children: [
@@ -336,6 +352,10 @@ function NavUser({ user }) {
               user.onNotifications && /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: user.onNotifications, children: [
                 /* @__PURE__ */ jsx(BellIcon, {}),
                 "Notifications"
+              ] }),
+              user.onSettings && /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: user.onSettings, children: [
+                /* @__PURE__ */ jsx(SettingsIcon, {}),
+                "Settings"
               ] })
             ] })
           ] }),
@@ -479,7 +499,7 @@ function AppShell({
             sidebarPosition
           }
         ),
-        /* @__PURE__ */ jsxs(SidebarInset, { className: isContained ? void 0 : "overflow-y-auto", children: [
+        /* @__PURE__ */ jsxs(SidebarInset, { className: "overflow-y-auto", children: [
           /* @__PURE__ */ jsx(ShellHeader, { pageTitle, headerStart, headerEnd }),
           /* @__PURE__ */ jsx("div", { className: contentClassName, children })
         ] })
@@ -506,8 +526,14 @@ function AppPageHero({
     {
       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",
+        // The glow blobs are decoration, and `::after` is the section's last
+        // child — so with everything on `z-index: auto` it paints above the
+        // header content and swallows clicks on whatever sits under it. At
+        // narrow widths the action row stacks below the copy, right into the
+        // bottom-left blob, which is how a visible button stops responding.
+        // pointer-events-none keeps them purely visual.
+        "before:pointer-events-none before:absolute before:-right-16 before:-top-16 before:size-44 before:rounded-full before:bg-primary/15 before:blur-3xl",
+        "after:pointer-events-none after:absolute after:-bottom-20 after:left-10 after:size-52 after:rounded-full after:bg-primary/10 after:blur-3xl",
         className
       ),
       children: [
@@ -1476,13 +1502,13 @@ function UpdateBanner({
         Card$1,
         {
           className: cn$1(
-            "max-w-3xl border-amber-300/60 bg-amber-50 dark:border-amber-700/60 dark:bg-amber-950",
+            "max-w-3xl border-border bg-card text-card-foreground shadow-lg",
             className
           ),
           children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-6 p-4", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-              /* @__PURE__ */ jsx(Sparkles, { className: "size-5 shrink-0 text-amber-600 dark:text-amber-400", "aria-hidden": "true" }),
-              /* @__PURE__ */ jsx("p", { className: "text-sm text-amber-800 dark:text-amber-200", children: message })
+              /* @__PURE__ */ jsx(Sparkles, { className: "size-5 shrink-0 text-primary", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-card-foreground", children: message })
             ] }),
             /* @__PURE__ */ jsx(
               Button$1,
@@ -1490,7 +1516,7 @@ function UpdateBanner({
                 onClick: handleRefresh,
                 disabled: refreshing,
                 size: "sm",
-                className: "shrink-0 bg-amber-600 text-white hover:bg-amber-700 dark:bg-amber-600 dark:hover:bg-amber-700",
+                className: "shrink-0",
                 children: refreshing ? /* @__PURE__ */ jsx(RefreshCw, { className: "size-4 animate-spin" }) : buttonLabel
               }
             )