ui-svelte 0.1.0

package/dist/display/css/carousel.css

@@ -0,0 +1,156 @@
+@layer components {
+	.carousel {
+		@apply flex flex-col gap-4 relative w-full overflow-hidden;
+
+		&.is-vertical {
+			@apply flex-row;
+		}
+	}
+
+	.carousel-viewport {
+		@apply relative w-full overflow-hidden touch-pan-y;
+		cursor: grab;
+		min-height: 200px;
+
+		&:active {
+			cursor: grabbing;
+		}
+
+		&.is-dragging {
+			cursor: grabbing;
+		}
+	}
+
+	.carousel-container {
+		@apply flex transition-transform duration-300 ease-out;
+		will-change: transform;
+		height: 100%;
+
+		&.is-dragging {
+			@apply transition-none;
+		}
+
+		&.is-vertical {
+			@apply flex-col;
+		}
+	}
+
+	.carousel-slide {
+		@apply shrink-0 w-full select-none;
+		height: 100%;
+		user-select: none;
+		-webkit-user-select: none;
+		-moz-user-select: none;
+		-ms-user-select: none;
+
+		img {
+			@apply pointer-events-none;
+			-webkit-user-drag: none;
+		}
+	}
+
+	.carousel-controls {
+		@apply flex items-center justify-center gap-2;
+
+		&.is-vertical {
+			@apply flex-col;
+		}
+	}
+
+	.carousel-indicators {
+		@apply flex items-center justify-center gap-2;
+
+		&.is-vertical {
+			@apply flex-col;
+		}
+	}
+
+	.carousel-indicator {
+		@apply h-2 rounded-full transition-all cursor-pointer;
+		@apply bg-muted hover:bg-muted/70;
+
+		&.is-active {
+			@apply bg-primary;
+		}
+
+		&.is-sm {
+			@apply w-6;
+			&.is-active {
+				@apply w-8;
+			}
+		}
+
+		&.is-md {
+			@apply w-8;
+			&.is-active {
+				@apply w-12;
+			}
+		}
+
+		&.is-lg {
+			@apply w-10;
+			&.is-active {
+				@apply w-16;
+			}
+		}
+
+		&.is-dot {
+			@apply rounded-full;
+			&.is-sm {
+				@apply w-2 h-2;
+				&.is-active {
+					@apply w-2 h-2 scale-125;
+				}
+			}
+			&.is-md {
+				@apply w-2.5 h-2.5;
+				&.is-active {
+					@apply w-2.5 h-2.5 scale-125;
+				}
+			}
+			&.is-lg {
+				@apply w-3 h-3;
+				&.is-active {
+					@apply w-3 h-3 scale-125;
+				}
+			}
+		}
+	}
+
+	.carousel-nav {
+		@apply absolute top-1/2 -translate-y-1/2 z-10;
+		@apply flex items-center justify-center rounded-full;
+		@apply bg-surface/90 text-on-surface hover:bg-primary hover:text-on-primary;
+		@apply border border-muted shadow-sm backdrop-blur-sm;
+		@apply transition-all opacity-0 pointer-events-none;
+		@apply disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-surface/90 disabled:hover:text-on-surface;
+
+		.carousel:hover & {
+			@apply opacity-100 pointer-events-auto;
+		}
+
+		&.is-prev {
+			@apply left-4;
+		}
+
+		&.is-next {
+			@apply right-4;
+		}
+
+		&.is-sm {
+			@apply h-8 w-8 text-sm;
+		}
+
+		&.is-md {
+			@apply h-10 w-10 text-base;
+		}
+
+		&.is-lg {
+			@apply h-12 w-12 text-lg;
+		}
+	}
+
+	.carousel-counter {
+		@apply text-sm text-on-surface/70 text-center font-medium;
+	}
+}

package/dist/display/css/chat-box.css

