@teranga-ds/components 0.1.0

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

@@ -0,0 +1,112 @@
+import { h, Host } from "@stencil/core";
+export class TgSidebar {
+    constructor() {
+        this.sections = [];
+        this.collapsible = true;
+        this.collapsed = false;
+        this.toggle = () => {
+            this.collapsed = !this.collapsed;
+        };
+    }
+    get parsedSections() {
+        if (typeof this.sections === 'string') {
+            try {
+                return JSON.parse(this.sections);
+            }
+            catch (_a) {
+                return [];
+            }
+        }
+        return this.sections;
+    }
+    render() {
+        const collapseIcon = `<svg viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><polyline points="11 4 6 9 11 14"/></svg>`;
+        return (h(Host, { key: 'b737361dcac64bcb5be072cd15fdffd1403727b8' }, h("aside", { key: '1f245cfb865867879bab9d99684d1df5bda5695d', class: { 'tg-sidebar': true, 'tg-sidebar--collapsed': this.collapsed } }, h("div", { key: '1598853eb15bda306f63a1d10ebe014c98b6b05b', class: "tg-sidebar__header" }, this.sidebarTitle && h("span", { key: '02126064491917cab82bd81cdc267d5ed0d5684c', class: "tg-sidebar__title" }, this.sidebarTitle), this.collapsible && (h("button", { key: 'e56f87603071294c12b43c9a616244d3e15773d7', class: "tg-sidebar__collapse-btn", onClick: this.toggle, "aria-label": this.collapsed ? 'Déplier' : 'Réduire', innerHTML: collapseIcon }))), this.parsedSections.map(section => (h("div", { class: "tg-sidebar__section" }, section.title && h("div", { class: "tg-sidebar__section-title" }, section.title), h("ul", { class: "tg-sidebar__nav" }, section.items.map(item => (h("li", null, h("a", { class: { 'tg-sidebar__link': true, 'tg-sidebar__link--active': !!item.active }, href: item.href }, item.icon && h("span", { class: "tg-sidebar__link-icon", innerHTML: item.icon }), h("span", { class: "tg-sidebar__link-label" }, item.label), item.badge && h("span", { class: "tg-sidebar__badge" }, item.badge))))))))), h("div", { key: '4b6663f96bc740f7e6643b78a6de05a49457754b', class: "tg-sidebar__footer" }, h("slot", { key: '5af6b38e199baeb4b45dde26aaadfad7e0930bc7', name: "footer" })))));
+    }
+    static get is() { return "tg-sidebar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-sidebar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-sidebar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "sidebarTitle": {
+                "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": "sidebar-title"
+            },
+            "sections": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | TgSidebarSection[]",
+                    "resolved": "TgSidebarSection[] | string",
+                    "references": {
+                        "TgSidebarSection": {
+                            "location": "local",
+                            "path": "/Users/mahykane/work/Teranga-Design-Systems/packages/components/src/components/tg-sidebar/tg-sidebar.tsx",
+                            "id": "src/components/tg-sidebar/tg-sidebar.tsx::TgSidebarSection"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sections",
+                "defaultValue": "[]"
+            },
+            "collapsible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "collapsible",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "collapsed": {}
+        };
+    }
+}

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

@@ -0,0 +1,58 @@
+:host {
+  display: block;
+}
+
+.tg-skeleton {
+  background: var(--tg-color-neutral-100, #f3f4f6);
+  border-radius: var(--tg-radius-md, 8px);
+  overflow: hidden;
+  position: relative;
+}
+
+/* Shapes */
+.tg-skeleton--rect   { border-radius: var(--tg-radius-md, 8px); }
+.tg-skeleton--circle { border-radius: 50%; }
+.tg-skeleton--text   { border-radius: var(--tg-radius-sm, 4px); height: 1em; }
+
+/* Pulse animation */
+.tg-skeleton--pulse {
+  animation: tg-skeleton-pulse 1.8s ease-in-out infinite;
+}
+
+@keyframes tg-skeleton-pulse {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: 0.4; }
+}
+
+/* Shimmer animation */
+.tg-skeleton--shimmer::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.4) 50%,
+    transparent 100%
+  );
+  animation: tg-skeleton-shimmer 1.8s ease-in-out infinite;
+}
+
+@keyframes tg-skeleton-shimmer {
+  100% { transform: translateX(100%); }
+}
+
+/* Dark theme shimmer */
+:host-context([data-theme="dark"]) .tg-skeleton {
+  background: var(--tg-color-neutral-800, #1f2937);
+}
+
+:host-context([data-theme="dark"]) .tg-skeleton--shimmer::after {
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.06) 50%,
+    transparent 100%
+  );
+}

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

