@teranga-ds/components 0.1.0

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

@@ -0,0 +1,101 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @component tg-spinner
+ * @description Animated loading indicator.
+ *
+ * @example
+ * <tg-spinner size="lg" label="Chargement en cours..."></tg-spinner>
+ */
+export class TgSpinner {
+    constructor() {
+        /** Size of the spinner */
+        this.size = 'md';
+        /** Color variant */
+        this.variant = 'primary';
+        /** Accessible label (rendered as visually hidden text) */
+        this.label = 'Chargement…';
+    }
+    render() {
+        return (h(Host, { key: 'a4dc53352ed1db875fa5a085ab915eb7ddf00cc0', role: "status", "aria-label": this.label }, h("span", { key: '2c277a9fbb6273d3b4f105bf12594ec52251fceb', class: {
+                'tg-spinner': true,
+                [`tg-spinner--${this.size}`]: true,
+                [`tg-spinner--${this.variant}`]: true,
+            }, "aria-hidden": "true" }, h("svg", { key: '7d36efbbf1bddbd3548f5255e08658787c87602e', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: 'faee23a3b5d702792b74e444509db41c77ea1075', cx: "12", cy: "12", r: "10", stroke: "currentColor", "stroke-width": "3", opacity: "0.2" }), h("path", { key: 'c32dae2064c0168f56d1f5b4fcebe7686f31bc48', d: "M12 2a10 10 0 0 1 10 10", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round" }))), h("span", { key: '9ba7bde08f66239156062d4a6f85de44d2317c7c', class: "tg-spinner__sr-only" }, this.label)));
+    }
+    static get is() { return "tg-spinner"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-spinner.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-spinner.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the spinner"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'danger' | 'neutral' | 'inherit'",
+                    "resolved": "\"danger\" | \"inherit\" | \"neutral\" | \"primary\" | \"secondary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'primary'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label (rendered as visually hidden text)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'Chargement\u2026'"
+            }
+        };
+    }
+}

package/dist/collection/components/tg-stat-widget/tg-stat-widget.css

@@ -0,0 +1,12 @@
+:host { display: block; }
+.tg-sw { display: flex; align-items: center; justify-content: space-between; font-family: var(--tg-font-family-sans); padding: var(--tg-spacing-4); background: var(--tg-color-surface-raised); border: 1px solid var(--tg-color-border); border-radius: var(--tg-radius-xl); }
+.tg-sw__left { display: flex; align-items: center; gap: var(--tg-spacing-3); }
+.tg-sw__icon { width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; background: var(--tg-color-primary-subtle); color: var(--tg-color-primary); border-radius: var(--tg-radius-lg); font-size: 1.25rem; }
+.tg-sw__label { margin: 0; font-size: var(--tg-font-size-xs); color: var(--tg-color-text-secondary); text-transform: uppercase; letter-spacing: var(--tg-tracking-wide); }
+.tg-sw__value { margin: var(--tg-spacing-0-5) 0 0; font-size: var(--tg-font-size-xl); font-weight: var(--tg-font-weight-bold); color: var(--tg-color-text-primary); }
+.tg-sw__change { display: inline-block; font-size: var(--tg-font-size-xs); font-weight: var(--tg-font-weight-medium); margin-top: var(--tg-spacing-0-5); }
+.tg-sw__change--positive { color: var(--tg-color-success); }
+.tg-sw__change--negative { color: var(--tg-color-danger); }
+.tg-sw__change--neutral { color: var(--tg-color-text-secondary); }
+.tg-sw__sparkline { max-width: 6rem; }
+.tg-sw__sparkline svg { width: 100%; height: auto; }

package/dist/collection/components/tg-stat-widget/tg-stat-widget.js

@@ -0,0 +1,142 @@
+import { h, Host } from "@stencil/core";
+export class TgStatWidget {
+    constructor() {
+        this.label = '';
+        this.value = '';
+    }
+    render() {
+        return (h(Host, { key: '71fe673531950d5e53e916b2bb1801827292516e' }, h("div", { key: '75e53ab1ad1507debedbb84b2d19a6918cb13b95', class: "tg-sw" }, h("div", { key: '1e7f20f0693a4e77a5b1bf04cd6548a9f0f1fddc', class: "tg-sw__left" }, this.icon && h("div", { key: 'ac6a63c455fde4c2af0cfd2d914112a352099022', class: "tg-sw__icon" }, this.icon), h("div", { key: 'e7cbdd4d17097e99c1a33325e0f91269353f12b1' }, h("p", { key: '27cfa751e84b303172482572cf03f3045d0591e4', class: "tg-sw__label" }, this.label), h("p", { key: '54287895545d5092097c4600210711a390cc35f4', class: "tg-sw__value" }, this.value), this.change && h("span", { key: '27bd9c3c40656cad9d1b05aa39e3b473b7e4effd', class: 'tg-sw__change tg-sw__change--' + (this.changeType || 'neutral') }, this.change))), this.sparkline && h("div", { key: '01a637b10a8bc7c5c11063bee3ab81d4b5ab9809', class: "tg-sw__sparkline", innerHTML: this.sparkline }))));
+    }
+    static get is() { return "tg-stat-widget"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-stat-widget.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-stat-widget.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "change": {
+                "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": "change"
+            },
+            "changeType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'positive' | 'negative' | 'neutral'",
+                    "resolved": "\"negative\" | \"neutral\" | \"positive\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "change-type"
+            },
+            "sparkline": {
+                "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": "sparkline"
+            },
+            "icon": {
+                "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": "icon"
+            }
+        };
+    }
+}

package/dist/collection/components/tg-status-badge/tg-status-badge.css

@@ -0,0 +1,24 @@
+:host { display: inline-flex; }
+.tg-sb { display: inline-flex; align-items: center; gap: var(--tg-spacing-1-5); padding: var(--tg-spacing-0-5) var(--tg-spacing-2); border-radius: var(--tg-radius-full); font-family: var(--tg-font-family-sans); font-weight: var(--tg-font-weight-medium); }
+.tg-sb--sm { font-size: var(--tg-font-size-xs); }
+.tg-sb--md { font-size: var(--tg-font-size-sm); }
+.tg-sb--lg { font-size: var(--tg-font-size-md); }
+.tg-sb__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex-shrink: 0; }
+.tg-sb__dot--pulse { animation: tg-pulse 2s ease-in-out infinite; }
+@keyframes tg-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
+.tg-sb--online { background: var(--tg-color-success-subtle); color: var(--tg-color-success); }
+.tg-sb--online .tg-sb__dot { background: var(--tg-color-success); }
+.tg-sb--offline { background: var(--tg-color-surface-sunken); color: var(--tg-color-text-secondary); }
+.tg-sb--offline .tg-sb__dot { background: var(--tg-color-text-disabled); }
+.tg-sb--busy { background: var(--tg-color-danger-subtle); color: var(--tg-color-danger); }
+.tg-sb--busy .tg-sb__dot { background: var(--tg-color-danger); }
+.tg-sb--away { background: var(--tg-color-warning-subtle); color: var(--tg-color-warning); }
+.tg-sb--away .tg-sb__dot { background: var(--tg-color-warning); }
+.tg-sb--error { background: var(--tg-color-danger-subtle); color: var(--tg-color-danger); }
+.tg-sb--error .tg-sb__dot { background: var(--tg-color-danger); }
+.tg-sb--success { background: var(--tg-color-success-subtle); color: var(--tg-color-success); }
+.tg-sb--success .tg-sb__dot { background: var(--tg-color-success); }
+.tg-sb--warning { background: var(--tg-color-warning-subtle); color: var(--tg-color-warning); }
+.tg-sb--warning .tg-sb__dot { background: var(--tg-color-warning); }
+.tg-sb--pending { background: var(--tg-color-info-subtle); color: var(--tg-color-info); }
+.tg-sb--pending .tg-sb__dot { background: var(--tg-color-info); }

