@groundbrick/svelte-ui 0.1.1

package/dist/components/Modal.svelte

@@ -0,0 +1,473 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { onDestroy } from "svelte";
+	import { lockBodyScroll, unlockBodyScroll } from "../utils/scrollLock.js";
+
+	type HeaderVariant = "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "info" | "gradient";
+
+	type BodyPadding = "none" | "sm" | "md" | "lg";
+
+	interface ModalProps {
+		/** Modal title displayed in the header */
+		title: string;
+		/** Controls modal visibility */
+		show: boolean;
+		/** Callback function when modal is closed */
+		onClose: () => void;
+		/** Modal content */
+		children?: Snippet;
+		/** Optional footer snippet. When provided, Modal renders a styled footer area. */
+		footer?: Snippet;
+		/** Additional CSS classes */
+		class?: string;
+		/** Modal size variant */
+		size?: "sm" | "md" | "lg" | "xl";
+		/**
+		 * Padding interno aplicado ao wrapper `.ap-modal-body`.
+		 * - `none`: 0 (conteúdo edge-to-edge, ex.: tabelas, listas)
+		 * - `sm`: 0.75rem
+		 * - `md` (default): 1rem
+		 * - `lg`: 1.25rem 1.5rem (conteúdo mais "arejado")
+		 */
+		bodyPadding?: BodyPadding;
+		/** Whether clicking the backdrop closes the modal (default: true) */
+		closeOnBackdropClick?: boolean;
+		/** Header color variant */
+		headerVariant?: HeaderVariant;
+		/** Custom header snippet (replaces default header) */
+		customHeader?: Snippet;
+		/** Custom modal z-index when this instance must stack above other overlays */
+		zIndex?: number;
+		/** Custom backdrop z-index for this modal instance */
+		backdropZIndex?: number;
+		/** Centra verticalmente o diálogo no viewport (Bootstrap `modal-dialog-centered`). */
+		centered?: boolean;
+	}
+
+	let {
+		title,
+		show = $bindable(false),
+		onClose,
+		children,
+		footer,
+		class: additionalClasses = "",
+		size = "md",
+		bodyPadding = "md",
+		closeOnBackdropClick = false,
+		headerVariant = "default",
+		customHeader,
+		zIndex,
+		backdropZIndex,
+		centered = false,
+	}: ModalProps = $props();
+
+	let modalElement = $state<HTMLDivElement | null>(null);
+	let isOpen = $state(false);
+	let hasScrollLock = false;
+
+	function acquireScrollLock() {
+		if (hasScrollLock) return;
+		lockBodyScroll();
+		hasScrollLock = true;
+	}
+
+	function releaseScrollLock() {
+		if (!hasScrollLock) return;
+		unlockBodyScroll();
+		hasScrollLock = false;
+	}
+
+	// Handle show/hide transitions
+	$effect(() => {
+		if (show) {
+			const timeout = setTimeout(() => {
+				isOpen = true;
+				acquireScrollLock();
+			}, 10);
+
+			return () => clearTimeout(timeout);
+		}
+
+		isOpen = false;
+		releaseScrollLock();
+	});
+
+	onDestroy(() => {
+		releaseScrollLock();
+	});
+
+	// Handle escape key
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === "Escape" && show) {
+			onClose();
+		}
+	}
+
+	// Handle backdrop click
+	function handleBackdropClick(event: MouseEvent) {
+		if (closeOnBackdropClick && event.target === modalElement) {
+			onClose();
+		}
+	}
+
+	const sizeClasses: Record<string, string> = {
+		sm: "ap-modal-sm",
+		md: "",
+		lg: "ap-modal-lg",
+		xl: "ap-modal-xl",
+	};
+
+	const modalDialogClass = $derived([
+		"ap-modal-dialog",
+		sizeClasses[size],
+		centered ? "ap-modal-dialog-centered" : "",
+		additionalClasses
+	].filter(Boolean).join(" "));
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if show}
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<div
+		bind:this={modalElement}
+		class="ap-modal"
+		class:show={isOpen}
+		class:fade={true}
+		style={`display: block;${zIndex !== undefined ? ` --z-modal: ${zIndex};` : ""}`}
+		tabindex="-1"
+		role="dialog"
+		aria-modal="true"
+		aria-labelledby="modal-title"
+		onclick={handleBackdropClick}
+	>
+		<div class={modalDialogClass} role="document">
+			<div class="ap-modal-content">
+				{#if customHeader}
+					{@render customHeader()}
+				{:else}
+					<div
+						class="ap-modal-header"
+						class:ap-modal-header-primary={headerVariant === "primary"}
+						class:ap-modal-header-secondary={headerVariant === "secondary"}
+						class:ap-modal-header-success={headerVariant === "success"}
+						class:ap-modal-header-warning={headerVariant === "warning"}
+						class:ap-modal-header-danger={headerVariant === "danger"}
+						class:ap-modal-header-info={headerVariant === "info"}
+						class:ap-modal-header-gradient={headerVariant === "gradient"}
+					>
+						<h5 class="ap-modal-title" id="modal-title">{title}</h5>
+						<button
+							type="button"
+							class="ap-modal-close"
+							class:ap-modal-close-light={headerVariant && headerVariant !== "default"}
+							aria-label="Close"
+							onclick={onClose}
+						>
+							<i class="bi bi-x-lg"></i>
+						</button>
+					</div>
+				{/if}
+
+				{#if children}
+					<div class="ap-modal-body ap-modal-body-padding-{bodyPadding}">
+						{@render children()}
+					</div>
+				{/if}
+
+				{#if footer}
+					<div class="ap-modal-footer">
+						{@render footer()}
+					</div>
+				{/if}
+			</div>
+		</div>
+	</div>
+
+	<div
+		class="ap-modal-backdrop"
+		class:show={isOpen}
+		class:fade={true}
+		style={backdropZIndex !== undefined ? `--z-modal-backdrop: ${backdropZIndex};` : undefined}
+	></div>
+{/if}
+
+<style>
+	/* ============================================
+	   MODAL - AgendaPet Design System
+	   ============================================ */
+	.ap-modal {
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: var(--z-modal, 1050);
+		width: 100%;
+		height: 100%;
+		overflow-x: hidden;
+		overflow-y: auto;
+		outline: 0;
+		transition: opacity var(--transition-base);
+	}
+
+	.ap-modal-backdrop {
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: var(--z-modal-backdrop, 1040);
+		width: 100vw;
+		height: 100vh;
+		background-color: rgba(0, 0, 0, 0.5);
+		transition: opacity var(--transition-base);
+	}
+
+	.ap-modal.fade {
+		opacity: 0;
+	}
+
+	.ap-modal.fade.show {
+		opacity: 1;
+	}
+
+	.ap-modal-backdrop.fade {
+		opacity: 0;
+	}
+
+	.ap-modal-backdrop.fade.show {
+		opacity: 1;
+	}
+
+	/* ===== DIALOG ===== */
+	.ap-modal-dialog {
+		position: relative;
+		width: auto;
+		margin: 0.5rem;
+		pointer-events: none;
+		transition: transform var(--transition-base);
+	}
+
+	.ap-modal-dialog-centered {
+		display: flex;
+		align-items: center;
+		min-height: calc(100% - 1rem);
+	}
+
+	@media (min-width: 576px) {
+		.ap-modal-dialog-centered {
+			min-height: calc(100% - 3.5rem);
+		}
+	}
+
+	.ap-modal.fade .ap-modal-dialog {
+		transform: translate(0, -20px);
+	}
+
+	.ap-modal.show .ap-modal-dialog {
+		transform: translate(0, 0);
+	}
+
+	/* ===== SIZES ===== */
+	@media (min-width: 576px) {
+		.ap-modal-dialog {
+			max-width: 500px;
+			margin: 1.75rem auto;
+		}
+
+		.ap-modal-sm {
+			max-width: 360px;
+		}
+
+		.ap-modal-lg {
+			max-width: 800px;
+		}
+
+		.ap-modal-xl {
+			max-width: 1140px;
+		}
+	}
+
+	/* ===== CONTENT ===== */
+	.ap-modal-content {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		pointer-events: auto;
+		background-color: var(--color-bg-surface);
+		background-clip: padding-box;
+		border: none;
+		border-radius: var(--radius-xl);
+		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
+		outline: 0;
+		max-height: calc(100vh - 1rem);
+		overflow: hidden;
+	}
+
+	@media (min-width: 576px) {
+		.ap-modal-content {
+			max-height: calc(100vh - 3.5rem);
+		}
+	}
+
+	/* ===== HEADER ===== */
+	.ap-modal-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 1rem 1.25rem;
+		border-bottom: 1px solid var(--color-border-subtle);
+		background-color: var(--color-bg-surface);
+	}
+
+	.ap-modal-title {
+		font-size: var(--font-size-base);
+		font-weight: var(--font-weight-medium);
+		color: var(--color-text);
+		margin: 0;
+		line-height: 1.4;
+	}
+
+	.ap-modal-close {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 32px;
+		height: 32px;
+		padding: 0;
+		background: transparent;
+		border: none;
+		border-radius: var(--radius-sm);
+		cursor: pointer;
+		opacity: 0.6;
+		transition: opacity var(--transition-fast);
+		color: var(--color-text);
+	}
+
+	.ap-modal-close:hover {
+		opacity: 1;
+	}
+
+	.ap-modal-close:focus-visible {
+		outline: 2px solid var(--color-primary);
+		outline-offset: 2px;
+	}
+
+	.ap-modal-close-light {
+		color: white;
+		opacity: 0.8;
+	}
+
+	.ap-modal-close-light:hover {
+		opacity: 1;
+	}
+
+	/* ===== HEADER VARIANTS (Gradient 135deg) ===== */
+	.ap-modal-header-primary {
+		background: linear-gradient(135deg, #7B3FF2 0%, #5A27D6 100%);
+		color: white;
+		border-bottom: none;
+	}
+
+	.ap-modal-header-primary .ap-modal-title {
+		color: white;
+	}
+
+	.ap-modal-header-secondary {
+		background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-hover) 100%);
+		color: white;
+		border-bottom: none;
+	}
+
+	.ap-modal-header-secondary .ap-modal-title {
+		color: white;
+	}
+
+	.ap-modal-header-success {
+		background: linear-gradient(135deg, #18B77E 0%, #128A5E 100%);
+		color: white;
+		border-bottom: none;
+	}
+
+	.ap-modal-header-success .ap-modal-title {
+		color: white;
+	}
+
+	.ap-modal-header-warning {
+		background: linear-gradient(135deg, #9A7500 0%, #7A5C00 100%);
+		color: white;
+		border-bottom: none;
+	}
+
+	.ap-modal-header-warning .ap-modal-title {
+		color: white;
+	}
+
+	.ap-modal-header-danger {
+		background: linear-gradient(135deg, #E4475A 0%, #C33545 100%);
+		color: white;
+		border-bottom: none;
+	}
+
+	.ap-modal-header-danger .ap-modal-title {
+		color: white;
+	}
+
+	.ap-modal-header-info {
+		background: linear-gradient(135deg, #18A7D6 0%, #1287AD 100%);
+		color: white;
+		border-bottom: none;
+	}
+
+	.ap-modal-header-info .ap-modal-title {
+		color: white;
+	}
+
+	.ap-modal-header-gradient {
+		background: linear-gradient(135deg, #15B9FF 0%, #7B3FF2 50%, #E414FF 100%);
+		color: white;
+		border-bottom: none;
+	}
+
+	.ap-modal-header-gradient .ap-modal-title {
+		color: white;
+	}
+
+	/* ===== BODY (Global for nested content) ===== */
+	:global(.ap-modal-body) {
+		flex: 1 1 auto;
+		overflow-y: auto;
+	}
+
+	/* Padding variants applied pela prop bodyPadding. Globais para cobrir
+	   também consumidores que aninham o próprio conteúdo dentro do wrapper. */
+	:global(.ap-modal-body-padding-none) {
+		padding: 0;
+	}
+	:global(.ap-modal-body-padding-sm) {
+		padding: 0.75rem;
+	}
+	:global(.ap-modal-body-padding-md) {
+		padding: 1rem;
+	}
+	:global(.ap-modal-body-padding-lg) {
+		padding: 1.25rem 1.5rem;
+	}
+
+	:global(.ap-modal-body p) {
+		color: var(--color-text-muted);
+		font-size: var(--font-size-sm);
+		line-height: 1.5;
+	}
+
+	/* ===== FOOTER =====
+	   Aplicado pelo snippet `footer` ao wrapper `.ap-modal-footer`.
+	   Consumidores devem usar `{#snippet footer()}` em vez de `<div class="modal-footer">`. */
+	:global(.ap-modal-footer) {
+		display: flex;
+		gap: 0.625rem;
+		justify-content: flex-end;
+		padding: 1rem 1.5rem;
+		background: var(--color-bg-surface-2);
+		border-top: 1px solid var(--color-border-subtle);
+	}
+</style>

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

@@ -0,0 +1,42 @@
+import type { Snippet } from "svelte";
+type HeaderVariant = "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "info" | "gradient";
+type BodyPadding = "none" | "sm" | "md" | "lg";
+interface ModalProps {
+    /** Modal title displayed in the header */
+    title: string;
+    /** Controls modal visibility */
+    show: boolean;
+    /** Callback function when modal is closed */
+    onClose: () => void;
+    /** Modal content */
+    children?: Snippet;
+    /** Optional footer snippet. When provided, Modal renders a styled footer area. */
+    footer?: Snippet;
+    /** Additional CSS classes */
+    class?: string;
+    /** Modal size variant */
+    size?: "sm" | "md" | "lg" | "xl";
+    /**
+     * Padding interno aplicado ao wrapper `.ap-modal-body`.
+     * - `none`: 0 (conteúdo edge-to-edge, ex.: tabelas, listas)
+     * - `sm`: 0.75rem
+     * - `md` (default): 1rem
+     * - `lg`: 1.25rem 1.5rem (conteúdo mais "arejado")
+     */
+    bodyPadding?: BodyPadding;
+    /** Whether clicking the backdrop closes the modal (default: true) */
+    closeOnBackdropClick?: boolean;
+    /** Header color variant */
+    headerVariant?: HeaderVariant;
+    /** Custom header snippet (replaces default header) */
+    customHeader?: Snippet;
+    /** Custom modal z-index when this instance must stack above other overlays */
+    zIndex?: number;
+    /** Custom backdrop z-index for this modal instance */
+    backdropZIndex?: number;
+    /** Centra verticalmente o diálogo no viewport (Bootstrap `modal-dialog-centered`). */
+    centered?: boolean;
+}
+declare const Modal: import("svelte").Component<ModalProps, {}, "show">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;