@teranga-ds/components 0.1.0

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

@@ -0,0 +1,159 @@
+import { h, Host } from "@stencil/core";
+export class TgNavbar {
+    constructor() {
+        this.items = [];
+        this.sticky = false;
+        this.bordered = false;
+        this.mobileOpen = false;
+        this.toggleMobile = () => {
+            this.mobileOpen = !this.mobileOpen;
+        };
+    }
+    get parsedItems() {
+        if (typeof this.items === 'string') {
+            try {
+                return JSON.parse(this.items);
+            }
+            catch (_a) {
+                return [];
+            }
+        }
+        return this.items;
+    }
+    render() {
+        var _a;
+        const navItems = this.parsedItems;
+        const hamburger = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>`;
+        const closeIcon = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="5" y1="5" x2="19" y2="19"/><line x1="19" y1="5" x2="5" y2="19"/></svg>`;
+        return (h(Host, { key: 'fcfdd7b1e4580338d8c5532bca9b70de0c0a78b1' }, h("header", { key: 'e7cbb40afd97b6ea08ed5b861a151bc244f0d5e6', class: {
+                'tg-navbar': true,
+                'tg-navbar--sticky': this.sticky,
+                'tg-navbar--bordered': this.bordered,
+            } }, h("a", { key: 'fd6204d0934682c7fb139155021436c8a9f1ae22', class: "tg-navbar__brand", href: "/" }, this.logoSrc && h("img", { key: '307f3c79b2cc4129180de15b27e3e7bf92fc731c', class: "tg-navbar__logo", src: this.logoSrc, alt: (_a = this.brand) !== null && _a !== void 0 ? _a : '' }), this.brand && h("span", { key: 'ae8a249aa898be2dc6b4ae0ae1144d7510e2be6b' }, this.brand)), h("nav", { key: '44e66cf6fa64ee023207b87e7cef5c743b558545' }, h("ul", { key: '4963f3f8aea40d7db823008005db9e11ef63ccdb', class: "tg-navbar__nav" }, navItems.map(item => (h("li", null, h("a", { class: { 'tg-navbar__link': true, 'tg-navbar__link--active': !!item.active }, href: item.href }, item.label)))))), h("div", { key: '8b1b1a0a6cda63bac4f3cc32e3eb0dc319263b74', class: "tg-navbar__actions" }, h("slot", { key: '86e277aa8f189f32d897c9685b7329688e08c016', name: "actions" })), h("button", { key: '8fc67825906b0c3bd6e1c4d4c87d5853b6583be8', class: "tg-navbar__toggle", onClick: this.toggleMobile, "aria-label": this.mobileOpen ? 'Fermer le menu' : 'Ouvrir le menu', innerHTML: this.mobileOpen ? closeIcon : hamburger }), h("div", { key: 'f65a73d3099622d822b5592972643d349cdf600e', class: { 'tg-navbar__mobile-menu': true, 'tg-navbar__mobile-menu--open': this.mobileOpen } }, navItems.map(item => (h("a", { class: { 'tg-navbar__link': true, 'tg-navbar__link--active': !!item.active }, href: item.href }, item.label))), h("slot", { key: '25122d84b212d01cc9e2408005dabafc15895a56', name: "mobile-actions" })))));
+    }
+    static get is() { return "tg-navbar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-navbar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-navbar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "brand": {
+                "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": "brand"
+            },
+            "logoSrc": {
+                "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": "logo-src"
+            },
+            "items": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | TgNavItem[]",
+                    "resolved": "TgNavItem[] | string",
+                    "references": {
+                        "TgNavItem": {
+                            "location": "local",
+                            "path": "/Users/mahykane/work/Teranga-Design-Systems/packages/components/src/components/tg-navbar/tg-navbar.tsx",
+                            "id": "src/components/tg-navbar/tg-navbar.tsx::TgNavItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "items",
+                "defaultValue": "[]"
+            },
+            "sticky": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sticky",
+                "defaultValue": "false"
+            },
+            "bordered": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "bordered",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "mobileOpen": {}
+        };
+    }
+}

