@teranga-ds/components 0.1.0

package/dist/types/components/tg-avatar/tg-avatar.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @component tg-avatar
+ * @description Represents a user, organization, or entity with an image or initials fallback.
+ *
+ * @example
+ * <tg-avatar name="Amadou Diallo" src="/photo.jpg"></tg-avatar>
+ * <tg-avatar name="Fatou Ndiaye" size="lg" variant="secondary"></tg-avatar>
+ */
+export declare class TgAvatar {
+    /** Full name used to generate initials */
+    name?: string;
+    /** Image source URL */
+    src?: string;
+    /** Image alt text */
+    alt?: string;
+    /** Size of the avatar */
+    size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    /** Background color variant (used for initials avatar) */
+    variant: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+    /** Shows a status indicator dot */
+    status?: 'online' | 'offline' | 'busy' | 'away';
+    /** Makes the avatar square instead of round */
+    square: boolean;
+    imageError: boolean;
+    private getInitials;
+    render(): any;
+}

package/dist/types/components/tg-badge/tg-badge.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @component tg-badge
+ * @description Compact label for status, category, or count.
+ *
+ * @slot default — Badge text content
+ *
+ * @example
+ * <tg-badge variant="success">Approuvé</tg-badge>
+ * <tg-badge variant="danger" pill>Urgent</tg-badge>
+ */
+export declare class TgBadge {
+    /** Visual intent of the badge */
+    variant: 'neutral' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
+    /** Size of the badge */
+    size: 'sm' | 'md' | 'lg';
+    /** Renders with fully rounded corners */
+    pill: boolean;
+    /** Renders as an outlined badge instead of filled */
+    outlined: boolean;
+    render(): any;
+}

package/dist/types/components/tg-bottom-nav/tg-bottom-nav.d.ts

@@ -0,0 +1,14 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface BottomNavItem {
+    id: string;
+    label: string;
+    icon: string;
+    badge?: string | number;
+}
+export declare class TgBottomNav {
+    items: string | BottomNavItem[];
+    active?: string;
+    tgNavigate: EventEmitter<string>;
+    private get parsed();
+    render(): any;
+}

package/dist/types/components/tg-bottom-sheet/tg-bottom-sheet.d.ts

@@ -0,0 +1,7 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class TgBottomSheet {
+    open: boolean;
+    heading?: string;
+    tgClose: EventEmitter<void>;
+    render(): any;
+}

package/dist/types/components/tg-breadcrumb/tg-breadcrumb.d.ts

@@ -0,0 +1,12 @@
+export interface TgBreadcrumbItem {
+    label: string;
+    href?: string;
+}
+export declare class TgBreadcrumb {
+    items: string | TgBreadcrumbItem[];
+    maxItems: number;
+    expanded: boolean;
+    private get parsedItems();
+    private renderSeparator;
+    render(): any;
+}

package/dist/types/components/tg-button/tg-button.d.ts

@@ -0,0 +1,35 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @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 declare class TgButton {
+    /** Visual style of the button */
+    variant: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
+    /** Size of the button */
+    size: 'sm' | 'md' | 'lg';
+    /** Disables the button */
+    disabled: boolean;
+    /** Shows a loading spinner and disables interaction */
+    loading: boolean;
+    /** Stretches the button to full container width */
+    fullWidth: boolean;
+    /** Native button type attribute */
+    type: 'button' | 'submit' | 'reset';
+    /** Renders the button as an anchor tag */
+    href?: string;
+    /** Anchor target (requires href) */
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    /** Emitted on click when not disabled or loading */
+    tgClick: EventEmitter<void>;
+    private handleClick;
+    render(): any;
+}

package/dist/types/components/tg-calendar-view/tg-calendar-view.d.ts