@@ -0,0 +1,135 @@
+import { h, Host } from "@stencil/core";
+export class TgSkeleton {
+    constructor() {
+        this.shape = 'rect';
+        this.animation = 'shimmer';
+        this.count = 1;
+    }
+    render() {
+        const style = {};
+        if (this.width)
+            style.width = this.width;
+        if (this.height)
+            style.height = this.height;
+        const skeletons = Array.from({ length: this.count }, (_, i) => (h("div", { key: i, class: {
+                'tg-skeleton': true,
+                [`tg-skeleton--${this.shape}`]: true,
+                [`tg-skeleton--${this.animation}`]: this.animation !== 'none',
+            }, style: style, "aria-hidden": "true" })));
+        return h(Host, { key: 'f519db7bac0eec2a4e212b0000c8422a0c352fc9' }, skeletons);
+    }
+    static get is() { return "tg-skeleton"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-skeleton.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-skeleton.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'rect' | 'circle' | 'text'",
+                    "resolved": "\"circle\" | \"rect\" | \"text\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shape",
+                "defaultValue": "'rect'"
+            },
+            "animation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'pulse' | 'shimmer' | 'none'",
+                    "resolved": "\"none\" | \"pulse\" | \"shimmer\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "animation",
+                "defaultValue": "'shimmer'"
+            },
+            "width": {
+                "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": "width"
+            },
+            "height": {
+                "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": "height"
+            },
+            "count": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "count",
+                "defaultValue": "1"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,10 @@
+:host { display: block; }
+.tg-slider { font-family: var(--tg-font-family-sans); }
+.tg-slider__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--tg-spacing-2); }
+.tg-slider__label { font-size: var(--tg-font-size-sm); font-weight: var(--tg-font-weight-medium); color: var(--tg-color-text-primary); }
+.tg-slider__value { font-size: var(--tg-font-size-sm); font-weight: var(--tg-font-weight-semibold); color: var(--tg-color-primary); background: var(--tg-color-primary-subtle); padding: 2px var(--tg-spacing-2); border-radius: var(--tg-radius-full); }
+.tg-slider__input { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: var(--tg-radius-full); background: linear-gradient(to right, var(--tg-color-primary) 0%, var(--tg-color-primary) var(--tg-slider-pct, 50%), var(--tg-color-neutral-200) var(--tg-slider-pct, 50%), var(--tg-color-neutral-200) 100%); outline: none; cursor: pointer; }
+.tg-slider__input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--tg-color-primary); border: 3px solid white; box-shadow: var(--tg-shadow-md); cursor: grab; transition: transform var(--tg-duration-fast); }
+.tg-slider__input::-webkit-slider-thumb:active { transform: scale(1.15); cursor: grabbing; }
+.tg-slider__input:disabled { opacity: 0.5; cursor: not-allowed; }
+.tg-slider__ticks { display: flex; justify-content: space-between; margin-top: var(--tg-spacing-1); font-size: var(--tg-font-size-xs); color: var(--tg-color-text-secondary); }

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

@@ -0,0 +1,208 @@
+import { h, Host } from "@stencil/core";
+export class TgSlider {
+    constructor() {
+        this.min = 0;
+        this.max = 100;
+        this.step = 1;
+        this.value = 50;
+        this.disabled = false;
+        this.showValue = true;
+        this.handleInput = (e) => { this.tgChange.emit(Number(e.target.value)); };
+    }
+    get percent() { return ((this.value - this.min) / (this.max - this.min)) * 100; }
+    render() {
+        return (h(Host, { key: 'bb0f4e2fe9a272e959f3230cc79f63f212a9b5b1' }, h("div", { key: '7d62b0fcc7c077ce9db0473607837530c3e96d35', class: "tg-slider" }, (this.label || this.showValue) && (h("div", { key: '49b5fe1851a4a46f9718e2efdef8c1ffecffd20a', class: "tg-slider__header" }, this.label && h("label", { key: '3d24e5b106003b8ee31b041a383e0641654a5851', class: "tg-slider__label" }, this.label), this.showValue && h("span", { key: 'eddb799b0eae2f6281f8a11c10aab901ab3fcb12', class: "tg-slider__value" }, this.value, this.unit ? ' ' + this.unit : ''))), h("input", { key: 'bb9c67b34cef713e2f1be06f44f06e16a3f0f32b', type: "range", class: "tg-slider__input", min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, onInput: this.handleInput, style: { '--tg-slider-pct': this.percent + '%' } }), h("div", { key: '63dd4226f558abb5da23dbca6c759a024bac8a8d', class: "tg-slider__ticks" }, h("span", { key: '17d84469397b2678c4d6a716e8da1f7dc5e7e663' }, this.min), h("span", { key: 'd738e2ade4ca801875ae2afcf443f2c33b31691d' }, this.max)))));
+    }
+    static get is() { return "tg-slider"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-slider.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-slider.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"
+            },
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min",
+                "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"
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "step",
+                "defaultValue": "1"
+            },
+            "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": "50"
+            },
+            "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"
+            },
+            "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": "true"
+            },
+            "unit": {
+                "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": "unit"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tgChange",
+                "name": "tgChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/tg-source-citation/tg-source-citation.css

@@ -0,0 +1,12 @@
+:host { display: block; }
+.tg-sc { font-family: var(--tg-font-family-sans); background: var(--tg-color-surface-sunken); border-radius: var(--tg-radius-lg); padding: var(--tg-spacing-3); }
+.tg-sc__title { margin: 0 0 var(--tg-spacing-2); font-size: var(--tg-font-size-xs); font-weight: var(--tg-font-weight-semibold); text-transform: uppercase; letter-spacing: var(--tg-tracking-wide); color: var(--tg-color-text-secondary); }
+.tg-sc__item { display: flex; gap: var(--tg-spacing-2); padding: var(--tg-spacing-2) 0; border-bottom: 1px solid var(--tg-color-border); }
+.tg-sc__item:last-child { border-bottom: none; }
+.tg-sc__num { width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--tg-color-primary-subtle); color: var(--tg-color-primary); display: flex; align-items: center; justify-content: center; font-size: var(--tg-font-size-xs); font-weight: var(--tg-font-weight-bold); flex-shrink: 0; }
+.tg-sc__body { flex: 1; }
+.tg-sc__link { font-size: var(--tg-font-size-sm); color: var(--tg-color-primary); text-decoration: none; font-weight: var(--tg-font-weight-medium); }
+.tg-sc__link:hover { text-decoration: underline; }
+.tg-sc__name { font-size: var(--tg-font-size-sm); font-weight: var(--tg-font-weight-medium); color: var(--tg-color-text-primary); }
+.tg-sc__snippet { margin: var(--tg-spacing-0-5) 0 0; font-size: var(--tg-font-size-xs); color: var(--tg-color-text-secondary); line-height: var(--tg-line-height-relaxed); }
+.tg-sc__rel { font-size: var(--tg-font-size-xs); color: var(--tg-color-text-disabled); font-family: var(--tg-font-family-mono); }

