@teranga-ds/components 0.1.0

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

@@ -0,0 +1,127 @@
+import { h, Host } from "@stencil/core";
+export class TgPullToRefresh {
+    constructor() {
+        this.refreshing = false;
+        this.label = 'Tirer pour actualiser';
+        this.refreshingLabel = 'Actualisation\u2026';
+        this.pulling = false;
+        this.pullDistance = 0;
+        this.startY = 0;
+        this.threshold = 80;
+        this.onTouchStart = (e) => { this.startY = e.touches[0].clientY; this.pulling = true; };
+        this.onTouchMove = (e) => {
+            if (!this.pulling)
+                return;
+            this.pullDistance = Math.min(e.touches[0].clientY - this.startY, 120);
+        };
+        this.onTouchEnd = () => {
+            if (this.pullDistance >= this.threshold)
+                this.tgRefresh.emit();
+            this.pulling = false;
+            this.pullDistance = 0;
+        };
+    }
+    render() {
+        return (h(Host, { key: '8c74da495e2656c6490ce95bbc5a32731f1cf278' }, h("div", { key: '081a63f279f048092f1fdd2bfce6a0c45b4f8490', class: "tg-ptr", onTouchStart: this.onTouchStart, onTouchMove: this.onTouchMove, onTouchEnd: this.onTouchEnd }, h("div", { key: '8d8253cb751f174a1b89b2e65e66bb0979aab0a5', class: "tg-ptr__indicator", style: { height: (this.refreshing ? 48 : Math.max(0, this.pullDistance)) + 'px', opacity: String(this.refreshing ? 1 : Math.min(1, this.pullDistance / this.threshold)) } }, this.refreshing ? h("span", { class: "tg-ptr__spinner" }) : h("span", { class: "tg-ptr__arrow", style: { transform: 'rotate(' + (this.pullDistance >= this.threshold ? 180 : 0) + 'deg)' } }, "\\u2193"), h("span", { key: 'afb1623869882eacb5fc5ed5005c9caef1833cbc', class: "tg-ptr__label" }, this.refreshing ? this.refreshingLabel : this.label)), h("slot", { key: 'f4cad193bc5cc9bd71c0ee1f8f8f3f73699c76d1' }))));
+    }
+    static get is() { return "tg-pull-to-refresh"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-pull-to-refresh.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-pull-to-refresh.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "refreshing": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "refreshing",
+                "defaultValue": "false"
+            },
+            "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": "'Tirer pour actualiser'"
+            },
+            "refreshingLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "refreshing-label",
+                "defaultValue": "'Actualisation\\u2026'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "pulling": {},
+            "pullDistance": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tgRefresh",
+                "name": "tgRefresh",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/tg-quick-switcher/tg-quick-switcher.css

@@ -0,0 +1,12 @@
+:host { display: inline-block; position: relative; }
+.tg-qs { font-family: var(--tg-font-family-sans); }
+.tg-qs__trigger { background: var(--tg-color-surface-sunken); border: 1px solid var(--tg-color-border); border-radius: var(--tg-radius-lg); padding: var(--tg-spacing-2) var(--tg-spacing-3); font-size: var(--tg-font-size-sm); cursor: pointer; color: var(--tg-color-text-primary); transition: all var(--tg-duration-fast); }
+.tg-qs__trigger:hover { border-color: var(--tg-color-primary); background: var(--tg-color-primary-subtle); }
+.tg-qs__dropdown { position: absolute; top: 100%; left: 0; margin-top: var(--tg-spacing-1); width: 18rem; 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; overflow: hidden; }
+.tg-qs__search { display: block; width: 100%; padding: var(--tg-spacing-3); border: none; border-bottom: 1px solid var(--tg-color-border); outline: none; font-size: var(--tg-font-size-sm); font-family: inherit; background: transparent; color: var(--tg-color-text-primary); }
+.tg-qs__list { list-style: none; padding: var(--tg-spacing-1) 0; margin: 0; max-height: 16rem; overflow-y: auto; }
+.tg-qs__item { display: flex; align-items: center; gap: var(--tg-spacing-2); padding: var(--tg-spacing-2) var(--tg-spacing-3); cursor: pointer; transition: background var(--tg-duration-fast); }
+.tg-qs__item:hover { background: var(--tg-color-primary-subtle); }
+.tg-qs__icon { font-size: 1.25rem; flex-shrink: 0; }
+.tg-qs__label { display: block; font-size: var(--tg-font-size-sm); font-weight: var(--tg-font-weight-medium); color: var(--tg-color-text-primary); }
+.tg-qs__sub { display: block; font-size: var(--tg-font-size-xs); color: var(--tg-color-text-secondary); }

package/dist/collection/components/tg-quick-switcher/tg-quick-switcher.js

