@teranga-ds/components 0.1.0

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

@@ -0,0 +1,76 @@
+/* ============================================================
+   tg-tag — Teranga Design System
+   ============================================================ */
+
+:host {
+  display: inline-flex;
+}
+
+.tg-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--tg-spacing-1);
+  font-family: var(--tg-font-family-sans);
+  font-weight: var(--tg-font-weight-medium);
+  border-radius: var(--tg-radius-full);
+  border: 1px solid transparent;
+  white-space: nowrap;
+  transition: all var(--tg-duration-fast) var(--tg-ease-default);
+}
+
+/* Sizes */
+.tg-tag--sm { padding: 0 var(--tg-spacing-2); height: 1.25rem; font-size: var(--tg-font-size-2xs); }
+.tg-tag--md { padding: var(--tg-spacing-0-5) var(--tg-spacing-2-5); height: 1.5rem; font-size: var(--tg-font-size-xs); }
+.tg-tag--lg { padding: var(--tg-spacing-1) var(--tg-spacing-3); height: 1.875rem; font-size: var(--tg-font-size-sm); }
+
+/* Variants — filled */
+.tg-tag--primary   { background: var(--tg-color-primary); color: var(--tg-color-primary-on); }
+.tg-tag--secondary { background: var(--tg-color-secondary); color: var(--tg-color-secondary-on); }
+.tg-tag--success   { background: var(--tg-color-success); color: var(--tg-color-success-on); }
+.tg-tag--danger    { background: var(--tg-color-danger); color: var(--tg-color-danger-on); }
+.tg-tag--warning   { background: var(--tg-color-warning); color: var(--tg-color-warning-on); }
+.tg-tag--info      { background: var(--tg-color-info); color: var(--tg-color-info-on); }
+.tg-tag--neutral   { background: var(--tg-color-neutral-200); color: var(--tg-color-text-primary); }
+
+/* Variants — outlined */
+.tg-tag--outlined.tg-tag--primary   { background: var(--tg-color-primary-subtle); border-color: var(--tg-color-primary); color: var(--tg-color-primary); }
+.tg-tag--outlined.tg-tag--secondary { background: var(--tg-color-secondary-subtle); border-color: var(--tg-color-secondary); color: var(--tg-color-secondary); }
+.tg-tag--outlined.tg-tag--success   { background: var(--tg-color-success-subtle); border-color: var(--tg-color-success); color: var(--tg-color-success); }
+.tg-tag--outlined.tg-tag--danger    { background: var(--tg-color-danger-subtle); border-color: var(--tg-color-danger); color: var(--tg-color-danger); }
+.tg-tag--outlined.tg-tag--warning   { background: var(--tg-color-warning-subtle); border-color: var(--tg-color-warning); color: var(--tg-color-warning); }
+.tg-tag--outlined.tg-tag--info      { background: var(--tg-color-info-subtle); border-color: var(--tg-color-info); color: var(--tg-color-info); }
+.tg-tag--outlined.tg-tag--neutral   { background: transparent; border-color: var(--tg-color-border); color: var(--tg-color-text-primary); }
+
+/* Removable */
+.tg-tag__remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 0.875rem;
+  height: 0.875rem;
+  border: none;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+  border-radius: var(--tg-radius-full);
+  padding: 0;
+  opacity: 0.7;
+  transition: opacity var(--tg-duration-fast) var(--tg-ease-default);
+}
+
+.tg-tag__remove:hover {
+  opacity: 1;
+}
+
+.tg-tag__remove svg {
+  width: 0.625rem;
+  height: 0.625rem;
+}
+
+/* Dot */
+.tg-tag__dot {
+  width: 0.375rem;
+  height: 0.375rem;
+  border-radius: var(--tg-radius-full);
+  background: currentColor;
+}

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