package/dist/collection/components/tg-otp-input/tg-otp-input.css

@@ -0,0 +1,10 @@
+:host { display: block; }
+.tg-otp { font-family: var(--tg-font-family-sans); }
+.tg-otp__label { display: block; font-size: var(--tg-font-size-sm); font-weight: var(--tg-font-weight-medium); color: var(--tg-color-text-primary); margin-bottom: var(--tg-spacing-2); }
+.tg-otp__fields { display: flex; gap: var(--tg-spacing-2); }
+.tg-otp__field { width: 2.75rem; height: 3rem; text-align: center; font-size: var(--tg-font-size-xl); font-weight: var(--tg-font-weight-semibold); font-family: var(--tg-font-family-mono); color: var(--tg-color-text-primary); background: var(--tg-color-surface-raised); border: 2px solid var(--tg-color-border-strong); border-radius: var(--tg-radius-lg); outline: none; transition: border-color var(--tg-duration-fast), box-shadow var(--tg-duration-fast); }
+.tg-otp__field:focus { border-color: var(--tg-color-primary); box-shadow: var(--tg-focus-ring); }
+.tg-otp__field--filled { border-color: var(--tg-color-primary); }
+.tg-otp__field--invalid { border-color: var(--tg-color-danger); }
+.tg-otp__field:disabled { opacity: 0.5; cursor: not-allowed; }
+.tg-otp__error { margin: var(--tg-spacing-2) 0 0; font-size: var(--tg-font-size-xs); color: var(--tg-color-danger); }

package/dist/collection/components/tg-otp-input/tg-otp-input.js