@@ -0,0 +1,120 @@
+import { h, Host } from "@stencil/core";
+export class TgQuickSwitcher {
+    constructor() {
+        this.items = [];
+        this.placeholder = 'Basculer vers\u2026';
+        this.open = false;
+        this.query = '';
+    }
+    get parsed() {
+        if (typeof this.items === 'string') {
+            try {
+                return JSON.parse(this.items);
+            }
+            catch (_a) {
+                return [];
+            }
+        }
+        return this.items;
+    }
+    get filtered() { const q = this.query.toLowerCase(); return q ? this.parsed.filter(i => i.label.toLowerCase().includes(q)) : this.parsed; }
+    onDocClick() { this.open = false; }
+    render() {
+        return (h(Host, { key: '6755616db2c14f185c9e32c220455346df09b80d' }, h("div", { key: '9fa165a8f67aa0848b95f1a7d14be6551198e981', class: "tg-qs", onClick: (e) => e.stopPropagation() }, h("button", { key: '98428b3a459504e64043b50bed1cebf42dae9e84', class: "tg-qs__trigger", type: "button", onClick: () => { this.open = !this.open; this.query = ''; } }, h("slot", { key: '161e0ea0c83fa17f8f1a56562d8764ced5053581' }, "Basculer")), this.open && (h("div", { key: 'bad4c119013f396b266cb7edc2cd192fb79cbec4', class: "tg-qs__dropdown" }, h("input", { key: '57ce7c4d5e5edf287d2f8bcb727d5b02cf537abd', class: "tg-qs__search", type: "text", placeholder: this.placeholder, value: this.query, onInput: (e) => { this.query = e.target.value; }, autofocus: true }), h("ul", { key: '8841015526cf682f3b4cb6fdb45d325fe5e791e4', class: "tg-qs__list" }, this.filtered.map(item => (h("li", { class: "tg-qs__item", onClick: () => { this.tgSwitch.emit(item.id); this.open = false; } }, item.icon && h("span", { class: "tg-qs__icon" }, item.icon), h("div", null, h("span", { class: "tg-qs__label" }, item.label), item.subtitle && h("span", { class: "tg-qs__sub" }, item.subtitle)))))))))));
+    }
+    static get is() { return "tg-quick-switcher"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-quick-switcher.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-quick-switcher.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | SwitcherItem[]",
+                    "resolved": "SwitcherItem[] | string",
+                    "references": {
+                        "SwitcherItem": {
+                            "location": "local",
+                            "path": "/Users/mahykane/work/Teranga-Design-Systems/packages/components/src/components/tg-quick-switcher/tg-quick-switcher.tsx",
+                            "id": "src/components/tg-quick-switcher/tg-quick-switcher.tsx::SwitcherItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "items",
+                "defaultValue": "[]"
+            },
+            "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": "'Basculer vers\\u2026'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "open": {},
+            "query": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tgSwitch",
+                "name": "tgSwitch",
+                "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-radio/tg-radio.css

@@ -0,0 +1,83 @@
+/* ============================================================
+   tg-radio — Teranga Design System
+   ============================================================ */
+
+:host {
+  display: inline-flex;
+}
+
+.tg-radio {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--tg-spacing-2);
+  cursor: pointer;
+  font-family: var(--tg-font-family-sans);
+  user-select: none;
+}
+
+.tg-radio--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.tg-radio__input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.tg-radio__circle {
+  position: relative;
+  width: 1.125rem;
+  height: 1.125rem;
+  flex-shrink: 0;
+  margin-top: 0.125rem;
+  border: 2px solid var(--tg-color-border-strong);
+  border-radius: var(--tg-radius-full);
+  background: var(--tg-color-surface-raised);
+  transition: all var(--tg-duration-fast) var(--tg-ease-default);
+}
+
+.tg-radio__circle::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: var(--tg-radius-full);
+  background: white;
+  transform: translate(-50%, -50%) scale(0);
+  transition: transform var(--tg-duration-fast) var(--tg-ease-bounce);
+}
+
+.tg-radio__input:checked + .tg-radio__circle {
+  background: var(--tg-color-primary);
+  border-color: var(--tg-color-primary);
+}
+
+.tg-radio__input:checked + .tg-radio__circle::after {
+  transform: translate(-50%, -50%) scale(1);
+}
+
+.tg-radio__input:focus-visible + .tg-radio__circle {
+  box-shadow: var(--tg-focus-ring);
+}
+
+.tg-radio__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--tg-spacing-0-5);
+}
+
+.tg-radio__label-text {
+  font-size: var(--tg-font-size-sm);
+  color: var(--tg-color-text-primary);
+  line-height: var(--tg-line-height-snug);
+}
+
+.tg-radio__description {
+  font-size: var(--tg-font-size-xs);
+  color: var(--tg-color-text-secondary);
+}

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

