@saasflare/ui 3.1.2 → 3.2.0

package/dist/index.mjs

@@ -1,17 +1,19 @@
 "use client";
-import { buttonVariants, Button } from './chunk-56PMDC5F.mjs';
-export { Button, buttonVariants } from './chunk-56PMDC5F.mjs';
-export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from './chunk-RW2S3KNB.mjs';
-import { useSaasflareMotion, springGentle, springBouncy, spring } from './chunk-EJHYM2HP.mjs';
-export { fadeIn, noMotion, scaleIn, slideDown, slideUp, spring, springBouncy, springGentle, springStiff, useSaasflareMotion } from './chunk-EJHYM2HP.mjs';
-import { useSaasflareProps, cn } from './chunk-WRONFPRI.mjs';
-export { SaasflareProvider, SaasflareScript, SaasflareShell, SmoothScrollProvider, cn, useAnimation, useReducedMotion, useSaasflareProps, useSaasflareTheme } from './chunk-WRONFPRI.mjs';
+import { Calendar } from './chunk-XNDTCYSO.mjs';
+import { buttonVariants, Button } from './chunk-2ONA6OMO.mjs';
+export { Button, buttonVariants } from './chunk-2ONA6OMO.mjs';
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from './chunk-5C65JNGY.mjs';
+import { useSaasflareMotion, springGentle, springBouncy, spring } from './chunk-OZAWULTM.mjs';
+export { fadeIn, noMotion, scaleIn, slideDown, slideUp, spring, springBouncy, springGentle, springStiff, useSaasflareMotion } from './chunk-OZAWULTM.mjs';
+import { CaretDownIcon, CheckIcon, CaretUpIcon, CircleIcon, CaretRightIcon, XIcon, CircleNotchIcon, XCircleIcon, WarningIcon, InfoIcon, CheckCircleIcon, DotsThreeIcon, MagnifyingGlassIcon, CaretLeftIcon, SidebarSimpleIcon, ArrowUpIcon, TiktokLogoIcon, DribbbleLogoIcon, GitlabLogoIcon, StripeLogoIcon, PaypalLogoIcon, RedditLogoIcon, SlackLogoIcon, MediumLogoIcon, LinkedinLogoIcon, FacebookLogoIcon, DiscordLogoIcon, XLogoIcon, MicrosoftOutlookLogoIcon, AppleLogoIcon, GithubLogoIcon, GoogleLogoIcon, SunIcon, MoonIcon, MonitorIcon } from './chunk-GI6VN7XU.mjs';
+export { ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, CaretDownIcon, CaretLeftIcon, CaretRightIcon, CaretUpIcon, CheckCircleIcon, CheckIcon, CircleIcon, CircleNotchIcon, DotsSixVerticalIcon, DotsThreeIcon, IconBase, InfoIcon, MagnifyingGlassIcon, MinusIcon, MonitorIcon, MoonIcon, PauseIcon, PlayIcon, QuotesIcon, SidebarSimpleIcon, SunIcon, WarningIcon, XCircleIcon, XIcon } from './chunk-GI6VN7XU.mjs';
+import { useSaasflareProps, cn } from './chunk-RMQBB72G.mjs';
+export { SaasflareProvider, SaasflareScript, SaasflareShell, SmoothScrollProvider, cn, useAnimation, useLocalStorage, useReducedMotion, useSaasflareProps, useSaasflareTheme } from './chunk-RMQBB72G.mjs';
 import * as React5 from 'react';
 import React5__default, { useState, useCallback, useMemo, useRef, useEffect, Suspense } from 'react';
 import { m, useMotionValue, useSpring, useTransform, AnimatePresence } from 'motion/react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
-import { ChevronDownIcon, CheckIcon, ChevronUpIcon, CircleIcon, ChevronRightIcon, XIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon, InfoIcon as InfoIcon$1, CircleCheckIcon, ChevronRight, MoreHorizontal, SearchIcon, ChevronLeftIcon, MoreHorizontalIcon, PanelLeftIcon, ArrowUpIcon, Sun, Moon } from 'lucide-react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { cva } from 'class-variance-authority';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
@@ -177,6 +179,164 @@ function usePagination(options) {
   }, [activePage, safeTotal, siblings, boundaries]);
   return { activePage, range, setPage, next, previous, first, last };
 }
+function useMergedRef(...refs) {
+  return useCallback(
+    (node) => {
+      for (const ref of refs) {
+        if (!ref) continue;
+        if (typeof ref === "function") {
+          ref(node);
+        } else {
+          ref.current = node;
+        }
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    refs
+  );
+}
+function useInterval(callback, delay, options = {}) {
+  const { autoInvoke = true } = options;
+  const [active, setActive] = useState(autoInvoke && delay !== null);
+  const intervalRef = useRef(null);
+  const callbackRef = useRef(callback);
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+  const stop = useCallback(() => {
+    if (intervalRef.current !== null) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+    setActive(false);
+  }, []);
+  const start = useCallback(() => {
+    if (delay === null) return;
+    if (intervalRef.current !== null) clearInterval(intervalRef.current);
+    intervalRef.current = setInterval(() => callbackRef.current(), delay);
+    setActive(true);
+  }, [delay]);
+  const toggle = useCallback(() => {
+    if (active) stop();
+    else start();
+  }, [active, start, stop]);
+  useEffect(() => {
+    if (autoInvoke && delay !== null) start();
+    return stop;
+  }, [autoInvoke, delay, start, stop]);
+  return { active, start, stop, toggle };
+}
+var FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "[tabindex]:not([tabindex='-1'])",
+  "[contenteditable='true']",
+  "audio[controls]",
+  "video[controls]",
+  "details > summary:first-of-type"
+].join(",");
+function getFocusable(container) {
+  return Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter(
+    (el) => !el.hasAttribute("disabled") && el.tabIndex !== -1 && isVisible(el)
+  );
+}
+function isVisible(el) {
+  return !!(el.offsetParent || el.getClientRects().length > 0);
+}
+function useFocusTrap(active) {
+  const containerRef = useRef(null);
+  const previousFocusRef = useRef(null);
+  const setRef = useCallback((node) => {
+    containerRef.current = node;
+  }, []);
+  useEffect(() => {
+    if (!active) return;
+    const container = containerRef.current;
+    if (!container) return;
+    previousFocusRef.current = document.activeElement ?? null;
+    const focusables = getFocusable(container);
+    const first = focusables[0];
+    if (first) first.focus();
+    else if (container.tabIndex >= 0) container.focus();
+    const handleKeyDown = (e) => {
+      if (e.key !== "Tab") return;
+      const items = getFocusable(container);
+      if (items.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      const firstItem = items[0];
+      const lastItem = items[items.length - 1];
+      const active2 = document.activeElement;
+      if (e.shiftKey) {
+        if (active2 === firstItem || !container.contains(active2)) {
+          e.preventDefault();
+          lastItem.focus();
+        }
+      } else {
+        if (active2 === lastItem || !container.contains(active2)) {
+          e.preventDefault();
+          firstItem.focus();
+        }
+      }
+    };
+    container.addEventListener("keydown", handleKeyDown);
+    return () => {
+      container.removeEventListener("keydown", handleKeyDown);
+      const previous = previousFocusRef.current;
+      if (previous && typeof previous.focus === "function") {
+        previous.focus();
+      }
+    };
+  }, [active]);
+  return setRef;
+}
+function useFileDialog(options = {}) {
+  const { accept, multiple = false, directory = false, capture, onChange } = options;
+  const [files, setFiles] = useState([]);
+  const inputRef = useRef(null);
+  const handleChange = useCallback(
+    (e) => {
+      const target = e.target;
+      const picked = Array.from(target.files ?? []);
+      setFiles(picked);
+      onChange?.(picked);
+      target.value = "";
+    },
+    [onChange]
+  );
+  const ensureInput = useCallback(() => {
+    if (typeof document === "undefined") {
+      throw new Error("useFileDialog: open() called outside the browser");
+    }
+    if (inputRef.current) return inputRef.current;
+    const input = document.createElement("input");
+    input.type = "file";
+    input.style.display = "none";
+    if (accept) input.accept = accept;
+    if (multiple) input.multiple = true;
+    if (capture) input.capture = capture;
+    if (directory) {
+      input.setAttribute("webkitdirectory", "");
+      input.setAttribute("directory", "");
+    }
+    input.addEventListener("change", handleChange);
+    document.body.appendChild(input);
+    inputRef.current = input;
+    return input;
+  }, [accept, multiple, directory, capture, handleChange]);
+  const open = useCallback(() => {
+    ensureInput().click();
+  }, [ensureInput]);
+  const reset = useCallback(() => {
+    setFiles([]);
+    if (inputRef.current) inputRef.current.value = "";
+  }, []);
+  return { files, open, reset };
+}
 function Card({ className, surface, radius, animated, ...props }) {
   const sf = useSaasflareProps({ surface, radius, animated });
   const motion = useSaasflareMotion(sf.animated, springGentle);
@@ -415,9 +575,10 @@ function AccordionItem({
   surface,
   radius,
   animated,
+  iconWeight,
   ...props
 }) {
-  const sf = useSaasflareProps({ surface, radius, animated });
+  const sf = useSaasflareProps({ surface, radius, animated, iconWeight });
   return /* @__PURE__ */ jsx(
     AccordionPrimitive.Item,
     {
@@ -454,7 +615,7 @@ function AccordionTrigger({
             className: "pointer-events-none shrink-0 translate-y-0.5 text-muted-foreground",
             animate: { rotate: 0 },
             transition: motion.transition,
-            children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4" })
+            children: /* @__PURE__ */ jsx(CaretDownIcon, { weight: sf.iconWeight, className: "size-4" })
           }
         )
       ]
@@ -688,9 +849,10 @@ function Checkbox({
   surface,
   radius,
   animated,
+  iconWeight,
   ...props
 }) {
-  const sf = useSaasflareProps({ surface, radius, animated });
+  const sf = useSaasflareProps({ surface, radius, animated, iconWeight });
   const motion = useSaasflareMotion(sf.animated, springBouncy);
   return /* @__PURE__ */ jsx(
     CheckboxPrimitive.Root,
@@ -717,7 +879,7 @@ function Checkbox({
               animate: { scale: 1, opacity: 1 },
               exit: motion.disabled ? void 0 : { scale: 0, opacity: 0 },
               transition: motion.transition,
-              children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5" })
+              children: /* @__PURE__ */ jsx(CheckIcon, { weight: sf.iconWeight, className: "size-3.5" })
             }
           )
         }
@@ -801,6 +963,100 @@ function Progress({
     }
   );
 }
+var SIZE_PX = {
+  sm: 48,
+  md: 64,
+  lg: 96,
+  xl: 128
+};
+function ProgressCircle({
+  value,
+  max = 100,
+  size = "md",
+  strokeWidth,
+  children,
+  className,
+  surface,
+  radius,
+  animated,
+  "aria-label": ariaLabel
+}) {
+  const sf = useSaasflareProps({ surface, radius, animated });
+  const motion = useSaasflareMotion(sf.animated, springGentle);
+  const px = SIZE_PX[size];
+  const sw = strokeWidth ?? Math.max(3, Math.round(px / 12));
+  const radiusPx = (px - sw) / 2;
+  const circumference = 2 * Math.PI * radiusPx;
+  const clamped = Math.min(Math.max(value, 0), max);
+  const percent = clamped / max * 100;
+  const dashOffset = circumference * (1 - clamped / max);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "progress-circle",
+      "data-size": size,
+      "data-surface": sf.surface,
+      "data-animated": String(sf.animated),
+      role: "progressbar",
+      "aria-valuenow": clamped,
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      "aria-label": ariaLabel ?? `${Math.round(percent)}%`,
+      className: cn("relative inline-flex items-center justify-center", className),
+      style: { width: px, height: px },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            width: px,
+            height: px,
+            viewBox: `0 0 ${px} ${px}`,
+            className: "-rotate-90",
+            children: [
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  "data-slot": "progress-circle-track",
+                  cx: px / 2,
+                  cy: px / 2,
+                  r: radiusPx,
+                  fill: "none",
+                  strokeWidth: sw,
+                  className: "stroke-primary/15"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                m.circle,
+                {
+                  "data-slot": "progress-circle-indicator",
+                  cx: px / 2,
+                  cy: px / 2,
+                  r: radiusPx,
+                  fill: "none",
+                  strokeWidth: sw,
+                  strokeLinecap: "round",
+                  strokeDasharray: circumference,
+                  className: "stroke-primary",
+                  initial: motion.disabled ? false : { strokeDashoffset: circumference },
+                  animate: { strokeDashoffset: dashOffset },
+                  transition: motion.transition
+                }
+              )
+            ]
+          }
+        ),
+        children !== void 0 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "progress-circle-label",
+            className: "pointer-events-none absolute inset-0 flex items-center justify-center",
+            children
+          }
+        )
+      ]
+    }
+  );
+}
 var LEGACY_VARIANT_MAP = {
   default: { variant: "solid", intent: "primary" },
   destructive: { variant: "solid", intent: "danger" },
@@ -1062,6 +1318,7 @@ function SelectTrigger({
   children,
   ...props
 }) {
+  const sf = useSaasflareProps();
   return /* @__PURE__ */ jsxs(
     SelectPrimitive.Trigger,
     {
@@ -1075,7 +1332,7 @@ function SelectTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 opacity-50" }) })
+        /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(CaretDownIcon, { weight: sf.iconWeight, className: "size-4 opacity-50" }) })
       ]
     }
   );