package/dist/collection/components/tg-status-badge/tg-status-badge.js

@@ -0,0 +1,108 @@
+import { h, Host } from "@stencil/core";
+export class TgStatusBadge {
+    constructor() {
+        this.label = '';
+        this.status = 'online';
+        this.pulse = false;
+        this.size = 'md';
+    }
+    render() {
+        return (h(Host, { key: '6017007b53e67c1f04a07db9aebd87d06055ed34' }, h("span", { key: '484781a875e6d2dfba37d4bec0d327f95ccf1e4f', class: 'tg-sb tg-sb--' + this.status + ' tg-sb--' + this.size }, h("span", { key: 'a4da826874b889566f46bedb5957119a9f3cf0dc', class: { 'tg-sb__dot': true, 'tg-sb__dot--pulse': this.pulse } }), h("span", { key: '519e56385ef0bd4ae36d77fb0a4428f3914f121e', class: "tg-sb__label" }, this.label))));
+    }
+    static get is() { return "tg-status-badge"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-status-badge.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-status-badge.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'online' | 'offline' | 'busy' | 'away' | 'error' | 'success' | 'warning' | 'pending'",
+                    "resolved": "\"away\" | \"busy\" | \"error\" | \"offline\" | \"online\" | \"pending\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status",
+                "defaultValue": "'online'"
+            },
+            "pulse": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pulse",
+                "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'"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,17 @@
+:host { display: block; }
+.tg-stp { font-family: var(--tg-font-family-sans); }
+.tg-stp--horizontal { display: flex; }
+.tg-stp--horizontal .tg-stp__step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
+.tg-stp--horizontal .tg-stp__indicator { display: flex; align-items: center; width: 100%; margin-bottom: var(--tg-spacing-2); }
+.tg-stp--horizontal .tg-stp__line { flex: 1; height: 2px; background: var(--tg-color-border); }
+.tg-stp--vertical .tg-stp__step { display: flex; gap: var(--tg-spacing-3); padding-bottom: var(--tg-spacing-4); }
+.tg-stp--vertical .tg-stp__indicator { display: flex; flex-direction: column; align-items: center; }
+.tg-stp--vertical .tg-stp__line { width: 2px; flex: 1; min-height: 1.5rem; background: var(--tg-color-border); }
+.tg-stp__circle { width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--tg-font-size-xs); font-weight: var(--tg-font-weight-semibold); flex-shrink: 0; z-index: 1; transition: all var(--tg-duration-fast); }
+.tg-stp__step--done .tg-stp__circle { background: var(--tg-color-primary); color: white; }
+.tg-stp__step--done .tg-stp__line { background: var(--tg-color-primary); }
+.tg-stp__step--active .tg-stp__circle { background: var(--tg-color-primary); color: white; box-shadow: 0 0 0 4px var(--tg-color-primary-subtle); }
+.tg-stp__step--pending .tg-stp__circle { background: var(--tg-color-surface-sunken); color: var(--tg-color-text-secondary); border: 2px solid var(--tg-color-border); }
+.tg-stp__label { display: block; font-size: var(--tg-font-size-sm); font-weight: var(--tg-font-weight-medium); color: var(--tg-color-text-primary); }
+.tg-stp__step--pending .tg-stp__label { color: var(--tg-color-text-secondary); }
+.tg-stp__desc { display: block; font-size: var(--tg-font-size-xs); color: var(--tg-color-text-secondary); margin-top: 2px; }

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

