ui-svelte 0.2.10 → 0.2.12

package/dist/display/css/item.css

@@ -1,115 +1,336 @@
 @layer components {
 	.item {
 		@apply relative flex items-center gap-3 w-full;
-		@apply rounded-ui outline-none;
-		@apply transition-all duration-200;
+		@apply rounded-box outline-none;
+		@apply transition-all duration-300;
 		@apply cursor-default select-none;
+
+		&.is-interactive {
+			@apply cursor-pointer;
+			@apply focus-visible:outline-none;
+			@apply active:scale-[0.98];
+			@apply disabled:cursor-not-allowed disabled:opacity-50;
+			@apply disabled:hover:bg-transparent disabled:active:scale-100;
+		}
 	}
 
-	.is-interactive {
-		@apply cursor-pointer;
-		@apply focus-visible:outline-none;
-		@apply active:scale-[0.98];
-		@apply disabled:cursor-not-allowed disabled:opacity-50;
-		@apply disabled:hover:bg-transparent disabled:active:scale-100;
+	.item {
+		&.is-sm {
+			@apply p-2 gap-2;
+
+			.icon {
+				@apply w-4 h-4;
+			}
+			.item-label {
+				@apply text-sm;
+			}
+			.item-description {
+				@apply text-xs;
+			}
+		}
+
+		&.is-md {
+			@apply p-3 gap-3;
+
+			.icon {
+				@apply w-5 h-5;
+			}
+			.item-label {
+				@apply text-base;
+			}
+			.item-description {
+				@apply text-sm;
+			}
+		}
+
+		&.is-lg {
+			@apply p-4 gap-4;
+
+			.icon {
+				@apply w-6 h-6;
+			}
+			.item-label {
+				@apply text-lg;
+			}
+			.item-description {
+				@apply text-base;
+			}
+		}
 	}
 
-	.item.is-sm {
-		@apply p-2 gap-2;
+	.item {
+		&.is-ghost {
+			@apply bg-transparent;
 
-		.icon {
-			@apply w-4 h-4;
+			&.is-interactive {
+				@apply hover:bg-muted/50;
+			}
 		}
 
-		.item-label {
-			@apply text-sm;
+		&.is-soft {
+			@apply bg-muted/30;
+
+			&.is-interactive {
+				@apply hover:bg-muted/50;
+			}
 		}
 
-		.item-description {
-			@apply text-xs;
+		&.is-outlined {
+			@apply border border-muted bg-transparent;
+
+			&.is-interactive {
+				@apply hover:bg-muted/30;
+			}
 		}
-	}
 
-	.item.is-md {
-		@apply p-3 gap-3;
+		&.is-solid {
+			@apply bg-muted text-on-muted;
 
-		.icon {
-			@apply w-5 h-5;
+			&.is-interactive {
+				@apply hover:bg-muted/80;
+			}
 		}
+	}
 
-		.item-label {
-			@apply text-base;
+	.item {
+		&.is-default {
+			&.is-interactive {
+				@apply hover:bg-muted hover:text-on-muted;
+				@apply focus-visible:bg-muted;
+			}
+
+			&.is-active {
+				@apply bg-muted text-on-muted;
+			}
 		}
 
-		.item-description {
-			@apply text-sm;
+		&.is-surface {
+			@apply bg-surface text-on-surface;
+
+			&.is-interactive {
+				@apply hover:bg-surface/80;
+			}
 		}
 	}
 
-	.item.is-lg {
-		@apply p-4 gap-4;
+	.item {
+		&.is-primary.is-ghost,
+		&.is-primary.is-soft {
+			&.is-active {
+				@apply bg-primary/20 text-primary;
+			}
+			&.is-interactive {
+				@apply hover:bg-primary/20 hover:text-primary;
+			}
+		}
 
-		.icon {
-			@apply w-6 h-6;
+		&.is-secondary.is-ghost,
+		&.is-secondary.is-soft {
+			&.is-active {
+				@apply bg-secondary/20 text-secondary;
+			}
+			&.is-interactive {
+				@apply hover:bg-secondary/20 hover:text-secondary;
+			}
 		}
 
-		.item-label {
-			@apply text-lg;
+		&.is-muted.is-ghost,
+		&.is-muted.is-soft {
+			&.is-active {
+				@apply bg-muted text-on-muted;
+			}
+			&.is-interactive {
+				@apply hover:bg-muted hover:text-on-muted;
+			}
 		}
 
-		.item-description {
-			@apply text-base;
+		&.is-success.is-ghost,
+		&.is-success.is-soft {
+			&.is-active {
+				@apply bg-success/20 text-success;
+			}
+			&.is-interactive {
+				@apply hover:bg-success/20 hover:text-success;
+			}
 		}
-	}
 
-	.item.is-ghost {
-		@apply bg-transparent;
-	}
+		&.is-info.is-ghost,
+		&.is-info.is-soft {
+			&.is-active {
+				@apply bg-info/20 text-info;
+			}
+			&.is-interactive {
+				@apply hover:bg-info/20 hover:text-info;
+			}
+		}
 
-	.item.is-interactive {
-		@apply hover:bg-muted hover:text-on-muted;
-		@apply focus-visible:bg-muted;
-	}
+		&.is-warning.is-ghost,
+		&.is-warning.is-soft {
+			&.is-active {
+				@apply bg-warning/20 text-warning;
+			}
+			&.is-interactive {
+				@apply hover:bg-warning/20 hover:text-warning;
+			}
+		}
 
-	.item.is-outlined {
-		@apply border border-muted bg-transparent;
+		&.is-danger.is-ghost,
+		&.is-danger.is-soft {
+			&.is-active {
+				@apply bg-danger/20 text-danger;
+			}
+			&.is-interactive {
+				@apply hover:bg-danger/20 hover:text-danger;
+			}
+		}
 	}
 
-	.item.is-surface {
-		@apply bg-surface text-on-surface;
-	}
+	.item {
+		&.is-primary.is-outlined {
+			@apply border-primary/50;
+
+			&.is-active {
+				@apply bg-primary/20 text-primary border-primary;
+			}
+			&.is-interactive {
+				@apply hover:bg-primary/20 hover:text-primary hover:border-primary;
+			}
+		}
 
-	.item.is-primary.is-active {
-		@apply bg-on-primary text-primary;
-	}
+		&.is-secondary.is-outlined {
+			@apply border-secondary/50;
 
-	.item.is-primary.is-solid.is-active {
-		@apply bg-primary text-on-primary;
-	}
+			&.is-active {
+				@apply bg-secondary/20 text-secondary border-secondary;
+			}
+			&.is-interactive {
+				@apply hover:bg-secondary/20 hover:text-secondary hover:border-secondary;
+			}
+		}
 
-	.item.is-secondary.is-active {
-		@apply bg-on-secondary text-secondary;
-	}
+		&.is-muted.is-outlined {
+			@apply border-muted;
 
-	.item.is-secondary.is-solid.is-active {
-		@apply bg-secondary text-on-secondary;
-	}
+			&.is-active {
+				@apply bg-muted text-on-muted;
+			}
+			&.is-interactive {
+				@apply hover:bg-muted hover:text-on-muted;
+			}
+		}
 
-	.item.is-muted.is-active {
-		@apply bg-muted text-on-muted;
-	}
+		&.is-success.is-outlined {
+			@apply border-success/50;
+
+			&.is-active {
+				@apply bg-success/20 text-success border-success;
+			}
+			&.is-interactive {
+				@apply hover:bg-success/20 hover:text-success hover:border-success;
+			}
+		}
+
+		&.is-info.is-outlined {
+			@apply border-info/50;
+
+			&.is-active {
+				@apply bg-info/20 text-info border-info;
+			}
+			&.is-interactive {
+				@apply hover:bg-info/20 hover:text-info hover:border-info;
+			}
+		}
+
+		&.is-warning.is-outlined {
+			@apply border-warning/50;
+
+			&.is-active {
+				@apply bg-warning/20 text-warning border-warning;
+			}
+			&.is-interactive {
+				@apply hover:bg-warning/20 hover:text-warning hover:border-warning;
+			}
+		}
+
+		&.is-danger.is-outlined {
+			@apply border-danger/50;
 
-	.item.is-muted.is-solid.is-active {
-		@apply bg-on-muted text-muted;
+			&.is-active {
+				@apply bg-danger/20 text-danger border-danger;
+			}
+			&.is-interactive {
+				@apply hover:bg-danger/20 hover:text-danger hover:border-danger;
+			}
+		}
 	}
 
-	.item.is-focused {
-		@apply bg-muted text-on-muted;
+	.item {
+		&.is-primary.is-solid {
+			@apply bg-primary text-on-primary;
+
+			&.is-interactive {
+				@apply hover:bg-primary/80;
+			}
+		}
+
+		&.is-secondary.is-solid {
+			@apply bg-secondary text-on-secondary;
+
+			&.is-interactive {
+				@apply hover:bg-secondary/80;
+			}
+		}
+
+		&.is-muted.is-solid {
+			@apply bg-on-muted text-muted;
+
+			&.is-interactive {
+				@apply hover:bg-on-muted/80;
+			}
+		}
+
+		&.is-success.is-solid {
+			@apply bg-success text-on-success;
+
+			&.is-interactive {
+				@apply hover:bg-success/80;
+			}
+		}
+
+		&.is-info.is-solid {
+			@apply bg-info text-on-info;
+
+			&.is-interactive {
+				@apply hover:bg-info/80;
+			}
+		}
+
+		&.is-warning.is-solid {
+			@apply bg-warning text-on-warning;
+
+			&.is-interactive {
+				@apply hover:bg-warning/80;
+			}
+		}
+
+		&.is-danger.is-solid {
+			@apply bg-danger text-on-danger;
+
+			&.is-interactive {
+				@apply hover:bg-danger/80;
+			}
+		}
 	}
 
-	.item.is-disabled {
-		@apply opacity-50 cursor-not-allowed;
-		@apply pointer-events-none;
+	.item {
+		&.is-focused {
+			@apply bg-muted text-on-muted;
+		}
+
+		&.is-disabled {
+			@apply opacity-50 cursor-not-allowed;
+			@apply pointer-events-none;
+		}
 	}
 
 	.item-body {
@@ -131,31 +352,32 @@
 		@apply shrink-0;
 	}
 
-	.item.has-divider {
-		@apply border-b border-muted rounded-none;
-	}
-
-	.item.has-shadow {
-		@apply shadow-md shadow-muted;
-	}
+	.item {
+		&.has-divider {
+			@apply border-b border-muted rounded-none;
+		}
 
-	.item.is-compact {
-		@apply py-1.5 px-2;
-	}
+		&.has-shadow {
+			@apply shadow-md shadow-muted;
+		}
 
-	.item.is-compact .item-label {
-		@apply text-sm;
-	}
+		&.is-compact {
+			@apply py-1.5 px-2;
 
-	.item.is-compact .item-description {
-		@apply text-xs;
-	}
+			.item-label {
+				@apply text-sm;
+			}
+			.item-description {
+				@apply text-xs;
+			}
+		}
 
-	.item.has-icon-only {
-		@apply justify-center p-2;
-	}
+		&.has-icon-only {
+			@apply justify-center p-2;
 
-	.item.has-icon-only .item-body {
-		@apply hidden;
+			.item-body {
+				@apply hidden;
+			}
+		}
 	}
 }

package/dist/display/css/map.css

@@ -0,0 +1,164 @@
+@layer components {
+	.map {
+		@apply relative overflow-hidden;
+		border-radius: var(--radius-box);
+		width: var(--map-width, 100%);
+		height: var(--map-height, 400px);
+		min-height: var(--map-height, 400px);
+
+		&.is-primary {
+			--map-color: theme('colors.primary');
+		}
+		&.is-secondary {
+			--map-color: theme('colors.secondary');
+		}
+		&.is-muted {
+			--map-color: theme('colors.muted');
+		}
+		&.is-success {
+			--map-color: theme('colors.success');
+		}
+		&.is-info {
+			--map-color: theme('colors.info');
+		}
+		&.is-warning {
+			--map-color: theme('colors.warning');
+		}
+		&.is-danger {
+			--map-color: theme('colors.danger');
+		}
+	}
+
+	.map-container {
+		position: absolute !important;
+		top: 0 !important;
+		left: 0 !important;
+		right: 0 !important;
+		bottom: 0 !important;
+		width: 100% !important;
+		height: 100% !important;
+	}
+
+	.map-loading {
+		@apply absolute inset-0 z-50 flex items-center justify-center bg-surface/80;
+	}
+
+	.map-spinner {
+		@apply size-10 rounded-full border-4 border-muted border-t-primary animate-spin;
+	}
+
+	.map :global(.leaflet-container) {
+		@apply size-full;
+	}
+
+	.map :global(.leaflet-control-zoom) {
+		@apply border-none shadow-md rounded-ui overflow-hidden;
+	}
+
+	.map :global(.leaflet-control-zoom a) {
+		@apply bg-surface text-on-surface border-none;
+		@apply hover:bg-muted transition-colors duration-200;
+	}
+
+	.map :global(.leaflet-control-zoom-in) {
+		@apply border-b border-muted!;
+	}
+
+	.map :global(.leaflet-control-attribution) {
+		@apply hidden;
+	}
+
+	.map :global(.leaflet-control-scale-line) {
+		@apply bg-surface/80 border-on-surface/50 text-on-surface text-xs;
+	}
+
+	.map :global(.leaflet-popup-content-wrapper) {
+		@apply bg-surface text-on-surface rounded-ui shadow-lg;
+	}
+
+	.map :global(.leaflet-popup-tip) {
+		@apply bg-surface;
+	}
+
+	.map :global(.leaflet-popup-close-button) {
+		@apply text-on-surface/60 hover:text-on-surface;
+	}
+
+	.map :global(.leaflet-tooltip) {
+		@apply bg-surface text-on-surface border-none shadow-md rounded-ui px-2 py-1 text-sm;
+	}
+
+	.map :global(.leaflet-tooltip::before) {
+		@apply border-t-surface;
+	}
+
+	.map-location-btn {
+		@apply absolute z-1000 flex items-center justify-center;
+		@apply size-10 rounded-ui bg-surface shadow-md;
+		@apply border-none cursor-pointer;
+		@apply text-on-surface/70 hover:text-on-surface;
+		@apply transition-all duration-200;
+		bottom: 1rem;
+		right: 1rem;
+
+		svg {
+			@apply size-5;
+		}
+
+		&:hover {
+			@apply bg-surface shadow-lg;
+		}
+
+		&:disabled {
+			@apply cursor-wait;
+		}
+
+		&.is-locating {
+			@apply text-primary;
+		}
+	}
+
+	.map-location-spinner {
+		@apply animate-spin;
+	}
+
+	.map :global(.map-location-marker) {
+		background: transparent !important;
+		border: none !important;
+		width: 24px !important;
+		height: 24px !important;
+		display: flex !important;
+		align-items: center !important;
+		justify-content: center !important;
+	}
+
+	.map :global(.map-location-dot) {
+		width: 16px;
+		height: 16px;
+		border-radius: 50%;
+		background-color: var(--location-color, theme('colors.primary'));
+		border: 3px solid white;
+		box-shadow:
+			0 0 0 2px var(--location-color, theme('colors.primary')),
+			0 2px 8px rgba(0, 0, 0, 0.4);
+		animation: location-pulse 2s ease-out infinite;
+	}
+
+	@keyframes location-pulse {
+		0% {
+			box-shadow:
+				0 0 0 2px var(--location-color, theme('colors.primary')),
+				0 2px 8px rgba(0, 0, 0, 0.3);
+		}
+		50% {
+			box-shadow:
+				0 0 0 6px transparent,
+				0 2px 8px rgba(0, 0, 0, 0.3);
+		}
+		100% {
+			box-shadow:
+				0 0 0 2px var(--location-color, theme('colors.primary')),
+				0 2px 8px rgba(0, 0, 0, 0.3);
+		}
+	}
+}