@teranga-ds/components 0.1.0

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

@@ -0,0 +1,191 @@
+import { h, Host } from "@stencil/core";
+export class TgHeatmap {
+    constructor() {
+        this.data = [];
+        this.xLabels = [];
+        this.yLabels = [];
+        this.colorMin = '#f0fdf4';
+        this.colorMax = '#166534';
+    }
+    get grid() {
+        if (typeof this.data === 'string') {
+            try {
+                return JSON.parse(this.data);
+            }
+            catch (_a) {
+                return [];
+            }
+        }
+        return this.data;
+    }
+    get xl() {
+        if (typeof this.xLabels === 'string') {
+            try {
+                return JSON.parse(this.xLabels);
+            }
+            catch (_a) {
+                return [];
+            }
+        }
+        return this.xLabels;
+    }
+    get yl() {
+        if (typeof this.yLabels === 'string') {
+            try {
+                return JSON.parse(this.yLabels);
+            }
+            catch (_a) {
+                return [];
+            }
+        }
+        return this.yLabels;
+    }
+    get maxVal() { return Math.max(...this.grid.flatMap(r => r), 1); }
+    cellColor(val) {
+        const pct = val / this.maxVal;
+        const opacity = 0.15 + pct * 0.85;
+        return 'rgba(22, 101, 52, ' + opacity.toFixed(2) + ')';
+    }
+    render() {
+        var _a;
+        return (h(Host, { key: '29b99401781ab130feadedf8d0205cc95ff90400' }, h("div", { key: '4e74b38344b353c7121789124c64b8a641cc59f9', class: "tg-heatmap" }, this.heading && h("h3", { key: 'bb8fe84d77a651150b2dfc3a7337d1749766a565', class: "tg-heatmap__title" }, this.heading), h("div", { key: 'df74fa440f9803a8432ff18ab06118cfdb60efbb', class: "tg-heatmap__grid", style: { gridTemplateColumns: (this.yl.length ? '4rem ' : '') + 'repeat(' + (this.xl.length || (((_a = this.grid[0]) === null || _a === void 0 ? void 0 : _a.length) || 1)) + ', 1fr)' } }, this.yl.length > 0 && h("div", { key: '33bc2dea9ad7d048d880772bba8dc40b471d86c3', class: "tg-heatmap__corner" }), this.xl.map(l => h("div", { class: "tg-heatmap__xlabel" }, l)), this.grid.map((row, ri) => [
+            this.yl[ri] ? h("div", { class: "tg-heatmap__ylabel" }, this.yl[ri]) : null,
+            ...row.map(val => h("div", { class: "tg-heatmap__cell", style: { background: this.cellColor(val) }, title: String(val) }, val))
+        ])))));
+    }
+    static get is() { return "tg-heatmap"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-heatmap.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-heatmap.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "data": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number[][]",
+                    "resolved": "number[][] | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "data",
+                "defaultValue": "[]"
+            },
+            "xLabels": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "x-labels",
+                "defaultValue": "[]"
+            },
+            "yLabels": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "y-labels",
+                "defaultValue": "[]"
+            },
+            "colorMin": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color-min",
+                "defaultValue": "'#f0fdf4'"
+            },
+            "colorMax": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color-max",
+                "defaultValue": "'#166534'"
+            },
+            "heading": {
+                "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": "heading"
+            }
+        };
+    }
+}

package/dist/collection/components/tg-image-gallery/tg-image-gallery.css

@@ -0,0 +1,13 @@
+:host { display: block; }
+.tg-ig { display: grid; gap: var(--tg-spacing-2); font-family: var(--tg-font-family-sans); }
+.tg-ig__item { position: relative; overflow: hidden; border-radius: var(--tg-radius-lg); cursor: pointer; aspect-ratio: 1; }
+.tg-ig__item:hover .tg-ig__img { transform: scale(1.05); }
+.tg-ig__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--tg-duration-normal); }
+.tg-ig__caption { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--tg-spacing-2); background: linear-gradient(transparent, rgba(0,0,0,0.6)); color: white; font-size: var(--tg-font-size-xs); }
+.tg-ig__lightbox { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.9); display: flex; align-items: center; justify-content: center; }
+.tg-ig__lb-close { position: absolute; top: var(--tg-spacing-4); right: var(--tg-spacing-4); background: none; border: none; color: white; font-size: 2rem; cursor: pointer; z-index: 1; }
+.tg-ig__lb-img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: var(--tg-radius-lg); }
+.tg-ig__lb-prev, .tg-ig__lb-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.1); border: none; color: white; font-size: 2rem; padding: var(--tg-spacing-2) var(--tg-spacing-3); cursor: pointer; border-radius: var(--tg-radius-lg); }
+.tg-ig__lb-prev { left: var(--tg-spacing-4); }
+.tg-ig__lb-next { right: var(--tg-spacing-4); }
+.tg-ig__lb-caption { position: absolute; bottom: var(--tg-spacing-4); text-align: center; width: 100%; color: white; font-size: var(--tg-font-size-sm); }

