ui-svelte 0.1.0

package/dist/display/css/item.css

@@ -0,0 +1,149 @@
+@layer components {
+	.item {
+		@apply relative flex items-center gap-3 w-full;
+		@apply rounded-ui outline-none;
+		@apply transition-all duration-200;
+		@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;
+	}
+
+	.item.is-sm {
+		@apply p-2 gap-2;
+
+		.item-label {
+			@apply text-sm;
+		}
+
+		.item-description {
+			@apply text-xs;
+		}
+	}
+
+	.item.is-md {
+		@apply p-3 gap-3;
+
+		.item-label {
+			@apply text-base;
+		}
+
+		.item-description {
+			@apply text-sm;
+		}
+	}
+
+	.item.is-lg {
+		@apply p-4 gap-4;
+
+		.item-label {
+			@apply text-lg;
+		}
+
+		.item-description {
+			@apply text-base;
+		}
+	}
+
+	.item.is-ghost {
+		@apply bg-transparent;
+	}
+
+	.item.is-interactive {
+		@apply hover:bg-muted hover:text-on-muted;
+		@apply focus-visible:bg-muted;
+	}
+
+	.item.is-outlined {
+		@apply border border-muted bg-transparent;
+	}
+
+	.item.is-surface {
+		@apply bg-surface text-on-surface;
+	}
+
+	.item.is-primary.is-active {
+		@apply bg-on-primary text-primary;
+	}
+
+	.item.is-primary.is-solid.is-active {
+		@apply bg-primary text-on-primary;
+	}
+
+	.item.is-secondary.is-active {
+		@apply bg-on-secondary text-secondary;
+	}
+
+	.item.is-secondary.is-solid.is-active {
+		@apply bg-secondary text-on-secondary;
+	}
+
+	.item.is-muted.is-active {
+		@apply bg-muted text-on-muted;
+	}
+
+	.item.is-muted.is-solid.is-active {
+		@apply bg-on-muted text-muted;
+	}
+
+	.item.is-focused {
+		@apply bg-muted text-on-muted;
+	}
+
+	.item.is-disabled {
+		@apply opacity-50 cursor-not-allowed;
+		@apply pointer-events-none;
+	}
+
+	.item-body {
+		@apply flex flex-col gap-1 flex-1 min-w-0 text-left;
+	}
+
+	.item-label {
+		@apply font-medium leading-none;
+		@apply truncate;
+	}
+
+	.item-description {
+		@apply text-on-muted leading-none;
+		@apply truncate;
+	}
+
+	.item-actions {
+		@apply flex items-center justify-end gap-2;
+		@apply shrink-0;
+	}
+
+	.item.has-divider {
+		@apply border-b border-muted rounded-none;
+	}
+
+	.item.has-shadow {
+		@apply shadow-md shadow-muted;
+	}
+
+	.item.is-compact {
+		@apply py-1.5 px-2;
+	}
+
+	.item.is-compact .item-label {
+		@apply text-sm;
+	}
+
+	.item.is-compact .item-description {
+		@apply text-xs;
+	}
+
+	.item.has-icon-only {
+		@apply justify-center p-2;
+	}
+
+	.item.has-icon-only .item-body {
+		@apply hidden;
+	}
+}

package/dist/display/css/listbox.css

@@ -0,0 +1,24 @@
+@layer components {
+	.listbox {
+		@apply flex w-full flex-col gap-2;
+	}
+	.listbox-items {
+		@apply flex flex-1 w-full min-w-0 flex-col gap-1 overflow-y-auto scrollbar-hide;
+	}
+	.listbox-item {
+		@apply flex items-center gap-2 px-2 py-1 text-base select-none;
+		@apply outline-hidden overflow-hidden rounded-ui text-left w-full;
+	}
+	.listbox-item-body {
+		@apply flex flex-col w-full;
+	}
+	.listbox-item-label {
+		@apply text-sm;
+	}
+	.listbox-item-description {
+		@apply text-xs;
+	}
+	.listbox-item-check {
+		@apply ml-auto h-4 w-4;
+	}
+}

package/dist/display/css/marquee.css

