@saasflare/ui 3.0.2 → 3.1.0

package/dist/index.d.ts

@@ -1,10 +1,13 @@
 import { ClassValue } from 'clsx';
-import { P as Palette, S as Surface, R as RadiusProp, a as StyleVariant, b as Radius, I as Intent, B as Button, c as SaasflareComponentProps } from './button-DUQJ0X7e.js';
-export { d as ButtonProps, C as CustomPalette, e as PALETTES, f as PaletteId, g as RADII, h as ResolvedSaasflareProps, i as STYLES, j as buttonVariants, u as useSaasflareProps } from './button-DUQJ0X7e.js';
+import { Transition } from 'motion/react';
+import { I as Intent, B as Button } from './button-0Bdl7Nqm.js';
+export { a as ButtonProps, b as buttonVariants } from './button-0Bdl7Nqm.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
 import { ReactNode, JSX } from 'react';
-export { D as Dialog, a as DialogClose, b as DialogContent, c as DialogDescription, d as DialogFooter, e as DialogHeader, f as DialogOverlay, g as DialogPortal, h as DialogTitle, i as DialogTrigger } from './dialog-CwyBJeNl.js';
+import { P as Palette, S as Surface, R as RadiusProp, a as StyleVariant, b as Radius, c as SaasflareComponentProps } from './use-saasflare-props-NrM2Glmp.js';
+export { C as CustomPalette, d as PALETTES, e as PaletteId, f as RADII, g as ResolvedSaasflareProps, h as STYLES, u as useSaasflareProps } from './use-saasflare-props-NrM2Glmp.js';
+export { D as Dialog, a as DialogClose, b as DialogContent, c as DialogDescription, d as DialogFooter, e as DialogHeader, f as DialogOverlay, g as DialogPortal, h as DialogTitle, i as DialogTrigger } from './dialog-BmY55WSX.js';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as class_variance_authority_types from 'class-variance-authority/types';
@@ -235,7 +238,6 @@ declare function usePagination(options: UsePaginationOptions): UsePaginationRetu
  * const reduced = useReducedMotion();
  * <motion.div transition={reduced ? { duration: 0 } : spring} />
  */
-/** Re-export reduced-motion hook for convenience */
 
 /** Snappy spring — default for buttons, badges, interactive feedback */
 declare const spring: {
@@ -307,6 +309,40 @@ declare const slideDown: {
         readonly y: 0;
     };
 };