@@ -1087,9 +1344,10 @@ function SelectContent({
   surface,
   radius,
   animated,
+  iconWeight,
   ...props
 }) {
-  const sf = useSaasflareProps({ surface, radius, animated });
+  const sf = useSaasflareProps({ surface, radius, animated, iconWeight });
   const motion = useSaasflareMotion(sf.animated, springBouncy);
   return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx(
     SelectPrimitive.Content,
@@ -1149,6 +1407,7 @@ function SelectItem({
   children,
   ...props
 }) {
+  const sf = useSaasflareProps();
   return /* @__PURE__ */ jsxs(
     SelectPrimitive.Item,
     {
@@ -1159,7 +1418,7 @@ function SelectItem({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) }) }),
+        /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { weight: sf.iconWeight, className: "size-4" }) }) }),
         /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
       ]
     }
@@ -1182,13 +1441,14 @@ function SelectScrollUpButton({
   className,
   ...props
 }) {
+  const sf = useSaasflareProps();
   return /* @__PURE__ */ jsx(
     SelectPrimitive.ScrollUpButton,
     {
       "data-slot": "select-scroll-up-button",
       className: cn("flex cursor-default items-center justify-center py-1", className),
       ...props,
-      children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "size-4" })
+      children: /* @__PURE__ */ jsx(CaretUpIcon, { weight: sf.iconWeight, className: "size-4" })
     }
   );
 }
@@ -1196,13 +1456,14 @@ function SelectScrollDownButton({
   className,
   ...props
 }) {
+  const sf = useSaasflareProps();
   return /* @__PURE__ */ jsx(
     SelectPrimitive.ScrollDownButton,
     {
       "data-slot": "select-scroll-down-button",
       className: cn("flex cursor-default items-center justify-center py-1", className),
       ...props,
-      children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4" })
+      children: /* @__PURE__ */ jsx(CaretDownIcon, { weight: sf.iconWeight, className: "size-4" })
     }
   );
 }
@@ -1230,9 +1491,10 @@ function DropdownMenuContent({
   surface,
   radius,
   animated,
+  iconWeight,
   ...props
 }) {
-  const sf = useSaasflareProps({ surface, radius, animated });
+  const sf = useSaasflareProps({ surface, radius, animated, iconWeight });
   const motion = useSaasflareMotion(sf.animated, springBouncy);
   return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
     DropdownMenuPrimitive.Content,
@@ -1276,6 +1538,7 @@ function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
   );
 }
 function DropdownMenuCheckboxItem({ className, children, checked, ...props }) {
+  const sf = useSaasflareProps();
   return /* @__PURE__ */ jsxs(
     DropdownMenuPrimitive.CheckboxItem,
     {
@@ -1287,13 +1550,14 @@ function DropdownMenuCheckboxItem({ className, children, checked, ...props }) {
       checked,
       ...props,
       children: [
-        /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) }) }),
+        /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { weight: sf.iconWeight, className: "size-4" }) }) }),
         children
       ]
     }
   );
 }
 function DropdownMenuRadioItem({ className, children, ...props }) {
+  const sf = useSaasflareProps();
   return /* @__PURE__ */ jsxs(
     DropdownMenuPrimitive.RadioItem,
     {
@@ -1304,7 +1568,7 @@ function DropdownMenuRadioItem({ className, children, ...props }) {
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CircleIcon, { className: "size-2 fill-current" }) }) }),
+        /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CircleIcon, { weight: sf.iconWeight, className: "size-2 fill-current" }) }) }),
         children
       ]
     }
@@ -1342,6 +1606,7 @@ function DropdownMenuShortcut({ className, ...props }) {
   );
 }
 function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
+  const sf = useSaasflareProps();
   return /* @__PURE__ */ jsxs(
     DropdownMenuPrimitive.SubTrigger,
     {
@@ -1354,7 +1619,7 @@ function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto size-4" })
+        /* @__PURE__ */ jsx(CaretRightIcon, { weight: sf.iconWeight, className: "ml-auto size-4" })
       ]
     }
   );
@@ -1414,9 +1679,10 @@ function SheetContent({
   surface,
   radius,
   animated,
+  iconWeight,
   ...props
 }) {
-  const sf = useSaasflareProps({ surface, radius, animated });
+  const sf = useSaasflareProps({ surface, radius, animated, iconWeight });
   return /* @__PURE__ */ jsxs(SheetPortal, { children: [
     /* @__PURE__ */ jsx(SheetOverlay, {}),
     /* @__PURE__ */ jsxs(
@@ -1437,8 +1703,8 @@ function SheetContent({
         ),
         children: [
           children,
-          showCloseButton && /* @__PURE__ */ jsxs(SheetPrimitive.Close, { className: "absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
-            /* @__PURE__ */ jsx(XIcon, { className: "size-4" }),
+          showCloseButton && /* @__PURE__ */ jsxs(SheetPrimitive.Close, { className: "absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary data-[state=open]:text-secondary-foreground", children: [
+            /* @__PURE__ */ jsx(XIcon, { weight: sf.iconWeight, className: "size-4" }),
             /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
           ] })
         ]
@@ -1576,9 +1842,10 @@ function Alert({
   surface,
   radius,
   animated,
+  iconWeight,
   ...props
 }) {
-  const sf = useSaasflareProps({ surface, radius, animated });
+  const sf = useSaasflareProps({ surface, radius, animated, iconWeight });
   let resolvedIntent = intentProp ?? "neutral";
   if (!intentProp && variant === "destructive") {
     resolvedIntent = "danger";
@@ -1772,6 +2039,7 @@ function ContextMenuSubTrigger({
   children,
   ...props
 }) {
+  const sf = useSaasflareProps();
   return /* @__PURE__ */ jsxs(
     ContextMenuPrimitive.SubTrigger,
     {
@@ -1784,7 +2052,7 @@ function ContextMenuSubTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto" })
+        /* @__PURE__ */ jsx(CaretRightIcon, { weight: sf.iconWeight, className: "ml-auto" })
       ]
     }
   );
@@ -1810,9 +2078,10 @@ function ContextMenuContent({
   surface,
   radius,
   animated,
+  iconWeight,
   ...props
 }) {
-  const sf = useSaasflareProps({ surface, radius, animated });
+  const sf = useSaasflareProps({ surface, radius, animated, iconWeight });
   return /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
     ContextMenuPrimitive.Content,
     {
@@ -1854,6 +2123,7 @@ function ContextMenuCheckboxItem({
   checked,
   ...props
 }) {
+  const sf = useSaasflareProps();
   return /* @__PURE__ */ jsxs(
     ContextMenuPrimitive.CheckboxItem,
     {
@@ -1865,7 +2135,7 @@ function ContextMenuCheckboxItem({
       checked,
       ...props,
       children: [
-        /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) }) }),
+        /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { weight: sf.iconWeight, className: "size-4" }) }) }),
         children
       ]
     }
@@ -1876,6 +2146,7 @@ function ContextMenuRadioItem({
   children,
   ...props
 }) {
+  const sf = useSaasflareProps();
   return /* @__PURE__ */ jsxs(
     ContextMenuPrimitive.RadioItem,
     {
@@ -1886,7 +2157,7 @@ function ContextMenuRadioItem({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CircleIcon, { className: "size-2 fill-current" }) }) }),
+        /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CircleIcon, { weight: sf.iconWeight, className: "size-2 fill-current" }) }) }),
         children
       ]
     }
@@ -1944,9 +2215,10 @@ function Menubar({
   surface,
   radius,
   animated,
+  iconWeight,
   ...props
 }) {
-  const sf = useSaasflareProps({ surface, radius, animated });
+  const sf = useSaasflareProps({ surface, radius, animated, iconWeight });
   return /* @__PURE__ */ jsx(
     MenubarPrimitive.Root,
     {
@@ -2006,9 +2278,10 @@ function MenubarContent({
   surface,
   radius,
   animated,
+  iconWeight,
   ...props
 }) {
-  const sf = useSaasflareProps({ surface, radius, animated });
+  const sf = useSaasflareProps({ surface, radius, animated, iconWeight });
   return /* @__PURE__ */ jsx(MenubarPortal, { children: /* @__PURE__ */ jsx(
     MenubarPrimitive.Content,
     {
@@ -2053,6 +2326,7 @@ function MenubarCheckboxItem({
   checked,
   ...props
 }) {
+  const sf = useSaasflareProps();
   return /* @__PURE__ */ jsxs(
     MenubarPrimitive.CheckboxItem,
     {
@@ -2064,7 +2338,7 @@ function MenubarCheckboxItem({
       checked,
       ...props,
       children: [
-        /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(MenubarPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) }) }),
+        /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(MenubarPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { weight: sf.iconWeight, className: "size-4" }) }) }),
         children
       ]
     }
@@ -2075,6 +2349,7 @@ function MenubarRadioItem({
   children,
   ...props
 }) {
+  const sf = useSaasflareProps();
   return /* @__PURE__ */ jsxs(
     MenubarPrimitive.RadioItem,
     {
@@ -2085,7 +2360,7 @@ function MenubarRadioItem({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(MenubarPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CircleIcon, { className: "size-2 fill-current" }) }) }),
+        /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(MenubarPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CircleIcon, { weight: sf.iconWeight, className: "size-2 fill-current" }) }) }),
         children
       ]
     }
@@ -2149,6 +2424,7 @@ function MenubarSubTrigger({
   children,
   ...props
 }) {
+  const sf = useSaasflareProps();
   return /* @__PURE__ */ jsxs(
     MenubarPrimitive.SubTrigger,
     {
@@ -2161,7 +2437,7 @@ function MenubarSubTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto h-4 w-4" })
+        /* @__PURE__ */ jsx(CaretRightIcon, { weight: sf.iconWeight, className: "ml-auto h-4 w-4" })
       ]
     }
   );
