@olwiba/ui 0.2.17 → 0.2.19

package/dist/index.d.ts

@@ -583,7 +583,8 @@ interface HeroSectionProps {
     heading: string;
     badge?: string;
     description: string;
-    primaryCta: {
+    /** Ignored when `primarySlot` is given. */
+    primaryCta?: {
         label: string;
         href: string;
     };
@@ -591,6 +592,18 @@ interface HeroSectionProps {
         label: string;
         href: string;
     };
+    /**
+     * Replaces the primary button with your own control — a search field, a
+     * short form, an email capture.
+     *
+     * A hero whose first action *is* the product converts better than one that
+     * links to a page where the product starts. `secondaryCta` still renders
+     * beside it, so "…or see pricing" survives.
+     *
+     * Rendered full-width above the secondary CTA on small screens, since a
+     * field sharing a row with a button gets squeezed to nothing on a phone.
+     */
+    primarySlot?: React.ReactNode;
     heroImage?: React.ReactNode;
     media?: 'image' | 'phone' | 'none';
     phoneSize?: 'sm' | 'md' | 'lg';
@@ -598,7 +611,7 @@ interface HeroSectionProps {
     socialProofText?: string;
     renderLink?: AppShellRenderLink;
 }
-declare function HeroSection({ heading, badge, description, primaryCta, secondaryCta, heroImage, media, phoneSize, avatarUrls, socialProofText, renderLink, }: HeroSectionProps): react_jsx_runtime.JSX.Element;
+declare function HeroSection({ heading, badge, description, primaryCta, secondaryCta, primarySlot, heroImage, media, phoneSize, avatarUrls, socialProofText, renderLink, }: HeroSectionProps): react_jsx_runtime.JSX.Element;
 
 interface FeaturesSectionProps {
     title?: string;

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: [
@@ -1603,6 +1619,7 @@ function HeroSection({
   description,
   primaryCta,
   secondaryCta,
+  primarySlot,
   heroImage,
   media = "image",
   phoneSize = "lg",
@@ -1617,19 +1634,28 @@ function HeroSection({
         badge && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: badge }) }),
         /* @__PURE__ */ jsx("h1", { className: "text-balance text-4xl font-semibold tracking-tight sm:text-5xl lg:text-6xl", children: heading }),
         /* @__PURE__ */ jsx("p", { className: "max-w-lg text-pretty text-lg text-muted-foreground", children: description }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
-          renderLink({
-            href: primaryCta.href,
-            children: /* @__PURE__ */ jsxs(Button, { size: "lg", children: [
-              primaryCta.label,
-              /* @__PURE__ */ jsx(ArrowRight, { className: "ml-2 size-4" })
-            ] })
-          }),
-          secondaryCta && renderLink({
-            href: secondaryCta.href,
-            children: /* @__PURE__ */ jsx(Button, { size: "lg", variant: "outline", children: secondaryCta.label })
-          })
-        ] })
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn$1(
+              "flex gap-3",
+              primarySlot ? "flex-col items-stretch sm:flex-row sm:items-center" : "flex-wrap items-center"
+            ),
+            children: [
+              primarySlot ?? (primaryCta && renderLink({
+                href: primaryCta.href,
+                children: /* @__PURE__ */ jsxs(Button, { size: "lg", children: [
+                  primaryCta.label,
+                  /* @__PURE__ */ jsx(ArrowRight, { className: "ml-2 size-4" })
+                ] })
+              })),
+              secondaryCta && renderLink({
+                href: secondaryCta.href,
+                children: /* @__PURE__ */ jsx(Button, { size: "lg", variant: "outline", children: secondaryCta.label })
+              })
+            ]
+          }
+        )
       ] }) }),
       media !== "none" && /* @__PURE__ */ jsx(FadeIn, { direction: "right", delay: 200, children: media === "phone" ? /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx(PhoneFrame, { size: phoneSize, children: heroImage }) }) : /* @__PURE__ */ jsx("div", { className: cn$1("overflow-hidden", mode === "smooth" ? "rounded-3xl" : "rounded-2xl"), children: heroImage }) })
     ] }),