@teranga-ds/components 0.1.0

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

@@ -0,0 +1,80 @@
+import { h, Host } from "@stencil/core";
+export class TgPresenceIndicator {
+    constructor() {
+        this.users = [];
+        this.max = 5;
+    }
+    get parsed() {
+        if (typeof this.users === 'string') {
+            try {
+                return JSON.parse(this.users);
+            }
+            catch (_a) {
+                return [];
+            }
+        }
+        return this.users;
+    }
+    render() {
+        const users = this.parsed;
+        const shown = users.slice(0, this.max);
+        const overflow = users.length - this.max;
+        return (h(Host, { key: '0b487e480aa59c5a4ad54397272708545548507d' }, h("div", { key: 'cea81db6a79f714de8059cf0d3b13193c131befa', class: "tg-pi" }, shown.map((u) => (h("div", { class: "tg-pi__user", title: u.name }, h("div", { class: "tg-pi__avatar" }, u.avatar || u.name.charAt(0).toUpperCase()), h("span", { class: 'tg-pi__status tg-pi__status--' + (u.status || 'online') })))), overflow > 0 && h("div", { key: 'b33de0b416fb70e108813b0a988e67781a81c510', class: "tg-pi__more" }, "+", overflow))));
+    }
+    static get is() { return "tg-presence-indicator"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-presence-indicator.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-presence-indicator.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "users": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | { name: string; avatar?: string; status?: 'online'|'away'|'busy'; }[]",
+                    "resolved": "string | { name: string; avatar?: string; status?: \"online\" | \"busy\" | \"away\"; }[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "users",
+                "defaultValue": "[]"
+            },
+            "max": {
+                "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",
+                "defaultValue": "5"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,142 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.tg-progress {
+  display: flex;
+  flex-direction: column;
+  gap: var(--tg-spacing-xs, 8px);
+}
+
+.tg-progress__label-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-family: var(--tg-font-family, sans-serif);
+  font-size: var(--tg-font-size-sm, 0.8125rem);
+  color: var(--tg-color-text, #111827);
+}
+
+.tg-progress__label {
+  font-weight: var(--tg-font-weight-medium, 500);
+}
+
+.tg-progress__value {
+  color: var(--tg-color-text-secondary, #6b7280);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Track */
+.tg-progress__track {
+  width: 100%;
+  border-radius: 9999px;
+  background: var(--tg-color-neutral-100, #f3f4f6);
+  overflow: hidden;
+}
+
+.tg-progress__track--sm { height: 4px; }
+.tg-progress__track--md { height: 8px; }
+.tg-progress__track--lg { height: 12px; }
+
+/* Bar */
+.tg-progress__bar {
+  height: 100%;
+  border-radius: 9999px;
+  transition: width var(--tg-duration-normal, 200ms) var(--tg-ease-out, ease-out);
+  position: relative;
+  overflow: hidden;
+}
+
+/* Variants */
+.tg-progress__bar--primary { background: var(--tg-color-primary, #00853F); }
+.tg-progress__bar--success { background: var(--tg-color-success, #059669); }
+.tg-progress__bar--warning { background: var(--tg-color-warning, #d97706); }
+.tg-progress__bar--danger { background: var(--tg-color-danger, #dc2626); }
+.tg-progress__bar--info { background: var(--tg-color-info, #2563eb); }
+
+/* Indeterminate shimmer */
+.tg-progress__bar--indeterminate {
+  width: 40% !important;
+  animation: tg-progress-indeterminate 1.5s var(--tg-ease-default, ease) infinite;
+}
+
+@keyframes tg-progress-indeterminate {
+  0%   { transform: translateX(-100%); }
+  100% { transform: translateX(350%); }
+}
+
+/* Striped */
+.tg-progress__bar--striped::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-image: linear-gradient(
+    45deg,
+    rgba(255,255,255,0.15) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255,255,255,0.15) 50%,
+    rgba(255,255,255,0.15) 75%,
+    transparent 75%,
+    transparent
+  );
+  background-size: 1rem 1rem;
+}
+
+.tg-progress__bar--animated::after {
+  animation: tg-progress-stripe 1s linear infinite;
+}
+
+@keyframes tg-progress-stripe {
+  0% { background-position: 1rem 0; }
+  100% { background-position: 0 0; }
+}
+
+/* Circular progress */
+.tg-progress-circle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.tg-progress-circle svg {
+  transform: rotate(-90deg);
+}
+
+.tg-progress-circle__track {
+  fill: none;
+  stroke: var(--tg-color-neutral-100, #f3f4f6);
+}
+
+.tg-progress-circle__bar {
+  fill: none;
+  stroke-linecap: round;
+  transition: stroke-dashoffset var(--tg-duration-normal, 200ms) var(--tg-ease-out, ease-out);
+}
+
+.tg-progress-circle__bar--primary { stroke: var(--tg-color-primary, #00853F); }
+.tg-progress-circle__bar--success { stroke: var(--tg-color-success, #059669); }
+.tg-progress-circle__bar--warning { stroke: var(--tg-color-warning, #d97706); }
+.tg-progress-circle__bar--danger  { stroke: var(--tg-color-danger, #dc2626); }
+.tg-progress-circle__bar--info    { stroke: var(--tg-color-info, #2563eb); }
+
+.tg-progress-circle__bar--indeterminate {
+  animation: tg-progress-circle-spin 1.4s linear infinite;
+  stroke-dasharray: 80 200;
+}
+
+@keyframes tg-progress-circle-spin {
+  0%   { stroke-dashoffset: 0; transform: rotate(-90deg); }
+  50%  { stroke-dashoffset: -80; transform: rotate(90deg); }
+  100% { stroke-dashoffset: -200; transform: rotate(270deg); }
+}
+
+.tg-progress-circle__label {
+  position: absolute;
+  font-family: var(--tg-font-family, sans-serif);
+  font-weight: var(--tg-font-weight-semibold, 600);
+  color: var(--tg-color-text, #111827);
+  font-variant-numeric: tabular-nums;
+}

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

@@ -0,0 +1,299 @@
+import { h, Host } from "@stencil/core";
+export class TgProgress {
+    constructor() {
+        this.value = 0;
+        this.max = 100;
+        this.showValue = false;
+        this.variant = 'primary';
+        this.size = 'md';
+        this.indeterminate = false;
+        this.striped = false;
+        this.animated = false;
+        this.circular = false;
+        this.circularSize = 48;
+        this.strokeWidth = 4;
+    }
+    get pct() {
+        return this.indeterminate ? 0 : Math.min(100, Math.max(0, (this.value / this.max) * 100));
+    }
+    renderLinear() {
+        var _a;
+        return (h("div", { class: "tg-progress" }, (this.label || this.showValue) && (h("div", { class: "tg-progress__label-row" }, this.label && h("span", { class: "tg-progress__label" }, this.label), this.showValue && !this.indeterminate && (h("span", { class: "tg-progress__value" }, Math.round(this.pct), "%")))), h("div", Object.assign({ class: `tg-progress__track tg-progress__track--${this.size}`, role: "progressbar" }, (this.indeterminate ? {} : { 'aria-valuenow': this.value }), { "aria-valuemin": 0, "aria-valuemax": this.max, "aria-label": (_a = this.label) !== null && _a !== void 0 ? _a : 'Progression' }), h("div", { class: {
+                'tg-progress__bar': true,
+                [`tg-progress__bar--${this.variant}`]: true,
+                'tg-progress__bar--indeterminate': this.indeterminate,
+                'tg-progress__bar--striped': this.striped,
+                'tg-progress__bar--animated': this.animated,
+            }, style: this.indeterminate ? {} : { width: `${this.pct}%` } }))));
+    }
+    renderCircular() {
+        var _a;
+        const r = (this.circularSize - this.strokeWidth) / 2;
+        const c = 2 * Math.PI * r;
+        const offset = c - (this.pct / 100) * c;
+        const fontSize = this.circularSize * 0.28;
+        return (h("div", Object.assign({ class: "tg-progress-circle", role: "progressbar" }, (this.indeterminate ? {} : { 'aria-valuenow': this.value }), { "aria-valuemin": 0, "aria-valuemax": this.max, "aria-label": (_a = this.label) !== null && _a !== void 0 ? _a : 'Progression', style: { width: `${this.circularSize}px`, height: `${this.circularSize}px` } }), h("svg", { width: this.circularSize, height: this.circularSize }, h("circle", { class: "tg-progress-circle__track", cx: this.circularSize / 2, cy: this.circularSize / 2, r: r, "stroke-width": this.strokeWidth }), h("circle", Object.assign({ class: {
+                'tg-progress-circle__bar': true,
+                [`tg-progress-circle__bar--${this.variant}`]: true,
+                'tg-progress-circle__bar--indeterminate': this.indeterminate,
+            }, cx: this.circularSize / 2, cy: this.circularSize / 2, r: r, "stroke-width": this.strokeWidth, "stroke-dasharray": `${c}` }, (this.indeterminate ? {} : { 'stroke-dashoffset': `${offset}` })))), this.showValue && !this.indeterminate && (h("span", { class: "tg-progress-circle__label", style: { fontSize: `${fontSize}px` } }, Math.round(this.pct), "%"))));
+    }
+    render() {
+        return h(Host, { key: '545c912ac587f94ade050a356ea3aade15ea98a2' }, this.circular ? this.renderCircular() : this.renderLinear());
+    }
+    static get is() { return "tg-progress"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-progress.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-progress.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "0"
+            },
+            "max": {
+                "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",
+                "defaultValue": "100"
+            },
+            "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"
+            },
+            "showValue": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-value",
+                "defaultValue": "false"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'success' | 'warning' | 'danger' | 'info'",
+                    "resolved": "\"danger\" | \"info\" | \"primary\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'primary'"
+            },
+            "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'"
+            },
+            "indeterminate": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "indeterminate",
+                "defaultValue": "false"
+            },
+            "striped": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "striped",
+                "defaultValue": "false"
+            },
+            "animated": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "animated",
+                "defaultValue": "false"
+            },
+            "circular": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "circular",
+                "defaultValue": "false"
+            },
+            "circularSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "circular-size",
+                "defaultValue": "48"
+            },
+            "strokeWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "stroke-width",
+                "defaultValue": "4"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,11 @@
+:host { display: block; }
+.tg-pi { display: flex; align-items: flex-end; gap: var(--tg-spacing-2); padding: var(--tg-spacing-2); background: var(--tg-color-surface-raised); border: 1px solid var(--tg-color-border-strong); border-radius: var(--tg-radius-xl); transition: border-color var(--tg-duration-fast), box-shadow var(--tg-duration-fast); font-family: var(--tg-font-family-sans); position: relative; }
+.tg-pi:focus-within { border-color: var(--tg-color-border-focus); box-shadow: var(--tg-focus-ring); }
+.tg-pi__input { flex: 1; border: none; outline: none; background: transparent; font-family: inherit; font-size: var(--tg-font-size-sm); color: var(--tg-color-text-primary); resize: none; min-height: 1.5rem; max-height: 8rem; padding: var(--tg-spacing-1) var(--tg-spacing-2); }
+.tg-pi__input::placeholder { color: var(--tg-color-text-disabled); }
+.tg-pi__btn { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--tg-radius-lg); background: var(--tg-color-primary); color: var(--tg-color-primary-on); border: none; cursor: pointer; flex-shrink: 0; transition: filter var(--tg-duration-fast); }
+.tg-pi__btn:hover:not(:disabled) { filter: brightness(1.1); }
+.tg-pi__btn:disabled { opacity: 0.4; cursor: not-allowed; }
+.tg-pi__spinner { width: 1rem; height: 1rem; border: 2px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: tg-pi-spin 0.6s linear infinite; }
+@keyframes tg-pi-spin { to { transform: rotate(360deg); } }
+.tg-pi__counter { position: absolute; bottom: -1.25rem; right: var(--tg-spacing-2); font-size: var(--tg-font-size-xs); color: var(--tg-color-text-disabled); }

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

@@ -0,0 +1,142 @@
+import { h, Host } from "@stencil/core";
+export class TgPromptInput {
+    constructor() {
+        this.placeholder = 'Posez votre question\u2026';
+        this.disabled = false;
+        this.loading = false;
+        this.value = '';
+        this.handleSubmit = () => {
+            if (this.value.trim() && !this.loading) {
+                this.tgSubmit.emit(this.value.trim());
+                this.value = '';
+            }
+        };
+        this.handleKeyDown = (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                this.handleSubmit();
+            }
+        };
+    }
+    render() {
+        return (h(Host, { key: 'dffb2aefb0c36c2474ba3987a4f14e230b7de459' }, h("div", { key: 'baf0e378a4902e31f2e9ef53d7e8367e50a588db', class: "tg-pi" }, h("textarea", Object.assign({ key: '073a6f96bdac758f2d04d7f5c306f511439aefda', class: "tg-pi__input", placeholder: this.placeholder, value: this.value, disabled: this.disabled || this.loading }, (this.maxLength !== undefined ? { maxLength: this.maxLength } : {}), { rows: 1, onInput: (e) => { this.value = e.target.value; }, onKeyDown: this.handleKeyDown })), h("button", { key: 'd7e8015119fae3d3ca58f066f09e32ef75852598', class: "tg-pi__btn", type: "button", disabled: !this.value.trim() || this.loading, onClick: this.handleSubmit }, this.loading ? h("span", { class: "tg-pi__spinner" }) : h("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: "18", height: "18" }, h("path", { d: "M3.105 2.289a.75.75 0 00-.826.95l1.414 4.925A1.5 1.5 0 005.135 9.25H10.5a.75.75 0 010 1.5H5.135a1.5 1.5 0 00-1.442 1.086l-1.414 4.926a.75.75 0 00.826.95 28.896 28.896 0 0015.293-7.154.75.75 0 000-1.115A28.897 28.897 0 003.105 2.289z" }))), this.maxLength && h("span", { key: '5dd21e484d7a33de8f9f3f5a9d541ddf2ac8124b', class: "tg-pi__counter" }, this.value.length, "/", this.maxLength))));
+    }
+    static get is() { return "tg-prompt-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-prompt-input.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-prompt-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "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": "'Posez votre question\\u2026'"
+            },
+            "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"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "maxLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-length"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "value": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tgSubmit",
+                "name": "tgSubmit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/tg-pull-to-refresh/tg-pull-to-refresh.css

@@ -0,0 +1,7 @@
+:host { display: block; }
+.tg-ptr { overflow: hidden; }
+.tg-ptr__indicator { display: flex; align-items: center; justify-content: center; gap: var(--tg-spacing-2); overflow: hidden; font-family: var(--tg-font-family-sans); transition: height 0.2s; }
+.tg-ptr__spinner { width: 1.25rem; height: 1.25rem; border: 2px solid var(--tg-color-border); border-top-color: var(--tg-color-primary); border-radius: 50%; animation: tg-ptr-spin 0.6s linear infinite; }
+@keyframes tg-ptr-spin { to { transform: rotate(360deg); } }
+.tg-ptr__arrow { font-size: 1rem; color: var(--tg-color-text-secondary); transition: transform 0.2s; }
+.tg-ptr__label { font-size: var(--tg-font-size-xs); color: var(--tg-color-text-secondary); }