@olwiba/ui 0.0.28

package/dist/index.js

@@ -0,0 +1,2102 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import * as React25 from 'react';
+import { useState, useEffect } 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, Separator, Accordion, AccordionItem, AccordionTrigger, AccordionContent, Label, Sheet, SheetTrigger, SheetContent, 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, 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';
+export { CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@olwiba/cn';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Compass, ArrowLeft, X, ArrowRight, Sparkles, Check, Minus, Quote, Star, Twitter, Github, Linkedin, Mail, Phone, MapPin, MessageSquare, Send, Sun, Moon, Menu, Search, TrendingUp, TrendingDown, ChevronRight, ChevronLeft, AlertTriangle, Loader2, ShieldCheck, Building2, MoreVerticalIcon, CreditCardIcon, BellIcon, LogOutIcon } from 'lucide-react';
+
+// src/lib/utils.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var OlwibaUIContext = React25.createContext({
+  isMobile: false,
+  mode: "default"
+});
+function OlwibaUIProvider({ children, isMobile: isMobileProp, mode = "default" }) {
+  const detectedMobile = useIsMobile();
+  const isMobile = isMobileProp ?? detectedMobile;
+  const variant = mode !== "default" ? mode : void 0;
+  return /* @__PURE__ */ jsx(OlwibaUIContext.Provider, { value: { isMobile, mode }, children: /* @__PURE__ */ jsx(UIVariantProvider, { mode: variant, children }) });
+}
+function useOlwibaUI() {
+  return React25.useContext(OlwibaUIContext);
+}
+function useUIMode() {
+  return React25.useContext(OlwibaUIContext).mode;
+}
+var Button = React25.forwardRef(
+  ({ mode, ...props }, ref) => {
+    const ctxMode = useUIMode();
+    const resolvedMode = mode ?? (ctxMode !== "default" ? ctxMode : void 0);
+    return /* @__PURE__ */ jsx(Button$1, { mode: resolvedMode, ...props, ref });
+  }
+);
+Button.displayName = "Button";
+var Card = React25.forwardRef(
+  ({ mode, ...props }, ref) => {
+    const ctxMode = useUIMode();
+    const resolvedMode = mode ?? (ctxMode !== "default" ? ctxMode : void 0);
+    return /* @__PURE__ */ jsx(Card$1, { mode: resolvedMode, ...props, ref });
+  }
+);
+Card.displayName = "Card";
+function Badge(props) {
+  return /* @__PURE__ */ jsx(Badge$1, { ...props });
+}
+var Input = React25.forwardRef(
+  ({ mode, ...props }, ref) => {
+    const ctxMode = useUIMode();
+    const resolvedMode = mode ?? (ctxMode !== "default" ? ctxMode : void 0);
+    return /* @__PURE__ */ jsx(Input$1, { mode: resolvedMode, ...props, ref });
+  }
+);
+Input.displayName = "Input";
+var Textarea = React25.forwardRef(
+  ({ mode, ...props }, ref) => {
+    const ctxMode = useUIMode();
+    const resolvedMode = mode ?? (ctxMode !== "default" ? ctxMode : void 0);
+    return /* @__PURE__ */ jsx(Textarea$1, { mode: resolvedMode, ...props, ref });
+  }
+);
+Textarea.displayName = "Textarea";
+var Checkbox = React25.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 = React25.forwardRef(({ mode: _mode, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(Switch$1, { ...props, ref });
+});
+Switch.displayName = "Switch";
+function NavUser({ user }) {
+  const { isMobile } = useSidebar();
+  const uiMode = useUIMode();
+  const avatarMode = uiMode !== "default" ? uiMode : void 0;
+  const initials = (user.name ?? user.email).slice(0, 2).toUpperCase();
+  return /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      SidebarMenuButton,
+      {
+        size: "lg",
+        className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
+        children: [
+          /* @__PURE__ */ jsxs(Avatar, { mode: avatarMode, size: "sm", className: "grayscale", children: [
+            user.avatar && /* @__PURE__ */ jsx(AvatarImage, { src: user.avatar, alt: user.name }),
+            /* @__PURE__ */ jsx(AvatarFallback, { children: initials })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: user.name ?? user.email }),
+            /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-muted-foreground", children: user.plan ? `${user.plan} plan` : user.email })
+          ] }),
+          /* @__PURE__ */ jsx(MoreVerticalIcon, { className: "ml-auto size-4" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      DropdownMenuContent,
+      {
+        className: "w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg",
+        side: isMobile ? "bottom" : "right",
+        align: "end",
+        sideOffset: 4,
+        children: [
+          /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "p-0 font-normal", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-1 py-1.5 text-left text-sm", children: [
+            /* @__PURE__ */ jsxs(Avatar, { mode: avatarMode, size: "sm", children: [
+              user.avatar && /* @__PURE__ */ jsx(AvatarImage, { src: user.avatar, alt: user.name }),
+              /* @__PURE__ */ jsx(AvatarFallback, { children: initials })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
+              /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: user.name ?? user.email }),
+              /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-muted-foreground", children: user.email })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
+            user.onBilling && /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: user.onBilling, children: [
+              /* @__PURE__ */ jsx(CreditCardIcon, {}),
+              "Billing"
+            ] }),
+            /* @__PURE__ */ jsxs(DropdownMenuItem, { children: [
+              /* @__PURE__ */ jsx(BellIcon, {}),
+              "Notifications"
+            ] })
+          ] }),
+          user.onSignOut && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+            /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: user.onSignOut, children: [
+              /* @__PURE__ */ jsx(LogOutIcon, {}),
+              "Sign out"
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] }) }) });
+}
+function ShellSidebar({
+  brand,
+  navItems,
+  action,
+  user,
+  renderLink,
+  collapsible,
+  side,
+  sidebarPosition
+}) {
+  return /* @__PURE__ */ jsxs(Sidebar, { side, collapsible, sidebarPosition, children: [
+    /* @__PURE__ */ jsx(SidebarHeader, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarMenuButton, { asChild: true, className: "data-[slot=sidebar-menu-button]:!p-1.5", children: renderLink({
+      href: brand.href ?? "#",
+      children: /* @__PURE__ */ jsxs(Fragment, { children: [
+        brand.logo,
+        /* @__PURE__ */ jsx("span", { className: "text-base font-semibold", children: brand.name })
+      ] })
+    }) }) }) }) }),
+    /* @__PURE__ */ jsx(SidebarContent, { children: /* @__PURE__ */ jsx(SidebarGroup, { children: /* @__PURE__ */ jsxs(SidebarGroupContent, { className: "flex flex-col gap-2", children: [
+      action && /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: action.href ? /* @__PURE__ */ jsx(
+        SidebarMenuButton,
+        {
+          asChild: true,
+          tooltip: action.label,
+          className: "min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground",
+          children: renderLink({
+            href: action.href,
+            children: /* @__PURE__ */ jsxs(Fragment, { children: [
+              action.icon && /* @__PURE__ */ jsx(action.icon, {}),
+              /* @__PURE__ */ jsx("span", { children: action.label })
+            ] })
+          })
+        }
+      ) : /* @__PURE__ */ jsxs(
+        SidebarMenuButton,
+        {
+          tooltip: action.label,
+          onClick: action.onClick,
+          className: "min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground",
+          children: [
+            action.icon && /* @__PURE__ */ jsx(action.icon, {}),
+            /* @__PURE__ */ jsx("span", { children: action.label })
+          ]
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx(SidebarMenu, { children: navItems.map((item) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarMenuButton, { asChild: true, tooltip: item.label, isActive: item.isActive, children: renderLink({
+        href: item.href,
+        children: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(item.icon, {}),
+          /* @__PURE__ */ jsx("span", { children: item.label })
+        ] })
+      }) }) }, item.label)) })
+    ] }) }) }),
+    /* @__PURE__ */ jsx(SidebarFooter, { children: /* @__PURE__ */ jsx(NavUser, { user }) })
+  ] });
+}
+function ShellHeader({ pageTitle }) {
+  return /* @__PURE__ */ jsx("header", { className: "flex h-12 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6", children: [
+    /* @__PURE__ */ jsx(SidebarTrigger, { className: "-ml-1" }),
+    /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "mx-2 data-[orientation=vertical]:h-4" }),
+    /* @__PURE__ */ jsx("h1", { className: "text-base font-medium", children: pageTitle })
+  ] }) });
+}
+var defaultBrand = {
+  name: "App",
+  href: "#"
+};
+var defaultUser = {
+  name: "User",
+  email: "user@example.com"
+};
+var defaultRenderLink = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
+function AppShell({
+  brand = defaultBrand,
+  navItems = [],
+  action,
+  user = defaultUser,
+  pageTitle = "Dashboard",
+  renderLink = defaultRenderLink,
+  collapsible = "icon",
+  sidebarPosition = "viewport",
+  side = "left",
+  children
+} = {}) {
+  const isContained = sidebarPosition === "contained";
+  const inner = /* @__PURE__ */ jsxs(
+    SidebarProvider,
+    {
+      layout: isContained ? "embedded" : "viewport",
+      className: isContained ? "overflow-hidden" : "h-svh overflow-hidden",
+      children: [
+        /* @__PURE__ */ jsx(
+          ShellSidebar,
+          {
+            brand,
+            navItems,
+            action,
+            user,
+            renderLink,
+            collapsible,
+            side,
+            sidebarPosition
+          }
+        ),
+        /* @__PURE__ */ jsxs(SidebarInset, { className: isContained ? void 0 : "overflow-y-auto", children: [
+          /* @__PURE__ */ jsx(ShellHeader, { pageTitle }),
+          children
+        ] })
+      ]
+    }
+  );
+  if (isContained) {
+    return /* @__PURE__ */ jsx("div", { className: "relative flex h-full min-h-0 w-full max-w-full flex-col overflow-hidden", children: inner });
+  }
+  return inner;
+}
+function CenteredAuth({ children }) {
+  return /* @__PURE__ */ jsx("section", { className: "flex h-full min-h-[720px] w-full flex-col items-center justify-center gap-6 rounded-2xl bg-muted p-6 md:p-10", children: /* @__PURE__ */ jsx("div", { className: "flex w-full max-w-sm flex-col gap-6", children }) });
+}
+function SplitAuth({ children, panel }) {
+  const defaultPanel = /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ jsx(Badge$1, { variant: "secondary", className: "w-fit", children: "Welcome" }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-3xl font-semibold tracking-tight", children: "Build better, ship faster" }),
+      /* @__PURE__ */ jsx("p", { className: "max-w-md text-muted-foreground", children: "Sign in to continue building with ready-made components and layouts." })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-3 text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(ShieldCheck, { className: "size-4" }),
+        " Type-safe components"
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Sparkles, { className: "size-4" }),
+        " Polished defaults"
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Building2, { className: "size-4" }),
+        " Plug-and-play shells"
+      ] })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxs("section", { className: "grid h-full min-h-[560px] overflow-hidden rounded-2xl border bg-card lg:grid-cols-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative hidden p-8 pb-16 lg:flex lg:flex-col lg:justify-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-primary/20 via-transparent to-muted" }),
+      /* @__PURE__ */ jsx("div", { className: "relative z-10", children: panel ?? defaultPanel })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-6 lg:p-10", children })
+  ] });
+}
+function DefaultForm({ onSubmit, onSso, signUpHref = "#", forgotPasswordHref = "#", brand }) {
+  return /* @__PURE__ */ jsxs(Card$1, { className: "w-full max-w-md", children: [
+    /* @__PURE__ */ jsxs(CardHeader, { children: [
+      brand && /* @__PURE__ */ jsx("div", { className: "mb-2", children: brand }),
+      /* @__PURE__ */ jsx(CardTitle, { children: "Sign in" }),
+      /* @__PURE__ */ jsx(CardDescription, { children: "Enter your email and password to continue." })
+    ] }),
+    /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs("form", { onSubmit, className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "auth-email", children: "Email" }),
+          /* @__PURE__ */ jsx(Input$1, { id: "auth-email", type: "email", placeholder: "name@company.com" })
+        ] }),
+        /* @__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" }),
+            forgotPasswordHref && /* @__PURE__ */ jsx("a", { className: "text-xs text-muted-foreground underline underline-offset-4 hover:text-foreground", href: forgotPasswordHref, children: "Forgot password?" })
+          ] }),
+          /* @__PURE__ */ jsx(Input$1, { id: "auth-password", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx(Button$1, { type: "submit", className: "w-full", children: "Continue" }),
+          onSso && /* @__PURE__ */ jsx(Button$1, { type: "button", variant: "outline", className: "w-full", onClick: onSso, children: "Use SSO" })
+        ] })
+      ] }),
+      signUpHref && /* @__PURE__ */ jsxs("p", { className: "text-center text-xs text-muted-foreground", children: [
+        "New here?",
+        " ",
+        /* @__PURE__ */ jsx("a", { className: "text-foreground underline underline-offset-4", href: signUpHref, children: "Create an account" })
+      ] })
+    ] })
+  ] });
+}
+function AuthSection({
+  layout = "centered",
+  children,
+  panel,
+  className,
+  ...formProps
+}) {
+  const form = children ?? /* @__PURE__ */ jsx(DefaultForm, { ...formProps });
+  if (layout === "split") {
+    return /* @__PURE__ */ jsx("div", { className: cn$1("h-full", className), children: /* @__PURE__ */ jsx(SplitAuth, { panel, children: form }) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn$1("h-full", className), children: /* @__PURE__ */ jsx(CenteredAuth, { children: form }) });
+}
+function EmptyState({ icon: Icon, title, description, action, className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn$1("flex flex-col items-center justify-center gap-3 py-12 text-center", className),
+      ...props,
+      children: [
+        Icon && /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-2xl border bg-muted", children: /* @__PURE__ */ jsx(Icon, { className: "size-6 text-muted-foreground" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx("h3", { className: "font-semibold", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "max-w-xs text-sm text-muted-foreground", children: description })
+        ] }),
+        action
+      ]
+    }
+  );
+}
+var defaultRenderLink2 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
+function ErrorPage({
+  statusCode = "404",
+  title = "Page not found",
+  description = "The page you're looking for doesn't exist or has been moved. Check the URL or head back home.",
+  action = { label: "Take me home", href: "/" },
+  backAction = { label: "Go back" },
+  renderLink = defaultRenderLink2
+}) {
+  return /* @__PURE__ */ jsx("section", { className: "overflow-hidden rounded-2xl border bg-card", children: /* @__PURE__ */ jsxs("div", { className: "relative flex min-h-[560px] flex-col items-center justify-center px-6 py-16 text-center", children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-[radial-gradient(circle_at_center,hsl(var(--muted)/0.8),transparent_70%)]" }),
+    /* @__PURE__ */ jsxs("div", { className: "relative space-y-6", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx("div", { className: "flex h-16 w-16 items-center justify-center rounded-2xl border bg-muted", children: /* @__PURE__ */ jsx(Compass, { className: "size-8 text-muted-foreground" }) }) }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-8xl font-bold tracking-tight text-muted-foreground/20", children: statusCode }),
+        /* @__PURE__ */ jsx("h1", { className: "-mt-4 text-2xl font-semibold tracking-tight", children: title }),
+        /* @__PURE__ */ jsx("p", { className: "mx-auto max-w-sm text-sm text-muted-foreground", children: description })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-3", children: [
+        backAction && (backAction.href ? renderLink({
+          href: backAction.href,
+          children: /* @__PURE__ */ jsxs(Button, { variant: "outline", children: [
+            /* @__PURE__ */ jsx(ArrowLeft, { className: "mr-2 size-4" }),
+            backAction.label
+          ] })
+        }) : /* @__PURE__ */ jsxs(Button, { variant: "outline", onClick: backAction.onClick, children: [
+          /* @__PURE__ */ jsx(ArrowLeft, { className: "mr-2 size-4" }),
+          backAction.label
+        ] })),
+        action && renderLink({
+          href: action.href,
+          children: /* @__PURE__ */ jsx(Button, { children: action.label })
+        })
+      ] })
+    ] })
+  ] }) });
+}
+function UpgradePrompt({
+  variant,
+  title,
+  description,
+  primaryActionLabel,
+  onPrimaryAction,
+  secondaryActionLabel,
+  onSecondaryAction,
+  eyebrow,
+  rows,
+  currentPlanLabel = "Current",
+  upgradedPlanLabel = "Upgrade",
+  footer,
+  onClose,
+  closeLabel = "Close",
+  className
+}) {
+  const hasSecondaryAction = Boolean(secondaryActionLabel && onSecondaryAction);
+  if (variant === "banner") {
+    return /* @__PURE__ */ jsx(
+      "section",
+      {
+        className: cn$1(
+          "rounded-xl border border-dashed bg-card/40 p-5 sm:p-6",
+          className
+        ),
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold", children: title }),
+            /* @__PURE__ */ jsx("p", { className: "mt-2 max-w-xl text-sm leading-6 text-muted-foreground", children: description })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+            hasSecondaryAction ? /* @__PURE__ */ jsx(
+              Button$1,
+              {
+                type: "button",
+                variant: "ghost",
+                onClick: onSecondaryAction,
+                className: "border",
+                children: secondaryActionLabel
+              }
+            ) : null,
+            /* @__PURE__ */ jsx(Button$1, { type: "button", onClick: onPrimaryAction, children: primaryActionLabel })
+          ] })
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cn$1(
+        "w-full max-w-3xl rounded-2xl border bg-card p-6 shadow-sm sm:p-7",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            eyebrow ? /* @__PURE__ */ jsx("div", { className: "font-mono text-[11px] uppercase tracking-[0.08em] text-primary", children: eyebrow }) : null,
+            /* @__PURE__ */ jsx(
+              "h3",
+              {
+                className: cn$1(
+                  "text-2xl font-semibold sm:text-[1.75rem]",
+                  eyebrow ? "mt-3" : ""
+                ),
+                children: title
+              }
+            ),
+            /* @__PURE__ */ jsx("p", { className: "mt-3 max-w-2xl text-sm leading-6 text-muted-foreground sm:text-base", children: description })
+          ] }),
+          onClose ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              className: "inline-flex size-9 shrink-0 items-center justify-center rounded-lg border transition-colors hover:bg-muted",
+              "aria-label": closeLabel,
+              children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+            }
+          ) : null
+        ] }),
+        rows && rows.length > 0 ? /* @__PURE__ */ jsx("div", { className: "mt-6 overflow-hidden rounded-xl border bg-muted/30", children: /* @__PURE__ */ jsxs(Table, { children: [
+          /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+            /* @__PURE__ */ jsx(TableHead, {}),
+            /* @__PURE__ */ jsx(TableHead, { className: "font-mono text-xs uppercase tracking-wider text-muted-foreground", children: currentPlanLabel }),
+            /* @__PURE__ */ jsx(TableHead, { className: "font-mono text-xs uppercase tracking-wider text-primary", children: upgradedPlanLabel })
+          ] }) }),
+          /* @__PURE__ */ jsx(TableBody, { children: rows.map((row, index) => /* @__PURE__ */ jsxs(TableRow, { children: [
+            /* @__PURE__ */ jsx(TableCell, { className: "font-medium", children: row.label }),
+            /* @__PURE__ */ jsx(TableCell, { className: "font-mono text-muted-foreground", children: row.currentValue }),
+            /* @__PURE__ */ jsx(TableCell, { className: "font-mono", children: row.upgradedValue })
+          ] }, row.key ?? index)) })
+        ] }) }) : null,
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn$1(
+              "mt-6 flex flex-col gap-3 sm:flex-row sm:items-center",
+              footer || hasSecondaryAction ? "sm:justify-between" : "sm:justify-end"
+            ),
+            children: [
+              footer ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: footer }) : null,
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+                hasSecondaryAction ? /* @__PURE__ */ jsx(
+                  Button$1,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    onClick: onSecondaryAction,
+                    className: "border",
+                    children: secondaryActionLabel
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx(Button$1, { type: "button", onClick: onPrimaryAction, children: primaryActionLabel })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var translateMap = {
+  up: "translate-y-6",
+  down: "-translate-y-6",
+  left: "translate-x-6",
+  right: "-translate-x-6",
+  none: ""
+};
+function FadeIn({
+  delay = 0,
+  duration = 600,
+  direction = "up",
+  once = true,
+  children,
+  className,
+  style,
+  ...props
+}) {
+  const ref = React25.useRef(null);
+  const [visible, setVisible] = React25.useState(false);
+  React25.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setVisible(true);
+          if (once) observer.disconnect();
+        } else if (!once) {
+          setVisible(false);
+        }
+      },
+      { threshold: 0.1 }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [once]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn$1(
+        "transition-all",
+        visible ? "opacity-100 translate-x-0 translate-y-0" : `opacity-0 ${translateMap[direction]}`,
+        className
+      ),
+      style: { transitionDuration: `${duration}ms`, transitionDelay: `${delay}ms`, ...style },
+      ...props,
+      children
+    }
+  );
+}
+function SectionTitle({ title, description, badge, className }) {
+  return /* @__PURE__ */ jsx(FadeIn, { direction: "up", children: /* @__PURE__ */ jsxs("div", { className: cn$1("text-center", className), children: [
+    badge && /* @__PURE__ */ jsx(Badge$1, { variant: "secondary", className: "mb-4", children: badge }),
+    /* @__PURE__ */ jsx("h2", { className: "text-balance text-3xl font-semibold tracking-tight sm:text-4xl", children: title }),
+    description && /* @__PURE__ */ jsx("p", { className: "mx-auto mt-4 max-w-2xl text-pretty text-muted-foreground", children: description })
+  ] }) });
+}
+var defaultRenderLink3 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
+function HeroSection({
+  heading,
+  badge,
+  description,
+  primaryCta,
+  secondaryCta,
+  heroImage,
+  avatarUrls,
+  socialProofText,
+  renderLink = defaultRenderLink3
+}) {
+  return /* @__PURE__ */ jsx("section", { className: "overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "px-6 py-14 sm:px-10 sm:py-20", 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 }) }),
+        /* @__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: [
+              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 })
+          })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx(FadeIn, { direction: "right", delay: 200, children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden 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: [
+        /* @__PURE__ */ jsx(AvatarImage, { src: url, alt: "" }),
+        /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs", children: String.fromCharCode(65 + i % 26) })
+      ] }, i)) }),
+      socialProofText && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-muted-foreground", children: socialProofText })
+    ] }) })
+  ] }) });
+}
+function FeatureCard({ icon: Icon, title, description, href, className, ...props }) {
+  const content = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn$1(
+        "group relative flex flex-col gap-4 rounded-2xl border bg-card p-6 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md",
+        href && "cursor-pointer",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-xl bg-primary/10 text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground", children: /* @__PURE__ */ jsx(Icon, { className: "size-5" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsx("h3", { className: "font-semibold leading-tight", children: title }),
+            href && /* @__PURE__ */ jsx(ArrowRight, { className: "size-4 shrink-0 text-muted-foreground opacity-0 transition-all group-hover:translate-x-0.5 group-hover:opacity-100" })
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed text-muted-foreground", children: description })
+        ] })
+      ]
+    }
+  );
+  if (href) {
+    return /* @__PURE__ */ jsx("a", { href, className: "block", children: content });
+  }
+  return content;
+}
+var translateMap2 = {
+  up: [0, 20],
+  down: [0, -20],
+  left: [20, 0],
+  right: [-20, 0],
+  none: [0, 0]
+};
+function StaggerChildren({
+  stagger = 80,
+  delay = 0,
+  duration = 500,
+  direction = "up",
+  once = true,
+  children,
+  className,
+  ...props
+}) {
+  const ref = React25.useRef(null);
+  const [visible, setVisible] = React25.useState(false);
+  React25.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setVisible(true);
+          if (once) observer.disconnect();
+        } else if (!once) {
+          setVisible(false);
+        }
+      },
+      { threshold: 0.1 }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [once]);
+  const [tx, ty] = translateMap2[direction];
+  return /* @__PURE__ */ jsx("div", { ref, className: cn$1(className), ...props, children: React25.Children.map(children, (child, i) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        transition: `opacity ${duration}ms ease, transform ${duration}ms ease`,
+        transitionDelay: `${delay + i * stagger}ms`,
+        opacity: visible ? 1 : 0,
+        transform: visible ? "translate(0,0)" : `translate(${tx}px,${ty}px)`
+      },
+      children: child
+    }
+  )) });
+}
+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
+}) {
+  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-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
+    )) })
+  ] }) }) });
+}
+var defaultRenderLink4 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
+function CtaSection({
+  heading,
+  description,
+  primaryCta,
+  secondaryCta,
+  footnote,
+  renderLink = defaultRenderLink4
+}) {
+  return /* @__PURE__ */ jsx("section", { className: "overflow-hidden rounded-2xl border bg-card", 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: "mb-4 inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-primary/10 text-primary", 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 PricingCard({
+  name,
+  price,
+  period = "/mo",
+  description,
+  features,
+  cta,
+  highlighted = false,
+  badge,
+  onSelect,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn$1(
+        "relative flex flex-col rounded-2xl border p-6",
+        highlighted ? "border-primary bg-primary/5 shadow-sm" : "bg-card",
+        className
+      ),
+      ...props,
+      children: [
+        badge && /* @__PURE__ */ jsx("div", { className: "absolute -top-3 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsx(Badge$1, { children: badge }) }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-muted-foreground", children: name }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-4xl font-bold tracking-tight", children: price }),
+            /* @__PURE__ */ jsx("span", { className: "mb-1 text-sm text-muted-foreground", children: period })
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button$1,
+          {
+            variant: highlighted ? "default" : "outline",
+            className: "mt-6 w-full",
+            onClick: onSelect,
+            children: cta
+          }
+        ),
+        /* @__PURE__ */ jsx(Separator, { className: "my-6" }),
+        /* @__PURE__ */ jsx("ul", { className: "space-y-3 text-sm", children: features.map((feat) => /* @__PURE__ */ jsx("li", { className: "flex items-center gap-2", children: feat.included ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Check, { className: "size-4 shrink-0 text-primary" }),
+          /* @__PURE__ */ jsx("span", { children: feat.label })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Minus, { className: "size-4 shrink-0 text-muted-foreground/40" }),
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/40", children: feat.label })
+        ] }) }, feat.label)) })
+      ]
+    }
+  );
+}
+var defaultRenderLink5 = ({ 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.",
+  badge = "Pricing",
+  plans,
+  saveBadge = "Save 34%",
+  isAuthenticated,
+  renderLink = defaultRenderLink5,
+  footnote
+}) {
+  const [annual, setAnnual] = React25.useState(false);
+  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: [
+    /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+      badge && /* @__PURE__ */ jsx(Badge$1, { variant: "secondary", className: "mb-4", children: badge }),
+      /* @__PURE__ */ jsx("h2", { className: "text-balance text-3xl font-semibold tracking-tight sm:text-4xl", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "mx-auto mt-4 max-w-xl text-pretty text-muted-foreground", children: description }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-6 inline-flex items-center gap-3 rounded-full border bg-muted p-1", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setAnnual(false),
+            className: cn$1(
+              "rounded-full px-4 py-1.5 text-sm font-medium transition-colors",
+              !annual ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+            ),
+            children: "Monthly"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setAnnual(true),
+            className: cn$1(
+              "flex items-center gap-2 rounded-full px-4 py-1.5 text-sm font-medium transition-colors",
+              annual ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+            ),
+            children: [
+              "Annual",
+              saveBadge && /* @__PURE__ */ jsx(Badge$1, { variant: "secondary", className: "text-xs", children: saveBadge })
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(StaggerChildren, { className: "mt-10 grid gap-4 lg:grid-cols-3", children: plans.map((plan) => {
+      const price = annual ? plan.annual : plan.monthly;
+      return /* @__PURE__ */ jsx(
+        PricingCard,
+        {
+          name: plan.name,
+          price: `$${price}`,
+          period: price > 0 ? "/mo" : "",
+          description: plan.description,
+          features: plan.features,
+          cta: plan.cta,
+          highlighted: plan.highlighted,
+          badge: plan.highlighted ? "Most popular" : void 0
+        },
+        plan.name
+      );
+    }) }),
+    footnote && /* @__PURE__ */ jsx("p", { className: "mt-8 text-center text-sm text-muted-foreground", children: footnote })
+  ] }) }) });
+}
+function TestimonialCard({
+  quote,
+  name,
+  role,
+  company,
+  avatar,
+  initials,
+  rating,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn$1("flex flex-col gap-4 rounded-2xl border bg-card p-6", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Quote, { className: "size-4 text-muted-foreground/40" }),
+        rating != null && /* @__PURE__ */ jsx("div", { className: "flex gap-0.5", children: Array.from({ length: 5 }, (_, i) => /* @__PURE__ */ jsx(
+          Star,
+          {
+            className: cn$1(
+              "size-4",
+              i < rating ? "fill-current text-amber-400" : "text-muted-foreground/30"
+            )
+          },
+          i
+        )) }),
+        /* @__PURE__ */ jsx("p", { className: "flex-1 text-sm leading-relaxed", children: quote }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsxs(Avatar, { className: "size-9 rounded-xl", children: [
+            /* @__PURE__ */ jsx(AvatarImage, { src: avatar, alt: name }),
+            /* @__PURE__ */ jsx(AvatarFallback, { className: "rounded-xl text-xs", children: initials ?? name.slice(0, 2).toUpperCase() })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { className: "text-sm font-medium leading-tight", children: name }),
+            /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground", children: [
+              role,
+              company ? ` \xB7 ${company}` : ""
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function TestimonialsSection({
+  title = "Trusted by teams shipping real products",
+  description = "Here's what engineers and product teams say after using Olwiba in production.",
+  badge = "Testimonials",
+  testimonials
+}) {
+  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: [
+    /* @__PURE__ */ jsx(SectionTitle, { title, description, badge }),
+    /* @__PURE__ */ jsx(StaggerChildren, { className: "mt-12 columns-1 gap-4 sm:columns-2 lg:columns-3", children: testimonials.map((t) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "mb-4 break-inside-avoid transition-transform hover:-translate-y-0.5",
+        children: /* @__PURE__ */ jsx(
+          TestimonialCard,
+          {
+            quote: t.quote,
+            name: t.name,
+            role: t.role,
+            company: t.company,
+            avatar: t.avatar,
+            initials: t.initials,
+            rating: t.rating
+          }
+        )
+      },
+      t.name
+    )) })
+  ] }) }) });
+}
+var team = [
+  {
+    name: "Olivia Reed",
+    role: "Co-Founder & CEO",
+    bio: "Previously led product at two YC companies. Obsessed with design systems and developer experience.",
+    avatar: "https://ui.shadcn.com/avatars/01.png",
+    initials: "OR",
+    social: { twitter: "#", github: "#", linkedin: "#" }
+  },
+  {
+    name: "Marcus Webb",
+    role: "Co-Founder & CTO",
+    bio: "Full-stack engineer with 12 years building UI infrastructure. Open source maintainer.",
+    avatar: "https://ui.shadcn.com/avatars/02.png",
+    initials: "MW",
+    social: { twitter: "#", github: "#", linkedin: "#" }
+  },
+  {
+    name: "Priya Nair",
+    role: "Head of Design",
+    bio: "Interaction designer turned design systems engineer. Bridges the gap between Figma and production.",
+    avatar: "https://ui.shadcn.com/avatars/03.png",
+    initials: "PN",
+    social: { twitter: "#", github: null, linkedin: "#" }
+  },
+  {
+    name: "Daniel Frost",
+    role: "Senior Engineer",
+    bio: "Accessibility and performance specialist. If it doesn't work with a keyboard, it's broken.",
+    avatar: "https://ui.shadcn.com/avatars/04.png",
+    initials: "DF",
+    social: { twitter: null, github: "#", linkedin: "#" }
+  },
+  {
+    name: "Aisha Okafor",
+    role: "Developer Relations",
+    bio: "Writes docs, builds examples, and makes sure every engineer can ship their first block in under an hour.",
+    avatar: "https://ui.shadcn.com/avatars/05.png",
+    initials: "AO",
+    social: { twitter: "#", github: "#", linkedin: "#" }
+  },
+  {
+    name: "Tom Halvorsen",
+    role: "Growth",
+    bio: "Turns happy users into loud advocates. Runs the community and keeps the changelog sharp.",
+    avatar: "https://ui.shadcn.com/avatars/06.png",
+    initials: "TH",
+    social: { twitter: "#", github: null, linkedin: "#" }
+  }
+];
+function TeamSection() {
+  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: [
+    /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx(Badge$1, { variant: "secondary", className: "mb-4", children: "Team" }),
+      /* @__PURE__ */ jsx("h2", { className: "text-balance text-3xl font-semibold tracking-tight sm:text-4xl", children: "The people behind Olwiba" }),
+      /* @__PURE__ */ jsx("p", { className: "mx-auto mt-4 max-w-xl text-pretty text-muted-foreground", children: "A small team with deep experience in design systems, open source, and developer tooling." })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3", children: team.map((member) => /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border bg-muted/40 p-5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4", children: [
+        /* @__PURE__ */ jsxs(Avatar, { className: "size-12 rounded-xl", children: [
+          /* @__PURE__ */ jsx(AvatarImage, { src: member.avatar, alt: member.name }),
+          /* @__PURE__ */ jsx(AvatarFallback, { className: "rounded-xl", children: member.initials })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx("div", { className: "font-semibold leading-tight", children: member.name }),
+          /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: member.role })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm leading-relaxed text-muted-foreground", children: member.bio }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center gap-2", children: [
+        member.social.twitter && /* @__PURE__ */ jsx("a", { href: member.social.twitter, "aria-label": "Twitter", className: "flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground", children: /* @__PURE__ */ jsx(Twitter, { className: "size-3.5" }) }),
+        member.social.github && /* @__PURE__ */ jsx("a", { href: member.social.github, "aria-label": "GitHub", className: "flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground", children: /* @__PURE__ */ jsx(Github, { className: "size-3.5" }) }),
+        member.social.linkedin && /* @__PURE__ */ jsx("a", { href: member.social.linkedin, "aria-label": "LinkedIn", className: "flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground", children: /* @__PURE__ */ jsx(Linkedin, { className: "size-3.5" }) })
+      ] })
+    ] }, member.name)) })
+  ] }) }) });
+}
+function FaqSection({
+  title = "Frequently asked questions",
+  description = "Everything you need to know before getting started.",
+  badge = "FAQ",
+  items
+}) {
+  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-3xl", children: [
+    /* @__PURE__ */ jsx(SectionTitle, { title, description, badge }),
+    /* @__PURE__ */ jsx(FadeIn, { direction: "up", children: /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, className: "mt-10 w-full", children: items.map((item, i) => /* @__PURE__ */ jsxs(AccordionItem, { value: `item-${i}`, children: [
+      /* @__PURE__ */ jsx(AccordionTrigger, { className: "text-left text-sm font-medium", children: item.question }),
+      /* @__PURE__ */ jsx(AccordionContent, { className: "text-sm text-muted-foreground", children: item.answer })
+    ] }, i)) }) })
+  ] }) }) });
+}
+function CountUp({
+  from = 0,
+  to,
+  duration = 1500,
+  decimals = 0,
+  prefix = "",
+  suffix = "",
+  once = true,
+  className,
+  ...props
+}) {
+  const ref = React25.useRef(null);
+  const [value, setValue] = React25.useState(from);
+  const hasStarted = React25.useRef(false);
+  React25.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting && (!once || !hasStarted.current)) {
+          hasStarted.current = true;
+          const start = performance.now();
+          const tick = (now) => {
+            const elapsed = now - start;
+            const progress = Math.min(elapsed / duration, 1);
+            const eased = 1 - Math.pow(1 - progress, 3);
+            setValue(from + (to - from) * eased);
+            if (progress < 1) requestAnimationFrame(tick);
+          };
+          requestAnimationFrame(tick);
+        }
+      },
+      { threshold: 0.5 }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [from, to, duration, once]);
+  return /* @__PURE__ */ jsxs("span", { ref, className: cn$1(className), ...props, children: [
+    prefix,
+    value.toFixed(decimals),
+    suffix
+  ] });
+}
+function parseStatValue(value) {
+  const match = value.match(/^(\d+(?:\.\d+)?)(.*)/);
+  if (!match) return null;
+  const num = parseFloat(match[1]);
+  const suffix = match[2] || "";
+  const decimals = match[1].includes(".") ? match[1].split(".")[1].length : 0;
+  return { num, suffix, decimals };
+}
+function StatValue({ value }) {
+  const parsed = parseStatValue(value);
+  if (!parsed) return /* @__PURE__ */ jsx(Fragment, { children: value });
+  return /* @__PURE__ */ jsx(CountUp, { to: parsed.num, decimals: parsed.decimals, suffix: parsed.suffix });
+}
+function StatsSection({
+  title = "Built for scale, used in production",
+  description,
+  badge = "By the numbers",
+  stats
+}) {
+  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: [
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-[radial-gradient(ellipse_at_bottom,hsl(var(--primary)/0.08),transparent_60%)]" }),
+    /* @__PURE__ */ jsxs("div", { className: "relative mx-auto max-w-4xl", children: [
+      /* @__PURE__ */ jsx(SectionTitle, { title, description, badge }),
+      /* @__PURE__ */ jsx(StaggerChildren, { className: "mt-12 grid gap-px overflow-hidden rounded-2xl border bg-border sm:grid-cols-2 lg:grid-cols-4", children: stats.map((stat) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 bg-card px-6 py-8", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-4xl font-bold tracking-tight", children: /* @__PURE__ */ jsx(StatValue, { value: stat.value }) }),
+        /* @__PURE__ */ jsx("div", { className: "font-medium", children: stat.label }),
+        stat.description && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Separator, {}),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: stat.description })
+        ] })
+      ] }, stat.label)) })
+    ] })
+  ] }) });
+}
+function NewsletterSection() {
+  const [email, setEmail] = React25.useState("");
+  const [submitted, setSubmitted] = React25.useState(false);
+  function handleSubmit(e) {
+    e.preventDefault();
+    if (!email) return;
+    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: [
+    /* @__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__ */ jsx("div", { className: "mb-4 inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(Mail, { className: "size-5" }) }),
+      /* @__PURE__ */ jsx(Badge$1, { variant: "secondary", className: "mb-3", children: "Newsletter" }),
+      /* @__PURE__ */ jsx("h2", { className: "text-balance text-3xl font-semibold tracking-tight sm:text-4xl", children: "Stay in the loop" }),
+      /* @__PURE__ */ jsx("p", { className: "mx-auto mt-4 max-w-sm text-pretty text-muted-foreground", children: "New components, release notes, and product tips \u2014 straight to your inbox. No spam, unsubscribe any time." }),
+      submitted ? /* @__PURE__ */ jsxs("div", { className: "mt-8 rounded-2xl border bg-muted/50 px-6 py-5 text-sm", children: [
+        /* @__PURE__ */ jsx("span", { className: "font-medium", children: "You're on the list." }),
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "We'll be in touch soon." })
+      ] }) : /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "mt-8 flex flex-col gap-3 sm:flex-row", children: [
+        /* @__PURE__ */ jsx(
+          Input$1,
+          {
+            type: "email",
+            placeholder: "you@company.com",
+            value: email,
+            onChange: (e) => setEmail(e.target.value),
+            required: true,
+            className: "flex-1"
+          }
+        ),
+        /* @__PURE__ */ jsxs(Button$1, { type: "submit", children: [
+          "Subscribe",
+          /* @__PURE__ */ jsx(ArrowRight, { className: "ml-2 size-4" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("p", { className: "mt-4 text-xs text-muted-foreground", children: [
+        "By subscribing you agree to our",
+        " ",
+        /* @__PURE__ */ jsx("a", { href: "#", className: "underline underline-offset-4 hover:text-foreground", children: "Privacy Policy" }),
+        "."
+      ] })
+    ] })
+  ] }) });
+}
+var contactInfo = [
+  { Icon: Mail, label: "Email", value: "hello@olwiba.com" },
+  { Icon: Phone, label: "Phone", value: "+1 (555) 000-0000" },
+  { Icon: MapPin, label: "Office", value: "San Francisco, CA" }
+];
+function ContactSection() {
+  const [submitted, setSubmitted] = React25.useState(false);
+  function handleSubmit(e) {
+    e.preventDefault();
+    setSubmitted(true);
+  }
+  return /* @__PURE__ */ jsx("section", { className: "overflow-hidden rounded-2xl border bg-card", children: /* @__PURE__ */ jsxs("div", { className: "grid lg:grid-cols-[1fr_1.4fr]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative overflow-hidden bg-primary px-8 py-12 text-primary-foreground", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-[radial-gradient(circle_at_top_right,hsl(var(--primary-foreground)/0.1),transparent_60%)]" }),
+      /* @__PURE__ */ jsxs("div", { className: "relative space-y-6", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Badge$1, { variant: "secondary", className: "mb-3 bg-primary-foreground/15 text-primary-foreground hover:bg-primary-foreground/20", children: "Contact us" }),
+          /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold", children: "Let's talk" }),
+          /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-primary-foreground/70", children: "Have a question or want to work together? Fill in the form and we'll get back to you within one business day." })
+        ] }),
+        /* @__PURE__ */ jsx(Separator, { className: "bg-primary-foreground/20" }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-4", children: contactInfo.map(({ Icon, label, value }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary-foreground/10", children: /* @__PURE__ */ jsx(Icon, { className: "size-4" }) }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { className: "text-xs text-primary-foreground/60", children: label }),
+            /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: value })
+          ] })
+        ] }, label)) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "p-8", children: submitted ? /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-[320px] flex-col items-center justify-center gap-4 text-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(MessageSquare, { className: "size-6" }) }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h3", { className: "font-semibold", children: "Message sent" }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: "Thanks for reaching out. We'll get back to you within one business day." })
+      ] }),
+      /* @__PURE__ */ jsx(Button$1, { variant: "outline", onClick: () => setSubmitted(false), children: "Send another" })
+    ] }) : /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "space-y-5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "contact-first", children: "First name" }),
+          /* @__PURE__ */ jsx(Input$1, { id: "contact-first", placeholder: "Olivia", required: true })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "contact-last", children: "Last name" }),
+          /* @__PURE__ */ jsx(Input$1, { id: "contact-last", placeholder: "Reed", required: true })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "contact-email", children: "Email" }),
+        /* @__PURE__ */ jsx(Input$1, { id: "contact-email", type: "email", placeholder: "olivia@company.com", required: true })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "contact-subject", children: "Subject" }),
+        /* @__PURE__ */ jsx(Input$1, { id: "contact-subject", placeholder: "How can we help?", required: true })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "contact-message", children: "Message" }),
+        /* @__PURE__ */ jsx(
+          Textarea$1,
+          {
+            id: "contact-message",
+            placeholder: "Tell us what you're working on...",
+            className: "min-h-28 resize-none",
+            required: true
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(Button$1, { type: "submit", className: "w-full", children: [
+        "Send message",
+        /* @__PURE__ */ jsx(Send, { className: "ml-2 size-4" })
+      ] })
+    ] }) })
+  ] }) });
+}
+function ThemeSwitchMinimal() {
+  const [theme, setThemeState] = React25.useState("dark");
+  React25.useEffect(() => {
+    const stored = localStorage.getItem("theme");
+    const resolved = stored ?? (document.documentElement.classList.contains("dark") ? "dark" : "light");
+    setThemeState(resolved);
+  }, []);
+  const toggle = () => {
+    const next = theme === "dark" ? "light" : "dark";
+    setThemeState(next);
+    localStorage.setItem("theme", next);
+    document.documentElement.classList.toggle("dark", next === "dark");
+  };
+  return /* @__PURE__ */ jsx(Button$1, { variant: "ghost", size: "icon", onClick: toggle, className: "size-8", "aria-label": "Toggle theme", children: theme === "dark" ? /* @__PURE__ */ jsx(Sun, { className: "size-4" }) : /* @__PURE__ */ jsx(Moon, { className: "size-4" }) });
+}
+var defaultRenderLink6 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
+function Navbar({
+  brand,
+  navLinks,
+  cta,
+  showThemeToggle = false,
+  renderLink = defaultRenderLink6
+}) {
+  const [open, setOpen] = React25.useState(false);
+  const brandHref = brand.href ?? "/";
+  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: [
+    renderLink({
+      href: brandHref,
+      children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 font-semibold", children: [
+        brand.logo && /* @__PURE__ */ jsx("span", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-primary text-primary-foreground", children: brand.logo }),
+        /* @__PURE__ */ jsx("span", { children: brand.name })
+      ] })
+    }),
+    /* @__PURE__ */ jsx("div", { className: "hidden items-center gap-1 md:flex", children: navLinks.map((link) => /* @__PURE__ */ jsx("span", { children: renderLink({
+      href: link.href,
+      className: "rounded-md px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground",
+      children: link.label
+    }) }, link.label)) }),
+    /* @__PURE__ */ jsxs("div", { className: "hidden items-center justify-end gap-3 md:flex", children: [
+      cta?.secondary && renderLink({
+        href: cta.secondary.href,
+        children: /* @__PURE__ */ jsx(Button$1, { variant: "ghost", size: "sm", children: cta.secondary.label })
+      }),
+      cta?.primary && renderLink({
+        href: cta.primary.href,
+        children: /* @__PURE__ */ jsx(Button$1, { size: "sm", children: cta.primary.label })
+      }),
+      showThemeToggle && /* @__PURE__ */ jsx(ThemeSwitchMinimal, {})
+    ] }),
+    /* @__PURE__ */ jsxs(Sheet, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button$1, { variant: "ghost", size: "icon", className: "justify-self-end md:hidden", children: [
+        /* @__PURE__ */ jsx(Menu, { className: "size-5" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Open menu" })
+      ] }) }),
+      /* @__PURE__ */ jsxs(SheetContent, { side: "right", className: "w-72", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pb-4", children: [
+          /* @__PURE__ */ jsx("span", { onClick: () => setOpen(false), className: "cursor-pointer", children: renderLink({
+            href: brandHref,
+            children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 font-semibold", children: [
+              brand.logo && /* @__PURE__ */ jsx("span", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-primary text-primary-foreground", children: brand.logo }),
+              /* @__PURE__ */ jsx("span", { children: brand.name })
+            ] })
+          }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            showThemeToggle && /* @__PURE__ */ jsx(ThemeSwitchMinimal, {}),
+            /* @__PURE__ */ jsxs(Button$1, { variant: "ghost", size: "icon", onClick: () => setOpen(false), children: [
+              /* @__PURE__ */ jsx(X, { className: "size-4" }),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close menu" })
+            ] })
+          ] })
+        ] }),
+        /* @__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,
+          className: "block rounded-md px-3 py-2 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground",
+          children: link.label
+        }) }, link.label)) }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-6 flex flex-col gap-2", children: [
+          cta?.secondary && renderLink({
+            href: cta.secondary.href,
+            children: /* @__PURE__ */ jsx(Button$1, { variant: "outline", className: "w-full", children: cta.secondary.label })
+          }),
+          cta?.primary && renderLink({
+            href: cta.primary.href,
+            children: /* @__PURE__ */ jsx(Button$1, { className: "w-full", children: cta.primary.label })
+          })
+        ] })
+      ] })
+    ] })
+  ] }) });
+}
+var defaultRenderLink7 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
+function Footer({
+  brand,
+  navLinks,
+  socialLinks,
+  legal,
+  renderLink = defaultRenderLink7
+}) {
+  const brandHref = brand.href ?? "/";
+  const copyrightText = legal ?? `\xA9 ${(/* @__PURE__ */ new Date()).getFullYear()} ${brand.name}. All rights reserved.`;
+  return /* @__PURE__ */ jsx("footer", { className: "bg-gray-900", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-7xl overflow-hidden px-6 py-20 sm:py-24 lg:px-8", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: renderLink({
+      href: brandHref,
+      className: "flex items-center gap-2",
+      children: /* @__PURE__ */ jsxs(Fragment, { children: [
+        brand.logo && /* @__PURE__ */ jsx("span", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-white/10 text-white", children: brand.logo }),
+        /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold text-white", children: brand.name })
+      ] })
+    }) }),
+    navLinks && navLinks.length > 0 && /* @__PURE__ */ jsx("nav", { className: "mt-10 flex flex-wrap justify-center gap-x-12 gap-y-3", "aria-label": "Footer", children: navLinks.map(({ label, href }) => /* @__PURE__ */ jsx("div", { children: renderLink({
+      href,
+      className: "text-sm/6 text-gray-400 hover:text-white transition-colors",
+      children: label
+    }) }, label)) }),
+    socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-10 flex justify-center gap-x-10", children: socialLinks.map(({ label, href, icon }) => /* @__PURE__ */ jsx(
+      "a",
+      {
+        href,
+        "aria-label": label,
+        className: "text-gray-400 hover:text-gray-300 transition-colors",
+        children: icon
+      },
+      label
+    )) }),
+    /* @__PURE__ */ jsx("p", { className: "mt-10 text-center text-sm/6 text-gray-500", children: copyrightText })
+  ] }) });
+}
+var speedDuration = {
+  slow: "60s",
+  normal: "40s",
+  fast: "25s"
+};
+function LogoStrip({
+  logos,
+  label,
+  speed = "normal"
+}) {
+  const duration = speedDuration[speed];
+  return /* @__PURE__ */ jsxs(FadeIn, { direction: "up", children: [
+    /* @__PURE__ */ jsxs("section", { className: "overflow-hidden py-8", children: [
+      label && /* @__PURE__ */ jsx("p", { className: "mb-6 text-center text-sm text-muted-foreground", children: label }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "relative",
+          style: {
+            maskImage: "linear-gradient(to right, transparent, black 10%, black 90%, transparent)",
+            WebkitMaskImage: "linear-gradient(to right, transparent, black 10%, black 90%, transparent)"
+          },
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "flex w-max gap-12",
+              style: {
+                animation: `logo-strip-scroll ${duration} linear infinite`
+              },
+              children: [...logos, ...logos].map((logo, i) => {
+                const img = logo.darkSrc ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: logo.src,
+                      alt: logo.alt,
+                      className: "h-8 w-auto object-contain opacity-60 grayscale transition-all hover:opacity-100 hover:grayscale-0 dark:hidden"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: logo.darkSrc,
+                      alt: logo.alt,
+                      className: "hidden h-8 w-auto object-contain opacity-60 grayscale transition-all hover:opacity-100 hover:grayscale-0 dark:block"
+                    }
+                  )
+                ] }) : /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: logo.src,
+                    alt: logo.alt,
+                    className: "h-8 w-auto object-contain opacity-60 grayscale transition-all hover:opacity-100 hover:grayscale-0"
+                  }
+                );
+                return logo.href ? /* @__PURE__ */ jsx(
+                  "a",
+                  {
+                    href: logo.href,
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    className: "flex shrink-0 items-center",
+                    children: img
+                  },
+                  `${logo.alt}-${i}`
+                ) : /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center", children: img }, `${logo.alt}-${i}`);
+              })
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("style", { children: `
+        @keyframes logo-strip-scroll {
+          from { transform: translateX(0); }
+          to { transform: translateX(-50%); }
+        }
+      ` })
+  ] });
+}
+function GridUnderlay({ variant, size = 24, className, ...props }) {
+  const id = React25.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 })
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className: cn$1("pointer-events-none absolute inset-0 h-full w-full text-foreground/15", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("pattern", { id, width: size, height: size, patternUnits: "userSpaceOnUse", children: pattern }) }),
+        /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: `url(#${id})` })
+      ]
+    }
+  );
+}
+var blurClass = { sm: "blur-xl", md: "blur-2xl", lg: "blur-3xl", xl: "blur-[80px]" };
+function GlowUnderlay({
+  size = 400,
+  color = "color-mix(in oklch, var(--primary) 45%, transparent)",
+  followCursor = false,
+  blur = "lg",
+  className,
+  style,
+  ...props
+}) {
+  const [pos, setPos] = React25.useState({ x: "50%", y: "50%" });
+  const containerRef = React25.useRef(null);
+  React25.useEffect(() => {
+    if (!followCursor) return;
+    const handleMouseMove = (e) => {
+      const el = containerRef.current;
+      if (!el) return;
+      const rect = el.getBoundingClientRect();
+      setPos({ x: `${e.clientX - rect.left}px`, y: `${e.clientY - rect.top}px` });
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    return () => window.removeEventListener("mousemove", handleMouseMove);
+  }, [followCursor]);
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, className: cn$1("pointer-events-none absolute inset-0 overflow-hidden", className), ...props, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn$1("absolute rounded-full", blurClass[blur]),
+      style: {
+        width: size,
+        height: size,
+        background: color,
+        left: pos.x,
+        top: pos.y,
+        transform: "translate(-50%, -50%)",
+        ...style
+      }
+    }
+  ) });
+}
+function Underlay(props) {
+  if (props.variant === "glow") {
+    return /* @__PURE__ */ jsx(GlowUnderlay, { ...props });
+  }
+  return /* @__PURE__ */ jsx(GridUnderlay, { ...props });
+}
+function DimOverlay({ opacity = 0.5, className, style, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn$1("absolute inset-0 bg-background", className),
+      style: { opacity, ...style },
+      ...props
+    }
+  );
+}
+var scrimGradients = {
+  bottom: "to bottom",
+  top: "to top",
+  left: "to left",
+  right: "to right"
+};
+function ScrimOverlay({ direction = "bottom", color = "var(--background)", className, style, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn$1("pointer-events-none absolute inset-x-0 bottom-0 h-1/2", className),
+      style: {
+        background: `linear-gradient(${scrimGradients[direction]}, transparent, ${color})`,
+        ...style
+      },
+      ...props
+    }
+  );
+}
+function LoadingOverlay({ label, className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      className: cn$1("absolute inset-0 flex flex-col items-center justify-center gap-2 bg-background/80 backdrop-blur-sm", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Loader2, { className: "size-5 animate-spin text-muted-foreground" }),
+        label && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: label })
+      ]
+    }
+  );
+}
+function Overlay(props) {
+  if (props.variant === "dim") return /* @__PURE__ */ jsx(DimOverlay, { ...props });
+  if (props.variant === "scrim") return /* @__PURE__ */ jsx(ScrimOverlay, { ...props });
+  return /* @__PURE__ */ jsx(LoadingOverlay, { ...props });
+}
+function PageTransition({
+  variant = "fade",
+  duration = 300,
+  children,
+  className,
+  style,
+  ...props
+}) {
+  const [mounted, setMounted] = React25.useState(false);
+  React25.useEffect(() => {
+    const id = requestAnimationFrame(() => setMounted(true));
+    return () => cancelAnimationFrame(id);
+  }, []);
+  const initial = variant === "slide-up" ? { opacity: 0, transform: "translateY(16px)" } : variant === "slide-down" ? { opacity: 0, transform: "translateY(-16px)" } : { opacity: 0 };
+  const entered = { opacity: 1, transform: "translateY(0)" };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn$1(className),
+      style: {
+        transition: `opacity ${duration}ms ease, transform ${duration}ms ease`,
+        ...mounted ? entered : initial,
+        ...style
+      },
+      ...props,
+      children
+    }
+  );
+}
+function Spotlight({
+  groups,
+  placeholder = "Search anything...",
+  trigger,
+  triggerClassName,
+  shortcut = "\u2318K"
+}) {
+  const [open, setOpen] = React25.useState(false);
+  React25.useEffect(() => {
+    const down = (e) => {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        setOpen((v) => !v);
+      }
+    };
+    document.addEventListener("keydown", down);
+    return () => document.removeEventListener("keydown", down);
+  }, []);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    trigger ? /* @__PURE__ */ jsx("div", { onClick: () => setOpen(true), children: trigger }) : /* @__PURE__ */ jsxs(
+      Button$1,
+      {
+        variant: "outline",
+        onClick: () => setOpen(true),
+        className: cn$1("w-64 justify-between text-muted-foreground", triggerClassName),
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Search, { className: "size-4" }),
+            placeholder
+          ] }),
+          /* @__PURE__ */ jsx(Badge$1, { variant: "secondary", className: "font-mono text-xs", children: shortcut })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(CommandDialog, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(CommandInput, { placeholder }),
+      /* @__PURE__ */ jsxs(CommandList, { children: [
+        /* @__PURE__ */ jsx(CommandEmpty, { children: "No results found." }),
+        groups.map((group, i) => /* @__PURE__ */ jsxs(React25.Fragment, { children: [
+          i > 0 && /* @__PURE__ */ jsx(CommandSeparator, {}),
+          /* @__PURE__ */ jsx(CommandGroup, { heading: group.heading, children: group.items.map((item) => /* @__PURE__ */ jsxs(
+            CommandItem,
+            {
+              onSelect: () => {
+                item.onSelect();
+                setOpen(false);
+              },
+              children: [
+                item.icon && /* @__PURE__ */ jsx("span", { className: "mr-2", children: item.icon }),
+                /* @__PURE__ */ jsx("span", { children: item.label }),
+                item.description && /* @__PURE__ */ jsx("span", { className: "ml-2 text-xs text-muted-foreground", children: item.description })
+              ]
+            },
+            item.id
+          )) })
+        ] }, group.heading))
+      ] })
+    ] })
+  ] });
+}
+var BASE = 40;
+var MAGNIFY_RADIUS = 80;
+function Dock({ items, iconSize = BASE, magnification = 1.7, className, ...props }) {
+  const [mouseX, setMouseX] = React25.useState(null);
+  const containerRef = React25.useRef(null);
+  function getScale(index) {
+    if (mouseX === null || !containerRef.current) return 1;
+    const container = containerRef.current;
+    const buttons = container.querySelectorAll("[data-dock-item]");
+    const btn = buttons[index];
+    if (!btn) return 1;
+    const rect = btn.getBoundingClientRect();
+    const centerX = rect.left + rect.width / 2;
+    const distance = Math.abs(mouseX - centerX);
+    if (distance > MAGNIFY_RADIUS) return 1;
+    const t = 1 - distance / MAGNIFY_RADIUS;
+    return 1 + (magnification - 1) * t;
+  }
+  return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      onMouseMove: (e) => setMouseX(e.clientX),
+      onMouseLeave: () => setMouseX(null),
+      className: cn$1(
+        "inline-flex items-end gap-2 rounded-2xl border bg-background/80 px-4 py-3 shadow-lg backdrop-blur-md",
+        className
+      ),
+      ...props,
+      children: items.map((item, i) => {
+        const scale = getScale(i);
+        const size = iconSize * scale;
+        const button = /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              "data-dock-item": true,
+              onClick: item.onClick,
+              className: "flex items-center justify-center rounded-xl bg-muted text-foreground transition-colors hover:bg-accent",
+              style: {
+                width: size,
+                height: size,
+                transition: "width 100ms ease, height 100ms ease",
+                transformOrigin: "bottom center"
+              },
+              "aria-label": item.label,
+              children: /* @__PURE__ */ jsx(item.icon, { style: { width: size * 0.5, height: size * 0.5 } })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(TooltipContent, { side: "top", sideOffset: 8, children: /* @__PURE__ */ jsx("p", { children: item.label }) })
+        ] }, item.label);
+        if (item.href) {
+          return /* @__PURE__ */ jsx("a", { href: item.href, children: button }, item.label);
+        }
+        return button;
+      })
+    }
+  ) });
+}
+function renderItems(items) {
+  return items.map((item, i) => {
+    if (item.type === "separator") return /* @__PURE__ */ jsx(ContextMenuSeparator, {}, i);
+    if (item.type === "label") return /* @__PURE__ */ jsx(ContextMenuLabel, { children: item.label }, i);
+    if (item.type === "sub") {
+      return /* @__PURE__ */ jsxs(ContextMenuSub, { children: [
+        /* @__PURE__ */ jsx(ContextMenuSubTrigger, { children: item.label }),
+        /* @__PURE__ */ jsx(ContextMenuSubContent, { children: renderItems(item.items) })
+      ] }, i);
+    }
+    return /* @__PURE__ */ jsxs(ContextMenuItem, { disabled: item.disabled, onSelect: item.onSelect, children: [
+      item.label,
+      item.shortcut && /* @__PURE__ */ jsx(ContextMenuShortcut, { children: item.shortcut })
+    ] }, i);
+  });
+}
+function ContextMenu({ items, children }) {
+  return /* @__PURE__ */ jsxs(ContextMenu$1, { children: [
+    /* @__PURE__ */ jsx(ContextMenuTrigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx(ContextMenuContent, { children: renderItems(items) })
+  ] });
+}
+function ConfirmDialog({ isOpen, options, handleConfirm, handleCancel, destructive = false }) {
+  return /* @__PURE__ */ jsx(AlertDialog, { open: isOpen, onOpenChange: (open) => {
+    if (!open) handleCancel();
+  }, children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [
+    /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
+      /* @__PURE__ */ jsx(AlertDialogTitle, { children: options.title ?? "Are you sure?" }),
+      options.description && /* @__PURE__ */ jsx(AlertDialogDescription, { children: options.description })
+    ] }),
+    /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
+      /* @__PURE__ */ jsx(AlertDialogCancel, { onClick: handleCancel, children: options.cancelLabel ?? "Cancel" }),
+      /* @__PURE__ */ jsx(
+        AlertDialogAction,
+        {
+          onClick: handleConfirm,
+          className: destructive ? "bg-destructive text-destructive-foreground hover:bg-destructive/90" : void 0,
+          children: options.confirmLabel ?? "Confirm"
+        }
+      )
+    ] })
+  ] }) });
+}
+var blurClass2 = {
+  sm: "backdrop-blur-sm",
+  md: "backdrop-blur-md",
+  lg: "backdrop-blur-lg"
+};
+function GlassCard({ blur = "md", className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn$1(
+        "rounded-2xl border border-white/20 bg-background/50 shadow-sm",
+        blurClass2[blur],
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function StatCard({ value, label, delta, trend = "neutral", description, className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn$1("rounded-2xl border bg-card p-5", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: label }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-end justify-between gap-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-3xl font-bold tracking-tight", children: value }),
+          delta && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn$1(
+                "flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium",
+                trend === "up" && "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
+                trend === "down" && "bg-red-500/10 text-red-600 dark:text-red-400",
+                trend === "neutral" && "bg-muted text-muted-foreground"
+              ),
+              children: [
+                trend === "up" && /* @__PURE__ */ jsx(TrendingUp, { className: "size-3" }),
+                trend === "down" && /* @__PURE__ */ jsx(TrendingDown, { className: "size-3" }),
+                delta
+              ]
+            }
+          )
+        ] }),
+        description && /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-xs text-muted-foreground", children: description })
+      ]
+    }
+  );
+}
+var overlayClass = {
+  none: "",
+  subtle: "bg-gradient-to-t from-black/60 via-black/10 to-transparent",
+  strong: "bg-gradient-to-t from-black/80 via-black/30 to-black/10"
+};
+var aspectClass = {
+  video: "aspect-video",
+  square: "aspect-square",
+  portrait: "aspect-[3/4]",
+  auto: ""
+};
+function ImageCard({
+  src,
+  alt = "",
+  overlay = "subtle",
+  aspectRatio = "video",
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn$1(
+        "group relative overflow-hidden rounded-2xl bg-muted",
+        aspectClass[aspectRatio],
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src,
+            alt,
+            className: "h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
+          }
+        ),
+        overlay !== "none" && /* @__PURE__ */ jsx("div", { className: cn$1("absolute inset-0", overlayClass[overlay]) }),
+        children && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex flex-col justify-end p-5 text-white", children })
+      ]
+    }
+  );
+}
+function FullPageSpinner({ message }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-4", children: [
+    /* @__PURE__ */ jsx(Spinner, { className: "size-8" }),
+    message && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: message })
+  ] });
+}
+var defaultRenderLink8 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
+function PageHeader({
+  title,
+  description,
+  breadcrumbs,
+  backButton,
+  renderLink = defaultRenderLink8,
+  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(React25.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,
+          children: crumb.label,
+          className: "hover:text-foreground transition-colors"
+        })
+      ] }, i);
+    }) }),
+    backButton && /* @__PURE__ */ jsx("div", { className: "mb-2", children: backButton.href ? renderLink({
+      href: backButton.href,
+      children: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" }),
+        /* @__PURE__ */ jsx("span", { children: backButton.label ?? "Back" })
+      ] }),
+      className: "inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
+    }) : /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: backButton.onClick,
+        className: "inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors",
+        children: [
+          /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" }),
+          /* @__PURE__ */ jsx("span", { children: backButton.label ?? "Back" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold tracking-tight", children: title }),
+      children && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children })
+    ] }),
+    description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description })
+  ] });
+}
+function Suspensed({ children, fallback }) {
+  return /* @__PURE__ */ jsx(React25.Suspense, { fallback: fallback ?? /* @__PURE__ */ jsx(Spinner, {}), children });
+}
+function ThemeColorUpdater({ colorTheme }) {
+  React25.useEffect(() => {
+    if (colorTheme) {
+      document.documentElement.setAttribute("data-theme", colorTheme);
+    } else {
+      document.documentElement.removeAttribute("data-theme");
+    }
+  }, [colorTheme]);
+  return null;
+}
+function VersionBanner({ version, message, className, onDismiss }) {
+  const [dismissed, setDismissed] = React25.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: [
+      /* @__PURE__ */ jsxs("span", { className: "rounded bg-primary/20 px-1.5 py-0.5 font-mono text-xs font-semibold text-primary", children: [
+        "v",
+        version
+      ] }),
+      message && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: message })
+    ] }),
+    onDismiss && /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => {
+          setDismissed(true);
+          onDismiss();
+        },
+        className: "text-muted-foreground transition-colors hover:text-foreground",
+        "aria-label": "Dismiss",
+        children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+      }
+    )
+  ] });
+}
+function DevBanner({ environment = "development", className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-center gap-2 bg-amber-500/15 px-4 py-1 text-xs font-medium text-amber-700 dark:text-amber-400",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-amber-500" }),
+        /* @__PURE__ */ jsx("span", { children: environment })
+      ]
+    }
+  );
+}
+function RegisterHotkeys({ hotkeys }) {
+  React25.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, resetErrorBoundary }) {
+  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: [
+      /* @__PURE__ */ jsx(AlertTriangle, { className: "size-12 text-destructive" }),
+      /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold", children: "Something went wrong" }),
+      /* @__PURE__ */ jsx("p", { className: "max-w-md text-sm text-muted-foreground", children: error.message || "An unexpected error occurred." })
+    ] }),
+    resetErrorBoundary && /* @__PURE__ */ jsx(Button$1, { onClick: resetErrorBoundary, variant: "outline", children: "Try again" })
+  ] });
+}
+function useMounted() {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  return mounted;
+}
+function useConfirm() {
+  const [isOpen, setIsOpen] = React25.useState(false);
+  const [options, setOptions] = React25.useState({});
+  const resolveRef = React25.useRef(null);
+  const confirm = React25.useCallback((opts = {}) => {
+    setOptions(opts);
+    setIsOpen(true);
+    return new Promise((resolve) => {
+      resolveRef.current = resolve;
+    });
+  }, []);
+  const handleConfirm = React25.useCallback(() => {
+    resolveRef.current?.(true);
+    setIsOpen(false);
+  }, []);
+  const handleCancel = React25.useCallback(() => {
+    resolveRef.current?.(false);
+    setIsOpen(false);
+  }, []);
+  return { confirm, isOpen, options, handleConfirm, handleCancel };
+}
+function useControlledOpen(defaultOpen = false) {
+  const [isOpen, setIsOpen] = React25.useState(defaultOpen);
+  const open = React25.useCallback(() => setIsOpen(true), []);
+  const close = React25.useCallback(() => setIsOpen(false), []);
+  const toggle = React25.useCallback(() => setIsOpen((prev) => !prev), []);
+  return { isOpen, open, close, toggle, setIsOpen };
+}
+function useScrolledPast(threshold) {
+  const [scrolledPast, setScrolledPast] = React25.useState(false);
+  React25.useEffect(() => {
+    const handleScroll = () => {
+      setScrolledPast(window.scrollY > threshold);
+    };
+    handleScroll();
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [threshold]);
+  return scrolledPast;
+}
+function useCopyToClipboard() {
+  const [copied, setCopied] = React25.useState(false);
+  const timeoutRef = React25.useRef(void 0);
+  const copy = React25.useCallback((text) => {
+    navigator.clipboard.writeText(text).then(() => {
+      setCopied(true);
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => setCopied(false), 2e3);
+    });
+  }, []);
+  React25.useEffect(() => () => clearTimeout(timeoutRef.current), []);
+  return [copied, copy];
+}
+function useDebounce(value, delay) {
+  const [debounced, setDebounced] = React25.useState(value);
+  React25.useEffect(() => {
+    const timer = setTimeout(() => setDebounced(value), delay);
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+  return debounced;
+}
+function useIntersectionObserver(options) {
+  const ref = React25.useRef(null);
+  const [isIntersecting, setIsIntersecting] = React25.useState(false);
+  React25.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] = React25.useState(() => {
+    if (typeof window === "undefined") return initialValue;
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch {
+      return initialValue;
+    }
+  });
+  const setValue = React25.useCallback(
+    (value) => {
+      try {
+        setStoredValue(value);
+        if (typeof window !== "undefined") {
+          window.localStorage.setItem(key, JSON.stringify(value));
+        }
+      } catch {
+      }
+    },
+    [key]
+  );
+  return [storedValue, setValue];
+}
+function useMediaQuery(query) {
+  const [matches, setMatches] = React25.useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia(query).matches;
+  });
+  React25.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mql = window.matchMedia(query);
+    setMatches(mql.matches);
+    const handler = (e) => setMatches(e.matches);
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, [query]);
+  return matches;
+}
+function usePagination(total, pageSize) {
+  const [page, setPage] = React25.useState(1);
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+  const offset = (page - 1) * pageSize;
+  const goTo = React25.useCallback(
+    (p) => setPage(Math.min(Math.max(1, p), totalPages)),
+    [totalPages]
+  );
+  const next = React25.useCallback(() => goTo(page + 1), [page, goTo]);
+  const prev = React25.useCallback(() => goTo(page - 1), [page, goTo]);
+  return { page, pageSize, totalPages, offset, hasPrev: page > 1, hasNext: page < totalPages, goTo, next, prev };
+}
+
+export { AppShell, AuthSection, Badge, Button, Card, Checkbox, ConfirmDialog, ContactSection, ContextMenu, CountUp, CtaSection, DevBanner, Dock, EmptyState, ErrorPage, FadeIn, FaqSection, FeatureCard, FeaturesSection, Footer, FullPageSpinner, GlassCard, HeroSection, ImageCard, Input, LogoStrip, Navbar, NewsletterSection, OlwibaUIProvider, Overlay, PageHeader, PageTransition, PricingCard, PricingSection, RegisterHotkeys, RootErrorFallback, SectionTitle, Spotlight, StaggerChildren, StatCard, StatsSection, Suspensed, Switch, TeamSection, TestimonialCard, TestimonialsSection, Textarea, ThemeColorUpdater, ThemeSwitchMinimal, Underlay, UpgradePrompt, VersionBanner, cn, useConfirm, useControlledOpen, useCopyToClipboard, useDebounce, useIntersectionObserver, useLocalStorage, useMediaQuery, useMounted, useOlwibaUI, usePagination, useScrolledPast, useUIMode };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map