@@ -0,0 +1,104 @@
+import { h, Host } from "@stencil/core";
+export class TgStepper {
+    constructor() {
+        this.steps = [];
+        this.current = 0;
+        this.orientation = 'horizontal';
+    }
+    get parsed() {
+        if (typeof this.steps === 'string') {
+            try {
+                return JSON.parse(this.steps);
+            }
+            catch (_a) {
+                return [];
+            }
+        }
+        return this.steps;
+    }
+    render() {
+        return (h(Host, { key: 'c4f5bf6845240a1c40fc20e882faa5f01dbb6b32' }, h("div", { key: 'cfbc5652894ee558ae5b8c63df14e6d809a9636b', class: 'tg-stp tg-stp--' + this.orientation }, this.parsed.map((step, i) => (h("div", { class: { 'tg-stp__step': true, 'tg-stp__step--done': i < this.current, 'tg-stp__step--active': i === this.current, 'tg-stp__step--pending': i > this.current } }, h("div", { class: "tg-stp__indicator" }, h("div", { class: "tg-stp__circle" }, i < this.current ? '\u2713' : i + 1), i < this.parsed.length - 1 && h("div", { class: "tg-stp__line" })), h("div", { class: "tg-stp__content" }, h("span", { class: "tg-stp__label" }, step.label), step.description && h("span", { class: "tg-stp__desc" }, step.description))))))));
+    }
+    static get is() { return "tg-stepper"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-stepper.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-stepper.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "steps": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | StepperStep[]",
+                    "resolved": "StepperStep[] | string",
+                    "references": {
+                        "StepperStep": {
+                            "location": "local",
+                            "path": "/Users/mahykane/work/Teranga-Design-Systems/packages/components/src/components/tg-stepper/tg-stepper.tsx",
+                            "id": "src/components/tg-stepper/tg-stepper.tsx::StepperStep"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "steps",
+                "defaultValue": "[]"
+            },
+            "current": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "current",
+                "defaultValue": "0"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,15 @@
+:host { display: block; }
+.tg-stepper { font-family: var(--tg-font-family-sans); }
+.tg-stepper__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-stepper__controls { display: inline-flex; align-items: center; border: 1px solid var(--tg-color-border-strong); border-radius: var(--tg-radius-lg); overflow: hidden; background: var(--tg-color-surface-raised); }
+.tg-stepper__btn { display: flex; align-items: center; justify-content: center; background: var(--tg-color-surface-sunken); border: none; cursor: pointer; color: var(--tg-color-text-primary); transition: background var(--tg-duration-fast); }
+.tg-stepper__btn:hover:not(:disabled) { background: var(--tg-color-primary-subtle); color: var(--tg-color-primary); }
+.tg-stepper__btn:disabled { opacity: 0.4; cursor: not-allowed; }
+.tg-stepper--sm .tg-stepper__btn { width: 2rem; height: 2rem; }
+.tg-stepper--md .tg-stepper__btn { width: 2.5rem; height: 2.5rem; }
+.tg-stepper--lg .tg-stepper__btn { width: 3rem; height: 3rem; }
+.tg-stepper__input { width: 3.5rem; text-align: center; border: none; border-left: 1px solid var(--tg-color-border); border-right: 1px solid var(--tg-color-border); outline: none; background: transparent; color: var(--tg-color-text-primary); font-family: var(--tg-font-family-mono); font-weight: var(--tg-font-weight-semibold); -moz-appearance: textfield; }
+.tg-stepper__input::-webkit-inner-spin-button, .tg-stepper__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
+.tg-stepper--sm .tg-stepper__input { height: 2rem; font-size: var(--tg-font-size-xs); }
+.tg-stepper--md .tg-stepper__input { height: 2.5rem; font-size: var(--tg-font-size-sm); }
+.tg-stepper--lg .tg-stepper__input { height: 3rem; font-size: var(--tg-font-size-md); }