@@ -0,0 +1,18 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface CalendarEvent {
+    title: string;
+    date: string;
+    variant?: string;
+}
+export declare class TgCalendarView {
+    events: string | CalendarEvent[];
+    viewDate: Date;
+    tgDateSelect: EventEmitter<string>;
+    private get parsed();
+    private daysInMonth;
+    private firstDow;
+    private prevMonth;
+    private nextMonth;
+    private getEvents;
+    render(): any;
+}

package/dist/types/components/tg-card/tg-card.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @component tg-card
+ * @description Container component for grouping related content.
+ *
+ * @slot default  — Main content
+ * @slot header   — Card header area (title, actions)
+ * @slot footer   — Card footer area (buttons, meta)
+ * @slot media    — Full-width media area (image, video) placed above header
+ *
+ * @example
+ * <tg-card>
+ *   <span slot="header">Identité Nationale</span>
+ *   <p>Gérez vos informations d'identité.</p>
+ *   <tg-button slot="footer" variant="primary">Voir les détails</tg-button>
+ * </tg-card>
+ */
+export declare class TgCard {
+    /** Visual elevation / shadow level */
+    elevation: 'flat' | 'raised' | 'floating';
+    /** Removes internal padding for flush content */
+    noPadding: boolean;
+    /** Makes the card take full width of its container */
+    fullWidth: boolean;
+    /** Makes the card interactive (hover + cursor pointer) */
+    interactive: boolean;
+    render(): any;
+}

package/dist/types/components/tg-chat/tg-chat.d.ts

@@ -0,0 +1,24 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface TgChatMessage {
+    id: string;
+    role: 'user' | 'bot';
+    content: string;
+    time?: string;
+}
+export declare class TgChat {
+    el: HTMLElement;
+    chatTitle: string;
+    botInitial: string;
+    placeholder: string;
+    messages: string | TgChatMessage[];
+    typing: boolean;
+    inputValue: string;
+    tgSend: EventEmitter<string>;
+    private messagesRef;
+    private get parsedMessages();
+    componentDidUpdate(): void;
+    private scrollToBottom;
+    private handleSend;
+    private handleKeyDown;
+    render(): any;
+}

package/dist/types/components/tg-chat-message/tg-chat-message.d.ts

@@ -0,0 +1,7 @@
+export declare class TgChatMessage {
+    role: 'user' | 'assistant' | 'system';
+    avatar?: string;
+    timestamp?: string;
+    streaming: boolean;
+    render(): any;
+}

package/dist/types/components/tg-checkbox/tg-checkbox.d.ts

@@ -0,0 +1,14 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class TgCheckbox {
+    label?: string;
+    description?: string;
+    checked: boolean;
+    disabled: boolean;
+    indeterminate: boolean;
+    error?: string;
+    name?: string;
+    value?: string;
+    tgChange: EventEmitter<boolean>;
+    private handleChange;
+    render(): any;
+}

package/dist/types/components/tg-combobox/tg-combobox.d.ts

@@ -0,0 +1,30 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface ComboboxOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+export declare class TgCombobox {
+    label?: string;
+    placeholder: string;
+    options: string | ComboboxOption[];
+    value?: string;
+    disabled: boolean;
+    invalid: boolean;
+    helperText?: string;
+    errorText?: string;
+    size: 'sm' | 'md' | 'lg';
+    query: string;
+    open: boolean;
+    focusedIndex: number;
+    tgChange: EventEmitter<string>;
+    private get parsed();
+    private get filtered();
+    private get selectedLabel();
+    handleDocClick(): void;
+    private handleInput;
+    private handleFocus;
+    private select;
+    private handleKeyDown;
+    render(): any;
+}

package/dist/types/components/tg-command-palette/tg-command-palette.d.ts

@@ -0,0 +1,20 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface CommandItem {
+    id: string;
+    label: string;
+    shortcut?: string;
+    icon?: string;
+    group?: string;
+}
+export declare class TgCommandPalette {
+    commands: string | CommandItem[];
+    placeholder: string;
+    open: boolean;
+    query: string;
+    focusedIndex: number;
+    tgSelect: EventEmitter<string>;
+    private get parsed();
+    private get filtered();
+    onKeyDown(e: KeyboardEvent): void;
+    render(): any;
+}

