ui-svelte 0.2.12 → 0.2.14

package/dist/display/css/countdown.css

@@ -0,0 +1,206 @@
+@layer components {
+	.countdown {
+		@apply flex items-center justify-center gap-2;
+		@apply font-bold tabular-nums;
+	}
+
+	.countdown-unit {
+		@apply flex flex-col items-center gap-1;
+	}
+
+	.countdown-box {
+		@apply flex items-center justify-center rounded-ui;
+		@apply transition-all duration-300;
+	}
+
+	.countdown-digit {
+		@apply font-bold tracking-tight;
+	}
+
+	.countdown-label {
+		@apply text-xs font-medium uppercase tracking-wider opacity-70;
+	}
+
+	.countdown-separator {
+		@apply font-bold opacity-50;
+		@apply self-start;
+	}
+
+	.countdown {
+		&.is-sm {
+			@apply gap-1;
+
+			.countdown-box {
+				@apply h-10 w-12 text-xl;
+			}
+
+			.countdown-separator {
+				@apply text-xl mt-2;
+			}
+
+			.countdown-label {
+				@apply text-[10px];
+			}
+		}
+
+		&.is-md {
+			@apply gap-2;
+
+			.countdown-box {
+				@apply h-14 w-16 text-3xl;
+			}
+
+			.countdown-separator {
+				@apply text-3xl mt-3;
+			}
+
+			.countdown-label {
+				@apply text-xs;
+			}
+		}
+
+		&.is-lg {
+			@apply gap-3;
+
+			.countdown-box {
+				@apply h-20 w-24 text-5xl;
+			}
+
+			.countdown-separator {
+				@apply text-5xl mt-5;
+			}
+
+			.countdown-label {
+				@apply text-sm;
+			}
+		}
+
+		&.is-xl {
+			@apply gap-4;
+
+			.countdown-box {
+				@apply h-28 w-32 text-7xl;
+			}
+
+			.countdown-separator {
+				@apply text-7xl mt-7;
+			}
+
+			.countdown-label {
+				@apply text-base;
+			}
+		}
+	}
+
+	.countdown.is-solid {
+		&.is-primary .countdown-box {
+			@apply bg-primary text-on-primary;
+		}
+		&.is-secondary .countdown-box {
+			@apply bg-secondary text-on-secondary;
+		}
+		&.is-muted .countdown-box {
+			@apply bg-muted text-on-muted;
+		}
+		&.is-surface .countdown-box {
+			@apply bg-surface text-on-surface;
+		}
+		&.is-success .countdown-box {
+			@apply bg-success text-on-success;
+		}
+		&.is-info .countdown-box {
+			@apply bg-info text-on-info;
+		}
+		&.is-warning .countdown-box {
+			@apply bg-warning text-on-warning;
+		}
+		&.is-danger .countdown-box {
+			@apply bg-danger text-on-danger;
+		}
+	}
+
+	.countdown.is-soft {
+		&.is-primary .countdown-box {
+			@apply bg-soft-primary text-primary;
+		}
+		&.is-secondary .countdown-box {
+			@apply bg-soft-secondary text-secondary;
+		}
+		&.is-muted .countdown-box {
+			@apply bg-soft-muted text-on-muted;
+		}
+		&.is-surface .countdown-box {
+			@apply bg-surface text-on-surface;
+		}
+		&.is-success .countdown-box {
+			@apply bg-soft-success text-success;
+		}
+		&.is-info .countdown-box {
+			@apply bg-soft-info text-info;
+		}
+		&.is-warning .countdown-box {
+			@apply bg-soft-warning text-warning;
+		}
+		&.is-danger .countdown-box {
+			@apply bg-soft-danger text-danger;
+		}
+	}
+
+	.countdown.is-outlined {
+		.countdown-box {
+			@apply border-2;
+		}
+
+		&.is-primary .countdown-box {
+			@apply border-primary text-primary;
+		}
+		&.is-secondary .countdown-box {
+			@apply border-secondary text-secondary;
+		}
+		&.is-muted .countdown-box {
+			@apply border-muted text-on-muted;
+		}
+		&.is-surface .countdown-box {
+			@apply border-on-surface text-on-surface;
+		}
+		&.is-success .countdown-box {
+			@apply border-success text-success;
+		}
+		&.is-info .countdown-box {
+			@apply border-info text-info;
+		}
+		&.is-warning .countdown-box {
+			@apply border-warning text-warning;
+		}
+		&.is-danger .countdown-box {
+			@apply border-danger text-danger;
+		}
+	}
+
+	.countdown.is-ghost {
+		&.is-primary .countdown-box {
+			@apply text-primary;
+		}
+		&.is-secondary .countdown-box {
+			@apply text-secondary;
+		}
+		&.is-muted .countdown-box {
+			@apply text-on-muted;
+		}
+		&.is-surface .countdown-box {
+			@apply text-on-surface;
+		}
+		&.is-success .countdown-box {
+			@apply text-success;
+		}
+		&.is-info .countdown-box {
+			@apply text-info;
+		}
+		&.is-warning .countdown-box {
+			@apply text-warning;
+		}
+		&.is-danger .countdown-box {
+			@apply text-danger;
+		}
+	}
+}

