@groundbrick/svelte-ui 0.1.1

package/README.md

@@ -0,0 +1,125 @@
+# @groundbrick/svelte-ui
+
+Reusable **Svelte 5** UI components (design system). Themeable via CSS variables,
+extensible via props, `class` passthrough and snippets.
+
+These components were extracted to be reused across projects. They have sensible
+default styling and behavior, but every visual aspect can be re-themed by
+overriding CSS custom properties.
+
+## Install (workspace)
+
+```jsonc
+// consumer app package.json
+{
+  "dependencies": {
+    "@groundbrick/svelte-ui": "workspace:*"
+  }
+}
+```
+
+Build the package before the consuming app (the monorepo build runs packages
+first):
+
+```bash
+pnpm -F @groundbrick/svelte-ui build
+```
+
+## Peer dependencies
+
+| Dependency       | Required | Notes                                                              |
+| ---------------- | -------- | ------------------------------------------------------------------ |
+| `svelte`         | yes      | `^5.25.0` (runes).                                                  |
+| `@200systems/shared` | yes  | Used by `PhoneInput` (phone parsing/formatting utilities).         |
+| `bootstrap`      | optional | Components use Bootstrap 5 classes (`.row`, `.dropdown`, etc.). Load its CSS/JS in the app. |
+| `bootstrap-icons`| optional | Some built-in icons use `bi bi-*` classes.                         |
+
+The consuming app is responsible for loading Bootstrap and Bootstrap Icons (as
+the AgendaPet app already does in its root layout).
+
+## Theming
+
+Import the default tokens once (e.g. in your root layout), then override any CSS
+variable to re-theme. Components reference tokens exclusively, so changing one
+token re-skins every component that uses it.
+
+```svelte
+<script>
+  import '@groundbrick/svelte-ui/styles/tokens.css';
+</script>
+
+<!-- Re-theme a subtree (e.g. per-tenant branding) by overriding variables -->
+<div style="--color-primary: #0aa; --radius-full: 8px;">
+  <Button>Themed button</Button>
+</div>
+```
+
+You can also skip the bundled tokens entirely and define your own
+`--color-primary`, `--spacing-*`, `--radius-*`, `--shadow-*`, etc.
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import { Button, Card, CardBody, Alert, Badge, EmptyState } from '@groundbrick/svelte-ui';
+  import '@groundbrick/svelte-ui/styles/tokens.css';
+
+  let saving = $state(false);
+</script>
+
+<Card variant="elevated">
+  <CardBody>
+    <Alert variant="info">Welcome back!</Alert>
+    <Badge variant="success">Active</Badge>
+    <Button variant="primary" loading={saving} onclick={() => (saving = true)}>
+      Save
+    </Button>
+  </CardBody>
+</Card>
+```
+
+## Components
+
+| Component                                  | Purpose                                             |
+| ------------------------------------------ | --------------------------------------------------- |
+| `Button`                                   | Button/link with variants, sizes and loading state. |
+| `Dropdown`, `DropdownItem`                 | Bootstrap-based dropdown menu.                      |
+| `Card`, `CardHeader`, `CardBody`, `CardFooter` | Card primitives.                               |
+| `FormField`                                | Labelled input/textarea/select field.              |
+| `PhoneInput`                               | E.164 phone input with country selector.           |
+| `DurationInput`                            | Hours + minutes duration input.                    |
+| `AutocompleteInput`                        | Async/debounced autocomplete field.                |
+| `Badge`                                    | Pill/solid badges with variants.                   |
+| `EmptyState`                               | Empty-state placeholder with illustration.         |
+| `LoadingSpinner`                           | Centered/full-screen spinner.                      |
+| `Container`, `Row`, `Col`                  | Lightweight flex layout helpers.                   |
+| `Modal`, `Drawer`                          | Overlays (with body scroll lock).                  |
+| `GridView`                                 | Responsive data grid: search, sort, pagination, drag-reorder, row actions. |
+| `EditableTable`                            | Inline-editable table with add/remove rows.        |
+| `PhotoUpload`                              | Headless photo uploader (upload/remove/compress via callbacks). |
+| `PawPrintIcon`                             | Inline SVG paw icon.                               |
+
+### Dependency-injection props (decoupled components)
+
+Some components delegate app-specific concerns through props instead of importing
+app code:
+
+- **`GridView`**: `resolveImageUrl(value, folder)` (image cells), `formatDate(value)`
+  (date cells, defaults to pt-PT), `hasPermission(code)` (row-action gating,
+  defaults to allow-all).
+- **`PhotoUpload`** (headless): `onUpload(file, { folder })` returns the uploaded
+  URL, `onRemove()` deletes, optional `compress(file, opts)`, plus
+  `onError`/`onFileSelected`/`onUploaded`/`onRemoved` notifications.
+
+### Utilities
+
+- `lockBodyScroll()`, `unlockBodyScroll()` - reference-counted body scroll lock.
+- `minutesToHoursAndMinutes()`, `hoursAndMinutesToMinutes()` - duration helpers.
+
+## Notes
+
+- Components are decoupled from any app: permission/feature gating present in the
+  original AgendaPet `Button`/`DropdownItem` was intentionally removed here, and
+  app utilities used by `GridView`/`PhotoUpload` are injected via props.
+- `GridView` keeps the original Svelte 4 (`export let`) syntax; Svelte 5 runs it
+  in legacy mode. All other components use runes.

package/dist/components/Alert.svelte

@@ -0,0 +1,335 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	interface AlertProps {
+		/** Variante semântica do alerta */
+		variant?: 'success' | 'info' | 'warning' | 'danger' | 'primary' | 'secondary';
+		/** Título do alerta (opcional) */
+		title?: string;
+		/** Permite fechar o alerta */
+		dismissible?: boolean;
+		/** Ícone customizado (Bootstrap Icons class) */
+		icon?: string;
+		/** Mostrar inline (sem margem inferior) */
+		inline?: boolean;
+		/** Estilo compacto (pill shape, sem título) */
+		compact?: boolean;
+		/** Classes CSS adicionais */
+		class?: string;
+		/** Callback ao fechar */
+		ondismiss?: () => void;
+		/** Conteúdo do alerta */
+		children?: Snippet;
+	}
+
+	let {
+		variant = 'info',
+		title,
+		dismissible = false,
+		icon,
+		inline = false,
+		compact = false,
+		class: additionalClasses = '',
+		ondismiss,
+		children
+	}: AlertProps = $props();
+
+	let visible = $state(true);
+
+	// Ícones padrão por variante
+	const defaultIcons: Record<string, string> = {
+		success: 'bi-check-circle-fill',
+		info: 'bi-info-circle-fill',
+		warning: 'bi-exclamation-triangle-fill',
+		danger: 'bi-x-circle-fill',
+		primary: 'bi-bell-fill',
+		secondary: 'bi-chat-fill'
+	};
+
+	const alertIcon = $derived(icon ?? defaultIcons[variant]);
+
+	function handleDismiss() {
+		visible = false;
+		ondismiss?.();
+	}
+</script>
+
+{#if visible}
+	{#if compact}
+		<!-- Compact/Inline Alert (pill shape) -->
+		<div
+			class="ap-alert-compact ap-alert-compact-{variant} {additionalClasses}"
+			class:ap-alert-inline={inline}
+			role="alert"
+		>
+			{#if alertIcon}
+				<i class="{alertIcon} ap-alert-compact-icon"></i>
+			{/if}
+			{#if children}
+				{@render children()}
+			{/if}
+		</div>
+	{:else}
+		<!-- Standard Alert with icon badge -->
+		<div
+			class="ap-alert ap-alert-{variant} {additionalClasses}"
+			class:ap-alert-inline={inline}
+			role="alert"
+		>
+			<div class="ap-alert-icon">
+				<i class={alertIcon}></i>
+			</div>
+			<div class="ap-alert-content">
+				{#if title}
+					<div class="ap-alert-title">{title}</div>
+				{/if}
+				{#if children}
+					<div class="ap-alert-message">
+						{@render children()}
+					</div>
+				{/if}
+			</div>
+			{#if dismissible}
+				<button
+					type="button"
+					class="ap-alert-close"
+					onclick={handleDismiss}
+					aria-label="Fechar"
+				>
+					<i class="bi-x-lg"></i>
+				</button>
+			{/if}
+		</div>
+	{/if}
+{/if}
+
+<style>
+	/* ============================================
+	   ALERT - AgendaPet Design System
+	   ============================================ */
+
+	/* Standard Alert */
+	.ap-alert {
+		display: flex;
+		align-items: center;
+		gap: 0.875rem;
+		padding: 1rem 1.25rem;
+		border-radius: var(--radius-lg);
+		margin-bottom: var(--spacing-md);
+		border: 1px solid;
+		position: relative;
+	}
+
+	.ap-alert-inline {
+		margin-bottom: 0;
+	}
+
+	/* Icon Badge */
+	.ap-alert-icon {
+		flex-shrink: 0;
+		width: 32px;
+		height: 32px;
+		border-radius: 8px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 1rem;
+	}
+
+	/* Content */
+	.ap-alert-content {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.ap-alert-title {
+		font-size: var(--font-size-sm);
+		font-weight: var(--font-weight-medium);
+		margin-bottom: 0.25rem;
+		line-height: 1.4;
+	}
+
+	.ap-alert-message {
+		font-size: var(--font-size-xs);
+		line-height: 1.4;
+		opacity: 0.85;
+	}
+
+	.ap-alert-message :global(p:last-child) {
+		margin-bottom: 0;
+	}
+
+	/* Close Button */
+	.ap-alert-close {
+		flex-shrink: 0;
+		background: transparent;
+		border: none;
+		padding: 0.25rem;
+		cursor: pointer;
+		opacity: 0.5;
+		transition: opacity var(--transition-fast);
+		border-radius: var(--radius-sm);
+		line-height: 1;
+	}
+
+	.ap-alert-close:hover {
+		opacity: 1;
+	}
+
+	.ap-alert-close:focus-visible {
+		outline: 2px solid currentColor;
+		outline-offset: 2px;
+	}
+
+	/* ===== STANDARD VARIANTS ===== */
+
+	/* Success */
+	.ap-alert-success {
+		background-color: var(--color-success-bg);
+		border-color: var(--color-success-border) !important;
+		color: var(--color-success-text);
+	}
+
+	.ap-alert-success .ap-alert-icon {
+		background-color: rgba(24, 183, 126, 0.15);
+		color: var(--color-success);
+	}
+
+	/* Info */
+	.ap-alert-info {
+		background-color: var(--color-info-bg);
+		border-color: var(--color-info-border) !important;
+		color: var(--color-info-text);
+	}
+
+	.ap-alert-info .ap-alert-icon {
+		background-color: rgba(24, 167, 214, 0.15);
+		color: var(--color-info);
+	}
+
+	/* Warning */
+	.ap-alert-warning {
+		background-color: var(--color-warning-bg);
+		border-color: var(--color-warning-border) !important;
+		color: var(--color-warning-text);
+	}
+
+	.ap-alert-warning .ap-alert-icon {
+		background-color: rgba(242, 183, 5, 0.15);
+		color: #D99E00;
+	}
+
+	/* Danger */
+	.ap-alert-danger {
+		background-color: var(--color-danger-bg);
+		border-color: var(--color-danger-border) !important;
+		color: var(--color-danger-text);
+	}
+
+	.ap-alert-danger .ap-alert-icon {
+		background-color: rgba(228, 71, 90, 0.15);
+		color: var(--color-danger);
+	}
+
+	/* Primary */
+	.ap-alert-primary {
+		background-color: var(--color-primary-light);
+		border-color: var(--color-primary) !important;
+		color: var(--color-primary-dark);
+	}
+
+	.ap-alert-primary .ap-alert-icon {
+		background-color: rgba(123, 63, 242, 0.15);
+		color: var(--color-primary);
+	}
+
+	/* Secondary */
+	.ap-alert-secondary {
+		background-color: var(--color-gray-100);
+		border-color: var(--color-gray-300) !important;
+		color: var(--color-gray-700);
+	}
+
+	.ap-alert-secondary .ap-alert-icon {
+		background-color: rgba(108, 117, 125, 0.15);
+		color: var(--color-secondary);
+	}
+
+	/* ============================================
+	   COMPACT ALERT (Pill shape)
+	   ============================================ */
+	.ap-alert-compact {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem 0.875rem;
+		border-radius: var(--radius-full);
+		font-size: var(--font-size-xs);
+		font-weight: var(--font-weight-medium);
+		margin-bottom: var(--spacing-sm);
+	}
+
+	.ap-alert-compact.ap-alert-inline {
+		margin-bottom: 0;
+	}
+
+	.ap-alert-compact-icon {
+		flex-shrink: 0;
+		font-size: 0.875rem;
+	}
+
+	/* Compact Variants */
+	.ap-alert-compact-success {
+		background-color: var(--color-success-bg);
+		color: var(--color-success-text);
+	}
+
+	.ap-alert-compact-success .ap-alert-compact-icon {
+		color: var(--color-success);
+	}
+
+	.ap-alert-compact-info {
+		background-color: var(--color-info-bg);
+		color: var(--color-info-text);
+	}
+
+	.ap-alert-compact-info .ap-alert-compact-icon {
+		color: var(--color-info);
+	}
+
+	.ap-alert-compact-warning {
+		background-color: var(--color-warning-bg);
+		color: var(--color-warning-text);
+	}
+
+	.ap-alert-compact-warning .ap-alert-compact-icon {
+		color: #D99E00;
+	}
+
+	.ap-alert-compact-danger {
+		background-color: var(--color-danger-bg);
+		color: var(--color-danger-text);
+	}
+
+	.ap-alert-compact-danger .ap-alert-compact-icon {
+		color: var(--color-danger);
+	}
+
+	.ap-alert-compact-primary {
+		background-color: var(--color-primary-light);
+		color: var(--color-primary-dark);
+	}
+
+	.ap-alert-compact-primary .ap-alert-compact-icon {
+		color: var(--color-primary);
+	}
+
+	.ap-alert-compact-secondary {
+		background-color: var(--color-gray-100);
+		color: var(--color-gray-700);
+	}
+
+	.ap-alert-compact-secondary .ap-alert-compact-icon {
+		color: var(--color-secondary);
+	}
+</style>

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

@@ -0,0 +1,24 @@
+import type { Snippet } from "svelte";
+interface AlertProps {
+    /** Variante semântica do alerta */
+    variant?: 'success' | 'info' | 'warning' | 'danger' | 'primary' | 'secondary';
+    /** Título do alerta (opcional) */
+    title?: string;
+    /** Permite fechar o alerta */
+    dismissible?: boolean;
+    /** Ícone customizado (Bootstrap Icons class) */
+    icon?: string;
+    /** Mostrar inline (sem margem inferior) */
+    inline?: boolean;
+    /** Estilo compacto (pill shape, sem título) */
+    compact?: boolean;
+    /** Classes CSS adicionais */
+    class?: string;
+    /** Callback ao fechar */
+    ondismiss?: () => void;
+    /** Conteúdo do alerta */
+    children?: Snippet;
+}
+declare const Alert: import("svelte").Component<AlertProps, {}, "">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;