package/dist/collection/components/tg-source-citation/tg-source-citation.js

@@ -0,0 +1,56 @@
+import { h, Host } from "@stencil/core";
+export class TgSourceCitation {
+    constructor() {
+        this.sources = [];
+    }
+    get parsed() {
+        if (typeof this.sources === 'string') {
+            try {
+                return JSON.parse(this.sources);
+            }
+            catch (_a) {
+                return [];
+            }
+        }
+        return this.sources;
+    }
+    render() {
+        return (h(Host, { key: 'a7cae9f6beddde97a2881e916adf2b9394bc55e4' }, h("div", { key: 'bd52ccfb944e12f84178c44f8ffb19bdc19665e0', class: "tg-sc" }, h("h4", { key: '709b16ea40a17733b3e62320675b31456d981825', class: "tg-sc__title" }, "Sources"), this.parsed.map((src, i) => (h("div", { class: "tg-sc__item" }, h("span", { class: "tg-sc__num" }, i + 1), h("div", { class: "tg-sc__body" }, src.url ? h("a", { class: "tg-sc__link", href: src.url, target: "_blank", rel: "noopener" }, src.title) : h("span", { class: "tg-sc__name" }, src.title), src.snippet && h("p", { class: "tg-sc__snippet" }, src.snippet)), src.relevance !== undefined && h("span", { class: "tg-sc__rel" }, Math.round(src.relevance * 100), "%")))))));
+    }
+    static get is() { return "tg-source-citation"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-source-citation.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-source-citation.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "sources": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | { title: string; url?: string; snippet?: string; relevance?: number; }[]",
+                    "resolved": "string | { title: string; url?: string; snippet?: string; relevance?: number; }[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sources",
+                "defaultValue": "[]"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,50 @@
+/* ============================================================
+   tg-spinner — Teranga Design System
+   ============================================================ */
+
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tg-spinner {
+  display: inline-flex;
+  animation: tg-spin 0.75s linear infinite;
+}
+
+.tg-spinner svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* ── Sizes */
+.tg-spinner--xs { width: 12px; height: 12px; }
+.tg-spinner--sm { width: 16px; height: 16px; }
+.tg-spinner--md { width: 24px; height: 24px; }
+.tg-spinner--lg { width: 36px; height: 36px; }
+.tg-spinner--xl { width: 48px; height: 48px; }
+
+/* ── Color variants */
+.tg-spinner--primary  { color: var(--tg-color-primary); }
+.tg-spinner--secondary { color: var(--tg-color-secondary-hover); }
+.tg-spinner--danger   { color: var(--tg-color-danger); }
+.tg-spinner--neutral  { color: var(--tg-color-neutral-500); }
+.tg-spinner--inherit  { color: inherit; }
+
+/* ── Screen-reader only */
+.tg-spinner__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+@keyframes tg-spin {
+  to { transform: rotate(360deg); }
+}