@olwiba/ui 0.1.1 → 0.1.3

package/dist/index.js

@@ -1,29 +1,32 @@
 import { cn } from './chunk-AMWLSHD6.js';
 export { MdxContent, cn } from './chunk-AMWLSHD6.js';
-import * as React25 from 'react';
+import * as React26 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';
+import { Button as Button$1, Card as Card$1, Input as Input$1, Textarea as Textarea$1, Checkbox as Checkbox$1, Switch as Switch$1, useIsMobile, UIVariantProvider, Badge as Badge$1, cn as cn$1, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, Avatar, AvatarImage, AvatarFallback, useUIVariant, Separator, Accordion, AccordionItem, AccordionTrigger, AccordionContent, Label, Sheet, SheetTrigger, SheetContent, 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';
+import { Compass, ArrowLeft, X, ArrowRight, ChevronLeft, ChevronRight, Sparkles, Check, Minus, Quote, Star, Twitter, Github, Linkedin, Mail, Phone, MapPin, MessageSquare, Send, Menu, Search, TrendingUp, TrendingDown, Sun, Moon, AlertTriangle, Loader2, Layers, LayoutGrid, ShieldCheck, Building2, MoreVerticalIcon, CreditCardIcon, BellIcon, LogOutIcon } from 'lucide-react';
 
-var OlwibaUIContext = React25.createContext({
+var OlwibaUIContext = React26.createContext({
   isMobile: false,
-  mode: "default"
+  mode: "default",
+  setMode: () => {
+  }
 });
-function OlwibaUIProvider({ children, isMobile: isMobileProp, mode = "default" }) {
+function OlwibaUIProvider({ children, isMobile: isMobileProp, mode: initialMode = "default" }) {
   const detectedMobile = useIsMobile();
   const isMobile = isMobileProp ?? detectedMobile;
+  const [mode, setMode] = React26.useState(initialMode);
   const variant = mode !== "default" ? mode : void 0;
-  return /* @__PURE__ */ jsx(OlwibaUIContext.Provider, { value: { isMobile, mode }, children: /* @__PURE__ */ jsx(UIVariantProvider, { mode: variant, children }) });
+  return /* @__PURE__ */ jsx(OlwibaUIContext.Provider, { value: { isMobile, mode, setMode }, children: /* @__PURE__ */ jsx(UIVariantProvider, { mode: variant, children }) });
 }
 function useOlwibaUI() {
-  return React25.useContext(OlwibaUIContext);
+  return React26.useContext(OlwibaUIContext);
 }
 function useUIMode() {
-  return React25.useContext(OlwibaUIContext).mode;
+  return React26.useContext(OlwibaUIContext).mode;
 }
-var Button = React25.forwardRef(
+var Button = React26.forwardRef(
   ({ mode, ...props }, ref) => {
     const ctxMode = useUIMode();
     const resolvedMode = mode ?? (ctxMode !== "default" ? ctxMode : void 0);
@@ -31,7 +34,7 @@ var Button = React25.forwardRef(
   }
 );
 Button.displayName = "Button";
-var Card = React25.forwardRef(
+var Card = React26.forwardRef(
   ({ mode, ...props }, ref) => {
     const ctxMode = useUIMode();
     const resolvedMode = mode ?? (ctxMode !== "default" ? ctxMode : void 0);
@@ -42,7 +45,7 @@ Card.displayName = "Card";
 function Badge(props) {
   return /* @__PURE__ */ jsx(Badge$1, { ...props });
 }
-var Input = React25.forwardRef(
+var Input = React26.forwardRef(
   ({ mode, ...props }, ref) => {
     const ctxMode = useUIMode();
     const resolvedMode = mode ?? (ctxMode !== "default" ? ctxMode : void 0);
@@ -50,7 +53,7 @@ var Input = React25.forwardRef(
   }
 );
 Input.displayName = "Input";
-var Textarea = React25.forwardRef(
+var Textarea = React26.forwardRef(
   ({ mode, ...props }, ref) => {
     const ctxMode = useUIMode();
     const resolvedMode = mode ?? (ctxMode !== "default" ? ctxMode : void 0);
@@ -58,13 +61,13 @@ var Textarea = React25.forwardRef(
   }
 );
 Textarea.displayName = "Textarea";
-var Checkbox = React25.forwardRef(({ mode, ...props }, ref) => {
+var Checkbox = React26.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) => {
+var Switch = React26.forwardRef(({ mode: _mode, ...props }, ref) => {
   return /* @__PURE__ */ jsx(Switch$1, { ...props, ref });
 });
 Switch.displayName = "Switch";
@@ -754,9 +757,9 @@ function FadeIn({
   style,
   ...props
 }) {
-  const ref = React25.useRef(null);
-  const [visible, setVisible] = React25.useState(false);
-  React25.useEffect(() => {
+  const ref = React26.useRef(null);
+  const [visible, setVisible] = React26.useState(false);
+  React26.useEffect(() => {
     const el = ref.current;
     if (!el) return;
     const observer = new IntersectionObserver(
@@ -889,17 +892,28 @@ function HeroSection({
   ] }) });
 }
 function FeatureCard({ icon: Icon, title, description, href, className, ...props }) {
-  const content = /* @__PURE__ */ jsxs(
+  const mode = useUIVariant();
+  const cardInner = /* @__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",
+        "group relative flex h-full flex-col gap-4 border bg-card p-6 transition-all duration-200",
+        mode === "playful" ? "rounded-2xl rotate-[0.3deg]" : mode === "smooth" ? "rounded-3xl hover:-translate-y-0.5 hover:shadow-md" : "rounded-2xl hover:-translate-y-0.5 hover:shadow-md",
         href && "cursor-pointer",
-        className
+        mode !== "playful" && className
       ),
-      ...props,
+      ...mode !== "playful" ? 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__ */ jsx(
+          "div",
+          {
+            className: cn$1(
+              "flex h-10 w-10 items-center justify-center bg-primary/10 text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground",
+              mode === "smooth" ? "rounded-2xl" : "rounded-xl"
+            ),
+            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 }),
@@ -910,8 +924,18 @@ function FeatureCard({ icon: Icon, title, description, href, className, ...props
       ]
     }
   );
+  const content = mode === "playful" ? /* @__PURE__ */ jsxs("div", { className: cn$1("group/playful relative h-full", className), ...props, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: "absolute inset-0 rounded-2xl bg-border transition-transform duration-200 translate-x-[5px] translate-y-[5px] -rotate-[0.5deg] group-hover/playful:-rotate-[1.5deg] group-hover/playful:translate-x-[6px] group-hover/playful:translate-y-[6px]"
+      }
+    ),
+    cardInner
+  ] }) : cardInner;
   if (href) {
-    return /* @__PURE__ */ jsx("a", { href, className: "block", children: content });
+    return /* @__PURE__ */ jsx("a", { href, className: "block h-full", children: content });
   }
   return content;
 }
@@ -932,9 +956,9 @@ function StaggerChildren({
   className,
   ...props
 }) {
-  const ref = React25.useRef(null);
-  const [visible, setVisible] = React25.useState(false);
-  React25.useEffect(() => {
+  const ref = React26.useRef(null);
+  const [visible, setVisible] = React26.useState(false);
+  React26.useEffect(() => {
     const el = ref.current;
     if (!el) return;
     const observer = new IntersectionObserver(
@@ -952,9 +976,10 @@ function StaggerChildren({
     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(
+  return /* @__PURE__ */ jsx("div", { ref, className: cn$1(className), ...props, children: React26.Children.map(children, (child, i) => /* @__PURE__ */ jsx(
     "div",
     {
+      className: "h-full",
       style: {
         transition: `opacity ${duration}ms ease, transform ${duration}ms ease`,
         transitionDelay: `${delay + i * stagger}ms`,
@@ -971,7 +996,14 @@ function FeaturesSection({
   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: [
+  const mode = useUIVariant();
+  const sectionClasses = cn$1(
+    "overflow-hidden bg-card",
+    mode === "smooth" && "rounded-3xl border",
+    mode === "playful" && "rounded-2xl border-primary/25 border",
+    !mode && "rounded-2xl border"
+  );
+  return /* @__PURE__ */ jsx("section", { className: sectionClasses, children: /* @__PURE__ */ jsx("div", { className: "px-6 py-14 sm:px-10 sm:py-20", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-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,
@@ -985,6 +1017,106 @@ function FeaturesSection({
     )) })
   ] }) }) });
 }
+function CarouselSection({
+  title = "Explore the platform",
+  description,
+  badge = "Features",
+  features
+}) {
+  const mode = useUIVariant();
+  const trackRef = React26.useRef(null);
+  const [canPrev, setCanPrev] = React26.useState(false);
+  const [canNext, setCanNext] = React26.useState(true);
+  const updateScrollState = React26.useCallback(() => {
+    const track = trackRef.current;
+    if (!track) return;
+    setCanPrev(track.scrollLeft > 8);
+    setCanNext(track.scrollLeft < track.scrollWidth - track.clientWidth - 8);
+  }, []);
+  React26.useEffect(() => {
+    const track = trackRef.current;
+    if (!track) return;
+    updateScrollState();
+    track.addEventListener("scroll", updateScrollState, { passive: true });
+    const observer = new ResizeObserver(updateScrollState);
+    observer.observe(track);
+    return () => {
+      track.removeEventListener("scroll", updateScrollState);
+      observer.disconnect();
+    };
+  }, [updateScrollState]);
+  const scrollByCard = (direction) => {
+    const track = trackRef.current;
+    if (!track) return;
+    const card = track.querySelector("[data-carousel-item]");
+    const step = card ? card.offsetWidth + 24 : track.clientWidth * 0.8;
+    track.scrollBy({ left: direction * step, behavior: "smooth" });
+  };
+  const sectionClasses = cn$1(
+    "overflow-hidden bg-card",
+    mode === "smooth" && "rounded-3xl border",
+    mode === "playful" && "rounded-2xl border-primary/25 border",
+    !mode && "rounded-2xl border"
+  );
+  const controlClasses = cn$1(
+    "flex size-9 items-center justify-center border bg-background text-foreground transition-colors",
+    "hover:bg-muted disabled:opacity-40 disabled:hover:bg-background",
+    mode === "smooth" ? "rounded-2xl" : "rounded-xl"
+  );
+  return /* @__PURE__ */ jsx("section", { className: sectionClasses, children: /* @__PURE__ */ jsx("div", { className: "px-6 py-14 sm:px-10 sm:py-20", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-5xl", children: [
+    /* @__PURE__ */ jsx(SectionTitle, { title, description, badge }),
+    /* @__PURE__ */ jsxs(FadeIn, { direction: "up", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mt-10 flex items-center justify-end gap-2", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Previous",
+            className: controlClasses,
+            onClick: () => scrollByCard(-1),
+            disabled: !canPrev,
+            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Next",
+            className: controlClasses,
+            onClick: () => scrollByCard(1),
+            disabled: !canNext,
+            children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: trackRef,
+          className: "mt-4 flex snap-x snap-mandatory gap-6 overflow-x-auto pb-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+          children: features.map((feature) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-carousel-item": true,
+              className: "w-[280px] shrink-0 snap-start sm:w-[320px]",
+              children: /* @__PURE__ */ jsx(
+                FeatureCard,
+                {
+                  icon: feature.icon,
+                  title: feature.title,
+                  description: feature.description,
+                  href: feature.href
+                }
+              )
+            },
+            feature.title
+          ))
+        }
+      )
+    ] })
+  ] }) }) });
+}
 var defaultRenderLink5 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
 function CtaSection({
   heading,
@@ -994,10 +1126,17 @@ function CtaSection({
   footnote,
   renderLink = defaultRenderLink5
 }) {
-  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: [
+  const mode = useUIVariant();
+  const sectionClasses = cn$1(
+    "overflow-hidden bg-card",
+    mode === "smooth" && "rounded-3xl border",
+    mode === "playful" && "rounded-2xl border-primary/25 border",
+    !mode && "rounded-2xl border"
+  );
+  return /* @__PURE__ */ jsx("section", { className: sectionClasses, children: /* @__PURE__ */ jsxs("div", { className: "relative px-6 py-16 sm:px-10 sm:py-24", children: [
     /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-[radial-gradient(ellipse_at_center,hsl(var(--primary)/0.15),transparent_70%)]" }),
     /* @__PURE__ */ jsx(FadeIn, { direction: "up", children: /* @__PURE__ */ jsxs("div", { className: "relative mx-auto max-w-2xl text-center", children: [
-      /* @__PURE__ */ jsx("div", { className: "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("div", { className: cn$1("mb-4 inline-flex h-10 w-10 items-center justify-center bg-primary/10 text-primary", mode === "smooth" ? "rounded-3xl" : "rounded-2xl"), children: /* @__PURE__ */ jsx(Sparkles, { className: "size-5" }) }),
       /* @__PURE__ */ jsx("h2", { className: "text-balance text-3xl font-semibold tracking-tight sm:text-4xl", children: heading }),
       /* @__PURE__ */ jsx("p", { className: "mx-auto mt-4 max-w-lg text-pretty text-muted-foreground", children: description }),
       /* @__PURE__ */ jsxs("div", { className: "mt-8 flex flex-wrap items-center justify-center gap-3", children: [
@@ -1030,15 +1169,17 @@ function PricingCard({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs(
+  const mode = useUIVariant();
+  const cardInner = /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn$1(
-        "relative flex flex-col rounded-2xl border p-6",
+        "relative flex flex-col border p-6",
+        mode === "playful" ? "rounded-2xl rotate-[0.3deg]" : mode === "smooth" ? "rounded-3xl" : "rounded-2xl",
         highlighted ? "border-primary bg-primary/5 shadow-sm" : "bg-card",
-        className
+        mode !== "playful" && className
       ),
-      ...props,
+      ...mode !== "playful" ? 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: [
@@ -1069,6 +1210,22 @@ function PricingCard({
       ]
     }
   );
+  if (mode === "playful") {
+    return /* @__PURE__ */ jsxs("div", { className: cn$1("group/playful relative", className), ...props, children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: cn$1(
+            "absolute inset-0 rounded-2xl transition-transform duration-200 translate-x-[5px] translate-y-[5px] -rotate-[0.5deg] group-hover/playful:-rotate-[1.5deg] group-hover/playful:translate-x-[6px] group-hover/playful:translate-y-[6px]",
+            highlighted ? "bg-primary/20" : "bg-border"
+          )
+        }
+      ),
+      cardInner
+    ] });
+  }
+  return cardInner;
 }
 var defaultRenderLink6 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
 function PricingSection({
@@ -1081,16 +1238,25 @@ function PricingSection({
   renderLink = defaultRenderLink6,
   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: [
+  const [annual, setAnnual] = React26.useState(false);
+  const mode = useUIVariant();
+  const sectionClasses = cn$1(
+    "overflow-hidden bg-card",
+    mode === "smooth" && "rounded-3xl border",
+    mode === "playful" && "rounded-2xl border-primary/25 border",
+    !mode && "rounded-2xl border"
+  );
+  return /* @__PURE__ */ jsx("section", { className: sectionClasses, children: /* @__PURE__ */ jsx("div", { className: "px-6 py-14 sm:px-10 sm:py-20", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-5xl", children: [
     /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
       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",
+          Button$1,
           {
+            variant: "ghost",
+            size: "sm",
             onClick: () => setAnnual(false),
             className: cn$1(
               "rounded-full px-4 py-1.5 text-sm font-medium transition-colors",
@@ -1100,8 +1266,10 @@ function PricingSection({
           }
         ),
         /* @__PURE__ */ jsxs(
-          "button",
+          Button$1,
           {
+            variant: "ghost",
+            size: "sm",
             onClick: () => setAnnual(true),
             className: cn$1(
               "flex items-center gap-2 rounded-full px-4 py-1.5 text-sm font-medium transition-colors",
@@ -1146,11 +1314,16 @@ function TestimonialCard({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs(
+  const mode = useUIVariant();
+  const cardInner = /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn$1("flex flex-col gap-4 rounded-2xl border bg-card p-6", className),
-      ...props,
+      className: cn$1(
+        "flex flex-col gap-4 border bg-card p-6",
+        mode === "playful" ? "rounded-2xl rotate-[0.3deg]" : mode === "smooth" ? "rounded-3xl" : "rounded-2xl",
+        mode !== "playful" && className
+      ),
+      ...mode !== "playful" ? 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(
@@ -1165,9 +1338,9 @@ function TestimonialCard({
         )) }),
         /* @__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__ */ jsxs(Avatar, { className: "size-9", children: [
             /* @__PURE__ */ jsx(AvatarImage, { src: avatar, alt: name }),
-            /* @__PURE__ */ jsx(AvatarFallback, { className: "rounded-xl text-xs", children: initials ?? name.slice(0, 2).toUpperCase() })
+            /* @__PURE__ */ jsx(AvatarFallback, { className: "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 }),
@@ -1180,6 +1353,19 @@ function TestimonialCard({
       ]
     }
   );
+  if (mode === "playful") {
+    return /* @__PURE__ */ jsxs("div", { className: cn$1("group/playful relative", className), ...props, children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: "absolute inset-0 rounded-2xl bg-border transition-transform duration-200 translate-x-[5px] translate-y-[5px] -rotate-[0.5deg] group-hover/playful:-rotate-[1.5deg] group-hover/playful:translate-x-[6px] group-hover/playful:translate-y-[6px]"
+        }
+      ),
+      cardInner
+    ] });
+  }
+  return cardInner;
 }
 function TestimonialsSection({
   title = "Trusted by teams shipping real products",
@@ -1187,7 +1373,14 @@ function TestimonialsSection({
   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: [
+  const mode = useUIVariant();
+  const sectionClasses = cn$1(
+    "overflow-hidden bg-card",
+    mode === "smooth" && "rounded-3xl border",
+    mode === "playful" && "rounded-2xl border-primary/25 border",
+    !mode && "rounded-2xl border"
+  );
+  return /* @__PURE__ */ jsx("section", { className: sectionClasses, children: /* @__PURE__ */ jsx("div", { className: "px-6 py-14 sm:px-10 sm:py-20", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-5xl", children: [
     /* @__PURE__ */ 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",
@@ -1293,7 +1486,14 @@ function FaqSection({
   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: [
+  const mode = useUIVariant();
+  const sectionClasses = cn$1(
+    "overflow-hidden bg-card",
+    mode === "smooth" && "rounded-3xl border",
+    mode === "playful" && "rounded-2xl border-primary/25 border",
+    !mode && "rounded-2xl border"
+  );
+  return /* @__PURE__ */ jsx("section", { className: sectionClasses, children: /* @__PURE__ */ jsx("div", { className: "px-6 py-14 sm:px-10 sm:py-20", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-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 }),
@@ -1312,10 +1512,10 @@ function CountUp({
   className,
   ...props
 }) {
-  const ref = React25.useRef(null);
-  const [value, setValue] = React25.useState(from);
-  const hasStarted = React25.useRef(false);
-  React25.useEffect(() => {
+  const ref = React26.useRef(null);
+  const [value, setValue] = React26.useState(from);
+  const hasStarted = React26.useRef(false);
+  React26.useEffect(() => {
     const el = ref.current;
     if (!el) return;
     const observer = new IntersectionObserver(
@@ -1363,7 +1563,14 @@ function StatsSection({
   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: [
+  const mode = useUIVariant();
+  const sectionClasses = cn$1(
+    "overflow-hidden bg-card",
+    mode === "smooth" && "rounded-3xl border",
+    mode === "playful" && "rounded-2xl border-primary/25 border",
+    !mode && "rounded-2xl border"
+  );
+  return /* @__PURE__ */ jsx("section", { className: sectionClasses, children: /* @__PURE__ */ jsxs("div", { className: "relative px-6 py-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 }),
@@ -1401,8 +1608,8 @@ function NewsletterSection({
   successDescription = defaults.successDescription,
   onSubscribe
 } = {}) {
-  const [email, setEmail] = React25.useState("");
-  const [submitted, setSubmitted] = React25.useState(false);
+  const [email, setEmail] = React26.useState("");
+  const [submitted, setSubmitted] = React26.useState(false);
   async function handleSubmit(e) {
     e.preventDefault();
     if (!email) return;
@@ -1480,7 +1687,7 @@ function ContactSection({
   sendAnotherLabel = defaults2.sendAnotherLabel,
   onSubmit
 } = {}) {
-  const [submitted, setSubmitted] = React25.useState(false);
+  const [submitted, setSubmitted] = React26.useState(false);
   async function handleSubmit(e) {
     e.preventDefault();
     await onSubmit?.(e);
@@ -1569,38 +1776,17 @@ function ContactSection({
     ] }) })
   ] }) });
 }
-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: /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: "inline-flex size-4 items-center justify-center animate-in fade-in zoom-in-75 spin-in-90 duration-200 motion-reduce:animate-none",
-      children: theme === "dark" ? /* @__PURE__ */ jsx(Sun, { className: "size-4" }) : /* @__PURE__ */ jsx(Moon, { className: "size-4" })
-    },
-    theme
-  ) });
-}
 var defaultRenderLink7 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
 function Navbar({
   brand,
   navLinks,
   cta,
-  showThemeToggle = false,
+  controls,
   renderLink = defaultRenderLink7
 }) {
-  const [open, setOpen] = React25.useState(false);
+  const [open, setOpen] = React26.useState(false);
   const brandHref = brand.href ?? "/";
+  const hasRightContent = controls?.length || cta?.primary || cta?.secondary;
   return /* @__PURE__ */ jsx("section", { className: "overflow-hidden rounded-2xl border bg-card", children: /* @__PURE__ */ jsxs("nav", { className: "grid h-16 grid-cols-[1fr_auto_1fr] items-center px-6", children: [
     renderLink({
       href: brandHref,
@@ -1609,12 +1795,14 @@ function Navbar({
         /* @__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({
+    /* @__PURE__ */ jsx("div", { className: `hidden items-center gap-1 md:flex ${!hasRightContent ? "col-span-2 justify-end" : ""}`, children: navLinks.map((link) => /* @__PURE__ */ jsx("span", { children: renderLink({
       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: [
+    hasRightContent && /* @__PURE__ */ jsxs("div", { className: "hidden items-center justify-end gap-2 md:flex", children: [
+      controls?.map((control, i) => /* @__PURE__ */ jsx(React26.Fragment, { children: control }, i)),
+      (cta?.secondary || cta?.primary) && controls?.length ? /* @__PURE__ */ jsx("div", { className: "mx-1 h-4 w-px bg-border" }) : null,
       cta?.secondary && renderLink({
         href: cta.secondary.href,
         children: /* @__PURE__ */ jsx(Button$1, { variant: "ghost", size: "sm", children: cta.secondary.label })
@@ -1622,8 +1810,7 @@ function Navbar({
       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: [
@@ -1640,7 +1827,7 @@ function Navbar({
             ] })
           }) }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-            showThemeToggle && /* @__PURE__ */ jsx(ThemeSwitchMinimal, {}),
+            controls?.map((control, i) => /* @__PURE__ */ jsx(React26.Fragment, { children: control }, i)),
             /* @__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" })
@@ -1785,7 +1972,7 @@ function LogoStrip({
   ] });
 }
 function GridUnderlay({ variant, size = 24, className, ...props }) {
-  const id = React25.useId();
+  const id = React26.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 })
@@ -1813,9 +2000,9 @@ function GlowUnderlay({
   style,
   ...props
 }) {
-  const [pos, setPos] = React25.useState({ x: "50%", y: "50%" });
-  const containerRef = React25.useRef(null);
-  React25.useEffect(() => {
+  const [pos, setPos] = React26.useState({ x: "50%", y: "50%" });
+  const containerRef = React26.useRef(null);
+  React26.useEffect(() => {
     if (!followCursor) return;
     const handleMouseMove = (e) => {
       const el = containerRef.current;
@@ -1907,8 +2094,8 @@ function PageTransition({
   style,
   ...props
 }) {
-  const [mounted, setMounted] = React25.useState(false);
-  React25.useEffect(() => {
+  const [mounted, setMounted] = React26.useState(false);
+  React26.useEffect(() => {
     const id = requestAnimationFrame(() => setMounted(true));
     return () => cancelAnimationFrame(id);
   }, []);
@@ -1935,8 +2122,8 @@ function Spotlight({
   triggerClassName,
   shortcut = "\u2318K"
 }) {
-  const [open, setOpen] = React25.useState(false);
-  React25.useEffect(() => {
+  const [open, setOpen] = React26.useState(false);
+  React26.useEffect(() => {
     const down = (e) => {
       if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
         e.preventDefault();
@@ -1966,7 +2153,7 @@ function Spotlight({
       /* @__PURE__ */ jsx(CommandInput, { placeholder }),
       /* @__PURE__ */ jsxs(CommandList, { children: [
         /* @__PURE__ */ jsx(CommandEmpty, { children: "No results found." }),
-        groups.map((group, i) => /* @__PURE__ */ jsxs(React25.Fragment, { children: [
+        groups.map((group, i) => /* @__PURE__ */ jsxs(React26.Fragment, { children: [
           i > 0 && /* @__PURE__ */ jsx(CommandSeparator, {}),
           /* @__PURE__ */ jsx(CommandGroup, { heading: group.heading, children: group.items.map((item) => /* @__PURE__ */ jsxs(
             CommandItem,
@@ -1991,8 +2178,8 @@ function Spotlight({
 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);
+  const [mouseX, setMouseX] = React26.useState(null);
+  const containerRef = React26.useRef(null);
   function getScale(index) {
     if (mouseX === null || !containerRef.current) return 1;
     const container = containerRef.current;
@@ -2217,7 +2404,7 @@ function PageHeader({
   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: [
+      return /* @__PURE__ */ jsxs(React26.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,
@@ -2253,10 +2440,58 @@ function PageHeader({
   ] });
 }
 function Suspensed({ children, fallback }) {
-  return /* @__PURE__ */ jsx(React25.Suspense, { fallback: fallback ?? /* @__PURE__ */ jsx(Spinner, {}), children });
+  return /* @__PURE__ */ jsx(React26.Suspense, { fallback: fallback ?? /* @__PURE__ */ jsx(Spinner, {}), children });
+}
+function ThemeSwitchMinimal() {
+  const [theme, setThemeState] = React26.useState("dark");
+  React26.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: /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "inline-flex size-4 items-center justify-center animate-in fade-in zoom-in-75 spin-in-90 duration-200 motion-reduce:animate-none",
+      children: theme === "dark" ? /* @__PURE__ */ jsx(Sun, { className: "size-4" }) : /* @__PURE__ */ jsx(Moon, { className: "size-4" })
+    },
+    theme
+  ) });
+}
+var MODES = ["default", "playful", "smooth"];
+var MODE_ICONS = {
+  default: /* @__PURE__ */ jsx(LayoutGrid, { className: "size-4" }),
+  playful: /* @__PURE__ */ jsx(Sparkles, { className: "size-4" }),
+  smooth: /* @__PURE__ */ jsx(Layers, { className: "size-4" })
+};
+var MODE_LABELS = {
+  default: "Default mode",
+  playful: "Playful mode",
+  smooth: "Smooth mode"
+};
+function ModeSwitchMinimal() {
+  const { mode, setMode } = useOlwibaUI();
+  const cycle = () => {
+    const idx = MODES.indexOf(mode);
+    setMode(MODES[(idx + 1) % MODES.length]);
+  };
+  return /* @__PURE__ */ jsx(Button$1, { variant: "ghost", size: "icon", onClick: cycle, className: "size-8", "aria-label": MODE_LABELS[mode], children: /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "inline-flex size-4 items-center justify-center animate-in fade-in zoom-in-75 duration-200 motion-reduce:animate-none",
+      children: MODE_ICONS[mode]
+    },
+    mode
+  ) });
 }
 function ThemeColorUpdater({ colorTheme }) {
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     if (colorTheme) {
       document.documentElement.setAttribute("data-theme", colorTheme);
     } else {
@@ -2266,7 +2501,7 @@ function ThemeColorUpdater({ colorTheme }) {
   return null;
 }
 function VersionBanner({ version, message, className, onDismiss }) {
-  const [dismissed, setDismissed] = React25.useState(false);
+  const [dismissed, setDismissed] = React26.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: [
@@ -2306,7 +2541,7 @@ function DevBanner({ environment = "development", className }) {
   );
 }
 function RegisterHotkeys({ hotkeys }) {
-  React25.useEffect(() => {
+  React26.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;
@@ -2426,36 +2661,36 @@ function useMounted() {
   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 = {}) => {
+  const [isOpen, setIsOpen] = React26.useState(false);
+  const [options, setOptions] = React26.useState({});
+  const resolveRef = React26.useRef(null);
+  const confirm = React26.useCallback((opts = {}) => {
     setOptions(opts);
     setIsOpen(true);
     return new Promise((resolve) => {
       resolveRef.current = resolve;
     });
   }, []);
-  const handleConfirm = React25.useCallback(() => {
+  const handleConfirm = React26.useCallback(() => {
     resolveRef.current?.(true);
     setIsOpen(false);
   }, []);
-  const handleCancel = React25.useCallback(() => {
+  const handleCancel = React26.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), []);
+  const [isOpen, setIsOpen] = React26.useState(defaultOpen);
+  const open = React26.useCallback(() => setIsOpen(true), []);
+  const close = React26.useCallback(() => setIsOpen(false), []);
+  const toggle = React26.useCallback(() => setIsOpen((prev) => !prev), []);
   return { isOpen, open, close, toggle, setIsOpen };
 }
 function useScrolledPast(threshold) {
-  const [scrolledPast, setScrolledPast] = React25.useState(false);
-  React25.useEffect(() => {
+  const [scrolledPast, setScrolledPast] = React26.useState(false);
+  React26.useEffect(() => {
     const handleScroll = () => {
       setScrolledPast(window.scrollY > threshold);
     };
@@ -2466,30 +2701,30 @@ function useScrolledPast(threshold) {
   return scrolledPast;
 }
 function useCopyToClipboard() {
-  const [copied, setCopied] = React25.useState(false);
-  const timeoutRef = React25.useRef(void 0);
-  const copy = React25.useCallback((text) => {
+  const [copied, setCopied] = React26.useState(false);
+  const timeoutRef = React26.useRef(void 0);
+  const copy = React26.useCallback((text) => {
     navigator.clipboard.writeText(text).then(() => {
       setCopied(true);
       clearTimeout(timeoutRef.current);
       timeoutRef.current = setTimeout(() => setCopied(false), 2e3);
     });
   }, []);
-  React25.useEffect(() => () => clearTimeout(timeoutRef.current), []);
+  React26.useEffect(() => () => clearTimeout(timeoutRef.current), []);
   return [copied, copy];
 }
 function useDebounce(value, delay) {
-  const [debounced, setDebounced] = React25.useState(value);
-  React25.useEffect(() => {
+  const [debounced, setDebounced] = React26.useState(value);
+  React26.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 ref = React26.useRef(null);
+  const [isIntersecting, setIsIntersecting] = React26.useState(false);
+  React26.useEffect(() => {
     const el = ref.current;
     if (!el) return;
     const observer = new IntersectionObserver(([entry]) => {
@@ -2501,7 +2736,7 @@ function useIntersectionObserver(options) {
   return [ref, isIntersecting];
 }
 function useLocalStorage(key, initialValue) {
-  const [storedValue, setStoredValue] = React25.useState(() => {
+  const [storedValue, setStoredValue] = React26.useState(() => {
     if (typeof window === "undefined") return initialValue;
     try {
       const item = window.localStorage.getItem(key);
@@ -2510,7 +2745,7 @@ function useLocalStorage(key, initialValue) {
       return initialValue;
     }
   });
-  const setValue = React25.useCallback(
+  const setValue = React26.useCallback(
     (value) => {
       try {
         setStoredValue(value);
@@ -2525,11 +2760,11 @@ function useLocalStorage(key, initialValue) {
   return [storedValue, setValue];
 }
 function useMediaQuery(query) {
-  const [matches, setMatches] = React25.useState(() => {
+  const [matches, setMatches] = React26.useState(() => {
     if (typeof window === "undefined") return false;
     return window.matchMedia(query).matches;
   });
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     if (typeof window === "undefined") return;
     const mql = window.matchMedia(query);
     setMatches(mql.matches);
@@ -2540,18 +2775,18 @@ function useMediaQuery(query) {
   return matches;
 }
 function usePagination(total, pageSize) {
-  const [page, setPage] = React25.useState(1);
+  const [page, setPage] = React26.useState(1);
   const totalPages = Math.max(1, Math.ceil(total / pageSize));
   const offset = (page - 1) * pageSize;
-  const goTo = React25.useCallback(
+  const goTo = React26.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]);
+  const next = React26.useCallback(() => goTo(page + 1), [page, goTo]);
+  const prev = React26.useCallback(() => goTo(page - 1), [page, goTo]);
   return { page, pageSize, totalPages, offset, hasPrev: page > 1, hasNext: page < totalPages, goTo, next, prev };
 }
 
-export { AppContent, AppGrid, AppGridCell, AppScreen, AppShell, AuthSection, Badge, Button, Card, ChangelogCard, ChangelogList, Checkbox, ConfirmDialog, ContactSection, ContextMenu, CountUp, CtaSection, DevBanner, Dock, EmptyState, ErrorPage, FadeIn, FaqSection, FeatureCard, FeaturesSection, Footer, FullPageSpinner, GlassCard, Grid, GridItem, HeroSection, ImageCard, Input, LogoStrip, Navbar, NewsletterSection, OlwibaUIProvider, Overlay, PageHeader, PageTransition, PhoneFrame, PostCard, PostList, PricingCard, PricingSection, PublicPageFrame, RegisterHotkeys, RootErrorFallback, Section, SectionTitle, Spotlight, Stack, StaggerChildren, StatCard, StatsSection, Suspensed, Switch, TeamSection, TestimonialCard, TestimonialsSection, Textarea, ThemeColorUpdater, ThemeSwitchMinimal, Underlay, UpgradePrompt, VersionBanner, useConfirm, useControlledOpen, useCopyToClipboard, useDebounce, useIntersectionObserver, useLocalStorage, useMediaQuery, useMounted, useOlwibaUI, usePagination, useScrolledPast, useUIMode };
+export { AppContent, AppGrid, AppGridCell, AppScreen, AppShell, AuthSection, Badge, Button, Card, CarouselSection, ChangelogCard, ChangelogList, Checkbox, ConfirmDialog, ContactSection, ContextMenu, CountUp, CtaSection, DevBanner, Dock, EmptyState, ErrorPage, FadeIn, FaqSection, FeatureCard, FeaturesSection, Footer, FullPageSpinner, GlassCard, Grid, GridItem, HeroSection, ImageCard, Input, LogoStrip, ModeSwitchMinimal, Navbar, NewsletterSection, OlwibaUIProvider, Overlay, PageHeader, PageTransition, PhoneFrame, PostCard, PostList, PricingCard, PricingSection, PublicPageFrame, RegisterHotkeys, RootErrorFallback, Section, SectionTitle, Spotlight, Stack, StaggerChildren, StatCard, StatsSection, Suspensed, Switch, TeamSection, TestimonialCard, TestimonialsSection, Textarea, ThemeColorUpdater, ThemeSwitchMinimal, Underlay, UpgradePrompt, VersionBanner, useConfirm, useControlledOpen, useCopyToClipboard, useDebounce, useIntersectionObserver, useLocalStorage, useMediaQuery, useMounted, useOlwibaUI, usePagination, useScrolledPast, useUIMode };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map