@groundbrick/svelte-ui 0.1.1

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

@@ -0,0 +1,14 @@
+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;
+}
+declare const Container: import("svelte").Component<ContainerProps, {}, "">;
+type Container = ReturnType<typeof Container>;
+export default Container;

package/dist/components/Drawer.svelte

@@ -0,0 +1,233 @@
+<script lang="ts">
+    import { onDestroy } from "svelte";
+    import { lockBodyScroll, unlockBodyScroll } from "../utils/scrollLock.js";
+    interface Props {
+        open: boolean;
+        onClose: () => void;
+        title?: string;
+        customTitle?: import('svelte').Snippet;
+        customHeader?: import('svelte').Snippet;
+        showHeader?: boolean;
+        size?: "default" | "large" | "xlarge";
+        children?: import('svelte').Snippet;
+    }
+
+    let {
+        open = false,
+        onClose,
+        title,
+        customTitle,
+        customHeader,
+        showHeader = true,
+        size = "large",
+        children,
+    }: Props = $props();
+
+    let hasScrollLock = false;
+
+    function acquireScrollLock() {
+        if (hasScrollLock) return;
+        lockBodyScroll();
+        hasScrollLock = true;
+    }
+
+    function releaseScrollLock() {
+        if (!hasScrollLock) return;
+        unlockBodyScroll();
+        hasScrollLock = false;
+    }
+
+    // Handle ESC key
+    function handleKeyDown(event: KeyboardEvent) {
+        if (event.key === "Escape" && open) {
+            onClose();
+        }
+    }
+
+    // Prevent body scroll when drawer is open
+    $effect(() => {
+        if (open) {
+            acquireScrollLock();
+        } else {
+            releaseScrollLock();
+        }
+
+        return () => {
+            releaseScrollLock();
+        };
+    });
+
+    onDestroy(() => {
+        releaseScrollLock();
+    });
+</script>
+
+<svelte:window on:keydown={handleKeyDown} />
+
+{#if open}
+    <!-- Backdrop -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class="drawer-backdrop" onclick={onClose}></div>
+
+    <!-- Drawer -->
+    <div class="drawer drawer-{size}">
+        {#if showHeader}
+            {#if customHeader}
+                {@render customHeader()}
+            {:else}
+                <div class="drawer-header">
+                    {#if customTitle}
+                        <div class="drawer-title-custom">
+                            {@render customTitle()}
+                        </div>
+                    {:else if title}
+                        <h2 class="drawer-title">{title}</h2>
+                    {/if}
+                    <button class="drawer-close" onclick={onClose} aria-label="Fechar">
+                        <i class="bi bi-x-lg"></i>
+                    </button>
+                </div>
+            {/if}
+        {/if}
+
+        <!-- Content -->
+        <div class="drawer-content">
+            {@render children?.()}
+        </div>
+    </div>
+{/if}
+
+<style>
+    /* Backdrop */
+    .drawer-backdrop {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.5);
+        backdrop-filter: blur(4px);
+        z-index: 1040;
+        animation: fadeIn var(--transition-base);
+    }
+
+    @keyframes fadeIn {
+        from {
+            opacity: 0;
+        }
+        to {
+            opacity: 1;
+        }
+    }
+
+    /* Drawer Container */
+    .drawer {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        background: var(--color-white);
+        box-shadow: var(--shadow-2xl);
+        z-index: 1050;
+        display: flex;
+        flex-direction: column;
+        animation: slideInRight var(--transition-base);
+    }
+
+    @keyframes slideInRight {
+        from {
+            transform: translateX(100%);
+        }
+        to {
+            transform: translateX(0);
+        }
+    }
+
+    /* Drawer Sizes */
+    .drawer-default {
+        width: min(500px, 90vw);
+    }
+
+    .drawer-large {
+        width: min(700px, 90vw);
+    }
+
+    .drawer-xlarge {
+        width: min(900px, 95vw);
+    }
+
+    /* Drawer Header */
+    .drawer-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-lg);
+        border-bottom: var(--border-width-thin) solid var(--border-color-light);
+        flex-shrink: 0;
+    }
+
+    .drawer-header-custom {
+        position: absolute;
+        width: 100%;
+    }
+
+    .drawer-title {
+        margin: 0;
+        font-size: var(--font-size-2xl);
+        font-weight: var(--font-weight-bold);
+        color: var(--color-gray-900);
+    }
+
+    .drawer-title-custom {
+        flex: 1;
+        min-width: 0;
+    }
+
+    .drawer-close {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 40px;
+        height: 40px;
+        border: none;
+        background: var(--color-gray-100);
+        color: var(--color-gray-600);
+        border-radius: var(--radius-full);
+        cursor: pointer;
+        transition: all var(--transition-fast);
+        flex-shrink: 0;
+    }
+
+    .drawer-close:hover {
+        background: var(--color-gray-200);
+        color: var(--color-gray-900);
+        transform: rotate(90deg);
+    }
+
+    .drawer-close i {
+        font-size: var(--font-size-lg);
+    }
+
+    /* Drawer Content */
+    .drawer-content {
+        flex: 1;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+
+    /* Mobile Responsive */
+    @media (max-width: 768px) {
+        .drawer {
+            width: 100vw !important;
+        }
+
+        .drawer-header {
+            padding: var(--spacing-lg) var(--spacing-md);
+        }
+
+        .drawer-title {
+            font-size: var(--font-size-xl);
+        }
+    }
+</style>

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

@@ -0,0 +1,13 @@
+interface Props {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    customTitle?: import('svelte').Snippet;
+    customHeader?: import('svelte').Snippet;
+    showHeader?: boolean;
+    size?: "default" | "large" | "xlarge";
+    children?: import('svelte').Snippet;
+}
+declare const Drawer: import("svelte").Component<Props, {}, "">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;

package/dist/components/Dropdown.svelte

@@ -0,0 +1,190 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	interface DropdownProps {
+		/** Conteúdo do botão trigger */
+		trigger?: Snippet;
+		/** Conteúdo do menu dropdown */
+		children?: Snippet;
+		/** Variante do botão trigger */
+		variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'outline-primary' | 'outline-secondary' | 'link' | 'ghost';
+		/** Tamanho do botão trigger */
+		size?: 'sm' | 'md' | 'lg';
+		/** Alinhamento do menu */
+		align?: 'start' | 'end';
+		/** Direção do dropdown */
+		direction?: 'down' | 'up' | 'start' | 'end';
+		/** Classes CSS adicionais para o wrapper */
+		class?: string;
+		/** Classes CSS adicionais para o botão */
+		buttonClass?: string;
+		/** ARIA label para acessibilidade */
+		ariaLabel?: string;
+		/** Desabilitar dropdown */
+		disabled?: boolean;
+	}
+
+	let {
+		trigger,
+		children,
+		variant = 'link',
+		size = 'sm',
+		align = 'end',
+		direction = 'down',
+		class: additionalClasses = '',
+		buttonClass = '',
+		ariaLabel = 'Menu de ações',
+		disabled = false
+	}: DropdownProps = $props();
+
+	// Mapear variantes para classes Bootstrap
+	const variantClasses: Record<string, string> = {
+		primary: 'btn-primary',
+		secondary: 'btn-secondary',
+		success: 'btn-success',
+		danger: 'btn-danger',
+		warning: 'btn-warning',
+		info: 'btn-info',
+		light: 'btn-light',
+		dark: 'btn-dark',
+		'outline-primary': 'btn-outline-primary',
+		'outline-secondary': 'btn-outline-secondary',
+		link: 'btn-link',
+		ghost: 'btn-ghost'
+	};
+
+	const sizeClasses: Record<string, string> = {
+		sm: 'btn-sm',
+		md: '',
+		lg: 'btn-lg'
+	};
+
+	const directionClasses: Record<string, string> = {
+		down: 'dropdown',
+		up: 'dropup',
+		start: 'dropstart',
+		end: 'dropend'
+	};
+
+	// Construir classe do botão
+	const btnClass = [
+		'btn',
+		variantClasses[variant],
+		sizeClasses[size],
+		'dropdown-toggle',
+		buttonClass
+	].filter(Boolean).join(' ');
+
+	// Construir classe do menu
+	const menuClass = [
+		'dropdown-menu',
+		align === 'end' ? 'dropdown-menu-end' : ''
+	].filter(Boolean).join(' ');
+
+	// Construir classe do wrapper
+	const wrapperClass = [
+		directionClasses[direction],
+		additionalClasses
+	].filter(Boolean).join(' ');
+</script>
+
+<div class={wrapperClass}>
+	<button
+		class={btnClass}
+		type="button"
+		data-bs-toggle="dropdown"
+		aria-expanded="false"
+		aria-label={ariaLabel}
+		disabled={disabled}
+	>
+		{#if trigger}
+			{@render trigger()}
+		{:else}
+			<i class="bi bi-three-dots-vertical"></i>
+		{/if}
+	</button>
+	<ul class={menuClass}>
+		{#if children}
+			{@render children()}
+		{/if}
+	</ul>
+</div>
+
+<style>
+	/* ============================================
+	   DROPDOWN - AgendaPet Design System
+	   ============================================ */
+
+	/* Variante Ghost */
+	.btn-ghost {
+		background: transparent;
+		border: none;
+		color: var(--color-text);
+		padding: 0.5rem 0.75rem;
+		border-radius: var(--radius-md);
+		transition: all var(--transition-fast);
+	}
+
+	.btn-ghost:hover:not(:disabled) {
+		background: var(--color-bg-surface-2);
+		color: var(--color-text);
+	}
+
+	.btn-ghost:active:not(:disabled) {
+		background: var(--color-gray-200);
+	}
+
+	/* Remove a seta do dropdown para o botão link */
+	.btn-link.dropdown-toggle::after {
+		display: none;
+	}
+
+	/* Ghost dropdown toggle */
+	.btn-ghost.dropdown-toggle::after {
+		display: none;
+	}
+
+	/* Dropdown menu styling */
+	:global(.dropdown-menu) {
+		border: 1px solid var(--color-border-subtle);
+		border-radius: var(--radius-lg);
+		box-shadow: var(--shadow-lg);
+		padding: 0.375rem;
+		min-width: 10rem;
+	}
+
+	:global(.dropdown-item) {
+		padding: 0.5rem 0.75rem;
+		border-radius: var(--radius-md);
+		color: var(--color-text);
+		font-size: var(--font-size-sm);
+		transition: all var(--transition-fast);
+	}
+
+	:global(.dropdown-item:hover),
+	:global(.dropdown-item:focus) {
+		background-color: var(--color-bg-surface-2);
+		color: var(--color-text);
+	}
+
+	:global(.dropdown-item.active),
+	:global(.dropdown-item:active) {
+		background-color: var(--color-primary);
+		color: white;
+	}
+
+	:global(.dropdown-item.text-danger) {
+		color: var(--color-danger);
+	}
+
+	:global(.dropdown-item.text-danger:hover),
+	:global(.dropdown-item.text-danger:focus) {
+		background-color: var(--color-danger-bg);
+		color: var(--color-danger);
+	}
+
+	:global(.dropdown-divider) {
+		margin: 0.375rem 0;
+		border-color: var(--color-border-subtle);
+	}
+</style>

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

@@ -0,0 +1,26 @@
+import type { Snippet } from "svelte";
+interface DropdownProps {
+    /** Conteúdo do botão trigger */
+    trigger?: Snippet;
+    /** Conteúdo do menu dropdown */
+    children?: Snippet;
+    /** Variante do botão trigger */
+    variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'outline-primary' | 'outline-secondary' | 'link' | 'ghost';
+    /** Tamanho do botão trigger */
+    size?: 'sm' | 'md' | 'lg';
+    /** Alinhamento do menu */
+    align?: 'start' | 'end';
+    /** Direção do dropdown */
+    direction?: 'down' | 'up' | 'start' | 'end';
+    /** Classes CSS adicionais para o wrapper */
+    class?: string;
+    /** Classes CSS adicionais para o botão */
+    buttonClass?: string;
+    /** ARIA label para acessibilidade */
+    ariaLabel?: string;
+    /** Desabilitar dropdown */
+    disabled?: boolean;
+}
+declare const Dropdown: import("svelte").Component<DropdownProps, {}, "">;
+type Dropdown = ReturnType<typeof Dropdown>;
+export default Dropdown;

package/dist/components/DropdownItem.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	interface DropdownItemProps {
+		/** Item content */
+		children?: Snippet;
+		/** Left icon */
+		icon?: Snippet;
+		/** Navigation URL (renders an anchor) */
+		href?: string;
+		/** Click callback */
+		onclick?: (event: MouseEvent) => void;
+		/** Color variant */
+		variant?: 'default' | 'danger' | 'success' | 'warning' | 'primary';
+		/** Disabled item */
+		disabled?: boolean;
+		/** Additional CSS classes */
+		class?: string;
+		/** Item type */
+		type?: 'item' | 'divider' | 'header';
+	}
+
+	let {
+		children,
+		icon,
+		href,
+		onclick,
+		variant = 'default',
+		disabled = false,
+		class: additionalClasses = '',
+		type = 'item'
+	}: DropdownItemProps = $props();
+
+	// Variant classes
+	const variantClasses: Record<string, string> = {
+		default: '',
+		danger: 'text-danger',
+		success: 'text-success',
+		warning: 'text-warning',
+		primary: 'text-primary'
+	};
+
+	const itemClass = [
+		'dropdown-item',
+		variantClasses[variant],
+		additionalClasses
+	].filter(Boolean).join(' ');
+</script>
+
+{#if type === 'divider'}
+	<li><hr class="dropdown-divider" /></li>
+{:else if type === 'header'}
+	<li><h6 class="dropdown-header">{#if children}{@render children()}{/if}</h6></li>
+{:else if href}
+	<li>
+		<a
+			{href}
+			class={itemClass}
+			class:disabled={disabled}
+			aria-disabled={disabled}
+		>
+			{#if icon}
+				<span class="dropdown-icon">
+					{@render icon()}
+				</span>
+			{/if}
+			{#if children}
+				{@render children()}
+			{/if}
+		</a>
+	</li>
+{:else}
+	<li>
+		<button
+			type="button"
+			class={itemClass}
+			onclick={onclick}
+			disabled={disabled}
+		>
+			{#if icon}
+				<span class="dropdown-icon">
+					{@render icon()}
+				</span>
+			{/if}
+			{#if children}
+				{@render children()}
+			{/if}
+		</button>
+	</li>
+{/if}
+
+<style>
+	.dropdown-icon {
+		display: inline-flex;
+		align-items: center;
+		margin-right: 0.5rem;
+	}
+
+	.dropdown-item.disabled {
+		pointer-events: none;
+		opacity: 0.5;
+	}
+</style>

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

@@ -0,0 +1,22 @@
+import type { Snippet } from "svelte";
+interface DropdownItemProps {
+    /** Item content */
+    children?: Snippet;
+    /** Left icon */
+    icon?: Snippet;
+    /** Navigation URL (renders an anchor) */
+    href?: string;
+    /** Click callback */
+    onclick?: (event: MouseEvent) => void;
+    /** Color variant */
+    variant?: 'default' | 'danger' | 'success' | 'warning' | 'primary';
+    /** Disabled item */
+    disabled?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+    /** Item type */
+    type?: 'item' | 'divider' | 'header';
+}
+declare const DropdownItem: import("svelte").Component<DropdownItemProps, {}, "">;
+type DropdownItem = ReturnType<typeof DropdownItem>;
+export default DropdownItem;