package/dist/types/components/tg-confidence-badge/tg-confidence-badge.d.ts

@@ -0,0 +1,7 @@
+export declare class TgConfidenceBadge {
+    score: number;
+    label?: string;
+    showBar: boolean;
+    private get level();
+    render(): any;
+}

package/dist/types/components/tg-confirm-dialog/tg-confirm-dialog.d.ts

@@ -0,0 +1,13 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class TgConfirmDialog {
+    open: boolean;
+    heading: string;
+    message: string;
+    confirmLabel: string;
+    cancelLabel: string;
+    variant: 'default' | 'danger' | 'warning';
+    icon?: string;
+    tgConfirm: EventEmitter<void>;
+    tgCancel: EventEmitter<void>;
+    render(): any;
+}

package/dist/types/components/tg-context-menu/tg-context-menu.d.ts

@@ -0,0 +1,21 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface ContextMenuItem {
+    id: string;
+    label: string;
+    icon?: string;
+    shortcut?: string;
+    divider?: boolean;
+    disabled?: boolean;
+    danger?: boolean;
+}
+export declare class TgContextMenu {
+    items: string | ContextMenuItem[];
+    visible: boolean;
+    x: number;
+    y: number;
+    tgAction: EventEmitter<string>;
+    private get parsed();
+    onContext(e: MouseEvent): void;
+    onDocClick(): void;
+    render(): any;
+}

package/dist/types/components/tg-data-table/tg-data-table.d.ts

@@ -0,0 +1,34 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface DataTableColumn {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    width?: string;
+}
+export interface DataTableRow {
+    [key: string]: any;
+}
+export declare class TgDataTable {
+    columns: string | DataTableColumn[];
+    rows: string | DataTableRow[];
+    selectable: boolean;
+    striped: boolean;
+    compact: boolean;
+    loading: boolean;
+    emptyText: string;
+    sortKey: string;
+    sortDir: 'asc' | 'desc';
+    selectedRows: Set<number>;
+    tgSort: EventEmitter<{
+        key: string;
+        dir: string;
+    }>;
+    tgRowSelect: EventEmitter<number[]>;
+    private get cols();
+    private get data();
+    private get sortedData();
+    private handleSort;
+    private toggleRow;
+    private toggleAll;
+    render(): any;
+}

package/dist/types/components/tg-date-picker/tg-date-picker.d.ts

@@ -0,0 +1,22 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class TgDatePicker {
+    label?: string;
+    value?: string;
+    placeholder: string;
+    disabled: boolean;
+    invalid: boolean;
+    helperText?: string;
+    errorText?: string;
+    size: 'sm' | 'md' | 'lg';
+    open: boolean;
+    viewDate: Date;
+    tgChange: EventEmitter<string>;
+    onDocClick(): void;
+    private daysInMonth;
+    private firstDow;
+    private prevMonth;
+    private nextMonth;
+    private selectDay;
+    private formatDisplay;
+    render(): any;
+}

package/dist/types/components/tg-empty-state/tg-empty-state.d.ts

@@ -0,0 +1,8 @@
+export declare class TgEmptyState {
+    icon?: string;
+    heading: string;
+    description?: string;
+    actionLabel?: string;
+    variant: 'default' | 'illustration';
+    render(): any;
+}

package/dist/types/components/tg-expandable-row/tg-expandable-row.d.ts

@@ -0,0 +1,7 @@
+export declare class TgExpandableRow {
+    header: string;
+    subtext?: string;
+    icon?: string;
+    expanded: boolean;
+    render(): any;
+}

package/dist/types/components/tg-fab/tg-fab.d.ts