package/dist/display/css/item.css

@@ -352,6 +352,30 @@
 		@apply shrink-0;
 	}
 
+	.item-bullet {
+		@apply w-1.5 h-1.5 rounded-full bg-current opacity-30;
+		@apply shrink-0 transition-all duration-200;
+	}
+
+	.item.is-interactive:hover .item-bullet,
+	.item.is-focused .item-bullet {
+		@apply opacity-60 scale-110;
+	}
+
+	.item-indicator {
+		@apply shrink-0 opacity-0 -translate-x-1;
+		@apply transition-all duration-200;
+
+		svg {
+			@apply w-3.5 h-3.5;
+		}
+	}
+
+	.item.is-interactive:hover .item-indicator,
+	.item.is-focused .item-indicator {
+		@apply opacity-50 translate-x-0;
+	}
+
 	.item {
 		&.has-divider {
 			@apply border-b border-muted rounded-none;

package/dist/display/css/marquee.css

@@ -61,7 +61,6 @@
 		}
 	}
 
-	/* Animaciones */
 	@keyframes marquee-scroll {
 		0% {
 			transform: translateX(0);
@@ -80,7 +79,6 @@
 		}
 	}
 
-	/* Variantes de velocidad */
 	.marquee-container {
 		&.is-slow {
 			--marquee-duration: 40s;
@@ -95,7 +93,6 @@
 		}
 	}
 