@@ -2189,9 +2465,10 @@ function NavigationMenu({
   surface,
   radius,
   animated,
+  iconWeight,
   ...props
 }) {
-  const sf = useSaasflareProps({ surface, radius, animated });
+  const sf = useSaasflareProps({ surface, radius, animated, iconWeight });
   return /* @__PURE__ */ jsxs(
     NavigationMenuPrimitive.Root,
     {
@@ -2249,6 +2526,7 @@ function NavigationMenuTrigger({
   children,
   ...props
 }) {
+  const sf = useSaasflareProps();
   return /* @__PURE__ */ jsxs(
     NavigationMenuPrimitive.Trigger,
     {
@@ -2259,8 +2537,9 @@ function NavigationMenuTrigger({
         children,
         " ",
         /* @__PURE__ */ jsx(
-          ChevronDownIcon,
+          CaretDownIcon,
           {
+            weight: sf.iconWeight,
             className: "relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180",
             "aria-hidden": "true"
           }
@@ -2480,9 +2759,10 @@ function RadioGroup4({
   surface,
   radius,
   animated,
+  iconWeight,
   ...props
 }) {
-  const sf = useSaasflareProps({ surface, radius, animated });
+  const sf = useSaasflareProps({ surface, radius, animated, iconWeight });
   return /* @__PURE__ */ jsx(
     RadioGroupPrimitive.Root,
     {
@@ -2499,6 +2779,7 @@ function RadioGroupItem({
   className,
   ...props
 }) {
+  const sf = useSaasflareProps();
   return /* @__PURE__ */ jsx(
     RadioGroupPrimitive.Item,
     {
@@ -2513,7 +2794,7 @@ function RadioGroupItem({
         {
           "data-slot": "radio-group-indicator",
           className: "relative flex items-center justify-center",
-          children: /* @__PURE__ */ jsx(CircleIcon, { className: "absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-primary animate-in zoom-in-50 duration-150" })
+          children: /* @__PURE__ */ jsx(CircleIcon, { weight: sf.iconWeight, className: "absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-primary animate-in zoom-in-50 duration-150" })
         }
       )
     }
@@ -2556,7 +2837,7 @@ function CollapsibleContent2({
 function Spinner({ className, surface, radius, animated, ...props }) {
   const sf = useSaasflareProps({ animated });
   return /* @__PURE__ */ jsx(
-    Loader2Icon,
+    CircleNotchIcon,
     {
       ...props,
       role: "status",
@@ -2640,9 +2921,9 @@ var getAsset = (type) => {
     case "success":
       return SuccessIcon;
     case "info":
-      return InfoIcon;
+      return InfoIcon2;
     case "warning":
-      return WarningIcon;
+      return WarningIcon2;
     case "error":
       return ErrorIcon;
     default:
@@ -2675,7 +2956,7 @@ var SuccessIcon = /* @__PURE__ */ React5__default.createElement("svg", {
   d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z",
   clipRule: "evenodd"
 }));
-var WarningIcon = /* @__PURE__ */ React5__default.createElement("svg", {
+var WarningIcon2 = /* @__PURE__ */ React5__default.createElement("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
   fill: "currentColor",
@@ -2686,7 +2967,7 @@ var WarningIcon = /* @__PURE__ */ React5__default.createElement("svg", {
   d: "M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z",
   clipRule: "evenodd"
 }));
-var InfoIcon = /* @__PURE__ */ React5__default.createElement("svg", {
+var InfoIcon2 = /* @__PURE__ */ React5__default.createElement("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 20 20",
   fill: "currentColor",
@@ -2969,10 +3250,10 @@ var Observer = class {
         });
       }
     };
-    this.custom = (jsx65, data) => {
+    this.custom = (jsx84, data) => {
       const id = (data == null ? void 0 : data.id) || toastsCounter++;
       this.create({
-        jsx: jsx65(id),
+        jsx: jsx84(id),
         id,
         ...data
       });
@@ -3058,7 +3339,7 @@ var Toast = (props) => {
   const dragStartTime = React5__default.useRef(null);
   const toastRef = React5__default.useRef(null);
   const isFront = index === 0;
-  const isVisible = index + 1 <= visibleToasts;
+  const isVisible2 = index + 1 <= visibleToasts;
   const toastType = toast2.type;
   const dismissible = toast2.dismissible !== false;
   const toastClassname = toast2.className || "";
@@ -3245,7 +3526,7 @@ var Toast = (props) => {
     "data-promise": Boolean(toast2.promise),
     "data-swiped": isSwiped,
     "data-removed": removed,
-    "data-visible": isVisible,
+    "data-visible": isVisible2,
     "data-y-position": y,
     "data-x-position": x,
     "data-index": index,
@@ -3707,9 +3988,9 @@ var Toaster = /* @__PURE__ */ React5__default.forwardRef(function Toaster2(props
     }))
   );
 });
-var Toaster3 = ({ surface, radius, animated, ...props }) => {
+var Toaster3 = ({ surface, radius, animated, iconWeight, ...props }) => {
   const { theme = "system" } = useTheme();
-  const sf = useSaasflareProps({ surface, radius, animated });
+  const sf = useSaasflareProps({ surface, radius, animated, iconWeight });
   return /* @__PURE__ */ jsx(
     Toaster,
     {
@@ -3720,11 +4001,11 @@ var Toaster3 = ({ surface, radius, animated, ...props }) => {
       theme,
       className: "toaster group",
       icons: {
-        success: /* @__PURE__ */ jsx(CircleCheckIcon, { className: "size-4" }),
-        info: /* @__PURE__ */ jsx(InfoIcon$1, { className: "size-4" }),
-        warning: /* @__PURE__ */ jsx(TriangleAlertIcon, { className: "size-4" }),
-        error: /* @__PURE__ */ jsx(OctagonXIcon, { className: "size-4" }),
-        loading: /* @__PURE__ */ jsx(Loader2Icon, { className: "size-4 animate-spin" })
+        success: /* @__PURE__ */ jsx(CheckCircleIcon, { weight: sf.iconWeight, className: "size-4" }),
+        info: /* @__PURE__ */ jsx(InfoIcon, { weight: sf.iconWeight, className: "size-4" }),
+        warning: /* @__PURE__ */ jsx(WarningIcon, { weight: sf.iconWeight, className: "size-4" }),
+        error: /* @__PURE__ */ jsx(XCircleIcon, { weight: sf.iconWeight, className: "size-4" }),
+        loading: /* @__PURE__ */ jsx(CircleNotchIcon, { className: "size-4 animate-spin" })
       },
       style: {
         "--normal-bg": "var(--popover)",
@@ -3741,8 +4022,8 @@ function AspectRatio({
 }) {
   return /* @__PURE__ */ jsx(AspectRatioPrimitive.Root, { "data-slot": "aspect-ratio", ...props });
 }
-function Breadcrumb({ surface, radius, animated, ...props }) {
-  const sf = useSaasflareProps({ surface, radius, animated });
+function Breadcrumb({ surface, radius, animated, iconWeight, ...props }) {
+  const sf = useSaasflareProps({ surface, radius, animated, iconWeight });
   return /* @__PURE__ */ jsx(
     "nav",
     {
@@ -3811,6 +4092,7 @@ function BreadcrumbSeparator({
   className,
   ...props
 }) {
+  const sf = useSaasflareProps();
   return /* @__PURE__ */ jsx(
     "li",
     {
@@ -3819,7 +4101,7 @@ function BreadcrumbSeparator({
       "aria-hidden": "true",
       className: cn("[&>svg]:size-3.5", className),
       ...props,
-      children: children ?? /* @__PURE__ */ jsx(ChevronRight, {})
+      children: children ?? /* @__PURE__ */ jsx(CaretRightIcon, { weight: sf.iconWeight })
     }
   );
 }
@@ -3827,6 +4109,7 @@ function BreadcrumbEllipsis({
   className,
   ...props
 }) {
+  const sf = useSaasflareProps();
   return /* @__PURE__ */ jsxs(
     "span",
     {
@@ -3836,7 +4119,7 @@ function BreadcrumbEllipsis({
       className: cn("flex size-9 items-center justify-center", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4" }),
+        /* @__PURE__ */ jsx(DotsThreeIcon, { weight: sf.iconWeight, className: "size-4" }),
         /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More" })
       ]
     }
@@ -3962,13 +4245,14 @@ function ComboboxInput({
   className,
   ...props
 }) {
+  const sf = useSaasflareProps();
   return /* @__PURE__ */ jsxs(
     "div",
     {
       "data-slot": "combobox-input-wrapper",
       className: "flex h-9 items-center gap-2 border-b px-3",
       children: [
-        /* @__PURE__ */ jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }),
+        /* @__PURE__ */ jsx(MagnifyingGlassIcon, { weight: sf.iconWeight, className: "size-4 shrink-0 opacity-50" }),
         /* @__PURE__ */ jsx(
           Command.Input,
           {
@@ -4006,6 +4290,7 @@ function ComboboxItem({
   selected,
   ...props
 }) {
+  const sf = useSaasflareProps();
   return /* @__PURE__ */ jsxs(
     Command.Item,
     {
@@ -4020,6 +4305,7 @@ function ComboboxItem({
         selected ? /* @__PURE__ */ jsx(
           CheckIcon,
           {
+            weight: sf.iconWeight,
             "data-slot": "combobox-item-indicator",
             className: "absolute right-2 size-4"
           }
@@ -5017,9 +5303,10 @@ function NativeSelect({
   surface,
   radius,
   animated,
+  iconWeight,
   ...props
 }) {
-  const sf = useSaasflareProps({ surface, radius, animated });
+  const sf = useSaasflareProps({ surface, radius, animated, iconWeight });
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -5044,8 +5331,9 @@ function NativeSelect({
           }
         ),
         /* @__PURE__ */ jsx(
-          ChevronDownIcon,
+          CaretDownIcon,
           {
+            weight: sf.iconWeight,
             className: "pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 text-muted-foreground opacity-50 select-none",
             "aria-hidden": "true",
             "data-slot": "native-select-icon"
@@ -5126,6 +5414,7 @@ function PaginationPrevious({
   className,
   ...props
 }) {
+  const sf = useSaasflareProps();
   return /* @__PURE__ */ jsxs(
     PaginationLink,
     {
@@ -5134,7 +5423,7 @@ function PaginationPrevious({
       className: cn("gap-1 px-2.5 sm:pl-2.5", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
+        /* @__PURE__ */ jsx(CaretLeftIcon, { weight: sf.iconWeight }),
         /* @__PURE__ */ jsx("span", { className: "hidden sm:block", children: "Previous" })
       ]
     }
@@ -5144,6 +5433,7 @@ function PaginationNext({
   className,
   ...props
 }) {
+  const sf = useSaasflareProps();
   return /* @__PURE__ */ jsxs(
     PaginationLink,
     {
@@ -5153,7 +5443,7 @@ function PaginationNext({
       ...props,
       children: [
         /* @__PURE__ */ jsx("span", { className: "hidden sm:block", children: "Next" }),
-        /* @__PURE__ */ jsx(ChevronRightIcon, {})
+        /* @__PURE__ */ jsx(CaretRightIcon, { weight: sf.iconWeight })
       ]
     }
   );
@@ -5162,6 +5452,7 @@ function PaginationEllipsis({
   className,
   ...props
 }) {
+  const sf = useSaasflareProps();
   return /* @__PURE__ */ jsxs(
     "span",
     {
@@ -5170,7 +5461,7 @@ function PaginationEllipsis({
       className: cn("flex size-9 items-center justify-center", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx(MoreHorizontalIcon, { className: "size-4" }),
+        /* @__PURE__ */ jsx(DotsThreeIcon, { weight: sf.iconWeight, className: "size-4" }),
         /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More pages" })
       ]
     }
@@ -5510,6 +5801,7 @@ function SidebarTrigger({
   ...props
 }) {
   const { toggleSidebar } = useSidebar();
+  const sf = useSaasflareProps();
   return /* @__PURE__ */ jsxs(
     Button,
     {
@@ -5524,7 +5816,7 @@ function SidebarTrigger({
       },
       ...props,
       children: [
-        /* @__PURE__ */ jsx(PanelLeftIcon, {}),
+        /* @__PURE__ */ jsx(SidebarSimpleIcon, { weight: sf.iconWeight }),
         /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle Sidebar" })
       ]
     }
@@ -6162,182 +6454,1784 @@ function MetricCard({
     }
   );
 }
-function EmptyState({
-  icon,
-  title,
-  description,
-  action,
+function BarList({
+  data,
+  valueFormatter = (n) => n.toLocaleString(),
+  sortDescending = true,
+  limit,
   className,
   surface,
   radius,
-  animated,
-  ...props
+  animated
 }) {
   const sf = useSaasflareProps({ surface, radius, animated });
-  return /* @__PURE__ */ jsxs(
+  const motion = useSaasflareMotion(sf.animated, springGentle);
+  const sorted = sortDescending ? [...data].sort((a, b) => b.value - a.value) : data;
+  const visible = typeof limit === "number" ? sorted.slice(0, limit) : sorted;
+  const peak = visible.reduce((max, row) => Math.max(max, row.value), 0) || 1;
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      ...props,
-      "data-slot": "empty-state",
+      "data-slot": "bar-list",
       "data-surface": sf.surface,
       "data-radius": sf.radius,
       "data-animated": String(sf.animated),
-      className: cn(
-        "flex flex-col items-center justify-center gap-4 py-12 text-center",
-        className
-      ),
-      children: [
-        icon && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground [&_svg]:size-12", children: icon }),
-        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: title }),
-          description && /* @__PURE__ */ jsx("p", { className: "max-w-sm text-sm text-muted-foreground", children: description })
-        ] }),
-        action && /* @__PURE__ */ jsx("div", { className: "mt-2", children: action })
-      ]
-    }
-  );
-}
-function SearchField({
+      className: cn("flex flex-col gap-1.5", className),
+      children: visible.map((row, i) => {
+        const pct = row.value / peak * 100;
+        const labelClasses = cn(
+          "relative z-10 flex flex-1 items-center gap-2 truncate px-2 text-sm",
+          row.href && "hover:underline"
+        );
+        const labelInner = /* @__PURE__ */ jsxs(Fragment, { children: [
+          row.icon !== void 0 && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center [&_svg]:size-4", children: row.icon }),
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: row.name })
+        ] });
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-slot": "bar-list-item",
+            className: "relative flex h-8 items-center",
+            children: [
+              /* @__PURE__ */ jsx(
+                m.div,
+                {
+                  "data-slot": "bar-list-bar",
+                  className: "absolute inset-y-0 left-0 rounded-md bg-primary/15",
+                  style: row.color ? { backgroundColor: row.color, opacity: 0.18 } : void 0,
+                  initial: motion.disabled ? false : { width: 0 },
+                  animate: { width: `${pct}%` },
+                  transition: motion.transition
+                }
+              ),
+              row.href ? /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: row.href,
+                  "data-slot": "bar-list-label",
+                  className: labelClasses,
+                  children: labelInner
+                }
+              ) : /* @__PURE__ */ jsx("span", { "data-slot": "bar-list-label", className: labelClasses, children: labelInner }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "data-slot": "bar-list-value",
+                  className: "relative z-10 shrink-0 px-2 text-sm font-medium tabular-nums",
+                  children: valueFormatter(row.value)
+                }
+              )
+            ]
+          },
+          `${row.name}-${i}`
+        );
+      })
+    }
+  );
+}
+function buildPath(data, width, height, sw) {
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const span = max - min || 1;
+  const innerW = width - sw;
+  const innerH = height - sw;
+  const offset = sw / 2;
+  return data.map((v, i) => {
+    const x = offset + i / (data.length - 1) * innerW;
+    const y = offset + innerH - (v - min) / span * innerH;
+    return `${i === 0 ? "M" : "L"} ${x.toFixed(2)} ${y.toFixed(2)}`;
+  }).join(" ");
+}
+function SparkChart({
+  data,
+  variant = "area",
+  color,
+  width = 64,
+  height = 24,
+  strokeWidth = 1.5,
   className,
-  loading = false,
-  onClear,
-  value,
   surface,
   radius,
   animated,
-  ...props
+  "aria-label": ariaLabel
 }) {
   const sf = useSaasflareProps({ surface, radius, animated });
-  const hasValue = typeof value === "string" ? value.length > 0 : false;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-slot": "search-field",
+  if (data.length < 2) return null;
+  const stroke = color ?? "var(--primary)";
+  const linePath = buildPath(data, width, height, strokeWidth);
+  const areaPath = `${linePath} L ${width - strokeWidth / 2} ${height - strokeWidth / 2} L ${strokeWidth / 2} ${height - strokeWidth / 2} Z`;
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const span = max - min || 1;
+  const innerH = height - strokeWidth;
+  const offset = strokeWidth / 2;
+  const barW = (width - strokeWidth * (data.length + 1)) / data.length;
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "data-slot": "spark-chart",
+      "data-variant": variant,
       "data-surface": sf.surface,
-      "data-radius": sf.radius,
       "data-animated": String(sf.animated),
-      className: cn("relative", className),
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: loading ? /* @__PURE__ */ jsx(Loader2Icon, { className: "size-4 animate-spin", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(SearchIcon, { className: "size-4", "aria-hidden": "true" }) }),
-        /* @__PURE__ */ jsx(
-          "input",
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      role: "img",
+      "aria-label": ariaLabel ?? `Sparkline ${variant}`,
+      className: cn("inline-block align-middle", className),
+      children: variant === "bar" ? data.map((v, i) => {
+        const h = Math.max((v - min) / span * innerH, 1);
+        const x = offset + i * (barW + strokeWidth);
+        const y = offset + innerH - h;
+        return /* @__PURE__ */ jsx(
+          "rect",
           {
-            type: "search",
-            "data-slot": "search-field-input",
-            className: "h-9 w-full rounded-md border border-input bg-background pl-9 pr-9 text-sm outline-none transition-colors placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50",
-            value,
-            ...props
+            "data-slot": "spark-chart-bar",
+            x,
+            y,
+            width: barW,
+            height: h,
+            fill: stroke,
+            rx: 1
+          },
+          i
+        );
+      }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        variant === "area" && /* @__PURE__ */ jsx(
+          "path",
+          {
+            "data-slot": "spark-chart-area",
+            d: areaPath,
+            fill: stroke,
+            fillOpacity: 0.18
           }
         ),
-        hasValue && onClear && /* @__PURE__ */ jsx(
-          "button",
+        /* @__PURE__ */ jsx(
+          "path",
           {
-            type: "button",
-            "data-slot": "search-field-clear",
-            onClick: onClear,
-            className: "absolute right-2 top-1/2 -translate-y-1/2 rounded-sm p-0.5 text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring",
-            "aria-label": "Clear search",
-            children: /* @__PURE__ */ jsx(XIcon, { className: "size-3.5" })
+            "data-slot": "spark-chart-line",
+            d: linePath,
+            fill: "none",
+            stroke,
+            strokeWidth,
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
           }
         )
-      ]
+      ] })
     }
   );
 }
-function SettingsSection({
-  label,
-  description,
+var NAMED_COLORS = {
+  emerald: "oklch(0.68 0.17 155)",
+  teal: "oklch(0.70 0.15 185)",
+  blue: "oklch(0.65 0.18 230)",
+  amber: "oklch(0.72 0.17 50)",
+  red: "oklch(0.62 0.21 25)",
+  rose: "oklch(0.65 0.20 10)",
+  gray: "oklch(0.70 0 0)",
+  neutral: "oklch(0.70 0 0)"
+};
+function Tracker({
+  data,
+  blockHeight = 32,
+  gap = 2,
   className,
-  children,
   surface,
   radius,
-  animated,
-  ...props
+  animated
 }) {
   const sf = useSaasflareProps({ surface, radius, animated });
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      ...props,
-      "data-slot": "settings-section",
+      "data-slot": "tracker",
       "data-surface": sf.surface,
       "data-radius": sf.radius,
       "data-animated": String(sf.animated),
-      className: cn(
-        "flex flex-col gap-3 py-4 sm:flex-row sm:items-center sm:justify-between sm:gap-6",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
-          /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: label }),
-          description && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: description })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "shrink-0", children })
-      ]
+      className: cn("flex w-full items-stretch", className),
+      style: { gap, height: blockHeight },
+      role: "group",
+      "aria-label": "Status tracker",
+      children: data.map((block, i) => {
+        const color = block.color ? NAMED_COLORS[block.color] ?? block.color : NAMED_COLORS.gray;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "tracker-block",
+            title: typeof block.tooltip === "string" ? block.tooltip : void 0,
+            className: cn(
+              "flex-1 rounded-sm transition-[transform,opacity]",
+              "hover:scale-y-110 hover:opacity-90",
+              "motion-reduce:hover:transform-none"
+            ),
+            style: { backgroundColor: color }
+          },
+          block.key ?? i
+        );
+      })
     }
   );
 }
-function PricingCard({
-  name,
-  price,
-  period,
-  description,
-  features,
-  cta,
-  featured = false,
+function matchesAccept(file, accept) {
+  if (!accept) return true;
+  const parts = accept.split(",").map((s) => s.trim().toLowerCase());
+  const name = file.name.toLowerCase();
+  const type = file.type.toLowerCase();
+  return parts.some((p) => {
+    if (p.startsWith(".")) return name.endsWith(p);
+    if (p.endsWith("/*")) return type.startsWith(p.slice(0, -1));
+    return type === p;
+  });
+}
+function partition(files, accept, maxSize) {
+  const accepted = [];
+  const rejected = [];
+  for (const file of files) {
+    if (!matchesAccept(file, accept)) {
+      rejected.push({ file, reason: "type-mismatch" });
+      continue;
+    }
+    if (typeof maxSize === "number" && file.size > maxSize) {
+      rejected.push({ file, reason: "too-large" });
+      continue;
+    }
+    accepted.push(file);
+  }
+  return { accepted, rejected };
+}
+function Dropzone({
+  onDrop,
+  accept,
+  maxSize,
+  multiple = true,
+  disabled = false,
+  children,
   className,
   surface,
   radius,
-  animated,
-  ...props
+  animated
 }) {
   const sf = useSaasflareProps({ surface, radius, animated });
-  return /* @__PURE__ */ jsxs(
+  const [isDragActive, setIsDragActive] = useState(false);
+  const handle = useCallback(
+    (files) => {
+      const { accepted, rejected } = partition(files, accept, maxSize);
+      onDrop?.(accepted, rejected);
+    },
+    [accept, maxSize, onDrop]
+  );
+  const { open } = useFileDialog({
+    accept,
+    multiple,
+    onChange: handle
+  });
+  const onDragOver = (e) => {
+    e.preventDefault();
+    if (disabled) return;
+    setIsDragActive(true);
+  };
+  const onDragLeave = (e) => {
+    e.preventDefault();
+    setIsDragActive(false);
+  };
+  const onDropEvent = (e) => {
+    e.preventDefault();
+    setIsDragActive(false);
+    if (disabled) return;
+    const files = Array.from(e.dataTransfer.files);
+    handle(multiple ? files : files.slice(0, 1));
+  };
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      ...props,
-      "data-slot": "pricing-card",
+      "data-slot": "dropzone",
       "data-surface": sf.surface,
       "data-radius": sf.radius,
       "data-animated": String(sf.animated),
+      "data-active": String(isDragActive),
+      "data-disabled": String(disabled),
+      role: "button",
+      tabIndex: disabled ? -1 : 0,
+      "aria-disabled": disabled || void 0,
+      onClick: () => !disabled && open(),
+      onKeyDown: (e) => {
+        if (disabled) return;
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          open();
+        }
+      },
+      onDragOver,
+      onDragEnter: onDragOver,
+      onDragLeave,
+      onDrop: onDropEvent,
       className: cn(
-        "relative flex flex-col rounded-xl border bg-card p-6 text-card-foreground shadow-sm",
-        featured && "border-primary shadow-md ring-1 ring-primary/20",
+        "flex min-h-32 cursor-pointer items-center justify-center rounded-xl border-2 border-dashed",
+        "border-border bg-background/40 p-6 text-center text-sm text-muted-foreground",
+        "transition-[border-color,background-color] duration-200",
+        "hover:border-primary/40 hover:bg-primary/5",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "data-[active=true]:border-primary/60 data-[active=true]:bg-primary/10",
+        "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
         className
       ),
-      children: [
-        featured && /* @__PURE__ */ jsx("div", { className: "absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-primary px-3 py-0.5 text-xs font-medium text-primary-foreground", children: "Recommended" }),
-        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: name }),
-          description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-baseline gap-1", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-3xl font-bold tracking-tight", children: price }),
-          period && /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
-            "/",
-            period
-          ] })
+      children: typeof children === "function" ? children({ isDragActive }) : children !== void 0 ? children : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1", children: [
+        /* @__PURE__ */ jsx("p", { className: "font-medium text-foreground", children: isDragActive ? "Drop files here" : "Drag files here or click to browse" }),
+        accept && /* @__PURE__ */ jsxs("p", { className: "text-xs", children: [
+          "Accepts: ",
+          accept
         ] }),
-        /* @__PURE__ */ jsx("ul", { className: "mt-6 space-y-2.5", role: "list", children: features.map((feature) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm", children: [
-          /* @__PURE__ */ jsx(CheckIcon, { className: "mt-0.5 size-4 shrink-0 text-success", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx("span", { children: feature })
-        ] }, feature)) }),
-        cta && /* @__PURE__ */ jsx("div", { className: "mt-6", children: cta })
-      ]
+        typeof maxSize === "number" && /* @__PURE__ */ jsxs("p", { className: "text-xs", children: [
+          "Max size: ",
+          (maxSize / 1024 / 1024).toFixed(1),
+          " MB"
+        ] })
+      ] })
     }
   );
 }
-function DataToolbar({ className, surface, radius, animated, ...props }) {
-  const sf = useSaasflareProps({ surface, radius, animated });
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
+function CalendarIcon(props) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
       ...props,
-      "data-slot": "data-toolbar",
-      "data-surface": sf.surface,
-      "data-radius": sf.radius,
-      "data-animated": String(sf.animated),
-      className: cn(
+      children: [
+        /* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", ry: "2" }),
+        /* @__PURE__ */ jsx("line", { x1: "16", x2: "16", y1: "2", y2: "6" }),
+        /* @__PURE__ */ jsx("line", { x1: "8", x2: "8", y1: "2", y2: "6" }),
+        /* @__PURE__ */ jsx("line", { x1: "3", x2: "21", y1: "10", y2: "10" })
+      ]
+    }
+  );
+}
+function defaultFormat(range) {
+  const fmt = (d) => d.toLocaleDateString(void 0, {
+    year: "numeric",
+    month: "short",
+    day: "numeric"
+  });
+  if (!range.from) return "";
+  if (!range.to) return fmt(range.from);
+  return `${fmt(range.from)} \u2013 ${fmt(range.to)}`;
+}
+function DateRangePicker({
+  value,
+  defaultValue,
+  onChange,
+  placeholder = "Pick a date range",
+  numberOfMonths = 2,
+  minDate,
+  maxDate,
+  disabled = false,
+  formatRange = defaultFormat,
+  className,
+  surface,
+  radius,
+  animated,
+  iconWeight
+}) {
+  const sf = useSaasflareProps({ surface, radius, animated, iconWeight });
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = useState(defaultValue);
+  const range = isControlled ? value : internal;
+  const handleSelect = (next) => {
+    if (!isControlled) setInternal(next);
+    onChange?.(next);
+  };
+  const label = range && range.from ? formatRange(range) : placeholder;
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        intent: "neutral",
+        disabled,
+        surface: sf.surface,
+        radius: sf.radius,
+        animated: sf.animated,
+        "data-slot": "date-range-picker-trigger",
+        className: cn(
+          "min-w-56 justify-start gap-2 font-normal",
+          !range?.from && "text-muted-foreground",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(CalendarIcon, { className: "size-4" }),
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: label })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        "data-slot": "date-range-picker-content",
+        align: "start",
+        className: "w-auto p-0",
+        children: /* @__PURE__ */ jsx(
+          Calendar,
+          {
+            mode: "range",
+            selected: range,
+            onSelect: handleSelect,
+            numberOfMonths,
+            defaultMonth: range?.from ?? /* @__PURE__ */ new Date(),
+            disabled: minDate || maxDate ? (date) => (minDate ? date < minDate : false) || (maxDate ? date > maxDate : false) : void 0
+          }
+        )
+      }
+    )
+  ] });
+}
+function CalendarIcon2(props) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", ry: "2" }),
+        /* @__PURE__ */ jsx("line", { x1: "16", x2: "16", y1: "2", y2: "6" }),
+        /* @__PURE__ */ jsx("line", { x1: "8", x2: "8", y1: "2", y2: "6" }),
+        /* @__PURE__ */ jsx("line", { x1: "3", x2: "21", y1: "10", y2: "10" })
+      ]
+    }
+  );
+}
+function defaultFormat2(d) {
+  return d.toLocaleDateString(void 0, {
+    year: "numeric",
+    month: "short",
+    day: "numeric"
+  });
+}
+function DatePicker({
+  value,
+  defaultValue,
+  onChange,
+  placeholder = "Pick a date",
+  minDate,
+  maxDate,
+  disabled = false,
+  formatDate = defaultFormat2,
+  className,
+  surface,
+  radius,
+  animated,
+  iconWeight
+}) {
+  const sf = useSaasflareProps({ surface, radius, animated, iconWeight });
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = useState(defaultValue);
+  const date = isControlled ? value : internal;
+  const handleSelect = (next) => {
+    if (!isControlled) setInternal(next);
+    onChange?.(next);
+  };
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        intent: "neutral",
+        disabled,
+        surface: sf.surface,
+        radius: sf.radius,
+        animated: sf.animated,
+        "data-slot": "date-picker-trigger",
+        className: cn(
+          "min-w-44 justify-start gap-2 font-normal",
+          !date && "text-muted-foreground",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(CalendarIcon2, { className: "size-4" }),
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: date ? formatDate(date) : placeholder })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        "data-slot": "date-picker-content",
+        align: "start",
+        className: "w-auto p-0",
+        children: /* @__PURE__ */ jsx(
+          Calendar,
+          {
+            mode: "single",
+            selected: date,
+            onSelect: handleSelect,
+            defaultMonth: date ?? /* @__PURE__ */ new Date(),
+            disabled: minDate || maxDate ? (d) => (minDate ? d < minDate : false) || (maxDate ? d > maxDate : false) : void 0
+          }
+        )
+      }
+    )
+  ] });
+}
+function Callout({
+  intent = "info",
+  title,
+  icon,
+  children,
+  className,
+  surface,
+  radius,
+  animated,
+  iconWeight
+}) {
+  const sf = useSaasflareProps({ surface, radius, animated, iconWeight });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "callout",
+      "data-intent": intent,
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
+      role: "note",
+      className: cn(
+        "relative flex gap-3 rounded-lg border-l-4 p-4",
+        "border-l-[var(--intent)] bg-[var(--intent)]/8",
+        "text-foreground",
+        "[&_a]:underline [&_a]:underline-offset-2 [&_a]:text-[var(--intent-text)]",
+        className
+      ),
+      children: [
+        icon !== void 0 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "callout-icon",
+            className: "mt-0.5 shrink-0 text-[var(--intent-text)] [&_svg]:size-5",
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { "data-slot": "callout-body", className: "flex-1 space-y-1", children: [
+          title !== void 0 && /* @__PURE__ */ jsx(
+            "p",
+            {
+              "data-slot": "callout-title",
+              className: "font-semibold leading-tight text-[var(--intent-text)]",
+              children: title
+            }
+          ),
+          children !== void 0 && /* @__PURE__ */ jsx("div", { "data-slot": "callout-content", className: "text-sm leading-relaxed text-muted-foreground", children })
+        ] })
+      ]
+    }
+  );
+}
+function TagInput({
+  value,
+  defaultValue,
+  onChange,
+  placeholder,
+  maxTags,
+  separators = [",", "Enter"],
+  unique = true,
+  disabled = false,
+  renderTag,
+  className,
+  surface,
+  radius,
+  animated,
+  "aria-label": ariaLabel
+}) {
+  const sf = useSaasflareProps({ surface, radius, animated });
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = useState(defaultValue ?? []);
+  const tags = isControlled ? value : internal;
+  const [draft, setDraft] = useState("");
+  const commit = useCallback(
+    (raw) => {
+      const trimmed = raw.trim();
+      if (!trimmed) return;
+      if (unique && tags.includes(trimmed)) return;
+      if (typeof maxTags === "number" && tags.length >= maxTags) return;
+      const next = [...tags, trimmed];
+      if (!isControlled) setInternal(next);
+      onChange?.(next);
+      setDraft("");
+    },
+    [isControlled, maxTags, onChange, tags, unique]
+  );
+  const removeAt = useCallback(
+    (index) => {
+      const next = tags.filter((_, i) => i !== index);
+      if (!isControlled) setInternal(next);
+      onChange?.(next);
+    },
+    [isControlled, onChange, tags]
+  );
+  const handleChange = (e) => {
+    const v = e.target.value;
+    const sep = separators.find((s) => s !== "Enter" && v.includes(s));
+    if (sep) {
+      const parts = v.split(sep);
+      for (let i = 0; i < parts.length - 1; i++) commit(parts[i]);
+      setDraft(parts[parts.length - 1] ?? "");
+    } else {
+      setDraft(v);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (separators.includes(e.key) || e.key === "," && separators.includes(",")) {
+      e.preventDefault();
+      commit(draft);
+      return;
+    }
+    if (e.key === "Backspace" && draft === "" && tags.length > 0) {
+      e.preventDefault();
+      removeAt(tags.length - 1);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "tag-input",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-disabled": String(disabled),
+      className: cn(
+        "flex min-h-9 w-full flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent px-2 py-1.5 text-sm shadow-xs",
+        "focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50",
+        "data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
+        className
+      ),
+      children: [
+        tags.map((tag, i) => {
+          const onRemove = () => removeAt(i);
+          if (renderTag) return /* @__PURE__ */ jsx("span", { children: renderTag(tag, onRemove) }, `${tag}-${i}`);
+          return /* @__PURE__ */ jsxs(
+            "span",
+            {
+              "data-slot": "tag-input-tag",
+              className: "inline-flex items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-foreground",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "truncate", children: tag }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "data-slot": "tag-input-remove",
+                    onClick: onRemove,
+                    disabled,
+                    "aria-label": `Remove ${tag}`,
+                    className: "inline-flex size-3.5 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-foreground/10 hover:text-foreground",
+                    children: /* @__PURE__ */ jsx(
+                      "svg",
+                      {
+                        viewBox: "0 0 12 12",
+                        width: "10",
+                        height: "10",
+                        "aria-hidden": "true",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        children: /* @__PURE__ */ jsx("path", { d: "M3 3l6 6M9 3l-6 6" })
+                      }
+                    )
+                  }
+                )
+              ]
+            },
+            `${tag}-${i}`
+          );
+        }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            "data-slot": "tag-input-field",
+            type: "text",
+            value: draft,
+            onChange: handleChange,
+            onKeyDown: handleKeyDown,
+            onBlur: () => commit(draft),
+            disabled,
+            placeholder: tags.length === 0 ? placeholder : void 0,
+            "aria-label": ariaLabel ?? "Add tag",
+            className: "flex-1 min-w-24 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+          }
+        )
+      ]
+    }
+  );
+}
+function clamp(n, min, max) {
+  let out = n;
+  if (typeof min === "number") out = Math.max(out, min);
+  if (typeof max === "number") out = Math.min(out, max);
+  return out;
+}
+function precisionFromStep(step) {
+  const s = String(step);
+  const dot = s.indexOf(".");
+  return dot === -1 ? 0 : s.length - dot - 1;
+}
+function NumberInput({
+  value,
+  defaultValue,
+  onChange,
+  min,
+  max,
+  step = 1,
+  precision,
+  placeholder,
+  disabled = false,
+  readOnly = false,
+  hideSteppers = false,
+  className,
+  name,
+  surface,
+  radius,
+  animated,
+  "aria-label": ariaLabel
+}) {
+  const sf = useSaasflareProps({ surface, radius, animated });
+  const isControlled = value !== void 0;
+  const initial = defaultValue ?? (typeof min === "number" ? min : 0);
+  const [internal, setInternal] = useState(initial);
+  const current = isControlled ? value : internal;
+  const decimals = precision ?? precisionFromStep(step);
+  const commit = useCallback(
+    (next) => {
+      const clamped = clamp(Number.isFinite(next) ? next : initial, min, max);
+      if (!isControlled) setInternal(clamped);
+      onChange?.(clamped);
+    },
+    [initial, isControlled, max, min, onChange]
+  );
+  const handleChange = (e) => {
+    const raw = e.target.value;
+    if (raw === "" || raw === "-") {
+      if (!isControlled) setInternal(0);
+      return;
+    }
+    const parsed = Number(raw);
+    if (Number.isNaN(parsed)) return;
+    commit(parsed);
+  };
+  const handleBlur = (e) => {
+    const parsed = Number(e.target.value);
+    commit(Number.isNaN(parsed) ? initial : parsed);
+  };
+  const inc = () => commit(current + step);
+  const dec = () => commit(current - step);
+  const displayValue = decimals > 0 && Number.isFinite(current) ? current.toFixed(decimals) : String(current);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "number-input",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-disabled": String(disabled),
+      className: cn(
+        "inline-flex h-9 w-full min-w-32 items-stretch rounded-md border border-input bg-transparent text-sm shadow-xs",
+        "focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50",
+        "data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            "data-slot": "number-input-field",
+            type: "number",
+            inputMode: "decimal",
+            name,
+            value: Number.isFinite(current) ? displayValue : "",
+            onChange: handleChange,
+            onBlur: handleBlur,
+            disabled,
+            readOnly,
+            placeholder,
+            min,
+            max,
+            step,
+            "aria-label": ariaLabel,
+            className: "min-w-0 flex-1 bg-transparent px-3 text-sm outline-none placeholder:text-muted-foreground\n                           [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+          }
+        ),
+        !hideSteppers && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-slot": "number-input-steppers",
+            className: "flex flex-col border-l border-input",
+            children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "data-slot": "number-input-increment",
+                  onClick: inc,
+                  disabled: disabled || readOnly || typeof max === "number" && current >= max,
+                  tabIndex: -1,
+                  "aria-label": "Increment",
+                  className: "flex h-1/2 w-6 items-center justify-center text-muted-foreground transition-colors hover:bg-foreground/5 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50",
+                  children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 10 10", width: "8", height: "8", "aria-hidden": "true", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M2 6.5l3-3 3 3" }) })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "data-slot": "number-input-decrement",
+                  onClick: dec,
+                  disabled: disabled || readOnly || typeof min === "number" && current <= min,
+                  tabIndex: -1,
+                  "aria-label": "Decrement",
+                  className: "flex h-1/2 w-6 items-center justify-center border-t border-input text-muted-foreground transition-colors hover:bg-foreground/5 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50",
+                  children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 10 10", width: "8", height: "8", "aria-hidden": "true", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M2 3.5l3 3 3-3" }) })
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var SIZE_PX2 = { sm: 14, md: 20, lg: 28, xl: 36 };
+function StarPath({
+  fillPercent,
+  color,
+  px,
+  onClick,
+  onMouseMove
+}) {
+  const id = `star-clip-${Math.random().toString(36).slice(2, 8)}`;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      width: px,
+      height: px,
+      onClick,
+      onMouseMove,
+      "aria-hidden": "true",
+      style: { display: "block" },
+      children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id, children: /* @__PURE__ */ jsx("rect", { x: "0", y: "0", width: 24 * fillPercent, height: "24" }) }) }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M12 2.5l2.92 6.34 6.96.66-5.23 4.7 1.56 6.8L12 17.6l-6.21 3.4 1.56-6.8L2.12 9.5l6.96-.66z",
+            fill: "none",
+            stroke: color,
+            strokeWidth: "1.5",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M12 2.5l2.92 6.34 6.96.66-5.23 4.7 1.56 6.8L12 17.6l-6.21 3.4 1.56-6.8L2.12 9.5l6.96-.66z",
+            fill: color,
+            clipPath: `url(#${id})`
+          }
+        )
+      ]
+    }
+  );
+}
+function Rating({
+  value,
+  defaultValue,
+  onChange,
+  count = 5,
+  allowHalf = false,
+  readOnly = false,
+  disabled = false,
+  size = "md",
+  color = "var(--warning)",
+  className,
+  surface,
+  radius,
+  animated,
+  "aria-label": ariaLabel
+}) {
+  const sf = useSaasflareProps({ surface, radius, animated });
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = useState(defaultValue ?? 0);
+  const [hover, setHover] = useState(null);
+  const current = isControlled ? value : internal;
+  const display = hover ?? current;
+  const px = SIZE_PX2[size];
+  const interactive = !readOnly && !disabled;
+  const commit = useCallback(
+    (next) => {
+      const clamped = Math.max(0, Math.min(count, next));
+      if (!isControlled) setInternal(clamped);
+      onChange?.(clamped);
+    },
+    [count, isControlled, onChange]
+  );
+  const computeScore = (i, e) => {
+    if (!allowHalf) return i + 1;
+    const rect = e.currentTarget.getBoundingClientRect();
+    const halfway = rect.left + rect.width / 2;
+    return e.clientX < halfway ? i + 0.5 : i + 1;
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "rating",
+      "data-size": size,
+      "data-readonly": String(readOnly),
+      "data-disabled": String(disabled),
+      "data-surface": sf.surface,
+      "data-animated": String(sf.animated),
+      role: interactive ? "slider" : "img",
+      "aria-label": ariaLabel ?? `Rating: ${current} of ${count}`,
+      "aria-valuemin": interactive ? 0 : void 0,
+      "aria-valuemax": interactive ? count : void 0,
+      "aria-valuenow": interactive ? current : void 0,
+      tabIndex: interactive ? 0 : -1,
+      onKeyDown: interactive ? (e) => {
+        const inc = allowHalf ? 0.5 : 1;
+        if (e.key === "ArrowRight" || e.key === "ArrowUp") {
+          e.preventDefault();
+          commit(current + inc);
+        } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
+          e.preventDefault();
+          commit(current - inc);
+        } else if (e.key === "Home") {
+          e.preventDefault();
+          commit(0);
+        } else if (e.key === "End") {
+          e.preventDefault();
+          commit(count);
+        }
+      } : void 0,
+      onMouseLeave: interactive ? () => setHover(null) : void 0,
+      className: cn(
+        "inline-flex items-center gap-0.5 outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm",
+        interactive && "cursor-pointer",
+        disabled && "cursor-not-allowed opacity-50",
+        className
+      ),
+      children: Array.from({ length: count }, (_, i) => {
+        const fillPercent = Math.max(0, Math.min(1, display - i));
+        return /* @__PURE__ */ jsx(
+          StarPath,
+          {
+            fillPercent,
+            color,
+            px,
+            onClick: interactive ? (e) => commit(computeScore(i, e)) : void 0,
+            onMouseMove: interactive ? (e) => setHover(computeScore(i, e)) : void 0
+          },
+          i
+        );
+      })
+    }
+  );
+}
+var FALLBACK_COLORS = [
+  "oklch(0.65 0.18 230)",
+  // blue
+  "oklch(0.72 0.17 50)",
+  // amber
+  "oklch(0.68 0.17 155)",
+  // emerald
+  "oklch(0.62 0.21 25)",
+  // red
+  "oklch(0.65 0.20 290)",
+  // violet
+  "oklch(0.70 0.15 185)"
+  // teal
+];
+function CategoryBar({
+  segments,
+  height = 8,
+  showLabels = false,
+  valueFormatter,
+  className,
+  surface,
+  radius,
+  animated,
+  "aria-label": ariaLabel
+}) {
+  const sf = useSaasflareProps({ surface, radius, animated });
+  const motion = useSaasflareMotion(sf.animated, springGentle);
+  const total = segments.reduce((sum, s) => sum + Math.max(0, s.value), 0);
+  if (total === 0 || segments.length === 0) return null;
+  const formatter = valueFormatter ?? ((p) => `${p.toFixed(p < 10 ? 1 : 0)}%`);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "category-bar",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
+      role: "group",
+      "aria-label": ariaLabel ?? "Category breakdown",
+      className: cn("w-full", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "category-bar-track",
+            className: "flex w-full overflow-hidden rounded-full bg-primary/10",
+            style: { height },
+            children: segments.map((seg, i) => {
+              const pct = Math.max(0, seg.value) / total * 100;
+              return /* @__PURE__ */ jsx(
+                m.div,
+                {
+                  "data-slot": "category-bar-segment",
+                  title: seg.label ? `${seg.label}: ${formatter(pct)}` : formatter(pct),
+                  initial: motion.disabled ? false : { width: 0 },
+                  animate: { width: `${pct}%` },
+                  transition: motion.transition,
+                  className: "h-full",
+                  style: {
+                    backgroundColor: seg.color ?? FALLBACK_COLORS[i % FALLBACK_COLORS.length]
+                  }
+                },
+                i
+              );
+            })
+          }
+        ),
+        showLabels && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "category-bar-labels",
+            className: "mt-2 flex w-full text-xs text-muted-foreground",
+            children: segments.map((seg, i) => {
+              const pct = Math.max(0, seg.value) / total * 100;
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "data-slot": "category-bar-label",
+                  style: { width: `${pct}%` },
+                  className: "flex min-w-0 items-center gap-1.5 truncate px-1",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        className: "size-2 shrink-0 rounded-full",
+                        style: {
+                          backgroundColor: seg.color ?? FALLBACK_COLORS[i % FALLBACK_COLORS.length]
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("span", { className: "truncate", children: [
+                      seg.label ? `${seg.label} ` : "",
+                      /* @__PURE__ */ jsx("span", { className: "text-foreground font-medium tabular-nums", children: formatter(pct) })
+                    ] })
+                  ]
+                },
+                i
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+}
+function flattenVisible(data, expanded) {
+  const out = [];
+  const walk = (nodes, depth, parentId) => {
+    for (const node of nodes) {
+      out.push({ node, depth, parentId });
+      if (node.children && expanded.has(node.id)) {
+        walk(node.children, depth + 1, node.id);
+      }
+    }
+  };
+  walk(data, 0, null);
+  return out;
+}
+function TreeView({
+  data,
+  expanded,
+  defaultExpanded,
+  onExpand,
+  selected,
+  defaultSelected,
+  onSelect,
+  className,
+  surface,
+  radius,
+  animated,
+  iconWeight
+}) {
+  const sf = useSaasflareProps({ surface, radius, animated, iconWeight });
+  const isExpandedControlled = expanded !== void 0;
+  const [internalExpanded, setInternalExpanded] = useState(
+    defaultExpanded ?? []
+  );
+  const expandedSet = useMemo(
+    () => new Set(isExpandedControlled ? expanded : internalExpanded),
+    [isExpandedControlled, expanded, internalExpanded]
+  );
+  const isSelectedControlled = selected !== void 0;
+  const [internalSelected, setInternalSelected] = useState(
+    defaultSelected ?? null
+  );
+  const currentSelected = isSelectedControlled ? selected : internalSelected;
+  const toggle = useCallback(
+    (id) => {
+      const next = new Set(expandedSet);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      const arr = Array.from(next);
+      if (!isExpandedControlled) setInternalExpanded(arr);
+      onExpand?.(arr);
+    },
+    [expandedSet, isExpandedControlled, onExpand]
+  );
+  const select = useCallback(
+    (id) => {
+      if (!isSelectedControlled) setInternalSelected(id);
+      onSelect?.(id);
+    },
+    [isSelectedControlled, onSelect]
+  );
+  const flat = useMemo(() => flattenVisible(data, expandedSet), [data, expandedSet]);
+  const handleKeyDown = (e, index) => {
+    const item = flat[index];
+    if (!item || item.node.disabled) return;
+    const moveTo = (i) => {
+      const target = flat[i];
+      if (!target) return;
+      select(target.node.id);
+      const el = e.currentTarget.parentElement?.querySelectorAll(
+        "[data-slot='tree-view-row']"
+      )[i];
+      el?.focus();
+    };
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        moveTo(Math.min(index + 1, flat.length - 1));
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        moveTo(Math.max(index - 1, 0));
+        break;
+      case "ArrowRight":
+        e.preventDefault();
+        if (item.node.children && !expandedSet.has(item.node.id)) {
+          toggle(item.node.id);
+        } else {
+          moveTo(index + 1);
+        }
+        break;
+      case "ArrowLeft":
+        e.preventDefault();
+        if (item.node.children && expandedSet.has(item.node.id)) {
+          toggle(item.node.id);
+        } else if (item.parentId) {
+          const parentIdx = flat.findIndex((f) => f.node.id === item.parentId);
+          if (parentIdx >= 0) moveTo(parentIdx);
+        }
+        break;
+      case "Home":
+        e.preventDefault();
+        moveTo(0);
+        break;
+      case "End":
+        e.preventDefault();
+        moveTo(flat.length - 1);
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        if (item.node.children) toggle(item.node.id);
+        select(item.node.id);
+        break;
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "tree-view",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
+      role: "tree",
+      className: cn("text-sm select-none", className),
+      children: flat.map(({ node, depth }, index) => {
+        const hasChildren = !!node.children?.length;
+        const isExpanded = expandedSet.has(node.id);
+        const isSelected = currentSelected === node.id;
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-slot": "tree-view-row",
+            role: "treeitem",
+            "aria-expanded": hasChildren ? isExpanded : void 0,
+            "aria-selected": isSelected,
+            "aria-level": depth + 1,
+            "aria-disabled": node.disabled || void 0,
+            tabIndex: isSelected || currentSelected === null && index === 0 ? 0 : -1,
+            onKeyDown: (e) => handleKeyDown(e, index),
+            onClick: () => {
+              if (node.disabled) return;
+              if (hasChildren) toggle(node.id);
+              select(node.id);
+            },
+            className: cn(
+              "flex h-7 cursor-pointer items-center gap-1 rounded px-1.5",
+              "transition-colors hover:bg-accent/40",
+              "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              isSelected && "bg-accent/60 text-foreground",
+              node.disabled && "pointer-events-none opacity-50"
+            ),
+            style: { paddingLeft: 6 + depth * 16 },
+            children: [
+              hasChildren ? /* @__PURE__ */ jsx(
+                CaretRightIcon,
+                {
+                  className: cn(
+                    "size-3.5 shrink-0 text-muted-foreground transition-transform duration-150",
+                    isExpanded && "rotate-90"
+                  )
+                }
+              ) : /* @__PURE__ */ jsx("span", { className: "size-3.5 shrink-0", "aria-hidden": "true" }),
+              node.icon !== void 0 && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center [&_svg]:size-4", children: node.icon }),
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: node.label })
+            ]
+          },
+          node.id
+        );
+      })
+    }
+  );
+}
+function useClipboard(resetMs = 2e3) {
+  const [copied, setCopied] = useState(false);
+  const [error, setError] = useState(null);
+  const timerRef = useRef(void 0);
+  const copy = useCallback(
+    async (text) => {
+      try {
+        await navigator.clipboard.writeText(text);
+        setCopied(true);
+        setError(null);
+        clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(() => setCopied(false), resetMs);
+      } catch (err) {
+        setCopied(false);
+        setError(err instanceof Error ? err.message : "Failed to copy");
+      }
+    },
+    [resetMs]
+  );
+  return { copy, copied, error };
+}
+function CopyIcon(props) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
+        /* @__PURE__ */ jsx("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
+      ]
+    }
+  );
+}
+function CodeBlock({
+  code,
+  highlighted,
+  language,
+  filename,
+  showLineNumbers = false,
+  hideHeader = false,
+  hideCopyButton = false,
+  className,
+  surface,
+  radius,
+  animated
+}) {
+  const sf = useSaasflareProps({ surface, radius, animated });
+  const { copy, copied } = useClipboard();
+  const plainText = code ?? "";
+  const lines = useMemo(
+    () => showLineNumbers && code ? code.split("\n") : null,
+    [code, showLineNumbers]
+  );
+  const onCopy = () => {
+    const text = code ?? (highlighted ? highlighted.replace(/<[^>]+>/g, "") : "");
+    copy(text);
+  };
+  const showHeader = !hideHeader && (filename || language);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "code-block",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
+      className: cn(
+        "group relative overflow-hidden rounded-lg border bg-card text-card-foreground",
+        className
+      ),
+      children: [
+        showHeader && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "code-block-header",
+            className: "flex items-center justify-between gap-2 border-b bg-muted/40 px-3 py-1.5 text-xs",
+            children: /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+              filename && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "data-slot": "code-block-filename",
+                  className: "truncate font-mono text-muted-foreground",
+                  children: filename
+                }
+              ),
+              language && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "data-slot": "code-block-language",
+                  className: "rounded-sm bg-primary/10 px-1.5 py-0.5 font-mono text-[10px] uppercase tracking-wide text-muted-foreground",
+                  children: language
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          !hideCopyButton && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-slot": "code-block-copy",
+              onClick: onCopy,
+              "aria-label": copied ? "Copied" : "Copy code",
+              className: cn(
+                "absolute right-2 top-2 z-10 inline-flex size-7 items-center justify-center rounded-md border bg-background/80 text-muted-foreground shadow-xs backdrop-blur-sm",
+                "transition-colors hover:text-foreground hover:bg-background",
+                "opacity-0 group-hover:opacity-100 focus-visible:opacity-100",
+                "[&_svg]:size-3.5"
+              ),
+              children: copied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {})
+            }
+          ),
+          highlighted ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "code-block-content",
+              className: cn(
+                "overflow-x-auto p-4 text-sm font-mono leading-relaxed",
+                "[&_pre]:!bg-transparent [&_pre]:!p-0 [&_pre]:!m-0"
+              ),
+              dangerouslySetInnerHTML: { __html: highlighted }
+            }
+          ) : lines ? /* @__PURE__ */ jsx(
+            "pre",
+            {
+              "data-slot": "code-block-content",
+              className: "overflow-x-auto p-4 text-sm font-mono leading-relaxed",
+              children: /* @__PURE__ */ jsx("code", { children: lines.map((line, i) => /* @__PURE__ */ jsxs("span", { className: "grid grid-cols-[auto_1fr] gap-3", children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "data-slot": "code-block-line-number",
+                    "aria-hidden": "true",
+                    className: "select-none text-right text-muted-foreground/60 tabular-nums",
+                    children: i + 1
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { children: line || "\xA0" })
+              ] }, i)) })
+            }
+          ) : /* @__PURE__ */ jsx(
+            "pre",
+            {
+              "data-slot": "code-block-content",
+              className: "overflow-x-auto p-4 text-sm font-mono leading-relaxed",
+              children: /* @__PURE__ */ jsx("code", { children: plainText })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function BellIcon(props) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" }),
+        /* @__PURE__ */ jsx("path", { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0" })
+      ]
+    }
+  );
+}
+function NotificationCenter({
+  items,
+  title = "Notifications",
+  onItemClick,
+  onMarkRead,
+  onMarkAllRead,
+  emptyState,
+  limit,
+  triggerClassName,
+  contentClassName,
+  surface,
+  radius,
+  animated,
+  iconWeight
+}) {
+  const sf = useSaasflareProps({ surface, radius, animated, iconWeight });
+  const visible = typeof limit === "number" ? items.slice(0, limit) : items;
+  const unreadCount = items.filter((i) => !i.read).length;
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        intent: "neutral",
+        size: "icon",
+        "aria-label": `${title}${unreadCount > 0 ? ` (${unreadCount} unread)` : ""}`,
+        surface: sf.surface,
+        radius: sf.radius,
+        animated: sf.animated,
+        iconWeight: sf.iconWeight,
+        "data-slot": "notification-center-trigger",
+        className: cn("relative", triggerClassName),
+        children: [
+          /* @__PURE__ */ jsx(BellIcon, { className: "size-4" }),
+          unreadCount > 0 && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "notification-center-badge",
+              "aria-hidden": "true",
+              className: "absolute right-1 top-1 inline-flex min-w-4 items-center justify-center rounded-full bg-[oklch(0.62_0.21_25)] px-1 text-[10px] font-semibold leading-none text-white",
+              style: { height: 16 },
+              children: unreadCount > 99 ? "99+" : unreadCount
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      PopoverContent,
+      {
+        "data-slot": "notification-center-content",
+        align: "end",
+        className: cn("w-80 p-0", contentClassName),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b px-3 py-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: title }),
+              unreadCount > 0 && /* @__PURE__ */ jsx(Badge, { variant: "soft", intent: "primary", size: "sm", children: unreadCount })
+            ] }),
+            onMarkAllRead && unreadCount > 0 && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "data-slot": "notification-center-mark-all",
+                onClick: onMarkAllRead,
+                className: "text-xs text-muted-foreground transition-colors hover:text-foreground",
+                children: "Mark all as read"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "notification-center-list",
+              className: "max-h-96 overflow-y-auto",
+              children: visible.length === 0 ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-slot": "notification-center-empty",
+                  className: "px-4 py-8 text-center text-sm text-muted-foreground",
+                  children: emptyState ?? "You're all caught up."
+                }
+              ) : visible.map((item) => {
+                const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+                  !item.read && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: "mt-1.5 size-1.5 shrink-0 rounded-full bg-primary"
+                    }
+                  ),
+                  item.icon !== void 0 && /* @__PURE__ */ jsx("span", { className: "mt-0.5 flex shrink-0 items-center [&_svg]:size-4 text-muted-foreground", children: item.icon }),
+                  /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-foreground", children: item.title }),
+                    item.description !== void 0 && /* @__PURE__ */ jsx("p", { className: "line-clamp-2 text-xs text-muted-foreground", children: item.description }),
+                    item.timestamp && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-[10px] uppercase tracking-wider text-muted-foreground/70", children: item.timestamp })
+                  ] }),
+                  !item.read && onMarkRead && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "data-slot": "notification-center-mark",
+                      onClick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        onMarkRead(item.id);
+                      },
+                      "aria-label": "Mark as read",
+                      className: "shrink-0 text-[10px] text-muted-foreground transition-colors hover:text-foreground",
+                      children: "\u2713"
+                    }
+                  )
+                ] });
+                const rowClass = cn(
+                  "flex items-start gap-2 border-b px-3 py-2.5 last:border-b-0",
+                  "transition-colors hover:bg-accent/40",
+                  !item.read && "bg-primary/5"
+                );
+                const onClick = () => onItemClick?.(item);
+                return item.href ? /* @__PURE__ */ jsx(
+                  "a",
+                  {
+                    href: item.href,
+                    "data-slot": "notification-center-item",
+                    "data-read": String(!!item.read),
+                    onClick,
+                    className: rowClass,
+                    children: inner
+                  },
+                  item.id
+                ) : /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "data-slot": "notification-center-item",
+                    "data-read": String(!!item.read),
+                    onClick,
+                    className: cn(rowClass, "w-full text-left"),
+                    children: inner
+                  },
+                  item.id
+                );
+              })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function EmptyState({
+  icon,
+  title,
+  description,
+  action,
+  className,
+  surface,
+  radius,
+  animated,
+  ...props
+}) {
+  const sf = useSaasflareProps({ surface, radius, animated });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      "data-slot": "empty-state",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
+      className: cn(
+        "flex flex-col items-center justify-center gap-4 py-12 text-center",
+        className
+      ),
+      children: [
+        icon && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground [&_svg]:size-12", children: icon }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "max-w-sm text-sm text-muted-foreground", children: description })
+        ] }),
+        action && /* @__PURE__ */ jsx("div", { className: "mt-2", children: action })
+      ]
+    }
+  );
+}
+function SearchField({
+  className,
+  loading = false,
+  onClear,
+  value,
+  surface,
+  radius,
+  animated,
+  iconWeight,
+  ...props
+}) {
+  const sf = useSaasflareProps({ surface, radius, animated, iconWeight });
+  const hasValue = typeof value === "string" ? value.length > 0 : false;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "search-field",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
+      className: cn("relative", className),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: loading ? /* @__PURE__ */ jsx(CircleNotchIcon, { className: "size-4 animate-spin", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(MagnifyingGlassIcon, { weight: sf.iconWeight, className: "size-4", "aria-hidden": "true" }) }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "search",
+            "data-slot": "search-field-input",
+            className: "h-9 w-full rounded-md border border-input bg-background pl-9 pr-9 text-sm outline-none transition-colors placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50",
+            value,
+            ...props
+          }
+        ),
+        hasValue && onClear && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "data-slot": "search-field-clear",
+            onClick: onClear,
+            className: "absolute right-2 top-1/2 -translate-y-1/2 rounded-sm p-0.5 text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring",
+            "aria-label": "Clear search",
+            children: /* @__PURE__ */ jsx(XIcon, { weight: sf.iconWeight, className: "size-3.5" })
+          }
+        )
+      ]
+    }
+  );
+}
+function SettingsSection({
+  label,
+  description,
+  className,
+  children,
+  surface,
+  radius,
+  animated,
+  ...props
+}) {
+  const sf = useSaasflareProps({ surface, radius, animated });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      "data-slot": "settings-section",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
+      className: cn(
+        "flex flex-col gap-3 py-4 sm:flex-row sm:items-center sm:justify-between sm:gap-6",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: label }),
+          description && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: description })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "shrink-0", children })
+      ]
+    }
+  );
+}
+function PricingCard({
+  name,
+  price,
+  period,
+  description,
+  features,
+  cta,
+  featured = false,
+  className,
+  surface,
+  radius,
+  animated,
+  iconWeight,
+  ...props
+}) {
+  const sf = useSaasflareProps({ surface, radius, animated, iconWeight });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      "data-slot": "pricing-card",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
+      className: cn(
+        "relative flex flex-col rounded-xl border bg-card p-6 text-card-foreground shadow-sm",
+        featured && "border-primary shadow-md ring-1 ring-primary/20",
+        className
+      ),
+      children: [
+        featured && /* @__PURE__ */ jsx("div", { className: "absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-primary px-3 py-0.5 text-xs font-medium text-primary-foreground", children: "Recommended" }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: name }),
+          description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-baseline gap-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-3xl font-bold tracking-tight", children: price }),
+          period && /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
+            "/",
+            period
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("ul", { className: "mt-6 space-y-2.5", role: "list", children: features.map((feature) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm", children: [
+          /* @__PURE__ */ jsx(CheckIcon, { weight: sf.iconWeight, className: "mt-0.5 size-4 shrink-0 text-success", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { children: feature })
+        ] }, feature)) }),
+        cta && /* @__PURE__ */ jsx("div", { className: "mt-6", children: cta })
+      ]
+    }
+  );
+}
+function DataToolbar({ className, surface, radius, animated, ...props }) {
+  const sf = useSaasflareProps({ surface, radius, animated });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      "data-slot": "data-toolbar",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
+      className: cn(
         "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
         className
       )
@@ -6374,6 +8268,68 @@ function DataToolbarActions({ className, ...props }) {
     }
   );
 }
