ui-svelte 0.1.0

package/dist/control/css/btn.css

@@ -0,0 +1,206 @@
+@layer components {
+	.btn {
+		@apply relative flex items-center justify-center w-fit flex-nowrap;
+		@appls font-medium whitespace-nowrap;
+		@apply rounded-ui outline-none;
+		@apply cursor-pointer select-none;
+		@apply transition-all duration-200 active:scale-[0.98];
+		@apply disabled:cursor-not-allowed disabled:opacity-50;
+		@apply disabled:transition-none disabled:active:scale-100;
+	}
+
+	.btn-loading {
+		@apply absolute inset-0 flex items-center justify-center;
+	}
+
+	.btn.is-xs:not(.is-icon) {
+		@apply h-6 gap-2 px-2 text-xs;
+
+		.icon {
+			@apply h-4 w-auto;
+		}
+
+		.loading-icon {
+			@apply h-6 w-auto;
+		}
+	}
+
+	.btn.is-sm:not(.is-icon) {
+		@apply h-8 gap-2 px-2 text-xs;
+
+		.icon {
+			@apply h-4 w-auto;
+		}
+
+		.loading-icon {
+			@apply h-8 w-auto;
+		}
+	}
+
+	.btn.is-md:not(.is-icon) {
+		@apply h-10 gap-3 px-3 text-sm;
+
+		.icon {
+			@apply h-5 w-auto;
+		}
+
+		.loading-icon {
+			@apply h-10 w-auto;
+		}
+	}
+
+	.btn.is-lg:not(.is-icon) {
+		@apply h-12 gap-3 px-4 text-lg;
+
+		.icon {
+			@apply h-6 w-auto;
+		}
+
+		.loading-icon {
+			@apply h-12 w-auto;
+		}
+	}
+
+	.btn.is-icon.is-xs {
+		@apply h-6 w-6;
+
+		.icon {
+			@apply h-4 w-4;
+		}
+
+		.loading-icon {
+			@apply h-5 w-5;
+		}
+	}
+
+	.btn.is-icon.is-sm {
+		@apply h-8 w-8;
+
+		.icon {
+			@apply h-5 w-5;
+		}
+
+		.loading-icon {
+			@apply h-6 w-6;
+		}
+	}
+
+	.btn.is-icon.is-md {
+		@apply h-10 w-10;
+
+		.icon {
+			@apply h-6 w-6;
+		}
+
+		.loading-icon {
+			@apply h-8 w-8;
+		}
+	}
+
+	.btn.is-icon.is-lg {
+		@apply h-12 w-12;
+
+		.icon {
+			@apply h-8 w-8;
+		}
+
+		.loading-icon {
+			@apply h-10 w-10;
+		}
+	}
+
+	.btn.is-icon.is-xl {
+		@apply h-14 w-14;
+
+		.icon {
+			@apply h-10 w-10;
+		}
+
+		.loading-icon {
+			@apply h-12 w-12;
+		}
+	}
+
+	.btn.is-wide {
+		@apply w-full;
+	}
+
+	.btn.has-shadow {
+		@apply shadow-sm shadow-muted;
+	}
+
+	.btn:disabled {
+		@apply opacity-50;
+	}
+
+	.btn.is-primary {
+		@apply bg-on-primary text-primary hover:bg-on-primary/90;
+	}
+
+	.btn.is-solid.is-primary {
+		@apply bg-primary text-on-primary hover:bg-primary/90;
+	}
+
+	.btn.is-secondary {
+		@apply bg-on-secondary text-secondary hover:bg-on-secondary/90;
+	}
+
+	.btn.is-solid.is-secondary {
+		@apply bg-secondary text-on-secondary hover:bg-secondary/90;
+	}
+
+	.btn.is-muted {
+		@apply bg-muted text-on-muted hover:bg-muted/90;
+	}
+
+	.btn.is-solid.is-muted {
+		@apply bg-on-muted text-muted hover:bg-on-muted/90;
+	}
+
+	.btn.is-success {
+		@apply bg-on-success text-success hover:bg-on-success/90;
+	}
+
+	.btn.is-solid.is-success {
+		@apply bg-success text-on-success hover:bg-success/90;
+	}
+
+	.btn.is-info {
+		@apply bg-on-info text-info hover:bg-on-info/90;
+	}
+
+	.btn.is-solid.is-info {
+		@apply bg-info text-on-info hover:bg-info/90;
+	}
+
+	.btn.is-warning {
+		@apply bg-on-warning text-warning hover:bg-on-warning/90;
+	}
+
+	.btn.is-solid.is-warning {
+		@apply bg-warning text-on-warning hover:bg-warning/90;
+	}
+
+	.btn.is-danger {
+		@apply bg-on-danger text-danger hover:bg-on-danger/90;
+	}
+
+	.btn.is-solid.is-danger {
+		@apply bg-danger text-on-danger hover:bg-danger/90;
+	}
+
+	.btn.is-outlined {
+		@apply inset-ring inset-ring-muted text-on-muted hover:bg-muted;
+	}
+
+	.btn.is-ghost {
+		@apply text-on-muted hover:bg-muted;
+	}
+
+	.btn-close {
+		@apply absolute right-1 top-1;
+	}
+	.btn-close-icon {
+		@apply h-4 w-4 cursor-pointer;
+	}
+}