-	/* Efecto de fade en los bordes */
 	.marquee {
 		&.has-fade {
 			&::before,

package/dist/display/css/section.css

@@ -17,118 +17,97 @@
 		.section-body {
 			@apply column gap-4 md:gap-6 w-full p-4 md:p-6;
 		}
-
-	}
-
-	.section.is-soft.is-primary {
-		@apply bg-on-primary text-primary;
-	}
-
-	.section.is-soft.is-secondary {
-		@apply bg-on-secondary text-secondary;
-	}
-
-	.section.is-soft.is-muted {
-		@apply bg-muted text-on-muted;
-	}
-
-	.section.is-soft.is-success {
-		@apply bg-on-success text-success;
-	}
-
-	.section.is-soft.is-info {
-		@apply bg-on-info text-info;
-	}
-
-	.section.is-soft.is-warning {
-		@apply bg-on-warning text-warning;
-	}
-
-	.section.is-soft.is-danger {
-		@apply bg-on-danger text-danger;
 	}
 
-	.section.is-soft.is-default {
-		@apply bg-background text-on-background;
-	}
-
-	.section.is-soft.is-surface {
-		@apply bg-surface text-on-surface;
-	}
-
-	.section.is-solid.is-primary {
-		@apply bg-primary text-on-primary;
-	}
-
-
-	.section.is-solid.is-secondary {
-		@apply bg-secondary text-on-secondary;
-	}
-
-	.section.is-solid.is-muted {
-		@apply bg-on-muted text-muted;
-	}
-
-	.section.is-solid.is-success {
-		@apply bg-success text-on-success;
-	}
-
-
-	.section.is-solid.is-info {
-		@apply bg-info text-on-info;
-	}
-
-
-	.section.is-solid.is-warning {
-		@apply bg-warning text-on-warning;
-	}
-
-
-	.section.is-solid.is-danger {
-		@apply bg-danger text-on-danger;
-	}
-
-	.section.is-solid.is-default {
-		@apply bg-background text-on-background;
-	}
-
-	.section.is-solid.is-surface {
-		@apply bg-surface text-on-surface;
-	}
-
-	.section.is-ghost.is-primary {
-		@apply bg-transparent text-primary;
-	}
-
-	.section.is-ghost.is-secondary {
-		@apply bg-transparent text-secondary;
-	}
-
-	.section.is-ghost.is-muted {
-		@apply bg-transparent text-on-muted;
-	}
-
-	.section.is-ghost.is-success {
-		@apply bg-transparent text-success;
-	}
-
-	.section.is-ghost.is-info {
-		@apply bg-transparent text-info;
-	}
-
-	.section.is-ghost.is-warning {
-		@apply bg-transparent text-warning;
-	}
-
-	.section.is-ghost.is-danger {
-		@apply bg-transparent text-danger;
-	}
+	.section {
+		&.is-soft {
+			&.is-primary {
+				@apply bg-soft-primary text-primary;
+			}
+			&.is-secondary {
+				@apply bg-soft-secondary text-secondary;
+			}
+			&.is-muted {
+				@apply bg-soft-muted text-on-muted;
+			}
+			&.is-background {
+				@apply bg-background text-on-background;
+			}
+			&.is-surface {
+				@apply bg-surface text-on-surface;
+			}
+			&.is-success {
+				@apply bg-soft-success text-success;
+			}
+			&.is-info {
+				@apply bg-soft-info text-info;
+			}
+			&.is-warning {
+				@apply bg-soft-warning text-warning;
+			}
+			&.is-danger {
+				@apply bg-soft-danger text-danger;
+			}
+		}
 
-	.section.is-ghost.is-default {
-		@apply bg-transparent text-on-background;
-	}
+		&.is-solid {
+			&.is-primary {
+				@apply bg-primary text-on-primary;
+			}
+			&.is-secondary {
+				@apply bg-secondary text-on-secondary;
+			}
+			&.is-muted {
+				@apply bg-muted text-on-muted;
+			}
+			&.is-background {
+				@apply bg-background text-on-background;
+			}
+			&.is-surface {
+				@apply bg-surface text-on-surface;
+			}
+			&.is-success {
+				@apply bg-success text-on-success;
+			}
+			&.is-info {
+				@apply bg-info text-on-info;
+			}
+			&.is-warning {
+				@apply bg-warning text-on-warning;
+			}
+			&.is-danger {
+				@apply bg-danger text-on-danger;
+			}
+		}
 
-	.section.is-ghost.is-surface {
-		@apply bg-transparent text-on-surface;
+		&.is-ghost {
+			&.is-primary {
+				@apply bg-transparent text-primary;
+			}
+			&.is-secondary {
+				@apply bg-transparent text-secondary;
+			}
+			&.is-muted {
+				@apply bg-transparent text-on-muted;
+			}
+			&.is-background {
+				@apply bg-transparent text-on-background;
+			}
+			&.is-surface {
+				@apply bg-transparent text-on-surface;
+			}
+			&.is-success {
+				@apply bg-transparent text-success;
+			}
+			&.is-info {
+				@apply bg-transparent text-info;
+			}
+			&.is-warning {
+				@apply bg-transparent text-warning;
+			}
+			&.is-danger {
+				@apply bg-transparent text-danger;
+			}
+		}
 	}
 }

package/dist/display/css/table.css

@@ -7,7 +7,7 @@
 		@apply relative w-full overflow-x-auto;
 	}
 
-		.table {
+	.table {
 		@apply relative w-full text-left rtl:text-right;
 
 		.table-header {
@@ -276,17 +276,12 @@
 		}
 	}
 
-	/* ==========================================
-	   Selection Bar Color Variants
-	   ========================================== */
-
 	.table-selection-bar {
 		&.is-primary {
 			@apply bg-primary/10 border-primary/20;
 			.table-selection-count {
 				@apply text-primary;
 			}
-
 		}
 
 		&.is-secondary {
@@ -294,7 +289,6 @@
 			.table-selection-count {
 				@apply text-secondary;
 			}
-
 		}
 
 		&.is-muted {
@@ -302,7 +296,6 @@
 			.table-selection-count {
 				@apply text-on-muted;
 			}
-
 		}
 
 		&.is-success {
@@ -310,7 +303,6 @@
 			.table-selection-count {
 				@apply text-success;
 			}
-
 		}
 
 		&.is-info {
@@ -318,7 +310,6 @@
 			.table-selection-count {
 				@apply text-info;
 			}
-
 		}
 
 		&.is-danger {
@@ -326,7 +317,6 @@
 			.table-selection-count {
 				@apply text-danger;
 			}
-
 		}
 
 		&.is-warning {
@@ -334,7 +324,6 @@
 			.table-selection-count {
 				@apply text-warning;
 			}
-
 		}
 	}
 
@@ -346,7 +335,6 @@
 		}
 	}
 
