@teranga-ds/components 0.1.0

package/dist/collection/components/tg-model-selector/tg-model-selector.css

@@ -0,0 +1,15 @@
+:host { display: inline-block; position: relative; }
+.tg-ms { font-family: var(--tg-font-family-sans); }
+.tg-ms__trigger { display: inline-flex; align-items: center; gap: var(--tg-spacing-2); padding: var(--tg-spacing-2) var(--tg-spacing-3); border: 1px solid var(--tg-color-border-strong); border-radius: var(--tg-radius-lg); background: var(--tg-color-surface-raised); cursor: pointer; font-size: var(--tg-font-size-sm); color: var(--tg-color-text-primary); transition: border-color var(--tg-duration-fast); }
+.tg-ms__trigger:hover { border-color: var(--tg-color-primary); }
+.tg-ms__chev { transition: transform var(--tg-duration-fast); color: var(--tg-color-text-secondary); }
+.tg-ms__chev--open { transform: rotate(180deg); }
+.tg-ms__dropdown { position: absolute; top: 100%; left: 0; right: 0; margin-top: var(--tg-spacing-1); background: var(--tg-color-surface-raised); border: 1px solid var(--tg-color-border); border-radius: var(--tg-radius-xl); box-shadow: var(--tg-shadow-lg); z-index: 1000; padding: var(--tg-spacing-1); min-width: 16rem; }
+.tg-ms__option { display: block; width: 100%; text-align: left; padding: var(--tg-spacing-2-5) var(--tg-spacing-3); border: none; background: none; cursor: pointer; border-radius: var(--tg-radius-lg); transition: background var(--tg-duration-fast); }
+.tg-ms__option:hover { background: var(--tg-color-primary-subtle); }
+.tg-ms__option--sel { background: var(--tg-color-primary-subtle); }
+.tg-ms__opt-main { display: flex; align-items: center; gap: var(--tg-spacing-2); }
+.tg-ms__opt-name { font-size: var(--tg-font-size-sm); font-weight: var(--tg-font-weight-medium); color: var(--tg-color-text-primary); }
+.tg-ms__opt-badge { font-size: var(--tg-font-size-xs); padding: 1px var(--tg-spacing-1-5); background: var(--tg-color-primary); color: white; border-radius: var(--tg-radius-full); }
+.tg-ms__opt-provider { display: block; font-size: var(--tg-font-size-xs); color: var(--tg-color-text-secondary); margin-top: 2px; }
+.tg-ms__opt-desc { display: block; font-size: var(--tg-font-size-xs); color: var(--tg-color-text-disabled); margin-top: 2px; }

package/dist/collection/components/tg-model-selector/tg-model-selector.js

