@olwiba/ui 0.2.2 → 0.2.4

package/dist/index.js

@@ -1,6 +1,6 @@
 import { cn } from './chunk-AMWLSHD6.js';
 export { MdxContent, cn } from './chunk-AMWLSHD6.js';
-import * as React32 from 'react';
+import * as React33 from 'react';
 import { useRef, useEffect, useState } from 'react';
 import { Button as Button$1, Card as Card$1, Input as Input$1, Textarea as Textarea$1, Checkbox as Checkbox$1, Switch as Switch$1, useIsMobile, UIVariantProvider, Badge as Badge$1, cn as cn$1, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, Avatar, AvatarImage, AvatarFallback, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, Dialog, DialogTrigger, Progress, useUIVariant, Separator, Accordion, AccordionItem, AccordionTrigger, AccordionContent, Label, Sheet, SheetTrigger, SheetContent, StatusIndicator, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandSeparator, CommandGroup, CommandItem, TooltipProvider, Tooltip, TooltipTrigger, TooltipContent, ContextMenu as ContextMenu$1, ContextMenuTrigger, ContextMenuContent, AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, CommandShortcut, Popover, PopoverTrigger, PopoverContent, Spinner, SidebarProvider, SidebarInset, CardHeader, CardTitle, CardDescription, CardContent, InputOTP, InputOTPGroup, InputOTPSlot, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose, ContextMenuSeparator, ContextMenuLabel, ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent, ContextMenuItem, ContextMenuShortcut, Sidebar, SidebarHeader, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarFooter, SidebarTrigger, useSidebar, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup } from '@olwiba/cn';
 export { CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Enchanted } from '@olwiba/cn';
@@ -13,7 +13,7 @@ import { CSS } from '@dnd-kit/utilities';
 import { PieChart, Pie, Cell, BarChart, XAxis, YAxis, Bar, AreaChart, Area, LineChart, Line, ResponsiveContainer, Tooltip as Tooltip$1, CartesianGrid } from 'recharts';
 import { toast } from 'sonner';
 
