ui-svelte 0.2.11 → 0.2.12

package/dist/control/Video.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import {
 		MaximizeSquareMinimalisticLinearIcon,
-		Pause24RegularIcon,
+		PauseFilledIcon,
 		PictureInPicture24RegularIcon,
-		Play24RegularIcon,
+		PlayFilledIcon,
 		Speaker24RegularIcon,
 		SpeakerMute24RegularIcon
 	} from '../icons/index.js';
-	import { Icon, Slider } from '../index.js';
+	import { Chip, Icon, IconButton, Slider } from '../index.js';
 	import { cn } from '../utils/class-names.js';
 	import Hls from 'hls.js';
 
@@ -17,15 +17,24 @@
 		poster?: string;
 		aspect?: 'horizontal' | 'vertical' | 'square';
 		class?: string;
+		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger';
 	};
 
-	let { src, poster, autoplay, aspect = 'horizontal', class: className }: Props = $props();
+	let {
+		src,
+		poster,
+		autoplay,
+		aspect = 'horizontal',
+		class: className,
+		color = 'primary'
+	}: Props = $props();
 
 	let videoElement: HTMLVideoElement | null = $state(null);
 
 	let showControls = $state(false);
 	let showVolume = $state(false);
 	let videoParams = $state({
+		// svelte-ignore state_referenced_locally
 		src,
 		time: 0,
 		duration: 0,
@@ -37,6 +46,16 @@
 		volume: 1
 	});
 
+	const colors = {
+		primary: 'is-primary',
+		secondary: 'is-secondary',
+		muted: 'is-muted',
+		success: 'is-success',
+		info: 'is-info',
+		warning: 'is-warning',
+		danger: 'is-danger'
+	};
+
 	const setSource = () => {
 		if (src.includes('.m3u8')) {
 			if (Hls.isSupported() && videoElement) {
@@ -156,18 +175,17 @@
 		<!-- svelte-ignore a11y_consider_explicit_label -->
 		<div class={cn('video-control-actions', showControls ? 'visible' : 'invisible')}>
 			<div class="video-actions-start">
-				<button class="video-btn" onclick={togglePlay}>
-					{#if videoParams.paused}
-						<Icon icon={Play24RegularIcon} class="video-btn-icon" />
-					{:else}
-						<Icon icon={Pause24RegularIcon} class="video-btn-icon" />
-					{/if}
-				</button>
-				<div class="video-btn">
-					<span class="video-duration-info"
-						>{videoParams.formattedTime} / {videoParams.formattedDuration}</span
-					>
-				</div>
+				<IconButton
+					onclick={togglePlay}
+					icon={videoParams.paused ? PlayFilledIcon : PauseFilledIcon}
+					{color}
+					variant="overlay"
+					size="sm"
+				/>
+
+				<Chip variant="overlay" {color}>
+					{videoParams.formattedTime} / {videoParams.formattedDuration}
+				</Chip>
 			</div>
 			<div class="video-actions-end">
 				<!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -192,20 +210,28 @@
 							/>
 						</div>
 					{/if}
-					<button class="video-btn" onclick={toggleMute}>
-						{#if videoParams.muted}
-							<Icon icon={Speaker24RegularIcon} class="video-btn-icon" />
-						{:else}
-							<Icon icon={SpeakerMute24RegularIcon} class="video-btn-icon" />
-						{/if}
-					</button>
+					<IconButton
+						onclick={toggleMute}
+						icon={videoParams.muted ? Speaker24RegularIcon : SpeakerMute24RegularIcon}
+						{color}
+						variant="overlay"
+						size="sm"
+					/>
 				</div>
-				<button class="video-btn" onclick={handleTogglePip}>
-					<Icon icon={PictureInPicture24RegularIcon} class="video-btn-icon" />
-				</button>
-				<button class="video-btn" onclick={handleToggleMaximize}>
-					<Icon icon={MaximizeSquareMinimalisticLinearIcon} class="video-btn-icon" />
-				</button>
+				<IconButton
+					onclick={handleTogglePip}
+					icon={PictureInPicture24RegularIcon}
+					{color}
+					variant="overlay"
+					size="sm"
+				/>
+				<IconButton
+					onclick={handleToggleMaximize}
+					icon={MaximizeSquareMinimalisticLinearIcon}
+					{color}
+					variant="overlay"
+					size="sm"
+				/>
 			</div>
 		</div>
 		<div class={cn('video-control-progress', showControls ? 'visible' : 'invisible')}>

package/dist/control/Video.svelte.d.ts

@@ -4,6 +4,7 @@ type Props = {
     poster?: string;
     aspect?: 'horizontal' | 'vertical' | 'square';
     class?: string;
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger';
 };
 declare const Video: import("svelte").Component<Props, {}, "">;
 type Video = ReturnType<typeof Video>;

package/dist/control/css/btn.css

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

package/dist/control/css/image.css

@@ -0,0 +1,56 @@
+@layer components {
+	.image {
+		@apply relative overflow-hidden rounded-box;
+	}
+
+	.image.horizontal {
+		@apply aspect-video;
+	}
+	.image.vertical {
+		@apply aspect-9/16;
+	}
+	.image.square {
+		@apply aspect-square;
+	}
+	.image.auto {
+		@apply aspect-auto;
+	}
+
+	.image.fit-cover .image-element {
+		@apply object-cover;
+	}
+	.image.fit-contain .image-element {
+		@apply object-contain;
+	}
+	.image.fit-fill .image-element {
+		@apply object-fill;
+	}
+	.image.fit-none .image-element {
+		@apply object-none;
+	}
+
+	.image-element {
+		@apply h-full w-full;
+	}
+
+	.image-skeleton {
+		@apply absolute inset-0 animate-pulse bg-muted/20;
+	}
+	.image-error {
+		@apply absolute inset-0 flex items-center justify-center bg-muted/10 text-on-muted text-sm;
+	}
+
+	.image-controls {
+		@apply absolute inset-x-0 bottom-0 z-20 flex flex-col p-2 transition-opacity duration-200;
+	}
+	.image-controls.visible {
+		@apply opacity-100;
+	}
+	.image-controls.invisible {
+		@apply opacity-0;
+	}
+
+	.image-actions {
+		@apply flex justify-end items-center gap-2;
+	}
+}