package/dist/collection/components/tg-image-gallery/tg-image-gallery.js

@@ -0,0 +1,90 @@
+import { h, Host } from "@stencil/core";
+export class TgImageGallery {
+    constructor() {
+        this.images = [];
+        this.columns = 3;
+        this.lightboxIndex = -1;
+    }
+    get parsed() {
+        if (typeof this.images === 'string') {
+            try {
+                return JSON.parse(this.images);
+            }
+            catch (_a) {
+                return [];
+            }
+        }
+        return this.images;
+    }
+    render() {
+        const imgs = this.parsed;
+        return (h(Host, { key: '54f0a5f4c8cb69c7601f751a6e3a4fa9c039aa03' }, h("div", { key: '43db45820a7a66b647aec8f22d8b1237e7937ea0', class: "tg-ig", style: { gridTemplateColumns: 'repeat(' + this.columns + ', 1fr)' } }, imgs.map((img, i) => (h("div", { class: "tg-ig__item", onClick: () => { this.lightboxIndex = i; } }, h("img", { class: "tg-ig__img", src: img.src, alt: img.alt || '', loading: "lazy" }), img.caption && h("span", { class: "tg-ig__caption" }, img.caption))))), this.lightboxIndex >= 0 && (h("div", { key: '34f7696e87ffb3032535406680dbbc356d53c473', class: "tg-ig__lightbox", onClick: () => { this.lightboxIndex = -1; } }, h("button", { key: 'af12d664a0067352ca81546308a49fbfb2fcc9e3', class: "tg-ig__lb-close", type: "button", "aria-label": "Close" }, "\\u00d7"), this.lightboxIndex > 0 && h("button", { key: 'a0850fa101999ceb4449f013439f0d4b6b0e605d', class: "tg-ig__lb-prev", type: "button", onClick: (e) => { e.stopPropagation(); this.lightboxIndex--; } }, "\\u2039"), h("img", { key: 'b5c77f37b9cbbad132bfddedaa9e01c6537679f3', class: "tg-ig__lb-img", src: imgs[this.lightboxIndex].src, alt: imgs[this.lightboxIndex].alt || '', onClick: (e) => e.stopPropagation() }), this.lightboxIndex < imgs.length - 1 && h("button", { key: 'b0e845547338cde60e62d1b860884694068bc4a1', class: "tg-ig__lb-next", type: "button", onClick: (e) => { e.stopPropagation(); this.lightboxIndex++; } }, "\\u203a"), imgs[this.lightboxIndex].caption && h("p", { key: 'ff6ed839f25df6052c42ffcf7257577d2bd27740', class: "tg-ig__lb-caption" }, imgs[this.lightboxIndex].caption)))));
+    }
+    static get is() { return "tg-image-gallery"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-image-gallery.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-image-gallery.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "images": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | GalleryImage[]",
+                    "resolved": "GalleryImage[] | string",
+                    "references": {
+                        "GalleryImage": {
+                            "location": "local",
+                            "path": "/Users/mahykane/work/Teranga-Design-Systems/packages/components/src/components/tg-image-gallery/tg-image-gallery.tsx",
+                            "id": "src/components/tg-image-gallery/tg-image-gallery.tsx::GalleryImage"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "images",
+                "defaultValue": "[]"
+            },
+            "columns": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "columns",
+                "defaultValue": "3"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "lightboxIndex": {}
+        };
+    }
+}

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