package/dist/control/css/media.css

@@ -0,0 +1,78 @@
+@layer components {
+	/* Base styles compartidos */
+	.media {
+		@apply relative flex items-center gap-3 rounded-ui;
+		@apply transition-colors duration-300 ease-in-out;
+		@apply p-3 max-w-md select-none;
+	}
+
+	.media-waveform {
+		@apply flex-1 h-10 flex items-center relative;
+	}
+
+	.media-waveform.clickable {
+		@apply cursor-pointer;
+	}
+
+	.media-loading {
+		@apply text-xs opacity-50;
+	}
+
+	.media-bars {
+		@apply flex items-center gap-0.5 w-full h-full;
+	}
+
+	.media-bar {
+		@apply flex-1 rounded-sm transition-all duration-100;
+		@apply min-h-1 bg-current opacity-30;
+	}
+
+	.media-bar.active {
+		@apply opacity-100;
+	}
+
+	.media-bar.recording {
+		@apply opacity-100 animate-pulse;
+	}
+
+	.media-time {
+		@apply shrink-0 text-sm font-medium min-w-10 text-right;
+	}
+
+	/* Variantes */
+	.media.primary {
+		@apply bg-primary text-on-primary;
+	}
+
+	.media.secondary {
+		@apply bg-secondary text-on-secondary;
+	}
+
+	.media.soft {
+		@apply bg-on-primary text-primary;
+	}
+
+	.media.outlined {
+		@apply inset-ring inset-ring-muted bg-background text-on-background;
+	}
+
+	.media.ghost {
+		@apply bg-transparent text-on-background;
+	}
+
+	.media.success {
+		@apply bg-success text-on-success;
+	}
+
+	.media.warning {
+		@apply bg-warning text-on-warning;
+	}
+
+	.media.info {
+		@apply bg-info text-on-info;
+	}
+
+	.media.danger {
+		@apply bg-danger text-on-danger;
+	}
+}

package/dist/control/css/video.css

@@ -0,0 +1,58 @@
+@layer components {
+	.video {
+		@apply relative aspect-video;
+		video {
+			@apply rounded-ui absolute z-0;
+		}
+	}
+	.video.horizontal {
+		@apply aspect-video;
+	}
+	.video.vertical {
+		@apply aspect-9/16;
+	}
+	.video.square {
+		@apply aspect-square;
+	}
+	.video-poster {
+		@apply absolute inset-0 z-10 h-full w-full object-cover;
+	}
+	.video-controls {
+		@apply absolute inset-x-0 bottom-0 w-full z-20 flex flex-col;
+	}
+	.video-control-play {
+		@apply flex justify-center items-center flex-1;
+	}
+	.video-control-actions {
+		@apply flex justify-between items-center w-full px-2 md:px-3 py-2;
+	}
+	.video-actions-start {
+		@apply flex justify-start items-center w-full gap-2;
+	}
+	.video-actions-center {
+		@apply flex-1 flex justify-center items-center w-full gap-2;
+	}
+	.video-actions-end {
+		@apply flex justify-end items-center w-full gap-2;
+	}
+	.video-control-progress {
+		@apply px-2 md:px-3 pb-2 rounded-b-lg pt-2;
+		@apply flex justify-between items-center gap-2;
+	}
+	.video-duration-info {
+		@apply text-sm text-white;
+	}
+	.video-btn {
+		@apply flex items-center justify-center gap-1 p-1;
+		@apply bg-black/30 hover:bg-black/50 rounded-ui cursor-pointer;
+	}
+	.video-btn-icon {
+		@apply size-5 text-white;
+	}
+	.video-volume {
+		@apply max-w-28 flex items-center;
+	}
+	.video-volume-wrapper {
+		@apply flex items-center h-full gap-2;
+	}
+}

