@teranga-ds/components 0.1.0

package/dist/collection/components/tg-token-usage/tg-token-usage.js

@@ -0,0 +1,129 @@
+import { h, Host } from "@stencil/core";
+export class TgTokenUsage {
+    constructor() {
+        this.promptTokens = 0;
+        this.completionTokens = 0;
+        this.maxTokens = 4096;
+        this.compact = false;
+    }
+    get total() { return this.promptTokens + this.completionTokens; }
+    get pct() { return (this.total / this.maxTokens) * 100; }
+    render() {
+        return (h(Host, { key: 'ce0670ef0eb3cc61d04706f9c930db7584a1c970' }, h("div", { key: 'e8037942f8c57a2cf9a5e1d8724cfb06a306b93d', class: { 'tg-tu': true, 'tg-tu--compact': this.compact } }, h("div", { key: '27f3af584a7582fd4b21173cc467944d3747022e', class: "tg-tu__bar" }, h("div", { key: 'dadf017849e681688764c29241425f58e3bc6f2e', class: "tg-tu__segment tg-tu__segment--prompt", style: { width: (this.promptTokens / this.maxTokens * 100) + '%' } }), h("div", { key: '58b5ed73602fa5af342a4f74f549796bbcd6312c', class: "tg-tu__segment tg-tu__segment--completion", style: { width: (this.completionTokens / this.maxTokens * 100) + '%' } })), h("div", { key: 'df6f1b6d5207485898dd4f046a4c4ba7de0e4f85', class: "tg-tu__info" }, h("span", { key: 'c6a10c9839881ce2c15b15a35aa1558afd1212bc', class: "tg-tu__stat" }, h("span", { key: '36d81b57a12a15a80f41feb794df3d477c1d5cd5', class: "tg-tu__dot tg-tu__dot--prompt" }), " Prompt: ", this.promptTokens), h("span", { key: 'ca65c496ee27ee00c90e914d8a2952130e723097', class: "tg-tu__stat" }, h("span", { key: '0fddc113c73fdc51189e71cef6eb2f9832de0e82', class: "tg-tu__dot tg-tu__dot--completion" }), " Compl\\u00e9tion: ", this.completionTokens), h("span", { key: 'f806e3e0450d8259f6f9f7e398c1e7d86cc07a07', class: "tg-tu__total" }, this.total, " / ", this.maxTokens, " (", Math.round(this.pct), "%)"), this.cost && h("span", { key: '076bece91ad867b3ed3e5afdaa4f94eb3405873c', class: "tg-tu__cost" }, this.cost)))));
+    }
+    static get is() { return "tg-token-usage"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-token-usage.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-token-usage.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "promptTokens": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "prompt-tokens",
+                "defaultValue": "0"
+            },
+            "completionTokens": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "completion-tokens",
+                "defaultValue": "0"
+            },
+            "maxTokens": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-tokens",
+                "defaultValue": "4096"
+            },
+            "cost": {
+                "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": "cost"
+            },
+            "compact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "compact",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,93 @@
+/* ============================================================
+   tg-tooltip — Teranga Design System
+   ============================================================ */
+
+:host {
+  display: inline-flex;
+  position: relative;
+}
+
+.tg-tooltip__trigger {
+  display: inline-flex;
+}
+
+.tg-tooltip__content {
+  position: absolute;
+  z-index: 1600;
+  padding: var(--tg-spacing-1-5) var(--tg-spacing-2-5);
+  font-family: var(--tg-font-family-sans);
+  font-size: var(--tg-font-size-xs);
+  font-weight: var(--tg-font-weight-medium);
+  line-height: var(--tg-line-height-snug);
+  color: var(--tg-color-neutral-0);
+  background: var(--tg-color-neutral-800);
+  border-radius: var(--tg-radius-md);
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transform: scale(0.95);
+  transition: opacity var(--tg-duration-fast) var(--tg-ease-out),
+              transform var(--tg-duration-fast) var(--tg-ease-out);
+  box-shadow: var(--tg-shadow-md);
+}
+
+.tg-tooltip__content--visible {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* Positions */
+.tg-tooltip__content--top {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%) scale(0.95);
+  margin-bottom: var(--tg-spacing-1-5);
+}
+.tg-tooltip__content--top.tg-tooltip__content--visible {
+  transform: translateX(-50%) scale(1);
+}
+
+.tg-tooltip__content--bottom {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%) scale(0.95);
+  margin-top: var(--tg-spacing-1-5);
+}
+.tg-tooltip__content--bottom.tg-tooltip__content--visible {
+  transform: translateX(-50%) scale(1);
+}
+
+.tg-tooltip__content--left {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%) scale(0.95);
+  margin-right: var(--tg-spacing-1-5);
+}
+.tg-tooltip__content--left.tg-tooltip__content--visible {
+  transform: translateY(-50%) scale(1);
+}
+
+.tg-tooltip__content--right {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%) scale(0.95);
+  margin-left: var(--tg-spacing-1-5);
+}
+.tg-tooltip__content--right.tg-tooltip__content--visible {
+  transform: translateY(-50%) scale(1);
+}
+
+/* Arrow */
+.tg-tooltip__content::after {
+  content: '';
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  background: var(--tg-color-neutral-800);
+  transform: rotate(45deg);
+}
+
+.tg-tooltip__content--top::after    { bottom: -3px; left: 50%; margin-left: -3px; }
+.tg-tooltip__content--bottom::after { top: -3px; left: 50%; margin-left: -3px; }
+.tg-tooltip__content--left::after   { right: -3px; top: 50%; margin-top: -3px; }
+.tg-tooltip__content--right::after  { left: -3px; top: 50%; margin-top: -3px; }

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

