aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
166 lines • 6.06 kB
TypeScript
import React from "react";
export declare const SLIDER_PRESETS: {
readonly BEFORE_ONLY: 0;
readonly QUARTER: 25;
readonly HALF: 50;
readonly THREE_QUARTER: 75;
readonly AFTER_ONLY: 100;
};
type PresetPosition = (typeof SLIDER_PRESETS)[keyof typeof SLIDER_PRESETS];
export interface SliderMetric {
label: string;
beforeValue: string | number;
afterValue: string | number;
unit?: string;
format?: "number" | "percentage" | "currency" | "time";
highlight?: boolean;
}
export interface ComparisonLabels {
before: string;
after: string;
beforeDescription?: string;
afterDescription?: string;
}
interface GlassWipeSliderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, keyof {
beforeContent: React.ReactNode;
afterContent: React.ReactNode;
initialPosition?: number;
orientation?: "horizontal" | "vertical";
enableSnapping?: boolean;
snapThreshold?: number;
enableMomentum?: boolean;
momentumMultiplier?: number;
debounceMs?: number;
handleSize?: "sm" | "md" | "lg";
showLabels?: boolean;
showProgress?: boolean;
showMetrics?: boolean;
labels?: ComparisonLabels;
metrics?: SliderMetric[];
trackStyle?: "default" | "minimal" | "bold";
gradientOverlay?: boolean;
height?: string | number;
minHeight?: string | number;
onPositionChange?: (position: number) => void;
onSnapToPreset?: (preset: PresetPosition) => void;
onDragStart?: () => void;
onDragEnd?: () => void;
}> {
beforeContent: React.ReactNode;
afterContent: React.ReactNode;
initialPosition?: number;
orientation?: "horizontal" | "vertical";
enableSnapping?: boolean;
snapThreshold?: number;
enableMomentum?: boolean;
momentumMultiplier?: number;
debounceMs?: number;
handleSize?: "sm" | "md" | "lg";
showLabels?: boolean;
showProgress?: boolean;
showMetrics?: boolean;
labels?: ComparisonLabels;
metrics?: SliderMetric[];
trackStyle?: "default" | "minimal" | "bold";
gradientOverlay?: boolean;
height?: string | number;
minHeight?: string | number;
onPositionChange?: (position: number) => void;
onSnapToPreset?: (preset: PresetPosition) => void;
onDragStart?: () => void;
onDragEnd?: () => void;
}
export declare const GlassWipeSlider: React.MemoExoticComponent<({ beforeContent, afterContent, className, initialPosition, orientation, enableSnapping, snapThreshold, enableMomentum, momentumMultiplier, debounceMs, handleSize, showLabels, showProgress, showMetrics, labels, metrics, trackStyle, gradientOverlay, height, minHeight, onPositionChange, onSnapToPreset, onDragStart, onDragEnd, ...props }: GlassWipeSliderProps) => import("react/jsx-runtime").JSX.Element>;
export declare function ComparisonImage({ src, alt, className, loading, }: {
src: string;
alt: string;
className?: string;
loading?: "lazy" | "eager";
}): import("react/jsx-runtime").JSX.Element;
export declare function ComparisonContent({ children, className, background, }: {
children: React.ReactNode;
className?: string;
background?: "gradient" | "solid" | "glass" | "transparent";
}): import("react/jsx-runtime").JSX.Element;
export declare function FeatureComparison({ beforeFeatures, afterFeatures, title, className, }: {
beforeFeatures: Array<{
name: string;
available: boolean;
highlight?: boolean;
}>;
afterFeatures: Array<{
name: string;
available: boolean;
highlight?: boolean;
}>;
title?: string;
className?: string;
}): import("react/jsx-runtime").JSX.Element;
export declare function MetricsComparison({ metrics, title, className, }: {
metrics: SliderMetric[];
title?: string;
className?: string;
}): import("react/jsx-runtime").JSX.Element;
export declare const AURAONE_COMPARISON_EXAMPLES: {
readonly SCALE_AI: {
readonly labels: {
readonly before: "Scale AI";
readonly after: "AuraOne";
readonly beforeDescription: "Traditional approach";
readonly afterDescription: "Next-gen platform";
};
readonly metrics: readonly [{
readonly label: "Model Training Speed";
readonly beforeValue: "2-4";
readonly afterValue: "< 1";
readonly unit: " weeks";
readonly highlight: true;
}, {
readonly label: "Accuracy Improvement";
readonly beforeValue: "85";
readonly afterValue: "97";
readonly unit: "%";
readonly highlight: true;
}, {
readonly label: "Infrastructure Cost";
readonly beforeValue: "$10K";
readonly afterValue: "$2K";
readonly unit: "/month";
readonly highlight: true;
}, {
readonly label: "Setup Complexity";
readonly beforeValue: "High";
readonly afterValue: "Low";
readonly unit: "";
}];
};
readonly OPENAI_GYM: {
readonly labels: {
readonly before: "OpenAI Gym";
readonly after: "AuraOne";
readonly beforeDescription: "Research-focused";
readonly afterDescription: "Production-ready";
};
readonly metrics: readonly [{
readonly label: "Environment Setup";
readonly beforeValue: "Hours";
readonly afterValue: "Minutes";
readonly unit: "";
readonly highlight: true;
}, {
readonly label: "Scalability";
readonly beforeValue: "Limited";
readonly afterValue: "Unlimited";
readonly unit: "";
readonly highlight: true;
}, {
readonly label: "Production Features";
readonly beforeValue: "Basic";
readonly afterValue: "Enterprise";
readonly unit: "";
readonly highlight: true;
}];
};
};
export {};
//# sourceMappingURL=GlassWipeSlider.d.ts.map