@olwiba/ui 0.1.14 → 0.2.0

package/dist/index.js

@@ -1,13 +1,15 @@
 import { cn } from './chunk-AMWLSHD6.js';
 export { MdxContent, cn } from './chunk-AMWLSHD6.js';
-import * as React29 from 'react';
+import * as React31 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, 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, Spinner, Popover, PopoverTrigger, PopoverContent, SidebarProvider, SidebarInset, CardHeader, CardTitle, CardDescription, CardContent, ContextMenuSeparator, ContextMenuLabel, ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent, ContextMenuItem, ContextMenuShortcut, Sidebar, SidebarHeader, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarFooter, SidebarTrigger, useSidebar, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup, DropdownMenuItem } 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, Sidebar, SidebarHeader, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarFooter, SidebarTrigger, useSidebar, 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 { ArrowLeft, ArrowUpRight, X, ArrowRight, ChevronLeft, ChevronRight, Sparkles, Rocket, Check, Minus, Quote, Star, Twitter, Github, Linkedin, Mail, MessageSquare, ChevronDown, Send, Menu, Search, TrendingUp, TrendingDown, Sun, Moon, Palette, AlertTriangle, Loader2, Layers, LayoutGrid, 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, ArrowRight, Sparkles, Minus, Quote, Star, Twitter, Github, Linkedin, Mail, MessageSquare, ChevronDown, Send, Menu, UploadCloud, File, CheckCircle2, AlertCircle, Bell, Inbox, Activity, TrendingUp, TrendingDown, Sun, Moon, Palette, AlertTriangle, Rocket, Info, Layers, LayoutGrid, ShieldCheck, Building2, MoreVerticalIcon, CreditCardIcon, BellIcon, LogOutIcon } from 'lucide-react';
+import { useReactTable, getPaginationRowModel, getSortedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
+import { toast } from 'sonner';
 
-var OlwibaUIContext = React29.createContext({
+var OlwibaUIContext = React31.createContext({
   isMobile: false,
   mode: "default",
   setMode: () => {
@@ -16,17 +18,17 @@ var OlwibaUIContext = React29.createContext({
 function OlwibaUIProvider({ children, isMobile: isMobileProp, mode: initialMode = "default" }) {
   const detectedMobile = useIsMobile();
   const isMobile = isMobileProp ?? detectedMobile;
-  const [mode, setMode] = React29.useState(initialMode);
+  const [mode, setMode] = React31.useState(initialMode);
   const variant = mode !== "default" ? mode : void 0;
   return /* @__PURE__ */ jsx(OlwibaUIContext.Provider, { value: { isMobile, mode, setMode }, children: /* @__PURE__ */ jsx(UIVariantProvider, { mode: variant, children }) });
 }
 function useOlwibaUI() {
-  return React29.useContext(OlwibaUIContext);
+  return React31.useContext(OlwibaUIContext);
 }
 function useUIMode() {
-  return React29.useContext(OlwibaUIContext).mode;
+  return React31.useContext(OlwibaUIContext).mode;
 }
-var Button = React29.forwardRef(
+var Button = React31.forwardRef(
   ({ mode, ...props }, ref) => {
     const ctxMode = useUIMode();
     const resolvedMode = mode ?? (ctxMode !== "default" ? ctxMode : void 0);
@@ -34,7 +36,7 @@ var Button = React29.forwardRef(
   }
 );
 Button.displayName = "Button";
-var Card = React29.forwardRef(
+var Card = React31.forwardRef(
   ({ mode, ...props }, ref) => {
     const ctxMode = useUIMode();
     const resolvedMode = mode ?? (ctxMode !== "default" ? ctxMode : void 0);
@@ -45,7 +47,7 @@ Card.displayName = "Card";
 function Badge(props) {
   return /* @__PURE__ */ jsx(Badge$1, { ...props });
 }
-var Input = React29.forwardRef(
+var Input = React31.forwardRef(
   ({ mode, ...props }, ref) => {
     const ctxMode = useUIMode();
     const resolvedMode = mode ?? (ctxMode !== "default" ? ctxMode : void 0);
@@ -53,7 +55,7 @@ var Input = React29.forwardRef(
   }
 );
 Input.displayName = "Input";
-var Textarea = React29.forwardRef(
+var Textarea = React31.forwardRef(
   ({ mode, ...props }, ref) => {
     const ctxMode = useUIMode();
     const resolvedMode = mode ?? (ctxMode !== "default" ? ctxMode : void 0);
@@ -61,13 +63,13 @@ var Textarea = React29.forwardRef(
   }
 );
 Textarea.displayName = "Textarea";
-var Checkbox = React29.forwardRef(({ mode, ...props }, ref) => {
+var Checkbox = React31.forwardRef(({ mode, ...props }, ref) => {
   const ctxMode = useUIMode();
   const resolvedMode = mode ?? (ctxMode !== "default" ? ctxMode : void 0);
   return /* @__PURE__ */ jsx(Checkbox$1, { mode: resolvedMode, ...props, ref });
 });
 Checkbox.displayName = "Checkbox";
-var Switch = React29.forwardRef(({ mode: _mode, ...props }, ref) => {
+var Switch = React31.forwardRef(({ mode: _mode, ...props }, ref) => {
   return /* @__PURE__ */ jsx(Switch$1, { ...props, ref });
 });
 Switch.displayName = "Switch";
@@ -481,6 +483,13 @@ function SplitAuth({ children, panel }) {
     /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-6 lg:p-10", children })
   ] });
 }
+var authCopy = {
+  signin: { title: "Sign in", description: "Enter your email and password to continue.", submit: "Sign in" },
+  signup: { title: "Create an account", description: "Enter your details to create your account.", submit: "Create account" },
+  "forgot-password": { title: "Reset your password", description: "Enter the email on your account and we\u2019ll send you a link to reset your password.", submit: "Send reset link" },
+  "reset-password": { title: "Choose a new password", description: "Your new password must be different from previous passwords.", submit: "Reset password" },
+  verify: { title: "Enter your code", description: "We sent a verification code to your email.", submit: "Verify" }
+};
 function DefaultForm({
   mode = "signin",
   onSubmit,
@@ -488,8 +497,12 @@ function DefaultForm({
   signUpHref = "#",
   signInHref = "#",
   forgotPasswordHref = "#",
+  onResend,
+  destination,
+  codeLength = 6,
   brand,
   error,
+  success,
   loading,
   renderLink = defaultRenderLink2,
   footer,
@@ -497,15 +510,24 @@ function DefaultForm({
   defaultPassword
 }) {
   const isSignUp = mode === "signup";
+  const isForgotPassword = mode === "forgot-password";
+  const isResetPassword = mode === "reset-password";
+  const isVerify = mode === "verify";
+  const [code, setCode] = React31.useState("");
   const hasPrefill = !!(defaultEmail || defaultPassword);
   const prefillStyle = (active) => active ? { animation: "auth-prefill 1.6s ease-out 0.35s 1 both" } : void 0;
+  const copy = authCopy[mode];
   return /* @__PURE__ */ jsxs(Card, { className: "w-full", children: [
     hasPrefill && // Theme tokens hold full color values (oklch), so opacity must come from color-mix, not hsl(var()/a)
     /* @__PURE__ */ jsx("style", { children: `@keyframes auth-prefill{0%{box-shadow:0 0 0 0 transparent}40%{box-shadow:0 0 0 3px color-mix(in oklab,var(--primary) 45%,transparent),0 0 16px 2px color-mix(in oklab,var(--primary) 35%,transparent)}100%{box-shadow:0 0 0 0 transparent}}` }),
     /* @__PURE__ */ jsxs(CardHeader, { children: [
       brand && /* @__PURE__ */ jsx("div", { className: "mb-2", children: brand }),
-      /* @__PURE__ */ jsx(CardTitle, { children: isSignUp ? "Create an account" : "Sign in" }),
-      /* @__PURE__ */ jsx(CardDescription, { children: isSignUp ? "Enter your details to create your account." : "Enter your email and password to continue." })
+      /* @__PURE__ */ jsx(CardTitle, { children: copy.title }),
+      /* @__PURE__ */ jsx(CardDescription, { children: isVerify && destination ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        "We sent a verification code to ",
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: destination }),
+        "."
+      ] }) : copy.description })
     ] }),
     /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
       /* @__PURE__ */ jsxs("form", { onSubmit, className: "space-y-4", children: [
@@ -513,7 +535,7 @@ function DefaultForm({
           /* @__PURE__ */ jsx(Label, { htmlFor: "auth-name", children: "Name" }),
           /* @__PURE__ */ jsx(Input, { id: "auth-name", name: "name", type: "text", placeholder: "Your name", autoComplete: "name" })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        (mode === "signin" || mode === "signup" || isForgotPassword) && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsx(Label, { htmlFor: "auth-email", children: "Email address" }),
           /* @__PURE__ */ jsx(
             Input,
@@ -528,7 +550,7 @@ function DefaultForm({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        (mode === "signin" || mode === "signup") && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
             /* @__PURE__ */ jsx(Label, { htmlFor: "auth-password", children: "Password" }),
             !isSignUp && forgotPasswordHref && renderLink({
@@ -550,13 +572,36 @@ function DefaultForm({
             }
           )
         ] }),
-        error && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-destructive", children: error }),
+        isResetPassword && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx(Label, { htmlFor: "auth-new-password", children: "New password" }),
+            /* @__PURE__ */ jsx(Input, { id: "auth-new-password", name: "password", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", autoComplete: "new-password" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx(Label, { htmlFor: "auth-confirm-password", children: "Confirm password" }),
+            /* @__PURE__ */ jsx(Input, { id: "auth-confirm-password", name: "confirmPassword", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", autoComplete: "new-password" })
+          ] })
+        ] }),
+        isVerify && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx("input", { type: "hidden", name: "code", value: code }),
+          /* @__PURE__ */ jsx("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ jsx(InputOTP, { maxLength: codeLength, value: code, onChange: setCode, containerClassName: "justify-center", children: /* @__PURE__ */ jsx(InputOTPGroup, { children: Array.from({ length: codeLength }).map((_, i) => /* @__PURE__ */ jsx(InputOTPSlot, { index: i }, i)) }) }) })
+        ] }),
+        error && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-sm font-medium text-destructive", children: error }),
+        success && /* @__PURE__ */ jsx("p", { role: "status", className: "text-sm font-medium text-primary", children: success }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ jsx(Button, { type: "submit", className: "w-full", disabled: loading, children: loading ? "Please wait\u2026" : isSignUp ? "Create account" : "Sign in" }),
-          onSso && /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", className: "w-full", onClick: onSso, disabled: loading, children: "Use SSO" })
+          /* @__PURE__ */ jsxs(Button, { type: "submit", className: "w-full", disabled: loading || isVerify && code.length < codeLength, children: [
+            loading && /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }),
+            loading ? "Please wait\u2026" : copy.submit
+          ] }),
+          onSso && (mode === "signin" || mode === "signup") && /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", className: "w-full", onClick: onSso, disabled: loading, children: "Use SSO" })
         ] })
       ] }),
-      /* @__PURE__ */ jsx("p", { className: "text-center text-xs text-muted-foreground", children: isSignUp ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      isVerify && onResend && /* @__PURE__ */ jsxs("p", { className: "text-center text-xs text-muted-foreground", children: [
+        "Didn\u2019t get a code?",
+        " ",
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: onResend, className: "text-foreground underline underline-offset-4", children: "Resend" })
+      ] }),
+      (mode === "signin" || mode === "signup") && /* @__PURE__ */ jsx("p", { className: "text-center text-xs text-muted-foreground", children: isSignUp ? /* @__PURE__ */ jsxs(Fragment, { children: [
         "Already have an account?",
         " ",
         renderLink({ href: signInHref, className: "text-foreground underline underline-offset-4", children: "Sign in" })
@@ -565,6 +610,7 @@ function DefaultForm({
         " ",
         renderLink({ href: signUpHref, className: "text-foreground underline underline-offset-4", children: "Create an account" })
       ] }) }),
+      (isForgotPassword || isResetPassword || isVerify) && /* @__PURE__ */ jsx("p", { className: "text-center text-xs text-muted-foreground", children: renderLink({ href: signInHref, className: "text-foreground underline underline-offset-4", children: "Back to sign in" }) }),
       footer && /* @__PURE__ */ jsx("div", { children: footer })
     ] })
   ] });
@@ -584,6 +630,435 @@ function AuthSection({
   const form = children ?? /* @__PURE__ */ jsx(DefaultForm, { ...restFormProps });
   return /* @__PURE__ */ jsx(CenteredAuth, { brand, 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: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h2", { className: cn$1("text-base font-semibold", danger && "text-destructive"), children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: description })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "sm:col-span-2", children })
+  ] });
+}
+var selectColumn = {
+  id: "__select",
+  header: ({ table }) => /* @__PURE__ */ jsx(
+    Checkbox$1,
+    {
+      checked: table.getIsAllPageRowsSelected() || table.getIsSomePageRowsSelected() && "indeterminate",
+      onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value),
+      "aria-label": "Select all"
+    }
+  ),
+  cell: ({ row }) => /* @__PURE__ */ jsx(
+    Checkbox$1,
+    {
+      checked: row.getIsSelected(),
+      onCheckedChange: (value) => row.toggleSelected(!!value),
+      onClick: (e) => e.stopPropagation(),
+      "aria-label": "Select row"
+    }
+  ),
+  enableSorting: false
+};
+function DataTable({
+  columns,
+  data,
+  searchKey,
+  searchPlaceholder = "Search\u2026",
+  selectable = false,
+  onSelectionChange,
+  pageSize = 10,
+  toolbar,
+  onRowClick,
+  emptyMessage = "No results.",
+  className
+}) {
+  const [sorting, setSorting] = React31.useState([]);
+  const [rowSelection, setRowSelection] = React31.useState({});
+  const [globalFilter, setGlobalFilter] = React31.useState("");
+  const allColumns = React31.useMemo(
+    () => selectable ? [selectColumn, ...columns] : columns,
+    [selectable, columns]
+  );
+  const table = useReactTable({
+    data,
+    columns: allColumns,
+    state: { sorting, rowSelection, globalFilter },
+    onSortingChange: setSorting,
+    onRowSelectionChange: setRowSelection,
+    onGlobalFilterChange: setGlobalFilter,
+    globalFilterFn: (row, _columnId, filterValue) => {
+      if (!searchKey) return true;
+      const value = row.getValue(searchKey);
+      return String(value ?? "").toLowerCase().includes(String(filterValue).toLowerCase());
+    },
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    ...pageSize > 0 ? { getPaginationRowModel: getPaginationRowModel() } : {},
+    initialState: pageSize > 0 ? { pagination: { pageSize } } : void 0,
+    enableRowSelection: selectable
+  });
+  React31.useEffect(() => {
+    if (!onSelectionChange) return;
+    onSelectionChange(table.getSelectedRowModel().rows.map((r) => r.original));
+  }, [rowSelection]);
+  const rows = table.getRowModel().rows;
+  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: [
+        /* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: globalFilter,
+            onChange: (e) => setGlobalFilter(e.target.value),
+            placeholder: searchPlaceholder,
+            className: "pl-8"
+          }
+        )
+      ] }) : /* @__PURE__ */ jsx("div", {}),
+      toolbar
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-lg border", children: /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => {
+        const canSort = header.column.getCanSort();
+        const sortDir = header.column.getIsSorted();
+        return /* @__PURE__ */ jsx(
+          TableHead,
+          {
+            "aria-sort": sortDir === "asc" ? "ascending" : sortDir === "desc" ? "descending" : canSort ? "none" : void 0,
+            children: header.isPlaceholder ? null : canSort ? /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "flex items-center gap-1.5 font-medium hover:text-foreground",
+                onClick: header.column.getToggleSortingHandler(),
+                children: [
+                  flexRender(header.column.columnDef.header, header.getContext()),
+                  sortDir === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "size-3.5" }) : sortDir === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { className: "size-3.5" }) : /* @__PURE__ */ jsx(ArrowUpDown, { className: "size-3.5 text-muted-foreground/50" })
+                ]
+              }
+            ) : flexRender(header.column.columnDef.header, header.getContext())
+          },
+          header.id
+        );
+      }) }, headerGroup.id)) }),
+      /* @__PURE__ */ jsx(TableBody, { children: rows.length ? rows.map((row) => /* @__PURE__ */ jsx(
+        TableRow,
+        {
+          "data-state": row.getIsSelected() ? "selected" : void 0,
+          onClick: () => onRowClick?.(row.original),
+          tabIndex: onRowClick ? 0 : void 0,
+          onKeyDown: onRowClick ? (e) => {
+            if (e.key === "Enter" && e.target === e.currentTarget) onRowClick(row.original);
+          } : void 0,
+          className: cn$1(onRowClick && "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"),
+          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+        },
+        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: [
+      /* @__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()}`
+      ] }),
+      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: [
+          /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" }),
+          " Previous"
+        ] }),
+        /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), children: [
+          "Next ",
+          /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function InviteDialog({ roles, onInvite, onClose }) {
+  const [email, setEmail] = React31.useState("");
+  const [role, setRole] = React31.useState(roles[roles.length - 1] ?? roles[0]);
+  return /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs(
+    "form",
+    {
+      onSubmit: (e) => {
+        e.preventDefault();
+        onInvite?.(email, role);
+        onClose();
+      },
+      children: [
+        /* @__PURE__ */ jsxs(DialogHeader, { children: [
+          /* @__PURE__ */ jsx(DialogTitle, { children: "Invite a team member" }),
+          /* @__PURE__ */ jsx(DialogDescription, { children: "They\u2019ll get an email invite to join this workspace." })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-4 py-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx(Label, { htmlFor: "invite-email", children: "Email address" }),
+            /* @__PURE__ */ jsx(Input, { id: "invite-email", type: "email", required: true, placeholder: "name@company.com", value: email, onChange: (e) => setEmail(e.target.value) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx(Label, { children: "Role" }),
+            /* @__PURE__ */ jsxs(Select, { value: role, onValueChange: setRole, children: [
+              /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+              /* @__PURE__ */ jsx(SelectContent, { children: roles.map((r) => /* @__PURE__ */ jsx(SelectItem, { value: r, children: r }, r)) })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(DialogFooter, { children: [
+          /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", children: "Cancel" }) }),
+          /* @__PURE__ */ jsx(Button, { type: "submit", children: "Send invite" })
+        ] })
+      ]
+    }
+  ) });
+}
+function TeamMembersPanel({
+  members,
+  roles = ["Owner", "Admin", "Member"],
+  onInvite,
+  onRoleChange,
+  onRemove,
+  title = "Team members",
+  description = "Manage who has access to this workspace."
+}) {
+  const [inviteOpen, setInviteOpen] = React31.useState(false);
+  const columns = React31.useMemo(() => [
+    {
+      accessorKey: "name",
+      header: "Name",
+      cell: ({ row }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxs(Avatar, { className: "size-8", children: [
+          /* @__PURE__ */ jsx(AvatarImage, { src: row.original.avatar, alt: "" }),
+          /* @__PURE__ */ jsx(AvatarFallback, { children: row.original.name.slice(0, 2).toUpperCase() })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium leading-none", children: row.original.name }),
+          /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: row.original.email })
+        ] })
+      ] })
+    },
+    {
+      accessorKey: "role",
+      header: "Role",
+      cell: ({ row }) => onRoleChange ? /* @__PURE__ */ jsxs(Select, { value: row.original.role, onValueChange: (value) => onRoleChange(row.original.id, value), children: [
+        /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 w-32", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+        /* @__PURE__ */ jsx(SelectContent, { children: roles.map((r) => /* @__PURE__ */ jsx(SelectItem, { value: r, children: r }, r)) })
+      ] }) : /* @__PURE__ */ jsx(Badge$1, { variant: "secondary", children: row.original.role })
+    },
+    ...onRemove ? [{
+      id: "actions",
+      header: "",
+      cell: ({ row }) => /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+        /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "icon", className: "size-8", children: [
+          /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Row actions" })
+        ] }) }),
+        /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", children: /* @__PURE__ */ jsx(DropdownMenuItem, { className: "text-destructive", onClick: () => onRemove(row.original.id), children: "Remove member" }) })
+      ] }),
+      enableSorting: false
+    }] : []
+  ], [roles, onRoleChange, onRemove]);
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold", children: title }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: description })
+      ] }),
+      onInvite && /* @__PURE__ */ jsxs(Dialog, { open: inviteOpen, onOpenChange: setInviteOpen, children: [
+        /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { children: [
+          /* @__PURE__ */ jsx(UserPlus, { className: "size-4" }),
+          " Invite member"
+        ] }) }),
+        /* @__PURE__ */ jsx(InviteDialog, { roles, onInvite, onClose: () => setInviteOpen(false) }, String(inviteOpen))
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(DataTable, { columns, data: members, searchKey: "name", searchPlaceholder: "Search members\u2026", pageSize: 0 })
+  ] });
+}
+var invoiceStatusVariant = {
+  paid: "secondary",
+  open: "outline",
+  void: "destructive"
+};
+function BillingPanel({
+  planName,
+  planPrice,
+  renewalDate,
+  usage,
+  paymentMethod,
+  invoices,
+  onManagePlan,
+  onUpdatePaymentMethod,
+  className
+}) {
+  const invoiceColumns = React31.useMemo(() => [
+    { accessorKey: "date", header: "Date", enableSorting: false },
+    { accessorKey: "amount", header: "Amount", enableSorting: false },
+    {
+      accessorKey: "status",
+      header: "Status",
+      enableSorting: false,
+      cell: ({ row }) => /* @__PURE__ */ jsx(Badge$1, { variant: invoiceStatusVariant[row.original.status], className: "capitalize", children: row.original.status })
+    },
+    {
+      id: "download",
+      header: "",
+      cell: ({ row }) => row.original.downloadUrl ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "size-8", asChild: true, children: /* @__PURE__ */ jsxs("a", { href: row.original.downloadUrl, download: true, children: [
+        /* @__PURE__ */ jsx(Download, { className: "size-4" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Download invoice" })
+      ] }) }) : null,
+      enableSorting: false
+    }
+  ], []);
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsxs("div", { className: "divide-y divide-border", children: [
+    /* @__PURE__ */ jsxs(SettingsSection, { title: "Current plan", description: "Your subscription and usage against plan limits.", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4 rounded-lg border bg-card/60 p-4", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-lg font-semibold", children: planName }),
+            planPrice && /* @__PURE__ */ jsx(Badge$1, { variant: "secondary", children: planPrice })
+          ] }),
+          renewalDate && /* @__PURE__ */ jsxs("p", { className: "mt-1 text-sm text-muted-foreground", children: [
+            "Renews ",
+            renewalDate
+          ] })
+        ] }),
+        onManagePlan && /* @__PURE__ */ jsx(Button, { onClick: onManagePlan, children: "Manage plan" })
+      ] }),
+      usage && usage.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-4 space-y-4", children: usage.map((metric) => {
+        const overLimit = metric.limit > 0 && metric.used > metric.limit;
+        const percent = metric.limit > 0 ? Math.min(100, metric.used / metric.limit * 100) : 0;
+        return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm", children: [
+            /* @__PURE__ */ jsx("span", { children: metric.label }),
+            /* @__PURE__ */ jsxs("span", { className: overLimit ? "font-medium text-destructive" : "text-muted-foreground", children: [
+              metric.used,
+              metric.unit,
+              " / ",
+              metric.limit,
+              metric.unit
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(Progress, { value: percent, className: overLimit ? "[&>div]:bg-destructive" : void 0 })
+        ] }, metric.label);
+      }) })
+    ] }),
+    paymentMethod && /* @__PURE__ */ jsx(SettingsSection, { title: "Payment method", description: "Used for your subscription renewal.", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4 rounded-lg border bg-card/60 p-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx(CreditCard, { className: "size-5 text-muted-foreground" }),
+        /* @__PURE__ */ jsxs("p", { className: "text-sm", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium capitalize", children: paymentMethod.brand }),
+          " ending in ",
+          paymentMethod.last4,
+          /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+            " \xB7 expires ",
+            paymentMethod.expiry
+          ] })
+        ] })
+      ] }),
+      onUpdatePaymentMethod && /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: onUpdatePaymentMethod, children: "Update" })
+    ] }) }),
+    invoices && invoices.length > 0 && /* @__PURE__ */ jsx(SettingsSection, { title: "Billing history", description: "Download past invoices for your records.", children: /* @__PURE__ */ jsx(DataTable, { columns: invoiceColumns, data: invoices, pageSize: 5 }) })
+  ] }) });
+}
+function OnboardingWizard({
+  steps,
+  onComplete,
+  onStepChange,
+  step: stepProp,
+  onStepIndexChange,
+  completeLabel = "Finish",
+  className
+}) {
+  const [internalStep, setInternalStep] = React31.useState(0);
+  const [error, setError] = React31.useState(null);
+  const [pending, setPending] = React31.useState(false);
+  const index = stepProp ?? internalStep;
+  const current = steps[index];
+  const isLast = index === steps.length - 1;
+  const goTo = (next) => {
+    setError(null);
+    if (stepProp === void 0) setInternalStep(next);
+    onStepIndexChange?.(next);
+    onStepChange?.(next);
+  };
+  const handleNext = async () => {
+    if (current.onNext) {
+      setPending(true);
+      let result;
+      try {
+        result = await current.onNext();
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Something went wrong. Please try again.");
+        return;
+      } finally {
+        setPending(false);
+      }
+      if (result === false) {
+        setError("Please complete this step before continuing.");
+        return;
+      }
+      if (typeof result === "string") {
+        setError(result);
+        return;
+      }
+    }
+    if (isLast) {
+      onComplete?.();
+    } else {
+      goTo(index + 1);
+    }
+  };
+  const handleBack = () => {
+    if (index > 0) goTo(index - 1);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn$1("w-full max-w-lg space-y-8", className), children: [
+    /* @__PURE__ */ jsx("ol", { className: "flex items-center", "aria-label": "Progress", children: steps.map((step, i) => /* @__PURE__ */ jsxs(
+      "li",
+      {
+        "aria-current": i === index ? "step" : void 0,
+        className: cn$1("flex items-center", i !== steps.length - 1 && "flex-1"),
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn$1(
+                "flex size-8 shrink-0 items-center justify-center rounded-full border text-xs font-medium",
+                i < index ? "border-primary bg-primary text-primary-foreground" : i === index ? "border-primary text-primary" : "border-border text-muted-foreground"
+              ),
+              children: [
+                i < index ? /* @__PURE__ */ jsx(Check, { className: "size-4" }) : i + 1,
+                /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+                  step.title,
+                  i < index ? " (completed)" : ""
+                ] })
+              ]
+            }
+          ),
+          i !== steps.length - 1 && /* @__PURE__ */ jsx("div", { className: cn$1("mx-2 h-px flex-1", i < index ? "bg-primary" : "bg-border") })
+        ]
+      },
+      step.id
+    )) }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold tracking-tight", children: current.title }),
+        current.description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: current.description })
+      ] }),
+      /* @__PURE__ */ jsx("div", { children: current.content }),
+      error && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-sm font-medium text-destructive", children: error })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", onClick: handleBack, disabled: index === 0 || pending, children: "Back" }),
+      /* @__PURE__ */ jsxs(Button, { type: "button", onClick: handleNext, disabled: pending, children: [
+        pending && /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }),
+        pending ? "Please wait\u2026" : isLast ? completeLabel : "Continue"
+      ] })
+    ] })
+  ] });
+}
 function EmptyState({ icon: Icon, title, description, action, className, ...props }) {
   return /* @__PURE__ */ jsxs(
     "div",
@@ -833,9 +1308,9 @@ function FadeIn({
   style,
   ...props
 }) {
-  const ref = React29.useRef(null);
-  const [visible, setVisible] = React29.useState(false);
-  React29.useEffect(() => {
+  const ref = React31.useRef(null);
+  const [visible, setVisible] = React31.useState(false);
+  React31.useEffect(() => {
     const el = ref.current;
     if (!el) return;
     const observer = new IntersectionObserver(
@@ -942,27 +1417,28 @@ function HeroSection({
   socialProofText,
   renderLink = defaultRenderLink4
 }) {
+  const mode = useUIVariant();
   return /* @__PURE__ */ jsx("section", { className: "overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: marketingSectionSpacing.hero, children: [
     /* @__PURE__ */ jsxs("div", { className: "mx-auto grid max-w-6xl items-center gap-10 lg:grid-cols-2 lg:gap-16", children: [
       /* @__PURE__ */ jsx(FadeIn, { direction: "left", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
-        badge && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Badge$1, { variant: "secondary", children: badge }) }),
+        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$1, { size: "lg", children: [
+            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$1, { size: "lg", variant: "outline", children: secondaryCta.label })
+            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: "overflow-hidden rounded-2xl", children: heroImage }) })
+      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 }) })
     ] }),
     (avatarUrls?.length || socialProofText) && /* @__PURE__ */ jsx(FadeIn, { direction: "up", delay: 400, children: /* @__PURE__ */ jsxs("div", { className: "mx-auto mt-12 flex max-w-6xl items-center gap-4", children: [
       avatarUrls && avatarUrls.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex -space-x-3", children: avatarUrls.map((url, i) => /* @__PURE__ */ jsxs(Avatar, { className: "size-9 border-2 border-background", children: [
@@ -1021,6 +1497,88 @@ function FeatureCard({ icon: Icon, title, description, href, className, ...props
   }
   return content;
 }
+function Carousel({
+  children,
+  itemClassName = "w-[280px] sm:w-[320px]",
+  controls = "top-right",
+  ariaLabel,
+  className
+}) {
+  const mode = useUIVariant();
+  const trackRef = React31.useRef(null);
+  const [canPrev, setCanPrev] = React31.useState(false);
+  const [canNext, setCanNext] = React31.useState(true);
+  const updateScrollState = React31.useCallback(() => {
+    const track = trackRef.current;
+    if (!track) return;
+    setCanPrev(track.scrollLeft > 8);
+    setCanNext(track.scrollLeft < track.scrollWidth - track.clientWidth - 8);
+  }, []);
+  React31.useEffect(() => {
+    const track = trackRef.current;
+    if (!track) return;
+    updateScrollState();
+    track.addEventListener("scroll", updateScrollState, { passive: true });
+    const observer = new ResizeObserver(updateScrollState);
+    observer.observe(track);
+    return () => {
+      track.removeEventListener("scroll", updateScrollState);
+      observer.disconnect();
+    };
+  }, [updateScrollState]);
+  const scrollByItem = (direction) => {
+    const track = trackRef.current;
+    if (!track) return;
+    const item = track.querySelector("[data-carousel-item]");
+    const gap = parseFloat(getComputedStyle(track).columnGap) || 24;
+    const step = item ? item.offsetWidth + gap : track.clientWidth * 0.8;
+    track.scrollBy({ left: direction * step, behavior: "smooth" });
+  };
+  const controlClasses = cn$1(
+    "flex size-9 items-center justify-center border bg-background text-foreground transition-colors",
+    "hover:bg-muted disabled:opacity-40 disabled:hover:bg-background",
+    mode === "smooth" ? "rounded-2xl" : "rounded-xl"
+  );
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    controls === "top-right" && /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center justify-end gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Previous",
+          className: controlClasses,
+          onClick: () => scrollByItem(-1),
+          disabled: !canPrev,
+          children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Next",
+          className: controlClasses,
+          onClick: () => scrollByItem(1),
+          disabled: !canNext,
+          children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: trackRef,
+        role: "region",
+        "aria-label": ariaLabel,
+        className: "flex snap-x snap-mandatory gap-6 overflow-x-auto pb-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+        children: React31.Children.map(
+          children,
+          (child) => child == null ? null : /* @__PURE__ */ jsx("div", { "data-carousel-item": true, className: cn$1("shrink-0 snap-start", itemClassName), children: child })
+        )
+      }
+    )
+  ] });
+}
 var translateMap2 = {
   up: [0, 20],
   down: [0, -20],
@@ -1038,9 +1596,9 @@ function StaggerChildren({
   className,
   ...props
 }) {
-  const ref = React29.useRef(null);
-  const [visible, setVisible] = React29.useState(false);
-  React29.useEffect(() => {
+  const ref = React31.useRef(null);
+  const [visible, setVisible] = React31.useState(false);
+  React31.useEffect(() => {
     const el = ref.current;
     if (!el) return;
     const observer = new IntersectionObserver(
@@ -1058,7 +1616,7 @@ function StaggerChildren({
     return () => observer.disconnect();
   }, [once]);
   const [tx, ty] = translateMap2[direction];
-  return /* @__PURE__ */ jsx("div", { ref, className: cn$1(className), ...props, children: React29.Children.map(children, (child, i) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { ref, className: cn$1(className), ...props, children: React31.Children.map(children, (child, i) => /* @__PURE__ */ jsx(
     "div",
     {
       className: "h-full",
@@ -1076,7 +1634,8 @@ function FeaturesSection({
   title = "Everything you need to ship fast",
   description = "A complete system of components, blocks, and hooks designed to work together - and get out of your way.",
   badge = "Features",
-  features
+  features,
+  layout = "grid"
 }) {
   const mode = useUIVariant();
   const sectionClasses = cn$1(
@@ -1085,18 +1644,19 @@ function FeaturesSection({
     mode === "playful" && "rounded-2xl border-primary/25 border",
     !mode && "rounded-2xl border"
   );
-  return /* @__PURE__ */ jsx("section", { className: sectionClasses, children: /* @__PURE__ */ jsx("div", { className: "px-6 py-14 sm:px-10 sm:py-20", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-4xl", children: [
+  const cards = features.map((feature) => /* @__PURE__ */ jsx(
+    FeatureCard,
+    {
+      icon: feature.icon,
+      title: feature.title,
+      description: feature.description,
+      href: feature.href
+    },
+    feature.title
+  ));
+  return /* @__PURE__ */ jsx("section", { className: sectionClasses, children: /* @__PURE__ */ jsx("div", { className: "px-6 py-14 sm:px-10 sm:py-20", children: /* @__PURE__ */ jsxs("div", { className: cn$1("mx-auto", layout === "carousel" ? "max-w-5xl" : "max-w-4xl"), children: [
     /* @__PURE__ */ jsx(SectionTitle, { title, description, badge }),
-    /* @__PURE__ */ jsx(StaggerChildren, { className: "mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-3", children: features.map((feature) => /* @__PURE__ */ jsx(
-      FeatureCard,
-      {
-        icon: feature.icon,
-        title: feature.title,
-        description: feature.description,
-        href: feature.href
-      },
-      feature.title
-    )) })
+    layout === "carousel" ? /* @__PURE__ */ jsx(FadeIn, { direction: "up", children: /* @__PURE__ */ jsx(Carousel, { className: "mt-10", ariaLabel: title, children: cards }) }) : /* @__PURE__ */ jsx(StaggerChildren, { className: "mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-3", children: cards })
   ] }) }) });
 }
 function GroupedFeaturesSection({
@@ -1226,106 +1786,6 @@ function TechStackSection({
     }) })
   ] }) }) });
 }
-function CarouselSection({
-  title = "Explore the platform",
-  description,
-  badge = "Features",
-  features
-}) {
-  const mode = useUIVariant();
-  const trackRef = React29.useRef(null);
-  const [canPrev, setCanPrev] = React29.useState(false);
-  const [canNext, setCanNext] = React29.useState(true);
-  const updateScrollState = React29.useCallback(() => {
-    const track = trackRef.current;
-    if (!track) return;
-    setCanPrev(track.scrollLeft > 8);
-    setCanNext(track.scrollLeft < track.scrollWidth - track.clientWidth - 8);
-  }, []);
-  React29.useEffect(() => {
-    const track = trackRef.current;
-    if (!track) return;
-    updateScrollState();
-    track.addEventListener("scroll", updateScrollState, { passive: true });
-    const observer = new ResizeObserver(updateScrollState);
-    observer.observe(track);
-    return () => {
-      track.removeEventListener("scroll", updateScrollState);
-      observer.disconnect();
-    };
-  }, [updateScrollState]);
-  const scrollByCard = (direction) => {
-    const track = trackRef.current;
-    if (!track) return;
-    const card = track.querySelector("[data-carousel-item]");
-    const step = card ? card.offsetWidth + 24 : track.clientWidth * 0.8;
-    track.scrollBy({ left: direction * step, behavior: "smooth" });
-  };
-  const sectionClasses = cn$1(
-    "overflow-hidden bg-card",
-    mode === "smooth" && "rounded-3xl border",
-    mode === "playful" && "rounded-2xl border-primary/25 border",
-    !mode && "rounded-2xl border"
-  );
-  const controlClasses = cn$1(
-    "flex size-9 items-center justify-center border bg-background text-foreground transition-colors",
-    "hover:bg-muted disabled:opacity-40 disabled:hover:bg-background",
-    mode === "smooth" ? "rounded-2xl" : "rounded-xl"
-  );
-  return /* @__PURE__ */ jsx("section", { className: sectionClasses, children: /* @__PURE__ */ jsx("div", { className: "px-6 py-14 sm:px-10 sm:py-20", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-5xl", children: [
-    /* @__PURE__ */ jsx(SectionTitle, { title, description, badge }),
-    /* @__PURE__ */ jsxs(FadeIn, { direction: "up", children: [
-      /* @__PURE__ */ jsxs("div", { className: "mt-10 flex items-center justify-end gap-2", children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            "aria-label": "Previous",
-            className: controlClasses,
-            onClick: () => scrollByCard(-1),
-            disabled: !canPrev,
-            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            "aria-label": "Next",
-            className: controlClasses,
-            onClick: () => scrollByCard(1),
-            disabled: !canNext,
-            children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          ref: trackRef,
-          className: "mt-4 flex snap-x snap-mandatory gap-6 overflow-x-auto pb-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
-          children: features.map((feature) => /* @__PURE__ */ jsx(
-            "div",
-            {
-              "data-carousel-item": true,
-              className: "w-[280px] shrink-0 snap-start sm:w-[320px]",
-              children: /* @__PURE__ */ jsx(
-                FeatureCard,
-                {
-                  icon: feature.icon,
-                  title: feature.title,
-                  description: feature.description,
-                  href: feature.href
-                }
-              )
-            },
-            feature.title
-          ))
-        }
-      )
-    ] })
-  ] }) }) });
-}
 var speedDuration = {
   slow: "280s",
   normal: "180s",
@@ -1406,79 +1866,42 @@ function FeatureMarqueeSection({
       ` })
   ] });
 }
-var defaultRenderLink5 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
-function CtaSection({
-  heading,
-  description,
-  primaryCta,
-  secondaryCta,
-  footnote,
-  renderLink = defaultRenderLink5
-}) {
-  const mode = useUIVariant();
-  const sectionClasses = cn$1(
-    "overflow-hidden bg-card",
-    mode === "smooth" && "rounded-3xl border",
-    mode === "playful" && "rounded-2xl border-primary/25 border",
-    !mode && "rounded-2xl border"
-  );
-  return /* @__PURE__ */ jsx("section", { className: sectionClasses, children: /* @__PURE__ */ jsxs("div", { className: "relative px-6 py-16 sm:px-10 sm:py-24", children: [
-    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-[radial-gradient(ellipse_at_center,hsl(var(--primary)/0.15),transparent_70%)]" }),
-    /* @__PURE__ */ jsx(FadeIn, { direction: "up", children: /* @__PURE__ */ jsxs("div", { className: "relative mx-auto max-w-2xl text-center", children: [
-      /* @__PURE__ */ jsx("div", { className: cn$1("mb-4 inline-flex h-10 w-10 items-center justify-center bg-primary/10 text-primary", mode === "smooth" ? "rounded-3xl" : "rounded-2xl"), children: /* @__PURE__ */ jsx(Sparkles, { className: "size-5" }) }),
-      /* @__PURE__ */ jsx("h2", { className: "text-balance text-3xl font-semibold tracking-tight sm:text-4xl", children: heading }),
-      /* @__PURE__ */ jsx("p", { className: "mx-auto mt-4 max-w-lg text-pretty text-muted-foreground", children: description }),
-      /* @__PURE__ */ jsxs("div", { className: "mt-8 flex flex-wrap items-center justify-center gap-3", children: [
-        renderLink({
-          href: primaryCta.href,
-          children: /* @__PURE__ */ jsxs(Button$1, { size: "lg", children: [
-            primaryCta.label,
-            /* @__PURE__ */ jsx(ArrowRight, { className: "ml-2 size-4" })
-          ] })
-        }),
-        secondaryCta && renderLink({
-          href: secondaryCta.href,
-          children: /* @__PURE__ */ jsx(Button$1, { size: "lg", variant: "outline", children: secondaryCta.label })
-        })
-      ] }),
-      footnote && /* @__PURE__ */ jsx("p", { className: "mt-4 text-sm text-muted-foreground", children: footnote })
-    ] }) })
-  ] }) });
+function useIntersectionObserver(options) {
+  const ref = React31.useRef(null);
+  const [isIntersecting, setIsIntersecting] = React31.useState(false);
+  React31.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const observer = new IntersectionObserver(([entry]) => {
+      setIsIntersecting(entry.isIntersecting);
+    }, options);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  return [ref, isIntersecting];
 }
-var defaultRenderLink6 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
-function CtaCardSection({
+var defaultRenderLink5 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
+function ShowcaseCta({
   heading,
   description,
   primaryCta,
   footnote,
   icon,
-  renderLink = defaultRenderLink6
+  renderLink = defaultRenderLink5,
+  sectionClasses
 }) {
-  const ref = React29.useRef(null);
-  const [visible, setVisible] = React29.useState(false);
-  React29.useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          setVisible(true);
-          observer.disconnect();
-        }
-      },
-      { threshold: 0.15 }
-    );
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, []);
+  const [ref, intersecting] = useIntersectionObserver({ threshold: 0.15 });
+  const [visible, setVisible] = React31.useState(false);
+  React31.useEffect(() => {
+    if (intersecting) setVisible(true);
+  }, [intersecting]);
   return /* @__PURE__ */ jsxs(
     "section",
     {
       ref,
       className: cn$1(
-        "relative overflow-hidden rounded-3xl border border-gray-200 shadow-sm dark:border-border",
-        "bg-[#E0DFDB] dark:bg-card",
-        "transition-[opacity,transform] duration-700 ease-out",
+        sectionClasses,
+        "relative transition-[opacity,transform] duration-700 ease-out",
         visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6"
       ),
       children: [
@@ -1487,11 +1910,11 @@ function CtaCardSection({
           {
             className: "pointer-events-none absolute inset-0 flex items-center justify-center",
             style: {
-              opacity: visible ? 0.12 : 0,
+              opacity: visible ? 0.1 : 0,
               transform: visible ? "scale(1) rotate(0deg)" : "scale(0.9) rotate(-5deg)",
               transition: "opacity 700ms ease 200ms, transform 700ms ease 200ms"
             },
-            children: icon ?? /* @__PURE__ */ jsx(Rocket, { className: "size-72 text-foreground dark:text-foreground", strokeWidth: 0.75 })
+            children: icon ?? /* @__PURE__ */ jsx(Rocket, { className: "size-72 text-foreground", strokeWidth: 0.75 })
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: "relative z-10 px-6 py-20 text-center sm:px-10 sm:py-28", children: [
@@ -1499,9 +1922,9 @@ function CtaCardSection({
           description && /* @__PURE__ */ jsx("p", { className: "mx-auto mt-4 max-w-lg text-pretty text-muted-foreground", children: description }),
           /* @__PURE__ */ jsx("div", { className: "mt-8", children: renderLink({
             href: primaryCta.href,
-            children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2 rounded-full bg-foreground px-6 py-3 text-sm font-medium text-background transition-opacity hover:opacity-80", children: [
+            children: /* @__PURE__ */ jsxs(Button, { size: "lg", className: "rounded-full px-6", children: [
               primaryCta.label,
-              /* @__PURE__ */ jsx(ArrowRight, { className: "size-4" })
+              /* @__PURE__ */ jsx(ArrowRight, { className: "ml-2 size-4" })
             ] })
           }) }),
           footnote && /* @__PURE__ */ jsx("p", { className: "mt-5 text-sm text-muted-foreground", children: footnote })
@@ -1510,6 +1933,49 @@ function CtaCardSection({
     }
   );
 }
+function CtaSection(props) {
+  const {
+    heading,
+    description,
+    primaryCta,
+    secondaryCta,
+    footnote,
+    variant = "default",
+    renderLink = defaultRenderLink5
+  } = props;
+  const mode = useUIVariant();
+  const sectionClasses = cn$1(
+    "overflow-hidden bg-card",
+    mode === "smooth" && "rounded-3xl border",
+    mode === "playful" && "rounded-2xl border-primary/25 border",
+    !mode && "rounded-2xl border"
+  );
+  if (variant === "showcase") {
+    return /* @__PURE__ */ jsx(ShowcaseCta, { ...props, sectionClasses });
+  }
+  return /* @__PURE__ */ jsx("section", { className: sectionClasses, children: /* @__PURE__ */ jsxs("div", { className: "relative px-6 py-16 sm:px-10 sm:py-24", children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-[radial-gradient(ellipse_at_center,hsl(var(--primary)/0.15),transparent_70%)]" }),
+    /* @__PURE__ */ jsx(FadeIn, { direction: "up", children: /* @__PURE__ */ jsxs("div", { className: "relative mx-auto max-w-2xl text-center", children: [
+      /* @__PURE__ */ jsx("div", { className: cn$1("mb-4 inline-flex h-10 w-10 items-center justify-center bg-primary/10 text-primary", mode === "smooth" ? "rounded-3xl" : "rounded-2xl"), children: /* @__PURE__ */ jsx(Sparkles, { className: "size-5" }) }),
+      /* @__PURE__ */ jsx("h2", { className: "text-balance text-3xl font-semibold tracking-tight sm:text-4xl", children: heading }),
+      description && /* @__PURE__ */ jsx("p", { className: "mx-auto mt-4 max-w-lg text-pretty text-muted-foreground", children: description }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-8 flex flex-wrap items-center justify-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 })
+        })
+      ] }),
+      footnote && /* @__PURE__ */ jsx("p", { className: "mt-4 text-sm text-muted-foreground", children: footnote })
+    ] }) })
+  ] }) });
+}
 function PricingCard({
   name,
   price,
@@ -1603,8 +2069,8 @@ function CountdownTimer({
   className,
   compact = false
 }) {
-  const [timeLeft, setTimeLeft] = React29.useState(() => getTimeLeft(deadline));
-  React29.useEffect(() => {
+  const [timeLeft, setTimeLeft] = React31.useState(() => getTimeLeft(deadline));
+  React31.useEffect(() => {
     setTimeLeft(getTimeLeft(deadline));
     const id = setInterval(() => setTimeLeft(getTimeLeft(deadline)), 1e3);
     return () => clearInterval(id);
@@ -1630,7 +2096,7 @@ function CountdownTimer({
   ];
   return /* @__PURE__ */ jsxs("div", { className: cn$1("flex items-center justify-center gap-2 text-sm", className), children: [
     /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: label }),
-    /* @__PURE__ */ jsx("span", { className: "flex items-center gap-1 font-mono font-semibold tabular-nums", children: units.map(({ value, unit }, i) => /* @__PURE__ */ jsxs(React29.Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "flex items-center gap-1 font-mono font-semibold tabular-nums", children: units.map(({ value, unit }, i) => /* @__PURE__ */ jsxs(React31.Fragment, { children: [
       /* @__PURE__ */ jsxs("span", { children: [
         String(value).padStart(2, "0"),
         /* @__PURE__ */ jsx("span", { className: "font-normal text-muted-foreground", children: unit })
@@ -1639,7 +2105,7 @@ function CountdownTimer({
     ] }, unit)) })
   ] });
 }
-var defaultRenderLink7 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
+var defaultRenderLink6 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
 function PricingSection({
   title = "Simple, transparent pricing",
   description = "Start for free. Scale as you grow. No hidden fees.",
@@ -1647,13 +2113,13 @@ function PricingSection({
   plans,
   saveBadge = "Save 34%",
   isAuthenticated,
-  renderLink = defaultRenderLink7,
+  renderLink = defaultRenderLink6,
   footnote,
   mode = "subscription",
   foundingDeadline,
   renderPlanFooter
 }) {
-  const [annual, setAnnual] = React29.useState(false);
+  const [annual, setAnnual] = React31.useState(false);
   const isOneTime = mode === "one-time";
   const uiMode = useUIVariant();
   const sectionClasses = cn$1(
@@ -1857,9 +2323,16 @@ function TeamSection({
   title = "The people behind Olwiba",
   description = "A small team with deep experience in design systems, open source, and developer tooling."
 }) {
-  return /* @__PURE__ */ jsx("section", { className: "overflow-hidden rounded-2xl border bg-card", children: /* @__PURE__ */ jsx("div", { className: "px-6 py-14 sm:px-10 sm:py-20", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-5xl", children: [
+  const mode = useUIVariant();
+  const sectionClasses = cn$1(
+    "overflow-hidden bg-card",
+    mode === "smooth" && "rounded-3xl border",
+    mode === "playful" && "rounded-2xl border-primary/25 border",
+    !mode && "rounded-2xl border"
+  );
+  return /* @__PURE__ */ jsx("section", { className: sectionClasses, children: /* @__PURE__ */ jsx("div", { className: "px-6 py-14 sm:px-10 sm:py-20", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-5xl", children: [
     /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-      /* @__PURE__ */ jsx(Badge$1, { variant: "secondary", className: "mb-4", children: badge }),
+      /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "mb-4", children: badge }),
       /* @__PURE__ */ jsx("h2", { className: "text-balance text-3xl font-semibold tracking-tight sm:text-4xl", children: title }),
       /* @__PURE__ */ jsx("p", { className: "mx-auto mt-4 max-w-xl text-pretty text-muted-foreground", children: description })
     ] }),
@@ -1915,10 +2388,10 @@ function CountUp({
   className,
   ...props
 }) {
-  const ref = React29.useRef(null);
-  const [value, setValue] = React29.useState(from);
-  const hasStarted = React29.useRef(false);
-  React29.useEffect(() => {
+  const ref = React31.useRef(null);
+  const [value, setValue] = React31.useState(from);
+  const hasStarted = React31.useRef(false);
+  React31.useEffect(() => {
     const el = ref.current;
     if (!el) return;
     const observer = new IntersectionObserver(
@@ -2011,20 +2484,27 @@ function NewsletterSection({
   successDescription = defaults.successDescription,
   onSubscribe
 } = {}) {
-  const [email, setEmail] = React29.useState("");
-  const [submitted, setSubmitted] = React29.useState(false);
+  const [email, setEmail] = React31.useState("");
+  const [submitted, setSubmitted] = React31.useState(false);
+  const mode = useUIVariant();
+  const sectionClasses = cn$1(
+    "overflow-hidden bg-card",
+    mode === "smooth" && "rounded-3xl border",
+    mode === "playful" && "rounded-2xl border-primary/25 border",
+    !mode && "rounded-2xl border"
+  );
   async function handleSubmit(e) {
     e.preventDefault();
     if (!email) return;
     await onSubscribe?.(email);
     setSubmitted(true);
   }
-  return /* @__PURE__ */ jsx("section", { className: "overflow-hidden rounded-2xl border bg-card", children: /* @__PURE__ */ jsxs("div", { className: "relative px-6 py-14 sm:px-10 sm:py-20", children: [
+  return /* @__PURE__ */ jsx("section", { className: sectionClasses, children: /* @__PURE__ */ jsxs("div", { className: "relative px-6 py-14 sm:px-10 sm:py-20", children: [
     /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,hsl(var(--primary)/0.1),transparent_60%)]" }),
     /* @__PURE__ */ jsxs("div", { className: "relative mx-auto max-w-xl text-center", children: [
       /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center justify-center gap-2", children: [
         /* @__PURE__ */ jsx("div", { className: "inline-flex h-8 w-8 items-center justify-center rounded-xl bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(Mail, { className: "size-4" }) }),
-        /* @__PURE__ */ jsx(Badge$1, { variant: "secondary", children: badge })
+        /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: badge })
       ] }),
       /* @__PURE__ */ jsx("h2", { className: "text-balance text-3xl font-semibold tracking-tight sm:text-4xl", children: title }),
       /* @__PURE__ */ jsx("p", { className: "mx-auto mt-4 max-w-sm text-pretty text-muted-foreground", children: description }),
@@ -2045,7 +2525,7 @@ function NewsletterSection({
           }
         ),
         /* @__PURE__ */ jsx(
-          Input$1,
+          Input,
           {
             type: "email",
             placeholder,
@@ -2055,7 +2535,7 @@ function NewsletterSection({
             className: "flex-1"
           }
         ),
-        /* @__PURE__ */ jsxs(Button$1, { type: "submit", children: [
+        /* @__PURE__ */ jsxs(Button, { type: "submit", children: [
           submitLabel,
           /* @__PURE__ */ jsx(ArrowRight, { className: "ml-2 size-4" })
         ] })
@@ -2096,15 +2576,22 @@ function ContactSection({
   sendAnotherLabel = defaults2.sendAnotherLabel,
   onSubmit
 } = {}) {
-  const [submitted, setSubmitted] = React29.useState(false);
+  const [submitted, setSubmitted] = React31.useState(false);
+  const mode = useUIVariant();
+  const sectionClasses = cn$1(
+    "overflow-hidden bg-card",
+    mode === "smooth" && "rounded-3xl border",
+    mode === "playful" && "rounded-2xl border-primary/25 border",
+    !mode && "rounded-2xl border"
+  );
   async function handleSubmit(e) {
     e.preventDefault();
     await onSubmit?.(e);
     setSubmitted(true);
   }
-  return /* @__PURE__ */ jsx("section", { className: "overflow-hidden rounded-2xl border bg-card", children: /* @__PURE__ */ jsxs("div", { className: "px-6 py-14 sm:px-10 sm:py-20", children: [
+  return /* @__PURE__ */ jsx("section", { className: sectionClasses, children: /* @__PURE__ */ jsxs("div", { className: "px-6 py-14 sm:px-10 sm:py-20", children: [
     /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-2xl text-center", children: [
-      badge && /* @__PURE__ */ jsx("div", { className: "mb-4 flex justify-center", children: /* @__PURE__ */ jsx(Badge$1, { variant: "secondary", children: badge }) }),
+      badge && /* @__PURE__ */ jsx("div", { className: "mb-4 flex justify-center", children: /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: badge }) }),
       /* @__PURE__ */ jsx("h2", { className: "text-balance text-4xl font-semibold tracking-tight sm:text-5xl", children: title }),
       /* @__PURE__ */ jsx("p", { className: "mt-4 text-lg text-muted-foreground", children: description }),
       contactInfo && contactInfo.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-8 flex flex-wrap justify-center gap-6", children: contactInfo.map(({ icon: Icon = Mail, label, value }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
@@ -2116,7 +2603,7 @@ function ContactSection({
       /* @__PURE__ */ jsx("div", { className: "mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(MessageSquare, { className: "size-6" }) }),
       /* @__PURE__ */ jsx("h3", { className: "mt-5 text-lg font-semibold", children: successTitle }),
       /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: successDescription }),
-      /* @__PURE__ */ jsx(Button$1, { variant: "outline", size: "sm", className: "mt-6", onClick: () => setSubmitted(false), children: sendAnotherLabel })
+      /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", className: "mt-6", onClick: () => setSubmitted(false), children: sendAnotherLabel })
     ] }) : /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "mx-auto mt-16 max-w-xl sm:mt-20", children: [
       /* @__PURE__ */ jsx(
         "input",
@@ -2133,7 +2620,7 @@ function ContactSection({
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx(Label, { htmlFor: "contact-first", className: "block text-sm/6 font-semibold", children: "First name" }),
           /* @__PURE__ */ jsx("div", { className: "mt-2.5", children: /* @__PURE__ */ jsx(
-            Input$1,
+            Input,
             {
               id: "contact-first",
               name: "firstName",
@@ -2146,7 +2633,7 @@ function ContactSection({
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx(Label, { htmlFor: "contact-last", className: "block text-sm/6 font-semibold", children: "Last name" }),
           /* @__PURE__ */ jsx("div", { className: "mt-2.5", children: /* @__PURE__ */ jsx(
-            Input$1,
+            Input,
             {
               id: "contact-last",
               name: "lastName",
@@ -2163,7 +2650,7 @@ function ContactSection({
             /* @__PURE__ */ jsx("span", { className: "font-normal text-muted-foreground", children: "(optional)" })
           ] }),
           /* @__PURE__ */ jsx("div", { className: "mt-2.5", children: /* @__PURE__ */ jsx(
-            Input$1,
+            Input,
             {
               id: "contact-company",
               name: "company",
@@ -2175,7 +2662,7 @@ function ContactSection({
         /* @__PURE__ */ jsxs("div", { className: "sm:col-span-2", children: [
           /* @__PURE__ */ jsx(Label, { htmlFor: "contact-email", className: "block text-sm/6 font-semibold", children: "Email" }),
           /* @__PURE__ */ jsx("div", { className: "mt-2.5", children: /* @__PURE__ */ jsx(
-            Input$1,
+            Input,
             {
               id: "contact-email",
               name: "email",
@@ -2221,7 +2708,7 @@ function ContactSection({
         /* @__PURE__ */ jsxs("div", { className: "sm:col-span-2", children: [
           /* @__PURE__ */ jsx(Label, { htmlFor: "contact-message", className: "block text-sm/6 font-semibold", children: "Message" }),
           /* @__PURE__ */ jsx("div", { className: "mt-2.5", children: /* @__PURE__ */ jsx(
-            Textarea$1,
+            Textarea,
             {
               id: "contact-message",
               name: "message",
@@ -2269,7 +2756,7 @@ function ContactSection({
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "mt-10", children: /* @__PURE__ */ jsxs(Button$1, { type: "submit", className: "w-full", children: [
+      /* @__PURE__ */ jsx("div", { className: "mt-10", children: /* @__PURE__ */ jsxs(Button, { type: "submit", className: "w-full", children: [
         "Let's talk",
         /* @__PURE__ */ jsx(Send, { className: "ml-2 size-4" })
       ] }) })
@@ -2379,15 +2866,15 @@ function QualificationSection({
     }) })
   ] }) }) });
 }
-var defaultRenderLink8 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
+var defaultRenderLink7 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
 function Navbar({
   brand,
   navLinks,
   cta,
   controls,
-  renderLink = defaultRenderLink8
+  renderLink = defaultRenderLink7
 }) {
-  const [open, setOpen] = React29.useState(false);
+  const [open, setOpen] = React31.useState(false);
   const brandHref = brand.href ?? "/";
   const hasRightContent = controls?.length || cta?.primary || cta?.secondary;
   return /* @__PURE__ */ jsx("section", { className: "overflow-hidden rounded-2xl border bg-card", children: /* @__PURE__ */ jsxs("nav", { className: "grid h-16 grid-cols-[1fr_auto_1fr] items-center px-6", children: [
@@ -2404,7 +2891,7 @@ function Navbar({
       children: link.label
     }) }, link.label)) }),
     hasRightContent && /* @__PURE__ */ jsxs("div", { className: "hidden items-center justify-end gap-2 md:flex", children: [
-      controls?.map((control, i) => /* @__PURE__ */ jsx(React29.Fragment, { children: control }, i)),
+      controls?.map((control, i) => /* @__PURE__ */ jsx(React31.Fragment, { children: control }, i)),
       (cta?.secondary || cta?.primary) && controls?.length ? /* @__PURE__ */ jsx("div", { className: "mx-1 h-4 w-px bg-border" }) : null,
       cta?.secondary && renderLink({
         href: cta.secondary.href,
@@ -2428,7 +2915,7 @@ 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(React29.Fragment, { children: control }, i)) }) : null,
+        controls?.length ? /* @__PURE__ */ jsx("div", { className: "mb-4 flex w-full items-center justify-between gap-1", children: controls.map((control, i) => /* @__PURE__ */ jsx(React31.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", { onClick: () => setOpen(false), children: renderLink({
           href: link.href,
@@ -2449,14 +2936,14 @@ function Navbar({
     ] })
   ] }) });
 }
-var defaultRenderLink9 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
+var defaultRenderLink8 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
 function Footer({
   brand,
   navLinks,
   socialLinks,
   legal,
   status,
-  renderLink = defaultRenderLink9
+  renderLink = defaultRenderLink8
 }) {
   const brandHref = brand.href ?? "/";
   const copyrightText = legal ?? `\xA9 ${(/* @__PURE__ */ new Date()).getFullYear()} ${brand.name}. All rights reserved.`;
@@ -2577,7 +3064,7 @@ function LogoStrip({
   ] });
 }
 function GridUnderlay({ variant, size = 24, className, ...props }) {
-  const id = React29.useId();
+  const id = React31.useId();
   const pattern = variant === "dots" ? /* @__PURE__ */ jsx("circle", { cx: size / 2, cy: size / 2, r: 1, fill: "currentColor" }) : variant === "lines" ? /* @__PURE__ */ jsx("path", { d: `M ${size} 0 L 0 0 0 ${size}`, fill: "none", stroke: "currentColor", strokeWidth: 0.5 }) : /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("line", { x1: size / 2, y1: 0, x2: size / 2, y2: size, stroke: "currentColor", strokeWidth: 0.5 }),
     /* @__PURE__ */ jsx("line", { x1: 0, y1: size / 2, x2: size, y2: size / 2, stroke: "currentColor", strokeWidth: 0.5 })
@@ -2605,9 +3092,9 @@ function GlowUnderlay({
   style,
   ...props
 }) {
-  const [pos, setPos] = React29.useState({ x: "50%", y: "50%" });
-  const containerRef = React29.useRef(null);
-  React29.useEffect(() => {
+  const [pos, setPos] = React31.useState({ x: "50%", y: "50%" });
+  const containerRef = React31.useRef(null);
+  React31.useEffect(() => {
     if (!followCursor) return;
     const handleMouseMove = (e) => {
       const el = containerRef.current;
@@ -2746,8 +3233,8 @@ function PageTransition({
   style,
   ...props
 }) {
-  const [mounted, setMounted] = React29.useState(false);
-  React29.useEffect(() => {
+  const [mounted, setMounted] = React31.useState(false);
+  React31.useEffect(() => {
     const id = requestAnimationFrame(() => setMounted(true));
     return () => cancelAnimationFrame(id);
   }, []);
@@ -2774,8 +3261,8 @@ function Spotlight({
   triggerClassName,
   shortcut = "\u2318K"
 }) {
-  const [open, setOpen] = React29.useState(false);
-  React29.useEffect(() => {
+  const [open, setOpen] = React31.useState(false);
+  React31.useEffect(() => {
     const down = (e) => {
       if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
         e.preventDefault();
@@ -2805,7 +3292,7 @@ function Spotlight({
       /* @__PURE__ */ jsx(CommandInput, { placeholder }),
       /* @__PURE__ */ jsxs(CommandList, { children: [
         /* @__PURE__ */ jsx(CommandEmpty, { children: "No results found." }),
-        groups.map((group, i) => /* @__PURE__ */ jsxs(React29.Fragment, { children: [
+        groups.map((group, i) => /* @__PURE__ */ jsxs(React31.Fragment, { children: [
           i > 0 && /* @__PURE__ */ jsx(CommandSeparator, {}),
           /* @__PURE__ */ jsx(CommandGroup, { heading: group.heading, children: group.items.map((item) => /* @__PURE__ */ jsxs(
             CommandItem,
@@ -2830,8 +3317,8 @@ function Spotlight({
 var BASE = 40;
 var MAGNIFY_RADIUS = 80;
 function Dock({ items, iconSize = BASE, magnification = 1.7, className, ...props }) {
-  const [mouseX, setMouseX] = React29.useState(null);
-  const containerRef = React29.useRef(null);
+  const [mouseX, setMouseX] = React31.useState(null);
+  const containerRef = React31.useRef(null);
   function getScale(index) {
     if (mouseX === null || !containerRef.current) return 1;
     const container = containerRef.current;
@@ -2929,6 +3416,391 @@ function ConfirmDialog({ isOpen, options, handleConfirm, handleCancel, destructi
     ] })
   ] }) });
 }
+function RegisterHotkeys({ hotkeys }) {
+  React31.useEffect(() => {
+    const handleKeyDown = (event) => {
+      for (const hotkey of hotkeys) {
+        const matches = event.key.toLowerCase() === hotkey.key.toLowerCase() && !!event.ctrlKey === !!hotkey.ctrl && !!event.metaKey === !!hotkey.meta && !!event.shiftKey === !!hotkey.shift && !!event.altKey === !!hotkey.alt;
+        if (matches) {
+          event.preventDefault();
+          hotkey.handler();
+          break;
+        }
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [hotkeys]);
+  return null;
+}
+function useControlledOpen(defaultOpen = false) {
+  const [isOpen, setIsOpen] = React31.useState(defaultOpen);
+  const open = React31.useCallback(() => setIsOpen(true), []);
+  const close = React31.useCallback(() => setIsOpen(false), []);
+  const toggle = React31.useCallback(() => setIsOpen((prev) => !prev), []);
+  return { isOpen, open, close, toggle, setIsOpen };
+}
+function CommandMenu({
+  groups,
+  placeholder = "Type a command or search\u2026",
+  emptyMessage = "No results found.",
+  open: openProp,
+  onOpenChange,
+  hotkey = true
+}) {
+  const internal = useControlledOpen(false);
+  const isOpen = openProp ?? internal.isOpen;
+  const setOpen = React31.useCallback(
+    (next) => {
+      if (openProp === void 0) internal.setIsOpen(next);
+      onOpenChange?.(next);
+    },
+    [openProp, onOpenChange, internal.setIsOpen]
+  );
+  const runItem = (item) => {
+    setOpen(false);
+    item.onSelect();
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    hotkey && /* @__PURE__ */ jsx(
+      RegisterHotkeys,
+      {
+        hotkeys: [
+          { key: "k", meta: true, handler: () => setOpen(!isOpen) },
+          { key: "k", ctrl: true, handler: () => setOpen(!isOpen) }
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(CommandDialog, { open: isOpen, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(CommandInput, { placeholder }),
+      /* @__PURE__ */ jsxs(CommandList, { children: [
+        /* @__PURE__ */ jsx(CommandEmpty, { children: emptyMessage }),
+        groups.map((group, i) => /* @__PURE__ */ jsxs(React31.Fragment, { children: [
+          i > 0 && /* @__PURE__ */ jsx(CommandSeparator, {}),
+          /* @__PURE__ */ jsx(CommandGroup, { heading: group.heading, children: group.items.map((item) => /* @__PURE__ */ jsxs(
+            CommandItem,
+            {
+              value: [item.label, ...item.keywords ?? []].join(" "),
+              onSelect: () => runItem(item),
+              children: [
+                item.icon && /* @__PURE__ */ jsx(item.icon, {}),
+                /* @__PURE__ */ jsx("span", { children: item.label }),
+                item.shortcut && /* @__PURE__ */ jsx(CommandShortcut, { children: item.shortcut })
+              ]
+            },
+            item.id
+          )) })
+        ] }, group.heading))
+      ] })
+    ] })
+  ] });
+}
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function makeId() {
+  return Math.random().toString(36).slice(2, 10);
+}
+function FileUpload({
+  accept,
+  multiple = false,
+  maxSizeMb,
+  maxFiles,
+  files: filesProp,
+  defaultFiles,
+  onFilesChange,
+  onFilesAdded,
+  disabled,
+  hint,
+  className
+}) {
+  const [internalFiles, setInternalFiles] = React31.useState(defaultFiles ?? []);
+  const [isDragging, setIsDragging] = React31.useState(false);
+  const [validationError, setValidationError] = React31.useState(null);
+  const inputRef = React31.useRef(null);
+  const dragDepth = React31.useRef(0);
+  const files = filesProp ?? internalFiles;
+  const setFiles = React31.useCallback(
+    (next) => {
+      if (!filesProp) setInternalFiles(next);
+      onFilesChange?.(next);
+    },
+    [filesProp, onFilesChange]
+  );
+  const acceptList = React31.useMemo(
+    () => accept?.split(",").map((a) => a.trim().toLowerCase()).filter(Boolean) ?? [],
+    [accept]
+  );
+  const matchesAccept = (file) => {
+    if (!acceptList.length) return true;
+    const name = file.name.toLowerCase();
+    return acceptList.some(
+      (pattern) => pattern.startsWith(".") ? name.endsWith(pattern) : file.type === pattern || file.type.startsWith(pattern.replace("/*", "/"))
+    );
+  };
+  const handleFiles = (fileList) => {
+    if (!fileList || disabled) return;
+    const incoming = Array.from(fileList);
+    const room = maxFiles && multiple ? Math.max(0, maxFiles - files.length) : maxFiles || Infinity;
+    if (maxFiles && room <= 0) {
+      setValidationError(`You can only add up to ${maxFiles} file${maxFiles === 1 ? "" : "s"}.`);
+      return;
+    }
+    const accepted = [];
+    let rejected = false;
+    for (const file of incoming.slice(0, room)) {
+      if (!matchesAccept(file)) {
+        rejected = true;
+        continue;
+      }
+      if (maxSizeMb && file.size > maxSizeMb * 1024 * 1024) {
+        rejected = true;
+        continue;
+      }
+      accepted.push(file);
+    }
+    setValidationError(rejected ? `Some files were skipped \u2014 check the file type and size limit.` : null);
+    if (!accepted.length) return;
+    const entries = accepted.map((file) => ({ id: makeId(), file, status: "pending" }));
+    setFiles(multiple ? [...files, ...entries] : entries);
+    onFilesAdded?.(accepted);
+  };
+  const removeFile = (id) => {
+    setFiles(files.filter((f) => f.id !== id));
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn$1("space-y-3", className), children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        onClick: () => !disabled && inputRef.current?.click(),
+        onKeyDown: (e) => {
+          if (disabled) return;
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            inputRef.current?.click();
+          }
+        },
+        onDragOver: (e) => e.preventDefault(),
+        onDragEnter: (e) => {
+          e.preventDefault();
+          dragDepth.current += 1;
+          if (!disabled) setIsDragging(true);
+        },
+        onDragLeave: () => {
+          dragDepth.current = Math.max(0, dragDepth.current - 1);
+          if (dragDepth.current === 0) setIsDragging(false);
+        },
+        onDrop: (e) => {
+          e.preventDefault();
+          dragDepth.current = 0;
+          setIsDragging(false);
+          handleFiles(e.dataTransfer.files);
+        },
+        className: cn$1(
+          "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed px-6 py-10 text-center transition-colors",
+          isDragging ? "border-primary bg-primary/5" : "border-border hover:border-foreground/30",
+          disabled && "pointer-events-none opacity-50"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(UploadCloud, { className: "size-8 text-muted-foreground" }),
+          /* @__PURE__ */ jsxs("p", { className: "text-sm font-medium", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-primary underline underline-offset-4", children: "Click to upload" }),
+            " or drag and drop"
+          ] }),
+          hint && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: hint }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "file",
+              accept,
+              multiple,
+              disabled,
+              className: "sr-only",
+              onChange: (e) => {
+                handleFiles(e.target.files);
+                e.target.value = "";
+              }
+            }
+          )
+        ]
+      }
+    ),
+    validationError && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-sm font-medium text-destructive", children: validationError }),
+    files.length > 0 && /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: files.map(({ id, file, progress, status = "pending", error }) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-3 rounded-lg border bg-card/60 px-3 py-2.5", children: [
+      /* @__PURE__ */ jsx(File, { className: "size-5 shrink-0 text-muted-foreground" }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium", children: file.name }),
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: formatBytes(file.size) })
+        ] }),
+        status === "uploading" && /* @__PURE__ */ jsx("div", { className: "mt-1.5 h-1 w-full overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx("div", { className: "h-full rounded-full bg-primary transition-all", style: { width: `${progress ?? 0}%` } }) }),
+        status === "error" && error && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-destructive", children: error })
+      ] }),
+      status === "uploading" && /* @__PURE__ */ jsx(Loader2, { className: "size-4 shrink-0 animate-spin text-muted-foreground" }),
+      status === "done" && /* @__PURE__ */ jsx(CheckCircle2, { className: "size-4 shrink-0 text-primary" }),
+      status === "error" && /* @__PURE__ */ jsx(AlertCircle, { className: "size-4 shrink-0 text-destructive" }),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon",
+          className: "size-7 shrink-0",
+          onClick: () => removeFile(id),
+          children: [
+            /* @__PURE__ */ jsx(X, { className: "size-3.5" }),
+            /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+              "Remove ",
+              file.name
+            ] })
+          ]
+        }
+      )
+    ] }, id)) })
+  ] });
+}
+var variantIcon = {
+  success: /* @__PURE__ */ jsx(CheckCircle2, { className: "size-5 text-primary" }),
+  info: /* @__PURE__ */ jsx(Info, { className: "size-5 text-muted-foreground" }),
+  warning: /* @__PURE__ */ jsx(AlertTriangle, { className: "size-5 text-amber-500 dark:text-amber-400" }),
+  error: /* @__PURE__ */ jsx(AlertCircle, { className: "size-5 text-destructive" }),
+  message: /* @__PURE__ */ jsx(Inbox, { className: "size-5 text-muted-foreground" })
+};
+function NotificationToast({
+  variant = "info",
+  title,
+  description,
+  avatar,
+  action,
+  secondaryAction,
+  onDismiss
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-sm rounded-lg border bg-card p-4 text-card-foreground shadow-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+    /* @__PURE__ */ jsx("div", { className: "shrink-0 pt-0.5", children: avatar ? (
+      // eslint-disable-next-line @next/next/no-img-element
+      /* @__PURE__ */ jsx("img", { src: avatar, alt: "", className: "size-9 rounded-full border object-cover" })
+    ) : variantIcon[variant] }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 pt-0.5", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: description }),
+      (action || secondaryAction) && /* @__PURE__ */ jsxs("div", { className: cn$1("mt-3 flex gap-4", avatar && "gap-3"), children: [
+        action && /* @__PURE__ */ jsx("button", { type: "button", onClick: action.onClick, className: "text-sm font-medium text-primary hover:underline", children: action.label }),
+        secondaryAction && /* @__PURE__ */ jsx("button", { type: "button", onClick: secondaryAction.onClick, className: "text-sm font-medium text-muted-foreground hover:text-foreground", children: secondaryAction.label })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "icon", className: "size-6 shrink-0 -mt-1 -mr-1", onClick: onDismiss, children: [
+      /* @__PURE__ */ jsx(X, { className: "size-4" }),
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Dismiss" })
+    ] })
+  ] }) });
+}
+function notify(options) {
+  const { duration, ...toastProps } = options;
+  return toast.custom((id) => /* @__PURE__ */ jsx(NotificationToast, { ...toastProps, onDismiss: () => toast.dismiss(id) }), { duration });
+}
+function NotificationsPopover({
+  notifications,
+  onNotificationClick,
+  onMarkAllRead,
+  title = "Notifications",
+  emptyMessage = "Nothing new \u2014 you\u2019re all caught up.",
+  align = "end",
+  open,
+  onOpenChange,
+  className
+}) {
+  const unreadCount = notifications.filter((n) => !n.read).length;
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "icon", className: cn$1("relative size-8", className), children: [
+      /* @__PURE__ */ jsx(Bell, { className: "size-4" }),
+      unreadCount > 0 && /* @__PURE__ */ jsx("span", { className: "absolute -right-0.5 -top-0.5 flex min-w-4 items-center justify-center rounded-full bg-primary px-1 text-[10px] font-semibold leading-4 text-primary-foreground", children: unreadCount > 9 ? "9+" : unreadCount }),
+      /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+        title,
+        unreadCount > 0 ? ` (${unreadCount} unread)` : ""
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { align, className: "w-80 p-0", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b px-4 py-3", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: title }),
+        onMarkAllRead && unreadCount > 0 && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onMarkAllRead,
+            className: "text-xs font-medium text-muted-foreground hover:text-foreground",
+            children: "Mark all read"
+          }
+        )
+      ] }),
+      notifications.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 px-4 py-10 text-center", children: [
+        /* @__PURE__ */ jsx(Inbox, { className: "size-6 text-muted-foreground" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: emptyMessage })
+      ] }) : /* @__PURE__ */ jsx("ul", { className: "max-h-80 overflow-y-auto", children: notifications.map((notification) => /* @__PURE__ */ jsx("li", { className: "border-b last:border-b-0", children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => onNotificationClick?.(notification),
+          className: cn$1(
+            "flex w-full items-start gap-3 px-4 py-3 text-left transition-colors hover:bg-muted/60",
+            !notification.read && "bg-muted/40"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                className: cn$1(
+                  "mt-1.5 size-2 shrink-0 rounded-full",
+                  notification.read ? "bg-transparent" : "bg-primary"
+                )
+              }
+            ),
+            notification.avatar ? /* @__PURE__ */ jsxs(Avatar, { className: "size-8 shrink-0", children: [
+              /* @__PURE__ */ jsx(AvatarImage, { src: notification.avatar, alt: "" }),
+              /* @__PURE__ */ jsx(AvatarFallback, { children: notification.title.slice(0, 2).toUpperCase() })
+            ] }) : notification.icon ? /* @__PURE__ */ jsx("span", { className: "mt-0.5 shrink-0 text-muted-foreground", children: notification.icon }) : null,
+            /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx("span", { className: cn$1("block truncate text-sm", !notification.read && "font-medium"), children: notification.title }),
+              notification.description && /* @__PURE__ */ jsx("span", { className: "mt-0.5 line-clamp-2 block text-xs text-muted-foreground", children: notification.description }),
+              notification.timestamp && /* @__PURE__ */ jsx("span", { className: "mt-1 block text-xs text-muted-foreground/70", children: notification.timestamp })
+            ] })
+          ]
+        }
+      ) }, notification.id)) })
+    ] })
+  ] });
+}
+function ActivityFeed({
+  items,
+  emptyMessage = "No activity yet.",
+  className
+}) {
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsxs("div", { className: cn$1("flex flex-col items-center gap-2 py-10 text-center", className), children: [
+      /* @__PURE__ */ jsx(Activity, { className: "size-6 text-muted-foreground" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: emptyMessage })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("ol", { className, children: items.map((item, i) => /* @__PURE__ */ jsxs("li", { className: "relative flex gap-3 pb-6 last:pb-0", children: [
+    i !== items.length - 1 && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute left-4 top-9 bottom-0 w-px -translate-x-1/2 bg-border" }),
+    /* @__PURE__ */ jsx("span", { className: "relative z-10 flex size-8 shrink-0 items-center justify-center", children: item.avatar ? /* @__PURE__ */ jsxs(Avatar, { className: "size-8", children: [
+      /* @__PURE__ */ jsx(AvatarImage, { src: item.avatar, alt: "" }),
+      /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs", children: item.initials ?? "?" })
+    ] }) : /* @__PURE__ */ jsx("span", { className: "flex size-8 items-center justify-center rounded-full border bg-card text-muted-foreground [&>svg]:size-4", children: item.icon ?? /* @__PURE__ */ jsx(Activity, {}) }) }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 pt-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm", children: item.title }),
+        item.timestamp && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: item.timestamp })
+      ] }),
+      item.description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: item.description })
+    ] })
+  ] }, item.id)) });
+}
 function AppScreenRoot({ children, className }) {
   return /* @__PURE__ */ jsx("div", { className: cn("flex h-full flex-col", className), children });
 }
@@ -3311,20 +4183,20 @@ function FullPageSpinner({ message }) {
     message && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: message })
   ] });
 }
-var defaultRenderLink10 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
+var defaultRenderLink9 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
 function PageHeader({
   title,
   description,
   breadcrumbs,
   backButton,
-  renderLink = defaultRenderLink10,
+  renderLink = defaultRenderLink9,
   className,
   children
 }) {
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1 pb-6", className), children: [
     breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: "mb-2 flex items-center gap-1 text-sm text-muted-foreground", children: breadcrumbs.map((crumb, i) => {
       const isLast = i === breadcrumbs.length - 1;
-      return /* @__PURE__ */ jsxs(React29.Fragment, { children: [
+      return /* @__PURE__ */ jsxs(React31.Fragment, { children: [
         i > 0 && /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5 shrink-0" }),
         isLast || !crumb.href ? /* @__PURE__ */ jsx("span", { className: cn(isLast && "text-foreground font-medium"), children: crumb.label }) : renderLink({
           href: crumb.href,
@@ -3360,7 +4232,7 @@ function PageHeader({
   ] });
 }
 function Suspensed({ children, fallback }) {
-  return /* @__PURE__ */ jsx(React29.Suspense, { fallback: fallback ?? /* @__PURE__ */ jsx(Spinner, {}), children });
+  return /* @__PURE__ */ jsx(React31.Suspense, { fallback: fallback ?? /* @__PURE__ */ jsx(Spinner, {}), children });
 }
 function getInitialTheme() {
   if (typeof document === "undefined") return "dark";
@@ -3368,7 +4240,7 @@ function getInitialTheme() {
   return stored ?? (document.documentElement.classList.contains("dark") ? "dark" : "light");
 }
 function ThemeSwitchMinimal() {
-  const [theme, setThemeState] = React29.useState(getInitialTheme);
+  const [theme, setThemeState] = React31.useState(getInitialTheme);
   const toggle = () => {
     const next = theme === "dark" ? "light" : "dark";
     setThemeState(next);
@@ -3494,9 +4366,9 @@ function getInitialColorName() {
   return localStorage.getItem(STORAGE_KEY) ?? "emerald";
 }
 function BrandColorSwitchMinimal() {
-  const [active, setActive] = React29.useState(getInitialColorName);
-  const [open, setOpen] = React29.useState(false);
-  React29.useEffect(() => {
+  const [active, setActive] = React31.useState(getInitialColorName);
+  const [open, setOpen] = React31.useState(false);
+  React31.useEffect(() => {
     const saved = localStorage.getItem(STORAGE_KEY) ?? "emerald";
     const color = BRAND_COLORS.find((c) => c.name === saved);
     if (color) applyColor(color);
@@ -3557,7 +4429,7 @@ function BrandColorSwitchMinimal() {
   ] });
 }
 function ThemeColorUpdater({ colorTheme }) {
-  React29.useEffect(() => {
+  React31.useEffect(() => {
     if (colorTheme) {
       document.documentElement.setAttribute("data-theme", colorTheme);
     } else {
@@ -3567,7 +4439,7 @@ function ThemeColorUpdater({ colorTheme }) {
   return null;
 }
 function VersionBanner({ version, message, className, onDismiss }) {
-  const [dismissed, setDismissed] = React29.useState(false);
+  const [dismissed, setDismissed] = React31.useState(false);
   if (dismissed) return null;
   return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between gap-4 bg-primary/10 px-4 py-2 text-sm", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
@@ -3606,23 +4478,6 @@ function DevBanner({ environment = "development", className }) {
     }
   );
 }
-function RegisterHotkeys({ hotkeys }) {
-  React29.useEffect(() => {
-    const handleKeyDown = (event) => {
-      for (const hotkey of hotkeys) {
-        const matches = event.key.toLowerCase() === hotkey.key.toLowerCase() && !!event.ctrlKey === !!hotkey.ctrl && !!event.metaKey === !!hotkey.meta && !!event.shiftKey === !!hotkey.shift && !!event.altKey === !!hotkey.alt;
-        if (matches) {
-          event.preventDefault();
-          hotkey.handler();
-          break;
-        }
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [hotkeys]);
-  return null;
-}
 function RootErrorFallback({ error, reset }) {
   return /* @__PURE__ */ jsxs("div", { className: "flex min-h-svh flex-col items-center justify-center gap-6 p-8 text-center", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3", children: [
@@ -3841,36 +4696,29 @@ function useMounted() {
   return mounted;
 }
 function useConfirm() {
-  const [isOpen, setIsOpen] = React29.useState(false);
-  const [options, setOptions] = React29.useState({});
-  const resolveRef = React29.useRef(null);
-  const confirm = React29.useCallback((opts = {}) => {
+  const [isOpen, setIsOpen] = React31.useState(false);
+  const [options, setOptions] = React31.useState({});
+  const resolveRef = React31.useRef(null);
+  const confirm = React31.useCallback((opts = {}) => {
     setOptions(opts);
     setIsOpen(true);
     return new Promise((resolve) => {
       resolveRef.current = resolve;
     });
   }, []);
-  const handleConfirm = React29.useCallback(() => {
+  const handleConfirm = React31.useCallback(() => {
     resolveRef.current?.(true);
     setIsOpen(false);
   }, []);
-  const handleCancel = React29.useCallback(() => {
+  const handleCancel = React31.useCallback(() => {
     resolveRef.current?.(false);
     setIsOpen(false);
   }, []);
   return { confirm, isOpen, options, handleConfirm, handleCancel };
 }
-function useControlledOpen(defaultOpen = false) {
-  const [isOpen, setIsOpen] = React29.useState(defaultOpen);
-  const open = React29.useCallback(() => setIsOpen(true), []);
-  const close = React29.useCallback(() => setIsOpen(false), []);
-  const toggle = React29.useCallback(() => setIsOpen((prev) => !prev), []);
-  return { isOpen, open, close, toggle, setIsOpen };
-}
 function useScrolledPast(threshold) {
-  const [scrolledPast, setScrolledPast] = React29.useState(false);
-  React29.useEffect(() => {
+  const [scrolledPast, setScrolledPast] = React31.useState(false);
+  React31.useEffect(() => {
     const handleScroll = () => {
       setScrolledPast(window.scrollY > threshold);
     };
@@ -3881,42 +4729,28 @@ function useScrolledPast(threshold) {
   return scrolledPast;
 }
 function useCopyToClipboard() {
-  const [copied, setCopied] = React29.useState(false);
-  const timeoutRef = React29.useRef(void 0);
-  const copy = React29.useCallback((text) => {
+  const [copied, setCopied] = React31.useState(false);
+  const timeoutRef = React31.useRef(void 0);
+  const copy = React31.useCallback((text) => {
     navigator.clipboard.writeText(text).then(() => {
       setCopied(true);
       clearTimeout(timeoutRef.current);
       timeoutRef.current = setTimeout(() => setCopied(false), 2e3);
     });
   }, []);
-  React29.useEffect(() => () => clearTimeout(timeoutRef.current), []);
+  React31.useEffect(() => () => clearTimeout(timeoutRef.current), []);
   return [copied, copy];
 }
 function useDebounce(value, delay) {
-  const [debounced, setDebounced] = React29.useState(value);
-  React29.useEffect(() => {
+  const [debounced, setDebounced] = React31.useState(value);
+  React31.useEffect(() => {
     const timer = setTimeout(() => setDebounced(value), delay);
     return () => clearTimeout(timer);
   }, [value, delay]);
   return debounced;
 }
-function useIntersectionObserver(options) {
-  const ref = React29.useRef(null);
-  const [isIntersecting, setIsIntersecting] = React29.useState(false);
-  React29.useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-    const observer = new IntersectionObserver(([entry]) => {
-      setIsIntersecting(entry.isIntersecting);
-    }, options);
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, []);
-  return [ref, isIntersecting];
-}
 function useLocalStorage(key, initialValue) {
-  const [storedValue, setStoredValue] = React29.useState(() => {
+  const [storedValue, setStoredValue] = React31.useState(() => {
     if (typeof window === "undefined") return initialValue;
     try {
       const item = window.localStorage.getItem(key);
@@ -3925,7 +4759,7 @@ function useLocalStorage(key, initialValue) {
       return initialValue;
     }
   });
-  const setValue = React29.useCallback(
+  const setValue = React31.useCallback(
     (value) => {
       try {
         setStoredValue(value);
@@ -3940,11 +4774,11 @@ function useLocalStorage(key, initialValue) {
   return [storedValue, setValue];
 }
 function useMediaQuery(query) {
-  const [matches, setMatches] = React29.useState(() => {
+  const [matches, setMatches] = React31.useState(() => {
     if (typeof window === "undefined") return false;
     return window.matchMedia(query).matches;
   });
-  React29.useEffect(() => {
+  React31.useEffect(() => {
     if (typeof window === "undefined") return;
     const mql = window.matchMedia(query);
     setMatches(mql.matches);
@@ -3955,18 +4789,18 @@ function useMediaQuery(query) {
   return matches;
 }
 function usePagination(total, pageSize) {
-  const [page, setPage] = React29.useState(1);
+  const [page, setPage] = React31.useState(1);
   const totalPages = Math.max(1, Math.ceil(total / pageSize));
   const offset = (page - 1) * pageSize;
-  const goTo = React29.useCallback(
+  const goTo = React31.useCallback(
     (p) => setPage(Math.min(Math.max(1, p), totalPages)),
     [totalPages]
   );
-  const next = React29.useCallback(() => goTo(page + 1), [page, goTo]);
-  const prev = React29.useCallback(() => goTo(page - 1), [page, goTo]);
+  const next = React31.useCallback(() => goTo(page + 1), [page, goTo]);
+  const prev = React31.useCallback(() => goTo(page - 1), [page, goTo]);
   return { page, pageSize, totalPages, offset, hasPrev: page > 1, hasNext: page < totalPages, goTo, next, prev };
 }
 
-export { AnimatedPill, AppContent, AppGrid, AppGridCell, AppScreen, AppShell, AuthSection, Badge, BrandColorSwitchMinimal, Button, Card, CarouselSection, ChangelogCard, ChangelogList, Checkbox, ComparisonSection, ConfirmDialog, ContactSection, ContextMenu, CountUp, CountdownTimer, CtaCardSection, CtaSection, DevBanner, Dock, EmptyState, ErrorPage, FadeIn, FaqSection, FeatureCard, FeatureMarqueeSection, FeaturesSection, FlowBracket, FlowConnector, Footer, FullPageSpinner, GlassCard, Grid, GridItem, GroupedFeaturesSection, HeroSection, ImageCard, Input, LogoStrip, ModeSwitchMinimal, Navbar, NewsletterSection, OlwibaUIProvider, Overlay, PageHeader, PageTransition, PhoneFrame, PostCard, PostList, PricingCard, PricingSection, PublicPageFrame, QualificationSection, RegisterHotkeys, RootErrorFallback, Section, SectionTitle, Spotlight, Stack, StaggerChildren, StatCard, StatsSection, StepsSection, Suspensed, Switch, TeamSection, TechStackSection, TestimonialCard, TestimonialsSection, Textarea, ThemeColorUpdater, ThemeSwitchMinimal, Underlay, UpgradePrompt, VersionBanner, marketingSectionSpacing, useConfirm, useControlledOpen, useCopyToClipboard, useDebounce, useIntersectionObserver, useLocalStorage, useMediaQuery, useMounted, useOlwibaUI, usePagination, useScrolledPast, useUIMode };
+export { ActivityFeed, AnimatedPill, AppContent, AppGrid, AppGridCell, AppScreen, AppShell, AuthSection, Badge, BillingPanel, BrandColorSwitchMinimal, Button, Card, Carousel, ChangelogCard, ChangelogList, Checkbox, CommandMenu, ComparisonSection, ConfirmDialog, ContactSection, ContextMenu, CountUp, CountdownTimer, CtaSection, DataTable, DevBanner, Dock, EmptyState, ErrorPage, FadeIn, FaqSection, FeatureCard, FeatureMarqueeSection, FeaturesSection, FileUpload, FlowBracket, FlowConnector, Footer, FullPageSpinner, GlassCard, Grid, GridItem, GroupedFeaturesSection, HeroSection, ImageCard, Input, LogoStrip, ModeSwitchMinimal, Navbar, NewsletterSection, NotificationToast, NotificationsPopover, OlwibaUIProvider, OnboardingWizard, Overlay, PageHeader, PageTransition, PhoneFrame, PostCard, PostList, PricingCard, PricingSection, PublicPageFrame, QualificationSection, RegisterHotkeys, RootErrorFallback, Section, SectionTitle, SettingsSection, Spotlight, Stack, StaggerChildren, StatCard, StatsSection, StepsSection, Suspensed, Switch, TeamMembersPanel, TeamSection, TechStackSection, TestimonialCard, TestimonialsSection, Textarea, ThemeColorUpdater, ThemeSwitchMinimal, Underlay, UpgradePrompt, VersionBanner, marketingSectionSpacing, notify, useConfirm, useControlledOpen, useCopyToClipboard, useDebounce, useIntersectionObserver, useLocalStorage, useMediaQuery, useMounted, useOlwibaUI, usePagination, useScrolledPast, useUIMode };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map