@lesterarte/sefin-ui 0.0.3 → 0.0.5

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter } from '@angular/core';
+import { EventEmitter, Injector, AfterViewInit, OnChanges, ElementRef, SimpleChanges, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 
 /**
@@ -437,6 +437,129 @@ declare const BRAND_THEME: {
 
 type Theme = 'light' | 'dark' | 'brand';
 
+/**
+ * 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';
+type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
+type TypographySize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
+type TypographyWeight = 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
+type TypographyColor = 'text' | 'text-secondary' | 'text-disabled' | 'primary' | 'secondary' | 'success' | 'warning' | 'error';
+type TypographyLineHeight = 'tight' | 'normal' | 'relaxed';
+interface BaseComponent {
+    disabled?: boolean;
+    class?: string;
+}
+/**
+ * Theme color configuration
+ */
+interface ThemeColors {
+    primary: string;
+    'primary-dark'?: string;
+    'primary-light'?: string;
+    secondary: string;
+    'secondary-dark'?: string;
+    'secondary-light'?: string;
+    background: string;
+    'background-elevated'?: string;
+    surface: string;
+    'surface-hover'?: string;
+    text: string;
+    'text-secondary'?: string;
+    'text-disabled'?: string;
+    border: string;
+    'border-focus'?: string;
+    success?: string;
+    warning?: string;
+    error?: string;
+    info?: string;
+    [key: string]: string | undefined;
+}
+/**
+ * Custom theme configuration interface
+ * Allows users to create their own themes with custom colors, typography, spacing, etc.
+ * Supports both single theme and light/dark variants.
+ */
+interface CustomTheme {
+    name: string;
+    colors: ThemeColors;
+    /**
+     * Optional light and dark variants for the theme
+     * If provided, allows switching between light and dark modes
+     */
+    variants?: {
+        light?: ThemeColors;
+        dark?: ThemeColors;
+    };
+    typography?: {
+        fontFamily?: {
+            base?: string;
+            mono?: string;
+            [key: string]: string | undefined;
+        };
+        fontSize?: {
+            xs?: string;
+            sm?: string;
+            base?: string;
+            lg?: string;
+            xl?: string;
+            '2xl'?: string;
+            '3xl'?: string;
+            '4xl'?: string;
+            '5xl'?: string;
+            [key: string]: string | undefined;
+        };
+        fontWeight?: {
+            light?: number;
+            normal?: number;
+            medium?: number;
+            semibold?: number;
+            bold?: number;
+            [key: string]: number | undefined;
+        };
+        lineHeight?: {
+            tight?: number;
+            normal?: number;
+            relaxed?: number;
+            [key: string]: number | undefined;
+        };
+    };
+    spacing?: {
+        xs?: string;
+        sm?: string;
+        md?: string;
+        lg?: string;
+        xl?: string;
+        '2xl'?: string;
+        '3xl'?: string;
+        '4xl'?: string;
+        '5xl'?: string;
+        [key: string]: string | undefined;
+    };
+    borderRadius?: {
+        none?: string;
+        sm?: string;
+        md?: string;
+        lg?: string;
+        xl?: string;
+        '2xl'?: string;
+        full?: string;
+        [key: string]: string | undefined;
+    };
+    shadow?: {
+        none?: string;
+        sm?: string;
+        md?: string;
+        lg?: string;
+        xl?: string;
+        '2xl'?: string;
+        [key: string]: string | undefined;
+    };
+}
+
 /**
  * Theme loader utility
  * Generates CSS variables from design tokens
@@ -444,35 +567,80 @@ type Theme = 'light' | 'dark' | 'brand';
 declare class ThemeLoader {
     /**
      * Load a theme and apply it to the document root
+     * @param themeName - Predefined theme name ('light', 'dark', 'brand') or a CustomTheme object
+     * @param variant - Optional variant ('light' or 'dark') for CustomTheme with variants support
      */
-    static loadTheme(themeName?: Theme): void;
+    static loadTheme(themeName?: Theme | CustomTheme, variant?: 'light' | 'dark'): void;
+    /**
+     * Load a custom theme variant (light or dark)
+     * @param customTheme - CustomTheme object with variants support
+     * @param variant - Variant to load ('light' or 'dark')
+     */
+    static loadThemeVariant(customTheme: CustomTheme, variant: 'light' | 'dark'): void;
     /**
      * Get theme configuration by name
      */
     private static getTheme;
     /**
      * Get all CSS variables as a string (useful for SSR or static generation)
+     * @param themeName - Predefined theme name ('light', 'dark', 'brand') or a CustomTheme object
+     * @param variant - Optional variant ('light' or 'dark') for CustomTheme with variants support
      */
-    static getThemeCSS(themeName?: Theme): string;
+    static getThemeCSS(themeName?: Theme | CustomTheme, variant?: 'light' | 'dark'): 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;
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+declare class AvatarComponent {
+    /** Avatar size. Options: 'xs' | 'sm' | 'md' | 'lg' | 'xl' */
+    size: AvatarSize;
+    /** Image source URL */
+    src?: string;
+    /** Alt text for the image */
+    alt: string;
+    /** Initials to display when no image is provided */
+    initials?: string;
+    /** Whether to show a border/ring around the avatar */
+    bordered: boolean;
+    /** Additional CSS classes */
+    class: string;
+    get avatarClasses(): string;
+    get displayInitials(): string;
+    onImageError(event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AvatarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AvatarComponent, "sefin-avatar", never, { "size": { "alias": "size"; "required": false; }; "src": { "alias": "src"; "required": false; }; "alt": { "alias": "alt"; "required": false; }; "initials": { "alias": "initials"; "required": false; }; "bordered": { "alias": "bordered"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+type BadgeVariant = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error';
+type BadgeSize = 'sm' | 'md' | 'lg';
+declare class BadgeComponent {
+    /** Badge variant style. Options: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' */
+    variant: BadgeVariant;
+    /** Badge size. Options: 'sm' | 'md' | 'lg' */
+    size: BadgeSize;
+    /** Whether the badge should be displayed as a dot (no text) */
+    dot: boolean;
+    /** Maximum number to show before displaying as "+N" */
+    max?: number;
+    /** Badge value (number or text) */
+    value?: number | string;
+    /** Additional CSS classes */
+    class: string;
+    get badgeClasses(): string;
+    get displayValue(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BadgeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BadgeComponent, "sefin-badge", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "dot": { "alias": "dot"; "required": false; }; "max": { "alias": "max"; "required": false; }; "value": { "alias": "value"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 declare class ButtonComponent {
+    /** Button variant style. Options: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' */
     variant: ButtonVariant;
+    /** Button size. Options: 'sm' | 'md' | 'lg' */
     size: ButtonSize;
+    /** Whether the button is disabled */
     disabled: boolean;
+    /** Button type. Options: 'button' | 'submit' | 'reset' */
     type: 'button' | 'submit' | 'reset';
+    /** Additional CSS classes */
     class: string;
     clicked: EventEmitter<MouseEvent>;
     onClick(event: MouseEvent): void;
@@ -481,125 +649,508 @@ declare class ButtonComponent {
     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>;
 }
 
+type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 declare class IconComponent {
-    name: string;
-    size: 'sm' | 'md' | 'lg';
+    private injector;
+    private sanitizer;
+    constructor(injector: Injector);
+    /** Icon name from Lucide Angular (e.g., 'home', 'search', 'user') */
+    name?: string;
+    /** Icon size. Options: 'xs' | 'sm' | 'md' | 'lg' | 'xl' */
+    size: IconSize;
+    /** Custom color for the icon */
+    color?: string;
+    /** Whether the icon should be rotated 180 degrees */
+    rotate: boolean;
+    /** Whether the icon should be flipped horizontally */
+    flipH: boolean;
+    /** Whether the icon should be flipped vertically */
+    flipV: boolean;
+    /** Additional CSS classes */
     class: string;
     get iconClasses(): string;
+    get sizeValue(): number;
+    get lucideIconName(): string | undefined;
+    get iconSvgHtml(): any;
+    private escapeHtml;
+    private getTransform;
     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>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IconComponent, "sefin-icon", never, { "name": { "alias": "name"; "required": false; }; "size": { "alias": "size"; "required": false; }; "color": { "alias": "color"; "required": false; }; "rotate": { "alias": "rotate"; "required": false; }; "flipH": { "alias": "flipH"; "required": false; }; "flipV": { "alias": "flipV"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
 }
 
-declare class InputComponent implements ControlValueAccessor {
-    type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
-    placeholder: string;
+/**
+ * Lucide Icon Map
+ * Maps icon names to Lucide Angular components
+ * This allows us to use Lucide icons internally while maintaining our API
+ */
+declare const LUCIDE_ICON_MAP: Record<string, () => Promise<{
+    default: any;
+}>>;
+/**
+ * Get Lucide icon component by name
+ */
+declare function getLucideIcon(name: string): (() => Promise<{
+    default: any;
+}>) | null;
+/**
+ * Check if an icon name has a Lucide mapping
+ */
+declare function hasLucideIcon(name: string): boolean;
+
+declare class IconButtonComponent {
+    /** Button variant style. Options: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' */
+    variant: ButtonVariant;
+    /** Button size. Options: 'sm' | 'md' | 'lg' */
+    size: ButtonSize;
+    /** Whether the button is disabled */
+    disabled: boolean;
+    /** Button type. Options: 'button' | 'submit' | 'reset' */
+    type: 'button' | 'submit' | 'reset';
+    /** Additional CSS classes */
+    class: string;
+    /** Accessibility label for the button */
+    ariaLabel: string;
+    /** Whether the button should be rounded (circular) */
+    rounded: boolean;
+    clicked: EventEmitter<MouseEvent>;
+    onClick(event: MouseEvent): void;
+    get buttonClasses(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<IconButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IconButtonComponent, "sefin-icon-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; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; }, { "clicked": "clicked"; }, never, ["*"], true, never>;
+}
+
+type FabSize = 'sm' | 'md' | 'lg';
+declare class FabButtonComponent {
+    /** Button variant style. Options: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' */
+    variant: ButtonVariant;
+    /** FAB size. Options: 'sm' | 'md' | 'lg' */
+    size: FabSize;
+    /** Whether the button is disabled */
+    disabled: boolean;
+    /** Button type. Options: 'button' | 'submit' | 'reset' */
+    type: 'button' | 'submit' | 'reset';
+    /** Additional CSS classes */
+    class: string;
+    /** Accessibility label for the button */
+    ariaLabel: string;
+    clicked: EventEmitter<MouseEvent>;
+    onClick(event: MouseEvent): void;
+    get buttonClasses(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FabButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FabButtonComponent, "sefin-fab-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; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; }, { "clicked": "clicked"; }, never, ["*"], true, never>;
+}
+
+type ChipVariant = 'default' | 'primary' | 'secondary' | 'outline' | 'ghost';
+type ChipSize = 'sm' | 'md' | 'lg';
+declare class ChipComponent {
+    /** Chip variant style. Options: 'default' | 'primary' | 'secondary' | 'outline' | 'ghost' */
+    variant: ChipVariant;
+    /** Chip size. Options: 'sm' | 'md' | 'lg' */
+    size: ChipSize;
+    /** Whether the chip is disabled */
+    disabled: boolean;
+    /** Whether the chip can be removed (shows remove button) */
+    removable: boolean;
+    /** Whether the chip is selected (for selectable chips) */
+    selected: boolean;
+    /** Additional CSS classes */
+    class: string;
+    removed: EventEmitter<MouseEvent>;
+    clicked: EventEmitter<MouseEvent>;
+    onRemove(event: MouseEvent): void;
+    onClick(event: MouseEvent): void;
+    get chipClasses(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ChipComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ChipComponent, "sefin-chip", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "removed": "removed"; "clicked": "clicked"; }, never, ["*"], true, never>;
+}
+
+type TagVariant = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+type TagSize = 'sm' | 'md' | 'lg';
+declare class TagComponent {
+    /** Tag variant style. Options: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' */
+    variant: TagVariant;
+    /** Tag size. Options: 'sm' | 'md' | 'lg' */
+    size: TagSize;
+    /** Whether the tag can be removed (shows remove button) */
+    removable: boolean;
+    /** Whether the tag is disabled */
+    disabled: boolean;
+    /** Additional CSS classes */
+    class: string;
+    /** Event emitted when the tag is removed */
+    removed: EventEmitter<MouseEvent>;
+    onRemove(event: MouseEvent): void;
+    get tagClasses(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TagComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TagComponent, "sefin-tag", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "removed": "removed"; }, never, ["*"], true, never>;
+}
+
+type LinkVariant = 'default' | 'primary' | 'secondary' | 'underline';
+type LinkSize = 'sm' | 'md' | 'lg';
+declare class LinkComponent {
+    /** Link variant style. Options: 'default' | 'primary' | 'secondary' | 'underline' */
+    variant: LinkVariant;
+    /** Link size. Options: 'sm' | 'md' | 'lg' */
+    size: LinkSize;
+    /** Whether the link is disabled */
+    disabled: boolean;
+    /** Link URL */
+    href?: string;
+    /** Link target attribute (e.g., '_blank') */
+    target?: string;
+    /** Link rel attribute */
+    rel?: string;
+    /** Additional CSS classes */
+    class: string;
+    /** Whether to show underline */
+    underline: boolean;
+    get linkClasses(): string;
+    onClick(event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LinkComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LinkComponent, "sefin-link", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "href": { "alias": "href"; "required": false; }; "target": { "alias": "target"; "required": false; }; "rel": { "alias": "rel"; "required": false; }; "class": { "alias": "class"; "required": false; }; "underline": { "alias": "underline"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class StackComponent {
+    direction: 'row' | 'column';
+    spacing: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    align: 'start' | 'center' | 'end' | 'stretch';
+    justify: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+    wrap: boolean;
+    class: string;
+    get stackClasses(): string;
+    get spacingValue(): string;
+    get stackStyles(): {
+        [key: string]: string;
+    };
+    static ɵfac: i0.ɵɵFactoryDeclaration<StackComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<StackComponent, "sefin-stack", never, { "direction": { "alias": "direction"; "required": false; }; "spacing": { "alias": "spacing"; "required": false; }; "align": { "alias": "align"; "required": false; }; "justify": { "alias": "justify"; "required": false; }; "wrap": { "alias": "wrap"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class CheckboxComponent implements ControlValueAccessor, AfterViewInit, OnChanges {
+    checkboxInput?: ElementRef<HTMLInputElement>;
     size: InputSize;
     disabled: boolean;
-    required: boolean;
-    readonly: boolean;
+    indeterminate: boolean;
     class: string;
-    id: string;
-    blur: EventEmitter<FocusEvent>;
-    focus: EventEmitter<FocusEvent>;
-    value: string;
+    label: string;
+    name: string;
+    value: boolean;
+    valueChange: EventEmitter<boolean>;
+    checkedChange: EventEmitter<boolean>;
     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;
+    ngAfterViewInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    onCheckboxChange(event: Event): void;
+    writeValue(value: boolean): void;
+    registerOnChange(fn: (value: boolean) => 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>;
+    get wrapperClasses(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CheckboxComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CheckboxComponent, "sefin-checkbox", never, { "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "class": { "alias": "class"; "required": false; }; "label": { "alias": "label"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "valueChange": "valueChange"; "checkedChange": "checkedChange"; }, never, never, true, never>;
 }
 
-declare class FormFieldComponent {
-    label: string;
-    hint: string;
-    error: string;
-    required: boolean;
+declare class RadioComponent implements ControlValueAccessor {
+    radioInput?: ElementRef<HTMLInputElement>;
+    size: InputSize;
     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>;
+    class: string;
+    label: string;
+    name: string;
+    value: string | number;
+    checked: boolean;
+    valueChange: EventEmitter<string | number>;
+    checkedChange: EventEmitter<boolean>;
+    private onChange;
+    private onTouched;
+    onRadioChange(event: Event): void;
+    writeValue(value: string | number): void;
+    registerOnChange(fn: (value: string | number) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    get wrapperClasses(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RadioComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RadioComponent, "sefin-radio", never, { "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "class": { "alias": "class"; "required": false; }; "label": { "alias": "label"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; }, { "valueChange": "valueChange"; "checkedChange": "checkedChange"; }, never, never, true, never>;
 }
 
-interface DropdownOption {
+interface SelectOption {
+    value: string | number;
     label: string;
-    value: any;
     disabled?: boolean;
 }
-declare class DropdownComponent {
-    options: DropdownOption[];
+declare class SelectComponent implements ControlValueAccessor, OnInit, OnDestroy, OnChanges {
+    containerRef?: ElementRef<HTMLDivElement>;
+    dropdownRef?: ElementRef<HTMLDivElement>;
+    buttonRef?: ElementRef<HTMLButtonElement>;
+    options: SelectOption[];
     placeholder: string;
     disabled: boolean;
-    size: 'sm' | 'md' | 'lg';
-    selectionChange: EventEmitter<any>;
+    size: InputSize;
+    class: string;
+    value: string | number | null;
+    valueChange: EventEmitter<string | number>;
+    optionSelected: EventEmitter<SelectOption>;
     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>;
+    selectedIndex: number;
+    private onChange;
+    private onTouched;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    onClickOutside(event: MouseEvent): void;
+    onEscapeKey(event: Event): void;
+    toggleDropdown(): void;
+    openDropdown(): void;
+    closeDropdown(): void;
+    selectOption(option: SelectOption): void;
+    onKeyDown(event: KeyboardEvent): void;
+    private updateSelectedIndex;
+    private scrollToSelected;
+    getSelectedLabel(): string;
+    writeValue(value: string | number | null): void;
+    registerOnChange(fn: (value: string | number | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    get buttonClasses(): string;
+    get containerClasses(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SelectComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent, "sefin-select", never, { "options": { "alias": "options"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; "class": { "alias": "class"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "valueChange": "valueChange"; "optionSelected": "optionSelected"; }, never, never, true, never>;
+}
+
+declare class SwitchComponent implements ControlValueAccessor {
+    size: InputSize;
+    disabled: boolean;
+    class: string;
+    label: string;
+    name: string;
+    value: boolean;
+    valueChange: EventEmitter<boolean>;
+    checkedChange: EventEmitter<boolean>;
+    private onChange;
+    private onTouched;
+    onSwitchChange(event: Event): void;
+    writeValue(value: boolean): void;
+    registerOnChange(fn: (value: boolean) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    get wrapperClasses(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SwitchComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SwitchComponent, "sefin-switch", never, { "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "class": { "alias": "class"; "required": false; }; "label": { "alias": "label"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "valueChange": "valueChange"; "checkedChange": "checkedChange"; }, never, never, true, never>;
+}
+
+declare class TypographyComponent {
+    variant: TypographyVariant;
+    size?: TypographySize;
+    weight?: TypographyWeight;
+    color: TypographyColor;
+    lineHeight?: TypographyLineHeight;
+    class: string;
+    text?: string;
+    get typographyClasses(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TypographyComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TypographyComponent, "sefin-typography", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "weight": { "alias": "weight"; "required": false; }; "color": { "alias": "color"; "required": false; }; "lineHeight": { "alias": "lineHeight"; "required": false; }; "class": { "alias": "class"; "required": false; }; "text": { "alias": "text"; "required": false; }; }, {}, never, ["*", "*", "*", "*", "*", "*", "*", "*"], true, never>;
+}
+
+type DividerOrientation = 'horizontal' | 'vertical';
+type DividerVariant = 'solid' | 'dashed' | 'dotted';
+declare class DividerComponent {
+    /** Divider orientation. Options: 'horizontal' | 'vertical' */
+    orientation: DividerOrientation;
+    /** Divider variant style. Options: 'solid' | 'dashed' | 'dotted' */
+    variant: DividerVariant;
+    /** Spacing around the divider (margin) */
+    spacing: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Thickness of the divider */
+    thickness: 'thin' | 'medium' | 'thick';
+    /** Additional CSS classes */
+    class: string;
+    get dividerClasses(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DividerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DividerComponent, "sefin-divider", never, { "orientation": { "alias": "orientation"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "spacing": { "alias": "spacing"; "required": false; }; "thickness": { "alias": "thickness"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
 }
 
-declare class CardComponent {
-    variant: CardVariant;
+type SpinnerSize = 'sm' | 'md' | 'lg';
+type SpinnerVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'default';
+declare class SpinnerComponent {
+    /** Spinner size. Options: 'sm' | 'md' | 'lg' */
+    size: SpinnerSize;
+    /** Spinner variant color. Options: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'default' */
+    variant: SpinnerVariant;
+    /** Whether the spinner should be displayed inline (smaller margins) */
+    inline: boolean;
+    /** Additional CSS classes */
     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>;
+    get spinnerClasses(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SpinnerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SpinnerComponent, "sefin-spinner", never, { "size": { "alias": "size"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, 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>;
+type ProgressBarVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'error';
+type ProgressBarSize = 'sm' | 'md' | 'lg';
+declare class ProgressBarComponent {
+    /** Progress value (0-100) */
+    value: number;
+    /** Progress bar variant color. Options: 'primary' | 'secondary' | 'success' | 'warning' | 'error' */
+    variant: ProgressBarVariant;
+    /** Progress bar size. Options: 'sm' | 'md' | 'lg' */
+    size: ProgressBarSize;
+    /** Whether to show the progress percentage label */
+    showLabel: boolean;
+    /** Whether the progress bar is in indeterminate state (animated) */
+    indeterminate: boolean;
+    /** Additional CSS classes */
+    class: string;
+    get progressBarClasses(): string;
+    get clampedValue(): number;
+    get percentageText(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ProgressBarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ProgressBarComponent, "sefin-progress-bar", never, { "value": { "alias": "value"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "showLabel": { "alias": "showLabel"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
 }
 
-interface LoginCredentials {
-    email: string;
-    password: string;
+type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+type TooltipTrigger = 'hover' | 'click' | 'focus';
+declare class TooltipComponent implements AfterViewInit, OnDestroy {
+    private cdr;
+    /** Tooltip text content */
+    text: string;
+    /** Tooltip position. Options: 'top' | 'bottom' | 'left' | 'right' */
+    position: TooltipPosition;
+    /** Trigger event. Options: 'hover' | 'click' | 'focus' */
+    trigger: TooltipTrigger;
+    /** Delay before showing tooltip (in milliseconds) */
+    delay: number;
+    /** Whether the tooltip is disabled */
+    disabled: boolean;
+    /** Additional CSS classes */
+    class: string;
+    tooltipContent: ElementRef<HTMLDivElement>;
+    tooltipTrigger: ElementRef<HTMLDivElement>;
+    isVisible: boolean;
+    private showTimeout?;
+    private hideTimeout?;
+    constructor(cdr: ChangeDetectorRef);
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    onMouseEnter(event: Event): void;
+    onMouseLeave(event: Event): void;
+    onClick(event: Event): void;
+    onFocus(event: Event): void;
+    onBlur(event: Event): void;
+    show(): void;
+    hide(): void;
+    toggle(): void;
+    private clearTimeouts;
+    private handleOutsideClick;
+    get tooltipClasses(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TooltipComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TooltipComponent, "sefin-tooltip", never, { "text": { "alias": "text"; "required": false; }; "position": { "alias": "position"; "required": false; }; "trigger": { "alias": "trigger"; "required": false; }; "delay": { "alias": "delay"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
+type AlertVariant = 'success' | 'warning' | 'error' | 'info' | 'default';
+type AlertSize = 'sm' | 'md' | 'lg';
+declare class AlertComponent {
+    /** Alert variant style. Options: 'success' | 'warning' | 'error' | 'info' | 'default' */
+    variant: AlertVariant;
+    /** Alert size. Options: 'sm' | 'md' | 'lg' */
+    size: AlertSize;
+    /** Alert title (optional) */
+    title?: string;
+    /** Whether the alert can be dismissed (shows close button) */
+    dismissible: boolean;
+    /** Whether to show an icon */
+    showIcon: boolean;
+    /** Whether the alert is visible */
+    visible: boolean;
+    /** Additional CSS classes */
+    class: string;
+    /** Event emitted when the alert is dismissed */
+    dismissed: EventEmitter<void>;
+    onDismiss(): void;
+    get alertClasses(): string;
+    get iconClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AlertComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AlertComponent, "sefin-alert", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "title": { "alias": "title"; "required": false; }; "dismissible": { "alias": "dismissible"; "required": false; }; "showIcon": { "alias": "showIcon"; "required": false; }; "visible": { "alias": "visible"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "dismissed": "dismissed"; }, never, ["*"], true, never>;
 }
-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>;
+
+type ToastVariant = 'success' | 'warning' | 'error' | 'info' | 'default';
+type ToastPosition = 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
+declare class ToastComponent implements OnInit, OnDestroy {
+    private cdr;
+    /** Toast variant style. Options: 'success' | 'warning' | 'error' | 'info' | 'default' */
+    variant: ToastVariant;
+    /** Toast position. Options: 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center' */
+    position: ToastPosition;
+    /** Toast title (optional) */
+    title?: string;
+    /** Toast message */
+    message: string;
+    /** Duration in milliseconds before auto-dismiss (0 = no auto-dismiss) */
+    duration: number;
+    /** Whether to show an icon */
+    showIcon: boolean;
+    /** Whether the toast can be dismissed manually */
+    dismissible: boolean;
+    /** Additional CSS classes */
+    class: string;
+    /** Event emitted when the toast is dismissed */
+    dismissed: EventEmitter<void>;
+    isVisible: boolean;
+    isExiting: boolean;
+    private dismissTimeout?;
+    constructor(cdr: ChangeDetectorRef);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    dismiss(): void;
+    get toastClasses(): string;
+    get iconClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ToastComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToastComponent, "sefin-toast", never, { "variant": { "alias": "variant"; "required": false; }; "position": { "alias": "position"; "required": false; }; "title": { "alias": "title"; "required": false; }; "message": { "alias": "message"; "required": false; }; "duration": { "alias": "duration"; "required": false; }; "showIcon": { "alias": "showIcon"; "required": false; }; "dismissible": { "alias": "dismissible"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "dismissed": "dismissed"; }, never, ["*"], true, never>;
 }
 
-interface ToolbarAction {
+interface AutocompleteOption {
+    value: string | number;
     label: string;
-    icon?: string;
-    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
-    action: () => void;
+    disabled?: boolean;
 }
-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 class AutocompleteComponent implements OnInit, OnDestroy, OnChanges {
+    inputRef?: ElementRef<HTMLInputElement>;
+    dropdownRef?: ElementRef<HTMLDivElement>;
+    containerRef?: ElementRef<HTMLDivElement>;
+    options: AutocompleteOption[];
+    placeholder: string;
+    disabled: boolean;
+    size: InputSize;
+    class: string;
+    value: string | number | null;
+    minChars: number;
+    maxResults: number;
+    valueChange: EventEmitter<string | number>;
+    optionSelected: EventEmitter<AutocompleteOption>;
+    inputChange: EventEmitter<string>;
+    searchText: string;
+    filteredOptions: AutocompleteOption[];
+    isOpen: boolean;
+    selectedIndex: number;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    onClickOutside(event: MouseEvent): void;
+    onInputChange(value: string): void;
+    filterOptions(): void;
+    selectOption(option: AutocompleteOption): void;
+    onInputFocus(): void;
+    onInputBlur(): void;
+    onKeyDown(event: KeyboardEvent): void;
+    private scrollToSelected;
+    clearValue(): void;
+    get inputClasses(): string;
+    get containerClasses(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AutocompleteComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AutocompleteComponent, "sefin-autocomplete", never, { "options": { "alias": "options"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; "class": { "alias": "class"; "required": false; }; "value": { "alias": "value"; "required": false; }; "minChars": { "alias": "minChars"; "required": false; }; "maxResults": { "alias": "maxResults"; "required": false; }; }, { "valueChange": "valueChange"; "optionSelected": "optionSelected"; "inputChange": "inputChange"; }, 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 };
+export { AlertComponent, AutocompleteComponent, AvatarComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, BadgeComponent, ButtonComponent, COLOR_TOKENS, CheckboxComponent, ChipComponent, DARK_THEME, DESIGN_TOKENS, DividerComponent, FabButtonComponent, IconButtonComponent, IconComponent, LIGHT_THEME, LUCIDE_ICON_MAP, LinkComponent, ProgressBarComponent, RadioComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, SpinnerComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, TagComponent, ThemeLoader, ToastComponent, TooltipComponent, TypographyComponent, getLucideIcon, hasLucideIcon };
+export type { AlertSize, AlertVariant, AutocompleteOption, AvatarSize, BadgeSize, BadgeVariant, BaseComponent, BorderRadiusToken, ButtonSize, ButtonVariant, CardVariant, ChipSize, ChipVariant, ColorShade, ColorTokenName, CustomTheme, DividerOrientation, DividerVariant, FabSize, IconSize, InputSize, LinkSize, LinkVariant, ProgressBarSize, ProgressBarVariant, SelectOption, ShadowToken, SpacingToken, SpinnerSize, SpinnerVariant, TagSize, TagVariant, Theme, ThemeColors, ToastPosition, ToastVariant, TooltipPosition, TooltipTrigger, TypographyColor, TypographyLineHeight, TypographySize, TypographyToken, TypographyVariant, TypographyWeight };