@teranga-ds/components 0.1.0

package/dist/collection/components/tg-rich-editor/tg-rich-editor.css

@@ -0,0 +1,10 @@
+:host { display: block; }
+.tg-rich-editor { font-family: var(--tg-font-family-sans); border: 1px solid var(--tg-color-border-strong); border-radius: var(--tg-radius-lg); overflow: hidden; background: var(--tg-color-surface-raised); transition: border-color var(--tg-duration-fast), box-shadow var(--tg-duration-fast); }
+.tg-rich-editor:focus-within { border-color: var(--tg-color-border-focus); box-shadow: var(--tg-focus-ring); }
+.tg-re__label { display: block; font-size: var(--tg-font-size-sm); font-weight: var(--tg-font-weight-medium); color: var(--tg-color-text-primary); padding: var(--tg-spacing-2) var(--tg-spacing-3) 0; }
+.tg-re__toolbar { display: flex; align-items: center; gap: var(--tg-spacing-0-5); padding: var(--tg-spacing-2) var(--tg-spacing-3); border-bottom: 1px solid var(--tg-color-border); background: var(--tg-color-surface-sunken); }
+.tg-re__tool { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; background: none; border: none; border-radius: var(--tg-radius-md); cursor: pointer; color: var(--tg-color-text-primary); font-size: var(--tg-font-size-sm); transition: background var(--tg-duration-fast); }
+.tg-re__tool:hover { background: var(--tg-color-primary-subtle); color: var(--tg-color-primary); }
+.tg-re__divider { width: 1px; height: 1.25rem; background: var(--tg-color-border); margin: 0 var(--tg-spacing-1); }
+.tg-re__content { padding: var(--tg-spacing-3); outline: none; font-size: var(--tg-font-size-sm); line-height: var(--tg-line-height-relaxed); color: var(--tg-color-text-primary); }
+.tg-re__content:empty::before { content: attr(data-placeholder); color: var(--tg-color-text-disabled); }

package/dist/collection/components/tg-rich-editor/tg-rich-editor.js

@@ -0,0 +1,151 @@
+import { h, Host } from "@stencil/core";
+export class TgRichEditor {
+    constructor() {
+        this.placeholder = 'Commencez à écrire…';
+        this.disabled = false;
+        this.minHeight = '12rem';
+        this.html = '';
+        this.handleInput = (e) => { this.html = e.target.innerHTML; this.tgChange.emit(this.html); };
+    }
+    componentWillLoad() { var _a; this.html = (_a = this.value) !== null && _a !== void 0 ? _a : ''; }
+    render() {
+        return (h(Host, { key: '46af0da5e3c3d960f0ab41192bd9810ba5bbdae6' }, h("div", { key: 'a44679b1edd4a5574d2762e520225cb5a5657a8d', class: "tg-rich-editor" }, this.label && h("label", { key: '518ec2200f693893b6034eed2d880e80c8824c7d', class: "tg-re__label" }, this.label), h("div", { key: 'a6644abe6371aa2ef94b28addce5df863b20d959', class: "tg-re__toolbar" }, h("button", { key: '5a4320a9cc68f72dfd28b7c2211871af04b0dda2', type: "button", class: "tg-re__tool", onClick: () => document.execCommand('bold', false), title: "Gras" }, h("strong", { key: 'b2dd47697c73abe19949fcb3664bac6b2e3e6477' }, "G")), h("button", { key: '5b0c4dbdb7daca6b347ece6e8c6f732d285847f7', type: "button", class: "tg-re__tool", onClick: () => document.execCommand('italic', false), title: "Italique" }, h("em", { key: '5319a1e5e745d8bb7c6860a50847357b13577561' }, "I")), h("button", { key: '7d697c625f9669cd52c842ef8d24489cf9e00dfa', type: "button", class: "tg-re__tool", onClick: () => document.execCommand('underline', false), title: "Soulign\u00E9" }, h("u", { key: '47f27327a5568e1c82665fec209aa1859284be0c' }, "S")), h("span", { key: '6a50b118616c39ac0a0352f9cc1afaa201f9ed70', class: "tg-re__divider" }), h("button", { key: '9a8501b87051c7c6acf6c6abe41ad1d2c91acf6b', type: "button", class: "tg-re__tool", onClick: () => document.execCommand('insertUnorderedList', false), title: "Liste" }, "\u2022"), h("button", { key: '45376b4dcd2d9c18ae6ffdc84dcc088cbe926222', type: "button", class: "tg-re__tool", onClick: () => document.execCommand('insertOrderedList', false), title: "Num\u00E9rot\u00E9e" }, "1.")), h("div", { key: '8717e23ac526b1f34e460947c7ec71ee9ce19226', class: "tg-re__content", contentEditable: !this.disabled, innerHTML: this.html, onInput: this.handleInput, "data-placeholder": this.placeholder, style: { minHeight: this.minHeight } }))));
+    }
+    static get is() { return "tg-rich-editor"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-rich-editor.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-rich-editor.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": "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"
+            },
+            "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": "'Commencez \u00E0 \u00E9crire\u2026'"
+            },
+            "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"
+            },
+            "minHeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-height",
+                "defaultValue": "'12rem'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "html": {}
+        };
+    }
+    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-role-badge/tg-role-badge.css