@@ -0,0 +1,152 @@
+import { h, Host } from "@stencil/core";
+export class TgTag {
+    constructor() {
+        this.variant = 'neutral';
+        this.size = 'md';
+        this.outlined = false;
+        this.removable = false;
+        this.dot = false;
+    }
+    render() {
+        return (h(Host, { key: '2b9a8ab0eabdbb6867bfd60e967b9a10d91aad05' }, h("span", { key: '970651f6e231c62325f2805a8859fbed30ae5045', class: {
+                'tg-tag': true,
+                [`tg-tag--${this.variant}`]: true,
+                [`tg-tag--${this.size}`]: true,
+                'tg-tag--outlined': this.outlined,
+            } }, this.dot && h("span", { key: '30311cba420000b3722aab6f57a3b61e96505ee4', class: "tg-tag__dot" }), h("slot", { key: 'ea882d21197eae879024b487cb2407d0c2fb30b6' }), this.removable && (h("button", { key: '1b2516ebd333017827edf62f9e00f983c4291a73', class: "tg-tag__remove", onClick: () => this.tgRemove.emit(), "aria-label": "Supprimer" }, h("svg", { key: 'ec8b3712b49b3775ae2a01aad242f9bd842d837a', viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" }, h("line", { key: 'acf0dbb549b8a4506ccfb82d96090d09b5380f3e', x1: "2", y1: "2", x2: "8", y2: "8" }), h("line", { key: '8bf5bdb1feff9236312563152ce894c1d3bf9cd0', x1: "8", y1: "2", x2: "2", y2: "8" })))))));
+    }
+    static get is() { return "tg-tag"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-tag.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-tag.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'neutral'",
+                    "resolved": "\"danger\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'neutral'"
+            },
+            "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'"
+            },
+            "outlined": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "outlined",
+                "defaultValue": "false"
+            },
+            "removable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "removable",
+                "defaultValue": "false"
+            },
+            "dot": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dot",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tgRemove",
+                "name": "tgRemove",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,105 @@
+/* ============================================================
+   tg-textarea — Teranga Design System
+   ============================================================ */
+
+:host {
+  display: block;
+}
+
+:host([full-width]) {
+  width: 100%;
+}
+
+.tg-textarea-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--tg-spacing-1-5);
+  font-family: var(--tg-font-family-sans);
+}
+
+.tg-textarea__label {
+  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-normal);
+}
+
+.tg-textarea__required {
+  color: var(--tg-color-danger);
+}
+
+.tg-textarea__field {
+  display: block;
+  width: 100%;
+  min-height: 5rem;
+  padding: var(--tg-spacing-2-5) var(--tg-spacing-3);
+  font-family: var(--tg-font-family-sans);
+  font-size: var(--tg-font-size-sm);
+  line-height: var(--tg-line-height-relaxed);
+  color: var(--tg-color-text-primary);
+  background: var(--tg-color-surface-raised);
+  border: 1px solid var(--tg-color-border);
+  border-radius: var(--tg-radius-lg);
+  outline: none;
+  resize: vertical;
+  transition: border-color var(--tg-duration-fast) var(--tg-ease-default),
+              box-shadow var(--tg-duration-fast) var(--tg-ease-default);
+}
+
+.tg-textarea__field::placeholder {
+  color: var(--tg-color-text-disabled);
+}
+
+.tg-textarea__field:focus {
+  border-color: var(--tg-color-border-focus);
+  box-shadow: var(--tg-focus-ring);
+}
+
+.tg-textarea__field:disabled {
+  background: var(--tg-color-surface-sunken);
+  opacity: 0.6;
+  cursor: not-allowed;
+  resize: none;
+}
+
+.tg-textarea__field--invalid {
+  border-color: var(--tg-color-danger);
+}
+
+.tg-textarea__field--invalid:focus {
+  box-shadow: 0 0 0 3px rgba(227, 27, 35, 0.3);
+}
+
+.tg-textarea__footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.tg-textarea__helper,
+.tg-textarea__error {
+  font-size: var(--tg-font-size-xs);
+  line-height: var(--tg-line-height-normal);
+}
+
+.tg-textarea__helper {
+  color: var(--tg-color-text-secondary);
+}
+
+.tg-textarea__error {
+  color: var(--tg-color-danger);
+  display: flex;
+  align-items: center;
+  gap: var(--tg-spacing-1);
+}
+
+.tg-textarea__counter {
+  font-size: var(--tg-font-size-xs);
+  color: var(--tg-color-text-secondary);
+  margin-left: auto;
+}
+
+.tg-textarea__counter--over {
+  color: var(--tg-color-danger);
+  font-weight: var(--tg-font-weight-semibold);
+}

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

@@ -0,0 +1,357 @@
+import { h, Host } from "@stencil/core";
+export class TgTextarea {
+    constructor() {
+        this.value = '';
+        this.required = false;
+        this.disabled = false;
+        this.readonly = false;
+        this.fullWidth = false;
+        this.rows = 4;
+        this.resize = 'vertical';
+        this.textareaId = `tg-textarea-${textareaCount++}`;
+        this.charCount = 0;
+        this.handleInput = (e) => {
+            const val = e.target.value;
+            this.value = val;
+            this.charCount = val.length;
+            this.tgChange.emit(val);
+        };
+    }
+    componentWillLoad() {
+        this.charCount = this.value.length;
+    }
+    render() {
+        var _a;
+        const isInvalid = !!this.error;
+        const isOver = this.maxlength ? this.charCount > this.maxlength : false;
+        return (h(Host, { key: '17c61812b338b67cde0bbc207e2a06cca0dba010' }, h("div", { key: '62aa91867bc525ccfcb79045d1b0f895dcd1aca7', class: "tg-textarea-wrapper" }, this.label && (h("label", { key: '2dc2d050dbda70059ab11fbfc65d4b1974fa6aa2', class: "tg-textarea__label", htmlFor: this.textareaId }, this.label, this.required && h("span", { key: 'a8bf38a3ee6f4000b6c39d77b8563e4853716523', class: "tg-textarea__required" }, " *"))), h("textarea", Object.assign({ key: 'a65400a7d015264400b9ea9776153e07b23e72af', id: this.textareaId, class: {
+                'tg-textarea__field': true,
+                'tg-textarea__field--invalid': isInvalid,
+            }, value: this.value, placeholder: (_a = this.placeholder) !== null && _a !== void 0 ? _a : '', disabled: this.disabled, readOnly: this.readonly, required: this.required, rows: this.rows }, (this.maxlength != null ? { maxlength: this.maxlength } : {}), { style: { resize: this.resize } }, (isInvalid ? { 'aria-invalid': 'true' } : {}), (isInvalid ? { 'aria-describedby': `${this.textareaId}-error` } : this.helperText ? { 'aria-describedby': `${this.textareaId}-helper` } : {}), { onInput: this.handleInput, onFocus: () => this.tgFocus.emit(), onBlur: () => this.tgBlur.emit() })), h("div", { key: 'cca4b51d16003baa31080e268aa91f459dd31520', class: "tg-textarea__footer" }, isInvalid ? (h("span", { class: "tg-textarea__error", id: `${this.textareaId}-error` }, this.error)) : this.helperText ? (h("span", { class: "tg-textarea__helper", id: `${this.textareaId}-helper` }, this.helperText)) : h("span", null), this.maxlength !== undefined && (h("span", { key: 'f26710c52fd1c23bb3ee639583a76d3c9cc75aa1', class: { 'tg-textarea__counter': true, 'tg-textarea__counter--over': isOver } }, this.charCount, "/", this.maxlength))))));
+    }
+    static get is() { return "tg-textarea"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-textarea.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-textarea.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"
+            },
+            "placeholder": {
+                "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": "placeholder"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "helperText": {
+                "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": "helper-text"
+            },
+            "error": {
+                "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": "error"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "required",
+                "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"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "full-width",
+                "defaultValue": "false"
+            },
+            "rows": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rows",
+                "defaultValue": "4"
+            },
+            "maxlength": {
+                "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": "maxlength"
+            },
+            "resize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'vertical' | 'horizontal' | 'both' | 'none'",
+                    "resolved": "\"both\" | \"horizontal\" | \"none\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "resize",
+                "defaultValue": "'vertical'"
+            },
+            "textareaId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "textarea-id",
+                "defaultValue": "`tg-textarea-${textareaCount++}`"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "charCount": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tgChange",
+                "name": "tgChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "tgFocus",
+                "name": "tgFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "tgBlur",
+                "name": "tgBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+let textareaCount = 0;