Spaces:
Paused
Paused
| 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) return ''; | |
| if (str.length <= maxLength) return str; | |
| return str.slice(0, maxLength) + '...'; | |
| } | |