@@ -0,0 +1,117 @@
+import { h, Host } from "@stencil/core";
+export class TgModelSelector {
+    constructor() {
+        this.models = [];
+        this.open = false;
+    }
+    get parsed() {
+        if (typeof this.models === 'string') {
+            try {
+                return JSON.parse(this.models);
+            }
+            catch (_a) {
+                return [];
+            }
+        }
+        return this.models;
+    }
+    get selected() { return this.parsed.find(m => m.id === this.value); }
+    onDocClick() { this.open = false; }
+    render() {
+        const cur = this.selected;
+        return (h(Host, { key: '8f2110c45d3a41c21b318ea4aee2b9df97f6c64e' }, h("div", { key: '548a1c12ff3e4ca389bd9af9c7b3918284ecdf07', class: "tg-ms", onClick: (e) => e.stopPropagation() }, h("button", { key: '64c22f0895e04c5852124bb9fc50a9075aa85e89', class: "tg-ms__trigger", type: "button", onClick: () => { this.open = !this.open; } }, h("span", { key: '07d0f36c53a428721beac440fb3746cd621db3e6', class: "tg-ms__current" }, cur ? cur.name : 'S\u00e9lectionner un mod\u00e8le'), h("svg", { key: '19dadd4c8fe6ad05288aa753c095e8eef896e5de', class: { 'tg-ms__chev': true, 'tg-ms__chev--open': this.open }, viewBox: "0 0 20 20", fill: "currentColor", width: "14", height: "14" }, h("path", { key: '7c3ee88b2ae95fcdc4ba9769033d92fbdb2b7dd4', "fill-rule": "evenodd", d: "M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" }))), this.open && (h("div", { key: '328b12c238fdf9806d30e841a3ff7517fee2488e', class: "tg-ms__dropdown" }, this.parsed.map(m => (h("button", { class: { 'tg-ms__option': true, 'tg-ms__option--sel': m.id === this.value }, type: "button", onClick: () => { this.tgChange.emit(m.id); this.open = false; } }, h("div", { class: "tg-ms__opt-main" }, h("span", { class: "tg-ms__opt-name" }, m.name), m.badge && h("span", { class: "tg-ms__opt-badge" }, m.badge)), m.provider && h("span", { class: "tg-ms__opt-provider" }, m.provider), m.description && h("span", { class: "tg-ms__opt-desc" }, m.description)))))))));
+    }
+    static get is() { return "tg-model-selector"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-model-selector.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-model-selector.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "models": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | AIModel[]",
+                    "resolved": "AIModel[] | string",
+                    "references": {
+                        "AIModel": {
+                            "location": "local",
+                            "path": "/Users/mahykane/work/Teranga-Design-Systems/packages/components/src/components/tg-model-selector/tg-model-selector.tsx",
+                            "id": "src/components/tg-model-selector/tg-model-selector.tsx::AIModel"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "models",
+                "defaultValue": "[]"
+            },
+            "value": {
+                "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": "value"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "open": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tgChange",
+                "name": "tgChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "onDocClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/tg-multi-select/tg-multi-select.css

@@ -0,0 +1,22 @@
+:host { display: block; }
+.tg-multi-select { position: relative; font-family: var(--tg-font-family-sans); }
+.tg-multi-select__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-1-5); }
+.tg-multi-select__trigger { display: flex; align-items: center; min-height: 2.5rem; padding: var(--tg-spacing-1) var(--tg-spacing-2); border: 1px solid var(--tg-color-border-strong); border-radius: var(--tg-radius-lg); background: var(--tg-color-surface-raised); cursor: pointer; transition: border-color var(--tg-duration-fast), box-shadow var(--tg-duration-fast); }
+.tg-multi-select__trigger:focus-within { border-color: var(--tg-color-border-focus); box-shadow: var(--tg-focus-ring); }
+.tg-multi-select__trigger--invalid { border-color: var(--tg-color-danger); }
+.tg-multi-select__tags { display: flex; flex-wrap: wrap; gap: var(--tg-spacing-1); flex: 1; }
+.tg-multi-select__tag { display: inline-flex; align-items: center; gap: var(--tg-spacing-1); padding: 2px var(--tg-spacing-2); background: var(--tg-color-primary-subtle); color: var(--tg-color-primary); border-radius: var(--tg-radius-full); font-size: var(--tg-font-size-xs); font-weight: var(--tg-font-weight-medium); }
+.tg-multi-select__tag-x { background: none; border: none; cursor: pointer; color: inherit; font-size: 1rem; line-height: 1; padding: 0; opacity: 0.6; }
+.tg-multi-select__tag-x:hover { opacity: 1; }
+.tg-multi-select__placeholder { color: var(--tg-color-text-disabled); font-size: var(--tg-font-size-sm); padding: var(--tg-spacing-0-5) 0; }
+.tg-multi-select__chevron { flex-shrink: 0; color: var(--tg-color-text-secondary); transition: transform var(--tg-duration-fast); }
+.tg-multi-select__chevron--open { transform: rotate(180deg); }
+.tg-multi-select__dropdown { position: absolute; top: 100%; left: 0; right: 0; margin-top: var(--tg-spacing-1); background: var(--tg-color-surface-raised); border: 1px solid var(--tg-color-border); border-radius: var(--tg-radius-lg); box-shadow: var(--tg-shadow-lg); z-index: 1000; animation: tg-ms-enter var(--tg-duration-fast) var(--tg-ease-out); }
+@keyframes tg-ms-enter { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
+.tg-multi-select__search { display: block; width: 100%; padding: var(--tg-spacing-2) var(--tg-spacing-3); border: none; border-bottom: 1px solid var(--tg-color-border); outline: none; font-family: inherit; font-size: var(--tg-font-size-sm); background: transparent; color: var(--tg-color-text-primary); }
+.tg-multi-select__search::placeholder { color: var(--tg-color-text-disabled); }
+.tg-multi-select__list { list-style: none; padding: var(--tg-spacing-1) 0; margin: 0; max-height: 14rem; overflow-y: auto; }
+.tg-multi-select__option { display: flex; align-items: center; gap: var(--tg-spacing-2); padding: var(--tg-spacing-2) var(--tg-spacing-3); font-size: var(--tg-font-size-sm); cursor: pointer; transition: background var(--tg-duration-fast); }
+.tg-multi-select__option:hover { background: var(--tg-color-primary-subtle); }
+.tg-multi-select__option--selected { color: var(--tg-color-primary); font-weight: var(--tg-font-weight-medium); }
+.tg-multi-select__check { width: 1rem; text-align: center; color: var(--tg-color-primary); }

package/dist/collection/components/tg-multi-select/tg-multi-select.js

@@ -0,0 +1,251 @@
+import { h, Host } from "@stencil/core";
+export class TgMultiSelect {
+    constructor() {
+        this.placeholder = 'Sélectionner…';
+        this.options = [];
+        this.value = [];
+        this.disabled = false;
+        this.invalid = false;
+        this.size = 'md';
+        this.open = false;
+        this.query = '';
+    }
+    get parsed() {
+        if (typeof this.options === 'string') {
+            try {
+                return JSON.parse(this.options);
+            }
+            catch (_a) {
+                return [];
+            }
+        }
+        return this.options;
+    }
+    get selected() {
+        if (typeof this.value === 'string') {
+            try {
+                return JSON.parse(this.value);
+            }
+            catch (_a) {
+                return [];
+            }
+        }
+        return this.value;
+    }
+    get filtered() { const q = this.query.toLowerCase(); return q ? this.parsed.filter(o => o.label.toLowerCase().includes(q)) : this.parsed; }
+    handleDocClick() { this.open = false; }
+    toggle(val) {
+        const sel = [...this.selected];
+        const idx = sel.indexOf(val);
+        if (idx >= 0)
+            sel.splice(idx, 1);
+        else
+            sel.push(val);
+        this.tgChange.emit(sel);
+    }
+    removeTag(val, e) { e.stopPropagation(); this.toggle(val); }
+    render() {
+        const sel = this.selected;
+        return (h(Host, { key: '548bf9ea41d5fa1ff51d869b148a179cc501bb96' }, h("div", { key: '8988934df274adf78ba6f4f752000778bbe97fb6', class: `tg-multi-select tg-multi-select--${this.size}`, onClick: (e) => e.stopPropagation() }, this.label && h("label", { key: 'e989f8e6c2b88e88799611f90b0e44147f7c1572', class: "tg-multi-select__label" }, this.label), h("div", { key: '9406b5553070f26d382c1616ae1c57d54fb3b901', class: { 'tg-multi-select__trigger': true, 'tg-multi-select__trigger--invalid': this.invalid }, onClick: () => {
+                if (!this.disabled)
+                    this.open = !this.open;
+            } }, h("div", { key: '52cb0629e1cad93a658f5c8424fc61f7c45a7e45', class: "tg-multi-select__tags" }, sel.map(v => {
+            const opt = this.parsed.find(o => o.value === v);
+            return opt ? h("span", { class: "tg-multi-select__tag" }, opt.label, h("button", { class: "tg-multi-select__tag-x", onClick: (e) => this.removeTag(v, e), "aria-label": "Remove" }, "\u00D7")) : null;
+        }), sel.length === 0 && h("span", { key: 'e3a3199568660cf137342296c60469a6c1462091', class: "tg-multi-select__placeholder" }, this.placeholder)), h("svg", { key: '77d039d5e8b7855cd6ebbc8eac77f58116c047b7', class: { 'tg-multi-select__chevron': true, 'tg-multi-select__chevron--open': this.open }, viewBox: "0 0 20 20", fill: "currentColor", width: "16", height: "16" }, h("path", { key: 'd131d4a08a08b3467d1c5f858fe9f01694b91634', "fill-rule": "evenodd", d: "M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" }))), this.open && (h("div", { key: 'e1657df38bdd49fa56374c431b8067d91e2ba1e6', class: "tg-multi-select__dropdown" }, h("input", { key: '856b4e1c81e9e4d163de7c9ef6755f90cf2a51cd', class: "tg-multi-select__search", type: "text", placeholder: "Filtrer\u2026", value: this.query, onInput: (e) => { this.query = e.target.value; } }), h("ul", { key: '46524a4605e630187654060e8073e8d38159d536', class: "tg-multi-select__list", role: "listbox" }, this.filtered.map(opt => (h("li", { class: { 'tg-multi-select__option': true, 'tg-multi-select__option--selected': sel.includes(opt.value) }, role: "option", onClick: () => this.toggle(opt.value) }, h("span", { class: "tg-multi-select__check" }, sel.includes(opt.value) ? '✓' : ''), opt.label)))))))));
+    }
+    static get is() { return "tg-multi-select"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-multi-select.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-multi-select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "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"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'S\u00E9lectionner\u2026'"
+            },
+            "options": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | MultiSelectOption[]",
+                    "resolved": "MultiSelectOption[] | string",
+                    "references": {
+                        "MultiSelectOption": {
+                            "location": "local",
+                            "path": "/Users/mahykane/work/Teranga-Design-Systems/packages/components/src/components/tg-multi-select/tg-multi-select.tsx",
+                            "id": "src/components/tg-multi-select/tg-multi-select.tsx::MultiSelectOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "options",
+                "defaultValue": "[]"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "[]"
+            },
+            "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"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "open": {},
+            "query": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tgChange",
+                "name": "tgChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                }
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleDocClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

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

@@ -0,0 +1,144 @@
+:host {
+  display: block;
+}
+
+.tg-navbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--tg-spacing-lg, 24px);
+  height: 64px;
+  background: var(--tg-color-surface, #fff);
+  border-bottom: 1px solid var(--tg-color-neutral-100, #f3f4f6);
+  font-family: var(--tg-font-family, sans-serif);
+  position: relative;
+  z-index: 100;
+}
+
+.tg-navbar--sticky {
+  position: sticky;
+  top: 0;
+  backdrop-filter: blur(12px);
+  background: rgba(255, 255, 255, 0.85);
+}
+
+.tg-navbar--bordered {
+  box-shadow: var(--tg-shadow-sm, 0 1px 3px rgba(0,0,0,0.08));
+}
+
+/* Brand */
+.tg-navbar__brand {
+  display: flex;
+  align-items: center;
+  gap: var(--tg-spacing-sm, 12px);
+  text-decoration: none;
+  color: var(--tg-color-text, #111827);
+  font-weight: var(--tg-font-weight-bold, 700);
+  font-size: var(--tg-font-size-lg, 1.125rem);
+  flex-shrink: 0;
+}
+
+.tg-navbar__brand:focus-visible {
+  outline: none;
+  box-shadow: var(--tg-focus-ring);
+  border-radius: var(--tg-radius-sm, 4px);
+}
+
+/* Logo */
+.tg-navbar__logo {
+  height: 32px;
+  width: auto;
+}
+
+/* Navigation links */
+.tg-navbar__nav {
+  display: flex;
+  align-items: center;
+  gap: var(--tg-spacing-2xs, 4px);
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.tg-navbar__link {
+  color: var(--tg-color-text-secondary, #6b7280);
+  text-decoration: none;
+  font-size: var(--tg-font-size-sm, 0.8125rem);
+  font-weight: var(--tg-font-weight-medium, 500);
+  padding: var(--tg-spacing-xs, 8px) var(--tg-spacing-sm, 12px);
+  border-radius: var(--tg-radius-md, 8px);
+  transition: color var(--tg-duration-fast, 150ms), background var(--tg-duration-fast, 150ms);
+}
+
+.tg-navbar__link:hover {
+  color: var(--tg-color-text, #111827);
+  background: var(--tg-color-neutral-50, #f9fafb);
+}
+
+.tg-navbar__link--active {
+  color: var(--tg-color-primary, #00853F);
+  background: var(--tg-color-primary-50, #ecfdf5);
+}
+
+.tg-navbar__link:focus-visible {
+  outline: none;
+  box-shadow: var(--tg-focus-ring);
+}
+
+/* Actions */
+.tg-navbar__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--tg-spacing-xs, 8px);
+  flex-shrink: 0;
+}
+
+/* Mobile toggle */
+.tg-navbar__toggle {
+  appearance: none;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  padding: var(--tg-spacing-xs, 8px);
+  border-radius: var(--tg-radius-md, 8px);
+  color: var(--tg-color-text, #111827);
+  display: none;
+}
+
+.tg-navbar__toggle svg {
+  width: 24px;
+  height: 24px;
+}
+
+.tg-navbar__toggle:focus-visible {
+  outline: none;
+  box-shadow: var(--tg-focus-ring);
+}
+
+/* Mobile menu */
+.tg-navbar__mobile-menu {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: var(--tg-color-surface, #fff);
+  border-bottom: 1px solid var(--tg-color-neutral-100, #f3f4f6);
+  box-shadow: var(--tg-shadow-lg, 0 10px 30px rgba(0,0,0,0.1));
+  padding: var(--tg-spacing-sm, 12px);
+  flex-direction: column;
+}
+
+.tg-navbar__mobile-menu--open {
+  display: flex;
+}
+
+.tg-navbar__mobile-menu .tg-navbar__link {
+  width: 100%;
+  display: block;
+}
+
+@media (max-width: 768px) {
+  .tg-navbar__nav { display: none; }
+  .tg-navbar__toggle { display: flex; }
+}