@@ -0,0 +1,138 @@
+@layer components {
+	.marquee {
+		@apply relative w-full overflow-hidden;
+
+		&.is-vertical {
+			@apply h-full w-auto;
+		}
+	}
+
+	.marquee-viewport {
+		@apply relative w-full overflow-hidden;
+
+		&.is-vertical {
+			@apply h-full w-auto;
+		}
+	}
+
+	.marquee-container {
+		@apply flex gap-0 w-max;
+		will-change: transform;
+
+		&.is-animating {
+			animation: marquee-scroll var(--marquee-duration) linear infinite;
+		}
+
+		&.is-paused {
+			animation-play-state: paused;
+		}
+
+		&.is-vertical {
+			@apply flex-col h-max w-auto;
+
+			&.is-animating {
+				animation: marquee-scroll-vertical var(--marquee-duration) linear infinite;
+			}
+		}
+
+		&.is-reverse {
+			animation-direction: reverse;
+		}
+	}
+
+	.marquee-content {
+		@apply flex shrink-0 gap-0;
+
+		&.is-vertical {
+			@apply flex-col;
+		}
+	}
+
+	.marquee-item {
+		@apply shrink-0 flex items-center justify-center;
+		user-select: none;
+		-webkit-user-select: none;
+		-moz-user-select: none;
+		-ms-user-select: none;
+
+		img {
+			@apply pointer-events-none;
+			-webkit-user-drag: none;
+		}
+	}
+
+	/* Animaciones */
+	@keyframes marquee-scroll {
+		0% {
+			transform: translateX(0);
+		}
+		100% {
+			transform: translateX(-50%);
+		}
+	}
+
+	@keyframes marquee-scroll-vertical {
+		0% {
+			transform: translateY(0);
+		}
+		100% {
+			transform: translateY(-50%);
+		}
+	}
+
+	/* Variantes de velocidad */
+	.marquee-container {
+		&.is-slow {
+			--marquee-duration: 40s;
+		}
+
+		&.is-normal {
+			--marquee-duration: 20s;
+		}
+
+		&.is-fast {
+			--marquee-duration: 10s;
+		}
+	}
+
+	/* Efecto de fade en los bordes */
+	.marquee {
+		&.has-fade {
+			&::before,
+			&::after {
+				@apply absolute top-0 z-10 pointer-events-none;
+				content: '';
+				width: 100px;
+				height: 100%;
+			}
+
+			&::before {
+				@apply left-0;
+				background: linear-gradient(to right, var(--fade-color, white), transparent);
+			}
+
+			&::after {
+				@apply right-0;
+				background: linear-gradient(to left, var(--fade-color, white), transparent);
+			}
+
+			&.is-vertical {
+				&::before,
+				&::after {
+					width: 100%;
+					height: 100px;
+				}
+
+				&::before {
+					@apply top-0 left-0;
+					background: linear-gradient(to bottom, var(--fade-color, white), transparent);
+				}
+
+				&::after {
+					@apply bottom-0 left-0 top-auto;
+					background: linear-gradient(to top, var(--fade-color, white), transparent);
+				}
+			}
+		}
+	}
+}

package/dist/display/css/section.css

@@ -0,0 +1,85 @@
+@layer components {
+	.section {
+		@apply w-full flex flex-col relative;
+
+		&:has(> .section-cover) {
+			@apply overflow-hidden bg-transparent! text-white! text-shadow-sm! z-0;
+		}
+
+		.section-cover {
+			@apply absolute inset-0 object-cover size-full -z-10;
+		}
+
+		.section-overlay {
+			@apply absolute inset-0 bg-overlay size-full -z-10;
+		}
+
+		.section-body {
+			@apply w-full column p-3 gap-3;
+		}
+	}
+
+	.section.is-primary {
+		@apply bg-on-primary text-primary;
+	}
+
+	.section.is-primary.is-solid {
+		@apply bg-primary text-on-primary;
+	}
+
+	.section.is-secondary {
+		@apply bg-on-secondary text-secondary;
+	}
+
+	.section.is-secondary.is-solid {
+		@apply bg-secondary text-on-secondary;
+	}
+
+	.section.is-muted {
+		@apply bg-muted text-on-muted;
+	}
+
+	.section.is-muted.is-solid {
+		@apply bg-on-muted text-muted;
+	}
+
+	.section.is-success {
+		@apply bg-on-success text-success;
+	}
+
+	.section.is-success.is-solid {
+		@apply bg-success text-on-success;
+	}
+
+	.section.is-info {
+		@apply bg-on-info text-info;
+	}
+
+	.section.is-info.is-solid {
+		@apply bg-info text-on-info;
+	}
+
+	.section.is-warning {
+		@apply bg-on-warning text-warning;
+	}
+
+	.section.is-warning.is-solid {
+		@apply bg-warning text-on-warning;
+	}
+
+	.section.is-danger {
+		@apply bg-on-danger text-danger;
+	}
+
+	.section.is-danger.is-solid {
+		@apply bg-danger text-on-danger;
+	}
+
+	.section.is-surface {
+		@apply bg-surface text-on-surface;
+	}
+
+	.section.is-ghost {
+		@apply bg-transparent;
+	}
+}