@@ -0,0 +1,188 @@
+@layer components {
+	.chatbox {
+		@apply relative flex h-full w-full flex-col overflow-hidden rounded-ui;
+		@apply bg-surface;
+	}
+
+	.chatbox-header {
+		@apply flex items-center justify-between gap-3 border-b border-muted px-4 py-3;
+		@apply bg-background text-on-background;
+	}
+
+	.chatbox-header-start {
+		@apply flex items-center gap-3;
+	}
+
+	.chatbox-header-center {
+		@apply flex flex-1 flex-col items-start gap-0.5;
+	}
+
+	.chatbox-header-name {
+		@apply text-sm font-semibold leading-none text-on-surface;
+	}
+
+	.chatbox-header-status {
+		@apply text-xs leading-none text-on-muted;
+	}
+
+	.chatbox-header-end {
+		@apply flex items-center gap-2;
+	}
+
+	.chatbox-messages {
+		@apply flex flex-1 flex-col gap-2 overflow-y-auto px-4 py-4;
+		@apply bg-surface;
+	}
+
+	.chatbox-messages::-webkit-scrollbar {
+		@apply w-1.5;
+	}
+
+	.chatbox-messages::-webkit-scrollbar-track {
+		@apply bg-transparent;
+	}
+
+	.chatbox-messages::-webkit-scrollbar-thumb {
+		@apply rounded-full bg-muted/30;
+	}
+
+	.chatbox-messages::-webkit-scrollbar-thumb:hover {
+		@apply bg-muted/50;
+	}
+
+	.message-wrapper {
+		@apply flex w-full;
+		animation: messageSlideIn 0.2s ease-out;
+	}
+
+	.message-wrapper.own {
+		@apply justify-end;
+	}
+
+	.message-wrapper:not(.own) {
+		@apply justify-start;
+	}
+
+	@keyframes messageSlideIn {
+		from {
+			opacity: 0;
+			transform: translateY(0.5rem);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	.message {
+		@apply relative max-w-[70%] rounded-2xl px-3 py-2;
+		@apply text-sm leading-relaxed;
+	}
+
+	.message:not(.own) {
+		@apply rounded-bl-md bg-surface text-on-surface;
+	}
+
+	.message.own {
+		@apply rounded-br-md;
+	}
+
+	.message-content {
+		@apply mb-1 whitespace-pre-wrap wrap-break-word leading-relaxed;
+	}
+
+	.message-meta {
+		@apply flex items-center justify-end gap-1;
+	}
+
+	.message-time {
+		@apply text-[10px] opacity-70;
+	}
+
+	.message-status {
+		@apply text-xs opacity-80;
+	}
+
+	.message-status-read {
+		@apply text-info;
+	}
+
+	.message-image {
+		@apply mb-1 block max-w-full rounded-lg;
+	}
+
+	.message-file {
+		@apply flex items-center gap-2 py-1;
+	}
+
+	.message-file-icon {
+		@apply text-xl;
+	}
+
+	.message-file-name {
+		@apply text-sm;
+	}
+
+	/* Variantes de color para mensajes propios */
+	.chatbox-primary .message.own {
+		@apply bg-primary text-on-primary;
+	}
+
+	.chatbox-secondary .message.own {
+		@apply bg-secondary text-on-secondary;
+	}
+
+	.chatbox-success .message.own {
+		@apply bg-success text-on-success;
+	}
+
+	.chatbox-info .message.own {
+		@apply bg-info text-on-info;
+	}
+
+	.chatbox-warning .message.own {
+		@apply bg-warning text-on-warning;
+	}
+
+	.chatbox-danger .message.own {
+		@apply bg-danger text-on-danger;
+	}
+
+	.chatbox-soft .message.own {
+		@apply bg-primary/10 text-primary;
+	}
+
+	.chatbox-outlined .message.own {
+		@apply border border-primary bg-transparent text-primary;
+	}
+
+	.chatbox-footer {
+		@apply border-t border-surface text-on-background p-2;
+	}
+
+	.chatbox-input {
+		@apply appearance-none w-full h-full outline-none;
+	}
+
+	.chatbox-input-wrapper {
+		@apply flex items-center gap-2 bg-background rounded-ui p-2;
+		box-shadow: 0 0 3px 0 var(--color-muted);
+	}
+
+	.chatbox-input-actions {
+		@apply flex items-center gap-1;
+	}
+
+	.chatbox-record-overlay {
+		@apply absolute inset-x-0 bottom-0 z-10;
+		@apply border-t border-muted bg-surface/95 backdrop-blur-sm;
+		@apply px-4 py-3;
+	}
+
+	.load-more-btn {
+		@apply mx-auto mb-2 block rounded-full px-4 py-2 text-xs font-medium;
+		@apply bg-surface text-on-surface shadow-sm transition-all;
+		@apply hover:shadow-md;
+		@apply disabled:cursor-not-allowed disabled:opacity-50;
+	}
+}

package/dist/display/css/chip.css

@@ -0,0 +1,91 @@
+@layer components {
+	.chip {
+		@apply relative flex items-center justify-center w-fit;
+		@appls font-medium whitespace-nowrap;
+		@apply rounded-ui outline-none;
+	}
+
+	.chip.is-sm {
+		@apply min-h-6 gap-2 px-2 text-xs;
+
+		.icon {
+			@apply h-4 w-auto;
+		}
+	}
+
+	.chip.is-md {
+		@apply min-h-8 gap-3 px-3 text-sm;
+
+		.icon {
+			@apply h-4 w-auto;
+		}
+	}
+
+	.chip.is-lg {
+		@apply min-h-10 gap-3 px-4 text-lg;
+
+		.icon {
+			@apply h-6 w-auto;
+		}
+	}
+
+	.chip.has-shadow {
+		@apply shadow-sm;
+	}
+
+	.chip.is-solid.is-primary {
+		@apply bg-primary text-on-primary;
+	}
+
+	.chip.is-solid.is-secondary {
+		@apply bg-secondary text-on-secondary;
+	}
+
+	.chip.is-solid.is-muted {
+		@apply bg-on-muted text-muted;
+	}
+
+	.chip.is-solid.is-success {
+		@apply bg-success text-on-success;
+	}
+
+	.chip.is-solid.is-warning {
+		@apply bg-warning text-on-warning;
+	}
+
+	.chip.is-solid.is-danger {
+		@apply bg-danger text-on-danger;
+	}
+
+	.chip.is-solid.is-info {
+		@apply bg-info text-on-info;
+	}
+
+	.chip.is-primary {
+		@apply bg-on-primary text-primary;
+	}
+
+	.chip.is-secondary {
+		@apply bg-on-secondary text-secondary;
+	}
+
+	.chip.is-muted {
+		@apply bg-muted text-on-muted;
+	}
+
+	.chip.is-success {
+		@apply bg-on-success text-success;
+	}
+
+	.chip.is-warning {
+		@apply bg-on-warning text-warning;
+	}
+
+	.chip.is-danger {
+		@apply bg-on-danger text-danger;
+	}
+
+	.chip.is-info {
+		@apply bg-on-info text-info;
+	}
+}

package/dist/display/css/code.css

@@ -0,0 +1,19 @@
+@layer components {
+	.code {
+		@apply relative inline-block w-full;
+		tab-size: 4;
+		-moz-tab-size: 4;
+	}
+	.code-content {
+		@apply size-full overflow-auto rounded-md;
+		background-color: inherit;
+	}
+
+	.code-info {
+		@apply absolute top-2 right-2 flex justify-end items-center gap-2;
+	}
+	.shiki {
+		@apply p-3 rounded-ui;
+		min-width: fit-content;
+	}
+}

package/dist/display/css/collapsible.css

@@ -0,0 +1,86 @@
+@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;
+				}
+			}
+		}
+
+		&.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;
+
+			.collapsible-start {
+				@apply flex items-center gap-3 flex-1;
+
+				.collapsible-icon {
+					@apply h-5 w-auto shrink-0;
+				}
+
+				.collapsible-label {
+					@apply font-medium text-sm;
+				}
+			}
+
+			.collapsible-end {
+				@apply flex items-center;
+
+				.collapsible-arrow {
+					@apply size-5 transition-transform duration-200 text-on-muted;
+					&.is-active {
+						@apply rotate-180;
+					}
+				}
+			}
+
+			&:hover:not(.is-disabled) {
+				.collapsible-arrow {
+					@apply text-on-surface;
+				}
+			}
+		}
+
+		.collapsible-content {
+			@apply px-4 py-3 text-sm text-on-surface/80;
+		}
+	}
+}

