ui-svelte 0.2.12 → 0.2.14

package/README.md

@@ -1,4 +1,4 @@
-# SappsUI
+# Ui Svelte
 
 **A modern, accessible UI component library built for Svelte 5**
 
@@ -89,7 +89,7 @@ bun add ui-svelte
 
 ## 📖 Documentation
 
-For detailed documentation, examples, and interactive component previews, visit our [official documentation](https://ui.sappsdev.com).
+For detailed documentation, examples, and interactive component previews, visit our [official documentation](https://ui-svelte.sappsdev.com).
 
 ---
 

package/dist/charts/ArcChart.svelte

@@ -412,7 +412,6 @@
 					{@const isHovered = hoveredIndex === i}
 					{@const isDisabled = arc.disabled}
 
-					<!-- Background arc -->
 					<circle
 						cx={center}
 						cy={center}

package/dist/control/Fab.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { IconData } from '../display/Icon.svelte';
+	import { IconButton } from '../index.js';
+	import { cn } from '../utils/class-names.js';
+	import { Add24RegularIcon } from '../icons/index.js';
+	import { slide } from 'svelte/transition';
+
+	export type FabAction = {
+		icon: IconData;
+		label?: string;
+		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
+		onclick?: () => void;
+	};
+
+	type Props = {
+		class?: string;
+		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+		icon?: IconData;
+		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
+		variant?: 'solid' | 'soft';
+		size?: 'sm' | 'md' | 'lg' | 'xl';
+		actions?: FabAction[];
+		isBlock?: boolean;
+		offsetX?: string;
+		offsetY?: string;
+		onclick?: () => void;
+		children?: Snippet;
+	};
+
+	const {
+		class: className,
+		position = 'bottom-right',
+		icon = Add24RegularIcon,
+		color = 'primary',
+		variant = 'solid',
+		size = 'lg',
+		actions = [],
+		isBlock = false,
+		offsetX,
+		offsetY,
+		onclick,
+		children
+	}: Props = $props();
+
+	let isOpen = $state(false);
+
+	const positionClasses = {
+		'top-left': 'is-top-left',
+		'top-right': 'is-top-right',
+		'bottom-left': 'is-bottom-left',
+		'bottom-right': 'is-bottom-right'
+	};
+
+	function handleTriggerClick() {
+		if (actions.length > 0) {
+			isOpen = !isOpen;
+		}
+		onclick?.();
+	}
+
+	function handleActionClick(action: FabAction) {
+		action.onclick?.();
+		isOpen = false;
+	}
+</script>
+
+<div
+	class={cn('fab-container', positionClasses[position], !isBlock && 'is-fixed', className)}
+	style:--fab-offset-x={offsetX}
+	style:--fab-offset-y={offsetY}
+>
+	{#if isOpen && actions.length > 0}
+		<div class="fab-actions" transition:slide={{ duration: 200 }}>
+			{#each actions as action, index}
+				<div
+					class="fab-action"
+					style="--fab-action-index: {index}; --fab-action-delay: {index * 50}ms"
+					transition:slide={{ duration: 150, delay: index * 50 }}
+				>
+					{#if action.label}
+						<span class="fab-action-label">{action.label}</span>
+					{/if}
+					<IconButton
+						icon={action.icon}
+						color={action.color ?? 'muted'}
+						{variant}
+						size="md"
+						onclick={() => handleActionClick(action)}
+					/>
+				</div>
+			{/each}
+		</div>
+	{/if}
+
+	<div class="fab-trigger" class:is-open={isOpen}>
+		{#if children}
+			{@render children()}
+		{:else}
+			<IconButton {icon} {color} {variant} {size} onclick={handleTriggerClick} />
+		{/if}
+	</div>
+</div>

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

@@ -0,0 +1,25 @@
+import type { Snippet } from 'svelte';
+import type { IconData } from '../display/Icon.svelte';
+export type FabAction = {
+    icon: IconData;
+    label?: string;
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
+    onclick?: () => void;
+};
+type Props = {
+    class?: string;
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    icon?: IconData;
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
+    variant?: 'solid' | 'soft';
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    actions?: FabAction[];
+    isBlock?: boolean;
+    offsetX?: string;
+    offsetY?: string;
+    onclick?: () => void;
+    children?: Snippet;
+};
+declare const Fab: import("svelte").Component<Props, {}, "">;
+type Fab = ReturnType<typeof Fab>;
+export default Fab;

package/dist/control/Record.svelte

@@ -351,7 +351,6 @@
 
 <div class={baseClasses}>
 	{#if isReviewing}
-		<!-- REVIEW STATE: Play/Pause preview, waveform, time, confirm/discard -->
 		<IconButton
 			onclick={togglePlayback}
 			icon={isPlaying ? PauseFilledIcon : PlayFilledIcon}
@@ -394,7 +393,6 @@
 			/>
 		</div>
 	{:else if !isRecording}
-		<!-- IDLE STATE: Start recording button -->
 		<IconButton
 			onclick={startRecording}
 			icon={Microphone2LinearIcon}
@@ -416,7 +414,6 @@
 			</div>
 		</div>
 	{:else}
-		<!-- RECORDING STATE: Pause/Resume, waveform, time, discard, stop -->
 		{#if isPaused}
 			<IconButton
 				onclick={resumeRecording}

package/dist/control/ToggleTheme.svelte

@@ -10,7 +10,7 @@
 		class?: string;
 	};
 
-	let { color = 'muted', variant = 'ghost', size = 'md', class: className }: Props = $props();
+	let { color = 'primary', variant = 'ghost', size = 'md', class: className }: Props = $props();
 </script>
 
 <IconButton

package/dist/control/Video.svelte

@@ -204,6 +204,7 @@
 								min={0}
 								max={1}
 								step={0.1}
+								{color}
 								size="sm"
 								name="video-volume"
 								hideLabel
@@ -241,6 +242,7 @@
 				max={videoParams.duration}
 				bind:value={videoParams.time}
 				name="video-time"
+				{color}
 				hideLabel
 			/>
 		</div>

package/dist/control/css/btn.css

@@ -126,25 +126,25 @@
 
 	.btn.is-soft {
 		&.is-primary {
-			@apply bg-on-primary text-primary hover:bg-on-primary/80;
+			@apply bg-soft-primary text-primary hover:bg-soft-primary/60;
 		}
 		&.is-secondary {
-			@apply bg-on-secondary text-secondary hover:bg-on-secondary/80;
+			@apply bg-soft-secondary text-secondary hover:bg-soft-secondary/60;
 		}
 		&.is-muted {
-			@apply bg-muted text-on-muted hover:bg-muted/80;
+			@apply bg-soft-muted text-on-muted hover:bg-soft-muted/60;
 		}
 		&.is-success {
-			@apply bg-on-success text-success hover:bg-on-success/80;
+			@apply bg-soft-success text-success hover:bg-soft-success/60;
 		}
 		&.is-info {
-			@apply bg-on-info text-info hover:bg-on-info/80;
+			@apply bg-soft-info text-info hover:bg-soft-info/60;
 		}
 		&.is-warning {
-			@apply bg-on-warning text-warning hover:bg-on-warning/80;
+			@apply bg-soft-warning text-warning hover:bg-soft-warning/60;
 		}
 		&.is-danger {
-			@apply bg-on-danger text-danger hover:bg-on-danger/80;
+			@apply bg-soft-danger text-danger hover:bg-soft-danger/60;
 		}
 	}
 
@@ -156,7 +156,7 @@
 			@apply bg-secondary text-on-secondary hover:bg-secondary/80;
 		}
 		&.is-muted {
-			@apply bg-on-muted text-muted hover:bg-on-muted/80;
+			@apply bg-muted text-on-muted hover:bg-muted/80;
 		}
 		&.is-success {
 			@apply bg-success text-on-success hover:bg-success/80;
@@ -180,7 +180,7 @@
 			@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;
+			@apply inset-ring-2 inset-ring-muted text-on-muted hover:bg-muted hover:text-on-muted;
 		}
 		&.is-success {
 			@apply inset-ring-2 inset-ring-success text-success hover:bg-success hover:text-on-success;
@@ -204,7 +204,7 @@
 			@apply text-secondary hover:bg-secondary hover:text-on-secondary;
 		}
 		&.is-muted {
-			@apply text-on-muted hover:bg-on-muted hover:text-muted;
+			@apply text-on-muted hover:bg-muted hover:text-on-muted;
 		}
 		&.is-success {
 			@apply text-success hover:bg-success hover:text-on-success;
@@ -222,25 +222,25 @@
 
 	.btn.is-overlay {
 		&.is-primary {
-			@apply bg-on-primary/60 text-primary hover:bg-on-primary/80;
+			@apply bg-overlay text-on-overlay hover:bg-primary hover:text-on-primary;
 		}
 		&.is-secondary {
-			@apply bg-on-secondary/60 text-secondary hover:bg-on-secondary/80;
+			@apply bg-overlay text-on-overlay hover:bg-secondary hover:text-on-secondary;
 		}
 		&.is-muted {
-			@apply bg-muted/60 text-on-muted hover:bg-muted/80;
+			@apply bg-overlay text-on-overlay hover:bg-muted hover:text-on-muted;
 		}
 		&.is-success {
-			@apply bg-on-success/60 text-success hover:bg-on-success/80;
+			@apply bg-overlay text-on-overlay hover:bg-success hover:text-on-success;
 		}
 		&.is-info {
-			@apply bg-on-info/60 text-info hover:bg-on-info/80;
+			@apply bg-overlay text-on-overlay hover:bg-info hover:text-on-info;
 		}
 		&.is-warning {
-			@apply bg-on-warning/60 text-warning hover:bg-on-warning/80;
+			@apply bg-overlay text-on-overlay hover:bg-warning hover:text-on-warning;
 		}
 		&.is-danger {
-			@apply bg-on-danger/60 text-danger hover:bg-on-danger/80;
+			@apply bg-overlay text-on-overlay hover:bg-danger hover:text-on-danger;
 		}
 	}
 

package/dist/control/css/fab.css

@@ -0,0 +1,84 @@
+@layer components {
+	.fab-container {
+		--fab-offset-x: 1rem;
+		--fab-offset-y: 1rem;
+
+		@apply absolute z-50 flex flex-col items-center;
+
+		&.is-fixed {
+			@apply fixed;
+		}
+
+		&.is-top-left {
+			top: var(--fab-offset-y);
+			left: var(--fab-offset-x);
+			@apply flex-col-reverse;
+			.fab-actions {
+				@apply flex-col-reverse mt-3;
+			}
+			.fab-action {
+				@apply flex-row-reverse;
+				.fab-action-label {
+					@apply ml-0 mr-3;
+				}
+			}
+		}
+
+		&.is-top-right {
+			top: var(--fab-offset-y);
+			right: var(--fab-offset-x);
+			@apply flex-col-reverse;
+			.fab-actions {
+				@apply flex-col-reverse mt-3;
+			}
+		}
+
+		&.is-bottom-left {
+			bottom: var(--fab-offset-y);
+			left: var(--fab-offset-x);
+			.fab-action {
+				@apply flex-row-reverse;
+				.fab-action-label {
+					@apply ml-0 mr-3;
+				}
+			}
+		}
+
+		&.is-bottom-right {
+			bottom: var(--fab-offset-y);
+			right: var(--fab-offset-x);
+		}
+	}
+
+	.fab-trigger {
+		@apply transition-transform duration-300;
+
+		&.is-open {
+			@apply rotate-45;
+		}
+	}
+
+	.fab-actions {
+		@apply flex flex-col gap-3 mb-3;
+	}
+
+	.fab-action {
+		@apply flex items-center justify-end;
+		animation: fab-action-appear 0.2s ease-out forwards;
+		animation-delay: var(--fab-action-delay, 0ms);
+		opacity: 0;
+		transform: scale(0.8) translateY(10px);
+	}
+
+	@keyframes fab-action-appear {
+		to {
+			opacity: 1;
+			transform: scale(1) translateY(0);
+		}
+	}
+
+	.fab-action-label {
+		@apply ml-3 px-3 py-1.5 text-sm font-medium whitespace-nowrap;
+		@apply bg-surface text-on-surface rounded-ui shadow-md;
+	}
+}

package/dist/control/css/media.css

@@ -6,25 +6,25 @@
 
 		&.is-soft {
 			&.is-primary {
-				@apply bg-on-primary text-primary;
+				@apply bg-soft-primary text-primary;
 			}
 			&.is-secondary {
-				@apply bg-on-secondary text-secondary;
+				@apply bg-soft-secondary text-secondary;
 			}
 			&.is-muted {
-				@apply bg-muted text-on-muted;
+				@apply bg-soft-muted text-on-muted;
 			}
 			&.is-success {
-				@apply bg-on-success text-success;
+				@apply bg-soft-success text-success;
 			}
 			&.is-info {
-				@apply bg-on-info text-info;
+				@apply bg-soft-info text-info;
 			}
 			&.is-warning {
-				@apply bg-on-warning text-warning;
+				@apply bg-soft-warning text-warning;
 			}
 			&.is-danger {
-				@apply bg-on-danger text-danger;
+				@apply bg-soft-danger text-danger;
 			}
 		}
 

package/dist/control/css/toggle-group.css

@@ -56,12 +56,8 @@
 		@apply flex-1;
 	}
 
-	/* ===================== */
-	/* Soft Variant (default) */
-	/* ===================== */
-
 	.toggle-group.is-soft {
-		@apply bg-muted;
+		@apply bg-soft-muted;
 	}
 
 	.toggle-group.is-soft .toggle-group-item:not(.is-active) {
@@ -100,10 +96,6 @@
 		@apply bg-danger text-on-danger;
 	}
 
-	/* ===================== */
-	/* Solid Variant */
-	/* ===================== */
-
 	.toggle-group.is-solid.is-primary {
 		@apply bg-on-primary;
 	}
@@ -188,10 +180,6 @@
 		@apply bg-danger text-on-danger;
 	}
 
-	/* ===================== */
-	/* Outlined Variant */
-	/* ===================== */
-
 	.toggle-group.is-outlined {
 		@apply bg-transparent inset-ring inset-ring-muted;
 	}
@@ -228,10 +216,6 @@
 		@apply bg-danger text-on-danger;
 	}
 
-	/* ===================== */
-	/* Ghost Variant */
-	/* ===================== */
-
 	.toggle-group.is-ghost {
 		@apply bg-transparent p-0;
 	}