@groundbrick/svelte-ui 0.1.1

package/dist/components/Button.svelte

@@ -0,0 +1,415 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	interface ButtonProps {
+		/** Visual variant */
+		variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'outline-primary' | 'outline-secondary' | 'outline-success' | 'outline-danger' | 'outline-warning' | 'link' | 'ghost' | 'gradient';
+		/** Button size */
+		size?: 'sm' | 'md' | 'lg';
+		/** Optional HTML id */
+		id?: string;
+		/** Take the full container width */
+		fullWidth?: boolean;
+		/** Disabled state */
+		disabled?: boolean;
+		/** Loading state (shows a spinner and disables the button) */
+		loading?: boolean;
+		/** HTML button type */
+		type?: 'button' | 'submit' | 'reset';
+		/** Click callback */
+		onclick?: (event: MouseEvent) => void;
+		/** Button content */
+		children?: Snippet;
+		/** Icon to the left of the text */
+		icon?: Snippet;
+		/** Icon to the right of the text */
+		iconRight?: Snippet;
+		/** ARIA label for accessibility */
+		ariaLabel?: string;
+		/** Additional CSS classes */
+		class?: string;
+		/** URL for navigation (renders as a link) */
+		href?: string;
+	}
+
+	let {
+		variant = 'primary',
+		size = 'md',
+		id,
+		fullWidth = false,
+		disabled = false,
+		loading = false,
+		type = 'button',
+		onclick,
+		children,
+		icon,
+		iconRight,
+		ariaLabel,
+		class: additionalClasses = '',
+		href
+	}: ButtonProps = $props();
+
+	// Disabled when explicitly disabled or while loading.
+	let isDisabled = $derived(disabled || loading);
+
+	const buttonClass = $derived([
+		'ap-btn',
+		`ap-btn-${variant}`,
+		size !== 'md' ? `ap-btn-${size}` : '',
+		fullWidth ? 'ap-btn-full' : '',
+		additionalClasses
+	].filter(Boolean).join(' '));
+</script>
+
+{#if href}
+	<a
+		{id}
+		href={isDisabled ? undefined : href}
+		class={buttonClass}
+		class:disabled={isDisabled}
+		onclick={isDisabled ? undefined : onclick}
+		aria-label={ariaLabel}
+		aria-busy={loading}
+		aria-disabled={isDisabled}
+		tabindex={isDisabled ? -1 : undefined}
+		role="button"
+	>
+		{#if loading}
+			<span class="ap-btn-spinner" role="status" aria-hidden="true"></span>
+		{/if}
+
+		{#if icon && !loading}
+			<span class="ap-btn-icon">
+				{@render icon()}
+			</span>
+		{/if}
+
+		{#if children}
+			{@render children()}
+		{/if}
+
+		{#if iconRight && !loading}
+			<span class="ap-btn-icon ap-btn-icon-right">
+				{@render iconRight()}
+			</span>
+		{/if}
+	</a>
+{:else}
+	<button
+		{id}
+		{type}
+		class={buttonClass}
+		disabled={isDisabled}
+		onclick={onclick}
+		aria-label={ariaLabel}
+		aria-busy={loading}
+	>
+		{#if loading}
+			<span class="ap-btn-spinner" role="status" aria-hidden="true"></span>
+		{/if}
+
+		{#if icon && !loading}
+			<span class="ap-btn-icon">
+				{@render icon()}
+			</span>
+		{/if}
+
+		{#if children}
+			{@render children()}
+		{/if}
+
+		{#if iconRight && !loading}
+			<span class="ap-btn-icon ap-btn-icon-right">
+				{@render iconRight()}
+			</span>
+		{/if}
+	</button>
+{/if}
+
+<style>
+	/* ============================================
+	   BUTTON
+	   ============================================ */
+	.ap-btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.5rem;
+		padding: 0.625rem 1.125rem;
+		font-family: var(--font-family-base);
+		font-size: var(--font-size-sm);
+		font-weight: var(--font-weight-medium);
+		line-height: 1.4;
+		text-decoration: none;
+		border: none;
+		border-radius: var(--radius-full);
+		cursor: pointer;
+		transition: all var(--transition-base);
+		user-select: none;
+		position: relative;
+		white-space: nowrap;
+	}
+
+	/* ===== SIZES ===== */
+	.ap-btn-sm {
+		padding: 0.375rem 0.875rem;
+		font-size: var(--font-size-xs);
+		gap: 0.375rem;
+	}
+
+	.ap-btn-lg {
+		padding: 0.75rem 1.5rem;
+		font-size: var(--font-size-base);
+		gap: 0.625rem;
+	}
+
+	.ap-btn-full {
+		width: 100%;
+	}
+
+	/* ===== PRIMARY ===== */
+	.ap-btn-primary {
+		background: var(--color-primary);
+		color: white;
+		box-shadow: var(--shadow-primary);
+	}
+
+	.ap-btn-primary:hover:not(:disabled):not(.disabled) {
+		background: var(--color-primary-hover);
+		transform: translateY(-1px);
+		box-shadow: var(--shadow-primary-hover);
+	}
+
+	.ap-btn-primary:active:not(:disabled):not(.disabled) {
+		background: var(--color-primary-active);
+		transform: translateY(0);
+	}
+
+	/* ===== GRADIENT ===== */
+	.ap-btn-gradient {
+		background: var(--gradient-brand);
+		color: white;
+		box-shadow: var(--shadow-primary);
+	}
+
+	.ap-btn-gradient:hover:not(:disabled):not(.disabled) {
+		background: var(--gradient-brand-hover);
+		transform: translateY(-1px);
+		box-shadow: var(--shadow-gradient);
+		filter: saturate(1.06);
+	}
+
+	.ap-btn-gradient:active:not(:disabled):not(.disabled) {
+		transform: translateY(0);
+	}
+
+	/* ===== SECONDARY ===== */
+	.ap-btn-secondary {
+		background: var(--color-secondary);
+		color: white;
+	}
+
+	.ap-btn-secondary:hover:not(:disabled):not(.disabled) {
+		background: var(--color-secondary-hover);
+		transform: translateY(-1px);
+	}
+
+	/* ===== SUCCESS ===== */
+	.ap-btn-success {
+		background: var(--color-success);
+		color: white;
+		box-shadow: var(--shadow-success);
+	}
+
+	.ap-btn-success:hover:not(:disabled):not(.disabled) {
+		background: var(--color-success-hover);
+		transform: translateY(-1px);
+	}
+
+	/* ===== DANGER ===== */
+	.ap-btn-danger {
+		background: var(--color-danger);
+		color: white;
+		box-shadow: var(--shadow-danger);
+	}
+
+	.ap-btn-danger:hover:not(:disabled):not(.disabled) {
+		background: var(--color-danger-hover);
+		transform: translateY(-1px);
+	}
+
+	/* ===== WARNING ===== */
+	.ap-btn-warning {
+		background: var(--color-warning);
+		color: white;
+	}
+
+	.ap-btn-warning:hover:not(:disabled):not(.disabled) {
+		background: var(--color-warning-hover);
+		transform: translateY(-1px);
+	}
+
+	/* ===== INFO ===== */
+	.ap-btn-info {
+		background: var(--color-info);
+		color: white;
+	}
+
+	.ap-btn-info:hover:not(:disabled):not(.disabled) {
+		background: var(--color-info-hover);
+		transform: translateY(-1px);
+	}
+
+	/* ===== LIGHT ===== */
+	.ap-btn-light {
+		background: var(--color-bg-surface-2);
+		color: var(--color-text);
+		border: 1px solid var(--color-border-subtle);
+	}
+
+	.ap-btn-light:hover:not(:disabled):not(.disabled) {
+		background: var(--color-gray-200);
+		transform: translateY(-1px);
+	}
+
+	/* ===== DARK ===== */
+	.ap-btn-dark {
+		background: var(--color-gray-800);
+		color: white;
+	}
+
+	.ap-btn-dark:hover:not(:disabled):not(.disabled) {
+		background: var(--color-gray-900);
+		transform: translateY(-1px);
+	}
+
+	/* ===== OUTLINE VARIANTS ===== */
+	.ap-btn-outline-primary {
+		background: transparent;
+		color: var(--color-primary);
+		border: 1.5px solid var(--color-primary);
+	}
+
+	.ap-btn-outline-primary:hover:not(:disabled):not(.disabled) {
+		background: var(--color-primary);
+		color: white;
+		transform: translateY(-1px);
+	}
+
+	.ap-btn-outline-secondary {
+		background: transparent;
+		color: var(--color-secondary);
+		border: 1.5px solid var(--color-secondary);
+	}
+
+	.ap-btn-outline-secondary:hover:not(:disabled):not(.disabled) {
+		background: var(--color-secondary);
+		color: white;
+		transform: translateY(-1px);
+	}
+
+	.ap-btn-outline-success {
+		background: transparent;
+		color: var(--color-success);
+		border: 1.5px solid var(--color-success);
+	}
+
+	.ap-btn-outline-success:hover:not(:disabled):not(.disabled) {
+		background: var(--color-success);
+		color: white;
+		transform: translateY(-1px);
+	}
+
+	.ap-btn-outline-danger {
+		background: transparent;
+		color: var(--color-danger);
+		border: 1.5px solid var(--color-danger);
+	}
+
+	.ap-btn-outline-danger:hover:not(:disabled):not(.disabled) {
+		background: var(--color-danger);
+		color: white;
+		transform: translateY(-1px);
+	}
+
+	.ap-btn-outline-warning {
+		background: transparent;
+		color: var(--color-warning-text);
+		border: 1.5px solid var(--color-warning);
+	}
+
+	.ap-btn-outline-warning:hover:not(:disabled):not(.disabled) {
+		background: var(--color-warning);
+		color: var(--color-warning-text);
+		transform: translateY(-1px);
+	}
+
+	/* ===== LINK ===== */
+	.ap-btn-link {
+		background: transparent;
+		color: var(--color-primary);
+		padding: 0.375rem 0.5rem;
+		border-radius: var(--radius-sm);
+	}
+
+	.ap-btn-link:hover:not(:disabled):not(.disabled) {
+		color: var(--color-primary-hover);
+		text-decoration: underline;
+	}
+
+	/* ===== GHOST ===== */
+	.ap-btn-ghost {
+		background: transparent;
+		color: var(--color-text);
+		padding: 0.5rem 0.75rem;
+	}
+
+	.ap-btn-ghost:hover:not(:disabled):not(.disabled) {
+		background: var(--color-bg-surface-2);
+	}
+
+	.ap-btn-ghost:active:not(:disabled):not(.disabled) {
+		background: var(--color-gray-200);
+	}
+
+	/* ===== STATES ===== */
+	.ap-btn:disabled,
+	.ap-btn.disabled {
+		cursor: not-allowed;
+		opacity: 0.6;
+		pointer-events: none;
+	}
+
+	.ap-btn:focus-visible {
+		outline: none;
+		box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
+	}
+
+	/* ===== ICON ===== */
+	.ap-btn-icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+	}
+
+	.ap-btn-icon-right {
+		order: 1;
+	}
+
+	/* ===== SPINNER ===== */
+	.ap-btn-spinner {
+		width: 1em;
+		height: 1em;
+		border: 2px solid currentColor;
+		border-right-color: transparent;
+		border-radius: 50%;
+		animation: ap-btn-spin 0.75s linear infinite;
+	}
+
+	@keyframes ap-btn-spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+</style>

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

@@ -0,0 +1,34 @@
+import type { Snippet } from "svelte";
+interface ButtonProps {
+    /** Visual variant */
+    variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'outline-primary' | 'outline-secondary' | 'outline-success' | 'outline-danger' | 'outline-warning' | 'link' | 'ghost' | 'gradient';
+    /** Button size */
+    size?: 'sm' | 'md' | 'lg';
+    /** Optional HTML id */
+    id?: string;
+    /** Take the full container width */
+    fullWidth?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Loading state (shows a spinner and disables the button) */
+    loading?: boolean;
+    /** HTML button type */
+    type?: 'button' | 'submit' | 'reset';
+    /** Click callback */
+    onclick?: (event: MouseEvent) => void;
+    /** Button content */
+    children?: Snippet;
+    /** Icon to the left of the text */
+    icon?: Snippet;
+    /** Icon to the right of the text */
+    iconRight?: Snippet;
+    /** ARIA label for accessibility */
+    ariaLabel?: string;
+    /** Additional CSS classes */
+    class?: string;
+    /** URL for navigation (renders as a link) */
+    href?: string;
+}
+declare const Button: import("svelte").Component<ButtonProps, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/Card.svelte

@@ -0,0 +1,181 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	interface CardProps {
+		/** Variante visual do card */
+		variant?: 'default' | 'outlined' | 'elevated' | 'accent';
+		/** Padding interno do card */
+		padding?: 'none' | 'sm' | 'md' | 'lg';
+		/** Conteúdo do card */
+		children?: Snippet;
+		/** Efeito hover (elevação ao passar mouse) */
+		hover?: boolean;
+		/** Card clicável (adiciona cursor pointer e efeitos) */
+		clickable?: boolean;
+		/** Callback ao clicar (só funciona se clickable=true) */
+		onclick?: () => void;
+		/** Adicionar sombra ao card */
+		shadow?: boolean;
+		/** Classes CSS adicionais */
+		class?: string;
+		/** Estilos inline */
+		style?: string;
+	}
+
+	let {
+		variant = 'default',
+		padding = 'none',
+		children,
+		hover = false,
+		clickable = false,
+		onclick,
+		shadow = false,
+		class: additionalClasses = '',
+		style
+	}: CardProps = $props();
+
+	const cardClass = $derived([
+		'ap-card',
+		`ap-card-${variant}`,
+		padding !== 'none' ? `ap-card-padding-${padding}` : '',
+		hover ? 'ap-card-hover' : '',
+		clickable ? 'ap-card-clickable' : '',
+		shadow ? 'ap-card-shadow' : '',
+		additionalClasses
+	].filter(Boolean).join(' '));
+
+	// Handler de click
+	function handleClick() {
+		if (clickable && onclick) {
+			onclick();
+		}
+	}
+
+	// Handler de teclado (Enter e Space)
+	function handleKeyDown(event: KeyboardEvent) {
+		if (clickable && onclick && (event.key === 'Enter' || event.key === ' ')) {
+			event.preventDefault();
+			onclick();
+		}
+	}
+</script>
+
+{#if clickable}
+	<div
+		class={cardClass}
+		{style}
+		onclick={handleClick}
+		onkeydown={handleKeyDown}
+		role="button"
+		tabindex="0"
+	>
+		{@render children?.()}
+	</div>
+{:else}
+	<div class={cardClass} {style}>
+		{@render children?.()}
+	</div>
+{/if}
+
+<style>
+	/* ============================================
+	   CARD - AgendaPet Design System
+	   ============================================ */
+	.ap-card {
+		background: var(--color-bg-surface);
+		border-radius: var(--radius-xl);
+		transition: all var(--transition-base);
+		overflow: hidden;
+		position: relative;
+	}
+
+	/* ===== VARIANTS ===== */
+	.ap-card-default {
+		border: 1px solid var(--color-border-subtle);
+		box-shadow: var(--shadow-soft);
+	}
+
+	.ap-card-outlined {
+		border: 2px solid var(--color-primary);
+		box-shadow: none;
+	}
+
+	.ap-card-elevated {
+		border: none;
+		box-shadow: var(--shadow-lg);
+	}
+
+	.ap-card-accent {
+		border: 1px solid var(--color-border-subtle);
+		border-top: none;
+		box-shadow: var(--shadow-soft);
+	}
+
+	.ap-card-accent::before {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		height: 4px;
+		background: var(--gradient-brand);
+		border-radius: var(--radius-xl) var(--radius-xl) 0 0;
+	}
+
+	/* ===== PADDING ===== */
+	.ap-card-padding-sm {
+		padding: var(--spacing-sm);
+	}
+
+	.ap-card-padding-md {
+		padding: var(--spacing-md);
+	}
+
+	.ap-card-padding-lg {
+		padding: var(--spacing-lg);
+	}
+
+	/* ===== SHADOW ===== */
+	.ap-card-shadow {
+		box-shadow: var(--shadow-soft);
+	}
+
+	/* ===== HOVER STATE ===== */
+	.ap-card-hover:hover {
+		transform: translateY(-2px);
+		box-shadow: var(--shadow-hover);
+	}
+
+	/* ===== CLICKABLE STATE ===== */
+	.ap-card-clickable {
+		cursor: pointer;
+		user-select: none;
+	}
+
+	.ap-card-clickable:hover {
+		transform: translateY(-2px);
+		box-shadow: var(--shadow-hover);
+	}
+
+	.ap-card-clickable:focus {
+		outline: 2px solid var(--color-primary);
+		outline-offset: 2px;
+	}
+
+	.ap-card-clickable:focus:not(:focus-visible) {
+		outline: none;
+	}
+
+	.ap-card-clickable:active {
+		transform: translateY(0);
+		box-shadow: var(--shadow-sm);
+	}
+
+	/* ===== TRANSITIONS ===== */
+	.ap-card-hover,
+	.ap-card-clickable {
+		transition:
+			transform var(--transition-base),
+			box-shadow var(--transition-base);
+	}
+</style>

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

@@ -0,0 +1,24 @@
+import type { Snippet } from "svelte";
+interface CardProps {
+    /** Variante visual do card */
+    variant?: 'default' | 'outlined' | 'elevated' | 'accent';
+    /** Padding interno do card */
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    /** Conteúdo do card */
+    children?: Snippet;
+    /** Efeito hover (elevação ao passar mouse) */
+    hover?: boolean;
+    /** Card clicável (adiciona cursor pointer e efeitos) */
+    clickable?: boolean;
+    /** Callback ao clicar (só funciona se clickable=true) */
+    onclick?: () => void;
+    /** Adicionar sombra ao card */
+    shadow?: boolean;
+    /** Classes CSS adicionais */
+    class?: string;
+    /** Estilos inline */
+    style?: string;
+}
+declare const Card: import("svelte").Component<CardProps, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;