+var DEFAULT_COLORS = [
+  "hsl(28 90% 75%)",
+  // peach (top-left)
+  "hsl(220 85% 65%)",
+  // blue  (right)
+  "hsl(280 70% 75%)"
+  // violet (bottom-left)
+];
+function AuroraBackground({
+  colors = DEFAULT_COLORS,
+  intensity = 0.55,
+  className,
+  children,
+  surface,
+  radius,
+  animated,
+  ...props
+}) {
+  const sf = useSaasflareProps({ surface, radius, animated });
+  const blobStyle = (color) => ({
+    background: `radial-gradient(circle, ${color} 0%, transparent 65%)`,
+    opacity: intensity
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      "data-slot": "aurora-background",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
+      className: cn("relative isolate overflow-hidden", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "aurora-blob aurora-blob-1 pointer-events-none absolute -top-1/4 -left-1/4 size-[55%] rounded-full blur-3xl dark:opacity-50",
+            style: blobStyle(colors[0])
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "aurora-blob aurora-blob-2 pointer-events-none absolute top-0 -right-1/4 h-full w-[55%] rounded-full blur-3xl dark:opacity-50",
+            style: blobStyle(colors[1])
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "aurora-blob aurora-blob-3 pointer-events-none absolute -bottom-1/4 -left-1/4 size-[50%] rounded-full blur-3xl dark:opacity-50",
+            style: blobStyle(colors[2])
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "relative z-10", children })
+      ]
+    }
+  );
+}
 
 // src/types/theme-props.ts
 var PALETTES = [
@@ -6394,11 +8350,14 @@ var PALETTES = [
   { id: "honey", name: "Honey" },
   { id: "teal", name: "Teal" },
   { id: "iris", name: "Iris" },
-  { id: "ruby", name: "Ruby" }
+  { id: "ruby", name: "Ruby" },
+  { id: "colorful", name: "Colorful" },
+  { id: "craivo", name: "Craivo" }
 ];
 var STYLES = [
   { id: "flat", name: "Flat" },
-  { id: "glass", name: "Glass" }
+  { id: "glass", name: "Glass" },
+  { id: "clay", name: "Clay" }
 ];
 var RADII = [
   { id: "sharp", name: "Sharp" },
@@ -6412,8 +8371,8 @@ function ScrollToTopButton({
   className,
   ...sfProps
 }) {
-  const { animated, surface } = useSaasflareProps(sfProps);
-  const [isVisible, setIsVisible] = useState(false);
+  const { animated, surface, iconWeight } = useSaasflareProps(sfProps);
+  const [isVisible2, setIsVisible] = useState(false);
   const finalId = useMemo(() => scrollContainerId ?? null, [scrollContainerId]);
   const getContainer = useCallback(() => {
     if (finalId) {
@@ -6443,9 +8402,9 @@ function ScrollToTopButton({
       container.scrollTo({ top: 0, behavior });
     }
   };
-  const surfaceClass = surface === "glass" ? "bg-primary/85 text-primary-foreground backdrop-blur-md border border-[oklch(1_0_0_/_0.15)] shadow-[var(--surface-shadow)]" : "bg-primary text-primary-foreground shadow-lg";
+  const surfaceClass = surface === "glass" ? "bg-primary/85 text-primary-foreground backdrop-blur-md border border-[oklch(1_0_0_/_0.15)] shadow-[var(--surface-shadow)]" : surface === "clay" ? "bg-primary text-primary-foreground border-0 shadow-[var(--surface-shadow)] active:translate-y-px" : "bg-primary text-primary-foreground shadow-lg";
   const duration = animated ? 0.3 : 0;
-  return /* @__PURE__ */ jsx(AnimatePresence, { children: isVisible && /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: isVisible2 && /* @__PURE__ */ jsx(
     m.button,
     {
       onClick: scrollToTop,
@@ -6459,25 +8418,170 @@ function ScrollToTopButton({
         surfaceClass,
         className
       ),
-      children: /* @__PURE__ */ jsx(ArrowUpIcon, { className: "h-5 w-5" })
+      children: /* @__PURE__ */ jsx(ArrowUpIcon, { weight: iconWeight, className: "h-5 w-5" })
     }
   ) });
 }
+function StatefulButton({
+  loading = false,
+  loadingText,
+  disabled,
+  children,
+  ...rest
+}) {
+  const label = loading && loadingText !== void 0 ? loadingText : children;
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      ...rest,
+      disabled: disabled || loading,
+      "aria-busy": loading || void 0,
+      children: [
+        loading && /* @__PURE__ */ jsx(CircleNotchIcon, { className: "animate-spin", "aria-hidden": "true" }),
+        label
+      ]
+    }
+  );
+}
+var PROVIDERS = [
+  "google",
+  "github",
+  "apple",
+  "microsoft",
+  "x",
+  "discord",
+  "facebook",
+  "linkedin",
+  "medium",
+  "slack",
+  "reddit",
+  "paypal",
+  "stripe",
+  "gitlab",
+  "dribbble",
+  "tiktok"
+];
+var PROVIDER_LABELS = {
+  google: "Google",
+  github: "GitHub",
+  apple: "Apple",
+  microsoft: "Microsoft",
+  x: "X",
+  discord: "Discord",
+  facebook: "Facebook",
+  linkedin: "LinkedIn",
+  medium: "Medium",
+  slack: "Slack",
+  reddit: "Reddit",
+  paypal: "PayPal",
+  stripe: "Stripe",
+  gitlab: "GitLab",
+  dribbble: "Dribbble",
+  tiktok: "TikTok"
+};
+var PROVIDER_ICONS = {
+  google: GoogleLogoIcon,
+  github: GithubLogoIcon,
+  apple: AppleLogoIcon,
+  microsoft: MicrosoftOutlookLogoIcon,
+  x: XLogoIcon,
+  discord: DiscordLogoIcon,
+  facebook: FacebookLogoIcon,
+  linkedin: LinkedinLogoIcon,
+  medium: MediumLogoIcon,
+  slack: SlackLogoIcon,
+  reddit: RedditLogoIcon,
+  paypal: PaypalLogoIcon,
+  stripe: StripeLogoIcon,
+  gitlab: GitlabLogoIcon,
+  dribbble: DribbbleLogoIcon,
+  tiktok: TiktokLogoIcon
+};
+function SocialAuthButton({
+  provider,
+  label,
+  variant = "outline",
+  intent = "neutral",
+  fullWidth = false,
+  surface,
+  radius,
+  animated,
+  iconWeight,
+  children,
+  ...rest
+}) {
+  const isColorful = iconWeight === "colorful";
+  const sf = useSaasflareProps({
+    surface,
+    radius,
+    animated,
+    iconWeight: isColorful ? void 0 : iconWeight
+  });
+  const hasChildren = children !== void 0 && children !== null && children !== "";
+  const text = hasChildren ? children : label ?? `Continue with ${PROVIDER_LABELS[provider]}`;
+  const Icon2 = PROVIDER_ICONS[provider];
+  const resolvedWeight = isColorful ? "colorful" : sf.iconWeight;
+  return /* @__PURE__ */ jsxs(
+    StatefulButton,
+    {
+      "data-provider": provider,
+      "data-icon-weight": resolvedWeight,
+      variant,
+      intent,
+      fullWidth,
+      surface: sf.surface,
+      radius: sf.radius,
+      animated: sf.animated,
+      iconWeight: sf.iconWeight,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(Icon2, { weight: resolvedWeight, className: "size-4" }),
+        text
+      ]
+    }
+  );
+}
+var GoogleAuthButton = (props) => /* @__PURE__ */ jsx(SocialAuthButton, { provider: "google", ...props });
+var GitHubAuthButton = (props) => /* @__PURE__ */ jsx(SocialAuthButton, { provider: "github", ...props });
+var AppleAuthButton = (props) => /* @__PURE__ */ jsx(SocialAuthButton, { provider: "apple", ...props });
+var MicrosoftAuthButton = (props) => /* @__PURE__ */ jsx(SocialAuthButton, { provider: "microsoft", ...props });
+var XAuthButton = (props) => /* @__PURE__ */ jsx(SocialAuthButton, { provider: "x", ...props });
+var DiscordAuthButton = (props) => /* @__PURE__ */ jsx(SocialAuthButton, { provider: "discord", ...props });
+var FacebookAuthButton = (props) => /* @__PURE__ */ jsx(SocialAuthButton, { provider: "facebook", ...props });
+var LinkedInAuthButton = (props) => /* @__PURE__ */ jsx(SocialAuthButton, { provider: "linkedin", ...props });
+var MediumAuthButton = (props) => /* @__PURE__ */ jsx(SocialAuthButton, { provider: "medium", ...props });
+var SlackAuthButton = (props) => /* @__PURE__ */ jsx(SocialAuthButton, { provider: "slack", ...props });
+var RedditAuthButton = (props) => /* @__PURE__ */ jsx(SocialAuthButton, { provider: "reddit", ...props });
+var PayPalAuthButton = (props) => /* @__PURE__ */ jsx(SocialAuthButton, { provider: "paypal", ...props });
+var StripeAuthButton = (props) => /* @__PURE__ */ jsx(SocialAuthButton, { provider: "stripe", ...props });
+var GitLabAuthButton = (props) => /* @__PURE__ */ jsx(SocialAuthButton, { provider: "gitlab", ...props });
+var DribbbleAuthButton = (props) => /* @__PURE__ */ jsx(SocialAuthButton, { provider: "dribbble", ...props });
+var TikTokAuthButton = (props) => /* @__PURE__ */ jsx(SocialAuthButton, { provider: "tiktok", ...props });
 function ThemeModeToggle({
   showText = false,
-  text,
-  className
+  textLight = "Switch to Dark Mode",
+  textDark = "Switch to Light Mode",
+  className,
+  surface,
+  radius,
+  animated,
+  iconWeight,
+  initialResolvedTheme
 }) {
-  const { theme, setTheme } = useTheme();
+  const { setTheme, resolvedTheme } = useTheme();
+  const sf = useSaasflareProps({ surface, radius, animated, iconWeight });
   const [mounted, setMounted] = React5.useState(false);
   React5.useEffect(() => {
     setMounted(true);
   }, []);
-  if (!mounted) {
+  if (initialResolvedTheme === void 0 && !mounted) {
     return null;
   }
+  const effectiveResolved = resolvedTheme ?? initialResolvedTheme;
+  const isDark = effectiveResolved === "dark";
+  const label = isDark ? textDark : textLight;
   const toggleTheme = () => {
-    setTheme(theme === "dark" ? "light" : "dark");
+    setTheme(isDark ? "light" : "dark");
   };
   return /* @__PURE__ */ jsxs(
     Button,
@@ -6487,10 +8591,193 @@ function ThemeModeToggle({
       size: showText ? "sm" : "icon",
       className: cn("cursor-pointer", className),
       onClick: toggleTheme,
+      "aria-label": label,
+      children: [
+        isDark ? /* @__PURE__ */ jsx(
+          SunIcon,
+          {
+            weight: sf.iconWeight,
+            "aria-hidden": "true",
+            className: "h-[1.2rem] w-[1.2rem]"
+          }
+        ) : /* @__PURE__ */ jsx(
+          MoonIcon,
+          {
+            weight: sf.iconWeight,
+            "aria-hidden": "true",
+            className: "h-[1.2rem] w-[1.2rem]"
+          }
+        ),
+        showText && /* @__PURE__ */ jsx("span", { className: "font-normal", children: label })
+      ]
+    }
+  );
+}
+var DEFAULT_LABELS = {
+  light: "Light mode",
+  dark: "Dark mode",
+  system: "System mode"
+};
+var RADIUS_CLASS = {
+  sharp: "rounded-none",
+  soft: "rounded-md",
+  rounded: "rounded-lg",
+  pill: "rounded-full"
+};
+var RADIUS_LEFT_CLASS = {
+  sharp: "first:rounded-l-none",
+  soft: "first:rounded-l-md",
+  rounded: "first:rounded-l-lg",
+  pill: "first:rounded-l-full"
+};
+var RADIUS_RIGHT_CLASS = {
+  sharp: "last:rounded-r-none",
+  soft: "last:rounded-r-md",
+  rounded: "last:rounded-r-lg",
+  pill: "last:rounded-r-full"
+};
+function ThemeModeMultiToggle({
+  labels,
+  className,
+  size = "default",
+  appearance = "icon",
+  surface,
+  radius,
+  animated,
+  iconWeight,
+  initialMode
+}) {
+  const { theme, setTheme, resolvedTheme } = useTheme();
+  const sf = useSaasflareProps({ surface, animated, iconWeight });
+  const [mounted, setMounted] = React5.useState(false);
+  React5.useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (initialMode === void 0 && !mounted) {
+    return null;
+  }
+  const resolvedRadius = radius ?? "pill";
+  const resolved = theme === "light" || theme === "dark" || theme === "system" ? theme : initialMode ?? "system";
+  const dataResolvedTheme = resolvedTheme ?? (initialMode === "dark" || initialMode === "light" ? initialMode : void 0);
+  const baseLabel = (mode) => labels?.[mode] ?? DEFAULT_LABELS[mode];
+  const segmentLabel = (mode) => {
+    const base = baseLabel(mode);
+    if (mode === "system" && dataResolvedTheme && dataResolvedTheme !== "system") {
+      return `${base} (currently ${dataResolvedTheme})`;
+    }
+    return base;
+  };
+  return /* @__PURE__ */ jsxs(
+    ToggleGroup,
+    {
+      type: "single",
+      value: resolved,
+      onValueChange: (next) => {
+        if (next === "light" || next === "dark" || next === "system") {
+          setTheme(next);
+        }
+      },
+      "data-slot": "theme-mode-multi-toggle",
+      "data-surface": sf.surface,
+      "data-radius": resolvedRadius,
+      "data-animated": String(sf.animated),
+      "data-appearance": appearance,
+      "data-resolved-theme": dataResolvedTheme,
+      suppressHydrationWarning: true,
+      className: cn(
+        "inline-flex items-center bg-muted",
+        RADIUS_CLASS[resolvedRadius],
+        appearance === "button" ? "gap-0 p-0" : "gap-1 p-1",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          ThemeModeSegment,
+          {
+            mode: "light",
+            size,
+            appearance,
+            radius: resolvedRadius,
+            label: segmentLabel("light"),
+            children: /* @__PURE__ */ jsx(SunIcon, { weight: sf.iconWeight, "aria-hidden": "true" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ThemeModeSegment,
+          {
+            mode: "dark",
+            size,
+            appearance,
+            radius: resolvedRadius,
+            label: segmentLabel("dark"),
+            children: /* @__PURE__ */ jsx(MoonIcon, { weight: sf.iconWeight, "aria-hidden": "true" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ThemeModeSegment,
+          {
+            mode: "system",
+            size,
+            appearance,
+            radius: resolvedRadius,
+            label: segmentLabel("system"),
+            children: /* @__PURE__ */ jsx(MonitorIcon, { weight: sf.iconWeight, "aria-hidden": "true" })
+          }
+        )
+      ]
+    }
+  );
+}
+function ThemeModeSegment({
+  mode,
+  size,
+  appearance,
+  radius,
+  label,
+  children
+}) {
+  const stateClasses = cn(
+    "relative cursor-pointer text-muted-foreground transition-all",
+    "hover:bg-transparent hover:text-foreground",
+    "data-[state=on]:z-10 data-[state=on]:bg-background data-[state=on]:text-foreground",
+    "data-[state=on]:scale-110 data-[state=on]:shadow-md",
+    "data-[state=on]:ring-1 data-[state=on]:ring-border",
+    "data-[state=on]:[&_svg]:scale-110"
+  );
+  if (appearance === "button") {
+    const sizeClass2 = size === "sm" ? "h-7 px-3 [&_svg:not([class*='size-'])]:size-3.5" : size === "lg" ? "h-10 px-5 [&_svg:not([class*='size-'])]:size-5" : "h-8 px-4 [&_svg:not([class*='size-'])]:size-4";
+    return /* @__PURE__ */ jsxs(
+      ToggleGroupItem,
+      {
+        value: mode,
+        "aria-label": label,
+        title: label,
+        className: cn(
+          stateClasses,
+          "rounded-none p-0 flex-1 min-w-0",
+          RADIUS_LEFT_CLASS[radius],
+          RADIUS_RIGHT_CLASS[radius],
+          sizeClass2
+        ),
+        children: [
+          children,
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: label })
+        ]
+      }
+    );
+  }
+  const iconRadiusClass = appearance === "icon-inherit" ? RADIUS_CLASS[radius] : "rounded-full";
+  const sizeClass = size === "sm" ? "size-7 [&_svg:not([class*='size-'])]:size-3.5" : size === "lg" ? "size-10 [&_svg:not([class*='size-'])]:size-5" : "size-8 [&_svg:not([class*='size-'])]:size-4";
+  return /* @__PURE__ */ jsxs(
+    ToggleGroupItem,
+    {
+      value: mode,
+      "aria-label": label,
+      title: label,
+      className: cn(stateClasses, "p-0", iconRadiusClass, sizeClass),
       children: [
-        /* @__PURE__ */ jsx(Sun, { className: "h-[1.2rem] w-[1.2rem] hidden dark:block" }),
-        /* @__PURE__ */ jsx(Moon, { className: "h-[1.2rem] w-[1.2rem] dark:hidden" }),
-        /* @__PURE__ */ jsx("span", { className: cn(!showText && "sr-only", "font-normal"), children: text ?? (theme === "dark" ? "Switch to Light Mode" : "Switch to Dark Mode") })
+        children,
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: label })
       ]
     }
   );
@@ -6634,4 +8921,4 @@ function UserAvatar({ src, name, initials, size = "md", className }) {
   ] });
 }
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AnimatedTooltip, AspectRatio, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxList, ComboboxSeparator, ComboboxTrigger, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataToolbar, DataToolbarActions, DataToolbarFilters, DataToolbarSearch, DirectionProvider2 as DirectionProvider, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, Icons, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Item9 as Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label5 as Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MetricCard, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, PALETTES, PageHeader, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PricingCard, Progress, RADII, RadioGroup4 as RadioGroup, RadioGroupItem, STYLES, ScrollArea, ScrollBar, ScrollToTopButton, SearchField, SectionCard, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator5 as Separator, SettingsSection, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeModeToggle, Toaster3 as Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopLoadingBar, TypewriterText, UserAvatar, badgeVariants, buttonGroupVariants, navigationMenuTriggerStyle, toggleVariants, useDirection2 as useDirection, useDisclosure, useFormField, useIsMobile, useMeasure, usePagination, useSidebar };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AnimatedTooltip, AppleAuthButton, AspectRatio, AuroraBackground, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BarList, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Callout, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CategoryBar, Checkbox, CodeBlock, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxList, ComboboxSeparator, ComboboxTrigger, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataToolbar, DataToolbarActions, DataToolbarFilters, DataToolbarSearch, DatePicker, DateRangePicker, DirectionProvider2 as DirectionProvider, DiscordAuthButton, DribbbleAuthButton, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Dropzone, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, EmptyTitle, FacebookAuthButton, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GitHubAuthButton, GitLabAuthButton, GoogleAuthButton, HoverCard, HoverCardContent, HoverCardTrigger, Icons, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Item9 as Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label5 as Label, LinkedInAuthButton, MediumAuthButton, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MetricCard, MicrosoftAuthButton, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NotificationCenter, NumberInput, PALETTES, PageHeader, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PayPalAuthButton, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PricingCard, Progress, ProgressCircle, RADII, RadioGroup4 as RadioGroup, RadioGroupItem, Rating, RedditAuthButton, PROVIDERS as SOCIAL_AUTH_PROVIDERS, STYLES, ScrollArea, ScrollBar, ScrollToTopButton, SearchField, SectionCard, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator5 as Separator, SettingsSection, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, SlackAuthButton, Slider, SocialAuthButton, SparkChart, Spinner, StatefulButton, StripeAuthButton, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TagInput, Textarea, ThemeModeMultiToggle, ThemeModeToggle, TikTokAuthButton, Toaster3 as Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopLoadingBar, Tracker, TreeView, TypewriterText, UserAvatar, XAuthButton, badgeVariants, buttonGroupVariants, navigationMenuTriggerStyle, toggleVariants, useDirection2 as useDirection, useDisclosure, useFileDialog, useFocusTrap, useFormField, useInterval, useIsMobile, useMeasure, useMergedRef, usePagination, useSidebar };