@olwiba/ui 0.2.13 → 0.2.15

package/dist/index.d.ts

@@ -335,9 +335,21 @@ interface AuthSectionProps extends AuthFormProps {
     children?: React.ReactNode;
     /** (split layout only) Custom content for the left decorative panel */
     panel?: React.ReactNode;
+    /**
+     * Render inside an existing page frame — one already providing the
+     * background, the horizontal padding, and a navbar and footer.
+     *
+     * Standalone (the default) the section owns the whole viewport, which is
+     * right for an auth screen that is the only thing on the page. It is wrong
+     * the moment there is chrome around it: the padding lands on top of the
+     * frame's own, and `min-h-dvh` guarantees the footer starts below the fold.
+     *
+     * (centered layout only)
+     */
+    framed?: boolean;
     className?: string;
 }
-declare function AuthSection({ layout, children, panel, className, ...formProps }: AuthSectionProps): react_jsx_runtime.JSX.Element;
+declare function AuthSection({ layout, children, panel, framed, className, ...formProps }: AuthSectionProps): react_jsx_runtime.JSX.Element;
 
 interface SettingsSectionProps {
     title: string;

package/dist/index.js

@@ -1,8 +1,8 @@
 import { cn } from './chunk-AMWLSHD6.js';
 export { MdxContent, cn } from './chunk-AMWLSHD6.js';
 import * as React20 from 'react';
-import { useRef, useEffect, useState } 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, Sidebar, SidebarHeader, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarFooter, SidebarTrigger, useSidebar, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup } from '@olwiba/cn';
+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';
 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';
@@ -344,8 +344,12 @@ function ShellSidebar({
   sidebarPosition
 }) {
   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 /* @__PURE__ */ jsxs(Sidebar, { side, collapsible, sidebarPosition, children: [
-    /* @__PURE__ */ jsx(SidebarHeader, { className: "py-3", children: /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(SidebarHeader, { className: "py-3", children: /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { onClickCapture: closeMobileMenu, children: /* @__PURE__ */ jsx(
       SidebarMenuButton,
       {
         asChild: true,
@@ -365,7 +369,7 @@ function ShellSidebar({
       }
     ) }) }) }),
     /* @__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, { children: action.href ? /* @__PURE__ */ jsx(
+      action && /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { onClickCapture: closeMobileMenu, children: action.href ? /* @__PURE__ */ jsx(
         SidebarMenuButton,
         {
           asChild: true,
@@ -391,7 +395,7 @@ function ShellSidebar({
           ]
         }
       ) }) }),
-      /* @__PURE__ */ jsx(SidebarMenu, { children: navItems.map((item) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarMenuButton, { asChild: true, tooltip: item.label, isActive: item.isActive, children: renderLink({
+      /* @__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, {}),
@@ -472,7 +476,24 @@ function AppShell({
   return inner;
 }
 var defaultRenderLink2 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
-function CenteredAuth({ children, brand, className }) {
+function CenteredAuth({ children, brand, framed, className }) {
+  if (framed) {
+    return (
+      // Framed: a page frame is already supplying the background, the page
+      // padding, and — with a navbar and footer around it — the height. All
+      // three have to come off here or they are applied twice: padding inside
+      // padding, and a full-viewport section that pushes the footer below the
+      // fold on every auth screen.
+      //
+      // The card fills the content column on a phone, matching the contact
+      // form, and only takes its reading width once there is room for the
+      // page to centre it.
+      /* @__PURE__ */ jsx("section", { className: cn$1("flex flex-col py-6 sm:py-10", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-none sm:my-auto sm:max-w-md", children: [
+        brand && /* @__PURE__ */ jsx("div", { className: "mb-8 text-center", children: brand }),
+        children
+      ] }) })
+    );
+  }
   return (
     // `min-h-dvh`, not `min-h-screen`: on mobile `100vh` is the viewport with
     // the browser chrome *retracted*, so a screen-height box is always taller
@@ -650,6 +671,7 @@ function AuthSection({
   layout = "centered",
   children,
   panel,
+  framed,
   className,
   ...formProps
 }) {
@@ -659,7 +681,7 @@ function AuthSection({
   }
   const { brand, ...restFormProps } = formProps;
   const form = children ?? /* @__PURE__ */ jsx(DefaultForm, { ...restFormProps });
-  return /* @__PURE__ */ jsx(CenteredAuth, { brand, className, children: form });
+  return /* @__PURE__ */ jsx(CenteredAuth, { brand, framed, className, children: form });
 }
 function SettingsSection({ title, description, children, danger = false, className }) {
   return /* @__PURE__ */ jsxs("div", { className: cn$1("grid grid-cols-1 gap-x-8 gap-y-6 py-10 sm:grid-cols-3", className), children: [
@@ -3281,10 +3303,13 @@ function Navbar({
       })
     ] }),
     /* @__PURE__ */ jsxs(Sheet, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button$1, { variant: "ghost", size: "icon", className: "col-start-3 justify-self-end md:hidden", children: [
-        /* @__PURE__ */ jsx(Menu, { className: "size-5" }),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Open menu" })
-      ] }) }),
+      /* @__PURE__ */ jsxs("div", { className: "col-start-3 flex items-center justify-end gap-1 md:hidden", children: [
+        controls?.map((control, i) => /* @__PURE__ */ jsx(React20.Fragment, { children: control }, i)),
+        /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button$1, { variant: "ghost", size: "icon", children: [
+          /* @__PURE__ */ jsx(Menu, { className: "size-5" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Open menu" })
+        ] }) })
+      ] }),
       /* @__PURE__ */ jsxs(SheetContent, { side: "left", className: "w-72", children: [
         /* @__PURE__ */ jsx("div", { className: "flex items-center pb-4", children: /* @__PURE__ */ jsx("span", { onClickCapture: closeMobileMenu, className: "cursor-pointer", children: renderLink({
           href: brandHref,
@@ -3293,7 +3318,6 @@ function Navbar({
             /* @__PURE__ */ jsx("span", { children: brand.name })
           ] })
         }) }) }),
-        controls?.length ? /* @__PURE__ */ jsx("div", { className: "mb-4 flex w-full items-center justify-between gap-1", children: controls.map((control, i) => /* @__PURE__ */ jsx(React20.Fragment, { children: control }, i)) }) : null,
         /* @__PURE__ */ jsx(Separator, {}),
         /* @__PURE__ */ jsx("nav", { className: "mt-4 flex flex-col gap-1", children: navLinks.map((link) => /* @__PURE__ */ jsx("span", { onClickCapture: closeMobileMenu, children: renderLink({
           href: link.href,