@@ -0,0 +1,11 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class TgFab {
+    icon?: string;
+    label?: string;
+    variant: 'primary' | 'secondary' | 'success' | 'danger';
+    size: 'sm' | 'md' | 'lg';
+    position: 'bottom-right' | 'bottom-left' | 'bottom-center';
+    fixed: boolean;
+    tgClick: EventEmitter<void>;
+    render(): any;
+}

package/dist/types/components/tg-file-upload/tg-file-upload.d.ts

@@ -0,0 +1,28 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+interface UploadedFile {
+    file: File;
+    id: string;
+}
+export declare class TgFileUpload {
+    el: HTMLElement;
+    accept?: string;
+    multiple: boolean;
+    maxSize: number;
+    maxFiles: number;
+    label: string;
+    hint?: string;
+    files: UploadedFile[];
+    dragActive: boolean;
+    error: string | null;
+    tgFilesChange: EventEmitter<File[]>;
+    private inputRef;
+    private formatSize;
+    private validate;
+    private addFiles;
+    private removeFile;
+    private handleDrop;
+    private handleDragOver;
+    private handleDragLeave;
+    render(): any;
+}
+export {};

package/dist/types/components/tg-global-loader/tg-global-loader.d.ts

@@ -0,0 +1,6 @@
+export declare class TgGlobalLoader {
+    active: boolean;
+    label?: string;
+    variant: 'bar' | 'overlay';
+    render(): any;
+}

package/dist/types/components/tg-heatmap/tg-heatmap.d.ts

@@ -0,0 +1,14 @@
+export declare class TgHeatmap {
+    data: string | number[][];
+    xLabels: string | string[];
+    yLabels: string | string[];
+    colorMin: string;
+    colorMax: string;
+    heading?: string;
+    private get grid();
+    private get xl();
+    private get yl();
+    private get maxVal();
+    private cellColor;
+    render(): any;
+}

package/dist/types/components/tg-image-gallery/tg-image-gallery.d.ts

@@ -0,0 +1,12 @@
+export interface GalleryImage {
+    src: string;
+    alt?: string;
+    caption?: string;
+}
+export declare class TgImageGallery {
+    images: string | GalleryImage[];
+    columns: number;
+    lightboxIndex: number;
+    private get parsed();
+    render(): any;
+}

package/dist/types/components/tg-input/tg-input.d.ts

@@ -0,0 +1,48 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @component tg-input
+ * @description Text input with label, helper text and error state.
+ *
+ * @slot icon-start — Icon/prefix inside the left of the input
+ * @slot icon-end   — Icon/suffix inside the right of the input
+ *
+ * @example
+ * <tg-input label="Numéro NIN" placeholder="Ex: 1234567890123" required></tg-input>
+ * <tg-input label="Email" type="email" error="Adresse invalide"></tg-input>
+ */
+export declare class TgInput {
+    /** Input type */
+    type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date';
+    /** Label displayed above the input */
+    label?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Current value */
+    value: string;
+    /** Helper text shown below the input */
+    helperText?: string;
+    /** Error message — replaces helperText and marks the field invalid */
+    error?: string;
+    /** Marks the field as required */
+    required: boolean;
+    /** Disables the input */
+    disabled: boolean;
+    /** Makes the input read-only */
+    readonly: boolean;
+    /** Full-width input */
+    fullWidth: boolean;
+    /** Size of the input */
+    size: 'sm' | 'md' | 'lg';
+    /** Unique id (auto-generated if not provided) */
+    inputId: string;
+    /** Shows password visibility toggle (only for type=password) */
+    passwordVisible: boolean;
+    /** Emitted whenever the value changes */
+    tgChange: EventEmitter<string>;
+    /** Emitted when the input is focused */
+    tgFocus: EventEmitter<void>;
+    /** Emitted when the input loses focus */
+    tgBlur: EventEmitter<void>;
+    private handleInput;
+    render(): any;
+}

package/dist/types/components/tg-kanban-board/tg-kanban-board.d.ts

