@groundbrick/svelte-ui 0.1.1

package/dist/components/EmptyState.svelte

@@ -0,0 +1,192 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import PawPrintIcon from '../icons/PawPrintIcon.svelte';
+
+	export interface EmptyStateProps {
+		/** Empty state title */
+		title: string;
+		/** Description or message */
+		description?: string;
+		/** Alias for description */
+		message?: string;
+		/** Bootstrap Icons class (e.g. "bi-inbox") */
+		icon?: string;
+		/** Predefined illustration */
+		illustration?: 'inbox' | 'search' | 'pets' | 'appointments' | 'calendar' | 'users' | 'files';
+		/** Actions/buttons to display */
+		children?: Snippet;
+		/** Additional CSS classes */
+		class?: string;
+		/** Compact mode (reduces padding and sizes) */
+		compact?: boolean;
+	}
+
+	let {
+		title,
+		description,
+		message,
+		icon,
+		illustration,
+		children,
+		class: additionalClasses = '',
+		compact = false
+	}: EmptyStateProps = $props();
+
+	// Support both description and message for flexibility
+	const effectiveDescription = $derived(description || message);
+
+	// Illustration to Bootstrap icon mapping.
+	// `pets` is handled separately below (renders PawPrintIcon).
+	const illustrations: Record<string, string> = {
+		inbox: 'bi-inbox',
+		search: 'bi-search',
+		appointments: 'bi-calendar-x',
+		calendar: 'bi-calendar3',
+		users: 'bi-people',
+		files: 'bi-file-earmark-text'
+	};
+
+	const usePawPrint = $derived(icon === 'paw-print' || illustration === 'pets');
+
+	// Which icon to use (only when not paw-print)
+	const iconClass = $derived(icon || (illustration ? illustrations[illustration] : 'bi-inbox'));
+
+	const emptyStateClass = $derived([
+		'empty-state',
+		compact ? 'empty-state-compact' : '',
+		additionalClasses
+	].filter(Boolean).join(' '));
+</script>
+
+<div class={emptyStateClass}>
+	<div class="empty-state-icon">
+		{#if usePawPrint}
+			<PawPrintIcon size="4rem" />
+		{:else}
+			<i class="bi {iconClass}"></i>
+		{/if}
+	</div>
+
+	<h3 class="empty-state-title">{title}</h3>
+
+	{#if effectiveDescription}
+		<p class="empty-state-description">{effectiveDescription}</p>
+	{/if}
+
+	{#if children}
+		<div class="empty-state-actions">
+			{@render children()}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.empty-state {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: var(--spacing-2xl) var(--spacing-lg);
+		text-align: center;
+		min-height: 300px;
+	}
+
+	.empty-state-icon {
+		margin-bottom: var(--spacing-lg);
+		color: var(--color-gray-400);
+		animation: float 3s ease-in-out infinite;
+	}
+
+	.empty-state-icon i {
+		font-size: 4rem;
+		display: block;
+	}
+
+	.empty-state-title {
+		font-size: var(--font-size-xl);
+		font-weight: var(--font-weight-semibold);
+		color: var(--color-gray-700);
+		margin-bottom: var(--spacing-sm);
+		margin-top: 0;
+	}
+
+	.empty-state-description {
+		font-size: var(--font-size-base);
+		color: var(--color-gray-600);
+		max-width: 400px;
+		margin: 0 auto var(--spacing-lg);
+		line-height: var(--line-height-relaxed);
+	}
+
+	.empty-state-actions {
+		display: flex;
+		gap: var(--spacing-md);
+		flex-wrap: wrap;
+		justify-content: center;
+		margin-top: var(--spacing-md);
+	}
+
+	/* Compact mode */
+	.empty-state-compact {
+		padding: var(--spacing-lg) var(--spacing-md);
+		min-height: 200px;
+	}
+
+	.empty-state-compact .empty-state-icon {
+		margin-bottom: var(--spacing-md);
+	}
+
+	.empty-state-compact .empty-state-icon i {
+		font-size: 2.5rem;
+	}
+
+	.empty-state-compact .empty-state-title {
+		font-size: var(--font-size-lg);
+		margin-bottom: var(--spacing-xs);
+	}
+
+	.empty-state-compact .empty-state-description {
+		font-size: var(--font-size-sm);
+		margin-bottom: var(--spacing-md);
+	}
+
+	/* Smooth floating animation */
+	@keyframes float {
+		0%, 100% {
+			transform: translateY(0);
+		}
+		50% {
+			transform: translateY(-10px);
+		}
+	}
+
+	/* Responsive */
+	@media (max-width: 576px) {
+		.empty-state {
+			padding: var(--spacing-xl) var(--spacing-md);
+			min-height: 250px;
+		}
+
+		.empty-state-icon i {
+			font-size: 3rem;
+		}
+
+		.empty-state-title {
+			font-size: var(--font-size-lg);
+		}
+
+		.empty-state-description {
+			font-size: var(--font-size-sm);
+		}
+
+		.empty-state-actions {
+			flex-direction: column;
+			width: 100%;
+		}
+
+		.empty-state-actions :global(button),
+		.empty-state-actions :global(a) {
+			width: 100%;
+		}
+	}
+</style>

package/dist/components/EmptyState.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from "svelte";
+export interface EmptyStateProps {
+    /** Empty state title */
+    title: string;
+    /** Description or message */
+    description?: string;
+    /** Alias for description */
+    message?: string;
+    /** Bootstrap Icons class (e.g. "bi-inbox") */
+    icon?: string;
+    /** Predefined illustration */
+    illustration?: 'inbox' | 'search' | 'pets' | 'appointments' | 'calendar' | 'users' | 'files';
+    /** Actions/buttons to display */
+    children?: Snippet;
+    /** Additional CSS classes */
+    class?: string;
+    /** Compact mode (reduces padding and sizes) */
+    compact?: boolean;
+}
+declare const EmptyState: import("svelte").Component<EmptyStateProps, {}, "">;
+type EmptyState = ReturnType<typeof EmptyState>;
+export default EmptyState;

package/dist/components/FormField.svelte

@@ -0,0 +1,260 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import "../styles/forms.css";
+
+	interface FormFieldProps {
+		/** ID único do campo */
+		id: string;
+		/** Label do campo */
+		label: string;
+		/** Tipo do campo */
+		type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'date' | 'time' | 'datetime-local' | 'textarea' | 'select' | 'search';
+		/** Valor do campo (bindable) */
+		value?: string | number;
+		/** Placeholder */
+		placeholder?: string;
+		/** Campo obrigatório */
+		required?: boolean;
+		/** Campo desabilitado */
+		disabled?: boolean;
+		/** Somente leitura */
+		readonly?: boolean;
+		/** Mensagem de erro */
+		error?: string;
+		/** Texto de ajuda */
+		helpText?: string;
+		/** Número de linhas (para textarea) */
+		rows?: number;
+		/** Opções (para select) */
+		options?: Array<{ value: string | number; label: string }>;
+		/** Valor mínimo (para number/date) */
+		min?: number | string;
+		/** Valor máximo (para number/date) */
+		max?: number | string;
+		/** Step (para number) */
+		step?: number;
+		/** Pattern (regex) */
+		pattern?: string;
+		/** Autocomplete */
+		autocomplete?: HTMLInputElement['autocomplete'];
+		/** Tamanho mínimo (para text/password) */
+		minlength?: number;
+		/** Tamanho máximo (para text/password) */
+		maxlength?: number;
+		/** Callback de mudança */
+		onchange?: (value: any) => void;
+		/** Callback de input */
+		oninput?: (value: any) => void;
+		/** Callback de blur */
+		onblur?: () => void;
+		/** Callback de focus */
+		onfocus?: () => void;
+		/** Callback de keydown */
+		onkeydown?: (e: KeyboardEvent) => void;
+		/** Ícone do campo (exibido no label) */
+		icon?: Snippet;
+		/** Ícone dentro do input (à esquerda) */
+		inputIcon?: Snippet;
+		/** Addon à direita do input (ex: loading spinner) */
+		inputAddon?: Snippet;
+		/** Classes CSS adicionais */
+		class?: string;
+		/** Referência ao elemento input */
+		inputRef?: HTMLInputElement;
+	}
+
+	let {
+		id,
+		label,
+		type = 'text',
+		value = $bindable(''),
+		placeholder,
+		required = false,
+		disabled = false,
+		readonly = false,
+		error,
+		helpText,
+		rows = 3,
+		options = [],
+		min,
+		max,
+		step,
+		pattern,
+		autocomplete,
+		minlength,
+		maxlength,
+		onchange,
+		oninput,
+		onblur,
+		onfocus,
+		onkeydown,
+		icon,
+		inputIcon,
+		inputAddon,
+		class: additionalClasses = '',
+		inputRef = $bindable()
+	}: FormFieldProps = $props();
+
+	// Handler de input
+	function handleInput(event: Event) {
+		const target = event.target as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
+
+		if (type === 'number') {
+			value = target.value ? Number(target.value) : '';
+		} else {
+			value = target.value;
+		}
+
+		oninput?.(value);
+	}
+
+	// Handler de change
+	function handleChange(event: Event) {
+		const target = event.target as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
+
+		if (type === 'number') {
+			value = target.value ? Number(target.value) : '';
+		} else if (type === 'select') {
+			// Preserve the original option value type (e.g., number) instead of the
+			// DOM-stringified target.value, so bind:value can match the option correctly.
+			const selectedStr = target.value;
+			const matchingOption = options.find(opt => String(opt.value) === selectedStr);
+			value = matchingOption ? matchingOption.value : selectedStr;
+		} else {
+			value = target.value;
+		}
+
+		onchange?.(value);
+	}
+
+	// Handler de blur
+	function handleBlur() {
+		onblur?.();
+	}
+
+	// Classes dinâmicas
+	const fieldClass = $derived([
+		'ap-form-control',
+		type === 'select' ? 'ap-form-select' : '',
+		error ? 'ap-form-control-invalid' : '',
+		inputIcon ? 'ap-form-control-with-icon' : ''
+	].filter(Boolean).join(' '));
+
+	const containerClass = $derived([
+		'ap-form-field',
+		additionalClasses
+	].filter(Boolean).join(' '));
+</script>
+
+<div class={containerClass}>
+	<label for={id} class="ap-form-label">
+		{#if icon}
+			<span class="ap-form-label-icon">
+				{@render icon()}
+			</span>
+		{/if}
+		{label}
+		{#if required}
+			<span class="ap-form-required" aria-label="obrigatório">*</span>
+		{/if}
+	</label>
+
+	<div class="ap-form-input-wrapper" class:has-input-icon={inputIcon} class:has-addon={inputAddon}>
+		{#if inputIcon}
+			<span class="ap-form-input-icon">
+				{@render inputIcon()}
+			</span>
+		{/if}
+
+		{#if type === 'textarea'}
+			<textarea
+				{id}
+				class={fieldClass}
+				{placeholder}
+				{required}
+				{disabled}
+				{readonly}
+				{rows}
+				{autocomplete}
+				value={value}
+				oninput={handleInput}
+				onchange={handleChange}
+				onblur={handleBlur}
+				aria-invalid={error ? 'true' : undefined}
+				aria-describedby={error ? `${id}-error` : helpText ? `${id}-help` : undefined}
+			></textarea>
+		{:else if type === 'select'}
+			<select
+				{id}
+				class={fieldClass}
+				{required}
+				{disabled}
+				{autocomplete}
+				bind:value
+				onchange={handleChange}
+				onblur={handleBlur}
+				aria-invalid={error ? 'true' : undefined}
+				aria-describedby={error ? `${id}-error` : helpText ? `${id}-help` : undefined}
+			>
+				{#if placeholder}
+					<option value="" disabled selected={!value}>
+						{placeholder}
+					</option>
+				{/if}
+				{#each options as option}
+					<option value={option.value}>
+						{option.label}
+					</option>
+				{/each}
+			</select>
+		{:else}
+			<input
+				bind:this={inputRef}
+				{id}
+				type={type}
+				class={fieldClass}
+				{placeholder}
+				{required}
+				{disabled}
+				{readonly}
+				{min}
+				{max}
+				{step}
+				{pattern}
+				{autocomplete}
+				{minlength}
+				{maxlength}
+				value={value}
+				oninput={handleInput}
+				onchange={handleChange}
+				onblur={handleBlur}
+				onfocus={onfocus}
+				onkeydown={onkeydown}
+				aria-invalid={error ? 'true' : undefined}
+				aria-describedby={error ? `${id}-error` : helpText ? `${id}-help` : undefined}
+			/>
+		{/if}
+
+		{#if inputAddon}
+			<span class="ap-form-input-addon">
+				{@render inputAddon()}
+			</span>
+		{/if}
+	</div>
+
+	{#if error}
+		<div id="{id}-error" class="ap-form-error">
+			<i class="bi bi-exclamation-circle"></i>
+			{error}
+		</div>
+	{/if}
+
+	{#if helpText && !error}
+		<div id="{id}-help" class="ap-form-help">
+			<i class="bi bi-info-circle"></i>
+			{helpText}
+		</div>
+	{/if}
+</div>
+
+<!-- Styles are in /src/lib/styles/forms.css -->

package/dist/components/FormField.svelte.d.ts

@@ -0,0 +1,68 @@
+import type { Snippet } from "svelte";
+import "../styles/forms.css";
+interface FormFieldProps {
+    /** ID único do campo */
+    id: string;
+    /** Label do campo */
+    label: string;
+    /** Tipo do campo */
+    type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'date' | 'time' | 'datetime-local' | 'textarea' | 'select' | 'search';
+    /** Valor do campo (bindable) */
+    value?: string | number;
+    /** Placeholder */
+    placeholder?: string;
+    /** Campo obrigatório */
+    required?: boolean;
+    /** Campo desabilitado */
+    disabled?: boolean;
+    /** Somente leitura */
+    readonly?: boolean;
+    /** Mensagem de erro */
+    error?: string;
+    /** Texto de ajuda */
+    helpText?: string;
+    /** Número de linhas (para textarea) */
+    rows?: number;
+    /** Opções (para select) */
+    options?: Array<{
+        value: string | number;
+        label: string;
+    }>;
+    /** Valor mínimo (para number/date) */
+    min?: number | string;
+    /** Valor máximo (para number/date) */
+    max?: number | string;
+    /** Step (para number) */
+    step?: number;
+    /** Pattern (regex) */
+    pattern?: string;
+    /** Autocomplete */
+    autocomplete?: HTMLInputElement['autocomplete'];
+    /** Tamanho mínimo (para text/password) */
+    minlength?: number;
+    /** Tamanho máximo (para text/password) */
+    maxlength?: number;
+    /** Callback de mudança */
+    onchange?: (value: any) => void;
+    /** Callback de input */
+    oninput?: (value: any) => void;
+    /** Callback de blur */
+    onblur?: () => void;
+    /** Callback de focus */
+    onfocus?: () => void;
+    /** Callback de keydown */
+    onkeydown?: (e: KeyboardEvent) => void;
+    /** Ícone do campo (exibido no label) */
+    icon?: Snippet;
+    /** Ícone dentro do input (à esquerda) */
+    inputIcon?: Snippet;
+    /** Addon à direita do input (ex: loading spinner) */
+    inputAddon?: Snippet;
+    /** Classes CSS adicionais */
+    class?: string;
+    /** Referência ao elemento input */
+    inputRef?: HTMLInputElement;
+}
+declare const FormField: import("svelte").Component<FormFieldProps, {}, "value" | "inputRef">;
+type FormField = ReturnType<typeof FormField>;
+export default FormField;