@teranga-ds/components 0.1.0

package/dist/collection/components/tg-avatar/tg-avatar.js

@@ -0,0 +1,195 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @component tg-avatar
+ * @description Represents a user, organization, or entity with an image or initials fallback.
+ *
+ * @example
+ * <tg-avatar name="Amadou Diallo" src="/photo.jpg"></tg-avatar>
+ * <tg-avatar name="Fatou Ndiaye" size="lg" variant="secondary"></tg-avatar>
+ */
+export class TgAvatar {
+    constructor() {
+        /** Size of the avatar */
+        this.size = 'md';
+        /** Background color variant (used for initials avatar) */
+        this.variant = 'primary';
+        /** Makes the avatar square instead of round */
+        this.square = false;
+        this.imageError = false;
+    }
+    getInitials() {
+        if (!this.name)
+            return '?';
+        const parts = this.name.trim().split(/\s+/);
+        if (parts.length === 1)
+            return parts[0].slice(0, 2).toUpperCase();
+        return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+    }
+    render() {
+        var _a, _b, _c, _d, _e;
+        const showImage = this.src && !this.imageError;
+        return (h(Host, { key: 'ad95ce66814799c897f7fee18bd41c13e13584a3', "aria-label": (_a = this.name) !== null && _a !== void 0 ? _a : this.alt }, h("div", { key: '772d751fa30ba5a64fb676c4429f847a742cc4c1', class: {
+                'tg-avatar': true,
+                [`tg-avatar--${this.size}`]: true,
+                [`tg-avatar--${this.variant}`]: !showImage,
+                'tg-avatar--square': this.square,
+            }, role: "img", "aria-label": (_b = this.alt) !== null && _b !== void 0 ? _b : this.name }, showImage ? (h("img", { src: (_c = this.src) !== null && _c !== void 0 ? _c : '', alt: (_e = (_d = this.alt) !== null && _d !== void 0 ? _d : this.name) !== null && _e !== void 0 ? _e : '', class: "tg-avatar__image", onError: () => (this.imageError = true) })) : (h("span", { class: "tg-avatar__initials", "aria-hidden": "true" }, this.getInitials())), this.status && (h("span", { key: 'bd6c2b12d34ec9d92d70a4f88a10975dc25f85ac', class: `tg-avatar__status tg-avatar__status--${this.status}`, "aria-label": this.status })))));
+    }
+    static get is() { return "tg-avatar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-avatar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-avatar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Full name used to generate initials"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Image source URL"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "src"
+            },
+            "alt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Image alt text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alt"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'",
+                    "resolved": "\"2xl\" | \"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the avatar"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| 'primary'\n    | 'secondary'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'info'\n    | 'neutral'",
+                    "resolved": "\"danger\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Background color variant (used for initials avatar)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'primary'"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'online' | 'offline' | 'busy' | 'away'",
+                    "resolved": "\"away\" | \"busy\" | \"offline\" | \"online\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows a status indicator dot"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status"
+            },
+            "square": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the avatar square instead of round"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "square",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "imageError": {}
+        };
+    }
+}

package/dist/collection/components/tg-badge/tg-badge.css

