aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
98 lines • 2.54 kB
TypeScript
import React from "react";
export interface GlassScrollAreaProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onScroll"> {
/**
* Scroll area content
*/
children: React.ReactNode;
/**
* Maximum height
*/
maxHeight?: string | number;
/**
* Maximum width
*/
maxWidth?: string | number;
/**
* Scroll direction
*/
direction?: "vertical" | "horizontal" | "both";
/**
* Show scrollbars
*/
showScrollbars?: "always" | "hover" | "auto" | "never";
/**
* Scrollbar size
*/
scrollbarSize?: "sm" | "md" | "lg";
/**
* Scrollbar position
*/
scrollbarPosition?: "inside" | "outside";
/**
* Custom scrollbar styling
*/
scrollbarClassName?: string;
/**
* Callback when scroll position changes
*/
onScroll?: (scrollTop: number, scrollLeft: number) => void;
/**
* Enable smooth scrolling
*/
smoothScrolling?: boolean;
/**
* Whether to respect user's motion preferences
*/
respectMotionPreference?: boolean;
/**
* Accessibility label for screen readers
*/
"aria-label"?: string;
/**
* Accessibility role for semantic meaning
*/
role?: string;
}
export interface GlassScrollBarProps extends React.HTMLAttributes<HTMLDivElement> {
/**
* Scrollbar orientation
*/
orientation: "vertical" | "horizontal";
/**
* Scrollbar size
*/
size?: "sm" | "md" | "lg";
/**
* Show scrollbar thumb
*/
showThumb?: boolean;
/**
* Whether to respect user's motion preferences
*/
respectMotionPreference?: boolean;
}
/**
* GlassScrollArea component
* A glassmorphism scrollable area with custom scrollbars
*/
export declare const GlassScrollArea: React.ForwardRefExoticComponent<GlassScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
/**
* GlassScrollBar component
* Custom scrollbar with glassmorphism styling
*/
export declare const GlassScrollBar: React.ForwardRefExoticComponent<GlassScrollBarProps & React.RefAttributes<HTMLDivElement>>;
/**
* Hook for managing scroll area state
*/
export declare const useScrollArea: () => {
scrollTop: number;
scrollLeft: number;
isAtTop: boolean;
isAtBottom: boolean;
isAtLeft: boolean;
isAtRight: boolean;
handleScroll: (newScrollTop: number, newScrollLeft: number) => void;
scrollToTop: () => void;
scrollToBottom: () => void;
};
//# sourceMappingURL=GlassScrollArea.d.ts.map