yaxa-svelte 1.0.0

package/dist/components/elements/Meter.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	interface Props {
+		value: number;
+		min?: number;
+		max?: number;
+		label?: string;
+		valueLabel?: string;
+		color?: 'primary' | 'success' | 'warning' | 'error' | 'neutral';
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+		showValue?: boolean;
+		class?: string;
+	}
+
+	let {
+		value,
+		min = 0,
+		max = 100,
+		label,
+		valueLabel,
+		color = 'primary',
+		size = 'md',
+		showValue = true,
+		class: className = ''
+	}: Props = $props();
+
+	let percentage = $derived(
+		Math.min(100, Math.max(0, Math.round(((value - min) / (max - min)) * 100)))
+	);
+
+	let formattedValue = $derived(valueLabel || `${percentage}%`);
+
+	let heightClass = $derived.by(() => {
+		switch (size) {
+			case 'xs':
+				return 'h-1';
+			case 'sm':
+				return 'h-1.5';
+			case 'lg':
+				return 'h-3.5';
+			case 'md':
+			default:
+				return 'h-2.5';
+		}
+	});
+
+	let colorClass = $derived.by(() => {
+		switch (color) {
+			case 'success':
+				return 'bg-emerald-500';
+			case 'warning':
+				return 'bg-amber-500';
+			case 'error':
+				return 'bg-red-500';
+			case 'neutral':
+				return 'bg-neutral-600';
+			case 'primary':
+			default:
+				return 'bg-primary-600';
+		}
+	});
+</script>
+
+<div class="w-full space-y-1.5 {className}">
+	{#if label || showValue}
+		<div class="flex items-center justify-between text-sm">
+			{#if label}
+				<span class="font-medium text-neutral-700 dark:text-neutral-300">{label}</span>
+			{/if}
+			{#if showValue}
+				<span class="font-mono text-neutral-500 dark:text-neutral-400">{formattedValue}</span>
+			{/if}
+		</div>
+	{/if}
+
+	<div
+		class="relative w-full overflow-hidden rounded-full bg-neutral-200 dark:bg-neutral-800 {heightClass}"
+		role="meter"
+		aria-valuenow={value}
+		aria-valuemin={min}
+		aria-valuemax={max}
+	>
+		<div
+			class="h-full rounded-full transition-all duration-500 ease-out {colorClass}"
+			style="width: {percentage}%;"
+		></div>
+	</div>
+</div>

package/dist/components/elements/Meter.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    value: number;
+    min?: number;
+    max?: number;
+    label?: string;
+    valueLabel?: string;
+    color?: 'primary' | 'success' | 'warning' | 'error' | 'neutral';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    showValue?: boolean;
+    class?: string;
+}
+declare const Meter: import("svelte").Component<Props, {}, "">;
+type Meter = ReturnType<typeof Meter>;
+export default Meter;

package/dist/components/elements/Progress.svelte

@@ -0,0 +1,63 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from '../../utils/cn';
+
+	export const progressVariants = tv({
+		base: 'relative w-full overflow-hidden rounded-full bg-neutral-200 dark:bg-neutral-800',
+		variants: {
+			size: {
+				xs: 'h-1',
+				sm: 'h-1.5',
+				md: 'h-2.5',
+				lg: 'h-4'
+			},
+			color: {
+				primary: '[&>div]:bg-primary-600',
+				success: '[&>div]:bg-emerald-600',
+				warning: '[&>div]:bg-amber-600',
+				error: '[&>div]:bg-rose-600'
+			}
+		},
+		defaultVariants: {
+			size: 'md',
+			color: 'primary'
+		}
+	});
+
+	export type ProgressProps = VariantProps<typeof progressVariants> & {
+		value?: number;
+		max?: number;
+		class?: string;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		value,
+		max = 100,
+		size = 'md',
+		color = 'primary',
+		class: className = ''
+	}: ProgressProps = $props();
+
+	let percentage = $derived.by(() => {
+		if (value === undefined) return undefined;
+		return Math.min(100, Math.max(0, (value / max) * 100));
+	});
+</script>
+
+<div
+	class={progressVariants({ size, color, class: className })}
+	role="progressbar"
+	aria-valuenow={value}
+	aria-valuemin={0}
+	aria-valuemax={max}
+>
+	{#if percentage !== undefined}
+		<div
+			class="h-full rounded-full transition-all duration-300 ease-in-out"
+			style="width: {percentage}%"
+		></div>
+	{:else}
+		<div class="h-full w-1/3 animate-pulse rounded-full"></div>
+	{/if}
+</div>

package/dist/components/elements/Progress.svelte.d.ts

@@ -0,0 +1,49 @@
+import { type VariantProps } from '../../utils/cn';
+export declare const progressVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: "h-1";
+        sm: "h-1.5";
+        md: "h-2.5";
+        lg: "h-4";
+    };
+    color: {
+        primary: "[&>div]:bg-primary-600";
+        success: "[&>div]:bg-emerald-600";
+        warning: "[&>div]:bg-amber-600";
+        error: "[&>div]:bg-rose-600";
+    };
+}, undefined, "relative w-full overflow-hidden rounded-full bg-neutral-200 dark:bg-neutral-800", {
+    size: {
+        xs: "h-1";
+        sm: "h-1.5";
+        md: "h-2.5";
+        lg: "h-4";
+    };
+    color: {
+        primary: "[&>div]:bg-primary-600";
+        success: "[&>div]:bg-emerald-600";
+        warning: "[&>div]:bg-amber-600";
+        error: "[&>div]:bg-rose-600";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        xs: "h-1";
+        sm: "h-1.5";
+        md: "h-2.5";
+        lg: "h-4";
+    };
+    color: {
+        primary: "[&>div]:bg-primary-600";
+        success: "[&>div]:bg-emerald-600";
+        warning: "[&>div]:bg-amber-600";
+        error: "[&>div]:bg-rose-600";
+    };
+}, undefined>>;
+export type ProgressProps = VariantProps<typeof progressVariants> & {
+    value?: number;
+    max?: number;
+    class?: string;
+};
+declare const Progress: import("svelte").Component<ProgressProps, {}, "">;
+type Progress = ReturnType<typeof Progress>;
+export default Progress;

package/dist/components/elements/Skeleton.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	interface Props {
+		class?: string;
+	}
+
+	let { class: className = '' }: Props = $props();
+</script>
+
+<div
+	class="animate-pulse rounded-md bg-neutral-200 dark:bg-neutral-800 {className}"
+	aria-hidden="true"
+></div>

package/dist/components/elements/Skeleton.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    class?: string;
+}
+declare const Skeleton: import("svelte").Component<Props, {}, "">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;

