@groundbrick/svelte-ui 0.1.1

package/dist/components/AutocompleteInput.svelte

@@ -0,0 +1,356 @@
+<script lang="ts" module>
+    import type { Snippet } from "svelte";
+
+    export interface AutocompleteSuggestion<T = unknown> {
+        /** Display label for the suggestion */
+        label: string;
+        /** Optional secondary text */
+        subtitle?: string;
+        /** The original data item */
+        data: T;
+    }
+
+    export interface AutocompleteInputProps<T = unknown> {
+        /** Current input value (bindable) */
+        value: string;
+        /** Input ID */
+        id?: string;
+        /** Label text */
+        label?: string;
+        /** Placeholder text */
+        placeholder?: string;
+        /** Disabled state */
+        disabled?: boolean;
+        /** Input type */
+        type?: 'text' | 'tel' | 'email' | 'search';
+        /** Max length */
+        maxlength?: number;
+        /** Required field */
+        required?: boolean;
+        /** Minimum characters before searching */
+        minChars?: number;
+        /** Debounce delay in ms */
+        debounceMs?: number;
+        /** Icon to show on the left side of the input */
+        icon?: Snippet;
+        /** Extra content to render on the right side of each suggestion (receives suggestion data) */
+        suggestionExtra?: Snippet<[AutocompleteSuggestion<T>]>;
+        /** Function to fetch suggestions */
+        fetchSuggestions: (query: string) => Promise<AutocompleteSuggestion<T>[]>;
+        /** Called when user selects a suggestion */
+        onSelect?: (suggestion: AutocompleteSuggestion<T>) => void;
+        /** Called when input value changes */
+        oninput?: (value: string) => void;
+        /** Optional sticky footer action shown at the bottom of the dropdown.
+         *  Useful for "Create new" affordances. Does NOT trigger onSelect. */
+        footerAction?: { label: string; icon?: string; onClick: () => void };
+    }
+</script>
+
+<script lang="ts" generics="T">
+    import FormField from "./FormField.svelte";
+
+    let {
+        value = $bindable(""),
+        id = "autocomplete",
+        label = "",
+        placeholder = "",
+        disabled = false,
+        type = 'text',
+        maxlength,
+        required = false,
+        minChars = 2,
+        debounceMs = 300,
+        icon,
+        suggestionExtra,
+        fetchSuggestions,
+        onSelect,
+        oninput,
+        footerAction,
+    }: AutocompleteInputProps<T> = $props();
+
+    // State
+    let suggestions = $state<AutocompleteSuggestion<T>[]>([]);
+    let showDropdown = $state(false);
+    let isLoading = $state(false);
+    let highlightedIndex = $state(-1);
+    let inputElement: HTMLInputElement | undefined = $state();
+
+    // Debounce timer
+    let searchTimeout: ReturnType<typeof setTimeout> | null = null;
+
+    function handleInput(inputValue: string | number) {
+        value = String(inputValue);
+        oninput?.(value);
+        highlightedIndex = -1;
+
+        if (value.length >= minChars) {
+            debouncedSearch(value);
+        } else {
+            suggestions = [];
+            showDropdown = false;
+        }
+    }
+
+    function debouncedSearch(query: string) {
+        if (searchTimeout) {
+            clearTimeout(searchTimeout);
+        }
+
+        searchTimeout = setTimeout(async () => {
+            await performSearch(query);
+        }, debounceMs);
+    }
+
+    async function performSearch(query: string) {
+        isLoading = true;
+
+        try {
+            const results = await fetchSuggestions(query);
+            suggestions = results;
+            showDropdown = results.length > 0 || footerAction !== undefined;
+        } catch (error) {
+            console.error("Autocomplete search error:", error);
+            suggestions = [];
+            showDropdown = false;
+        } finally {
+            isLoading = false;
+        }
+    }
+
+    function selectSuggestion(suggestion: AutocompleteSuggestion<T>) {
+        value = suggestion.label;
+        showDropdown = false;
+        suggestions = [];
+        highlightedIndex = -1;
+        onSelect?.(suggestion);
+        oninput?.(value);
+    }
+
+    function handleKeydown(e: KeyboardEvent) {
+        if (!showDropdown) return;
+
+        const hasFooter = footerAction !== undefined;
+        const totalItems = suggestions.length + (hasFooter ? 1 : 0);
+        if (totalItems === 0) return;
+
+        switch (e.key) {
+            case "ArrowDown":
+                e.preventDefault();
+                highlightedIndex = Math.min(highlightedIndex + 1, totalItems - 1);
+                break;
+            case "ArrowUp":
+                e.preventDefault();
+                highlightedIndex = Math.max(highlightedIndex - 1, 0);
+                break;
+            case "Enter":
+                if (highlightedIndex >= 0) {
+                    e.preventDefault();
+                    if (highlightedIndex < suggestions.length) {
+                        selectSuggestion(suggestions[highlightedIndex]);
+                    } else if (hasFooter) {
+                        handleFooterClick();
+                    }
+                }
+                break;
+            case "Escape":
+                showDropdown = false;
+                highlightedIndex = -1;
+                break;
+        }
+    }
+
+    function handleFooterClick() {
+        footerAction?.onClick();
+        showDropdown = false;
+        highlightedIndex = -1;
+    }
+
+    function handleBlur() {
+        // Delay to allow click on dropdown item
+        setTimeout(() => {
+            showDropdown = false;
+            highlightedIndex = -1;
+        }, 200);
+    }
+
+    function handleFocus() {
+        if ((suggestions.length > 0 || footerAction) && value.length >= minChars) {
+            showDropdown = true;
+        }
+    }
+</script>
+
+<div class="autocomplete-container">
+    <FormField
+        {id}
+        {label}
+        {type}
+        bind:value
+        {placeholder}
+        {disabled}
+        {required}
+        {maxlength}
+        autocomplete="off"
+        oninput={handleInput}
+        onblur={handleBlur}
+        onfocus={handleFocus}
+        onkeydown={handleKeydown}
+        bind:inputRef={inputElement}
+        inputIcon={icon}
+    >
+        {#snippet inputAddon()}
+            {#if isLoading}
+                <div class="ap-spinner-inline" role="status">
+                    <span class="visually-hidden">A procurar...</span>
+                </div>
+            {/if}
+        {/snippet}
+    </FormField>
+
+    {#if showDropdown && (suggestions.length > 0 || footerAction)}
+        <div class="suggestions-dropdown">
+            {#each suggestions as suggestion, index}
+                <button
+                    type="button"
+                    class="suggestion-item"
+                    class:highlighted={index === highlightedIndex}
+                    class:has-extra={suggestionExtra}
+                    onclick={() => selectSuggestion(suggestion)}
+                    onmouseenter={() => highlightedIndex = index}
+                >
+                    <div class="suggestion-content">
+                        <span class="suggestion-label">{suggestion.label}</span>
+                        {#if suggestion.subtitle}
+                            <span class="suggestion-subtitle">{suggestion.subtitle}</span>
+                        {/if}
+                    </div>
+                    {#if suggestionExtra}
+                        <div class="suggestion-extra">
+                            {@render suggestionExtra(suggestion)}
+                        </div>
+                    {/if}
+                </button>
+            {/each}
+            {#if footerAction}
+                <button
+                    type="button"
+                    class="suggestion-footer"
+                    class:highlighted={highlightedIndex === suggestions.length}
+                    onclick={handleFooterClick}
+                    onmouseenter={() => highlightedIndex = suggestions.length}
+                >
+                    {#if footerAction.icon}
+                        <i class="bi {footerAction.icon}"></i>
+                    {/if}
+                    <span>{footerAction.label}</span>
+                </button>
+            {/if}
+        </div>
+    {/if}
+</div>
+
+<style>
+    .autocomplete-container {
+        position: relative;
+        width: 100%;
+    }
+
+    /* ===== Dropdown ===== */
+    .suggestions-dropdown {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        z-index: var(--z-dropdown, 1000);
+        margin-top: var(--spacing-xs, 0.25rem);
+        border: 1px solid var(--color-border-subtle);
+        border-radius: var(--radius-lg);
+        background: var(--color-bg-surface);
+        box-shadow: var(--shadow-lg);
+        max-height: 200px;
+        overflow-y: auto;
+    }
+
+    .suggestion-item {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        width: 100%;
+        padding: var(--spacing-sm) var(--spacing-md);
+        border: none;
+        background: transparent;
+        text-align: left;
+        cursor: pointer;
+        transition: background var(--transition-fast);
+    }
+
+    .suggestion-item.has-extra {
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--spacing-md);
+    }
+
+    .suggestion-item:hover,
+    .suggestion-item.highlighted {
+        background: var(--color-bg-surface-2);
+    }
+
+    .suggestion-item + .suggestion-item {
+        border-top: 1px solid var(--color-border-subtle);
+    }
+
+    .suggestion-content {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        flex: 1;
+        min-width: 0;
+    }
+
+    .suggestion-label {
+        font-size: var(--font-size-sm);
+        font-weight: var(--font-weight-medium);
+        color: var(--color-text);
+    }
+
+    .suggestion-subtitle {
+        font-size: var(--font-size-xs);
+        color: var(--color-text-muted);
+    }
+
+    .suggestion-extra {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+    }
+
+    .suggestion-footer {
+        position: sticky;
+        bottom: 0;
+        z-index: 1;
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-xs, 0.375rem);
+        width: 100%;
+        padding: var(--spacing-sm) var(--spacing-md);
+        border: none;
+        background: var(--color-bg-surface);
+        text-align: left;
+        cursor: pointer;
+        font-size: var(--font-size-sm);
+        font-weight: var(--font-weight-medium);
+        color: var(--color-primary);
+        transition: background var(--transition-fast);
+    }
+
+    .suggestion-item + .suggestion-footer {
+        border-top: 1px solid var(--color-border-subtle);
+    }
+
+    .suggestion-footer:hover,
+    .suggestion-footer.highlighted {
+        background: var(--color-bg-surface-2);
+    }
+</style>

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

@@ -0,0 +1,72 @@
+import type { Snippet } from "svelte";
+export interface AutocompleteSuggestion<T = unknown> {
+    /** Display label for the suggestion */
+    label: string;
+    /** Optional secondary text */
+    subtitle?: string;
+    /** The original data item */
+    data: T;
+}
+export interface AutocompleteInputProps<T = unknown> {
+    /** Current input value (bindable) */
+    value: string;
+    /** Input ID */
+    id?: string;
+    /** Label text */
+    label?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Input type */
+    type?: 'text' | 'tel' | 'email' | 'search';
+    /** Max length */
+    maxlength?: number;
+    /** Required field */
+    required?: boolean;
+    /** Minimum characters before searching */
+    minChars?: number;
+    /** Debounce delay in ms */
+    debounceMs?: number;
+    /** Icon to show on the left side of the input */
+    icon?: Snippet;
+    /** Extra content to render on the right side of each suggestion (receives suggestion data) */
+    suggestionExtra?: Snippet<[AutocompleteSuggestion<T>]>;
+    /** Function to fetch suggestions */
+    fetchSuggestions: (query: string) => Promise<AutocompleteSuggestion<T>[]>;
+    /** Called when user selects a suggestion */
+    onSelect?: (suggestion: AutocompleteSuggestion<T>) => void;
+    /** Called when input value changes */
+    oninput?: (value: string) => void;
+    /** Optional sticky footer action shown at the bottom of the dropdown.
+     *  Useful for "Create new" affordances. Does NOT trigger onSelect. */
+    footerAction?: {
+        label: string;
+        icon?: string;
+        onClick: () => void;
+    };
+}
+declare function $$render<T>(): {
+    props: AutocompleteInputProps<T>;
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const AutocompleteInput: $$IsomorphicComponent;
+type AutocompleteInput<T> = InstanceType<typeof AutocompleteInput<T>>;
+export default AutocompleteInput;

package/dist/components/Badge.svelte

@@ -0,0 +1,185 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	interface BadgeProps {
+		/** Variante de cor do badge */
+		variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'gradient';
+		/** Tamanho do badge */
+		size?: 'sm' | 'md' | 'lg';
+		/** Estilo sólido (fundo colorido, texto branco) */
+		solid?: boolean;
+		/** @deprecated Badges are now pill-shaped by default. This prop is kept for backwards compatibility. */
+		pill?: boolean;
+		/** Conteúdo do badge */
+		children?: Snippet;
+		/** Ícone à esquerda */
+		icon?: Snippet;
+		/** Classes CSS adicionais */
+		class?: string;
+	}
+
+	let {
+		variant = 'primary',
+		size = 'md',
+		solid = false,
+		pill = true, // Kept for backwards compatibility - badges are pill by default now
+		children,
+		icon,
+		class: additionalClasses = ''
+	}: BadgeProps = $props();
+
+	const badgeClass = $derived([
+		'ap-badge',
+		`ap-badge-${variant}`,
+		size !== 'md' ? `ap-badge-${size}` : '',
+		solid ? 'ap-badge-solid' : '',
+		additionalClasses
+	].filter(Boolean).join(' '));
+</script>
+
+<span class={badgeClass}>
+	{#if icon}
+		<span class="ap-badge-icon">
+			{@render icon()}
+		</span>
+	{/if}
+	{@render children?.()}
+</span>
+
+<style>
+	/* ============================================
+	   BADGE - AgendaPet Design System
+	   ============================================ */
+	.ap-badge {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.375rem;
+		padding: 0.375rem 0.75rem;
+		font-family: var(--font-family-base);
+		font-size: var(--font-size-xs);
+		font-weight: var(--font-weight-medium);
+		line-height: 1;
+		border-radius: var(--radius-full);
+		white-space: nowrap;
+		vertical-align: baseline;
+		transition: all var(--transition-fast);
+	}
+
+	/* ===== SIZES ===== */
+	.ap-badge-sm {
+		font-size: 0.65rem;
+		padding: 0.25rem 0.5rem;
+		gap: 0.25rem;
+	}
+
+	.ap-badge-lg {
+		font-size: var(--font-size-sm);
+		padding: 0.5rem 1rem;
+		gap: 0.5rem;
+	}
+
+	/* ===== DEFAULT VARIANTS (Soft/Light) ===== */
+	.ap-badge-primary {
+		background-color: rgba(123, 63, 242, 0.1);
+		color: var(--color-primary);
+	}
+
+	.ap-badge-secondary {
+		background-color: rgba(91, 95, 115, 0.1);
+		color: var(--color-secondary);
+	}
+
+	.ap-badge-success {
+		background-color: var(--color-success-bg);
+		color: var(--color-success-text);
+	}
+
+	.ap-badge-danger {
+		background-color: var(--color-danger-bg);
+		color: var(--color-danger-text);
+	}
+
+	.ap-badge-warning {
+		background-color: var(--color-warning-bg);
+		color: var(--color-warning-text);
+	}
+
+	.ap-badge-info {
+		background-color: var(--color-info-bg);
+		color: var(--color-info-text);
+	}
+
+	.ap-badge-light {
+		background-color: var(--color-bg-surface-2);
+		color: var(--color-text-muted);
+		border: 1px solid var(--color-border-subtle);
+	}
+
+	.ap-badge-dark {
+		background-color: var(--color-gray-800);
+		color: white;
+	}
+
+	.ap-badge-gradient {
+		background: var(--gradient-brand);
+		color: white;
+	}
+
+	/* ===== SOLID VARIANTS ===== */
+	.ap-badge-solid.ap-badge-primary {
+		background-color: var(--color-primary);
+		color: white;
+	}
+
+	.ap-badge-solid.ap-badge-secondary {
+		background-color: var(--color-secondary);
+		color: white;
+	}
+
+	.ap-badge-solid.ap-badge-success {
+		background-color: var(--color-success);
+		color: white;
+	}
+
+	.ap-badge-solid.ap-badge-danger {
+		background-color: var(--color-danger);
+		color: white;
+	}
+
+	.ap-badge-solid.ap-badge-warning {
+		background-color: var(--color-warning);
+		color: var(--color-warning-text);
+	}
+
+	.ap-badge-solid.ap-badge-info {
+		background-color: var(--color-info);
+		color: white;
+	}
+
+	.ap-badge-solid.ap-badge-light {
+		background-color: var(--color-gray-100);
+		color: var(--color-gray-700);
+		border: none;
+	}
+
+	.ap-badge-solid.ap-badge-dark {
+		background-color: var(--color-gray-900);
+		color: white;
+	}
+
+	/* ===== ICON ===== */
+	.ap-badge-icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+	}
+
+	.ap-badge-icon :global(i),
+	.ap-badge-icon :global(svg) {
+		font-size: 0.875em;
+		width: 1em;
+		height: 1em;
+	}
+</style>

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

@@ -0,0 +1,20 @@
+import type { Snippet } from "svelte";
+interface BadgeProps {
+    /** Variante de cor do badge */
+    variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'gradient';
+    /** Tamanho do badge */
+    size?: 'sm' | 'md' | 'lg';
+    /** Estilo sólido (fundo colorido, texto branco) */
+    solid?: boolean;
+    /** @deprecated Badges are now pill-shaped by default. This prop is kept for backwards compatibility. */
+    pill?: boolean;
+    /** Conteúdo do badge */
+    children?: Snippet;
+    /** Ícone à esquerda */
+    icon?: Snippet;
+    /** Classes CSS adicionais */
+    class?: string;
+}
+declare const Badge: import("svelte").Component<BadgeProps, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;