@saasflare/ui 3.1.1 → 3.2.0

package/dist/index.d.mts

@@ -1,13 +1,13 @@
 import { ClassValue } from 'clsx';
+import * as React$1 from 'react';
+import { Ref, MutableRefObject, RefCallback, ReactNode, JSX, ComponentProps } from 'react';
 import { Transition } from 'motion/react';
-import { I as Intent, B as Button } from './button-Brb4BhPO.mjs';
-export { a as ButtonProps, b as buttonVariants } from './button-Brb4BhPO.mjs';
+import { I as Intent, B as Button, a as ButtonProps } from './button-BA7OcXqy.mjs';
+export { b as buttonVariants } from './button-BA7OcXqy.mjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React$1 from 'react';
-import { ReactNode, JSX } from 'react';
-import { P as Palette, S as Surface, R as RadiusProp, a as StyleVariant, b as Radius, c as SaasflareComponentProps } from './use-saasflare-props-NrM2Glmp.mjs';
-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.mjs';
-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-CcaHMAsS.mjs';
+import { I as IconWeight, P as PhosphorIconProps, a as Palette, S as Surface, R as RadiusProp, b as StyleVariant, c as Radius, d as SaasflareComponentProps } from './use-saasflare-props-BrjMhU0U.mjs';
+export { C as CustomPalette, e as IconBase, f as PALETTES, g as PaletteId, h as RADII, i as ResolvedSaasflareProps, j as STYLES, u as useSaasflareProps } from './use-saasflare-props-BrjMhU0U.mjs';
+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-Cr0becOL.mjs';
 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';
