@saasflare/ui 3.0.2 → 3.1.0

package/dist/index.mjs

@@ -1,11 +1,11 @@
 "use client";
-import { buttonVariants, Button, useSaasflareProps } from './chunk-ORB66UYT.mjs';
-export { Button, SaasflareProvider, SaasflareScript, SaasflareShell, SmoothScrollProvider, buttonVariants, useAnimation, useSaasflareProps, useSaasflareTheme } from './chunk-ORB66UYT.mjs';
-export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from './chunk-2DNKXA5A.mjs';
-import { useReducedMotion, noMotion, springGentle, springBouncy, spring } from './chunk-W53NTFPB.mjs';
-export { fadeIn, noMotion, scaleIn, slideDown, slideUp, spring, springBouncy, springGentle, springStiff, useReducedMotion } from './chunk-W53NTFPB.mjs';
-import { cn } from './chunk-BIU2MD4T.mjs';
-export { cn } from './chunk-BIU2MD4T.mjs';
+import { buttonVariants, Button } from './chunk-WPOOC2FX.mjs';
+export { Button, buttonVariants } from './chunk-WPOOC2FX.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 * as React5 from 'react';
 import React5__default, { useState, useCallback, useMemo, useRef, useEffect, Suspense } from 'react';
 import { m, useMotionValue, useSpring, useTransform, AnimatePresence } from 'motion/react';
@@ -177,19 +177,23 @@ function usePagination(options) {
   }, [activePage, safeTotal, siblings, boundaries]);
   return { activePage, range, setPage, next, previous, first, last };
 }
-function Card({ className, ...props }) {
-  const reduced = useReducedMotion();
+function Card({ className, surface, radius, animated, ...props }) {
+  const sf = useSaasflareProps({ surface, radius, animated });
+  const motion = useSaasflareMotion(sf.animated, springGentle);
   return /* @__PURE__ */ jsx(
     m.div,
     {
+      ...props,
       "data-slot": "card",
-      whileHover: reduced ? void 0 : { y: -2, boxShadow: "0 8px 30px rgba(0,0,0,0.08)" },
-      transition: reduced ? noMotion : springGentle,
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
+      whileHover: motion.disabled ? void 0 : { y: -2, boxShadow: "0 8px 30px rgba(0,0,0,0.08)" },
+      transition: motion.transition,
       className: cn(
         "flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm transition-[border-color] duration-300 hover:border-primary/20",
         className
-      ),
-      ...props
+      )
     }
   );
 }
