File size: 2,085 Bytes
5da4770 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
import { clsx, type ClassValue } from 'clsx';
import * as Color from 'color-bits';
import { twMerge } from 'tailwind-merge';
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
// Helper function to convert any CSS color to rgba
export const getRGBA = (
cssColor: React.CSSProperties['color'],
fallback: string = 'rgba(180, 180, 180)',
): string => {
if (typeof window === 'undefined') return fallback;
if (!cssColor) return fallback;
try {
// Handle CSS variables
if (typeof cssColor === 'string' && cssColor.startsWith('var(')) {
const element = document.createElement('div');
element.style.color = cssColor;
document.body.appendChild(element);
const computedColor = window.getComputedStyle(element).color;
document.body.removeChild(element);
return Color.formatRGBA(Color.parse(computedColor));
}
return Color.formatRGBA(Color.parse(cssColor));
} catch (e) {
console.error('Color parsing failed:', e);
return fallback;
}
};
// Helper function to add opacity to an RGB color string
export const colorWithOpacity = (color: string, opacity: number): string => {
if (!color.startsWith('rgb')) return color;
return Color.formatRGBA(Color.alpha(Color.parse(color), opacity));
};
// Tremor Raw focusInput [v0.0.1]
export const focusInput = [
// base
'focus:ring-2',
// ring color
'focus:ring-blue-200 focus:dark:ring-blue-700/30',
// border color
'focus:border-blue-500 focus:dark:border-blue-700',
];
// Tremor Raw focusRing [v0.0.1]
export const focusRing = [
// base
'outline outline-offset-2 outline-0 focus-visible:outline-2',
// outline color
'outline-blue-500 dark:outline-blue-500',
];
// Tremor Raw hasErrorInput [v0.0.1]
export const hasErrorInput = [
// base
'ring-2',
// border color
'border-red-500 dark:border-red-700',
// ring color
'ring-red-200 dark:ring-red-700/30',
];
export function truncateString(str: string, maxLength = 50) {
if (str.length <= maxLength) return str;
return str.slice(0, maxLength) + '...';
}
|