@teranga-ds/components 0.1.0

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

@@ -0,0 +1,200 @@
+import { h, Host } from "@stencil/core";
+export class TgStepperInput {
+    constructor() {
+        this.value = 0;
+        this.step = 1;
+        this.disabled = false;
+        this.size = 'md';
+        this.dec = () => {
+            const n = this.value - this.step;
+            if (this.min !== undefined && n < this.min)
+                return;
+            this.tgChange.emit(n);
+        };
+        this.inc = () => {
+            const n = this.value + this.step;
+            if (this.max !== undefined && n > this.max)
+                return;
+            this.tgChange.emit(n);
+        };
+        this.handleInput = (e) => {
+            const v = Number(e.target.value);
+            if (!isNaN(v))
+                this.tgChange.emit(v);
+        };
+    }
+    render() {
+        return (h(Host, { key: '60de6385be386f59d0b984c95d920723379bb405' }, h("div", { key: '23a44db1b87e3c070be161e7662cb2cba735fc6e', class: 'tg-stepper tg-stepper--' + this.size }, this.label && h("label", { key: '849f72333cbf36ee52b0c1544cc850a6224194e7', class: "tg-stepper__label" }, this.label), h("div", { key: '958b4cc95408832f1b8e6317dd67fdb065338149', class: "tg-stepper__controls" }, h("button", { key: 'cfc488651da3e8b6a8f13e01e334205d363433d7', class: "tg-stepper__btn", type: "button", onClick: this.dec, disabled: this.disabled || (this.min !== undefined && this.value <= this.min), "aria-label": "Decrease" }, h("svg", { key: '130d9a414069101afbc8f44e70ae86f7ff5cc169', viewBox: "0 0 20 20", fill: "currentColor", width: "16", height: "16" }, h("path", { key: '21914aca7d9914655e03b3ceb4416022051814b1', "fill-rule": "evenodd", d: "M4 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75A.75.75 0 014 10z" }))), h("input", Object.assign({ key: '13bd68a88b1a7da9f10fd3a45978d88347b298f7', class: "tg-stepper__input", type: "number", value: this.value }, (this.min !== undefined ? { min: this.min } : {}), (this.max !== undefined ? { max: this.max } : {}), { step: this.step, disabled: this.disabled, onInput: this.handleInput })), h("button", { key: '2858b6ed9b436701dae756ed741861c8d98dca55', class: "tg-stepper__btn", type: "button", onClick: this.inc, disabled: this.disabled || (this.max !== undefined && this.value >= this.max), "aria-label": "Increase" }, h("svg", { key: '11339d1491aa22f7cc66299b3f1002052e40ab68', viewBox: "0 0 20 20", fill: "currentColor", width: "16", height: "16" }, h("path", { key: '641f95c8cb5dde82cf1d0c7eed9037d1d1953c78', d: "M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" })))))));
+    }
+    static get is() { return "tg-stepper-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-stepper-input.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-stepper-input.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"
+            },
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "0"
+            },
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max"
+            },
+            "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"
+            },
+            "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"
+            },
+            "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'"
+            }
+        };
+    }
+    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-streaming-response/tg-streaming-response.css