@@ -0,0 +1,104 @@
+import { h, Host } from "@stencil/core";
+export class TgTooltip {
+    constructor() {
+        this.text = '';
+        this.position = 'top';
+        this.delay = 200;
+        this.visible = false;
+        this.show = () => {
+            this.showTimeout = setTimeout(() => { this.visible = true; }, this.delay);
+        };
+        this.hide = () => {
+            clearTimeout(this.showTimeout);
+            this.visible = false;
+        };
+    }
+    render() {
+        return (h(Host, { key: '49be9dbde614486e03430b933d2381127bd4c3fd', onMouseEnter: this.show, onMouseLeave: this.hide, onFocusin: this.show, onFocusout: this.hide }, h("span", { key: '52f041f387a611de25dfc8362762dab68547b0c8', class: "tg-tooltip__trigger" }, h("slot", { key: 'ecf1fa7b4498714dbf063266baa3f4ea3bca8f52' })), this.text && (h("span", { key: '1662fd98d6fd38d04caa678c674ab97a936b18ab', class: {
+                'tg-tooltip__content': true,
+                [`tg-tooltip__content--${this.position}`]: true,
+                'tg-tooltip__content--visible': this.visible,
+            }, role: "tooltip" }, this.text))));
+    }
+    static get is() { return "tg-tooltip"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-tooltip.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-tooltip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text",
+                "defaultValue": "''"
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'top' | 'bottom' | 'left' | 'right'",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "position",
+                "defaultValue": "'top'"
+            },
+            "delay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "delay",
+                "defaultValue": "200"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "visible": {}
+        };
+    }
+}

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

@@ -0,0 +1,10 @@
+:host { display: block; }
+.tg-tree-view { font-family: var(--tg-font-family-sans); }
+.tg-tv__node { display: flex; align-items: center; gap: var(--tg-spacing-1); padding: var(--tg-spacing-1-5) var(--tg-spacing-2); cursor: pointer; border-radius: var(--tg-radius-md); font-size: var(--tg-font-size-sm); color: var(--tg-color-text-primary); transition: background var(--tg-duration-fast); user-select: none; }
+.tg-tv__node:hover { background: var(--tg-color-primary-subtle); }
+.tg-tv__node--sel { background: var(--tg-color-primary-subtle); color: var(--tg-color-primary); font-weight: var(--tg-font-weight-medium); }
+.tg-tv__arrow { display: flex; transition: transform var(--tg-duration-fast); color: var(--tg-color-text-secondary); }
+.tg-tv__arrow--expanded { transform: rotate(90deg); }
+.tg-tv__arrow--hidden { visibility: hidden; }
+.tg-tv__icon { font-size: 1rem; }
+.tg-tv__label { flex: 1; }

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

@@ -0,0 +1,112 @@
+import { h, Host } from "@stencil/core";
+export class TgTreeView {
+    constructor() {
+        this.data = [];
+        this.selectable = false;
+        this.expandedKeys = new Set();
+        this.selectedKey = '';
+    }
+    get parsed() {
+        if (typeof this.data === 'string') {
+            try {
+                return JSON.parse(this.data);
+            }
+            catch (_a) {
+                return [];
+            }
+        }
+        return this.data;
+    }
+    toggle(key) {
+        const s = new Set(this.expandedKeys);
+        if (s.has(key))
+            s.delete(key);
+        else
+            s.add(key);
+        this.expandedKeys = s;
+    }
+    renderNode(node, key, depth) {
+        const hasKids = node.children && node.children.length > 0;
+        const expanded = this.expandedKeys.has(key);
+        return [
+            h("div", { class: { 'tg-tv__node': true, 'tg-tv__node--sel': this.selectedKey === key }, style: { paddingLeft: (depth * 1.25) + 'rem' }, onClick: () => {
+                    if (hasKids)
+                        this.toggle(key);
+                    if (this.selectable)
+                        this.selectedKey = key;
+                } }, h("span", { class: { 'tg-tv__arrow': true, 'tg-tv__arrow--expanded': expanded, 'tg-tv__arrow--hidden': !hasKids } }, h("svg", { viewBox: "0 0 16 16", fill: "currentColor", width: "12", height: "12" }, h("path", { d: "M6 4l4 4-4 4z" }))), node.icon && h("span", { class: "tg-tv__icon" }, node.icon), h("span", { class: "tg-tv__label" }, node.label)),
+            hasKids && expanded && node.children.map((child, i) => this.renderNode(child, key + '-' + i, depth + 1))
+        ];
+    }
+    render() {
+        return (h(Host, { key: 'c80aaea69704113b373305ea6149c344ea155406' }, h("div", { key: 'da6c72d703622634d462d1ef21ec071d60e7c53e', class: "tg-tree-view" }, this.parsed.map((n, i) => this.renderNode(n, String(i), 0)))));
+    }
+    static get is() { return "tg-tree-view"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-tree-view.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-tree-view.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "data": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | TreeNode[]",
+                    "resolved": "TreeNode[] | string",
+                    "references": {
+                        "TreeNode": {
+                            "location": "local",
+                            "path": "/Users/mahykane/work/Teranga-Design-Systems/packages/components/src/components/tg-tree-view/tg-tree-view.tsx",
+                            "id": "src/components/tg-tree-view/tg-tree-view.tsx::TreeNode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "data",
+                "defaultValue": "[]"
+            },
+            "selectable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selectable",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "expandedKeys": {},
+            "selectedKey": {}
+        };
+    }
+}

