@rokkit/ui 1.3.3 → 1.3.5

package/dist/utils/palette.js

@@ -0,0 +1,641 @@
+/**
+ * Palette Utilities
+ *
+ * Functions for color manipulation, shade generation, and runtime palette application.
+ */
+// =============================================================================
+// Color Conversion Utilities
+// =============================================================================
+/**
+ * Convert hex color to RGB
+ */
+export function hexToRgb(hex) {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    if (!result) {
+        throw new Error(`Invalid hex color: ${hex}`);
+    }
+    return {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16)
+    };
+}
+/**
+ * Convert RGB to hex color
+ */
+export function rgbToHex(rgb) {
+    const toHex = (n) => {
+        const hex = Math.round(Math.max(0, Math.min(255, n))).toString(16);
+        return hex.length === 1 ? `0${hex}` : hex;
+    };
+    return `#${toHex(rgb.r)}${toHex(rgb.g)}${toHex(rgb.b)}`;
+}
+function computeHue(norm, max, d) {
+    const { r, g, b } = norm;
+    if (max === r)
+        return ((g - b) / d + (g < b ? 6 : 0)) / 6;
+    if (max === g)
+        return ((b - r) / d + 2) / 6;
+    return ((r - g) / d + 4) / 6;
+}
+export function rgbToHsl(rgb) {
+    const norm = { r: rgb.r / 255, g: rgb.g / 255, b: rgb.b / 255 };
+    const max = Math.max(norm.r, norm.g, norm.b);
+    const min = Math.min(norm.r, norm.g, norm.b);
+    const l = (max + min) / 2;
+    if (max === min)
+        return { h: 0, s: 0, l: l * 100 };
+    const d = max - min;
+    const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    const h = computeHue(norm, max, d);
+    return { h: h * 360, s: s * 100, l: l * 100 };
+}
+function normalizeT(t) {
+    if (t < 0)
+        return t + 1;
+    if (t > 1)
+        return t - 1;
+    return t;
+}
+function hue2rgb(p, q, t) {
+    const tt = normalizeT(t);
+    if (tt < 1 / 6)
+        return p + (q - p) * 6 * tt;
+    if (tt < 1 / 2)
+        return q;
+    if (tt < 2 / 3)
+        return p + (q - p) * (2 / 3 - tt) * 6;
+    return p;
+}
+/**
+ * Convert HSL to RGB
+ */
+export function hslToRgb(hsl) {
+    const h = hsl.h / 360;
+    const s = hsl.s / 100;
+    const l = hsl.l / 100;
+    if (s === 0) {
+        const val = Math.round(l * 255);
+        return { r: val, g: val, b: val };
+    }
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    return {
+        r: Math.round(hue2rgb(p, q, h + 1 / 3) * 255),
+        g: Math.round(hue2rgb(p, q, h) * 255),
+        b: Math.round(hue2rgb(p, q, h - 1 / 3) * 255)
+    };
+}
+/**
+ * Convert hex to HSL
+ */
+export function hexToHsl(hex) {
+    return rgbToHsl(hexToRgb(hex));
+}
+/**
+ * Convert HSL to hex
+ */
+export function hslToHex(hsl) {
+    return rgbToHex(hslToRgb(hsl));
+}
+// =============================================================================
+// OKLCH Conversion Utilities
+// =============================================================================
+function srgbToLinear(c) {
+    const s = c / 255;
+    return s <= 0.04045 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+}
+function linearToSrgb(c) {
+    const s = c <= 0.0031308 ? c * 12.92 : 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
+    return Math.round(Math.max(0, Math.min(255, s * 255)));
+}
+// CSS Color Level 4 matrices (via XYZ D65) for round-trip precision.
+const SRGB_TO_XYZ = [
+    [0.4123907993, 0.3575843394, 0.1804807884],
+    [0.2126390059, 0.7151686788, 0.0721923154],
+    [0.0193308187, 0.1191947798, 0.9505321522]
+];
+const XYZ_TO_LMS = [
+    [0.8189330101, 0.3618667424, -0.1288597137],
+    [0.0329845436, 0.9293118715, 0.0361456387],
+    [0.0482003018, 0.2643662691, 0.633851707]
+];
+const LMS3_TO_OKLAB = [
+    [0.2104542553, 0.793617785, -0.0040720468],
+    [1.9779984951, -2.428592205, 0.4505937099],
+    [0.0259040371, 0.7827717662, -0.808675766]
+];
+const OKLAB_TO_LMS3 = [
+    [1.0, 0.3963377774, 0.2158037573],
+    [1.0, -0.1055613458, -0.0638541728],
+    [1.0, -0.0894841775, -1.291485548]
+];
+const LMS_TO_XYZ = [
+    [1.2270138511, -0.5577999807, 0.281256149],
+    [-0.0405801784, 1.1122568696, -0.0716766787],
+    [-0.0763812845, -0.4214819784, 1.5861632204]
+];
+const XYZ_TO_SRGB = [
+    [3.2409699419, -1.5373831776, -0.4986107603],
+    [-0.9692436363, 1.8759675015, 0.0415550574],
+    [0.0556300797, -0.2039769589, 1.0569715142]
+];
+function matMul(m, v) {
+    return m.map((row) => row[0] * v[0] + row[1] * v[1] + row[2] * v[2]);
+}
+/**
+ * Convert RGB to OKLCH (via XYZ D65 for precision)
+ */
+export function rgbToOklch(rgb) {
+    const lin = [srgbToLinear(rgb.r), srgbToLinear(rgb.g), srgbToLinear(rgb.b)];
+    const xyz = matMul(SRGB_TO_XYZ, lin);
+    const lms = matMul(XYZ_TO_LMS, xyz);
+    const lms3 = [Math.cbrt(lms[0]), Math.cbrt(lms[1]), Math.cbrt(lms[2])];
+    const [L, a, b] = matMul(LMS3_TO_OKLAB, lms3);
+    const C = Math.sqrt(a * a + b * b);
+    let H = (Math.atan2(b, a) * 180) / Math.PI;
+    if (H < 0)
+        H += 360;
+    return { L, C, H };
+}
+/**
+ * Convert OKLCH to RGB (via XYZ D65 for precision)
+ */
+export function oklchToRgb(oklch) {
+    const hRad = (oklch.H * Math.PI) / 180;
+    const lab = [oklch.L, oklch.C * Math.cos(hRad), oklch.C * Math.sin(hRad)];
+    const lms3 = matMul(OKLAB_TO_LMS3, lab);
+    const lms = [lms3[0] ** 3, lms3[1] ** 3, lms3[2] ** 3];
+    const xyz = matMul(LMS_TO_XYZ, lms);
+    const lin = matMul(XYZ_TO_SRGB, xyz);
+    return {
+        r: linearToSrgb(lin[0]),
+        g: linearToSrgb(lin[1]),
+        b: linearToSrgb(lin[2])
+    };
+}
+/**
+ * Convert hex to OKLCH
+ */
+export function hexToOklch(hex) {
+    return rgbToOklch(hexToRgb(hex));
+}
+/**
+ * Convert OKLCH to hex
+ */
+export function oklchToHex(oklch) {
+    return rgbToHex(oklchToRgb(oklch));
+}
+// =============================================================================
+// Shade Generation
+// =============================================================================
+/**
+ * Generate Tailwind-like shades from a base hex color
+ * The input color is used as the 500 shade
+ */
+export function generateShades(hex) {
+    const hsl = hexToHsl(hex);
+    // Shade configuration: [saturation multiplier, target lightness]
+    // Lighter shades have higher lightness, lower saturation
+    // Darker shades have lower lightness, slightly higher saturation
+    const shadeConfig = {
+        '50': [0.9, 97],
+        '100': [0.92, 94],
+        '200': [0.94, 86],
+        '300': [0.96, 75],
+        '400': [0.98, 60],
+        '500': [1.0, hsl.l], // Keep original lightness
+        '600': [1.02, Math.max(hsl.l * 0.82, 25)],
+        '700': [1.04, Math.max(hsl.l * 0.65, 20)],
+        '800': [1.06, Math.max(hsl.l * 0.5, 15)],
+        '900': [1.08, Math.max(hsl.l * 0.35, 12)],
+        '950': [1.12, Math.max(hsl.l * 0.22, 8)]
+    };
+    const shades = {};
+    for (const [shade, [satMult, lightness]] of Object.entries(shadeConfig)) {
+        const newHsl = {
+            h: hsl.h,
+            s: Math.min(100, hsl.s * satMult),
+            l: lightness
+        };
+        shades[shade] = hslToHex(newHsl);
+    }
+    return shades;
+}
+/**
+ * Check if a string is a valid hex color
+ */
+export function isHexColor(value) {
+    return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(value);
+}
+// =============================================================================
+// Tailwind Colors (Built-in Presets)
+// =============================================================================
+export const tailwindColors = {
+    slate: {
+        '50': '#f8fafc',
+        '100': '#f1f5f9',
+        '200': '#e2e8f0',
+        '300': '#cbd5e1',
+        '400': '#94a3b8',
+        '500': '#64748b',
+        '600': '#475569',
+        '700': '#334155',
+        '800': '#1e293b',
+        '900': '#0f172a',
+        '950': '#020617'
+    },
+    gray: {
+        '50': '#f9fafb',
+        '100': '#f3f4f6',
+        '200': '#e5e7eb',
+        '300': '#d1d5db',
+        '400': '#9ca3af',
+        '500': '#6b7280',
+        '600': '#4b5563',
+        '700': '#374151',
+        '800': '#1f2937',
+        '900': '#111827',
+        '950': '#030712'
+    },
+    zinc: {
+        '50': '#fafafa',
+        '100': '#f4f4f5',
+        '200': '#e4e4e7',
+        '300': '#d4d4d8',
+        '400': '#a1a1aa',
+        '500': '#71717a',
+        '600': '#52525b',
+        '700': '#3f3f46',
+        '800': '#27272a',
+        '900': '#18181b',
+        '950': '#09090b'
+    },
+    neutral: {
+        '50': '#fafafa',
+        '100': '#f5f5f5',
+        '200': '#e5e5e5',
+        '300': '#d4d4d4',
+        '400': '#a3a3a3',
+        '500': '#737373',
+        '600': '#525252',
+        '700': '#404040',
+        '800': '#262626',
+        '900': '#171717',
+        '950': '#0a0a0a'
+    },
+    stone: {
+        '50': '#fafaf9',
+        '100': '#f5f5f4',
+        '200': '#e7e5e4',
+        '300': '#d6d3d1',
+        '400': '#a8a29e',
+        '500': '#78716c',
+        '600': '#57534e',
+        '700': '#44403c',
+        '800': '#292524',
+        '900': '#1c1917',
+        '950': '#0c0a09'
+    },
+    red: {
+        '50': '#fef2f2',
+        '100': '#fee2e2',
+        '200': '#fecaca',
+        '300': '#fca5a5',
+        '400': '#f87171',
+        '500': '#ef4444',
+        '600': '#dc2626',
+        '700': '#b91c1c',
+        '800': '#991b1b',
+        '900': '#7f1d1d',
+        '950': '#450a0a'
+    },
+    orange: {
+        '50': '#fff7ed',
+        '100': '#ffedd5',
+        '200': '#fed7aa',
+        '300': '#fdba74',
+        '400': '#fb923c',
+        '500': '#f97316',
+        '600': '#ea580c',
+        '700': '#c2410c',
+        '800': '#9a3412',
+        '900': '#7c2d12',
+        '950': '#431407'
+    },
+    amber: {
+        '50': '#fffbeb',
+        '100': '#fef3c7',
+        '200': '#fde68a',
+        '300': '#fcd34d',
+        '400': '#fbbf24',
+        '500': '#f59e0b',
+        '600': '#d97706',
+        '700': '#b45309',
+        '800': '#92400e',
+        '900': '#78350f',
+        '950': '#451a03'
+    },
+    yellow: {
+        '50': '#fefce8',
+        '100': '#fef9c3',
+        '200': '#fef08a',
+        '300': '#fde047',
+        '400': '#facc15',
+        '500': '#eab308',
+        '600': '#ca8a04',
+        '700': '#a16207',
+        '800': '#854d0e',
+        '900': '#713f12',
+        '950': '#422006'
+    },
+    lime: {
+        '50': '#f7fee7',
+        '100': '#ecfccb',
+        '200': '#d9f99d',
+        '300': '#bef264',
+        '400': '#a3e635',
+        '500': '#84cc16',
+        '600': '#65a30d',
+        '700': '#4d7c0f',
+        '800': '#3f6212',
+        '900': '#365314',
+        '950': '#1a2e05'
+    },
+    green: {
+        '50': '#f0fdf4',
+        '100': '#dcfce7',
+        '200': '#bbf7d0',
+        '300': '#86efac',
+        '400': '#4ade80',
+        '500': '#22c55e',
+        '600': '#16a34a',
+        '700': '#15803d',
+        '800': '#166534',
+        '900': '#14532d',
+        '950': '#052e16'
+    },
+    emerald: {
+        '50': '#ecfdf5',
+        '100': '#d1fae5',
+        '200': '#a7f3d0',
+        '300': '#6ee7b7',
+        '400': '#34d399',
+        '500': '#10b981',
+        '600': '#059669',
+        '700': '#047857',
+        '800': '#065f46',
+        '900': '#064e3b',
+        '950': '#022c22'
+    },
+    teal: {
+        '50': '#f0fdfa',
+        '100': '#ccfbf1',
+        '200': '#99f6e4',
+        '300': '#5eead4',
+        '400': '#2dd4bf',
+        '500': '#14b8a6',
+        '600': '#0d9488',
+        '700': '#0f766e',
+        '800': '#115e59',
+        '900': '#134e4a',
+        '950': '#042f2e'
+    },
+    cyan: {
+        '50': '#ecfeff',
+        '100': '#cffafe',
+        '200': '#a5f3fc',
+        '300': '#67e8f9',
+        '400': '#22d3ee',
+        '500': '#06b6d4',
+        '600': '#0891b2',
+        '700': '#0e7490',
+        '800': '#155e75',
+        '900': '#164e63',
+        '950': '#083344'
+    },
+    sky: {
+        '50': '#f0f9ff',
+        '100': '#e0f2fe',
+        '200': '#bae6fd',
+        '300': '#7dd3fc',
+        '400': '#38bdf8',
+        '500': '#0ea5e9',
+        '600': '#0284c7',
+        '700': '#0369a1',
+        '800': '#075985',
+        '900': '#0c4a6e',
+        '950': '#082f49'
+    },
+    blue: {
+        '50': '#eff6ff',
+        '100': '#dbeafe',
+        '200': '#bfdbfe',
+        '300': '#93c5fd',
+        '400': '#60a5fa',
+        '500': '#3b82f6',
+        '600': '#2563eb',
+        '700': '#1d4ed8',
+        '800': '#1e40af',
+        '900': '#1e3a8a',
+        '950': '#172554'
+    },
+    indigo: {
+        '50': '#eef2ff',
+        '100': '#e0e7ff',
+        '200': '#c7d2fe',
+        '300': '#a5b4fc',
+        '400': '#818cf8',
+        '500': '#6366f1',
+        '600': '#4f46e5',
+        '700': '#4338ca',
+        '800': '#3730a3',
+        '900': '#312e81',
+        '950': '#1e1b4b'
+    },
+    violet: {
+        '50': '#f5f3ff',
+        '100': '#ede9fe',
+        '200': '#ddd6fe',
+        '300': '#c4b5fd',
+        '400': '#a78bfa',
+        '500': '#8b5cf6',
+        '600': '#7c3aed',
+        '700': '#6d28d9',
+        '800': '#5b21b6',
+        '900': '#4c1d95',
+        '950': '#2e1065'
+    },
+    purple: {
+        '50': '#faf5ff',
+        '100': '#f3e8ff',
+        '200': '#e9d5ff',
+        '300': '#d8b4fe',
+        '400': '#c084fc',
+        '500': '#a855f7',
+        '600': '#9333ea',
+        '700': '#7e22ce',
+        '800': '#6b21a8',
+        '900': '#581c87',
+        '950': '#3b0764'
+    },
+    fuchsia: {
+        '50': '#fdf4ff',
+        '100': '#fae8ff',
+        '200': '#f5d0fe',
+        '300': '#f0abfc',
+        '400': '#e879f9',
+        '500': '#d946ef',
+        '600': '#c026d3',
+        '700': '#a21caf',
+        '800': '#86198f',
+        '900': '#701a75',
+        '950': '#4a044e'
+    },
+    pink: {
+        '50': '#fdf2f8',
+        '100': '#fce7f3',
+        '200': '#fbcfe8',
+        '300': '#f9a8d4',
+        '400': '#f472b6',
+        '500': '#ec4899',
+        '600': '#db2777',
+        '700': '#be185d',
+        '800': '#9d174d',
+        '900': '#831843',
+        '950': '#500724'
+    },
+    rose: {
+        '50': '#fff1f2',
+        '100': '#ffe4e6',
+        '200': '#fecdd3',
+        '300': '#fda4af',
+        '400': '#fb7185',
+        '500': '#f43f5e',
+        '600': '#e11d48',
+        '700': '#be123c',
+        '800': '#9f1239',
+        '900': '#881337',
+        '950': '#4c0519'
+    }
+};
+/**
+ * Get shades for a color (either Tailwind preset or custom hex)
+ */
+export function getShades(color) {
+    if (isHexColor(color)) {
+        return generateShades(color);
+    }
+    const preset = tailwindColors[color.toLowerCase()];
+    if (preset) {
+        return preset;
+    }
+    throw new Error(`Unknown color: ${color}. Must be a hex color or Tailwind color name.`);
+}
+// =============================================================================
+// Runtime Palette Application
+// =============================================================================
+/**
+ * Format a hex color as CSS variable components for the given color space.
+ */
+function formatComponents(hex, colorSpace) {
+    switch (colorSpace) {
+        case 'hsl': {
+            const hsl = hexToHsl(hex);
+            return `${Math.round(hsl.h)} ${Math.round(hsl.s)}% ${Math.round(hsl.l)}%`;
+        }
+        case 'oklch': {
+            const oklch = hexToOklch(hex);
+            const L = Math.round(oklch.L * 10000) / 10000;
+            const C = Math.round(oklch.C * 10000) / 10000;
+            const H = Math.round(oklch.H * 100) / 100;
+            return `${L} ${C} ${H}`;
+        }
+        case 'rgb':
+        default: {
+            const rgb = hexToRgb(hex);
+            return `${rgb.r},${rgb.g},${rgb.b}`;
+        }
+    }
+}
+/**
+ * Apply a color palette to the document root
+ * Sets CSS variables for each color role and shade
+ */
+export function applyPalette(mapping, element = document.documentElement, colorSpace = 'rgb') {
+    for (const [role, color] of Object.entries(mapping)) {
+        if (!color)
+            continue;
+        const shades = getShades(color);
+        for (const [shade, hex] of Object.entries(shades)) {
+            element.style.setProperty(`--color-${role}-${shade}`, formatComponents(hex, colorSpace));
+        }
+        // Also set the default (500) as the base color variable
+        element.style.setProperty(`--color-${role}`, formatComponents(shades['500'], colorSpace));
+    }
+}
+const DEFAULT_PALETTE_ROLES = [
+    'primary',
+    'secondary',
+    'accent',
+    'surface',
+    'success',
+    'warning',
+    'danger',
+    'info'
+];
+const ALL_SHADE_KEYS = [
+    '50',
+    '100',
+    '200',
+    '300',
+    '400',
+    '500',
+    '600',
+    '700',
+    '800',
+    '900',
+    '950'
+];
+/**
+ * Remove custom palette CSS variables (reset to theme defaults)
+ */
+export function resetPalette(roles = DEFAULT_PALETTE_ROLES, element = document.documentElement) {
+    for (const role of roles) {
+        element.style.removeProperty(`--color-${role}`);
+        for (const shade of ALL_SHADE_KEYS) {
+            element.style.removeProperty(`--color-${role}-${shade}`);
+        }
+    }
+}
+/**
+ * Save palette to localStorage. SSR-safe.
+ */
+export function savePalette(key, mapping) {
+    if (typeof localStorage === 'undefined')
+        return;
+    localStorage.setItem(key, JSON.stringify(mapping));
+}
+/**
+ * Load palette from localStorage. SSR-safe.
+ */
+export function loadPalette(key) {
+    if (typeof localStorage === 'undefined')
+        return null;
+    const stored = localStorage.getItem(key);
+    if (stored) {
+        try {
+            return JSON.parse(stored);
+        }
+        catch {
+            return null;
+        }
+    }
+    return null;
+}
+/**
+ * Get list of available Tailwind color names
+ */
+export function getTailwindColorNames() {
+    return Object.keys(tailwindColors);
+}

package/dist/utils/relative-time.js

@@ -0,0 +1,17 @@
+/** Format an ISO timestamp as a short relative label ("5m ago"), or a clock time when relative=false. */
+export function formatRelativeTime(timestamp, relative = true) {
+    const ms = new Date(timestamp).getTime();
+    if (Number.isNaN(ms))
+        return '';
+    if (!relative)
+        return new Date(ms).toLocaleTimeString();
+    const minutes = Math.round((Date.now() - ms) / 60000);
+    if (minutes < 1)
+        return 'just now';
+    if (minutes < 60)
+        return `${minutes}m ago`;
+    const hours = Math.round(minutes / 60);
+    if (hours < 24)
+        return `${hours}h ago`;
+    return `${Math.round(hours / 24)}d ago`;
+}