@groundbrick/svelte-ui 0.1.1

package/dist/styles/tokens.css

@@ -0,0 +1,243 @@
+/**
+ * Design Tokens - @groundbrick/svelte-ui
+ * Default theme tokens for the component library.
+ *
+ * Consumers can import this file for sane defaults and override any CSS
+ * custom property (globally or on a wrapper element) to re-theme components.
+ * Components reference these variables exclusively, so overriding a token
+ * re-skins every component that uses it.
+ */
+
+:root {
+  /* ========== BRAND COLORS ========== */
+  --color-cyan: #15B9FF;
+  --color-violet: #7B3FF2;
+  --color-magenta: #E414FF;
+
+  /* ========== PRIMARY COLORS ========== */
+  --color-primary: #7B3FF2;
+  --color-primary-hover: #6B33E6;
+  --color-primary-active: #5A27D6;
+  --color-primary-light: rgba(123, 63, 242, 0.1);
+  --color-primary-dark: #4A1FBF;
+
+  /* ========== GRADIENTS ========== */
+  --gradient-brand: linear-gradient(35deg, #15B9FF 0%, #7B3FF2 52%, #E414FF 100%);
+  --gradient-brand-hover: linear-gradient(35deg, #7B3FF2 0%, #C51BFF 45%, #FF2BD6 100%);
+  --gradient-brand-vertical: linear-gradient(180deg, #15B9FF 0%, #7B3FF2 50%, #E414FF 100%);
+  --gradient-card-header: linear-gradient(135deg, rgba(21, 185, 255, 0.08) 0%, rgba(123, 63, 242, 0.08) 50%, rgba(228, 20, 255, 0.06) 100%);
+
+  /* ========== SEMANTIC COLORS ========== */
+  --color-secondary: #5B5F73;
+  --color-secondary-hover: #4D5163;
+  --color-secondary-light: rgba(91, 95, 115, 0.1);
+
+  --color-success: #18B77E;
+  --color-success-hover: #128A5E;
+  --color-success-light: rgba(24, 183, 126, 0.1);
+
+  --color-danger: #E4475A;
+  --color-danger-hover: #C33545;
+  --color-danger-light: rgba(228, 71, 90, 0.1);
+
+  --color-warning: #F2B705;
+  --color-warning-hover: #D99E00;
+  --color-warning-light: rgba(242, 183, 5, 0.1);
+
+  --color-info: #18A7D6;
+  --color-info-hover: #1287AD;
+  --color-info-light: rgba(24, 167, 214, 0.1);
+
+  /* ========== SEMANTIC BACKGROUNDS ========== */
+  --color-success-bg: #E9FBF4;
+  --color-success-border: #BFF0DC;
+  --color-success-text: #0B6B4A;
+
+  --color-info-bg: #E7F7FD;
+  --color-info-border: #BDEAF7;
+  --color-info-text: #0B5E7A;
+
+  --color-warning-bg: #FFF6DD;
+  --color-warning-border: #FFE5A3;
+  --color-warning-text: #ea961f;
+  --color-warning-text-dark: #8e723b;
+
+  --color-danger-bg: #FEECEF;
+  --color-danger-border: #F7C6CD;
+  --color-danger-text: #8A1E2B;
+
+  /* ========== NEUTRAL COLORS ========== */
+  --color-bg-app: #F6F7FA;
+  --color-bg-surface: #FFFFFF;
+  --color-bg-surface-2: #F1F3F8;
+  --color-border-subtle: #E6E8F0;
+  --color-border-strong: #D5D9E6;
+  --color-text: #2F2F33;
+  --color-text-muted: #4D5163;
+  --color-text-subtle: #5B5F73;
+
+  /* Grayscale (kept for compatibility) */
+  --color-white: #FFFFFF;
+  --color-gray-50: #F6F7FA;
+  --color-gray-100: #F1F3F8;
+  --color-gray-200: #E6E8F0;
+  --color-gray-300: #D5D9E6;
+  --color-gray-400: #6C6F7A;
+  --color-gray-500: #5B5F73;
+  --color-gray-600: #4D5163;
+  --color-gray-700: #3D3F4A;
+  --color-gray-800: #2F2F33;
+  --color-gray-900: #1E1F25;
+  --color-black: #000000;
+
+  /* ========== STATUS COLORS ========== */
+  --status-pending: var(--color-warning);
+  --status-confirmed: var(--color-info);
+  --status-completed: var(--color-success);
+  --status-cancelled: var(--color-danger);
+  --status-no-show: var(--color-secondary);
+
+  /* ========== SPACING ========== */
+  --spacing-0: 0;
+  --spacing-xs: 0.25rem;   /* 4px */
+  --spacing-sm: 0.5rem;    /* 8px */
+  --spacing-md: 1rem;      /* 16px */
+  --spacing-lg: 1.5rem;    /* 24px */
+  --spacing-xl: 2rem;      /* 32px */
+  --spacing-2xl: 3rem;     /* 48px */
+  --spacing-3xl: 4rem;     /* 64px */
+
+  /* ========== TYPOGRAPHY ========== */
+  --font-family-base: 'Baloo 2', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+
+  /* Font sizes */
+  --font-size-xs: 0.8125rem;   /* 13px */
+  --font-size-sm: 0.9375rem;   /* 15px */
+  --font-size-base: 1rem;      /* 16px */
+  --font-size-lg: 1.125rem;    /* 18px */
+  --font-size-xl: 1.25rem;     /* 20px */
+  --font-size-2xl: 1.5rem;     /* 24px */
+  --font-size-3xl: 2rem;       /* 32px */
+  --font-size-4xl: 2.5rem;     /* 40px */
+
+  /* Font weights */
+  --font-weight-light: 400;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 500;
+  --font-weight-bold: 600;
+  --font-weight-extrabold: 600;
+
+  /* Line heights */
+  --line-height-tight: 1.25;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.75;
+  --line-height-loose: 2;
+
+  /* ========== BORDER RADIUS ========== */
+  --radius-none: 0;
+  --radius-sm: 0.5rem;     /* 8px */
+  --radius-md: 0.75rem;    /* 12px */
+  --radius-lg: 1rem;       /* 16px */
+  --radius-xl: 1.5rem;     /* 24px */
+  --radius-2xl: 2rem;      /* 32px */
+  --radius-full: 9999px;   /* Pill shape */
+
+  /* ========== SHADOWS ========== */
+  --shadow-none: none;
+  --shadow-xs: 0 1px 2px 0 rgba(18, 24, 40, 0.04);
+  --shadow-sm: 0 2px 4px 0 rgba(18, 24, 40, 0.06);
+  --shadow-md: 0 4px 12px rgba(18, 24, 40, 0.08);
+  --shadow-lg: 0 8px 26px rgba(18, 24, 40, 0.08);
+  --shadow-xl: 0 14px 34px rgba(18, 24, 40, 0.12);
+  --shadow-2xl: 0 25px 50px -12px rgba(18, 24, 40, 0.2);
+
+  /* Colored shadows (for buttons and hover) */
+  --shadow-primary: 0 10px 24px rgba(123, 63, 242, 0.16);
+  --shadow-primary-hover: 0 12px 28px rgba(123, 63, 242, 0.20);
+  --shadow-gradient: 0 10px 24px rgba(228, 20, 255, 0.16);
+  --shadow-success: 0 8px 20px rgba(24, 183, 126, 0.16);
+  --shadow-danger: 0 8px 20px rgba(228, 71, 90, 0.16);
+
+  /* Inner shadows */
+  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
+
+  /* ========== FOCUS RING ========== */
+  --focus-ring-color: rgba(123, 63, 242, 0.16);
+  --focus-ring-width: 4px;
+
+  /* ========== TRANSITIONS ========== */
+  --transition-fast: 150ms ease;
+  --transition-base: 180ms ease;
+  --transition-slow: 300ms ease;
+  --transition-slower: 500ms ease;
+
+  /* Transition curves */
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* ========== Z-INDEX ========== */
+  --z-dropdown: 1000;
+  --z-sticky: 1020;
+  --z-fixed: 1030;
+  --z-modal-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
+  --z-toast: 1080;
+  --z-top: 9999;
+
+  /* ========== BREAKPOINTS ========== */
+  --breakpoint-xs: 0;
+  --breakpoint-sm: 576px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 992px;
+  --breakpoint-xl: 1200px;
+  --breakpoint-2xl: 1400px;
+
+  /* ========== CONTAINER WIDTHS ========== */
+  --container-sm: 540px;
+  --container-md: 720px;
+  --container-lg: 960px;
+  --container-xl: 1140px;
+  --container-2xl: 1320px;
+
+  /* ========== OPACITIES ========== */
+  --opacity-0: 0;
+  --opacity-5: 0.05;
+  --opacity-10: 0.1;
+  --opacity-20: 0.2;
+  --opacity-25: 0.25;
+  --opacity-30: 0.3;
+  --opacity-40: 0.4;
+  --opacity-50: 0.5;
+  --opacity-60: 0.6;
+  --opacity-70: 0.7;
+  --opacity-75: 0.75;
+  --opacity-80: 0.8;
+  --opacity-90: 0.9;
+  --opacity-95: 0.95;
+  --opacity-100: 1;
+
+  /* ========== BORDERS ========== */
+  --border-width-thin: 1px;
+  --border-width-medium: 2px;
+  --border-width-thick: 4px;
+
+  --border-color-light: var(--color-border-subtle);
+  --border-color-medium: var(--color-border-strong);
+  --border-color-dark: var(--color-gray-400);
+
+  /* ========== COMPATIBILITY ALIASES ==========
+     Some components reference these shorthand names. They are defined here as
+     aliases so the library is self-contained. Override the canonical token and
+     the alias follows automatically. */
+  --color-surface: var(--color-bg-surface);
+  --color-border: var(--color-border-subtle);
+  --color-primary-soft: var(--color-primary-light);
+  --ap-text-muted: var(--color-text-muted);
+  --shadow-soft: var(--shadow-sm);
+  --shadow-hover: var(--shadow-lg);
+}

package/dist/utils/duration.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Duration helpers for hours + minutes inputs (used by DurationInput).
+ */
+/**
+ * Format a total in minutes as a human-readable duration (e.g. "45 min", "1h", "1h 20min").
+ */
+export declare function formatDuration(minutes: number): string;
+/**
+ * Split a total duration in minutes into { hours, minutes } for hours+minutes inputs.
+ * Returns nulls when the total is null/undefined/invalid (i.e. an empty input).
+ */
+export declare function minutesToHoursAndMinutes(total: number | null | undefined): {
+    hours: number | null;
+    minutes: number | null;
+};
+/**
+ * Combine hours + minutes into a total duration in minutes.
+ * Returns null when both parts are empty, so optional/override fields stay "unset".
+ */
+export declare function hoursAndMinutesToMinutes(hours: number | null | undefined, minutes: number | null | undefined): number | null;

package/dist/utils/duration.js

@@ -0,0 +1,40 @@
+/**
+ * Duration helpers for hours + minutes inputs (used by DurationInput).
+ */
+/**
+ * Format a total in minutes as a human-readable duration (e.g. "45 min", "1h", "1h 20min").
+ */
+export function formatDuration(minutes) {
+    const mins = Math.round(Number(minutes));
+    if (mins < 60)
+        return `${mins} min`;
+    const hours = Math.floor(mins / 60);
+    const remainingMinutes = mins % 60;
+    return remainingMinutes > 0 ? `${hours}h ${remainingMinutes}min` : `${hours}h`;
+}
+/**
+ * Split a total duration in minutes into { hours, minutes } for hours+minutes inputs.
+ * Returns nulls when the total is null/undefined/invalid (i.e. an empty input).
+ */
+export function minutesToHoursAndMinutes(total) {
+    if (total === null || total === undefined || Number.isNaN(Number(total))) {
+        return { hours: null, minutes: null };
+    }
+    const mins = Math.max(0, Math.round(Number(total)));
+    return { hours: Math.floor(mins / 60), minutes: mins % 60 };
+}
+/**
+ * Combine hours + minutes into a total duration in minutes.
+ * Returns null when both parts are empty, so optional/override fields stay "unset".
+ */
+export function hoursAndMinutesToMinutes(hours, minutes) {
+    const h = hours === null || hours === undefined || Number.isNaN(Number(hours))
+        ? null
+        : Math.max(0, Math.floor(Number(hours)));
+    const m = minutes === null || minutes === undefined || Number.isNaN(Number(minutes))
+        ? null
+        : Math.max(0, Math.floor(Number(minutes)));
+    if (h === null && m === null)
+        return null;
+    return (h ?? 0) * 60 + (m ?? 0);
+}

package/dist/utils/scrollLock.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Body scroll lock helper for overlays (Modal, Drawer).
+ * Reference-counted so nested overlays restore the original overflow correctly.
+ * Framework-agnostic: guards on `document` instead of SvelteKit's `browser`.
+ */
+export declare function lockBodyScroll(): void;
+export declare function unlockBodyScroll(): void;

package/dist/utils/scrollLock.js

@@ -0,0 +1,26 @@
+/**
+ * Body scroll lock helper for overlays (Modal, Drawer).
+ * Reference-counted so nested overlays restore the original overflow correctly.
+ * Framework-agnostic: guards on `document` instead of SvelteKit's `browser`.
+ */
+let lockCount = 0;
+let previousOverflow = null;
+const isBrowser = typeof document !== "undefined";
+export function lockBodyScroll() {
+    if (!isBrowser)
+        return;
+    if (lockCount === 0) {
+        previousOverflow = document.body.style.overflow || "";
+        document.body.style.overflow = "hidden";
+    }
+    lockCount += 1;
+}
+export function unlockBodyScroll() {
+    if (!isBrowser || lockCount === 0)
+        return;
+    lockCount = Math.max(0, lockCount - 1);
+    if (lockCount === 0) {
+        document.body.style.overflow = previousOverflow ?? "";
+        previousOverflow = null;
+    }
+}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@groundbrick/svelte-ui",
+  "version": "0.1.1",
+  "description": "Reusable Svelte 5 UI components (design system): buttons, cards, alerts, badges, form fields, dropdowns, modals, empty states and more. Themeable via CSS variables.",
+  "type": "module",
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "svelte": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles/tokens.css": "./dist/styles/tokens.css",
+    "./styles/forms.css": "./dist/styles/forms.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "svelte-package -i src -o dist",
+    "dev": "svelte-package -w -i src -o dist",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "clean": "rm -rf dist .svelte-kit *.tsbuildinfo"
+  },
+  "keywords": [
+    "svelte",
+    "svelte5",
+    "ui",
+    "components",
+    "design-system",
+    "bootstrap"
+  ],
+  "author": "Cleiton Marques <cleiton.marques@200.systems>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/200Systems/bitbrick-microframework.git",
+    "directory": "packages/svelte-ui"
+  },
+  "peerDependencies": {
+    "svelte": "^5.25.0",
+    "@200systems/shared": "workspace:*"
+  },
+  "peerDependenciesMeta": {
+    "bootstrap": {
+      "optional": true
+    },
+    "bootstrap-icons": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@200systems/shared": "workspace:*",
+    "@sveltejs/package": "^2.3.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "svelte": "^5.25.0",
+    "svelte-check": "^4.0.0",
+    "typescript": "^5.8.3"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}