@groundbrick/svelte-ui 0.1.1

package/dist/components/Row.svelte

@@ -0,0 +1,153 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	interface RowProps {
+		/** Gap entre colunas */
+		gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+		/** Alinhamento vertical */
+		align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+		/** Justificação horizontal */
+		justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+		/** Wrap das colunas */
+		wrap?: boolean;
+		/** Conteúdo do row */
+		children?: Snippet;
+		/** Classes CSS adicionais */
+		class?: string;
+	}
+
+	let {
+		gap = 'none',
+		align = 'start',
+		justify = 'start',
+		wrap = true,
+		children,
+		class: additionalClasses = ''
+	}: RowProps = $props();
+
+	const gapClasses: Record<string, string> = {
+		none: '',
+		xs: 'gap-1',
+		sm: 'gap-2',
+		md: 'gap-3',
+		lg: 'gap-4',
+		xl: 'gap-5'
+	};
+
+	const alignClasses: Record<string, string> = {
+		start: 'align-items-start',
+		center: 'align-items-center',
+		end: 'align-items-end',
+		stretch: 'align-items-stretch',
+		baseline: 'align-items-baseline'
+	};
+
+	const justifyClasses: Record<string, string> = {
+		start: 'justify-content-start',
+		center: 'justify-content-center',
+		end: 'justify-content-end',
+		between: 'justify-content-between',
+		around: 'justify-content-around',
+		evenly: 'justify-content-evenly'
+	};
+
+	const rowClass = [
+		'row',
+		gapClasses[gap],
+		alignClasses[align],
+		justifyClasses[justify],
+		!wrap ? 'flex-nowrap' : '',
+		additionalClasses
+	].filter(Boolean).join(' ');
+</script>
+
+<div class={rowClass}>
+	{@render children?.()}
+</div>
+
+<style>
+	.row {
+		display: flex;
+		flex-wrap: wrap;
+		/* Use Bootstrap's native gutter system - remove custom margins */
+		margin-left: -12px;
+		margin-right: -12px;
+	}
+
+	.row > :global(*) {
+		/* Use Bootstrap's native gutter system - remove custom padding */
+		padding-left: 12px;
+		padding-right: 12px;
+	}
+
+	/* Gap Classes */
+	.gap-1 {
+		gap: var(--spacing-xs);
+	}
+
+	.gap-2 {
+		gap: var(--spacing-sm);
+	}
+
+	.gap-3 {
+		gap: var(--spacing-md);
+	}
+
+	.gap-4 {
+		gap: var(--spacing-lg);
+	}
+
+	.gap-5 {
+		gap: var(--spacing-xl);
+	}
+
+	/* Alignment */
+	.align-items-start {
+		align-items: flex-start;
+	}
+
+	.align-items-center {
+		align-items: center;
+	}
+
+	.align-items-end {
+		align-items: flex-end;
+	}
+
+	.align-items-stretch {
+		align-items: stretch;
+	}
+
+	.align-items-baseline {
+		align-items: baseline;
+	}
+
+	/* Justification */
+	.justify-content-start {
+		justify-content: flex-start;
+	}
+
+	.justify-content-center {
+		justify-content: center;
+	}
+
+	.justify-content-end {
+		justify-content: flex-end;
+	}
+
+	.justify-content-between {
+		justify-content: space-between;
+	}
+
+	.justify-content-around {
+		justify-content: space-around;
+	}
+
+	.justify-content-evenly {
+		justify-content: space-evenly;
+	}
+
+	.flex-nowrap {
+		flex-wrap: nowrap;
+	}
+</style>

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

@@ -0,0 +1,18 @@
+import type { Snippet } from "svelte";
+interface RowProps {
+    /** Gap entre colunas */
+    gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Alinhamento vertical */
+    align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+    /** Justificação horizontal */
+    justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+    /** Wrap das colunas */
+    wrap?: boolean;
+    /** Conteúdo do row */
+    children?: Snippet;
+    /** Classes CSS adicionais */
+    class?: string;
+}
+declare const Row: import("svelte").Component<RowProps, {}, "">;
+type Row = ReturnType<typeof Row>;
+export default Row;

package/dist/icons/PawPrintIcon.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+    interface Props {
+        /** Width/height. Accepts number (px) or CSS string. Default "1em" so the
+         *  icon scales with the parent's font-size, mirroring `<i class="bi …">`. */
+        size?: number | string;
+        /** Stroke width — Lucide's default is 2. */
+        strokeWidth?: number;
+        class?: string;
+        /** Provide an accessible title only when the icon is the sole semantic
+         *  indicator. Otherwise the icon stays aria-hidden. */
+        title?: string;
+    }
+
+    let {
+        size = "1em",
+        strokeWidth = 2,
+        class: className = "",
+        title,
+    }: Props = $props();
+</script>
+
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width={strokeWidth}
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class={className}
+    role={title ? "img" : "presentation"}
+    aria-hidden={title ? undefined : "true"}
+>
+    {#if title}<title>{title}</title>{/if}
+    <circle cx="11" cy="4" r="2" />
+    <circle cx="18" cy="8" r="2" />
+    <circle cx="20" cy="16" r="2" />
+    <path d="M9 10a5 5 0 0 1 5 5v3.5a3.5 3.5 0 0 1-6.84 1.045Q6.52 17.48 4.46 16.84A3.5 3.5 0 0 1 5.5 10Z" />
+</svg>

package/dist/icons/PawPrintIcon.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    /** Width/height. Accepts number (px) or CSS string. Default "1em" so the
+     *  icon scales with the parent's font-size, mirroring `<i class="bi …">`. */
+    size?: number | string;
+    /** Stroke width — Lucide's default is 2. */
+    strokeWidth?: number;
+    class?: string;
+    /** Provide an accessible title only when the icon is the sole semantic
+     *  indicator. Otherwise the icon stays aria-hidden. */
+    title?: string;
+}
+declare const PawPrintIcon: import("svelte").Component<Props, {}, "">;
+type PawPrintIcon = ReturnType<typeof PawPrintIcon>;
+export default PawPrintIcon;