package/dist/components/elements/Spinner.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	interface Props {
+		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+		class?: string;
+	}
+
+	let { size = 'md', class: className = '' }: Props = $props();
+
+	let sizeClasses = $derived.by(() => {
+		switch (size) {
+			case 'xs':
+				return 'w-3.5 h-3.5';
+			case 'sm':
+				return 'w-4 h-4';
+			case 'lg':
+				return 'w-6 h-6';
+			case 'xl':
+				return 'w-8 h-8';
+			case 'md':
+			default:
+				return 'w-5 h-5';
+		}
+	});
+</script>
+
+<svg
+	class="animate-spin text-current {sizeClasses} {className}"
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	aria-hidden="true"
+>
+	<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+	<path
+		class="opacity-75"
+		fill="currentColor"
+		d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+	></path>
+</svg>

package/dist/components/elements/Spinner.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    class?: string;
+}
+declare const Spinner: import("svelte").Component<Props, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;

package/dist/components/forms/Checkbox.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Icon from '../elements/Icon.svelte';
+
+	interface Props {
+		checked?: boolean;
+		label?: string;
+		description?: string;
+		disabled?: boolean;
+		name?: string;
+		value?: string;
+		'aria-label'?: string;
+		ariaLabel?: string;
+		class?: string;
+		onchange?: (checked: boolean) => void;
+		children?: Snippet;
+	}
+
+	let {
+		checked = $bindable(false),
+		label,
+		description,
+		disabled = false,
+		name,
+		value,
+		'aria-label': ariaLabelAttr,
+		ariaLabel,
+		class: className = '',
+		onchange,
+		children
+	}: Props = $props();
+</script>
+
+<label
+	class="relative flex items-start gap-3 select-none {disabled
+		? 'cursor-not-allowed opacity-60'
+		: 'cursor-pointer'} {className}"
+>
+	<div class="flex h-5 items-center">
+		<input
+			type="checkbox"
+			bind:checked
+			aria-label={ariaLabelAttr || ariaLabel || label}
+			onchange={(e) => {
+				const isChecked = (e.currentTarget as HTMLInputElement).checked;
+				if (onchange) onchange(isChecked);
+			}}
+			{disabled}
+			{name}
+			{value}
+			class="sr-only"
+		/>
+		<div
+			class="flex h-4.5 w-4.5 items-center justify-center rounded border transition-all duration-150 {checked
+				? 'border-primary-600 bg-primary-600 text-white shadow-xs'
+				: 'border-neutral-300 bg-white hover:border-neutral-400 dark:border-neutral-700 dark:bg-neutral-900'}"
+		>
+			{#if checked}
+				<Icon name="check" size="xs" />
+			{/if}
+		</div>
+	</div>
+
+	{#if label || description || children}
+		<div class="text-sm leading-5">
+			{#if label}
+				<span class="font-medium text-neutral-800 dark:text-neutral-200">{label}</span>
+			{/if}
+			{#if children}
+				{@render children()}
+			{/if}
+			{#if description}
+				<p class="text-sm text-neutral-500 dark:text-neutral-400">{description}</p>
+			{/if}
+		</div>
+	{/if}
+</label>

package/dist/components/forms/Checkbox.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    checked?: boolean;
+    label?: string;
+    description?: string;
+    disabled?: boolean;
+    name?: string;
+    value?: string;
+    'aria-label'?: string;
+    ariaLabel?: string;
+    class?: string;
+    onchange?: (checked: boolean) => void;
+    children?: Snippet;
+}
+declare const Checkbox: import("svelte").Component<Props, {}, "checked">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/components/forms/ColorPicker.svelte

@@ -0,0 +1,142 @@
+<script lang="ts">
+	import Popover from '../overlays/Popover.svelte';
+	import Icon from '../elements/Icon.svelte';
+
+	interface Props {
+		value?: string;
+		presets?: string[];
+		disabled?: boolean;
+		inline?: boolean;
+		class?: string;
+	}
+
+	const defaultPresets = [
+		'#ff3e00', // Svelte Flame
+		'#f59e0b', // Amber
+		'#10b981', // Emerald
+		'#0ea5e9', // Sky
+		'#8b5cf6', // Violet
+		'#f43f5e', // Rose
+		'#64748b', // Slate
+		'#18181b', // Dark
+		'#ffffff' // White
+	];
+
+	let {
+		value = $bindable('#ff3e00'),
+		presets = defaultPresets,
+		disabled = false,
+		inline = false,
+		class: className = ''
+	}: Props = $props();
+
+	let popoverOpen = $state(false);
+</script>
+
+{#if inline}
+	<div
+		class="inline-flex flex-col gap-3 rounded-xl border border-neutral-200 bg-white p-3 shadow-xs dark:border-neutral-800 dark:bg-neutral-900 {className}"
+	>
+		<!-- Swatches Grid -->
+		<div class="grid grid-cols-5 gap-1.5">
+			{#each presets as hex}
+				<button
+					type="button"
+					{disabled}
+					onclick={() => (value = hex)}
+					class="h-6 w-6 rounded-md border border-neutral-300/40 transition-transform hover:scale-110 {value.toLowerCase() ===
+					hex.toLowerCase()
+						? 'scale-105 ring-2 ring-primary-500 ring-offset-2 ring-offset-white dark:ring-offset-neutral-900'
+						: ''}"
+					style="background-color: {hex};"
+					title={hex}
+					aria-label="Select color {hex}"
+				></button>
+			{/each}
+		</div>
+
+		<!-- Custom Hex & Native Color input -->
+		<div class="flex items-center gap-2 border-t border-neutral-200 pt-2 dark:border-neutral-800">
+			<label
+				class="relative flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-md border border-neutral-300 dark:border-neutral-700"
+				style="background-color: {value};"
+			>
+				<input
+					type="color"
+					bind:value
+					{disabled}
+					class="absolute inset-0 h-full w-full cursor-pointer opacity-0"
+					aria-label="Pick color"
+				/>
+			</label>
+			<input
+				type="text"
+				bind:value
+				{disabled}
+				placeholder="#ff3e00"
+				class="h-8 w-full rounded-md border border-neutral-200 bg-neutral-50 px-2.5 font-mono text-sm text-neutral-800 focus:border-primary-500 focus:outline-none dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-200"
+			/>
+		</div>
+	</div>
+{:else}
+	<Popover bind:open={popoverOpen}>
+		{#snippet trigger()}
+			<button
+				type="button"
+				{disabled}
+				class="inline-flex items-center gap-2 rounded-lg border border-neutral-200 bg-white px-3 py-1.5 text-sm font-medium text-neutral-700 transition hover:border-neutral-300 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-300 dark:hover:border-neutral-700 {className}"
+			>
+				<span
+					class="h-4 w-4 rounded border border-neutral-300/40"
+					style="background-color: {value};"
+				></span>
+				<span class="font-mono">{value}</span>
+				<Icon name="chevron-down" size="xs" class="text-neutral-400" />
+			</button>
+		{/snippet}
+
+		<div class="w-48 space-y-3 p-3">
+			<div class="text-xs font-semibold text-neutral-500 dark:text-neutral-400">Color Swatches</div>
+			<!-- Swatches Grid -->
+			<div class="grid grid-cols-5 gap-1.5">
+				{#each presets as hex}
+					<button
+						type="button"
+						onclick={() => {
+							value = hex;
+							popoverOpen = false;
+						}}
+						class="h-6 w-6 rounded-md border border-neutral-300/40 transition-transform hover:scale-110 {value.toLowerCase() ===
+						hex.toLowerCase()
+							? 'scale-105 ring-2 ring-primary-500 ring-offset-2 ring-offset-white dark:ring-offset-neutral-900'
+							: ''}"
+						style="background-color: {hex};"
+						title={hex}
+						aria-label="Select color {hex}"
+					></button>
+				{/each}
+			</div>
+
+			<!-- Custom Hex & Native Color input -->
+			<div class="flex items-center gap-2 border-t border-neutral-200 pt-2 dark:border-neutral-800">
+				<label
+					class="relative flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-md border border-neutral-300 dark:border-neutral-700"
+					style="background-color: {value};"
+				>
+					<input
+						type="color"
+						bind:value
+						class="absolute inset-0 h-full w-full cursor-pointer opacity-0"
+						aria-label="Pick color"
+					/>
+				</label>
+				<input
+					type="text"
+					bind:value
+					placeholder="#ff3e00"
+					class="h-8 w-full rounded-md border border-neutral-200 bg-neutral-50 px-2.5 font-mono text-sm text-neutral-800 focus:border-primary-500 focus:outline-none dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-200"
+				/>
+			</div>
+		</div>
+	</Popover>
+{/if}

package/dist/components/forms/ColorPicker.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    value?: string;
+    presets?: string[];
+    disabled?: boolean;
+    inline?: boolean;
+    class?: string;
+}
+declare const ColorPicker: import("svelte").Component<Props, {}, "value">;
+type ColorPicker = ReturnType<typeof ColorPicker>;
+export default ColorPicker;

package/dist/components/forms/Form.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { ZodSchema } from 'zod';
+	import Alert from '../overlays/Alert.svelte';
+
+	interface Props {
+		schema?: ZodSchema;
+		values?: Record<string, any>;
+		loading?: boolean;
+		errorSummary?: boolean;
+		class?: string;
+		onsubmit?: (e: SubmitEvent, values: Record<string, any>) => void | Promise<void>;
+		children?: Snippet;
+	}
+
+	let {
+		schema,
+		values = {},
+		loading = false,
+		errorSummary = false,
+		class: className = '',
+		onsubmit,
+		children
+	}: Props = $props();
+
+	let errors = $state<Record<string, string>>({});
+	let isSubmitting = $state(false);
+	let isBusy = $derived(loading || isSubmitting);
+
+	function validate() {
+		if (!schema) return true;
+		try {
+			schema.parse(values);
+			errors = {};
+			return true;
+		} catch (err: any) {
+			const fieldErrors: Record<string, string> = {};
+			const issues = err?.issues || err?.errors || [];
+			for (const e of issues) {
+				const field = Array.isArray(e.path) ? e.path.join('.') : String(e.path || 'form');
+				if (!fieldErrors[field]) {
+					fieldErrors[field] = e.message;
+				}
+			}
+			errors = fieldErrors;
+			return false;
+		}
+	}
+
+	async function handleSubmit(e: SubmitEvent) {
+		e.preventDefault();
+		if (!validate()) {
+			return;
+		}
+
+		if (onsubmit) {
+			isSubmitting = true;
+			try {
+				await onsubmit(e, values);
+			} finally {
+				isSubmitting = false;
+			}
+		}
+	}
+</script>
+
+<form
+	onsubmit={handleSubmit}
+	aria-busy={isBusy}
+	class="space-y-4 {className} {isBusy ? 'pointer-events-none opacity-80' : ''}"
+	novalidate
+>
+	{#if errorSummary && Object.keys(errors).length > 0}
+		<Alert
+			color="error"
+			title="Please correct the following errors:"
+			description={Object.values(errors).join(' · ')}
+		/>
+	{/if}
+
+	{#if children}
+		{@render children()}
+	{/if}
+</form>

package/dist/components/forms/Form.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { ZodSchema } from 'zod';
+interface Props {
+    schema?: ZodSchema;
+    values?: Record<string, any>;
+    loading?: boolean;
+    errorSummary?: boolean;
+    class?: string;
+    onsubmit?: (e: SubmitEvent, values: Record<string, any>) => void | Promise<void>;
+    children?: Snippet;
+}
+declare const Form: import("svelte").Component<Props, {}, "">;
+type Form = ReturnType<typeof Form>;
+export default Form;

package/dist/components/forms/FormField.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		label?: string;
+		description?: string;
+		error?: string;
+		hint?: string;
+		required?: boolean;
+		name?: string;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		label,
+		description,
+		error,
+		hint,
+		required = false,
+		name,
+		class: className = '',
+		children
+	}: Props = $props();
+</script>
+
+<div class="space-y-1.5 {className}">
+	{#if label || hint}
+		<div class="flex items-center justify-between">
+			{#if label}
+				<label for={name} class="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
+					{label}
+					{#if required}
+						<span class="ml-0.5 text-rose-500">*</span>
+					{/if}
+				</label>
+			{/if}
+
+			{#if hint}
+				<span class="text-sm text-neutral-500 dark:text-neutral-400">{hint}</span>
+			{/if}
+		</div>
+	{/if}
+
+	{#if description}
+		<p class="text-sm text-neutral-500 dark:text-neutral-400">{description}</p>
+	{/if}
+
+	{#if children}
+		{@render children()}
+	{/if}
+
+	{#if error}
+		<p class="text-sm font-medium text-rose-600 dark:text-rose-400">{error}</p>
+	{/if}
+</div>