@@ -0,0 +1,153 @@
+/* ============================================================
+   tg-badge — Teranga Design System
+   ============================================================ */
+
+:host {
+  display: inline-flex;
+}
+
+.tg-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--tg-font-family-sans);
+  font-weight: var(--tg-font-weight-semibold);
+  line-height: var(--tg-line-height-tight);
+  border-radius: var(--tg-radius-md);
+  border: 1px solid transparent;
+  white-space: nowrap;
+}
+
+/* ── Sizes */
+.tg-badge--sm {
+  padding: 0.1rem var(--tg-spacing-1-5);
+  font-size: var(--tg-font-size-2xs);
+}
+
+.tg-badge--md {
+  padding: 0.2rem var(--tg-spacing-2);
+  font-size: var(--tg-font-size-xs);
+}
+
+.tg-badge--lg {
+  padding: 0.3rem var(--tg-spacing-2-5);
+  font-size: var(--tg-font-size-sm);
+}
+
+/* ── Pill */
+.tg-badge--pill {
+  border-radius: var(--tg-radius-full);
+}
+
+/* ── Variants: filled */
+.tg-badge--neutral {
+  background-color: var(--tg-color-neutral-100);
+  color: var(--tg-color-neutral-700);
+  border-color: var(--tg-color-neutral-200);
+}
+
+.tg-badge--primary {
+  background-color: var(--tg-color-primary-muted);
+  color: var(--tg-color-primary-active);
+  border-color: var(--tg-color-primary-muted);
+}
+
+.tg-badge--secondary {
+  background-color: var(--tg-color-secondary-muted);
+  color: var(--tg-color-secondary-active);
+  border-color: var(--tg-color-secondary-muted);
+}
+
+.tg-badge--success {
+  background-color: var(--tg-color-success-subtle);
+  color: var(--tg-color-success);
+  border-color: var(--tg-color-success-subtle);
+}
+
+.tg-badge--warning {
+  background-color: var(--tg-color-warning-subtle);
+  color: var(--tg-color-warning);
+  border-color: var(--tg-color-warning-subtle);
+}
+
+.tg-badge--danger {
+  background-color: var(--tg-color-danger-subtle);
+  color: var(--tg-color-danger-active);
+  border-color: var(--tg-color-danger-subtle);
+}
+
+.tg-badge--info {
+  background-color: var(--tg-color-info-subtle);
+  color: var(--tg-color-info);
+  border-color: var(--tg-color-info-subtle);
+}
+
+/* ── Variants: outlined */
+.tg-badge--outlined.tg-badge--neutral {
+  background-color: transparent;
+  border-color: var(--tg-color-neutral-400);
+  color: var(--tg-color-neutral-700);
+}
+
+.tg-badge--outlined.tg-badge--primary {
+  background-color: transparent;
+  border-color: var(--tg-color-primary);
+  color: var(--tg-color-primary);
+}
+
+.tg-badge--outlined.tg-badge--secondary {
+  background-color: transparent;
+  border-color: var(--tg-color-secondary-hover);
+  color: var(--tg-color-secondary-hover);
+}
+
+.tg-badge--outlined.tg-badge--success {
+  background-color: transparent;
+  border-color: var(--tg-color-success);
+  color: var(--tg-color-success);
+}
+
+.tg-badge--outlined.tg-badge--warning {
+  background-color: transparent;
+  border-color: var(--tg-color-warning);
+  color: var(--tg-color-warning);
+}
+
+.tg-badge--outlined.tg-badge--danger {
+  background-color: transparent;
+  border-color: var(--tg-color-danger);
+  color: var(--tg-color-danger);
+}
+
+.tg-badge--outlined.tg-badge--info {
+  background-color: transparent;
+  border-color: var(--tg-color-info);
+  color: var(--tg-color-info);
+}
+
+/* ── Dot indicator */
+.tg-badge--dot::before {
+  content: '';
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+  margin-right: var(--tg-spacing-1, 4px);
+  flex-shrink: 0;
+}
+
+/* ── Pulse animation for notifications */
+.tg-badge--pulse {
+  animation: tg-badge-pulse 2s ease-in-out infinite;
+}
+
+@keyframes tg-badge-pulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+}
+
+/* ── Transition on appear */
+.tg-badge {
+  transition: background-color var(--tg-duration-fast, 150ms), color var(--tg-duration-fast, 150ms), transform var(--tg-duration-fast, 150ms);
+}

package/dist/collection/components/tg-badge/tg-badge.js