@@ -0,0 +1,23 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface KanbanCard {
+    id: string;
+    title: string;
+    description?: string;
+    tag?: string;
+    assignee?: string;
+}
+export interface KanbanColumn {
+    id: string;
+    title: string;
+    cards: KanbanCard[];
+    color?: string;
+}
+export declare class TgKanbanBoard {
+    columns: string | KanbanColumn[];
+    tgCardClick: EventEmitter<{
+        columnId: string;
+        cardId: string;
+    }>;
+    private get parsed();
+    render(): any;
+}

package/dist/types/components/tg-kpi-card/tg-kpi-card.d.ts

@@ -0,0 +1,10 @@
+export declare class TgKpiCard {
+    heading: string;
+    value: string;
+    unit?: string;
+    trend?: 'up' | 'down' | 'neutral';
+    trendValue?: string;
+    icon?: string;
+    variant: 'default' | 'primary' | 'success' | 'warning' | 'danger';
+    render(): any;
+}

package/dist/types/components/tg-live-badge/tg-live-badge.d.ts

@@ -0,0 +1,6 @@
+export declare class TgLiveBadge {
+    label: string;
+    active: boolean;
+    variant: 'default' | 'recording' | 'streaming';
+    render(): any;
+}

package/dist/types/components/tg-login-form/tg-login-form.d.ts

@@ -0,0 +1,16 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class TgLoginForm {
+    heading: string;
+    subtitle?: string;
+    logo?: string;
+    loading: boolean;
+    error?: string;
+    email: string;
+    password: string;
+    tgLogin: EventEmitter<{
+        email: string;
+        password: string;
+    }>;
+    private handleSubmit;
+    render(): any;
+}

package/dist/types/components/tg-mega-menu/tg-mega-menu.d.ts

@@ -0,0 +1,21 @@
+export interface MegaMenuSection {
+    title: string;
+    items: {
+        label: string;
+        href?: string;
+        description?: string;
+        icon?: string;
+    }[];
+}
+export interface MegaMenuTab {
+    label: string;
+    sections: MegaMenuSection[];
+}
+export declare class TgMegaMenu {
+    tabs: string | MegaMenuTab[];
+    open: boolean;
+    activeTab: number;
+    private get parsed();
+    onDocClick(): void;
+    render(): any;
+}

package/dist/types/components/tg-modal/tg-modal.d.ts

@@ -0,0 +1,14 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class TgModal {
+    open: boolean;
+    modalTitle?: string;
+    size: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    closeOnBackdrop: boolean;
+    closeOnEscape: boolean;
+    exiting: boolean;
+    tgClose: EventEmitter<void>;
+    handleKeydown(e: KeyboardEvent): void;
+    private close;
+    private handleBackdropClick;
+    render(): any;
+}

package/dist/types/components/tg-model-selector/tg-model-selector.d.ts

@@ -0,0 +1,18 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface AIModel {
+    id: string;
+    name: string;
+    provider?: string;
+    description?: string;
+    badge?: string;
+}
+export declare class TgModelSelector {
+    models: string | AIModel[];
+    value?: string;
+    open: boolean;
+    tgChange: EventEmitter<string>;
+    private get parsed();
+    private get selected();
+    onDocClick(): void;
+    render(): any;
+}

package/dist/types/components/tg-multi-select/tg-multi-select.d.ts

@@ -0,0 +1,25 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface MultiSelectOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+export declare class TgMultiSelect {
+    label?: string;
+    placeholder: string;
+    options: string | MultiSelectOption[];
+    value: string | string[];
+    disabled: boolean;
+    invalid: boolean;
+    size: 'sm' | 'md' | 'lg';
+    open: boolean;
+    query: string;
+    tgChange: EventEmitter<string[]>;
+    private get parsed();
+    private get selected();
+    private get filtered();
+    handleDocClick(): void;
+    private toggle;
+    private removeTag;
+    render(): any;
+}