ui-svelte 0.2.11 → 0.2.13

package/dist/display/css/collapsible.css

@@ -1,53 +1,13 @@
 @layer components {
 	.collapsible {
-		@apply w-full transition-all duration-200;
-
-		&.is-primary {
-			@apply border border-primary/20 rounded-lg overflow-hidden;
-			.collapsible-header {
-				@apply bg-primary/5 hover:bg-primary/10;
-				&.is-open {
-					@apply bg-primary/10 text-primary;
-				}
-			}
-		}
-
-		&.is-secondary {
-			@apply border border-secondary/20 rounded-lg overflow-hidden;
-			.collapsible-header {
-				@apply bg-secondary/5 hover:bg-secondary/10;
-				&.is-open {
-					@apply bg-secondary/10 text-secondary;
-				}
-			}
-		}
-
-		&.is-muted {
-			@apply border border-muted rounded-lg overflow-hidden;
-			.collapsible-header {
-				@apply bg-muted/30 hover:bg-muted/50;
-				&.is-open {
-					@apply bg-muted text-on-muted;
-				}
-			}
-		}
-
-		&.is-outline {
-			@apply border border-muted rounded-lg overflow-hidden;
-			.collapsible-header {
-				@apply hover:bg-muted/30;
-				&.is-open {
-					@apply bg-muted/20;
-				}
-			}
-		}
+		@apply w-full transition-all duration-300 rounded-lg overflow-hidden;
 
 		&.is-disabled {
 			@apply opacity-50 pointer-events-none;
 		}
 
 		.collapsible-header {
-			@apply flex justify-between items-center gap-3 px-4 py-3 cursor-pointer select-none transition-all duration-200;
+			@apply flex justify-between items-center gap-3 px-4 py-3 cursor-pointer select-none transition-all duration-300;
 
 			.collapsible-start {
 				@apply flex items-center gap-3 flex-1;
@@ -65,16 +25,22 @@
 				@apply flex items-center;
 
 				.collapsible-arrow {
-					@apply size-5 transition-transform duration-200 text-on-muted;
+					@apply size-5 transition-all duration-300 text-on-muted;
 					&.is-active {
-						@apply rotate-180;
+						@apply rotate-180 text-current;
 					}
 				}
 			}
 
 			&:hover:not(.is-disabled) {
 				.collapsible-arrow {
-					@apply text-on-surface;
+					@apply text-current;
+				}
+			}
+
+			&.is-open {
+				.collapsible-arrow {
+					@apply text-current;
 				}
 			}
 		}
@@ -82,5 +48,343 @@
 		.collapsible-content {
 			@apply px-4 py-3 text-sm text-on-surface/80;
 		}
+
+		&.is-ghost {
+			@apply border border-transparent;
+
+			.collapsible-header {
+				.collapsible-label {
+					@apply font-normal;
+				}
+
+				&:hover .collapsible-label {
+					@apply font-semibold;
+				}
+			}
+
+			.collapsible-header.is-open .collapsible-label {
+				@apply font-semibold;
+			}
+
+			&.is-primary {
+				.collapsible-header:hover {
+					@apply text-primary;
+				}
+				.collapsible-header.is-open {
+					@apply text-primary;
+				}
+			}
+			&.is-secondary {
+				.collapsible-header:hover {
+					@apply text-secondary;
+				}
+				.collapsible-header.is-open {
+					@apply text-secondary;
+				}
+			}
+			&.is-muted {
+				.collapsible-header:hover {
+					@apply text-on-muted;
+				}
+				.collapsible-header.is-open {
+					@apply text-on-muted;
+				}
+			}
+			&.is-success {
+				.collapsible-header:hover {
+					@apply text-success;
+				}
+				.collapsible-header.is-open {
+					@apply text-success;
+				}
+			}
+			&.is-info {
+				.collapsible-header:hover {
+					@apply text-info;
+				}
+				.collapsible-header.is-open {
+					@apply text-info;
+				}
+			}
+			&.is-warning {
+				.collapsible-header:hover {
+					@apply text-warning;
+				}
+				.collapsible-header.is-open {
+					@apply text-warning;
+				}
+			}
+			&.is-danger {
+				.collapsible-header:hover {
+					@apply text-danger;
+				}
+				.collapsible-header.is-open {
+					@apply text-danger;
+				}
+			}
+			&.is-surface {
+				.collapsible-header:hover {
+					@apply text-on-surface;
+				}
+				.collapsible-header.is-open {
+					@apply text-on-surface;
+				}
+			}
+			&.is-default {
+				.collapsible-header:hover {
+					@apply text-on-muted;
+				}
+				.collapsible-header.is-open {
+					@apply text-on-muted;
+				}
+			}
+		}
+
+		&.is-soft {
+			@apply border border-transparent;
+
+			&.is-primary {
+				@apply bg-soft-primary/50;
+				.collapsible-header:hover {
+					@apply bg-soft-primary/80;
+				}
+				.collapsible-header.is-open {
+					@apply bg-soft-primary text-primary;
+				}
+			}
+			&.is-secondary {
+				@apply bg-soft-secondary/50;
+				.collapsible-header:hover {
+					@apply bg-soft-secondary/80;
+				}
+				.collapsible-header.is-open {
+					@apply bg-soft-secondary text-secondary;
+				}
+			}
+			&.is-muted {
+				@apply bg-soft-muted/30;
+				.collapsible-header:hover {
+					@apply bg-soft-muted/50;
+				}
+				.collapsible-header.is-open {
+					@apply bg-soft-muted text-on-muted;
+				}
+			}
+			&.is-success {
+				@apply bg-soft-success/50;
+				.collapsible-header:hover {
+					@apply bg-soft-success/80;
+				}
+				.collapsible-header.is-open {
+					@apply bg-soft-success text-success;
+				}
+			}
+			&.is-info {
+				@apply bg-soft-info/50;
+				.collapsible-header:hover {
+					@apply bg-soft-info/80;
+				}
+				.collapsible-header.is-open {
+					@apply bg-soft-info text-info;
+				}
+			}
+			&.is-warning {
+				@apply bg-soft-warning/50;
+				.collapsible-header:hover {
+					@apply bg-soft-warning/80;
+				}
+				.collapsible-header.is-open {
+					@apply bg-soft-warning text-warning;
+				}
+			}
+			&.is-danger {
+				@apply bg-soft-danger/50;
+				.collapsible-header:hover {
+					@apply bg-soft-danger/80;
+				}
+				.collapsible-header.is-open {
+					@apply bg-soft-danger text-danger;
+				}
+			}
+			&.is-surface {
+				@apply bg-surface/50;
+				.collapsible-header:hover {
+					@apply bg-surface/80;
+				}
+				.collapsible-header.is-open {
+					@apply bg-surface text-on-surface;
+				}
+			}
+			&.is-background {
+				@apply bg-background/20;
+				.collapsible-header:hover {
+					@apply bg-background/30;
+				}
+				.collapsible-header.is-open {
+					@apply bg-background/50;
+				}
+			}
+		}
+
+		&.is-solid {
+			@apply border border-transparent;
+
+			&.is-primary {
+				.collapsible-header:hover {
+					@apply bg-primary/20;
+				}
+				.collapsible-header.is-open {
+					@apply bg-primary text-on-primary;
+				}
+			}
+			&.is-secondary {
+				.collapsible-header:hover {
+					@apply bg-secondary/20;
+				}
+				.collapsible-header.is-open {
+					@apply bg-secondary text-on-secondary;
+				}
+			}
+			&.is-muted {
+				.collapsible-header:hover {
+					@apply bg-muted/50;
+				}
+				.collapsible-header.is-open {
+					@apply bg-on-muted text-muted;
+				}
+			}
+			&.is-success {
+				.collapsible-header:hover {
+					@apply bg-success/20;
+				}
+				.collapsible-header.is-open {
+					@apply bg-success text-on-success;
+				}
+			}
+			&.is-info {
+				.collapsible-header:hover {
+					@apply bg-info/20;
+				}
+				.collapsible-header.is-open {
+					@apply bg-info text-on-info;
+				}
+			}
+			&.is-warning {
+				.collapsible-header:hover {
+					@apply bg-warning/20;
+				}
+				.collapsible-header.is-open {
+					@apply bg-warning text-on-warning;
+				}
+			}
+			&.is-danger {
+				.collapsible-header:hover {
+					@apply bg-danger/20;
+				}
+				.collapsible-header.is-open {
+					@apply bg-danger text-on-danger;
+				}
+			}
+			&.is-surface {
+				.collapsible-header:hover {
+					@apply bg-surface/50;
+				}
+				.collapsible-header.is-open {
+					@apply bg-surface text-on-surface;
+				}
+			}
+			&.is-background {
+				.collapsible-header:hover {
+					@apply bg-background/50;
+				}
+				.collapsible-header.is-open {
+					@apply bg-background text-on-background;
+				}
+			}
+		}
+
+		&.is-outlined {
+			&.is-primary {
+				@apply border border-primary/30;
+				.collapsible-header:hover {
+					@apply bg-primary/10;
+				}
+				.collapsible-header.is-open {
+					@apply bg-primary/20 text-primary;
+				}
+			}
+			&.is-secondary {
+				@apply border border-secondary/30;
+				.collapsible-header:hover {
+					@apply bg-secondary/10;
+				}
+				.collapsible-header.is-open {
+					@apply bg-secondary/20 text-secondary;
+				}
+			}
+			&.is-muted {
+				@apply border border-muted;
+				.collapsible-header:hover {
+					@apply bg-muted/30;
+				}
+				.collapsible-header.is-open {
+					@apply bg-muted/50 text-on-muted;
+				}
+			}
+			&.is-success {
+				@apply border border-success/30;
+				.collapsible-header:hover {
+					@apply bg-success/10;
+				}
+				.collapsible-header.is-open {
+					@apply bg-success/20 text-success;
+				}
+			}
+			&.is-info {
+				@apply border border-info/30;
+				.collapsible-header:hover {
+					@apply bg-info/10;
+				}
+				.collapsible-header.is-open {
+					@apply bg-info/20 text-info;
+				}
+			}
+			&.is-warning {
+				@apply border border-warning/30;
+				.collapsible-header:hover {
+					@apply bg-warning/10;
+				}
+				.collapsible-header.is-open {
+					@apply bg-warning/20 text-warning;
+				}
+			}
+			&.is-danger {
+				@apply border border-danger/30;
+				.collapsible-header:hover {
+					@apply bg-danger/10;
+				}
+				.collapsible-header.is-open {
+					@apply bg-danger/20 text-danger;
+				}
+			}
+			&.is-surface {
+				@apply border border-on-surface/30;
+				.collapsible-header:hover {
+					@apply bg-surface/50;
+				}
+				.collapsible-header.is-open {
+					@apply bg-surface text-on-surface;
+				}
+			}
+			&.is-background {
+				@apply border border-background;
+				.collapsible-header:hover {
+					@apply bg-background/30;
+				}
+				.collapsible-header.is-open {
+					@apply bg-background;
+				}
+			}
+		}
 	}
 }

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/divider.css

