aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
311 lines (308 loc) • 9.46 kB
JavaScript
import { jsxs, jsx } from 'react/jsx-runtime';
import { cn } from '../../../lib/utilsComprehensive.js';
import styles from './TooltipStyles.module.css.js';
const getSizeMultiplier = size => {
switch (size) {
case 'small':
return 0.8;
case 'large':
return 1.2;
default:
return 1;
}
};
const getThemeBackground = theme => {
switch (theme) {
case 'glass':
return 'color-mix(in srgb, var(--aura-color-glass-overlay) 92%, rgba(6, 12, 24, 0.82))';
case 'dark':
return '#2a2a2a';
default:
return 'var(--aura-color-global-surface)';
}
};
const getThemeBorder = theme => theme === 'glass' ? '1px solid color-mix(in srgb, var(--aura-color-global-border-soft) 70%, transparent)' : '1px solid color-mix(in srgb, var(--aura-color-global-border-strong) 65%, transparent)';
const getThemeShadow = theme => theme === 'glass' ? '0 20px 48px rgba(15, 23, 42, 0.32)' : '0 12px 32px rgba(15, 23, 42, 0.22)';
const GlassTooltipContainer = ({
$theme = 'glass',
$size = 'medium',
$position,
$animated = true,
className,
style,
children,
...rest
}) => {
const multiplier = getSizeMultiplier($size);
const transform = $position ? `translate(${$position.x}px, ${$position.y}px)` : 'translate(-50%, -100%)';
return jsxs("div", {
className: cn(styles.tooltip, className),
style: {
fontSize: `${12 * multiplier}px`,
padding: `${8 * multiplier}px ${12 * multiplier}px`,
borderRadius: `${8 * multiplier}px`,
minWidth: `${120 * multiplier}px`,
maxWidth: `${280 * multiplier}px`,
background: getThemeBackground($theme),
border: getThemeBorder($theme),
boxShadow: getThemeShadow($theme),
transform,
transition: $animated ? undefined : 'none',
...style
},
...rest,
children: [children, jsx("span", {
className: styles.tooltipArrow,
style: {
borderTopColor: getThemeBackground($theme)
}
})]
});
};
const TooltipHeader = ({
$theme = 'glass',
$size = 'medium',
className,
style,
...props
}) => {
const multiplier = getSizeMultiplier($size);
return jsx("div", {
className: cn(styles.tooltipHeader, className),
style: {
fontSize: `${14 * multiplier}px`,
color: $theme === 'light' ? '#1a1a1a' : 'var(--aura-color-global-text-inverse)',
...style
},
...props
});
};
const TooltipBody = ({
$size = 'medium',
className,
style,
...props
}) => {
const multiplier = getSizeMultiplier($size);
return jsx("div", {
className: cn(styles.tooltipBody, className),
style: {
gap: `${4 * multiplier}px`,
...style
},
...props
});
};
const TooltipItem = ({
className,
...props
}) => jsx("div", {
className: cn(styles.tooltipItem, className),
...props
});
const TooltipLabel = ({
$theme = 'glass',
$size = 'medium',
className,
style,
...props
}) => {
const multiplier = getSizeMultiplier($size);
return jsx("span", {
className: cn(styles.tooltipLabel, className),
style: {
fontSize: `${11 * multiplier}px`,
color: $theme === 'light' ? '#666666' : '#cccccc',
...style
},
...props
});
};
const TooltipValue = ({
$theme = 'glass',
$size = 'medium',
$color,
className,
style,
...props
}) => {
const multiplier = getSizeMultiplier($size);
return jsx("span", {
className: cn(styles.tooltipValue, className),
style: {
fontSize: `${13 * multiplier}px`,
color: $color || ($theme === 'light' ? '#1a1a1a' : 'var(--aura-color-global-text-inverse)'),
...style
},
...props
});
};
const TooltipSeparator = ({
$theme = 'glass',
$size = 'medium',
className,
style,
...props
}) => {
const multiplier = getSizeMultiplier($size);
const background = $theme === 'glass' ? 'color-mix(in srgb, var(--aura-color-global-border-soft) 65%, transparent)' : $theme === 'dark' ? '#555555' : '#e0e0e0';
return jsx("div", {
className: cn(styles.tooltipSeparator, className),
style: {
background,
margin: `${6 * multiplier}px 0`,
...style
},
...props
});
};
const TooltipFooter = ({
$theme = 'glass',
$size = 'medium',
className,
style,
...props
}) => {
const multiplier = getSizeMultiplier($size);
return jsx("div", {
className: cn(styles.tooltipFooter, className),
style: {
fontSize: `${10 * multiplier}px`,
color: $theme === 'light' ? '#666666' : '#cccccc',
...style
},
...props
});
};
const createTooltipStyles = (theme = 'glass', size = 'medium') => {
const sizeMultipliers = {
small: 0.8,
medium: 1,
large: 1.2
};
const multiplier = sizeMultipliers[size];
const baseStyles = {
container: {
position: 'absolute',
zIndex: 1000,
pointerEvents: 'none',
fontFamily: 'system-ui, -apple-system, sans-serif',
fontSize: `${12 * multiplier}px`,
borderRadius: `${8 * multiplier}px`,
boxShadow: theme === 'glass' ? '0 8px 32px rgba(var(--glass-color-black) / var(--glass-opacity-30)), 0 0 0 1px rgba(var(--glass-color-white) / var(--glass-opacity-20))' : '0 4px 12px rgba(var(--glass-color-black) / var(--glass-opacity-15))',
// Use createGlassStyle() instead,
background: theme === 'glass' ? 'rgba(0, 0, 0, 0.85)' : theme === 'dark' ? '#2a2a2a' : 'var(--glass-white)',
border: theme === 'glass' ? '1px solid rgba(var(--glass-color-white) / var(--glass-opacity-20))' : '1px solid #e0e0e0',
color: theme === 'dark' ? 'var(--glass-white)' : '#1a1a1a',
padding: `${8 * multiplier}px ${12 * multiplier}px`,
minWidth: `${120 * multiplier}px`,
maxWidth: `${280 * multiplier}px`,
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
transform: 'translate(-50%, -100%)',
marginTop: `-${8 * multiplier}px`
},
header: {
fontSize: `${14 * multiplier}px`,
fontWeight: 600,
marginBottom: `${4 * multiplier}px`,
color: theme === 'glass' ? 'var(--glass-white)' : theme === 'dark' ? 'var(--glass-white)' : '#1a1a1a',
borderBottom: theme === 'glass' ? '1px solid rgba(var(--glass-color-white) / var(--glass-opacity-20))' : '1px solid #e0e0e0',
paddingBottom: `${4 * multiplier}px`
},
body: {
display: 'flex',
flexDirection: 'column',
gap: `${4 * multiplier}px`
},
footer: {
marginTop: `${8 * multiplier}px`,
paddingTop: `${4 * multiplier}px`,
borderTop: theme === 'glass' ? '1px solid rgba(var(--glass-color-white) / var(--glass-opacity-20))' : '1px solid #e0e0e0',
fontSize: `${10 * multiplier}px`,
color: theme === 'dark' ? '#cccccc' : '#666666',
textAlign: 'center'
},
label: {
fontSize: `${11 * multiplier}px`,
color: theme === 'dark' ? '#cccccc' : '#666666',
marginBottom: `${2 * multiplier}px`,
fontWeight: 500
},
value: {
fontSize: `${13 * multiplier}px`,
fontWeight: 600,
color: theme === 'glass' ? 'var(--glass-white)' : theme === 'dark' ? 'var(--glass-white)' : '#1a1a1a'
},
separator: {
height: '1px',
background: theme === 'glass' ? 'rgba(var(--glass-color-white) / var(--glass-opacity-20))' : theme === 'dark' ? '#555555' : '#e0e0e0',
margin: `${6 * multiplier}px 0`
},
arrow: {
position: 'absolute',
width: 0,
height: 0,
borderLeft: `${6 * multiplier}px solid transparent`,
borderRight: `${6 * multiplier}px solid transparent`,
borderTop: `${6 * multiplier}px solid`,
borderTopColor: theme === 'glass' ? 'rgba(0, 0, 0, 0.85)' : theme === 'dark' ? '#2a2a2a' : 'var(--glass-white)',
bottom: `-${6 * multiplier}px`,
left: '50%',
transform: 'translateX(-50%)'
}
};
return baseStyles;
};
const calculateTooltipPosition = (mouseX, mouseY, tooltipWidth, tooltipHeight, containerRect, offset = 10) => {
const centerX = mouseX;
const centerY = mouseY;
let x = centerX;
let y = centerY - tooltipHeight - offset;
let placement = 'top';
// Check if tooltip fits above
if (y < containerRect.top) {
y = centerY + offset;
placement = 'bottom';
}
// Check horizontal bounds
if (x - tooltipWidth / 2 < containerRect.left) {
x = containerRect.left + tooltipWidth / 2;
} else if (x + tooltipWidth / 2 > containerRect.right) {
x = containerRect.right - tooltipWidth / 2;
}
return {
x,
y,
placement
};
};
const formatTooltipValue = (value, format = 'number', options) => {
if (typeof value === 'string') return value;
switch (format) {
case 'currency':
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
...options
}).format(value);
case 'percentage':
return new Intl.NumberFormat('en-US', {
style: 'percent',
minimumFractionDigits: 1,
maximumFractionDigits: 2,
...options
}).format(value / 100);
case 'number':
return new Intl.NumberFormat('en-US', {
minimumFractionDigits: 0,
maximumFractionDigits: 2,
...options
}).format(value);
default:
return String(value);
}
};
export { GlassTooltipContainer, TooltipBody, TooltipFooter, TooltipHeader, TooltipItem, TooltipLabel, TooltipSeparator, TooltipValue, calculateTooltipPosition, createTooltipStyles, formatTooltipValue };
//# sourceMappingURL=TooltipStyles.js.map