@olwiba/ui 0.2.16 → 0.2.18

package/dist/index.js

@@ -2,7 +2,7 @@ import { cn } from './chunk-AMWLSHD6.js';
 export { MdxContent, cn } from './chunk-AMWLSHD6.js';
 import * as React20 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, 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, SidebarMenuButton, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarFooter, SidebarTrigger, 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, 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';
@@ -262,11 +262,29 @@ 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;
+  for (let i = 0; i < seed.length; i += 1) {
+    hash = hash * 31 + seed.charCodeAt(i) | 0;
+  }
+  const hue = Math.abs(hash) % 360;
+  return {
+    backgroundImage: `linear-gradient(135deg, oklch(0.62 0.15 ${hue}), oklch(0.52 0.16 ${(hue + 28) % 360}))`,
+    color: "oklch(0.98 0 0)"
+  };
+}
 function NavUser({ user }) {
   const { isMobile } = useSidebar();
   const uiMode = useUIMode();
   const avatarMode = uiMode !== "default" ? uiMode : void 0;
-  const initials = (user.name ?? user.email).slice(0, 2).toUpperCase();
+  const initials = initialsOf(user.name ?? user.email);
+  const identityTint = identityGradient(user.email);
   return /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
     /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       SidebarMenuButton,
@@ -278,9 +296,9 @@ function NavUser({ user }) {
           RAIL_SQUARE
         ),
         children: [
-          /* @__PURE__ */ jsxs(Avatar, { mode: avatarMode, size: "sm", className: "grayscale", children: [
+          /* @__PURE__ */ jsxs(Avatar, { mode: avatarMode, size: "sm", children: [
             user.avatar && /* @__PURE__ */ jsx(AvatarImage, { src: user.avatar, alt: user.name }),
-            /* @__PURE__ */ jsx(AvatarFallback, { children: initials })
+            /* @__PURE__ */ jsx(AvatarFallback, { className: "font-medium", style: identityTint, children: initials })
           ] }),
           /* @__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 }),
@@ -301,7 +319,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, { children: initials })
+              /* @__PURE__ */ jsx(AvatarFallback, { className: "font-medium", style: identityTint, children: initials })
             ] }),
             /* @__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 }),
@@ -349,23 +367,21 @@ 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__ */ jsx(
-      SidebarMenuButton,
+    /* @__PURE__ */ jsx(SidebarHeader, { className: "py-3", children: /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { onClickCapture: closeMobileMenu, children: /* @__PURE__ */ jsxs(
+      "div",
       {
-        asChild: true,
-        size: "lg",
-        className: RAIL_SQUARE,
-        children: renderLink({
-          href: brand.href ?? "#",
-          children: /* @__PURE__ */ jsxs(Fragment, { 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 truncate text-base font-semibold group-data-[collapsible=icon]:hidden", children: brand.name })
-          ] })
-        })
+        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: [
@@ -3327,7 +3343,7 @@ function Navbar({
       href: brandHref,
       children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 font-semibold", children: [
         brand.logo,
-        /* @__PURE__ */ jsx("span", { children: brand.name })
+        /* @__PURE__ */ jsx("span", { className: "leading-none [text-box-edge:ex_alphabetic] [text-box-trim:trim-both]", children: brand.name })
       ] })
     }),
     /* @__PURE__ */ jsx("div", { className: `hidden items-center gap-1 md:flex ${!hasRightContent ? "col-span-2 justify-end" : ""}`, children: navLinks.map((link) => /* @__PURE__ */ jsx("span", { children: renderLink({
@@ -3360,7 +3376,7 @@ function Navbar({
           href: brandHref,
           children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 font-semibold", children: [
             brand.logo,
-            /* @__PURE__ */ jsx("span", { children: brand.name })
+            /* @__PURE__ */ jsx("span", { className: "leading-none [text-box-edge:ex_alphabetic] [text-box-trim:trim-both]", children: brand.name })
           ] })
         }) }) }),
         /* @__PURE__ */ jsx(Separator, {}),
@@ -3400,7 +3416,7 @@ function Footer({
       className: "flex items-center gap-2",
       children: /* @__PURE__ */ jsxs(Fragment, { children: [
         brand.logo,
-        /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold text-foreground", children: brand.name })
+        /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold leading-none text-foreground [text-box-edge:ex_alphabetic] [text-box-trim:trim-both]", children: brand.name })
       ] })
     }) }),
     navLinks && navLinks.length > 0 && /* @__PURE__ */ jsx("nav", { className: "mt-10 flex flex-wrap justify-center gap-x-12 gap-y-3", "aria-label": "Footer", children: navLinks.map(({ label, href }) => /* @__PURE__ */ jsx("div", { children: renderLink({