@@ -293,24 +297,31 @@ function AlertDialogOverlay({
 function AlertDialogContent({
   className,
   children,
+  surface,
+  radius,
+  animated,
   ...props
 }) {
-  const reduced = useReducedMotion();
+  const sf = useSaasflareProps({ surface, radius, animated });
+  const motion = useSaasflareMotion(sf.animated, springBouncy);
   return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
     /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
     /* @__PURE__ */ jsx(
       AlertDialogPrimitive.Content,
       {
+        ...props,
         "data-slot": "alert-dialog-content",
         asChild: true,
-        ...props,
         children: /* @__PURE__ */ jsx(
           m.div,
           {
-            initial: reduced ? { opacity: 1 } : { opacity: 0, scale: 0.95, y: 10 },
+            "data-surface": sf.surface,
+            "data-radius": sf.radius,
+            "data-animated": String(sf.animated),
+            initial: motion.disabled ? { opacity: 1 } : { opacity: 0, scale: 0.95, y: 10 },
             animate: { opacity: 1, scale: 1, y: 0 },
-            exit: reduced ? { opacity: 0 } : { opacity: 0, scale: 0.95, y: 10 },
-            transition: reduced ? noMotion : springBouncy,
+            exit: motion.disabled ? { opacity: 0 } : { opacity: 0, scale: 0.95, y: 10 },
+            transition: motion.transition,
             className: cn(
               "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg sm:max-w-lg",
               className
@@ -401,14 +412,21 @@ function Accordion({
 }
 function AccordionItem({
   className,
+  surface,
+  radius,
+  animated,
   ...props
 }) {
+  const sf = useSaasflareProps({ surface, radius, animated });
   return /* @__PURE__ */ jsx(
     AccordionPrimitive.Item,
     {
+      ...props,
       "data-slot": "accordion-item",
-      className: cn("border-b last:border-b-0", className),
-      ...props
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
+      className: cn("border-b last:border-b-0", className)
     }
   );
 }
@@ -417,16 +435,17 @@ function AccordionTrigger({
   children,
   ...props
 }) {
-  const reduced = useReducedMotion();
+  const sf = useSaasflareProps();
+  const motion = useSaasflareMotion(sf.animated, springBouncy);
   return /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
     AccordionPrimitive.Trigger,
     {
+      ...props,
       "data-slot": "accordion-trigger",
       className: cn(
         "flex flex-1 cursor-pointer items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
         className
       ),
-      ...props,
       children: [
         children,
         /* @__PURE__ */ jsx(
@@ -434,7 +453,7 @@ function AccordionTrigger({
           {
             className: "pointer-events-none shrink-0 translate-y-0.5 text-muted-foreground",
             animate: { rotate: 0 },
-            transition: reduced ? { duration: 0 } : springBouncy,
+            transition: motion.transition,
             children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4" })
           }
         )
@@ -447,19 +466,20 @@ function AccordionContent({
   children,
   ...props
 }) {
-  const reduced = useReducedMotion();
+  const sf = useSaasflareProps();
+  const motion = useSaasflareMotion(sf.animated, { delay: 0.1, duration: 0.2 });
   return /* @__PURE__ */ jsx(
     AccordionPrimitive.Content,
     {
+      ...props,
       "data-slot": "accordion-content",
       className: "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
-      ...props,
       children: /* @__PURE__ */ jsx(
         m.div,
         {
-          initial: reduced ? false : { opacity: 0 },
+          initial: motion.disabled ? false : { opacity: 0 },
           animate: { opacity: 1 },
-          transition: reduced ? { duration: 0 } : { delay: 0.1, duration: 0.2 },
+          transition: motion.transition,
           className: cn("pt-0 pb-4", className),
           children
         }
@@ -470,19 +490,26 @@ function AccordionContent({
 function Tabs({
   className,
   orientation = "horizontal",
+  surface,
+  radius,
+  animated,
   ...props
 }) {
+  const sf = useSaasflareProps({ surface, radius, animated });
   return /* @__PURE__ */ jsx(
     TabsPrimitive.Root,
     {
+      ...props,
       "data-slot": "tabs",
       "data-orientation": orientation,
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
       orientation,
       className: cn(
         "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
         className
-      ),
-      ...props
+      )
     }
   );
 }
@@ -507,7 +534,8 @@ function TabsList({
   ...props
 }) {
   const listRef = React5.useRef(null);
-  const reduced = useReducedMotion();
+  const sf = useSaasflareProps();
+  const motion = useSaasflareMotion(sf.animated, spring);
   const [pos, setPos] = React5.useState(null);
   React5.useLayoutEffect(() => {
     const list = listRef.current;
@@ -567,7 +595,7 @@ function TabsList({
               width: pos.width,
               height: pos.height
             },
-            transition: reduced ? noMotion : spring,
+            transition: motion.transition,
             className: "pointer-events-none absolute top-0 left-0 rounded-md bg-background shadow-sm dark:border dark:border-input dark:bg-input/30",
             style: { zIndex: 0 }
           }
@@ -609,55 +637,73 @@ function TabsContent({
     }
   );
 }
-function Input({ className, type, ...props }) {
+function Input({ className, type, surface, radius, animated, ...props }) {
+  const sf = useSaasflareProps({ surface, radius, animated });
+  const motion = useSaasflareMotion(sf.animated, { type: "spring", stiffness: 300, damping: 20 });
   return /* @__PURE__ */ jsx(
     m.input,
     {
+      ...props,
       type,
       "data-slot": "input",
-      whileFocus: { boxShadow: "0 0 0 3px hsl(var(--ring) / 0.3)" },
-      transition: { type: "spring", stiffness: 300, damping: 20 },
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
+      whileFocus: motion.disabled ? void 0 : { boxShadow: "0 0 0 3px hsl(var(--ring) / 0.3)" },
+      transition: motion.transition,
       className: cn(
         "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,border-color] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
         "focus-visible:border-ring",
         "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
         className
-      ),
-      ...props
+      )
     }
   );
 }
-function Textarea({ className, ...props }) {
+function Textarea({ className, surface, radius, animated, ...props }) {
+  const sf = useSaasflareProps({ surface, radius, animated });
+  const motion = useSaasflareMotion(sf.animated, { type: "spring", stiffness: 300, damping: 20 });
   return /* @__PURE__ */ jsx(
     m.textarea,
     {
+      ...props,
       "data-slot": "textarea",
-      whileFocus: { boxShadow: "0 0 0 3px hsl(var(--ring) / 0.3)" },
-      transition: { type: "spring", stiffness: 300, damping: 20 },
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
+      whileFocus: motion.disabled ? void 0 : { boxShadow: "0 0 0 3px hsl(var(--ring) / 0.3)" },
+      transition: motion.transition,
       className: cn(
         "w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,border-color] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
         "field-sizing-content min-h-16",
         "focus-visible:border-ring",
         "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
         className
-      ),
-      ...props
+      )
     }
   );
 }
 function Checkbox({
   className,
+  surface,
+  radius,
+  animated,
   ...props
 }) {
+  const sf = useSaasflareProps({ surface, radius, animated });
+  const motion = useSaasflareMotion(sf.animated, springBouncy);
   return /* @__PURE__ */ jsx(
     CheckboxPrimitive.Root,
     {
+      ...props,
       "data-slot": "checkbox",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
       className: cn(
         "peer size-4 shrink-0 cursor-pointer rounded-lg border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary",
         className
       ),
-      ...props,
       children: /* @__PURE__ */ jsx(
         CheckboxPrimitive.Indicator,
         {
@@ -667,10 +713,10 @@ function Checkbox({
           children: /* @__PURE__ */ jsx(
             m.span,
             {
-              initial: { scale: 0, opacity: 0 },
+              initial: motion.disabled ? false : { scale: 0, opacity: 0 },
               animate: { scale: 1, opacity: 1 },
-              exit: { scale: 0, opacity: 0 },
-              transition: springBouncy,
+              exit: motion.disabled ? void 0 : { scale: 0, opacity: 0 },
+              transition: motion.transition,
               children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5" })
             }
           )
@@ -682,19 +728,27 @@ function Checkbox({
 function Switch({
   className,
   size = "default",
+  surface,
+  radius,
+  animated,
   ...props
 }) {
+  const sf = useSaasflareProps({ surface, radius, animated });
+  const motion = useSaasflareMotion(sf.animated, springBouncy);
   return /* @__PURE__ */ jsx(
     SwitchPrimitive.Root,
     {
+      ...props,
       "data-slot": "switch",
       "data-size": size,
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
       className: cn(
         "peer group/switch inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80",
         "transition-colors duration-200",
         className
       ),
-      ...props,
       children: /* @__PURE__ */ jsx(
         SwitchPrimitive.Thumb,
         {
@@ -704,8 +758,8 @@ function Switch({
             m.span,
             {
               className: "pointer-events-none block rounded-full bg-background ring-0 group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground",
-              layout: true,
-              transition: springBouncy
+              layout: motion.disabled ? false : true,
+              transition: motion.transition
             }
           )
         }
@@ -716,25 +770,32 @@ function Switch({
 function Progress({
   className,
   value,
+  surface,
+  radius,
+  animated,
   ...props
 }) {
-  const reduced = useReducedMotion();
+  const sf = useSaasflareProps({ surface, radius, animated });
+  const motion = useSaasflareMotion(sf.animated, spring);
   return /* @__PURE__ */ jsx(
     ProgressPrimitive.Root,
     {
+      ...props,
       "data-slot": "progress",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
       className: cn(
         "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
         className
       ),
-      ...props,
       children: /* @__PURE__ */ jsx(ProgressPrimitive.Indicator, { "data-slot": "progress-indicator", asChild: true, children: /* @__PURE__ */ jsx(
         m.div,
         {
           className: "h-full bg-primary",
-          initial: { width: "0%" },
+          initial: motion.disabled ? false : { width: "0%" },
           animate: { width: `${value ?? 0}%` },
-          transition: reduced ? noMotion : spring
+          transition: motion.transition
         }
       ) })
     }
@@ -771,9 +832,13 @@ function Badge({
   size = "md",
   intent: intentProp = "primary",
   asChild = false,
+  surface,
+  radius,
+  animated,
   ...props
 }) {
-  const reduced = useReducedMotion();
+  const sf = useSaasflareProps({ surface, radius, animated });
+  const motion = useSaasflareMotion(sf.animated, spring);
   let resolvedVariant = variantProp;
   let resolvedIntent = intentProp;
   const legacy = LEGACY_VARIANT_MAP[variantProp];
@@ -787,24 +852,30 @@ function Badge({
     return /* @__PURE__ */ jsx(
       Slot7.Root,
       {
+        ...props,
         "data-slot": "badge",
         "data-variant": resolvedVariant,
         "data-intent": resolvedIntent,
-        className: cn(badgeVariants({ variant: resolvedVariant, size }), className),
-        ...props
+        "data-surface": sf.surface,
+        "data-radius": sf.radius,
+        "data-animated": String(sf.animated),
+        className: cn(badgeVariants({ variant: resolvedVariant, size }), className)
       }
     );
   }
   return /* @__PURE__ */ jsx(
     m.span,
     {
+      ...props,
       "data-slot": "badge",
       "data-variant": resolvedVariant,
       "data-intent": resolvedIntent,
-      whileHover: reduced ? void 0 : { scale: 1.05 },
-      transition: reduced ? noMotion : spring,
-      className: cn(badgeVariants({ variant: resolvedVariant, size }), className),
-      ...props
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
+      whileHover: motion.disabled ? void 0 : { scale: 1.05 },
+      transition: motion.transition,
+      className: cn(badgeVariants({ variant: resolvedVariant, size }), className)
     }
   );
 }
@@ -835,22 +906,30 @@ function TooltipContent({
   className,
   sideOffset = 6,
   children,
+  surface,
+  radius,
+  animated,
   ...props
 }) {
+  const sf = useSaasflareProps({ surface, radius, animated });
+  const motion = useSaasflareMotion(sf.animated, springBouncy);
   return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
     TooltipPrimitive.Content,
     {
+      ...props,
       "data-slot": "tooltip-content",
       sideOffset,
       asChild: true,
-      ...props,
       children: /* @__PURE__ */ jsx(
         m.div,
         {
-          initial: { opacity: 0, scale: 0.92, y: 2 },
+          "data-surface": sf.surface,
+          "data-radius": sf.radius,
+          "data-animated": String(sf.animated),
+          initial: motion.disabled ? false : { opacity: 0, scale: 0.92, y: 2 },
           animate: { opacity: 1, scale: 1, y: 0 },
-          exit: { opacity: 0, scale: 0.92 },
-          transition: springBouncy,
+          exit: motion.disabled ? void 0 : { opacity: 0, scale: 0.92 },
+          transition: motion.transition,
           className: cn(
             "z-50 w-fit overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground shadow-md",
             className
@@ -880,23 +959,31 @@ function PopoverContent({
   className,
   align = "center",
   sideOffset = 4,
+  surface,
+  radius,
+  animated,
   ...props
 }) {
+  const sf = useSaasflareProps({ surface, radius, animated });
+  const motion = useSaasflareMotion(sf.animated, springBouncy);
   return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
     PopoverPrimitive.Content,
     {
+      ...props,
       "data-slot": "popover-content",
       align,
       sideOffset,
       asChild: true,
-      ...props,
       children: /* @__PURE__ */ jsx(
         m.div,
         {
-          initial: { opacity: 0, scale: 0.95, y: -4 },
+          "data-surface": sf.surface,
+          "data-radius": sf.radius,
+          "data-animated": String(sf.animated),
+          initial: motion.disabled ? false : { opacity: 0, scale: 0.95, y: -4 },
           animate: { opacity: 1, scale: 1, y: 0 },
-          exit: { opacity: 0, scale: 0.95, y: -4 },
-          transition: springBouncy,
+          exit: motion.disabled ? void 0 : { opacity: 0, scale: 0.95, y: -4 },
+          transition: motion.transition,
           className: cn(
             "z-50 w-72 origin-[var(--radix-popover-content-transform-origin)] rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden",
             className
@@ -920,23 +1007,31 @@ function HoverCardContent({
   className,
   align = "center",
   sideOffset = 4,
+  surface,
+  radius,
+  animated,
   ...props
 }) {
+  const sf = useSaasflareProps({ surface, radius, animated });
+  const motion = useSaasflareMotion(sf.animated, springBouncy);
   return /* @__PURE__ */ jsx(HoverCardPrimitive.Portal, { children: /* @__PURE__ */ jsx(
     HoverCardPrimitive.Content,
     {
+      ...props,
       "data-slot": "hover-card-content",
       align,
       sideOffset,
       asChild: true,
-      ...props,
       children: /* @__PURE__ */ jsx(
         m.div,
         {
-          initial: { opacity: 0, scale: 0.95, y: 4 },
+          "data-surface": sf.surface,
+          "data-radius": sf.radius,
+          "data-animated": String(sf.animated),
+          initial: motion.disabled ? false : { opacity: 0, scale: 0.95, y: 4 },
           animate: { opacity: 1, scale: 1, y: 0 },
-          exit: { opacity: 0, scale: 0.95 },
-          transition: springBouncy,
+          exit: motion.disabled ? void 0 : { opacity: 0, scale: 0.95 },
+          transition: motion.transition,
           className: cn(
             "z-50 w-64 origin-[var(--radix-hover-card-content-transform-origin)] rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden",
             className
@@ -989,21 +1084,29 @@ function SelectContent({
   className,
   children,
   position = "popper",
+  surface,
+  radius,
+  animated,
   ...props
 }) {
+  const sf = useSaasflareProps({ surface, radius, animated });
+  const motion = useSaasflareMotion(sf.animated, springBouncy);
   return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx(
     SelectPrimitive.Content,
     {
+      ...props,
       "data-slot": "select-content",
       position,
       asChild: true,
-      ...props,
       children: /* @__PURE__ */ jsxs(
         m.div,
         {
-          initial: { opacity: 0, scale: 0.96, y: -4 },
+          "data-surface": sf.surface,
+          "data-radius": sf.radius,
+          "data-animated": String(sf.animated),
+          initial: motion.disabled ? false : { opacity: 0, scale: 0.96, y: -4 },
           animate: { opacity: 1, scale: 1, y: 0 },
-          transition: springBouncy,
+          transition: motion.transition,
           className: cn(
             "relative z-50 max-h-[min(var(--radix-select-content-available-height),24rem)] min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md",
             position === "popper" && "w-full min-w-[var(--radix-select-trigger-width)]",
@@ -1124,22 +1227,30 @@ function DropdownMenuRadioGroup({ ...props }) {
 function DropdownMenuContent({
   className,
   sideOffset = 4,
+  surface,
+  radius,
+  animated,
   ...props
 }) {
+  const sf = useSaasflareProps({ surface, radius, animated });
+  const motion = useSaasflareMotion(sf.animated, springBouncy);
   return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
     DropdownMenuPrimitive.Content,
     {
+      ...props,
       "data-slot": "dropdown-menu-content",
       sideOffset,
       asChild: true,
-      ...props,
       children: /* @__PURE__ */ jsx(
         m.div,
         {
-          initial: { opacity: 0, scale: 0.95, y: -4 },
+          "data-surface": sf.surface,
+          "data-radius": sf.radius,
+          "data-animated": String(sf.animated),
+          initial: motion.disabled ? false : { opacity: 0, scale: 0.95, y: -4 },
           animate: { opacity: 1, scale: 1, y: 0 },
-          exit: { opacity: 0, scale: 0.95, y: -4 },
-          transition: springBouncy,
+          exit: motion.disabled ? void 0 : { opacity: 0, scale: 0.95, y: -4 },
+          transition: motion.transition,
           className: cn(
             "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] origin-[var(--radix-dropdown-menu-content-transform-origin)] overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
             className
@@ -1300,14 +1411,22 @@ function SheetContent({
   children,
   side = "right",
   showCloseButton = true,
+  surface,
+  radius,
+  animated,
   ...props
 }) {
+  const sf = useSaasflareProps({ surface, radius, animated });
   return /* @__PURE__ */ jsxs(SheetPortal, { children: [
     /* @__PURE__ */ jsx(SheetOverlay, {}),
     /* @__PURE__ */ jsxs(
       SheetPrimitive.Content,
       {
+        ...props,
         "data-slot": "sheet-content",
+        "data-surface": sf.surface,
+        "data-radius": sf.radius,
+        "data-animated": String(sf.animated),
         className: cn(
           "fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
           side === "right" && "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
@@ -1316,7 +1435,6 @@ function SheetContent({
           side === "bottom" && "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
           className
         ),
-        ...props,
         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: [
@@ -1380,8 +1498,13 @@ function Slider({
   value,
   min = 0,
   max = 100,
+  surface,
+  radius,
+  animated,
   ...props
 }) {
+  const sf = useSaasflareProps({ surface, radius, animated });
+  const motion = useSaasflareMotion(sf.animated, springBouncy);
   const _values = React5.useMemo(
     () => value ?? defaultValue ?? [min],
     [value, defaultValue, min]
@@ -1389,7 +1512,11 @@ function Slider({
   return /* @__PURE__ */ jsxs(
     SliderPrimitive.Root,
     {
+      ...props,
       "data-slot": "slider",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
       defaultValue,
       value,
       min,
@@ -1398,7 +1525,6 @@ function Slider({
         "relative flex w-full touch-none items-center select-none data-[orientation=horizontal]:h-5 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-5 data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col data-[disabled]:opacity-50",
         className
       ),
-      ...props,
       children: [
         /* @__PURE__ */ jsx(
           SliderPrimitive.Track,
@@ -1423,9 +1549,9 @@ function Slider({
               m.span,
               {
                 className: "block size-4 shrink-0 cursor-grab rounded-full border border-primary/50 bg-background shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring active:cursor-grabbing",
-                whileHover: { scale: 1.2 },
-                whileTap: { scale: 0.9 },
-                transition: springBouncy
+                whileHover: motion.disabled ? void 0 : { scale: 1.2 },
+                whileTap: motion.disabled ? void 0 : { scale: 0.9 },
+                transition: motion.transition
               }
             )
           },
@@ -1447,8 +1573,12 @@ function Alert({
   className,
   intent: intentProp,
   variant,
+  surface,
+  radius,
+  animated,
   ...props
 }) {
+  const sf = useSaasflareProps({ surface, radius, animated });
   let resolvedIntent = intentProp ?? "neutral";
   if (!intentProp && variant === "destructive") {
     resolvedIntent = "danger";
@@ -1457,15 +1587,18 @@ function Alert({
   return /* @__PURE__ */ jsx(
     "div",
     {
+      ...props,
       "data-slot": "alert",
       "data-intent": resolvedIntent !== "neutral" ? resolvedIntent : void 0,
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
       role: "alert",
       className: cn(
         "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
         intentStyle,
         className
-      ),
-      ...props
+      )
     }
   );
 }
@@ -1501,18 +1634,25 @@ function AlertDescription({
 function Avatar({
   className,
   size = "default",
+  surface,
+  radius,
+  animated,
   ...props
 }) {
+  const sf = useSaasflareProps({ surface, radius, animated });
   return /* @__PURE__ */ jsx(
     AvatarPrimitive.Root,
     {
+      ...props,
       "data-slot": "avatar",
       "data-size": size,
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
       className: cn(
         "group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none transition-transform duration-200 hover:scale-105 data-[size=lg]:size-10 data-[size=sm]:size-6",
         className
-      ),
-      ...props
+      )
     }
   );
 }
@@ -1667,17 +1807,24 @@ function ContextMenuSubContent({
 }
 function ContextMenuContent({
   className,
+  surface,
+  radius,
+  animated,
   ...props
 }) {
+  const sf = useSaasflareProps({ surface, radius, animated });
   return /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
     ContextMenuPrimitive.Content,
     {
+      ...props,
       "data-slot": "context-menu-content",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
       className: cn(
         "z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         className
-      ),
-      ...props
+      )
     }
   ) });
 }
@@ -1794,17 +1941,24 @@ function ContextMenuShortcut({
 }
 function Menubar({
   className,
+  surface,
+  radius,
+  animated,
   ...props
 }) {
+  const sf = useSaasflareProps({ surface, radius, animated });
   return /* @__PURE__ */ jsx(
     MenubarPrimitive.Root,
     {
+      ...props,
       "data-slot": "menubar",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
       className: cn(
         "flex h-9 items-center gap-1 rounded-md border bg-background p-1 shadow-xs",
         className
-      ),
-      ...props
+      )
     }
   );
 }
@@ -1849,20 +2003,27 @@ function MenubarContent({
   align = "start",
   alignOffset = -4,
   sideOffset = 8,
+  surface,
+  radius,
+  animated,
   ...props
 }) {
+  const sf = useSaasflareProps({ surface, radius, animated });
   return /* @__PURE__ */ jsx(MenubarPortal, { children: /* @__PURE__ */ jsx(
     MenubarPrimitive.Content,
     {
+      ...props,
       "data-slot": "menubar-content",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
       align,
       alignOffset,
       sideOffset,
       className: cn(
         "z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         className
-      ),
-      ...props
+      )
     }
   ) });
 }
@@ -2025,18 +2186,25 @@ function NavigationMenu({
   className,
   children,
   viewport = true,
+  surface,
+  radius,
+  animated,
   ...props
 }) {
+  const sf = useSaasflareProps({ surface, radius, animated });
   return /* @__PURE__ */ jsxs(
     NavigationMenuPrimitive.Root,
     {
+      ...props,
       "data-slot": "navigation-menu",
       "data-viewport": viewport,
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
       className: cn(
         "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
         className
       ),
-      ...props,
       children: [
         children,
         viewport && /* @__PURE__ */ jsx(NavigationMenuViewport, {})
@@ -2180,19 +2348,22 @@ var RADIUS_BY_AS = {
   text: "var(--radius-sm)",
   card: "var(--radius-lg)"
 };
-function Skeleton({ as, className, style, ...props }) {
+function Skeleton({ as, className, style, surface, radius, animated, ...props }) {
+  const sf = useSaasflareProps({ radius, animated });
   const radiusStyle = as ? { borderRadius: RADIUS_BY_AS[as], ...style } : style;
   return /* @__PURE__ */ jsx(
     "div",
     {
+      ...props,
       "data-slot": "skeleton",
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
       className: cn(
         !as && "rounded-md",
         "bg-gradient-to-r from-accent/80 via-accent/40 to-accent/80 bg-[length:200%_100%] animate-[shimmer_2s_ease-in-out_infinite] motion-reduce:animate-none motion-reduce:bg-accent/60",
         className
       ),
-      style: radiusStyle,
-      ...props
+      style: radiusStyle
     }
   );
 }
@@ -2220,14 +2391,21 @@ function Toggle({
   className,
   variant,
   size,
+  surface,
+  radius,
+  animated,
   ...props
 }) {
+  const sf = useSaasflareProps({ surface, radius, animated });
   return /* @__PURE__ */ jsx(
     TogglePrimitive.Root,
     {
+      ...props,
       "data-slot": "toggle",
-      className: cn(toggleVariants({ variant, size, className })),
-      ...props
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
+      className: cn(toggleVariants({ variant, size, className }))
     }
   );
 }
@@ -2242,21 +2420,28 @@ function ToggleGroup({
   size,
   spacing = 0,
   children,
+  surface,
+  radius,
+  animated,
   ...props
 }) {
+  const sf = useSaasflareProps({ surface, radius, animated });
   return /* @__PURE__ */ jsx(
     ToggleGroupPrimitive.Root,
     {
+      ...props,
       "data-slot": "toggle-group",
       "data-variant": variant,
       "data-size": size,
       "data-spacing": spacing,
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
       style: { "--gap": spacing },
       className: cn(
         "group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs",
         className
       ),
-      ...props,
       children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: { variant, size, spacing }, children })
     }
   );
@@ -2292,14 +2477,21 @@ function ToggleGroupItem({
 }
 function RadioGroup4({
   className,
+  surface,
+  radius,
+  animated,
   ...props
 }) {
+  const sf = useSaasflareProps({ surface, radius, animated });
   return /* @__PURE__ */ jsx(
     RadioGroupPrimitive.Root,
     {
+      ...props,
       "data-slot": "radio-group",
-      className: cn("grid gap-3", className),
-      ...props
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
+      className: cn("grid gap-3", className)
     }
   );
 }
@@ -2344,38 +2536,55 @@ function CollapsibleTrigger2({
   );
 }
 function CollapsibleContent2({
+  surface,
+  radius,
+  animated,
   ...props
 }) {
+  const sf = useSaasflareProps({ surface, radius, animated });
   return /* @__PURE__ */ jsx(
     CollapsiblePrimitive.CollapsibleContent,
     {
+      ...props,
       "data-slot": "collapsible-content",
-      ...props
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated)
     }
   );
 }
-function Spinner({ className, ...props }) {
+function Spinner({ className, surface, radius, animated, ...props }) {
+  const sf = useSaasflareProps({ animated });
   return /* @__PURE__ */ jsx(
     Loader2Icon,
     {
+      ...props,
       role: "status",
       "aria-label": "Loading",
-      className: cn("size-4 animate-spin", className),
-      ...props
+      "data-slot": "spinner",
+      "data-animated": String(sf.animated),
+      className: cn("size-4 animate-spin", className)
     }
   );
 }
 function ScrollArea({
   className,
   children,
+  surface,
+  radius,
+  animated,
   ...props
 }) {
+  const sf = useSaasflareProps({ surface, radius, animated });
   return /* @__PURE__ */ jsxs(
     ScrollAreaPrimitive.Root,
     {
+      ...props,
       "data-slot": "scroll-area",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
       className: cn("relative", className),
-      ...props,
       children: [
         /* @__PURE__ */ jsx(
           ScrollAreaPrimitive.Viewport,
@@ -3498,11 +3707,16 @@ var Toaster = /* @__PURE__ */ React5__default.forwardRef(function Toaster2(props
     }))
   );
 });
-var Toaster3 = ({ ...props }) => {
+var Toaster3 = ({ surface, radius, animated, ...props }) => {
   const { theme = "system" } = useTheme();
+  const sf = useSaasflareProps({ surface, radius, animated });
   return /* @__PURE__ */ jsx(
     Toaster,
     {
+      "data-slot": "toaster",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
       theme,
       className: "toaster group",
       icons: {
@@ -3527,8 +3741,19 @@ function AspectRatio({
 }) {
   return /* @__PURE__ */ jsx(AspectRatioPrimitive.Root, { "data-slot": "aspect-ratio", ...props });
 }
-function Breadcrumb({ ...props }) {
-  return /* @__PURE__ */ jsx("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", ...props });
+function Breadcrumb({ surface, radius, animated, ...props }) {
+  const sf = useSaasflareProps({ surface, radius, animated });
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      ...props,
+      "aria-label": "breadcrumb",
+      "data-slot": "breadcrumb",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated)
+    }
+  );
 }
 function BreadcrumbList({ className, ...props }) {
   return /* @__PURE__ */ jsx(
@@ -3853,16 +4078,20 @@ function DirectionProvider2({
   return /* @__PURE__ */ jsx(Direction.DirectionProvider, { dir: direction ?? dir, children });
 }
 var useDirection2 = Direction.useDirection;
-function Empty({ className, ...props }) {
+function Empty({ className, surface, radius, animated, ...props }) {
+  const sf = useSaasflareProps({ surface, radius, animated });
   return /* @__PURE__ */ jsx(
     "div",
     {
+      ...props,
       "data-slot": "empty",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
       className: cn(
         "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",
         className
-      ),
-      ...props
+      )
     }
   );
 }
@@ -4753,18 +4982,22 @@ function ItemFooter({ className, ...props }) {
     }
   );
 }
-function Kbd({ className, ...props }) {
+function Kbd({ className, surface, radius, animated, ...props }) {
+  const sf = useSaasflareProps({ surface, radius, animated });
   return /* @__PURE__ */ jsx(
     "kbd",
     {
+      ...props,
       "data-slot": "kbd",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
       className: cn(
         "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none",
         "[&_svg:not([class*='size-'])]:size-3",
         "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
         className
-      ),
-      ...props
+      )
     }
   );
 }
@@ -4781,8 +5014,12 @@ function KbdGroup({ className, ...props }) {
 function NativeSelect({
   className,
   size = "default",
+  surface,
+  radius,
+  animated,
   ...props
 }) {
+  const sf = useSaasflareProps({ surface, radius, animated });
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -4792,15 +5029,18 @@ function NativeSelect({
         /* @__PURE__ */ jsx(
           "select",
           {
+            ...props,
             "data-slot": "native-select",
             "data-size": size,
+            "data-surface": sf.surface,
+            "data-radius": sf.radius,
+            "data-animated": String(sf.animated),
             className: cn(
               "h-9 w-full min-w-0 appearance-none rounded-md border border-input bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed data-[size=sm]:h-8 data-[size=sm]:py-1 dark:bg-input/30 dark:hover:bg-input/50",
               "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
               "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
               className
-            ),
-            ...props
+            )
           }
         ),
         /* @__PURE__ */ jsx(
@@ -4936,7 +5176,8 @@ function PaginationEllipsis({
     }
   );
 }
-function Table({ className, ...props }) {
+function Table({ className, surface, radius, animated, ...props }) {
+  const sf = useSaasflareProps({ surface, radius, animated });
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -4945,9 +5186,12 @@ function Table({ className, ...props }) {
       children: /* @__PURE__ */ jsx(
         "table",
         {
+          ...props,
           "data-slot": "table",
-          className: cn("w-full caption-bottom text-sm", className),
-          ...props
+          "data-surface": sf.surface,
+          "data-radius": sf.radius,
+          "data-animated": String(sf.animated),
+          className: cn("w-full caption-bottom text-sm", className)
         }
       )
     }
@@ -5039,8 +5283,11 @@ function TableCaption({
   );
 }
 var AnimatedTooltip = ({
-  items
+  items,
+  animated
 }) => {
+  const sf = useSaasflareProps({ animated });
+  const motion = useSaasflareMotion(sf.animated, { type: "spring", stiffness: 260, damping: 10 });
   const [hoveredIndex, setHoveredIndex] = useState(null);
   const springConfig = { stiffness: 100, damping: 5 };
   const x = useMotionValue(0);
@@ -5060,18 +5307,16 @@ var AnimatedTooltip = ({
         /* @__PURE__ */ jsx(AnimatePresence, { children: hoveredIndex === item.id && /* @__PURE__ */ jsxs(
           m.div,
           {
-            initial: { opacity: 0, y: 20, scale: 0.6 },
+            "data-slot": "animated-tooltip",
+            "data-animated": String(sf.animated),
+            initial: motion.disabled ? false : { opacity: 0, y: 20, scale: 0.6 },
             animate: {
               opacity: 1,
               y: 0,
               scale: 1,
-              transition: {
-                type: "spring",
-                stiffness: 260,
-                damping: 10
-              }
+              transition: motion.transition
             },
-            exit: { opacity: 0, y: 20, scale: 0.6 },
+            exit: motion.disabled ? void 0 : { opacity: 0, y: 20, scale: 0.6 },
             style: {
               translateX,
               rotate,
@@ -5107,15 +5352,18 @@ function TypewriterText({
   wordDelay = 40,
   skipAnimation = false,
   onComplete,
-  className
+  className,
+  animated
 }) {
+  const sf = useSaasflareProps({ animated });
+  const effectiveSkip = skipAnimation || !sf.animated;
   const [displayedWords, setDisplayedWords] = useState([]);
-  const [isComplete, setIsComplete] = useState(skipAnimation);
+  const [isComplete, setIsComplete] = useState(effectiveSkip);
   const words = useRef(text.split(" "));
   const timeoutRef = useRef(null);
   useEffect(() => {
     words.current = text.split(" ");
-    if (skipAnimation) {
+    if (effectiveSkip) {
       setDisplayedWords(words.current);
       setIsComplete(true);
       return;
@@ -5139,11 +5387,19 @@ function TypewriterText({
         clearTimeout(timeoutRef.current);
       }
     };
-  }, [text, wordDelay, skipAnimation, onComplete]);
-  return /* @__PURE__ */ jsxs("span", { className: cn("inline", className), children: [
-    displayedWords.join(" "),
-    !isComplete && /* @__PURE__ */ jsx("span", { className: "inline-block w-0.5 h-4 bg-primary ml-0.5 animate-pulse" })
-  ] });
+  }, [text, wordDelay, effectiveSkip, onComplete]);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-slot": "typewriter-text",
+      "data-animated": String(sf.animated),
+      className: cn("inline", className),
+      children: [
+        displayedWords.join(" "),
+        !isComplete && /* @__PURE__ */ jsx("span", { className: "inline-block w-0.5 h-4 bg-primary ml-0.5 animate-pulse" })
+      ]
+    }
+  );
 }
 var SIDEBAR_COOKIE_NAME = "sidebar_state";
 var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
@@ -5280,19 +5536,26 @@ function Sidebar({
   collapsible = "offcanvas",
   className,
   children,
+  surface,
+  radius,
+  animated,
   ...props
 }) {
   const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+  const sf = useSaasflareProps({ surface, radius, animated });
   if (collapsible === "none") {
     return /* @__PURE__ */ jsx(
       "div",
       {
+        ...props,
         "data-slot": "sidebar",
+        "data-surface": sf.surface,
+        "data-radius": sf.radius,
+        "data-animated": String(sf.animated),
         className: cn(
           "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
           className
         ),
-        ...props,
         children
       }
     );
@@ -5328,6 +5591,9 @@ function Sidebar({
       "data-variant": variant,
       "data-side": side,
       "data-slot": "sidebar",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
       children: [
         /* @__PURE__ */ jsx(
           "div",
@@ -5770,14 +6036,21 @@ function PageHeader({
   breadcrumbs,
   actions,
   className,
+  surface,
+  radius,
+  animated,
   ...props
 }) {
+  const sf = useSaasflareProps({ surface, radius, animated });
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ...props,
       "data-slot": "page-header",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
       className: cn("flex flex-col gap-1", className),
-      ...props,
       children: [
         breadcrumbs && /* @__PURE__ */ jsx("div", { "data-slot": "page-header-breadcrumbs", className: "mb-2", children: breadcrumbs }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
@@ -5798,17 +6071,24 @@ function SectionCard({
   headerAction,
   className,
   children,
+  surface,
+  radius,
+  animated,
   ...props
 }) {
+  const sf = useSaasflareProps({ surface, radius, animated });
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ...props,
       "data-slot": "section-card",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
       className: cn(
         "rounded-xl border bg-card text-card-foreground shadow-sm",
         className
       ),
-      ...props,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4 border-b px-6 py-4", children: [
           /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
@@ -5846,17 +6126,24 @@ function MetricCard({
   trend,
   icon,
   className,
+  surface,
+  radius,
+  animated,
   ...props
 }) {
+  const sf = useSaasflareProps({ surface, radius, animated });
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ...props,
       "data-slot": "metric-card",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      "data-animated": String(sf.animated),
       className: cn(
         "flex flex-col gap-2 rounded-xl border bg-card p-6 text-card-foreground shadow-sm",
         className
       ),
-      ...props,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
           /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-muted-foreground", children: label }),
@@ -5881,17 +6168,24 @@ function EmptyState({
   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
       ),
-      ...props,
       children: [
         icon && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground [&_svg]:size-12", children: icon }),
         /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
@@ -5908,50 +6202,71 @@ function SearchField({
   loading = false,
   onClear,
   value,
+  surface,
+  radius,
+  animated,
   ...props
 }) {
+  const sf = useSaasflareProps({ surface, radius, animated });
   const hasValue = typeof value === "string" ? value.length > 0 : false;
-  return /* @__PURE__ */ jsxs("div", { "data-slot": "search-field", 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",
-      {
-        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, { className: "size-3.5" })
-      }
-    )
-  ] });
+  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(Loader2Icon, { className: "size-4 animate-spin", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(SearchIcon, { 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, { 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
       ),
-      ...props,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
           /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: label }),
@@ -5971,18 +6286,25 @@ function PricingCard({
   cta,
   featured = false,
   className,
+  surface,
+  radius,
+  animated,
   ...props
 }) {
+  const sf = useSaasflareProps({ surface, radius, animated });
   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
       ),
-      ...props,
       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: [
@@ -6005,16 +6327,20 @@ function PricingCard({
     }
   );
 }
-function DataToolbar({ className, ...props }) {
+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
-      ),
-      ...props
+      )
     }
   );
 }