@@ -0,0 +1,164 @@
+/* ============================================================
+   tg-input — Teranga Design System
+   ============================================================ */
+
+:host {
+  display: block;
+}
+
+.tg-input-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--tg-spacing-1-5);
+  font-family: var(--tg-font-family-sans);
+}
+
+.tg-input-wrapper--full-width {
+  width: 100%;
+}
+
+/* ── Label */
+.tg-input__label {
+  display: block;
+  font-size: var(--tg-font-size-sm);
+  font-weight: var(--tg-font-weight-medium);
+  color: var(--tg-color-text-primary);
+  line-height: var(--tg-line-height-tight);
+}
+
+.tg-input__required {
+  color: var(--tg-color-danger);
+}
+
+/* ── Field wrapper */
+.tg-input__field-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--tg-color-border-strong);
+  border-radius: var(--tg-radius-lg);
+  background-color: var(--tg-color-surface-page);
+  transition: border-color var(--tg-duration-normal) var(--tg-ease-default),
+              box-shadow var(--tg-duration-normal) var(--tg-ease-default);
+  overflow: hidden;
+}
+
+.tg-input__field-wrapper:focus-within {
+  border-color: var(--tg-color-border-focus);
+  box-shadow: var(--tg-focus-ring);
+}
+
+/* ── Sizes */
+.tg-input-wrapper--sm .tg-input__field {
+  height: 2rem;
+  font-size: var(--tg-font-size-xs);
+  padding: 0 var(--tg-spacing-3);
+}
+
+.tg-input-wrapper--md .tg-input__field {
+  height: 2.5rem;
+  font-size: var(--tg-font-size-sm);
+  padding: 0 var(--tg-spacing-3);
+}
+
+.tg-input-wrapper--lg .tg-input__field {
+  height: 3rem;
+  font-size: var(--tg-font-size-md);
+  padding: 0 var(--tg-spacing-4);
+}
+
+/* ── Input field */
+.tg-input__field {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--tg-color-text-primary);
+  font-family: inherit;
+  width: 100%;
+}
+
+.tg-input__field::placeholder {
+  color: var(--tg-color-text-disabled);
+}
+
+/* ── States */
+.tg-input-wrapper--disabled .tg-input__field-wrapper {
+  background-color: var(--tg-color-surface-sunken);
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.tg-input-wrapper--disabled .tg-input__field {
+  cursor: not-allowed;
+}
+
+.tg-input-wrapper--invalid .tg-input__field-wrapper {
+  border-color: var(--tg-color-danger);
+}
+
+.tg-input-wrapper--invalid .tg-input__field-wrapper:focus-within {
+  border-color: var(--tg-color-danger);
+  box-shadow: 0 0 0 3px rgba(227, 27, 35, 0.25);
+}
+
+/* ── Password toggle */
+.tg-input__toggle-password {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 var(--tg-spacing-2-5);
+  height: 100%;
+  background: none;
+  border: none;
+  border-left: 1px solid var(--tg-color-border);
+  cursor: pointer;
+  color: var(--tg-color-text-secondary);
+  transition: color var(--tg-duration-normal) var(--tg-ease-default);
+}
+
+.tg-input__toggle-password:hover { color: var(--tg-color-text-primary); }
+
+.tg-input__toggle-password svg {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+/* ── Helper / Error text */
+.tg-input__helper,
+.tg-input__error {
+  margin: 0;
+  font-size: var(--tg-font-size-xs);
+  line-height: var(--tg-line-height-snug);
+}
+
+.tg-input__helper {
+  color: var(--tg-color-text-secondary);
+}
+
+.tg-input__error {
+  display: flex;
+  align-items: center;
+  gap: var(--tg-spacing-1);
+  color: var(--tg-color-danger);
+}
+
+.tg-input__error svg {
+  width: 0.875rem;
+  height: 0.875rem;
+  flex-shrink: 0;
+}
+
+/* ── Slotted icons */
+::slotted([slot='icon-start']) {
+  display: inline-flex;
+  padding-left: var(--tg-spacing-3);
+  color: var(--tg-color-text-secondary);
+}
+
+::slotted([slot='icon-end']) {
+  display: inline-flex;
+  padding-right: var(--tg-spacing-3);
+  color: var(--tg-color-text-secondary);
+}