@@ -0,0 +1,169 @@
+import { h, Host } from "@stencil/core";
+export class TgRadio {
+    constructor() {
+        this.checked = false;
+        this.disabled = false;
+        this.handleChange = () => {
+            if (this.disabled)
+                return;
+            this.checked = true;
+            this.tgChange.emit(this.value);
+        };
+    }
+    render() {
+        return (h(Host, { key: 'c20da1611aaa084a113c540cf47d47f747b133bb' }, h("label", { key: 'ca4ce55148205b8a7c3f3ec05db7a606920d2f26', class: {
+                'tg-radio': true,
+                'tg-radio--disabled': this.disabled,
+            } }, h("input", Object.assign({ key: '16a658d41fa640930e5ff2939a25d2a9649a4842', type: "radio", class: "tg-radio__input", checked: this.checked, disabled: this.disabled }, (this.name ? { name: this.name } : {}), (this.value ? { value: this.value } : {}), { onChange: this.handleChange })), h("span", { key: '6a42b83b9e210015fc6625c8454a9c4bc4e06c3e', class: "tg-radio__circle" }), (this.label || this.description) && (h("span", { key: 'fb06e63b9f0c6a8ffe057b39627f67bfa2bb8d11', class: "tg-radio__content" }, this.label && h("span", { key: 'f0253a06ca55e2d1e4feba654481738a4b1e8a1e', class: "tg-radio__label-text" }, this.label), this.description && h("span", { key: '0b50be555bb5ae13ab4fbe2c81dc922a89ba98f2', class: "tg-radio__description" }, this.description))))));
+    }
+    static get is() { return "tg-radio"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-radio.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-radio.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"
+            },
+            "description": {
+                "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": "description"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "name": {
+                "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": "name"
+            },
+            "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 events() {
+        return [{
+                "method": "tgChange",
+                "name": "tgChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/tg-retry-ui/tg-retry-ui.css

@@ -0,0 +1,10 @@
+:host { display: block; }
+.tg-retry { text-align: center; padding: var(--tg-spacing-8); font-family: var(--tg-font-family-sans); }
+.tg-retry__icon { font-size: 2.5rem; margin-bottom: var(--tg-spacing-3); }
+.tg-retry__title { margin: 0 0 var(--tg-spacing-2); font-size: var(--tg-font-size-lg); font-weight: var(--tg-font-weight-semibold); color: var(--tg-color-text-primary); }
+.tg-retry__msg { margin: 0 0 var(--tg-spacing-4); font-size: var(--tg-font-size-sm); color: var(--tg-color-text-secondary); max-width: 20rem; margin-left: auto; margin-right: auto; line-height: var(--tg-line-height-relaxed); }
+.tg-retry__btn { display: inline-flex; align-items: center; gap: var(--tg-spacing-2); background: var(--tg-color-primary); color: var(--tg-color-primary-on); border: none; border-radius: var(--tg-radius-lg); padding: var(--tg-spacing-2-5) var(--tg-spacing-5); font-size: var(--tg-font-size-sm); font-weight: var(--tg-font-weight-medium); cursor: pointer; transition: filter var(--tg-duration-fast); }
+.tg-retry__btn:hover:not(:disabled) { filter: brightness(1.1); }
+.tg-retry__btn:disabled { opacity: 0.7; cursor: wait; }
+.tg-retry__spinner { width: 1rem; height: 1rem; border: 2px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: tg-retry-spin 0.6s linear infinite; }
+@keyframes tg-retry-spin { to { transform: rotate(360deg); } }

package/dist/collection/components/tg-retry-ui/tg-retry-ui.js

@@ -0,0 +1,145 @@
+import { h, Host } from "@stencil/core";
+export class TgRetryUi {
+    constructor() {
+        this.heading = 'Erreur de chargement';
+        this.message = 'Impossible de charger les donn\u00e9es. Veuillez r\u00e9essayer.';
+        this.retryLabel = 'R\u00e9essayer';
+        this.loading = false;
+    }
+    render() {
+        return (h(Host, { key: '01d8cd18a3d42a9905a59e5a640ed9f5b3a9e270' }, h("div", { key: 'a25bc7b0210351e5e9890507990db5b80891acf2', class: "tg-retry" }, h("div", { key: '77736b877b96457608a6c9e7bc8fa7c5302580c2', class: "tg-retry__icon" }, this.icon || '\u26a0\ufe0f'), h("h3", { key: 'ffb44435994211bb5b5dfadb17810147a2eddae8', class: "tg-retry__title" }, this.heading), h("p", { key: 'c66256fa635ef2b940b1a79074e6acd45762b1bf', class: "tg-retry__msg" }, this.message), h("button", { key: '9832781d906f3acf5588b9aef8550256139b0de4', class: "tg-retry__btn", type: "button", disabled: this.loading, onClick: () => this.tgRetry.emit() }, this.loading && h("span", { key: '879ed4727518828c2ba63d3775ff3f62ad812e34', class: "tg-retry__spinner" }), this.retryLabel))));
+    }
+    static get is() { return "tg-retry-ui"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-retry-ui.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-retry-ui.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading",
+                "defaultValue": "'Erreur de chargement'"
+            },
+            "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": "'Impossible de charger les donn\\u00e9es. Veuillez r\\u00e9essayer.'"
+            },
+            "retryLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "retry-label",
+                "defaultValue": "'R\\u00e9essayer'"
+            },
+            "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"
+            },
+            "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"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tgRetry",
+                "name": "tgRetry",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}