@teranga-ds/components 0.1.0

package/dist/collection/components/tg-confirm-dialog/tg-confirm-dialog.js

@@ -0,0 +1,204 @@
+import { h, Host } from "@stencil/core";
+export class TgConfirmDialog {
+    constructor() {
+        this.open = false;
+        this.heading = 'Confirmer';
+        this.message = '';
+        this.confirmLabel = 'Confirmer';
+        this.cancelLabel = 'Annuler';
+        this.variant = 'default';
+    }
+    render() {
+        if (!this.open)
+            return h(Host, null);
+        return (h(Host, null, h("div", { class: "tg-cd__overlay", onClick: () => this.tgCancel.emit() }, h("div", { class: 'tg-cd tg-cd--' + this.variant, role: "alertdialog", onClick: (e) => e.stopPropagation() }, this.icon && h("div", { class: "tg-cd__icon" }, this.icon), h("h3", { class: "tg-cd__title" }, this.heading), h("p", { class: "tg-cd__msg" }, this.message), h("div", { class: "tg-cd__actions" }, h("button", { class: "tg-cd__btn tg-cd__btn--cancel", type: "button", onClick: () => this.tgCancel.emit() }, this.cancelLabel), h("button", { class: 'tg-cd__btn tg-cd__btn--confirm tg-cd__btn--' + this.variant, type: "button", onClick: () => this.tgConfirm.emit() }, this.confirmLabel))))));
+    }
+    static get is() { return "tg-confirm-dialog"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-confirm-dialog.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-confirm-dialog.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading",
+                "defaultValue": "'Confirmer'"
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "message",
+                "defaultValue": "''"
+            },
+            "confirmLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "confirm-label",
+                "defaultValue": "'Confirmer'"
+            },
+            "cancelLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cancel-label",
+                "defaultValue": "'Annuler'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'danger' | 'warning'",
+                    "resolved": "\"danger\" | \"default\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            },
+            "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"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tgConfirm",
+                "name": "tgConfirm",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "tgCancel",
+                "name": "tgCancel",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/tg-context-menu/tg-context-menu.css

@@ -0,0 +1,12 @@
+:host { display: contents; }
+.tg-ctx { position: fixed; z-index: 10000; min-width: 12rem; 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); padding: var(--tg-spacing-1) 0; font-family: var(--tg-font-family-sans); animation: tg-ctx-in var(--tg-duration-fast) var(--tg-ease-out); }
+@keyframes tg-ctx-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
+.tg-ctx__item { display: flex; align-items: center; gap: var(--tg-spacing-2); width: 100%; padding: var(--tg-spacing-2) var(--tg-spacing-3); background: none; border: none; cursor: pointer; font-size: var(--tg-font-size-sm); color: var(--tg-color-text-primary); transition: background var(--tg-duration-fast); text-align: left; }
+.tg-ctx__item:hover:not(:disabled) { background: var(--tg-color-primary-subtle); }
+.tg-ctx__item--danger { color: var(--tg-color-danger); }
+.tg-ctx__item--danger:hover:not(:disabled) { background: var(--tg-color-danger-subtle); }
+.tg-ctx__item--disabled { opacity: 0.4; cursor: not-allowed; }
+.tg-ctx__icon { font-size: 1rem; flex-shrink: 0; }
+.tg-ctx__label { flex: 1; }
+.tg-ctx__shortcut { margin-left: auto; font-family: var(--tg-font-family-mono); font-size: var(--tg-font-size-xs); color: var(--tg-color-text-disabled); }
+.tg-ctx__divider { height: 1px; background: var(--tg-color-border); margin: var(--tg-spacing-1) 0; }

package/dist/collection/components/tg-context-menu/tg-context-menu.js

@@ -0,0 +1,107 @@
+import { h, Host } from "@stencil/core";
+export class TgContextMenu {
+    constructor() {
+        this.items = [];
+        this.visible = false;
+        this.x = 0;
+        this.y = 0;
+    }
+    get parsed() {
+        if (typeof this.items === 'string') {
+            try {
+                return JSON.parse(this.items);
+            }
+            catch (_a) {
+                return [];
+            }
+        }
+        return this.items;
+    }
+    onContext(e) { e.preventDefault(); this.x = e.clientX; this.y = e.clientY; this.visible = true; }
+    onDocClick() { this.visible = false; }
+    render() {
+        return (h(Host, { key: '0e56291c2114cb180a64855f9fc8bd5e10b69b9d' }, h("slot", { key: '8711f7eda110514f39136bc5995e42a909e4a6b5' }), this.visible && (h("div", { key: '67d9386b7fc248c30a6387ae8677145f4b2d98dd', class: "tg-ctx", style: { left: this.x + 'px', top: this.y + 'px' }, onClick: (e) => e.stopPropagation() }, this.parsed.map(item => item.divider ? h("div", { class: "tg-ctx__divider" }) : (h("button", Object.assign({ class: { 'tg-ctx__item': true, 'tg-ctx__item--danger': item.danger === true, 'tg-ctx__item--disabled': item.disabled === true }, type: "button" }, (item.disabled ? { disabled: true } : {}), { onClick: () => { this.tgAction.emit(item.id); this.visible = false; } }), item.icon && h("span", { class: "tg-ctx__icon" }, item.icon), h("span", { class: "tg-ctx__label" }, item.label), item.shortcut && h("kbd", { class: "tg-ctx__shortcut" }, item.shortcut))))))));
+    }
+    static get is() { return "tg-context-menu"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-context-menu.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-context-menu.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | ContextMenuItem[]",
+                    "resolved": "ContextMenuItem[] | string",
+                    "references": {
+                        "ContextMenuItem": {
+                            "location": "local",
+                            "path": "/Users/mahykane/work/Teranga-Design-Systems/packages/components/src/components/tg-context-menu/tg-context-menu.tsx",
+                            "id": "src/components/tg-context-menu/tg-context-menu.tsx::ContextMenuItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "items",
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "visible": {},
+            "x": {},
+            "y": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tgAction",
+                "name": "tgAction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "contextmenu",
+                "method": "onContext",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "onDocClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/tg-data-table/tg-data-table.css

@@ -0,0 +1,19 @@
+:host { display: block; }
+.tg-dt { font-family: var(--tg-font-family-sans); border: 1px solid var(--tg-color-border); border-radius: var(--tg-radius-xl); overflow: hidden; background: var(--tg-color-surface-raised); position: relative; }
+.tg-dt__loader { position: absolute; top: 0; left: 0; right: 0; height: 3px; overflow: hidden; z-index: 10; }
+.tg-dt__loader-bar { height: 100%; width: 40%; background: var(--tg-color-primary); border-radius: var(--tg-radius-full); animation: tg-dt-load 1.2s ease-in-out infinite; }
+@keyframes tg-dt-load { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }
+.tg-dt__scroll { overflow-x: auto; }
+.tg-dt__table { width: 100%; border-collapse: collapse; }
+.tg-dt__th { padding: var(--tg-spacing-3) var(--tg-spacing-4); text-align: left; font-size: var(--tg-font-size-xs); font-weight: var(--tg-font-weight-semibold); color: var(--tg-color-text-secondary); text-transform: uppercase; letter-spacing: var(--tg-tracking-wide); background: var(--tg-color-surface-sunken); border-bottom: 1px solid var(--tg-color-border); white-space: nowrap; }
+.tg-dt__th--sortable { cursor: pointer; user-select: none; }
+.tg-dt__th--sortable:hover { color: var(--tg-color-primary); }
+.tg-dt__th-content { display: inline-flex; align-items: center; gap: var(--tg-spacing-1); }
+.tg-dt__sort-icon { font-size: 0.75rem; }
+.tg-dt__th--check, .tg-dt__td--check { width: 2.5rem; text-align: center; }
+.tg-dt__td { padding: var(--tg-spacing-3) var(--tg-spacing-4); font-size: var(--tg-font-size-sm); color: var(--tg-color-text-primary); border-bottom: 1px solid var(--tg-color-border); }
+.tg-dt--compact .tg-dt__th, .tg-dt--compact .tg-dt__td { padding: var(--tg-spacing-2) var(--tg-spacing-3); }
+.tg-dt__row--striped { background: var(--tg-color-surface-sunken); }
+.tg-dt__row--selected { background: var(--tg-color-primary-subtle); }
+.tg-dt__row:hover { background: var(--tg-color-primary-subtle); }
+.tg-dt__empty { text-align: center; padding: var(--tg-spacing-8); color: var(--tg-color-text-disabled); font-style: italic; }

package/dist/collection/components/tg-data-table/tg-data-table.js

@@ -0,0 +1,287 @@
+import { h, Host } from "@stencil/core";
+export class TgDataTable {
+    constructor() {
+        this.columns = [];
+        this.rows = [];
+        this.selectable = false;
+        this.striped = true;
+        this.compact = false;
+        this.loading = false;
+        this.emptyText = 'Aucune donn\u00e9e';
+        this.sortKey = '';
+        this.sortDir = 'asc';
+        this.selectedRows = new Set();
+        this.toggleAll = () => {
+            if (this.selectedRows.size === this.data.length)
+                this.selectedRows = new Set();
+            else
+                this.selectedRows = new Set(this.data.map((_, i) => i));
+            this.tgRowSelect.emit(Array.from(this.selectedRows));
+        };
+    }
+    get cols() {
+        if (typeof this.columns === 'string') {
+            try {
+                return JSON.parse(this.columns);
+            }
+            catch (_a) {
+                return [];
+            }
+        }
+        return this.columns;
+    }
+    get data() {
+        if (typeof this.rows === 'string') {
+            try {
+                return JSON.parse(this.rows);
+            }
+            catch (_a) {
+                return [];
+            }
+        }
+        return this.rows;
+    }
+    get sortedData() {
+        if (!this.sortKey)
+            return this.data;
+        return [...this.data].sort((a, b) => {
+            const av = a[this.sortKey];
+            const bv = b[this.sortKey];
+            const cmp = typeof av === 'number' ? av - bv : String(av).localeCompare(String(bv));
+            return this.sortDir === 'asc' ? cmp : -cmp;
+        });
+    }
+    handleSort(col) {
+        if (!col.sortable)
+            return;
+        if (this.sortKey === col.key)
+            this.sortDir = this.sortDir === 'asc' ? 'desc' : 'asc';
+        else {
+            this.sortKey = col.key;
+            this.sortDir = 'asc';
+        }
+        this.tgSort.emit({ key: this.sortKey, dir: this.sortDir });
+    }
+    toggleRow(idx) {
+        const s = new Set(this.selectedRows);
+        if (s.has(idx))
+            s.delete(idx);
+        else
+            s.add(idx);
+        this.selectedRows = s;
+        this.tgRowSelect.emit(Array.from(s));
+    }
+    render() {
+        const cols = this.cols;
+        const rows = this.sortedData;
+        return (h(Host, { key: '41340ae2532212cceb01cfca73359f91b99e76fa' }, h("div", { key: '7376c54b66c6037b227ce65c4f2e3e7b0bcda594', class: { 'tg-dt': true, 'tg-dt--compact': this.compact } }, this.loading && h("div", { key: '756436d24ca9bf79ba1fd6dfd720d75f1f0d5747', class: "tg-dt__loader" }, h("div", { key: '62c76d0b712a49653df7b60688293096ac8849b6', class: "tg-dt__loader-bar" })), h("div", { key: '8766278921bf7329af9d093cf6aaf3097bec07e7', class: "tg-dt__scroll" }, h("table", { key: '6e55bcbb7f2c3abc0ae38345afad6198c07a3ccb', class: "tg-dt__table" }, h("thead", { key: 'af7ee25ceec1bf9c3f47c17ba7c3dead48311def' }, h("tr", { key: '66147dd8631c01b5471a830cdd8538f3e660f058' }, this.selectable && h("th", { key: '35e58a867f102a8253cacae32a0c4151cfd7c2ad', class: "tg-dt__th tg-dt__th--check" }, h("input", { key: '1448d9ae15d0dea2abb47ca8c03348d54529705c', type: "checkbox", checked: this.selectedRows.size === rows.length && rows.length > 0, onChange: this.toggleAll })), cols.map(col => (h("th", { class: { 'tg-dt__th': true, 'tg-dt__th--sortable': col.sortable === true }, style: col.width ? { width: col.width } : {}, onClick: () => this.handleSort(col) }, h("span", { class: "tg-dt__th-content" }, col.label, col.sortable && h("span", { class: "tg-dt__sort-icon" }, this.sortKey === col.key ? (this.sortDir === 'asc' ? '\u2191' : '\u2193') : '\u2195'))))))), h("tbody", { key: '3ddcac1c70513b9513eedf3d22296f5781f21faa' }, rows.length === 0 && h("tr", { key: '136db0f95b7731b86739743f1d6f5ec36ddf05a0' }, h("td", { key: 'f55185e172a22eafef9906e3b7d592ad281e1cd6', class: "tg-dt__empty", colSpan: cols.length + (this.selectable ? 1 : 0) }, this.emptyText)), rows.map((row, i) => (h("tr", { class: { 'tg-dt__row': true, 'tg-dt__row--striped': this.striped && i % 2 === 1, 'tg-dt__row--selected': this.selectedRows.has(i) } }, this.selectable && h("td", { class: "tg-dt__td tg-dt__td--check" }, h("input", { type: "checkbox", checked: this.selectedRows.has(i), onChange: () => this.toggleRow(i) })), cols.map(col => h("td", { class: "tg-dt__td" }, row[col.key])))))))))));
+    }
+    static get is() { return "tg-data-table"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-data-table.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-data-table.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "columns": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | DataTableColumn[]",
+                    "resolved": "DataTableColumn[] | string",
+                    "references": {
+                        "DataTableColumn": {
+                            "location": "local",
+                            "path": "/Users/mahykane/work/Teranga-Design-Systems/packages/components/src/components/tg-data-table/tg-data-table.tsx",
+                            "id": "src/components/tg-data-table/tg-data-table.tsx::DataTableColumn"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "columns",
+                "defaultValue": "[]"
+            },
+            "rows": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | DataTableRow[]",
+                    "resolved": "DataTableRow[] | string",
+                    "references": {
+                        "DataTableRow": {
+                            "location": "local",
+                            "path": "/Users/mahykane/work/Teranga-Design-Systems/packages/components/src/components/tg-data-table/tg-data-table.tsx",
+                            "id": "src/components/tg-data-table/tg-data-table.tsx::DataTableRow"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rows",
+                "defaultValue": "[]"
+            },
+            "selectable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selectable",
+                "defaultValue": "false"
+            },
+            "striped": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "striped",
+                "defaultValue": "true"
+            },
+            "compact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "compact",
+                "defaultValue": "false"
+            },
+            "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"
+            },
+            "emptyText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "empty-text",
+                "defaultValue": "'Aucune donn\\u00e9e'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "sortKey": {},
+            "sortDir": {},
+            "selectedRows": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tgSort",
+                "name": "tgSort",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ key: string; dir: string }",
+                    "resolved": "{ key: string; dir: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "tgRowSelect",
+                "name": "tgRowSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number[]",
+                    "resolved": "number[]",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/tg-date-picker/tg-date-picker.css

@@ -0,0 +1,28 @@
+:host { display: block; }
+.tg-date-picker { position: relative; font-family: var(--tg-font-family-sans); }
+.tg-dp__label { display: block; font-size: var(--tg-font-size-sm); font-weight: var(--tg-font-weight-medium); color: var(--tg-color-text-primary); margin-bottom: var(--tg-spacing-1-5); }
+.tg-dp__input-wrap { display: flex; align-items: center; gap: var(--tg-spacing-2); border: 1px solid var(--tg-color-border-strong); border-radius: var(--tg-radius-lg); background: var(--tg-color-surface-raised); padding: 0 var(--tg-spacing-3); cursor: pointer; transition: border-color var(--tg-duration-fast), box-shadow var(--tg-duration-fast); }
+.tg-dp__input-wrap:focus-within { border-color: var(--tg-color-border-focus); box-shadow: var(--tg-focus-ring); }
+.tg-dp__input-wrap--invalid { border-color: var(--tg-color-danger); }
+.tg-dp__icon { color: var(--tg-color-text-secondary); flex-shrink: 0; }
+.tg-dp__input { flex: 1; border: none; outline: none; background: transparent; color: var(--tg-color-text-primary); font-family: inherit; cursor: pointer; }
+.tg-date-picker--sm .tg-dp__input { height: 2rem; font-size: var(--tg-font-size-xs); }
+.tg-date-picker--md .tg-dp__input { height: 2.5rem; font-size: var(--tg-font-size-sm); }
+.tg-date-picker--lg .tg-dp__input { height: 3rem; font-size: var(--tg-font-size-md); }
+.tg-dp__input::placeholder { color: var(--tg-color-text-disabled); }
+.tg-dp__calendar { position: absolute; top: 100%; left: 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-xl); box-shadow: var(--tg-shadow-lg); z-index: 1000; padding: var(--tg-spacing-3); min-width: 280px; animation: tg-dp-enter var(--tg-duration-fast) var(--tg-ease-out); }
+@keyframes tg-dp-enter { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
+.tg-dp__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--tg-spacing-2); }
+.tg-dp__nav-btn { background: none; border: none; cursor: pointer; font-size: 1.25rem; color: var(--tg-color-text-primary); padding: var(--tg-spacing-1); border-radius: var(--tg-radius-md); transition: background var(--tg-duration-fast); }
+.tg-dp__nav-btn:hover { background: var(--tg-color-primary-subtle); }
+.tg-dp__month-year { font-size: var(--tg-font-size-sm); font-weight: var(--tg-font-weight-semibold); }
+.tg-dp__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: var(--tg-spacing-1); }
+.tg-dp__wd { text-align: center; font-size: var(--tg-font-size-xs); color: var(--tg-color-text-secondary); font-weight: var(--tg-font-weight-medium); padding: var(--tg-spacing-1) 0; }
+.tg-dp__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
+.tg-dp__day { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin: auto; border: none; background: none; cursor: pointer; font-size: var(--tg-font-size-xs); color: var(--tg-color-text-primary); border-radius: var(--tg-radius-md); transition: background var(--tg-duration-fast); }
+.tg-dp__day:hover { background: var(--tg-color-primary-subtle); }
+.tg-dp__day--sel { background: var(--tg-color-primary); color: var(--tg-color-primary-on); font-weight: var(--tg-font-weight-semibold); }
+.tg-dp__day--today { border: 1px solid var(--tg-color-primary); }
+.tg-dp__day--empty { cursor: default; }
+.tg-dp__error { margin: var(--tg-spacing-1) 0 0; font-size: var(--tg-font-size-xs); color: var(--tg-color-danger); }
+.tg-dp__helper { margin: var(--tg-spacing-1) 0 0; font-size: var(--tg-font-size-xs); color: var(--tg-color-text-secondary); }