@@ -0,0 +1,221 @@
+import { h, Host } from "@stencil/core";
+export class TgOtpInput {
+    constructor() {
+        this.length = 6;
+        this.disabled = false;
+        this.invalid = false;
+        this.masked = false;
+        this.values = [];
+        this.handlePaste = (e) => {
+            var _a, _b, _c;
+            e.preventDefault();
+            const text = (_c = (_b = (_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text')) === null || _b === void 0 ? void 0 : _b.replace(/\D/g, '').slice(0, this.length)) !== null && _c !== void 0 ? _c : '';
+            const nv = [...this.values];
+            for (let i = 0; i < text.length; i++)
+                nv[i] = text[i];
+            this.values = nv;
+            this.tgChange.emit(nv.join(''));
+            if (nv.every(v => v !== ''))
+                this.tgComplete.emit(nv.join(''));
+        };
+    }
+    componentWillLoad() { this.values = new Array(this.length).fill(''); }
+    handleInput(idx, e) {
+        var _a;
+        const input = e.target;
+        const val = input.value.replace(/\D/g, '').slice(-1);
+        const nv = [...this.values];
+        nv[idx] = val;
+        this.values = nv;
+        this.tgChange.emit(nv.join(''));
+        if (val && idx < this.length - 1) {
+            const next = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('input')[idx + 1];
+            next === null || next === void 0 ? void 0 : next.focus();
+        }
+        if (nv.every(v => v !== ''))
+            this.tgComplete.emit(nv.join(''));
+    }
+    handleKeyDown(idx, e) {
+        var _a;
+        if (e.key === 'Backspace' && !this.values[idx] && idx > 0) {
+            const prev = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('input')[idx - 1];
+            prev === null || prev === void 0 ? void 0 : prev.focus();
+        }
+    }
+    render() {
+        return (h(Host, { key: '0ea9887bdd561677f2ef85113ad0d9f0addb6c9c' }, h("div", { key: '29b8ca81b85443d38908992d9920d8913dd7b2ed', class: "tg-otp" }, this.label && h("label", { key: 'bf00d9988ff2247acc337ba24e5d5981489b4c24', class: "tg-otp__label" }, this.label), h("div", { key: '0c55704aebdb1c0e90145a9d3182c38047e4cefb', class: "tg-otp__fields" }, this.values.map((v, i) => (h("input", { class: { 'tg-otp__field': true, 'tg-otp__field--invalid': this.invalid, 'tg-otp__field--filled': v !== '' }, type: this.masked ? 'password' : 'text', inputMode: "numeric", maxLength: 1, value: v, disabled: this.disabled, onInput: (e) => this.handleInput(i, e), onKeyDown: (e) => this.handleKeyDown(i, e), onPaste: this.handlePaste, "aria-label": 'Digit ' + (i + 1) })))), this.errorText && h("p", { key: '70e5b44970471655e8499f77ee0fb0e527e4d97b', class: "tg-otp__error" }, this.errorText))));
+    }
+    static get is() { return "tg-otp-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-otp-input.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-otp-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "length": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "length",
+                "defaultValue": "6"
+            },
+            "label": {
+                "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": "label"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "invalid",
+                "defaultValue": "false"
+            },
+            "errorText": {
+                "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": "error-text"
+            },
+            "masked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "masked",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "values": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tgComplete",
+                "name": "tgComplete",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "tgChange",
+                "name": "tgChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,73 @@
+:host {
+  display: block;
+}
+
+.tg-pagination {
+  display: flex;
+  align-items: center;
+  gap: var(--tg-spacing-2xs, 4px);
+  font-family: var(--tg-font-family, sans-serif);
+}
+
+.tg-pagination__btn {
+  appearance: none;
+  border: 1px solid var(--tg-color-neutral-200, #e5e7eb);
+  background: var(--tg-color-surface, #fff);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 36px;
+  height: 36px;
+  padding: 0 var(--tg-spacing-xs, 8px);
+  border-radius: var(--tg-radius-md, 8px);
+  font-family: inherit;
+  font-size: var(--tg-font-size-sm, 0.8125rem);
+  font-weight: var(--tg-font-weight-medium, 500);
+  color: var(--tg-color-text, #111827);
+  transition: background var(--tg-duration-fast, 150ms), border-color var(--tg-duration-fast, 150ms), color var(--tg-duration-fast, 150ms);
+  font-variant-numeric: tabular-nums;
+}
+
+.tg-pagination__btn:hover:not(:disabled) {
+  background: var(--tg-color-neutral-50, #f9fafb);
+  border-color: var(--tg-color-neutral-300, #d1d5db);
+}
+
+.tg-pagination__btn:focus-visible {
+  outline: none;
+  box-shadow: var(--tg-focus-ring);
+}
+
+.tg-pagination__btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.tg-pagination__btn--active {
+  background: var(--tg-color-primary, #00853F);
+  border-color: var(--tg-color-primary, #00853F);
+  color: #fff;
+}
+
+.tg-pagination__btn--active:hover:not(:disabled) {
+  background: var(--tg-color-primary-dark, #006B32);
+  border-color: var(--tg-color-primary-dark, #006B32);
+  color: #fff;
+}
+
+.tg-pagination__btn svg {
+  width: 16px;
+  height: 16px;
+}
+
+.tg-pagination__ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 36px;
+  height: 36px;
+  color: var(--tg-color-text-secondary, #6b7280);
+  font-size: var(--tg-font-size-sm, 0.8125rem);
+  user-select: none;
+}

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

@@ -0,0 +1,137 @@
+import { h, Host } from "@stencil/core";
+export class TgPagination {
+    constructor() {
+        this.currentPage = 1;
+        this.totalPages = 1;
+        this.siblingCount = 1;
+        this.goTo = (page) => {
+            if (page < 1 || page > this.totalPages || page === this.currentPage)
+                return;
+            this.currentPage = page;
+            this.tgPageChange.emit(page);
+        };
+    }
+    getRange() {
+        const total = this.totalPages;
+        const current = this.currentPage;
+        const sibling = this.siblingCount;
+        if (total <= 7)
+            return Array.from({ length: total }, (_, i) => i + 1);
+        const left = Math.max(current - sibling, 2);
+        const right = Math.min(current + sibling, total - 1);
+        const showLeftDots = left > 2;
+        const showRightDots = right < total - 1;
+        const pages = [1];
+        if (showLeftDots)
+            pages.push('...');
+        for (let i = left; i <= right; i++)
+            pages.push(i);
+        if (showRightDots)
+            pages.push('...');
+        pages.push(total);
+        return pages;
+    }
+    render() {
+        const pages = this.getRange();
+        const prevIcon = `<svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><polyline points="9 3 5 7 9 11"/></svg>`;
+        const nextIcon = `<svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><polyline points="5 3 9 7 5 11"/></svg>`;
+        return (h(Host, { key: 'd31881cd7e9a8eb213eef62334f3172707c0a021' }, h("nav", { key: '6ce78ba6a430c51891c3f817cc96ff2a11fc2ea4', class: "tg-pagination", "aria-label": "Pagination" }, h("button", { key: '3c3d0ed57dfda0fd5c8f9367f9b1c411e9c02da1', class: "tg-pagination__btn", disabled: this.currentPage <= 1, onClick: () => this.goTo(this.currentPage - 1), "aria-label": "Page pr\u00E9c\u00E9dente", innerHTML: prevIcon }), pages.map(p => p === '...' ? (h("span", { class: "tg-pagination__ellipsis" }, "\u2026")) : (h("button", { class: {
+                'tg-pagination__btn': true,
+                'tg-pagination__btn--active': p === this.currentPage,
+            }, "aria-current": p === this.currentPage ? 'page' : undefined, onClick: () => this.goTo(p) }, p))), h("button", { key: 'f2f800639e489e518f606e6ea186eaf5e02abd3f', class: "tg-pagination__btn", disabled: this.currentPage >= this.totalPages, onClick: () => this.goTo(this.currentPage + 1), "aria-label": "Page suivante", innerHTML: nextIcon }))));
+    }
+    static get is() { return "tg-pagination"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-pagination.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-pagination.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "currentPage": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "current-page",
+                "defaultValue": "1"
+            },
+            "totalPages": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "total-pages",
+                "defaultValue": "1"
+            },
+            "siblingCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sibling-count",
+                "defaultValue": "1"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tgPageChange",
+                "name": "tgPageChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/tg-presence-indicator/tg-presence-indicator.css

@@ -0,0 +1,10 @@
+:host { display: inline-flex; }
+.tg-pi { display: flex; align-items: center; }
+.tg-pi__user { position: relative; margin-left: -6px; }
+.tg-pi__user:first-child { margin-left: 0; }
+.tg-pi__avatar { width: 2rem; height: 2rem; border-radius: 50%; background: var(--tg-color-primary-subtle); color: var(--tg-color-primary); display: flex; align-items: center; justify-content: center; font-size: var(--tg-font-size-xs); font-weight: var(--tg-font-weight-semibold); font-family: var(--tg-font-family-sans); border: 2px solid var(--tg-color-surface-raised); }
+.tg-pi__status { position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--tg-color-surface-raised); }
+.tg-pi__status--online { background: var(--tg-color-success); }
+.tg-pi__status--away { background: var(--tg-color-warning); }
+.tg-pi__status--busy { background: var(--tg-color-danger); }
+.tg-pi__more { width: 2rem; height: 2rem; border-radius: 50%; background: var(--tg-color-surface-sunken); color: var(--tg-color-text-secondary); display: flex; align-items: center; justify-content: center; font-size: var(--tg-font-size-xs); font-weight: var(--tg-font-weight-medium); margin-left: -6px; border: 2px solid var(--tg-color-surface-raised); }