@groundbrick/svelte-ui 0.1.1

package/dist/components/CardBody.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	interface CardBodyProps {
+		/** Conteúdo do corpo do card */
+		children?: Snippet;
+		/** Padding do corpo */
+		padding?: 'none' | 'sm' | 'md' | 'lg';
+		/** Classes CSS adicionais */
+		class?: string;
+	}
+
+	let {
+		children,
+		padding = 'md',
+		class: additionalClasses = ''
+	}: CardBodyProps = $props();
+
+	const bodyClass = $derived([
+		'ap-card-body',
+		padding !== 'md' ? `ap-card-body-padding-${padding}` : '',
+		additionalClasses
+	].filter(Boolean).join(' '));
+</script>
+
+<div class={bodyClass}>
+	{@render children?.()}
+</div>
+
+<style>
+	/* ============================================
+	   CARD BODY - AgendaPet Design System
+	   ============================================ */
+	.ap-card-body {
+		padding: 1.25rem;
+		background-color: transparent;
+		color: var(--color-text);
+		line-height: 1.5;
+	}
+
+	/* ===== PADDING VARIANTS ===== */
+	.ap-card-body-padding-none {
+		padding: 0;
+	}
+
+	.ap-card-body-padding-sm {
+		padding: 0.875rem;
+	}
+
+	.ap-card-body-padding-lg {
+		padding: 1.5rem;
+	}
+
+	/* ===== TYPOGRAPHY ===== */
+	.ap-card-body :global(h3) {
+		font-size: var(--font-size-base);
+		font-weight: var(--font-weight-medium);
+		margin-bottom: 0.375rem;
+	}
+
+	.ap-card-body :global(p) {
+		color: var(--color-text-muted);
+		font-size: var(--font-size-sm);
+		line-height: 1.5;
+		margin: 0;
+	}
+
+	/* ===== RESPONSIVE ===== */
+	@media (max-width: 640px) {
+		.ap-card-body {
+			padding: 1rem;
+		}
+
+		.ap-card-body-padding-lg {
+			padding: 1.25rem;
+		}
+	}
+</style>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from "svelte";
+interface CardBodyProps {
+    /** Conteúdo do corpo do card */
+    children?: Snippet;
+    /** Padding do corpo */
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    /** Classes CSS adicionais */
+    class?: string;
+}
+declare const CardBody: import("svelte").Component<CardBodyProps, {}, "">;
+type CardBody = ReturnType<typeof CardBody>;
+export default CardBody;

package/dist/components/CardFooter.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	interface CardFooterProps {
+		/** Conteúdo do footer do card */
+		children?: Snippet;
+		/** Mostrar borda superior */
+		bordered?: boolean;
+		/** Alinhamento do conteúdo */
+		align?: 'start' | 'center' | 'end' | 'between';
+		/** Classes CSS adicionais */
+		class?: string;
+	}
+
+	let {
+		children,
+		bordered = true,
+		align = 'start',
+		class: additionalClasses = ''
+	}: CardFooterProps = $props();
+
+	const alignClasses: Record<string, string> = {
+		start: 'ap-card-footer-start',
+		center: 'ap-card-footer-center',
+		end: 'ap-card-footer-end',
+		between: 'ap-card-footer-between'
+	};
+
+	const footerClass = $derived([
+		'ap-card-footer',
+		bordered ? 'ap-card-footer-bordered' : '',
+		alignClasses[align],
+		additionalClasses
+	].filter(Boolean).join(' '));
+</script>
+
+<div class={footerClass}>
+	{@render children?.()}
+</div>
+
+<style>
+	/* ============================================
+	   CARD FOOTER - AgendaPet Design System
+	   ============================================ */
+	.ap-card-footer {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.875rem 1.25rem;
+		background: var(--color-bg-surface-2);
+	}
+
+	.ap-card-footer-bordered {
+		border-top: 1px solid var(--color-border-subtle);
+	}
+
+	/* ===== ALIGNMENT ===== */
+	.ap-card-footer-start {
+		justify-content: flex-start;
+	}
+
+	.ap-card-footer-center {
+		justify-content: center;
+	}
+
+	.ap-card-footer-end {
+		justify-content: flex-end;
+	}
+
+	.ap-card-footer-between {
+		justify-content: space-between;
+	}
+
+	/* ===== RESPONSIVE ===== */
+	@media (max-width: 640px) {
+		.ap-card-footer {
+			padding: 0.75rem 1rem;
+			flex-wrap: wrap;
+		}
+	}
+</style>

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

