app-studio 0.7.18 → 0.8.1

package/dist/web/index.d.ts

@@ -0,0 +1,638 @@
+import * as react from 'react';
+import react__default, { ReactNode, CSSProperties, HTMLAttributes, RefObject } from 'react';
+import { C as ColorSingleton, a as ColorPalette, A as AnimationProps, S as Shadow, V as ViewStyleProps, I as ImageStyleProps, T as TextStyleProps } from '../viewAnimation-B4BIoOwQ.js';
+export { b as AnalyticsConfig, c as AnalyticsContext, d as AnalyticsProvider, e as Animation, B as BlurAnimationOptions, f as ColorConfig, R as RotateAnimationOptions, g as ScaleAnimationOptions, h as Shadows, i as SlideAnimationOptions, j as Typography, k as ViewAnimationConfig, l as ViewAnimationFillMode, m as ViewAnimationOptions, n as ViewAnimationRange, o as ViewAnimationTimingFunction, p as animateOnView, q as blurInOnView, r as blurOutOnView, s as createViewAnimation, t as defaultColors, u as defaultDarkColors, v as defaultDarkPalette, w as defaultLightColors, x as defaultLightPalette, y as fadeInOnView, z as fadeOutOnView, D as flipXOnView, E as flipYOnView, F as getWindowInitialProps, G as hasColorToken, H as isBrowser, J as isDev, K as isMobile, L as isProd, M as isSSR, N as replaceColorTokens, O as revealOnView, P as rotateInOnView, Q as scaleDownOnView, U as scaleUpOnView, W as slideDownOnView, X as slideLeftOnView, Y as slideRightOnView, Z as slideUpOnView, _ as useAnalytics, $ as viewAnimationPresets } from '../viewAnimation-B4BIoOwQ.js';
+
+interface Colors {
+    main: ColorSingleton;
+    palette: ColorPalette;
+}
+interface Theme {
+    primary?: string;
+    secondary?: string;
+    success?: string;
+    error?: string;
+    warning?: string;
+    disabled?: string;
+    loading?: string;
+    canvas?: string;
+    surface?: string;
+    text?: string;
+    muted?: string;
+    border?: string;
+    onPrimary?: string;
+    info?: string;
+    [extra: string]: string | undefined;
+}
+interface Override {
+    colors?: Colors;
+    theme?: Theme;
+    themeMode?: 'light' | 'dark';
+}
+interface ThemeContextProps {
+    getColor: (name: string, override?: Override) => string;
+    getColorHex: (name: string, override?: Override) => string;
+    getColorRGBA: (name: string, alphaOrOverride?: number | Override, override?: Override) => string;
+    getColorScheme: (name: string, override?: Override) => string | undefined;
+    getContrastColor: (name: string, override?: Override) => 'black' | 'white';
+    theme: Theme;
+    colors: Colors;
+    themeMode: 'light' | 'dark';
+    setThemeMode: (mode: 'light' | 'dark') => void;
+}
+declare const defaultThemeMain: Theme;
+declare const ThemeContext: react__default.Context<ThemeContextProps>;
+declare const useTheme: () => ThemeContextProps;
+declare const deepMerge: (target: any, source: any) => any;
+interface ThemeProviderProps {
+    theme?: Partial<Theme>;
+    dark?: Partial<Colors>;
+    light?: Partial<Colors>;
+    mode?: 'light' | 'dark';
+    children: ReactNode;
+    strict?: boolean;
+    targetWindow?: Window;
+    /**
+     * When `true`, the wrapper renders as `display: contents` (no background,
+     * color, sizing, or transition). Useful when nesting a ThemeProvider inside
+     * an existing themed subtree — the inner provider only contributes its CSS
+     * variables and `data-theme` attribute. Automatically inferred when a parent
+     * ThemeProvider exists in the React tree.
+     */
+    transparentWrapper?: boolean;
+}
+declare const ThemeProvider: ({ theme: themeOverride, mode: initialMode, dark: darkOverride, light: lightOverride, children, strict, targetWindow, transparentWrapper, }: ThemeProviderProps) => react__default.ReactElement;
+
+interface CssProps extends CSSProperties {
+    paddingHorizontal?: number | string;
+    marginHorizontal?: number | string;
+    paddingVertical?: number | string;
+    marginVertical?: number | string;
+    widthHeight?: number | string;
+    animate?: AnimationProps[] | AnimationProps;
+    animateIn?: AnimationProps[] | AnimationProps;
+    animateOut?: AnimationProps[] | AnimationProps;
+    animateOn?: 'View' | 'Mount' | 'Both' | 'Scroll';
+    shadow?: boolean | number | Shadow;
+    blend?: boolean;
+    _hover?: CSSProperties | string;
+    _active?: CSSProperties | string;
+    _focus?: CSSProperties | string;
+    _visited?: CSSProperties | string;
+    _disabled?: CSSProperties | string;
+    _enabled?: CSSProperties | string;
+    _checked?: CSSProperties | string;
+    _unchecked?: CSSProperties | string;
+    _invalid?: CSSProperties | string;
+    _valid?: CSSProperties | string;
+    _required?: CSSProperties | string;
+    _optional?: CSSProperties | string;
+    _selected?: CSSProperties | string;
+    _target?: CSSProperties | string;
+    _firstChild?: CSSProperties | string;
+    _lastChild?: CSSProperties | string;
+    _onlyChild?: CSSProperties | string;
+    _firstOfType?: CSSProperties | string;
+    _lastOfType?: CSSProperties | string;
+    _empty?: CSSProperties | string;
+    _focusVisible?: CSSProperties | string;
+    _focusWithin?: CSSProperties | string;
+    _placeholder?: CSSProperties | string;
+    _groupHover?: CSSProperties | string;
+    _groupFocus?: CSSProperties | string;
+    _groupActive?: CSSProperties | string;
+    _groupDisabled?: CSSProperties | string;
+    _peerHover?: CSSProperties | string;
+    _peerFocus?: CSSProperties | string;
+    _peerActive?: CSSProperties | string;
+    _peerDisabled?: CSSProperties | string;
+    _peerChecked?: CSSProperties | string;
+    _before?: CSSProperties;
+    _after?: CSSProperties;
+    _firstLetter?: CSSProperties;
+    _firstLine?: CSSProperties;
+    _selection?: CSSProperties;
+    _backdrop?: CSSProperties;
+    _marker?: CSSProperties;
+    WebkitUserDrag?: CSSProperties['userSelect'];
+    webkitUserDrag?: CSSProperties['userSelect'];
+}
+interface ElementProps extends CssProps, Omit<ViewStyleProps, keyof HTMLAttributes<HTMLElement> | 'children' | 'style' | 'pointerEvents'>, Omit<HTMLAttributes<HTMLElement>, 'color' | 'style' | 'content' | 'translate'> {
+    on?: Record<string, CssProps>;
+    media?: Record<string, CssProps>;
+    only?: string[];
+    css?: CSSProperties | any;
+    onPress?: any;
+    onClick?: any;
+    className?: string;
+    blend?: boolean;
+    type?: string;
+    as?: keyof JSX.IntrinsicElements;
+    style?: CSSProperties;
+    widthHeight?: number | string;
+    children?: React.ReactNode;
+    before?: React.ReactNode;
+    after?: React.ReactNode;
+    /**
+     * Component-scoped theme override. Remaps `theme-*` tokens used by this
+     * component (and its style props) to different color tokens, without
+     * affecting the global ThemeProvider. Each value is a color token string
+     * (`color-red-500`, `theme-secondary`) or a raw color (`#ff0000`).
+     */
+    theme?: Partial<Theme>;
+    animateOn?: 'View' | 'Mount' | 'Both' | 'Scroll';
+    _hover?: CssProps | string;
+    _active?: CssProps | string;
+    _focus?: CssProps | string;
+    _visited?: CssProps | string;
+    _disabled?: CssProps | string;
+    _enabled?: CssProps | string;
+    _checked?: CssProps | string;
+    _unchecked?: CssProps | string;
+    _invalid?: CssProps | string;
+    _valid?: CssProps | string;
+    _required?: CssProps | string;
+    _optional?: CssProps | string;
+    _selected?: CssProps | string;
+    _target?: CssProps | string;
+    _firstChild?: CssProps | string;
+    _lastChild?: CssProps | string;
+    _onlyChild?: CssProps | string;
+    _firstOfType?: CssProps | string;
+    _lastOfType?: CssProps | string;
+    _empty?: CssProps | string;
+    _focusVisible?: CssProps | string;
+    _focusWithin?: CssProps | string;
+    _placeholder?: CssProps | string;
+    _groupHover?: CssProps | string;
+    _groupFocus?: CssProps | string;
+    _groupActive?: CssProps | string;
+    _groupDisabled?: CssProps | string;
+    _peerHover?: CssProps | string;
+    _peerFocus?: CssProps | string;
+    _peerActive?: CssProps | string;
+    _peerDisabled?: CssProps | string;
+    _peerChecked?: CssProps | string;
+    _before?: CssProps;
+    _after?: CssProps;
+    _firstLetter?: CssProps;
+    _firstLine?: CssProps;
+    _selection?: CssProps;
+    _backdrop?: CssProps;
+    _marker?: CssProps;
+}
+
+declare const Element$1: react__default.MemoExoticComponent<react__default.ForwardRefExoticComponent<ElementProps & react__default.RefAttributes<HTMLElement>>>;
+
+interface ViewProps extends Omit<ViewStyleProps, keyof ElementProps>, ElementProps {
+    onPress?: (..._args: any) => void;
+}
+declare const View: react__default.ForwardRefExoticComponent<react__default.ComponentPropsWithRef<typeof Element$1> & ViewProps & react__default.RefAttributes<HTMLElement>>;
+declare const Horizontal: react__default.ForwardRefExoticComponent<react__default.ComponentPropsWithRef<typeof Element$1> & ViewProps & react__default.RefAttributes<HTMLElement>>;
+declare const Center: react__default.ForwardRefExoticComponent<react__default.ComponentPropsWithRef<typeof Element$1> & ViewProps & react__default.RefAttributes<HTMLElement>>;
+declare const Vertical: react__default.ForwardRefExoticComponent<react__default.ComponentPropsWithRef<typeof Element$1> & ViewProps & react__default.RefAttributes<HTMLElement>>;
+declare const HorizontalResponsive: react__default.ForwardRefExoticComponent<react__default.ComponentPropsWithRef<typeof Element$1> & ViewProps & react__default.RefAttributes<HTMLElement>>;
+declare const VerticalResponsive: react__default.ForwardRefExoticComponent<react__default.ComponentPropsWithRef<typeof Element$1> & ViewProps & react__default.RefAttributes<HTMLElement>>;
+declare const Scroll: react__default.ForwardRefExoticComponent<react__default.ComponentPropsWithRef<typeof Element$1> & ViewProps & react__default.RefAttributes<HTMLElement>>;
+declare const SafeArea: react__default.ForwardRefExoticComponent<react__default.ComponentPropsWithRef<typeof Element$1> & ViewProps & react__default.RefAttributes<HTMLElement>>;
+declare const Div: react__default.ForwardRefExoticComponent<react__default.ComponentPropsWithRef<typeof Element$1> & ViewProps & react__default.RefAttributes<HTMLElement>>;
+declare const Span: react__default.ForwardRefExoticComponent<react__default.ComponentPropsWithRef<typeof Element$1> & ViewProps & react__default.RefAttributes<HTMLElement>>;
+
+interface ImageProps extends Omit<ImageStyleProps, keyof ElementProps>, Omit<Partial<HTMLImageElement>, keyof ElementProps>, ElementProps {
+}
+declare const Image: react__default.ForwardRefExoticComponent<react__default.ComponentPropsWithRef<typeof Element$1> & ImageProps & react__default.RefAttributes<HTMLElement>>;
+declare const ImageBackground: react__default.ForwardRefExoticComponent<react__default.ComponentPropsWithRef<typeof Element$1> & ImageProps & react__default.RefAttributes<HTMLElement>>;
+
+/**
+ * The Text component is a simple component that renders a text string or paragraphs as a DOM element in the UI. It is a <p> tag by default.
+ */
+declare const Text: react__default.ForwardRefExoticComponent<Omit<any, "ref"> & react__default.RefAttributes<HTMLElement>>;
+
+interface TextProps extends Omit<TextStyleProps, keyof ElementProps>, Omit<ElementProps, 'maxLines'> {
+    children?: React.ReactNode;
+    backgroundColor?: string;
+    toUpperCase?: boolean;
+    /**
+     * Background color used to automatically compute a readable text color
+     */
+    bgColor?: string;
+    isItalic?: boolean;
+    isStriked?: boolean;
+    isUnderlined?: boolean;
+    isSub?: boolean;
+    isSup?: boolean;
+    maxLines?: number;
+}
+
+interface CommonProps extends ElementProps, Omit<ViewStyleProps, keyof ElementProps> {
+}
+interface FormProps extends CommonProps, Omit<Partial<HTMLFormElement>, keyof ElementProps>, ElementProps {
+}
+interface ButtonProps extends CommonProps, Omit<Partial<HTMLButtonElement>, keyof CommonProps> {
+    children?: react__default.ReactNode;
+    onClick?: (..._args: any) => void;
+}
+interface InputProps extends ElementProps, CommonProps, Omit<Partial<HTMLInputElement>, keyof ElementProps> {
+    /**
+     * Visible label rendered alongside the input. Form-library wrappers (Switch,
+     * TextField, Checkbox, …) consume this. Not a native HTML attribute on
+     * <input>, but conventionally part of the form-control prop surface.
+     */
+    label?: react__default.ReactNode;
+    /**
+     * Helper text rendered below the input (hint / error / explanation).
+     */
+    helperText?: react__default.ReactNode;
+    /**
+     * Error state — usually a string for the error message, or a boolean toggle.
+     */
+    error?: boolean | string;
+}
+declare const Form: react__default.ForwardRefExoticComponent<react__default.ComponentPropsWithRef<typeof Element$1> & FormProps & react__default.RefAttributes<HTMLElement>>;
+declare const Input: react__default.ForwardRefExoticComponent<react__default.ComponentPropsWithRef<typeof Element$1> & InputProps & react__default.RefAttributes<HTMLElement>>;
+declare const Button: react__default.ForwardRefExoticComponent<react__default.ComponentPropsWithRef<typeof Element$1> & ButtonProps & react__default.RefAttributes<HTMLElement>>;
+
+declare const Skeleton: react__default.MemoExoticComponent<({ duration, timingFunction, iterationCount, ...props }: AnimationProps & any) => react__default.JSX.Element>;
+
+type StyleContext = 'base-shorthand' | 'base-side' | 'base-cross' | 'base' | 'pseudo' | 'media' | 'modifier' | 'override-shorthand' | 'override-side' | 'override-cross' | 'override';
+/**
+ * Utility functions for animation handling
+ */
+declare const AnimationUtils: {
+    parseDuration(duration: string): number;
+    formatDuration(ms: number): string;
+    processAnimations(animations: any[], manager?: UtilityClassManager): {
+        animationRange?: string | undefined;
+        animationTimeline?: string | undefined;
+        animationName: string;
+        animationDuration: string;
+        animationTimingFunction: string;
+        animationDelay: string;
+        animationIterationCount: string;
+        animationDirection: string;
+        animationFillMode: string;
+        animationPlayState: string;
+    };
+};
+declare class UtilityClassManager {
+    private styleSheets;
+    private classCache;
+    private propertyShorthand;
+    private mainDocument;
+    constructor(propertyShorthand: Record<string, string>, maxCacheSize?: number);
+    private initStyleSheets;
+    private getDocumentRules;
+    addDocument(targetDocument: Document): void;
+    private clearStylesFromDocument;
+    private escapeClassName;
+    private serverRules;
+    injectRule(cssRule: string, context?: StyleContext): void;
+    getServerStyles(): string;
+    private getAllRegisteredDocuments;
+    private addToCache;
+    getClassNames(property: string, value: any, context: StyleContext | undefined, modifier: string | undefined, getColor: (color: string) => string, mediaQueries?: string[]): string[];
+    removeDocument(targetDocument: Document): void;
+    clearCache(): void;
+    private clearStyleSheet;
+    regenerateStyles(targetDocument: Document): void;
+    regenerateAllStyles(): void;
+    private injectRuleToDocument;
+    printStyles(targetDocument: Document): void;
+}
+declare const propertyShorthand: Record<string, string>;
+declare const utilityClassManager: UtilityClassManager;
+declare const extractUtilityClasses: (props: ElementProps, getColor: (color: string) => string, mediaQueries: Record<string, string>, devices: Record<string, string[]>, manager?: UtilityClassManager) => string[];
+
+type ResponsiveConfig = Record<string, number>;
+type ScreenOrientation = 'landscape' | 'portrait';
+type DeviceType = 'mobile' | 'tablet' | 'desktop';
+type DeviceConfig = Record<string, string[]>;
+type QueryConfig = Record<string, string>;
+type BreakpointConfig = {
+    breakpoints: ResponsiveConfig;
+    devices: DeviceConfig;
+    mediaQueries: QueryConfig;
+    currentBreakpoint: keyof ResponsiveConfig;
+    currentDevice: DeviceType;
+    orientation: ScreenOrientation;
+};
+type WindowDimensions = {
+    width: number;
+    height: number;
+};
+type ScreenConfig = {
+    breakpoints: ResponsiveConfig;
+    devices: DeviceConfig;
+    mediaQueries: QueryConfig;
+    currentWidth: number;
+    currentHeight: number;
+    currentBreakpoint: keyof ResponsiveConfig;
+    currentDevice: DeviceType;
+    orientation: ScreenOrientation;
+};
+declare const debounce: (func: Function, wait: number) => (...args: any[]) => void;
+declare const BreakpointContext: react__default.Context<BreakpointConfig>;
+declare const WindowDimensionsContext: react__default.Context<WindowDimensions>;
+/**
+ * Hook to access breakpoint information only.
+ * Components using this hook will NOT re-render on every resize,
+ * only when the breakpoint actually changes.
+ */
+declare const useBreakpointContext: () => BreakpointConfig;
+/**
+ * Hook to access window dimensions.
+ * Components using this hook WILL re-render on every resize.
+ * Use sparingly - prefer useBreakpointContext when possible.
+ */
+declare const useWindowDimensionsContext: () => WindowDimensions;
+declare const ResponsiveContext: react__default.Context<ScreenConfig>;
+/**
+ * Legacy hook for backward compatibility.
+ * Prefer useBreakpointContext for better performance.
+ * @deprecated Use useBreakpointContext instead for better performance
+ */
+declare const useResponsiveContext: () => ScreenConfig;
+interface ResponsiveProviderProps {
+    breakpoints?: ResponsiveConfig;
+    devices?: DeviceConfig;
+    children: ReactNode;
+    /** Optional target window to track (for iframe support). Defaults to global window. */
+    targetWindow?: Window;
+}
+declare const ResponsiveProvider: ({ breakpoints, devices, children, targetWindow, }: ResponsiveProviderProps) => react__default.JSX.Element;
+
+/**
+ * Context to hold the style manager instance.
+ */
+interface StyleRegistryContextValue {
+    manager: UtilityClassManager;
+}
+/**
+ * Hook to access the current style manager.
+ */
+declare const useStyleRegistry: () => StyleRegistryContextValue;
+interface StyleRegistryProps {
+    registry?: UtilityClassManager;
+    children: react__default.ReactNode;
+}
+/**
+ * Provider to wrap the app and manage styles.
+ * When doing SSR, pass a new registry created via createStyleRegistry().
+ */
+declare const StyleRegistry: ({ registry, children }: StyleRegistryProps) => react__default.JSX.Element;
+/**
+ * Helper to create a new style registry (UtilityClassManager) instance.
+ * Useful for SSR to create a fresh manager per request.
+ */
+declare const createStyleRegistry: () => UtilityClassManager;
+/**
+ * React hook to get the CSS string from the registry.
+ * Note: This only works if you're using a fresh registry that collected styles.
+ */
+declare const useServerInsertedHTML: (registry: UtilityClassManager) => () => react__default.JSX.Element;
+
+declare const WindowSizeContext: react__default.Context<{
+    width: number;
+    height: number;
+}>;
+interface WindowSizeProviderProps {
+    children: ReactNode;
+    /** Optional target window to track (for iframe support). Defaults to global window. */
+    targetWindow?: Window;
+}
+declare const WindowSizeProvider: ({ children, targetWindow, }: WindowSizeProviderProps) => react__default.JSX.Element;
+
+declare function useActive<T extends HTMLElement = HTMLElement>(): [
+    React.RefObject<T>,
+    boolean
+];
+
+interface UseClickOutsideOptions {
+    /** Optional target window to use (for iframe support). Defaults to global window. */
+    targetWindow?: Window;
+}
+declare function useClickOutside<T extends HTMLElement = HTMLElement>(options?: UseClickOutsideOptions): [React.RefObject<T>, boolean];
+
+interface RelativePlacement {
+    vertical: 'top' | 'bottom';
+    horizontal: 'left' | 'right';
+}
+interface ElementPosition {
+    position: RelativePlacement;
+    space: RelativePlacement;
+}
+interface UseElementPositionOptions {
+    /** Whether to track changes automatically. Default: true */
+    trackChanges?: boolean;
+    /** Throttle delay in milliseconds for updates. Default: 100 */
+    throttleMs?: number;
+    /** Whether to track on hover events. Default: true */
+    trackOnHover?: boolean;
+    /** Whether to track on scroll events. Default: false */
+    trackOnScroll?: boolean;
+    /** Whether to track on resize events. Default: false */
+    trackOnResize?: boolean;
+    /** Optional target window to use (for iframe support). Defaults to global window. */
+    targetWindow?: Window;
+}
+interface UseElementPositionReturn {
+    /** React ref to attach to the target HTML element. */
+    ref: React.RefObject<HTMLElement>;
+    /**
+     * The calculated viewport relation data, or null if not yet calculated
+     * or element not found.
+     */
+    relation: ElementPosition | null;
+    /** Function to manually trigger an immediate recalculation. */
+    updateRelation: () => void;
+}
+/**
+ * A React hook to determine an element's relative position within the viewport
+ * and where the most available space is around it within the viewport.
+ */
+declare function useElementPosition<T extends HTMLElement = HTMLElement>(options?: UseElementPositionOptions): UseElementPositionReturn;
+
+declare function useFocus<T extends HTMLElement = HTMLElement>(): [
+    React.RefObject<T>,
+    boolean
+];
+
+declare function useHover<T extends HTMLElement = HTMLElement>(): [
+    React.RefObject<T>,
+    boolean
+];
+
+declare function useKeyPress(targetKey: string): boolean;
+
+declare const useMount: (callback: () => void) => void;
+
+interface UseOnScreenOptions extends IntersectionObserverInit {
+    /** Optional target window to use (for iframe support). Defaults to global window. */
+    targetWindow?: Window;
+}
+declare function useOnScreen<T extends HTMLElement = HTMLElement>(options?: UseOnScreenOptions): [React.RefObject<T>, boolean];
+
+/**
+ * Optimized hook for components that only need breakpoint information.
+ * This hook will NOT cause re-renders on every window resize,
+ * only when the breakpoint actually changes.
+ *
+ * Use this hook instead of useResponsive for better performance
+ * when you only need to check breakpoints or device type.
+ *
+ * @example
+ * const { screen, on, is, orientation } = useBreakpoint();
+ * if (on('mobile')) { ... }
+ * if (is('xs')) { ... }
+ */
+declare const useBreakpoint: () => {
+    screen: string;
+    orientation: ScreenOrientation;
+    on: (s: string) => boolean;
+    is: (s: string) => boolean;
+    breakpoints: ResponsiveConfig;
+    devices: DeviceConfig;
+    mediaQueries: QueryConfig;
+    currentBreakpoint: keyof ResponsiveConfig;
+    currentDevice: DeviceType;
+};
+/**
+ * Hook for components that need exact window dimensions.
+ * This hook WILL cause re-renders on every window resize.
+ * Use sparingly - prefer useBreakpoint when possible.
+ *
+ * @example
+ * const { width, height } = useWindowDimensions();
+ */
+declare const useWindowDimensions: () => WindowDimensions;
+/**
+ * Combined hook that provides both breakpoint info and window dimensions.
+ * This hook WILL cause re-renders on every window resize.
+ *
+ * For better performance, use:
+ * - useBreakpoint() when you only need breakpoint/device info
+ * - useWindowDimensions() when you only need exact dimensions
+ *
+ * @example
+ * const { screen, on, currentWidth, currentHeight } = useResponsive();
+ */
+declare const useResponsive: () => {
+    screen: string;
+    orientation: ScreenOrientation;
+    on: (s: string) => boolean;
+    is: (s: string) => boolean;
+    breakpoints: ResponsiveConfig;
+    devices: DeviceConfig;
+    mediaQueries: QueryConfig;
+    currentWidth: number;
+    currentHeight: number;
+    currentBreakpoint: keyof ResponsiveConfig;
+    currentDevice: DeviceType;
+};
+
+interface ScrollPosition {
+    x: number;
+    y: number;
+    xProgress: number;
+    yProgress: number;
+    /**
+     * Position of the tracked element relative to the viewport top (if container is provided).
+     * Equivalent to getBoundingClientRect().top
+     */
+    elementY?: number;
+    /**
+     * Progress of the element scrolling through the viewport (for sticky/reveal effects).
+     * Calculated as: -elementY / (elementHeight - viewportHeight)
+     * Varies from 0 (element hits top) to 1 (element finishes scrolling).
+     */
+    elementProgress?: number;
+}
+interface UseScrollOptions {
+    container?: RefObject<HTMLElement>;
+    offset?: [number, number];
+    throttleMs?: number;
+    disabled?: boolean;
+}
+interface UseScrollAnimationOptions {
+    threshold?: number | number[];
+    rootMargin?: string;
+    root?: Element | null;
+    onIntersectionChange?: (isIntersecting: boolean, ratio: number) => void;
+    /** Target window for iframe support - automatically sets correct root */
+    targetWindow?: Window | null;
+}
+interface UseInfiniteScrollOptions {
+    threshold?: number;
+    isLoading?: boolean;
+    root?: Element | null;
+    rootMargin?: string;
+    debounceMs?: number;
+}
+declare const useScroll: ({ container, offset, throttleMs, disabled, }?: UseScrollOptions) => ScrollPosition;
+declare const useScrollAnimation: (ref: RefObject<HTMLElement>, options?: UseScrollAnimationOptions) => {
+    isInView: boolean;
+    progress: number;
+};
+declare const useSmoothScroll: (targetWindow?: Window) => (element: HTMLElement | null, offset?: any) => void;
+declare const useInfiniteScroll: (callback: () => void, options?: UseInfiniteScrollOptions) => {
+    sentinelRef: react.Dispatch<react.SetStateAction<HTMLDivElement | null>>;
+};
+declare const useScrollDirection: (threshold?: number, targetWindow?: Window) => "up" | "down";
+
+declare const useWindowSize: () => {
+    width: number;
+    height: number;
+};
+
+interface InViewOptions extends IntersectionObserverInit {
+    triggerOnce?: boolean;
+    /** Optional target window to use (for iframe support). Defaults to global window. */
+    targetWindow?: Window;
+}
+declare function useInView(options?: InViewOptions): {
+    ref: react.RefObject<HTMLElement>;
+    inView: boolean;
+};
+
+/**
+ * Hook to register an iframe's document with the style manager.
+ * This ensures that all CSS utility classes are automatically injected into the iframe.
+ *
+ * @param iframeRef - Reference to the iframe element
+ *
+ * @example
+ * ```tsx
+ * const iframeRef = useRef<HTMLIFrameElement>(null);
+ * useIframeStyles(iframeRef);
+ *
+ * return <iframe ref={iframeRef} src="/content" />;
+ * ```
+ */
+declare function useIframeStyles(iframeRef: React.RefObject<HTMLIFrameElement>): void;
+/**
+ * Hook to get an iframe's window and document, and automatically register styles.
+ * This is a convenience hook that combines iframe access with style registration.
+ *
+ * @param iframeRef - Reference to the iframe element
+ * @returns Object containing iframeWindow, iframeDocument, and isLoaded flag
+ *
+ * @example
+ * ```tsx
+ * const iframeRef = useRef<HTMLIFrameElement>(null);
+ * const { iframeWindow, iframeDocument, isLoaded } = useIframe(iframeRef);
+ *
+ * return (
+ *   <>
+ *     <iframe ref={iframeRef} src="/content" />
+ *     {isLoaded && <div>Iframe loaded!</div>}
+ *   </>
+ * );
+ * ```
+ */
+declare function useIframe(iframeRef: React.RefObject<HTMLIFrameElement>): {
+    iframeWindow: Window | null;
+    iframeDocument: Document | null;
+    isLoaded: boolean;
+};
+
+export { AnimationUtils, type BreakpointConfig, BreakpointContext, Button, type ButtonProps, Center, ColorPalette, ColorSingleton, type Colors, type CssProps, type DeviceConfig, type DeviceType, Div, Element$1 as Element, type ElementPosition, type ElementProps, Form, type FormProps, Horizontal, HorizontalResponsive, Image, ImageBackground, type ImageProps, Input, type InputProps, type QueryConfig, type RelativePlacement, type ResponsiveConfig, ResponsiveContext, ResponsiveProvider, type ResponsiveProviderProps, SafeArea, type ScreenConfig, type ScreenOrientation, Scroll, type ScrollPosition, Shadow, Skeleton, Span, StyleRegistry, Text, type TextProps, type Theme, ThemeContext, ThemeProvider, type UseClickOutsideOptions, type UseElementPositionOptions, type UseElementPositionReturn, type UseInfiniteScrollOptions, type UseOnScreenOptions, type UseScrollAnimationOptions, type UseScrollOptions, UtilityClassManager, Vertical, VerticalResponsive, View, type ViewProps, type WindowDimensions, WindowDimensionsContext, WindowSizeContext, WindowSizeProvider, type WindowSizeProviderProps, createStyleRegistry, debounce, deepMerge, defaultThemeMain, extractUtilityClasses, propertyShorthand, useActive, useBreakpoint, useBreakpointContext, useClickOutside, useElementPosition, useFocus, useHover, useIframe, useIframeStyles, useInView, useInfiniteScroll, useKeyPress, useMount, useOnScreen, useResponsive, useResponsiveContext, useScroll, useScrollAnimation, useScrollDirection, useServerInsertedHTML, useSmoothScroll, useStyleRegistry, useTheme, useWindowDimensions, useWindowDimensionsContext, useWindowSize, utilityClassManager };