-
 	.table-loading-row {
 		@apply animate-pulse;
 	}
@@ -427,8 +415,6 @@
 		@apply text-sm font-medium text-primary;
 	}
 
-
-
 	.table-selection-actions {
 		@apply flex items-center gap-2;
 
@@ -471,7 +457,6 @@
 
 	.table-footer-info {
 		@apply flex items-center justify-between gap-4 px-2 py-3;
-
 	}
 
 	.table-total {

package/dist/form/ColorField.svelte

@@ -232,6 +232,59 @@
 		return [parseFloat(L.toFixed(2)), parseFloat(C.toFixed(2)), Math.round(H)];
 	}
 
+	function oklchToRgb(l: number, c: number, h: number): [number, number, number] {
+		const hRad = (h * Math.PI) / 180;
+		const a = c * Math.cos(hRad);
+		const b = c * Math.sin(hRad);
+
+		const l_ = l + 0.3963377774 * a + 0.2158037573 * b;
+		const m_ = l - 0.1055613458 * a - 0.0638541728 * b;
+		const s_ = l - 0.0894841775 * a - 1.291485548 * b;
+
+		const l3 = l_ * l_ * l_;
+		const m3 = m_ * m_ * m_;
+		const s3 = s_ * s_ * s_;
+
+		const lr = 4.0767416621 * l3 - 3.3077115913 * m3 + 0.2309699292 * s3;
+		const lg = -1.2684380046 * l3 + 2.6097574011 * m3 - 0.3413193965 * s3;
+		const lb = -0.0041960863 * l3 - 0.7034186147 * m3 + 1.707614701 * s3;
+
+		const gammaCorrect = (c: number) => {
+			if (c <= 0.0031308) return c * 12.92;
+			return 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
+		};
+
+		const r = Math.max(0, Math.min(255, Math.round(gammaCorrect(lr) * 255)));
+		const g = Math.max(0, Math.min(255, Math.round(gammaCorrect(lg) * 255)));
+		const bVal = Math.max(0, Math.min(255, Math.round(gammaCorrect(lb) * 255)));
+
+		return [r, g, bVal];
+	}
+
+	function parseOklchString(oklchStr: string): [number, number, number] | null {
+		const match = oklchStr.match(/oklch\(([\d.]+)%?\s+([\d.]+)\s+([\d.]+)\)/);
+		if (!match) return null;
+		let l = parseFloat(match[1]);
+		if (l > 1) l = l / 100;
+		const c = parseFloat(match[2]);
+		const h = parseFloat(match[3]);
+		return [l, c, h];
+	}
+
+	function parseOklchAndUpdateHsv(oklchStr: string) {
+		const parsed = parseOklchString(oklchStr);
+		if (parsed) {
+			const [l, c, h] = parsed;
+			const [r, g, b] = oklchToRgb(l, c, h);
+			const [hsvH, hsvS, hsvV] = rgbToHsv(r, g, b);
+			hue = hsvH;
+			saturation = hsvS;
+			brightness = hsvV;
+			return true;
+		}
+		return false;
+	}
+
 	function getContrastColor(hexColor: string): string {
 		const rgbValues = hexToRgb(hexColor);
 		if (!rgbValues) return '#000000';
@@ -424,8 +477,13 @@
 	});
 
 	onMount(() => {
-		parseHexAndUpdateHsv(hex);
-		updateAllFormats();
+		if (oklch && oklch.startsWith('oklch(')) {
+			parseOklchAndUpdateHsv(oklch);
+			updateAllFormats();
+		} else if (hex && hex.startsWith('#')) {
+			parseHexAndUpdateHsv(hex);
+			updateAllFormats();
+		}
 		return () => stopEventListeners();
 	});