package/dist/display/css/divider.css

@@ -0,0 +1,54 @@
+@layer components {
+	.divider-horizontal {
+		@apply flex items-center w-full;
+		&:before,
+		&:after {
+			@apply content-[''] h-px flex-1 bg-muted;
+		}
+		& > * {
+			@apply px-4;
+		}
+	}
+	.divider-vertical {
+		@apply flex flex-col items-center h-full;
+
+		&:before,
+		&:after {
+			@apply content-[''] w-px flex-1 bg-muted;
+		}
+
+		& > * {
+			@apply py-4;
+		}
+	}
+
+	.divider-horizontal,
+	.divider-vertical {
+		&.divider-default,
+		&.divider-surface {
+			&:before,
+			&:after {
+				@apply bg-muted;
+			}
+		}
+
+		&.divider-primary {
+			&:before,
+			&:after {
+				@apply bg-primary;
+			}
+		}
+		&.divider-secondary {
+			&:before,
+			&:after {
+				@apply bg-secondary;
+			}
+		}
+		&.divider-muted {
+			&:before,
+			&:after {
+				@apply bg-on-muted;
+			}
+		}
+	}
+}

package/dist/display/css/empty.css

@@ -0,0 +1,8 @@
+@layer components {
+	.empty {
+		@apply flex flex-col items-center justify-center w-full gap-4 p-4 text-center;
+		.empty-icon {
+			@apply max-h-64 w-full;
+		}
+	}
+}