@@ -0,0 +1,12 @@
+:host { display: block; }
+.tg-sr { font-family: var(--tg-font-family-sans); background: var(--tg-color-surface-raised); border: 1px solid var(--tg-color-border); border-radius: var(--tg-radius-xl); overflow: hidden; }
+.tg-sr__header { padding: var(--tg-spacing-2) var(--tg-spacing-3); border-bottom: 1px solid var(--tg-color-border); background: var(--tg-color-surface-sunken); }
+.tg-sr__model { font-size: var(--tg-font-size-xs); color: var(--tg-color-text-secondary); font-weight: var(--tg-font-weight-medium); }
+.tg-sr__content { padding: var(--tg-spacing-4); font-size: var(--tg-font-size-sm); line-height: var(--tg-line-height-relaxed); color: var(--tg-color-text-primary); }
+.tg-sr__typing { display: flex; gap: 4px; padding: 0 var(--tg-spacing-4) var(--tg-spacing-3); }
+.tg-sr__typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--tg-color-primary); animation: tg-sr-bounce 1.4s ease-in-out infinite; }
+.tg-sr__typing span:nth-child(2) { animation-delay: 0.2s; }
+.tg-sr__typing span:nth-child(3) { animation-delay: 0.4s; }
+@keyframes tg-sr-bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }
+.tg-sr__footer { padding: var(--tg-spacing-2) var(--tg-spacing-3); border-top: 1px solid var(--tg-color-border); background: var(--tg-color-surface-sunken); }
+.tg-sr__tokens { 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-streaming-response/tg-streaming-response.js

@@ -0,0 +1,104 @@
+import { h, Host } from "@stencil/core";
+export class TgStreamingResponse {
+    constructor() {
+        this.content = '';
+        this.loading = false;
+    }
+    render() {
+        return (h(Host, { key: '1fd88cdca6353116e77fc4ba7cabf120d64332d7' }, h("div", { key: '908ba4689a212d9f19782c42a0cdd907485b7e1a', class: "tg-sr" }, this.model && h("div", { key: '8fc8cf5382bcec48dfbdbda911fb33e128fcb502', class: "tg-sr__header" }, h("span", { key: '5200bd4b5d63104a853a55072552d97e639a9463', class: "tg-sr__model" }, this.model)), h("div", { key: 'b885e682f4bebcfd6391dc8590550f96df7c970a', class: "tg-sr__content", innerHTML: this.content }), this.loading && h("div", { key: 'd80a1b59a47178d927974e3ae0a32978b1d924a9', class: "tg-sr__typing" }, h("span", { key: '7ec3ba75573be7583d4ffdfe47555a11aad447b3' }), h("span", { key: '06d014e51d59e66c966e8ed9fc472e4cce9a71a9' }), h("span", { key: '5bea4e688bdb2138b95213ee5397b57093c2d2fe' })), this.tokenCount !== undefined && h("div", { key: '6b5fc0a56c6e76619d836bbacfdc59018a612d28', class: "tg-sr__footer" }, h("span", { key: 'a6fda3f7512c6a6dda6bd9e7eb025de6f40bd204', class: "tg-sr__tokens" }, this.tokenCount, " tokens")))));
+    }
+    static get is() { return "tg-streaming-response"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-streaming-response.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-streaming-response.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "content": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "content",
+                "defaultValue": "''"
+            },
+            "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"
+            },
+            "model": {
+                "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": "model"
+            },
+            "tokenCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "token-count"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,89 @@
+/* ============================================================
+   tg-switch — Teranga Design System
+   ============================================================ */
+
+:host {
+  display: inline-flex;
+}
+
+.tg-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--tg-spacing-2-5);
+  cursor: pointer;
+  font-family: var(--tg-font-family-sans);
+  user-select: none;
+}
+
+.tg-switch--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.tg-switch__input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.tg-switch__track {
+  position: relative;
+  width: 2.5rem;
+  height: 1.375rem;
+  flex-shrink: 0;
+  border-radius: var(--tg-radius-full);
+  background: var(--tg-color-neutral-300);
+  transition: background-color var(--tg-duration-normal) var(--tg-ease-default);
+}
+
+.tg-switch__thumb {
+  position: absolute;
+  top: 0.125rem;
+  left: 0.125rem;
+  width: 1.125rem;
+  height: 1.125rem;
+  border-radius: var(--tg-radius-full);
+  background: white;
+  box-shadow: var(--tg-shadow-sm);
+  transition: transform var(--tg-duration-normal) var(--tg-ease-bounce);
+}
+
+.tg-switch__input:checked + .tg-switch__track {
+  background: var(--tg-color-primary);
+}
+
+.tg-switch__input:checked + .tg-switch__track .tg-switch__thumb {
+  transform: translateX(1.125rem);
+}
+
+.tg-switch__input:focus-visible + .tg-switch__track {
+  box-shadow: var(--tg-focus-ring);
+}
+
+.tg-switch__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--tg-spacing-0-5);
+}
+
+.tg-switch__label-text {
+  font-size: var(--tg-font-size-sm);
+  color: var(--tg-color-text-primary);
+  line-height: var(--tg-line-height-snug);
+  font-weight: var(--tg-font-weight-medium);
+}
+
+.tg-switch__description {
+  font-size: var(--tg-font-size-xs);
+  color: var(--tg-color-text-secondary);
+}
+
+/* Sizes */
+.tg-switch--sm .tg-switch__track { width: 2rem; height: 1.125rem; }
+.tg-switch--sm .tg-switch__thumb { width: 0.875rem; height: 0.875rem; }
+.tg-switch--sm .tg-switch__input:checked + .tg-switch__track .tg-switch__thumb { transform: translateX(0.875rem); }
+
+.tg-switch--lg .tg-switch__track { width: 3rem; height: 1.625rem; }
+.tg-switch--lg .tg-switch__thumb { width: 1.375rem; height: 1.375rem; }
+.tg-switch--lg .tg-switch__input:checked + .tg-switch__track .tg-switch__thumb { transform: translateX(1.375rem); }

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

@@ -0,0 +1,172 @@
+import { h, Host } from "@stencil/core";
+export class TgSwitch {
+    constructor() {
+        this.checked = false;
+        this.disabled = false;
+        this.size = 'md';
+        this.handleChange = () => {
+            if (this.disabled)
+                return;
+            this.checked = !this.checked;
+            this.tgChange.emit(this.checked);
+        };
+    }
+    render() {
+        return (h(Host, { key: 'b50dd7511649884a5fc4b53f9d936dc17ca05b92' }, h("label", { key: '1f471b7d96acebc3763502150e4d171020f8b568', class: {
+                'tg-switch': true,
+                [`tg-switch--${this.size}`]: true,
+                'tg-switch--disabled': this.disabled,
+            } }, h("input", Object.assign({ key: '626529e021ac6209c370debfd035ded6bc5c49c8', type: "checkbox", role: "switch", class: "tg-switch__input", checked: this.checked, disabled: this.disabled }, (this.name ? { name: this.name } : {}), { "aria-checked": this.checked ? 'true' : 'false', onChange: this.handleChange })), h("span", { key: '241188b985b4275c898eb961a226da52cf9f4094', class: "tg-switch__track" }, h("span", { key: '8a832d144452f992d68e61b77e1ad1dc53b8ba13', class: "tg-switch__thumb" })), (this.label || this.description) && (h("span", { key: 'b676a4e4456a9dc5b0dcd8cf7f674a75c035f484', class: "tg-switch__content" }, this.label && h("span", { key: 'e77672a769b159677aaa14de626bf98a4473a3bc', class: "tg-switch__label-text" }, this.label), this.description && h("span", { key: '5b2e9e3c8f6d4bbbf3179b7f2e0e665006c8cf12', class: "tg-switch__description" }, this.description))))));
+    }
+    static get is() { return "tg-switch"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-switch.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-switch.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"
+            },
+            "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'"
+            },
+            "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"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tgChange",
+                "name": "tgChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}