@saasflare/ui 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,2103 @@
+import { ClassValue } from 'clsx';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React$1 from 'react';
+import { ReactNode, JSX } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { Dialog as Dialog$1, AlertDialog as AlertDialog$1, Accordion as Accordion$1, Tabs as Tabs$1, Checkbox as Checkbox$1, Switch as Switch$1, Progress as Progress$1, Tooltip as Tooltip$1, Popover as Popover$1, HoverCard as HoverCard$1, Select as Select$1, DropdownMenu as DropdownMenu$1, Slider as Slider$1, Avatar as Avatar$1, ContextMenu as ContextMenu$1, Menubar as Menubar$1, NavigationMenu as NavigationMenu$1, Toggle as Toggle$1, ToggleGroup as ToggleGroup$1, RadioGroup as RadioGroup$1, Collapsible as Collapsible$1, ScrollArea as ScrollArea$1, AspectRatio as AspectRatio$1, Separator as Separator$1, Direction, Label as Label$1, Slot } from 'radix-ui';
+import { Drawer as Drawer$1 } from 'vaul';
+import useEmblaCarousel, { UseEmblaCarouselType } from 'embla-carousel-react';
+import { DayPicker, DayButton } from 'react-day-picker';
+import { ToasterProps } from 'sonner';
+import * as RechartsPrimitive from 'recharts';
+import { Combobox as Combobox$1 } from '@base-ui/react';
+import { Command as Command$1 } from 'cmdk';
+import * as react_hook_form from 'react-hook-form';
+import { FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
+import { OTPInput } from 'input-otp';
+import * as ResizablePrimitive from 'react-resizable-panels';
+
+/**
+ * @fileoverview Core utility functions for the Saasflare design system.
+ * @module @saasflare/ui/lib/utils
+ *
+ * @example
+ * import { cn, composeEventHandlers } from '@saasflare/ui';
+ */
+
+/**
+ * Merges class names with Tailwind CSS conflict resolution.
+ * Combines clsx conditional logic with tailwind-merge deduplication.
+ *
+ * @param inputs - Class values (strings, objects, arrays, undefined)
+ * @returns Merged and deduplicated class string
+ *
+ * @example
+ * cn('p-4 bg-red-500', 'bg-blue-500')   // → 'p-4 bg-blue-500'
+ * cn('text-sm', isLarge && 'text-lg')    // conditional classes
+ * cn('mt-2', className)                  // safe forwarding
+ */
+declare function cn(...inputs: ClassValue[]): string;
+
+/**
+ * @fileoverview Hook to detect mobile viewport via media query.
+ * @module packages/core/hooks/use-mobile
+ * @layer core
+ *
+ * Uses `matchMedia` to reactively track whether the viewport width
+ * is below the mobile breakpoint (768px).
+ *
+ * @example
+ * const isMobile = useIsMobile();
+ * if (isMobile) return <MobileNav />;
+ * return <DesktopNav />;
+ */
+/**
+ * Returns `true` when the viewport width is below 768px.
+ *
+ * @returns {boolean} Whether the current viewport is mobile-sized
+ *
+ * @example
+ * const isMobile = useIsMobile();
+ * <Sheet open={isMobile ? isOpen : undefined}>...</Sheet>
+ */
+declare function useIsMobile(): boolean;
+
+/**
+ * @fileoverview Hook to detect user's reduced-motion preference.
+ * @module packages/core/hooks/use-reduced-motion
+ * @layer core
+ *
+ * Returns `true` when the user has enabled "Reduce motion" in their OS settings.
+ * Use this to disable Framer Motion scale/translate/spring animations while
+ * keeping CSS-token-driven transitions (which already zero out via motion.css).
+ *
+ * @example
+ * const reduced = useReducedMotion();
+ * <motion.div whileHover={reduced ? undefined : { scale: 1.02 }} />
+ */
+/**
+ * Detects the user's prefers-reduced-motion media query.
+ *
+ * SSR-safe: returns `false` on the server, reads the real value synchronously
+ * on the client during hydration, and updates when the OS preference changes.
+ *
+ * @returns {boolean} `true` when reduced motion is preferred
+ */
+declare function useReducedMotion(): boolean;
+
+/** Options for useDisclosure */
+interface UseDisclosureOptions {
+    /** Initial open state when uncontrolled. Default: `false` */
+    defaultOpen?: boolean;
+    /** Controlled open state. When provided, the hook operates in controlled mode. */
+    isOpen?: boolean;
+    /** Callback fired when the open state changes (in both modes) */
+    onChange?: (isOpen: boolean) => void;
+}
+/** Return value of useDisclosure */
+interface UseDisclosureReturn {
+    /** Current open state */
+    isOpen: boolean;
+    /** Open the disclosure */
+    onOpen: () => void;
+    /** Close the disclosure */
+    onClose: () => void;
+    /** Toggle the disclosure */
+    onToggle: () => void;
+    /** Set the open state — matches Radix/shadcn `onOpenChange` prop shape */
+    onOpenChange: (open: boolean) => void;
+    /** Whether the disclosure is externally controlled */
+    isControlled: boolean;
+}
+/**
+ * Manages open-close state with support for both controlled and uncontrolled usage.
+ * Designed to drop into Radix/shadcn primitives via the `onOpenChange` prop.
+ *
+ * @param {UseDisclosureOptions} [options] - Configuration
+ * @returns {UseDisclosureReturn} Open state and control callbacks
+ *
+ * @example
+ * const { isOpen, onOpen, onClose, onOpenChange } = useDisclosure();
+ * <Button onClick={onOpen}>Open</Button>
+ * <Dialog open={isOpen} onOpenChange={onOpenChange}>
+ *   <Button onClick={onClose}>Close</Button>
+ * </Dialog>
+ */
+declare function useDisclosure(options?: UseDisclosureOptions): UseDisclosureReturn;
+
+/** Element measurement — dimensions plus bounding-rect position */
+interface Measurement {
+    /** Element content-box width in pixels */
+    width: number;
+    /** Element content-box height in pixels */
+    height: number;
+    /** DOMRect top (viewport-relative) */
+    top: number;
+    /** DOMRect left (viewport-relative) */
+    left: number;
+    /** DOMRect right (viewport-relative) */
+    right: number;
+    /** DOMRect bottom (viewport-relative) */
+    bottom: number;
+    /** DOMRect x (viewport-relative) */
+    x: number;
+    /** DOMRect y (viewport-relative) */
+    y: number;
+}
+/** Return tuple of useMeasure — `[ref, measurement]` */
+type UseMeasureReturn<T extends Element = HTMLElement> = readonly [
+    ref: (node: T | null) => void,
+    measurement: Measurement
+];
+/**
+ * Observes an element's dimensions with a `ResizeObserver` and returns the
+ * latest measurement. SSR-safe: returns zeroed values until the observer runs
+ * on the client.
+ *
+ * @template T - The observed element type (defaults to `HTMLElement`)
+ * @returns {UseMeasureReturn<T>} Tuple of `[callback ref, measurement]`
+ *
+ * @example
+ * const [ref, { width }] = useMeasure<HTMLDivElement>();
+ * const columns = width > 1024 ? 3 : width > 640 ? 2 : 1;
+ * return <div ref={ref}>{columns} columns</div>;
+ */
+declare function useMeasure<T extends Element = HTMLElement>(): UseMeasureReturn<T>;
+
+/** An item in the pagination range — either a page number or an ellipsis marker */
+type PaginationRangeItem = number | 'dots';
+/** Options for usePagination */
+interface UsePaginationOptions {
+    /** Total number of pages (1-indexed max). Values below 1 are clamped to 1. */
+    total: number;
+    /** Initial active page when uncontrolled. Default: `1` */
+    initialPage?: number;
+    /** Controlled active page. When provided, the hook operates in controlled mode. */
+    page?: number;
+    /** Number of sibling pages shown on each side of the active page. Default: `1` */
+    siblings?: number;
+    /** Number of pages shown at the start and end of the range. Default: `1` */
+    boundaries?: number;
+    /** Callback fired when the active page changes */
+    onChange?: (page: number) => void;
+}
+/** Return value of usePagination */
+interface UsePaginationReturn {
+    /** Current active page (1-indexed, always within `[1, total]`) */
+    activePage: number;
+    /** Visible range with ellipsis markers (e.g. `[1, 'dots', 9, 10, 11, 'dots', 20]`) */
+    range: PaginationRangeItem[];
+    /** Set the active page (clamped to `[1, total]`) */
+    setPage: (page: number) => void;
+    /** Advance to the next page (no-op if on last page) */
+    next: () => void;
+    /** Go to the previous page (no-op if on first page) */
+    previous: () => void;
+    /** Jump to the first page */
+    first: () => void;
+    /** Jump to the last page */
+    last: () => void;
+}
+/**
+ * Calculates the visible pagination range and provides navigation controls.
+ * Works in both controlled and uncontrolled modes.
+ *
+ * The range algorithm shows the active page with `siblings` neighbours on
+ * each side, `boundaries` pages pinned to the start and end, and `'dots'`
+ * ellipsis markers filling the gaps.
+ *
+ * @param {UsePaginationOptions} options - Pagination configuration
+ * @returns {UsePaginationReturn} Active page, range, and navigation helpers
+ *
+ * @example
+ * const { activePage, range, setPage } = usePagination({
+ *   total: 20,
+ *   siblings: 1,
+ *   boundaries: 1,
+ * });
+ * // activePage = 1  → [1, 2, 3, 4, 5, 'dots', 20]
+ * // activePage = 10 → [1, 'dots', 9, 10, 11, 'dots', 20]
+ * // activePage = 20 → [1, 'dots', 16, 17, 18, 19, 20]
+ */
+declare function usePagination(options: UsePaginationOptions): UsePaginationReturn;
+
+/**
+ * @fileoverview Shared motion presets for premium UI components.
+ * @module packages/core/components/ui/motion-config
+ * @layer core
+ *
+ * Governance:
+ *   CSS transitions (var(--duration-*), var(--ease-*)) → hover, focus, color changes.
+ *   These tokens already zero-out via prefers-reduced-motion in motion.css.
+ *
+ *   Framer Motion springs → ONLY for mount/unmount, layout, drag, presence, gesture.
+ *   Use `useReducedMotion()` to disable springs when the user prefers reduced motion.
+ *
+ * @example
+ * import { spring, useReducedMotion } from "@saasflare/core";
+ * 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: {
+    readonly type: "spring";
+    readonly stiffness: 400;
+    readonly damping: 25;
+};
+/** Bouncy spring — dialogs, overlays, playful entrances */
+declare const springBouncy: {
+    readonly type: "spring";
+    readonly stiffness: 300;
+    readonly damping: 15;
+};
+/** Gentle spring — cards, hover lifts, subtle motion */
+declare const springGentle: {
+    readonly type: "spring";
+    readonly stiffness: 200;
+    readonly damping: 20;
+};
+/** Stiff spring — toggles, switches, tight animations */
+declare const springStiff: {
+    readonly type: "spring";
+    readonly stiffness: 500;
+    readonly damping: 30;
+};
+/** Instant transition — used when reduced motion is preferred */
+declare const noMotion: {
+    readonly duration: 0;
+};
+/** Fade in preset (mount animation) */
+declare const fadeIn: {
+    readonly initial: {
+        readonly opacity: 0;
+    };
+    readonly animate: {
+        readonly opacity: 1;
+    };
+};
+/** Scale in preset (mount animation) */
+declare const scaleIn: {
+    readonly initial: {
+        readonly opacity: 0;
+        readonly scale: 0.95;
+    };
+    readonly animate: {
+        readonly opacity: 1;
+        readonly scale: 1;
+    };
+};
+/** Slide up preset (mount animation) */
+declare const slideUp: {
+    readonly initial: {
+        readonly opacity: 0;
+        readonly y: 8;
+    };
+    readonly animate: {
+        readonly opacity: 1;
+        readonly y: 0;
+    };
+};
+/** Slide down preset (mount animation) */
+declare const slideDown: {
+    readonly initial: {
+        readonly opacity: 0;
+        readonly y: -8;
+    };
+    readonly animate: {
+        readonly opacity: 1;
+        readonly y: 0;
+    };
+};
+
+/** Context value exposed by {@link useAnimation}. */
+interface AnimationContextType {
+    /** Whether animations are enabled (composed with OS preference). */
+    animated: boolean;
+}
+/**
+ * Access the resolved animation state.
+ *
+ * Inside a `SaasflareProvider`, returns the provider's composed value
+ * (`animated` prop AND NOT `prefers-reduced-motion`). Outside any provider,
+ * falls back to the OS preference alone.
+ *
+ * @example
+ *   const { animated } = useAnimation()
+ *   <motion.div whileHover={animated ? { scale: 1.02 } : undefined} />
+ */
+declare function useAnimation(): AnimationContextType;
+
+/** Props for the SmoothScrollProvider component. */
+interface SmoothScrollProviderProps {
+    /** Child elements to render. */
+    children: ReactNode;
+    /** Whether smooth scrolling is enabled. Default: `true` */
+    enabled?: boolean;
+}
+/**
+ * Context-free provider that toggles smooth scrolling on `<html>`.
+ *
+ * - Adds `scroll-behavior: smooth` to the document element
+ * - Automatically disables when `prefers-reduced-motion: reduce` is set
+ * - Restores the original scroll behavior on unmount
+ *
+ * @component
+ * @package ui
+ */
+declare function SmoothScrollProvider({ children, enabled, }: SmoothScrollProviderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * @fileoverview Shared type aliases for component prop value domains.
+ * @module packages/ui/types/component-props
+ * @package ui
+ *
+ * These are value-domain types, not mixin interfaces. Components compose
+ * them into their own prop signatures and restrict to the subset that
+ * makes sense. Lives in /types (not /providers) because these types have
+ * no runtime coupling to the Saasflare provider context.
+ *
+ * @example Full range
+ *   interface ButtonProps extends SaasflareComponentProps {
+ *     size?: Size
+ *   }
+ *
+ * @example Restricted subset
+ *   interface IconProps extends SaasflareComponentProps {
+ *     size?: Extract<Size, "xs" | "sm" | "md">   // no lg/xl — too big for icons
+ *   }
+ *
+ * Intent is intentionally NOT here. Saasflare components express semantic
+ * coloring through their own `variant` prop (per-component CVA vocabulary)
+ * rather than a shared intent token. See individual component files for
+ * their variant domains.
+ */
+/**
+ * Standard size scale for Saasflare components.
+ *
+ * Each component restricts to the subset that makes sense:
+ *   - Buttons: full range `"xs" | "sm" | "md" | "lg" | "xl"`
+ *   - Icons:   only `"xs" | "sm" | "md"` (lg/xl are cartoonishly large)
+ *   - Avatars: `"sm" | "md" | "lg" | "xl"` (xs is too small to be useful)
+ *
+ * Components pick via `Extract<Size, "xs" | "sm">` in their props definition.
+ */
+type Size = "xs" | "sm" | "md" | "lg" | "xl";
+/**
+ * Spacing density scale for data-dense components.
+ *
+ * Applies per-instance on components like Table, Form, DataList where
+ * the author wants to trade visual breathing-room against vertical space.
+ *
+ * Not a provider axis (unlike `surface` and `animated`): density stays
+ * local to the component instance. If you need app-wide "compact mode",
+ * wrap your dashboard in your own `<Density>` context or pass the value
+ * down explicitly.
+ */
+type Density = "compact" | "normal" | "comfortable";
+
+/**
+ * @fileoverview Theme-related types and constants consumed by SaasflareProvider,
+ * SaasflareShell, and CustomPaletteInjector.
+ * @module packages/ui/types/theme-props
+ * @package ui
+ *
+ * Palette colors live in `styles/palettes.css` (OKLCH) — the single source of
+ * truth. To render a swatch in a picker, wrap an element in `data-palette={id}`
+ * and paint it with `oklch(var(--primary-l) var(--primary-c) var(--primary-h))`.
+ * Do NOT add a hex `color` field here; it will drift from palettes.css.
+ */
+/** All 16 available color palette ids and display names. */
+declare const PALETTES: readonly [{
+    readonly id: "ocean";
+    readonly name: "Ocean";
+}, {
+    readonly id: "achromatic";
+    readonly name: "Achromatic";
+}, {
+    readonly id: "black";
+    readonly name: "Black";
+}, {
+    readonly id: "ink";
+    readonly name: "Ink";
+}, {
+    readonly id: "aurora";
+    readonly name: "Aurora";
+}, {
+    readonly id: "indigo";
+    readonly name: "Indigo";
+}, {
+    readonly id: "emerald";
+    readonly name: "Emerald";
+}, {
+    readonly id: "violet";
+    readonly name: "Violet";
+}, {
+    readonly id: "coral";
+    readonly name: "Coral";
+}, {
+    readonly id: "stone";
+    readonly name: "Stone";
+}, {
+    readonly id: "jade";
+    readonly name: "Jade";
+}, {
+    readonly id: "cobalt";
+    readonly name: "Cobalt";
+}, {
+    readonly id: "amber";
+    readonly name: "Amber";
+}, {
+    readonly id: "fuchsia";
+    readonly name: "Fuchsia";
+}, {
+    readonly id: "honey";
+    readonly name: "Honey";
+}, {
+    readonly id: "teal";
+    readonly name: "Teal";
+}, {
+    readonly id: "iris";
+    readonly name: "Iris";
+}, {
+    readonly id: "ruby";
+    readonly name: "Ruby";
+}];
+/** Union of all preset color palette IDs. */
+type PaletteId = (typeof PALETTES)[number]["id"];
+/**
+ * Visual surface style variant.
+ *
+ * The union uses `(string & {})` so app-level custom surfaces (e.g.
+ * "neumorphic") registered via a [data-style="…"] selector in the
+ * app's globals.css are accepted without a type patch, while preset
+ * ids keep their autocomplete.
+ */
+type StyleVariant = "flat" | "glass" | (string & {});
+/** All available built-in surface style variants. */
+declare const STYLES: readonly [{
+    readonly id: "flat";
+    readonly name: "Flat";
+}, {
+    readonly id: "glass";
+    readonly name: "Glass";
+}];
+/**
+ * Radius preset — orthogonal to {@link Surface} (geometry vs. material).
+ *
+ * Maps to `[data-radius]` selectors in theme.css; each preset sets `--radius`
+ * (and at "pill" also overrides the entire `--radius-sm/md/lg/xl` scale so
+ * derived values don't drift to ~9995px).
+ *
+ * Per-component override: pass `radius` on any Saasflare component.
+ * Per-theme override: `CustomPalette.radius` wins via inline style.
+ */
+type Radius = "sharp" | "soft" | "rounded" | "pill";
+/** All available built-in radius presets. */
+declare const RADII: readonly [{
+    readonly id: "sharp";
+    readonly name: "Sharp";
+}, {
+    readonly id: "soft";
+    readonly name: "Soft";
+}, {
+    readonly id: "rounded";
+    readonly name: "Rounded";
+}, {
+    readonly id: "pill";
+    readonly name: "Pill";
+}];
+/**
+ * Custom color theme — high-level, developer-friendly.
+ *
+ * Pass any CSS color as `primary` (hex, oklch, rgb, hsl, named color).
+ * Hex values are converted to OKLCH internally via {@link hexToOklch};
+ * other formats are passed through as the raw `--primary` value.
+ *
+ * @example
+ *   <SaasflareProvider
+ *     palette={{ name: "acme", primary: "#007AFF" }}
+ *   />
+ *
+ * @example Escape hatch for full control
+ *   <SaasflareProvider palette={{
+ *     name: "acme",
+ *     primary: "#007AFF",
+ *     light: { "--background": "#fafafa" },
+ *     dark:  { "--background": "#0a0a0a" },
+ *   }} />
+ */
+interface CustomPalette {
+    /** Unique name — written to `data-palette` attribute. */
+    name: string;
+    /** Primary brand color in any CSS color format. Required. */
+    primary: string;
+    /**
+     * Optional neutral axis override — drives backgrounds, muted, borders,
+     * cards, popovers, sidebar (i.e. the entire grey foundation of the UI),
+     * not just one accent token. Accepts hex or an explicit hue angle (0-360).
+     * Default: tinted from `primary` with a tiny chroma for "brand warmth".
+     */
+    neutral?: string;
+    /** Optional border radius override (any CSS length). */
+    radius?: string;
+    /** Escape hatch: raw CSS custom property overrides applied in light mode. */
+    light?: Record<string, string>;
+    /** Escape hatch: raw CSS custom property overrides applied in dark mode. */
+    dark?: Record<string, string>;
+}
+/**
+ * Accepted values for the `palette` prop (brand colors — distinct from `theme`,
+ * which controls light/dark mode and is delegated to next-themes).
+ *
+ * - omit (undefined)   → defers to persisted user preference, then global.css baseline
+ * - PaletteId          → preset palette via [data-palette] selector
+ * - arbitrary string   → app-registered [data-palette="…"] in the app's globals.css
+ * - CustomPalette      → runtime palette via inline CSS custom properties
+ *
+ * The `(string & {})` branch preserves autocomplete for the 16 preset ids
+ * while still permitting arbitrary strings.
+ */
+type Palette = PaletteId | (string & {}) | CustomPalette;
+/**
+ * Accepted values for the `surface` prop.
+ *
+ * - omit (undefined)   → defers to persisted user preference, then "flat" baseline
+ * - StyleVariant       → "flat" | "glass" | app-registered custom surface
+ */
+type Surface = StyleVariant;
+/**
+ * Accepted values for the `radius` prop on SaasflareProvider / Shell.
+ *
+ * - omit (undefined) → defers to persisted user preference, then "rounded" baseline
+ * - Radius           → forces [data-radius] on <html>
+ */
+type RadiusProp = Radius;
+
+/** Context value exposed by useSaasflareTheme(). */
+interface SaasflareThemeContextType {
+    /** Active brand palette id, or null when using baseline. */
+    palette: string | null;
+    /** Active surface style. */
+    surface: StyleVariant;
+    /** Active radius preset. */
+    radius: Radius;
+    /** 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;
+}
+/**
+ * Access the Saasflare theme context.
+ * Safe to call without a provider — returns baseline defaults.
+ */
+declare function useSaasflareTheme(): SaasflareThemeContextType;
+/** Props for SaasflareProvider. */
+interface SaasflareProviderProps {
+    children: ReactNode;
+    /**
+     * Light/dark mode (forwarded to next-themes).
+     * Distinct from `palette` (which selects the brand colors).
+     * @default "system"
+     */
+    theme?: "light" | "dark" | "system";
+    /**
+     * Brand palette (distinct from `theme`, which is light/dark).
+     * - Preset id or arbitrary string → forces [data-palette] selector
+     * - CustomPalette object → forces palette via inline CSS vars
+     * - Omit to defer: uses persisted preference if any, otherwise baseline
+     */
+    palette?: Palette;
+    /**
+     * Surface style.
+     * - StyleVariant → forces [data-style]
+     * - Omit to defer: uses persisted preference if any, otherwise "flat"
+     */
+    surface?: Surface;
+    /**
+     * Radius preset (geometry axis — orthogonal to surface).
+     * - Radius → forces [data-radius]
+     * - Omit to defer: uses persisted preference if any, otherwise "rounded"
+     */
+    radius?: RadiusProp;
+    /** Global animation kill switch. @default true */
+    animated?: boolean;
+    /** Enable smooth scrolling site-wide. @default false */
+    smoothScrolling?: boolean;
+    /**
+     * Skip rendering the pre-hydration FOUT-prevention script.
+     * Set this to true if you are placing `<SaasflareScript />` manually
+     * inside `<head>` (e.g. for a strict CSP setup).
+     * @default false
+     */
+    disableScript?: boolean;
+    /** CSP nonce forwarded to the pre-hydration script. */
+    scriptNonce?: string;
+    /**
+     * localStorage key for Saasflare prefs (palette, surface, radius, animated).
+     * Change this to namespace your app ("acme-ui-prefs"), to isolate tenants,
+     * or to avoid collisions. If you render `<SaasflareScript />` manually in
+     * `<head>`, pass the same value to its `storageKey` prop.
+     *
+     * Changing this key after users have persisted preferences orphans the
+     * old data — users will see defaults until they re-pick their preferences.
+     *
+     * @default "sf-ui-prefs"
+     */
+    storageKey?: string;
+    /**
+     * localStorage key forwarded to next-themes for the light/dark mode
+     * preference. Change alongside `storageKey` when namespacing.
+     *
+     * @default "theme"
+     */
+    themeStorageKey?: string;
+}
+/**
+ * Unified Saasflare provider.
+ *
+ * Manages light/dark mode (via next-themes), brand palette, surface style,
+ * radius preset, and a global animation kill switch in a single component.
+ *
+ * @component
+ * @package ui
+ */
+declare function SaasflareProvider({ children, theme, palette, surface, radius, animated, smoothScrolling, disableScript, scriptNonce, storageKey, themeStorageKey, }: SaasflareProviderProps): react_jsx_runtime.JSX.Element;
+
+/** Props for {@link SaasflareShell}. */
+interface SaasflareShellProps extends Omit<SaasflareProviderProps, "children" | "disableScript" | "scriptNonce"> {
+    children: ReactNode;
+    /** Value for `<html lang="…">`. @default "en" */
+    lang?: string;
+    /**
+     * Optional className applied to `<html>`. Use this for `next/font`
+     * variable classNames, which scope the loaded font's CSS variable:
+     *
+     *   const inter = Inter({ subsets: ["latin"], variable: "--font-sans" })
+     *   <SaasflareShell className={inter.variable}>
+     */
+    className?: string;
+    /** Optional className applied to `<body>`. */
+    bodyClassName?: string;
+    /** Optional children rendered inside a `<head>` element. */
+    head?: ReactNode;
+}
+/**
+ * Full document shell that locks the Saasflare design-system state in at
+ * SSR time. Replaces manual `<html>` + `<body>` + `<SaasflareProvider>`
+ * wiring in the Next.js root layout.
+ *
+ * @component
+ * @package ui
+ */
+declare function SaasflareShell({ children, lang, className, bodyClassName, head, palette, surface, radius, animated, theme, smoothScrolling, storageKey, themeStorageKey, }: SaasflareShellProps): react_jsx_runtime.JSX.Element;
+
+/** Props for {@link SaasflareScript}. */
+interface SaasflareScriptProps {
+    /** CSP nonce. Pass when your app enforces a strict Content-Security-Policy. */
+    nonce?: string;
+    /**
+     * Initial brand palette. Mirror the `palette` prop of SaasflareProvider.
+     * Omit to defer to persisted localStorage preference.
+     */
+    palette?: string;
+    /**
+     * Initial surface style. Mirror the `surface` prop of SaasflareProvider.
+     * Omit to defer to persisted localStorage preference.
+     */
+    surface?: string;
+    /**
+     * Initial radius preset. Mirror the `radius` prop of SaasflareProvider.
+     * Omit to defer to persisted localStorage preference.
+     */
+    radius?: string;
+    /**
+     * Initial animation state. Mirror the `animated` prop of SaasflareProvider.
+     * Omit to defer to persisted localStorage preference (default: true).
+     */
+    animated?: boolean;
+    /**
+     * localStorage key to read prefs from. Must match the SaasflareProvider's
+     * `storageKey` prop exactly. @default "sf-ui-prefs"
+     */
+    storageKey?: string;
+}
+/**
+ * Inline script that sets `data-palette`, `data-style`, `data-radius`,
+ * `data-animated` on the document element before first paint.
+ *
+ * @component
+ */
+declare function SaasflareScript({ nonce, palette, surface, radius, animated, storageKey }: SaasflareScriptProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * @fileoverview Base props and resolver hook for Saasflare components.
+ * @module packages/ui/providers/use-saasflare-props
+ * @package ui
+ *
+ * Every Saasflare component MUST:
+ *   1. Extend SaasflareComponentProps in its props interface
+ *   2. Call useSaasflareProps(props) to resolve effective values
+ *
+ * This ensures consistent precedence:
+ *   component prop > provider context > hardcoded defaults
+ *
+ * @example
+ * interface CardProps extends SaasflareComponentProps {
+ *   title: string
+ * }
+ *
+ * function Card({ title, ...sfProps }: CardProps) {
+ *   const { surface, radius, animated } = useSaasflareProps(sfProps)
+ *   // surface/radius are guaranteed to be resolved, never undefined
+ * }
+ */
+
+/** Props that every Saasflare component accepts for theme integration. */
+interface SaasflareComponentProps {
+    /** Surface style override. Omit to inherit from provider. */
+    surface?: StyleVariant;
+    /** Radius preset override. Omit to inherit from provider. */
+    radius?: Radius;
+    /** Animation override. Omit to inherit from provider. */
+    animated?: boolean;
+}
+/** Fully resolved theme values — no optionals, no undefined. */
+interface ResolvedSaasflareProps {
+    /** Active surface style. */
+    surface: StyleVariant;
+    /** Active radius preset. */
+    radius: Radius;
+    /** Whether animations are enabled. */
+    animated: boolean;
+    /** Active brand palette id (null = global.css baseline). */
+    palette: string | null;
+}
+/**
+ * Resolves component-level overrides against the provider context.
+ *
+ * Precedence: component prop > provider context > hardcoded default
+ *
+ * Safe without a provider — returns sensible defaults.
+ */
+declare function useSaasflareProps(props?: SaasflareComponentProps): ResolvedSaasflareProps;
+
+declare const INTENTS: readonly ["primary", "neutral", "success", "warning", "danger", "info"];
+type Intent = (typeof INTENTS)[number];
+/**
+ * Button variant definitions using the 3-axis system.
+ *
+ * Axes:
+ *   variant — visual treatment: solid, soft, outline, ghost, link, glass, shadow
+ *   intent  — color intent via data-intent attribute + CSS tokens
+ *   size    — dimensional: xs, sm, md, lg, xl, icon, icon-xs, icon-sm, icon-lg
+ */
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "glass" | "soft" | "solid" | "outline" | "ghost" | "shadow" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/** Framer-motion event overrides that conflict with React HTML events */
+type MotionConflicts$1 = "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd";
+/**
+ * Props for the Saasflare Button component.
+ *
+ * Extends {@link SaasflareComponentProps} to accept `surface` and `animated`
+ * overrides that are resolved against the <SaasflareProvider> context.
+ */
+interface ButtonProps extends Omit<React$1.ComponentProps<"button">, MotionConflicts$1>, VariantProps<typeof buttonVariants>, SaasflareComponentProps {
+    /** Render as child element (Radix Slot pattern) */
+    asChild?: boolean;
+    /** Semantic color intent */
+    intent?: Intent;
+    /** Show loading spinner (replaces left icon, keeps text visible) */
+    loading?: boolean;
+    /** Stretch to full width of container */
+    fullWidth?: boolean;
+}
+/**
+ * Primary interactive button with motion, loading, and intent support.
+ *
+ * Resolves `surface` and `animated` via {@link useSaasflareProps} with the
+ * precedence: component prop > <SaasflareProvider> context > hardcoded default.
+ *
+ * When no explicit `variant` is set and the resolved surface is `"glass"`, the
+ * button promotes itself to `variant="glass"`. An explicit `variant` prop always
+ * wins over the surface-based promotion.
+ *
+ * @component
+ * @layer ui
+ *
+ * @param {string} variant - Visual treatment: "solid" | "soft" | "outline" | "ghost" | "link" | "glass" | "shadow"
+ * @param {string} intent - Color intent: "primary" | "neutral" | "success" | "warning" | "danger" | "info"
+ * @param {string} size - Button size: "xs" | "sm" | "md" | "lg" | "xl" | "icon" | "icon-xs" | "icon-sm" | "icon-lg"
+ * @param {string} surface - Surface style override: "flat" | "glass" (inherits from provider when omitted)
+ * @param {boolean} animated - Gate motion effects (inherits from provider when omitted)
+ * @param {boolean} loading - Shows spinner, sets aria-busy, preserves width
+ * @param {boolean} fullWidth - Stretches to container width
+ * @param {boolean} asChild - Render as child element (Slot pattern)
+ *
+ * @example
+ * // Solid primary (default)
+ * <Button>Save Changes</Button>
+ *
+ * @example
+ * // Outline danger
+ * <Button variant="outline" intent="danger">Delete Account</Button>
+ *
+ * @example
+ * // Inherits surface from provider — auto-promotes to glass variant
+ * <SaasflareProvider surface="glass"><Button>Frosted</Button></SaasflareProvider>
+ *
+ * @example
+ * // Loading state
+ * <Button loading>Processing...</Button>
+ *
+ * @example
+ * // Icon button
+ * <Button variant="ghost" size="icon"><SettingsIcon /></Button>
+ *
+ * @example
+ * // Legacy API (deprecated but supported)
+ * <Button variant="destructive">Delete</Button>
+ */
+declare function Button({ className, variant: variantProp, size, intent: intentProp, asChild, loading, fullWidth, surface, animated, disabled, children, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Card container with subtle hover-lift animation.
+ *
+ * @component
+ * @layer core
+ *
+ * @example
+ * <Card className="max-w-sm">
+ *   <CardHeader><CardTitle>Plan</CardTitle></CardHeader>
+ *   <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;
+/**
+ * Card header with grid layout supporting an optional action slot.
+ *
+ * @component
+ * @layer core
+ */
+declare function CardHeader({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+/**
+ * Card title text.
+ *
+ * @component
+ * @layer core
+ */
+declare function CardTitle({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+/**
+ * Card description / subtitle text.
+ *
+ * @component
+ * @layer core
+ */
+declare function CardDescription({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+/**
+ * Card action slot — positioned top-right in the header.
+ *
+ * @component
+ * @layer core
+ */
+declare function CardAction({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+/**
+ * Card main content area.
+ *
+ * @component
+ * @layer core
+ */
+declare function CardContent({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+/**
+ * Card footer — bottom-aligned actions.
+ *
+ * @component
+ * @layer core
+ */
+declare function CardFooter({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+
+declare function Dialog({ ...props }: React$1.ComponentProps<typeof Dialog$1.Root>): react_jsx_runtime.JSX.Element;
+declare function DialogTrigger({ ...props }: React$1.ComponentProps<typeof Dialog$1.Trigger>): react_jsx_runtime.JSX.Element;
+declare function DialogPortal({ ...props }: React$1.ComponentProps<typeof Dialog$1.Portal>): react_jsx_runtime.JSX.Element;
+declare function DialogClose({ ...props }: React$1.ComponentProps<typeof Dialog$1.Close>): react_jsx_runtime.JSX.Element;
+declare function DialogOverlay({ className, ...props }: React$1.ComponentProps<typeof Dialog$1.Overlay>): react_jsx_runtime.JSX.Element;
+/**
+ * Dialog content panel with spring entry animation.
+ *
+ * @component
+ * @layer core
+ */
+declare function DialogContent({ className, children, ...props }: React$1.ComponentProps<typeof Dialog$1.Content>): react_jsx_runtime.JSX.Element;
+declare function DialogHeader({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function DialogFooter({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function DialogTitle({ className, ...props }: React$1.ComponentProps<typeof Dialog$1.Title>): react_jsx_runtime.JSX.Element;
+declare function DialogDescription({ className, ...props }: React$1.ComponentProps<typeof Dialog$1.Description>): react_jsx_runtime.JSX.Element;
+
+declare function AlertDialog({ ...props }: React$1.ComponentProps<typeof AlertDialog$1.Root>): react_jsx_runtime.JSX.Element;
+declare function AlertDialogTrigger({ ...props }: React$1.ComponentProps<typeof AlertDialog$1.Trigger>): react_jsx_runtime.JSX.Element;
+declare function AlertDialogPortal({ ...props }: React$1.ComponentProps<typeof AlertDialog$1.Portal>): react_jsx_runtime.JSX.Element;
+declare function AlertDialogOverlay({ className, ...props }: React$1.ComponentProps<typeof AlertDialog$1.Overlay>): react_jsx_runtime.JSX.Element;
+declare function AlertDialogContent({ className, children, ...props }: React$1.ComponentProps<typeof AlertDialog$1.Content>): 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 AlertDialog$1.Title>): react_jsx_runtime.JSX.Element;
+declare function AlertDialogDescription({ className, ...props }: React$1.ComponentProps<typeof AlertDialog$1.Description>): react_jsx_runtime.JSX.Element;
+declare function AlertDialogAction({ className, ...props }: React$1.ComponentProps<typeof AlertDialog$1.Action>): react_jsx_runtime.JSX.Element;
+declare function AlertDialogCancel({ className, ...props }: React$1.ComponentProps<typeof AlertDialog$1.Cancel>): react_jsx_runtime.JSX.Element;
+
+declare function Accordion({ ...props }: React$1.ComponentProps<typeof Accordion$1.Root>): react_jsx_runtime.JSX.Element;
+declare function AccordionItem({ className, ...props }: React$1.ComponentProps<typeof Accordion$1.Item>): react_jsx_runtime.JSX.Element;
+/**
+ * Accordion trigger with animated chevron indicator.
+ *
+ * @component
+ * @layer core
+ */
+declare function AccordionTrigger({ className, children, ...props }: React$1.ComponentProps<typeof Accordion$1.Trigger>): react_jsx_runtime.JSX.Element;
+/**
+ * Accordion content panel with fade-in animation.
+ *
+ * @component
+ * @layer core
+ */
+declare function AccordionContent({ className, children, ...props }: React$1.ComponentProps<typeof Accordion$1.Content>): react_jsx_runtime.JSX.Element;
+
+declare function Tabs({ className, orientation, ...props }: React$1.ComponentProps<typeof Tabs$1.Root>): react_jsx_runtime.JSX.Element;
+declare const tabsListVariants: (props?: ({
+    variant?: "default" | "line" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function TabsList({ className, variant, ...props }: React$1.ComponentProps<typeof Tabs$1.List> & VariantProps<typeof tabsListVariants>): react_jsx_runtime.JSX.Element;
+/**
+ * Tab trigger with animated active indicator.
+ *
+ * @component
+ * @layer core
+ */
+declare function TabsTrigger({ className, children, value, ...props }: React$1.ComponentProps<typeof Tabs$1.Trigger>): react_jsx_runtime.JSX.Element;
+declare function TabsContent({ className, ...props }: React$1.ComponentProps<typeof Tabs$1.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;
+
+declare function Textarea({ className, ...props }: Omit<React$1.ComponentProps<"textarea">, 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onAnimationStart' | 'onAnimationEnd'>): react_jsx_runtime.JSX.Element;
+
+declare function Checkbox({ className, ...props }: React$1.ComponentProps<typeof Checkbox$1.Root>): react_jsx_runtime.JSX.Element;
+
+declare function Switch({ className, size, ...props }: React$1.ComponentProps<typeof Switch$1.Root> & {
+    size?: "sm" | "default";
+}): react_jsx_runtime.JSX.Element;
+
+/**
+ * Progress bar with smooth spring animation.
+ *
+ * @component
+ * @layer core
+ *
+ * @param {number} value - Progress value (0-100)
+ *
+ * @example
+ * <Progress value={42} className="w-full" />
+ */
+declare function Progress({ className, value, ...props }: React$1.ComponentProps<typeof Progress$1.Root>): react_jsx_runtime.JSX.Element;
+
+/**
+ * Badge variant definitions.
+ *
+ * Axes:
+ *   variant — visual treatment: solid, soft, outline
+ *   size    — sm, md
+ */
+declare const badgeVariants: (props?: ({
+    variant?: "soft" | "solid" | "outline" | 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> {
+    /** Render as child element (Radix Slot pattern) */
+    asChild?: boolean;
+    /** Semantic color intent */
+    intent?: Intent;
+}
+/**
+ * Badge for status, labels, and counts with intent-based coloring.
+ *
+ * @component
+ * @layer core
+ *
+ * @param {string} variant - Visual treatment: "solid" | "soft" | "outline"
+ * @param {string} intent - Color intent: "primary" | "neutral" | "success" | "warning" | "danger" | "info"
+ * @param {string} size - Badge size: "sm" | "md"
+ * @param {boolean} asChild - Render as child element (Slot pattern)
+ *
+ * @example
+ * <Badge intent="success" variant="soft">Active</Badge>
+ *
+ * @example
+ * // 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 TooltipProvider({ delayDuration, ...props }: React$1.ComponentProps<typeof Tooltip$1.Provider>): react_jsx_runtime.JSX.Element;
+declare function Tooltip({ ...props }: React$1.ComponentProps<typeof Tooltip$1.Root>): react_jsx_runtime.JSX.Element;
+declare function TooltipTrigger({ ...props }: React$1.ComponentProps<typeof Tooltip$1.Trigger>): react_jsx_runtime.JSX.Element;
+declare function TooltipContent({ className, sideOffset, children, ...props }: React$1.ComponentProps<typeof Tooltip$1.Content>): react_jsx_runtime.JSX.Element;
+
+declare function Popover({ ...props }: React$1.ComponentProps<typeof Popover$1.Root>): react_jsx_runtime.JSX.Element;
+declare function PopoverTrigger({ ...props }: React$1.ComponentProps<typeof Popover$1.Trigger>): react_jsx_runtime.JSX.Element;
+declare function PopoverAnchor({ ...props }: React$1.ComponentProps<typeof Popover$1.Anchor>): react_jsx_runtime.JSX.Element;
+declare function PopoverContent({ className, align, sideOffset, ...props }: React$1.ComponentProps<typeof Popover$1.Content>): react_jsx_runtime.JSX.Element;
+
+declare function HoverCard({ ...props }: React$1.ComponentProps<typeof HoverCard$1.Root>): react_jsx_runtime.JSX.Element;
+declare function HoverCardTrigger({ ...props }: React$1.ComponentProps<typeof HoverCard$1.Trigger>): react_jsx_runtime.JSX.Element;
+declare function HoverCardContent({ className, align, sideOffset, ...props }: React$1.ComponentProps<typeof HoverCard$1.Content>): react_jsx_runtime.JSX.Element;
+
+declare function Select({ ...props }: React$1.ComponentProps<typeof Select$1.Root>): react_jsx_runtime.JSX.Element;
+declare function SelectGroup({ ...props }: React$1.ComponentProps<typeof Select$1.Group>): react_jsx_runtime.JSX.Element;
+declare function SelectValue({ ...props }: React$1.ComponentProps<typeof Select$1.Value>): react_jsx_runtime.JSX.Element;
+declare function SelectTrigger({ className, size, children, ...props }: React$1.ComponentProps<typeof Select$1.Trigger> & {
+    size?: "sm" | "default";
+}): react_jsx_runtime.JSX.Element;
+declare function SelectContent({ className, children, position, ...props }: React$1.ComponentProps<typeof Select$1.Content>): react_jsx_runtime.JSX.Element;
+declare function SelectLabel({ className, ...props }: React$1.ComponentProps<typeof Select$1.Label>): react_jsx_runtime.JSX.Element;
+declare function SelectItem({ className, children, ...props }: React$1.ComponentProps<typeof Select$1.Item>): react_jsx_runtime.JSX.Element;
+declare function SelectSeparator({ className, ...props }: React$1.ComponentProps<typeof Select$1.Separator>): react_jsx_runtime.JSX.Element;
+declare function SelectScrollUpButton({ className, ...props }: React$1.ComponentProps<typeof Select$1.ScrollUpButton>): react_jsx_runtime.JSX.Element;
+declare function SelectScrollDownButton({ className, ...props }: React$1.ComponentProps<typeof Select$1.ScrollDownButton>): react_jsx_runtime.JSX.Element;
+
+declare function DropdownMenu({ ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Root>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuPortal({ ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Portal>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuTrigger({ className, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Trigger>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuGroup({ ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Group>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuSub({ ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Sub>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: React$1.ComponentProps<typeof DropdownMenu$1.RadioGroup>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuContent({ className, sideOffset, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Content>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Item> & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+}): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.CheckboxItem>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.RadioItem>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Label> & {
+    inset?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Separator>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React$1.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.SubTrigger> & {
+    inset?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuSubContent({ className, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.SubContent>): react_jsx_runtime.JSX.Element;
+
+declare function Drawer({ ...props }: React$1.ComponentProps<typeof Drawer$1.Root>): react_jsx_runtime.JSX.Element;
+declare function DrawerTrigger({ ...props }: React$1.ComponentProps<typeof Drawer$1.Trigger>): react_jsx_runtime.JSX.Element;
+declare function DrawerPortal({ ...props }: React$1.ComponentProps<typeof Drawer$1.Portal>): react_jsx_runtime.JSX.Element;
+declare function DrawerClose({ ...props }: React$1.ComponentProps<typeof Drawer$1.Close>): react_jsx_runtime.JSX.Element;
+declare function DrawerOverlay({ className, ...props }: React$1.ComponentProps<typeof Drawer$1.Overlay>): react_jsx_runtime.JSX.Element;
+declare function DrawerContent({ className, children, ...props }: React$1.ComponentProps<typeof Drawer$1.Content>): react_jsx_runtime.JSX.Element;
+declare function DrawerHeader({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function DrawerFooter({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function DrawerTitle({ className, ...props }: React$1.ComponentProps<typeof Drawer$1.Title>): react_jsx_runtime.JSX.Element;
+declare function DrawerDescription({ className, ...props }: React$1.ComponentProps<typeof Drawer$1.Description>): react_jsx_runtime.JSX.Element;
+
+declare function Sheet({ ...props }: React$1.ComponentProps<typeof Dialog$1.Root>): react_jsx_runtime.JSX.Element;
+declare function SheetTrigger({ ...props }: React$1.ComponentProps<typeof Dialog$1.Trigger>): react_jsx_runtime.JSX.Element;
+declare function SheetClose({ ...props }: React$1.ComponentProps<typeof Dialog$1.Close>): react_jsx_runtime.JSX.Element;
+declare function SheetContent({ className, children, side, showCloseButton, ...props }: React$1.ComponentProps<typeof Dialog$1.Content> & {
+    side?: "top" | "right" | "bottom" | "left";
+    showCloseButton?: boolean;
+}): 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 Dialog$1.Title>): react_jsx_runtime.JSX.Element;
+declare function SheetDescription({ className, ...props }: React$1.ComponentProps<typeof Dialog$1.Description>): react_jsx_runtime.JSX.Element;
+
+declare function Slider({ className, defaultValue, value, min, max, ...props }: React$1.ComponentProps<typeof Slider$1.Root>): react_jsx_runtime.JSX.Element;
+
+/** Props for the Saasflare Alert component */
+interface AlertProps extends React$1.ComponentProps<"div"> {
+    /** Semantic color intent */
+    intent?: Intent | "neutral";
+    /**
+     * Legacy variant prop for backward compatibility.
+     * @deprecated Use `intent` instead. "destructive" maps to intent="danger".
+     */
+    variant?: "default" | "destructive";
+}
+/**
+ * Contextual alert banner with intent-based coloring.
+ *
+ * @component
+ * @layer core
+ *
+ * @param {string} intent - Color intent: "neutral" | "primary" | "info" | "success" | "warning" | "danger"
+ *
+ * @example
+ * <Alert intent="success">
+ *   <CheckIcon />
+ *   <AlertTitle>Saved!</AlertTitle>
+ *   <AlertDescription>Your changes have been saved.</AlertDescription>
+ * </Alert>
+ *
+ * @example
+ * // Legacy API (deprecated but supported)
+ * <Alert variant="destructive">
+ *   <AlertTitle>Error</AlertTitle>
+ *   <AlertDescription>Something went wrong.</AlertDescription>
+ * </Alert>
+ */
+declare function Alert({ className, intent: intentProp, variant, ...props }: AlertProps): react_jsx_runtime.JSX.Element;
+/**
+ * Alert title text.
+ *
+ * @component
+ * @layer core
+ */
+declare function AlertTitle({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+/**
+ * Alert description text.
+ *
+ * @component
+ * @layer core
+ */
+declare function AlertDescription({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+
+declare function Avatar({ className, size, ...props }: React$1.ComponentProps<typeof Avatar$1.Root> & {
+    size?: "default" | "sm" | "lg";
+}): react_jsx_runtime.JSX.Element;
+declare function AvatarImage({ className, ...props }: React$1.ComponentProps<typeof Avatar$1.Image>): react_jsx_runtime.JSX.Element;
+declare function AvatarFallback({ className, ...props }: React$1.ComponentProps<typeof Avatar$1.Fallback>): react_jsx_runtime.JSX.Element;
+declare function AvatarBadge({ className, ...props }: React$1.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
+declare function AvatarGroup({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function AvatarGroupCount({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+
+declare function ContextMenu({ ...props }: React$1.ComponentProps<typeof ContextMenu$1.Root>): react_jsx_runtime.JSX.Element;
+declare function ContextMenuTrigger({ ...props }: React$1.ComponentProps<typeof ContextMenu$1.Trigger>): react_jsx_runtime.JSX.Element;
+declare function ContextMenuGroup({ ...props }: React$1.ComponentProps<typeof ContextMenu$1.Group>): react_jsx_runtime.JSX.Element;
+declare function ContextMenuPortal({ ...props }: React$1.ComponentProps<typeof ContextMenu$1.Portal>): react_jsx_runtime.JSX.Element;
+declare function ContextMenuSub({ ...props }: React$1.ComponentProps<typeof ContextMenu$1.Sub>): react_jsx_runtime.JSX.Element;
+declare function ContextMenuRadioGroup({ ...props }: React$1.ComponentProps<typeof ContextMenu$1.RadioGroup>): react_jsx_runtime.JSX.Element;
+declare function ContextMenuSubTrigger({ className, inset, children, ...props }: React$1.ComponentProps<typeof ContextMenu$1.SubTrigger> & {
+    inset?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function ContextMenuSubContent({ className, ...props }: React$1.ComponentProps<typeof ContextMenu$1.SubContent>): react_jsx_runtime.JSX.Element;
+declare function ContextMenuContent({ className, ...props }: React$1.ComponentProps<typeof ContextMenu$1.Content>): react_jsx_runtime.JSX.Element;
+declare function ContextMenuItem({ className, inset, variant, ...props }: React$1.ComponentProps<typeof ContextMenu$1.Item> & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+}): react_jsx_runtime.JSX.Element;
+declare function ContextMenuCheckboxItem({ className, children, checked, ...props }: React$1.ComponentProps<typeof ContextMenu$1.CheckboxItem>): react_jsx_runtime.JSX.Element;
+declare function ContextMenuRadioItem({ className, children, ...props }: React$1.ComponentProps<typeof ContextMenu$1.RadioItem>): react_jsx_runtime.JSX.Element;
+declare function ContextMenuLabel({ className, inset, ...props }: React$1.ComponentProps<typeof ContextMenu$1.Label> & {
+    inset?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function ContextMenuSeparator({ className, ...props }: React$1.ComponentProps<typeof ContextMenu$1.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 Menubar$1.Root>): react_jsx_runtime.JSX.Element;
+declare function MenubarMenu({ ...props }: React$1.ComponentProps<typeof Menubar$1.Menu>): react_jsx_runtime.JSX.Element;
+declare function MenubarGroup({ ...props }: React$1.ComponentProps<typeof Menubar$1.Group>): react_jsx_runtime.JSX.Element;
+declare function MenubarPortal({ ...props }: React$1.ComponentProps<typeof Menubar$1.Portal>): react_jsx_runtime.JSX.Element;
+declare function MenubarRadioGroup({ ...props }: React$1.ComponentProps<typeof Menubar$1.RadioGroup>): react_jsx_runtime.JSX.Element;
+declare function MenubarTrigger({ className, ...props }: React$1.ComponentProps<typeof Menubar$1.Trigger>): react_jsx_runtime.JSX.Element;
+declare function MenubarContent({ className, align, alignOffset, sideOffset, ...props }: React$1.ComponentProps<typeof Menubar$1.Content>): react_jsx_runtime.JSX.Element;
+declare function MenubarItem({ className, inset, variant, ...props }: React$1.ComponentProps<typeof Menubar$1.Item> & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+}): react_jsx_runtime.JSX.Element;
+declare function MenubarCheckboxItem({ className, children, checked, ...props }: React$1.ComponentProps<typeof Menubar$1.CheckboxItem>): react_jsx_runtime.JSX.Element;
+declare function MenubarRadioItem({ className, children, ...props }: React$1.ComponentProps<typeof Menubar$1.RadioItem>): react_jsx_runtime.JSX.Element;
+declare function MenubarLabel({ className, inset, ...props }: React$1.ComponentProps<typeof Menubar$1.Label> & {
+    inset?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function MenubarSeparator({ className, ...props }: React$1.ComponentProps<typeof Menubar$1.Separator>): react_jsx_runtime.JSX.Element;
+declare function MenubarShortcut({ className, ...props }: React$1.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
+declare function MenubarSub({ ...props }: React$1.ComponentProps<typeof Menubar$1.Sub>): react_jsx_runtime.JSX.Element;
+declare function MenubarSubTrigger({ className, inset, children, ...props }: React$1.ComponentProps<typeof Menubar$1.SubTrigger> & {
+    inset?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function MenubarSubContent({ className, ...props }: React$1.ComponentProps<typeof Menubar$1.SubContent>): react_jsx_runtime.JSX.Element;
+
+declare function NavigationMenu({ className, children, viewport, ...props }: React$1.ComponentProps<typeof NavigationMenu$1.Root> & {
+    viewport?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function NavigationMenuList({ className, ...props }: React$1.ComponentProps<typeof NavigationMenu$1.List>): react_jsx_runtime.JSX.Element;
+declare function NavigationMenuItem({ className, ...props }: React$1.ComponentProps<typeof NavigationMenu$1.Item>): react_jsx_runtime.JSX.Element;
+declare const navigationMenuTriggerStyle: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare function NavigationMenuTrigger({ className, children, ...props }: React$1.ComponentProps<typeof NavigationMenu$1.Trigger>): react_jsx_runtime.JSX.Element;
+declare function NavigationMenuContent({ className, ...props }: React$1.ComponentProps<typeof NavigationMenu$1.Content>): react_jsx_runtime.JSX.Element;
+declare function NavigationMenuViewport({ className, ...props }: React$1.ComponentProps<typeof NavigationMenu$1.Viewport>): react_jsx_runtime.JSX.Element;
+declare function NavigationMenuLink({ className, ...props }: React$1.ComponentProps<typeof NavigationMenu$1.Link>): react_jsx_runtime.JSX.Element;
+declare function NavigationMenuIndicator({ className, ...props }: React$1.ComponentProps<typeof NavigationMenu$1.Indicator>): react_jsx_runtime.JSX.Element;
+
+/** Component the skeleton imitates — drives radius from the design tokens. */
+type SkeletonAs = "avatar" | "text" | "card";
+interface SkeletonProps extends React.ComponentProps<"div"> {
+    /**
+     * Component shape to imitate. When set, radius follows the design-system
+     * scale (and at `data-radius="pill"`, all variants collapse to fully rounded
+     * automatically — see theme.css).
+     *
+     * - `avatar` → fully rounded
+     * - `text`   → `--radius-sm`
+     * - `card`   → `--radius-lg`
+     *
+     * Omit for legacy behavior (`rounded-md` Tailwind class).
+     */
+    as?: SkeletonAs;
+}
+/**
+ * Skeleton loading placeholder with animated shimmer gradient.
+ *
+ * @component
+ * @package ui
+ */
+declare function Skeleton({ as, className, style, ...props }: SkeletonProps): react_jsx_runtime.JSX.Element;
+
+declare const toggleVariants: (props?: ({
+    variant?: "default" | "outline" | 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 Toggle$1.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime.JSX.Element;
+
+declare function ToggleGroup({ className, variant, size, spacing, children, ...props }: React$1.ComponentProps<typeof ToggleGroup$1.Root> & VariantProps<typeof toggleVariants> & {
+    spacing?: number;
+}): react_jsx_runtime.JSX.Element;
+declare function ToggleGroupItem({ className, children, variant, size, ...props }: React$1.ComponentProps<typeof ToggleGroup$1.Item> & VariantProps<typeof toggleVariants>): react_jsx_runtime.JSX.Element;
+
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+type CarouselProps = {
+    opts?: CarouselOptions;
+    plugins?: CarouselPlugin;
+    orientation?: "horizontal" | "vertical";
+    setApi?: (api: CarouselApi) => void;
+};
+declare function Carousel({ orientation, opts, setApi, plugins, className, children, ...props }: React$1.ComponentProps<"div"> & CarouselProps): react_jsx_runtime.JSX.Element;
+declare function CarouselContent({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CarouselItem({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CarouselPrevious({ className, variant, size, ...props }: React$1.ComponentProps<typeof Button>): react_jsx_runtime.JSX.Element;
+declare function CarouselNext({ className, variant, size, ...props }: React$1.ComponentProps<typeof Button>): react_jsx_runtime.JSX.Element;
+
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React$1.ComponentProps<typeof DayPicker> & {
+    buttonVariant?: React$1.ComponentProps<typeof Button>["variant"];
+}): react_jsx_runtime.JSX.Element;
+declare function CalendarDayButton({ className, day, modifiers, ...props }: React$1.ComponentProps<typeof DayButton>): react_jsx_runtime.JSX.Element;
+
+declare function RadioGroup({ className, ...props }: React$1.ComponentProps<typeof RadioGroup$1.Root>): react_jsx_runtime.JSX.Element;
+declare function RadioGroupItem({ className, ...props }: React$1.ComponentProps<typeof RadioGroup$1.Item>): react_jsx_runtime.JSX.Element;
+
+declare function Collapsible({ ...props }: React.ComponentProps<typeof Collapsible$1.Root>): react_jsx_runtime.JSX.Element;
+declare function CollapsibleTrigger({ ...props }: React.ComponentProps<typeof Collapsible$1.CollapsibleTrigger>): react_jsx_runtime.JSX.Element;
+declare function CollapsibleContent({ ...props }: React.ComponentProps<typeof Collapsible$1.CollapsibleContent>): react_jsx_runtime.JSX.Element;
+
+declare function Spinner({ className, ...props }: React.ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
+
+declare function ScrollArea({ className, children, ...props }: React$1.ComponentProps<typeof ScrollArea$1.Root>): react_jsx_runtime.JSX.Element;
+declare function ScrollBar({ className, orientation, ...props }: React$1.ComponentProps<typeof ScrollArea$1.ScrollAreaScrollbar>): react_jsx_runtime.JSX.Element;
+
+declare const Toaster: ({ ...props }: ToasterProps) => react_jsx_runtime.JSX.Element;
+
+declare function AspectRatio({ ...props }: React.ComponentProps<typeof AspectRatio$1.Root>): react_jsx_runtime.JSX.Element;
+
+declare function Breadcrumb({ ...props }: React$1.ComponentProps<"nav">): 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"> & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function BreadcrumbPage({ className, ...props }: React$1.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
+declare function BreadcrumbSeparator({ children, className, ...props }: React$1.ComponentProps<"li">): react_jsx_runtime.JSX.Element;
+declare function BreadcrumbEllipsis({ className, ...props }: React$1.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
+
+declare function Separator({ className, orientation, decorative, ...props }: React$1.ComponentProps<typeof Separator$1.Root>): react_jsx_runtime.JSX.Element;
+
+declare const buttonGroupVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>): react_jsx_runtime.JSX.Element;
+declare function ButtonGroupText({ className, asChild, ...props }: React.ComponentProps<"div"> & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function ButtonGroupSeparator({ className, orientation, ...props }: React.ComponentProps<typeof Separator>): react_jsx_runtime.JSX.Element;
+
+declare const THEMES: {
+    readonly light: "";
+    readonly dark: ".dark";
+};
+type ChartConfig = {
+    [k in string]: {
+        label?: React$1.ReactNode;
+        icon?: React$1.ComponentType;
+    } & ({
+        color?: string;
+        theme?: never;
+    } | {
+        color?: never;
+        theme: Record<keyof typeof THEMES, string>;
+    });
+};
+declare function ChartContainer({ id, className, children, config, ...props }: React$1.ComponentProps<"div"> & {
+    config: ChartConfig;
+    children: React$1.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+}): react_jsx_runtime.JSX.Element;
+declare const ChartStyle: ({ id, config }: {
+    id: string;
+    config: ChartConfig;
+}) => react_jsx_runtime.JSX.Element | null;
+declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
+interface ChartTooltipPayloadItem {
+    name?: string;
+    value?: number | string;
+    dataKey?: string | number;
+    type?: string;
+    color?: string;
+    fill?: string;
+    payload?: Record<string, unknown>;
+}
+interface ChartTooltipContentProps extends React$1.ComponentProps<"div"> {
+    active?: boolean;
+    payload?: ChartTooltipPayloadItem[];
+    label?: string | number;
+    labelFormatter?: (label: unknown, payload: ChartTooltipPayloadItem[]) => React$1.ReactNode;
+    labelClassName?: string;
+    formatter?: (value: unknown, name: string, entry: ChartTooltipPayloadItem, index: number, payload: unknown) => React$1.ReactNode;
+    color?: string;
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: "line" | "dot" | "dashed";
+    nameKey?: string;
+    labelKey?: string;
+}
+declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: ChartTooltipContentProps): react_jsx_runtime.JSX.Element | null;
+declare const ChartLegend: React$1.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React$1.ReactPortal | null>;
+interface ChartLegendPayloadItem {
+    value?: string;
+    type?: string;
+    color?: string;
+    dataKey?: string | number;
+}
+interface ChartLegendContentProps extends React$1.ComponentProps<"div"> {
+    payload?: ChartLegendPayloadItem[];
+    verticalAlign?: "top" | "bottom" | "middle";
+    hideIcon?: boolean;
+    nameKey?: string;
+}
+declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: ChartLegendContentProps): react_jsx_runtime.JSX.Element | null;
+
+declare const Combobox: typeof Combobox$1.Root;
+declare function ComboboxValue({ ...props }: Combobox$1.Value.Props): react_jsx_runtime.JSX.Element;
+declare function ComboboxTrigger({ className, children, ...props }: Combobox$1.Trigger.Props): react_jsx_runtime.JSX.Element;
+declare function ComboboxInput({ className, children, disabled, showTrigger, showClear, ...props }: Combobox$1.Input.Props & {
+    showTrigger?: boolean;
+    showClear?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function ComboboxContent({ className, side, sideOffset, align, alignOffset, anchor, ...props }: Combobox$1.Popup.Props & Pick<Combobox$1.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "anchor">): react_jsx_runtime.JSX.Element;
+declare function ComboboxList({ className, ...props }: Combobox$1.List.Props): react_jsx_runtime.JSX.Element;
+declare function ComboboxItem({ className, children, ...props }: Combobox$1.Item.Props): react_jsx_runtime.JSX.Element;
+declare function ComboboxGroup({ className, ...props }: Combobox$1.Group.Props): react_jsx_runtime.JSX.Element;
+declare function ComboboxLabel({ className, ...props }: Combobox$1.GroupLabel.Props): react_jsx_runtime.JSX.Element;
+declare function ComboboxCollection({ ...props }: Combobox$1.Collection.Props): react_jsx_runtime.JSX.Element;
+declare function ComboboxEmpty({ className, ...props }: Combobox$1.Empty.Props): react_jsx_runtime.JSX.Element;
+declare function ComboboxSeparator({ className, ...props }: Combobox$1.Separator.Props): react_jsx_runtime.JSX.Element;
+declare function ComboboxChips({ className, ...props }: React$1.ComponentPropsWithRef<typeof Combobox$1.Chips> & Combobox$1.Chips.Props): react_jsx_runtime.JSX.Element;
+declare function ComboboxChip({ className, children, showRemove, ...props }: Combobox$1.Chip.Props & {
+    showRemove?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function ComboboxChipsInput({ className, children, ...props }: Combobox$1.Input.Props): react_jsx_runtime.JSX.Element;
+declare function useComboboxAnchor(): React$1.RefObject<HTMLDivElement | null>;
+
+declare function Command({ className, ...props }: React$1.ComponentProps<typeof Command$1>): react_jsx_runtime.JSX.Element;
+declare function CommandDialog({ title, description, children, className, ...props }: React$1.ComponentProps<typeof Dialog> & {
+    title?: string;
+    description?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function CommandInput({ className, ...props }: React$1.ComponentProps<typeof Command$1.Input>): react_jsx_runtime.JSX.Element;
+declare function CommandList({ className, ...props }: React$1.ComponentProps<typeof Command$1.List>): react_jsx_runtime.JSX.Element;
+declare function CommandEmpty({ ...props }: React$1.ComponentProps<typeof Command$1.Empty>): react_jsx_runtime.JSX.Element;
+declare function CommandGroup({ className, ...props }: React$1.ComponentProps<typeof Command$1.Group>): react_jsx_runtime.JSX.Element;
+declare function CommandSeparator({ className, ...props }: React$1.ComponentProps<typeof Command$1.Separator>): react_jsx_runtime.JSX.Element;
+declare function CommandItem({ className, ...props }: React$1.ComponentProps<typeof Command$1.Item>): react_jsx_runtime.JSX.Element;
+declare function CommandShortcut({ className, ...props }: React$1.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
+
+declare function DirectionProvider({ dir, direction, children, }: React$1.ComponentProps<typeof Direction.DirectionProvider> & {
+    direction?: React$1.ComponentProps<typeof Direction.DirectionProvider>["dir"];
+}): react_jsx_runtime.JSX.Element;
+declare const useDirection: typeof Direction.useDirection;
+
+declare function Empty({ className, ...props }: React.ComponentProps<"div">): 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;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function EmptyMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>): react_jsx_runtime.JSX.Element;
+declare function EmptyTitle({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function EmptyDescription({ className, ...props }: React.ComponentProps<"p">): react_jsx_runtime.JSX.Element;
+declare function EmptyContent({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+
+declare function Label({ className, ...props }: React$1.ComponentProps<typeof Label$1.Root>): react_jsx_runtime.JSX.Element;
+
+declare function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">): react_jsx_runtime.JSX.Element;
+declare function FieldLegend({ className, variant, ...props }: React.ComponentProps<"legend"> & {
+    variant?: "legend" | "label";
+}): react_jsx_runtime.JSX.Element;
+declare function FieldGroup({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare const fieldVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | "responsive" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Field({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>): react_jsx_runtime.JSX.Element;
+declare function FieldContent({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>): react_jsx_runtime.JSX.Element;
+declare function FieldTitle({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function FieldDescription({ className, ...props }: React.ComponentProps<"p">): react_jsx_runtime.JSX.Element;
+declare function FieldSeparator({ children, className, ...props }: React.ComponentProps<"div"> & {
+    children?: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function FieldError({ className, children, errors, ...props }: React.ComponentProps<"div"> & {
+    errors?: Array<{
+        message?: string;
+    } | undefined>;
+}): react_jsx_runtime.JSX.Element | null;
+
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React$1.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+declare const useFormField: () => {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: react_hook_form.FieldError;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};
+declare function FormItem({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function FormLabel({ className, ...props }: React$1.ComponentProps<typeof Label$1.Root>): react_jsx_runtime.JSX.Element;
+declare function FormControl({ ...props }: React$1.ComponentProps<typeof Slot.Root>): react_jsx_runtime.JSX.Element;
+declare function FormDescription({ className, ...props }: React$1.ComponentProps<"p">): react_jsx_runtime.JSX.Element;
+declare function FormMessage({ className, ...props }: React$1.ComponentProps<"p">): react_jsx_runtime.JSX.Element | null;
+
+interface IconProps {
+    className?: string;
+}
+declare const Icons: {
+    logo: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    chat: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    settings: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    pages: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    preview: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    analytics: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    share: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    send: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    edit: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    pencil: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    eye: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    x: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    trash: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    desktop: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    tablet: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    mobile: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    chevronDown: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    chevronRight: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    plus: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    folder: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    users: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    sparkles: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    check: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    arrowLeft: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    home: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    helpCircle: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    globe: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    download: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    lock: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    unlock: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    code: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    github: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    copy: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    spinner: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    refresh: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    alertCircle: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    palette: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    puzzle: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    upload: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    externalLink: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    gitBranch: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+};
+
+declare function InputGroup({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare const inputGroupAddonVariants: (props?: ({
+    align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function InputGroupAddon({ className, align, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): react_jsx_runtime.JSX.Element;
+declare const inputGroupButtonVariants: (props?: ({
+    size?: "xs" | "sm" | "icon-xs" | "icon-sm" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React$1.ComponentProps<typeof Button>, "size"> & VariantProps<typeof inputGroupButtonVariants>): react_jsx_runtime.JSX.Element;
+declare function InputGroupText({ className, ...props }: React$1.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
+declare function InputGroupInput({ className, ...props }: React$1.ComponentProps<"input">): react_jsx_runtime.JSX.Element;
+declare function InputGroupTextarea({ className, ...props }: React$1.ComponentProps<"textarea">): react_jsx_runtime.JSX.Element;
+
+declare function InputOTP({ className, containerClassName, ...props }: React$1.ComponentProps<typeof OTPInput> & {
+    containerClassName?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function InputOTPGroup({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function InputOTPSlot({ index, className, ...props }: React$1.ComponentProps<"div"> & {
+    index: number;
+}): react_jsx_runtime.JSX.Element;
+declare function InputOTPSeparator({ ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+
+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;
+    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> & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare const itemMediaVariants: (props?: ({
+    variant?: "default" | "icon" | "image" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function ItemMedia({ className, variant, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>): react_jsx_runtime.JSX.Element;
+declare function ItemContent({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function ItemTitle({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function ItemDescription({ className, ...props }: React$1.ComponentProps<"p">): react_jsx_runtime.JSX.Element;
+declare function ItemActions({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+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;
+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"> & {
+    size?: "sm" | "default";
+}): 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;
+
+declare function Pagination({ className, ...props }: React$1.ComponentProps<"nav">): react_jsx_runtime.JSX.Element;
+declare function PaginationContent({ className, ...props }: React$1.ComponentProps<"ul">): react_jsx_runtime.JSX.Element;
+declare function PaginationItem({ ...props }: React$1.ComponentProps<"li">): react_jsx_runtime.JSX.Element;
+type PaginationLinkProps = {
+    isActive?: boolean;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "icon" | "icon-xs" | "icon-sm" | "icon-lg";
+} & React$1.ComponentProps<"a">;
+declare function PaginationLink({ className, isActive, size, ...props }: PaginationLinkProps): react_jsx_runtime.JSX.Element;
+declare function PaginationPrevious({ className, ...props }: React$1.ComponentProps<typeof PaginationLink>): react_jsx_runtime.JSX.Element;
+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 ResizablePanelGroup({ className, ...props }: ResizablePrimitive.GroupProps): react_jsx_runtime.JSX.Element;
+declare function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps): react_jsx_runtime.JSX.Element;
+declare function ResizableHandle({ withHandle, className, ...props }: ResizablePrimitive.SeparatorProps & {
+    withHandle?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+declare function Table({ className, ...props }: React$1.ComponentProps<"table">): 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;
+declare function TableRow({ className, ...props }: React$1.ComponentProps<"tr">): react_jsx_runtime.JSX.Element;
+declare function TableHead({ className, ...props }: React$1.ComponentProps<"th">): react_jsx_runtime.JSX.Element;
+declare function TableCell({ className, ...props }: React$1.ComponentProps<"td">): react_jsx_runtime.JSX.Element;
+declare function TableCaption({ className, ...props }: React$1.ComponentProps<"caption">): react_jsx_runtime.JSX.Element;
+
+/**
+ * Shape of a single tooltip item.
+ */
+interface TooltipItem {
+    /** Unique numeric identifier (used for hover matching). */
+    id: number;
+    /** Display name shown in the tooltip. */
+    name: string;
+    /** Secondary label (e.g. job title, role). */
+    designation: string;
+    /** Image source path or absolute URL. */
+    image: string;
+}
+/**
+ * AnimatedTooltip
+ *
+ * Renders a row (or flex-wrapped set) of circular avatar images that reveal
+ * an animated, tilted tooltip on hover. The tooltip tilts and translates in
+ * sync with the user’s mouse position, creating a smooth parallax effect.
+ *
+ * @component
+ * @param {Object}   props
+ * @param {TooltipItem[]} props.items – Array of tooltip items to render.
+ * @returns {JSX.Element} React element containing the interactive avatars.
+ *
+ * @example
+ * ```tsx
+ * <AnimatedTooltip
+ *   items={[
+ *     { id: 1, name: 'Michaela', designation: 'Creator', image: '/img/michaela.jpg' },
+ *     { id: 2, name: 'Lukas',    designation: 'Marketer', image: '/img/lukas.jpg'    },
+ *   ]}
+ * />
+ * ```
+ */
+declare const AnimatedTooltip: ({ items, }: {
+    items: TooltipItem[];
+}) => JSX.Element;
+
+interface TypewriterTextProps {
+    text: string;
+    /** Delay between each word in ms (default: 40) */
+    wordDelay?: number;
+    /** Skip animation and show full text immediately */
+    skipAnimation?: boolean;
+    /** Callback when animation completes */
+    onComplete?: () => void;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * Typewriter component that reveals text word-by-word
+ */
+declare function TypewriterText({ text, wordDelay, skipAnimation, onComplete, className, }: TypewriterTextProps): react_jsx_runtime.JSX.Element;
+
+type SidebarContextProps = {
+    state: "expanded" | "collapsed" | "overlayed";
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    openMobile: boolean;
+    setOpenMobile: (open: boolean) => void;
+    isMobile: boolean;
+    toggleSidebar: () => void;
+};
+declare function useSidebar(): SidebarContextProps;
+declare function SidebarProvider({ defaultOpen: defaultOpenProp, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React$1.ComponentProps<'div'> & {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}): 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"> & {
+    side?: "left" | "right";
+    variant?: "sidebar" | "floating" | "inset";
+    collapsible?: "offcanvas" | "icon" | "none";
+}): 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;
+declare function SidebarHeader({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function SidebarFooter({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function SidebarSeparator({ className, ...props }: React$1.ComponentProps<typeof Separator>): react_jsx_runtime.JSX.Element;
+declare function SidebarContent({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function SidebarGroup({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function SidebarGroupLabel({ className, asChild, ...props }: React$1.ComponentProps<"div"> & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function SidebarGroupAction({ className, asChild, ...props }: React$1.ComponentProps<"button"> & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function SidebarGroupContent({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+
+declare const sidebarMenuButtonVariants: (props?: ({
+    variant?: "default" | "outline" | 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;
+declare function SidebarMenuItem({ className, ...props }: React$1.ComponentProps<"li">): react_jsx_runtime.JSX.Element;
+declare function SidebarMenuButton({ asChild, isActive, variant, size, tooltip, className, ...props }: React$1.ComponentProps<"button"> & {
+    asChild?: boolean;
+    isActive?: boolean;
+    tooltip?: string | React$1.ComponentProps<typeof TooltipContent>;
+} & VariantProps<typeof sidebarMenuButtonVariants>): react_jsx_runtime.JSX.Element;
+declare function SidebarMenuAction({ className, asChild, showOnHover, ...props }: React$1.ComponentProps<"button"> & {
+    asChild?: boolean;
+    showOnHover?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function SidebarMenuBadge({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function SidebarMenuSkeleton({ className, showIcon, ...props }: React$1.ComponentProps<"div"> & {
+    showIcon?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function SidebarMenuSub({ className, ...props }: React$1.ComponentProps<"ul">): react_jsx_runtime.JSX.Element;
+declare function SidebarMenuSubItem({ className, ...props }: React$1.ComponentProps<"li">): react_jsx_runtime.JSX.Element;
+declare function SidebarMenuSubButton({ asChild, size, isActive, className, ...props }: React$1.ComponentProps<"a"> & {
+    asChild?: boolean;
+    size?: "sm" | "md";
+    isActive?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+/** Props for the PageHeader component */
+interface PageHeaderProps extends React$1.ComponentProps<"div"> {
+    /** Page title */
+    title: string;
+    /** Optional description below the title */
+    description?: string;
+    /** Optional breadcrumb element rendered above the title */
+    breadcrumbs?: React$1.ReactNode;
+    /** Action slot (buttons, etc.) aligned to the right */
+    actions?: React$1.ReactNode;
+}
+/**
+ * Page header with title, description, breadcrumbs, and action slot.
+ *
+ * @component
+ * @layer core
+ *
+ * @param {string} title - Page title text
+ * @param {string} description - Optional subtitle / description
+ * @param {React.ReactNode} breadcrumbs - Optional breadcrumb navigation
+ * @param {React.ReactNode} actions - Action buttons aligned right
+ *
+ * @example
+ * <PageHeader
+ *   breadcrumbs={<Breadcrumb>...</Breadcrumb>}
+ *   title="Billing"
+ *   description="Manage your subscription and payment methods."
+ *   actions={
+ *     <>
+ *       <Button variant="outline">Cancel Plan</Button>
+ *       <Button>Upgrade</Button>
+ *     </>
+ *   }
+ * />
+ */
+declare function PageHeader({ title, description, breadcrumbs, actions, className, ...props }: PageHeaderProps): react_jsx_runtime.JSX.Element;
+
+/** Props for the SectionCard component */
+interface SectionCardProps extends React$1.ComponentProps<"div"> {
+    /** Section title */
+    title: string;
+    /** Optional description below the title */
+    description?: string;
+    /** Optional footer content (save button, etc.) */
+    footer?: React$1.ReactNode;
+    /** Optional action in the header (edit button, etc.) */
+    headerAction?: React$1.ReactNode;
+}
+/**
+ * Titled card section for settings panels and dashboard areas.
+ *
+ * @component
+ * @layer core
+ *
+ * @param {string} title - Section title
+ * @param {string} description - Optional description
+ * @param {React.ReactNode} footer - Optional footer area
+ * @param {React.ReactNode} headerAction - Optional action in header
+ *
+ * @example
+ * <SectionCard
+ *   title="Danger Zone"
+ *   description="Irreversible actions for your project."
+ *   footer={<Button intent="danger">Delete Project</Button>}
+ * >
+ *   <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;
+
+/** Trend indicator data */
+interface MetricTrend {
+    /** Numeric change (displayed as percentage) */
+    value: number;
+    /** Direction of the trend */
+    direction: "up" | "down" | "flat";
+}
+/** Props for the MetricCard component */
+interface MetricCardProps extends React$1.ComponentProps<"div"> {
+    /** Metric label (e.g. "Revenue", "Active Users") */
+    label: string;
+    /** Formatted metric value (e.g. "$12,345", "1,234") */
+    value: string;
+    /** Optional trend indicator */
+    trend?: MetricTrend;
+    /** Optional icon element */
+    icon?: React$1.ReactNode;
+}
+/**
+ * Dashboard metric card displaying a KPI with trend.
+ *
+ * @component
+ * @layer core
+ *
+ * @param {string} label - Metric label
+ * @param {string} value - Formatted metric value
+ * @param {MetricTrend} trend - Optional trend with value and direction
+ * @param {React.ReactNode} icon - Optional icon
+ *
+ * @example
+ * <MetricCard
+ *   label="Monthly Revenue"
+ *   value="$48,200"
+ *   trend={{ value: 8.2, direction: "up" }}
+ * />
+ */
+declare function MetricCard({ label, value, trend, icon, className, ...props }: MetricCardProps): react_jsx_runtime.JSX.Element;
+
+/** Props for the EmptyState component */
+interface EmptyStateProps extends React$1.ComponentProps<"div"> {
+    /** Icon or illustration element */
+    icon?: React$1.ReactNode;
+    /** Title text */
+    title: string;
+    /** Description text */
+    description?: string;
+    /** Action element (button, link, etc.) */
+    action?: React$1.ReactNode;
+}
+/**
+ * Empty state placeholder with icon, text, and call-to-action.
+ *
+ * @component
+ * @layer core
+ *
+ * @param {React.ReactNode} icon - Icon or illustration
+ * @param {string} title - Title text
+ * @param {string} description - Description text
+ * @param {React.ReactNode} action - Optional CTA button
+ *
+ * @example
+ * <EmptyState
+ *   icon={<FileIcon className="size-12" />}
+ *   title="No documents"
+ *   description="Upload your first document to get started."
+ *   action={<Button>Upload File</Button>}
+ * />
+ */
+declare function EmptyState({ icon, title, description, action, className, ...props }: EmptyStateProps): react_jsx_runtime.JSX.Element;
+
+/** Props for the SearchField component */
+interface SearchFieldProps extends Omit<React$1.ComponentProps<"input">, "type"> {
+    /** Show loading spinner instead of search icon */
+    loading?: boolean;
+    /** Callback when clear button is clicked */
+    onClear?: () => void;
+}
+/**
+ * Search input with icon, clear button, and loading state.
+ *
+ * @component
+ * @layer core
+ *
+ * @param {boolean} loading - Shows spinner in place of search icon
+ * @param {function} onClear - Callback when clear button is clicked
+ *
+ * @example
+ * const [query, setQuery] = useState("");
+ * <SearchField
+ *   placeholder="Search..."
+ *   value={query}
+ *   onChange={(e) => setQuery(e.target.value)}
+ *   onClear={() => setQuery("")}
+ *   loading={isSearching}
+ * />
+ */
+declare function SearchField({ className, loading, onClear, value, ...props }: SearchFieldProps): react_jsx_runtime.JSX.Element;
+
+/** Props for the SettingsSection component */
+interface SettingsSectionProps extends React$1.ComponentProps<"div"> {
+    /** Setting label */
+    label: string;
+    /** Optional description of the setting */
+    description?: string;
+}
+/**
+ * Settings row with label, description, and control slot.
+ *
+ * @component
+ * @layer core
+ *
+ * @param {string} label - Setting label
+ * @param {string} description - Description of what the setting controls
+ *
+ * @example
+ * <SettingsSection
+ *   label="Two-Factor Authentication"
+ *   description="Add an extra layer of security to your account."
+ * >
+ *   <Button variant="outline" size="sm">Enable</Button>
+ * </SettingsSection>
+ */
+declare function SettingsSection({ label, description, className, children, ...props }: SettingsSectionProps): react_jsx_runtime.JSX.Element;
+
+/** Props for the PricingCard component */
+interface PricingCardProps extends React$1.ComponentProps<"div"> {
+    /** Plan name (e.g. "Starter", "Pro", "Enterprise") */
+    name: string;
+    /** Formatted price (e.g. "$29", "Free", "$99") */
+    price: string;
+    /** Billing period (e.g. "month", "year") */
+    period?: string;
+    /** Short plan description */
+    description?: string;
+    /** List of included features */
+    features: string[];
+    /** CTA button element */
+    cta?: React$1.ReactNode;
+    /** Highlight as recommended plan */
+    featured?: boolean;
+}
+/**
+ * Pricing plan card with features list and CTA.
+ *
+ * @component
+ * @layer core
+ *
+ * @param {string} name - Plan name
+ * @param {string} price - Formatted price string
+ * @param {string} period - Billing period
+ * @param {string} description - Short description
+ * @param {string[]} features - List of features
+ * @param {React.ReactNode} cta - Call-to-action button
+ * @param {boolean} featured - Highlight styling
+ *
+ * @example
+ * <PricingCard
+ *   name="Enterprise"
+ *   price="$99"
+ *   period="month"
+ *   description="For large organizations"
+ *   features={["Everything in Pro", "SSO", "Custom integrations"]}
+ *   cta={<Button variant="solid" intent="primary">Contact Sales</Button>}
+ *   featured
+ * />
+ */
+declare function PricingCard({ name, price, period, description, features, cta, featured, className, ...props }: PricingCardProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Toolbar container for data views.
+ *
+ * @component
+ * @layer core
+ *
+ * @example
+ * <DataToolbar>
+ *   <DataToolbarSearch placeholder="Search..." />
+ *   <DataToolbarActions>
+ *     <Button size="sm">Add New</Button>
+ *   </DataToolbarActions>
+ * </DataToolbar>
+ */
+declare function DataToolbar({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+/**
+ * Search slot within the data toolbar.
+ *
+ * @component
+ * @layer core
+ */
+declare function DataToolbarSearch({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+/**
+ * Filters slot within the data toolbar.
+ *
+ * @component
+ * @layer core
+ */
+declare function DataToolbarFilters({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+/**
+ * Actions slot within the data toolbar (right-aligned).
+ *
+ * @component
+ * @layer core
+ */
+declare function DataToolbarActions({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+
+/**
+ * Props for the ScrollToTopButton component.
+ *
+ * @interface
+ * @package ui
+ */
+interface ScrollToTopButtonProps extends SaasflareComponentProps {
+    /**
+     * Optional scroll container element ID.
+     * If not provided, falls back to the global `window`.
+     */
+    scrollContainerId?: string;
+    /**
+     * Vertical scroll offset (in pixels) after which the button is shown.
+     * @default 300
+     */
+    scrollOffset?: number;
+    /** Additional class names merged onto the root button. */
+    className?: string;
+}
+/**
+ * A floating button that appears after scrolling down and smoothly scrolls
+ * the user back to the top of the container (or window).
+ *
+ * @component
+ */
+declare function ScrollToTopButton({ scrollContainerId, scrollOffset, className, ...sfProps }: ScrollToTopButtonProps): JSX.Element;
+
+/**
+ * Theme mode toggle button with Sun/Moon icons.
+ *
+ * @component
+ * @layer core
+ *
+ * @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.className] - Additional CSS class names
+ * @returns {JSX.Element | null} The toggle button, or null before hydration
+ */
+declare function ThemeModeToggle({ showText, text, className, }: {
+    showText?: boolean;
+    text?: string;
+    className?: string;
+}): JSX.Element | null;
+
+/**
+ * Props for the TopLoadingBar component.
+ *
+ * @interface
+ * @package ui
+ */
+interface TopLoadingBarProps extends SaasflareComponentProps {
+    /** Delay before starting the progress bar, in ms. @default 100 */
+    startDelayMs?: number;
+    /** Delay before finishing the progress bar, in ms. @default 300 */
+    finishDelayMs?: number;
+}
+declare function TopLoadingBar({ startDelayMs, finishDelayMs, ...sfProps }: TopLoadingBarProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Props for the UserAvatar component.
+ *
+ * @interface
+ * @layer core
+ */
+interface UserAvatarProps {
+    /** URL of the user's avatar image */
+    src: string | null | undefined;
+    /** User's display name (used as alt text) */
+    name: string | null | undefined;
+    /** Initials to show when no avatar image is available */
+    initials: string;
+    /** Avatar size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Additional CSS class names */
+    className?: string;
+}
+/**
+ * User avatar with image, fallback initials, and size variants.
+ *
+ * @component
+ * @layer core
+ *
+ * @param {UserAvatarProps} props - Component props
+ * @returns {JSX.Element} The rendered avatar
+ *
+ * @example
+ * <UserAvatar src="/avatars/jane.jpg" name="Jane Doe" initials="JD" />
+ */
+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, type ButtonProps, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, type CustomPalette, DataToolbar, DataToolbarActions, DataToolbarFilters, DataToolbarSearch, type Density, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectionProvider, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, 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, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type 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, PALETTES, PageHeader, type PageHeaderProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, type PaginationRangeItem, type Palette, type PaletteId, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PricingCard, type PricingCardProps, Progress, RADII, RadioGroup, RadioGroupItem, type Radius, type RadiusProp, ResizableHandle, ResizablePanel, ResizablePanelGroup, type ResolvedSaasflareProps, STYLES, type 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, type StyleVariant, type 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, buttonVariants, cn, fadeIn, navigationMenuTriggerStyle, noMotion, scaleIn, slideDown, slideUp, spring, springBouncy, springGentle, springStiff, toggleVariants, useAnimation, useComboboxAnchor, useDirection, useDisclosure, useFormField, useIsMobile, useMeasure, usePagination, useReducedMotion, useSaasflareProps, useSaasflareTheme, useSidebar };