package/dist/collection/components/tg-undo-snackbar/tg-undo-snackbar.css

@@ -0,0 +1,8 @@
+:host { display: block; position: fixed; bottom: var(--tg-spacing-4); left: 50%; transform: translateX(-50%); z-index: 10000; }
+.tg-us { display: flex; align-items: center; gap: var(--tg-spacing-3); padding: var(--tg-spacing-3) var(--tg-spacing-4); background: var(--tg-color-neutral-900); color: white; border-radius: var(--tg-radius-lg); box-shadow: var(--tg-shadow-xl); font-family: var(--tg-font-family-sans); animation: tg-us-in 0.2s var(--tg-ease-out); }
+@keyframes tg-us-in { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: translateY(0); } }
+.tg-us__msg { font-size: var(--tg-font-size-sm); }
+.tg-us__undo { background: none; border: none; color: var(--tg-color-primary, #4ade80); font-weight: var(--tg-font-weight-semibold); font-size: var(--tg-font-size-sm); cursor: pointer; text-transform: uppercase; letter-spacing: var(--tg-tracking-wide); }
+.tg-us__undo:hover { text-decoration: underline; }
+.tg-us__close { background: none; border: none; color: rgba(255,255,255,0.6); font-size: 1.25rem; cursor: pointer; padding: 0; line-height: 1; }
+.tg-us__close:hover { color: white; }

package/dist/collection/components/tg-undo-snackbar/tg-undo-snackbar.js

@@ -0,0 +1,148 @@
+import { h, Host } from "@stencil/core";
+export class TgUndoSnackbar {
+    constructor() {
+        this.message = '';
+        this.open = false;
+        this.undoLabel = 'Annuler';
+        this.duration = 5000;
+    }
+    componentDidUpdate() {
+        if (this.open && this.duration > 0) {
+            setTimeout(() => this.tgDismiss.emit(), this.duration);
+        }
+    }
+    render() {
+        if (!this.open)
+            return h(Host, null);
+        return (h(Host, null, h("div", { class: "tg-us" }, h("span", { class: "tg-us__msg" }, this.message), h("button", { class: "tg-us__undo", type: "button", onClick: () => this.tgUndo.emit() }, this.undoLabel), h("button", { class: "tg-us__close", type: "button", "aria-label": "Close", onClick: () => this.tgDismiss.emit() }, "\\u00d7"))));
+    }
+    static get is() { return "tg-undo-snackbar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-undo-snackbar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-undo-snackbar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "message",
+                "defaultValue": "''"
+            },
+            "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"
+            },
+            "undoLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "undo-label",
+                "defaultValue": "'Annuler'"
+            },
+            "duration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "duration",
+                "defaultValue": "5000"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tgUndo",
+                "name": "tgUndo",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "tgDismiss",
+                "name": "tgDismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/tg-video-player/tg-video-player.css

@@ -0,0 +1,6 @@
+:host { display: block; }
+.tg-vp { font-family: var(--tg-font-family-sans); border: 1px solid var(--tg-color-border); border-radius: var(--tg-radius-xl); overflow: hidden; background: var(--tg-color-neutral-900); }
+.tg-vp__header { padding: var(--tg-spacing-2) var(--tg-spacing-3); background: var(--tg-color-surface-raised); border-bottom: 1px solid var(--tg-color-border); }
+.tg-vp__title { font-size: var(--tg-font-size-sm); font-weight: var(--tg-font-weight-medium); color: var(--tg-color-text-primary); }
+.tg-vp__container { position: relative; width: 100%; }
+.tg-vp__video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }