@teranga-ds/components 0.1.0

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

@@ -0,0 +1,82 @@
+:host {
+  display: block;
+}
+
+.tg-breadcrumb {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--tg-spacing-2xs, 4px);
+  font-family: var(--tg-font-family, sans-serif);
+  font-size: var(--tg-font-size-sm, 0.8125rem);
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.tg-breadcrumb__item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--tg-spacing-2xs, 4px);
+}
+
+.tg-breadcrumb__link {
+  color: var(--tg-color-text-secondary, #6b7280);
+  text-decoration: none;
+  font-weight: var(--tg-font-weight-medium, 500);
+  transition: color var(--tg-duration-fast, 150ms);
+  border-radius: var(--tg-radius-sm, 4px);
+  padding: 2px 4px;
+  margin: -2px -4px;
+}
+
+.tg-breadcrumb__link:hover {
+  color: var(--tg-color-primary, #00853F);
+}
+
+.tg-breadcrumb__link:focus-visible {
+  outline: none;
+  box-shadow: var(--tg-focus-ring);
+}
+
+.tg-breadcrumb__current {
+  color: var(--tg-color-text, #111827);
+  font-weight: var(--tg-font-weight-semibold, 600);
+  padding: 2px 4px;
+  margin: -2px -4px;
+}
+
+.tg-breadcrumb__separator {
+  color: var(--tg-color-neutral-300, #d1d5db);
+  display: inline-flex;
+  align-items: center;
+  user-select: none;
+}
+
+.tg-breadcrumb__separator svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* Collapsed breadcrumb */
+.tg-breadcrumb__ellipsis {
+  appearance: none;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--tg-color-text-secondary, #6b7280);
+  font-size: var(--tg-font-size-sm, 0.8125rem);
+  padding: 2px 4px;
+  border-radius: var(--tg-radius-sm, 4px);
+  transition: color var(--tg-duration-fast, 150ms), background var(--tg-duration-fast, 150ms);
+}
+
+.tg-breadcrumb__ellipsis:hover {
+  background: var(--tg-color-neutral-100, #f3f4f6);
+  color: var(--tg-color-text, #111827);
+}
+
+.tg-breadcrumb__ellipsis:focus-visible {
+  outline: none;
+  box-shadow: var(--tg-focus-ring);
+}

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

@@ -0,0 +1,111 @@
+import { h, Host } from "@stencil/core";
+export class TgBreadcrumb {
+    constructor() {
+        this.items = [];
+        this.maxItems = 0;
+        this.expanded = false;
+    }
+    get parsedItems() {
+        if (typeof this.items === 'string') {
+            try {
+                return JSON.parse(this.items);
+            }
+            catch (_a) {
+                return [];
+            }
+        }
+        return this.items;
+    }
+    renderSeparator() {
+        return (h("span", { class: "tg-breadcrumb__separator", "aria-hidden": "true" }, h("svg", { viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" }, h("polyline", { points: "5 3 9 7 5 11" }))));
+    }
+    render() {
+        var _a;
+        let items = this.parsedItems;
+        const shouldCollapse = this.maxItems > 0 && items.length > this.maxItems && !this.expanded;
+        return (h(Host, { key: '713d7c835e0185576258e0a44410fe26d9e453bc' }, h("nav", { key: 'bd2763aafcbcde1eb37a28f8bfc8f9625d9d6bab', "aria-label": "Fil d'Ariane" }, h("ol", { key: '1b44c93e04c6702244336612ff28c427e68b9b0f', class: "tg-breadcrumb" }, shouldCollapse ? ([
+            h("li", { class: "tg-breadcrumb__item" }, h("a", { class: "tg-breadcrumb__link", href: (_a = items[0].href) !== null && _a !== void 0 ? _a : '#' }, items[0].label), this.renderSeparator()),
+            h("li", { class: "tg-breadcrumb__item" }, h("button", { class: "tg-breadcrumb__ellipsis", onClick: () => this.expanded = true, "aria-label": "Voir plus" }, "\u2026"), this.renderSeparator()),
+            ...items.slice(-2).map((item, i, arr) => {
+                var _a;
+                return (h("li", { class: "tg-breadcrumb__item" }, i < arr.length - 1 ? [
+                    h("a", { class: "tg-breadcrumb__link", href: (_a = item.href) !== null && _a !== void 0 ? _a : '#' }, item.label),
+                    this.renderSeparator(),
+                ] : (h("span", { class: "tg-breadcrumb__current", "aria-current": "page" }, item.label))));
+            }),
+        ]) : (items.map((item, i) => {
+            var _a;
+            return (h("li", { class: "tg-breadcrumb__item" }, i < items.length - 1 ? [
+                h("a", { class: "tg-breadcrumb__link", href: (_a = item.href) !== null && _a !== void 0 ? _a : '#' }, item.label),
+                this.renderSeparator(),
+            ] : (h("span", { class: "tg-breadcrumb__current", "aria-current": "page" }, item.label))));
+        }))))));
+    }
+    static get is() { return "tg-breadcrumb"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-breadcrumb.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-breadcrumb.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | TgBreadcrumbItem[]",
+                    "resolved": "TgBreadcrumbItem[] | string",
+                    "references": {
+                        "TgBreadcrumbItem": {
+                            "location": "local",
+                            "path": "/Users/mahykane/work/Teranga-Design-Systems/packages/components/src/components/tg-breadcrumb/tg-breadcrumb.tsx",
+                            "id": "src/components/tg-breadcrumb/tg-breadcrumb.tsx::TgBreadcrumbItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "items",
+                "defaultValue": "[]"
+            },
+            "maxItems": {
+                "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-items",
+                "defaultValue": "0"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "expanded": {}
+        };
+    }
+}

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

@@ -0,0 +1,245 @@
+/* ============================================================
+   tg-button — Teranga Design System
+   ============================================================ */
+
+:host {
+  display: inline-block;
+}
+
+:host([full-width]) {
+  display: block;
+  width: 100%;
+}
+
+/* ── Base */
+.tg-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--tg-spacing-2);
+  font-family: var(--tg-font-family-sans);
+  font-weight: var(--tg-font-weight-semibold);
+  line-height: var(--tg-line-height-tight);
+  white-space: nowrap;
+  cursor: pointer;
+  border: 1px solid transparent;
+  border-radius: var(--tg-radius-lg);
+  text-decoration: none;
+  transition:
+    background-color var(--tg-duration-normal) var(--tg-ease-default),
+    border-color var(--tg-duration-normal) var(--tg-ease-default),
+    color var(--tg-duration-normal) var(--tg-ease-default),
+    box-shadow var(--tg-duration-normal) var(--tg-ease-default),
+    opacity var(--tg-duration-normal) var(--tg-ease-default);
+  outline: none;
+  position: relative;
+  overflow: hidden;
+}
+
+.tg-button:focus-visible {
+  box-shadow: var(--tg-focus-ring);
+  outline: none;
+}
+
+/* ── Sizes */
+.tg-button--sm {
+  height: 2rem;
+  padding: 0 var(--tg-spacing-3);
+  font-size: var(--tg-font-size-sm);
+}
+
+.tg-button--md {
+  height: 2.5rem;
+  padding: 0 var(--tg-spacing-4);
+  font-size: var(--tg-font-size-sm);
+}
+
+.tg-button--lg {
+  height: 3rem;
+  padding: 0 var(--tg-spacing-6);
+  font-size: var(--tg-font-size-md);
+}
+
+/* ── Variants: Primary (Vert Sénégalais) */
+.tg-button--primary {
+  background-color: var(--tg-color-primary);
+  border-color: var(--tg-color-primary);
+  color: var(--tg-color-primary-on);
+}
+
+.tg-button--primary:hover:not(.tg-button--disabled):not(.tg-button--loading) {
+  background-color: var(--tg-color-primary-hover);
+  border-color: var(--tg-color-primary-hover);
+}
+
+.tg-button--primary:active:not(.tg-button--disabled):not(.tg-button--loading) {
+  background-color: var(--tg-color-primary-active);
+  border-color: var(--tg-color-primary-active);
+}
+
+/* ── Variants: Secondary (Or Sénégalais) */
+.tg-button--secondary {
+  background-color: var(--tg-color-secondary);
+  border-color: var(--tg-color-secondary);
+  color: var(--tg-color-secondary-on);
+}
+
+.tg-button--secondary:hover:not(.tg-button--disabled):not(.tg-button--loading) {
+  background-color: var(--tg-color-secondary-hover);
+  border-color: var(--tg-color-secondary-hover);
+}
+
+.tg-button--secondary:active:not(.tg-button--disabled):not(.tg-button--loading) {
+  background-color: var(--tg-color-secondary-active);
+  border-color: var(--tg-color-secondary-active);
+}
+
+/* ── Variants: Outline */
+.tg-button--outline {
+  background-color: transparent;
+  border-color: var(--tg-color-primary);
+  color: var(--tg-color-primary);
+}
+
+.tg-button--outline:hover:not(.tg-button--disabled):not(.tg-button--loading) {
+  background-color: var(--tg-color-primary-subtle);
+}
+
+.tg-button--outline:active:not(.tg-button--disabled):not(.tg-button--loading) {
+  background-color: var(--tg-color-primary-muted);
+}
+
+/* ── Variants: Ghost */
+.tg-button--ghost {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--tg-color-primary);
+}
+
+.tg-button--ghost:hover:not(.tg-button--disabled):not(.tg-button--loading) {
+  background-color: var(--tg-color-primary-subtle);
+}
+
+.tg-button--ghost:active:not(.tg-button--disabled):not(.tg-button--loading) {
+  background-color: var(--tg-color-primary-muted);
+}
+
+/* ── Variants: Danger */
+.tg-button--danger {
+  background-color: var(--tg-color-danger);
+  border-color: var(--tg-color-danger);
+  color: var(--tg-color-danger-on);
+}
+
+.tg-button--danger:hover:not(.tg-button--disabled):not(.tg-button--loading) {
+  background-color: var(--tg-color-danger-hover);
+  border-color: var(--tg-color-danger-hover);
+}
+
+.tg-button--danger:active:not(.tg-button--disabled):not(.tg-button--loading) {
+  background-color: var(--tg-color-danger-active);
+  border-color: var(--tg-color-danger-active);
+}
+
+/* ── States */
+.tg-button--disabled,
+.tg-button[disabled] {
+  opacity: 0.45;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.tg-button--full-width {
+  width: 100%;
+}
+
+/* ── Loading Spinner */
+.tg-button--loading {
+  cursor: wait;
+}
+
+.tg-button__spinner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  animation: tg-spin 0.75s linear infinite;
+}
+
+.tg-button--sm .tg-button__spinner { width: 14px; height: 14px; }
+.tg-button--md .tg-button__spinner { width: 16px; height: 16px; }
+.tg-button--lg .tg-button__spinner { width: 20px; height: 20px; }
+
+.tg-button__spinner svg {
+  width: 100%;
+  height: 100%;
+}
+
+@keyframes tg-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ── Ripple click effect */
+.tg-button::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(circle, rgba(255,255,255,0.3) 10%, transparent 60%);
+  opacity: 0;
+  transform: scale(0);
+  transition: opacity 0.3s, transform 0.3s;
+  pointer-events: none;
+}
+
+.tg-button:active:not(.tg-button--disabled):not(.tg-button--loading)::after {
+  opacity: 1;
+  transform: scale(2.5);
+  transition: 0s;
+}
+
+/* ── Scale on press */
+.tg-button:active:not(.tg-button--disabled):not(.tg-button--loading) {
+  transform: scale(0.97);
+}
+
+/* ── Hover lift with colored shadows */
+.tg-button--primary:hover:not(.tg-button--disabled):not(.tg-button--loading) {
+  transform: translateY(-1px);
+  box-shadow: var(--tg-shadow-primary, 0 4px 14px -3px rgba(0, 133, 63, 0.35));
+}
+
+.tg-button--secondary:hover:not(.tg-button--disabled):not(.tg-button--loading) {
+  transform: translateY(-1px);
+  box-shadow: var(--tg-shadow-secondary, 0 4px 14px -3px rgba(200, 170, 0, 0.3));
+}
+
+.tg-button--danger:hover:not(.tg-button--disabled):not(.tg-button--loading) {
+  transform: translateY(-1px);
+  box-shadow: var(--tg-shadow-danger, 0 4px 14px -3px rgba(227, 27, 35, 0.3));
+}
+
+/* ── Letter spacing for button labels */
+.tg-button {
+  letter-spacing: 0.01em;
+}
+
+/* ── Icon-only */
+.tg-button--icon-only.tg-button--sm { width: 2rem; padding: 0; }
+.tg-button--icon-only.tg-button--md { width: 2.5rem; padding: 0; }
+.tg-button--icon-only.tg-button--lg { width: 3rem; padding: 0; }
+
+/* ── Label */
+.tg-button__label {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* ── Slots for icons */
+::slotted([slot='icon-start']),
+::slotted([slot='icon-end']) {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  width: 1em;
+  height: 1em;
+}

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

@@ -0,0 +1,239 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @component tg-button
+ * @description Primary interactive element for triggering actions.
+ *
+ * @slot default — Button label text or content
+ * @slot icon-start — Icon placed before the label
+ * @slot icon-end — Icon placed after the label
+ *
+ * @example
+ * <tg-button variant="primary">Se connecter</tg-button>
+ * <tg-button variant="outline" size="sm">Annuler</tg-button>
+ */
+export class TgButton {
+    constructor() {
+        /** Visual style of the button */
+        this.variant = 'primary';
+        /** Size of the button */
+        this.size = 'md';
+        /** Disables the button */
+        this.disabled = false;
+        /** Shows a loading spinner and disables interaction */
+        this.loading = false;
+        /** Stretches the button to full container width */
+        this.fullWidth = false;
+        /** Native button type attribute */
+        this.type = 'button';
+        this.handleClick = () => {
+            if (!this.disabled && !this.loading) {
+                this.tgClick.emit();
+            }
+        };
+    }
+    render() {
+        const Tag = this.href ? 'a' : 'button';
+        const attrs = this.href
+            ? Object.assign(Object.assign({ href: this.href }, (this.target ? { target: this.target } : {})), (this.target === '_blank' ? { rel: 'noopener noreferrer' } : {})) : { type: this.type, disabled: this.disabled || this.loading };
+        return (h(Host, { key: '85193b6b5b939d7a911650820cfa57604ef66034' }, h(Tag, Object.assign({ key: 'be304319fd4e72d315e0942b409e2f356ad375fc', class: {
+                'tg-button': true,
+                [`tg-button--${this.variant}`]: true,
+                [`tg-button--${this.size}`]: true,
+                'tg-button--full-width': this.fullWidth,
+                'tg-button--loading': this.loading,
+                'tg-button--disabled': this.disabled,
+            } }, attrs, { "aria-disabled": this.disabled || this.loading ? 'true' : undefined, "aria-busy": this.loading ? 'true' : undefined, onClick: this.handleClick }), this.loading && (h("span", { key: '38808b3251dbeb279b2a02eb8b7a7afde968695c', class: "tg-button__spinner", "aria-hidden": "true" }, h("svg", { key: '46043cbb407c33daef90131ef03b93e039c4c9a4', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '8a44304e7145904cda62eb5129515ed25d3e99e6', cx: "12", cy: "12", r: "10", stroke: "currentColor", "stroke-width": "3", opacity: "0.25" }), h("path", { key: '21fb0610a8c1db5cacc3b223a8db0e10d4b786a9', d: "M12 2a10 10 0 0 1 10 10", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round" })))), h("slot", { key: '0e300e079a33a79379d3becae14468f783673550', name: "icon-start" }), h("span", { key: 'e041222fab4cbebec2619f7e17b8b87fb37995a8', class: "tg-button__label" }, h("slot", { key: 'ae2e3a577c8167746948cda5328597da034f630b' })), h("slot", { key: '360dab87f77ed5008fb99eebc52b752970241a3c', name: "icon-end" }))));
+    }
+    static get is() { return "tg-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'",
+                    "resolved": "\"danger\" | \"ghost\" | \"outline\" | \"primary\" | \"secondary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual style of the button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'primary'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows a loading spinner and disables interaction"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stretches the button to full container width"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "full-width",
+                "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'button' | 'submit' | 'reset'",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Native button type attribute"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'button'"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders the button as an anchor tag"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'_blank' | '_self' | '_parent' | '_top'",
+                    "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Anchor target (requires href)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tgClick",
+                "name": "tgClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on click when not disabled or loading"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}