package/dist/index.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @groundbrick/svelte-ui
+ * Reusable Svelte 5 UI components (design system).
+ *
+ * Import the default theme tokens via `@groundbrick/svelte-ui/styles/tokens.css`
+ * and override CSS variables (globally or on a wrapper element) to re-theme.
+ *
+ * Components assume Bootstrap 5 CSS/JS and Bootstrap Icons are loaded by the
+ * consuming app (declared as optional peer dependencies).
+ */
+export declare const VERSION = "0.1.0";
+export { default as Button } from './components/Button.svelte';
+export { default as Dropdown } from './components/Dropdown.svelte';
+export { default as DropdownItem } from './components/DropdownItem.svelte';
+export { default as Card } from './components/Card.svelte';
+export { default as CardHeader } from './components/CardHeader.svelte';
+export { default as CardBody } from './components/CardBody.svelte';
+export { default as CardFooter } from './components/CardFooter.svelte';
+export { default as FormField } from './components/FormField.svelte';
+export { default as PhoneInput } from './components/PhoneInput.svelte';
+export { default as DurationInput } from './components/DurationInput.svelte';
+export { default as AutocompleteInput } from './components/AutocompleteInput.svelte';
+export type { AutocompleteSuggestion } from './components/AutocompleteInput.svelte';
+export { default as Badge } from './components/Badge.svelte';
+export { default as Alert } from './components/Alert.svelte';
+export { default as EmptyState } from './components/EmptyState.svelte';
+export type { EmptyStateProps } from './components/EmptyState.svelte';
+export { default as LoadingSpinner } from './components/LoadingSpinner.svelte';
+export { default as Container } from './components/Container.svelte';
+export { default as Row } from './components/Row.svelte';
+export { default as Col } from './components/Col.svelte';
+export { default as Drawer } from './components/Drawer.svelte';
+export { default as Modal } from './components/Modal.svelte';
+export { default as GridView } from './components/GridView.svelte';
+export type { Column, ActionItem } from './components/GridView.types.js';
+export { default as EditableTable } from './components/EditableTable.svelte';
+export type { EditableColumn, EditCellArgs } from './components/EditableTable.svelte';
+export { default as PhotoUpload } from './components/PhotoUpload.svelte';
+export { default as PawPrintIcon } from './icons/PawPrintIcon.svelte';
+export { lockBodyScroll, unlockBodyScroll } from './utils/scrollLock.js';
+export { minutesToHoursAndMinutes, hoursAndMinutesToMinutes } from './utils/duration.js';

package/dist/index.js

@@ -0,0 +1,49 @@
+/**
+ * @groundbrick/svelte-ui
+ * Reusable Svelte 5 UI components (design system).
+ *
+ * Import the default theme tokens via `@groundbrick/svelte-ui/styles/tokens.css`
+ * and override CSS variables (globally or on a wrapper element) to re-theme.
+ *
+ * Components assume Bootstrap 5 CSS/JS and Bootstrap Icons are loaded by the
+ * consuming app (declared as optional peer dependencies).
+ */
+export const VERSION = '0.1.0';
+// Buttons
+export { default as Button } from './components/Button.svelte';
+export { default as Dropdown } from './components/Dropdown.svelte';
+export { default as DropdownItem } from './components/DropdownItem.svelte';
+// Cards
+export { default as Card } from './components/Card.svelte';
+export { default as CardHeader } from './components/CardHeader.svelte';
+export { default as CardBody } from './components/CardBody.svelte';
+export { default as CardFooter } from './components/CardFooter.svelte';
+// Forms
+export { default as FormField } from './components/FormField.svelte';
+export { default as PhoneInput } from './components/PhoneInput.svelte';
+export { default as DurationInput } from './components/DurationInput.svelte';
+export { default as AutocompleteInput } from './components/AutocompleteInput.svelte';
+// Badges
+export { default as Badge } from './components/Badge.svelte';
+// Alerts
+export { default as Alert } from './components/Alert.svelte';
+// Feedback
+export { default as EmptyState } from './components/EmptyState.svelte';
+export { default as LoadingSpinner } from './components/LoadingSpinner.svelte';
+// Layout
+export { default as Container } from './components/Container.svelte';
+export { default as Row } from './components/Row.svelte';
+export { default as Col } from './components/Col.svelte';
+// Overlays
+export { default as Drawer } from './components/Drawer.svelte';
+export { default as Modal } from './components/Modal.svelte';
+// Tables / data grids
+export { default as GridView } from './components/GridView.svelte';
+export { default as EditableTable } from './components/EditableTable.svelte';
+// Media
+export { default as PhotoUpload } from './components/PhotoUpload.svelte';
+// Icons
+export { default as PawPrintIcon } from './icons/PawPrintIcon.svelte';
+// Utilities
+export { lockBodyScroll, unlockBodyScroll } from './utils/scrollLock.js';
+export { minutesToHoursAndMinutes, hoursAndMinutesToMinutes } from './utils/duration.js';