@@ -0,0 +1,14 @@
+import type { Snippet } from "svelte";
+interface CardFooterProps {
+    /** Conteúdo do footer do card */
+    children?: Snippet;
+    /** Mostrar borda superior */
+    bordered?: boolean;
+    /** Alinhamento do conteúdo */
+    align?: 'start' | 'center' | 'end' | 'between';
+    /** Classes CSS adicionais */
+    class?: string;
+}
+declare const CardFooter: import("svelte").Component<CardFooterProps, {}, "">;
+type CardFooter = ReturnType<typeof CardFooter>;
+export default CardFooter;

package/dist/components/CardHeader.svelte

@@ -0,0 +1,186 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	type CardHeaderVariant = "default" | "primary" | "success" | "warning" | "danger" | "info" | "gradient";
+
+	interface CardHeaderProps {
+		/** Título do card */
+		title?: string;
+		/** Subtítulo/descrição do card */
+		subtitle?: string;
+		/** Conteúdo customizado do header */
+		children?: Snippet;
+		/** Ações do header (botões, links, etc.) */
+		actions?: Snippet;
+		/** Mostrar borda inferior */
+		bordered?: boolean;
+		/** Variante de cor do header */
+		variant?: CardHeaderVariant;
+		/** Classes CSS adicionais */
+		class?: string;
+	}
+
+	let {
+		title,
+		subtitle,
+		children,
+		actions,
+		bordered = true,
+		variant = "default",
+		class: additionalClasses = "",
+	}: CardHeaderProps = $props();
+
+	const headerClass = $derived([
+		"ap-card-header",
+		bordered ? "ap-card-header-bordered" : "",
+		variant !== "default" ? `ap-card-header-${variant}` : "",
+		additionalClasses
+	].filter(Boolean).join(" "));
+</script>
+
+<div class={headerClass}>
+	<div class="ap-card-header-content">
+		{#if title}
+			<h5 class="ap-card-title">{title}</h5>
+		{/if}
+		{#if subtitle}
+			<p class="ap-card-subtitle">{subtitle}</p>
+		{/if}
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+	{#if actions}
+		<div class="ap-card-header-actions">
+			{@render actions()}
+		</div>
+	{/if}
+</div>
+
+<style>
+	/* ============================================
+	   CARD HEADER - AgendaPet Design System
+	   ============================================ */
+	.ap-card-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		gap: var(--spacing-md);
+		padding: 1rem 1.25rem;
+		background-color: var(--color-bg-surface);
+	}
+
+	.ap-card-header-bordered {
+		border-bottom: 1px solid var(--color-border-subtle);
+	}
+
+	.ap-card-header-content {
+		flex: 1;
+		min-width: 0;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.ap-card-title {
+		font-size: var(--font-size-base);
+		font-weight: var(--font-weight-medium);
+		color: var(--color-text);
+		margin: 0;
+		line-height: 1.4;
+	}
+
+	.ap-card-subtitle {
+		font-size: var(--font-size-sm);
+		color: var(--color-text-muted);
+		margin: var(--spacing-xs) 0 0 0;
+		line-height: 1.4;
+	}
+
+	.ap-card-header-actions {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-sm);
+		flex-shrink: 0;
+	}
+
+	/* ===== GRADIENT VARIANT (Default for cards with icon) ===== */
+	.ap-card-header-gradient {
+		background: linear-gradient(135deg,
+			rgba(21, 185, 255, 0.08) 0%,
+			rgba(123, 63, 242, 0.08) 50%,
+			rgba(228, 20, 255, 0.06) 100%
+		);
+	}
+
+	.ap-card-header-gradient .ap-card-title {
+		background: var(--gradient-brand);
+		-webkit-background-clip: text;
+		-webkit-text-fill-color: transparent;
+		background-clip: text;
+	}
+
+	/* ===== SEMANTIC VARIANTS ===== */
+	.ap-card-header-primary {
+		background-color: rgba(123, 63, 242, 0.08);
+	}
+
+	.ap-card-header-primary .ap-card-title {
+		color: var(--color-primary);
+	}
+
+	.ap-card-header-success {
+		background-color: var(--color-success-bg);
+	}
+
+	.ap-card-header-success .ap-card-title {
+		color: var(--color-success-text);
+	}
+
+	.ap-card-header-warning {
+		background-color: var(--color-warning-bg);
+	}
+
+	.ap-card-header-warning .ap-card-title {
+		color: var(--color-warning-text);
+	}
+
+	.ap-card-header-danger {
+		background-color: var(--color-danger-bg);
+	}
+
+	.ap-card-header-danger .ap-card-title {
+		color: var(--color-danger-text);
+	}
+
+	.ap-card-header-info {
+		background-color: var(--color-info-bg);
+	}
+
+	.ap-card-header-info .ap-card-title {
+		color: var(--color-info-text);
+	}
+
+	/* ===== RESPONSIVE ===== */
+	@media (max-width: 768px) {
+		.ap-card-header {
+			flex-wrap: wrap;
+			gap: var(--spacing-sm);
+			padding: 0.75rem 1rem;
+		}
+
+		.ap-card-header-actions {
+			flex-shrink: 1;
+			flex-wrap: wrap;
+			gap: var(--spacing-xs);
+			width: 100%;
+			justify-content: flex-end;
+		}
+	}
+
+	@media (max-width: 576px) {
+		.ap-card-header-actions {
+			justify-content: flex-start;
+		}
+	}
+</style>

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

@@ -0,0 +1,21 @@
+import type { Snippet } from "svelte";
+type CardHeaderVariant = "default" | "primary" | "success" | "warning" | "danger" | "info" | "gradient";
+interface CardHeaderProps {
+    /** Título do card */
+    title?: string;
+    /** Subtítulo/descrição do card */
+    subtitle?: string;
+    /** Conteúdo customizado do header */
+    children?: Snippet;
+    /** Ações do header (botões, links, etc.) */
+    actions?: Snippet;
+    /** Mostrar borda inferior */
+    bordered?: boolean;
+    /** Variante de cor do header */
+    variant?: CardHeaderVariant;
+    /** Classes CSS adicionais */
+    class?: string;
+}
+declare const CardHeader: import("svelte").Component<CardHeaderProps, {}, "">;
+type CardHeader = ReturnType<typeof CardHeader>;
+export default CardHeader;

package/dist/components/Col.svelte

@@ -0,0 +1,172 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	interface ColProps {
+		/** Largura em todas as telas (1-12) */
+		span?: number;
+		/** Largura em telas extra pequenas (<576px) */
+		xs?: number;
+		/** Largura em telas pequenas (576px+) */
+		sm?: number;
+		/** Largura em telas médias (768px+) */
+		md?: number;
+		/** Largura em telas grandes (992px+) */
+		lg?: number;
+		/** Largura em telas extra grandes (1200px+) */
+		xl?: number;
+		/** Offset (deslocamento) */
+		offset?: number;
+		/** Auto width */
+		auto?: boolean;
+		/** Conteúdo da coluna */
+		children?: Snippet;
+		/** Classes CSS adicionais */
+		class?: string;
+	}
+
+	let {
+		span,
+		xs,
+		sm,
+		md,
+		lg,
+		xl,
+		offset,
+		auto = false,
+		children,
+		class: additionalClasses = ''
+	}: ColProps = $props();
+
+	// Construir classes de coluna
+	const colClasses = [
+		auto ? 'col-auto' : span ? `col-${span}` : 'col',
+		xs ? `col-xs-${xs}` : '',
+		sm ? `col-sm-${sm}` : '',
+		md ? `col-md-${md}` : '',
+		lg ? `col-lg-${lg}` : '',
+		xl ? `col-xl-${xl}` : '',
+		offset ? `offset-${offset}` : '',
+		additionalClasses
+	].filter(Boolean).join(' ');
+</script>
+
+<div class={colClasses}>
+	{@render children?.()}
+</div>
+
+<style>
+	/* Base Col - exatamente como Bootstrap 5 */
+	.col {
+		flex: 1 0 0%;
+	}
+
+	.col-auto {
+		flex: 0 0 auto;
+		width: auto;
+	}
+
+	/* Tamanhos de Coluna (1-12) - exatamente como Bootstrap 5 */
+	.col-1 { flex: 0 0 auto; width: 8.333333%; }
+	.col-2 { flex: 0 0 auto; width: 16.666667%; }
+	.col-3 { flex: 0 0 auto; width: 25%; }
+	.col-4 { flex: 0 0 auto; width: 33.333333%; }
+	.col-5 { flex: 0 0 auto; width: 41.666667%; }
+	.col-6 { flex: 0 0 auto; width: 50%; }
+	.col-7 { flex: 0 0 auto; width: 58.333333%; }
+	.col-8 { flex: 0 0 auto; width: 66.666667%; }
+	.col-9 { flex: 0 0 auto; width: 75%; }
+	.col-10 { flex: 0 0 auto; width: 83.333333%; }
+	.col-11 { flex: 0 0 auto; width: 91.666667%; }
+	.col-12 { flex: 0 0 auto; width: 100%; }
+
+	/* Offset */
+	.offset-1 { margin-left: 8.333333%; }
+	.offset-2 { margin-left: 16.666667%; }
+	.offset-3 { margin-left: 25%; }
+	.offset-4 { margin-left: 33.333333%; }
+	.offset-5 { margin-left: 41.666667%; }
+	.offset-6 { margin-left: 50%; }
+	.offset-7 { margin-left: 58.333333%; }
+	.offset-8 { margin-left: 66.666667%; }
+	.offset-9 { margin-left: 75%; }
+	.offset-10 { margin-left: 83.333333%; }
+	.offset-11 { margin-left: 91.666667%; }
+
+	/* Extra Small (default, <576px) */
+	.col-xs-1 { flex: 0 0 auto; width: 8.333333%; }
+	.col-xs-2 { flex: 0 0 auto; width: 16.666667%; }
+	.col-xs-3 { flex: 0 0 auto; width: 25%; }
+	.col-xs-4 { flex: 0 0 auto; width: 33.333333%; }
+	.col-xs-5 { flex: 0 0 auto; width: 41.666667%; }
+	.col-xs-6 { flex: 0 0 auto; width: 50%; }
+	.col-xs-7 { flex: 0 0 auto; width: 58.333333%; }
+	.col-xs-8 { flex: 0 0 auto; width: 66.666667%; }
+	.col-xs-9 { flex: 0 0 auto; width: 75%; }
+	.col-xs-10 { flex: 0 0 auto; width: 83.333333%; }
+	.col-xs-11 { flex: 0 0 auto; width: 91.666667%; }
+	.col-xs-12 { flex: 0 0 auto; width: 100%; }
+
+	/* Small (≥576px) */
+	@media (min-width: 576px) {
+		.col-sm-1 { flex: 0 0 auto; width: 8.333333%; }
+		.col-sm-2 { flex: 0 0 auto; width: 16.666667%; }
+		.col-sm-3 { flex: 0 0 auto; width: 25%; }
+		.col-sm-4 { flex: 0 0 auto; width: 33.333333%; }
+		.col-sm-5 { flex: 0 0 auto; width: 41.666667%; }
+		.col-sm-6 { flex: 0 0 auto; width: 50%; }
+		.col-sm-7 { flex: 0 0 auto; width: 58.333333%; }
+		.col-sm-8 { flex: 0 0 auto; width: 66.666667%; }
+		.col-sm-9 { flex: 0 0 auto; width: 75%; }
+		.col-sm-10 { flex: 0 0 auto; width: 83.333333%; }
+		.col-sm-11 { flex: 0 0 auto; width: 91.666667%; }
+		.col-sm-12 { flex: 0 0 auto; width: 100%; }
+	}
+
+	/* Medium (≥768px) */
+	@media (min-width: 768px) {
+		.col-md-1 { flex: 0 0 auto; width: 8.333333%; }
+		.col-md-2 { flex: 0 0 auto; width: 16.666667%; }
+		.col-md-3 { flex: 0 0 auto; width: 25%; }
+		.col-md-4 { flex: 0 0 auto; width: 33.333333%; }
+		.col-md-5 { flex: 0 0 auto; width: 41.666667%; }
+		.col-md-6 { flex: 0 0 auto; width: 50%; }
+		.col-md-7 { flex: 0 0 auto; width: 58.333333%; }
+		.col-md-8 { flex: 0 0 auto; width: 66.666667%; }
+		.col-md-9 { flex: 0 0 auto; width: 75%; }
+		.col-md-10 { flex: 0 0 auto; width: 83.333333%; }
+		.col-md-11 { flex: 0 0 auto; width: 91.666667%; }
+		.col-md-12 { flex: 0 0 auto; width: 100%; }
+	}
+
+	/* Large (≥992px) */
+	@media (min-width: 992px) {
+		.col-lg-1 { flex: 0 0 auto; width: 8.333333%; }
+		.col-lg-2 { flex: 0 0 auto; width: 16.666667%; }
+		.col-lg-3 { flex: 0 0 auto; width: 25%; }
+		.col-lg-4 { flex: 0 0 auto; width: 33.333333%; }
+		.col-lg-5 { flex: 0 0 auto; width: 41.666667%; }
+		.col-lg-6 { flex: 0 0 auto; width: 50%; }
+		.col-lg-7 { flex: 0 0 auto; width: 58.333333%; }
+		.col-lg-8 { flex: 0 0 auto; width: 66.666667%; }
+		.col-lg-9 { flex: 0 0 auto; width: 75%; }
+		.col-lg-10 { flex: 0 0 auto; width: 83.333333%; }
+		.col-lg-11 { flex: 0 0 auto; width: 91.666667%; }
+		.col-lg-12 { flex: 0 0 auto; width: 100%; }
+	}
+
+	/* Extra Large (≥1200px) */
+	@media (min-width: 1200px) {
+		.col-xl-1 { flex: 0 0 auto; width: 8.333333%; }
+		.col-xl-2 { flex: 0 0 auto; width: 16.666667%; }
+		.col-xl-3 { flex: 0 0 auto; width: 25%; }
+		.col-xl-4 { flex: 0 0 auto; width: 33.333333%; }
+		.col-xl-5 { flex: 0 0 auto; width: 41.666667%; }
+		.col-xl-6 { flex: 0 0 auto; width: 50%; }
+		.col-xl-7 { flex: 0 0 auto; width: 58.333333%; }
+		.col-xl-8 { flex: 0 0 auto; width: 66.666667%; }
+		.col-xl-9 { flex: 0 0 auto; width: 75%; }
+		.col-xl-10 { flex: 0 0 auto; width: 83.333333%; }
+		.col-xl-11 { flex: 0 0 auto; width: 91.666667%; }
+		.col-xl-12 { flex: 0 0 auto; width: 100%; }
+	}
+</style>

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

@@ -0,0 +1,26 @@
+import type { Snippet } from "svelte";
+interface ColProps {
+    /** Largura em todas as telas (1-12) */
+    span?: number;
+    /** Largura em telas extra pequenas (<576px) */
+    xs?: number;
+    /** Largura em telas pequenas (576px+) */
+    sm?: number;
+    /** Largura em telas médias (768px+) */
+    md?: number;
+    /** Largura em telas grandes (992px+) */
+    lg?: number;
+    /** Largura em telas extra grandes (1200px+) */
+    xl?: number;
+    /** Offset (deslocamento) */
+    offset?: number;
+    /** Auto width */
+    auto?: boolean;
+    /** Conteúdo da coluna */
+    children?: Snippet;
+    /** Classes CSS adicionais */
+    class?: string;
+}
+declare const Col: import("svelte").Component<ColProps, {}, "">;
+type Col = ReturnType<typeof Col>;
+export default Col;

package/dist/components/Container.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	interface ContainerProps {
+		/** Tamanho máximo do container */
+		size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | 'fluid';
+		/** Padding vertical */
+		py?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+		/** Conteúdo do container */
+		children?: Snippet;
+		/** Classes CSS adicionais */
+		class?: string;
+	}
+
+	let {
+		size = '2xl',
+		py = 'md',
+		children,
+		class: additionalClasses = ''
+	}: ContainerProps = $props();
+
+	const sizeClasses: Record<string, string> = {
+		sm: 'container-sm',
+		md: 'container-md',
+		lg: 'container-lg',
+		xl: 'container-xl',
+		'2xl': 'container-2xl',
+		full: 'container-full',
+		fluid: 'container-fluid'
+	};
+
+	const pyClasses: Record<string, string> = {
+		none: '',
+		sm: 'py-2',
+		md: 'py-4',
+		lg: 'py-5',
+		xl: 'py-6'
+	};
+
+	const containerClass = [
+		'container',
+		sizeClasses[size],
+		pyClasses[py],
+		additionalClasses
+	].filter(Boolean).join(' ');
+</script>
+
+<div class={containerClass}>
+	{@render children?.()}
+</div>
+
+<style>
+	.container {
+		width: 100%;
+		margin-left: auto;
+		margin-right: auto;
+		padding-left: var(--spacing-md);
+		padding-right: var(--spacing-md);
+	}
+
+	/* Tamanhos de Container */
+	.container-sm {
+		max-width: var(--container-sm);
+	}
+
+	.container-md {
+		max-width: var(--container-md);
+	}
+
+	.container-lg {
+		max-width: var(--container-lg);
+	}
+
+	.container-xl {
+		max-width: var(--container-xl);
+	}
+
+	.container-2xl {
+		max-width: var(--container-2xl);
+	}
+
+	.container-full {
+		max-width: 1400px; /* Igual ao header */
+	}
+
+	.container-fluid {
+		max-width: 100%;
+	}
+
+	/* Padding Vertical */
+	.py-2 {
+		padding-top: var(--spacing-sm);
+		padding-bottom: var(--spacing-sm);
+	}
+
+	.py-4 {
+		padding-top: var(--spacing-lg);
+		padding-bottom: var(--spacing-lg);
+	}
+
+	.py-5 {
+		padding-top: var(--spacing-xl);
+		padding-bottom: var(--spacing-xl);
+	}
+
+	.py-6 {
+		padding-top: var(--spacing-2xl);
+		padding-bottom: var(--spacing-2xl);
+	}
+
+	/* Responsividade */
+	@media (max-width: 576px) {
+		.container {
+			padding-left: var(--spacing-sm);
+			padding-right: var(--spacing-sm);
+		}
+	}
+</style>