@@ -1,24 +1,26 @@
 @layer components {
 	.divider-horizontal {
+		--divider-gap: 1rem;
 		@apply flex items-center w-full;
+		gap: var(--divider-gap);
 		&:before,
 		&:after {
 			@apply content-[''] h-px flex-1 bg-muted;
 		}
-		& > * {
-			@apply px-4;
+		&:empty {
+			gap: 0;
 		}
 	}
 	.divider-vertical {
+		--divider-gap: 1rem;
 		@apply flex flex-col items-center h-full;
-
+		gap: var(--divider-gap);
 		&:before,
 		&:after {
 			@apply content-[''] w-px flex-1 bg-muted;
 		}
-
-		& > * {
-			@apply py-4;
+		&:empty {
+			gap: 0;
 		}
 	}
 

package/dist/display/css/empty.css

@@ -4,5 +4,12 @@
 		.empty-icon {
 			@apply max-h-64 w-full;
 		}
+		.empty-action {
+			@apply inline-flex items-center justify-center px-4 py-2 rounded-lg;
+			@apply text-sm font-medium transition-all duration-200;
+			@apply bg-primary/10 text-primary;
+			@apply hover:bg-primary/20 focus:outline-none focus:ring-2 focus:ring-primary/50;
+			@apply cursor-pointer no-underline;
+		}
 	}
 }