package/dist/css/animations.css

@@ -0,0 +1,27 @@
+@utility fade-in {
+	animation: fade-in 0.6s ease-out;
+}
+
+@keyframes fade-in {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+@utility zoom-in {
+	animation: zoom-in 0.4s ease-out;
+}
+
+@keyframes zoom-in {
+	from {
+		opacity: 0;
+		transform: scale(0.8);
+	}
+	to {
+		opacity: 1;
+		transform: scale(1);
+	}
+}

package/dist/css/base.css

@@ -0,0 +1,192 @@
+@layer base {
+	body {
+		@apply h-dvh flex flex-col;
+		@apply bg-background text-on-background;
+	}
+
+	body:has(#popover) {
+		overflow: hidden !important;
+	}
+
+	body:has(#popover).had-scroll {
+		padding-right: var(--scrollbar-size, 6px) !important;
+	}
+
+	::-webkit-scrollbar {
+		width: var(--scrollbar-size, 6px);
+		height: var(--scrollbar-size, 6px);
+	}
+
+	::-webkit-scrollbar-track {
+		background: color-mix(in oklch, currentColor 20%, transparent);
+		box-sizing: border-box;
+	}
+
+	::-webkit-scrollbar-thumb {
+		background: color-mix(in oklch, currentColor 80%, transparent);
+		border-radius: 15px;
+	}
+
+	@supports not selector(::-webkit-scrollbar) {
+		* {
+			scrollbar-width: thin;
+			scrollbar-color: color-mix(in oklch, currentColor 80%, transparent)
+				color-mix(in oklch, currentColor 20%, transparent);
+		}
+
+		body {
+			scrollbar-color: color-mix(in oklch, currentColor 80%, transparent)
+				color-mix(in oklch, currentColor 20%, transparent);
+		}
+	}
+
+	h1 {
+		@apply text-4xl font-extrabold lg:text-5xl;
+	}
+
+	h2 {
+		@apply text-3xl font-semibold;
+	}
+
+	h3 {
+		@apply text-2xl font-semibold;
+	}
+
+	h4 {
+		@apply text-xl font-semibold;
+	}
+
+	h5 {
+		@apply text-lg font-semibold;
+	}
+
+	h6 {
+		@apply text-base font-semibold;
+	}
+
+	strong {
+		@apply font-semibold;
+	}
+
+	.snippet {
+		@apply relative rounded bg-muted text-on-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold;
+	}
+
+	.link {
+		@apply hover:text-primary underline underline-offset-4;
+	}
+
+	.tiny {
+		@apply text-xs font-medium leading-none;
+	}
+
+	.lead {
+		@apply text-lg;
+	}
+
+	.label {
+		@apply text-sm select-none font-medium;
+	}
+
+	.hero-title {
+		@apply text-4xl font-semibold leading-tight tracking-tight;
+		@apply md:text-5xl lg:text-6xl xl:text-7xl;
+	}
+
+	.hero-subtitle {
+		@apply text-lg font-light text-on-muted;
+		@apply md:text-xl lg:text-2xl;
+	}
+
+	blockquote {
+		@apply mt-2 border-l-2 pl-6 italic;
+	}
+
+	.prose {
+		h1 {
+			@apply scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl;
+		}
+
+		h2 {
+			@apply scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0;
+		}
+
+		h3 {
+			@apply scroll-m-20 text-2xl font-semibold tracking-tight;
+		}
+
+		h4 {
+			@apply scroll-m-20 text-xl font-semibold tracking-tight;
+		}
+
+		h5 {
+			@apply scroll-m-20 text-lg font-semibold tracking-tight;
+		}
+
+		h6 {
+			@apply scroll-m-20 text-base font-semibold tracking-tight;
+		}
+
+		p {
+			@apply leading-7 text-on-muted;
+			&:not(:first-child) {
+				@apply mt-2 md:mt-3;
+			}
+		}
+
+		ul {
+			@apply my-6 ml-6 list-disc space-y-2;
+		}
+
+		ol {
+			@apply my-6 ml-6 list-decimal space-y-2;
+		}
+
+		li {
+			@apply leading-7;
+			> ul,
+			> ol {
+				@apply my-2;
+			}
+		}
+
+		a {
+			@apply font-medium text-primary underline underline-offset-4 hover:text-primary/80 transition-colors;
+		}
+
+		code {
+			@apply relative rounded bg-muted text-on-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold;
+		}
+
+		pre {
+			@apply my-6 overflow-x-auto rounded-lg bg-muted text-on-muted p-4;
+			code {
+				@apply bg-transparent p-0;
+			}
+		}
+
+		blockquote {
+			@apply my-6 border-l-4 border-muted pl-6 italic text-on-muted;
+		}
+
+		hr {
+			@apply my-8 border-muted;
+		}
+
+		img {
+			@apply my-6 rounded-ui;
+		}
+
+		strong {
+			@apply font-semibold;
+		}
+
+		em {
+			@apply italic;
+		}
+	}
+
+	.icon {
+		@apply h-full w-auto;
+	}
+}

package/dist/css/utilities.css

@@ -0,0 +1,136 @@
+@utility scrollbar-hide {
+	scrollbar-width: none;
+	&::-webkit-scrollbar {
+		display: none;
+	}
+}
+
+@utility boxed {
+	@apply container mx-auto;
+}
+
+@utility row {
+	@apply flex flex-row;
+}
+
+@utility row-reverse {
+	@apply flex flex-row-reverse;
+}
+
+@utility wrap {
+	@apply flex flex-wrap;
+}
+
+@utility column {
+	@apply flex flex-col;
+}
+
+@utility column-reverse {
+	@apply flex flex-col-reverse;
+}
+
+@utility center {
+	@apply items-center justify-center;
+}
+
+@utility grid-1 {
+	@apply grid grid-cols-1;
+}
+@utility grid-2 {
+	@apply grid grid-cols-2;
+}
+@utility grid-3 {
+	@apply grid grid-cols-3;
+}
+@utility grid-4 {
+	@apply grid grid-cols-4;
+}
+@utility grid-5 {
+	@apply grid grid-cols-5;
+}
+@utility grid-6 {
+	@apply grid grid-cols-6;
+}
+@utility grid-7 {
+	@apply grid grid-cols-7;
+}
+@utility grid-8 {
+	@apply grid grid-cols-8;
+}
+@utility grid-10 {
+	@apply grid grid-cols-10;
+}
+@utility grid-12 {
+	@apply grid grid-cols-12;
+}
+
+/* Grid auto-fit (responsive) */
+@utility grid-auto-fit {
+	@apply grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))];
+}
+@utility grid-auto-fill {
+	@apply grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))];
+}
+
+/* Viewport Height Utilities */
+/* These utilities set the height to 100vh minus a specified rem value */
+
+@utility vh-8 {
+	height: calc(100vh - 2rem);
+}
+
+@utility vh-10 {
+	height: calc(100vh - 2.5rem);
+}
+
+@utility vh-12 {
+	height: calc(100vh - 3rem);
+}
+
+@utility vh-14 {
+	height: calc(100vh - 3.5rem);
+}
+
+@utility vh-16 {
+	height: calc(100vh - 4rem);
+}
+
+@utility vh-18 {
+	height: calc(100vh - 4.5rem);
+}
+
+@utility vh-20 {
+	height: calc(100vh - 5rem);
+}
+
+@utility vh-24 {
+	height: calc(100vh - 6rem);
+}
+
+@utility vh-28 {
+	height: calc(100vh - 7rem);
+}
+
+@utility vh-32 {
+	height: calc(100vh - 8rem);
+}
+
+@utility vh-36 {
+	height: calc(100vh - 9rem);
+}
+
+@utility vh-40 {
+	height: calc(100vh - 10rem);
+}
+
+@utility vh-48 {
+	height: calc(100vh - 12rem);
+}
+
+@utility vh-56 {
+	height: calc(100vh - 14rem);
+}
+
+@utility vh-64 {
+	height: calc(100vh - 16rem);
+}