@lesterarte/sefin-ui 0.0.1 → 0.0.3-dev.0

package/types/lesterarte-sefin-ui.d.ts

@@ -0,0 +1,605 @@
+import * as i0 from '@angular/core';
+import { EventEmitter } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+
+/**
+ * Color design tokens as TypeScript constants
+ * Based on Secretaría de Finanzas brand guidelines
+ * These values are the source of truth for all color tokens
+ */
+declare const COLOR_TOKENS: {
+    readonly primary: {
+        readonly 50: "#e6f7fb";
+        readonly 100: "#b3e5f0";
+        readonly 200: "#80d3e5";
+        readonly 300: "#4dc1da";
+        readonly 400: "#2ab0cf";
+        readonly 500: "#55C3D8";
+        readonly 600: "#4aafc4";
+        readonly 700: "#3f9bb0";
+        readonly 800: "#34879c";
+        readonly 900: "#297388";
+    };
+    readonly secondary: {
+        readonly 50: "#f5f5f5";
+        readonly 100: "#e8e8e8";
+        readonly 200: "#cecece";
+        readonly 300: "#b5b5b5";
+        readonly 400: "#9b9b9b";
+        readonly 500: "#828282";
+        readonly 600: "#686868";
+        readonly 700: "#4f4f4f";
+        readonly 800: "#383838";
+        readonly 900: "#2a2a2a";
+    };
+    readonly neutral: {
+        readonly 50: "#ffffff";
+        readonly 100: "#f5f5f5";
+        readonly 200: "#cecece";
+        readonly 300: "#b5b5b5";
+        readonly 400: "#9b9b9b";
+        readonly 500: "#828282";
+        readonly 600: "#686868";
+        readonly 700: "#4f4f4f";
+        readonly 800: "#383838";
+        readonly 900: "#2a2a2a";
+    };
+    readonly success: {
+        readonly 50: "#e8f5e9";
+        readonly 100: "#c8e6c9";
+        readonly 200: "#a5d6a7";
+        readonly 300: "#81c784";
+        readonly 400: "#66bb6a";
+        readonly 500: "#4caf50";
+        readonly 600: "#43a047";
+        readonly 700: "#388e3c";
+        readonly 800: "#2e7d32";
+        readonly 900: "#1b5e20";
+    };
+    readonly warning: {
+        readonly 50: "#fff3e0";
+        readonly 100: "#ffe0b2";
+        readonly 200: "#ffcc80";
+        readonly 300: "#ffb74d";
+        readonly 400: "#ffa726";
+        readonly 500: "#ff9800";
+        readonly 600: "#fb8c00";
+        readonly 700: "#f57c00";
+        readonly 800: "#ef6c00";
+        readonly 900: "#e65100";
+    };
+    readonly error: {
+        readonly 50: "#ffebee";
+        readonly 100: "#ffcdd2";
+        readonly 200: "#ef9a9a";
+        readonly 300: "#e57373";
+        readonly 400: "#ef5350";
+        readonly 500: "#f44336";
+        readonly 600: "#e53935";
+        readonly 700: "#d32f2f";
+        readonly 800: "#c62828";
+        readonly 900: "#b71c1c";
+    };
+    readonly info: {
+        readonly 50: "#e0f2f1";
+        readonly 100: "#b2dfdb";
+        readonly 200: "#80cbc4";
+        readonly 300: "#4db6ac";
+        readonly 400: "#26a69a";
+        readonly 500: "#009688";
+        readonly 600: "#00897b";
+        readonly 700: "#00796b";
+        readonly 800: "#00695c";
+        readonly 900: "#004d40";
+    };
+    readonly brand: {
+        readonly darkGray: "#383838";
+        readonly lightGray: "#cecece";
+        readonly lightBlue: "#55C3D8";
+        readonly white: "#ffffff";
+    };
+};
+/**
+ * Color token names for CSS variable generation
+ */
+type ColorTokenName = 'primary' | 'secondary' | 'neutral' | 'success' | 'warning' | 'error' | 'info' | 'brand';
+type ColorShade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+
+/**
+ * Spacing design tokens
+ * Based on 8px grid system
+ */
+declare const SPACING_TOKENS: {
+    readonly xs: "4px";
+    readonly sm: "8px";
+    readonly md: "16px";
+    readonly lg: "24px";
+    readonly xl: "32px";
+    readonly '2xl': "48px";
+    readonly '3xl': "64px";
+    readonly '4xl': "96px";
+    readonly '5xl': "128px";
+};
+type SpacingToken = keyof typeof SPACING_TOKENS;
+
+/**
+ * Typography design tokens
+ * Based on Secretaría de Finanzas brand guidelines - Pluto typeface
+ */
+declare const TYPOGRAPHY_TOKENS: {
+    readonly fontFamily: {
+        readonly base: "'Pluto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly mono: "'Fira Code', 'Courier New', monospace";
+    };
+    readonly fontSize: {
+        readonly xs: "0.75rem";
+        readonly sm: "0.875rem";
+        readonly base: "1rem";
+        readonly lg: "1.125rem";
+        readonly xl: "1.25rem";
+        readonly '2xl': "1.5rem";
+        readonly '3xl': "1.875rem";
+        readonly '4xl': "2.25rem";
+        readonly '5xl': "3rem";
+    };
+    readonly fontWeight: {
+        readonly light: 300;
+        readonly normal: 400;
+        readonly medium: 500;
+        readonly semibold: 600;
+        readonly bold: 700;
+    };
+    readonly lineHeight: {
+        readonly tight: 1.25;
+        readonly normal: 1.5;
+        readonly relaxed: 1.75;
+    };
+};
+type TypographyToken = keyof typeof TYPOGRAPHY_TOKENS;
+
+/**
+ * Border radius design tokens
+ */
+declare const BORDER_RADIUS_TOKENS: {
+    readonly none: "0";
+    readonly sm: "4px";
+    readonly md: "8px";
+    readonly lg: "12px";
+    readonly xl: "16px";
+    readonly '2xl': "24px";
+    readonly full: "9999px";
+};
+type BorderRadiusToken = keyof typeof BORDER_RADIUS_TOKENS;
+
+/**
+ * Shadow design tokens
+ */
+declare const SHADOW_TOKENS: {
+    readonly none: "none";
+    readonly sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
+    readonly md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
+    readonly lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)";
+    readonly xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)";
+    readonly '2xl': "0 25px 50px -12px rgba(0, 0, 0, 0.25)";
+};
+type ShadowToken = keyof typeof SHADOW_TOKENS;
+
+/**
+ * Design tokens index
+ * Central export for all design tokens
+ */
+
+/**
+ * All design tokens combined
+ */
+declare const DESIGN_TOKENS: {
+    colors: () => Promise<{
+        readonly primary: {
+            readonly 50: "#e6f7fb";
+            readonly 100: "#b3e5f0";
+            readonly 200: "#80d3e5";
+            readonly 300: "#4dc1da";
+            readonly 400: "#2ab0cf";
+            readonly 500: "#55C3D8";
+            readonly 600: "#4aafc4";
+            readonly 700: "#3f9bb0";
+            readonly 800: "#34879c";
+            readonly 900: "#297388";
+        };
+        readonly secondary: {
+            readonly 50: "#f5f5f5";
+            readonly 100: "#e8e8e8";
+            readonly 200: "#cecece";
+            readonly 300: "#b5b5b5";
+            readonly 400: "#9b9b9b";
+            readonly 500: "#828282";
+            readonly 600: "#686868";
+            readonly 700: "#4f4f4f";
+            readonly 800: "#383838";
+            readonly 900: "#2a2a2a";
+        };
+        readonly neutral: {
+            readonly 50: "#ffffff";
+            readonly 100: "#f5f5f5";
+            readonly 200: "#cecece";
+            readonly 300: "#b5b5b5";
+            readonly 400: "#9b9b9b";
+            readonly 500: "#828282";
+            readonly 600: "#686868";
+            readonly 700: "#4f4f4f";
+            readonly 800: "#383838";
+            readonly 900: "#2a2a2a";
+        };
+        readonly success: {
+            readonly 50: "#e8f5e9";
+            readonly 100: "#c8e6c9";
+            readonly 200: "#a5d6a7";
+            readonly 300: "#81c784";
+            readonly 400: "#66bb6a";
+            readonly 500: "#4caf50";
+            readonly 600: "#43a047";
+            readonly 700: "#388e3c";
+            readonly 800: "#2e7d32";
+            readonly 900: "#1b5e20";
+        };
+        readonly warning: {
+            readonly 50: "#fff3e0";
+            readonly 100: "#ffe0b2";
+            readonly 200: "#ffcc80";
+            readonly 300: "#ffb74d";
+            readonly 400: "#ffa726";
+            readonly 500: "#ff9800";
+            readonly 600: "#fb8c00";
+            readonly 700: "#f57c00";
+            readonly 800: "#ef6c00";
+            readonly 900: "#e65100";
+        };
+        readonly error: {
+            readonly 50: "#ffebee";
+            readonly 100: "#ffcdd2";
+            readonly 200: "#ef9a9a";
+            readonly 300: "#e57373";
+            readonly 400: "#ef5350";
+            readonly 500: "#f44336";
+            readonly 600: "#e53935";
+            readonly 700: "#d32f2f";
+            readonly 800: "#c62828";
+            readonly 900: "#b71c1c";
+        };
+        readonly info: {
+            readonly 50: "#e0f2f1";
+            readonly 100: "#b2dfdb";
+            readonly 200: "#80cbc4";
+            readonly 300: "#4db6ac";
+            readonly 400: "#26a69a";
+            readonly 500: "#009688";
+            readonly 600: "#00897b";
+            readonly 700: "#00796b";
+            readonly 800: "#00695c";
+            readonly 900: "#004d40";
+        };
+        readonly brand: {
+            readonly darkGray: "#383838";
+            readonly lightGray: "#cecece";
+            readonly lightBlue: "#55C3D8";
+            readonly white: "#ffffff";
+        };
+    }>;
+    spacing: () => Promise<{
+        readonly xs: "4px";
+        readonly sm: "8px";
+        readonly md: "16px";
+        readonly lg: "24px";
+        readonly xl: "32px";
+        readonly '2xl': "48px";
+        readonly '3xl': "64px";
+        readonly '4xl': "96px";
+        readonly '5xl': "128px";
+    }>;
+    typography: () => Promise<{
+        readonly fontFamily: {
+            readonly base: "'Pluto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+            readonly mono: "'Fira Code', 'Courier New', monospace";
+        };
+        readonly fontSize: {
+            readonly xs: "0.75rem";
+            readonly sm: "0.875rem";
+            readonly base: "1rem";
+            readonly lg: "1.125rem";
+            readonly xl: "1.25rem";
+            readonly '2xl': "1.5rem";
+            readonly '3xl': "1.875rem";
+            readonly '4xl': "2.25rem";
+            readonly '5xl': "3rem";
+        };
+        readonly fontWeight: {
+            readonly light: 300;
+            readonly normal: 400;
+            readonly medium: 500;
+            readonly semibold: 600;
+            readonly bold: 700;
+        };
+        readonly lineHeight: {
+            readonly tight: 1.25;
+            readonly normal: 1.5;
+            readonly relaxed: 1.75;
+        };
+    }>;
+    borderRadius: () => Promise<{
+        readonly none: "0";
+        readonly sm: "4px";
+        readonly md: "8px";
+        readonly lg: "12px";
+        readonly xl: "16px";
+        readonly '2xl': "24px";
+        readonly full: "9999px";
+    }>;
+    shadow: () => Promise<{
+        readonly none: "none";
+        readonly sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
+        readonly md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
+        readonly lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)";
+        readonly xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)";
+        readonly '2xl': "0 25px 50px -12px rgba(0, 0, 0, 0.25)";
+    }>;
+};
+
+/**
+ * Light theme configuration
+ * Based on Secretaría de Finanzas brand colors
+ */
+declare const LIGHT_THEME: {
+    readonly name: "light";
+    readonly colors: {
+        readonly primary: "#55C3D8";
+        readonly 'primary-dark': "#3f9bb0";
+        readonly 'primary-light': "#4dc1da";
+        readonly secondary: "#383838";
+        readonly 'secondary-dark': "#2a2a2a";
+        readonly 'secondary-light': "#686868";
+        readonly background: "#ffffff";
+        readonly 'background-elevated': "#ffffff";
+        readonly surface: "#ffffff";
+        readonly 'surface-hover': "#cecece";
+        readonly text: "#383838";
+        readonly 'text-secondary': "#686868";
+        readonly 'text-disabled': "#9b9b9b";
+        readonly border: "#cecece";
+        readonly 'border-focus': "#55C3D8";
+        readonly success: "#4caf50";
+        readonly warning: "#ff9800";
+        readonly error: "#f44336";
+        readonly info: "#009688";
+    };
+};
+
+/**
+ * Dark theme configuration
+ * Based on Secretaría de Finanzas brand colors (inverted)
+ */
+declare const DARK_THEME: {
+    readonly name: "dark";
+    readonly colors: {
+        readonly primary: "#55C3D8";
+        readonly 'primary-dark': "#4dc1da";
+        readonly 'primary-light': "#3f9bb0";
+        readonly secondary: "#cecece";
+        readonly 'secondary-dark': "#9b9b9b";
+        readonly 'secondary-light': "#cecece";
+        readonly background: "#383838";
+        readonly 'background-elevated': "#4f4f4f";
+        readonly surface: "#4f4f4f";
+        readonly 'surface-hover': "#686868";
+        readonly text: "#ffffff";
+        readonly 'text-secondary': "#cecece";
+        readonly 'text-disabled': "#828282";
+        readonly border: "#686868";
+        readonly 'border-focus': "#55C3D8";
+        readonly success: "#66bb6a";
+        readonly warning: "#ffa726";
+        readonly error: "#ef5350";
+        readonly info: "#26a69a";
+    };
+};
+
+/**
+ * Brand theme configuration
+ * Exact colors from Secretaría de Finanzas brand guidelines
+ */
+declare const BRAND_THEME: {
+    readonly name: "brand";
+    readonly colors: {
+        readonly primary: "#55C3D8";
+        readonly 'primary-dark': "#3f9bb0";
+        readonly 'primary-light': "#4dc1da";
+        readonly secondary: "#383838";
+        readonly 'secondary-dark': "#2a2a2a";
+        readonly 'secondary-light': "#686868";
+        readonly background: "#ffffff";
+        readonly 'background-elevated': "#ffffff";
+        readonly surface: "#ffffff";
+        readonly 'surface-hover': "#cecece";
+        readonly text: "#383838";
+        readonly 'text-secondary': "#686868";
+        readonly 'text-disabled': "#9b9b9b";
+        readonly border: "#cecece";
+        readonly 'border-focus': "#55C3D8";
+        readonly success: "#4caf50";
+        readonly warning: "#ff9800";
+        readonly error: "#f44336";
+        readonly info: "#009688";
+    };
+};
+
+/**
+ * Themes index
+ */
+
+type Theme = 'light' | 'dark' | 'brand';
+
+/**
+ * Theme loader utility
+ * Generates CSS variables from design tokens
+ */
+declare class ThemeLoader {
+    /**
+     * Load a theme and apply it to the document root
+     */
+    static loadTheme(themeName?: Theme): void;
+    /**
+     * Get theme configuration by name
+     */
+    private static getTheme;
+    /**
+     * Get all CSS variables as a string (useful for SSR or static generation)
+     */
+    static getThemeCSS(themeName?: Theme): string;
+}
+
+/**
+ * Shared types and interfaces
+ */
+type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
+type ButtonSize = 'sm' | 'md' | 'lg';
+type InputSize = 'sm' | 'md' | 'lg';
+type CardVariant = 'default' | 'elevated' | 'outlined';
+interface BaseComponent {
+    disabled?: boolean;
+    class?: string;
+}
+
+declare class ButtonComponent {
+    variant: ButtonVariant;
+    size: ButtonSize;
+    disabled: boolean;
+    type: 'button' | 'submit' | 'reset';
+    class: string;
+    clicked: EventEmitter<MouseEvent>;
+    onClick(event: MouseEvent): void;
+    get buttonClasses(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "sefin-button", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "type": { "alias": "type"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "clicked": "clicked"; }, never, ["*"], true, never>;
+}
+
+declare class IconComponent {
+    name: string;
+    size: 'sm' | 'md' | 'lg';
+    class: string;
+    get iconClasses(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<IconComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IconComponent, "sefin-icon", never, { "name": { "alias": "name"; "required": false; }; "size": { "alias": "size"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class InputComponent implements ControlValueAccessor {
+    type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
+    placeholder: string;
+    size: InputSize;
+    disabled: boolean;
+    required: boolean;
+    readonly: boolean;
+    class: string;
+    id: string;
+    blur: EventEmitter<FocusEvent>;
+    focus: EventEmitter<FocusEvent>;
+    value: string;
+    private onChange;
+    private onTouched;
+    onInput(event: Event): void;
+    onBlur(event: FocusEvent): void;
+    onFocus(event: FocusEvent): void;
+    writeValue(value: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    get inputClasses(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<InputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InputComponent, "sefin-input", never, { "type": { "alias": "type"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "class": { "alias": "class"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, { "blur": "blur"; "focus": "focus"; }, never, never, true, never>;
+}
+
+declare class FormFieldComponent {
+    label: string;
+    hint: string;
+    error: string;
+    required: boolean;
+    disabled: boolean;
+    inputId: string;
+    inputType: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
+    placeholder: string;
+    size: 'sm' | 'md' | 'lg';
+    static ɵfac: i0.ɵɵFactoryDeclaration<FormFieldComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormFieldComponent, "sefin-form-field", never, { "label": { "alias": "label"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "error": { "alias": "error"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "inputType": { "alias": "inputType"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+interface DropdownOption {
+    label: string;
+    value: any;
+    disabled?: boolean;
+}
+declare class DropdownComponent {
+    options: DropdownOption[];
+    placeholder: string;
+    disabled: boolean;
+    size: 'sm' | 'md' | 'lg';
+    selectionChange: EventEmitter<any>;
+    isOpen: boolean;
+    selectedOption: DropdownOption | null;
+    toggle(): void;
+    selectOption(option: DropdownOption): void;
+    get displayText(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DropdownComponent, "sefin-dropdown", never, { "options": { "alias": "options"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "selectionChange": "selectionChange"; }, never, never, true, never>;
+}
+
+declare class CardComponent {
+    variant: CardVariant;
+    class: string;
+    get cardClasses(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CardComponent, "sefin-card", never, { "variant": { "alias": "variant"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class HeaderComponent {
+    title: string;
+    logo: string;
+    showUserMenu: boolean;
+    userName: string;
+    logoClick: EventEmitter<void>;
+    menuClick: EventEmitter<void>;
+    userMenuClick: EventEmitter<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HeaderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HeaderComponent, "sefin-header", never, { "title": { "alias": "title"; "required": false; }; "logo": { "alias": "logo"; "required": false; }; "showUserMenu": { "alias": "showUserMenu"; "required": false; }; "userName": { "alias": "userName"; "required": false; }; }, { "logoClick": "logoClick"; "menuClick": "menuClick"; "userMenuClick": "userMenuClick"; }, never, never, true, never>;
+}
+
+interface LoginCredentials {
+    email: string;
+    password: string;
+}
+declare class LoginFormComponent {
+    email: string;
+    password: string;
+    error: string;
+    submit: EventEmitter<LoginCredentials>;
+    onSubmit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LoginFormComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LoginFormComponent, "sefin-login-form", never, {}, { "submit": "submit"; }, never, never, true, never>;
+}
+
+interface ToolbarAction {
+    label: string;
+    icon?: string;
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
+    action: () => void;
+}
+declare class ToolbarComponent {
+    title: string;
+    actions: ToolbarAction[];
+    actionClick: EventEmitter<ToolbarAction>;
+    onActionClick(action: ToolbarAction): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToolbarComponent, "sefin-toolbar", never, { "title": { "alias": "title"; "required": false; }; "actions": { "alias": "actions"; "required": false; }; }, { "actionClick": "actionClick"; }, never, never, true, never>;
+}
+
+declare const STYLES_PATH = "./styles/index.scss";
+
+export { BORDER_RADIUS_TOKENS, BRAND_THEME, ButtonComponent, COLOR_TOKENS, CardComponent, DARK_THEME, DESIGN_TOKENS, DropdownComponent, FormFieldComponent, HeaderComponent, IconComponent, InputComponent, LIGHT_THEME, LoginFormComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, TYPOGRAPHY_TOKENS, ThemeLoader, ToolbarComponent };
+export type { BaseComponent, BorderRadiusToken, ButtonSize, ButtonVariant, CardVariant, ColorShade, ColorTokenName, DropdownOption, InputSize, LoginCredentials, ShadowToken, SpacingToken, Theme, ToolbarAction, TypographyToken };