aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
226 lines (223 loc) • 6.72 kB
JavaScript
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
/**
* AuraGlass Utility Functions
* Production-ready utility functions for the AuraGlass design system
*/
// Class name utility function
function cn(...inputs) {
return twMerge(clsx(inputs));
}
// Color utilities
function hexToRgba(hex, alpha = 1) {
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}
function rgbaToHex(rgba) {
const match = rgba.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
if (!match) return rgba;
const r = parseInt(match[1]);
const g = parseInt(match[2]);
const b = parseInt(match[3]);
return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
}
function adjustOpacity(color, opacity) {
if (color.startsWith('#')) {
return hexToRgba(color, opacity);
}
if (color.startsWith('rgb')) {
const match = color.match(/rgba?\(([^)]+)\)/);
if (match) {
const values = match[1].split(',').map(v => v.trim());
return `rgba(${values[0]}, ${values[1]}, ${values[2]}, ${opacity})`;
}
}
return color;
}
// Number utilities
function clamp(value, min, max) {
return Math.min(Math.max(value, min), max);
}
function lerp(start, end, progress) {
return start + (end - start) * progress;
}
function roundToDecimal(value, decimals) {
return Math.round(value * Math.pow(10, decimals)) / Math.pow(10, decimals);
}
// String utilities
function capitalize(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
function kebabCase(str) {
return str.replace(/([a-z])([A-Z])/g, '$1-$2').replace(/[\s_]+/g, '-').toLowerCase();
}
function camelCase(str) {
return str.replace(/[-_\s]+(.)?/g, (_, char) => char ? char.toUpperCase() : '').replace(/^(.)/, char => char.toLowerCase());
}
// Object utilities
function deepMerge(target, ...sources) {
if (!sources.length) return target;
const source = sources.shift();
if (isObject(target) && isObject(source)) {
for (const key in source) {
if (isObject(source[key])) {
if (!target[key]) Object.assign(target, {
[key]: {}
});
deepMerge(target[key], source[key]);
} else {
Object.assign(target, {
[key]: source[key]
});
}
}
}
return deepMerge(target, ...sources);
}
function isObject(item) {
return item && typeof item === 'object' && !Array.isArray(item);
}
function omit(obj, keys) {
const result = {
...obj
};
keys.forEach(key => delete result[key]);
return result;
}
function pick(obj, keys) {
const result = {};
keys.forEach(key => {
if (key in obj) {
result[key] = obj[key];
}
});
return result;
}
// Array utilities
function unique(array) {
return [...new Set(array)];
}
function groupBy(array, key) {
return array.reduce((groups, item) => {
const groupKey = String(item[key]);
if (!groups[groupKey]) {
groups[groupKey] = [];
}
groups[groupKey].push(item);
return groups;
}, {});
}
function sortBy(array, key, direction = 'asc') {
return [...array].sort((a, b) => {
const aVal = a[key];
const bVal = b[key];
if (aVal < bVal) return direction === 'asc' ? -1 : 1;
if (aVal > bVal) return direction === 'asc' ? 1 : -1;
return 0;
});
}
// DOM utilities
function getElementRect(element) {
return element.getBoundingClientRect();
}
function isElementInViewport(element) {
const rect = getElementRect(element);
return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth);
}
function scrollToElement(element, options = {}) {
element.scrollIntoView({
behavior: 'smooth',
block: 'start',
inline: 'nearest',
...options
});
}
// Event utilities
function debounce(func, wait) {
let timeout;
return (...args) => {
clearTimeout(timeout);
timeout = setTimeout(() => func(...args), wait);
};
}
function throttle(func, limit) {
let inThrottle;
return (...args) => {
if (!inThrottle) {
func(...args);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
};
}
// Validation utilities
function isValidEmail(email) {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
}
function isValidUrl(url) {
try {
new URL(url);
return true;
} catch {
return false;
}
}
function isValidHexColor(color) {
const hexRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
return hexRegex.test(color);
}
// Format utilities
function formatNumber(value, options = {}) {
return new Intl.NumberFormat('en-US', {
minimumFractionDigits: 0,
maximumFractionDigits: 2,
...options
}).format(value);
}
function formatCurrency(value, currency = 'USD', locale = 'en-US') {
return new Intl.NumberFormat(locale, {
style: 'currency',
currency
}).format(value);
}
function formatPercentage(value, decimals = 1) {
return new Intl.NumberFormat('en-US', {
style: 'percent',
minimumFractionDigits: decimals,
maximumFractionDigits: decimals
}).format(value / 100);
}
function formatDate(date, options = {}) {
const dateObj = typeof date === 'string' ? new Date(date) : date;
return new Intl.DateTimeFormat('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric',
...options
}).format(dateObj);
}
// Animation utilities
function createAnimationPromise(element, animationName, duration) {
return new Promise(resolve => {
const handleAnimationEnd = () => {
element.removeEventListener('animationend', handleAnimationEnd);
resolve();
};
element.addEventListener('animationend', handleAnimationEnd);
element.style.animation = `${animationName} ${duration || 300}ms ease forwards`;
});
}
function getOptimalAnimationDuration(element) {
const rect = getElementRect(element);
const area = rect.width * rect.height;
// Base duration on element size
if (area < 10000) return 200; // Small elements
if (area < 50000) return 300; // Medium elements
if (area < 100000) return 400; // Large elements
return 500; // Very large elements
}
export { adjustOpacity, camelCase, capitalize, clamp, cn, createAnimationPromise, debounce, deepMerge, formatCurrency, formatDate, formatNumber, formatPercentage, getElementRect, getOptimalAnimationDuration, groupBy, hexToRgba, isElementInViewport, isObject, isValidEmail, isValidHexColor, isValidUrl, kebabCase, lerp, omit, pick, rgbaToHex, roundToDecimal, scrollToElement, sortBy, throttle, unique };
//# sourceMappingURL=utilsComprehensive.js.map