+/** Resolved motion settings for a Saasflare component. */
+interface SaasflareMotion {
+    /** Spring or noMotion — drop directly onto `transition={…}`. */
+    transition: Transition;
+    /** True when motion should be skipped — gate `whileHover`, `initial`, etc. */
+    disabled: boolean;
+}
+/**
+ * Resolves the active transition for a component.
+ *
+ * Disables motion when **any** of these are true:
+ *   - Consumer opted out (`animated={false}` from prop or `<SaasflareProvider>`)
+ *   - OS reports `prefers-reduced-motion: reduce`
+ *   - Any `extraDisablers` (e.g. `disabled`, `loading`) is `true`
+ *
+ * Single tuning point — when later we differentiate spring tokens per component
+ * (`springBouncy.checkbox`, `springSnappy.dialog`), the variants live next to
+ * this hook and components don't change.
+ *
+ * @example
+ * const sf = useSaasflareProps({ surface, radius, animated })
+ * const motion = useSaasflareMotion(sf.animated, springBouncy)
+ *
+ * // …
+ * <m.span
+ *   initial={motion.disabled ? false : { scale: 0 }}
+ *   animate={motion.disabled ? false : { scale: 1 }}
+ *   transition={motion.transition}
+ * />
+ *
+ * @example // Button-style with extra disablers
+ * const motion = useSaasflareMotion(sf.animated, spring, disabled, loading)
+ */
+declare function useSaasflareMotion(animated: boolean, base?: Transition, ...extraDisablers: boolean[]): SaasflareMotion;
 
 /** Context value exposed by {@link useAnimation}. */
 interface AnimationContextType {
@@ -552,6 +588,10 @@ interface SaasflareScriptProps {
  */
 declare function SaasflareScript({ nonce, palette, surface, radius, animated, storageKey }: SaasflareScriptProps): react_jsx_runtime.JSX.Element;
 
+/** Framer-motion event overrides that conflict with React HTML events */
+type MotionConflicts = "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd";
+interface CardProps extends Omit<React$1.ComponentProps<"div">, MotionConflicts | keyof SaasflareComponentProps>, SaasflareComponentProps {
+}
 /**
  * Card container with subtle hover-lift animation.
  *
@@ -564,9 +604,7 @@ declare function SaasflareScript({ nonce, palette, surface, radius, animated, st
  *   <CardContent>Content here</CardContent>
  * </Card>
  */
-/** Framer-motion event overrides that conflict with React HTML events */
-type MotionConflicts = "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd";
-declare function Card({ className, ...props }: Omit<React$1.ComponentProps<"div">, MotionConflicts>): react_jsx_runtime.JSX.Element;
+declare function Card({ className, surface, radius, animated, ...props }: CardProps): react_jsx_runtime.JSX.Element;
 /**
  * Card header with grid layout supporting an optional action slot.
  *
@@ -614,7 +652,9 @@ declare function AlertDialog({ ...props }: React$1.ComponentProps<typeof AlertDi
 declare function AlertDialogTrigger({ ...props }: React$1.ComponentProps<typeof AlertDialogPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
 declare function AlertDialogPortal({ ...props }: React$1.ComponentProps<typeof AlertDialogPrimitive.Portal>): react_jsx_runtime.JSX.Element;
 declare function AlertDialogOverlay({ className, ...props }: React$1.ComponentProps<typeof AlertDialogPrimitive.Overlay>): react_jsx_runtime.JSX.Element;
-declare function AlertDialogContent({ className, children, ...props }: React$1.ComponentProps<typeof AlertDialogPrimitive.Content>): react_jsx_runtime.JSX.Element;
+interface AlertDialogContentProps extends Omit<React$1.ComponentProps<typeof AlertDialogPrimitive.Content>, keyof SaasflareComponentProps>, SaasflareComponentProps {
+}
+declare function AlertDialogContent({ className, children, surface, radius, animated, ...props }: AlertDialogContentProps): react_jsx_runtime.JSX.Element;
 declare function AlertDialogHeader({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function AlertDialogFooter({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function AlertDialogTitle({ className, ...props }: React$1.ComponentProps<typeof AlertDialogPrimitive.Title>): react_jsx_runtime.JSX.Element;
@@ -623,7 +663,9 @@ declare function AlertDialogAction({ className, ...props }: React$1.ComponentPro
 declare function AlertDialogCancel({ className, ...props }: React$1.ComponentProps<typeof AlertDialogPrimitive.Cancel>): react_jsx_runtime.JSX.Element;
 
 declare function Accordion({ ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Root>): react_jsx_runtime.JSX.Element;
-declare function AccordionItem({ className, ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Item>): react_jsx_runtime.JSX.Element;
+interface AccordionItemProps extends Omit<React$1.ComponentProps<typeof AccordionPrimitive.Item>, keyof SaasflareComponentProps>, SaasflareComponentProps {
+}
+declare function AccordionItem({ className, surface, radius, animated, ...props }: AccordionItemProps): react_jsx_runtime.JSX.Element;
 /**
  * Accordion trigger with animated chevron indicator.
  *
@@ -639,7 +681,9 @@ declare function AccordionTrigger({ className, children, ...props }: React$1.Com
  */
 declare function AccordionContent({ className, children, ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Content>): react_jsx_runtime.JSX.Element;
 
-declare function Tabs({ className, orientation, ...props }: React$1.ComponentProps<typeof TabsPrimitive.Root>): react_jsx_runtime.JSX.Element;
+interface TabsProps extends Omit<React$1.ComponentProps<typeof TabsPrimitive.Root>, keyof SaasflareComponentProps>, SaasflareComponentProps {
+}
+declare function Tabs({ className, orientation, surface, radius, animated, ...props }: TabsProps): react_jsx_runtime.JSX.Element;
 declare const tabsListVariants: (props?: ({
     variant?: "line" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -655,16 +699,27 @@ declare function TabsList({ className, variant, children, ...props }: React$1.Co
 declare function TabsTrigger({ className, children, ...props }: React$1.ComponentProps<typeof TabsPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
 declare function TabsContent({ className, ...props }: React$1.ComponentProps<typeof TabsPrimitive.Content>): react_jsx_runtime.JSX.Element;
 
-declare function Input({ className, type, ...props }: Omit<React$1.ComponentProps<"input">, 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onAnimationStart' | 'onAnimationEnd'>): react_jsx_runtime.JSX.Element;
+type InputBaseProps = Omit<React$1.ComponentProps<"input">, "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd">;
+interface InputProps extends Omit<InputBaseProps, keyof SaasflareComponentProps>, SaasflareComponentProps {
+}
+declare function Input({ className, type, surface, radius, animated, ...props }: InputProps): react_jsx_runtime.JSX.Element;
 
-declare function Textarea({ className, ...props }: Omit<React$1.ComponentProps<"textarea">, 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onAnimationStart' | 'onAnimationEnd'>): react_jsx_runtime.JSX.Element;
+type TextareaBaseProps = Omit<React$1.ComponentProps<"textarea">, "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd">;
+interface TextareaProps extends Omit<TextareaBaseProps, keyof SaasflareComponentProps>, SaasflareComponentProps {
+}
+declare function Textarea({ className, surface, radius, animated, ...props }: TextareaProps): react_jsx_runtime.JSX.Element;
 
-declare function Checkbox({ className, ...props }: React$1.ComponentProps<typeof CheckboxPrimitive.Root>): react_jsx_runtime.JSX.Element;
+interface CheckboxProps extends Omit<React$1.ComponentProps<typeof CheckboxPrimitive.Root>, keyof SaasflareComponentProps>, SaasflareComponentProps {
+}
+declare function Checkbox({ className, surface, radius, animated, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
 
-declare function Switch({ className, size, ...props }: React$1.ComponentProps<typeof SwitchPrimitive.Root> & {
+interface SwitchProps extends Omit<React$1.ComponentProps<typeof SwitchPrimitive.Root>, keyof SaasflareComponentProps>, SaasflareComponentProps {
     size?: "sm" | "default";
-}): react_jsx_runtime.JSX.Element;
+}
+declare function Switch({ className, size, surface, radius, animated, ...props }: SwitchProps): react_jsx_runtime.JSX.Element;
 
+interface ProgressProps extends Omit<React$1.ComponentProps<typeof ProgressPrimitive.Root>, keyof SaasflareComponentProps>, SaasflareComponentProps {
+}
 /**
  * Progress bar with smooth spring animation.
  *
@@ -676,7 +731,7 @@ declare function Switch({ className, size, ...props }: React$1.ComponentProps<ty
  * @example
  * <Progress value={42} className="w-full" />
  */
-declare function Progress({ className, value, ...props }: React$1.ComponentProps<typeof ProgressPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function Progress({ className, value, surface, radius, animated, ...props }: ProgressProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Badge variant definitions.
@@ -686,11 +741,11 @@ declare function Progress({ className, value, ...props }: React$1.ComponentProps
  *   size    — sm, md
  */
 declare const badgeVariants: (props?: ({
-    variant?: "soft" | "solid" | "outline" | null | undefined;
+    variant?: "outline" | "soft" | "solid" | null | undefined;
     size?: "sm" | "md" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 /** Props for the Saasflare Badge component */
-interface BadgeProps extends Omit<React$1.ComponentProps<"span">, "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd">, VariantProps<typeof badgeVariants> {
+interface BadgeProps extends Omit<React$1.ComponentProps<"span">, "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd" | keyof SaasflareComponentProps>, VariantProps<typeof badgeVariants>, SaasflareComponentProps {
     /** Render as child element (Radix Slot pattern) */
     asChild?: boolean;
     /** Semantic color intent */
@@ -714,21 +769,27 @@ interface BadgeProps extends Omit<React$1.ComponentProps<"span">, "onDrag" | "on
  * // Legacy API (deprecated but supported)
  * <Badge variant="destructive">Error</Badge>
  */
-declare function Badge({ className, variant: variantProp, size, intent: intentProp, asChild, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+declare function Badge({ className, variant: variantProp, size, intent: intentProp, asChild, surface, radius, animated, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
 
 declare function TooltipProvider({ delayDuration, ...props }: React$1.ComponentProps<typeof TooltipPrimitive.Provider>): react_jsx_runtime.JSX.Element;
 declare function Tooltip({ ...props }: React$1.ComponentProps<typeof TooltipPrimitive.Root>): react_jsx_runtime.JSX.Element;
 declare function TooltipTrigger({ ...props }: React$1.ComponentProps<typeof TooltipPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
-declare function TooltipContent({ className, sideOffset, children, ...props }: React$1.ComponentProps<typeof TooltipPrimitive.Content>): react_jsx_runtime.JSX.Element;
+interface TooltipContentProps extends Omit<React$1.ComponentProps<typeof TooltipPrimitive.Content>, keyof SaasflareComponentProps>, SaasflareComponentProps {
+}
+declare function TooltipContent({ className, sideOffset, children, surface, radius, animated, ...props }: TooltipContentProps): react_jsx_runtime.JSX.Element;
 
 declare function Popover({ ...props }: React$1.ComponentProps<typeof PopoverPrimitive.Root>): react_jsx_runtime.JSX.Element;
 declare function PopoverTrigger({ ...props }: React$1.ComponentProps<typeof PopoverPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
 declare function PopoverAnchor({ ...props }: React$1.ComponentProps<typeof PopoverPrimitive.Anchor>): react_jsx_runtime.JSX.Element;
-declare function PopoverContent({ className, align, sideOffset, ...props }: React$1.ComponentProps<typeof PopoverPrimitive.Content>): react_jsx_runtime.JSX.Element;
+interface PopoverContentProps extends Omit<React$1.ComponentProps<typeof PopoverPrimitive.Content>, keyof SaasflareComponentProps>, SaasflareComponentProps {
+}
+declare function PopoverContent({ className, align, sideOffset, surface, radius, animated, ...props }: PopoverContentProps): react_jsx_runtime.JSX.Element;
 
 declare function HoverCard({ ...props }: React$1.ComponentProps<typeof HoverCardPrimitive.Root>): react_jsx_runtime.JSX.Element;
 declare function HoverCardTrigger({ ...props }: React$1.ComponentProps<typeof HoverCardPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
-declare function HoverCardContent({ className, align, sideOffset, ...props }: React$1.ComponentProps<typeof HoverCardPrimitive.Content>): react_jsx_runtime.JSX.Element;
+interface HoverCardContentProps extends Omit<React$1.ComponentProps<typeof HoverCardPrimitive.Content>, keyof SaasflareComponentProps>, SaasflareComponentProps {
+}
+declare function HoverCardContent({ className, align, sideOffset, surface, radius, animated, ...props }: HoverCardContentProps): react_jsx_runtime.JSX.Element;
 
 declare function Select({ ...props }: React$1.ComponentProps<typeof SelectPrimitive.Root>): react_jsx_runtime.JSX.Element;
 declare function SelectGroup({ ...props }: React$1.ComponentProps<typeof SelectPrimitive.Group>): react_jsx_runtime.JSX.Element;
@@ -736,7 +797,9 @@ declare function SelectValue({ ...props }: React$1.ComponentProps<typeof SelectP
 declare function SelectTrigger({ className, size, children, ...props }: React$1.ComponentProps<typeof SelectPrimitive.Trigger> & {
     size?: "sm" | "default";
 }): react_jsx_runtime.JSX.Element;
-declare function SelectContent({ className, children, position, ...props }: React$1.ComponentProps<typeof SelectPrimitive.Content>): react_jsx_runtime.JSX.Element;
+interface SelectContentProps extends Omit<React$1.ComponentProps<typeof SelectPrimitive.Content>, keyof SaasflareComponentProps>, SaasflareComponentProps {
+}
+declare function SelectContent({ className, children, position, surface, radius, animated, ...props }: SelectContentProps): react_jsx_runtime.JSX.Element;
 declare function SelectLabel({ className, ...props }: React$1.ComponentProps<typeof SelectPrimitive.Label>): react_jsx_runtime.JSX.Element;
 declare function SelectItem({ className, children, ...props }: React$1.ComponentProps<typeof SelectPrimitive.Item>): react_jsx_runtime.JSX.Element;
 declare function SelectSeparator({ className, ...props }: React$1.ComponentProps<typeof SelectPrimitive.Separator>): react_jsx_runtime.JSX.Element;
@@ -749,7 +812,9 @@ declare function DropdownMenuTrigger({ className, ...props }: React$1.ComponentP
 declare function DropdownMenuGroup({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Group>): react_jsx_runtime.JSX.Element;
 declare function DropdownMenuSub({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Sub>): react_jsx_runtime.JSX.Element;
 declare function DropdownMenuRadioGroup({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): react_jsx_runtime.JSX.Element;
-declare function DropdownMenuContent({ className, sideOffset, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Content>): react_jsx_runtime.JSX.Element;
+interface DropdownMenuContentProps extends Omit<React$1.ComponentProps<typeof DropdownMenuPrimitive.Content>, keyof SaasflareComponentProps>, SaasflareComponentProps {
+}
+declare function DropdownMenuContent({ className, sideOffset, surface, radius, animated, ...props }: DropdownMenuContentProps): react_jsx_runtime.JSX.Element;
 declare function DropdownMenuItem({ className, inset, variant, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
     inset?: boolean;
     variant?: "default" | "destructive";
@@ -769,19 +834,22 @@ declare function DropdownMenuSubContent({ className, ...props }: React$1.Compone
 declare function Sheet({ ...props }: React$1.ComponentProps<typeof DialogPrimitive.Root>): react_jsx_runtime.JSX.Element;
 declare function SheetTrigger({ ...props }: React$1.ComponentProps<typeof DialogPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
 declare function SheetClose({ ...props }: React$1.ComponentProps<typeof DialogPrimitive.Close>): react_jsx_runtime.JSX.Element;
-declare function SheetContent({ className, children, side, showCloseButton, ...props }: React$1.ComponentProps<typeof DialogPrimitive.Content> & {
+interface SheetContentProps extends Omit<React$1.ComponentProps<typeof DialogPrimitive.Content>, keyof SaasflareComponentProps>, SaasflareComponentProps {
     side?: "top" | "right" | "bottom" | "left";
     showCloseButton?: boolean;
-}): react_jsx_runtime.JSX.Element;
+}
+declare function SheetContent({ className, children, side, showCloseButton, surface, radius, animated, ...props }: SheetContentProps): react_jsx_runtime.JSX.Element;
 declare function SheetHeader({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function SheetFooter({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function SheetTitle({ className, ...props }: React$1.ComponentProps<typeof DialogPrimitive.Title>): react_jsx_runtime.JSX.Element;
 declare function SheetDescription({ className, ...props }: React$1.ComponentProps<typeof DialogPrimitive.Description>): react_jsx_runtime.JSX.Element;
 
-declare function Slider({ className, defaultValue, value, min, max, ...props }: React$1.ComponentProps<typeof SliderPrimitive.Root>): react_jsx_runtime.JSX.Element;
+interface SliderProps extends Omit<React$1.ComponentProps<typeof SliderPrimitive.Root>, keyof SaasflareComponentProps>, SaasflareComponentProps {
+}
+declare function Slider({ className, defaultValue, value, min, max, surface, radius, animated, ...props }: SliderProps): react_jsx_runtime.JSX.Element;
 
 /** Props for the Saasflare Alert component */
-interface AlertProps extends React$1.ComponentProps<"div"> {
+interface AlertProps extends Omit<React$1.ComponentProps<"div">, keyof SaasflareComponentProps>, SaasflareComponentProps {
     /** Semantic color intent */
     intent?: Intent | "neutral";
     /**
@@ -812,7 +880,7 @@ interface AlertProps extends React$1.ComponentProps<"div"> {
  *   <AlertDescription>Something went wrong.</AlertDescription>
  * </Alert>
  */
-declare function Alert({ className, intent: intentProp, variant, ...props }: AlertProps): react_jsx_runtime.JSX.Element;
+declare function Alert({ className, intent: intentProp, variant, surface, radius, animated, ...props }: AlertProps): react_jsx_runtime.JSX.Element;
 /**
  * Alert title text.
  *
@@ -828,9 +896,10 @@ declare function AlertTitle({ className, ...props }: React$1.ComponentProps<"div
  */
 declare function AlertDescription({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 
-declare function Avatar({ className, size, ...props }: React$1.ComponentProps<typeof AvatarPrimitive.Root> & {
+interface AvatarProps extends Omit<React$1.ComponentProps<typeof AvatarPrimitive.Root>, keyof SaasflareComponentProps>, SaasflareComponentProps {
     size?: "default" | "sm" | "lg";
-}): react_jsx_runtime.JSX.Element;
+}
+declare function Avatar({ className, size, surface, radius, animated, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
 declare function AvatarImage({ className, ...props }: React$1.ComponentProps<typeof AvatarPrimitive.Image>): react_jsx_runtime.JSX.Element;
 declare function AvatarFallback({ className, ...props }: React$1.ComponentProps<typeof AvatarPrimitive.Fallback>): react_jsx_runtime.JSX.Element;
 declare function AvatarBadge({ className, ...props }: React$1.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
@@ -847,7 +916,9 @@ declare function ContextMenuSubTrigger({ className, inset, children, ...props }:
     inset?: boolean;
 }): react_jsx_runtime.JSX.Element;
 declare function ContextMenuSubContent({ className, ...props }: React$1.ComponentProps<typeof ContextMenuPrimitive.SubContent>): react_jsx_runtime.JSX.Element;
-declare function ContextMenuContent({ className, ...props }: React$1.ComponentProps<typeof ContextMenuPrimitive.Content>): react_jsx_runtime.JSX.Element;
+interface ContextMenuContentProps extends Omit<React$1.ComponentProps<typeof ContextMenuPrimitive.Content>, keyof SaasflareComponentProps>, SaasflareComponentProps {
+}
+declare function ContextMenuContent({ className, surface, radius, animated, ...props }: ContextMenuContentProps): react_jsx_runtime.JSX.Element;
 declare function ContextMenuItem({ className, inset, variant, ...props }: React$1.ComponentProps<typeof ContextMenuPrimitive.Item> & {
     inset?: boolean;
     variant?: "default" | "destructive";
@@ -860,13 +931,17 @@ declare function ContextMenuLabel({ className, inset, ...props }: React$1.Compon
 declare function ContextMenuSeparator({ className, ...props }: React$1.ComponentProps<typeof ContextMenuPrimitive.Separator>): react_jsx_runtime.JSX.Element;
 declare function ContextMenuShortcut({ className, ...props }: React$1.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
 
-declare function Menubar({ className, ...props }: React$1.ComponentProps<typeof MenubarPrimitive.Root>): react_jsx_runtime.JSX.Element;
+interface MenubarProps extends Omit<React$1.ComponentProps<typeof MenubarPrimitive.Root>, keyof SaasflareComponentProps>, SaasflareComponentProps {
+}
+declare function Menubar({ className, surface, radius, animated, ...props }: MenubarProps): react_jsx_runtime.JSX.Element;
 declare function MenubarMenu({ ...props }: React$1.ComponentProps<typeof MenubarPrimitive.Menu>): react_jsx_runtime.JSX.Element;
 declare function MenubarGroup({ ...props }: React$1.ComponentProps<typeof MenubarPrimitive.Group>): react_jsx_runtime.JSX.Element;
 declare function MenubarPortal({ ...props }: React$1.ComponentProps<typeof MenubarPrimitive.Portal>): react_jsx_runtime.JSX.Element;
 declare function MenubarRadioGroup({ ...props }: React$1.ComponentProps<typeof MenubarPrimitive.RadioGroup>): react_jsx_runtime.JSX.Element;
 declare function MenubarTrigger({ className, ...props }: React$1.ComponentProps<typeof MenubarPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
-declare function MenubarContent({ className, align, alignOffset, sideOffset, ...props }: React$1.ComponentProps<typeof MenubarPrimitive.Content>): react_jsx_runtime.JSX.Element;
+interface MenubarContentProps extends Omit<React$1.ComponentProps<typeof MenubarPrimitive.Content>, keyof SaasflareComponentProps>, SaasflareComponentProps {
+}
+declare function MenubarContent({ className, align, alignOffset, sideOffset, surface, radius, animated, ...props }: MenubarContentProps): react_jsx_runtime.JSX.Element;
 declare function MenubarItem({ className, inset, variant, ...props }: React$1.ComponentProps<typeof MenubarPrimitive.Item> & {
     inset?: boolean;
     variant?: "default" | "destructive";
@@ -884,9 +959,10 @@ declare function MenubarSubTrigger({ className, inset, children, ...props }: Rea
 }): react_jsx_runtime.JSX.Element;
 declare function MenubarSubContent({ className, ...props }: React$1.ComponentProps<typeof MenubarPrimitive.SubContent>): react_jsx_runtime.JSX.Element;
 
-declare function NavigationMenu({ className, children, viewport, ...props }: React$1.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+interface NavigationMenuProps extends Omit<React$1.ComponentProps<typeof NavigationMenuPrimitive.Root>, keyof SaasflareComponentProps>, SaasflareComponentProps {
     viewport?: boolean;
-}): react_jsx_runtime.JSX.Element;
+}
+declare function NavigationMenu({ className, children, viewport, surface, radius, animated, ...props }: NavigationMenuProps): react_jsx_runtime.JSX.Element;
 declare function NavigationMenuList({ className, ...props }: React$1.ComponentProps<typeof NavigationMenuPrimitive.List>): react_jsx_runtime.JSX.Element;
 declare function NavigationMenuItem({ className, ...props }: React$1.ComponentProps<typeof NavigationMenuPrimitive.Item>): react_jsx_runtime.JSX.Element;
 declare const navigationMenuTriggerStyle: (props?: class_variance_authority_types.ClassProp | undefined) => string;
@@ -898,7 +974,7 @@ declare function NavigationMenuIndicator({ className, ...props }: React$1.Compon
 
 /** Component the skeleton imitates — drives radius from the design tokens. */
 type SkeletonAs = "avatar" | "text" | "card";
-interface SkeletonProps extends React.ComponentProps<"div"> {
+interface SkeletonProps extends Omit<React.ComponentProps<"div">, keyof SaasflareComponentProps>, SaasflareComponentProps {
     /**
      * Component shape to imitate. When set, radius follows the design-system
      * scale (and at `data-radius="pill"`, all variants collapse to fully rounded
@@ -918,36 +994,51 @@ interface SkeletonProps extends React.ComponentProps<"div"> {
  * @component
  * @package ui
  */
-declare function Skeleton({ as, className, style, ...props }: SkeletonProps): react_jsx_runtime.JSX.Element;
+declare function Skeleton({ as, className, style, surface, radius, animated, ...props }: SkeletonProps): react_jsx_runtime.JSX.Element;
 
 declare const toggleVariants: (props?: ({
-    variant?: "default" | "outline" | null | undefined;
+    variant?: "outline" | "default" | null | undefined;
     size?: "sm" | "lg" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function Toggle({ className, variant, size, ...props }: React$1.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime.JSX.Element;
+interface ToggleProps extends Omit<React$1.ComponentProps<typeof TogglePrimitive.Root>, keyof SaasflareComponentProps>, VariantProps<typeof toggleVariants>, SaasflareComponentProps {
+}
+declare function Toggle({ className, variant, size, surface, radius, animated, ...props }: ToggleProps): react_jsx_runtime.JSX.Element;
 
-declare function ToggleGroup({ className, variant, size, spacing, children, ...props }: React$1.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants> & {
+type ToggleGroupProps = React$1.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants> & SaasflareComponentProps & {
     spacing?: number;
-}): react_jsx_runtime.JSX.Element;
+};
+declare function ToggleGroup({ className, variant, size, spacing, children, surface, radius, animated, ...props }: ToggleGroupProps): react_jsx_runtime.JSX.Element;
 declare function ToggleGroupItem({ className, children, variant, size, ...props }: React$1.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>): react_jsx_runtime.JSX.Element;
 
-declare function RadioGroup({ className, ...props }: React$1.ComponentProps<typeof RadioGroupPrimitive.Root>): react_jsx_runtime.JSX.Element;
+interface RadioGroupProps extends Omit<React$1.ComponentProps<typeof RadioGroupPrimitive.Root>, keyof SaasflareComponentProps>, SaasflareComponentProps {
+}
+declare function RadioGroup({ className, surface, radius, animated, ...props }: RadioGroupProps): react_jsx_runtime.JSX.Element;
 declare function RadioGroupItem({ className, ...props }: React$1.ComponentProps<typeof RadioGroupPrimitive.Item>): react_jsx_runtime.JSX.Element;
 
-declare function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>): react_jsx_runtime.JSX.Element;
-declare function CollapsibleTrigger({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>): react_jsx_runtime.JSX.Element;
-declare function CollapsibleContent({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>): react_jsx_runtime.JSX.Element;
+interface CollapsibleContentProps extends Omit<React$1.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>, keyof SaasflareComponentProps>, SaasflareComponentProps {
+}
+declare function Collapsible({ ...props }: React$1.ComponentProps<typeof CollapsiblePrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function CollapsibleTrigger({ ...props }: React$1.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>): react_jsx_runtime.JSX.Element;
+declare function CollapsibleContent({ surface, radius, animated, ...props }: CollapsibleContentProps): react_jsx_runtime.JSX.Element;
 
-declare function Spinner({ className, ...props }: React.ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
+interface SpinnerProps extends Omit<React.ComponentProps<"svg">, keyof SaasflareComponentProps>, SaasflareComponentProps {
+}
+declare function Spinner({ className, surface, radius, animated, ...props }: SpinnerProps): react_jsx_runtime.JSX.Element;
 
-declare function ScrollArea({ className, children, ...props }: React$1.ComponentProps<typeof ScrollAreaPrimitive.Root>): react_jsx_runtime.JSX.Element;
+interface ScrollAreaProps extends Omit<React$1.ComponentProps<typeof ScrollAreaPrimitive.Root>, keyof SaasflareComponentProps>, SaasflareComponentProps {
+}
+declare function ScrollArea({ className, children, surface, radius, animated, ...props }: ScrollAreaProps): react_jsx_runtime.JSX.Element;
 declare function ScrollBar({ className, orientation, ...props }: React$1.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>): react_jsx_runtime.JSX.Element;
 
-declare const Toaster: ({ ...props }: ToasterProps) => react_jsx_runtime.JSX.Element;
+interface SaasflareToasterProps extends Omit<ToasterProps, keyof SaasflareComponentProps>, SaasflareComponentProps {
+}
+declare const Toaster: ({ surface, radius, animated, ...props }: SaasflareToasterProps) => react_jsx_runtime.JSX.Element;
 
 declare function AspectRatio({ ...props }: React.ComponentProps<typeof AspectRatioPrimitive.Root>): react_jsx_runtime.JSX.Element;
 
-declare function Breadcrumb({ ...props }: React$1.ComponentProps<"nav">): react_jsx_runtime.JSX.Element;
+interface BreadcrumbProps extends Omit<React$1.ComponentProps<"nav">, keyof SaasflareComponentProps>, SaasflareComponentProps {
+}
+declare function Breadcrumb({ surface, radius, animated, ...props }: BreadcrumbProps): react_jsx_runtime.JSX.Element;
 declare function BreadcrumbList({ className, ...props }: React$1.ComponentProps<"ol">): react_jsx_runtime.JSX.Element;
 declare function BreadcrumbItem({ className, ...props }: React$1.ComponentProps<"li">): react_jsx_runtime.JSX.Element;
 declare function BreadcrumbLink({ asChild, className, ...props }: React$1.ComponentProps<"a"> & {
@@ -986,7 +1077,9 @@ declare function DirectionProvider({ dir, direction, children, }: React$1.Compon
 }): react_jsx_runtime.JSX.Element;
 declare const useDirection: typeof Direction.useDirection;
 
-declare function Empty({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+interface EmptyProps extends Omit<React.ComponentProps<"div">, keyof SaasflareComponentProps>, SaasflareComponentProps {
+}
+declare function Empty({ className, surface, radius, animated, ...props }: EmptyProps): react_jsx_runtime.JSX.Element;
 declare function EmptyHeader({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare const emptyMediaVariants: (props?: ({
     variant?: "default" | "icon" | null | undefined;
@@ -1103,7 +1196,7 @@ declare function InputGroupTextarea({ className, ...props }: React$1.ComponentPr
 declare function ItemGroup({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function ItemSeparator({ className, ...props }: React$1.ComponentProps<typeof Separator>): react_jsx_runtime.JSX.Element;
 declare const itemVariants: (props?: ({
-    variant?: "default" | "outline" | "muted" | null | undefined;
+    variant?: "outline" | "default" | "muted" | null | undefined;
     size?: "sm" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Item({ className, variant, size, asChild, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof itemVariants> & {
@@ -1120,12 +1213,15 @@ declare function ItemActions({ className, ...props }: React$1.ComponentProps<"di
 declare function ItemHeader({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function ItemFooter({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 
-declare function Kbd({ className, ...props }: React.ComponentProps<"kbd">): react_jsx_runtime.JSX.Element;
+interface KbdProps extends Omit<React.ComponentProps<"kbd">, keyof SaasflareComponentProps>, SaasflareComponentProps {
+}
+declare function Kbd({ className, surface, radius, animated, ...props }: KbdProps): react_jsx_runtime.JSX.Element;
 declare function KbdGroup({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 
-declare function NativeSelect({ className, size, ...props }: Omit<React$1.ComponentProps<"select">, "size"> & {
+interface NativeSelectProps extends Omit<React$1.ComponentProps<"select">, "size" | keyof SaasflareComponentProps>, SaasflareComponentProps {
     size?: "sm" | "default";
-}): react_jsx_runtime.JSX.Element;
+}
+declare function NativeSelect({ className, size, surface, radius, animated, ...props }: NativeSelectProps): react_jsx_runtime.JSX.Element;
 declare function NativeSelectOption({ ...props }: React$1.ComponentProps<"option">): react_jsx_runtime.JSX.Element;
 declare function NativeSelectOptGroup({ className, ...props }: React$1.ComponentProps<"optgroup">): react_jsx_runtime.JSX.Element;
 
@@ -1141,7 +1237,9 @@ declare function PaginationPrevious({ className, ...props }: React$1.ComponentPr
 declare function PaginationNext({ className, ...props }: React$1.ComponentProps<typeof PaginationLink>): react_jsx_runtime.JSX.Element;
 declare function PaginationEllipsis({ className, ...props }: React$1.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
 
-declare function Table({ className, ...props }: React$1.ComponentProps<"table">): react_jsx_runtime.JSX.Element;
+interface TableProps extends Omit<React$1.ComponentProps<"table">, keyof SaasflareComponentProps>, SaasflareComponentProps {
+}
+declare function Table({ className, surface, radius, animated, ...props }: TableProps): react_jsx_runtime.JSX.Element;
 declare function TableHeader({ className, ...props }: React$1.ComponentProps<"thead">): react_jsx_runtime.JSX.Element;
 declare function TableBody({ className, ...props }: React$1.ComponentProps<"tbody">): react_jsx_runtime.JSX.Element;
 declare function TableFooter({ className, ...props }: React$1.ComponentProps<"tfoot">): react_jsx_runtime.JSX.Element;
@@ -1185,11 +1283,12 @@ interface TooltipItem {
  * />
  * ```
  */
-declare const AnimatedTooltip: ({ items, }: {
+interface AnimatedTooltipProps extends SaasflareComponentProps {
     items: TooltipItem[];
-}) => JSX.Element;
+}
+declare const AnimatedTooltip: ({ items, animated, }: AnimatedTooltipProps) => JSX.Element;
 
-interface TypewriterTextProps {
+interface TypewriterTextProps extends SaasflareComponentProps {
     text: string;
     /** Delay between each word in ms (default: 40) */
     wordDelay?: number;
@@ -1203,7 +1302,7 @@ interface TypewriterTextProps {
 /**
  * Typewriter component that reveals text word-by-word
  */
-declare function TypewriterText({ text, wordDelay, skipAnimation, onComplete, className, }: TypewriterTextProps): react_jsx_runtime.JSX.Element;
+declare function TypewriterText({ text, wordDelay, skipAnimation, onComplete, className, animated, }: TypewriterTextProps): react_jsx_runtime.JSX.Element;
 
 type SidebarContextProps = {
     state: "expanded" | "collapsed" | "overlayed";
@@ -1222,11 +1321,12 @@ declare function SidebarProvider({ defaultOpen: defaultOpenProp, open: openProp,
 }): react_jsx_runtime.JSX.Element;
 declare function SidebarTrigger({ className, onClick, ...props }: React$1.ComponentProps<typeof Button>): react_jsx_runtime.JSX.Element;
 
-declare function Sidebar({ side, variant, collapsible, className, children, ...props }: React$1.ComponentProps<"div"> & {
+interface SidebarProps extends Omit<React$1.ComponentProps<"div">, keyof SaasflareComponentProps>, SaasflareComponentProps {
     side?: "left" | "right";
     variant?: "sidebar" | "floating" | "inset";
     collapsible?: "offcanvas" | "icon" | "none";
-}): react_jsx_runtime.JSX.Element;
+}
+declare function Sidebar({ side, variant, collapsible, className, children, surface, radius, animated, ...props }: SidebarProps): react_jsx_runtime.JSX.Element;
 declare function SidebarRail({ className, ...props }: React$1.ComponentProps<"button">): react_jsx_runtime.JSX.Element;
 declare function SidebarInset({ className, ...props }: React$1.ComponentProps<"main">): react_jsx_runtime.JSX.Element;
 declare function SidebarInput({ className, ...props }: React$1.ComponentProps<typeof Input>): react_jsx_runtime.JSX.Element;
@@ -1244,7 +1344,7 @@ declare function SidebarGroupAction({ className, asChild, ...props }: React$1.Co
 declare function SidebarGroupContent({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 
 declare const sidebarMenuButtonVariants: (props?: ({
-    variant?: "default" | "outline" | null | undefined;
+    variant?: "outline" | "default" | null | undefined;
     size?: "sm" | "lg" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function SidebarMenu({ className, ...props }: React$1.ComponentProps<"ul">): react_jsx_runtime.JSX.Element;
@@ -1271,7 +1371,7 @@ declare function SidebarMenuSubButton({ asChild, size, isActive, className, ...p
 }): react_jsx_runtime.JSX.Element;
 
 /** Props for the PageHeader component */
-interface PageHeaderProps extends React$1.ComponentProps<"div"> {
+interface PageHeaderProps extends Omit<React$1.ComponentProps<"div">, keyof SaasflareComponentProps>, SaasflareComponentProps {
     /** Page title */
     title: string;
     /** Optional description below the title */
@@ -1305,10 +1405,10 @@ interface PageHeaderProps extends React$1.ComponentProps<"div"> {
  *   }
  * />
  */
-declare function PageHeader({ title, description, breadcrumbs, actions, className, ...props }: PageHeaderProps): react_jsx_runtime.JSX.Element;
+declare function PageHeader({ title, description, breadcrumbs, actions, className, surface, radius, animated, ...props }: PageHeaderProps): react_jsx_runtime.JSX.Element;
 
 /** Props for the SectionCard component */
-interface SectionCardProps extends React$1.ComponentProps<"div"> {
+interface SectionCardProps extends Omit<React$1.ComponentProps<"div">, keyof SaasflareComponentProps>, SaasflareComponentProps {
     /** Section title */
     title: string;
     /** Optional description below the title */
@@ -1338,7 +1438,7 @@ interface SectionCardProps extends React$1.ComponentProps<"div"> {
  *   <p>Once deleted, this project cannot be recovered.</p>
  * </SectionCard>
  */
-declare function SectionCard({ title, description, footer, headerAction, className, children, ...props }: SectionCardProps): react_jsx_runtime.JSX.Element;
+declare function SectionCard({ title, description, footer, headerAction, className, children, surface, radius, animated, ...props }: SectionCardProps): react_jsx_runtime.JSX.Element;
 
 /** Trend indicator data */
 interface MetricTrend {
@@ -1348,7 +1448,7 @@ interface MetricTrend {
     direction: "up" | "down" | "flat";
 }
 /** Props for the MetricCard component */
-interface MetricCardProps extends React$1.ComponentProps<"div"> {
+interface MetricCardProps extends Omit<React$1.ComponentProps<"div">, keyof SaasflareComponentProps>, SaasflareComponentProps {
     /** Metric label (e.g. "Revenue", "Active Users") */
     label: string;
     /** Formatted metric value (e.g. "$12,345", "1,234") */
@@ -1376,10 +1476,10 @@ interface MetricCardProps extends React$1.ComponentProps<"div"> {
  *   trend={{ value: 8.2, direction: "up" }}
  * />
  */
-declare function MetricCard({ label, value, trend, icon, className, ...props }: MetricCardProps): react_jsx_runtime.JSX.Element;
+declare function MetricCard({ label, value, trend, icon, className, surface, radius, animated, ...props }: MetricCardProps): react_jsx_runtime.JSX.Element;
 
 /** Props for the EmptyState component */
-interface EmptyStateProps extends React$1.ComponentProps<"div"> {
+interface EmptyStateProps extends Omit<React$1.ComponentProps<"div">, keyof SaasflareComponentProps>, SaasflareComponentProps {
     /** Icon or illustration element */
     icon?: React$1.ReactNode;
     /** Title text */
@@ -1408,10 +1508,10 @@ interface EmptyStateProps extends React$1.ComponentProps<"div"> {
  *   action={<Button>Upload File</Button>}
  * />
  */
-declare function EmptyState({ icon, title, description, action, className, ...props }: EmptyStateProps): react_jsx_runtime.JSX.Element;
+declare function EmptyState({ icon, title, description, action, className, surface, radius, animated, ...props }: EmptyStateProps): react_jsx_runtime.JSX.Element;
 
 /** Props for the SearchField component */
-interface SearchFieldProps extends Omit<React$1.ComponentProps<"input">, "type"> {
+interface SearchFieldProps extends Omit<React$1.ComponentProps<"input">, "type" | keyof SaasflareComponentProps>, SaasflareComponentProps {
     /** Show loading spinner instead of search icon */
     loading?: boolean;
     /** Callback when clear button is clicked */
@@ -1436,10 +1536,10 @@ interface SearchFieldProps extends Omit<React$1.ComponentProps<"input">, "type">
  *   loading={isSearching}
  * />
  */
-declare function SearchField({ className, loading, onClear, value, ...props }: SearchFieldProps): react_jsx_runtime.JSX.Element;
+declare function SearchField({ className, loading, onClear, value, surface, radius, animated, ...props }: SearchFieldProps): react_jsx_runtime.JSX.Element;
 
 /** Props for the SettingsSection component */
-interface SettingsSectionProps extends React$1.ComponentProps<"div"> {
+interface SettingsSectionProps extends Omit<React$1.ComponentProps<"div">, keyof SaasflareComponentProps>, SaasflareComponentProps {
     /** Setting label */
     label: string;
     /** Optional description of the setting */
@@ -1462,10 +1562,10 @@ interface SettingsSectionProps extends React$1.ComponentProps<"div"> {
  *   <Button variant="outline" size="sm">Enable</Button>
  * </SettingsSection>
  */
-declare function SettingsSection({ label, description, className, children, ...props }: SettingsSectionProps): react_jsx_runtime.JSX.Element;
+declare function SettingsSection({ label, description, className, children, surface, radius, animated, ...props }: SettingsSectionProps): react_jsx_runtime.JSX.Element;
 
 /** Props for the PricingCard component */
-interface PricingCardProps extends React$1.ComponentProps<"div"> {
+interface PricingCardProps extends Omit<React$1.ComponentProps<"div">, keyof SaasflareComponentProps>, SaasflareComponentProps {
     /** Plan name (e.g. "Starter", "Pro", "Enterprise") */
     name: string;
     /** Formatted price (e.g. "$29", "Free", "$99") */
@@ -1506,8 +1606,10 @@ interface PricingCardProps extends React$1.ComponentProps<"div"> {
  *   featured
  * />
  */
-declare function PricingCard({ name, price, period, description, features, cta, featured, className, ...props }: PricingCardProps): react_jsx_runtime.JSX.Element;
+declare function PricingCard({ name, price, period, description, features, cta, featured, className, surface, radius, animated, ...props }: PricingCardProps): react_jsx_runtime.JSX.Element;
 
+interface DataToolbarProps extends Omit<React$1.ComponentProps<"div">, keyof SaasflareComponentProps>, SaasflareComponentProps {
+}
 /**
  * Toolbar container for data views.
  *
@@ -1522,7 +1624,7 @@ declare function PricingCard({ name, price, period, description, features, cta,
  *   </DataToolbarActions>
  * </DataToolbar>
  */
-declare function DataToolbar({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function DataToolbar({ className, surface, radius, animated, ...props }: DataToolbarProps): react_jsx_runtime.JSX.Element;
 /**
  * Search slot within the data toolbar.
  *
@@ -1637,4 +1739,4 @@ interface UserAvatarProps {
  */
 declare function UserAvatar({ src, name, initials, size, className }: UserAvatarProps): react_jsx_runtime.JSX.Element;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, AnimatedTooltip, AspectRatio, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent, 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, type Density, DirectionProvider, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, type EmptyStateProps, 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, Intent, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label, type Measurement, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MetricCard, type MetricCardProps, type MetricTrend, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, PageHeader, type PageHeaderProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, type PaginationRangeItem, Palette, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PricingCard, type PricingCardProps, Progress, RadioGroup, RadioGroupItem, Radius, RadiusProp, SaasflareComponentProps, SaasflareProvider, type SaasflareProviderProps, SaasflareScript, type SaasflareScriptProps, SaasflareShell, type SaasflareShellProps, ScrollArea, ScrollBar, ScrollToTopButton, SearchField, type SearchFieldProps, SectionCard, type SectionCardProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SettingsSection, type SettingsSectionProps, 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, type Size, Skeleton, Slider, SmoothScrollProvider, type SmoothScrollProviderProps, Spinner, StyleVariant, Surface, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeModeToggle, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, type TooltipItem, TooltipProvider, TooltipTrigger, TopLoadingBar, type TopLoadingBarProps, TypewriterText, type UseDisclosureOptions, type UseDisclosureReturn, type UseMeasureReturn, type UsePaginationOptions, type UsePaginationReturn, UserAvatar, type UserAvatarProps, badgeVariants, buttonGroupVariants, cn, fadeIn, navigationMenuTriggerStyle, noMotion, scaleIn, slideDown, slideUp, spring, springBouncy, springGentle, springStiff, toggleVariants, useAnimation, useDirection, useDisclosure, useFormField, useIsMobile, useMeasure, usePagination, useReducedMotion, useSaasflareTheme, useSidebar };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, AnimatedTooltip, AspectRatio, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent, 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, type Density, DirectionProvider, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, type EmptyStateProps, 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, Intent, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label, type Measurement, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MetricCard, type MetricCardProps, type MetricTrend, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, PageHeader, type PageHeaderProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, type PaginationRangeItem, Palette, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PricingCard, type PricingCardProps, Progress, RadioGroup, RadioGroupItem, Radius, RadiusProp, SaasflareComponentProps, type SaasflareMotion, SaasflareProvider, type SaasflareProviderProps, SaasflareScript, type SaasflareScriptProps, SaasflareShell, type SaasflareShellProps, ScrollArea, ScrollBar, ScrollToTopButton, SearchField, type SearchFieldProps, SectionCard, type SectionCardProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SettingsSection, type SettingsSectionProps, 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, type Size, Skeleton, Slider, SmoothScrollProvider, type SmoothScrollProviderProps, Spinner, StyleVariant, Surface, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeModeToggle, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, type TooltipItem, TooltipProvider, TooltipTrigger, TopLoadingBar, type TopLoadingBarProps, TypewriterText, type UseDisclosureOptions, type UseDisclosureReturn, type UseMeasureReturn, type UsePaginationOptions, type UsePaginationReturn, UserAvatar, type UserAvatarProps, badgeVariants, buttonGroupVariants, cn, fadeIn, navigationMenuTriggerStyle, noMotion, scaleIn, slideDown, slideUp, spring, springBouncy, springGentle, springStiff, toggleVariants, useAnimation, useDirection, useDisclosure, useFormField, useIsMobile, useMeasure, usePagination, useReducedMotion, useSaasflareMotion, useSaasflareTheme, useSidebar };