@@ -0,0 +1,7 @@
+:host { display: inline-flex; }
+.tg-rb { display: inline-flex; align-items: center; gap: var(--tg-spacing-1); padding: var(--tg-spacing-0-5) var(--tg-spacing-2); border-radius: var(--tg-radius-full); font-family: var(--tg-font-family-sans); font-size: var(--tg-font-size-xs); font-weight: var(--tg-font-weight-medium); }
+.tg-rb--admin { background: var(--tg-color-danger-subtle); color: var(--tg-color-danger); }
+.tg-rb--editor { background: var(--tg-color-primary-subtle); color: var(--tg-color-primary); }
+.tg-rb--viewer { background: var(--tg-color-surface-sunken); color: var(--tg-color-text-secondary); }
+.tg-rb--custom { background: var(--tg-color-info-subtle); color: var(--tg-color-info); }
+.tg-rb__icon { font-size: 0.75rem; }

package/dist/collection/components/tg-role-badge/tg-role-badge.js

@@ -0,0 +1,85 @@
+import { h, Host } from "@stencil/core";
+export class TgRoleBadge {
+    constructor() {
+        this.role = '';
+        this.variant = 'custom';
+    }
+    render() {
+        return (h(Host, { key: '5d497b0a457392d26913fefb112a701dfdf6aef2' }, h("span", { key: '5c3f035744fc7271f4bef128e4b44fbaf1aca004', class: 'tg-rb tg-rb--' + this.variant }, this.icon && h("span", { key: '8b99e5b3cc14fb578a51a62aa5757a0d7735cc7e', class: "tg-rb__icon" }, this.icon), h("span", { key: 'aca74aa2fe597a6cab5a0e8e065149d7dc366bc6', class: "tg-rb__label" }, this.role))));
+    }
+    static get is() { return "tg-role-badge"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-role-badge.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-role-badge.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "role": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "role",
+                "defaultValue": "''"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'admin' | 'editor' | 'viewer' | 'custom'",
+                    "resolved": "\"admin\" | \"custom\" | \"editor\" | \"viewer\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'custom'"
+            },
+            "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"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,144 @@
+/* ============================================================
+   tg-select — Teranga Design System
+   ============================================================ */
+
+:host {
+  display: block;
+}
+
+:host([full-width]) {
+  width: 100%;
+}
+
+.tg-select-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--tg-spacing-1-5);
+  font-family: var(--tg-font-family-sans);
+  position: relative;
+}
+
+.tg-select__label {
+  font-size: var(--tg-font-size-sm);
+  font-weight: var(--tg-font-weight-medium);
+  color: var(--tg-color-text-primary);
+}
+
+.tg-select__required { color: var(--tg-color-danger); }
+
+.tg-select__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--tg-spacing-2);
+  width: 100%;
+  padding: 0 var(--tg-spacing-3);
+  font-family: inherit;
+  font-size: var(--tg-font-size-sm);
+  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);
+  cursor: pointer;
+  outline: none;
+  transition: border-color var(--tg-duration-fast) var(--tg-ease-default),
+              box-shadow var(--tg-duration-fast) var(--tg-ease-default);
+}
+
+.tg-select__trigger:focus-visible {
+  border-color: var(--tg-color-border-focus);
+  box-shadow: var(--tg-focus-ring);
+}
+
+.tg-select__trigger--placeholder {
+  color: var(--tg-color-text-disabled);
+}
+
+.tg-select__trigger--invalid {
+  border-color: var(--tg-color-danger);
+}
+
+/* Sizes */
+.tg-select-wrapper--sm .tg-select__trigger { height: 2rem; font-size: var(--tg-font-size-xs); }
+.tg-select-wrapper--md .tg-select__trigger { height: 2.5rem; }
+.tg-select-wrapper--lg .tg-select__trigger { height: 3rem; font-size: var(--tg-font-size-md); }
+
+.tg-select__trigger:disabled {
+  background: var(--tg-color-surface-sunken);
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.tg-select__chevron {
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+  transition: transform var(--tg-duration-fast) var(--tg-ease-default);
+  color: var(--tg-color-text-secondary);
+}
+
+.tg-select__chevron--open {
+  transform: rotate(180deg);
+}
+
+.tg-select__dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: var(--tg-spacing-1);
+  background: var(--tg-color-surface-raised);
+  border: 1px solid var(--tg-color-border);
+  border-radius: var(--tg-radius-lg);
+  box-shadow: var(--tg-shadow-lg);
+  z-index: 1000;
+  max-height: 16rem;
+  overflow-y: auto;
+  padding: var(--tg-spacing-1) 0;
+  animation: tg-select-enter var(--tg-duration-fast) var(--tg-ease-out);
+}
+
+@keyframes tg-select-enter {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.tg-select__option {
+  display: flex;
+  align-items: center;
+  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: background var(--tg-duration-fast) var(--tg-ease-default);
+}
+
+.tg-select__option:hover {
+  background: var(--tg-color-primary-subtle);
+}
+
+.tg-select__option--selected {
+  background: var(--tg-color-primary-subtle);
+  color: var(--tg-color-primary);
+  font-weight: var(--tg-font-weight-medium);
+}
+
+.tg-select__option--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.tg-select__check {
+  width: 1em;
+  height: 1em;
+  margin-right: var(--tg-spacing-2);
+  color: var(--tg-color-primary);
+}
+
+.tg-select__helper,
+.tg-select__error {
+  font-size: var(--tg-font-size-xs);
+}
+
+.tg-select__helper { color: var(--tg-color-text-secondary); }
+.tg-select__error { color: var(--tg-color-danger); }