@lesterarte/sefin-ui 0.0.3-dev.2 → 0.0.3-dev.20

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

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
-import { EventEmitter } from '@angular/core';
+import { EventEmitter, OnInit, OnDestroy, OnChanges, ElementRef, SimpleChanges, AfterViewInit } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
 
 /**
  * Color design tokens as TypeScript constants
@@ -443,37 +444,55 @@ 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: {
-        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;
+    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?: {
@@ -549,8 +568,15 @@ 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 | CustomTheme): 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
      */
@@ -558,15 +584,21 @@ declare class ThemeLoader {
     /**
      * 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 | CustomTheme): string;
+    static getThemeCSS(themeName?: Theme | CustomTheme, variant?: 'light' | 'dark'): string;
 }
 
 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;
@@ -575,7 +607,215 @@ 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>;
 }
 
+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 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>;
+}
+
+interface AutocompleteOption {
+    value: string | number;
+    label: string;
+    disabled?: boolean;
+}
+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 class CheckboxComponent implements ControlValueAccessor, AfterViewInit, OnChanges {
+    checkboxInput?: ElementRef<HTMLInputElement>;
+    size: InputSize;
+    disabled: boolean;
+    indeterminate: boolean;
+    class: string;
+    label: string;
+    name: string;
+    value: boolean;
+    valueChange: EventEmitter<boolean>;
+    checkedChange: EventEmitter<boolean>;
+    private onChange;
+    private onTouched;
+    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 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>;
+}
+
+interface SelectOption {
+    value: string | number;
+    label: string;
+    disabled?: boolean;
+}
+declare class SelectComponent implements ControlValueAccessor, OnInit, OnDestroy, OnChanges {
+    containerRef?: ElementRef<HTMLDivElement>;
+    dropdownRef?: ElementRef<HTMLDivElement>;
+    buttonRef?: ElementRef<HTMLButtonElement>;
+    options: SelectOption[];
+    placeholder: string;
+    disabled: boolean;
+    size: InputSize;
+    class: string;
+    value: string | number | null;
+    valueChange: EventEmitter<string | number>;
+    optionSelected: EventEmitter<SelectOption>;
+    isOpen: boolean;
+    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>;
+}
+
 declare const STYLES_PATH = "./styles/index.scss";
 
-export { BORDER_RADIUS_TOKENS, BRAND_THEME, ButtonComponent, COLOR_TOKENS, DARK_THEME, DESIGN_TOKENS, LIGHT_THEME, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, TYPOGRAPHY_TOKENS, ThemeLoader };
-export type { BaseComponent, BorderRadiusToken, ButtonSize, ButtonVariant, CardVariant, ColorShade, ColorTokenName, CustomTheme, InputSize, ShadowToken, SpacingToken, Theme, TypographyToken };
+export { AutocompleteComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, ButtonComponent, COLOR_TOKENS, CheckboxComponent, DARK_THEME, DESIGN_TOKENS, IconButtonComponent, LIGHT_THEME, LinkComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, ThemeLoader, TypographyComponent };
+export type { AutocompleteOption, BaseComponent, BorderRadiusToken, ButtonSize, ButtonVariant, CardVariant, ColorShade, ColorTokenName, CustomTheme, InputSize, LinkSize, LinkVariant, SelectOption, ShadowToken, SpacingToken, Theme, ThemeColors, TypographyColor, TypographyLineHeight, TypographySize, TypographyToken, TypographyVariant, TypographyWeight };