@@ -164,6 +164,32 @@ type UseMeasureReturn<T extends Element = HTMLElement> = readonly [
  */
 declare function useMeasure<T extends Element = HTMLElement>(): UseMeasureReturn<T>;
 
+/** Options for useLocalStorage. */
+interface UseLocalStorageOptions<T> {
+    /** Custom serializer (default: JSON.stringify). */
+    serializer?: (value: T) => string;
+    /** Custom deserializer (default: JSON.parse). */
+    deserializer?: (raw: string) => T;
+    /** Called when read/write/remove fails. Falls back to console.warn if omitted. */
+    onError?: (error: unknown, operation: 'read' | 'write' | 'remove') => void;
+}
+/**
+ * Persists state to localStorage with automatic serialization,
+ * SSR safety, and same-tab + cross-tab synchronization.
+ *
+ * @param key - The localStorage key
+ * @param initialValue - Default value when key doesn't exist
+ * @param options - Optional serializer, deserializer, and error handler
+ * @returns Tuple of [value, setter, remover]
+ *
+ * @example
+ * const [lang, setLang, removeLang] = useLocalStorage('language', 'en');
+ * setLang('de');                    // sets and persists
+ * setLang(prev => prev + '-US');    // functional update
+ * removeLang();                     // removes key, reverts to 'en'
+ */
+declare function useLocalStorage<T>(key: string, initialValue: T, options?: UseLocalStorageOptions<T>): [T, (value: T | ((prev: T) => T)) => void, () => void];
+
 /** An item in the pagination range — either a page number or an ellipsis marker */
 type PaginationRangeItem = number | 'dots';
 /** Options for usePagination */
@@ -221,6 +247,115 @@ interface UsePaginationReturn {
  */
 declare function usePagination(options: UsePaginationOptions): UsePaginationReturn;
 
+/**
+ * @fileoverview Combine multiple refs (callback refs and ref objects) into a
+ * single ref callback. Required whenever a component both forwards a ref AND
+ * needs its own internal ref to the same DOM node.
+ * @author Saasflare™
+ * @module packages/ui/hooks/use-merged-ref
+ * @package ui
+ *
+ * @example
+ * const Card = forwardRef<HTMLDivElement, Props>(function Card(props, forwardedRef) {
+ *   const internalRef = useRef<HTMLDivElement>(null);
+ *   const ref = useMergedRef(internalRef, forwardedRef);
+ *   return <div ref={ref}>…</div>;
+ * });
+ */
+
+/** Anything React accepts as a ref slot. */
+type PossibleRef<T> = Ref<T> | MutableRefObject<T | null> | null | undefined;
+/**
+ * Merges any number of refs into a single ref callback. The callback is
+ * memoized on the identity of the input refs — if you pass new ref objects
+ * on every render, the callback identity will change and React will
+ * detach/reattach. In practice pass stable ref objects.
+ *
+ * @param refs - One or more refs (object refs or callback refs).
+ * @returns A stable ref callback that writes the node to every input ref.
+ *
+ * @example
+ * const ref = useMergedRef(forwardedRef, internalRef);
+ * <div ref={ref} />
+ */
+declare function useMergedRef<T>(...refs: PossibleRef<T>[]): RefCallback<T>;
+
+/** Return value of {@link useInterval}. */
+interface UseIntervalReturn {
+    /** Whether the interval is currently running. */
+    active: boolean;
+    /** Start (or restart) the interval. */
+    start: () => void;
+    /** Stop the interval. */
+    stop: () => void;
+    /** Toggle the interval. */
+    toggle: () => void;
+}
+/** Options for {@link useInterval}. */
+interface UseIntervalOptions {
+    /** If `true`, start the interval immediately. Default: `true`. */
+    autoInvoke?: boolean;
+}
+/**
+ * Calls `callback` every `delay` milliseconds. The latest callback is always
+ * invoked even if the callback identity changes between renders. Pass
+ * `delay = null` to pause.
+ *
+ * @param callback - Function to invoke on each tick.
+ * @param delay - Interval in milliseconds, or `null` to pause.
+ * @param options - Configuration.
+ * @returns Controls for starting/stopping the interval.
+ */
+declare function useInterval(callback: () => void, delay: number | null, options?: UseIntervalOptions): UseIntervalReturn;
+
+/**
+ * Returns a ref to attach to a container. While `active` is `true`:
+ *   - Initial focus moves to the first focusable child (or the container itself
+ *     if it has `tabindex`).
+ *   - Tab and Shift+Tab cycle within the container.
+ *   - On deactivate, focus is restored to whatever was focused before.
+ *
+ * @param active - Whether the trap is engaged.
+ * @returns A ref callback to attach to the container element.
+ *
+ * @example
+ * const trapRef = useFocusTrap<HTMLDivElement>(open);
+ * <div ref={trapRef}>…</div>
+ */
+declare function useFocusTrap<T extends HTMLElement = HTMLElement>(active: boolean): (node: T | null) => void;
+
+/** Options for {@link useFileDialog}. */
+interface UseFileDialogOptions {
+    /** MIME types or extensions to filter (matches `<input accept>`). */
+    accept?: string;
+    /** Allow multiple selection. Default: `false`. */
+    multiple?: boolean;
+    /** Restrict to a folder picker (only supported in Chromium). */
+    directory?: boolean;
+    /** Camera capture mode for mobile (`"user"` | `"environment"`). */
+    capture?: "user" | "environment";
+    /** Called after the user picks files. */
+    onChange?: (files: File[]) => void;
+}
+/** Return value of {@link useFileDialog}. */
+interface UseFileDialogReturn {
+    /** Most recently picked files (empty array if reset/never opened). */
+    files: File[];
+    /** Open the native file picker. */
+    open: () => void;
+    /** Clear the current selection. */
+    reset: () => void;
+}
+/**
+ * Returns an `open()` trigger that pops the native file picker, plus the
+ * selected `files`. No DOM rendered by the consumer is required — the hook
+ * mounts a hidden `<input>` lazily on first call.
+ *
+ * @param options - Configuration mirroring `<input type="file">` attributes.
+ * @returns The selected files and control callbacks.
+ */
+declare function useFileDialog(options?: UseFileDialogOptions): UseFileDialogReturn;
+
 /**
  * @fileoverview Shared motion presets for premium UI components.
  * @module packages/core/components/ui/motion-config
@@ -430,6 +565,77 @@ type Size = "xs" | "sm" | "md" | "lg" | "xl";
  */
 type Density = "compact" | "normal" | "comfortable";
 
+/**
+ * @fileoverview Base primitive for brand-logo Phosphor icons.
+ *
+ * Brand logos extend the standard four Phosphor weights with a fifth,
+ * `"colorful"` — the canonical multi-color brand mark from Iconify's `logos:`
+ * set. The colorful path can't reuse {@link IconBase} because brand SVGs
+ * have non-square viewBoxes (Apple is 256×315, Discord is 256×199, …) and
+ * use hardcoded brand colors instead of `currentColor`.
+ *
+ * BrandIconBase forks the render at the top:
+ *   - weight === "colorful" → emit own `<svg>` with the brand viewBox + content
+ *   - otherwise              → delegate to {@link IconBase}
+ *
+ * @module @saasflare/ui/components/ui/phosphor/brand-icon-base
+ */
+
+/** Brand-logo weight set: standard Phosphor weights + the colored brand variant. */
+type BrandIconWeight = IconWeight | "colorful";
+
+declare const ArrowLeftIcon: React$1.ForwardRefExoticComponent<PhosphorIconProps & React$1.RefAttributes<SVGSVGElement>>;
+
+declare const ArrowRightIcon: React$1.ForwardRefExoticComponent<PhosphorIconProps & React$1.RefAttributes<SVGSVGElement>>;
+
+declare const ArrowUpIcon: React$1.ForwardRefExoticComponent<PhosphorIconProps & React$1.RefAttributes<SVGSVGElement>>;
+
+declare const CaretDownIcon: React$1.ForwardRefExoticComponent<PhosphorIconProps & React$1.RefAttributes<SVGSVGElement>>;
+
+declare const CaretLeftIcon: React$1.ForwardRefExoticComponent<PhosphorIconProps & React$1.RefAttributes<SVGSVGElement>>;
+
+declare const CaretRightIcon: React$1.ForwardRefExoticComponent<PhosphorIconProps & React$1.RefAttributes<SVGSVGElement>>;
+
+declare const CaretUpIcon: React$1.ForwardRefExoticComponent<PhosphorIconProps & React$1.RefAttributes<SVGSVGElement>>;
+
+declare const CheckIcon: React$1.ForwardRefExoticComponent<PhosphorIconProps & React$1.RefAttributes<SVGSVGElement>>;
+
+declare const CheckCircleIcon: React$1.ForwardRefExoticComponent<PhosphorIconProps & React$1.RefAttributes<SVGSVGElement>>;
+
+declare const CircleIcon: React$1.ForwardRefExoticComponent<PhosphorIconProps & React$1.RefAttributes<SVGSVGElement>>;
+
+declare const CircleNotchIcon: React$1.ForwardRefExoticComponent<PhosphorIconProps & React$1.RefAttributes<SVGSVGElement>>;
+
+declare const DotsSixVerticalIcon: React$1.ForwardRefExoticComponent<PhosphorIconProps & React$1.RefAttributes<SVGSVGElement>>;
+
+declare const DotsThreeIcon: React$1.ForwardRefExoticComponent<PhosphorIconProps & React$1.RefAttributes<SVGSVGElement>>;
+
+declare const InfoIcon: React$1.ForwardRefExoticComponent<PhosphorIconProps & React$1.RefAttributes<SVGSVGElement>>;
+
+declare const MagnifyingGlassIcon: React$1.ForwardRefExoticComponent<PhosphorIconProps & React$1.RefAttributes<SVGSVGElement>>;
+
+declare const MinusIcon: React$1.ForwardRefExoticComponent<PhosphorIconProps & React$1.RefAttributes<SVGSVGElement>>;
+
+declare const MonitorIcon: React$1.ForwardRefExoticComponent<PhosphorIconProps & React$1.RefAttributes<SVGSVGElement>>;
+
+declare const MoonIcon: React$1.ForwardRefExoticComponent<PhosphorIconProps & React$1.RefAttributes<SVGSVGElement>>;
+
+declare const PauseIcon: React$1.ForwardRefExoticComponent<PhosphorIconProps & React$1.RefAttributes<SVGSVGElement>>;
+
+declare const PlayIcon: React$1.ForwardRefExoticComponent<PhosphorIconProps & React$1.RefAttributes<SVGSVGElement>>;
+
+declare const QuotesIcon: React$1.ForwardRefExoticComponent<PhosphorIconProps & React$1.RefAttributes<SVGSVGElement>>;
+
+declare const SidebarSimpleIcon: React$1.ForwardRefExoticComponent<PhosphorIconProps & React$1.RefAttributes<SVGSVGElement>>;
+
+declare const SunIcon: React$1.ForwardRefExoticComponent<PhosphorIconProps & React$1.RefAttributes<SVGSVGElement>>;
+
+declare const WarningIcon: React$1.ForwardRefExoticComponent<PhosphorIconProps & React$1.RefAttributes<SVGSVGElement>>;
+
+declare const XIcon: React$1.ForwardRefExoticComponent<PhosphorIconProps & React$1.RefAttributes<SVGSVGElement>>;
+
+declare const XCircleIcon: React$1.ForwardRefExoticComponent<PhosphorIconProps & React$1.RefAttributes<SVGSVGElement>>;
+
 /** Context value exposed by useSaasflareTheme(). */
 interface SaasflareThemeContextType {
     /** Active brand palette id, or null when using baseline. */
@@ -438,12 +644,16 @@ interface SaasflareThemeContextType {
     surface: StyleVariant;
     /** Active radius preset. */
     radius: Radius;
+    /** Active icon weight for component-rendered Phosphor icons. */
+    iconWeight: IconWeight;
     /** Set the active brand palette (persists to localStorage). */
     setPalette: (id: string) => void;
     /** Set the active surface style (persists to localStorage). */
     setSurface: (style: StyleVariant) => void;
     /** Set the active radius preset (persists to localStorage). */
     setRadius: (radius: Radius) => void;
+    /** Set the active icon weight (persists to localStorage). */
+    setIconWeight: (weight: IconWeight) => void;
 }
 /**
  * Access the Saasflare theme context.
@@ -478,9 +688,19 @@ interface SaasflareProviderProps {
      * - Omit to defer: uses persisted preference if any, otherwise "rounded"
      */
     radius?: RadiusProp;
-    /** Global animation kill switch. @default true */
+    /**
+     * Default icon weight for component-rendered Phosphor icons.
+     * - IconWeight ("regular" | "bold" | "fill" | "duotone") → forces the value
+     * - Omit to defer: uses persisted preference if any, otherwise "regular"
+     */
+    iconWeight?: IconWeight;
+    /**
+     * Global animation kill switch.
+     * - boolean → forces the value
+     * - Omit to defer: uses persisted preference if any, otherwise `true`
+     */
     animated?: boolean;
-    /** Enable smooth scrolling site-wide. @default false */
+    /** Enable smooth scrolling site-wide. @default true */
     smoothScrolling?: boolean;
     /**
      * Skip rendering the pre-hydration FOUT-prevention script.
@@ -520,7 +740,7 @@ interface SaasflareProviderProps {
  * @component
  * @package ui
  */
-declare function SaasflareProvider({ children, theme, palette, surface, radius, animated, smoothScrolling, disableScript, scriptNonce, storageKey, themeStorageKey, }: SaasflareProviderProps): react_jsx_runtime.JSX.Element;
+declare function SaasflareProvider({ children, theme, palette, surface, radius, iconWeight, animated, smoothScrolling, disableScript, scriptNonce, storageKey, themeStorageKey, }: SaasflareProviderProps): react_jsx_runtime.JSX.Element;
 
 /** Props for {@link SaasflareShell}. */
 interface SaasflareShellProps extends Omit<SaasflareProviderProps, "children" | "disableScript" | "scriptNonce"> {
@@ -665,7 +885,7 @@ declare function AlertDialogCancel({ className, ...props }: React$1.ComponentPro
 declare function Accordion({ ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Root>): 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;
+declare function AccordionItem({ className, surface, radius, animated, iconWeight, ...props }: AccordionItemProps): react_jsx_runtime.JSX.Element;
 /**
  * Accordion trigger with animated chevron indicator.
  *
@@ -711,7 +931,7 @@ declare function Textarea({ className, surface, radius, animated, ...props }: Te
 
 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 Checkbox({ className, surface, radius, animated, iconWeight, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
 
 interface SwitchProps extends Omit<React$1.ComponentProps<typeof SwitchPrimitive.Root>, keyof SaasflareComponentProps>, SaasflareComponentProps {
     size?: "sm" | "default";
@@ -733,6 +953,41 @@ interface ProgressProps extends Omit<React$1.ComponentProps<typeof ProgressPrimi
  */
 declare function Progress({ className, value, surface, radius, animated, ...props }: ProgressProps): react_jsx_runtime.JSX.Element;
 
+declare const SIZE_PX$1: {
+    readonly sm: 48;
+    readonly md: 64;
+    readonly lg: 96;
+    readonly xl: 128;
+};
+type ProgressCircleSize = keyof typeof SIZE_PX$1;
+/** Props for the ProgressCircle component. */
+interface ProgressCircleProps extends SaasflareComponentProps {
+    /** Current value in the range `[0, max]`. */
+    value: number;
+    /** Maximum value. Default: `100`. */
+    max?: number;
+    /** Size preset. Default: `"md"`. */
+    size?: ProgressCircleSize;
+    /** Ring stroke width in pixels. Default: derived from `size`. */
+    strokeWidth?: number;
+    /** Center content (e.g. the numeric label). */
+    children?: ReactNode;
+    /** Additional class names on the outer wrapper. */
+    className?: string;
+    /** Accessible label. Default: `"<value>%"`. */
+    "aria-label"?: string;
+}
+/**
+ * Circular progress indicator. Drop-in radial counterpart to Progress.
+ *
+ * @component
+ * @layer core
+ *
+ * @example
+ * <ProgressCircle value={72} />
+ */
+declare function ProgressCircle({ value, max, size, strokeWidth, children, className, surface, radius, animated, "aria-label": ariaLabel, }: ProgressCircleProps): react_jsx_runtime.JSX.Element;
+
 /**
  * Badge variant definitions.
  *
@@ -799,7 +1054,7 @@ declare function SelectTrigger({ className, size, children, ...props }: React$1.
 }): 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 SelectContent({ className, children, position, surface, radius, animated, iconWeight, ...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;
@@ -814,7 +1069,7 @@ declare function DropdownMenuSub({ ...props }: React$1.ComponentProps<typeof Dro
 declare function DropdownMenuRadioGroup({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): 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 DropdownMenuContent({ className, sideOffset, surface, radius, animated, iconWeight, ...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";
@@ -838,7 +1093,7 @@ interface SheetContentProps extends Omit<React$1.ComponentProps<typeof DialogPri
     side?: "top" | "right" | "bottom" | "left";
     showCloseButton?: boolean;
 }
-declare function SheetContent({ className, children, side, showCloseButton, surface, radius, animated, ...props }: SheetContentProps): react_jsx_runtime.JSX.Element;
+declare function SheetContent({ className, children, side, showCloseButton, surface, radius, animated, iconWeight, ...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;
@@ -880,7 +1135,7 @@ interface AlertProps extends Omit<React$1.ComponentProps<"div">, keyof Saasflare
  *   <AlertDescription>Something went wrong.</AlertDescription>
  * </Alert>
  */
-declare function Alert({ className, intent: intentProp, variant, surface, radius, animated, ...props }: AlertProps): react_jsx_runtime.JSX.Element;
+declare function Alert({ className, intent: intentProp, variant, surface, radius, animated, iconWeight, ...props }: AlertProps): react_jsx_runtime.JSX.Element;
 /**
  * Alert title text.
  *
@@ -918,7 +1173,7 @@ declare function ContextMenuSubTrigger({ className, inset, children, ...props }:
 declare function ContextMenuSubContent({ className, ...props }: React$1.ComponentProps<typeof ContextMenuPrimitive.SubContent>): 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 ContextMenuContent({ className, surface, radius, animated, iconWeight, ...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";
@@ -933,7 +1188,7 @@ declare function ContextMenuShortcut({ className, ...props }: React$1.ComponentP
 
 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 Menubar({ className, surface, radius, animated, iconWeight, ...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;
@@ -941,7 +1196,7 @@ declare function MenubarRadioGroup({ ...props }: React$1.ComponentProps<typeof M
 declare function MenubarTrigger({ className, ...props }: React$1.ComponentProps<typeof MenubarPrimitive.Trigger>): 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 MenubarContent({ className, align, alignOffset, sideOffset, surface, radius, animated, iconWeight, ...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";
@@ -962,7 +1217,7 @@ declare function MenubarSubContent({ className, ...props }: React$1.ComponentPro
 interface NavigationMenuProps extends Omit<React$1.ComponentProps<typeof NavigationMenuPrimitive.Root>, keyof SaasflareComponentProps>, SaasflareComponentProps {
     viewport?: boolean;
 }
-declare function NavigationMenu({ className, children, viewport, surface, radius, animated, ...props }: NavigationMenuProps): react_jsx_runtime.JSX.Element;
+declare function NavigationMenu({ className, children, viewport, surface, radius, animated, iconWeight, ...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;
@@ -1012,7 +1267,7 @@ declare function ToggleGroupItem({ className, children, variant, size, ...props
 
 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 RadioGroup({ className, surface, radius, animated, iconWeight, ...props }: RadioGroupProps): react_jsx_runtime.JSX.Element;
 declare function RadioGroupItem({ className, ...props }: React$1.ComponentProps<typeof RadioGroupPrimitive.Item>): react_jsx_runtime.JSX.Element;
 
 interface CollapsibleContentProps extends Omit<React$1.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>, keyof SaasflareComponentProps>, SaasflareComponentProps {
@@ -1032,13 +1287,13 @@ declare function ScrollBar({ className, orientation, ...props }: React$1.Compone
 
 interface SaasflareToasterProps extends Omit<ToasterProps, keyof SaasflareComponentProps>, SaasflareComponentProps {
 }
-declare const Toaster: ({ surface, radius, animated, ...props }: SaasflareToasterProps) => react_jsx_runtime.JSX.Element;
+declare const Toaster: ({ surface, radius, animated, iconWeight, ...props }: SaasflareToasterProps) => react_jsx_runtime.JSX.Element;
 
 declare function AspectRatio({ ...props }: React.ComponentProps<typeof AspectRatioPrimitive.Root>): 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 Breadcrumb({ surface, radius, animated, iconWeight, ...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"> & {
@@ -1221,7 +1476,7 @@ declare function KbdGroup({ className, ...props }: React.ComponentProps<"div">):
 interface NativeSelectProps extends Omit<React$1.ComponentProps<"select">, "size" | keyof SaasflareComponentProps>, SaasflareComponentProps {
     size?: "sm" | "default";
 }
-declare function NativeSelect({ className, size, surface, radius, animated, ...props }: NativeSelectProps): react_jsx_runtime.JSX.Element;
+declare function NativeSelect({ className, size, surface, radius, animated, iconWeight, ...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;
 
@@ -1478,6 +1733,480 @@ interface MetricCardProps extends Omit<React$1.ComponentProps<"div">, keyof Saas
  */
 declare function MetricCard({ label, value, trend, icon, className, surface, radius, animated, ...props }: MetricCardProps): react_jsx_runtime.JSX.Element;
 
+/** A single row in the list. */
+interface BarListItem {
+    /** Row label. */
+    name: string;
+    /** Numeric value driving the bar width. */
+    value: number;
+    /** Optional icon shown left of the label. */
+    icon?: ReactNode;
+    /** Optional click target for the row label (wraps in `<a>`). */
+    href?: string;
+    /** Optional per-row color override (any CSS color). */
+    color?: string;
+}
+/** Props for the BarList component. */
+interface BarListProps extends SaasflareComponentProps {
+    /** Rows to render. */
+    data: BarListItem[];
+    /** Formats the numeric value on the right edge. Default: `String(n)`. */
+    valueFormatter?: (value: number) => string;
+    /** Sort rows by value descending. Default: `true`. */
+    sortDescending?: boolean;
+    /** Maximum rows rendered (truncates after sort). */
+    limit?: number;
+    /** Additional class names. */
+    className?: string;
+}
+/**
+ * Horizontal bar list — common dashboard "top N" rankings pattern.
+ *
+ * @component
+ * @layer core
+ */
+declare function BarList({ data, valueFormatter, sortDescending, limit, className, surface, radius, animated, }: BarListProps): react_jsx_runtime.JSX.Element;
+
+/** Visual variant of the spark chart. */
+type SparkChartVariant = "line" | "area" | "bar";
+/** Props for the SparkChart component. */
+interface SparkChartProps extends SaasflareComponentProps {
+    /** Series of numeric points (length ≥ 2). */
+    data: number[];
+    /** Visual treatment. Default: `"area"`. */
+    variant?: SparkChartVariant;
+    /** Stroke / fill color (any CSS color). Default: `var(--primary)`. */
+    color?: string;
+    /** SVG width in pixels. Default: `64`. */
+    width?: number;
+    /** SVG height in pixels. Default: `24`. */
+    height?: number;
+    /** Line stroke width in pixels. Default: `1.5`. */
+    strokeWidth?: number;
+    /** Additional class names. */
+    className?: string;
+    /** Accessible label. */
+    "aria-label"?: string;
+}
+/**
+ * Inline mini chart for KPI tiles, table cells, and metric cards.
+ *
+ * @component
+ * @layer core
+ */
+declare function SparkChart({ data, variant, color, width, height, strokeWidth, className, surface, radius, animated, "aria-label": ariaLabel, }: SparkChartProps): react_jsx_runtime.JSX.Element | null;
+
+/** A single tracker block. */
+interface TrackerBlock {
+    /** Named color key (emerald|teal|blue|amber|red|rose|gray) or any CSS color. */
+    color?: string;
+    /** Tooltip text shown on hover. */
+    tooltip?: ReactNode;
+    /** Custom key (helps React when blocks rearrange). */
+    key?: string | number;
+}
+/** Props for the Tracker component. */
+interface TrackerProps extends SaasflareComponentProps {
+    /** Blocks to render, left-to-right. */
+    data: TrackerBlock[];
+    /** Height of each block in px. Default: `32`. */
+    blockHeight?: number;
+    /** Gap between blocks in px. Default: `2`. */
+    gap?: number;
+    /** Additional class names. */
+    className?: string;
+}
+/**
+ * Status segment grid (uptime/incident timeline).
+ *
+ * @component
+ * @layer core
+ */
+declare function Tracker({ data, blockHeight, gap, className, surface, radius, animated, }: TrackerProps): react_jsx_runtime.JSX.Element;
+
+/** Reason a file was rejected by the dropzone's built-in validation. */
+type DropzoneRejectionReason = "too-large" | "type-mismatch";
+/** A rejected file with the reason. */
+interface DropzoneRejection {
+    file: File;
+    reason: DropzoneRejectionReason;
+}
+/** Props for the Dropzone component. */
+interface DropzoneProps extends SaasflareComponentProps {
+    /** Called with `(accepted, rejected)` when the user drops or picks files. */
+    onDrop?: (accepted: File[], rejected: DropzoneRejection[]) => void;
+    /** MIME types or extensions to accept (matches `<input accept>`). */
+    accept?: string;
+    /** Maximum file size in bytes. */
+    maxSize?: number;
+    /** Allow multiple file selection. Default: `true`. */
+    multiple?: boolean;
+    /** Disable the dropzone. */
+    disabled?: boolean;
+    /** Render-prop body. Receives `isDragActive`. Falls back to the default UI. */
+    children?: ReactNode | ((state: {
+        isDragActive: boolean;
+    }) => ReactNode);
+    /** Additional class names. */
+    className?: string;
+}
+/**
+ * Drag-and-drop file upload area with click-to-open fallback.
+ *
+ * @component
+ * @layer core
+ */
+declare function Dropzone({ onDrop, accept, maxSize, multiple, disabled, children, className, surface, radius, animated, }: DropzoneProps): react_jsx_runtime.JSX.Element;
+
+/** Inclusive date range, identical shape to react-day-picker's `DateRange`. */
+interface DateRange {
+    from: Date | undefined;
+    to?: Date | undefined;
+}
+/** Props for the DateRangePicker component. */
+interface DateRangePickerProps extends SaasflareComponentProps {
+    /** Controlled value. */
+    value?: DateRange;
+    /** Uncontrolled default value. */
+    defaultValue?: DateRange;
+    /** Called when the user picks a new range. */
+    onChange?: (range: DateRange | undefined) => void;
+    /** Placeholder shown in the trigger when no range is set. */
+    placeholder?: string;
+    /** Number of months shown side-by-side. Default: `2`. */
+    numberOfMonths?: number;
+    /** Earliest pickable date. */
+    minDate?: Date;
+    /** Latest pickable date. */
+    maxDate?: Date;
+    /** Disable the trigger. */
+    disabled?: boolean;
+    /** Format function for the trigger label. Default: locale-aware `toLocaleDateString`. */
+    formatRange?: (range: DateRange) => string;
+    /** Additional class names on the trigger. */
+    className?: string;
+}
+/**
+ * Date-range input + popover calendar. Composes Button + Popover + Calendar.
+ *
+ * @component
+ * @layer core
+ */
+declare function DateRangePicker({ value, defaultValue, onChange, placeholder, numberOfMonths, minDate, maxDate, disabled, formatRange, className, surface, radius, animated, iconWeight, }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
+
+/** Props for the DatePicker component. */
+interface DatePickerProps extends SaasflareComponentProps {
+    /** Controlled value. */
+    value?: Date;
+    /** Uncontrolled default value. */
+    defaultValue?: Date;
+    /** Called when the user picks a date. */
+    onChange?: (date: Date | undefined) => void;
+    /** Placeholder shown when no date is set. */
+    placeholder?: string;
+    /** Earliest pickable date. */
+    minDate?: Date;
+    /** Latest pickable date. */
+    maxDate?: Date;
+    /** Disable the trigger. */
+    disabled?: boolean;
+    /** Format function for the trigger label. Default: locale-aware. */
+    formatDate?: (date: Date) => string;
+    /** Additional class names on the trigger. */
+    className?: string;
+}
+/**
+ * Single-date input + popover calendar. Composes Button + Popover + Calendar.
+ *
+ * @component
+ * @layer core
+ */
+declare function DatePicker({ value, defaultValue, onChange, placeholder, minDate, maxDate, disabled, formatDate, className, surface, radius, animated, iconWeight, }: DatePickerProps): react_jsx_runtime.JSX.Element;
+
+declare const INTENTS: readonly ["primary", "neutral", "success", "warning", "danger", "info"];
+type CalloutIntent = (typeof INTENTS)[number];
+/** Props for the Callout component. */
+interface CalloutProps extends SaasflareComponentProps {
+    /** Color intent. Default: `"info"`. */
+    intent?: CalloutIntent;
+    /** Bold title rendered above the body. */
+    title?: ReactNode;
+    /** Leading icon (rendered in the same color as the intent stripe). */
+    icon?: ReactNode;
+    /** Body content. */
+    children?: ReactNode;
+    /** Additional class names. */
+    className?: string;
+}
+/**
+ * Inline emphasized message box with intent-driven coloring.
+ *
+ * @component
+ * @layer core
+ *
+ * @example
+ * <Callout intent="success" title="Saved">Your changes are live.</Callout>
+ */
+declare function Callout({ intent, title, icon, children, className, surface, radius, animated, iconWeight, }: CalloutProps): react_jsx_runtime.JSX.Element;
+
+/** Props for the TagInput component. */
+interface TagInputProps extends SaasflareComponentProps {
+    /** Controlled list of tags. */
+    value?: string[];
+    /** Uncontrolled initial tags. */
+    defaultValue?: string[];
+    /** Called whenever the tag list changes. */
+    onChange?: (tags: string[]) => void;
+    /** Placeholder shown in the input. */
+    placeholder?: string;
+    /** Maximum number of tags accepted. */
+    maxTags?: number;
+    /** Characters that commit the current input as a tag. Default: `[",", "Enter"]`. */
+    separators?: string[];
+    /** Reject duplicate tags. Default: `true`. */
+    unique?: boolean;
+    /** Disable the input. */
+    disabled?: boolean;
+    /** Custom renderer for each pill. Falls back to the default pill UI. */
+    renderTag?: (tag: string, onRemove: () => void) => ReactNode;
+    /** Additional class names on the outer wrapper. */
+    className?: string;
+    /** Accessible label. */
+    "aria-label"?: string;
+}
+/**
+ * Input field that converts text into removable tag pills.
+ *
+ * @component
+ * @layer core
+ */
+declare function TagInput({ value, defaultValue, onChange, placeholder, maxTags, separators, unique, disabled, renderTag, className, surface, radius, animated, "aria-label": ariaLabel, }: TagInputProps): react_jsx_runtime.JSX.Element;
+
+/** Props for the NumberInput component. */
+interface NumberInputProps extends SaasflareComponentProps {
+    /** Controlled value. */
+    value?: number;
+    /** Uncontrolled initial value. */
+    defaultValue?: number;
+    /** Called when the value changes (after clamp). */
+    onChange?: (value: number) => void;
+    /** Minimum allowed value. */
+    min?: number;
+    /** Maximum allowed value. */
+    max?: number;
+    /** Step for stepper buttons + arrow keys. Default: `1`. */
+    step?: number;
+    /** Decimal precision for display. Default: derived from `step`. */
+    precision?: number;
+    /** Placeholder shown when empty. */
+    placeholder?: string;
+    /** Disable the input. */
+    disabled?: boolean;
+    /** Read-only input. */
+    readOnly?: boolean;
+    /** Hide the stepper buttons. */
+    hideSteppers?: boolean;
+    /** Additional class names on the outer wrapper. */
+    className?: string;
+    /** Name attribute (for form submission). */
+    name?: string;
+    /** Accessible label. */
+    "aria-label"?: string;
+}
+/**
+ * Numeric input with stepper buttons and clamping.
+ *
+ * @component
+ * @layer core
+ */
+declare function NumberInput({ value, defaultValue, onChange, min, max, step, precision, placeholder, disabled, readOnly, hideSteppers, className, name, surface, radius, animated, "aria-label": ariaLabel, }: NumberInputProps): react_jsx_runtime.JSX.Element;
+
+declare const SIZE_PX: {
+    readonly sm: 14;
+    readonly md: 20;
+    readonly lg: 28;
+    readonly xl: 36;
+};
+type RatingSize = keyof typeof SIZE_PX;
+/** Props for the Rating component. */
+interface RatingProps extends SaasflareComponentProps {
+    /** Controlled value (0..count). */
+    value?: number;
+    /** Uncontrolled initial value. */
+    defaultValue?: number;
+    /** Called when the user clicks a star. */
+    onChange?: (value: number) => void;
+    /** Number of stars. Default: `5`. */
+    count?: number;
+    /** Allow half-star granularity. Default: `false`. */
+    allowHalf?: boolean;
+    /** Read-only display mode (no interaction, no hover preview). */
+    readOnly?: boolean;
+    /** Disable the rating. */
+    disabled?: boolean;
+    /** Star size. Default: `"md"`. */
+    size?: RatingSize;
+    /** Star color (any CSS color). Default: `var(--warning)` — brand-independent gold. */
+    color?: string;
+    /** Additional class names. */
+    className?: string;
+    /** Accessible label. */
+    "aria-label"?: string;
+}
+/**
+ * Star rating input with half-star and read-only support.
+ *
+ * @component
+ * @layer core
+ */
+declare function Rating({ value, defaultValue, onChange, count, allowHalf, readOnly, disabled, size, color, className, surface, radius, animated, "aria-label": ariaLabel, }: RatingProps): react_jsx_runtime.JSX.Element;
+
+/** A single segment of the bar. */
+interface CategoryBarSegment {
+    /** Numeric value driving the segment width (auto-normalized). */
+    value: number;
+    /** Any CSS color. Falls back to a derived primary tint. */
+    color?: string;
+    /** Optional label shown below the segment when `showLabels` is true. */
+    label?: string;
+}
+/** Props for the CategoryBar component. */
+interface CategoryBarProps extends SaasflareComponentProps {
+    /** Segments to render, left-to-right. */
+    segments: CategoryBarSegment[];
+    /** Bar height in pixels. Default: `8`. */
+    height?: number;
+    /** Render labels + percentages under each segment. */
+    showLabels?: boolean;
+    /** Formats the percentage text. Default: `"NN%"`. */
+    valueFormatter?: (percent: number) => string;
+    /** Additional class names. */
+    className?: string;
+    /** Accessible label for the bar group. */
+    "aria-label"?: string;
+}
+/**
+ * Segmented progress bar with optional labels.
+ *
+ * @component
+ * @layer core
+ */
+declare function CategoryBar({ segments, height, showLabels, valueFormatter, className, surface, radius, animated, "aria-label": ariaLabel, }: CategoryBarProps): react_jsx_runtime.JSX.Element | null;
+
+/** A single tree node. */
+interface TreeNode {
+    /** Unique node id (stable across renders). */
+    id: string;
+    /** Display label or any ReactNode. */
+    label: ReactNode;
+    /** Leading icon (e.g. file/folder glyph). */
+    icon?: ReactNode;
+    /** Child nodes (omit for leaves). */
+    children?: TreeNode[];
+    /** Disable interaction for this node. */
+    disabled?: boolean;
+}
+/** Props for the TreeView component. */
+interface TreeViewProps extends SaasflareComponentProps {
+    /** Tree data, top-level nodes. */
+    data: TreeNode[];
+    /** Controlled expanded ids. */
+    expanded?: string[];
+    /** Uncontrolled initial expansion. */
+    defaultExpanded?: string[];
+    /** Called when a node is expanded/collapsed. */
+    onExpand?: (ids: string[]) => void;
+    /** Controlled selected id. */
+    selected?: string | null;
+    /** Uncontrolled initial selection. */
+    defaultSelected?: string | null;
+    /** Called when selection changes. */
+    onSelect?: (id: string | null) => void;
+    /** Additional class names on the root. */
+    className?: string;
+}
+/**
+ * Recursive expand/collapse tree with keyboard navigation.
+ *
+ * @component
+ * @layer core
+ */
+declare function TreeView({ data, expanded, defaultExpanded, onExpand, selected, defaultSelected, onSelect, className, surface, radius, animated, iconWeight, }: TreeViewProps): react_jsx_runtime.JSX.Element;
+
+/** Props for the CodeBlock component. */
+interface CodeBlockProps extends SaasflareComponentProps {
+    /** Plain source code (rendered as monospace, no highlighting). */
+    code?: string;
+    /** Pre-highlighted HTML — e.g. output from Shiki's `codeToHtml`. */
+    highlighted?: string;
+    /** Language label shown in the header (purely cosmetic). */
+    language?: string;
+    /** Filename shown left of the language badge. */
+    filename?: string;
+    /** Show 1-based line numbers in the gutter. */
+    showLineNumbers?: boolean;
+    /** Hide the top bar (copy button still floats inside the block). */
+    hideHeader?: boolean;
+    /** Hide the copy-to-clipboard button. */
+    hideCopyButton?: boolean;
+    /** Additional class names on the outer wrapper. */
+    className?: string;
+}
+/**
+ * Code block with filename header, language badge, copy button, and optional
+ * line numbers. Highlighting is BYO (pass `highlighted` HTML or `code` text).
+ *
+ * @component
+ * @layer core
+ */
+declare function CodeBlock({ code, highlighted, language, filename, showLineNumbers, hideHeader, hideCopyButton, className, surface, radius, animated, }: CodeBlockProps): react_jsx_runtime.JSX.Element;
+
+/** A single notification item. */
+interface NotificationItem {
+    /** Stable unique id. */
+    id: string;
+    /** Bold title line. */
+    title: ReactNode;
+    /** Secondary body line. */
+    description?: ReactNode;
+    /** Display timestamp (already formatted — e.g. "5m ago"). */
+    timestamp?: string;
+    /** Whether the notification has been read. */
+    read?: boolean;
+    /** Optional leading icon. */
+    icon?: ReactNode;
+    /** Optional href — wraps the row in `<a>`. */
+    href?: string;
+}
+/** Props for the NotificationCenter component. */
+interface NotificationCenterProps extends SaasflareComponentProps {
+    /** Notifications to display. */
+    items: NotificationItem[];
+    /** Header title in the popover. Default: `"Notifications"`. */
+    title?: string;
+    /** Called when the user clicks a row (also passes the item). */
+    onItemClick?: (item: NotificationItem) => void;
+    /** Called when "Mark as read" is tapped on a row. */
+    onMarkRead?: (id: string) => void;
+    /** Called when "Mark all as read" is tapped. Hide the action by omitting this. */
+    onMarkAllRead?: () => void;
+    /** Custom empty-state content. */
+    emptyState?: ReactNode;
+    /** Maximum items rendered (older ones truncated). */
+    limit?: number;
+    /** Additional class names on the trigger button. */
+    triggerClassName?: string;
+    /** Additional class names on the popover content. */
+    contentClassName?: string;
+}
+/**
+ * Bell trigger + dropdown inbox of notifications.
+ *
+ * @component
+ * @layer core
+ */
+declare function NotificationCenter({ items, title, onItemClick, onMarkRead, onMarkAllRead, emptyState, limit, triggerClassName, contentClassName, surface, radius, animated, iconWeight, }: NotificationCenterProps): react_jsx_runtime.JSX.Element;
+
 /** Props for the EmptyState component */
 interface EmptyStateProps extends Omit<React$1.ComponentProps<"div">, keyof SaasflareComponentProps>, SaasflareComponentProps {
     /** Icon or illustration element */
@@ -1536,7 +2265,7 @@ interface SearchFieldProps extends Omit<React$1.ComponentProps<"input">, "type"
  *   loading={isSearching}
  * />
  */
-declare function SearchField({ className, loading, onClear, value, surface, radius, animated, ...props }: SearchFieldProps): react_jsx_runtime.JSX.Element;
+declare function SearchField({ className, loading, onClear, value, surface, radius, animated, iconWeight, ...props }: SearchFieldProps): react_jsx_runtime.JSX.Element;
 
 /** Props for the SettingsSection component */
 interface SettingsSectionProps extends Omit<React$1.ComponentProps<"div">, keyof SaasflareComponentProps>, SaasflareComponentProps {
@@ -1606,7 +2335,7 @@ interface PricingCardProps extends Omit<React$1.ComponentProps<"div">, keyof Saa
  *   featured
  * />
  */
-declare function PricingCard({ name, price, period, description, features, cta, featured, className, surface, radius, animated, ...props }: PricingCardProps): react_jsx_runtime.JSX.Element;
+declare function PricingCard({ name, price, period, description, features, cta, featured, className, surface, radius, animated, iconWeight, ...props }: PricingCardProps): react_jsx_runtime.JSX.Element;
 
 interface DataToolbarProps extends Omit<React$1.ComponentProps<"div">, keyof SaasflareComponentProps>, SaasflareComponentProps {
 }
@@ -1647,6 +2376,30 @@ declare function DataToolbarFilters({ className, ...props }: React$1.ComponentPr
  */
 declare function DataToolbarActions({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 
+/** Props for the AuroraBackground component. */
+interface AuroraBackgroundProps extends Omit<ComponentProps<"div">, keyof SaasflareComponentProps | "color">, SaasflareComponentProps {
+    /**
+     * Three ambient blob colors in order: top-left, right, bottom-left.
+     * Default: curated peach + blue + violet showcase palette.
+     */
+    colors?: readonly [string, string, string];
+    /** Overall blob opacity (0–1). Default: `0.55`. Auto-halved in dark mode via `dark:` modifier. */
+    intensity?: number;
+}
+/**
+ * Soft multi-color gradient backdrop for showcase, demo, and marketing sections.
+ *
+ * Renders three blurred radial blobs positioned at corners around the children
+ * slot. Default palette is a fixed showcase combination (peach / blue / violet)
+ * so the visual stays consistent across brand palettes; pass `colors` to switch
+ * to brand-rotating tokens. Drift animation is on by default and respects
+ * `prefers-reduced-motion`.
+ *
+ * @component
+ * @layer core
+ */
+declare function AuroraBackground({ colors, intensity, className, children, surface, radius, animated, ...props }: AuroraBackgroundProps): react_jsx_runtime.JSX.Element;
+
 /**
  * Props for the ScrollToTopButton component.
  *
@@ -1675,6 +2428,91 @@ interface ScrollToTopButtonProps extends SaasflareComponentProps {
  */
 declare function ScrollToTopButton({ scrollContainerId, scrollOffset, className, ...sfProps }: ScrollToTopButtonProps): JSX.Element;
 
+/**
+ * Props for {@link StatefulButton}. Extends {@link ButtonProps} with two
+ * orthogonal stateful concerns. `asChild` is intentionally excluded — a
+ * Slot-rendered button cannot own its own DOM children, so the spinner /
+ * loading-text swap would be ambiguous.
+ */
+interface StatefulButtonProps extends Omit<ButtonProps, "asChild"> {
+    /** Pending state: forces disabled, shows spinner, swaps label when `loadingText` is set. */
+    loading?: boolean;
+    /** Optional label to show in place of children while `loading` is true. */
+    loadingText?: React$1.ReactNode;
+}
+/**
+ * Button with built-in loading state.
+ *
+ * `loading` is the single source of truth for pending UI:
+ *   - sets `disabled` (forwarded to native button)
+ *   - sets `aria-busy="true"` for assistive tech
+ *   - prepends an animated spinner before the label
+ *   - replaces `children` with `loadingText` if provided (otherwise label stays)
+ *
+ * @component
+ * @layer composed
+ *
+ * @param {boolean} loading - Pending state.
+ * @param {React.ReactNode} loadingText - Optional override label while loading.
+ * @param disabled
+ * @param children
+ * @param rest
+ */
+declare function StatefulButton({ loading, loadingText, disabled, children, ...rest }: StatefulButtonProps): react_jsx_runtime.JSX.Element;
+
+declare const PROVIDERS: readonly ["google", "github", "apple", "microsoft", "x", "discord", "facebook", "linkedin", "medium", "slack", "reddit", "paypal", "stripe", "gitlab", "dribbble", "tiktok"];
+type SocialProvider = (typeof PROVIDERS)[number];
+/**
+ * Props for {@link SocialAuthButton}. Inherits {@link StatefulButtonProps},
+ * but widens `iconWeight` to {@link BrandIconWeight} so the colored brand
+ * variant can be requested per-instance.
+ *
+ * The visible label is resolved with the precedence:
+ *   `children` > `label` > `"Continue with {Provider}"`
+ */
+interface SocialAuthButtonProps extends Omit<StatefulButtonProps, "iconWeight"> {
+    /** Identity provider — drives icon and default label. */
+    provider: SocialProvider;
+    /** Override the visible label. Default: "Continue with {Provider}". */
+    label?: React$1.ReactNode;
+    /**
+     * Icon weight. Accepts the four Phosphor weights (theme-aware via the
+     * Saasflare provider chain) plus the brand-locked `"colorful"` variant.
+     */
+    iconWeight?: BrandIconWeight;
+}
+/**
+ * Generic provider-branded auth button.
+ *
+ * Defaults: `variant="outline"` `intent="neutral"`.
+ *
+ * The Phosphor weights (`regular | bold | fill | duotone`) inherit from
+ * `<SaasflareProvider iconWeight="…">` via {@link useSaasflareProps}; the
+ * `colorful` weight is opt-in per-instance and bypasses the provider chain
+ * because brand colors are not themable.
+ *
+ * @component
+ * @layer brand
+ */
+declare function SocialAuthButton({ provider, label, variant, intent, fullWidth, surface, radius, animated, iconWeight, children, ...rest }: SocialAuthButtonProps): react_jsx_runtime.JSX.Element;
+type ProviderShortcutProps = Omit<SocialAuthButtonProps, "provider">;
+declare const GoogleAuthButton: (props: ProviderShortcutProps) => react_jsx_runtime.JSX.Element;
+declare const GitHubAuthButton: (props: ProviderShortcutProps) => react_jsx_runtime.JSX.Element;
+declare const AppleAuthButton: (props: ProviderShortcutProps) => react_jsx_runtime.JSX.Element;
+declare const MicrosoftAuthButton: (props: ProviderShortcutProps) => react_jsx_runtime.JSX.Element;
+declare const XAuthButton: (props: ProviderShortcutProps) => react_jsx_runtime.JSX.Element;
+declare const DiscordAuthButton: (props: ProviderShortcutProps) => react_jsx_runtime.JSX.Element;
+declare const FacebookAuthButton: (props: ProviderShortcutProps) => react_jsx_runtime.JSX.Element;
+declare const LinkedInAuthButton: (props: ProviderShortcutProps) => react_jsx_runtime.JSX.Element;
+declare const MediumAuthButton: (props: ProviderShortcutProps) => react_jsx_runtime.JSX.Element;
+declare const SlackAuthButton: (props: ProviderShortcutProps) => react_jsx_runtime.JSX.Element;
+declare const RedditAuthButton: (props: ProviderShortcutProps) => react_jsx_runtime.JSX.Element;
+declare const PayPalAuthButton: (props: ProviderShortcutProps) => react_jsx_runtime.JSX.Element;
+declare const StripeAuthButton: (props: ProviderShortcutProps) => react_jsx_runtime.JSX.Element;
+declare const GitLabAuthButton: (props: ProviderShortcutProps) => react_jsx_runtime.JSX.Element;
+declare const DribbbleAuthButton: (props: ProviderShortcutProps) => react_jsx_runtime.JSX.Element;
+declare const TikTokAuthButton: (props: ProviderShortcutProps) => react_jsx_runtime.JSX.Element;
+
 /**
  * Theme mode toggle button with Sun/Moon icons.
  *
@@ -1683,15 +2521,120 @@ declare function ScrollToTopButton({ scrollContainerId, scrollOffset, className,
  *
  * @param {object} props - Component props
  * @param {boolean} [props.showText=false] - Whether to show the label text visibly
- * @param {string} [props.text] - Custom label text override
+ * @param {string} [props.textLight] - Label shown while in light mode (prompting switch to dark)
+ * @param {string} [props.textDark] - Label shown while in dark mode (prompting switch to light)
  * @param {string} [props.className] - Additional CSS class names
  * @returns {JSX.Element | null} The toggle button, or null before hydration
  */
-declare function ThemeModeToggle({ showText, text, className, }: {
+interface ThemeModeToggleProps extends SaasflareComponentProps {
+    /** Whether to show the label text visibly. */
     showText?: boolean;
-    text?: string;
+    /** Label shown while in light mode (prompting switch to dark). */
+    textLight?: string;
+    /** Label shown while in dark mode (prompting switch to light). */
+    textDark?: string;
+    /** Additional CSS class names. */
+    className?: string;
+    /**
+     * SSR-known resolved theme (`"dark"` or `"light"`) — typically read from a
+     * cookie in the parent server component. When provided, the button skips
+     * its internal mount-gate and renders the correct sun/moon glyph on the
+     * very first paint, eliminating the brief blank frame caused by
+     * `next-themes` returning `undefined` during SSR.
+     *
+     * Leave undefined for the legacy mount-gated behaviour.
+     */
+    initialResolvedTheme?: 'light' | 'dark';
+}
+declare function ThemeModeToggle({ showText, textLight, textDark, className, surface, radius, animated, iconWeight, initialResolvedTheme, }: ThemeModeToggleProps): JSX.Element | null;
+
+/**
+ * @fileoverview Three-segment theme toggle (light / dark / system).
+ *
+ * Pill-shaped segmented control with Sun, Moon, and Monitor icons. Built on
+ * the design-system `ToggleGroup` primitive (Pattern B — CSS-motion).
+ *
+ * Three appearances:
+ *   - `"icon"` (default) — segments are small circles floating inside the
+ *     rail. The active segment is filled with `--background` and a subtle
+ *     ring. Segment shape is always pill, independent of the rail's
+ *     `radius`.
+ *   - `"icon-inherit"` — same compact icon footprint as `"icon"`, but each
+ *     segment's border-radius matches the rail's `radius`. Use this when
+ *     `radius="sharp"` should propagate to the segments too.
+ *   - `"button"` — segments fill the rail end-to-end. The active segment
+ *     matches the rail's outer corner radius on its outer edge and stays
+ *     flat on its inner edge so it slots cleanly into the rail.
+ *
+ * The `radius` prop drives the rail's outer border-radius. Default is
+ * `"pill"` (`rounded-full`). Override with `radius="sharp" | "soft" |
+ * "rounded" | "pill"` — segment corners adapt automatically in
+ * `"icon-inherit"` and `"button"` appearances.
+ *
+ * Supports `next-themes` natively. Renders `null` until hydrated to avoid
+ * SSR/CSR mismatch on the active segment. When the System segment is
+ * active, its `title` reflects the OS-resolved theme (e.g.
+ * "System mode (currently dark)") so users see what their preference
+ * resolves to.
+ *
+ * @module packages/ui/components/composed/theme-mode-multi-toggle
+ * @package ui
+ *
+ * @component
+ * @example
+ * import { ThemeModeMultiToggle } from '@saasflare/ui';
+ * <ThemeModeMultiToggle />
+ *
+ * @example
+ * // Inherit-radius icons (segments adopt the rail's radius)
+ * <ThemeModeMultiToggle appearance="icon-inherit" radius="sharp" />
+ *
+ * @example
+ * // Button appearance with rounded geometry
+ * <ThemeModeMultiToggle appearance="button" radius="rounded" />
+ */
+
+/** Available theme modes — mirrors next-themes' `theme` prop. */
+type ThemeMode = "light" | "dark" | "system";
+/** Visual appearance of the segments. */
+type ThemeModeMultiToggleAppearance = "icon" | "icon-inherit" | "button";
+interface ThemeModeMultiToggleProps extends SaasflareComponentProps {
+    /** Override the default screen-reader labels per segment. */
+    labels?: Partial<Record<ThemeMode, string>>;
+    /** Additional class names applied to the rail. */
     className?: string;
-}): JSX.Element | null;
+    /** Segment size — matches the Toggle/ToggleGroup `size` axis. */
+    size?: "sm" | "default" | "lg";
+    /**
+     * Visual appearance of the segments.
+     *
+     * - `"icon"` (default): small floating circles, always pill.
+     * - `"icon-inherit"`: small floating shapes that match the rail's `radius`.
+     * - `"button"`: segments fill the rail; outer corners match the rail's
+     *   `radius`, inner corners stay flat so the segment slots in.
+     *
+     * @default "icon"
+     */
+    appearance?: ThemeModeMultiToggleAppearance;
+    /**
+     * SSR-known theme mode (typically read from a cookie in the parent server
+     * component). When provided, the component skips its internal mount-gate
+     * and renders the matching segment as active on the very first paint —
+     * eliminating the brief invisible / wrong-segment frame caused by
+     * `next-themes` returning `undefined` during SSR.
+     *
+     * Leave undefined for the legacy mount-gated behaviour (renders `null`
+     * until mounted).
+     */
+    initialMode?: ThemeMode;
+}
+/**
+ * Three-segment theme switcher (light / dark / system).
+ *
+ * @component
+ * @layer ui
+ */
+declare function ThemeModeMultiToggle({ labels, className, size, appearance, surface, radius, animated, iconWeight, initialMode, }: ThemeModeMultiToggleProps): React$1.JSX.Element | null;
 
 /**
  * Props for the TopLoadingBar component.
@@ -1739,4 +2682,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, 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 };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, AnimatedTooltip, AppleAuthButton, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, AspectRatio, AuroraBackground, type AuroraBackgroundProps, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, type BadgeProps, BarList, type BarListItem, type BarListProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, ButtonProps, Callout, type CalloutIntent, type CalloutProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CaretDownIcon, CaretLeftIcon, CaretRightIcon, CaretUpIcon, CategoryBar, type CategoryBarProps, type CategoryBarSegment, CheckCircleIcon, CheckIcon, Checkbox, CircleIcon, CircleNotchIcon, CodeBlock, type CodeBlockProps, 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, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type Density, DirectionProvider, DiscordAuthButton, DotsSixVerticalIcon, DotsThreeIcon, DribbbleAuthButton, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Dropzone, type DropzoneProps, type DropzoneRejection, type DropzoneRejectionReason, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, type EmptyStateProps, EmptyTitle, FacebookAuthButton, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GitHubAuthButton, GitLabAuthButton, GoogleAuthButton, HoverCard, HoverCardContent, HoverCardTrigger, IconWeight, Icons, InfoIcon, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Intent, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label, LinkedInAuthButton, MagnifyingGlassIcon, type Measurement, MediumAuthButton, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MetricCard, type MetricCardProps, type MetricTrend, MicrosoftAuthButton, MinusIcon, MonitorIcon, MoonIcon, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NotificationCenter, type NotificationCenterProps, type NotificationItem, NumberInput, type NumberInputProps, PageHeader, type PageHeaderProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, type PaginationRangeItem, Palette, PauseIcon, PayPalAuthButton, PhosphorIconProps, PlayIcon, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type PossibleRef, PricingCard, type PricingCardProps, Progress, ProgressCircle, type ProgressCircleProps, type ProgressCircleSize, QuotesIcon, RadioGroup, RadioGroupItem, Radius, RadiusProp, Rating, type RatingProps, type RatingSize, RedditAuthButton, PROVIDERS as SOCIAL_AUTH_PROVIDERS, 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, SidebarSimpleIcon, SidebarTrigger, type Size, Skeleton, SlackAuthButton, Slider, SmoothScrollProvider, type SmoothScrollProviderProps, SocialAuthButton, type SocialAuthButtonProps, type SocialProvider, SparkChart, type SparkChartProps, type SparkChartVariant, Spinner, StatefulButton, type StatefulButtonProps, StripeAuthButton, StyleVariant, SunIcon, Surface, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TagInput, type TagInputProps, Textarea, ThemeModeMultiToggle, type ThemeModeMultiToggleAppearance, type ThemeModeMultiToggleProps, ThemeModeToggle, TikTokAuthButton, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, type TooltipItem, TooltipProvider, TooltipTrigger, TopLoadingBar, type TopLoadingBarProps, Tracker, type TrackerBlock, type TrackerProps, type TreeNode, TreeView, type TreeViewProps, TypewriterText, type UseDisclosureOptions, type UseDisclosureReturn, type UseFileDialogOptions, type UseFileDialogReturn, type UseIntervalOptions, type UseIntervalReturn, type UseLocalStorageOptions, type UseMeasureReturn, type UsePaginationOptions, type UsePaginationReturn, UserAvatar, type UserAvatarProps, WarningIcon, XAuthButton, XCircleIcon, XIcon, badgeVariants, buttonGroupVariants, cn, fadeIn, navigationMenuTriggerStyle, noMotion, scaleIn, slideDown, slideUp, spring, springBouncy, springGentle, springStiff, toggleVariants, useAnimation, useDirection, useDisclosure, useFileDialog, useFocusTrap, useFormField, useInterval, useIsMobile, useLocalStorage, useMeasure, useMergedRef, usePagination, useReducedMotion, useSaasflareMotion, useSaasflareTheme, useSidebar };