react-glass-ui/dist/index.d.ts

A customizable React component library for building liquid-glass interfaces with dynamic, realistic fluid distortion. Powered by advanced SVG filters, the library simulates true refraction, blur, and chromatic distortion to create authentic glass-like sur

import React$1 from 'react';

interface CommonGlassProps {
    /** A unique identifier for the component (used for accessibility or testing). */
    id?: string;
    /** Avoids creating SVG filter layers (improves performance in heavy UIs). */
    avoidSvgCreation?: boolean;
    /** Optional React key for list rendering. */
    key?: any;
    /** Name attribute for inputs, useful in forms. */
    name?: string;
    /** Width of the component in pixels. */
    width?: number;
    /** Height of the component in pixels. */
    height?: number;
    /** Additional class names applied to the root element. */
    className?: string;
    /** Additional class names for the internal content container. */
    contentClassName?: string;
    /** If true, centers content horizontally using flex layout. */
    contentCenter?: boolean;
    /** If true, centers content vertically using flex layout. */
    itemsCenter?: boolean;
    /** Background blur intensity in pixels (e.g. 2 = blur(2px)). */
    blur?: number;
    /** Strength of distortion effect via displacement map (0–100). */
    distortion?: number;
    /** Chromatic aberration intensity (color fringing effect). */
    chromaticAberration?: number;
    /** Border radius of the component (in pixels). */
    borderRadius?: number;
    /** Opacity of the border (0 to 1). */
    borderOpacity?: number;
    /** Border thickness in pixels. */
    borderSize?: number;
    /** Border color of the component. */
    borderColor?: string;
    /** Text color inside the component. */
    color?: string;
    /** Background color of the glass layer. */
    backgroundColor?: string;
    /** Opacity of the background color overlay (0 to 1). */
    backgroundOpacity?: number;
    /**
     * Controls how elastic or responsive the glass effect feels.
     * Required for hover scale and distortion responsiveness.
     */
    flexibility?: number;
    /** Multiplier for scaling when hovered (requires flexibility > 0). */
    onHoverScale?: number;
    /** Saturation level applied to content (e.g., 100 = normal, 120 = more vivid). */
    saturation?: number;
    /** Brightness multiplier for the component (e.g., 100 = normal, 80 = dimmer). */
    brightness?: number;
    /** Blur radius for the inner light/glow effect. */
    innerLightBlur?: number;
    /** Spread distance (in px) for the inner light effect. */
    innerLightSpread?: number;
    /** Color of the inner glow/light. */
    innerLightColor?: string;
    /** Opacity of the inner glow (0 to 1). */
    innerLightOpacity?: number;
    /** Blur radius for the outer light/glow effect. */
    outerLightBlur?: number;
    /** Spread distance (in px) for the outer glow effect. */
    outerLightSpread?: number;
    /** Color of the outer glow/light. */
    outerLightColor?: string;
    /** Opacity of the outer glow (0 to 1). */
    outerLightOpacity?: number;
    /** Padding inside the component (uses CSS shorthand, e.g. "10px 20px"). */
    padding?: string;
    /** Z-index value to control stacking order. */
    zIndex?: number;
    /** Optional click handler for the component. */
    onClick?: () => void;
}
type GlassInputProps = CommonGlassProps & {
    value?: any;
    /** Input type, e.g., text, number, file, range, etc. */
    type?: string;
    /** Maximum number of characters allowed. */
    maxLength?: number;
    /** Minimum number of characters required. */
    minLength?: number;
    /** Placeholder text for the input. */
    placeholder?: string;
    /** Optional label displayed with the input. */
    label?: string;
    /** Text color for label. */
    labelColor?: string;
    /** Allows multiple file selections (if type is file). */
    multiple?: boolean;
    /** Marks the field as required. */
    required?: boolean;
    /** Automatically focuses the input when rendered. */
    autofocus?: boolean;
    /** Optional change event handler. */
    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
    /** Minimum value for range/number inputs. */
    min?: number;
    /** Maximum value for range/number inputs. */
    max?: number;
    /** Step increment for range/number inputs. */
    step?: number;
    /** Background blur intensity in pixels (e.g. 2 = blur(2px)). */
    inputRangeBlur?: number;
    /** Strength of distortion effect via displacement map (0–100). */
    inputRangeDistortion?: number;
};
type GlassCardProps = CommonGlassProps & {
    /** Content inside the card (can be text, elements, etc.). */
    children?: React.ReactNode;
};
type GlassButtonProps = CommonGlassProps & {
    /** Button content, usually text or icons. */
    children?: React.ReactNode;
};

declare const GlassCard: React$1.FunctionComponent<GlassCardProps>;

declare const GlassInput: React$1.FunctionComponent<GlassInputProps>;

declare const GlassButton: React$1.FunctionComponent<GlassButtonProps>;

export { GlassButton, GlassCard, GlassInput };