-var OlwibaUIContext = React32.createContext({
+var OlwibaUIContext = React33.createContext({
   isMobile: false,
   mode: "default",
   setMode: () => {
@@ -22,17 +22,17 @@ var OlwibaUIContext = React32.createContext({
 function OlwibaUIProvider({ children, isMobile: isMobileProp, mode: initialMode = "default" }) {
   const detectedMobile = useIsMobile();
   const isMobile = isMobileProp ?? detectedMobile;
-  const [mode, setMode] = React32.useState(initialMode);
+  const [mode, setMode] = React33.useState(initialMode);
   const variant = mode !== "default" ? mode : void 0;
   return /* @__PURE__ */ jsx(OlwibaUIContext.Provider, { value: { isMobile, mode, setMode }, children: /* @__PURE__ */ jsx(UIVariantProvider, { mode: variant, children }) });
 }
 function useOlwibaUI() {
-  return React32.useContext(OlwibaUIContext);
+  return React33.useContext(OlwibaUIContext);
 }
 function useUIMode() {
-  return React32.useContext(OlwibaUIContext).mode;
+  return React33.useContext(OlwibaUIContext).mode;
 }
-var Button = React32.forwardRef(
+var Button = React33.forwardRef(
   ({ mode, ...props }, ref) => {
     const ctxMode = useUIMode();
     const resolvedMode = mode ?? (ctxMode !== "default" ? ctxMode : void 0);
@@ -40,7 +40,7 @@ var Button = React32.forwardRef(
   }
 );
 Button.displayName = "Button";
-var Card = React32.forwardRef(
+var Card = React33.forwardRef(
   ({ mode, ...props }, ref) => {
     const ctxMode = useUIMode();
     const resolvedMode = mode ?? (ctxMode !== "default" ? ctxMode : void 0);
@@ -51,7 +51,7 @@ Card.displayName = "Card";
 function Badge(props) {
   return /* @__PURE__ */ jsx(Badge$1, { ...props });
 }
-var Input = React32.forwardRef(
+var Input = React33.forwardRef(
   ({ mode, ...props }, ref) => {
     const ctxMode = useUIMode();
     const resolvedMode = mode ?? (ctxMode !== "default" ? ctxMode : void 0);
@@ -59,7 +59,7 @@ var Input = React32.forwardRef(
   }
 );
 Input.displayName = "Input";
-var Textarea = React32.forwardRef(
+var Textarea = React33.forwardRef(
   ({ mode, ...props }, ref) => {
     const ctxMode = useUIMode();
     const resolvedMode = mode ?? (ctxMode !== "default" ? ctxMode : void 0);
@@ -67,13 +67,13 @@ var Textarea = React32.forwardRef(
   }
 );
 Textarea.displayName = "Textarea";
-var Checkbox = React32.forwardRef(({ mode, ...props }, ref) => {
+var Checkbox = React33.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 = React32.forwardRef(({ mode: _mode, ...props }, ref) => {
+var Switch = React33.forwardRef(({ mode: _mode, ...props }, ref) => {
   return /* @__PURE__ */ jsx(Switch$1, { ...props, ref });
 });
 Switch.displayName = "Switch";
@@ -530,7 +530,7 @@ function DefaultForm({
   const isForgotPassword = mode === "forgot-password";
   const isResetPassword = mode === "reset-password";
   const isVerify = mode === "verify";
-  const [code, setCode] = React32.useState("");
+  const [code, setCode] = React33.useState("");
   const hasPrefill = !!(defaultEmail || defaultPassword);
   const prefillStyle = (active) => active ? { animation: "auth-prefill 1.6s ease-out 0.35s 1 both" } : void 0;
   const copy = authCopy[mode];
@@ -690,10 +690,10 @@ function DataTable({
   emptyMessage = "No results.",
   className
 }) {
-  const [sorting, setSorting] = React32.useState([]);
-  const [rowSelection, setRowSelection] = React32.useState({});
-  const [globalFilter, setGlobalFilter] = React32.useState("");
-  const allColumns = React32.useMemo(
+  const [sorting, setSorting] = React33.useState([]);
+  const [rowSelection, setRowSelection] = React33.useState({});
+  const [globalFilter, setGlobalFilter] = React33.useState("");
+  const allColumns = React33.useMemo(
     () => selectable ? [selectColumn, ...columns] : columns,
     [selectable, columns]
   );
@@ -715,7 +715,7 @@ function DataTable({
     initialState: pageSize > 0 ? { pagination: { pageSize } } : void 0,
     enableRowSelection: selectable
   });
-  React32.useEffect(() => {
+  React33.useEffect(() => {
     if (!onSelectionChange) return;
     onSelectionChange(table.getSelectedRowModel().rows.map((r) => r.original));
   }, [rowSelection]);
@@ -795,8 +795,8 @@ function DataTable({
   ] });
 }
 function InviteDialog({ roles, onInvite, onClose }) {
-  const [email, setEmail] = React32.useState("");
-  const [role, setRole] = React32.useState(roles[roles.length - 1] ?? roles[0]);
+  const [email, setEmail] = React33.useState("");
+  const [role, setRole] = React33.useState(roles[roles.length - 1] ?? roles[0]);
   return /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs(
     "form",
     {
@@ -840,8 +840,8 @@ function TeamMembersPanel({
   title = "Team members",
   description = "Manage who has access to this workspace."
 }) {
-  const [inviteOpen, setInviteOpen] = React32.useState(false);
-  const columns = React32.useMemo(() => [
+  const [inviteOpen, setInviteOpen] = React33.useState(false);
+  const columns = React33.useMemo(() => [
     {
       accessorKey: "name",
       header: "Name",
@@ -910,7 +910,7 @@ function BillingPanel({
   onUpdatePaymentMethod,
   className
 }) {
-  const invoiceColumns = React32.useMemo(() => [
+  const invoiceColumns = React33.useMemo(() => [
     { accessorKey: "date", header: "Date", enableSorting: false },
     { accessorKey: "amount", header: "Amount", enableSorting: false },
     {
@@ -989,9 +989,9 @@ function OnboardingWizard({
   completeLabel = "Finish",
   className
 }) {
-  const [internalStep, setInternalStep] = React32.useState(0);
-  const [error, setError] = React32.useState(null);
-  const [pending, setPending] = React32.useState(false);
+  const [internalStep, setInternalStep] = React33.useState(0);
+  const [error, setError] = React33.useState(null);
+  const [pending, setPending] = React33.useState(false);
   const index = stepProp ?? internalStep;
   const current = steps[index];
   const isLast = index === steps.length - 1;
@@ -1325,9 +1325,9 @@ function FadeIn({
   style,
   ...props
 }) {
-  const ref = React32.useRef(null);
-  const [visible, setVisible] = React32.useState(false);
-  React32.useEffect(() => {
+  const ref = React33.useRef(null);
+  const [visible, setVisible] = React33.useState(false);
+  React33.useEffect(() => {
     const el = ref.current;
     if (!el) return;
     const observer = new IntersectionObserver(
@@ -1522,16 +1522,16 @@ function Carousel({
   className
 }) {
   const mode = useUIVariant();
-  const trackRef = React32.useRef(null);
-  const [canPrev, setCanPrev] = React32.useState(false);
-  const [canNext, setCanNext] = React32.useState(true);
-  const updateScrollState = React32.useCallback(() => {
+  const trackRef = React33.useRef(null);
+  const [canPrev, setCanPrev] = React33.useState(false);
+  const [canNext, setCanNext] = React33.useState(true);
+  const updateScrollState = React33.useCallback(() => {
     const track = trackRef.current;
     if (!track) return;
     setCanPrev(track.scrollLeft > 8);
     setCanNext(track.scrollLeft < track.scrollWidth - track.clientWidth - 8);
   }, []);
-  React32.useEffect(() => {
+  React33.useEffect(() => {
     const track = trackRef.current;
     if (!track) return;
     updateScrollState();
@@ -1588,7 +1588,7 @@ function Carousel({
         role: "region",
         "aria-label": ariaLabel,
         className: "flex snap-x snap-mandatory gap-6 overflow-x-auto pb-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
-        children: React32.Children.map(
+        children: React33.Children.map(
           children,
           (child) => child == null ? null : /* @__PURE__ */ jsx("div", { "data-carousel-item": true, className: cn$1("shrink-0 snap-start", itemClassName), children: child })
         )
@@ -1613,9 +1613,9 @@ function StaggerChildren({
   className,
   ...props
 }) {
-  const ref = React32.useRef(null);
-  const [visible, setVisible] = React32.useState(false);
-  React32.useEffect(() => {
+  const ref = React33.useRef(null);
+  const [visible, setVisible] = React33.useState(false);
+  React33.useEffect(() => {
     const el = ref.current;
     if (!el) return;
     const observer = new IntersectionObserver(
@@ -1633,7 +1633,7 @@ function StaggerChildren({
     return () => observer.disconnect();
   }, [once]);
   const [tx, ty] = translateMap2[direction];
-  return /* @__PURE__ */ jsx("div", { ref, className: cn$1(className), ...props, children: React32.Children.map(children, (child, i) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { ref, className: cn$1(className), ...props, children: React33.Children.map(children, (child, i) => /* @__PURE__ */ jsx(
     "div",
     {
       className: "h-full",
@@ -1709,11 +1709,56 @@ function GroupedFeaturesSection({
     ] }, group.label)) })
   ] }) }) });
 }
+function TimelineGroup({
+  steps,
+  startNumber,
+  fadeIn
+}) {
+  const fadePx = 48;
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    fadeIn && /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: "absolute left-[19px] w-1 bg-gradient-to-b from-transparent to-primary",
+        style: { top: 0, height: fadePx }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: "absolute left-[19px] w-1 bg-primary",
+        style: {
+          top: fadeIn ? fadePx : 20,
+          height: fadeIn ? `calc(100% - ${fadePx}px)` : "calc(100% - 20px)"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: "absolute left-[19px] w-1 bg-gradient-to-b from-primary to-transparent",
+        style: { top: "100%", height: fadePx }
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "space-y-10", style: fadeIn ? { paddingTop: fadePx } : void 0, children: steps.map((step, i) => /* @__PURE__ */ jsx(FadeIn, { direction: "up", delay: i * 80, children: /* @__PURE__ */ jsxs("div", { className: "relative flex gap-5", children: [
+      /* @__PURE__ */ jsx("div", { className: "relative z-10 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border-2 border-primary bg-primary text-lg font-bold text-primary-foreground", children: step.emoji ?? startNumber + i }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 pt-1 pb-2", children: [
+        /* @__PURE__ */ jsx("h3", { className: "mb-2 text-xl font-semibold text-foreground", children: step.title }),
+        /* @__PURE__ */ jsx("div", { className: "text-sm leading-relaxed text-muted-foreground", children: step.description })
+      ] })
+    ] }) }, step.title)) })
+  ] });
+}
 function StepsSection({
   badge = "How it works",
   title = "From zero to shipped",
   description,
-  steps
+  steps,
+  variant = "default",
+  groups
 }) {
   const mode = useUIVariant();
   const sectionClasses = cn$1(
@@ -1722,11 +1767,27 @@ function StepsSection({
     mode === "playful" && "rounded-2xl border-primary/25 border",
     !mode && "rounded-2xl border"
   );
+  if (variant === "timeline") {
+    const resolvedGroups = groups ?? (steps ? [{ steps }] : []);
+    let nextNumber = 1;
+    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, { badge, title, description, className: "text-left [&>p]:mx-0" }),
+      /* @__PURE__ */ jsx("div", { className: "mt-12", children: resolvedGroups.map((group, groupIndex) => {
+        const startNumber = nextNumber;
+        nextNumber += group.steps.length;
+        return /* @__PURE__ */ jsxs(React33.Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: cn$1(groupIndex > 0 && "mt-10"), children: /* @__PURE__ */ jsx(TimelineGroup, { steps: group.steps, startNumber, fadeIn: groupIndex > 0 }) }),
+          group.after && /* @__PURE__ */ jsx("div", { className: "mt-16", children: group.after })
+        ] }, groupIndex);
+      }) })
+    ] }) }) });
+  }
+  const resolvedSteps = steps ?? [];
   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, { badge, title, description }),
     /* @__PURE__ */ jsxs("div", { className: "mt-12", children: [
-      /* @__PURE__ */ jsx("div", { className: "hidden sm:grid", style: { gridTemplateColumns: `repeat(${steps.length}, 1fr)` }, children: steps.map((step, i) => /* @__PURE__ */ jsx(FadeIn, { direction: "up", delay: i * 80, children: /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-center text-center px-4", children: [
-        i < steps.length - 1 && /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: "hidden sm:grid", style: { gridTemplateColumns: `repeat(${resolvedSteps.length}, 1fr)` }, children: resolvedSteps.map((step, i) => /* @__PURE__ */ jsx(FadeIn, { direction: "up", delay: i * 80, children: /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-center text-center px-4", children: [
+        i < resolvedSteps.length - 1 && /* @__PURE__ */ jsx(
           "div",
           {
             "aria-hidden": "true",
@@ -1735,10 +1796,10 @@ function StepsSection({
         ),
         /* @__PURE__ */ jsx("div", { className: "relative z-10 mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-muted text-2xl", children: step.emoji ?? /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-primary", children: i + 1 }) }),
         /* @__PURE__ */ jsx("h3", { className: "font-semibold text-foreground", children: step.title }),
-        /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm leading-relaxed text-muted-foreground", children: step.description })
+        /* @__PURE__ */ jsx("div", { className: "mt-2 text-sm leading-relaxed text-muted-foreground", children: step.description })
       ] }) }, step.title)) }),
-      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0 sm:hidden", children: steps.map((step, i) => /* @__PURE__ */ jsx(FadeIn, { direction: "up", delay: i * 80, children: /* @__PURE__ */ jsxs("div", { className: "relative flex gap-4 pb-8 last:pb-0", children: [
-        i < steps.length - 1 && /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0 sm:hidden", children: resolvedSteps.map((step, i) => /* @__PURE__ */ jsx(FadeIn, { direction: "up", delay: i * 80, children: /* @__PURE__ */ jsxs("div", { className: "relative flex gap-4 pb-8 last:pb-0", children: [
+        i < resolvedSteps.length - 1 && /* @__PURE__ */ jsx(
           "div",
           {
             "aria-hidden": "true",
@@ -1748,7 +1809,7 @@ function StepsSection({
         /* @__PURE__ */ jsx("div", { className: "relative z-10 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-muted text-2xl", children: step.emoji ?? /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-primary", children: i + 1 }) }),
         /* @__PURE__ */ jsxs("div", { className: "pt-3", children: [
           /* @__PURE__ */ jsx("h3", { className: "font-semibold text-foreground", children: step.title }),
-          /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-sm leading-relaxed text-muted-foreground", children: step.description })
+          /* @__PURE__ */ jsx("div", { className: "mt-1.5 text-sm leading-relaxed text-muted-foreground", children: step.description })
         ] })
       ] }) }, step.title)) })
     ] })
@@ -1884,9 +1945,9 @@ function FeatureMarqueeSection({
   ] });
 }
 function useIntersectionObserver(options) {
-  const ref = React32.useRef(null);
-  const [isIntersecting, setIsIntersecting] = React32.useState(false);
-  React32.useEffect(() => {
+  const ref = React33.useRef(null);
+  const [isIntersecting, setIsIntersecting] = React33.useState(false);
+  React33.useEffect(() => {
     const el = ref.current;
     if (!el) return;
     const observer = new IntersectionObserver(([entry]) => {
@@ -1908,8 +1969,8 @@ function ShowcaseCta({
   sectionClasses
 }) {
   const [ref, intersecting] = useIntersectionObserver({ threshold: 0.15 });
-  const [visible, setVisible] = React32.useState(false);
-  React32.useEffect(() => {
+  const [visible, setVisible] = React33.useState(false);
+  React33.useEffect(() => {
     if (intersecting) setVisible(true);
   }, [intersecting]);
   return /* @__PURE__ */ jsxs(
@@ -2086,8 +2147,8 @@ function CountdownTimer({
   className,
   compact = false
 }) {
-  const [timeLeft, setTimeLeft] = React32.useState(() => getTimeLeft(deadline));
-  React32.useEffect(() => {
+  const [timeLeft, setTimeLeft] = React33.useState(() => getTimeLeft(deadline));
+  React33.useEffect(() => {
     setTimeLeft(getTimeLeft(deadline));
     const id = setInterval(() => setTimeLeft(getTimeLeft(deadline)), 1e3);
     return () => clearInterval(id);
@@ -2113,7 +2174,7 @@ function CountdownTimer({
   ];
   return /* @__PURE__ */ jsxs("div", { className: cn$1("flex items-center justify-center gap-2 text-sm", className), children: [
     /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: label }),
-    /* @__PURE__ */ jsx("span", { className: "flex items-center gap-1 font-mono font-semibold tabular-nums", children: units.map(({ value, unit }, i) => /* @__PURE__ */ jsxs(React32.Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "flex items-center gap-1 font-mono font-semibold tabular-nums", children: units.map(({ value, unit }, i) => /* @__PURE__ */ jsxs(React33.Fragment, { children: [
       /* @__PURE__ */ jsxs("span", { children: [
         String(value).padStart(2, "0"),
         /* @__PURE__ */ jsx("span", { className: "font-normal text-muted-foreground", children: unit })
@@ -2134,9 +2195,11 @@ function PricingSection({
   footnote,
   mode = "subscription",
   foundingDeadline,
+  currency = "$",
+  highlightedBadgeLabel = "Founding member",
   renderPlanFooter
 }) {
-  const [annual, setAnnual] = React32.useState(false);
+  const [annual, setAnnual] = React33.useState(false);
   const isOneTime = mode === "one-time";
   const uiMode = useUIVariant();
   const sectionClasses = cn$1(
@@ -2184,9 +2247,9 @@ function PricingSection({
     ] }),
     /* @__PURE__ */ jsx(StaggerChildren, { className: "mt-10 grid gap-4 lg:grid-cols-3", children: plans.map((plan) => {
       const rawPrice = isOneTime ? plan.monthly : annual ? plan.annual : plan.monthly;
-      const price = plan.priceDisplay ?? `$${rawPrice}`;
+      const price = plan.priceDisplay ?? `${currency}${rawPrice}`;
       const period = plan.periodDisplay ?? (isOneTime ? "one-time" : rawPrice > 0 ? "/mo" : "");
-      const badge2 = plan.highlighted && foundingDeadline ? /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-full border bg-secondary px-2.5 py-0.5 text-xs font-semibold text-secondary-foreground", children: /* @__PURE__ */ jsx(CountdownTimer, { deadline: foundingDeadline, compact: true }) }) : plan.highlighted ? "Founding member" : void 0;
+      const badge2 = plan.highlighted && foundingDeadline ? /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-full border bg-secondary px-2.5 py-0.5 text-xs font-semibold text-secondary-foreground", children: /* @__PURE__ */ jsx(CountdownTimer, { deadline: foundingDeadline, compact: true }) }) : plan.highlighted && highlightedBadgeLabel ? highlightedBadgeLabel : void 0;
       return /* @__PURE__ */ jsx(
         PricingCard,
         {
@@ -2405,10 +2468,10 @@ function CountUp({
   className,
   ...props
 }) {
-  const ref = React32.useRef(null);
-  const [value, setValue] = React32.useState(from);
-  const hasStarted = React32.useRef(false);
-  React32.useEffect(() => {
+  const ref = React33.useRef(null);
+  const [value, setValue] = React33.useState(from);
+  const hasStarted = React33.useRef(false);
+  React33.useEffect(() => {
     const el = ref.current;
     if (!el) return;
     const observer = new IntersectionObserver(
@@ -2501,8 +2564,8 @@ function NewsletterSection({
   successDescription = defaults.successDescription,
   onSubscribe
 } = {}) {
-  const [email, setEmail] = React32.useState("");
-  const [submitted, setSubmitted] = React32.useState(false);
+  const [email, setEmail] = React33.useState("");
+  const [submitted, setSubmitted] = React33.useState(false);
   const mode = useUIVariant();
   const sectionClasses = cn$1(
     "overflow-hidden bg-card",
@@ -2593,7 +2656,7 @@ function ContactSection({
   sendAnotherLabel = defaults2.sendAnotherLabel,
   onSubmit
 } = {}) {
-  const [submitted, setSubmitted] = React32.useState(false);
+  const [submitted, setSubmitted] = React33.useState(false);
   const mode = useUIVariant();
   const sectionClasses = cn$1(
     "overflow-hidden bg-card",
@@ -2891,7 +2954,7 @@ function Navbar({
   controls,
   renderLink = defaultRenderLink7
 }) {
-  const [open, setOpen] = React32.useState(false);
+  const [open, setOpen] = React33.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: [
@@ -2908,7 +2971,7 @@ function Navbar({
       children: link.label
     }) }, link.label)) }),
     hasRightContent && /* @__PURE__ */ jsxs("div", { className: "hidden items-center justify-end gap-2 md:flex", children: [
-      controls?.map((control, i) => /* @__PURE__ */ jsx(React32.Fragment, { children: control }, i)),
+      controls?.map((control, i) => /* @__PURE__ */ jsx(React33.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,
@@ -2932,7 +2995,7 @@ function Navbar({
             /* @__PURE__ */ jsx("span", { children: brand.name })
           ] })
         }) }) }),
-        controls?.length ? /* @__PURE__ */ jsx("div", { className: "mb-4 flex w-full items-center justify-between gap-1", children: controls.map((control, i) => /* @__PURE__ */ jsx(React32.Fragment, { children: control }, i)) }) : null,
+        controls?.length ? /* @__PURE__ */ jsx("div", { className: "mb-4 flex w-full items-center justify-between gap-1", children: controls.map((control, i) => /* @__PURE__ */ jsx(React33.Fragment, { children: control }, i)) }) : null,
         /* @__PURE__ */ jsx(Separator, {}),
         /* @__PURE__ */ jsx("nav", { className: "mt-4 flex flex-col gap-1", children: navLinks.map((link) => /* @__PURE__ */ jsx("span", { onClick: () => setOpen(false), children: renderLink({
           href: link.href,
@@ -3081,7 +3144,7 @@ function LogoStrip({
   ] });
 }
 function GridUnderlay({ variant, size = 24, className, ...props }) {
-  const id = React32.useId();
+  const id = React33.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 })
@@ -3109,9 +3172,9 @@ function GlowUnderlay({
   style,
   ...props
 }) {
-  const [pos, setPos] = React32.useState({ x: "50%", y: "50%" });
-  const containerRef = React32.useRef(null);
-  React32.useEffect(() => {
+  const [pos, setPos] = React33.useState({ x: "50%", y: "50%" });
+  const containerRef = React33.useRef(null);
+  React33.useEffect(() => {
     if (!followCursor) return;
     const handleMouseMove = (e) => {
       const el = containerRef.current;
@@ -3250,8 +3313,8 @@ function PageTransition({
   style,
   ...props
 }) {
-  const [mounted, setMounted] = React32.useState(false);
-  React32.useEffect(() => {
+  const [mounted, setMounted] = React33.useState(false);
+  React33.useEffect(() => {
     const id = requestAnimationFrame(() => setMounted(true));
     return () => cancelAnimationFrame(id);
   }, []);
@@ -3326,7 +3389,7 @@ function Sortable({
     if (oldIndex === -1 || newIndex === -1) return;
     onReorder(arrayMove(items, oldIndex, newIndex));
   };
-  const childArray = React32.Children.toArray(children);
+  const childArray = React33.Children.toArray(children);
   return /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsx(SortableContext, { items, strategy: strategies[direction], children: /* @__PURE__ */ jsx("div", { className: cn$1(containerClasses[direction], className), children: childArray.map(
     (child, i) => items[i] === void 0 ? null : /* @__PURE__ */ jsx(SortableItem, { id: items[i], disabled, className: itemClassName, children: child }, items[i])
   ) }) }) });
@@ -3338,8 +3401,8 @@ function Spotlight({
   triggerClassName,
   shortcut = "\u2318K"
 }) {
-  const [open, setOpen] = React32.useState(false);
-  React32.useEffect(() => {
+  const [open, setOpen] = React33.useState(false);
+  React33.useEffect(() => {
     const down = (e) => {
       if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
         e.preventDefault();
@@ -3369,7 +3432,7 @@ function Spotlight({
       /* @__PURE__ */ jsx(CommandInput, { placeholder }),
       /* @__PURE__ */ jsxs(CommandList, { children: [
         /* @__PURE__ */ jsx(CommandEmpty, { children: "No results found." }),
-        groups.map((group, i) => /* @__PURE__ */ jsxs(React32.Fragment, { children: [
+        groups.map((group, i) => /* @__PURE__ */ jsxs(React33.Fragment, { children: [
           i > 0 && /* @__PURE__ */ jsx(CommandSeparator, {}),
           /* @__PURE__ */ jsx(CommandGroup, { heading: group.heading, children: group.items.map((item) => /* @__PURE__ */ jsxs(
             CommandItem,
@@ -3394,8 +3457,8 @@ function Spotlight({
 var BASE = 40;
 var MAGNIFY_RADIUS = 80;
 function Dock({ items, iconSize = BASE, magnification = 1.7, className, ...props }) {
-  const [mouseX, setMouseX] = React32.useState(null);
-  const containerRef = React32.useRef(null);
+  const [mouseX, setMouseX] = React33.useState(null);
+  const containerRef = React33.useRef(null);
   function getScale(index) {
     if (mouseX === null || !containerRef.current) return 1;
     const container = containerRef.current;
@@ -3494,7 +3557,7 @@ function ConfirmDialog({ isOpen, options, handleConfirm, handleCancel, destructi
   ] }) });
 }
 function RegisterHotkeys({ hotkeys }) {
-  React32.useEffect(() => {
+  React33.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;
@@ -3511,10 +3574,10 @@ function RegisterHotkeys({ hotkeys }) {
   return null;
 }
 function useControlledOpen(defaultOpen = false) {
-  const [isOpen, setIsOpen] = React32.useState(defaultOpen);
-  const open = React32.useCallback(() => setIsOpen(true), []);
-  const close = React32.useCallback(() => setIsOpen(false), []);
-  const toggle = React32.useCallback(() => setIsOpen((prev) => !prev), []);
+  const [isOpen, setIsOpen] = React33.useState(defaultOpen);
+  const open = React33.useCallback(() => setIsOpen(true), []);
+  const close = React33.useCallback(() => setIsOpen(false), []);
+  const toggle = React33.useCallback(() => setIsOpen((prev) => !prev), []);
   return { isOpen, open, close, toggle, setIsOpen };
 }
 function CommandMenu({
@@ -3527,7 +3590,7 @@ function CommandMenu({
 }) {
   const internal = useControlledOpen(false);
   const isOpen = openProp ?? internal.isOpen;
-  const setOpen = React32.useCallback(
+  const setOpen = React33.useCallback(
     (next) => {
       if (openProp === void 0) internal.setIsOpen(next);
       onOpenChange?.(next);
@@ -3552,7 +3615,7 @@ function CommandMenu({
       /* @__PURE__ */ jsx(CommandInput, { placeholder }),
       /* @__PURE__ */ jsxs(CommandList, { children: [
         /* @__PURE__ */ jsx(CommandEmpty, { children: emptyMessage }),
-        groups.map((group, i) => /* @__PURE__ */ jsxs(React32.Fragment, { children: [
+        groups.map((group, i) => /* @__PURE__ */ jsxs(React33.Fragment, { children: [
           i > 0 && /* @__PURE__ */ jsx(CommandSeparator, {}),
           /* @__PURE__ */ jsx(CommandGroup, { heading: group.heading, children: group.items.map((item) => /* @__PURE__ */ jsxs(
             CommandItem,
@@ -3744,20 +3807,20 @@ function FileUpload({
   hint,
   className
 }) {
-  const [internalFiles, setInternalFiles] = React32.useState(defaultFiles ?? []);
-  const [isDragging, setIsDragging] = React32.useState(false);
-  const [validationError, setValidationError] = React32.useState(null);
-  const inputRef = React32.useRef(null);
-  const dragDepth = React32.useRef(0);
+  const [internalFiles, setInternalFiles] = React33.useState(defaultFiles ?? []);
+  const [isDragging, setIsDragging] = React33.useState(false);
+  const [validationError, setValidationError] = React33.useState(null);
+  const inputRef = React33.useRef(null);
+  const dragDepth = React33.useRef(0);
   const files = filesProp ?? internalFiles;
-  const setFiles = React32.useCallback(
+  const setFiles = React33.useCallback(
     (next) => {
       if (!filesProp) setInternalFiles(next);
       onFilesChange?.(next);
     },
     [filesProp, onFilesChange]
   );
-  const acceptList = React32.useMemo(
+  const acceptList = React33.useMemo(
     () => accept?.split(",").map((a) => a.trim().toLowerCase()).filter(Boolean) ?? [],
     [accept]
   );
@@ -4424,7 +4487,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(React32.Fragment, { children: [
+      return /* @__PURE__ */ jsxs(React33.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,
@@ -4460,7 +4523,7 @@ function PageHeader({
   ] });
 }
 function Suspensed({ children, fallback }) {
-  return /* @__PURE__ */ jsx(React32.Suspense, { fallback: fallback ?? /* @__PURE__ */ jsx(Spinner, {}), children });
+  return /* @__PURE__ */ jsx(React33.Suspense, { fallback: fallback ?? /* @__PURE__ */ jsx(Spinner, {}), children });
 }
 function getInitialTheme() {
   if (typeof document === "undefined") return "dark";
@@ -4468,7 +4531,7 @@ function getInitialTheme() {
   return stored ?? (document.documentElement.classList.contains("dark") ? "dark" : "light");
 }
 function ThemeSwitchMinimal() {
-  const [theme, setThemeState] = React32.useState(getInitialTheme);
+  const [theme, setThemeState] = React33.useState(getInitialTheme);
   const toggle = () => {
     const next = theme === "dark" ? "light" : "dark";
     setThemeState(next);
@@ -4594,9 +4657,9 @@ function getInitialColorName() {
   return localStorage.getItem(STORAGE_KEY) ?? "emerald";
 }
 function BrandColorSwitchMinimal() {
-  const [active, setActive] = React32.useState(getInitialColorName);
-  const [open, setOpen] = React32.useState(false);
-  React32.useEffect(() => {
+  const [active, setActive] = React33.useState(getInitialColorName);
+  const [open, setOpen] = React33.useState(false);
+  React33.useEffect(() => {
     const saved = localStorage.getItem(STORAGE_KEY) ?? "emerald";
     const color = BRAND_COLORS.find((c) => c.name === saved);
     if (color) applyColor(color);
@@ -4657,7 +4720,7 @@ function BrandColorSwitchMinimal() {
   ] });
 }
 function ThemeColorUpdater({ colorTheme }) {
-  React32.useEffect(() => {
+  React33.useEffect(() => {
     if (colorTheme) {
       document.documentElement.setAttribute("data-theme", colorTheme);
     } else {
@@ -4667,7 +4730,7 @@ function ThemeColorUpdater({ colorTheme }) {
   return null;
 }
 function VersionBanner({ version, message, className, onDismiss }) {
-  const [dismissed, setDismissed] = React32.useState(false);
+  const [dismissed, setDismissed] = React33.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: [
@@ -4924,29 +4987,29 @@ function useMounted() {
   return mounted;
 }
 function useConfirm() {
-  const [isOpen, setIsOpen] = React32.useState(false);
-  const [options, setOptions] = React32.useState({});
-  const resolveRef = React32.useRef(null);
-  const confirm = React32.useCallback((opts = {}) => {
+  const [isOpen, setIsOpen] = React33.useState(false);
+  const [options, setOptions] = React33.useState({});
+  const resolveRef = React33.useRef(null);
+  const confirm = React33.useCallback((opts = {}) => {
     setOptions(opts);
     setIsOpen(true);
     return new Promise((resolve) => {
       resolveRef.current = resolve;
     });
   }, []);
-  const handleConfirm = React32.useCallback(() => {
+  const handleConfirm = React33.useCallback(() => {
     resolveRef.current?.(true);
     setIsOpen(false);
   }, []);
-  const handleCancel = React32.useCallback(() => {
+  const handleCancel = React33.useCallback(() => {
     resolveRef.current?.(false);
     setIsOpen(false);
   }, []);
   return { confirm, isOpen, options, handleConfirm, handleCancel };
 }
 function useScrolledPast(threshold) {
-  const [scrolledPast, setScrolledPast] = React32.useState(false);
-  React32.useEffect(() => {
+  const [scrolledPast, setScrolledPast] = React33.useState(false);
+  React33.useEffect(() => {
     const handleScroll = () => {
       setScrolledPast(window.scrollY > threshold);
     };
@@ -4957,28 +5020,28 @@ function useScrolledPast(threshold) {
   return scrolledPast;
 }
 function useCopyToClipboard() {
-  const [copied, setCopied] = React32.useState(false);
-  const timeoutRef = React32.useRef(void 0);
-  const copy = React32.useCallback((text) => {
+  const [copied, setCopied] = React33.useState(false);
+  const timeoutRef = React33.useRef(void 0);
+  const copy = React33.useCallback((text) => {
     navigator.clipboard.writeText(text).then(() => {
       setCopied(true);
       clearTimeout(timeoutRef.current);
       timeoutRef.current = setTimeout(() => setCopied(false), 2e3);
     });
   }, []);
-  React32.useEffect(() => () => clearTimeout(timeoutRef.current), []);
+  React33.useEffect(() => () => clearTimeout(timeoutRef.current), []);
   return [copied, copy];
 }
 function useDebounce(value, delay) {
-  const [debounced, setDebounced] = React32.useState(value);
-  React32.useEffect(() => {
+  const [debounced, setDebounced] = React33.useState(value);
+  React33.useEffect(() => {
     const timer = setTimeout(() => setDebounced(value), delay);
     return () => clearTimeout(timer);
   }, [value, delay]);
   return debounced;
 }
 function useLocalStorage(key, initialValue) {
-  const [storedValue, setStoredValue] = React32.useState(() => {
+  const [storedValue, setStoredValue] = React33.useState(() => {
     if (typeof window === "undefined") return initialValue;
     try {
       const item = window.localStorage.getItem(key);
@@ -4987,7 +5050,7 @@ function useLocalStorage(key, initialValue) {
       return initialValue;
     }
   });
-  const setValue = React32.useCallback(
+  const setValue = React33.useCallback(
     (value) => {
       try {
         setStoredValue(value);
@@ -5002,11 +5065,11 @@ function useLocalStorage(key, initialValue) {
   return [storedValue, setValue];
 }
 function useMediaQuery(query) {
-  const [matches, setMatches] = React32.useState(() => {
+  const [matches, setMatches] = React33.useState(() => {
     if (typeof window === "undefined") return false;
     return window.matchMedia(query).matches;
   });
-  React32.useEffect(() => {
+  React33.useEffect(() => {
     if (typeof window === "undefined") return;
     const mql = window.matchMedia(query);
     setMatches(mql.matches);
@@ -5017,15 +5080,15 @@ function useMediaQuery(query) {
   return matches;
 }
 function usePagination(total, pageSize) {
-  const [page, setPage] = React32.useState(1);
+  const [page, setPage] = React33.useState(1);
   const totalPages = Math.max(1, Math.ceil(total / pageSize));
   const offset = (page - 1) * pageSize;
-  const goTo = React32.useCallback(
+  const goTo = React33.useCallback(
     (p) => setPage(Math.min(Math.max(1, p), totalPages)),
     [totalPages]
   );
-  const next = React32.useCallback(() => goTo(page + 1), [page, goTo]);
-  const prev = React32.useCallback(() => goTo(page - 1), [page, goTo]);
+  const next = React33.useCallback(() => goTo(page + 1), [page, goTo]);
+  const prev = React33.useCallback(() => goTo(page - 1), [page, goTo]);
   return { page, pageSize, totalPages, offset, hasPrev: page > 1, hasNext: page < totalPages, goTo, next, prev };
 }