@teranga-ds/components 0.1.0

package/dist/collection/components/tg-calendar-view/tg-calendar-view.css

@@ -0,0 +1,19 @@
+:host { display: block; }
+.tg-cal { font-family: var(--tg-font-family-sans); background: var(--tg-color-surface-raised); border: 1px solid var(--tg-color-border); border-radius: var(--tg-radius-xl); padding: var(--tg-spacing-4); }
+.tg-cal__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--tg-spacing-3); }
+.tg-cal__nav-btn { background: none; border: none; cursor: pointer; font-size: 1.5rem; color: var(--tg-color-text-primary); padding: var(--tg-spacing-1) var(--tg-spacing-2); border-radius: var(--tg-radius-md); }
+.tg-cal__nav-btn:hover { background: var(--tg-color-primary-subtle); }
+.tg-cal__month { font-size: var(--tg-font-size-md); font-weight: var(--tg-font-weight-semibold); }
+.tg-cal__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: var(--tg-spacing-1); }
+.tg-cal__wd { text-align: center; font-size: var(--tg-font-size-xs); color: var(--tg-color-text-secondary); font-weight: var(--tg-font-weight-medium); padding: var(--tg-spacing-2) 0; }
+.tg-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--tg-color-border); border: 1px solid var(--tg-color-border); border-radius: var(--tg-radius-lg); overflow: hidden; }
+.tg-cal__cell { min-height: 5rem; padding: var(--tg-spacing-1); background: var(--tg-color-surface-raised); cursor: pointer; }
+.tg-cal__cell:hover { background: var(--tg-color-primary-subtle); }
+.tg-cal__cell--empty { cursor: default; background: var(--tg-color-surface-sunken); }
+.tg-cal__cell--today { background: var(--tg-color-primary-subtle); }
+.tg-cal__day-num { display: block; font-size: var(--tg-font-size-xs); font-weight: var(--tg-font-weight-medium); margin-bottom: var(--tg-spacing-0-5); }
+.tg-cal__event { font-size: 0.625rem; padding: 1px var(--tg-spacing-1); border-radius: var(--tg-radius-sm); margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.tg-cal__event--default { background: var(--tg-color-primary-subtle); color: var(--tg-color-primary); }
+.tg-cal__event--success { background: var(--tg-color-success-subtle); color: var(--tg-color-success); }
+.tg-cal__event--warning { background: var(--tg-color-warning-subtle); color: var(--tg-color-warning); }
+.tg-cal__event--danger { background: var(--tg-color-danger-subtle); color: var(--tg-color-danger); }

package/dist/collection/components/tg-calendar-view/tg-calendar-view.js

@@ -0,0 +1,108 @@
+import { h, Host } from "@stencil/core";
+export class TgCalendarView {
+    constructor() {
+        this.events = [];
+        this.viewDate = new Date();
+        this.prevMonth = () => { const d = new Date(this.viewDate); d.setMonth(d.getMonth() - 1); this.viewDate = d; };
+        this.nextMonth = () => { const d = new Date(this.viewDate); d.setMonth(d.getMonth() + 1); this.viewDate = d; };
+    }
+    get parsed() {
+        if (typeof this.events === 'string') {
+            try {
+                return JSON.parse(this.events);
+            }
+            catch (_a) {
+                return [];
+            }
+        }
+        return this.events;
+    }
+    daysInMonth(y, m) { return new Date(y, m + 1, 0).getDate(); }
+    firstDow(y, m) { return new Date(y, m, 1).getDay(); }
+    getEvents(day) {
+        const y = this.viewDate.getFullYear();
+        const m = String(this.viewDate.getMonth() + 1).padStart(2, '0');
+        const d = String(day).padStart(2, '0');
+        const dateStr = y + '-' + m + '-' + d;
+        return this.parsed.filter(e => e.date === dateStr);
+    }
+    render() {
+        const y = this.viewDate.getFullYear();
+        const m = this.viewDate.getMonth();
+        const days = this.daysInMonth(y, m);
+        const first = this.firstDow(y, m);
+        const months = ['Janvier', 'F\u00e9vrier', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Ao\u00fbt', 'Septembre', 'Octobre', 'Novembre', 'D\u00e9cembre'];
+        const dNames = ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'];
+        const cells = [];
+        for (let i = 0; i < first; i++)
+            cells.push(null);
+        for (let i = 1; i <= days; i++)
+            cells.push(i);
+        return (h(Host, { key: '5d19cf4407abf802127e686e26b4ce2e50aa4e48' }, h("div", { key: 'ed361d104dde29bec0e44e90782fb0387e7ec907', class: "tg-cal" }, h("div", { key: 'b386975ff0453e1562352f92cc2362376b278574', class: "tg-cal__nav" }, h("button", { key: '961f0a5748d053dbc4c44bd2cb92d89427ab8fc5', class: "tg-cal__nav-btn", type: "button", onClick: this.prevMonth }, "\\u2039"), h("span", { key: '204c44557e626d4b39dbed6a40b617147bad7eeb', class: "tg-cal__month" }, months[m], " ", y), h("button", { key: '74ec81ffccd6367023aca4b340099a19162d5669', class: "tg-cal__nav-btn", type: "button", onClick: this.nextMonth }, "\\u203a")), h("div", { key: 'c4d5c746da64d14044f46585961a16923d913401', class: "tg-cal__weekdays" }, dNames.map(d => h("span", { class: "tg-cal__wd" }, d))), h("div", { key: '3227acc2de576a8322f847457e840c00b70d1efb', class: "tg-cal__grid" }, cells.map(day => (h("div", { class: { 'tg-cal__cell': true, 'tg-cal__cell--empty': !day, 'tg-cal__cell--today': day !== null && new Date().getDate() === day && new Date().getMonth() === m && new Date().getFullYear() === y }, onClick: () => day && this.tgDateSelect.emit(y + '-' + String(m + 1).padStart(2, '0') + '-' + String(day).padStart(2, '0')) }, day && h("span", { class: "tg-cal__day-num" }, day), day && this.getEvents(day).map(ev => h("div", { class: 'tg-cal__event tg-cal__event--' + (ev.variant || 'default') }, ev.title)))))))));
+    }
+    static get is() { return "tg-calendar-view"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-calendar-view.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-calendar-view.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "events": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | CalendarEvent[]",
+                    "resolved": "CalendarEvent[] | string",
+                    "references": {
+                        "CalendarEvent": {
+                            "location": "local",
+                            "path": "/Users/mahykane/work/Teranga-Design-Systems/packages/components/src/components/tg-calendar-view/tg-calendar-view.tsx",
+                            "id": "src/components/tg-calendar-view/tg-calendar-view.tsx::CalendarEvent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "events",
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "viewDate": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tgDateSelect",
+                "name": "tgDateSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,117 @@
+/* ============================================================
+   tg-card — Teranga Design System
+   ============================================================ */
+
+:host {
+  display: block;
+}
+
+:host([full-width]) {
+  width: 100%;
+}
+
+.tg-card {
+  background-color: var(--tg-color-surface-raised);
+  border-radius: var(--tg-radius-xl);
+  border: 1px solid var(--tg-color-border);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  font-family: var(--tg-font-family-sans);
+}
+
+/* ── Elevations */
+.tg-card--flat {
+  box-shadow: none;
+}
+
+.tg-card--raised {
+  box-shadow: var(--tg-shadow-sm);
+}
+
+.tg-card--floating {
+  box-shadow: var(--tg-shadow-md);
+}
+
+/* ── Interactive */
+.tg-card--interactive {
+  cursor: pointer;
+  transition: box-shadow var(--tg-duration-normal) var(--tg-ease-default),
+              transform var(--tg-duration-normal) var(--tg-ease-default);
+}
+
+.tg-card--interactive:hover {
+  box-shadow: var(--tg-shadow-lg);
+  transform: translateY(-1px);
+}
+
+.tg-card--interactive:active {
+  box-shadow: var(--tg-shadow-sm);
+  transform: translateY(0);
+}
+
+/* ── Media slot */
+::slotted([slot='media']) {
+  display: block;
+  width: 100%;
+  object-fit: cover;
+}
+
+/* ── Header */
+.tg-card__header-slot:not(:empty) {
+  padding: var(--tg-spacing-4) var(--tg-spacing-5);
+  border-bottom: 1px solid var(--tg-color-border);
+  font-weight: var(--tg-font-weight-semibold);
+  font-size: var(--tg-font-size-md);
+  color: var(--tg-color-text-primary);
+}
+
+/* ── Body */
+.tg-card__body {
+  flex: 1;
+  padding: var(--tg-spacing-5);
+  color: var(--tg-color-text-secondary);
+  font-size: var(--tg-font-size-sm);
+  line-height: var(--tg-line-height-relaxed);
+}
+
+.tg-card--no-padding .tg-card__body {
+  padding: 0;
+}
+
+/* ── Footer */
+.tg-card__footer-slot:not(:empty) {
+  padding: var(--tg-spacing-4) var(--tg-spacing-5);
+  border-top: 1px solid var(--tg-color-border);
+  display: flex;
+  align-items: center;
+  gap: var(--tg-spacing-3);
+}
+
+/* ── Accent border */
+.tg-card--accent-primary  { border-top: 3px solid var(--tg-color-primary); }
+.tg-card--accent-secondary { border-top: 3px solid var(--tg-color-secondary); }
+.tg-card--accent-danger   { border-top: 3px solid var(--tg-color-danger); }
+.tg-card--accent-success  { border-top: 3px solid var(--tg-color-success); }
+.tg-card--accent-accent   { border-top: 3px solid var(--tg-color-accent, #C2703A); }
+
+/* ── Flag accent (green-gold-red gradient) */
+.tg-card--accent-flag {
+  border-top: 3px solid transparent;
+  border-image: linear-gradient(90deg, var(--tg-color-green-500), var(--tg-color-gold-600), var(--tg-color-red-500)) 1;
+}
+
+/* ── Enter animation */
+.tg-card {
+  animation: tg-card-enter var(--tg-duration-normal, 200ms) var(--tg-ease-out, ease-out);
+}
+
+@keyframes tg-card-enter {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* ── Focus within */
+.tg-card--interactive:focus-within {
+  box-shadow: var(--tg-focus-ring);
+}

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

@@ -0,0 +1,134 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @component tg-card
+ * @description Container component for grouping related content.
+ *
+ * @slot default  — Main content
+ * @slot header   — Card header area (title, actions)
+ * @slot footer   — Card footer area (buttons, meta)
+ * @slot media    — Full-width media area (image, video) placed above header
+ *
+ * @example
+ * <tg-card>
+ *   <span slot="header">Identité Nationale</span>
+ *   <p>Gérez vos informations d'identité.</p>
+ *   <tg-button slot="footer" variant="primary">Voir les détails</tg-button>
+ * </tg-card>
+ */
+export class TgCard {
+    constructor() {
+        /** Visual elevation / shadow level */
+        this.elevation = 'raised';
+        /** Removes internal padding for flush content */
+        this.noPadding = false;
+        /** Makes the card take full width of its container */
+        this.fullWidth = false;
+        /** Makes the card interactive (hover + cursor pointer) */
+        this.interactive = false;
+    }
+    render() {
+        return (h(Host, { key: '8c305fbeed5f77c0f32ca5c3cefe5af1ad84e623' }, h("div", { key: 'dcd60171d6321db97fa864093df5d42ad82bbb8e', class: {
+                'tg-card': true,
+                [`tg-card--${this.elevation}`]: true,
+                'tg-card--no-padding': this.noPadding,
+                'tg-card--full-width': this.fullWidth,
+                'tg-card--interactive': this.interactive,
+            } }, h("slot", { key: '3dd0f10efc40225b531384c75a1bd317750bb2fc', name: "media" }), h("div", { key: '7c96f4e1c507e42edb495ce0a6963ca28e6a308d', class: "tg-card__header-slot" }, h("slot", { key: '6fafb906f219aa6e8f9c8699034710fecc567a9f', name: "header" })), h("div", { key: '48cfed9312a3a7fa41c2cc4e0e81608587807a63', class: "tg-card__body" }, h("slot", { key: 'cc717ecfa2aa6a5e9c8fc0aff3d61bc99921f188' })), h("div", { key: '0ebcde8f0af639ccda9cdbf96fdff087e7152070', class: "tg-card__footer-slot" }, h("slot", { key: '34d345e1cc83580d1f864f802f53a6f0df327d13', name: "footer" })))));
+    }
+    static get is() { return "tg-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "elevation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'flat' | 'raised' | 'floating'",
+                    "resolved": "\"flat\" | \"floating\" | \"raised\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual elevation / shadow level"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "elevation",
+                "defaultValue": "'raised'"
+            },
+            "noPadding": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Removes internal padding for flush content"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "no-padding",
+                "defaultValue": "false"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the card take full width of its container"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "full-width",
+                "defaultValue": "false"
+            },
+            "interactive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the card interactive (hover + cursor pointer)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "interactive",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,207 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.tg-chat {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  font-family: var(--tg-font-family, sans-serif);
+  background: var(--tg-color-surface, #fff);
+  border: 1px solid var(--tg-color-neutral-200, #e5e7eb);
+  border-radius: var(--tg-radius-xl, 16px);
+  overflow: hidden;
+}
+
+/* Header */
+.tg-chat__header {
+  display: flex;
+  align-items: center;
+  gap: var(--tg-spacing-sm, 12px);
+  padding: var(--tg-spacing-md, 16px) var(--tg-spacing-lg, 24px);
+  border-bottom: 1px solid var(--tg-color-neutral-100, #f3f4f6);
+  background: var(--tg-color-neutral-50, #f9fafb);
+}
+
+.tg-chat__avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: var(--tg-color-primary, #00853F);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: var(--tg-font-weight-bold, 700);
+  font-size: 0.875rem;
+  flex-shrink: 0;
+}
+
+.tg-chat__name {
+  font-weight: var(--tg-font-weight-semibold, 600);
+  font-size: var(--tg-font-size-sm, 0.8125rem);
+  color: var(--tg-color-text, #111827);
+}
+
+.tg-chat__status {
+  font-size: 0.75rem;
+  color: var(--tg-color-success, #059669);
+}
+
+/* Messages area */
+.tg-chat__messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--tg-spacing-md, 16px) var(--tg-spacing-lg, 24px);
+  display: flex;
+  flex-direction: column;
+  gap: var(--tg-spacing-md, 16px);
+}
+
+/* Bubbles */
+.tg-chat__bubble-row {
+  display: flex;
+  gap: var(--tg-spacing-xs, 8px);
+  align-items: flex-end;
+  animation: tg-chat-bubble-in var(--tg-duration-normal, 200ms) var(--tg-ease-out, ease-out);
+}
+
+.tg-chat__bubble-row--user {
+  flex-direction: row-reverse;
+}
+
+@keyframes tg-chat-bubble-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.tg-chat__bubble {
+  max-width: 75%;
+  padding: var(--tg-spacing-sm, 12px) var(--tg-spacing-md, 16px);
+  border-radius: var(--tg-radius-lg, 12px);
+  font-size: var(--tg-font-size-sm, 0.8125rem);
+  line-height: 1.6;
+  word-break: break-word;
+}
+
+.tg-chat__bubble--bot {
+  background: var(--tg-color-neutral-100, #f3f4f6);
+  color: var(--tg-color-text, #111827);
+  border-bottom-left-radius: var(--tg-radius-xs, 4px);
+}
+
+.tg-chat__bubble--user {
+  background: var(--tg-color-primary, #00853F);
+  color: #fff;
+  border-bottom-right-radius: var(--tg-radius-xs, 4px);
+}
+
+.tg-chat__time {
+  font-size: 0.65rem;
+  color: var(--tg-color-text-secondary, #6b7280);
+  margin-top: var(--tg-spacing-2xs, 4px);
+}
+
+/* Typing indicator */
+.tg-chat__typing {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: var(--tg-spacing-sm, 12px) var(--tg-spacing-md, 16px);
+  background: var(--tg-color-neutral-100, #f3f4f6);
+  border-radius: var(--tg-radius-lg, 12px);
+  border-bottom-left-radius: var(--tg-radius-xs, 4px);
+  width: fit-content;
+}
+
+.tg-chat__typing-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--tg-color-neutral-400, #9ca3af);
+  animation: tg-chat-typing 1.4s infinite;
+}
+
+.tg-chat__typing-dot:nth-child(2) { animation-delay: 0.2s; }
+.tg-chat__typing-dot:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes tg-chat-typing {
+  0%, 60%, 100% { transform: translateY(0); }
+  30% { transform: translateY(-6px); }
+}
+
+/* Composer */
+.tg-chat__composer {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--tg-spacing-xs, 8px);
+  padding: var(--tg-spacing-md, 16px) var(--tg-spacing-lg, 24px);
+  border-top: 1px solid var(--tg-color-neutral-100, #f3f4f6);
+}
+
+.tg-chat__input {
+  flex: 1;
+  resize: none;
+  border: 1px solid var(--tg-color-neutral-200, #e5e7eb);
+  border-radius: var(--tg-radius-lg, 12px);
+  padding: var(--tg-spacing-sm, 12px) var(--tg-spacing-md, 16px);
+  font-family: inherit;
+  font-size: var(--tg-font-size-sm, 0.8125rem);
+  line-height: 1.5;
+  color: var(--tg-color-text, #111827);
+  background: var(--tg-color-surface, #fff);
+  min-height: 44px;
+  max-height: 120px;
+  transition: border-color var(--tg-duration-fast, 150ms);
+}
+
+.tg-chat__input::placeholder {
+  color: var(--tg-color-neutral-400, #9ca3af);
+}
+
+.tg-chat__input:focus {
+  outline: none;
+  border-color: var(--tg-color-primary, #00853F);
+  box-shadow: var(--tg-focus-ring);
+}
+
+.tg-chat__send {
+  appearance: none;
+  border: none;
+  background: var(--tg-color-primary, #00853F);
+  color: #fff;
+  cursor: pointer;
+  width: 44px;
+  height: 44px;
+  border-radius: var(--tg-radius-lg, 12px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: background var(--tg-duration-fast, 150ms), transform var(--tg-duration-fast, 150ms);
+}
+
+.tg-chat__send:hover {
+  background: var(--tg-color-primary-dark, #006B32);
+}
+
+.tg-chat__send:active {
+  transform: scale(0.95);
+}
+
+.tg-chat__send:focus-visible {
+  outline: none;
+  box-shadow: var(--tg-focus-ring);
+}
+
+.tg-chat__send:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.tg-chat__send svg {
+  width: 20px;
+  height: 20px;
+}