@@ -0,0 +1,128 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @component tg-badge
+ * @description Compact label for status, category, or count.
+ *
+ * @slot default — Badge text content
+ *
+ * @example
+ * <tg-badge variant="success">Approuvé</tg-badge>
+ * <tg-badge variant="danger" pill>Urgent</tg-badge>
+ */
+export class TgBadge {
+    constructor() {
+        /** Visual intent of the badge */
+        this.variant = 'neutral';
+        /** Size of the badge */
+        this.size = 'md';
+        /** Renders with fully rounded corners */
+        this.pill = false;
+        /** Renders as an outlined badge instead of filled */
+        this.outlined = false;
+    }
+    render() {
+        return (h(Host, { key: 'a3799b25a7cec7382a08c966aa1fef4604241e24' }, h("span", { key: 'd2080f7f4472964133af1110509fbfee4cb53fa5', class: {
+                'tg-badge': true,
+                [`tg-badge--${this.variant}`]: true,
+                [`tg-badge--${this.size}`]: true,
+                'tg-badge--pill': this.pill,
+                'tg-badge--outlined': this.outlined,
+            }, role: "status" }, h("slot", { key: '83f86db38959e1276a26a6dc84a375d2612bf18c' }))));
+    }
+    static get is() { return "tg-badge"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-badge.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-badge.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| 'neutral'\n    | 'primary'\n    | 'secondary'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'info'",
+                    "resolved": "\"danger\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual intent of the badge"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'neutral'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the badge"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "pill": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders with fully rounded corners"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "pill",
+                "defaultValue": "false"
+            },
+            "outlined": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders as an outlined badge instead of filled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "outlined",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

package/dist/collection/components/tg-bottom-nav/tg-bottom-nav.css

@@ -0,0 +1,7 @@
+:host { display: block; width: 100%; }
+.tg-bn { display: flex; justify-content: space-around; align-items: center; background: var(--tg-color-surface-raised); border-top: 1px solid var(--tg-color-border); padding: var(--tg-spacing-1) 0 var(--tg-spacing-2); font-family: var(--tg-font-family-sans); }
+.tg-bn__item { display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: none; cursor: pointer; padding: var(--tg-spacing-1) var(--tg-spacing-2); color: var(--tg-color-text-secondary); transition: color var(--tg-duration-fast); min-width: 3.5rem; }
+.tg-bn__item:hover, .tg-bn__item--active { color: var(--tg-color-primary); }
+.tg-bn__icon { position: relative; font-size: 1.25rem; }
+.tg-bn__badge { position: absolute; top: -4px; right: -8px; min-width: 1rem; height: 1rem; font-size: 0.625rem; background: var(--tg-color-danger); color: white; border-radius: var(--tg-radius-full); display: flex; align-items: center; justify-content: center; padding: 0 3px; }
+.tg-bn__label { font-size: var(--tg-font-size-xs); font-weight: var(--tg-font-weight-medium); }

package/dist/collection/components/tg-bottom-nav/tg-bottom-nav.js

@@ -0,0 +1,99 @@
+import { h, Host } from "@stencil/core";
+export class TgBottomNav {
+    constructor() {
+        this.items = [];
+    }
+    get parsed() {
+        if (typeof this.items === 'string') {
+            try {
+                return JSON.parse(this.items);
+            }
+            catch (_a) {
+                return [];
+            }
+        }
+        return this.items;
+    }
+    render() {
+        return (h(Host, { key: '2cbbbd3bf70d3e782be0c7b0826ec814b7eb161d' }, h("nav", { key: '14dffc4fbafeacbea838e72e980ee90934294b01', class: "tg-bn" }, this.parsed.map(item => (h("button", { class: { 'tg-bn__item': true, 'tg-bn__item--active': item.id === this.active }, type: "button", onClick: () => this.tgNavigate.emit(item.id) }, h("span", { class: "tg-bn__icon" }, item.icon, item.badge !== undefined && h("span", { class: "tg-bn__badge" }, item.badge)), h("span", { class: "tg-bn__label" }, item.label)))))));
+    }
+    static get is() { return "tg-bottom-nav"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-bottom-nav.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-bottom-nav.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | BottomNavItem[]",
+                    "resolved": "BottomNavItem[] | string",
+                    "references": {
+                        "BottomNavItem": {
+                            "location": "local",
+                            "path": "/Users/mahykane/work/Teranga-Design-Systems/packages/components/src/components/tg-bottom-nav/tg-bottom-nav.tsx",
+                            "id": "src/components/tg-bottom-nav/tg-bottom-nav.tsx::BottomNavItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "items",
+                "defaultValue": "[]"
+            },
+            "active": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tgNavigate",
+                "name": "tgNavigate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/tg-bottom-sheet/tg-bottom-sheet.css

@@ -0,0 +1,8 @@
+:host { display: contents; }
+.tg-bs__overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 10000; display: flex; align-items: flex-end; animation: tg-bs-fadein 0.2s; }
+@keyframes tg-bs-fadein { from { opacity: 0; } to { opacity: 1; } }
+.tg-bs { width: 100%; max-height: 80vh; background: var(--tg-color-surface-raised); border-radius: var(--tg-radius-2xl) var(--tg-radius-2xl) 0 0; padding: var(--tg-spacing-3) var(--tg-spacing-4) var(--tg-spacing-6); overflow-y: auto; font-family: var(--tg-font-family-sans); animation: tg-bs-slide 0.3s var(--tg-ease-out); }
+@keyframes tg-bs-slide { from { transform: translateY(100%); } to { transform: translateY(0); } }
+.tg-bs__handle { width: 2.5rem; height: 4px; background: var(--tg-color-border-strong); border-radius: var(--tg-radius-full); margin: 0 auto var(--tg-spacing-3); }
+.tg-bs__title { margin: 0 0 var(--tg-spacing-3); font-size: var(--tg-font-size-md); font-weight: var(--tg-font-weight-semibold); color: var(--tg-color-text-primary); }
+.tg-bs__content { font-size: var(--tg-font-size-sm); color: var(--tg-color-text-primary); }

package/dist/collection/components/tg-bottom-sheet/tg-bottom-sheet.js

@@ -0,0 +1,84 @@
+import { h, Host } from "@stencil/core";
+export class TgBottomSheet {
+    constructor() {
+        this.open = false;
+    }
+    render() {
+        if (!this.open)
+            return h(Host, null);
+        return (h(Host, null, h("div", { class: "tg-bs__overlay", onClick: () => this.tgClose.emit() }, h("div", { class: "tg-bs", onClick: (e) => e.stopPropagation() }, h("div", { class: "tg-bs__handle" }), this.heading && h("h3", { class: "tg-bs__title" }, this.heading), h("div", { class: "tg-bs__content" }, h("slot", null))))));
+    }
+    static get is() { return "tg-bottom-sheet"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-bottom-sheet.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-bottom-sheet.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tgClose",
+                "name": "tgClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}