package/dist/styles/forms.css

@@ -0,0 +1,182 @@
+/* ============================================
+   FORMS - @groundbrick/svelte-ui
+   Default styling for the `ap-form-*` classes used by FormField,
+   DurationInput, PhoneInput and AutocompleteInput. Token-based, so overriding
+   CSS variables re-themes the fields. Imported by those components, so it loads
+   automatically when any form field is used.
+   ============================================ */
+
+/* ===== FORM FIELD CONTAINER ===== */
+.ap-form-field {
+    margin-bottom: var(--spacing-md);
+    position: relative;
+}
+
+/* ===== LABELS ===== */
+.ap-form-label {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    font-family: var(--font-family-base);
+    font-weight: var(--font-weight-medium);
+    font-size: var(--font-size-xs);
+    color: var(--color-text);
+    margin-bottom: 0.375rem;
+}
+
+.ap-form-label-icon {
+    display: flex;
+    align-items: center;
+    color: var(--color-text-muted);
+}
+
+.ap-form-label-icon svg {
+    width: 14px;
+    height: 14px;
+}
+
+.ap-form-required {
+    color: var(--color-danger);
+    margin-left: 0.125rem;
+}
+
+/* ===== INPUT WRAPPER ===== */
+.ap-form-input-wrapper {
+    position: relative;
+}
+
+/* ===== FORM CONTROLS ===== */
+.ap-form-control {
+    width: 100%;
+    padding: 0.72rem 0.92rem;
+    font-family: var(--font-family-base);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-normal);
+    color: var(--color-text);
+    background: var(--color-bg-surface);
+    border: 1px solid var(--color-border-strong);
+    border-radius: var(--radius-lg);
+    transition: all var(--transition-base);
+}
+
+.ap-form-control::placeholder {
+    color: var(--color-text-subtle);
+    font-weight: var(--font-weight-normal);
+}
+
+.ap-form-control:focus {
+    outline: none;
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 0.25rem var(--focus-ring-color);
+}
+
+.ap-form-control:disabled {
+    background-color: var(--color-gray-100);
+    cursor: not-allowed;
+    opacity: 0.7;
+}
+
+.ap-form-control:read-only {
+    background-color: var(--color-gray-50);
+}
+
+/* Select specific */
+.ap-form-select {
+    cursor: pointer;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236c757d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: right 0.75rem center;
+    background-size: 16px 12px;
+    padding-right: 2.5rem;
+}
+
+.ap-form-select:disabled {
+    cursor: not-allowed;
+}
+
+/* Textarea specific */
+textarea.ap-form-control {
+    resize: vertical;
+    min-height: calc(1.5em * 3 + 0.75rem * 2);
+}
+
+/* Input with icon on left */
+.ap-form-control-with-icon {
+    padding-left: 2.5rem;
+}
+
+/* ===== INPUT ICON (inside input, left side) ===== */
+.ap-form-input-icon {
+    position: absolute;
+    left: 0.875rem;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-text-muted);
+    pointer-events: none;
+    z-index: 1;
+}
+
+.ap-form-input-icon i,
+.ap-form-input-icon svg {
+    font-size: 1rem;
+    width: 1rem;
+    height: 1rem;
+}
+
+/* ===== INPUT ADDON (inside input, right side) ===== */
+.ap-form-input-addon {
+    position: absolute;
+    right: 0.875rem;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+}
+
+/* ===== VALIDATION STATES ===== */
+.ap-form-control-invalid {
+    border-color: var(--color-danger);
+    padding-right: 2.5rem;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23E4475A'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23E4475A' stroke='none'/%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: right 0.75rem center;
+    background-size: 1rem 1rem;
+}
+
+.ap-form-control-invalid:focus {
+    border-color: var(--color-danger);
+    box-shadow: 0 0 0 0.25rem rgba(228, 71, 90, 0.2);
+}
+
+/* ===== HELP/ERROR TEXT ===== */
+.ap-form-error {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    color: var(--color-danger);
+    font-size: var(--font-size-xs);
+    margin-top: 0.375rem;
+}
+
+.ap-form-error i {
+    font-size: 0.875rem;
+}
+
+.ap-form-help {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    color: var(--color-text-muted);
+    font-size: var(--font-size-xs);
+    margin-top: 0.375rem;
+}
+
+.ap-form-help i {
+    font-size: 0.875rem;
+}